@bettercms-ai/kit 0.1.0 → 1.0.0

package/controls/form-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-picker.js","names":[],"sources":["../../src/kit/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  return (\n    <div className=\"flex min-w-0 flex-col gap-2\">\n      <KitServicesProvider value={value}>\n        <ReferenceControl {...props} onChange={(v) => props.onChange(v == null || v === \"\" ? undefined : v)} />\n      </KitServicesProvider>\n      {formId && Details ? <Details formId={formId} readOnly={props.readOnly} onPick={(id) => props.onChange(id)} /> : null}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAuCA,IAAa,cAAc,UAAuB;CAChD,MAAM,KAAK,MAAM,WAAW,MAAM,EAAE;AACpC,QAAO,GAAG,WAAW,KAAK,GAAG,OAAO,UAAU,CAAC,MAAM,WAAW;;AAGlE,IAAM,cAAc;AAEpB,SAAS,YAAY,UAA0E;CAC7F,MAAM,SAAS,SAAS,iBAAiB,SAAS,gBAAgB,GAAG;AACrE,KAAI,OAAQ,QAAO;EAAE,OAAO,OAAO,UAAU,OAAO,OAAO;EAAO,OAAO,OAAO;EAAO;AACvF,QAAO,EAAE,OAAO,SAAS,SAAS,IAAI,EAAE,EAAE;;AAG5C,SAAgB,kBAAkB,OAAqB;CACrD,MAAM,WAAW,gBAAgB;CACjC,MAAM,OAAO,WAAW,CAAC,IAAI,oBAAoB;CACjD,MAAM,EAAE,OAAO,UAAU,YAAY,SAAS;CAG9C,MAAM,UAAU,KAAK,UAAU,MAAM;CACrC,MAAM,UAAU,MAAM,cAElB,OAAO,KAAK,OAAO;EAAE,IAAI,EAAE;EAAI,MAAM;EAAiB,OAAO,EAAE;EAAO,WAAW,OAAO,EAAE,WAAW,EAAE,UAAU,QAAQ,aAAa,GAAG,KAAK;EAAM,QAAQ,EAAE,UAAU;EAAM,EAAE,IAAI,MACtL,CAAC,SAAS,KAAK,CAChB;CAGD,MAAM,QAAQ,MAAM,cAAc;EAChC,MAAM,aAAa,QAAQ,OAAO,IAAI,MAAM,MAAM,CAAC;AACnD,SAAO;GACL,kBAAkB,QACd,OACA,OAAO,MAAyB;IAC9B,MAAM,IAAI,EAAE,EAAE,MAAM,CAAC,aAAa;AAElC,WAAO;KAAE,UADK,WAAW,EAAE,EAAE,QAAQ,MAAM,EAAE,OAAO,EAAE,cAAc,CAAC,KAAK,EAAE,MAAM,aAAa,CAAC,SAAS,EAAE,EAAE,CACtF,MAAM,GAAG,EAAE,MAAM;KAAE,WAAW;KAAO;;GAElE,kBAAkB,QAAQ,OAAO,UAAU,OAAO,QAAkB,QAAQ,QAAQ,MAAM,IAAI,SAAS,EAAE,GAAG,CAAC,GAAG,KAAA;GACjH;IACA,CAAC,SAAS,MAAM,CAAC;CACpB,MAAM,QAAqB;EAAE,GAAG;EAAU,GAAG;EAAO,iBAAiB,KAAA;EAAW;CAChF,MAAM,SAAS,OAAO,MAAM,UAAU,YAAY,MAAM,QAAQ,MAAM,QAAQ;CAC9E,MAAM,UAAU,SAAS;AACzB,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,qBAAD;GAA4B;aAC1B,oBAAC,kBAAD;IAAkB,GAAI;IAAO,WAAW,MAAM,MAAM,SAAS,KAAK,QAAQ,MAAM,KAAK,KAAA,IAAY,EAAE;IAAI,CAAA;GACnF,CAAA,EACrB,UAAU,UAAU,oBAAC,SAAD;GAAiB;GAAQ,UAAU,MAAM;GAAU,SAAS,OAAO,MAAM,SAAS,GAAG;GAAI,CAAA,GAAG,KAC7G"}

package/controls/icon-register.d.ts

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

package/controls/icon-register.js

@@ -0,0 +1,8 @@
+import { CONTROLS } from "../engine/kit-field.js";
+import { IconControl } from "./icon.js";
+//#region src/kit/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/controls/icon-register.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-register.js","names":[],"sources":["../../src/kit/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/controls/icon.d.ts

