@bettercms-ai/kit 0.1.1 → 2.0.0

package/dist/controls/form-picker.js

@@ -0,0 +1,85 @@
+import { KitServicesProvider, useKitEnv, useKitServices } from "../context.js";
+import { ReferenceControl } from "./reference.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/controls/form-picker.tsx
+/**
+* FORM PICKER — a reference to the project's forms (`reference: { to: ["form"] }`; a component's `form` prop), drawn as
+* V2 draws it: the reference control's card and 300px search popover, its rows the host's forms (V2 read them from
+* `services.forms`, with "{n} fields · {n} submissions" under each name).
+*
+* The rows come from the host, never a seed: `forms` (V2's synchronous list) or `useFormOptions`, a React HOOK for a host
+* that loads them (the dock: GET /forms). While they load, the saved form shows its id; a failed load is said in words
+* on the card and in the picker. D58: submission counts are form data, so a viewer without `forms.submissions` sees
+* them dropped from the subtitle (V2 rule).
+*
+* Remove clears the value (`undefined`): a form prop stores `{ formId }` or nothing, never a null envelope.
+* `FormDetails`, when the host has one, draws under a chosen form (where the form renders on the site, editing its fields).
+*/
+/** A reference whose only target is forms (no filter: a filtered one stays on the reference search). */
+var isFormOnly = (field) => {
+	const to = field.reference?.to ?? [];
+	return to.length === 1 && to[0] === "form" && !field.reference?.filter;
+};
+var SUBMISSIONS = / · [\d,]+ submissions?$/;
+function useFormRows(services) {
+	const loaded = services.useFormOptions ? services.useFormOptions() : null;
+	if (loaded) return {
+		forms: loaded.loading ? null : loaded.forms,
+		error: loaded.error
+	};
+	return { forms: services.forms?.() ?? [] };
+}
+function FormPickerControl(props) {
+	const services = useKitServices();
+	const subs = useKitEnv().can("forms.submissions");
+	const { forms, error } = useFormRows(services);
+	const rowsKey = JSON.stringify(forms);
+	const options = React.useMemo(() => forms?.map((f) => ({
+		id: f.id,
+		kind: "form",
+		title: f.title,
+		subtitle: (subs ? f.subtitle : f.subtitle?.replace(SUBMISSIONS, "")) || null,
+		status: f.status ?? null
+	})) ?? null, [rowsKey, subs]);
+	const reads = React.useMemo(() => {
+		const fail = () => Promise.reject(new Error(error));
+		return {
+			searchReferences: error ? fail : async (q) => {
+				const t = q.q.trim().toLowerCase();
+				return {
+					options: (options ?? []).filter((o) => o.id !== q.excludeId && (!t || o.title.toLowerCase().includes(t))).slice(0, q.limit),
+					truncated: false
+				};
+			},
+			lookupReferences: error ? fail : options ? async (ids) => options.filter((o) => ids.includes(o.id)) : void 0
+		};
+	}, [options, error]);
+	const value = {
+		...services,
+		...reads,
+		createReference: void 0
+	};
+	const formId = typeof props.value === "string" && props.value ? props.value : null;
+	const Details = services.FormDetails;
+	const control = /* @__PURE__ */ jsx(KitServicesProvider, {
+		value,
+		children: /* @__PURE__ */ jsx(ReferenceControl, {
+			...props,
+			onChange: (v) => props.onChange(v == null || v === "" ? void 0 : v)
+		})
+	});
+	if (!formId || !Details) return control;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-0 flex-col gap-2",
+		children: [control, /* @__PURE__ */ jsx(Details, {
+			formId,
+			readOnly: props.readOnly,
+			onPick: (id) => props.onChange(id)
+		})]
+	});
+}
+//#endregion
+export { FormPickerControl, isFormOnly };
+
+//# sourceMappingURL=form-picker.js.map

