Font Editor

1"use client"
2 
3import type { ReactNode } from "react"
4import { useEffect, useId, useRef, useState } from "react"
5import { Button } from "@/components/ui/button"
6import { Input } from "@/components/ui/input"
7import {
8  Popover,
9  PopoverContent,
10  PopoverTrigger,
11} from "@/components/ui/popover"
12import { cn } from "@/lib/utils"
13import {
14  ABSOLUTE_SIZES,
15  defaultParts,
16  FONT_STRETCHES,
17  FONT_STYLES,
18  FONT_VARIANTS,
19  FONT_WEIGHT_KEYWORDS,
20  formatFont,
21  GENERIC_FAMILIES,
22  parseFont,
23  SYSTEM_FONTS,
24  WEB_SAFE_FAMILIES,
25} from "./font-editor.helpers"
26import type { FontParts, FontString } from "./font-editor.types"
27 
28const SIZE_UNITS = ["px", "rem", "em", "%", "vw", "vh", "pt"] as const
29 
30const SAMPLE_TEXT_DEFAULT = "The quick brown fox jumps over the lazy dog"
31 
32// Monotonic source of stable per-row ids for the family list (see FamilyEditor).
33let nextFamilyId = 0
34 
35// ---------------------------------------------------------------------------
36// Shared props
37// ---------------------------------------------------------------------------
38 
39export interface FontEditorPanelProps {
40  value: FontString | (string & {})
41  onChange: (value: FontString) => void
42  className?: string
43  "aria-label"?: string
44}
45 
46export interface FontEditorProps extends FontEditorPanelProps {}
47 
48// ---------------------------------------------------------------------------
49// shorthand-parts helpers (UI-local)
50// ---------------------------------------------------------------------------
51 
52interface Shorthand {
53  kind: "shorthand"
54  style?: string
55  variant?: string
56  weight?: string
57  stretch?: string
58  size: string
59  lineHeight?: string
60  family: string[]
61}
62 
63function asShorthand(parts: FontParts): Shorthand {
64  if (parts.kind === "shorthand") return parts
65  // Converting from a system keyword → seed a shorthand. `defaultParts()` is
66  // typed as the wider `FontParts`, so narrow on the discriminant instead of
67  // casting; the fallback keeps a real shorthand without an unchecked `as`.
68  const seed = defaultParts()
69  if (seed.kind === "shorthand") return seed
70  return { kind: "shorthand", size: "16px", family: ["sans-serif"] }
71}
72 
73// A number for the dual control: mandatory mantissa (≥1 digit, so a lone `-`
74// or a bare unit never matches) with an optional exponent, then an optional
75// unit. Empty / sign-only / unit-only inputs fall through to the opaque path.
76const SIZE_NUM_UNIT_RE = /^([+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)([a-z%]*)$/i
77 
78// … truncated