@@ -0,0 +1,38 @@
+/**
+ * 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. */
+export declare function IconPicker({ value, onPick, onChooseMedia }: {
+    value?: string;
+    onPick: (name: string | null) => void;
+    onChooseMedia?: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function IconControl({ field, value, onChange, readOnly, id, invalid }: ControlProps): import("react/jsx-runtime").JSX.Element;

package/controls/icon.js

@@ -0,0 +1,355 @@
+import { cn } from "../lib/cn.js";
+import { isObj } from "../lib/path.js";
+import { iconLabel } from "../lib/icons.js";
+import { DOCK_ICON_NAMES, DOCK_ICON_NAME_SET } from "../adapters/prod-types.js";
+import { useKitServices } from "../context.js";
+import { TooltipLayer } from "../ui/tooltip-root.js";
+import { Button } from "../ui/button.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/overlay.js";
+import { tablerIconOf } from "../adapters/icons.js";
+import * as React from "react";
+import { IconAlertTriangle, IconChevronDown, IconPhoto, IconSearch, IconX } from "@tabler/icons-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Tooltip } from "@base-ui/react/tooltip";
+//#region src/kit/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 min-w-0 items-center justify-center overflow-hidden rounded-kit-md text-kit-fg-2 outline-none transition-colors hover:bg-kit-hover hover:text-kit-fg focus-visible:outline-2 focus-visible:outline-kit-focus-ring", 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. */
+function IconPicker({ value, onPick, onChooseMedia }) {
+	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: "max-h-56 overflow-y-auto pr-0.5",
+				children: needle ? hits.length ? /* @__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 min-w-0 items-center gap-2.5 rounded-kit-md border bg-kit-field-bg px-1 pr-2.5 text-left text-kit-sm outline-none transition-colors disabled:opacity-60 focus-visible:border-kit-field-border-focus", invalid ? "border-[var(--kit-field-invalid)]" : "border-kit-line-strong hover:border-kit-field-border-hover data-[popup-open]:border-kit-field-border-focus")
+			}),
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "flex size-6 shrink-0 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 shrink-0 text-kit-fg-3",
+					stroke: 1.5,
+					"aria-hidden": true
+				})
+			]
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			className: "w-[312px] p-2",
+			align: "start",
+			"aria-label": `${field.title}: choose an icon`,
+			children: /* @__PURE__ */ jsx(IconPicker, {
+				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 };
+
+//# sourceMappingURL=icon.js.map

package/controls/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","names":[],"sources":["../../src/kit/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 min-w-0 items-center justify-center overflow-hidden rounded-kit-md text-kit-fg-2 outline-none transition-colors hover:bg-kit-hover hover:text-kit-fg focus-visible:outline-2 focus-visible:outline-kit-focus-ring\",\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. */\nexport function IconPicker({ value, onPick, onChooseMedia }: { value?: string; onPick: (name: string | null) => void; onChooseMedia?: () => void }) {\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=\"max-h-56 overflow-y-auto pr-0.5\">\n        {needle ? (\n          hits.length ? (\n            <IconGrid label=\"Icons\" selected={value} onPick={pick} tip={tip} items={hits.map(item)} />\n          ) : (\n            <p className=\"py-6 text-center text-kit-sm text-kit-fg-3\">No icons match “{q.trim()}”</p>\n          )\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 min-w-0 items-center gap-2.5 rounded-kit-md border bg-kit-field-bg px-1 pr-2.5 text-left text-kit-sm outline-none transition-colors disabled:opacity-60 focus-visible:border-kit-field-border-focus\",\n                invalid ? \"border-[var(--kit-field-invalid)]\" : \"border-kit-line-strong hover:border-kit-field-border-hover data-[popup-open]:border-kit-field-border-focus\",\n              )}\n            />\n          }\n        >\n          <span className=\"flex size-6 shrink-0 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 shrink-0 text-kit-fg-3\" stroke={1.5} aria-hidden />\n        </PopoverTrigger>\n        <PopoverContent className=\"w-[312px] p-2\" align=\"start\" aria-label={`${field.title}: choose an icon`}>\n          <IconPicker\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/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, ButtonScreen } from "./button";
+export declare function registerKitControls(): void;

package/controls/index.js

@@ -0,0 +1,37 @@
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { LinkControl, LinkField, LinkForm, LinkLine, SectionAnchorsProvider } from "./link.js";
+import { ButtonControl, 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/kit/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,
+	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 { controls_exports, registerKitControls };
+
+//# sourceMappingURL=index.js.map

package/controls/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/kit/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, 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;AACpC,qBAAoB;AACpB,qBAAoB;AACpB,UAAS,OAAO;AAChB,UAAS,SAAS"}

package/controls/json-register.d.ts

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

package/controls/json-register.js

@@ -0,0 +1,8 @@
+import { JsonControl } from "./json.js";
+import { CONTROLS } from "../engine/kit-field.js";
+//#region src/kit/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/controls/json-register.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-register.js","names":[],"sources":["../../src/kit/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/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;

package/controls/json.js

@@ -0,0 +1,72 @@
+import { useKitEnv } from "../context.js";
+import { CodeDialogField, CodeSurface, jsonProblem } from "./code.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/kit/controls/json.tsx
+/**
+* JSON — the json field (DESIGN 8.21), on the code surface (code.tsx).
+*
+* Values: whatever JSON the field holds (an object, a list, a number, or a JSON string a textarea wrote). An edit is
+* written PARSED, the way the classic JsonField writes it, and an emptied box writes null; the backend takes both.
+* Text that does not parse is never written: the panel's Done refuses with "Invalid JSON · {reason}", the inline
+* (document) surface keeps the last valid value and shows the reason under the code.
+*/
+/** The text a stored JSON value is edited as. */
+var jsonText = (v) => v == null || v === "" ? "" : typeof v === "string" ? v : JSON.stringify(v, null, 2);
+var parse = (text) => text.trim() ? JSON.parse(text) : null;
+function JsonControl({ field, value, onChange, readOnly, id, invalid }) {
+	const { variant } = useKitEnv();
+	const text = jsonText(value);
+	if (variant === "document") return /* @__PURE__ */ jsx(InlineJson, {
+		id,
+		value,
+		text,
+		onChange,
+		readOnly,
+		invalid
+	});
+	return /* @__PURE__ */ jsx(CodeDialogField, {
+		kind: "json",
+		id,
+		title: field.title,
+		description: field.description || void 0,
+		text,
+		readOnly,
+		invalid,
+		onDone: (draft) => {
+			if (draft === text) return null;
+			const why = jsonProblem(draft);
+			if (why) return `Invalid JSON · ${why}`;
+			if (draft !== text) onChange(parse(draft));
+			return null;
+		}
+	});
+}
+/** The document variant: the surface inline over a draft that survives invalid intermediates. */
+function InlineJson({ id, value, text, onChange, readOnly, invalid }) {
+	const [draft, setDraft] = React.useState(text);
+	const [mine, setMine] = React.useState(void 0);
+	const [seen, setSeen] = React.useState(value);
+	if (value !== seen) {
+		setSeen(value);
+		if (value !== mine) setDraft(text);
+	}
+	return /* @__PURE__ */ jsx(CodeSurface, {
+		kind: "json",
+		id,
+		invalid,
+		readOnly,
+		value: draft,
+		onChange: (next) => {
+			setDraft(next);
+			if (jsonProblem(next)) return;
+			const parsed = parse(next);
+			setMine(parsed);
+			onChange(parsed);
+		}
+	});
+}
+//#endregion
+export { JsonControl };
+
+//# sourceMappingURL=json.js.map

package/controls/json.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"json.js","names":[],"sources":["../../src/kit/controls/json.tsx"],"sourcesContent":["/**\n * JSON — the json field (DESIGN 8.21), on the code surface (code.tsx).\n *\n * Values: whatever JSON the field holds (an object, a list, a number, or a JSON string a textarea wrote). An edit is\n * written PARSED, the way the classic JsonField writes it, and an emptied box writes null; the backend takes both.\n * Text that does not parse is never written: the panel's Done refuses with \"Invalid JSON · {reason}\", the inline\n * (document) surface keeps the last valid value and shows the reason under the code.\n */\nimport * as React from \"react\";\nimport { useKitEnv } from \"../context\";\nimport type { ControlProps } from \"../types\";\nimport { CodeDialogField, CodeSurface, jsonProblem } from \"./code\";\n\n/** The text a stored JSON value is edited as. */\nconst jsonText = (v: unknown): string => (v == null || v === \"\" ? \"\" : typeof v === \"string\" ? v : JSON.stringify(v, null, 2));\nconst parse = (text: string): unknown => (text.trim() ? JSON.parse(text) : null);\n\nexport function JsonControl({ field, value, onChange, readOnly, id, invalid }: ControlProps) {\n  const { variant } = useKitEnv();\n  const text = jsonText(value);\n  if (variant === \"document\") return <InlineJson id={id} value={value} text={text} onChange={onChange} readOnly={readOnly} invalid={invalid} />;\n  return (\n    <CodeDialogField\n      kind=\"json\"\n      id={id}\n      title={field.title}\n      description={field.description || undefined}\n      text={text}\n      readOnly={readOnly}\n      invalid={invalid}\n      onDone={(draft) => {\n        if (draft === text) return null; // nothing edited: Done closes even over a stored string that isn't JSON\n        const why = jsonProblem(draft);\n        if (why) return `Invalid JSON · ${why}`;\n        if (draft !== text) onChange(parse(draft));\n        return null;\n      }}\n    />\n  );\n}\n\n/** The document variant: the surface inline over a draft that survives invalid intermediates. */\nfunction InlineJson({ id, value, text, onChange, readOnly, invalid }: { id: string; value: unknown; text: string; onChange: (v: unknown) => void; readOnly?: boolean; invalid?: boolean }) {\n  const [draft, setDraft] = React.useState(text);\n  const [mine, setMine] = React.useState<unknown>(undefined);\n  const [seen, setSeen] = React.useState(value);\n  // a value set from elsewhere (undo, another editor) replaces the draft; our own writes keep the author's text\n  if (value !== seen) {\n    setSeen(value);\n    if (value !== mine) setDraft(text);\n  }\n  return (\n    <CodeSurface\n      kind=\"json\"\n      id={id}\n      invalid={invalid}\n      readOnly={readOnly}\n      value={draft}\n      onChange={(next) => {\n        setDraft(next);\n        if (jsonProblem(next)) return;\n        const parsed = parse(next);\n        setMine(parsed);\n        onChange(parsed);\n      }}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAcA,IAAM,YAAY,MAAwB,KAAK,QAAQ,MAAM,KAAK,KAAK,OAAO,MAAM,WAAW,IAAI,KAAK,UAAU,GAAG,MAAM,EAAE;AAC7H,IAAM,SAAS,SAA2B,KAAK,MAAM,GAAG,KAAK,MAAM,KAAK,GAAG;AAE3E,SAAgB,YAAY,EAAE,OAAO,OAAO,UAAU,UAAU,IAAI,WAAyB;CAC3F,MAAM,EAAE,YAAY,WAAW;CAC/B,MAAM,OAAO,SAAS,MAAM;AAC5B,KAAI,YAAY,WAAY,QAAO,oBAAC,YAAD;EAAgB;EAAW;EAAa;EAAgB;EAAoB;EAAmB;EAAW,CAAA;AAC7I,QACE,oBAAC,iBAAD;EACE,MAAK;EACD;EACJ,OAAO,MAAM;EACb,aAAa,MAAM,eAAe,KAAA;EAC5B;EACI;EACD;EACT,SAAS,UAAU;AACjB,OAAI,UAAU,KAAM,QAAO;GAC3B,MAAM,MAAM,YAAY,MAAM;AAC9B,OAAI,IAAK,QAAO,kBAAkB;AAClC,OAAI,UAAU,KAAM,UAAS,MAAM,MAAM,CAAC;AAC1C,UAAO;;EAET,CAAA;;;AAKN,SAAS,WAAW,EAAE,IAAI,OAAO,MAAM,UAAU,UAAU,WAAgI;CACzL,MAAM,CAAC,OAAO,YAAY,MAAM,SAAS,KAAK;CAC9C,MAAM,CAAC,MAAM,WAAW,MAAM,SAAkB,KAAA,EAAU;CAC1D,MAAM,CAAC,MAAM,WAAW,MAAM,SAAS,MAAM;AAE7C,KAAI,UAAU,MAAM;AAClB,UAAQ,MAAM;AACd,MAAI,UAAU,KAAM,UAAS,KAAK;;AAEpC,QACE,oBAAC,aAAD;EACE,MAAK;EACD;EACK;EACC;EACV,OAAO;EACP,WAAW,SAAS;AAClB,YAAS,KAAK;AACd,OAAI,YAAY,KAAK,CAAE;GACvB,MAAM,SAAS,MAAM,KAAK;AAC1B,WAAQ,OAAO;AACf,YAAS,OAAO;;EAElB,CAAA"}