@bettercms-ai/kit 0.1.1 → 2.0.0

package/dist/controls/c1.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Lane C1 (text, slug, email, url, number, rating, color): the controls and label-row actions this lane ports, keyed by
+ * kit type, for the engine's CONTROLS / ACTIONS tables. `registerC1Controls()` puts them in; a registered type stops
+ * drawing the host's legacy control.
+ */
+import type { ComponentType } from "react";
+import type { SchemaType } from "../schema/types";
+import type { ControlProps } from "../types";
+export declare const C1_CONTROLS: Partial<Record<SchemaType, ComponentType<ControlProps>>>;
+export declare const C1_ACTIONS: Partial<Record<SchemaType, ComponentType<ControlProps>>>;
+export declare function registerC1Controls(): void;

package/dist/controls/c1.js

@@ -0,0 +1,24 @@
+import { ACTIONS, CONTROLS } from "../engine/kit-field.js";
+import { EmailControl, SlugControl, SlugGenerate, StringControl, TextControl, UrlControl } from "./text.js";
+import { ColorControl } from "./color.js";
+import { NumberControl, RatingControl } from "./number.js";
+//#region src/controls/c1.ts
+var C1_CONTROLS = {
+	string: StringControl,
+	text: TextControl,
+	email: EmailControl,
+	url: UrlControl,
+	slug: SlugControl,
+	number: NumberControl,
+	rating: RatingControl,
+	color: ColorControl
+};
+var C1_ACTIONS = { slug: SlugGenerate };
+function registerC1Controls() {
+	Object.assign(CONTROLS, C1_CONTROLS);
+	Object.assign(ACTIONS, C1_ACTIONS);
+}
+//#endregion
+export { C1_ACTIONS, C1_CONTROLS, registerC1Controls };
+
+//# sourceMappingURL=c1.js.map

package/dist/controls/c1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"c1.js","names":[],"sources":["../../src/controls/c1.ts"],"sourcesContent":["/**\n * Lane C1 (text, slug, email, url, number, rating, color): the controls and label-row actions this lane ports, keyed by\n * kit type, for the engine's CONTROLS / ACTIONS tables. `registerC1Controls()` puts them in; a registered type stops\n * drawing the host's legacy control.\n */\nimport type { ComponentType } from \"react\";\nimport type { SchemaType } from \"../schema/types\";\nimport type { ControlProps } from \"../types\";\nimport { ACTIONS, CONTROLS } from \"../engine/kit-field\";\nimport { ColorControl } from \"./color\";\nimport { NumberControl, RatingControl } from \"./number\";\nimport { EmailControl, SlugControl, SlugGenerate, StringControl, TextControl, UrlControl } from \"./text\";\n\nexport const C1_CONTROLS: Partial<Record<SchemaType, ComponentType<ControlProps>>> = {\n  string: StringControl,\n  text: TextControl,\n  email: EmailControl,\n  url: UrlControl,\n  slug: SlugControl,\n  number: NumberControl,\n  rating: RatingControl,\n  color: ColorControl,\n};\nexport const C1_ACTIONS: Partial<Record<SchemaType, ComponentType<ControlProps>>> = { slug: SlugGenerate };\n\nexport function registerC1Controls() {\n  Object.assign(CONTROLS, C1_CONTROLS);\n  Object.assign(ACTIONS, C1_ACTIONS);\n}\n"],"mappings":";;;;;AAaA,IAAa,cAAwE;CACnF,QAAQ;CACR,MAAM;CACN,OAAO;CACP,KAAK;CACL,MAAM;CACN,QAAQ;CACR,QAAQ;CACR,OAAO;AACT;AACA,IAAa,aAAuE,EAAE,MAAM,aAAa;AAEzG,SAAgB,qBAAqB;CACnC,OAAO,OAAO,UAAU,WAAW;CACnC,OAAO,OAAO,SAAS,UAAU;AACnC"}

