@vamos-ui/react 0.0.0-stage → 0.3.0

package/dist/editor/schema-form.js

@@ -0,0 +1,290 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// SchemaForm: a form generated from a zod object schema + `f.*` metadata + field hints.
+// The block inspector uses it; so can item settings, theme settings and form builders.
+import * as React from "react";
+import { ArrowDown, ArrowUp, ChevronRight, Plus, Trash2 } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { getFieldMeta, isLocalizedSchema, schemaKind, unwrapSchema } from "../blocks/schema/fields.js";
+import { BLOCK_ICONS } from "../blocks/schema/icons.js";
+import { Field, Input, Textarea } from "../components/input.js";
+import { Switch } from "../components/switch.js";
+import { NativeSelect } from "../components/native-select.js";
+import { ToggleGroup, ToggleGroupItem } from "../components/toggle.js";
+import { Button, IconButton } from "../components/button.js";
+import { blockEditorLabels } from "./labels.js";
+import { RichTextEditor } from "./block-editor.js";
+const humanize = (key) => key.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[_-]+/g, " ").replace(/^\w/, (c) => c.toUpperCase());
+const defOf = (s) => unwrapSchema(s)._zod.def;
+const isOptional = (s) => {
+    const t = s._zod.def.type;
+    return t === "optional" || t === "default" || t === "prefault" || t === "nullable";
+};
+/** The inner schema of `Localized<T>` (`T | { [locale]: T }`). */
+function localizedInner(s) {
+    const options = defOf(s).options;
+    return options?.[0] ?? s;
+}
+function readLocalized(v, locale) {
+    if (v && typeof v === "object" && !Array.isArray(v) && !("type" in v && v.type === "doc")) {
+        const map = v;
+        if (Object.keys(map).every((k) => /^[a-z]{2,3}(-[A-Za-z0-9]{2,8})*$/.test(k)))
+            return map[locale] ?? map[Object.keys(map)[0]];
+    }
+    return v;
+}
+function writeLocalized(prev, next, locale) {
+    if (prev && typeof prev === "object" && !Array.isArray(prev) && !("type" in prev)) {
+        const map = prev;
+        if (Object.keys(map).length && Object.keys(map).every((k) => /^[a-z]{2,3}(-[A-Za-z0-9]{2,8})*$/.test(k)))
+            return { ...map, [locale]: next };
+    }
+    return next;
+}
+function enumOptions(s) {
+    const d = defOf(s);
+    const entries = d.entries;
+    if (entries)
+        return Object.values(entries);
+    const values = d.values;
+    return (values ?? []).map(String);
+}
+function issuesOf(errors) {
+    if (!errors)
+        return [];
+    if (Array.isArray(errors))
+        return errors;
+    return errors.issues ?? [];
+}
+const pathKey = (p) => p.map(String).join(".");
+function errorFor(ctx, path) {
+    const k = pathKey(path);
+    return ctx.issues.find((i) => pathKey(i.path) === k)?.message;
+}
+// ---------------------------------------------------------------- built-in widgets
+function TextWidget({ id, value, onChange, meta, placeholder, invalid, disabled }) {
+    const v = typeof value === "string" ? value : "";
+    if (meta?.multiline || meta?.widget === "textarea")
+        return _jsx(Textarea, { id: id, value: v, rows: 3, maxLength: meta?.max, placeholder: placeholder, invalid: invalid, disabled: disabled, onChange: (e) => onChange(e.target.value || undefined) });
+    return _jsx(Input, { id: id, size: "sm", value: v, maxLength: meta?.max, showCount: !!meta?.max && meta.max <= 160, placeholder: placeholder, invalid: invalid, disabled: disabled, onChange: (e) => onChange(e.target.value || undefined) });
+}
+function UrlWidget({ id, value, onChange, placeholder, invalid, disabled }) {
+    return _jsx(Input, { id: id, size: "sm", type: "text", inputMode: "url", value: typeof value === "string" ? value : "", placeholder: placeholder ?? "/page or https://…", invalid: invalid, disabled: disabled, onChange: (e) => onChange(e.target.value || undefined) });
+}
+function NumberWidget({ id, value, onChange, meta, invalid, disabled }) {
+    return (_jsx(Input, { id: id, size: "sm", type: "number", inputMode: "decimal", min: meta?.min, max: meta?.max, value: typeof value === "number" ? String(value) : "", invalid: invalid, disabled: disabled, onChange: (e) => onChange(e.target.value === "" ? undefined : Number(e.target.value)), className: "tabular" }));
+}
+function SelectWidget({ id, value, onChange, schema, label, invalid, disabled, meta }) {
+    const options = meta?.field === "icon" ? [...BLOCK_ICONS] : enumOptions(schema);
+    const current = typeof value === "string" ? value : "";
+    if (options.length <= 4 && meta?.widget !== "select" && meta?.field !== "icon")
+        return (_jsx(ToggleGroup, { id: id, "aria-label": label, size: "sm", block: true, value: current, onValueChange: (v) => v && onChange(v), disabled: disabled, children: options.map((o) => (_jsx(ToggleGroupItem, { value: o, className: "capitalize", children: humanize(o) }, o))) }));
+    return _jsx(NativeSelect, { id: id, size: "sm", value: current, invalid: invalid, disabled: disabled, placeholder: current ? undefined : "—", items: options.map((o) => ({ value: o, label: humanize(o) })), onChange: (e) => onChange(e.target.value) });
+}
+function ToggleWidget({ id, value, onChange, disabled, label }) {
+    return _jsx(Switch, { id: id, size: "sm", "aria-label": label, checked: value === true, disabled: disabled, onCheckedChange: (c) => onChange(c) });
+}
+function RichWidget({ id, value, onChange, placeholder, invalid, disabled }) {
+    return _jsx(RichTextEditor, { id: id, size: "sm", minHeight: "5.5rem", maxHeight: "16rem", value: value, onChange: (d) => onChange(d), placeholder: placeholder, invalid: invalid, readOnly: disabled, toolbar: true });
+}
+function JsonWidget({ id, value, onChange, invalid, disabled }) {
+    const [text, setText] = React.useState(() => JSON.stringify(value ?? null, null, 2));
+    const [bad, setBad] = React.useState(false);
+    return (_jsx(Textarea, { id: id, rows: 4, value: text, invalid: invalid || bad, disabled: disabled, className: "font-mono text-xs", onChange: (e) => {
+            setText(e.target.value);
+            try {
+                onChange(JSON.parse(e.target.value));
+                setBad(false);
+            }
+            catch {
+                setBad(true);
+            }
+        } }));
+}
+const BUILTIN = {
+    text: TextWidget,
+    textarea: TextWidget,
+    "inline-text": TextWidget,
+    url: UrlWidget,
+    number: NumberWidget,
+    select: SelectWidget,
+    segmented: SelectWidget,
+    toggle: ToggleWidget,
+    switch: ToggleWidget,
+    rich: RichWidget,
+    richtext: RichWidget,
+    json: JsonWidget,
+};
+function widgetFor(schema, meta, hint) {
+    if (hint?.widget)
+        return hint.widget;
+    if (meta?.widget)
+        return meta.widget;
+    switch (meta?.field) {
+        case "heading":
+        case "text":
+            return "text";
+        case "rich":
+            return "rich";
+        case "select":
+        case "icon":
+            return "select";
+        case "toggle":
+            return "toggle";
+        case "number":
+            return "number";
+        case "list":
+        case "social":
+            return "list";
+        case "group":
+        case "image":
+        case "link":
+        case "cta":
+        case "money":
+        case "address":
+            return "group";
+        case "phone":
+        case "date":
+            return "text";
+    }
+    const kind = schemaKind(schema);
+    if (kind === "string")
+        return "text";
+    if (kind === "number")
+        return "number";
+    if (kind === "boolean")
+        return "toggle";
+    if (kind === "enum" || kind === "literal")
+        return "select";
+    if (kind === "array")
+        return "list";
+    if (kind === "object")
+        return "group";
+    return "json";
+}
+function FieldNode({ ctx, name, schema, value, onChange, path, hint, nested }) {
+    const id = React.useId();
+    const meta = getFieldMeta(schema);
+    const localized = isLocalizedSchema(schema);
+    const inner = localized ? localizedInner(unwrapSchema(schema)) : unwrapSchema(schema);
+    const label = hint?.label ?? meta?.label ?? humanize(name);
+    const help = hint?.help ?? meta?.help;
+    const placeholder = hint?.placeholder ?? meta?.placeholder;
+    const error = errorFor(ctx, path);
+    const required = !isOptional(schema);
+    if (meta?.variants && ctx.variant && !meta.variants.includes(ctx.variant))
+        return null;
+    const plain = localized ? readLocalized(value, ctx.locale) : value;
+    const write = (v) => onChange(localized ? writeLocalized(value, v, ctx.locale) : v);
+    const widget = widgetFor(inner, meta, hint);
+    if (widget === "group")
+        return _jsx(GroupNode, { ctx: ctx, label: label, help: help, schema: inner, value: plain, onChange: write, path: path, nested: nested });
+    if (widget === "list")
+        return _jsx(ListNode, { ctx: ctx, label: label, help: help, schema: inner, meta: meta, value: plain, onChange: write, path: path, error: error });
+    const Widget = ctx.widgets?.[widget] ?? BUILTIN[widget] ?? JsonWidget;
+    const horizontal = widget === "toggle" || widget === "switch";
+    return (_jsx(Field, { id: id, label: label, hint: help, error: error, required: required && widget !== "toggle", orientation: horizontal ? "horizontal" : "vertical", children: _jsx(Widget, { id: id, value: plain, onChange: write, schema: inner, meta: meta, label: label, placeholder: placeholder, invalid: !!error, disabled: ctx.disabled, locale: ctx.locale }) }));
+}
+function GroupNode({ ctx, label, help, schema, value, onChange, path, nested }) {
+    const shape = (unwrapSchema(schema).shape ?? {});
+    const obj = (value && typeof value === "object" ? value : {});
+    const legendId = React.useId();
+    return (_jsxs("fieldset", { className: cn("vui-sf-group", nested && "is-nested"), "aria-labelledby": legendId, children: [_jsx("legend", { id: legendId, className: "vui-sf-legend", children: label }), help ? _jsx("p", { className: "-mt-1 text-xs text-fg-muted", children: help }) : null, Object.entries(shape).map(([k, s]) => (_jsx(FieldNode, { ctx: ctx, name: k, schema: s, value: obj[k], path: [...path, k], onChange: (v) => onChange(compact({ ...obj, [k]: v })), nested: true }, k)))] }));
+}
+const compact = (o) => {
+    const r = {};
+    for (const [k, v] of Object.entries(o))
+        if (v !== undefined)
+            r[k] = v;
+    return r;
+};
+function itemSummary(item) {
+    if (typeof item === "string")
+        return item;
+    if (!item || typeof item !== "object")
+        return null;
+    for (const k of ["title", "q", "label", "name", "heading", "text"]) {
+        const v = item[k];
+        if (typeof v === "string" && v.trim())
+            return v;
+        if (v && typeof v === "object") {
+            const first = Object.values(v).find((x) => typeof x === "string");
+            if (typeof first === "string")
+                return first;
+        }
+    }
+    const link = item.link?.label;
+    if (typeof link === "string")
+        return link;
+    return null;
+}
+function ListNode({ ctx, label, help, schema, meta, value, onChange, path, error }) {
+    const { t } = ctx;
+    const element = defOf(schema).element;
+    const list = Array.isArray(value) ? value : [];
+    const [open, setOpen] = React.useState(list.length ? 0 : null);
+    const headingId = React.useId();
+    const max = meta?.max;
+    const itemName = (i) => (meta?.itemLabel ? meta.itemLabel.replace("{n}", String(i + 1)) : t("itemN", { n: i + 1 }));
+    const blank = () => {
+        if (!element)
+            return "";
+        const kind = schemaKind(element);
+        if (kind === "object")
+            return {};
+        if (kind === "string")
+            return "";
+        if (kind === "number")
+            return 0;
+        return null;
+    };
+    const move = (i, d) => {
+        const j = i + d;
+        if (j < 0 || j >= list.length)
+            return;
+        const next = [...list];
+        [next[i], next[j]] = [next[j], next[i]];
+        onChange(next);
+        setOpen(j);
+    };
+    return (_jsxs("section", { className: "vui-sf-list", "aria-labelledby": headingId, children: [_jsx("div", { className: "flex items-baseline justify-between gap-2", children: _jsxs("h4", { id: headingId, className: "vui-sf-legend", children: [label, " ", _jsx("span", { className: "font-normal tabular text-fg-subtle", children: list.length })] }) }), help ? _jsx("p", { className: "-mt-1 text-xs text-fg-muted", children: help }) : null, error ? (_jsx("p", { className: "text-xs text-danger", role: "alert", children: error })) : null, _jsx("ol", { className: "flex flex-col gap-1.5", children: list.map((item, i) => {
+                    const name = itemSummary(item) ?? itemName(i);
+                    const expanded = open === i;
+                    const panelId = `${headingId}-${i}`;
+                    const itemError = ctx.issues.some((iss) => pathKey(iss.path).startsWith(pathKey([...path, i])));
+                    return (_jsxs("li", { className: "vui-sf-item", "data-open": expanded ? "" : undefined, "data-invalid": itemError ? "" : undefined, children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsxs("button", { type: "button", className: "vui-sf-item-head focus-ring", "aria-expanded": expanded, "aria-controls": panelId, onClick: () => setOpen(expanded ? null : i), children: [_jsx(ChevronRight, { "aria-hidden": true, className: "size-3.5 shrink-0 text-fg-subtle transition-transform rtl:-scale-x-100" }), _jsx("span", { className: "truncate", children: name })] }), _jsx(IconButton, { size: "xs", label: t("moveItemUp", { label: name }), disabled: i === 0 || ctx.disabled, onClick: () => move(i, -1), children: _jsx(ArrowUp, {}) }), _jsx(IconButton, { size: "xs", label: t("moveItemDown", { label: name }), disabled: i === list.length - 1 || ctx.disabled, onClick: () => move(i, 1), children: _jsx(ArrowDown, {}) }), _jsx(IconButton, { size: "xs", variant: "danger-ghost", label: t("removeItem", { label: name }), disabled: ctx.disabled || (meta?.min !== undefined && list.length <= meta.min), onClick: () => {
+                                            onChange(list.filter((_, j) => j !== i));
+                                            setOpen(null);
+                                        }, children: _jsx(Trash2, {}) })] }), expanded && element ? (_jsx("div", { id: panelId, className: "vui-sf-item-body", children: _jsx(FieldNode, { ctx: ctx, name: itemName(i), schema: element, value: item, path: [...path, i], onChange: (v) => onChange(list.map((x, j) => (j === i ? v : x))), nested: true }) })) : null] }, i));
+                }) }), _jsxs(Button, { size: "xs", variant: "ghost", className: "self-start", disabled: ctx.disabled || (max !== undefined && list.length >= max), onClick: () => {
+                    onChange([...list, blank()]);
+                    setOpen(list.length);
+                }, children: [_jsx(Plus, { "aria-hidden": true }), t("addItem", { label: (meta?.itemLabel ?? label).replace(/\s*\{n\}/, "").toLowerCase() })] })] }));
+}
+// ---------------------------------------------------------------- SchemaForm
+const GROUP_ORDER = ["content", "style", "advanced"];
+/**
+ * A form generated from a zod object schema. Widgets come from `f.*` metadata (heading, rich,
+ * image, list…), the zod type, or a hint (`fields.title.widget = "textarea"`). Localized fields
+ * edit the `locale` entry. Arrays are sortable lists with add / remove / move (keyboard only).
+ *
+ * ```tsx
+ * <SchemaForm schema={faqBlock.schema} value={props} onChange={setProps} errors={result.error} locale="en" />
+ * ```
+ */
+export function SchemaForm({ schema, value, onChange, fields, widgets, errors, layout = "sidebar", variant, locale = "en", disabled, labels, className }) {
+    const t = useLabels("blockEditor", blockEditorLabels, labels);
+    const ctx = { t, widgets, issues: issuesOf(errors), locale, disabled, variant };
+    const shape = (schema.shape ?? {});
+    const entries = Object.entries(shape).filter(([k]) => {
+        const h = fields?.[k];
+        return !h?.hidden && (!h?.when || h.when(value));
+    });
+    const grouped = GROUP_ORDER.map((g) => ({ g, list: entries.filter(([k]) => (fields?.[k]?.group ?? "content") === g) })).filter((x) => x.list.length);
+    const other = entries.filter(([k]) => !GROUP_ORDER.includes(fields?.[k]?.group ?? "content"));
+    if (other.length)
+        grouped.push({ g: "advanced", list: other });
+    const titles = { content: t("content"), style: t("style"), advanced: t("advanced") };
+    return (_jsx("div", { "data-slot": "schema-form", "data-layout": layout, className: cn("vui-sf", className), children: grouped.map(({ g, list }) => (_jsxs("section", { className: "vui-sf-section", "aria-label": titles[g], children: [grouped.length > 1 ? _jsx("h3", { className: "vui-eyebrow", children: titles[g] }) : null, _jsx("div", { className: cn("flex flex-col gap-3.5", layout === "dialog" && "sm:grid sm:grid-cols-2 sm:gap-x-5"), children: list.map(([k, s]) => (_jsx(FieldNode, { ctx: ctx, name: k, schema: s, value: value[k], path: [k], hint: fields?.[k], onChange: (v) => onChange(compact({ ...value, [k]: v })) }, k))) })] }, g))) }));
+}

