{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "font-editor", "title": "Font Editor", "description": "Ridiculously typed CSS font-shorthand editor with a compile-time strict-order parse — an order-free style/variant/weight/stretch prefix, a mandatory , optional / , and a mandatory list, or a system-font keyword. Ships the cssFont helper, parseFont/formatFont, and a live text preview rendered with the built font.", "dependencies": [], "registryDependencies": [ "ridiculous-type-kit", "unit-input", "button", "popover", "input", "label", "select" ], "files": [ { "path": "src/components/ui/font-editor/index.ts", "content": "export type {\n FamilyEditorProps,\n FontEditorPanelProps,\n FontEditorProps,\n FontPreviewProps,\n PropertyFieldProps,\n} from \"./font-editor\"\nexport {\n FamilyEditor,\n FontEditor,\n FontEditorPanel,\n FontPreview,\n PropertyField,\n} from \"./font-editor\"\nexport {\n ABSOLUTE_SIZES,\n classifyFamilyToken,\n classifyLineHeight,\n classifySize,\n classifyStretch,\n classifyStyle,\n classifyVariant,\n classifyWeight,\n defaultParts,\n FONT_STRETCHES,\n FONT_STYLES,\n FONT_VARIANTS,\n FONT_WEIGHT_KEYWORDS,\n fontFamilies,\n formatFont,\n GENERIC_FAMILIES,\n parseFont,\n SYSTEM_FONTS,\n WEB_SAFE_FAMILIES,\n} from \"./font-editor.helpers\"\nexport type {\n FamiliesOf,\n FontGenericFamily,\n FontLiteral,\n FontParts,\n FontString,\n FontStringKey,\n FontStringMap,\n IsFamilyToken,\n IsFontSize,\n IsFontStretch,\n IsFontStyle,\n IsFontVariant,\n IsFontWeight,\n IsLineHeight,\n IsSystemFont,\n LineHeightOf,\n SizeOf,\n SystemFontKeyword,\n} from \"./font-editor.types\"\nexport { cssFont } from \"./font-editor.types\"\n", "type": "registry:ui", "target": "components/ui/font-editor/index.ts" }, { "path": "src/components/ui/font-editor/font-editor.tsx", "content": "\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport { useEffect, useId, useRef, useState } from \"react\"\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport { cn } from \"@/lib/utils\"\nimport {\n ABSOLUTE_SIZES,\n defaultParts,\n FONT_STRETCHES,\n FONT_STYLES,\n FONT_VARIANTS,\n FONT_WEIGHT_KEYWORDS,\n formatFont,\n GENERIC_FAMILIES,\n parseFont,\n SYSTEM_FONTS,\n WEB_SAFE_FAMILIES,\n} from \"./font-editor.helpers\"\nimport type { FontParts, FontString } from \"./font-editor.types\"\n\nconst SIZE_UNITS = [\"px\", \"rem\", \"em\", \"%\", \"vw\", \"vh\", \"pt\"] as const\n\nconst SAMPLE_TEXT_DEFAULT = \"The quick brown fox jumps over the lazy dog\"\n\n// Monotonic source of stable per-row ids for the family list (see FamilyEditor).\nlet nextFamilyId = 0\n\n// ---------------------------------------------------------------------------\n// Shared props\n// ---------------------------------------------------------------------------\n\nexport interface FontEditorPanelProps {\n value: FontString | (string & {})\n onChange: (value: FontString) => void\n className?: string\n \"aria-label\"?: string\n}\n\nexport interface FontEditorProps extends FontEditorPanelProps {}\n\n// ---------------------------------------------------------------------------\n// shorthand-parts helpers (UI-local)\n// ---------------------------------------------------------------------------\n\ninterface Shorthand {\n kind: \"shorthand\"\n style?: string\n variant?: string\n weight?: string\n stretch?: string\n size: string\n lineHeight?: string\n family: string[]\n}\n\nfunction asShorthand(parts: FontParts): Shorthand {\n if (parts.kind === \"shorthand\") return parts\n // Converting from a system keyword → seed a shorthand. `defaultParts()` is\n // typed as the wider `FontParts`, so narrow on the discriminant instead of\n // casting; the fallback keeps a real shorthand without an unchecked `as`.\n const seed = defaultParts()\n if (seed.kind === \"shorthand\") return seed\n return { kind: \"shorthand\", size: \"16px\", family: [\"sans-serif\"] }\n}\n\n// A number for the dual control: mandatory mantissa (≥1 digit, so a lone `-`\n// or a bare unit never matches) with an optional exponent, then an optional\n// unit. Empty / sign-only / unit-only inputs fall through to the opaque path.\nconst SIZE_NUM_UNIT_RE = /^([+-]?(?:\\d+\\.?\\d*|\\.\\d+)(?:e[+-]?\\d+)?)([a-z%]*)$/i\n\n/** Split a size like \"16px\" into number + unit for the dual control. */\nfunction splitSize(size: string): {\n num: string\n unit: string\n opaque: boolean\n} {\n if ((ABSOLUTE_SIZES as readonly string[]).includes(size)) {\n return { num: size, unit: \"\", opaque: true }\n }\n const m = size.match(SIZE_NUM_UNIT_RE)\n if (!m) return { num: size, unit: \"\", opaque: true }\n return { num: m[1], unit: m[2], opaque: false }\n}\n\n// ---------------------------------------------------------------------------\n// FontEditor — popover-wrapped\n// ---------------------------------------------------------------------------\n\nexport function FontEditor(props: FontEditorProps) {\n const {\n value,\n className,\n \"aria-label\": ariaLabel = \"Edit a CSS font shorthand\",\n } = props\n return (\n \n \n \n \n Aa\n \n {value}\n \n \n \n \n \n \n )\n}\n\n// ---------------------------------------------------------------------------\n// FontEditorPanel — inline\n// ---------------------------------------------------------------------------\n\nexport function FontEditorPanel({\n value,\n onChange,\n className,\n \"aria-label\": ariaLabel = \"CSS font shorthand editor\",\n}: FontEditorPanelProps) {\n const [parts, setParts] = useState(\n () => parseFont(String(value)) ?? defaultParts(),\n )\n const lastEmittedRef = useRef(null)\n\n // Resync from external value (skip our own emits).\n useEffect(() => {\n if (value === lastEmittedRef.current) return\n const parsed = parseFont(String(value))\n if (parsed !== null) setParts(parsed)\n }, [value])\n\n const commit = (next: FontParts) => {\n setParts(next)\n const str = formatFont(next)\n lastEmittedRef.current = str\n onChange(str as FontString)\n }\n\n const setShorthand = (patch: Partial) => {\n const base = asShorthand(parts)\n commit({ ...base, ...patch })\n }\n\n const isSystem = parts.kind === \"system\"\n\n return (\n \n {\n if (mode === \"system\") {\n commit({ kind: \"system\", keyword: \"caption\" })\n } else {\n commit(defaultParts())\n }\n }}\n />\n\n {isSystem ? (\n commit({ kind: \"system\", keyword })}\n />\n ) : (\n setShorthand(patch)}\n />\n )}\n\n \n \n \n )\n}\n\n// ---------------------------------------------------------------------------\n// ModeToggle (internal)\n// ---------------------------------------------------------------------------\n\nfunction ModeToggle({\n mode,\n onMode,\n}: {\n mode: \"shorthand\" | \"system\"\n onMode: (mode: \"shorthand\" | \"system\") => void\n}) {\n return (\n
\n {([\"shorthand\", \"system\"] as const).map((m) => (\n onMode(m)}\n className={cn(\n \"flex-1 rounded px-2 py-1 font-mono text-xs\",\n mode === m\n ? \"bg-primary text-primary-foreground\"\n : \"text-muted-foreground hover:bg-muted\",\n )}\n >\n {m === \"shorthand\" ? \"shorthand\" : \"system font\"}\n \n ))}\n
\n )\n}\n\nfunction SystemKeywordSelect({\n value,\n onChange,\n}: {\n value: string\n onChange: (keyword: (typeof SYSTEM_FONTS)[number]) => void\n}) {\n return (\n \n \n onChange(e.target.value as (typeof SYSTEM_FONTS)[number])\n }\n className=\"h-8 w-full rounded border bg-background px-1.5 font-mono text-xs\"\n >\n {SYSTEM_FONTS.map((k) => (\n \n ))}\n \n \n )\n}\n\n// ---------------------------------------------------------------------------\n// ShorthandFields (internal) — the property rows\n// ---------------------------------------------------------------------------\n\nfunction ShorthandFields({\n parts,\n onChange,\n}: {\n parts: Shorthand\n onChange: (patch: Partial) => void\n}) {\n return (\n
\n
\n \n onChange({ style: v })}\n />\n \n \n onChange({ variant: v })}\n />\n \n \n onChange({ weight: v })}\n />\n \n \n onChange({ stretch: v })}\n />\n \n
\n\n
\n \n onChange({ size: v })}\n />\n \n \n onChange({ lineHeight: v === \"\" ? undefined : v })}\n />\n \n
\n\n \n onChange({ family })}\n />\n \n
\n )\n}\n\n// ---------------------------------------------------------------------------\n// PropertyField (public)\n// ---------------------------------------------------------------------------\n\nexport interface PropertyFieldProps {\n label: string\n children: ReactNode\n className?: string\n}\n\nexport function PropertyField({\n label,\n children,\n className,\n}: PropertyFieldProps) {\n return (\n
\n \n {label}\n \n {children}\n
\n )\n}\n\n// ---------------------------------------------------------------------------\n// Field controls (internal)\n// ---------------------------------------------------------------------------\n\nfunction KeywordSelect({\n ariaLabel,\n options,\n value,\n allowEmpty,\n onChange,\n}: {\n ariaLabel: string\n options: readonly string[]\n value: string\n allowEmpty?: boolean\n onChange: (value: string) => void\n}) {\n return (\n onChange(e.target.value)}\n className=\"h-8 w-full rounded border bg-background px-1.5 font-mono text-xs\"\n >\n {allowEmpty ? : null}\n {options\n .filter((o) => !(allowEmpty && o === \"normal\"))\n .map((o) => (\n \n ))}\n \n )\n}\n\nfunction WeightControl({\n value,\n onChange,\n}: {\n value: string\n onChange: (value: string) => void\n}) {\n const isNumeric = /^\\d+$/.test(value)\n return (\n \n {\n const v = e.target.value\n onChange(v === \"__number\" ? \"400\" : v)\n }}\n className=\"h-8 flex-1 rounded border bg-background px-1.5 font-mono text-xs\"\n >\n {FONT_WEIGHT_KEYWORDS.map((k) => (\n \n ))}\n \n \n {isNumeric ? (\n onChange(e.target.value)}\n className=\"h-8 w-16 font-mono text-xs\"\n />\n ) : null}\n \n )\n}\n\nfunction SizeControl({\n value,\n onChange,\n}: {\n value: string\n onChange: (value: string) => void\n}) {\n const { num, unit, opaque } = splitSize(value)\n const usingKeyword = (ABSOLUTE_SIZES as readonly string[]).includes(value)\n\n return (\n \n onChange(e.target.value)}\n className=\"h-8 flex-1 rounded-r-none border-r-0 font-mono text-xs\"\n />\n {\n const u = e.target.value\n if (u === \"keyword\") {\n onChange(\"medium\")\n } else if (u !== \"\") {\n onChange(`${num || \"16\"}${u}`)\n }\n }}\n className=\"h-8 rounded-r-md rounded-l-none border border-input bg-background px-1 font-mono text-xs\"\n >\n {SIZE_UNITS.map((u) => (\n \n ))}\n \n {opaque && !usingKeyword ? : null}\n \n \n )\n}\n\nfunction LineHeightControl({\n value,\n onChange,\n}: {\n value: string\n onChange: (value: string) => void\n}) {\n return (\n onChange(e.target.value)}\n className=\"h-8 w-full font-mono text-xs\"\n />\n )\n}\n\n// ---------------------------------------------------------------------------\n// FamilyEditor (public) — the comma-separated family list\n// ---------------------------------------------------------------------------\n\nexport interface FamilyEditorProps {\n value: string[]\n onChange: (value: string[]) => void\n className?: string\n}\n\nexport function FamilyEditor({\n value,\n onChange,\n className,\n}: FamilyEditorProps) {\n // One stable id per row, created when the row is created. Keying on this id\n // (instead of the array index) keeps a surviving row's DOM element identity\n // across add/remove, so focus/IME state on a row above a removal is not lost.\n const idsRef = useRef([])\n // Reconcile id count with the current value length: handler-driven mutations\n // keep them in lockstep below, so this only fires for external replacements\n // (resync / fallback). Existing ids are preserved by position; new slots get\n // fresh ids.\n if (idsRef.current.length !== value.length) {\n const next = idsRef.current.slice(0, value.length)\n while (next.length < value.length) next.push(nextFamilyId++)\n idsRef.current = next\n }\n const ids = idsRef.current\n\n const setAt = (index: number, next: string) => {\n onChange(value.map((f, i) => (i === index ? next : f)))\n }\n const removeAt = (index: number) => {\n const next = value.filter((_, i) => i !== index)\n if (next.length === 0) {\n // fall back to a single default family — one fresh row, one fresh id\n idsRef.current = [nextFamilyId++]\n onChange([\"sans-serif\"])\n return\n }\n idsRef.current = ids.filter((_, i) => i !== index)\n onChange(next)\n }\n const add = (family: string) => {\n idsRef.current = [...ids, nextFamilyId++]\n onChange([...value, family])\n }\n\n return (\n
\n {value.map((family, i) => (\n
\n setAt(i, e.target.value)}\n className=\"h-8 flex-1 font-mono text-xs\"\n />\n removeAt(i)}\n aria-label={`Remove family ${i + 1}`}\n className=\"rounded p-1 text-muted-foreground hover:bg-destructive/10 hover:text-destructive\"\n >\n ×\n \n
\n ))}\n {\n const f = e.target.value\n if (f) add(f)\n e.target.value = \"\"\n }}\n className=\"h-8 w-full rounded-md border border-dashed bg-background px-2 font-mono text-muted-foreground text-xs\"\n >\n \n \n {GENERIC_FAMILIES.map((f) => (\n \n ))}\n \n \n {WEB_SAFE_FAMILIES.map((f) => (\n \n ))}\n \n \n
\n )\n}\n\n// ---------------------------------------------------------------------------\n// LiveString (internal)\n// ---------------------------------------------------------------------------\n\nfunction LiveString({ value }: { value: string }) {\n return (\n \n {`font: ${value};`}\n \n )\n}\n\n// ---------------------------------------------------------------------------\n// FontPreview (public) — the live text preview\n// ---------------------------------------------------------------------------\n\nexport interface FontPreviewProps {\n value: string\n sampleText?: string\n editable?: boolean\n className?: string\n}\n\n/**\n * Live text preview: renders sample text with the built `font` shorthand\n * applied via inline style. The sample text is editable when `editable`\n * (default true). This is a React element rendering text — no browser\n * tooling involved.\n */\nexport function FontPreview({\n value,\n sampleText,\n editable = true,\n className,\n}: FontPreviewProps) {\n const id = useId()\n const [text, setText] = useState(sampleText ?? SAMPLE_TEXT_DEFAULT)\n const shown = sampleText ?? text\n\n return (\n
\n
\n preview\n {editable && sampleText === undefined ? (\n setText(e.target.value)}\n className=\"h-7 w-40 rounded border bg-background px-1.5 text-xs\"\n />\n ) : null}\n
\n \n {shown}\n
\n \n )\n}\n", "type": "registry:ui", "target": "components/ui/font-editor/font-editor.tsx" }, { "path": "src/components/ui/font-editor/font-editor.types.ts", "content": "// =====================================================================\n// font-editor.types.ts\n//\n// The \"ridiculous\" tier: a compile-time STRICT-ORDER PARSE of the CSS\n// `font` shorthand. Unlike the order-free function-list dispatch of\n// transform/filter, the `font` shorthand is the most ORDER-SENSITIVE of\n// the common shorthands:\n//\n// [ style || variant || weight || stretch ]? [ / ]? #\n//\n// …or a single system-font keyword as the WHOLE value.\n//\n// \"italic bold 16px/1.5 'Times New Roman', serif\" → the literal\n// \"16px serif\" → the literal\n// \"16px\" → never (no family)\n// \"italic oblique 16px serif\" → never (two styles)\n// \"caption\" → \"caption\"\n//\n// The ORDER is the point: prefix tokens are order-free but each KIND\n// appears at most once; is mandatory and precedes the family; the\n// optional `/ ` attaches to the size; is a\n// mandatory comma-separated list that ends the value.\n//\n// Built entirely on `ridiculous-type-kit`. Structure mirrors\n// transform-builder.types.ts: kit imports → classifiers → ordered-parse\n// state machine → FontLiteral + cssFont → suggestion strings → utility\n// types → internal discriminated-union state.\n// =====================================================================\n\nimport type {\n Digit,\n IsLength,\n IsNumber,\n IsPercentage,\n Letter,\n Or,\n SplitByComma,\n SplitBySpace,\n Trim,\n} from \"@/lib/ridiculous-type-kit\"\n\n// =====================================================================\n// 1. KEYWORD UNIONS\n// =====================================================================\n\n/** A system-font keyword usable as the WHOLE `font` value. */\nexport type SystemFontKeyword =\n | \"caption\"\n | \"icon\"\n | \"menu\"\n | \"message-box\"\n | \"small-caption\"\n | \"status-bar\"\n\n/** The CSS generic font-family keywords. */\nexport type FontGenericFamily =\n | \"serif\"\n | \"sans-serif\"\n | \"monospace\"\n | \"cursive\"\n | \"fantasy\"\n | \"system-ui\"\n | \"ui-serif\"\n | \"ui-sans-serif\"\n | \"ui-monospace\"\n | \"ui-rounded\"\n\ntype FontStyleKeyword = \"normal\" | \"italic\" | \"oblique\"\ntype FontVariantKeyword = \"normal\" | \"small-caps\"\ntype FontWeightKeyword = \"normal\" | \"bold\" | \"bolder\" | \"lighter\"\ntype FontStretchKeyword =\n | \"ultra-condensed\"\n | \"extra-condensed\"\n | \"condensed\"\n | \"semi-condensed\"\n | \"normal\"\n | \"semi-expanded\"\n | \"expanded\"\n | \"extra-expanded\"\n | \"ultra-expanded\"\ntype AbsoluteSizeKeyword =\n | \"xx-small\"\n | \"x-small\"\n | \"small\"\n | \"medium\"\n | \"large\"\n | \"x-large\"\n | \"xx-large\"\n | \"xxx-large\"\n | \"larger\"\n | \"smaller\"\n\n// =====================================================================\n// 2. TOKEN CLASSIFIERS — one boolean predicate per grammar slot.\n// Each operates on an already-trimmed token.\n// =====================================================================\n\n/** Characters allowed anywhere in a bare family ident (incl. inner spaces). */\ntype IdentChar = Letter | Digit | \"-\" | \"_\" | \" \"\n\ntype AllIdentChars = S extends \"\"\n ? true\n : S extends `${infer C}${infer R}`\n ? C extends IdentChar\n ? AllIdentChars\n : false\n : false\n\nexport type IsFontStyle = T extends FontStyleKeyword\n ? true\n : false\n\nexport type IsFontVariant = T extends FontVariantKeyword\n ? true\n : false\n\nexport type IsFontWeight = T extends FontWeightKeyword\n ? true\n : IsNumber\n\nexport type IsFontStretch = T extends FontStretchKeyword\n ? true\n : IsPercentage\n\nexport type IsFontSize = T extends AbsoluteSizeKeyword\n ? true\n : Or, IsPercentage>\n\nexport type IsLineHeight = T extends \"normal\"\n ? true\n : Or, Or, IsPercentage>>\n\n/**\n * One font-family token: a generic-family keyword, OR a quoted string\n * (any inner content), OR a bare custom-ident (weak-validated as\n * ident-safe — first char a letter/`_`/`-`, body letters/digits/`-`/`_`/\n * spaces). The full CSS custom-ident grammar is deferred (documented).\n */\nexport type IsFamilyToken = T extends FontGenericFamily\n ? true\n : T extends `\"${string}\"`\n ? true\n : T extends `'${string}'`\n ? true\n : T extends `${infer First}${string}`\n ? First extends Letter | \"_\" | \"-\"\n ? AllIdentChars\n : false\n : false\n\n// =====================================================================\n// 3. ORDERED-PARSE STATE MACHINE — the namesake.\n//\n// ParsePrefix consumes order-free prefix tokens (<=1 of each kind, with a\n// 4-flag \"Used\" accumulator). The first token that is NOT a still-free\n// prefix kind starts the mandatory . ParseSizeAndRest validates the\n// size and the optional `/ ` (attached + spaced forms), then\n// ParseFamily rejoins the remaining tokens, splits on commas, and requires\n// a non-empty list of family tokens.\n// =====================================================================\n\ninterface Used {\n s: boolean // style consumed\n v: boolean // variant consumed\n w: boolean // weight consumed\n t: boolean // stretch consumed\n}\n\ntype EmptyUsed = { s: false; v: false; w: false; t: false }\n\n// Try to consume H as a still-FREE prefix kind. `normal` takes the first\n// free kind (style → variant → weight → stretch). Returns the next Used on\n// success, or `false` when H is not a free prefix kind.\ntype ConsumePrefix =\n IsFontStyle extends true\n ? U[\"s\"] extends false\n ? { s: true; v: U[\"v\"]; w: U[\"w\"]; t: U[\"t\"] }\n : TryVariant\n : TryVariant\n\ntype TryVariant =\n IsFontVariant extends true\n ? U[\"v\"] extends false\n ? { s: U[\"s\"]; v: true; w: U[\"w\"]; t: U[\"t\"] }\n : TryWeight\n : TryWeight\n\ntype TryWeight =\n IsFontWeight extends true\n ? U[\"w\"] extends false\n ? { s: U[\"s\"]; v: U[\"v\"]; w: true; t: U[\"t\"] }\n : TryStretch\n : TryStretch\n\ntype TryStretch =\n IsFontStretch extends true\n ? U[\"t\"] extends false\n ? { s: U[\"s\"]; v: U[\"v\"]; w: U[\"w\"]; t: true }\n : false\n : false\n\ntype ParsePrefix = Tokens extends [\n infer H extends string,\n ...infer T extends string[],\n]\n ? ConsumePrefix extends infer Next\n ? Next extends Used\n ? ParsePrefix\n : ParseSizeAndRest // H was not a free prefix kind → it is the size\n : false\n : false // ran out of tokens without ever reaching a size → invalid\n\ntype ParseSizeAndRest = Tokens extends [\n infer H extends string,\n ...infer T extends string[],\n]\n ? // attached form: \"16px/1.5\", or trailing-slash \"16px/\" with the\n // line-height in the next token (\"16px/ 1.5\")\n H extends `${infer Sz}/${infer Lh}`\n ? IsFontSize> extends true\n ? Lh extends \"\" // \"16px/\" — line-height is the next token\n ? T extends [infer N extends string, ...infer R extends string[]]\n ? IsLineHeight> extends true\n ? ParseFamily\n : false\n : false\n : IsLineHeight> extends true\n ? ParseFamily\n : false\n : false\n : IsFontSize extends true\n ? // half-spaced \"16px /1.5\" — next token starts with `/`\n T extends [infer N extends string, ...infer R extends string[]]\n ? N extends `/${infer Lh}`\n ? Lh extends \"\" // fully spaced \"16px / 1.5\" — `/` is its own token\n ? R extends [infer Lh2 extends string, ...infer R2 extends string[]]\n ? IsLineHeight> extends true\n ? ParseFamily\n : false\n : false\n : IsLineHeight> extends true\n ? ParseFamily\n : false\n : ParseFamily // no line-height\n : false // size with nothing after → no family\n : false // mandatory size missing / invalid\n : false\n\n// Rejoin the remaining (space-split) tokens, split on commas, require a\n// non-empty list where every comma-segment is a family token.\ntype ParseFamily = Tokens extends []\n ? false // family is mandatory\n : SplitByComma> extends infer Segs extends string[]\n ? Segs extends []\n ? false\n : AllFamily\n : false\n\ntype AllFamily = Segs extends [\n infer H extends string,\n ...infer T extends string[],\n]\n ? IsFamilyToken> extends true\n ? AllFamily\n : false\n : true\n\ntype Join = T extends [\n infer H extends string,\n ...infer R extends string[],\n]\n ? R extends []\n ? H\n : `${H}${Sep}${Join}`\n : \"\"\n\n// =====================================================================\n// 4. STRICT VALIDATOR + CALL-SITE HELPER\n// =====================================================================\n\n/**\n * Strict literal validator. Resolves to `S` when `S` is a structurally and\n * dimensionally valid CSS `font` shorthand (or a system-font keyword),\n * `never` otherwise. The ordered grammar is enforced: order-free prefix\n * (≤1 each of style/variant/weight/stretch) → mandatory `` →\n * optional `/ ` → mandatory `` list.\n *\n * `var()` / `calc()` resolve to `never` here (undecidable at compile time)\n * — use the casual / IntelliSense tier; the runtime parser accepts them.\n *\n * @example\n * type A = FontLiteral<\"italic bold 16px/1.5 serif\"> // the literal\n * type B = FontLiteral<\"16px\"> // never (no family)\n * type C = FontLiteral<\"caption\"> // \"caption\"\n */\nexport type FontLiteral =\n Trim extends SystemFontKeyword\n ? S\n : Trim extends \"\"\n ? never\n : SplitBySpace> extends infer Toks extends string[]\n ? Toks extends []\n ? never\n : ParsePrefix extends true\n ? S\n : never\n : never\n\n/**\n * Call-site validator helper. Mirrors `cssTransform()` / `color()` /\n * `easing()`. An invalid font shorthand becomes a type error at the\n * argument.\n */\nexport const cssFont = (value: S & FontLiteral): S => value\n\n// =====================================================================\n// 5. SUGGESTION STRINGS — IntelliSense + onChange return types\n// =====================================================================\n\n/**\n * Suggestion union — \"this is a font value\". Deliberately loose: a precise\n * template-literal union for \"optional-prefix size /lh family-list\" would be\n * enormous and slow `tsc`. Strictness lives in `FontLiteral`. A non-system\n * shorthand always contains at least one space (size + family), so the\n * `` `${string} ${string}` `` arm covers it; system keywords surface in\n * autocomplete via the keyword union. Also the `onChange` return type.\n */\nexport type FontString = SystemFontKeyword | `${string} ${string}`\n\n/** Representative output-string shapes. Mirrors `TransformStringMap`. */\nexport interface FontStringMap {\n system: SystemFontKeyword\n sizeFamily: `${string} ${string}`\n full: `${string} ${string}`\n}\n\nexport type FontStringKey = keyof FontStringMap\n\n// =====================================================================\n// 6. UTILITY TYPES — operate on font literals at the type level\n// =====================================================================\n\n/** `true` when `S` is a system-font keyword. */\nexport type IsSystemFont =\n Trim extends SystemFontKeyword ? true : false\n\n/**\n * The ordered tuple of comma-separated family tokens in a font string.\n * `[]` for a system keyword or an unparseable value.\n *\n * @example\n * type F = FamiliesOf<\"16px Times New Roman, serif\"> // [\"Times New Roman\",\"serif\"]\n */\nexport type FamiliesOf =\n Trim extends SystemFontKeyword\n ? []\n : SplitBySpace> extends infer Toks extends string[]\n ? FamiliesFromTokens\n : []\n\n// Walk past the prefix + size(+lh), then return the comma-split family list.\ntype FamiliesFromTokens<\n Tokens extends string[],\n U extends Used,\n> = Tokens extends [infer H extends string, ...infer T extends string[]]\n ? ConsumePrefix extends infer Next\n ? Next extends Used\n ? FamiliesFromTokens\n : FamiliesAfterSize\n : []\n : []\n\ntype FamiliesAfterSize = Tokens extends [\n infer H extends string,\n ...infer T extends string[],\n]\n ? H extends `${infer _Sz}/${infer Lh}`\n ? Lh extends \"\" // \"16px/\" — line-height is the next token; family follows\n ? T extends [string, ...infer R extends string[]]\n ? FamilySegs\n : []\n : FamilySegs\n : T extends [infer N extends string, ...infer R extends string[]]\n ? N extends `/${infer Lh}`\n ? Lh extends \"\"\n ? R extends [string, ...infer R2 extends string[]]\n ? FamilySegs\n : []\n : FamilySegs\n : FamilySegs\n : []\n : []\n\ntype FamilySegs = Tokens extends []\n ? []\n : SplitByComma> extends infer Segs extends string[]\n ? TrimSegs\n : []\n\ntype TrimSegs = Segs extends [\n infer H extends string,\n ...infer T extends string[],\n]\n ? [Trim, ...TrimSegs]\n : []\n\n/**\n * The `` token of a font shorthand, or `never`.\n *\n * @example\n * type S = SizeOf<\"italic 16px/1.5 serif\"> // \"16px\"\n */\nexport type SizeOf =\n Trim extends SystemFontKeyword\n ? never\n : SplitBySpace> extends infer Toks extends string[]\n ? SizeFromTokens\n : never\n\ntype SizeFromTokens = Tokens extends [\n infer H extends string,\n ...infer T extends string[],\n]\n ? ConsumePrefix extends infer Next\n ? Next extends Used\n ? SizeFromTokens\n : H extends `${infer Sz}/${string}`\n ? Trim\n : H\n : never\n : never\n\n/**\n * The `` token of a font shorthand, or `never` when absent.\n *\n * @example\n * type L = LineHeightOf<\"16px/1.5 serif\"> // \"1.5\"\n */\nexport type LineHeightOf =\n Trim extends SystemFontKeyword\n ? never\n : SplitBySpace> extends infer Toks extends string[]\n ? LineHeightFromTokens\n : never\n\ntype LineHeightFromTokens<\n Tokens extends string[],\n U extends Used,\n> = Tokens extends [infer H extends string, ...infer T extends string[]]\n ? ConsumePrefix extends infer Next\n ? Next extends Used\n ? LineHeightFromTokens\n : H extends `${string}/${infer Lh}`\n ? Lh extends \"\" // \"16px/\" — line-height is the bare next token\n ? T extends [infer N extends string, ...string[]]\n ? Trim\n : never\n : Trim\n : LhFromNext\n : never\n : never\n\ntype LhFromNext = Tokens extends [\n infer N extends string,\n ...infer R extends string[],\n]\n ? N extends `/${infer Lh}`\n ? Lh extends \"\"\n ? R extends [infer Lh2 extends string, ...string[]]\n ? Trim\n : never\n : Trim\n : never\n : never\n\n// =====================================================================\n// 7. INTERNAL STATE — discriminated union (exported)\n//\n// The editor's state is a single FontParts, discriminated by `kind`.\n// Exported for advanced use (custom serialization, programmatic build).\n// Values are kept as strings (they carry units / quoting), mirroring how\n// the literal preserves the raw text.\n// =====================================================================\n\nexport type FontParts =\n | { kind: \"system\"; keyword: SystemFontKeyword }\n | {\n kind: \"shorthand\"\n style?: string\n variant?: string\n weight?: string\n stretch?: string\n size: string\n lineHeight?: string\n family: string[]\n }\n", "type": "registry:ui", "target": "components/ui/font-editor/font-editor.types.ts" }, { "path": "src/components/ui/font-editor/font-editor.helpers.ts", "content": "// =====================================================================\n// font-editor.helpers.ts\n//\n// Pure runtime parse / format for the CSS `font` shorthand. This is the\n// SUPERSET of the strict type tier: it tolerates var() inside the family\n// list (kept verbatim, opaque), accepts arbitrary whitespace, and runs the\n// full ordered parse — order-free prefix (≤1 of each kind) → mandatory\n// size → optional `/line-height` → mandatory comma-separated family list.\n//\n// The classifier helpers + option-list constants are the single source of\n// truth for both parsing and the UI (mirroring transform-builder's\n// ARG_SPEC table).\n// =====================================================================\n\nimport type {\n FontGenericFamily,\n FontParts,\n SystemFontKeyword,\n} from \"./font-editor.types\"\n\n// ---------------------------------------------------------------------------\n// Option lists (drive the UI selects + the classifiers)\n// ---------------------------------------------------------------------------\n\nexport const SYSTEM_FONTS: readonly SystemFontKeyword[] = [\n \"caption\",\n \"icon\",\n \"menu\",\n \"message-box\",\n \"small-caption\",\n \"status-bar\",\n]\n\nexport const FONT_STYLES = [\"normal\", \"italic\", \"oblique\"] as const\nexport const FONT_VARIANTS = [\"normal\", \"small-caps\"] as const\nexport const FONT_WEIGHT_KEYWORDS = [\n \"normal\",\n \"bold\",\n \"bolder\",\n \"lighter\",\n] as const\nexport const FONT_STRETCHES = [\n \"ultra-condensed\",\n \"extra-condensed\",\n \"condensed\",\n \"semi-condensed\",\n \"normal\",\n \"semi-expanded\",\n \"expanded\",\n \"extra-expanded\",\n \"ultra-expanded\",\n] as const\nexport const ABSOLUTE_SIZES = [\n \"xx-small\",\n \"x-small\",\n \"small\",\n \"medium\",\n \"large\",\n \"x-large\",\n \"xx-large\",\n \"xxx-large\",\n \"larger\",\n \"smaller\",\n] as const\n\nexport const GENERIC_FAMILIES: readonly FontGenericFamily[] = [\n \"serif\",\n \"sans-serif\",\n \"monospace\",\n \"cursive\",\n \"fantasy\",\n \"system-ui\",\n \"ui-serif\",\n \"ui-sans-serif\",\n \"ui-monospace\",\n \"ui-rounded\",\n]\n\n/** A small web-safe family list for the UI family picker. */\nexport const WEB_SAFE_FAMILIES: readonly string[] = [\n \"Arial\",\n \"Helvetica\",\n \"Times New Roman\",\n \"Georgia\",\n \"Courier New\",\n \"Verdana\",\n \"Tahoma\",\n \"Trebuchet MS\",\n \"Inter\",\n \"Roboto\",\n \"JetBrains Mono\",\n]\n\n// ---------------------------------------------------------------------------\n// Numeric / dimension predicates (runtime mirror of the kit primitives)\n// ---------------------------------------------------------------------------\n\nconst NUMBER_RE = /^[+-]?(\\d+\\.?\\d*|\\.\\d+)$/\nconst LENGTH_UNIT_RE =\n /^[+-]?(\\d+\\.?\\d*|\\.\\d+)(px|rem|em|ex|ch|cap|ic|lh|rlh|vw|vh|vi|vb|vmin|vmax|svw|svh|lvw|lvh|dvw|dvh|cqw|cqh|cqi|cqb|cqmin|cqmax|cm|mm|in|pt|pc|Q)$/i\nconst PERCENT_RE = /^[+-]?(\\d+\\.?\\d*|\\.\\d+)%$/\n\nfunction isNumber(s: string): boolean {\n return NUMBER_RE.test(s)\n}\nfunction isLength(s: string): boolean {\n return LENGTH_UNIT_RE.test(s)\n}\nfunction isPercentage(s: string): boolean {\n return PERCENT_RE.test(s)\n}\n\n// ---------------------------------------------------------------------------\n// Token classifiers — exported, mirror the type predicates\n// ---------------------------------------------------------------------------\n\nexport function classifyStyle(t: string): boolean {\n return (FONT_STYLES as readonly string[]).includes(t)\n}\nexport function classifyVariant(t: string): boolean {\n return (FONT_VARIANTS as readonly string[]).includes(t)\n}\nexport function classifyWeight(t: string): boolean {\n return (FONT_WEIGHT_KEYWORDS as readonly string[]).includes(t) || isNumber(t)\n}\nexport function classifyStretch(t: string): boolean {\n return (FONT_STRETCHES as readonly string[]).includes(t) || isPercentage(t)\n}\nexport function classifySize(t: string): boolean {\n return (\n (ABSOLUTE_SIZES as readonly string[]).includes(t) ||\n isLength(t) ||\n isPercentage(t)\n )\n}\nexport function classifyLineHeight(t: string): boolean {\n return t === \"normal\" || isNumber(t) || isLength(t) || isPercentage(t)\n}\n\nconst IDENT_RE = /^[A-Za-z_-][A-Za-z0-9_\\- ]*$/\n\n/**\n * One family token: a generic keyword, a quoted string, a bare ident-safe\n * name, OR a `var()` reference (runtime-tolerant; not validated strictly).\n */\nexport function classifyFamilyToken(t: string): boolean {\n if (t === \"\") return false\n if ((GENERIC_FAMILIES as readonly string[]).includes(t)) return true\n if (\n (t.startsWith('\"') && t.endsWith('\"') && t.length >= 2) ||\n (t.startsWith(\"'\") && t.endsWith(\"'\") && t.length >= 2)\n ) {\n return true\n }\n if (t.startsWith(\"var(\") && t.endsWith(\")\")) return true\n return IDENT_RE.test(t)\n}\n\n// ---------------------------------------------------------------------------\n// Paren-aware top-level splitters (runtime mirror of the kit combinators)\n// ---------------------------------------------------------------------------\n\n/** Split on `sep` only at bracket depth 0, ignoring quoted runs. */\nfunction splitTopLevel(src: string, sep: string): string[] {\n const out: string[] = []\n let depth = 0\n let quote: '\"' | \"'\" | null = null\n let cur = \"\"\n for (const ch of src) {\n if (quote) {\n cur += ch\n if (ch === quote) quote = null\n continue\n }\n if (ch === '\"' || ch === \"'\") {\n quote = ch\n cur += ch\n continue\n }\n if (ch === \"(\" || ch === \"[\") depth++\n else if (ch === \")\" || ch === \"]\") depth--\n if (ch === sep && depth === 0) {\n out.push(cur)\n cur = \"\"\n } else {\n cur += ch\n }\n }\n out.push(cur)\n return out\n}\n\n/** Split on top-level whitespace runs, dropping empties. */\nfunction splitSpace(src: string): string[] {\n // Normalize a standalone or attached `/` so the slash never glues tokens\n // in a way the walker can't see — but keep `16px/1.5` attached. We split on\n // spaces only; the parser handles `/` placement.\n return splitTopLevel(src, \" \")\n .flatMap((s) => splitTopLevel(s, \"\\t\"))\n .flatMap((s) => splitTopLevel(s, \"\\n\"))\n .map((s) => s.trim())\n .filter((s) => s.length > 0)\n}\n\n/** Split a comma-separated family string at depth 0; trim, drop empties. */\nfunction splitFamily(src: string): string[] {\n return splitTopLevel(src, \",\")\n .map((s) => s.trim())\n .filter((s) => s.length > 0)\n}\n\nfunction isSystemKeyword(s: string): s is SystemFontKeyword {\n return (SYSTEM_FONTS as readonly string[]).includes(s)\n}\n\n// ---------------------------------------------------------------------------\n// parseFont — string → FontParts | null\n// ---------------------------------------------------------------------------\n\ninterface PrefixAcc {\n style?: string\n variant?: string\n weight?: string\n stretch?: string\n}\n\n/** Consume `t` as the first still-free prefix kind. Returns true on success. */\nfunction consumePrefix(t: string, acc: PrefixAcc): boolean {\n if (classifyStyle(t) && acc.style === undefined) {\n acc.style = t\n return true\n }\n if (classifyVariant(t) && acc.variant === undefined) {\n acc.variant = t\n return true\n }\n if (classifyWeight(t) && acc.weight === undefined) {\n acc.weight = t\n return true\n }\n if (classifyStretch(t) && acc.stretch === undefined) {\n acc.stretch = t\n return true\n }\n return false\n}\n\n/**\n * Parse a CSS `font` shorthand into typed parts, or `null` on any structural\n * error (missing size, missing family, duplicate prefix kind, junk). A\n * system-font keyword → `{ kind: \"system\", … }`. Tolerates `var()` family\n * tokens and arbitrary whitespace.\n */\nexport function parseFont(src: string): FontParts | null {\n const trimmed = src.trim()\n if (trimmed === \"\") return null\n if (isSystemKeyword(trimmed)) return { kind: \"system\", keyword: trimmed }\n\n const tokens = splitSpace(trimmed)\n if (tokens.length === 0) return null\n\n const acc: PrefixAcc = {}\n let i = 0\n // 1. Order-free prefix.\n while (i < tokens.length && consumePrefix(tokens[i], acc)) {\n i++\n }\n if (i >= tokens.length) return null // never reached a size\n\n // 2. Mandatory size, with optional `/line-height` in attached/spaced forms.\n let size: string\n let lineHeight: string | undefined\n const head = tokens[i]\n\n const slashIdx = head.indexOf(\"/\")\n if (slashIdx >= 0) {\n // attached forms: \"16px/1.5\" or trailing-slash \"16px/\"\n const sz = head.slice(0, slashIdx)\n const lh = head.slice(slashIdx + 1)\n if (!classifySize(sz)) return null\n size = sz\n i++\n if (lh !== \"\") {\n if (!classifyLineHeight(lh)) return null\n lineHeight = lh\n } else {\n // line-height is the next token\n if (i >= tokens.length || !classifyLineHeight(tokens[i])) return null\n lineHeight = tokens[i]\n i++\n }\n } else {\n if (!classifySize(head)) return null\n size = head\n i++\n // half-spaced \"16px /1.5\" or fully spaced \"16px / 1.5\"\n if (i < tokens.length && tokens[i].startsWith(\"/\")) {\n const after = tokens[i].slice(1)\n i++\n if (after !== \"\") {\n if (!classifyLineHeight(after)) return null\n lineHeight = after\n } else {\n if (i >= tokens.length || !classifyLineHeight(tokens[i])) return null\n lineHeight = tokens[i]\n i++\n }\n }\n }\n\n // 3. Mandatory family list (rejoin remaining tokens, split on commas).\n const familySrc = tokens.slice(i).join(\" \")\n const family = splitFamily(familySrc)\n if (family.length === 0) return null\n for (const f of family) {\n if (!classifyFamilyToken(f)) return null\n }\n\n return {\n kind: \"shorthand\",\n ...(acc.style !== undefined ? { style: acc.style } : {}),\n ...(acc.variant !== undefined ? { variant: acc.variant } : {}),\n ...(acc.weight !== undefined ? { weight: acc.weight } : {}),\n ...(acc.stretch !== undefined ? { stretch: acc.stretch } : {}),\n size,\n ...(lineHeight !== undefined ? { lineHeight } : {}),\n family,\n }\n}\n\n// ---------------------------------------------------------------------------\n// formatFont — canonical serialization\n// ---------------------------------------------------------------------------\n\n/**\n * Canonical re-serialization of font parts. Order:\n * `style variant weight stretch size[/lh] family`. System keyword → itself.\n * Omitted prefix fields are dropped; family joined with `, `.\n */\nexport function formatFont(parts: FontParts): string {\n if (parts.kind === \"system\") return parts.keyword\n const prefix = [parts.style, parts.variant, parts.weight, parts.stretch]\n .filter((p): p is string => p !== undefined)\n .join(\" \")\n const sizeLh =\n parts.lineHeight !== undefined\n ? `${parts.size}/${parts.lineHeight}`\n : parts.size\n const family = parts.family.join(\", \")\n return [prefix, `${sizeLh} ${family}`].filter((s) => s !== \"\").join(\" \")\n}\n\n// ---------------------------------------------------------------------------\n// fontFamilies / defaultParts — UI conveniences\n// ---------------------------------------------------------------------------\n\n/** Runtime mirror of `FamiliesOf` — the family tokens in order, or `[]`. */\nexport function fontFamilies(src: string): string[] {\n const parts = parseFont(src)\n if (parts === null || parts.kind === \"system\") return []\n return parts.family\n}\n\n/** A sensible default for a freshly-initialized editor. */\nexport function defaultParts(): FontParts {\n return { kind: \"shorthand\", size: \"16px\", family: [\"sans-serif\"] }\n}\n", "type": "registry:ui", "target": "components/ui/font-editor/font-editor.helpers.ts" } ], "type": "registry:ui" }