@bettercms-ai/kit 1.0.0 → 2.0.0-next.1

package/{controls → dist/controls}/button.js

@@ -1,17 +1,17 @@
+import { BUTTON_VARIANTS, DOCK_ICON_NAME_SET } from "../adapters/prod-types.js";
 import { cn } from "../lib/cn.js";
+import { useForm, useKitEnv } from "../context.js";
 import { isObj } from "../lib/path.js";
 import { KIT_ICONS, KitIcon, iconLabel } from "../lib/icons.js";
-import { BUTTON_VARIANTS, DOCK_ICON_NAME_SET } from "../adapters/prod-types.js";
-import { useForm, useKitEnv } from "../context.js";
 import { Segmented, Switch } from "../ui/controls.js";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../ui/overlay.js";
-import { Input } from "../ui/input.js";
 import { FieldUnit } from "../engine/grouping.js";
-import { LinkForm, LinkLine, LinkQuickEdit, TARGET_KEYS, describeLink, finalizeLink, findTarget, hasLink, normLink, storedLink, useLinkTargets } from "./link.js";
+import { Input } from "../ui/input.js";
+import { LinkForm, LinkLine, LinkQuickEdit, TARGET_KEYS, finalizeLink, findTarget, hasLink, linkText, normLink, storedLink, useLinkTargets } from "./link.js";
 import * as React from "react";
-import { IconArrowRight, IconChevronDown, IconChevronRight, IconSearch } from "@tabler/icons-react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/kit/controls/button.tsx
+import { IconArrowRight, IconChevronDown, IconChevronRight, IconSearch, IconX } from "@tabler/icons-react";
+//#region src/controls/button.tsx
 /**
 * BUTTON — label + link + look as ONE unit (V2 HEAD kit/controls/link.tsx "Button", DESIGN §8.8, CPO D43 · D45 · D46).
 *
@@ -32,10 +32,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * "Full width" writes `fullWidth: true`, and off writes `false` only where the stored value had the key (as Show arrow);
 * every renderer draws it (hosted `bcms-btn-full`, the SDKs' and in-place publishing's `data-full-width`).
 *
-* Deviations from V2, each because prod has nothing behind it: an unset look reads "Default" (V2 drew Primary, and guessed Outline for a field named "secondary"); the button
-* screen's preview reads the site palette from --kit-preview-paper / -ink / -primary / -primary-on / -line / -filter
-* when the host sets them (the Kit library sets V2's demo-site palette) and otherwise draws in neutral kit ink (the
-* dock has no project palette yet; the canvas shows the site's own button). The style grid stays in kit ink except Primary, which shows the brand colour as V2's chrome swatch does.
+* Deviation from V2, because prod has nothing behind it: an unset look reads "Default" (V2 drew Primary, and guessed
+* Outline for a field named "secondary"). The preview is V2's: the site palette (--kit-preview-paper / -ink / -primary /
+* -primary-on / -contrast / -contrast-on / -outline, which a host may set to the project's colours) on the paper, and the
+* chrome swatches in the style grid.
 */
 var STYLE_ITEMS = [
 	{
@@ -134,7 +134,8 @@ function ButtonStyleGrid({ v, onPick, "aria-label": ariaLabel, size = "md" }) {
 						icon: void 0,
 						arrow: false
 					},
-					small: true
+					small: true,
+					chrome: true
 				}), /* @__PURE__ */ jsx("span", {
 					className: "truncate",
 					children: s.label
@@ -144,14 +145,17 @@ function ButtonStyleGrid({ v, onPick, "aria-label": ariaLabel, size = "md" }) {
 	});
 }
 /**
-* The button as a shape: filled · soft · outlined · underlined. In kit ink by default; `site` draws it in the host's
-* site palette (--kit-preview-*), falling back to kit ink for each token the host leaves unset.
+* The site's button as the site draws it (V2 link.tsx ButtonPreview: the site palette, not app tokens). On the preview
+* paper it keeps the site's own colours in both themes; `chrome` = drawn on app chrome (the style grid), where the
+* dark-ink styles flip so they still read on a dark panel. Prod looks beyond the four: brand as primary, dark as
+* secondary, any other in the muted kit fill.
 */