package/dist/editor/slash-menu.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { type InsertItem } from "./items.js";
+/** Items for the current editor, filtered by `allowedBlocks`. */
+export declare function useInsertItems(): InsertItem[];
+/** Search over title + keywords, folded for the UI locale ("İ" matches "i" in Turkish). */
+export declare function searchItems(items: InsertItem[], query: string, locale: string): InsertItem[];
+export interface BlockEditorSlashMenuProps {
+    className?: string;
+}
+/**
+ * The "/" inserter: type `/` in an empty line (or after a space), then filter, arrow, Enter.
+ * A cmdk listbox driven from the editor (focus stays in the text; `aria-activedescendant`
+ * follows the highlighted option). Esc closes and leaves the typed text.
+ */
+export declare function BlockEditorSlashMenu({ className }: BlockEditorSlashMenuProps): React.ReactPortal | null;

package/dist/editor/slash-menu.js

@@ -0,0 +1,119 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { cn } from "../lib/cn.js";
+import { useLocale } from "../lib/locale.js";
+import { matchText } from "../lib/text.js";
+import { Layer } from "../lib/layer.js";
+import { usePortalContainer } from "../lib/theme-scope.js";
+import { Command, CommandGroup, CommandItem, CommandList } from "../components/command.js";
+import { Kbd } from "../components/kbd.js";
+import { useBlockEditor, useSlashState } from "./context.js";
+import { filterAllowed, registryItems, runInsert, textItems } from "./items.js";
+const GROUP_ORDER = ["text", "media", "layout", "blocks"];
+const GROUP_LABEL = { text: "groupText", media: "groupMedia", layout: "groupLayout", blocks: "groupBlocks", patterns: "groupPatterns" };
+/** Items for the current editor, filtered by `allowedBlocks`. */
+export function useInsertItems() {
+    const { t, registry, variant, allowedTypes } = useBlockEditor();
+    return React.useMemo(() => {
+        const richText = variant === "rich-text";
+        const all = [...textItems(t, { richText }), ...(richText ? [] : registryItems(registry))];
+        return filterAllowed(all, allowedTypes());
+    }, [t, registry, variant, allowedTypes]);
+}
+/** Search over title + keywords, folded for the UI locale ("İ" matches "i" in Turkish). */
+export function searchItems(items, query, locale) {
+    const q = query.trim();
+    if (!q)
+        return items;
+    return items.filter((it) => matchText(it.title, q, locale) || it.keywords.some((k) => matchText(k, q, locale)));
+}
+/**
+ * The "/" inserter: type `/` in an empty line (or after a space), then filter, arrow, Enter.
+ * A cmdk listbox driven from the editor (focus stays in the text; `aria-activedescendant`
+ * follows the highlighted option). Esc closes and leaves the typed text.
+ */
+export function BlockEditorSlashMenu({ className }) {
+    const { editor, slash, t, lang } = useBlockEditor();
+    const { locale } = useLocale();
+    const state = useSlashState(slash);
+    const items = useInsertItems();
+    const results = React.useMemo(() => (state ? searchItems(items, state.query, locale) : []), [items, state, locale]);
+    const grouped = React.useMemo(() => GROUP_ORDER.map((g) => ({ g, list: results.filter((r) => r.group === g) })).filter((x) => x.list.length), [results]);
+    const flat = React.useMemo(() => grouped.flatMap((x) => x.list), [grouped]);
+    const [active, setActive] = React.useState(0);
+    const listRef = React.useRef(null);
+    const container = usePortalContainer();
+    const listId = React.useId();
+    React.useEffect(() => setActive(0), [state?.query]);
+    const choose = React.useCallback((item) => {
+        if (!editor || !state || !item)
+            return;
+        runInsert(editor, item, { lang, range: state.range });
+        slash.set(null);
+    }, [editor, state, lang, slash]);
+    // Keys arrive from the editor while the menu is open.
+    React.useEffect(() => {
+        slash.keydown.current = (e) => {
+            if (!flat.length)
+                return false;
+            if (e.key === "ArrowDown") {
+                setActive((a) => (a + 1) % flat.length);
+                return true;
+            }
+            if (e.key === "ArrowUp") {
+                setActive((a) => (a - 1 + flat.length) % flat.length);
+                return true;
+            }
+            if (e.key === "Enter" || e.key === "Tab") {
+                choose(flat[active]);
+                return true;
+            }
+            return false;
+        };
+        return () => {
+            slash.keydown.current = null;
+        };
+    }, [slash, flat, active, choose]);
+    // Combobox wiring on the contenteditable while open.
+    React.useEffect(() => {
+        const dom = editor?.view.dom;
+        if (!dom)
+            return;
+        if (!state) {
+            ["aria-controls", "aria-expanded", "aria-activedescendant", "aria-autocomplete", "aria-haspopup"].forEach((a) => dom.removeAttribute(a));
+            return;
+        }
+        dom.setAttribute("aria-haspopup", "listbox");
+        dom.setAttribute("aria-expanded", "true");
+        dom.setAttribute("aria-autocomplete", "list");
+        const list = listRef.current?.querySelector("[cmdk-list]") ?? listRef.current;
+        if (list?.id)
+            dom.setAttribute("aria-controls", list.id);
+        // cmdk marks the highlighted item after its own render: read it on the next tick.
+        const id = setTimeout(() => {
+            const sel = listRef.current?.querySelector('[cmdk-item][aria-selected="true"]');
+            if (sel?.id)
+                dom.setAttribute("aria-activedescendant", sel.id);
+            else
+                dom.removeAttribute("aria-activedescendant");
+        }, 0);
+        return () => clearTimeout(id);
+    });
+    React.useEffect(() => {
+        listRef.current?.querySelector('[cmdk-item][aria-selected="true"]')?.scrollIntoView({ block: "nearest" });
+    }, [active]);
+    if (!state || !editor || typeof document === "undefined")
+        return null;
+    const rect = state.rect;
+    const vh = typeof window !== "undefined" ? window.innerHeight : 800;
+    const below = !rect || rect.bottom + 340 < vh || rect.top < 340;
+    const style = rect
+        ? below
+            ? { position: "fixed", top: rect.bottom + 6, left: Math.max(8, rect.left - 8) }
+            : { position: "fixed", bottom: vh - rect.top + 6, left: Math.max(8, rect.left - 8) }
+        : { position: "fixed", top: 80, left: 24 };
+    const menu = (_jsx(Layer, { ref: listRef, "data-slot": "block-editor-slash", className: cn("vui-slash surface-popover ui-pop z-(--z-popover) rounded-ui-lg", className), style: style, onMouseDown: (e) => e.preventDefault(), children: _jsx(Command, { shouldFilter: false, value: flat[active]?.id ?? "", onValueChange: (v) => setActive(Math.max(0, flat.findIndex((f) => f.id === v))), label: t("insert"), loop: true, children: _jsx(CommandList, { id: listId, label: t("insert"), className: "max-h-[min(20rem,50dvh)]", children: flat.length ? (grouped.map(({ g, list }) => (_jsx(CommandGroup, { heading: t(GROUP_LABEL[g]), children: list.map((it) => (_jsx(CommandItem, { value: it.id, icon: _jsx("span", { className: "vui-slash-icon", children: _jsx(it.icon, { className: "size-4" }) }), description: it.hint, onSelect: () => choose(it), badge: it.shortcut ? _jsx(Kbd, { size: "sm", variant: "ghost", children: it.shortcut }) : undefined, children: it.title }, it.id))) }, g)))) : (_jsx("p", { className: "px-3 py-6 text-center text-sm text-fg-muted", role: "status", children: t("noBlocks", { query: state.query }) })) }) }) }));
+    return createPortal(menu, container ?? document.body);
+}