package/dist/controls/form-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-picker.js","names":[],"sources":["../../src/controls/form-picker.tsx"],"sourcesContent":["/**\n * FORM PICKER — a reference to the project's forms (`reference: { to: [\"form\"] }`; a component's `form` prop), drawn as\n * V2 draws it: the reference control's card and 300px search popover, its rows the host's forms (V2 read them from\n * `services.forms`, with \"{n} fields · {n} submissions\" under each name).\n *\n * The rows come from the host, never a seed: `forms` (V2's synchronous list) or `useFormOptions`, a React HOOK for a host\n * that loads them (the dock: GET /forms). While they load, the saved form shows its id; a failed load is said in words\n * on the card and in the picker. D58: submission counts are form data, so a viewer without `forms.submissions` sees\n * them dropped from the subtitle (V2 rule).\n *\n * Remove clears the value (`undefined`): a form prop stores `{ formId }` or nothing, never a null envelope.\n * `FormDetails`, when the host has one, draws under a chosen form (where the form renders on the site, editing its fields).\n */\nimport * as React from \"react\";\nimport { KitServicesProvider, useKitEnv, useKitServices, type KitServices } from \"../context\";\nimport type { FieldSchema } from \"../schema/types\";\nimport type { ControlProps } from \"../types\";\nimport { ReferenceControl } from \"./reference\";\nimport type { KitReferenceOption, KitReferenceQuery } from \"./reference-services\";\n\nexport interface KitFormOption {\n  id: string;\n  title: string;\n  /** \"5 fields · 128 submissions\" */\n  subtitle?: string;\n  /** \"draft\" shows the Draft chip (a draft form refuses submissions) */\n  status?: string | null;\n}\n\ndeclare module \"../context\" {\n  interface KitServices {\n    /** A React HOOK: the project's forms, for a host that loads them. One identity for the life of the form. */\n    useFormOptions?: () => { forms: KitFormOption[]; loading?: boolean; error?: string };\n    /** Drawn under a chosen form: the host's own detail for it (where it renders, its fields). */\n    FormDetails?: React.ComponentType<{ formId: string; readOnly?: boolean; onPick?: (formId: string) => void }>;\n  }\n}\n\n/** A reference whose only target is forms (no filter: a filtered one stays on the reference search). */\nexport const isFormOnly = (field: FieldSchema) => {\n  const to = field.reference?.to ?? [];\n  return to.length === 1 && to[0] === \"form\" && !field.reference?.filter;\n};\n\nconst SUBMISSIONS = / · [\\d,]+ submissions?$/;\n\nfunction useFormRows(services: KitServices): { forms: KitFormOption[] | null; error?: string } {\n  const loaded = services.useFormOptions ? services.useFormOptions() : null;\n  if (loaded) return { forms: loaded.loading ? null : loaded.forms, error: loaded.error };\n  return { forms: services.forms?.() ?? [] };\n}\n\nexport function FormPickerControl(props: ControlProps) {\n  const services = useKitServices();\n  const subs = useKitEnv().can(\"forms.submissions\");\n  const { forms, error } = useFormRows(services);\n  // by content: `forms()` may hand back a new list on every render, and the search must keep one identity (the picker\n  // searches again whenever it changes)\n  const rowsKey = JSON.stringify(forms);\n  const options = React.useMemo<KitReferenceOption[] | null>(\n    () =>\n      forms?.map((f) => ({ id: f.id, kind: \"form\" as const, title: f.title, subtitle: (subs ? f.subtitle : f.subtitle?.replace(SUBMISSIONS, \"\")) || null, status: f.status ?? null })) ?? null,\n    [rowsKey, subs], // eslint-disable-line react-hooks/exhaustive-deps\n  );\n  // the reference control over these rows: search by name, read the saved id back. While the forms load there is no\n  // lookup, so the card shows the saved id (never a \"Missing\" that is only \"not loaded yet\").\n  const reads = React.useMemo(() => {\n    const fail = () => Promise.reject(new Error(error));\n    return {\n      searchReferences: error\n        ? fail\n        : async (q: KitReferenceQuery) => {\n            const t = q.q.trim().toLowerCase();\n            const rows = (options ?? []).filter((o) => o.id !== q.excludeId && (!t || o.title.toLowerCase().includes(t)));\n            return { options: rows.slice(0, q.limit), truncated: false };\n          },\n      lookupReferences: error ? fail : options ? async (ids: string[]) => options.filter((o) => ids.includes(o.id)) : undefined,\n    };\n  }, [options, error]);\n  const value: KitServices = { ...services, ...reads, createReference: undefined };\n  const formId = typeof props.value === \"string\" && props.value ? props.value : null;\n  const Details = services.FormDetails;\n  const control = (\n    <KitServicesProvider value={value}>\n      <ReferenceControl {...props} onChange={(v) => props.onChange(v == null || v === \"\" ? undefined : v)} />\n    </KitServicesProvider>\n  );\n  // V2 draws the reference control alone; only the host's details under a chosen form need the stack\n  if (!formId || !Details) return control;\n  return (\n    <div className=\"flex min-w-0 flex-col gap-2\">\n      {control}\n      <Details formId={formId} readOnly={props.readOnly} onPick={(id) => props.onChange(id)} />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAuCA,IAAa,cAAc,UAAuB;CAChD,MAAM,KAAK,MAAM,WAAW,MAAM,CAAC;CACnC,OAAO,GAAG,WAAW,KAAK,GAAG,OAAO,UAAU,CAAC,MAAM,WAAW;AAClE;AAEA,IAAM,cAAc;AAEpB,SAAS,YAAY,UAA0E;CAC7F,MAAM,SAAS,SAAS,iBAAiB,SAAS,eAAe,IAAI;CACrE,IAAI,QAAQ,OAAO;EAAE,OAAO,OAAO,UAAU,OAAO,OAAO;EAAO,OAAO,OAAO;CAAM;CACtF,OAAO,EAAE,OAAO,SAAS,QAAQ,KAAK,CAAC,EAAE;AAC3C;AAEA,SAAgB,kBAAkB,OAAqB;CACrD,MAAM,WAAW,eAAe;CAChC,MAAM,OAAO,UAAU,CAAC,CAAC,IAAI,mBAAmB;CAChD,MAAM,EAAE,OAAO,UAAU,YAAY,QAAQ;CAG7C,MAAM,UAAU,KAAK,UAAU,KAAK;CACpC,MAAM,UAAU,MAAM,cAElB,OAAO,KAAK,OAAO;EAAE,IAAI,EAAE;EAAI,MAAM;EAAiB,OAAO,EAAE;EAAO,WAAW,OAAO,EAAE,WAAW,EAAE,UAAU,QAAQ,aAAa,EAAE,MAAM;EAAM,QAAQ,EAAE,UAAU;CAAK,EAAE,KAAK,MACtL,CAAC,SAAS,IAAI,CAChB;CAGA,MAAM,QAAQ,MAAM,cAAc;EAChC,MAAM,aAAa,QAAQ,OAAO,IAAI,MAAM,KAAK,CAAC;EAClD,OAAO;GACL,kBAAkB,QACd,OACA,OAAO,MAAyB;IAC9B,MAAM,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC,YAAY;IAEjC,OAAO;KAAE,UADK,WAAW,CAAC,EAAA,CAAG,QAAQ,MAAM,EAAE,OAAO,EAAE,cAAc,CAAC,KAAK,EAAE,MAAM,YAAY,CAAC,CAAC,SAAS,CAAC,EACxF,CAAA,CAAK,MAAM,GAAG,EAAE,KAAK;KAAG,WAAW;IAAM;GAC7D;GACJ,kBAAkB,QAAQ,OAAO,UAAU,OAAO,QAAkB,QAAQ,QAAQ,MAAM,IAAI,SAAS,EAAE,EAAE,CAAC,IAAI,KAAA;EAClH;CACF,GAAG,CAAC,SAAS,KAAK,CAAC;CACnB,MAAM,QAAqB;EAAE,GAAG;EAAU,GAAG;EAAO,iBAAiB,KAAA;CAAU;CAC/E,MAAM,SAAS,OAAO,MAAM,UAAU,YAAY,MAAM,QAAQ,MAAM,QAAQ;CAC9E,MAAM,UAAU,SAAS;CACzB,MAAM,UACJ,oBAAC,qBAAD;EAA4B;EAC1B,UAAA,oBAAC,kBAAD;GAAkB,GAAI;GAAO,WAAW,MAAM,MAAM,SAAS,KAAK,QAAQ,MAAM,KAAK,KAAA,IAAY,CAAC;EAAI,CAAA;CACnF,CAAA;CAGvB,IAAI,CAAC,UAAU,CAAC,SAAS,OAAO;CAChC,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACG,SACD,oBAAC,SAAD;GAAiB;GAAQ,UAAU,MAAM;GAAU,SAAS,OAAO,MAAM,SAAS,EAAE;EAAI,CAAA,CACrF;;AAET"}

package/dist/controls/icon-register.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/controls/icon-register.js

@@ -0,0 +1,8 @@
+import { CONTROLS } from "../engine/kit-field.js";
+import { IconControl } from "./icon.js";
+//#region src/controls/icon-register.ts
+/** Lane C3: the icon field in the engine's dispatch table (one line per type; merge with other lanes by line). */
+CONTROLS.icon = IconControl;
+//#endregion
+
+//# sourceMappingURL=icon-register.js.map

package/dist/controls/icon-register.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-register.js","names":[],"sources":["../../src/controls/icon-register.ts"],"sourcesContent":["/** Lane C3: the icon field in the engine's dispatch table (one line per type; merge with other lanes by line). */\nimport { CONTROLS } from \"../engine/kit-field\";\nimport { IconControl } from \"./icon\";\n\nCONTROLS.icon = IconControl;\n"],"mappings":";;;;AAIA,SAAS,OAAO"}

package/dist/controls/icon.d.ts