-function ButtonPreview({ v, className, small, site }) {
-	const style = lookOf(v) ?? "primary";
+function ButtonPreview({ v, className, small, chrome }) {
+	const look = lookOf(v) ?? "primary";
+	const style = look === "brand" ? "primary" : look === "dark" ? "secondary" : look;
 	const size = small ? "sm" : v.size ?? "md";
 	return /* @__PURE__ */ jsxs("span", {
-		className: cn("inline-flex max-w-full items-center justify-center gap-1.5 truncate font-medium transition-colors", size === "sm" ? "h-6 rounded-kit-md px-2 text-kit-xs" : size === "lg" ? "h-10 rounded-kit-lg px-4 text-kit-base" : "h-8 rounded-kit-lg px-3 text-kit-sm", site ? siteLook(style) : style === "link" ? "h-auto px-0 text-kit-fg underline underline-offset-4" : style === "outline" ? "border border-kit-line-strong text-kit-fg" : style === "primary" || style === "brand" ? "bg-[color:var(--kit-preview-primary,var(--kit-inverse))] text-[color:var(--kit-preview-primary-on,var(--kit-fg-inverse))]" : style === "dark" ? "bg-kit-inverse text-kit-fg-inverse" : "bg-kit-muted text-kit-fg", className),
+		className: cn("inline-flex max-w-full items-center justify-center gap-1.5 truncate font-medium transition-colors", size === "sm" ? "h-6 rounded-kit-md px-2 text-kit-xs" : size === "lg" ? "h-10 rounded-kit-lg px-4 text-kit-base" : "h-8 rounded-kit-lg px-3 text-kit-sm", style === "primary" && "bg-kit-preview-primary text-kit-preview-primary-on", style === "secondary" && (chrome ? "bg-kit-preview-contrast text-kit-preview-contrast-on" : "bg-kit-preview-ink text-kit-preview-paper"), style === "outline" && (chrome ? "border border-kit-preview-outline text-kit-fg" : "border border-kit-preview-ink/25 text-kit-preview-ink"), style === "link" && "h-auto px-0 text-kit-preview-primary underline underline-offset-4", !STYLE_ITEMS.some((x) => x.value === style) && "bg-kit-muted text-kit-fg", v.fullWidth && !small && "w-full", className),
 		children: [
 			v.icon ? /* @__PURE__ */ jsx(KitIcon, {
 				name: v.icon,
@@ -168,14 +172,6 @@ function ButtonPreview({ v, className, small, site }) {
 		]
 	});
 }
-/** V2's site preview: primary in the brand colour, secondary / dark as ink on paper, outline as an ink hairline. */
-function siteLook(style) {
-	if (style === "link") return "h-auto px-0 text-[color:var(--kit-preview-primary,var(--kit-fg))] underline underline-offset-4";
-	if (style === "outline") return "border border-[color:var(--kit-preview-line,var(--kit-line-strong))] text-[color:var(--kit-preview-ink,var(--kit-fg))]";
-	if (style === "primary" || style === "brand") return "bg-[color:var(--kit-preview-primary,var(--kit-inverse))] text-[color:var(--kit-preview-primary-on,var(--kit-fg-inverse))]";
-	if (style === "dark") return "bg-[color:var(--kit-preview-ink,var(--kit-inverse))] text-[color:var(--kit-preview-paper,var(--kit-fg-inverse))]";
-	return "bg-[color:var(--kit-preview-ink,var(--kit-muted))] text-[color:var(--kit-preview-paper,var(--kit-fg))]";
-}
 /** A 16px neutral glyph of the style (filled · outlined · underlined) — brand-free, so the field stays calm. */
 function StyleGlyph({ style, className }) {
 	return /* @__PURE__ */ jsx("span", {
@@ -184,57 +180,70 @@ function StyleGlyph({ style, className }) {
 		children: style === "link" ? /* @__PURE__ */ jsx("span", { className: "h-[2px] w-3.5 rounded-full bg-kit-fg-2" }) : /* @__PURE__ */ jsx("span", { className: cn("h-2.5 w-4 rounded-[3px]", style === "outline" ? "border-[1.5px] border-kit-fg-2" : style === "secondary" || style === "light" || style === "tertiary" ? "bg-kit-fg-3" : "bg-kit-fg") })
 	});
 }
-/** The leading-icon picker: search + grid over BUTTON_ICONS, "No icon" first. */
+/** The leading-icon picker over BUTTON_ICONS, "No icon" first: V2's IconPickerGrid (icon.tsx) — search box, 8-column
+*  grid in a 224px scroll. The tiles stay one radiogroup (the dash's semantics; V2 draws a listbox). */
 function ButtonIconPicker({ value, onPick }) {
 	const [q, setQ] = React.useState("");
 	const query = q.trim().toLowerCase();
 	const shown = query ? BUTTON_ICONS.filter((n) => n.includes(query.replace(/\s+/g, "-"))) : BUTTON_ICONS;
+	const tile = (on) => cn("flex aspect-square items-center justify-center rounded-kit-md text-kit-fg-2 transition-colors hover:bg-kit-hover hover:text-kit-fg", on && "bg-kit-selected text-kit-fg ring-1 ring-inset ring-kit-line-strong");
 	return /* @__PURE__ */ jsxs("div", {
+		"data-icon-picker": true,
 		className: "flex flex-col gap-2",
-		children: [
-			/* @__PURE__ */ jsx(Input, {
-				size: "sm",
-				"aria-label": "Search icons",
-				leading: /* @__PURE__ */ jsx(IconSearch, { stroke: 1.5 }),
+		children: [/* @__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,
 				value: q,
 				onChange: (e) => setQ(e.target.value),
 				placeholder: "Search icons",
-				autoFocus: true
-			}),
-			/* @__PURE__ */ jsxs("div", {
+				"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__ */ jsxs("div", {
+			className: "max-h-56 overflow-y-auto pr-0.5",
+			children: [/* @__PURE__ */ jsxs("div", {
 				role: "radiogroup",
 				"aria-label": "Leading icon",
-				className: "grid max-h-56 grid-cols-8 gap-1 overflow-y-auto overscroll-contain",
+				className: "grid gap-0.5",
+				style: { gridTemplateColumns: "repeat(8, minmax(0, 1fr))" },
 				children: [query ? null : /* @__PURE__ */ jsx("button", {
 					type: "button",
 					role: "radio",
 					"aria-checked": !value,
 					"aria-label": "No icon",
 					onClick: () => onPick(void 0),
-					className: cn("flex size-8 items-center justify-center rounded-kit-md text-kit-fg-3 hover:bg-kit-hover", !value && "bg-kit-selected"),
-					children: /* @__PURE__ */ jsx("span", { className: "size-4 rounded-kit-md border border-dashed border-[var(--kit-emphasis-line)]" })
+					className: tile(!value),
+					children: /* @__PURE__ */ jsx(IconX, {
+						className: "size-4",
+						stroke: 1.5,
+						"aria-hidden": true
+					})
 				}), shown.map((n) => /* @__PURE__ */ jsx("button", {
 					type: "button",
 					role: "radio",
 					"aria-checked": value === n,
 					"aria-label": iconLabel(n),
 					onClick: () => onPick(n),
-					className: cn("flex size-8 items-center justify-center rounded-kit-md text-kit-fg-2 hover:bg-kit-hover hover:text-kit-fg", value === n && "bg-kit-selected text-kit-fg"),
+					className: tile(value === n),
 					children: /* @__PURE__ */ jsx(KitIcon, {
 						name: n,
-						className: "size-4"
+						className: "size-[18px]"
 					})
 				}, n))]
-			}),
-			shown.length === 0 ? /* @__PURE__ */ jsxs("p", {
-				className: "px-1 text-kit-xs text-kit-fg-3",
+			}), shown.length === 0 ? /* @__PURE__ */ jsxs("p", {
+				className: "py-6 text-center text-kit-sm text-kit-fg-3",
 				children: [
-					"No icon matches “",
-					q.trim(),
-					"”."
+					"No icons match “",
+					q,
+					"”"
 				]
-			}) : null
-		]
+			}) : null]
+		})]
 	});
 }
 /** The ONE button screen: preview · label · link (+ new tab, rel) · appearance (style, size, icon, arrow). */
@@ -251,11 +260,8 @@ function ButtonScreen({ value, onChange, readOnly, title = "Button" }) {
 		children: [
 			/* @__PURE__ */ jsx("div", {
 				"data-button-preview": "",
-				className: "flex min-h-20 items-center justify-center rounded-kit-lg bg-[color:var(--kit-preview-paper,var(--kit-subtle))] px-4 py-5 [filter:var(--kit-preview-filter,none)]",
-				children: /* @__PURE__ */ jsx(ButtonPreview, {
-					v,
-					site: true
-				})
+				className: "flex min-h-20 items-center justify-center rounded-kit-lg bg-kit-preview-paper px-4 py-5 [filter:var(--kit-paper-filter)]",
+				children: /* @__PURE__ */ jsx(ButtonPreview, { v })
 			}),
 			/* @__PURE__ */ jsx(Row, {
 				label: "Label",
@@ -329,7 +335,7 @@ function ButtonScreen({ value, onChange, readOnly, title = "Button" }) {
 							children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
 								render: /* @__PURE__ */ jsx("button", {
 									type: "button",
-									className: "flex h-8 w-full items-center gap-2 rounded-kit-md border border-kit-field-border bg-kit-field-bg px-2.5 text-left text-kit-sm text-kit-fg shadow-kit-field hover:border-kit-field-border-hover data-[popup-open]:border-kit-field-border-focus"
+									className: "flex h-8 w-full items-center gap-2 rounded-kit-md border border-kit-field-border bg-kit-field-bg px-2.5 text-left text-kit-sm text-kit-fg hover:border-kit-field-border-hover"
 								}),
 								children: [
 									v.icon ? /* @__PURE__ */ jsx(KitIcon, {
@@ -472,7 +478,7 @@ function ButtonControl({ value, onChange, readOnly, id, path, field }) {
 		type: "button",
 		disabled: readOnly,
 		onClick: () => setEditingLink(true),
-		"aria-label": hasLink(v) ? `${field.title} link: ${describeLink(v, target).primary}. Edit link` : `Add a link to ${field.title.toLowerCase()}`,
+		"aria-label": hasLink(v) ? `${field.title} link: ${linkText(v)}. Edit link` : `Add a link to ${field.title.toLowerCase()}`,
 		className: cn("flex w-full min-w-0 items-center px-2.5 text-left outline-none transition-colors hover:bg-kit-hover focus-visible:bg-kit-hover disabled:cursor-default disabled:hover:bg-transparent", h),
 		children: /* @__PURE__ */ jsx(LinkLine, {
 			v,
@@ -501,7 +507,72 @@ function ButtonControl({ value, onChange, readOnly, id, path, field }) {
 		})]
 	});
 }
+function ButtonLinkEditor({ value, onChange, onSubmit, styles = STYLE_ITEMS, labelFirst = true }) {
+	const v = normLink(value);
+	const labelId = React.useId();
+	const setStyle = (s) => onChange({
+		...v,
+		style: s,
+		variant: s
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-3",
+		children: [
+			labelFirst ? /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1.5",
+				children: [/* @__PURE__ */ jsx("label", {
+					htmlFor: labelId,
+					className: "text-kit-xs font-medium text-kit-fg-2",
+					children: "Label"
+				}), /* @__PURE__ */ jsx(Input, {
+					id: labelId,
+					size: "sm",
+					autoFocus: true,
+					value: v.label ?? "",
+					onChange: (e) => onChange({
+						...v,
+						label: e.target.value
+					}),
+					onKeyDown: (e) => e.key === "Enter" && (e.preventDefault(), onSubmit?.()),
+					placeholder: "Shop cookware"
+				})]
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-2.5",
+				role: "group",
+				"aria-label": "Link",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-kit-xs font-medium text-kit-fg-2",
+					children: "Link"
+				}), /* @__PURE__ */ jsx(LinkForm, {
+					value: v,
+					onChange: (n) => onChange({
+						...v,
+						...n,
+						label: v.label,
+						style: v.style,
+						variant: v.variant
+					}),
+					onEnter: () => onSubmit?.()
+				})]
+			}),
+			styles ? /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between gap-3 border-t border-kit-line pt-2.5",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-kit-xs text-kit-fg-2",
+					children: "Style"
+				}), /* @__PURE__ */ jsx(Segmented, {
+					size: "sm",
+					"aria-label": "Button style",
+					value: v.style ?? "primary",
+					onChange: (s) => setStyle(s),
+					items: styles
+				})]
+			}) : null
+		]
+	});
+}
 //#endregion
-export { ButtonControl, ButtonScreen };
+export { BUTTON_ICONS, ButtonControl, ButtonIconPicker, ButtonLinkEditor, ButtonPreview, ButtonScreen, ButtonStyleGrid, STYLE_ITEMS, StyleGlyph, lookLabel, lookOf, nextButton };
 
 //# sourceMappingURL=button.js.map

package/dist/controls/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","names":[],"sources":["../../src/controls/button.tsx"],"sourcesContent":["/**\n * BUTTON — label + link + look as ONE unit (V2 HEAD kit/controls/link.tsx \"Button\", DESIGN §8.8, CPO D43 · D45 · D46).\n *\n *  - <ButtonControl>  at rest: one FieldUnit, two rows. The label row drills into the button screen (form.navigate → the\n *                     \"button\" frame); the link row edits the link in place (LinkQuickEdit).\n *  - <ButtonScreen>   the one button screen (the frame body): preview · label · link (LinkForm) · appearance (style grid,\n *                     size, leading icon, arrow).\n *  - <ButtonStyleGrid>, <ButtonPreview>, <StyleGlyph> — the pieces both draw.\n *\n * Stored shape (prod `button`, adapters/values.ts buttonToProd / buttonFromProd; backend buttonValueProblem). The kit\n * value is the flattened V2 button the adapter hands in. What this control writes keeps that value's keys:\n *  - the look goes in the key the value already uses — `style` when it has one, else `variant` (what prod renderers\n *    read) — and never both (buttonToProd names an equal pair as lost, so the dock would refuse the write);\n *  - `rel: \"follow\"` is never written (prod's rel list is nofollow · sponsored · ugc) and `newTab: false`/`target` only\n *    where the stored value had that key (storedLink);\n *  - `icon` is a dock icon name (DOCK_ICON_NAMES): the picker offers only icons that are dock names.\n *\n * \"Full width\" writes `fullWidth: true`, and off writes `false` only where the stored value had the key (as Show arrow);\n * every renderer draws it (hosted `bcms-btn-full`, the SDKs' and in-place publishing's `data-full-width`).\n *\n * Deviation from V2, because prod has nothing behind it: an unset look reads \"Default\" (V2 drew Primary, and guessed\n * Outline for a field named \"secondary\"). The preview is V2's: the site palette (--kit-preview-paper / -ink / -primary /\n * -primary-on / -contrast / -contrast-on / -outline, which a host may set to the project's colours) on the paper, and the\n * chrome swatches in the style grid.\n */\nimport * as React from \"react\";\nimport { IconArrowRight, IconChevronDown, IconChevronRight, IconSearch, IconX } from \"@tabler/icons-react\";\nimport { cn } from \"../lib/cn\";\nimport { isObj } from \"../lib/path\";\nimport { KIT_ICONS, KitIcon, iconLabel } from \"../lib/icons\";\nimport { BUTTON_VARIANTS, DOCK_ICON_NAME_SET } from \"../adapters/prod-types\";\nimport { useForm, useKitEnv } from \"../context\";\nimport { FieldUnit } from \"../engine/grouping\";\nimport { Input } from \"../ui/input\";\nimport { Segmented, Switch } from \"../ui/controls\";\nimport { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from \"../ui/overlay\";\nimport type { ControlProps } from \"../types\";\nimport { LinkForm, LinkLine, LinkQuickEdit, TARGET_KEYS, finalizeLink, findTarget, hasLink, linkText, normLink, storedLink, useLinkTargets, type ButtonStyle, type LinkValue } from \"./link\";\n\nexport const STYLE_ITEMS: { value: ButtonStyle; label: string }[] = [\n  { value: \"primary\", label: \"Primary\" },\n  { value: \"secondary\", label: \"Secondary\" },\n  { value: \"outline\", label: \"Outline\" },\n  { value: \"link\", label: \"Text link\" },\n];\nconst SIZE_LABEL = { sm: \"Small\", md: \"Medium\", lg: \"Large\" } as const;\nconst isVariant = (x: unknown): x is string => typeof x === \"string\" && (BUTTON_VARIANTS as readonly string[]).includes(x);\n\n/** The look prod renders: the first valid of variant, style (buttonToProd's rule). */\nexport function lookOf(v: Pick<LinkValue, \"variant\" | \"style\">): string | undefined {\n  return [v.variant, v.style].find(isVariant);\n}\n/** \"Brand\" for a stored look outside the four styles; undefined when unset. */\nexport function lookLabel(look: string | undefined): string {\n  if (!look) return \"Default\";\n  return STYLE_ITEMS.find((s) => s.value === look)?.label ?? look.charAt(0).toUpperCase() + look.slice(1);\n}\n\n/**\n * The next stored button: `raw` (the value as the field holds it) with `patch` applied, keyed like `raw`. A look in the\n * patch (`style`) lands in the key `raw` uses for it.\n */\nexport function nextButton(raw: unknown, patch: Partial<LinkValue>): LinkValue {\n  const base: LinkValue = isObj(raw) ? ({ ...(raw as object) } as LinkValue) : { href: \"\" };\n  const { style, ...rest } = patch;\n  const out: LinkValue = { ...base, ...rest };\n  // prod requires both strings (buttonToProd names a missing one as lost, and the dock refuses the write)\n  if (typeof out.href !== \"string\") out.href = \"\";\n  if (typeof out.label !== \"string\") out.label = \"\";\n  if (style !== undefined) {\n    const key = isObj(raw) && raw.style !== undefined ? \"style\" : \"variant\";\n    delete out.style;\n    delete out.variant;\n    out[key] = style;\n  }\n  return storedLink(out, raw);\n}\n\n/** The icons a button can carry: the kit's drawn icons that are also dock names (the backend checks the name). */\nexport const BUTTON_ICONS: string[] = Object.keys(KIT_ICONS).filter((n) => DOCK_ICON_NAME_SET.has(n));\n\n/** D46: four styles never sit in a row of tabs. The option IS the visual, so it is a 2×2 grid of live previews (one\n *  radiogroup: Tab enters on the checked style, arrows move and pick). A stored look outside the four is listed too. */\nexport function ButtonStyleGrid({\n  v,\n  onPick,\n  \"aria-label\": ariaLabel,\n  size = \"md\",\n}: {\n  v: LinkValue;\n  onPick: (s: ButtonStyle) => void;\n  \"aria-label\": string;\n  size?: \"sm\" | \"md\";\n}) {\n  const cur = lookOf(v);\n  const items: { value: string; label: string }[] = cur && !STYLE_ITEMS.some((s) => s.value === cur) ? [...STYLE_ITEMS, { value: cur, label: lookLabel(cur) }] : STYLE_ITEMS;\n  const onKey = (e: React.KeyboardEvent, i: number) => {\n    const d = e.key === \"ArrowRight\" || e.key === \"ArrowDown\" ? 1 : e.key === \"ArrowLeft\" || e.key === \"ArrowUp\" ? -1 : 0;\n    if (!d) return;\n    e.preventDefault();\n    const next = items[(i + d + items.length) % items.length];\n    onPick(next.value as ButtonStyle);\n    const group = (e.currentTarget as HTMLElement).parentElement;\n    requestAnimationFrame(() => group?.querySelector<HTMLElement>(`[data-style=\"${next.value}\"]`)?.focus());\n  };\n  return (\n    <div className=\"grid grid-cols-2 gap-1.5\" role=\"radiogroup\" aria-label={ariaLabel}>\n      {items.map((s, i) => {\n        const on = cur === s.value;\n        return (\n          <button\n            key={s.value}\n            type=\"button\"\n            role=\"radio\"\n            data-style={s.value}\n            aria-checked={on}\n            tabIndex={on || (!items.some((x) => x.value === cur) && i === 0) ? 0 : -1}\n            onKeyDown={(e) => onKey(e, i)}\n            onClick={() => onPick(s.value as ButtonStyle)}\n            className={cn(\n              \"flex min-w-0 items-center gap-2 rounded-kit-md border px-2 transition-colors\",\n              size === \"sm\" ? \"h-8 text-kit-xs\" : \"h-9 text-kit-sm\",\n              on ? \"border-[var(--kit-emphasis-line)] bg-kit-selected text-kit-fg\" : \"border-kit-line text-kit-fg-2 hover:border-kit-line-strong hover:text-kit-fg\",\n            )}\n          >\n            <ButtonPreview v={{ ...v, style: s.value as ButtonStyle, variant: undefined, label: \"Aa\", icon: undefined, arrow: false }} small chrome />\n            <span className=\"truncate\">{s.label}</span>\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n\n/**\n * The site's button as the site draws it (V2 link.tsx ButtonPreview: the site palette, not app tokens). On the preview\n * paper it keeps the site's own colours in both themes; `chrome` = drawn on app chrome (the style grid), where the\n * dark-ink styles flip so they still read on a dark panel. Prod looks beyond the four: brand as primary, dark as\n * secondary, any other in the muted kit fill.\n */\nexport function ButtonPreview({ v, className, small, chrome }: { v: LinkValue; className?: string; small?: boolean; chrome?: boolean }) {\n  const look = lookOf(v) ?? \"primary\";\n  const style = look === \"brand\" ? \"primary\" : look === \"dark\" ? \"secondary\" : look;\n  const size = small ? \"sm\" : v.size ?? \"md\";\n  return (\n    <span\n      className={cn(\n        \"inline-flex max-w-full items-center justify-center gap-1.5 truncate font-medium transition-colors\",\n        size === \"sm\" ? \"h-6 rounded-kit-md px-2 text-kit-xs\" : size === \"lg\" ? \"h-10 rounded-kit-lg px-4 text-kit-base\" : \"h-8 rounded-kit-lg px-3 text-kit-sm\",\n        style === \"primary\" && \"bg-kit-preview-primary text-kit-preview-primary-on\",\n        style === \"secondary\" && (chrome ? \"bg-kit-preview-contrast text-kit-preview-contrast-on\" : \"bg-kit-preview-ink text-kit-preview-paper\"),\n        style === \"outline\" && (chrome ? \"border border-kit-preview-outline text-kit-fg\" : \"border border-kit-preview-ink/25 text-kit-preview-ink\"),\n        style === \"link\" && \"h-auto px-0 text-kit-preview-primary underline underline-offset-4\",\n        !STYLE_ITEMS.some((x) => x.value === style) && \"bg-kit-muted text-kit-fg\",\n        v.fullWidth && !small && \"w-full\",\n        className,\n      )}\n    >\n      {v.icon ? <KitIcon name={v.icon} className=\"size-3.5 shrink-0\" /> : null}\n      <span className=\"truncate\">{v.label || \"Button\"}</span>\n      {v.arrow ? <IconArrowRight className=\"size-3.5 shrink-0\" stroke={1.75} /> : null}\n    </span>\n  );\n}\n\n/** A 16px neutral glyph of the style (filled · outlined · underlined) — brand-free, so the field stays calm. */\nexport function StyleGlyph({ style, className }: { style?: string; className?: string }) {\n  return (\n    <span aria-hidden className={cn(\"flex size-4 shrink-0 items-center justify-center\", className)}>\n      {style === \"link\" ? (\n        <span className=\"h-[2px] w-3.5 rounded-full bg-kit-fg-2\" />\n      ) : (\n        <span className={cn(\"h-2.5 w-4 rounded-[3px]\", style === \"outline\" ? \"border-[1.5px] border-kit-fg-2\" : style === \"secondary\" || style === \"light\" || style === \"tertiary\" ? \"bg-kit-fg-3\" : \"bg-kit-fg\")} />\n      )}\n    </span>\n  );\n}\n\n/** The leading-icon picker over BUTTON_ICONS, \"No icon\" first: V2's IconPickerGrid (icon.tsx) — search box, 8-column\n *  grid in a 224px scroll. The tiles stay one radiogroup (the dash's semantics; V2 draws a listbox). */\nexport function ButtonIconPicker({ value, onPick }: { value?: string; onPick: (icon: string | undefined) => void }) {\n  const [q, setQ] = React.useState(\"\");\n  const query = q.trim().toLowerCase();\n  const shown = query ? BUTTON_ICONS.filter((n) => n.includes(query.replace(/\\s+/g, \"-\"))) : BUTTON_ICONS;\n  const tile = (on: boolean) =>\n    cn(\"flex aspect-square items-center justify-center rounded-kit-md text-kit-fg-2 transition-colors hover:bg-kit-hover hover:text-kit-fg\", on && \"bg-kit-selected text-kit-fg ring-1 ring-inset ring-kit-line-strong\");\n  return (\n    <div data-icon-picker className=\"flex flex-col gap-2\">\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          value={q}\n          onChange={(e) => setQ(e.target.value)}\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        <div role=\"radiogroup\" aria-label=\"Leading icon\" className=\"grid gap-0.5\" style={{ gridTemplateColumns: \"repeat(8, minmax(0, 1fr))\" }}>\n          {query ? null : (\n            <button type=\"button\" role=\"radio\" aria-checked={!value} aria-label=\"No icon\" onClick={() => onPick(undefined)} className={tile(!value)}>\n              <IconX className=\"size-4\" stroke={1.5} aria-hidden />\n            </button>\n          )}\n          {shown.map((n) => (\n            <button key={n} type=\"button\" role=\"radio\" aria-checked={value === n} aria-label={iconLabel(n)} onClick={() => onPick(n)} className={tile(value === n)}>\n              <KitIcon name={n} className=\"size-[18px]\" />\n            </button>\n          ))}\n        </div>\n        {shown.length === 0 ? <p className=\"py-6 text-center text-kit-sm text-kit-fg-3\">No icons match “{q}”</p> : null}\n      </div>\n    </div>\n  );\n}\n\n/** The ONE button screen: preview · label · link (+ new tab, rel) · appearance (style, size, icon, arrow). */\nexport function ButtonScreen({ value, onChange, readOnly, title = \"Button\" }: { value: unknown; onChange: (v: LinkValue) => void; readOnly?: boolean; title?: string }) {\n  const v = normLink(value);\n  const set = (p: Partial<LinkValue>) => onChange(nextButton(value, p));\n  const [iconOpen, setIconOpen] = React.useState(false);\n  const labelId = React.useId();\n  const arrowId = React.useId();\n  const fullId = React.useId();\n  return (\n    <fieldset disabled={readOnly} className=\"flex min-w-0 flex-col gap-5\">\n      <div data-button-preview=\"\" className=\"flex min-h-20 items-center justify-center rounded-kit-lg bg-kit-preview-paper px-4 py-5 [filter:var(--kit-paper-filter)]\">\n        <ButtonPreview v={v} />\n      </div>\n      <Row label=\"Label\" htmlFor={labelId}>\n        <Input id={labelId} value={v.label ?? \"\"} onChange={(e) => set({ label: e.target.value })} placeholder=\"Shop now\" />\n      </Row>\n      <div className=\"flex flex-col gap-1.5\" role=\"group\" aria-label={`${title} link`}>\n        <span className=\"text-kit-sm font-medium text-kit-fg-2\">Link</span>\n        <LinkForm\n          readOnly={readOnly}\n          value={v}\n          onChange={(n) => {\n            // a script link is never written; LinkForm says why under the target\n            const out = finalizeLink(n);\n            if (out) set(linkPart(out));\n          }}\n        />\n      </div>\n      <div className=\"flex flex-col gap-4 border-t border-kit-line pt-4\">\n        <span className=\"text-kit-xs font-medium text-kit-fg-3\">Appearance</span>\n        <Row label=\"Style\">\n          <ButtonStyleGrid v={v} aria-label={`${title} style`} onPick={(style) => set({ style })} />\n        </Row>\n        <Row label=\"Size\">\n          <Segmented<\"sm\" | \"md\" | \"lg\">\n            aria-label={`${title} size`}\n            value={v.size ?? \"md\"}\n            onChange={(s) => set({ size: s })}\n            items={[\n              { value: \"sm\", label: \"Small\" },\n              { value: \"md\", label: \"Medium\" },\n              { value: \"lg\", label: \"Large\" },\n            ]}\n            className=\"w-full [&>button]:flex-1\"\n          />\n        </Row>\n        <Row label=\"Leading icon\">\n          <Popover open={iconOpen} onOpenChange={setIconOpen}>\n            <PopoverTrigger\n              render={\n                <button\n                  type=\"button\"\n                  className=\"flex h-8 w-full items-center gap-2 rounded-kit-md border border-kit-field-border bg-kit-field-bg px-2.5 text-left text-kit-sm text-kit-fg hover:border-kit-field-border-hover\"\n                />\n              }\n            >\n              {v.icon ? <KitIcon name={v.icon} className=\"size-4 text-kit-fg-2\" /> : <span className=\"size-4 rounded-kit-md border border-dashed border-[var(--kit-emphasis-line)]\" />}\n              <span className={cn(\"flex-1 truncate\", !v.icon && \"text-kit-fg-3\")}>{v.icon ? iconLabel(v.icon) : \"No icon\"}</span>\n              <IconChevronDown className=\"size-3.5 text-kit-fg-3\" stroke={1.5} />\n            </PopoverTrigger>\n            <PopoverContent className=\"w-[300px] p-2\">\n              <ButtonIconPicker\n                value={v.icon}\n                onPick={(k) => {\n                  set({ icon: k });\n                  setIconOpen(false);\n                }}\n              />\n            </PopoverContent>\n          </Popover>\n        </Row>\n        <div className=\"flex flex-col gap-2\">\n          <label htmlFor={arrowId} className=\"flex min-h-7 cursor-pointer items-center justify-between gap-3\">\n            <span className=\"text-kit-sm text-kit-fg-2\">Show arrow</span>\n            <Switch disabled={readOnly} id={arrowId} size=\"sm\" checked={!!v.arrow} onCheckedChange={(c) => set({ arrow: c ? true : isObj(value) && \"arrow\" in value ? false : undefined })} />\n          </label>\n          <label htmlFor={fullId} className=\"flex min-h-7 cursor-pointer items-center justify-between gap-3\">\n            <span className=\"text-kit-sm text-kit-fg-2\">Full width</span>\n            <Switch\n              disabled={readOnly}\n              id={fullId}\n              size=\"sm\"\n              checked={v.fullWidth === true}\n              onCheckedChange={(c) => set({ fullWidth: c ? true : isObj(value) && \"fullWidth\" in value ? false : undefined })}\n            />\n          </label>\n        </div>\n      </div>\n    </fieldset>\n  );\n}\n\n/** The link half of a link value (what LinkForm / the quick edit own); the label and the look stay the button's. */\nfunction linkPart(n: LinkValue): Partial<LinkValue> {\n  const { label: _l, style: _s, variant: _v, size: _z, arrow: _a, icon: _i, fullWidth: _f, ...link } = n;\n  // a key the new link no longer has (a picked page drops the typed email) is cleared, not kept from before\n  return { ...TARGET_KEYS, email: undefined, phone: undefined, subject: undefined, ...link };\n}\n\nfunction Row({ label, children, htmlFor }: { label: string; children: React.ReactNode; htmlFor?: string }) {\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      <label htmlFor={htmlFor} className=\"text-kit-sm font-medium text-kit-fg-2\">\n        {label}\n      </label>\n      {children}\n    </div>\n  );\n}\n\n/**\n * Button field at rest: ONE unit between two hairlines (fieldset-like).\n *   [style glyph] Label ……………… Primary · Medium  ›   → drills into the button screen (\"… › Button\")\n *   [page icon]   Title  /path                         → edits the link in place\n */\nexport function ButtonControl({ value, onChange, readOnly, id, path, field }: ControlProps) {\n  const v = normLink(value);\n  const form = useForm();\n  const { variant } = useKitEnv();\n  const [open, setOpen] = React.useState(false);\n  const [editingLink, setEditingLink] = React.useState(false);\n  const { targets } = useLinkTargets();\n  const target = findTarget(targets, v);\n  const linkBtn = React.useRef<HTMLButtonElement>(null);\n  const look = lookOf(v);\n  const openSettings = () => (form ? form.navigate(path) : setOpen(true));\n  const h = variant === \"document\" ? \"h-10\" : \"h-9\";\n  const head = (\n    <button\n      id={id}\n      type=\"button\"\n      onClick={readOnly && !form ? undefined : openSettings}\n      aria-label={`${field.title}: ${v.label || \"no label\"}. Open button settings`}\n      className={cn(\"group/bhead flex w-full min-w-0 items-center gap-2.5 px-2.5 text-left outline-none transition-colors hover:bg-kit-hover focus-visible:bg-kit-hover\", h)}\n    >\n      <StyleGlyph style={look} />\n      <span className={cn(\"min-w-0 flex-1 truncate text-kit-sm font-medium\", v.label ? \"text-kit-fg\" : \"text-kit-fg-3\")}>{v.label || \"Add a label\"}</span>\n      <span className=\"shrink-0 text-kit-xs text-kit-fg-3\">\n        {lookLabel(look)}\n        {v.size && v.size !== \"md\" ? ` · ${SIZE_LABEL[v.size]}` : \"\"}\n      </span>\n      <IconChevronRight className=\"size-4 shrink-0 text-kit-fg-3 transition-transform group-hover/bhead:translate-x-0.5\" stroke={1.5} aria-hidden />\n    </button>\n  );\n  const linkRow =\n    editingLink && !readOnly ? (\n      <div>\n        <LinkQuickEdit\n          value={v}\n          ariaLabel={`${field.title} link`}\n          size=\"sm\"\n          bare\n          onCommit={(n) => onChange(nextButton(value, n ? linkPart(n) : { ...linkPart({ href: \"\" }), type: \"page\", href: \"\" }))}\n          onDone={() => {\n            setEditingLink(false);\n            requestAnimationFrame(() => linkBtn.current?.focus({ preventScroll: true }));\n          }}\n        />\n      </div>\n    ) : (\n      <button\n        ref={linkBtn}\n        type=\"button\"\n        disabled={readOnly}\n        onClick={() => setEditingLink(true)}\n        // V2 link.tsx:1263: the name reads the link's own text (its title, else its address), not the picked target's title\n        aria-label={hasLink(v) ? `${field.title} link: ${linkText(v)}. Edit link` : `Add a link to ${field.title.toLowerCase()}`}\n        className={cn(\"flex w-full min-w-0 items-center px-2.5 text-left outline-none transition-colors hover:bg-kit-hover focus-visible:bg-kit-hover disabled:cursor-default disabled:hover:bg-transparent\", h)}\n      >\n        <LinkLine v={v} target={target} />\n      </button>\n    );\n  // CPO D43 + D45: label + link are ONE unit — one border, a hairline between the label row and the link row\n  const unit = (\n    <FieldUnit data-button-unit=\"\" aria-label={field.title} className=\"overflow-hidden\">\n      {head}\n      {linkRow}\n    </FieldUnit>\n  );\n  if (form) return unit;\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverAnchor render={unit} />\n      <PopoverContent className=\"w-[360px] p-4\" align=\"start\">\n        <ButtonScreen value={value} onChange={onChange} readOnly={readOnly} title={field.title} />\n      </PopoverContent>\n    </Popover>\n  );\n}\n\n/* ── Compact button editor for small surfaces (the canvas popover) ──\n * V2 kit/controls/link.tsx ButtonLinkEditor, ported as is: label + the link element (LinkForm, same Type · target ·\n * options as everywhere) as one unit, then the button's Style. Here beside STYLE_ITEMS, which link.tsx cannot import.\n */\nexport function ButtonLinkEditor({\n  value,\n  onChange,\n  onSubmit,\n  styles = STYLE_ITEMS,\n  labelFirst = true,\n}: {\n  value: LinkValue;\n  onChange: (v: LinkValue) => void;\n  onSubmit?: () => void;\n  /** null = a plain text link (nav, footer and legal links): no style row. */\n  styles?: { value: ButtonStyle; label: string }[] | null;\n  labelFirst?: boolean;\n}) {\n  const v = normLink(value);\n  const labelId = React.useId();\n  const setStyle = (s: ButtonStyle) => onChange({ ...v, style: s, variant: s });\n  return (\n    <div className=\"flex flex-col gap-3\">\n      {labelFirst ? (\n        <div className=\"flex flex-col gap-1.5\">\n          <label htmlFor={labelId} className=\"text-kit-xs font-medium text-kit-fg-2\">Label</label>\n          <Input id={labelId} size=\"sm\" autoFocus value={v.label ?? \"\"} onChange={(e) => onChange({ ...v, label: e.target.value })} onKeyDown={(e) => e.key === \"Enter\" && (e.preventDefault(), onSubmit?.())} placeholder=\"Shop cookware\" />\n        </div>\n      ) : null}\n      <div className=\"flex flex-col gap-2.5\" role=\"group\" aria-label=\"Link\">\n        <span className=\"text-kit-xs font-medium text-kit-fg-2\">Link</span>\n        <LinkForm value={v} onChange={(n) => onChange({ ...v, ...n, label: v.label, style: v.style, variant: v.variant })} onEnter={() => onSubmit?.()} />\n      </div>\n      {styles ? (\n        <div className=\"flex items-center justify-between gap-3 border-t border-kit-line pt-2.5\">\n          <span className=\"text-kit-xs text-kit-fg-2\">Style</span>\n          <Segmented size=\"sm\" aria-label=\"Button style\" value={v.style ?? \"primary\"} onChange={(s) => setStyle(s as ButtonStyle)} items={styles} />\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,IAAa,cAAuD;CAClE;EAAE,OAAO;EAAW,OAAO;CAAU;CACrC;EAAE,OAAO;EAAa,OAAO;CAAY;CACzC;EAAE,OAAO;EAAW,OAAO;CAAU;CACrC;EAAE,OAAO;EAAQ,OAAO;CAAY;AACtC;AACA,IAAM,aAAa;CAAE,IAAI;CAAS,IAAI;CAAU,IAAI;AAAQ;AAC5D,IAAM,aAAa,MAA4B,OAAO,MAAM,YAAa,gBAAsC,SAAS,CAAC;;AAGzH,SAAgB,OAAO,GAA6D;CAClF,OAAO,CAAC,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC,KAAK,SAAS;AAC5C;;AAEA,SAAgB,UAAU,MAAkC;CAC1D,IAAI,CAAC,MAAM,OAAO;CAClB,OAAO,YAAY,MAAM,MAAM,EAAE,UAAU,IAAI,CAAC,EAAE,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI,KAAK,MAAM,CAAC;AACxG;;;;;AAMA,SAAgB,WAAW,KAAc,OAAsC;CAC7E,MAAM,OAAkB,MAAM,GAAG,IAAK,EAAE,GAAI,IAAe,IAAkB,EAAE,MAAM,GAAG;CACxF,MAAM,EAAE,OAAO,GAAG,SAAS;CAC3B,MAAM,MAAiB;EAAE,GAAG;EAAM,GAAG;CAAK;CAE1C,IAAI,OAAO,IAAI,SAAS,UAAU,IAAI,OAAO;CAC7C,IAAI,OAAO,IAAI,UAAU,UAAU,IAAI,QAAQ;CAC/C,IAAI,UAAU,KAAA,GAAW;EACvB,MAAM,MAAM,MAAM,GAAG,KAAK,IAAI,UAAU,KAAA,IAAY,UAAU;EAC9D,OAAO,IAAI;EACX,OAAO,IAAI;EACX,IAAI,OAAO;CACb;CACA,OAAO,WAAW,KAAK,GAAG;AAC5B;;AAGA,IAAa,eAAyB,OAAO,KAAK,SAAS,CAAC,CAAC,QAAQ,MAAM,mBAAmB,IAAI,CAAC,CAAC;;;AAIpG,SAAgB,gBAAgB,EAC9B,GACA,QACA,cAAc,WACd,OAAO,QAMN;CACD,MAAM,MAAM,OAAO,CAAC;CACpB,MAAM,QAA4C,OAAO,CAAC,YAAY,MAAM,MAAM,EAAE,UAAU,GAAG,IAAI,CAAC,GAAG,aAAa;EAAE,OAAO;EAAK,OAAO,UAAU,GAAG;CAAE,CAAC,IAAI;CAC/J,MAAM,SAAS,GAAwB,MAAc;EACnD,MAAM,IAAI,EAAE,QAAQ,gBAAgB,EAAE,QAAQ,cAAc,IAAI,EAAE,QAAQ,eAAe,EAAE,QAAQ,YAAY,KAAK;EACpH,IAAI,CAAC,GAAG;EACR,EAAE,eAAe;EACjB,MAAM,OAAO,OAAO,IAAI,IAAI,MAAM,UAAU,MAAM;EAClD,OAAO,KAAK,KAAoB;EAChC,MAAM,QAAS,EAAE,cAA8B;EAC/C,4BAA4B,OAAO,cAA2B,gBAAgB,KAAK,MAAM,GAAG,CAAC,EAAE,MAAM,CAAC;CACxG;CACA,OACE,oBAAC,OAAD;EAAK,WAAU;EAA2B,MAAK;EAAa,cAAY;EACrE,UAAA,MAAM,KAAK,GAAG,MAAM;GACnB,MAAM,KAAK,QAAQ,EAAE;GACrB,OACE,qBAAC,UAAD;IAEE,MAAK;IACL,MAAK;IACL,cAAY,EAAE;IACd,gBAAc;IACd,UAAU,MAAO,CAAC,MAAM,MAAM,MAAM,EAAE,UAAU,GAAG,KAAK,MAAM,IAAK,IAAI;IACvE,YAAY,MAAM,MAAM,GAAG,CAAC;IAC5B,eAAe,OAAO,EAAE,KAAoB;IAC5C,WAAW,GACT,gFACA,SAAS,OAAO,oBAAoB,mBACpC,KAAK,kEAAkE,8EACzE;IAbF,UAAA,CAeE,oBAAC,eAAD;KAAe,GAAG;MAAE,GAAG;MAAG,OAAO,EAAE;MAAsB,SAAS,KAAA;MAAW,OAAO;MAAM,MAAM,KAAA;MAAW,OAAO;KAAM;KAAG,OAAA;KAAM,QAAA;IAAQ,CAAA,GACzI,oBAAC,QAAD;KAAM,WAAU;KAAY,UAAA,EAAE;IAAY,CAAA,CACpC;GAhBD,GAAA,EAAE,KAgBD;EAEZ,CAAC;CACE,CAAA;AAET;;;;;;;AAQA,SAAgB,cAAc,EAAE,GAAG,WAAW,OAAO,UAAmF;CACtI,MAAM,OAAO,OAAO,CAAC,KAAK;CAC1B,MAAM,QAAQ,SAAS,UAAU,YAAY,SAAS,SAAS,cAAc;CAC7E,MAAM,OAAO,QAAQ,OAAO,EAAE,QAAQ;CACtC,OACE,qBAAC,QAAD;EACE,WAAW,GACT,qGACA,SAAS,OAAO,wCAAwC,SAAS,OAAO,2CAA2C,uCACnH,UAAU,aAAa,sDACvB,UAAU,gBAAgB,SAAS,yDAAyD,8CAC5F,UAAU,cAAc,SAAS,kDAAkD,0DACnF,UAAU,UAAU,qEACpB,CAAC,YAAY,MAAM,MAAM,EAAE,UAAU,KAAK,KAAK,4BAC/C,EAAE,aAAa,CAAC,SAAS,UACzB,SACF;EAXF,UAAA;GAaG,EAAE,OAAO,oBAAC,SAAD;IAAS,MAAM,EAAE;IAAM,WAAU;GAAqB,CAAA,IAAI;GACpE,oBAAC,QAAD;IAAM,WAAU;IAAY,UAAA,EAAE,SAAS;GAAe,CAAA;GACrD,EAAE,QAAQ,oBAAC,gBAAD;IAAgB,WAAU;IAAoB,QAAQ;GAAO,CAAA,IAAI;EACxE;;AAEV;;AAGA,SAAgB,WAAW,EAAE,OAAO,aAAqD;CACvF,OACE,oBAAC,QAAD;EAAM,eAAA;EAAY,WAAW,GAAG,oDAAoD,SAAS;EAC1F,UAAA,UAAU,SACT,oBAAC,QAAD,EAAM,WAAU,yCAA0C,CAAA,IAE1D,oBAAC,QAAD,EAAM,WAAW,GAAG,2BAA2B,UAAU,YAAY,mCAAmC,UAAU,eAAe,UAAU,WAAW,UAAU,aAAa,gBAAgB,WAAW,EAAI,CAAA;CAE1M,CAAA;AAEV;;;AAIA,SAAgB,iBAAiB,EAAE,OAAO,UAA0E;CAClH,MAAM,CAAC,GAAG,QAAQ,MAAM,SAAS,EAAE;CACnC,MAAM,QAAQ,EAAE,KAAK,CAAC,CAAC,YAAY;CACnC,MAAM,QAAQ,QAAQ,aAAa,QAAQ,MAAM,EAAE,SAAS,MAAM,QAAQ,QAAQ,GAAG,CAAC,CAAC,IAAI;CAC3F,MAAM,QAAQ,OACZ,GAAG,sIAAsI,MAAM,oEAAoE;CACrN,OACE,qBAAC,OAAD;EAAK,oBAAA;EAAiB,WAAU;EAAhC,UAAA,CACE,qBAAC,SAAD;GAAO,WAAU;GAAjB,UAAA,CACE,oBAAC,YAAD;IAAY,WAAU;IAAkB,QAAQ;IAAK,eAAA;GAAa,CAAA,GAClE,oBAAC,SAAD;IACE,WAAA;IACA,OAAO;IACP,WAAW,MAAM,KAAK,EAAE,OAAO,KAAK;IACpC,aAAY;IACZ,cAAW;IACX,WAAU;GACX,CAAA,CACI;EACP,CAAA,GAAA,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,qBAAC,OAAD;IAAK,MAAK;IAAa,cAAW;IAAe,WAAU;IAAe,OAAO,EAAE,qBAAqB,4BAA4B;IAApI,UAAA,CACG,QAAQ,OACP,oBAAC,UAAD;KAAQ,MAAK;KAAS,MAAK;KAAQ,gBAAc,CAAC;KAAO,cAAW;KAAU,eAAe,OAAO,KAAA,CAAS;KAAG,WAAW,KAAK,CAAC,KAAK;KACpI,UAAA,oBAAC,OAAD;MAAO,WAAU;MAAS,QAAQ;MAAK,eAAA;KAAa,CAAA;IAC9C,CAAA,GAET,MAAM,KAAK,MACV,oBAAC,UAAD;KAAgB,MAAK;KAAS,MAAK;KAAQ,gBAAc,UAAU;KAAG,cAAY,UAAU,CAAC;KAAG,eAAe,OAAO,CAAC;KAAG,WAAW,KAAK,UAAU,CAAC;KACnJ,UAAA,oBAAC,SAAD;MAAS,MAAM;MAAG,WAAU;KAAe,CAAA;IACrC,GAFK,CAEL,CACT,CACE;GACJ,CAAA,GAAA,MAAM,WAAW,IAAI,qBAAC,KAAD;IAAG,WAAU;IAAb,UAAA;KAA0D;KAAiB;KAAE;IAAI;GAAI,CAAA,IAAA,IACxG;EACF,CAAA,CAAA;;AAET;;AAGA,SAAgB,aAAa,EAAE,OAAO,UAAU,UAAU,QAAQ,YAAsG;CACtK,MAAM,IAAI,SAAS,KAAK;CACxB,MAAM,OAAO,MAA0B,SAAS,WAAW,OAAO,CAAC,CAAC;CACpE,MAAM,CAAC,UAAU,eAAe,MAAM,SAAS,KAAK;CACpD,MAAM,UAAU,MAAM,MAAM;CAC5B,MAAM,UAAU,MAAM,MAAM;CAC5B,MAAM,SAAS,MAAM,MAAM;CAC3B,OACE,qBAAC,YAAD;EAAU,UAAU;EAAU,WAAU;EAAxC,UAAA;GACE,oBAAC,OAAD;IAAK,uBAAoB;IAAG,WAAU;IACpC,UAAA,oBAAC,eAAD,EAAkB,EAAI,CAAA;GACnB,CAAA;GACL,oBAAC,KAAD;IAAK,OAAM;IAAQ,SAAS;IAC1B,UAAA,oBAAC,OAAD;KAAO,IAAI;KAAS,OAAO,EAAE,SAAS;KAAI,WAAW,MAAM,IAAI,EAAE,OAAO,EAAE,OAAO,MAAM,CAAC;KAAG,aAAY;IAAY,CAAA;GAChH,CAAA;GACL,qBAAC,OAAD;IAAK,WAAU;IAAwB,MAAK;IAAQ,cAAY,GAAG,MAAM;IAAzE,UAAA,CACE,oBAAC,QAAD;KAAM,WAAU;KAAwC,UAAA;IAAU,CAAA,GAClE,oBAAC,UAAD;KACY;KACV,OAAO;KACP,WAAW,MAAM;MAEf,MAAM,MAAM,aAAa,CAAC;MAC1B,IAAI,KAAK,IAAI,SAAS,GAAG,CAAC;KAC5B;IACD,CAAA,CACE;;GACL,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,oBAAC,QAAD;MAAM,WAAU;MAAwC,UAAA;KAAgB,CAAA;KACxE,oBAAC,KAAD;MAAK,OAAM;MACT,UAAA,oBAAC,iBAAD;OAAoB;OAAG,cAAY,GAAG,MAAM;OAAS,SAAS,UAAU,IAAI,EAAE,MAAM,CAAC;MAAI,CAAA;KACtF,CAAA;KACL,oBAAC,KAAD;MAAK,OAAM;MACT,UAAA,oBAAC,WAAD;OACE,cAAY,GAAG,MAAM;OACrB,OAAO,EAAE,QAAQ;OACjB,WAAW,MAAM,IAAI,EAAE,MAAM,EAAE,CAAC;OAChC,OAAO;QACL;SAAE,OAAO;SAAM,OAAO;QAAQ;QAC9B;SAAE,OAAO;SAAM,OAAO;QAAS;QAC/B;SAAE,OAAO;SAAM,OAAO;QAAQ;OAChC;OACA,WAAU;MACX,CAAA;KACE,CAAA;KACL,oBAAC,KAAD;MAAK,OAAM;MACT,UAAA,qBAAC,SAAD;OAAS,MAAM;OAAU,cAAc;OAAvC,UAAA,CACE,qBAAC,gBAAD;QACE,QACE,oBAAC,UAAD;SACE,MAAK;SACL,WAAU;QACX,CAAA;QALL,UAAA;SAQG,EAAE,OAAO,oBAAC,SAAD;UAAS,MAAM,EAAE;UAAM,WAAU;SAAwB,CAAA,IAAI,oBAAC,QAAD,EAAM,WAAU,+EAAgF,CAAA;SACvK,oBAAC,QAAD;UAAM,WAAW,GAAG,mBAAmB,CAAC,EAAE,QAAQ,eAAe;UAAI,UAAA,EAAE,OAAO,UAAU,EAAE,IAAI,IAAI;SAAgB,CAAA;SAClH,oBAAC,iBAAD;UAAiB,WAAU;UAAyB,QAAQ;SAAM,CAAA;QACpD;OAChB,CAAA,GAAA,oBAAC,gBAAD;QAAgB,WAAU;QACxB,UAAA,oBAAC,kBAAD;SACE,OAAO,EAAE;SACT,SAAS,MAAM;UACb,IAAI,EAAE,MAAM,EAAE,CAAC;UACf,YAAY,KAAK;SACnB;QACD,CAAA;OACa,CAAA,CACT;;KACN,CAAA;KACL,qBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,qBAAC,SAAD;OAAO,SAAS;OAAS,WAAU;OAAnC,UAAA,CACE,oBAAC,QAAD;QAAM,WAAU;QAA4B,UAAA;OAAgB,CAAA,GAC5D,oBAAC,QAAD;QAAQ,UAAU;QAAU,IAAI;QAAS,MAAK;QAAK,SAAS,CAAC,CAAC,EAAE;QAAO,kBAAkB,MAAM,IAAI,EAAE,OAAO,IAAI,OAAO,MAAM,KAAK,KAAK,WAAW,QAAQ,QAAQ,KAAA,EAAU,CAAC;OAAI,CAAA,CAC5K;MACP,CAAA,GAAA,qBAAC,SAAD;OAAO,SAAS;OAAQ,WAAU;OAAlC,UAAA,CACE,oBAAC,QAAD;QAAM,WAAU;QAA4B,UAAA;OAAgB,CAAA,GAC5D,oBAAC,QAAD;QACE,UAAU;QACV,IAAI;QACJ,MAAK;QACL,SAAS,EAAE,cAAc;QACzB,kBAAkB,MAAM,IAAI,EAAE,WAAW,IAAI,OAAO,MAAM,KAAK,KAAK,eAAe,QAAQ,QAAQ,KAAA,EAAU,CAAC;OAC/G,CAAA,CACI;MACJ,CAAA,CAAA;;IACF;;EACG;;AAEd;;AAGA,SAAS,SAAS,GAAkC;CAClD,MAAM,EAAE,OAAO,IAAI,OAAO,IAAI,SAAS,IAAI,MAAM,IAAI,OAAO,IAAI,MAAM,IAAI,WAAW,IAAI,GAAG,SAAS;CAErG,OAAO;EAAE,GAAG;EAAa,OAAO,KAAA;EAAW,OAAO,KAAA;EAAW,SAAS,KAAA;EAAW,GAAG;CAAK;AAC3F;AAEA,SAAS,IAAI,EAAE,OAAO,UAAU,WAA2E;CACzG,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,oBAAC,SAAD;GAAgB;GAAS,WAAU;GAChC,UAAA;EACI,CAAA,GACN,QACE;;AAET;;;;;;AAOA,SAAgB,cAAc,EAAE,OAAO,UAAU,UAAU,IAAI,MAAM,SAAuB;CAC1F,MAAM,IAAI,SAAS,KAAK;CACxB,MAAM,OAAO,QAAQ;CACrB,MAAM,EAAE,YAAY,UAAU;CAC9B,MAAM,CAAC,MAAM,WAAW,MAAM,SAAS,KAAK;CAC5C,MAAM,CAAC,aAAa,kBAAkB,MAAM,SAAS,KAAK;CAC1D,MAAM,EAAE,YAAY,eAAe;CACnC,MAAM,SAAS,WAAW,SAAS,CAAC;CACpC,MAAM,UAAU,MAAM,OAA0B,IAAI;CACpD,MAAM,OAAO,OAAO,CAAC;CACrB,MAAM,qBAAsB,OAAO,KAAK,SAAS,IAAI,IAAI,QAAQ,IAAI;CACrE,MAAM,IAAI,YAAY,aAAa,SAAS;CAC5C,MAAM,OACJ,qBAAC,UAAD;EACM;EACJ,MAAK;EACL,SAAS,YAAY,CAAC,OAAO,KAAA,IAAY;EACzC,cAAY,GAAG,MAAM,MAAM,IAAI,EAAE,SAAS,WAAW;EACrD,WAAW,GAAG,sJAAsJ,CAAC;EALvK,UAAA;GAOE,oBAAC,YAAD,EAAY,OAAO,KAAO,CAAA;GAC1B,oBAAC,QAAD;IAAM,WAAW,GAAG,mDAAmD,EAAE,QAAQ,gBAAgB,eAAe;IAAI,UAAA,EAAE,SAAS;GAAoB,CAAA;GACnJ,qBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CACG,UAAU,IAAI,GACd,EAAE,QAAQ,EAAE,SAAS,OAAO,MAAM,WAAW,EAAE,UAAU,EACtD;;GACN,oBAAC,kBAAD;IAAkB,WAAU;IAAuF,QAAQ;IAAK,eAAA;GAAa,CAAA;EACvI;;CAEV,MAAM,UACJ,eAAe,CAAC,WACd,oBAAC,OAAD,EAAA,UACE,oBAAC,eAAD;EACE,OAAO;EACP,WAAW,GAAG,MAAM,MAAM;EAC1B,MAAK;EACL,MAAA;EACA,WAAW,MAAM,SAAS,WAAW,OAAO,IAAI,SAAS,CAAC,IAAI;GAAE,GAAG,SAAS,EAAE,MAAM,GAAG,CAAC;GAAG,MAAM;GAAQ,MAAM;EAAG,CAAC,CAAC;EACpH,cAAc;GACZ,eAAe,KAAK;GACpB,4BAA4B,QAAQ,SAAS,MAAM,EAAE,eAAe,KAAK,CAAC,CAAC;EAC7E;CACD,CAAA,EACE,CAAA,IAEL,oBAAC,UAAD;EACE,KAAK;EACL,MAAK;EACL,UAAU;EACV,eAAe,eAAe,IAAI;EAElC,cAAY,QAAQ,CAAC,IAAI,GAAG,MAAM,MAAM,SAAS,SAAS,CAAC,EAAE,eAAe,iBAAiB,MAAM,MAAM,YAAY;EACrH,WAAW,GAAG,wLAAwL,CAAC;EAEvM,UAAA,oBAAC,UAAD;GAAa;GAAW;EAAS,CAAA;CAC3B,CAAA;CAGZ,MAAM,OACJ,qBAAC,WAAD;EAAW,oBAAiB;EAAG,cAAY,MAAM;EAAO,WAAU;EAAlE,UAAA,CACG,MACA,OACQ;;CAEb,IAAI,MAAM,OAAO;CACjB,OACE,qBAAC,SAAD;EAAe;EAAM,cAAc;EAAnC,UAAA,CACE,oBAAC,eAAD,EAAe,QAAQ,KAAO,CAAA,GAC9B,oBAAC,gBAAD;GAAgB,WAAU;GAAgB,OAAM;GAC9C,UAAA,oBAAC,cAAD;IAAqB;IAAiB;IAAoB;IAAU,OAAO,MAAM;GAAQ,CAAA;EAC3E,CAAA,CACT;;AAEb;AAMA,SAAgB,iBAAiB,EAC/B,OACA,UACA,UACA,SAAS,aACT,aAAa,QAQZ;CACD,MAAM,IAAI,SAAS,KAAK;CACxB,MAAM,UAAU,MAAM,MAAM;CAC5B,MAAM,YAAY,MAAmB,SAAS;EAAE,GAAG;EAAG,OAAO;EAAG,SAAS;CAAE,CAAC;CAC5E,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACG,aACC,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,SAAD;KAAO,SAAS;KAAS,WAAU;KAAwC,UAAA;IAAY,CAAA,GACvF,oBAAC,OAAD;KAAO,IAAI;KAAS,MAAK;KAAK,WAAA;KAAU,OAAO,EAAE,SAAS;KAAI,WAAW,MAAM,SAAS;MAAE,GAAG;MAAG,OAAO,EAAE,OAAO;KAAM,CAAC;KAAG,YAAY,MAAM,EAAE,QAAQ,YAAY,EAAE,eAAe,GAAG,WAAW;KAAI,aAAY;IAAiB,CAAA,CAC/N;GACH,CAAA,IAAA;GACJ,qBAAC,OAAD;IAAK,WAAU;IAAwB,MAAK;IAAQ,cAAW;IAA/D,UAAA,CACE,oBAAC,QAAD;KAAM,WAAU;KAAwC,UAAA;IAAU,CAAA,GAClE,oBAAC,UAAD;KAAU,OAAO;KAAG,WAAW,MAAM,SAAS;MAAE,GAAG;MAAG,GAAG;MAAG,OAAO,EAAE;MAAO,OAAO,EAAE;MAAO,SAAS,EAAE;KAAQ,CAAC;KAAG,eAAe,WAAW;IAAI,CAAA,CAC9I;;GACJ,SACC,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,QAAD;KAAM,WAAU;KAA4B,UAAA;IAAW,CAAA,GACvD,oBAAC,WAAD;KAAW,MAAK;KAAK,cAAW;KAAe,OAAO,EAAE,SAAS;KAAW,WAAW,MAAM,SAAS,CAAgB;KAAG,OAAO;IAAS,CAAA,CACtI;GACH,CAAA,IAAA;EACD;;AAET"}

