@bettercms-ai/kit 0.1.0 → 1.0.0

package/controls/c2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"c2.js","names":[],"sources":["../../src/kit/controls/c2.ts"],"sourcesContent":["/**\n * Lane C2 (boolean, select, multiselect, tags, and the scale capsule for a number with a scale): the controls this lane\n * ports, keyed by kit type, for the engine's CONTROLS table. `registerC2Controls()` puts them in and hands the scale\n * control to the number control (lane C1's NUMBER_SCALE hook); a registered type stops drawing the host's legacy control.\n */\nimport type { ComponentType } from \"react\";\nimport type { SchemaType } from \"../schema/types\";\nimport type { ControlProps } from \"../types\";\nimport { CONTROLS } from \"../engine/kit-field\";\nimport { BooleanControl, MultiSelectControl, SelectControl, TagsControl } from \"./choice\";\nimport { NUMBER_SCALE } from \"./number\";\nimport { ScaleControl } from \"./scale\";\n\nexport const C2_CONTROLS: Partial<Record<SchemaType, ComponentType<ControlProps>>> = {\n  boolean: BooleanControl,\n  select: SelectControl,\n  multiselect: MultiSelectControl,\n  tags: TagsControl,\n};\n\nexport function registerC2Controls() {\n  Object.assign(CONTROLS, C2_CONTROLS);\n  NUMBER_SCALE.control = ScaleControl;\n}\n"],"mappings":";;;;;AAaA,IAAa,cAAwE;CACnF,SAAS;CACT,QAAQ;CACR,aAAa;CACb,MAAM;CACP;AAED,SAAgB,qBAAqB;AACnC,QAAO,OAAO,UAAU,YAAY;AACpC,cAAa,UAAU"}

package/controls/choice.d.ts

