@bettercms-ai/kit 0.1.1 → 2.0.0-next.0

package/dist/controls/button.js

@@ -0,0 +1,578 @@
+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 { Segmented, Switch } from "../ui/controls.js";
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../ui/overlay.js";
+import { FieldUnit } from "../engine/grouping.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 { jsx, jsxs } from "react/jsx-runtime";
+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).
+*
+*  - <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`).
+*
+* 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 = [
+	{
+		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,
+					chrome: true
+				}), /* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: s.label
+				})]
+			}, s.value);
+		})
+	});
+}
+/**
+* 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, 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", 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,
+				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
+		]
+	});
+}
+/** 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 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__ */ 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",
+				"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 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: 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: tile(value === n),
+					children: /* @__PURE__ */ jsx(KitIcon, {
+						name: n,
+						className: "size-[18px]"
+					})
+				}, n))]
+			}), shown.length === 0 ? /* @__PURE__ */ jsxs("p", {
+				className: "py-6 text-center text-kit-sm text-kit-fg-3",
+				children: [
+					"No icons match “",
+					q,
+					"”"
+				]
+			}) : 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-kit-preview-paper px-4 py-5 [filter:var(--kit-paper-filter)]",
+				children: /* @__PURE__ */ jsx(ButtonPreview, { v })
+			}),
+			/* @__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 hover:border-kit-field-border-hover"
+								}),
+								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: ${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,
+			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
+			})
+		})]
+	});
+}
+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 { 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":"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"}