package/{controls → dist/controls}/c1.js

@@ -2,7 +2,7 @@ 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/kit/controls/c1.ts
+//#region src/controls/c1.ts
 var C1_CONTROLS = {
 	string: StringControl,
 	text: TextControl,

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/{controls → dist/controls}/c2.js

@@ -2,7 +2,7 @@ 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/kit/controls/c2.ts
+//#region src/controls/c2.ts
 var C2_CONTROLS = {
 	boolean: BooleanControl,
 	select: SelectControl,

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/{controls → dist/controls}/choice.d.ts

@@ -31,8 +31,13 @@ export declare function optionIcons(options: Option[], className?: string, Glyph
 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;
+/**
+ * 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. */

package/{controls → dist/controls}/choice.js

@@ -1,16 +1,18 @@
+import "../adapters/prod-types.js";
+import { dockIconOf } from "../adapters/icons.js";
 import { cn } from "../lib/cn.js";
-import { KitIcon, iconKey } from "../lib/icons.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 { dockIconOf } from "../adapters/icons.js";
+import { UnknownValueNote } from "./unknown-value.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
+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.
@@ -101,7 +103,9 @@ function BooleanControl({ field, value, onChange, readOnly, id }) {
 		checked: Boolean(value),
 		disabled: readOnly,
 		onCheckedChange: (c) => onChange(c === true),
-		"aria-label": field.title
+		"aria-label": field.title,
+		nativeButton: true,
+		render: /* @__PURE__ */ jsx("button", { type: "button" })
 	});
 	return /* @__PURE__ */ jsx(Switch, {
 		id,
@@ -113,7 +117,32 @@ function BooleanControl({ field, value, onChange, readOnly, id }) {
 		render: /* @__PURE__ */ jsx("button", { type: "button" })
 	});
 }
-function SelectControl({ field, value, onChange, readOnly, id }) {
+/**
+* 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);
@@ -170,7 +199,8 @@ function SelectControl({ field, value, onChange, readOnly, id }) {
 		}, o.value))
 	});
 	if (layout === "cards" || layout === "grid") {
-		const icons = optionIcons(options, "size-4", IconGlyph);
+		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,
@@ -187,12 +217,9 @@ function SelectControl({ field, value, onChange, readOnly, id }) {
 					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"),
+					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: [
-						icons[i] ? /* @__PURE__ */ jsx("span", {
-							className: cn("[&_svg]:size-4", on ? "text-kit-fg" : "text-kit-fg-3"),
-							children: icons[i]
-						}) : null,
+						(on ? iconsOn : iconsOff)[i] ?? null,
 						/* @__PURE__ */ jsx("span", {
 							className: "text-kit-sm font-medium text-kit-fg",
 							children: o.label
@@ -228,7 +255,30 @@ function SelectControl({ field, value, onChange, readOnly, id }) {
 		}))
 	});
 }
-function MultiSelectControl({ field, value, onChange, readOnly, id }) {
+/** 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;
@@ -251,11 +301,13 @@ function MultiSelectControl({ field, value, onChange, readOnly, id }) {
 		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"),
+				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)
+					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
@@ -296,13 +348,14 @@ function MultiSelectControl({ field, value, onChange, readOnly, id }) {
 			"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: !on && full,
+					disabled: blocked,
 					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",
+					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, {
@@ -405,6 +458,6 @@ function TagsControl({ field, value, onChange, readOnly, id, onBlur }) {
 	});
 }
 //#endregion
-export { BooleanControl, MultiSelectControl, SelectControl, TagsControl };
+export { BooleanControl, MultiSelectControl, SelectControl, TagsControl, optionIcons, tagRefusal, useOwnDescription };
 
 //# sourceMappingURL=choice.js.map