package/dist/controls/c2.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Lane C2 (boolean, select, multiselect, tags, and the scale capsule for a number with a scale): the controls this lane
+ * ports, keyed by kit type, for the engine's CONTROLS table. `registerC2Controls()` puts them in and hands the scale
+ * control to the number control (lane C1's NUMBER_SCALE hook); a registered type stops drawing the host's legacy control.
+ */
+import type { ComponentType } from "react";
+import type { SchemaType } from "../schema/types";
+import type { ControlProps } from "../types";
+export declare const C2_CONTROLS: Partial<Record<SchemaType, ComponentType<ControlProps>>>;
+export declare function registerC2Controls(): void;

package/dist/controls/c2.js

@@ -0,0 +1,19 @@
+import { CONTROLS } from "../engine/kit-field.js";
+import { NUMBER_SCALE } from "./number.js";
+import { BooleanControl, MultiSelectControl, SelectControl, TagsControl } from "./choice.js";
+import { ScaleControl } from "./scale.js";
+//#region src/controls/c2.ts
+var C2_CONTROLS = {
+	boolean: BooleanControl,
+	select: SelectControl,
+	multiselect: MultiSelectControl,
+	tags: TagsControl
+};
+function registerC2Controls() {
+	Object.assign(CONTROLS, C2_CONTROLS);
+	NUMBER_SCALE.control = ScaleControl;
+}
+//#endregion
+export { C2_CONTROLS, registerC2Controls };
+
+//# sourceMappingURL=c2.js.map

package/dist/controls/c2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"c2.js","names":[],"sources":["../../src/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;AACR;AAEA,SAAgB,qBAAqB;CACnC,OAAO,OAAO,UAAU,WAAW;CACnC,aAAa,UAAU;AACzB"}

package/dist/controls/choice.d.ts

@@ -0,0 +1,44 @@
+/**
+ * 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;
+/**
+ * A stored value none of the options names any more (renamed or removed) is kept and flagged under the control, with
+ * change-to and remove (H4). @see UnknownValueNote
+ */
+export declare function SelectControl(props: ControlProps): import("react/jsx-runtime").JSX.Element;
+/** As `SelectControl`: each stored choice no option names any more is kept and flagged, with change-to and remove. */
+export declare function MultiSelectControl(props: 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/dist/controls/choice.js

@@ -0,0 +1,463 @@
+import "../adapters/prod-types.js";
+import { dockIconOf } from "../adapters/icons.js";
+import { cn } from "../lib/cn.js";
+import { useKitEnv, useKitServices } from "../context.js";
+import { KitIcon, iconKey } from "../lib/icons.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 { UnknownValueNote } from "./unknown-value.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { IconCheck, IconPlus, IconX } from "@tabler/icons-react";
+//#region src/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,
+		nativeButton: true,
+		render: /* @__PURE__ */ jsx("button", { type: "button" })
+	});
+	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" })
+	});
+}
+/**
+* A stored value none of the options names any more (renamed or removed) is kept and flagged under the control, with
+* change-to and remove (H4). @see UnknownValueNote
+*/
+function SelectControl(props) {
+	const options = opts(props.field.options);
+	const v = str(props.value);
+	if (v === "" || options.length === 0 || options.some((o) => o.value === v)) return /* @__PURE__ */ jsx(SelectInput, { ...props });
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-0 flex-col gap-1.5",
+		children: [/* @__PURE__ */ jsx(SelectInput, { ...props }), /* @__PURE__ */ jsx(UnknownValueNote, {
+			items: [{
+				key: v,
+				label: `“${v}”`,
+				options: options.map((o) => ({
+					value: o.value,
+					label: o.label
+				}))
+			}],
+			onRemap: (_, to) => props.onChange(to),
+			onRemove: () => props.onChange(null),
+			readOnly: props.readOnly
+		})]
+	});
+}
+function SelectInput({ 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 iconsOn = optionIcons(options, "size-4 text-kit-fg", IconGlyph);
+		const iconsOff = optionIcons(options, "size-4 text-kit-fg-3", 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", on ? "border-[var(--kit-emphasis-line)] bg-kit-control-bg shadow-kit-xs" : "border-kit-line hover:border-kit-line-strong"),
+					children: [
+						(on ? iconsOn : iconsOff)[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]
+		}))
+	});
+}
+/** As `SelectControl`: each stored choice no option names any more is kept and flagged, with change-to and remove. */
+function MultiSelectControl(props) {
+	const list = Array.isArray(props.value) ? props.value.filter((x) => typeof x === "string") : [];
+	const options = opts(props.field.options);
+	const unknown = options.length ? list.filter((x) => !options.some((o) => o.value === x)) : [];
+	if (unknown.length === 0) return /* @__PURE__ */ jsx(MultiSelectInput, { ...props });
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-0 flex-col gap-1.5",
+		children: [/* @__PURE__ */ jsx(MultiSelectInput, { ...props }), /* @__PURE__ */ jsx(UnknownValueNote, {
+			items: unknown.map((x) => ({
+				key: x,
+				label: `“${x}”`,
+				options: options.filter((o) => !list.includes(o.value)).map((o) => ({
+					value: o.value,
+					label: o.label
+				}))
+			})),
+			onRemap: (from, to) => props.onChange(list.map((x) => x === from ? to : x)),
+			onRemove: (from) => props.onChange(list.filter((x) => x !== from)),
+			readOnly: props.readOnly
+		})]
+	});
+}
+function MultiSelectInput({ 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 cursor-pointer items-center gap-2.5 rounded-kit-md px-1.5 py-1.5 hover:bg-kit-hover", !on && full && "cursor-not-allowed hover:bg-transparent"),
+				children: [/* @__PURE__ */ jsx(Checkbox, {
+					checked: on,
+					disabled: readOnly || !on && full,
+					onCheckedChange: () => toggle(o.value),
+					nativeButton: true,
+					render: /* @__PURE__ */ jsx("button", { type: "button" })
+				}), /* @__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);
+				const blocked = !on && full;
+				return /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					role: "checkbox",
+					"aria-checked": on,
+					disabled: blocked,
+					onClick: () => toggle(o.value),
+					className: cn("flex h-8 w-full items-center gap-2 rounded-kit-md px-2 text-left text-kit-sm hover:bg-kit-hover", blocked && "opacity-40 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, optionIcons, tagRefusal, useOwnDescription };
+
+//# sourceMappingURL=choice.js.map