@@ -0,0 +1,39 @@
+/**
+ * CHOICE — boolean · select · multiselect · tags (V2 HEAD 9829bf1 kit/controls/choice.tsx, DESIGN 8.10–8.12).
+ * Rule (production): few options → segmented, many → dropdown, many values → checkboxes, on/off → switch card.
+ * D46: `layout: "segmented"` is a request, not a promise. With 4+ options, or labels that would wrap or truncate
+ * in a 340px inspector (`fitsSegmented`), it renders the dropdown instead, so every schema follows the rule.
+ *
+ * Values are the ones production stores, untouched by any adapter (schema.ts plans them AS_IS): boolean, the option's
+ * string, a string[] of option values, a string[] of tags. Tags are written the way the backend judges them
+ * (tagsValueProblem: trimmed, case-insensitively unique, at most TAG_VALUE_MAX_LENGTH characters), and a tag the
+ * control will not add says why under the box instead of vanishing.
+ *
+ * Option icons are all or none per list (the schema adapter's rule): a list draws icons only when every option names an
+ * icon that can be drawn, so labels stay aligned and no option gets a stand-in glyph. The host's glyphs come first
+ * (KitServices.IconGlyph, the BetterCMS set the site renders: every stored option icon is one of its names); with no
+ * host renderer, the kit's own drawn icons.
+ */
+import * as React from "react";
+import type { Option } from "../schema/types";
+import { type KitServices } from "../context";
+import type { ControlProps } from "../types";
+/**
+ * Icons for a list: every option's icon when all of them resolve, otherwise none (never a fallback glyph). `Glyph` is
+ * the host's renderer (KitServices.IconGlyph): it draws every BetterCMS icon name (the option's kit name read back
+ * through dockIconOf); without it, or when a name is not in that set, the kit's own drawn icons.
+ */
+export declare function optionIcons(options: Option[], className?: string, Glyph?: KitServices["IconGlyph"]): (React.ReactNode | undefined)[];
+/**
+ * Adds or removes one id of the control's own in aria-describedby, leaving the ids FieldShell wires (help, issue)
+ * in place (as ScaleSlider does).
+ */
+export declare function useOwnDescription(ref: React.RefObject<HTMLElement | null>, ownId: string | null): void;
+/** Boolean switch (used inside the switch card the shell draws). Commits immediately. */
+export declare function BooleanControl({ field, value, onChange, readOnly, id }: ControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function SelectControl({ field, value, onChange, readOnly, id }: ControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function MultiSelectControl({ field, value, onChange, readOnly, id }: ControlProps): import("react/jsx-runtime").JSX.Element;
+/** Why a typed tag is not added, or null when it is (the backend's own checks, said in words). */
+export declare function tagRefusal(tag: string, list: string[]): string | null;
+/** Chip input. Says so at its limit, and says why a tag was not added, instead of silently dropping it. */
+export declare function TagsControl({ field, value, onChange, readOnly, id, onBlur }: ControlProps): import("react/jsx-runtime").JSX.Element;

package/controls/choice.js

@@ -0,0 +1,410 @@
+import { cn } from "../lib/cn.js";
+import { KitIcon, iconKey } from "../lib/icons.js";
+import { useKitEnv, useKitServices } from "../context.js";
+import { shortcutHintsOn } from "../ui/shortcut-hint.js";
+import { Checkbox, Segmented, Switch } from "../ui/controls.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/overlay.js";
+import { Select } from "../ui/select.js";
+import { fitsSegmented } from "../ui/choice-switch.js";
+import { dockIconOf } from "../adapters/icons.js";
+import * as React from "react";
+import { IconCheck, IconPlus, IconX } from "@tabler/icons-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/kit/controls/choice.tsx
+/**
+* CHOICE — boolean · select · multiselect · tags (V2 HEAD 9829bf1 kit/controls/choice.tsx, DESIGN 8.10–8.12).
+* Rule (production): few options → segmented, many → dropdown, many values → checkboxes, on/off → switch card.
+* D46: `layout: "segmented"` is a request, not a promise. With 4+ options, or labels that would wrap or truncate
+* in a 340px inspector (`fitsSegmented`), it renders the dropdown instead, so every schema follows the rule.
+*
+* Values are the ones production stores, untouched by any adapter (schema.ts plans them AS_IS): boolean, the option's
+* string, a string[] of option values, a string[] of tags. Tags are written the way the backend judges them
+* (tagsValueProblem: trimmed, case-insensitively unique, at most TAG_VALUE_MAX_LENGTH characters), and a tag the
+* control will not add says why under the box instead of vanishing.
+*
+* Option icons are all or none per list (the schema adapter's rule): a list draws icons only when every option names an
+* icon that can be drawn, so labels stay aligned and no option gets a stand-in glyph. The host's glyphs come first
+* (KitServices.IconGlyph, the BetterCMS set the site renders: every stored option icon is one of its names); with no
+* host renderer, the kit's own drawn icons.
+*/
+var str = (v) => typeof v === "string" ? v : v == null ? "" : String(v);
+var opts = (o) => o ?? [];
+/**
+* Icons for a list: every option's icon when all of them resolve, otherwise none (never a fallback glyph). `Glyph` is
+* the host's renderer (KitServices.IconGlyph): it draws every BetterCMS icon name (the option's kit name read back
+* through dockIconOf); without it, or when a name is not in that set, the kit's own drawn icons.
+*/
+function optionIcons(options, className, Glyph) {
+	if (options.length === 0) return [];
+	const dock = options.map((o) => dockIconOf(o.icon));
+	if (Glyph && dock.every((n) => n !== void 0)) return dock.map((n) => /* @__PURE__ */ jsx(Glyph, {
+		name: n,
+		className: cn("flex", className)
+	}));
+	const all = options.every((o) => iconKey(o.icon) !== void 0);
+	return options.map((o) => all ? /* @__PURE__ */ jsx(KitIcon, {
+		name: o.icon,
+		className
+	}) : void 0);
+}
+/** The limit sentence (DESIGN 8.12), shared by multiselect and tags. */
+function LimitLine({ max }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "px-0.5 text-kit-xs text-kit-fg-3",
+		children: [
+			"That's the limit of ",
+			max,
+			". Remove one to add another."
+		]
+	});
+}
+/**
+* Roving focus for a radiogroup of buttons (WAI-ARIA radio group, as Segmented does): Tab lands on the selected option
+* (or the first), arrows move and select, Home / End jump.
+*/
+function useRadioKeys(values, current, onPick, readOnly) {
+	const focusable = values.includes(current) ? current : values[0];
+	const onKeyDown = (e, i) => {
+		if (readOnly || !values.length) return;
+		const n = values.length;
+		const next = e.key === "ArrowRight" || e.key === "ArrowDown" ? (i + 1) % n : e.key === "ArrowLeft" || e.key === "ArrowUp" ? (i - 1 + n) % n : e.key === "Home" ? 0 : e.key === "End" ? n - 1 : -1;
+		if (next < 0) return;
+		e.preventDefault();
+		onPick(values[next]);
+		e.currentTarget.closest("[role=radiogroup]")?.querySelector(`[data-choice-value="${CSS.escape(values[next])}"]`)?.focus();
+	};
+	return {
+		tabIndexOf: (v) => v === focusable ? 0 : -1,
+		onKeyDown
+	};
+}
+/**
+* Adds or removes one id of the control's own in aria-describedby, leaving the ids FieldShell wires (help, issue)
+* in place (as ScaleSlider does).
+*/
+function useOwnDescription(ref, ownId) {
+	const last = React.useRef(null);
+	React.useEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+		const ids = (el.getAttribute("aria-describedby") ?? "").split(" ").filter((t) => t && t !== last.current && t !== ownId);
+		if (ownId) ids.push(ownId);
+		if (ids.length) el.setAttribute("aria-describedby", ids.join(" "));
+		else el.removeAttribute("aria-describedby");
+		last.current = ownId;
+	});
+}
+/** Boolean switch (used inside the switch card the shell draws). Commits immediately. */
+function BooleanControl({ field, value, onChange, readOnly, id }) {
+	if (field.layout === "checkbox") return /* @__PURE__ */ jsx(Checkbox, {
+		id,
+		checked: Boolean(value),
+		disabled: readOnly,
+		onCheckedChange: (c) => onChange(c === true),
+		"aria-label": field.title
+	});
+	return /* @__PURE__ */ jsx(Switch, {
+		id,
+		checked: Boolean(value),
+		disabled: readOnly,
+		onCheckedChange: (c) => onChange(c),
+		"aria-label": field.title,
+		nativeButton: true,
+		render: /* @__PURE__ */ jsx("button", { type: "button" })
+	});
+}
+function SelectControl({ field, value, onChange, readOnly, id }) {
+	const { variant } = useKitEnv();
+	const { IconGlyph } = useKitServices();
+	const options = opts(field.options);
+	const v = str(value);
+	const fits = fitsSegmented(options.map((o) => o.label));
+	const layout = field.layout ?? (fits ? "segmented" : "dropdown");
+	const pick = (n) => {
+		if (!readOnly && n !== v) onChange(n);
+	};
+	const keys = useRadioKeys(options.map((o) => o.value), v, pick, readOnly);
+	if (layout === "segmented" && fits) {
+		const icons = optionIcons(options, "size-3.5", IconGlyph);
+		return /* @__PURE__ */ jsx(Segmented, {
+			"aria-label": field.title,
+			value: v,
+			onChange: pick,
+			items: options.map((o, i) => ({
+				value: o.value,
+				label: o.label,
+				icon: icons[i],
+				disabled: readOnly
+			})),
+			className: "w-full [&>button]:min-w-0 [&>button]:flex-1"
+		});
+	}
+	if (layout === "radio") return /* @__PURE__ */ jsx("div", {
+		role: "radiogroup",
+		id,
+		"aria-label": field.title,
+		className: "flex flex-col gap-0.5",
+		children: options.map((o, i) => /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			role: "radio",
+			"data-choice-value": o.value,
+			"aria-checked": o.value === v,
+			tabIndex: keys.tabIndexOf(o.value),
+			disabled: readOnly,
+			onClick: () => pick(o.value),
+			onKeyDown: (e) => keys.onKeyDown(e, i),
+			className: "flex items-start gap-2.5 rounded-kit-md px-1.5 py-1.5 text-left hover:bg-kit-hover",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: cn("mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border transition-colors", o.value === v ? "border-kit-accent" : "border-kit-line-strong"),
+				children: o.value === v ? /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-kit-accent" }) : null
+			}), /* @__PURE__ */ jsxs("span", {
+				className: "min-w-0",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "block text-kit-sm text-kit-fg",
+					children: o.label
+				}), o.description ? /* @__PURE__ */ jsx("span", {
+					className: "block text-kit-xs text-kit-fg-3",
+					children: o.description
+				}) : null]
+			})]
+		}, o.value))
+	});
+	if (layout === "cards" || layout === "grid") {
+		const icons = optionIcons(options, "size-4", IconGlyph);
+		return /* @__PURE__ */ jsx("div", {
+			role: "radiogroup",
+			id,
+			"aria-label": field.title,
+			className: cn("grid gap-1.5", variant === "document" ? "grid-cols-3" : "grid-cols-2"),
+			children: options.map((o, i) => {
+				const on = o.value === v;
+				return /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					role: "radio",
+					"data-choice-value": o.value,
+					"aria-checked": on,
+					tabIndex: keys.tabIndexOf(o.value),
+					disabled: readOnly,
+					onClick: () => pick(o.value),
+					onKeyDown: (e) => keys.onKeyDown(e, i),
+					className: cn("relative flex flex-col items-start gap-1.5 rounded-kit-lg border p-2.5 text-left transition-[border-color,box-shadow] duration-150 focus-visible:outline-offset-[-2px]", on ? "border-[var(--kit-emphasis-line)] bg-kit-control-bg shadow-kit-xs" : "border-kit-line hover:border-kit-line-strong"),
+					children: [
+						icons[i] ? /* @__PURE__ */ jsx("span", {
+							className: cn("[&_svg]:size-4", on ? "text-kit-fg" : "text-kit-fg-3"),
+							children: icons[i]
+						}) : null,
+						/* @__PURE__ */ jsx("span", {
+							className: "text-kit-sm font-medium text-kit-fg",
+							children: o.label
+						}),
+						o.description ? /* @__PURE__ */ jsx("span", {
+							className: "text-kit-xs leading-4 text-kit-fg-3",
+							children: o.description
+						}) : null,
+						on ? /* @__PURE__ */ jsx(IconCheck, {
+							"aria-hidden": true,
+							className: "absolute right-2 top-2 size-3.5 text-kit-fg",
+							stroke: 2
+						}) : null
+					]
+				}, o.value);
+			})
+		});
+	}
+	const icons = optionIcons(options, void 0, IconGlyph);
+	return /* @__PURE__ */ jsx(Select, {
+		id,
+		"aria-label": field.title,
+		size: variant === "document" ? "lg" : "md",
+		value: v || void 0,
+		disabled: readOnly,
+		onValueChange: pick,
+		placeholder: field.placeholder ?? "Select…",
+		options: options.map((o, i) => ({
+			value: o.value,
+			label: o.label,
+			description: o.description,
+			icon: icons[i]
+		}))
+	});
+}
+function MultiSelectControl({ field, value, onChange, readOnly, id }) {
+	const list = Array.isArray(value) ? value.filter((x) => typeof x === "string") : [];
+	const options = opts(field.options);
+	const max = field.validation?.max;
+	const full = max != null && list.length >= max;
+	const toggle = (o) => {
+		if (readOnly) return;
+		if (list.includes(o)) onChange(list.filter((x) => x !== o));
+		else if (!full) onChange([...list, o]);
+	};
+	const label = (val) => options.find((o) => o.value === val)?.label ?? val;
+	const withLimit = (body) => full && !readOnly ? /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1",
+		children: [body, /* @__PURE__ */ jsx(LimitLine, { max })]
+	}) : body;
+	if (field.layout === "checkbox" || field.layout === "list") return withLimit(/* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", {
+		id,
+		role: "group",
+		"aria-label": field.title,
+		className: "flex flex-col gap-0.5",
+		children: options.map((o) => {
+			const on = list.includes(o.value);
+			return /* @__PURE__ */ jsxs("label", {
+				className: cn("flex items-center gap-2.5 rounded-kit-md px-1.5 py-1.5", !on && full ? "cursor-not-allowed" : "cursor-pointer hover:bg-kit-hover"),
+				children: [/* @__PURE__ */ jsx(Checkbox, {
+					checked: on,
+					disabled: readOnly || !on && full,
+					onCheckedChange: () => toggle(o.value)
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-kit-sm text-kit-fg",
+					children: o.label
+				})]
+			}, o.value);
+		})
+	}) }));
+	return withLimit(/* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsxs("div", {
+		id: readOnly ? id : void 0,
+		role: readOnly ? "group" : void 0,
+		"aria-label": readOnly ? field.title : void 0,
+		className: "flex min-h-8 flex-wrap items-center gap-1 rounded-kit-md border border-kit-line-strong bg-kit-field-bg p-1 transition-colors hover:border-kit-line-strong",
+		children: [list.map((o) => /* @__PURE__ */ jsxs("span", {
+			className: "inline-flex h-6 items-center gap-1 rounded-kit-md border border-kit-line bg-kit-control-bg pl-2 pr-1 text-kit-sm text-kit-fg shadow-kit-xs",
+			children: [label(o), readOnly ? null : /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": `Remove ${label(o)}`,
+				onClick: () => toggle(o),
+				className: "flex rounded-kit-md p-0.5 text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg",
+				children: /* @__PURE__ */ jsx(IconX, {
+					className: "size-3",
+					stroke: 1.5
+				})
+			})]
+		}, o)), readOnly ? null : /* @__PURE__ */ jsxs(PopoverTrigger, {
+			id,
+			className: "inline-flex h-6 items-center gap-1 rounded-kit-md px-1.5 text-kit-sm text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg",
+			children: [/* @__PURE__ */ jsx(IconPlus, {
+				"aria-hidden": true,
+				className: "size-3.5",
+				stroke: 1.5
+			}), list.length ? "Add" : field.placeholder ?? "Choose…"]
+		})]
+	}), /* @__PURE__ */ jsxs(PopoverContent, {
+		className: "w-60 p-1",
+		children: [/* @__PURE__ */ jsx("div", {
+			role: "group",
+			"aria-label": field.title,
+			children: options.map((o) => {
+				const on = list.includes(o.value);
+				return /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					role: "checkbox",
+					"aria-checked": on,
+					disabled: !on && full,
+					onClick: () => toggle(o.value),
+					className: "flex h-8 w-full items-center gap-2 rounded-kit-md px-2 text-left text-kit-sm hover:bg-kit-hover disabled:opacity-40 disabled:hover:bg-transparent",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: cn("flex size-4 items-center justify-center rounded-kit-md border", on ? "border-kit-accent bg-kit-accent text-kit-accent-on" : "border-kit-line-strong"),
+						children: on ? /* @__PURE__ */ jsx(IconCheck, {
+							"aria-hidden": true,
+							className: "size-3",
+							stroke: 3
+						}) : null
+					}), o.label]
+				}, o.value);
+			})
+		}), full ? /* @__PURE__ */ jsx("div", {
+			className: "px-2 pb-1 pt-1.5",
+			children: /* @__PURE__ */ jsx(LimitLine, { max })
+		}) : null]
+	})] }) }));
+}
+/** Why a typed tag is not added, or null when it is (the backend's own checks, said in words). */
+function tagRefusal(tag, list) {
+	if (Array.from(tag).length > 64) return `A tag can be up to 64 characters.`;
+	const folded = tag.toLowerCase();
+	const twin = list.find((t) => t.trim().toLowerCase() === folded);
+	if (twin !== void 0) return `"${twin}" is already a tag.`;
+	return null;
+}
+/** Chip input. Says so at its limit, and says why a tag was not added, instead of silently dropping it. */
+function TagsControl({ field, value, onChange, readOnly, id, onBlur }) {
+	const list = Array.isArray(value) ? value.map((x) => str(x)) : [];
+	const [draft, setDraft] = React.useState("");
+	const [refusal, setRefusal] = React.useState(null);
+	const reasonId = React.useId();
+	const inputRef = React.useRef(null);
+	useOwnDescription(inputRef, refusal ? reasonId : null);
+	const max = field.validation?.max;
+	const full = max != null && list.length >= max;
+	const add = () => {
+		const t = draft.trim().replace(/,$/, "").trim();
+		if (!t || full) {
+			setDraft("");
+			setRefusal(null);
+			return;
+		}
+		const why = tagRefusal(t, list);
+		if (why) {
+			setRefusal(why);
+			return;
+		}
+		onChange([...list, t]);
+		setDraft("");
+		setRefusal(null);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-h-8 flex-wrap items-center gap-1 rounded-kit-md border border-kit-line-strong bg-kit-field-bg p-1 transition-colors focus-within:border-kit-line-strong focus-within:bg-kit-field-bg hover:border-kit-line-strong",
+				children: [list.map((t, i) => /* @__PURE__ */ jsxs("span", {
+					className: "inline-flex h-6 items-center gap-1 rounded-kit-md bg-kit-selected pl-2 pr-1 text-kit-sm text-kit-fg",
+					children: [t, readOnly ? null : /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": `Remove ${t}`,
+						onClick: () => onChange(list.filter((_, j) => j !== i)),
+						className: "flex rounded-kit-md p-0.5 text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg",
+						children: /* @__PURE__ */ jsx(IconX, {
+							className: "size-3",
+							stroke: 1.5
+						})
+					})]
+				}, `${t}-${i}`)), readOnly ? null : /* @__PURE__ */ jsx("input", {
+					ref: inputRef,
+					id,
+					value: draft,
+					disabled: full,
+					onChange: (e) => {
+						setDraft(e.target.value);
+						if (refusal) setRefusal(null);
+					},
+					onBlur: () => {
+						add();
+						onBlur?.();
+					},
+					onKeyDown: (e) => {
+						if (e.key === "Enter" || e.key === ",") {
+							e.preventDefault();
+							add();
+						} else if (e.key === "Backspace" && !draft && list.length) onChange(list.slice(0, -1));
+					},
+					placeholder: full ? "" : list.length ? "Add…" : field.placeholder ?? (shortcutHintsOn() ? "Type and press Enter" : "Add…"),
+					className: "h-6 min-w-20 flex-1 bg-transparent px-1.5 text-kit-sm text-kit-fg outline-none placeholder:text-kit-fg-3"
+				})]
+			}),
+			refusal && !readOnly ? /* @__PURE__ */ jsx("span", {
+				id: reasonId,
+				role: "status",
+				"aria-live": "polite",
+				className: "px-0.5 text-kit-xs text-kit-fg-3",
+				children: refusal
+			}) : null,
+			full && !readOnly ? /* @__PURE__ */ jsx(LimitLine, { max }) : null
+		]
+	});
+}
+//#endregion
+export { BooleanControl, MultiSelectControl, SelectControl, TagsControl };
+
+//# sourceMappingURL=choice.js.map