@@ -0,0 +1,40 @@
+/**
+ * ICON — the icon field (DESIGN 8.14), V2 controls/icon.tsx fitted to what prod stores.
+ *
+ * Values (backend reference-validation `icon`, the classic PropsPanel IconValueInput):
+ *   "arrow-right"                 a name from the BetterCMS icon set (DOCK_ICON_NAMES, 472 names)
+ *   "https://…/logo.svg"          an uploaded icon: an image URL (picked from the media library; a component prop
+ *                                 stores the URL string, like the classic panel's codec="url")
+ *   { url, … }                    an uploaded icon stored as an image value: shown and kept until replaced
+ *   null                          no icon ("No icon"; the backend skips an empty value)
+ *
+ * The grid offers the BetterCMS set, the one prod accepts. Search also matches a name's Tabler twin through the
+ * Tabler ↔ dock adapter (adapters/icons.ts), so "map" finds earth-americas. A stored name outside the set (a stale
+ * Tabler or Lucide name) is shown with its reason and kept until the author picks another.
+ *
+ * Glyphs: the host draws them (KitServices.IconGlyph: the dashboard's DockIcon, the set the site renders). With no
+ * host renderer the kit draws the Tabler twin, loaded on first use; a name with no Tabler twin shows its name.
+ */
+import * as React from "react";
+import type { ControlProps } from "../types";
+declare module "../context" {
+    interface KitServices {
+        /**
+         * Draws one icon of the BetterCMS set by name, aria-hidden (the name beside it is the accessible text): the glyphs
+         * the site renders. The dashboard passes `DockIcon` (src/components/dock/DockIcon). Absent → the Tabler twin.
+         */
+        IconGlyph?: React.ComponentType<{
+            name: string;
+            className?: string;
+        }>;
+    }
+}
+/** The picker: search, Recent, then the whole set ("No icon" first). Search spans the name and its Tabler twin.
+ *  `field`: the icon field's popover (V2 IconFieldPicker, a 22rem list); otherwise the app-UI grid (V2 IconPickerGrid, max-h-56). */
+export declare function IconPicker({ value, onPick, onChooseMedia, field }: {
+    value?: string;
+    onPick: (name: string | null) => void;
+    onChooseMedia?: () => void;
+    field?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function IconControl({ field, value, onChange, readOnly, id, invalid }: ControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/controls/icon.js

@@ -0,0 +1,360 @@
+import { DOCK_ICON_NAMES, DOCK_ICON_NAME_SET } from "../adapters/prod-types.js";
+import { tablerIconOf } from "../adapters/icons.js";
+import { cn } from "../lib/cn.js";
+import { useKitServices } from "../context.js";
+import { isObj } from "../lib/path.js";
+import { iconLabel } from "../lib/icons.js";
+import { TooltipLayer } from "../ui/tooltip-root.js";
+import { Button } from "../ui/button.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/overlay.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { IconAlertTriangle, IconChevronDown, IconPhoto, IconSearch, IconX } from "@tabler/icons-react";
+import { Tooltip } from "@base-ui/react/tooltip";
+//#region src/controls/icon.tsx
+/**
+* ICON — the icon field (DESIGN 8.14), V2 controls/icon.tsx fitted to what prod stores.
+*
+* Values (backend reference-validation `icon`, the classic PropsPanel IconValueInput):
+*   "arrow-right"                 a name from the BetterCMS icon set (DOCK_ICON_NAMES, 472 names)
+*   "https://…/logo.svg"          an uploaded icon: an image URL (picked from the media library; a component prop
+*                                 stores the URL string, like the classic panel's codec="url")
+*   { url, … }                    an uploaded icon stored as an image value: shown and kept until replaced
+*   null                          no icon ("No icon"; the backend skips an empty value)
+*
+* The grid offers the BetterCMS set, the one prod accepts. Search also matches a name's Tabler twin through the
+* Tabler ↔ dock adapter (adapters/icons.ts), so "map" finds earth-americas. A stored name outside the set (a stale
+* Tabler or Lucide name) is shown with its reason and kept until the author picks another.
+*
+* Glyphs: the host draws them (KitServices.IconGlyph: the dashboard's DockIcon, the set the site renders). With no
+* host renderer the kit draws the Tabler twin, loaded on first use; a name with no Tabler twin shows its name.
+*/
+var tablerSet = null;
+var tablerLoad = null;
+var pascal = (kebab) => `Icon${kebab.split("-").map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join("")}`;
+/** The full Tabler set, loaded once and only when no host renderer is provided. */
+function useTablerSet(need) {
+	const [, landed] = React.useReducer((n) => n + 1, 0);
+	React.useEffect(() => {
+		if (!need || tablerSet) return;
+		let live = true;
+		tablerLoad ??= import("@tabler/icons-react").then((m) => {
+			tablerSet = m;
+		});
+		tablerLoad.then(() => live && landed(), () => {});
+		return () => {
+			live = false;
+		};
+	}, [need]);
+	return tablerSet;
+}
+function Glyph({ name, className }) {
+	const Host = useKitServices().IconGlyph;
+	const set = useTablerSet(!Host);
+	if (Host) return /* @__PURE__ */ jsx(Host, {
+		name,
+		className
+	});
+	const T = set?.[pascal(tablerIconOf(name))];
+	if (T) return /* @__PURE__ */ jsx(T, {
+		className,
+		stroke: 1.5,
+		"aria-hidden": true
+	});
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: "max-w-full truncate px-0.5 text-[9px] leading-3 text-kit-fg-3",
+		children: name
+	});
+}
+var isUrlish = (s) => /[/.]/.test(s);
+function readIcon(v) {
+	if (v == null || v === "") return { kind: "empty" };
+	if (typeof v === "string") return DOCK_ICON_NAME_SET.has(v) ? {
+		kind: "name",
+		name: v
+	} : isUrlish(v) ? {
+		kind: "upload",
+		url: v
+	} : {
+		kind: "unknown",
+		name: v
+	};
+	if (isObj(v) && typeof v.url === "string" && v.url) return {
+		kind: "upload",
+		url: v.url
+	};
+	return { kind: "unreadable" };
+}
+var fileName = (url) => decodeURIComponent(url.split(/[?#]/)[0].split("/").pop() || url);
+/** Names picked this session, newest first (shown as "Recent"). */
+var recents = [];
+var pushRecent = (name) => {
+	const i = recents.indexOf(name);
+	if (i !== -1) recents.splice(i, 1);
+	recents.unshift(name);
+	recents.length = Math.min(recents.length, COLS);
+};
+var COLS = 8;
+var norm = (q) => q.toLowerCase().trim().replace(/\s+/g, "-");
+/** Up / down within a grid keep the column; past its edge they land in the same column of the next / previous grid. */
+function verticalTarget(grids, g, j, down) {
+	const col = j % COLS;
+	const cur = grids[g];
+	const within = down ? j + COLS : j - COLS;
+	if (within >= 0 && within < cur.length) return cur[within];
+	if (down && Math.floor(j / COLS) < Math.floor((cur.length - 1) / COLS)) return cur[cur.length - 1];
+	const next = grids[down ? g + 1 : g - 1];
+	if (!next) return down ? void 0 : "search";
+	if (down) return next[Math.min(col, next.length - 1)];
+	const lastRow = Math.floor((next.length - 1) / COLS) * COLS;
+	return next[Math.min(lastRow + col, next.length - 1)];
+}
+function IconGrid({ items, selected, onPick, label, tip }) {
+	const ref = React.useRef(null);
+	const stop = items.some((i) => i.key === selected) ? selected : items[0]?.key;
+	const move = (e) => {
+		const scope = ref.current?.closest("[data-icon-picker]") ?? ref.current;
+		const grids = Array.from(scope?.querySelectorAll("[data-icon-grid]") ?? []).map((g) => Array.from(g.querySelectorAll("[data-grid-item]")));
+		const btns = grids.flat();
+		const i = btns.indexOf(document.activeElement);
+		if (i === -1) return;
+		const g = grids.findIndex((list) => list.includes(btns[i]));
+		const j = grids[g].indexOf(btns[i]);
+		let to;
+		if (e.key === "ArrowRight") to = btns[Math.min(i + 1, btns.length - 1)];
+		else if (e.key === "ArrowLeft") to = btns[Math.max(i - 1, 0)];
+		else if (e.key === "Home") to = btns[0];
+		else if (e.key === "End") to = btns[btns.length - 1];
+		else if (e.key === "ArrowDown" || e.key === "ArrowUp") to = verticalTarget(grids, g, j, e.key === "ArrowDown") ?? btns[i];
+		else return;
+		e.preventDefault();
+		if (to === "search") scope?.querySelector("input[data-icon-search]")?.focus();
+		else to?.focus();
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-icon-grid": true,
+		className: "grid gap-0.5",
+		style: { gridTemplateColumns: `repeat(${COLS}, minmax(0, 1fr))` },
+		role: "listbox",
+		"aria-label": label,
+		onKeyDown: move,
+		children: items.map((it) => /* @__PURE__ */ jsx(Tooltip.Trigger, {
+			handle: tip,
+			payload: it.label,
+			delay: 500,
+			render: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				role: "option",
+				"data-grid-item": true,
+				"data-icon": it.key,
+				"aria-selected": it.key === selected,
+				"aria-label": it.label,
+				tabIndex: it.key === stop ? 0 : -1,
+				onClick: () => onPick(it.key),
+				className: cn("flex aspect-square items-center justify-center rounded-kit-md text-kit-fg-2 transition-colors hover:bg-kit-hover hover:text-kit-fg", it.key === selected && "bg-kit-selected text-kit-fg ring-1 ring-inset ring-kit-line-strong"),
+				children: it.node
+			})
+		}, it.key))
+	});
+}
+var NONE = "__none";
+/** The picker: search, Recent, then the whole set ("No icon" first). Search spans the name and its Tabler twin.
+*  `field`: the icon field's popover (V2 IconFieldPicker, a 22rem list); otherwise the app-UI grid (V2 IconPickerGrid, max-h-56). */
+function IconPicker({ value, onPick, onChooseMedia, field }) {
+	const [q, setQ] = React.useState("");
+	const root = React.useRef(null);
+	const tip = React.useMemo(() => Tooltip.createHandle(), []);
+	const needle = norm(q);
+	const item = (name) => ({
+		key: name,
+		label: iconLabel(name),
+		node: /* @__PURE__ */ jsx(Glyph, {
+			name,
+			className: "size-[18px]"
+		})
+	});
+	const pick = (key) => onPick(key === NONE ? null : key);
+	const hits = needle ? DOCK_ICON_NAMES.filter((n) => n.includes(needle) || tablerIconOf(n).includes(needle)) : [];
+	const recent = recents.filter((n) => DOCK_ICON_NAME_SET.has(n));
+	return /* @__PURE__ */ jsxs("div", {
+		ref: root,
+		"data-icon-picker": true,
+		className: "flex flex-col gap-2",
+		children: [
+			/* @__PURE__ */ jsx(Tooltip.Root, {
+				handle: tip,
+				children: ({ payload }) => payload ? /* @__PURE__ */ jsx(TooltipLayer, { children: payload }) : null
+			}),
+			/* @__PURE__ */ jsxs("label", {
+				className: "flex h-8 items-center gap-2 rounded-kit-md bg-kit-muted px-2.5 text-kit-fg-3 focus-within:bg-kit-field-bg focus-within:ring-1 focus-within:ring-kit-line-strong",
+				children: [/* @__PURE__ */ jsx(IconSearch, {
+					className: "size-4 shrink-0",
+					stroke: 1.5,
+					"aria-hidden": true
+				}), /* @__PURE__ */ jsx("input", {
+					autoFocus: true,
+					"data-icon-search": true,
+					value: q,
+					onChange: (e) => setQ(e.target.value),
+					onKeyDown: (e) => {
+						if (e.key === "ArrowDown") {
+							e.preventDefault();
+							root.current?.querySelector("[data-grid-item]")?.focus();
+						}
+					},
+					placeholder: "Search icons",
+					"aria-label": "Search icons",
+					className: "h-full min-w-0 flex-1 bg-transparent text-kit-sm text-kit-fg outline-none placeholder:text-kit-fg-3"
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: field ? "max-h-[22rem] overflow-y-auto pr-0.5" : "max-h-56 overflow-y-auto pr-0.5",
+				children: needle ? /* @__PURE__ */ jsx("div", {
+					className: "flex flex-col gap-2",
+					children: hits.length ? /* @__PURE__ */ jsx(Group, { children: /* @__PURE__ */ jsx(IconGrid, {
+						label: "Icons",
+						selected: value,
+						onPick: pick,
+						tip,
+						items: hits.map(item)
+					}) }) : /* @__PURE__ */ jsxs("p", {
+						className: "py-6 text-center text-kit-sm text-kit-fg-3",
+						children: [
+							"No icons match “",
+							q.trim(),
+							"”"
+						]
+					})
+				}) : /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-2",
+					children: [recent.length ? /* @__PURE__ */ jsx(Group, {
+						title: "Recent",
+						children: /* @__PURE__ */ jsx(IconGrid, {
+							label: "Recent icons",
+							selected: value,
+							onPick: pick,
+							tip,
+							items: recent.map(item)
+						})
+					}) : null, /* @__PURE__ */ jsx(Group, {
+						title: recent.length ? "All icons" : void 0,
+						children: /* @__PURE__ */ jsx(IconGrid, {
+							label: "Icons",
+							selected: value ?? NONE,
+							onPick: pick,
+							tip,
+							items: [{
+								key: NONE,
+								label: "No icon",
+								node: /* @__PURE__ */ jsx(IconX, {
+									className: "size-4",
+									stroke: 1.5,
+									"aria-hidden": true
+								})
+							}, ...DOCK_ICON_NAMES.map(item)]
+						})
+					})]
+				})
+			}),
+			onChooseMedia ? /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between gap-2 border-t border-kit-line pt-2",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "whitespace-nowrap text-kit-xs text-kit-fg-3",
+					children: "Images keep their colours."
+				}), /* @__PURE__ */ jsx(Button, {
+					size: "xs",
+					variant: "ghost",
+					leftIcon: /* @__PURE__ */ jsx(IconPhoto, { stroke: 1.5 }),
+					onClick: onChooseMedia,
+					children: "Choose from media"
+				})]
+			}) : null
+		]
+	});
+}
+function Group({ title, children }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1",
+		children: [title ? /* @__PURE__ */ jsx("div", {
+			className: "px-0.5 text-kit-2xs font-medium text-kit-fg-3",
+			children: title
+		}) : null, children]
+	});
+}
+function IconControl({ field, value, onChange, readOnly, id, invalid }) {
+	const { MediaPicker, mediaSrc } = useKitServices();
+	const [open, setOpen] = React.useState(false);
+	const [mediaOpen, setMediaOpen] = React.useState(false);
+	const read = readIcon(value);
+	const commit = (v) => {
+		onChange(v);
+		if (v && DOCK_ICON_NAME_SET.has(v)) pushRecent(v);
+		setOpen(false);
+	};
+	const tile = read.kind === "name" ? /* @__PURE__ */ jsx(Glyph, {
+		name: read.name,
+		className: "size-4"
+	}) : read.kind === "upload" ? /* @__PURE__ */ jsx("img", {
+		src: mediaSrc ? mediaSrc(read.url) : read.url,
+		alt: "",
+		className: "size-4 object-contain"
+	}) : read.kind === "empty" ? /* @__PURE__ */ jsx("span", { className: "size-3 rounded-kit-md border border-dashed border-[var(--kit-emphasis-line)]" }) : /* @__PURE__ */ jsx(IconAlertTriangle, {
+		className: "size-3.5 text-kit-warning-fg",
+		stroke: 1.5,
+		"aria-hidden": true
+	});
+	const text = read.kind === "name" ? iconLabel(read.name) : read.kind === "upload" ? fileName(read.url) : read.kind === "unknown" ? `“${read.name}” isn't in the icon set` : read.kind === "unreadable" ? "This value isn't an icon this picker can read" : "Choose an icon";
+	const warn = read.kind === "unknown" || read.kind === "unreadable";
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+			render: /* @__PURE__ */ jsx("button", {
+				id,
+				type: "button",
+				disabled: readOnly,
+				"aria-invalid": invalid || void 0,
+				className: cn("flex h-8 w-full items-center gap-2.5 rounded-kit-md border border-kit-line-strong bg-kit-field-bg px-1 pr-2.5 text-left text-kit-sm transition-colors hover:border-kit-line-strong data-[popup-open]:border-kit-line-strong data-[popup-open]:bg-kit-field-bg", invalid && "border-[var(--kit-field-invalid)]")
+			}),
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "flex size-6 items-center justify-center rounded-kit-md border border-kit-line bg-kit-control-bg text-kit-fg",
+					children: tile
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: cn("min-w-0 flex-1 truncate", warn ? "text-kit-warning-fg" : read.kind === "empty" ? "text-kit-fg-3" : "text-kit-fg"),
+					children: text
+				}),
+				/* @__PURE__ */ jsx(IconChevronDown, {
+					className: "size-3.5 text-kit-fg-3",
+					stroke: 1.5,
+					"aria-hidden": true
+				})
+			]
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			className: "w-[320px] p-2",
+			align: "start",
+			"aria-label": `${field.title}: choose an icon`,
+			children: /* @__PURE__ */ jsx(IconPicker, {
+				field: true,
+				value: read.kind === "name" ? read.name : read.kind === "empty" ? void 0 : "",
+				onPick: commit,
+				onChooseMedia: MediaPicker ? () => {
+					setOpen(false);
+					setMediaOpen(true);
+				} : void 0
+			})
+		})]
+	}), MediaPicker && mediaOpen ? /* @__PURE__ */ jsx(MediaPicker, {
+		open: mediaOpen,
+		onOpenChange: setMediaOpen,
+		accept: ["svg", "image"],
+		onPick: (assets) => assets[0]?.url && commit(assets[0].url)
+	}) : null] });
+}
+//#endregion
+export { IconControl, IconPicker };
+
+//# sourceMappingURL=icon.js.map