package/dist/fonts/catalog.d.ts

@@ -0,0 +1,53 @@
+export type FontCategory = "sans" | "serif" | "display" | "rounded" | "condensed" | "mono" | "handwriting";
+/** Sub-classification inside `sans` (geometric · humanist · grotesk) and `serif` (text · display). */
+export type FontStyle = "geometric" | "humanist" | "grotesk" | "text" | "display";
+export interface FontAxis {
+    /** OpenType axis tag: `wght`, `opsz`, `wdth`, `ital`, `slnt` or a custom one (`SOFT`, `WONK`…). */
+    tag: string;
+    min: number;
+    max: number;
+}
+export interface GoogleFont {
+    /** Exact Google Fonts family name, e.g. `"Bricolage Grotesque"`. */
+    family: string;
+    /** URL-safe id, e.g. `"bricolage-grotesque"`. */
+    id: string;
+    category: FontCategory;
+    style?: FontStyle;
+    /** Available weights (static instances, or named stops of the variable range). */
+    weights: number[];
+    /** Has true italics. */
+    italics: boolean;
+    /** Variable axes; empty for static families. */
+    axes: FontAxis[];
+    /** Character subsets offered by Google Fonts. */
+    subsets: string[];
+    /** One line: what it is good for. */
+    use: string;
+}
+export interface FontGroup {
+    id: string;
+    label: string;
+    category: FontCategory;
+    style?: FontStyle;
+}
+/** The catalog, grouped in display order. */
+export declare const fontGroups: FontGroup[];
+/** Top-level categories with labels, in display order. */
+export declare const fontCategories: {
+    id: FontCategory;
+    label: string;
+}[];
+/** 59 Google Fonts families, all with latin-ext. */
+export declare const googleFonts: GoogleFont[];
+/** Look a family up by name (case-insensitive) or id. */
+export declare function getFont(familyOrId: string): GoogleFont | undefined;
+/** The group a font belongs to. */
+export declare function fontGroupOf(font: GoogleFont): FontGroup;
+/** Is the family variable (has a `wght` axis)? */
+export declare function isVariableFont(font: GoogleFont): boolean;
+/**
+ * CSS `font-family` value for a family: the quoted name plus a category fallback.
+ * A name that is not in the catalog is treated as a ready CSS stack and returned as is.
+ */
+export declare function fontStack(family: string): string;

