@bettercms-ai/kit 0.1.1 → 1.0.0

package/controls/button.js

@@ -0,0 +1,507 @@
+import { cn } from "../lib/cn.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 * 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
+/**
+* BUTTON — label + link + look as ONE unit (V2 HEAD kit/controls/link.tsx "Button", DESIGN §8.8, CPO D43 · D45 · D46).
+*
+*  - <ButtonControl>  at rest: one FieldUnit, two rows. The label row drills into the button screen (form.navigate → the
+*                     "button" frame); the link row edits the link in place (LinkQuickEdit).
+*  - <ButtonScreen>   the one button screen (the frame body): preview · label · link (LinkForm) · appearance (style grid,
+*                     size, leading icon, arrow).
+*  - <ButtonStyleGrid>, <ButtonPreview>, <StyleGlyph> — the pieces both draw.
+*
+* Stored shape (prod `button`, adapters/values.ts buttonToProd / buttonFromProd; backend buttonValueProblem). The kit
+* value is the flattened V2 button the adapter hands in. What this control writes keeps that value's keys:
+*  - the look goes in the key the value already uses — `style` when it has one, else `variant` (what prod renderers
+*    read) — and never both (buttonToProd names an equal pair as lost, so the dock would refuse the write);
+*  - `rel: "follow"` is never written (prod's rel list is nofollow · sponsored · ugc) and `newTab: false`/`target` only
+*    where the stored value had that key (storedLink);
+*  - `icon` is a dock icon name (DOCK_ICON_NAMES): the picker offers only icons that are dock names.
+*
+* "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.
+*/
+var STYLE_ITEMS = [
+	{
+		value: "primary",
+		label: "Primary"
+	},
+	{
+		value: "secondary",
+		label: "Secondary"
+	},
+	{
+		value: "outline",
+		label: "Outline"
+	},
+	{
+		value: "link",
+		label: "Text link"
+	}
+];
+var SIZE_LABEL = {
+	sm: "Small",
+	md: "Medium",
+	lg: "Large"
+};
+var isVariant = (x) => typeof x === "string" && BUTTON_VARIANTS.includes(x);
+/** The look prod renders: the first valid of variant, style (buttonToProd's rule). */
+function lookOf(v) {
+	return [v.variant, v.style].find(isVariant);
+}
+/** "Brand" for a stored look outside the four styles; undefined when unset. */
+function lookLabel(look) {
+	if (!look) return "Default";
+	return STYLE_ITEMS.find((s) => s.value === look)?.label ?? look.charAt(0).toUpperCase() + look.slice(1);
+}
+/**
+* The next stored button: `raw` (the value as the field holds it) with `patch` applied, keyed like `raw`. A look in the
+* patch (`style`) lands in the key `raw` uses for it.
+*/
+function nextButton(raw, patch) {
+	const base = isObj(raw) ? { ...raw } : { href: "" };
+	const { style, ...rest } = patch;
+	const out = {
+		...base,
+		...rest
+	};
+	if (typeof out.href !== "string") out.href = "";
+	if (typeof out.label !== "string") out.label = "";
+	if (style !== void 0) {
+		const key = isObj(raw) && raw.style !== void 0 ? "style" : "variant";
+		delete out.style;
+		delete out.variant;
+		out[key] = style;
+	}
+	return storedLink(out, raw);
+}
+/** The icons a button can carry: the kit's drawn icons that are also dock names (the backend checks the name). */
+var BUTTON_ICONS = Object.keys(KIT_ICONS).filter((n) => DOCK_ICON_NAME_SET.has(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
+*  radiogroup: Tab enters on the checked style, arrows move and pick). A stored look outside the four is listed too. */
+function ButtonStyleGrid({ v, onPick, "aria-label": ariaLabel, size = "md" }) {
+	const cur = lookOf(v);
+	const items = cur && !STYLE_ITEMS.some((s) => s.value === cur) ? [...STYLE_ITEMS, {
+		value: cur,
+		label: lookLabel(cur)
+	}] : STYLE_ITEMS;
+	const onKey = (e, i) => {
+		const d = e.key === "ArrowRight" || e.key === "ArrowDown" ? 1 : e.key === "ArrowLeft" || e.key === "ArrowUp" ? -1 : 0;
+		if (!d) return;
+		e.preventDefault();
+		const next = items[(i + d + items.length) % items.length];
+		onPick(next.value);
+		const group = e.currentTarget.parentElement;
+		requestAnimationFrame(() => group?.querySelector(`[data-style="${next.value}"]`)?.focus());
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: "grid grid-cols-2 gap-1.5",
+		role: "radiogroup",
+		"aria-label": ariaLabel,
+		children: items.map((s, i) => {
+			const on = cur === s.value;
+			return /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				role: "radio",
+				"data-style": s.value,
+				"aria-checked": on,
+				tabIndex: on || !items.some((x) => x.value === cur) && i === 0 ? 0 : -1,
+				onKeyDown: (e) => onKey(e, i),
+				onClick: () => onPick(s.value),
+				className: cn("flex min-w-0 items-center gap-2 rounded-kit-md border px-2 transition-colors", size === "sm" ? "h-8 text-kit-xs" : "h-9 text-kit-sm", 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"),
+				children: [/* @__PURE__ */ jsx(ButtonPreview, {
+					v: {
+						...v,
+						style: s.value,
+						variant: void 0,
+						label: "Aa",
+						icon: void 0,
+						arrow: false
+					},
+					small: true
+				}), /* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: s.label
+				})]
+			}, s.value);
+		})
+	});
+}
+/**
+* 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.
+*/
+function ButtonPreview({ v, className, small, site }) {
+	const style = lookOf(v) ?? "primary";
+	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),
+		children: [
+			v.icon ? /* @__PURE__ */ jsx(KitIcon, {
+				name: v.icon,
+				className: "size-3.5 shrink-0"
+			}) : null,
+			/* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: v.label || "Button"
+			}),
+			v.arrow ? /* @__PURE__ */ jsx(IconArrowRight, {
+				className: "size-3.5 shrink-0",
+				stroke: 1.75
+			}) : null
+		]
+	});
+}
+/** 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", {
+		"aria-hidden": true,
+		className: cn("flex size-4 shrink-0 items-center justify-center", 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. */
+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;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2",
+		children: [
+			/* @__PURE__ */ jsx(Input, {
+				size: "sm",
+				"aria-label": "Search icons",
+				leading: /* @__PURE__ */ jsx(IconSearch, { stroke: 1.5 }),
+				value: q,
+				onChange: (e) => setQ(e.target.value),
+				placeholder: "Search icons",
+				autoFocus: true
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				role: "radiogroup",
+				"aria-label": "Leading icon",
+				className: "grid max-h-56 grid-cols-8 gap-1 overflow-y-auto overscroll-contain",
+				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)]" })
+				}), 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"),
+					children: /* @__PURE__ */ jsx(KitIcon, {
+						name: n,
+						className: "size-4"
+					})
+				}, n))]
+			}),
+			shown.length === 0 ? /* @__PURE__ */ jsxs("p", {
+				className: "px-1 text-kit-xs text-kit-fg-3",
+				children: [
+					"No icon matches “",
+					q.trim(),
+					"”."
+				]
+			}) : null
+		]
+	});
+}
+/** The ONE button screen: preview · label · link (+ new tab, rel) · appearance (style, size, icon, arrow). */
+function ButtonScreen({ value, onChange, readOnly, title = "Button" }) {
+	const v = normLink(value);
+	const set = (p) => onChange(nextButton(value, p));
+	const [iconOpen, setIconOpen] = React.useState(false);
+	const labelId = React.useId();
+	const arrowId = React.useId();
+	const fullId = React.useId();
+	return /* @__PURE__ */ jsxs("fieldset", {
+		disabled: readOnly,
+		className: "flex min-w-0 flex-col gap-5",
+		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
+				})
+			}),
+			/* @__PURE__ */ jsx(Row, {
+				label: "Label",
+				htmlFor: labelId,
+				children: /* @__PURE__ */ jsx(Input, {
+					id: labelId,
+					value: v.label ?? "",
+					onChange: (e) => set({ label: e.target.value }),
+					placeholder: "Shop now"
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1.5",
+				role: "group",
+				"aria-label": `${title} link`,
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-kit-sm font-medium text-kit-fg-2",
+					children: "Link"
+				}), /* @__PURE__ */ jsx(LinkForm, {
+					readOnly,
+					value: v,
+					onChange: (n) => {
+						const out = finalizeLink(n);
+						if (out) set(linkPart(out));
+					}
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-4 border-t border-kit-line pt-4",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "text-kit-xs font-medium text-kit-fg-3",
+						children: "Appearance"
+					}),
+					/* @__PURE__ */ jsx(Row, {
+						label: "Style",
+						children: /* @__PURE__ */ jsx(ButtonStyleGrid, {
+							v,
+							"aria-label": `${title} style`,
+							onPick: (style) => set({ style })
+						})
+					}),
+					/* @__PURE__ */ jsx(Row, {
+						label: "Size",
+						children: /* @__PURE__ */ jsx(Segmented, {
+							"aria-label": `${title} size`,
+							value: v.size ?? "md",
+							onChange: (s) => set({ size: s }),
+							items: [
+								{
+									value: "sm",
+									label: "Small"
+								},
+								{
+									value: "md",
+									label: "Medium"
+								},
+								{
+									value: "lg",
+									label: "Large"
+								}
+							],
+							className: "w-full [&>button]:flex-1"
+						})
+					}),
+					/* @__PURE__ */ jsx(Row, {
+						label: "Leading icon",
+						children: /* @__PURE__ */ jsxs(Popover, {
+							open: iconOpen,
+							onOpenChange: setIconOpen,
+							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"
+								}),
+								children: [
+									v.icon ? /* @__PURE__ */ jsx(KitIcon, {
+										name: v.icon,
+										className: "size-4 text-kit-fg-2"
+									}) : /* @__PURE__ */ jsx("span", { className: "size-4 rounded-kit-md border border-dashed border-[var(--kit-emphasis-line)]" }),
+									/* @__PURE__ */ jsx("span", {
+										className: cn("flex-1 truncate", !v.icon && "text-kit-fg-3"),
+										children: v.icon ? iconLabel(v.icon) : "No icon"
+									}),
+									/* @__PURE__ */ jsx(IconChevronDown, {
+										className: "size-3.5 text-kit-fg-3",
+										stroke: 1.5
+									})
+								]
+							}), /* @__PURE__ */ jsx(PopoverContent, {
+								className: "w-[300px] p-2",
+								children: /* @__PURE__ */ jsx(ButtonIconPicker, {
+									value: v.icon,
+									onPick: (k) => {
+										set({ icon: k });
+										setIconOpen(false);
+									}
+								})
+							})]
+						})
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-2",
+						children: [/* @__PURE__ */ jsxs("label", {
+							htmlFor: arrowId,
+							className: "flex min-h-7 cursor-pointer items-center justify-between gap-3",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "text-kit-sm text-kit-fg-2",
+								children: "Show arrow"
+							}), /* @__PURE__ */ jsx(Switch, {
+								disabled: readOnly,
+								id: arrowId,
+								size: "sm",
+								checked: !!v.arrow,
+								onCheckedChange: (c) => set({ arrow: c ? true : isObj(value) && "arrow" in value ? false : void 0 })
+							})]
+						}), /* @__PURE__ */ jsxs("label", {
+							htmlFor: fullId,
+							className: "flex min-h-7 cursor-pointer items-center justify-between gap-3",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "text-kit-sm text-kit-fg-2",
+								children: "Full width"
+							}), /* @__PURE__ */ jsx(Switch, {
+								disabled: readOnly,
+								id: fullId,
+								size: "sm",
+								checked: v.fullWidth === true,
+								onCheckedChange: (c) => set({ fullWidth: c ? true : isObj(value) && "fullWidth" in value ? false : void 0 })
+							})]
+						})]
+					})
+				]
+			})
+		]
+	});
+}
+/** The link half of a link value (what LinkForm / the quick edit own); the label and the look stay the button's. */
+function linkPart(n) {
+	const { label: _l, style: _s, variant: _v, size: _z, arrow: _a, icon: _i, fullWidth: _f, ...link } = n;
+	return {
+		...TARGET_KEYS,
+		email: void 0,
+		phone: void 0,
+		subject: void 0,
+		...link
+	};
+}
+function Row({ label, children, htmlFor }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1.5",
+		children: [/* @__PURE__ */ jsx("label", {
+			htmlFor,
+			className: "text-kit-sm font-medium text-kit-fg-2",
+			children: label
+		}), children]
+	});
+}
+/**
+* Button field at rest: ONE unit between two hairlines (fieldset-like).
+*   [style glyph] Label ……………… Primary · Medium  ›   → drills into the button screen ("… › Button")
+*   [page icon]   Title  /path                         → edits the link in place
+*/
+function ButtonControl({ value, onChange, readOnly, id, path, field }) {
+	const v = normLink(value);
+	const form = useForm();
+	const { variant } = useKitEnv();
+	const [open, setOpen] = React.useState(false);
+	const [editingLink, setEditingLink] = React.useState(false);
+	const { targets } = useLinkTargets();
+	const target = findTarget(targets, v);
+	const linkBtn = React.useRef(null);
+	const look = lookOf(v);
+	const openSettings = () => form ? form.navigate(path) : setOpen(true);
+	const h = variant === "document" ? "h-10" : "h-9";
+	const head = /* @__PURE__ */ jsxs("button", {
+		id,
+		type: "button",
+		onClick: readOnly && !form ? void 0 : openSettings,
+		"aria-label": `${field.title}: ${v.label || "no label"}. Open button settings`,
+		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),
+		children: [
+			/* @__PURE__ */ jsx(StyleGlyph, { style: look }),
+			/* @__PURE__ */ jsx("span", {
+				className: cn("min-w-0 flex-1 truncate text-kit-sm font-medium", v.label ? "text-kit-fg" : "text-kit-fg-3"),
+				children: v.label || "Add a label"
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "shrink-0 text-kit-xs text-kit-fg-3",
+				children: [lookLabel(look), v.size && v.size !== "md" ? ` · ${SIZE_LABEL[v.size]}` : ""]
+			}),
+			/* @__PURE__ */ jsx(IconChevronRight, {
+				className: "size-4 shrink-0 text-kit-fg-3 transition-transform group-hover/bhead:translate-x-0.5",
+				stroke: 1.5,
+				"aria-hidden": true
+			})
+		]
+	});
+	const linkRow = editingLink && !readOnly ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(LinkQuickEdit, {
+		value: v,
+		ariaLabel: `${field.title} link`,
+		size: "sm",
+		bare: true,
+		onCommit: (n) => onChange(nextButton(value, n ? linkPart(n) : {
+			...linkPart({ href: "" }),
+			type: "page",
+			href: ""
+		})),
+		onDone: () => {
+			setEditingLink(false);
+			requestAnimationFrame(() => linkBtn.current?.focus({ preventScroll: true }));
+		}
+	}) }) : /* @__PURE__ */ jsx("button", {
+		ref: linkBtn,
+		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()}`,
+		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,
+			target
+		})
+	});
+	const unit = /* @__PURE__ */ jsxs(FieldUnit, {
+		"data-button-unit": "",
+		"aria-label": field.title,
+		className: "overflow-hidden",
+		children: [head, linkRow]
+	});
+	if (form) return unit;
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(PopoverAnchor, { render: unit }), /* @__PURE__ */ jsx(PopoverContent, {
+			className: "w-[360px] p-4",
+			align: "start",
+			children: /* @__PURE__ */ jsx(ButtonScreen, {
+				value,
+				onChange,
+				readOnly,
+				title: field.title
+			})
+		})]
+	});
+}
+//#endregion
+export { ButtonControl, ButtonScreen };
+
+//# sourceMappingURL=button.js.map

package/controls/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","names":[],"sources":["../../src/kit/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 * 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\n * screen's preview reads the site palette from --kit-preview-paper / -ink / -primary / -primary-on / -line / -filter\n * when the host sets them (the Kit library sets V2's demo-site palette) and otherwise draws in neutral kit ink (the\n * 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.\n */\nimport * as React from \"react\";\nimport { IconArrowRight, IconChevronDown, IconChevronRight, IconSearch } 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, describeLink, finalizeLink, findTarget, hasLink, 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 />\n            <span className=\"truncate\">{s.label}</span>\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n\n/**\n * The button as a shape: filled · soft · outlined · underlined. In kit ink by default; `site` draws it in the host's\n * site palette (--kit-preview-*), falling back to kit ink for each token the host leaves unset.\n */\nexport function ButtonPreview({ v, className, small, site }: { v: LinkValue; className?: string; small?: boolean; site?: boolean }) {\n  const style = lookOf(v) ?? \"primary\";\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        site ? siteLook(style) : style === \"link\"\n          ? \"h-auto px-0 text-kit-fg underline underline-offset-4\"\n          : style === \"outline\"\n            ? \"border border-kit-line-strong text-kit-fg\"\n            : style === \"primary\" || style === \"brand\"\n              ? \"bg-[color:var(--kit-preview-primary,var(--kit-inverse))] text-[color:var(--kit-preview-primary-on,var(--kit-fg-inverse))]\"\n              : style === \"dark\"\n                ? \"bg-kit-inverse text-kit-fg-inverse\"\n                : \"bg-kit-muted text-kit-fg\",\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/** V2's site preview: primary in the brand colour, secondary / dark as ink on paper, outline as an ink hairline. */\nfunction siteLook(style: string): string {\n  if (style === \"link\") return \"h-auto px-0 text-[color:var(--kit-preview-primary,var(--kit-fg))] underline underline-offset-4\";\n  if (style === \"outline\") return \"border border-[color:var(--kit-preview-line,var(--kit-line-strong))] text-[color:var(--kit-preview-ink,var(--kit-fg))]\";\n  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))]\";\n  if (style === \"dark\") return \"bg-[color:var(--kit-preview-ink,var(--kit-inverse))] text-[color:var(--kit-preview-paper,var(--kit-fg-inverse))]\";\n  return \"bg-[color:var(--kit-preview-ink,var(--kit-muted))] text-[color:var(--kit-preview-paper,var(--kit-fg))]\";\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: search + grid over BUTTON_ICONS, \"No icon\" first. */\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  return (\n    <div className=\"flex flex-col gap-2\">\n      <Input size=\"sm\" aria-label=\"Search icons\" leading={<IconSearch stroke={1.5} />} value={q} onChange={(e) => setQ(e.target.value)} placeholder=\"Search icons\" autoFocus />\n      <div role=\"radiogroup\" aria-label=\"Leading icon\" className=\"grid max-h-56 grid-cols-8 gap-1 overflow-y-auto overscroll-contain\">\n        {query ? null : (\n          <button\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={!value}\n            aria-label=\"No icon\"\n            onClick={() => onPick(undefined)}\n            className={cn(\"flex size-8 items-center justify-center rounded-kit-md text-kit-fg-3 hover:bg-kit-hover\", !value && \"bg-kit-selected\")}\n          >\n            <span className=\"size-4 rounded-kit-md border border-dashed border-[var(--kit-emphasis-line)]\" />\n          </button>\n        )}\n        {shown.map((n) => (\n          <button\n            key={n}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={value === n}\n            aria-label={iconLabel(n)}\n            onClick={() => onPick(n)}\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\")}\n          >\n            <KitIcon name={n} className=\"size-4\" />\n          </button>\n        ))}\n      </div>\n      {shown.length === 0 ? <p className=\"px-1 text-kit-xs text-kit-fg-3\">No icon matches “{q.trim()}”.</p> : null}\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-[color:var(--kit-preview-paper,var(--kit-subtle))] px-4 py-5 [filter:var(--kit-preview-filter,none)]\">\n        <ButtonPreview v={v} site />\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 shadow-kit-field hover:border-kit-field-border-hover data-[popup-open]:border-kit-field-border-focus\"\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        aria-label={hasLink(v) ? `${field.title} link: ${describeLink(v, target).primary}. 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"],"mappings":"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"}

package/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/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/kit/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/controls/c1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"c1.js","names":[],"sources":["../../src/kit/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;CACR;AACD,IAAa,aAAuE,EAAE,MAAM,cAAc;AAE1G,SAAgB,qBAAqB;AACnC,QAAO,OAAO,UAAU,YAAY;AACpC,QAAO,OAAO,SAAS,WAAW"}

package/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/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/kit/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