package/dist/controls/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","names":[],"sources":["../../src/controls/icon.tsx"],"sourcesContent":["/**\n * ICON — the icon field (DESIGN 8.14), V2 controls/icon.tsx fitted to what prod stores.\n *\n * Values (backend reference-validation `icon`, the classic PropsPanel IconValueInput):\n *   \"arrow-right\"                 a name from the BetterCMS icon set (DOCK_ICON_NAMES, 472 names)\n *   \"https://…/logo.svg\"          an uploaded icon: an image URL (picked from the media library; a component prop\n *                                 stores the URL string, like the classic panel's codec=\"url\")\n *   { url, … }                    an uploaded icon stored as an image value: shown and kept until replaced\n *   null                          no icon (\"No icon\"; the backend skips an empty value)\n *\n * The grid offers the BetterCMS set, the one prod accepts. Search also matches a name's Tabler twin through the\n * Tabler ↔ dock adapter (adapters/icons.ts), so \"map\" finds earth-americas. A stored name outside the set (a stale\n * Tabler or Lucide name) is shown with its reason and kept until the author picks another.\n *\n * Glyphs: the host draws them (KitServices.IconGlyph: the dashboard's DockIcon, the set the site renders). With no\n * host renderer the kit draws the Tabler twin, loaded on first use; a name with no Tabler twin shows its name.\n */\nimport * as React from \"react\";\nimport type { Icon as TablerIcon } from \"@tabler/icons-react\";\nimport { IconAlertTriangle, IconChevronDown, IconPhoto, IconSearch, IconX } from \"@tabler/icons-react\";\nimport { cn } from \"../lib/cn\";\nimport { isObj } from \"../lib/path\";\nimport { iconLabel } from \"../lib/icons\";\nimport { useKitServices } from \"../context\";\nimport { DOCK_ICON_NAMES, DOCK_ICON_NAME_SET } from \"../adapters/prod-types\";\nimport { tablerIconOf } from \"../adapters/icons\";\nimport type { ControlProps } from \"../types\";\nimport { Button } from \"../ui/button\";\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../ui/overlay\";\nimport { TooltipLayer } from \"../ui/tooltip-root\";\n\n/* ── Glyphs ───────────────────────────────────────────────────────────── */\ndeclare module \"../context\" {\n  interface KitServices {\n    /**\n     * Draws one icon of the BetterCMS set by name, aria-hidden (the name beside it is the accessible text): the glyphs\n     * the site renders. The dashboard passes `DockIcon` (src/components/dock/DockIcon). Absent → the Tabler twin.\n     */\n    IconGlyph?: React.ComponentType<{ name: string; className?: string }>;\n  }\n}\n\nlet tablerSet: Record<string, unknown> | null = null;\nlet tablerLoad: Promise<void> | null = null;\nconst pascal = (kebab: string) => `Icon${kebab.split(\"-\").map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join(\"\")}`;\n\n/** The full Tabler set, loaded once and only when no host renderer is provided. */\nfunction useTablerSet(need: boolean): Record<string, unknown> | null {\n  const [, landed] = React.useReducer((n: number) => n + 1, 0);\n  React.useEffect(() => {\n    if (!need || tablerSet) return;\n    let live = true;\n    tablerLoad ??= import(\"@tabler/icons-react\").then((m) => {\n      tablerSet = m as unknown as Record<string, unknown>;\n    });\n    tablerLoad.then(() => live && landed(), () => {});\n    return () => {\n      live = false;\n    };\n  }, [need]);\n  return tablerSet;\n}\n\nfunction Glyph({ name, className }: { name: string; className?: string }) {\n  const Host = useKitServices().IconGlyph;\n  const set = useTablerSet(!Host);\n  if (Host) return <Host name={name} className={className} />;\n  const T = set?.[pascal(tablerIconOf(name))] as TablerIcon | undefined;\n  if (T) return <T className={className} stroke={1.5} aria-hidden />;\n  // no Tabler twin (or the set is still loading): the name itself, never a stand-in shape\n  return (\n    <span aria-hidden className=\"max-w-full truncate px-0.5 text-[9px] leading-3 text-kit-fg-3\">\n      {name}\n    </span>\n  );\n}\n\n/* ── Values ───────────────────────────────────────────────────────────── */\ntype Read =\n  | { kind: \"empty\" }\n  | { kind: \"name\"; name: string }\n  | { kind: \"unknown\"; name: string }\n  | { kind: \"upload\"; url: string }\n  | { kind: \"unreadable\" };\nconst isUrlish = (s: string) => /[/.]/.test(s);\nfunction readIcon(v: unknown): Read {\n  if (v == null || v === \"\") return { kind: \"empty\" };\n  if (typeof v === \"string\") return DOCK_ICON_NAME_SET.has(v) ? { kind: \"name\", name: v } : isUrlish(v) ? { kind: \"upload\", url: v } : { kind: \"unknown\", name: v };\n  if (isObj(v) && typeof v.url === \"string\" && v.url) return { kind: \"upload\", url: v.url };\n  return { kind: \"unreadable\" };\n}\nconst fileName = (url: string) => decodeURIComponent(url.split(/[?#]/)[0].split(\"/\").pop() || url);\n\n/** Names picked this session, newest first (shown as \"Recent\"). */\nconst recents: string[] = [];\nconst pushRecent = (name: string) => {\n  const i = recents.indexOf(name);\n  if (i !== -1) recents.splice(i, 1);\n  recents.unshift(name);\n  recents.length = Math.min(recents.length, COLS);\n};\n\n/* ── The grid: one tab stop, arrow keys, Home / End ───────────────────── */\nconst COLS = 8;\nconst norm = (q: string) => q.toLowerCase().trim().replace(/\\s+/g, \"-\");\ninterface GridItem {\n  key: string;\n  label: string;\n  node: React.ReactNode;\n}\n\ntype TipHandle = ReturnType<typeof TooltipPrimitive.createHandle<string>>;\n\n/** Up / down within a grid keep the column; past its edge they land in the same column of the next / previous grid. */\nfunction verticalTarget(grids: HTMLButtonElement[][], g: number, j: number, down: boolean): HTMLButtonElement | \"search\" | undefined {\n  const col = j % COLS;\n  const cur = grids[g];\n  const within = down ? j + COLS : j - COLS;\n  if (within >= 0 && within < cur.length) return cur[within];\n  if (down && Math.floor(j / COLS) < Math.floor((cur.length - 1) / COLS)) return cur[cur.length - 1]; // a short last row\n  const next = grids[down ? g + 1 : g - 1];\n  if (!next) return down ? undefined : \"search\";\n  if (down) return next[Math.min(col, next.length - 1)];\n  const lastRow = Math.floor((next.length - 1) / COLS) * COLS;\n  return next[Math.min(lastRow + col, next.length - 1)];\n}\n\nfunction IconGrid({ items, selected, onPick, label, tip }: { items: GridItem[]; selected?: string; onPick: (key: string) => void; label: string; tip: TipHandle }) {\n  const ref = React.useRef<HTMLDivElement>(null);\n  const stop = items.some((i) => i.key === selected) ? selected : items[0]?.key;\n  const move = (e: React.KeyboardEvent) => {\n    // one keyboard space across every group in the picker (Recent, the set, search results)\n    const scope = ref.current?.closest(\"[data-icon-picker]\") ?? ref.current;\n    const grids = Array.from(scope?.querySelectorAll<HTMLElement>(\"[data-icon-grid]\") ?? []).map((g) => Array.from(g.querySelectorAll<HTMLButtonElement>(\"[data-grid-item]\")));\n    const btns = grids.flat();\n    const i = btns.indexOf(document.activeElement as HTMLButtonElement);\n    if (i === -1) return;\n    const g = grids.findIndex((list) => list.includes(btns[i]));\n    const j = grids[g].indexOf(btns[i]);\n    let to: HTMLButtonElement | \"search\" | undefined;\n    if (e.key === \"ArrowRight\") to = btns[Math.min(i + 1, btns.length - 1)];\n    else if (e.key === \"ArrowLeft\") to = btns[Math.max(i - 1, 0)];\n    else if (e.key === \"Home\") to = btns[0];\n    else if (e.key === \"End\") to = btns[btns.length - 1];\n    else if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") to = verticalTarget(grids, g, j, e.key === \"ArrowDown\") ?? btns[i];\n    else return;\n    e.preventDefault();\n    if (to === \"search\") scope?.querySelector<HTMLInputElement>(\"input[data-icon-search]\")?.focus();\n    else to?.focus();\n  };\n  return (\n    <div ref={ref} data-icon-grid className=\"grid gap-0.5\" style={{ gridTemplateColumns: `repeat(${COLS}, minmax(0, 1fr))` }} role=\"listbox\" aria-label={label} onKeyDown={move}>\n      {items.map((it) => (\n        // one shared tooltip for the whole picker (hundreds of icons): each trigger hands it its label\n        <TooltipPrimitive.Trigger\n          key={it.key}\n          handle={tip}\n          payload={it.label}\n          delay={500}\n          render={\n          <button\n            type=\"button\"\n            role=\"option\"\n            data-grid-item\n            data-icon={it.key}\n            aria-selected={it.key === selected}\n            aria-label={it.label}\n            tabIndex={it.key === stop ? 0 : -1}\n            onClick={() => onPick(it.key)}\n            className={cn(\n              \"flex aspect-square items-center justify-center rounded-kit-md text-kit-fg-2 transition-colors hover:bg-kit-hover hover:text-kit-fg\",\n              it.key === selected && \"bg-kit-selected text-kit-fg ring-1 ring-inset ring-kit-line-strong\",\n            )}\n          >\n            {it.node}\n          </button>\n          }\n        />\n      ))}\n    </div>\n  );\n}\n\nconst NONE = \"__none\";\n\n/** The picker: search, Recent, then the whole set (\"No icon\" first). Search spans the name and its Tabler twin.\n *  `field`: the icon field's popover (V2 IconFieldPicker, a 22rem list); otherwise the app-UI grid (V2 IconPickerGrid, max-h-56). */\nexport function IconPicker({ value, onPick, onChooseMedia, field }: { value?: string; onPick: (name: string | null) => void; onChooseMedia?: () => void; field?: boolean }) {\n  const [q, setQ] = React.useState(\"\");\n  const root = React.useRef<HTMLDivElement>(null);\n  const tip = React.useMemo(() => TooltipPrimitive.createHandle<string>(), []);\n  const needle = norm(q);\n  const item = (name: string): GridItem => ({ key: name, label: iconLabel(name), node: <Glyph name={name} className=\"size-[18px]\" /> });\n  const pick = (key: string) => onPick(key === NONE ? null : key);\n  const hits = needle ? DOCK_ICON_NAMES.filter((n) => n.includes(needle) || tablerIconOf(n).includes(needle)) : [];\n  const recent = recents.filter((n) => DOCK_ICON_NAME_SET.has(n));\n  return (\n    <div ref={root} data-icon-picker className=\"flex flex-col gap-2\">\n      <TooltipPrimitive.Root handle={tip}>{({ payload }) => (payload ? <TooltipLayer>{payload}</TooltipLayer> : null)}</TooltipPrimitive.Root>\n      <label className=\"flex h-8 items-center gap-2 rounded-kit-md bg-kit-muted px-2.5 text-kit-fg-3 focus-within:bg-kit-field-bg focus-within:ring-1 focus-within:ring-kit-line-strong\">\n        <IconSearch className=\"size-4 shrink-0\" stroke={1.5} aria-hidden />\n        <input\n          autoFocus\n          data-icon-search\n          value={q}\n          onChange={(e) => setQ(e.target.value)}\n          onKeyDown={(e) => {\n            if (e.key === \"ArrowDown\") {\n              e.preventDefault();\n              root.current?.querySelector<HTMLButtonElement>(\"[data-grid-item]\")?.focus();\n            }\n          }}\n          placeholder=\"Search icons\"\n          aria-label=\"Search icons\"\n          className=\"h-full min-w-0 flex-1 bg-transparent text-kit-sm text-kit-fg outline-none placeholder:text-kit-fg-3\"\n        />\n      </label>\n      <div className={field ? \"max-h-[22rem] overflow-y-auto pr-0.5\" : \"max-h-56 overflow-y-auto pr-0.5\"}>\n        {needle ? (\n          <div className=\"flex flex-col gap-2\">\n            {hits.length ? (\n              <Group>\n                <IconGrid label=\"Icons\" selected={value} onPick={pick} tip={tip} items={hits.map(item)} />\n              </Group>\n            ) : (\n              <p className=\"py-6 text-center text-kit-sm text-kit-fg-3\">No icons match “{q.trim()}”</p>\n            )}\n          </div>\n        ) : (\n          <div className=\"flex flex-col gap-2\">\n            {recent.length ? (\n              <Group title=\"Recent\">\n                <IconGrid label=\"Recent icons\" selected={value} onPick={pick} tip={tip} items={recent.map(item)} />\n              </Group>\n            ) : null}\n            <Group title={recent.length ? \"All icons\" : undefined}>\n              <IconGrid\n                label=\"Icons\"\n                selected={value ?? NONE}\n                onPick={pick}\n                tip={tip}\n                items={[{ key: NONE, label: \"No icon\", node: <IconX className=\"size-4\" stroke={1.5} aria-hidden /> }, ...DOCK_ICON_NAMES.map(item)]}\n              />\n            </Group>\n          </div>\n        )}\n      </div>\n      {onChooseMedia ? (\n        <div className=\"flex items-center justify-between gap-2 border-t border-kit-line pt-2\">\n          <span className=\"whitespace-nowrap text-kit-xs text-kit-fg-3\">Images keep their colours.</span>\n          <Button size=\"xs\" variant=\"ghost\" leftIcon={<IconPhoto stroke={1.5} />} onClick={onChooseMedia}>\n            Choose from media\n          </Button>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nfunction Group({ title, children }: { title?: string; children: React.ReactNode }) {\n  return (\n    <div className=\"flex flex-col gap-1\">\n      {title ? <div className=\"px-0.5 text-kit-2xs font-medium text-kit-fg-3\">{title}</div> : null}\n      {children}\n    </div>\n  );\n}\n\n/* ── The control ──────────────────────────────────────────────────────── */\nexport function IconControl({ field, value, onChange, readOnly, id, invalid }: ControlProps) {\n  const { MediaPicker, mediaSrc } = useKitServices();\n  const [open, setOpen] = React.useState(false);\n  const [mediaOpen, setMediaOpen] = React.useState(false);\n  const read = readIcon(value);\n\n  const commit = (v: string | null) => {\n    onChange(v);\n    if (v && DOCK_ICON_NAME_SET.has(v)) pushRecent(v);\n    setOpen(false);\n  };\n\n  const tile =\n    read.kind === \"name\" ? (\n      <Glyph name={read.name} className=\"size-4\" />\n    ) : read.kind === \"upload\" ? (\n      <img src={mediaSrc ? mediaSrc(read.url) : read.url} alt=\"\" className=\"size-4 object-contain\" />\n    ) : read.kind === \"empty\" ? (\n      <span className=\"size-3 rounded-kit-md border border-dashed border-[var(--kit-emphasis-line)]\" />\n    ) : (\n      <IconAlertTriangle className=\"size-3.5 text-kit-warning-fg\" stroke={1.5} aria-hidden />\n    );\n  const text =\n    read.kind === \"name\"\n      ? iconLabel(read.name)\n      : read.kind === \"upload\"\n        ? fileName(read.url)\n        : read.kind === \"unknown\"\n          ? `“${read.name}” isn't in the icon set`\n          : read.kind === \"unreadable\"\n            ? \"This value isn't an icon this picker can read\"\n            : \"Choose an icon\";\n  const warn = read.kind === \"unknown\" || read.kind === \"unreadable\";\n\n  return (\n    <>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger\n          render={\n            <button\n              id={id}\n              type=\"button\"\n              disabled={readOnly}\n              aria-invalid={invalid || undefined}\n              className={cn(\n                \"flex h-8 w-full items-center gap-2.5 rounded-kit-md border border-kit-line-strong bg-kit-field-bg px-1 pr-2.5 text-left text-kit-sm transition-colors hover:border-kit-line-strong data-[popup-open]:border-kit-line-strong data-[popup-open]:bg-kit-field-bg\",\n                invalid && \"border-[var(--kit-field-invalid)]\",\n              )}\n            />\n          }\n        >\n          <span className=\"flex size-6 items-center justify-center rounded-kit-md border border-kit-line bg-kit-control-bg text-kit-fg\">{tile}</span>\n          <span className={cn(\"min-w-0 flex-1 truncate\", warn ? \"text-kit-warning-fg\" : read.kind === \"empty\" ? \"text-kit-fg-3\" : \"text-kit-fg\")}>{text}</span>\n          <IconChevronDown className=\"size-3.5 text-kit-fg-3\" stroke={1.5} aria-hidden />\n        </PopoverTrigger>\n        <PopoverContent className=\"w-[320px] p-2\" align=\"start\" aria-label={`${field.title}: choose an icon`}>\n          <IconPicker\n            field\n            value={read.kind === \"name\" ? read.name : read.kind === \"empty\" ? undefined : \"\"}\n            onPick={commit}\n            onChooseMedia={\n              MediaPicker\n                ? () => {\n                    setOpen(false);\n                    setMediaOpen(true);\n                  }\n                : undefined\n            }\n          />\n        </PopoverContent>\n      </Popover>\n      {MediaPicker && mediaOpen ? (\n        <MediaPicker open={mediaOpen} onOpenChange={setMediaOpen} accept={[\"svg\", \"image\"]} onPick={(assets) => assets[0]?.url && commit(assets[0].url)} />\n      ) : null}\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/controls/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./c1";
+export * from "./c2";
+export { LinkControl, LinkField, LinkForm, LinkLine, SectionAnchorsProvider, type LinkTarget, type KitLinkServices, type SectionAnchor } from "./link";
+export { ButtonControl, ButtonLinkEditor, ButtonScreen } from "./button";
+export declare function registerKitControls(): void;

package/dist/controls/index.js

@@ -0,0 +1,38 @@
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { LinkControl, LinkField, LinkForm, LinkLine, SectionAnchorsProvider } from "./link.js";
+import { ButtonControl, ButtonLinkEditor, ButtonScreen } from "./button.js";
+import { CONTROLS } from "../engine/kit-field.js";
+import { C1_ACTIONS, C1_CONTROLS, registerC1Controls } from "./c1.js";
+import { C2_CONTROLS, registerC2Controls } from "./c2.js";
+//#region src/controls/index.ts
+/**
+* The ported kit controls, and the one call that puts them in the engine's CONTROLS / ACTIONS tables (and the scale
+* capsule into the number control). A registered type stops drawing the host's legacy control; a type nobody
+* registers keeps it. The kit barrel calls `registerKitControls()` once, so every host that imports the kit gets them.
+*/
+var controls_exports = /* @__PURE__ */ __exportAll({
+	ButtonControl: () => ButtonControl,
+	ButtonLinkEditor: () => ButtonLinkEditor,
+	ButtonScreen: () => ButtonScreen,
+	C1_ACTIONS: () => C1_ACTIONS,
+	C1_CONTROLS: () => C1_CONTROLS,
+	C2_CONTROLS: () => C2_CONTROLS,
+	LinkControl: () => LinkControl,
+	LinkField: () => LinkField,
+	LinkForm: () => LinkForm,
+	LinkLine: () => LinkLine,
+	SectionAnchorsProvider: () => SectionAnchorsProvider,
+	registerC1Controls: () => registerC1Controls,
+	registerC2Controls: () => registerC2Controls,
+	registerKitControls: () => registerKitControls
+});
+function registerKitControls() {
+	registerC1Controls();
+	registerC2Controls();
+	CONTROLS.link = LinkControl;
+	CONTROLS.button = ButtonControl;
+}
+//#endregion
+export { ButtonControl, ButtonLinkEditor, ButtonScreen, C1_ACTIONS, C1_CONTROLS, C2_CONTROLS, LinkControl, LinkField, LinkForm, LinkLine, SectionAnchorsProvider, controls_exports, registerC1Controls, registerC2Controls, registerKitControls };
+
+//# sourceMappingURL=index.js.map

package/dist/controls/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/controls/index.ts"],"sourcesContent":["/**\n * The ported kit controls, and the one call that puts them in the engine's CONTROLS / ACTIONS tables (and the scale\n * capsule into the number control). A registered type stops drawing the host's legacy control; a type nobody\n * registers keeps it. The kit barrel calls `registerKitControls()` once, so every host that imports the kit gets them.\n */\nimport { ButtonControl } from \"./button\";\nimport { LinkControl } from \"./link\";\nimport { registerC1Controls } from \"./c1\";\nimport { registerC2Controls } from \"./c2\";\nimport { CONTROLS } from \"../engine/kit-field\";\n\nexport * from \"./c1\";\nexport * from \"./c2\";\nexport { LinkControl, LinkField, LinkForm, LinkLine, SectionAnchorsProvider, type LinkTarget, type KitLinkServices, type SectionAnchor } from \"./link\";\nexport { ButtonControl, ButtonLinkEditor, ButtonScreen } from \"./button\";\n\nexport function registerKitControls() {\n  registerC1Controls();\n  registerC2Controls();\n  CONTROLS.link = LinkControl;\n  CONTROLS.button = ButtonControl;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,SAAgB,sBAAsB;CACpC,mBAAmB;CACnB,mBAAmB;CACnB,SAAS,OAAO;CAChB,SAAS,SAAS;AACpB"}

package/dist/controls/json-register.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/controls/json-register.js

@@ -0,0 +1,8 @@
+import { JsonControl } from "./json.js";
+import { CONTROLS } from "../engine/kit-field.js";
+//#region src/controls/json-register.ts
+/** Lane C3: the json field in the engine's dispatch table (one line per type; merge with other lanes by line). */
+CONTROLS.json = JsonControl;
+//#endregion
+
+//# sourceMappingURL=json-register.js.map

package/dist/controls/json-register.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-register.js","names":[],"sources":["../../src/controls/json-register.ts"],"sourcesContent":["/** Lane C3: the json field in the engine's dispatch table (one line per type; merge with other lanes by line). */\nimport { CONTROLS } from \"../engine/kit-field\";\nimport { JsonControl } from \"./json\";\n\nCONTROLS.json = JsonControl;\n"],"mappings":";;;;AAIA,SAAS,OAAO"}

package/dist/controls/json.d.ts

@@ -0,0 +1,2 @@
+import type { ControlProps } from "../types";
+export declare function JsonControl({ field, value, onChange, readOnly, id, invalid }: ControlProps): import("react/jsx-runtime").JSX.Element;