package/dist/fonts/catalog.js

@@ -0,0 +1,121 @@
+// Google Fonts catalog for Vamos UI. Generated from https://fonts.google.com/metadata/fonts
+// (2026-11-10) and curated by hand. Every family covers latin-ext (Turkish ğ ş ı İ ç ö ü).
+/** The catalog, grouped in display order. */
+export const fontGroups = [
+    { id: "sans-geometric", label: "Sans · Geometric", category: "sans", style: "geometric" },
+    { id: "sans-humanist", label: "Sans · Humanist", category: "sans", style: "humanist" },
+    { id: "sans-grotesk", label: "Sans · Grotesk", category: "sans", style: "grotesk" },
+    { id: "serif-text", label: "Serif · Text", category: "serif", style: "text" },
+    { id: "serif-display", label: "Serif · Display", category: "serif", style: "display" },
+    { id: "display", label: "Display", category: "display" },
+    { id: "rounded", label: "Rounded", category: "rounded" },
+    { id: "condensed", label: "Condensed", category: "condensed" },
+    { id: "mono", label: "Mono", category: "mono" },
+    { id: "handwriting", label: "Handwriting", category: "handwriting" },
+];
+/** Top-level categories with labels, in display order. */
+export const fontCategories = [
+    { id: "sans", label: "Sans" },
+    { id: "serif", label: "Serif" },
+    { id: "display", label: "Display" },
+    { id: "rounded", label: "Rounded" },
+    { id: "condensed", label: "Condensed" },
+    { id: "mono", label: "Mono" },
+    { id: "handwriting", label: "Handwriting" },
+];
+/** 59 Google Fonts families, all with latin-ext. */
+export const googleFonts = [
+    { family: "Outfit", id: "outfit", category: "sans", style: "geometric", weights: [100, 200, 300, 400, 500, 600, 700, 800, 900], italics: false, axes: [{ tag: "wght", min: 100, max: 900 }], subsets: ["latin", "latin-ext"], use: "Product UI and SaaS sites; clean circles, friendly at every weight." },
+    { family: "Sora", id: "sora", category: "sans", style: "geometric", weights: [100, 200, 300, 400, 500, 600, 700, 800], italics: false, axes: [{ tag: "wght", min: 100, max: 800 }], subsets: ["latin", "latin-ext"], use: "Tech and fintech headlines; wide, confident and slightly futuristic." },
+    { family: "Plus Jakarta Sans", id: "plus-jakarta-sans", category: "sans", style: "geometric", weights: [200, 300, 400, 500, 600, 700, 800], italics: true, axes: [{ tag: "wght", min: 200, max: 800 }], subsets: ["cyrillic-ext", "latin", "latin-ext", "vietnamese"], use: "Modern dashboards and marketing; open counters, crisp at 13px." },
+    { family: "Manrope", id: "manrope", category: "sans", style: "geometric", weights: [200, 300, 400, 500, 600, 700, 800], italics: false, axes: [{ tag: "wght", min: 200, max: 800 }], subsets: ["cyrillic", "cyrillic-ext", "greek", "latin", "latin-ext", "vietnamese"], use: "Dense admin tables; semi-condensed geometry with clear numerals." },
+    { family: "Urbanist", id: "urbanist", category: "sans", style: "geometric", weights: [100, 200, 300, 400, 500, 600, 700, 800, 900], italics: true, axes: [{ tag: "wght", min: 100, max: 900 }], subsets: ["latin", "latin-ext"], use: "Fashion, hospitality and lifestyle brands; airy and elegant." },
+    { family: "Lexend", id: "lexend", category: "sans", style: "geometric", weights: [100, 200, 300, 400, 500, 600, 700, 800, 900], italics: false, axes: [{ tag: "wght", min: 100, max: 900 }], subsets: ["latin", "latin-ext", "vietnamese"], use: "Long reading and accessibility-first UIs; tuned for reading speed." },
+    { family: "Red Hat Display", id: "red-hat-display", category: "sans", style: "geometric", weights: [300, 400, 500, 600, 700, 800, 900], italics: true, axes: [{ tag: "wght", min: 300, max: 900 }], subsets: ["latin", "latin-ext"], use: "Bold product headlines; pairs with Red Hat Mono." },
+    { family: "Onest", id: "onest", category: "sans", style: "humanist", weights: [100, 200, 300, 400, 500, 600, 700, 800, 900], italics: false, axes: [{ tag: "wght", min: 100, max: 900 }], subsets: ["cyrillic", "cyrillic-ext", "latin", "latin-ext", "math", "symbols", "vietnamese"], use: "Default UI face; warm, compact and very legible in Turkish." },
+    { family: "Figtree", id: "figtree", category: "sans", style: "humanist", weights: [300, 400, 500, 600, 700, 800, 900], italics: true, axes: [{ tag: "wght", min: 300, max: 900 }], subsets: ["latin", "latin-ext"], use: "Friendly product UI and onboarding; soft geometric-humanist hybrid." },
+    { family: "DM Sans", id: "dm-sans", category: "sans", style: "humanist", weights: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000], italics: true, axes: [{ tag: "opsz", min: 9, max: 40 }, { tag: "wght", min: 100, max: 1000 }], subsets: ["latin", "latin-ext"], use: "Low-contrast UI text; optical sizes keep small labels open." },
+    { family: "IBM Plex Sans", id: "ibm-plex-sans", category: "sans", style: "humanist", weights: [100, 200, 300, 400, 500, 600, 700], italics: true, axes: [{ tag: "wdth", min: 75, max: 100 }, { tag: "wght", min: 100, max: 700 }], subsets: ["cyrillic", "cyrillic-ext", "greek", "latin", "latin-ext", "vietnamese"], use: "Corporate, finance and B2B panels; engineered and neutral." },
+    { family: "Source Sans 3", id: "source-sans-3", category: "sans", style: "humanist", weights: [200, 300, 400, 500, 600, 700, 800, 900], italics: true, axes: [{ tag: "wght", min: 200, max: 900 }], subsets: ["cyrillic", "cyrillic-ext", "greek", "greek-ext", "latin", "latin-ext", "vietnamese"], use: "Long forms and documentation; calm, proven workhorse." },
+    { family: "Instrument Sans", id: "instrument-sans", category: "sans", style: "humanist", weights: [400, 500, 600, 700], italics: true, axes: [{ tag: "wdth", min: 75, max: 100 }, { tag: "wght", min: 400, max: 700 }], subsets: ["latin", "latin-ext"], use: "Editorial sites and studios; precise with a width axis." },
+    { family: "Commissioner", id: "commissioner", category: "sans", style: "humanist", weights: [100, 200, 300, 400, 500, 600, 700, 800, 900], italics: false, axes: [{ tag: "FLAR", min: 0, max: 100 }, { tag: "VOLM", min: 0, max: 100 }, { tag: "slnt", min: -12, max: 0 }, { tag: "wght", min: 100, max: 900 }], subsets: ["cyrillic", "cyrillic-ext", "greek", "latin", "latin-ext", "vietnamese"], use: "Civic and public-sector UIs; flared variant for headings." },
+    { family: "Hanken Grotesk", id: "hanken-grotesk", category: "sans", style: "grotesk", weights: [100, 200, 300, 400, 500, 600, 700, 800, 900], italics: true, axes: [{ tag: "wght", min: 100, max: 900 }], subsets: ["cyrillic-ext", "latin", "latin-ext", "vietnamese"], use: "Neutral UI text with character; great for CRM and HR." },
+    { family: "Geist", id: "geist", category: "sans", style: "grotesk", weights: [100, 200, 300, 400, 500, 600, 700, 800, 900], italics: true, axes: [{ tag: "wght", min: 100, max: 900 }], subsets: ["cyrillic", "cyrillic-ext", "latin", "latin-ext", "vietnamese"], use: "Developer tools and dashboards; tight, modern Swiss feel." },
+    { family: "Schibsted Grotesk", id: "schibsted-grotesk", category: "sans", style: "grotesk", weights: [400, 500, 600, 700, 800, 900], italics: true, axes: [{ tag: "wght", min: 400, max: 900 }], subsets: ["latin", "latin-ext"], use: "News and content sites; sturdy headlines and body." },
+    { family: "Familjen Grotesk", id: "familjen-grotesk", category: "sans", style: "grotesk", weights: [400, 500, 600, 700], italics: true, axes: [{ tag: "wght", min: 400, max: 700 }], subsets: ["latin", "latin-ext", "vietnamese"], use: "Brand sites and portfolios; quirky details at large sizes." },
+    { family: "Bricolage Grotesque", id: "bricolage-grotesque", category: "sans", style: "grotesk", weights: [200, 300, 400, 500, 600, 700, 800], italics: false, axes: [{ tag: "opsz", min: 12, max: 96 }, { tag: "wdth", min: 75, max: 100 }, { tag: "wght", min: 200, max: 800 }], subsets: ["latin", "latin-ext", "vietnamese"], use: "Expressive headlines; optical size and width axes." },
+    { family: "Host Grotesk", id: "host-grotesk", category: "sans", style: "grotesk", weights: [300, 400, 500, 600, 700, 800], italics: true, axes: [{ tag: "wght", min: 300, max: 800 }], subsets: ["latin", "latin-ext"], use: "Hosting, SaaS and marketing pages; clear and contemporary." },
+    { family: "Archivo", id: "archivo", category: "sans", style: "grotesk", weights: [100, 200, 300, 400, 500, 600, 700, 800, 900], italics: true, axes: [{ tag: "wdth", min: 62, max: 125 }, { tag: "wght", min: 100, max: 900 }], subsets: ["latin", "latin-ext", "vietnamese"], use: "Data-heavy screens and posters; width axis from narrow to wide." },
+    { family: "Work Sans", id: "work-sans", category: "sans", style: "grotesk", weights: [100, 200, 300, 400, 500, 600, 700, 800, 900], italics: true, axes: [{ tag: "wght", min: 100, max: 900 }], subsets: ["latin", "latin-ext", "vietnamese"], use: "Agency sites; slightly wide grotesque that reads well large." },
+    { family: "Inter Tight", id: "inter-tight", category: "sans", style: "grotesk", weights: [100, 200, 300, 400, 500, 600, 700, 800, 900], italics: true, axes: [{ tag: "wght", min: 100, max: 900 }], subsets: ["cyrillic", "cyrillic-ext", "greek", "greek-ext", "latin", "latin-ext", "vietnamese"], use: "Compact headings in product UI; tighter spacing than its parent." },
+    { family: "Newsreader", id: "newsreader", category: "serif", style: "text", weights: [200, 300, 400, 500, 600, 700, 800], italics: true, axes: [{ tag: "opsz", min: 6, max: 72 }, { tag: "wght", min: 200, max: 800 }], subsets: ["latin", "latin-ext", "vietnamese"], use: "Blogs and long-form articles; optical sizes from captions to titles." },
+    { family: "Source Serif 4", id: "source-serif-4", category: "serif", style: "text", weights: [200, 300, 400, 500, 600, 700, 800, 900], italics: true, axes: [{ tag: "opsz", min: 8, max: 60 }, { tag: "wght", min: 200, max: 900 }], subsets: ["cyrillic", "cyrillic-ext", "greek", "latin", "latin-ext", "vietnamese"], use: "Documentation and reports; sturdy text serif with optical sizes." },
+    { family: "Literata", id: "literata", category: "serif", style: "text", weights: [200, 300, 400, 500, 600, 700, 800, 900], italics: true, axes: [{ tag: "opsz", min: 7, max: 72 }, { tag: "wght", min: 200, max: 900 }], subsets: ["cyrillic", "cyrillic-ext", "greek", "greek-ext", "latin", "latin-ext", "vietnamese"], use: "E-books and reading apps; designed for long screen reading." },
+    { family: "Lora", id: "lora", category: "serif", style: "text", weights: [400, 500, 600, 700], italics: true, axes: [{ tag: "wght", min: 400, max: 700 }], subsets: ["cyrillic", "cyrillic-ext", "latin", "latin-ext", "math", "symbols", "vietnamese"], use: "Lifestyle blogs and menus; calligraphic, warm body text." },
+    { family: "Crimson Pro", id: "crimson-pro", category: "serif", style: "text", weights: [200, 300, 400, 500, 600, 700, 800, 900], italics: true, axes: [{ tag: "wght", min: 200, max: 900 }], subsets: ["latin", "latin-ext", "vietnamese"], use: "Literary sites and essays; classic old-style book face." },
+    { family: "Spectral", id: "spectral", category: "serif", style: "text", weights: [200, 300, 400, 500, 600, 700, 800], italics: true, axes: [], subsets: ["cyrillic", "cyrillic-ext", "latin", "latin-ext", "vietnamese"], use: "Premium editorial and legal copy; refined, screen-first serif." },
+    { family: "EB Garamond", id: "eb-garamond", category: "serif", style: "text", weights: [400, 500, 600, 700, 800], italics: true, axes: [{ tag: "wght", min: 400, max: 800 }], subsets: ["cyrillic", "cyrillic-ext", "greek", "greek-ext", "latin", "latin-ext", "vietnamese"], use: "Heritage brands, invitations and quotes; classic Garamond." },
+    { family: "Instrument Serif", id: "instrument-serif", category: "serif", style: "display", weights: [400], italics: true, axes: [], subsets: ["latin", "latin-ext"], use: "Editorial headlines; condensed, elegant, lovely in italic." },
+    { family: "Fraunces", id: "fraunces", category: "serif", style: "display", weights: [100, 200, 300, 400, 500, 600, 700, 800, 900], italics: true, axes: [{ tag: "SOFT", min: 0, max: 100 }, { tag: "WONK", min: 0, max: 1 }, { tag: "opsz", min: 9, max: 144 }, { tag: "wght", min: 100, max: 900 }], subsets: ["latin", "latin-ext", "vietnamese"], use: "Soft, wonky display serif for food, spa and boutique brands." },
+    { family: "Playfair Display", id: "playfair-display", category: "serif", style: "display", weights: [400, 500, 600, 700, 800, 900], italics: true, axes: [{ tag: "wght", min: 400, max: 900 }], subsets: ["cyrillic", "latin", "latin-ext", "vietnamese"], use: "Luxury and fashion headlines; high-contrast transitional." },
+    { family: "DM Serif Display", id: "dm-serif-display", category: "serif", style: "display", weights: [400], italics: true, axes: [], subsets: ["latin", "latin-ext"], use: "Magazine-style headlines with strong contrast." },
+    { family: "Young Serif", id: "young-serif", category: "serif", style: "display", weights: [400], italics: false, axes: [], subsets: ["latin", "latin-ext"], use: "Warm, chunky headings for cafes, bakeries and kids brands." },
+    { family: "Bodoni Moda", id: "bodoni-moda", category: "serif", style: "display", weights: [400, 500, 600, 700, 800, 900], italics: true, axes: [{ tag: "opsz", min: 6, max: 96 }, { tag: "wght", min: 400, max: 900 }], subsets: ["latin", "latin-ext", "math", "symbols"], use: "Fashion and beauty; razor-thin Didone with optical sizes." },
+    { family: "Syne", id: "syne", category: "display", weights: [400, 500, 600, 700, 800], italics: false, axes: [{ tag: "wght", min: 400, max: 800 }], subsets: ["greek", "latin", "latin-ext"], use: "Art, culture and studio sites; extended and avant-garde at heavy weights." },
+    { family: "Unbounded", id: "unbounded", category: "display", weights: [200, 300, 400, 500, 600, 700, 800, 900], italics: false, axes: [{ tag: "wght", min: 200, max: 900 }], subsets: ["cyrillic", "cyrillic-ext", "latin", "latin-ext", "vietnamese"], use: "Web3, events and posters; wide rounded display." },
+    { family: "Dela Gothic One", id: "dela-gothic-one", category: "display", weights: [400], italics: false, axes: [], subsets: ["cyrillic", "greek", "japanese", "latin", "latin-ext", "vietnamese"], use: "Loud campaign headlines and banners; heavy and blocky." },
+    { family: "Funnel Display", id: "funnel-display", category: "display", weights: [300, 400, 500, 600, 700, 800], italics: false, axes: [{ tag: "wght", min: 300, max: 800 }], subsets: ["latin", "latin-ext"], use: "Bold marketing headlines; geometric with punchy joins." },
+    { family: "Nunito", id: "nunito", category: "rounded", weights: [200, 300, 400, 500, 600, 700, 800, 900, 1000], italics: true, axes: [{ tag: "wght", min: 200, max: 1000 }], subsets: ["cyrillic", "cyrillic-ext", "latin", "latin-ext", "vietnamese"], use: "Friendly apps, education and health; fully rounded terminals." },
+    { family: "Quicksand", id: "quicksand", category: "rounded", weights: [300, 400, 500, 600, 700], italics: false, axes: [{ tag: "wght", min: 300, max: 700 }], subsets: ["latin", "latin-ext", "vietnamese"], use: "Light, playful headings for kids, pets and wellness." },
+    { family: "Fredoka", id: "fredoka", category: "rounded", weights: [300, 400, 500, 600, 700], italics: false, axes: [{ tag: "wdth", min: 75, max: 125 }, { tag: "wght", min: 300, max: 700 }], subsets: ["hebrew", "latin", "latin-ext"], use: "Playful product UI and games; rounded with a width axis." },
+    { family: "Varela Round", id: "varela-round", category: "rounded", weights: [400], italics: false, axes: [], subsets: ["hebrew", "latin", "latin-ext", "vietnamese"], use: "Soft UI labels and onboarding; single regular weight." },
+    { family: "Barlow Condensed", id: "barlow-condensed", category: "condensed", weights: [100, 200, 300, 400, 500, 600, 700, 800, 900], italics: true, axes: [], subsets: ["latin", "latin-ext", "vietnamese"], use: "Sports, transport and signage; slightly rounded condensed grotesk." },
+    { family: "Oswald", id: "oswald", category: "condensed", weights: [200, 300, 400, 500, 600, 700], italics: false, axes: [{ tag: "wght", min: 200, max: 700 }], subsets: ["cyrillic", "cyrillic-ext", "latin", "latin-ext", "vietnamese"], use: "Posters, menus and stat-heavy headers; classic condensed gothic." },
+    { family: "Antonio", id: "antonio", category: "condensed", weights: [100, 200, 300, 400, 500, 600, 700], italics: false, axes: [{ tag: "wght", min: 100, max: 700 }], subsets: ["latin", "latin-ext"], use: "Tall, refined headlines; elegant condensed sans." },
+    { family: "Archivo Narrow", id: "archivo-narrow", category: "condensed", weights: [400, 500, 600, 700], italics: true, axes: [{ tag: "wght", min: 400, max: 700 }], subsets: ["latin", "latin-ext", "vietnamese"], use: "Tables and dense lists where width is scarce." },
+    { family: "Saira Condensed", id: "saira-condensed", category: "condensed", weights: [100, 200, 300, 400, 500, 600, 700, 800, 900], italics: false, axes: [], subsets: ["latin", "latin-ext", "vietnamese"], use: "Tech and automotive; squared condensed shapes." },
+    { family: "JetBrains Mono", id: "jetbrains-mono", category: "mono", weights: [100, 200, 300, 400, 500, 600, 700, 800], italics: true, axes: [{ tag: "wght", min: 100, max: 800 }], subsets: ["cyrillic", "cyrillic-ext", "greek", "latin", "latin-ext", "vietnamese"], use: "Code, IDs and numbers in admin UIs; tall x-height." },
+    { family: "Geist Mono", id: "geist-mono", category: "mono", weights: [100, 200, 300, 400, 500, 600, 700, 800, 900], italics: true, axes: [{ tag: "wght", min: 100, max: 900 }], subsets: ["cyrillic", "cyrillic-ext", "latin", "latin-ext", "symbols2", "vietnamese"], use: "Developer dashboards; pairs with Geist." },
+    { family: "IBM Plex Mono", id: "ibm-plex-mono", category: "mono", weights: [100, 200, 300, 400, 500, 600, 700], italics: true, axes: [], subsets: ["cyrillic", "cyrillic-ext", "latin", "latin-ext", "vietnamese"], use: "Corporate data and logs; pairs with IBM Plex Sans." },
+    { family: "Space Mono", id: "space-mono", category: "mono", weights: [400, 700], italics: true, axes: [], subsets: ["latin", "latin-ext", "vietnamese"], use: "Retro-tech display and labels; quirky fixed-width." },
+    { family: "DM Mono", id: "dm-mono", category: "mono", weights: [300, 400, 500], italics: true, axes: [], subsets: ["latin", "latin-ext"], use: "Calm code and tabular figures; pairs with DM Sans." },
+    { family: "Fira Code", id: "fira-code", category: "mono", weights: [300, 400, 500, 600, 700], italics: false, axes: [{ tag: "wght", min: 300, max: 700 }], subsets: ["cyrillic", "cyrillic-ext", "greek", "greek-ext", "latin", "latin-ext", "symbols2"], use: "Code blocks with programming ligatures." },
+    { family: "Martian Mono", id: "martian-mono", category: "mono", weights: [100, 200, 300, 400, 500, 600, 700, 800], italics: false, axes: [{ tag: "wdth", min: 75, max: 112.5 }, { tag: "wght", min: 100, max: 800 }], subsets: ["cyrillic", "cyrillic-ext", "latin", "latin-ext"], use: "Wide technical display and dashboards; width axis." },
+    { family: "Caveat", id: "caveat", category: "handwriting", weights: [400, 500, 600, 700], italics: false, axes: [{ tag: "wght", min: 400, max: 700 }], subsets: ["cyrillic", "cyrillic-ext", "latin", "latin-ext"], use: "Notes, annotations and friendly accents." },
+    { family: "Kalam", id: "kalam", category: "handwriting", weights: [300, 400, 700], italics: false, axes: [], subsets: ["devanagari", "latin", "latin-ext"], use: "Informal labels and sketches; felt-pen feel." },
+    { family: "Patrick Hand", id: "patrick-hand", category: "handwriting", weights: [400], italics: false, axes: [], subsets: ["latin", "latin-ext", "vietnamese"], use: "Kids, education and playful callouts; neat print handwriting." },
+];
+const byFamily = new Map(googleFonts.map((f) => [f.family.toLowerCase(), f]));
+const byId = new Map(googleFonts.map((f) => [f.id, f]));
+/** Look a family up by name (case-insensitive) or id. */
+export function getFont(familyOrId) {
+    return byFamily.get(familyOrId.toLowerCase()) ?? byId.get(familyOrId);
+}
+/** The group a font belongs to. */
+export function fontGroupOf(font) {
+    return fontGroups.find((g) => g.category === font.category && (g.style == null || g.style === font.style)) ?? fontGroups[0];
+}
+/** Is the family variable (has a `wght` axis)? */
+export function isVariableFont(font) {
+    return font.axes.some((a) => a.tag === "wght");
+}
+const fallbacks = {
+    sans: "ui-sans-serif, system-ui, sans-serif",
+    rounded: "ui-rounded, ui-sans-serif, system-ui, sans-serif",
+    display: "ui-sans-serif, system-ui, sans-serif",
+    condensed: "ui-sans-serif, system-ui, sans-serif",
+    serif: "ui-serif, Georgia, serif",
+    mono: 'ui-monospace, "SF Mono", Menlo, Consolas, monospace',
+    handwriting: "cursive",
+};
+/**
+ * CSS `font-family` value for a family: the quoted name plus a category fallback.
+ * A name that is not in the catalog is treated as a ready CSS stack and returned as is.
+ */
+export function fontStack(family) {
+    const f = getFont(family);
+    if (!f)
+        return family;
+    const serifDisplay = f.category === "serif";
+    return `"${f.family}", ${serifDisplay ? fallbacks.serif : fallbacks[f.category]}`;
+}