package/controls/choice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"choice.js","names":[],"sources":["../../src/kit/controls/choice.tsx"],"sourcesContent":["/**\n * CHOICE — boolean · select · multiselect · tags (V2 HEAD 9829bf1 kit/controls/choice.tsx, DESIGN 8.10–8.12).\n * Rule (production): few options → segmented, many → dropdown, many values → checkboxes, on/off → switch card.\n * D46: `layout: \"segmented\"` is a request, not a promise. With 4+ options, or labels that would wrap or truncate\n * in a 340px inspector (`fitsSegmented`), it renders the dropdown instead, so every schema follows the rule.\n *\n * Values are the ones production stores, untouched by any adapter (schema.ts plans them AS_IS): boolean, the option's\n * string, a string[] of option values, a string[] of tags. Tags are written the way the backend judges them\n * (tagsValueProblem: trimmed, case-insensitively unique, at most TAG_VALUE_MAX_LENGTH characters), and a tag the\n * control will not add says why under the box instead of vanishing.\n *\n * Option icons are all or none per list (the schema adapter's rule): a list draws icons only when every option names an\n * icon that can be drawn, so labels stay aligned and no option gets a stand-in glyph. The host's glyphs come first\n * (KitServices.IconGlyph, the BetterCMS set the site renders: every stored option icon is one of its names); with no\n * host renderer, the kit's own drawn icons.\n */\nimport * as React from \"react\";\nimport { IconCheck, IconPlus, IconX } from \"@tabler/icons-react\";\nimport { Checkbox, Segmented, Switch } from \"../ui/controls\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../ui/overlay\";\nimport { Select } from \"../ui/select\";\nimport { fitsSegmented } from \"../ui/choice-switch\";\nimport { shortcutHintsOn } from \"../ui/shortcut-hint\";\nimport { cn } from \"../lib/cn\";\nimport { KitIcon, iconKey } from \"../lib/icons\";\nimport type { Option } from \"../schema/types\";\nimport { useKitEnv, useKitServices, type KitServices } from \"../context\";\nimport { dockIconOf } from \"../adapters/icons\";\nimport type { ControlProps } from \"../types\";\nimport { TAG_VALUE_MAX_LENGTH } from \"../adapters/prod-types\";\n\nconst str = (v: unknown) => (typeof v === \"string\" ? v : v == null ? \"\" : String(v));\nconst opts = (o?: Option[]) => o ?? [];\n\n/**\n * Icons for a list: every option's icon when all of them resolve, otherwise none (never a fallback glyph). `Glyph` is\n * the host's renderer (KitServices.IconGlyph): it draws every BetterCMS icon name (the option's kit name read back\n * through dockIconOf); without it, or when a name is not in that set, the kit's own drawn icons.\n */\nexport function optionIcons(options: Option[], className?: string, Glyph?: KitServices[\"IconGlyph\"]): (React.ReactNode | undefined)[] {\n  if (options.length === 0) return [];\n  const dock = options.map((o) => dockIconOf(o.icon));\n  // a block box, as the kit's own <svg> is under preflight: an inline glyph would sit on a line box and grow the row\n  if (Glyph && dock.every((n) => n !== undefined)) return dock.map((n) => <Glyph name={n!} className={cn(\"flex\", className)} />);\n  const all = options.every((o) => iconKey(o.icon) !== undefined);\n  return options.map((o) => (all ? <KitIcon name={o.icon} className={className} /> : undefined));\n}\n\n/** The limit sentence (DESIGN 8.12), shared by multiselect and tags. */\nfunction LimitLine({ max }: { max: number }) {\n  return <span className=\"px-0.5 text-kit-xs text-kit-fg-3\">That's the limit of {max}. Remove one to add another.</span>;\n}\n\n/**\n * Roving focus for a radiogroup of buttons (WAI-ARIA radio group, as Segmented does): Tab lands on the selected option\n * (or the first), arrows move and select, Home / End jump.\n */\nfunction useRadioKeys(values: string[], current: string, onPick: (v: string) => void, readOnly?: boolean) {\n  const focusable = values.includes(current) ? current : values[0];\n  const onKeyDown = (e: React.KeyboardEvent, i: number) => {\n    if (readOnly || !values.length) return;\n    const n = values.length;\n    const next =\n      e.key === \"ArrowRight\" || e.key === \"ArrowDown\"\n        ? (i + 1) % n\n        : e.key === \"ArrowLeft\" || e.key === \"ArrowUp\"\n          ? (i - 1 + n) % n\n          : e.key === \"Home\"\n            ? 0\n            : e.key === \"End\"\n              ? n - 1\n              : -1;\n    if (next < 0) return;\n    e.preventDefault();\n    onPick(values[next]);\n    const group = (e.currentTarget as HTMLElement).closest(\"[role=radiogroup]\");\n    group?.querySelector<HTMLElement>(`[data-choice-value=\"${CSS.escape(values[next])}\"]`)?.focus();\n  };\n  return { tabIndexOf: (v: string) => (v === focusable ? 0 : -1), onKeyDown };\n}\n\n/**\n * Adds or removes one id of the control's own in aria-describedby, leaving the ids FieldShell wires (help, issue)\n * in place (as ScaleSlider does).\n */\nexport function useOwnDescription(ref: React.RefObject<HTMLElement | null>, ownId: string | null) {\n  const last = React.useRef<string | null>(null);\n  React.useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    const ids = (el.getAttribute(\"aria-describedby\") ?? \"\").split(\" \").filter((t) => t && t !== last.current && t !== ownId);\n    if (ownId) ids.push(ownId);\n    if (ids.length) el.setAttribute(\"aria-describedby\", ids.join(\" \"));\n    else el.removeAttribute(\"aria-describedby\");\n    last.current = ownId;\n  });\n}\n\n/** Boolean switch (used inside the switch card the shell draws). Commits immediately. */\nexport function BooleanControl({ field, value, onChange, readOnly, id }: ControlProps) {\n  if (field.layout === \"checkbox\")\n    return <Checkbox id={id} checked={Boolean(value)} disabled={readOnly} onCheckedChange={(c) => onChange(c === true)} aria-label={field.title} />;\n  /* V2's switch is a native <button role=\"switch\"> (Radix); Base UI draws a <span> unless asked for the button */\n  return <Switch id={id} checked={Boolean(value)} disabled={readOnly} onCheckedChange={(c) => onChange(c)} aria-label={field.title} nativeButton render={<button type=\"button\" />} />;\n}\n\nexport function SelectControl({ field, value, onChange, readOnly, id }: ControlProps) {\n  const { variant } = useKitEnv();\n  const { IconGlyph } = useKitServices();\n  const options = opts(field.options);\n  const v = str(value);\n  const fits = fitsSegmented(options.map((o) => o.label));\n  const layout = field.layout ?? (fits ? \"segmented\" : \"dropdown\");\n  const pick = (n: string) => {\n    if (!readOnly && n !== v) onChange(n);\n  };\n  const keys = useRadioKeys(\n    options.map((o) => o.value),\n    v,\n    pick,\n    readOnly,\n  );\n\n  if (layout === \"segmented\" && fits) {\n    const icons = optionIcons(options, \"size-3.5\", IconGlyph);\n    return (\n      <Segmented\n        aria-label={field.title}\n        value={v}\n        onChange={pick}\n        items={options.map((o, i) => ({ value: o.value, label: o.label, icon: icons[i], disabled: readOnly }))}\n        className=\"w-full [&>button]:min-w-0 [&>button]:flex-1\"\n      />\n    );\n  }\n  if (layout === \"radio\")\n    return (\n      <div role=\"radiogroup\" id={id} aria-label={field.title} className=\"flex flex-col gap-0.5\">\n        {options.map((o, i) => (\n          <button\n            key={o.value}\n            type=\"button\"\n            role=\"radio\"\n            data-choice-value={o.value}\n            aria-checked={o.value === v}\n            tabIndex={keys.tabIndexOf(o.value)}\n            disabled={readOnly}\n            onClick={() => pick(o.value)}\n            onKeyDown={(e) => keys.onKeyDown(e, i)}\n            className=\"flex items-start gap-2.5 rounded-kit-md px-1.5 py-1.5 text-left hover:bg-kit-hover\"\n          >\n            <span className={cn(\"mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border transition-colors\", o.value === v ? \"border-kit-accent\" : \"border-kit-line-strong\")}>\n              {o.value === v ? <span className=\"size-2 rounded-full bg-kit-accent\" /> : null}\n            </span>\n            <span className=\"min-w-0\">\n              <span className=\"block text-kit-sm text-kit-fg\">{o.label}</span>\n              {o.description ? <span className=\"block text-kit-xs text-kit-fg-3\">{o.description}</span> : null}\n            </span>\n          </button>\n        ))}\n      </div>\n    );\n  if (layout === \"cards\" || layout === \"grid\") {\n    const icons = optionIcons(options, \"size-4\", IconGlyph);\n    return (\n      <div role=\"radiogroup\" id={id} aria-label={field.title} className={cn(\"grid gap-1.5\", variant === \"document\" ? \"grid-cols-3\" : \"grid-cols-2\")}>\n        {options.map((o, i) => {\n          const on = o.value === v;\n          return (\n            <button\n              key={o.value}\n              type=\"button\"\n              role=\"radio\"\n              data-choice-value={o.value}\n              aria-checked={on}\n              tabIndex={keys.tabIndexOf(o.value)}\n              disabled={readOnly}\n              onClick={() => pick(o.value)}\n              onKeyDown={(e) => keys.onKeyDown(e, i)}\n              className={cn(\n                \"relative flex flex-col items-start gap-1.5 rounded-kit-lg border p-2.5 text-left transition-[border-color,box-shadow] duration-150 focus-visible:outline-offset-[-2px]\",\n                on ? \"border-[var(--kit-emphasis-line)] bg-kit-control-bg shadow-kit-xs\" : \"border-kit-line hover:border-kit-line-strong\",\n              )}\n            >\n              {icons[i] ? <span className={cn(\"[&_svg]:size-4\", on ? \"text-kit-fg\" : \"text-kit-fg-3\")}>{icons[i]}</span> : null}\n              <span className=\"text-kit-sm font-medium text-kit-fg\">{o.label}</span>\n              {o.description ? <span className=\"text-kit-xs leading-4 text-kit-fg-3\">{o.description}</span> : null}\n              {on ? <IconCheck aria-hidden className=\"absolute right-2 top-2 size-3.5 text-kit-fg\" stroke={2} /> : null}\n            </button>\n          );\n        })}\n      </div>\n    );\n  }\n  const icons = optionIcons(options, undefined, IconGlyph);\n  return (\n    <Select\n      id={id}\n      aria-label={field.title}\n      size={variant === \"document\" ? \"lg\" : \"md\"}\n      value={v || undefined}\n      disabled={readOnly}\n      onValueChange={pick}\n      placeholder={field.placeholder ?? \"Select…\"}\n      options={options.map((o, i) => ({ value: o.value, label: o.label, description: o.description, icon: icons[i] }))}\n    />\n  );\n}\n\nexport function MultiSelectControl({ field, value, onChange, readOnly, id }: ControlProps) {\n  const list = Array.isArray(value) ? (value as unknown[]).filter((x): x is string => typeof x === \"string\") : [];\n  const options = opts(field.options);\n  const max = field.validation?.max;\n  const full = max != null && list.length >= max;\n  const toggle = (o: string) => {\n    if (readOnly) return;\n    if (list.includes(o)) onChange(list.filter((x) => x !== o));\n    else if (!full) onChange([...list, o]);\n  };\n  const label = (val: string) => options.find((o) => o.value === val)?.label ?? val;\n  /* V2 draws the control bare; the limit line (ours: say why the next pick is refused) wraps it only while it shows */\n  const withLimit = (body: React.ReactElement) =>\n    full && !readOnly ? (\n      <div className=\"flex flex-col gap-1\">\n        {body}\n        <LimitLine max={max!} />\n      </div>\n    ) : (\n      body\n    );\n  if (field.layout === \"checkbox\" || field.layout === \"list\")\n    return withLimit(\n      <>\n        <div id={id} role=\"group\" aria-label={field.title} className=\"flex flex-col gap-0.5\">\n          {options.map((o) => {\n            const on = list.includes(o.value);\n            return (\n              <label key={o.value} className={cn(\"flex items-center gap-2.5 rounded-kit-md px-1.5 py-1.5\", !on && full ? \"cursor-not-allowed\" : \"cursor-pointer hover:bg-kit-hover\")}>\n                <Checkbox checked={on} disabled={readOnly || (!on && full)} onCheckedChange={() => toggle(o.value)} />\n                <span className=\"text-kit-sm text-kit-fg\">{o.label}</span>\n              </label>\n            );\n          })}\n        </div>\n      </>,\n    );\n  return withLimit(\n    <>\n      <Popover>\n        {/* read-only there is no trigger to carry the field id, so the chip row is the named group */}\n        <div\n          id={readOnly ? id : undefined}\n          role={readOnly ? \"group\" : undefined}\n          aria-label={readOnly ? field.title : undefined}\n          className=\"flex min-h-8 flex-wrap items-center gap-1 rounded-kit-md border border-kit-line-strong bg-kit-field-bg p-1 transition-colors hover:border-kit-line-strong\">\n          {list.map((o) => (\n            <span key={o} className=\"inline-flex h-6 items-center gap-1 rounded-kit-md border border-kit-line bg-kit-control-bg pl-2 pr-1 text-kit-sm text-kit-fg shadow-kit-xs\">\n              {label(o)}\n              {readOnly ? null : (\n                <button type=\"button\" aria-label={`Remove ${label(o)}`} onClick={() => toggle(o)} className=\"flex rounded-kit-md p-0.5 text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg\">\n                  <IconX className=\"size-3\" stroke={1.5} />\n                </button>\n              )}\n            </span>\n          ))}\n          {readOnly ? null : (\n            <PopoverTrigger id={id} className=\"inline-flex h-6 items-center gap-1 rounded-kit-md px-1.5 text-kit-sm text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg\">\n              <IconPlus aria-hidden className=\"size-3.5\" stroke={1.5} />\n              {list.length ? \"Add\" : field.placeholder ?? \"Choose…\"}\n            </PopoverTrigger>\n          )}\n        </div>\n        <PopoverContent className=\"w-60 p-1\">\n          <div role=\"group\" aria-label={field.title}>\n            {options.map((o) => {\n              const on = list.includes(o.value);\n              const blocked = !on && full;\n              return (\n                <button\n                  key={o.value}\n                  type=\"button\"\n                  role=\"checkbox\"\n                  aria-checked={on}\n                  disabled={blocked}\n                  onClick={() => toggle(o.value)}\n                  className=\"flex h-8 w-full items-center gap-2 rounded-kit-md px-2 text-left text-kit-sm hover:bg-kit-hover disabled:opacity-40 disabled:hover:bg-transparent\"\n                >\n                  <span className={cn(\"flex size-4 items-center justify-center rounded-kit-md border\", on ? \"border-kit-accent bg-kit-accent text-kit-accent-on\" : \"border-kit-line-strong\")}>\n                    {on ? <IconCheck aria-hidden className=\"size-3\" stroke={3} /> : null}\n                  </span>\n                  {o.label}\n                </button>\n              );\n            })}\n          </div>\n          {full ? <div className=\"px-2 pb-1 pt-1.5\"><LimitLine max={max!} /></div> : null}\n        </PopoverContent>\n      </Popover>\n    </>,\n  );\n}\n\n/** Why a typed tag is not added, or null when it is (the backend's own checks, said in words). */\nexport function tagRefusal(tag: string, list: string[]): string | null {\n  if (Array.from(tag).length > TAG_VALUE_MAX_LENGTH) return `A tag can be up to ${TAG_VALUE_MAX_LENGTH} characters.`;\n  const folded = tag.toLowerCase();\n  const twin = list.find((t) => t.trim().toLowerCase() === folded);\n  if (twin !== undefined) return `\"${twin}\" is already a tag.`;\n  return null;\n}\n\n/** Chip input. Says so at its limit, and says why a tag was not added, instead of silently dropping it. */\nexport function TagsControl({ field, value, onChange, readOnly, id, onBlur }: ControlProps) {\n  const list = Array.isArray(value) ? (value as unknown[]).map((x) => str(x)) : [];\n  const [draft, setDraft] = React.useState(\"\");\n  const [refusal, setRefusal] = React.useState<string | null>(null);\n  const reasonId = React.useId();\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  useOwnDescription(inputRef, refusal ? reasonId : null);\n  const max = field.validation?.max;\n  const full = max != null && list.length >= max;\n  const add = () => {\n    const t = draft.trim().replace(/,$/, \"\").trim();\n    if (!t || full) {\n      setDraft(\"\");\n      setRefusal(null);\n      return;\n    }\n    const why = tagRefusal(t, list);\n    if (why) {\n      // keep the text so it can be fixed; the reason reads under the box\n      setRefusal(why);\n      return;\n    }\n    onChange([...list, t]);\n    setDraft(\"\");\n    setRefusal(null);\n  };\n  return (\n    <div className=\"flex flex-col gap-1\">\n      <div className=\"flex min-h-8 flex-wrap items-center gap-1 rounded-kit-md border border-kit-line-strong bg-kit-field-bg p-1 transition-colors focus-within:border-kit-line-strong focus-within:bg-kit-field-bg hover:border-kit-line-strong\">\n        {list.map((t, i) => (\n          <span key={`${t}-${i}`} className=\"inline-flex h-6 items-center gap-1 rounded-kit-md bg-kit-selected pl-2 pr-1 text-kit-sm text-kit-fg\">\n            {t}\n            {readOnly ? null : (\n              <button type=\"button\" aria-label={`Remove ${t}`} onClick={() => onChange(list.filter((_, j) => j !== i))} className=\"flex rounded-kit-md p-0.5 text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg\">\n                <IconX className=\"size-3\" stroke={1.5} />\n              </button>\n            )}\n          </span>\n        ))}\n        {readOnly ? null : (\n          <input\n            ref={inputRef}\n            id={id}\n            value={draft}\n            disabled={full}\n            onChange={(e) => {\n              setDraft(e.target.value);\n              if (refusal) setRefusal(null);\n            }}\n            onBlur={() => {\n              add();\n              onBlur?.();\n            }}\n            onKeyDown={(e) => {\n              if (e.key === \"Enter\" || e.key === \",\") {\n                e.preventDefault();\n                add();\n              } else if (e.key === \"Backspace\" && !draft && list.length) onChange(list.slice(0, -1));\n            }}\n            placeholder={full ? \"\" : list.length ? \"Add…\" : field.placeholder ?? (shortcutHintsOn() ? \"Type and press Enter\" : \"Add…\")}\n            className=\"h-6 min-w-20 flex-1 bg-transparent px-1.5 text-kit-sm text-kit-fg outline-none placeholder:text-kit-fg-3\"\n          />\n        )}\n      </div>\n      {refusal && !readOnly ? (\n        <span id={reasonId} role=\"status\" aria-live=\"polite\" className=\"px-0.5 text-kit-xs text-kit-fg-3\">\n          {refusal}\n        </span>\n      ) : null}\n      {full && !readOnly ? <LimitLine max={max!} /> : null}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/controls/code-register.d.ts

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

package/controls/code-register.js

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

package/controls/code-register.js.map

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

package/controls/code.d.ts

@@ -0,0 +1,42 @@
+import type { ControlProps } from "../types";
+/** Why a JSON text does not parse ("" when it does, or is empty). */
+export declare function jsonProblem(text: string): string;
+export interface CodeSurfaceProps {
+    /** "json": the JSON header, Format and the parse footer. "code": the language list. */
+    kind: "json" | "code";
+    value: string;
+    onChange: (v: string) => void;
+    /** code: the language shown in the header ("" = none) and what picking one does; absent = no list */
+    language?: string;
+    onLanguage?: (language: string) => void;
+    /** code: the only languages the field allows (its config.languages); absent = the built-in list */
+    languages?: string[];
+    readOnly?: boolean;
+    id?: string;
+    invalid?: boolean;
+    minRows?: number;
+    label?: string;
+    describedBy?: string;
+}
+export declare function CodeSurface({ kind, value, onChange, language, onLanguage, languages, readOnly, id, invalid, minRows, label, describedBy }: CodeSurfaceProps): import("react/jsx-runtime").JSX.Element;
+export declare function CodeDialogField({ kind, title, description, text, readOnly, id, invalid, language, languages, onDone, }: {
+    kind: "json" | "code";
+    title: string;
+    description?: string;
+    text: string;
+    readOnly?: boolean;
+    id: string;
+    invalid?: boolean;
+    language?: string;
+    languages?: string[];
+    /** commit the draft; returns the reason it can't be saved, or null when saved */
+    onDone: (draft: string, language: string | undefined) => string | null;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function CodeControl({ field, value, onChange, readOnly, id, invalid }: ControlProps): import("react/jsx-runtime").JSX.Element;
+/** A stored value the control cannot read: named, shown, kept as it is (never replaced by a stray edit). */
+export declare function UnreadableValue({ id, title, kind, value }: {
+    id: string;
+    title: string;
+    kind: string;
+    value: unknown;
+}): import("react/jsx-runtime").JSX.Element;