@bettercms-ai/kit 1.0.0 → 2.0.0

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

@@ -5,9 +5,9 @@ import { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger, Popover, Popov
 import { Avatar } from "../ui/display.js";
 import { useDragReorder } from "../engine/item-list.js";
 import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { IconArrowUpRight, IconCheck, IconChevronDown, IconDatabase, IconDots, IconFileDatabase, IconFileText, IconForms, IconPlus, IconReplace, IconSearch, IconShoppingBag, IconTrash, IconX } from "@tabler/icons-react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/kit/controls/reference.tsx
+//#region src/controls/reference.tsx
 /**
 * REFERENCE — single: a select-like trigger ("Select a CMS item") → a 300px search popover with "None", result rows,
 * drafts labelled, and "Create new" inline when the host can create. Never lists the document being edited. No one-click
@@ -23,7 +23,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * multi list one compact "n missing" chip with Remove (DESIGN 9.6's production rule), instead of disappearing; chips sort with the engine's `useDragReorder`
 * (@dnd-kit is not on the kit allow-list).
 */
-var NON_ENTRY = new Set([
+var NON_ENTRY = /* @__PURE__ */ new Set([
 	"page",
 	"form",
 	"collection",
@@ -51,12 +51,21 @@ var KIND_ICON = {
 	shopify: IconShoppingBag
 };
 function RefThumb({ o, size = 28 }) {
-	if (o?.photo) return /* @__PURE__ */ jsx(Avatar, {
+	if (o?.avatar || o?.photo) return /* @__PURE__ */ jsx(Avatar, {
 		name: o.title,
-		src: o.photo,
+		src: o.photo ?? void 0,
 		size,
 		decorative: true
 	});
+	if (o?.cover) return /* @__PURE__ */ jsx("img", {
+		src: o.cover,
+		alt: "",
+		style: {
+			width: size,
+			height: size
+		},
+		className: "shrink-0 rounded-kit-md border border-kit-line object-cover"
+	});
 	const Icon = o ? KIND_ICON[o.kind] : IconFileDatabase;
 	return /* @__PURE__ */ jsx("span", {
 		"aria-hidden": true,
@@ -108,7 +117,7 @@ function useReferenceRecords(ids, to) {
 				...k,
 				...Object.fromEntries(rows.map((r) => [r.id, r]))
 			}));
-			setMissing((m) => new Set([...m, ...asked.filter((x) => !found.has(x))]));
+			setMissing((m) => /* @__PURE__ */ new Set([...m, ...asked.filter((x) => !found.has(x))]));
 			setError(null);
 		}).catch((e) => alive.current && setError(`The saved ${plural(referenceNoun(to))} could not be read: ${reasonOf(e)}`)).finally(() => {
 			for (const x of asked) inflight.current.delete(x);
@@ -261,31 +270,35 @@ function PickerBody({ to, filter, selected, multi, max, noun, onPick, onNone, ca
 				"aria-multiselectable": multi || void 0,
 				"aria-busy": loading || void 0,
 				children: [
-					none ? /* @__PURE__ */ jsx("div", {
+					none ? /* @__PURE__ */ jsx("button", {
+						type: "button",
 						id: optionId(0),
 						role: "option",
 						"aria-selected": false,
+						tabIndex: -1,
 						onMouseEnter: () => setActive(0),
 						onMouseDown: (e) => e.preventDefault(),
 						onClick: onNone,
-						className: cn("flex h-8 w-full cursor-pointer items-center gap-2 rounded-kit-md px-2 text-left text-kit-sm text-kit-fg-3", active === 0 && "bg-kit-hover"),
+						className: cn("flex h-8 w-full items-center gap-2 rounded-kit-md px-2 text-left text-kit-sm text-kit-fg-3 hover:bg-kit-hover", active === 0 && "bg-kit-hover"),
 						children: "None"
 					}) : null,
 					rows.map((o, j) => {
 						const i = j + (none ? 1 : 0);
 						const on = selected.includes(o.id);
-						return /* @__PURE__ */ jsxs("div", {
+						return /* @__PURE__ */ jsxs("button", {
+							type: "button",
 							id: optionId(i),
 							role: "option",
 							"aria-selected": on,
+							tabIndex: -1,
 							onMouseEnter: () => setActive(i),
 							onMouseDown: (e) => e.preventDefault(),
 							onClick: () => onPick(o),
-							className: cn("flex w-full cursor-pointer items-center gap-2.5 rounded-kit-md p-1.5 text-left", i === active && "bg-kit-hover"),
+							className: cn("flex w-full items-center gap-2.5 rounded-kit-md p-1.5 text-left", i === active && "bg-kit-hover"),
 							children: [
 								multi ? /* @__PURE__ */ jsx("span", {
 									"aria-hidden": true,
-									className: cn("flex size-4 shrink-0 items-center justify-center rounded-kit-sm border", on ? "border-kit-accent bg-kit-accent text-kit-accent-on" : "border-kit-line-strong", !on && full && "opacity-40"),
+									className: cn("flex size-4 shrink-0 items-center justify-center rounded-kit-md border", on ? "border-kit-accent bg-kit-accent text-kit-accent-on" : "border-kit-line-strong", !on && full && "opacity-40"),
 									children: on ? /* @__PURE__ */ jsx(IconCheck, {
 										className: "size-3",
 										stroke: 3
@@ -354,37 +367,34 @@ function PickerBody({ to, filter, selected, multi, max, noun, onPick, onNone, ca
 			}) : null,
 			canCreate ? /* @__PURE__ */ jsx("div", {
 				className: "border-t border-kit-line p-1.5",
-				children: creating ? /* @__PURE__ */ jsxs("form", {
-					className: "flex flex-col gap-1.5",
+				children: creating ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("form", {
+					className: "flex items-center gap-1.5",
 					onSubmit: (e) => {
 						e.preventDefault();
 						e.stopPropagation();
 						const t = String(new FormData(e.currentTarget).get("t") ?? "").trim();
 						if (t) create(t);
 					},
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-1.5",
-						children: [/* @__PURE__ */ jsx("input", {
-							name: "t",
-							autoFocus: true,
-							defaultValue: q,
-							"aria-label": `New ${noun} name`,
-							placeholder: `New ${noun} name`,
-							className: "h-8 min-w-0 flex-1 rounded-kit-md border border-kit-field-border bg-kit-field-bg px-2 text-kit-sm text-kit-fg outline-none hover:border-kit-field-border-hover focus:border-kit-field-border-focus"
-						}), /* @__PURE__ */ jsx(Button, {
-							size: "sm",
-							type: "submit",
-							variant: "primary",
-							loading: createBusy,
-							disabled: createBusy,
-							children: "Create"
-						})]
-					}), createError ? /* @__PURE__ */ jsx("p", {
-						role: "alert",
-						className: "px-1 text-kit-xs text-kit-danger-fg",
-						children: createError
-					}) : null]
-				}) : /* @__PURE__ */ jsxs("button", {
+					children: [/* @__PURE__ */ jsx("input", {
+						name: "t",
+						autoFocus: true,
+						defaultValue: q,
+						"aria-label": `New ${noun} name`,
+						placeholder: `New ${noun} name`,
+						className: "h-8 min-w-0 flex-1 rounded-kit-md border border-kit-line-strong bg-kit-field-bg px-2 text-kit-sm text-kit-fg outline-none focus:bg-kit-field-bg focus:ring-1 focus:ring-kit-line-strong"
+					}), /* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						type: "submit",
+						variant: "primary",
+						loading: createBusy,
+						disabled: createBusy,
+						children: "Create"
+					})]
+				}), createError ? /* @__PURE__ */ jsx("p", {
+					role: "alert",
+					className: "mt-1.5 px-1 text-kit-xs text-kit-danger-fg",
+					children: createError
+				}) : null] }) : /* @__PURE__ */ jsxs("button", {
 					type: "button",
 					onClick: () => setCreating(true),
 					className: "flex h-8 w-full items-center gap-2 rounded-kit-md px-2 text-left text-kit-sm text-kit-fg-2 hover:bg-kit-hover hover:text-kit-fg",
@@ -479,12 +489,12 @@ function ReferenceControl({ field, value, onChange, readOnly, id }) {
 			onOpenChange: setOpen,
 			children: [/* @__PURE__ */ jsxs("div", {
 				"data-slot": "kit-reference-card",
-				className: "flex items-center gap-2.5 rounded-kit-lg border border-kit-line bg-kit-control-bg p-1.5 pr-1 transition-colors hover:border-kit-line-strong",
+				className: "group/ref flex items-center gap-2.5 rounded-kit-lg border border-kit-line bg-kit-control-bg p-1.5 pr-1 transition-colors hover:border-kit-line-strong",
 				children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
 					id,
 					disabled: !editable,
 					"aria-label": `${field.title}: ${title}.${editable ? " Change" : ""}`,
-					className: "flex min-w-0 flex-1 items-center gap-2.5 rounded-kit-md text-left outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-kit-focus-ring focus-visible:[outline-style:solid] disabled:cursor-default [html[data-input-modality=pointer]_&]:focus-visible:outline-none",
+					className: "flex min-w-0 flex-1 items-center gap-2.5 text-left",
 					children: [
 						/* @__PURE__ */ jsx(RefThumb, {
 							o: o ?? null,
@@ -549,10 +559,10 @@ function ReferenceControl({ field, value, onChange, readOnly, id }) {
 			"data-slot": missing ? "kit-reference-card" : void 0,
 			"data-missing": missing || void 0,
 			"aria-label": missing ? `${field.title}: Missing ${noun}.${editable ? " Change" : ""}` : `${field.title}: select ${withArticle(noun)}`,
-			className: cn("flex h-8 w-full items-center gap-2 rounded-kit-md border bg-kit-field-bg px-2.5 text-left text-kit-sm transition-colors hover:border-kit-field-border-hover disabled:cursor-not-allowed disabled:opacity-60 data-[popup-open]:border-kit-field-border-focus", missing ? "border-kit-warning-line text-kit-warning-fg" : "border-kit-field-border text-kit-fg-3"),
+			className: cn("flex h-8 w-full items-center gap-2 rounded-kit-md border border-kit-line-strong bg-kit-field-bg px-2.5 text-left text-kit-sm text-kit-fg-3 transition-colors hover:border-kit-line-strong data-[popup-open]:border-kit-line-strong data-[popup-open]:bg-kit-field-bg", missing && "border-kit-warning-line text-kit-warning-fg hover:border-kit-warning-line data-[popup-open]:border-kit-warning-line"),
 			children: [
 				/* @__PURE__ */ jsx(IconFileDatabase, {
-					className: "size-4 shrink-0",
+					className: "size-4",
 					stroke: 1.5,
 					"aria-hidden": true
 				}),
@@ -571,7 +581,7 @@ function ReferenceControl({ field, value, onChange, readOnly, id }) {
 					children: ["Select ", withArticle(noun)]
 				}),
 				/* @__PURE__ */ jsx(IconChevronDown, {
-					className: "size-3.5 shrink-0",
+					className: "size-3.5",
 					stroke: 1.5,
 					"aria-hidden": true
 				})
@@ -581,44 +591,51 @@ function ReferenceControl({ field, value, onChange, readOnly, id }) {
 }
 function RefChip({ id, o, canLookup, readOnly, sort, onRemove }) {
 	const handle = sort.handle(id);
+	const register = sort.register(id);
 	const title = o?.title ?? (canLookup ? "Loading…" : id);
 	return /* @__PURE__ */ jsxs("span", {
-		ref: sort.register(id),
+		...readOnly ? {} : handle,
+		ref: (el) => {
+			register(el);
+			if (!readOnly) handle.ref(el);
+		},
 		style: sort.style(id),
-		className: cn("inline-flex h-6 max-w-full items-center gap-1.5 rounded-kit-md border border-kit-line bg-kit-control-bg pl-0.5 pr-1 text-kit-sm text-kit-fg shadow-kit-xs", sort.active === id && "z-10 shadow-kit-md"),
-		children: [/* @__PURE__ */ jsxs("span", {
-			...readOnly ? {} : handle,
-			tabIndex: 0,
-			"aria-label": readOnly ? title : `${title}, drag to reorder`,
-			onKeyDown: (e) => {
-				if (readOnly) return;
-				if (e.key === "Delete" || e.key === "Backspace") {
-					e.preventDefault();
-					onRemove();
-					return;
-				}
-				handle.onKeyDown(e);
-			},
-			className: cn("inline-flex min-w-0 touch-none items-center gap-1.5 rounded-kit-sm outline-none focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-kit-focus-ring focus-visible:[outline-style:solid] [html[data-input-modality=pointer]_&]:focus-visible:outline-none", !readOnly && "cursor-grab active:cursor-grabbing"),
-			children: [/* @__PURE__ */ jsx(RefThumb, {
+		tabIndex: 0,
+		role: "group",
+		"aria-roledescription": "sortable item",
+		"aria-label": readOnly ? title : `${title}, drag to reorder`,
+		onKeyDown: (e) => {
+			if (readOnly || e.target !== e.currentTarget) return;
+			if (e.key === "Delete" || e.key === "Backspace") {
+				e.preventDefault();
+				onRemove();
+				return;
+			}
+			handle.onKeyDown(e);
+		},
+		className: cn("inline-flex h-6 max-w-full cursor-grab touch-none items-center gap-1.5 rounded-kit-md border border-kit-line bg-kit-control-bg pl-0.5 pr-1 text-kit-sm text-kit-fg shadow-kit-xs active:cursor-grabbing", sort.active === id && "z-10 shadow-kit-md"),
+		children: [
+			/* @__PURE__ */ jsx(RefThumb, {
 				o: o ?? null,
 				size: 20
-			}), /* @__PURE__ */ jsx("span", {
+			}),
+			/* @__PURE__ */ jsx("span", {
 				className: "truncate",
 				children: title
-			})]
-		}), readOnly ? null : /* @__PURE__ */ jsx("button", {
-			type: "button",
-			"aria-label": `Remove ${title}`,
-			onPointerDown: (e) => e.stopPropagation(),
-			onClick: onRemove,
-			className: "flex rounded-kit-sm p-0.5 text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg",
-			children: /* @__PURE__ */ jsx(IconX, {
-				className: "size-3",
-				stroke: 1.5,
-				"aria-hidden": true
+			}),
+			readOnly ? null : /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": `Remove ${title}`,
+				onPointerDown: (e) => e.stopPropagation(),
+				onClick: onRemove,
+				className: "flex rounded-kit-md p-0.5 text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg",
+				children: /* @__PURE__ */ jsx(IconX, {
+					className: "size-3",
+					stroke: 1.5,
+					"aria-hidden": true
+				})
 			})
-		})]
+		]
 	});
 }
 /** Multi-reference: an array of reference ids. `field` is the ARRAY field; the engine hands it the item's `reference`. */
@@ -656,9 +673,9 @@ function ReferencesControl({ field, value, onChange, readOnly, id }) {
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				id: readOnly ? id : void 0,
-				role: "group",
-				"aria-label": field.title,
-				className: "flex min-h-8 flex-wrap items-center gap-1 rounded-kit-md border border-kit-field-border bg-kit-field-bg p-1 transition-colors hover:border-kit-field-border-hover",
+				role: readOnly ? "group" : void 0,
+				"aria-label": readOnly ? field.title : void 0,
+				className: "flex min-h-8 flex-wrap items-center gap-1 rounded-kit-md border border-kit-line-strong bg-kit-field-bg p-1 transition-colors hover:border-kit-line-strong",
 				children: [
 					shown.map((x) => /* @__PURE__ */ jsx(RefChip, {
 						id: x,
@@ -671,7 +688,6 @@ function ReferencesControl({ field, value, onChange, readOnly, id }) {
 					sort.a11y,
 					!readOnly ? /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
 						id,
-						"aria-label": `Add to ${field.title}`,
 						className: "inline-flex h-6 items-center gap-1 rounded-kit-md px-1.5 text-kit-sm text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg",
 						children: [/* @__PURE__ */ jsx(IconPlus, {
 							className: "size-3.5",
@@ -745,7 +761,7 @@ function ReferencesControl({ field, value, onChange, readOnly, id }) {
 				children: rec.error
 			}) : null,
 			max != null ? /* @__PURE__ */ jsxs("span", {
-				className: "self-end tabular-nums text-kit-xs text-kit-fg-3",
+				className: "tabular-nums self-end text-kit-xs text-kit-fg-3",
 				children: [
 					ids.length,
 					" / ",
@@ -756,6 +772,6 @@ function ReferencesControl({ field, value, onChange, readOnly, id }) {
 	});
 }
 //#endregion
-export { ReferenceControl, ReferencesControl };
+export { RefThumb, ReferenceControl, ReferencesControl, referenceNoun, useReferenceRecords };
 
 //# sourceMappingURL=reference.js.map

package/dist/controls/reference.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reference.js","names":[],"sources":["../../src/controls/reference.tsx"],"sourcesContent":["/**\n * REFERENCE — single: a select-like trigger (\"Select a CMS item\") → a 300px search popover with \"None\", result rows,\n * drafts labelled, and \"Create new\" inline when the host can create. Never lists the document being edited. No one-click\n * clear (⋯ → Remove). MULTI-REFERENCE — reorderable chips + \"+ Add\", \"n / max\"; at the limit the picker swaps in place.\n * (V2 HEAD 9829bf1 kit/controls/reference.tsx, DESIGN.md 6.8, 8.16, 9.6.)\n *\n * The rows come from the host (reference-services.ts): `searchReferences` is POST /content/reference-options, which\n * already applies the field's `reference.filter` and scope; `truncated` says its filter scan stopped early, and the\n * picker says so. The stored value is the target id (\"en_12\"; a list for many), exactly V2's shape.\n *\n * Kit deviations from V2: no seed rows (every row is a real record from the service); matching is the server's title /\n * slug search, so rows keep the server's order; a stored id the lookup cannot find shows as a \"Missing\" card, or in a\n * multi list one compact \"n missing\" chip with Remove (DESIGN 9.6's production rule), instead of disappearing; chips sort with the engine's `useDragReorder`\n * (@dnd-kit is not on the kit allow-list).\n */\nimport * as React from \"react\";\nimport { IconArrowUpRight, IconCheck, IconChevronDown, IconDatabase, IconDots, IconFileDatabase, IconFileText, IconForms, IconPlus, IconReplace, IconSearch, IconShoppingBag, IconTrash, IconX } from \"@tabler/icons-react\";\nimport type { KitReferenceKind, KitReferenceOption } from \"./reference-services\";\nimport { Button } from \"../ui/button\";\nimport { Avatar } from \"../ui/display\";\nimport { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger, Popover, PopoverContent, PopoverTrigger } from \"../ui/overlay\";\nimport { cn } from \"../lib/cn\";\nimport { useDragReorder } from \"../engine/item-list\";\nimport { useKitEnv, useKitServices } from \"../context\";\nimport type { ControlProps } from \"../types\";\n\nconst NON_ENTRY = new Set([\"page\", \"form\", \"collection\", \"shopify\"]);\nconst isEntryTarget = (t: string) => !NON_ENTRY.has(t);\nconst targetsOf = (field: ControlProps[\"field\"]) => field.reference?.to ?? [];\n\n/** The noun the picker uses (D48: \"CMS item\" where V2 says \"entry\"). */\nexport function referenceNoun(to: string[]): string {\n  if (to.length === 1) return to[0] === \"page\" ? \"page\" : to[0] === \"form\" ? \"form\" : to[0] === \"collection\" ? \"collection\" : to[0] === \"shopify\" ? \"product\" : \"CMS item\";\n  return to.length && to.every(isEntryTarget) ? \"CMS item\" : \"item\";\n}\nconst plural = (noun: string) => (noun === \"CMS item\" ? \"CMS items\" : `${noun}s`);\nconst withArticle = (noun: string) => `${/^[aeiou]/i.test(noun) ? \"an\" : \"a\"} ${noun}`;\nconst reasonOf = (e: unknown) => (e instanceof Error ? e.message : String(e));\nconst PAGE = 25;\n/** V2 (Radix) slides a picker that would overflow along the edge, keeping it over the panel; Base UI would flip it to\n *  end-aligned, which hangs it left over the preview */\nconst SHIFT = { align: \"shift\" } as const;\n\nconst KIND_ICON: Record<KitReferenceKind, React.ComponentType<{ className?: string; stroke?: number }>> = {\n  entry: IconFileDatabase,\n  page: IconFileText,\n  form: IconForms,\n  collection: IconDatabase,\n  shopify: IconShoppingBag,\n};\n\nexport function RefThumb({ o, size = 28 }: { o: Pick<KitReferenceOption, \"kind\" | \"title\" | \"photo\" | \"avatar\" | \"cover\"> | null; size?: number }) {\n  // V2 reference.tsx:152-156: a person is their round avatar (initials without a photo), a record with a cover its image\n  if (o?.avatar || o?.photo) return <Avatar name={o.title} src={o.photo ?? undefined} size={size} decorative />;\n  if (o?.cover) return <img src={o.cover} alt=\"\" style={{ width: size, height: size }} className=\"shrink-0 rounded-kit-md border border-kit-line object-cover\" />;\n  const Icon = o ? KIND_ICON[o.kind] : IconFileDatabase;\n  return (\n    <span aria-hidden style={{ width: size, height: size }} className=\"flex shrink-0 items-center justify-center rounded-kit-md border border-kit-line bg-kit-subtle text-kit-fg-3\">\n      <Icon className={size > 24 ? \"size-4\" : \"size-3.5\"} stroke={1.5} />\n    </span>\n  );\n}\n\nfunction DraftChip({ status }: { status?: string | null }) {\n  return status === \"draft\" ? <span className=\"shrink-0 rounded-kit-md bg-kit-muted px-1 text-kit-2xs text-kit-fg-3\">Draft</span> : null;\n}\n\n/* ── Lookup: stored ids → their records ────────────────────────────── */\n/**\n * The records behind `ids`, read once per id through `lookupReferences`. An id the service does not hand back is\n * `missing`; a failed read is `error` (in words). A row picked in the picker is `remember`ed, so it shows at once.\n */\nexport function useReferenceRecords(ids: string[], to: string[]) {\n  const { lookupReferences } = useKitServices();\n  const [known, setKnown] = React.useState<Record<string, KitReferenceOption>>({});\n  const [missing, setMissing] = React.useState<ReadonlySet<string>>(new Set());\n  const [error, setError] = React.useState<string | null>(null);\n  const inflight = React.useRef(new Set<string>());\n  const alive = React.useRef(true);\n  // set on every mount: StrictMode mounts, unmounts and mounts again, and a flag only cleared would drop every read\n  React.useEffect(() => {\n    alive.current = true;\n    return () => {\n      alive.current = false;\n    };\n  }, []);\n  const idsKey = ids.join(\"|\");\n  const toKey = to.join(\"|\");\n  React.useEffect(() => {\n    if (!lookupReferences) return;\n    const asked = ids.filter((x) => !known[x] && !missing.has(x) && !inflight.current.has(x));\n    if (!asked.length) return;\n    for (const x of asked) inflight.current.add(x);\n    lookupReferences(asked, to)\n      .then((rows) => {\n        if (!alive.current) return;\n        const found = new Set(rows.map((r) => r.id));\n        setKnown((k) => ({ ...k, ...Object.fromEntries(rows.map((r) => [r.id, r])) }));\n        setMissing((m) => new Set([...m, ...asked.filter((x) => !found.has(x))]));\n        setError(null);\n      })\n      .catch((e: unknown) => alive.current && setError(`The saved ${plural(referenceNoun(to))} could not be read: ${reasonOf(e)}`))\n      .finally(() => {\n        for (const x of asked) inflight.current.delete(x);\n      });\n  }, [idsKey, toKey, lookupReferences, known, missing]); // eslint-disable-line react-hooks/exhaustive-deps\n  const remember = React.useCallback((o: KitReferenceOption) => {\n    setKnown((k) => ({ ...k, [o.id]: o }));\n    setMissing((m) => (m.has(o.id) ? new Set([...m].filter((x) => x !== o.id)) : m));\n  }, []);\n  return { known, missing, loading: !!lookupReferences && ids.some((x) => !known[x] && !missing.has(x)) && !error, error, remember, canLookup: !!lookupReferences };\n}\n\n/* ── The search popover body, shared by single and multi ───────────── */\nfunction PickerBody({\n  to,\n  filter,\n  selected,\n  multi,\n  max,\n  noun,\n  onPick,\n  onNone,\n  canCreate,\n  onCreated,\n}: {\n  to: string[];\n  filter?: string;\n  selected: string[];\n  multi?: boolean;\n  max?: number;\n  noun: string;\n  onPick: (o: KitReferenceOption) => void;\n  onNone?: () => void;\n  canCreate: boolean;\n  onCreated: (o: KitReferenceOption) => void;\n}) {\n  const { searchReferences, createReference } = useKitServices();\n  const env = useKitEnv();\n  const [q, setQ] = React.useState(\"\");\n  const [query, setQuery] = React.useState(\"\");\n  const [rows, setRows] = React.useState<KitReferenceOption[]>([]);\n  const [truncated, setTruncated] = React.useState(false);\n  const [loading, setLoading] = React.useState(true);\n  const [error, setError] = React.useState<string | null>(null);\n  const [active, setActive] = React.useState(0);\n  const [creating, setCreating] = React.useState(false);\n  const [createBusy, setCreateBusy] = React.useState(false);\n  const [createError, setCreateError] = React.useState<string | null>(null);\n  const listId = React.useId();\n\n  React.useEffect(() => {\n    const t = window.setTimeout(() => setQuery(q.trim()), q.trim() ? 180 : 0);\n    return () => window.clearTimeout(t);\n  }, [q]);\n  const toKey = to.join(\"|\");\n  React.useEffect(() => {\n    if (!searchReferences) return;\n    const ctrl = new AbortController();\n    setLoading(true);\n    searchReferences({ to, filter, q: query, limit: PAGE, excludeId: env.docId, signal: ctrl.signal })\n      .then((r) => {\n        if (ctrl.signal.aborted) return;\n        setRows(r.options.filter((o) => o.id !== env.docId));\n        setTruncated(r.truncated);\n        setError(null);\n        setActive(0);\n      })\n      .catch((e: unknown) => !ctrl.signal.aborted && setError(reasonOf(e)))\n      .finally(() => !ctrl.signal.aborted && setLoading(false));\n    return () => ctrl.abort();\n  }, [query, toKey, filter, env.docId, searchReferences]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const none = onNone && !q;\n  const total = rows.length + (none ? 1 : 0);\n  const at = (i: number) => (none ? (i === 0 ? null : rows[i - 1]) : rows[i]);\n  const full = multi && max != null && selected.length >= max;\n  const choose = (i: number) => {\n    const o = at(i);\n    if (o) onPick(o);\n    else if (none) onNone!();\n  };\n  const optionId = (i: number) => `${listId}-${i}`;\n  const create = async (title: string) => {\n    if (!createReference) return;\n    setCreateBusy(true);\n    setCreateError(null);\n    try {\n      const o = await createReference({ to: to[0], title });\n      setCreating(false);\n      onCreated(o);\n    } catch (e) {\n      setCreateError(`Not created: ${reasonOf(e)}`);\n    } finally {\n      setCreateBusy(false);\n    }\n  };\n  // V2's search copy: \"pages\" for a page picker, \"entries\" for every other one\n  const searchLabel = `Search ${noun === \"page\" ? \"pages\" : \"entries\"}`;\n  return (\n    <div className=\"flex flex-col\">\n      <label className=\"flex h-10 items-center gap-2 border-b border-kit-line px-3 text-kit-fg-3\">\n        <IconSearch className=\"size-4 shrink-0\" stroke={1.5} aria-hidden />\n        <input\n          autoFocus\n          value={q}\n          onChange={(e) => {\n            setQ(e.target.value);\n            setActive(0);\n          }}\n          onKeyDown={(e) => {\n            if (e.key === \"ArrowDown\") {\n              e.preventDefault();\n              setActive((a) => Math.min(total - 1, a + 1));\n            } else if (e.key === \"ArrowUp\") {\n              e.preventDefault();\n              setActive((a) => Math.max(0, a - 1));\n            } else if (e.key === \"Home\") {\n              e.preventDefault();\n              setActive(0);\n            } else if (e.key === \"End\") {\n              e.preventDefault();\n              setActive(Math.max(0, total - 1));\n            } else if (e.key === \"Enter\" && total) {\n              e.preventDefault();\n              choose(Math.min(active, total - 1));\n            }\n          }}\n          placeholder={`${searchLabel}…`}\n          role=\"combobox\"\n          aria-expanded\n          aria-autocomplete=\"list\"\n          aria-controls={listId}\n          aria-activedescendant={total ? optionId(Math.min(active, total - 1)) : undefined}\n          aria-label={searchLabel}\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 id={listId} className=\"max-h-72 overflow-y-auto p-1\" role=\"listbox\" aria-label={`${noun} results`} aria-multiselectable={multi || undefined} aria-busy={loading || undefined}>\n        {none ? (\n          <button\n            type=\"button\"\n            id={optionId(0)}\n            role=\"option\"\n            aria-selected={false}\n            tabIndex={-1}\n            onMouseEnter={() => setActive(0)}\n            onMouseDown={(e) => e.preventDefault()}\n            onClick={onNone}\n            className={cn(\"flex h-8 w-full items-center gap-2 rounded-kit-md px-2 text-left text-kit-sm text-kit-fg-3 hover:bg-kit-hover\", active === 0 && \"bg-kit-hover\")}\n          >\n            None\n          </button>\n        ) : null}\n        {rows.map((o, j) => {\n          const i = j + (none ? 1 : 0);\n          const on = selected.includes(o.id);\n          return (\n            <button\n              type=\"button\"\n              key={`${o.kind}:${o.id}`}\n              id={optionId(i)}\n              role=\"option\"\n              aria-selected={on}\n              tabIndex={-1}\n              onMouseEnter={() => setActive(i)}\n              onMouseDown={(e) => e.preventDefault()}\n              onClick={() => onPick(o)}\n              className={cn(\"flex w-full items-center gap-2.5 rounded-kit-md p-1.5 text-left\", i === active && \"bg-kit-hover\")}\n            >\n              {multi ? (\n                <span aria-hidden className={cn(\"flex size-4 shrink-0 items-center justify-center rounded-kit-md border\", on ? \"border-kit-accent bg-kit-accent text-kit-accent-on\" : \"border-kit-line-strong\", !on && full && \"opacity-40\")}>\n                  {on ? <IconCheck className=\"size-3\" stroke={3} /> : null}\n                </span>\n              ) : null}\n              <RefThumb o={o} size={28} />\n              <span className=\"min-w-0 flex-1\">\n                <span className=\"block truncate text-kit-sm text-kit-fg\">{o.title}</span>\n                {o.subtitle ? <span className=\"block truncate text-kit-xs text-kit-fg-3\">{o.subtitle}</span> : null}\n              </span>\n              <DraftChip status={o.status} />\n              {!multi && on ? <IconCheck className=\"size-4 shrink-0 text-kit-fg\" stroke={2} aria-hidden /> : null}\n            </button>\n          );\n        })}\n        {!loading && !error && rows.length === 0 ? <div className=\"px-3 py-6 text-center text-kit-sm text-kit-fg-3\">No matches</div> : null}\n        {loading && rows.length === 0 ? (\n          <div role=\"status\" className=\"px-3 py-6 text-center text-kit-sm text-kit-fg-3\">\n            Searching…\n          </div>\n        ) : null}\n        {error ? (\n          <p role=\"alert\" className=\"px-3 py-3 text-kit-xs text-kit-danger-fg\">\n            {plural(noun).replace(/^./, (c) => c.toUpperCase())} could not be listed: {error}\n          </p>\n        ) : null}\n      </div>\n      {truncated && !error ? (\n        <p role=\"note\" className=\"border-t border-kit-line px-3 py-2 text-kit-xs text-kit-warning-fg\">\n          Some {plural(noun)} were not checked against this field's filter, so the list may be incomplete. Search by name to narrow it.\n        </p>\n      ) : null}\n      {multi ? (\n        <div className={cn(\"border-t border-kit-line px-3 py-2 text-kit-xs\", full ? \"text-kit-warning-fg\" : \"text-kit-fg-3\")}>\n          {selected.length}\n          {max != null ? ` of ${max}` : \"\"} selected{full ? ` · Limit is ${max}. Picking another swaps out the last one.` : \"\"}\n        </div>\n      ) : null}\n      {canCreate ? (\n        <div className=\"border-t border-kit-line p-1.5\">\n          {creating ? (\n            <>\n              <form\n                className=\"flex items-center gap-1.5\"\n                onSubmit={(e) => {\n                  e.preventDefault();\n                  e.stopPropagation();\n                  const t = String(new FormData(e.currentTarget).get(\"t\") ?? \"\").trim();\n                  if (t) void create(t);\n                }}\n              >\n                <input\n                  name=\"t\"\n                  autoFocus\n                  defaultValue={q}\n                  aria-label={`New ${noun} name`}\n                  placeholder={`New ${noun} name`}\n                  className=\"h-8 min-w-0 flex-1 rounded-kit-md border border-kit-line-strong bg-kit-field-bg px-2 text-kit-sm text-kit-fg outline-none focus:bg-kit-field-bg focus:ring-1 focus:ring-kit-line-strong\"\n                />\n                <Button size=\"sm\" type=\"submit\" variant=\"primary\" loading={createBusy} disabled={createBusy}>\n                  Create\n                </Button>\n              </form>\n              {createError ? (\n                <p role=\"alert\" className=\"mt-1.5 px-1 text-kit-xs text-kit-danger-fg\">\n                  {createError}\n                </p>\n              ) : null}\n            </>\n          ) : (\n            <button\n              type=\"button\"\n              onClick={() => setCreating(true)}\n              className=\"flex h-8 w-full items-center gap-2 rounded-kit-md px-2 text-left text-kit-sm text-kit-fg-2 hover:bg-kit-hover hover:text-kit-fg\"\n            >\n              <IconPlus className=\"size-4\" stroke={1.5} aria-hidden />\n              Create new {noun}\n              {q ? <span className=\"truncate text-kit-fg-3\">“{q}”</span> : null}\n            </button>\n          )}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\n/** \"Create new\" only where the host can create a draft in the ONE entry model the field targets. */\nfunction useCanCreate(to: string[]) {\n  const { createReference } = useKitServices();\n  return !!createReference && to.length === 1 && isEntryTarget(to[0]);\n}\n\n/** Why the field cannot change its value here (no search service), in words. */\nfunction NoSearch({ title }: { title: string }) {\n  return (\n    <p role=\"note\" className=\"text-kit-xs text-kit-fg-3\">\n      No reference search is connected to this editor, so {title} can't be changed here.\n    </p>\n  );\n}\n\n/* ── Single reference ──────────────────────────────────────────────── */\nexport function ReferenceControl({ field, value, onChange, readOnly, id }: ControlProps) {\n  const env = useKitEnv();\n  const { searchReferences, toast } = useKitServices();\n  const to = targetsOf(field);\n  const noun = referenceNoun(to);\n  const current = typeof value === \"string\" && value ? value : null;\n  const ids = React.useMemo(() => (current ? [current] : []), [current]);\n  const rec = useReferenceRecords(ids, to);\n  const canCreate = useCanCreate(to) && !readOnly;\n  const [open, setOpen] = React.useState(false);\n  const pick = (o: KitReferenceOption) => {\n    rec.remember(o);\n    onChange(o.id);\n    setOpen(false);\n  };\n  /* the trigger opens like V2's even with no search service; the popover then says why nothing can be picked */\n  const editable = !readOnly;\n  const body = !editable ? null : !searchReferences ? (\n    <PopoverContent className=\"w-[300px] p-3\" align=\"start\" collisionAvoidance={SHIFT}>\n      <NoSearch title={field.title} />\n    </PopoverContent>\n  ) : (\n    <PopoverContent className=\"w-[300px] p-0\" align=\"start\" collisionAvoidance={SHIFT}>\n      <PickerBody\n        to={to}\n        filter={field.reference?.filter}\n        selected={current ? [current] : []}\n        noun={noun}\n        onPick={pick}\n        onNone={\n          current\n            ? () => {\n                onChange(null);\n                setOpen(false);\n              }\n            : undefined\n        }\n        canCreate={canCreate}\n        onCreated={(o) => {\n          pick(o);\n          toast?.success(`${noun.replace(/^./, (c) => c.toUpperCase())} created as a draft`, { description: `“${o.title}”` });\n        }}\n      />\n    </PopoverContent>\n  );\n\n  const missing = !!current && rec.missing.has(current);\n  if (current && !missing) {\n    const o = rec.known[current];\n    const title = o?.title ?? (rec.loading ? \"Loading…\" : current);\n    const subtitle = o ? o.subtitle : rec.error ?? (!rec.canLookup ? `Saved ${noun} id` : null);\n    const openable = !!o && o.kind === \"entry\" && !!o.modelSlug && !!env.onOpenReference;\n    return (\n      <Popover open={open} onOpenChange={setOpen}>\n        <div data-slot=\"kit-reference-card\" className=\"group/ref flex items-center gap-2.5 rounded-kit-lg border border-kit-line bg-kit-control-bg p-1.5 pr-1 transition-colors hover:border-kit-line-strong\">\n          <PopoverTrigger\n            id={id}\n            disabled={!editable}\n            aria-label={`${field.title}: ${title}.${editable ? \" Change\" : \"\"}`}\n            className=\"flex min-w-0 flex-1 items-center gap-2.5 text-left\"\n          >\n            <RefThumb o={o ?? null} size={32} />\n            <span className=\"min-w-0 flex-1\">\n              <span className={cn(\"block truncate text-kit-sm font-medium text-kit-fg\", !o && !rec.canLookup && \"font-kit-mono text-kit-xs\")}>{title}</span>\n              {subtitle ? <span className={cn(\"block truncate text-kit-xs\", rec.error && !o ? \"text-kit-danger-fg\" : \"text-kit-fg-3\")}>{subtitle}</span> : null}\n            </span>\n            <DraftChip status={o?.status} />\n          </PopoverTrigger>\n          {readOnly ? null : (\n            <Menu>\n              <MenuTrigger\n                aria-label={`${o?.title ?? field.title} actions`}\n                className=\"flex size-7 shrink-0 items-center justify-center rounded-kit-md text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg data-[popup-open]:bg-kit-hover\"\n              >\n                <IconDots className=\"size-4\" stroke={1.5} aria-hidden />\n              </MenuTrigger>\n              <MenuContent align=\"end\" className=\"w-48\">\n                {openable ? (\n                  <MenuItem icon={<IconArrowUpRight stroke={1.5} />} onClick={() => env.onOpenReference!({ collectionId: o!.modelSlug!, entryId: o!.id, title: o!.title })}>\n                    Open {o!.title.length > 18 ? `${o!.title.slice(0, 16)}…` : o!.title}\n                  </MenuItem>\n                ) : null}\n                {editable ? (\n                  <MenuItem icon={<IconReplace stroke={1.5} />} onClick={() => window.setTimeout(() => setOpen(true), 0)}>\n                    Replace\n                  </MenuItem>\n                ) : null}\n                {openable || editable ? <MenuSeparator /> : null}\n                <MenuItem danger icon={<IconTrash stroke={1.5} />} onClick={() => onChange(null)}>\n                  Remove\n                </MenuItem>\n              </MenuContent>\n            </Menu>\n          )}\n        </div>\n        {body}\n      </Popover>\n    );\n  }\n  /* empty, or a saved id the lookup cannot find: V2's select trigger (V2 draws an unresolved id as no selection). Ours\n     says \"Missing\" on it instead of hiding the saved id (DESIGN 9.6); the picker's None clears it, a row replaces it. */\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger\n        id={id}\n        disabled={!editable}\n        data-slot={missing ? \"kit-reference-card\" : undefined}\n        data-missing={missing || undefined}\n        aria-label={missing ? `${field.title}: Missing ${noun}.${editable ? \" Change\" : \"\"}` : `${field.title}: select ${withArticle(noun)}`}\n        className={cn(\n          \"flex h-8 w-full items-center gap-2 rounded-kit-md border border-kit-line-strong bg-kit-field-bg px-2.5 text-left text-kit-sm text-kit-fg-3 transition-colors hover:border-kit-line-strong data-[popup-open]:border-kit-line-strong data-[popup-open]:bg-kit-field-bg\",\n          missing && \"border-kit-warning-line text-kit-warning-fg hover:border-kit-warning-line data-[popup-open]:border-kit-warning-line\",\n        )}\n      >\n        <IconFileDatabase className=\"size-4\" stroke={1.5} aria-hidden />\n        {missing ? (\n          <span className=\"flex-1 truncate\">\n            Missing {noun}\n            <span className=\"sr-only\">. Deleted, or not visible to you. The saved id stays until you replace or remove it.</span>\n          </span>\n        ) : (\n          <span className=\"flex-1 truncate\">Select {withArticle(noun)}</span>\n        )}\n        <IconChevronDown className=\"size-3.5\" stroke={1.5} aria-hidden />\n      </PopoverTrigger>\n      {body}\n    </Popover>\n  );\n}\n\n/* ── Multi-reference: an array of ids ─────────────────────────────── */\nfunction RefChip({\n  id,\n  o,\n  canLookup,\n  readOnly,\n  sort,\n  onRemove,\n}: {\n  id: string;\n  o?: KitReferenceOption;\n  /** false: no lookup service, so the saved id is all there is to show (never a \"Loading…\" that never ends) */\n  canLookup: boolean;\n  readOnly?: boolean;\n  sort: ReturnType<typeof useDragReorder>;\n  onRemove: () => void;\n}) {\n  const handle = sort.handle(id);\n  const register = sort.register(id);\n  const title = o?.title ?? (canLookup ? \"Loading…\" : id);\n  /* V2: the chip itself is the sortable item (thumb, title and remove button inside it) */\n  return (\n    <span\n      {...(readOnly ? {} : handle)}\n      ref={(el: HTMLElement | null) => {\n        register(el);\n        if (!readOnly) handle.ref(el);\n      }}\n      style={sort.style(id)}\n      tabIndex={0}\n      role=\"group\"\n      aria-roledescription=\"sortable item\"\n      aria-label={readOnly ? title : `${title}, drag to reorder`}\n      onKeyDown={(e) => {\n        // keys on the remove button are the button's own\n        if (readOnly || e.target !== e.currentTarget) return;\n        if (e.key === \"Delete\" || e.key === \"Backspace\") {\n          e.preventDefault();\n          onRemove();\n          return;\n        }\n        handle.onKeyDown(e);\n      }}\n      className={cn(\n        \"inline-flex h-6 max-w-full cursor-grab touch-none items-center gap-1.5 rounded-kit-md border border-kit-line bg-kit-control-bg pl-0.5 pr-1 text-kit-sm text-kit-fg shadow-kit-xs active:cursor-grabbing\",\n        sort.active === id && \"z-10 shadow-kit-md\",\n      )}\n    >\n      <RefThumb o={o ?? null} size={20} />\n      <span className=\"truncate\">{title}</span>\n      {readOnly ? null : (\n        <button type=\"button\" aria-label={`Remove ${title}`} onPointerDown={(e) => e.stopPropagation()} onClick={onRemove} className=\"flex rounded-kit-md p-0.5 text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg\">\n          <IconX className=\"size-3\" stroke={1.5} aria-hidden />\n        </button>\n      )}\n    </span>\n  );\n}\n\n/** Multi-reference: an array of reference ids. `field` is the ARRAY field; the engine hands it the item's `reference`. */\nexport function ReferencesControl({ field, value, onChange, readOnly, id }: ControlProps) {\n  const { searchReferences } = useKitServices();\n  const item = Array.isArray(field.of) ? field.of[0] : undefined;\n  const to = item?.reference?.to ?? field.reference?.to ?? [];\n  const filter = item?.reference?.filter ?? field.reference?.filter;\n  const noun = referenceNoun(to);\n  const ids = React.useMemo(() => (Array.isArray(value) ? value : []).filter((x): x is string => typeof x === \"string\" && x !== \"\"), [value]);\n  const rec = useReferenceRecords(ids, to);\n  const canCreate = useCanCreate(to) && !readOnly;\n  const max = field.validation?.max;\n  /* ids the lookup cannot find are drawn as ONE compact \"n missing\" chip after Add (V2 hides them; one row keeps V2's height),\n     so the chips that sort are the rest; a reorder puts them back around the missing ids, which keep their places */\n  const missingIds = ids.filter((x) => rec.missing.has(x));\n  const shown = missingIds.length ? ids.filter((x) => !rec.missing.has(x)) : ids;\n  const sort = useDragReorder(\n    shown,\n    (from, to2) => {\n      const next = [...shown];\n      const [moved] = next.splice(from, 1);\n      next.splice(to2, 0, moved);\n      let i = 0;\n      onChange(ids.map((x) => (rec.missing.has(x) ? x : next[i++])));\n    },\n    { axis: \"grid\", disabled: readOnly },\n  );\n  const missingNoun = missingIds.length === 1 ? noun : plural(noun);\n  const toggle = (o: KitReferenceOption) => {\n    rec.remember(o);\n    if (ids.includes(o.id)) return onChange(ids.filter((x) => x !== o.id));\n    if (max != null && ids.length >= max) return onChange([...ids.slice(0, -1), o.id]); // swap in place at the limit\n    onChange([...ids, o.id]);\n  };\n  return (\n    <div className=\"flex flex-col gap-1\">\n      {/* the field label points at the Add trigger; read-only there is none, so the box carries the id. The chips sit\n          straight in the wrapping box, as V2's do (a wrapper would take them out of the box's flow). V2's box has no\n          role or name while editing; read-only (no Add to label) it is named as a group. */}\n      <div\n        id={readOnly ? id : undefined}\n        role={readOnly ? \"group\" : undefined}\n        aria-label={readOnly ? field.title : undefined}\n        className=\"flex min-h-8 flex-wrap items-center gap-1 rounded-kit-md border border-kit-line-strong bg-kit-field-bg p-1 transition-colors hover:border-kit-line-strong\"\n      >\n        {shown.map((x) => (\n          <RefChip key={x} id={x} o={rec.known[x]} canLookup={rec.canLookup} readOnly={readOnly} sort={sort} onRemove={() => onChange(ids.filter((y) => y !== x))} />\n        ))}\n        {sort.a11y}\n        {!readOnly ? (\n          <Popover>\n            <PopoverTrigger id={id} className=\"inline-flex h-6 items-center gap-1 rounded-kit-md px-1.5 text-kit-sm text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg\">\n              <IconPlus className=\"size-3.5\" stroke={1.5} aria-hidden />\n              Add\n            </PopoverTrigger>\n            <PopoverContent className=\"w-[300px] p-0\" align=\"start\" collisionAvoidance={SHIFT}>\n              {/* no search service: the picker says why instead of listing anything */}\n              {!searchReferences ? (\n                <div className=\"p-3\">\n                  <NoSearch title={field.title} />\n                </div>\n              ) : (\n              <PickerBody\n                to={to}\n                filter={filter}\n                selected={ids}\n                multi\n                max={max}\n                noun={noun}\n                onPick={toggle}\n                canCreate={canCreate}\n                onCreated={(o) => {\n                  rec.remember(o);\n                  onChange(max != null && ids.length >= max ? [...ids.slice(0, -1), o.id] : [...ids, o.id]);\n                }}\n              />\n              )}\n            </PopoverContent>\n          </Popover>\n        ) : ids.length === 0 ? (\n          <span className=\"px-1.5 text-kit-sm text-kit-fg-3\">None</span>\n        ) : null}\n        {/* after Add, so Add keeps V2's place (V2 draws nothing for these ids) */}\n        {missingIds.length ? (\n          <span\n            data-missing\n            data-slot=\"kit-reference-missing\"\n            className=\"inline-flex h-6 max-w-full items-center gap-1 rounded-kit-md border border-kit-warning-line bg-kit-control-bg pl-1.5 pr-1 text-kit-sm text-kit-warning-fg shadow-kit-xs\"\n          >\n            <span className=\"truncate tabular-nums\">\n              {missingIds.length} missing\n              <span className=\"sr-only\">\n                {\" \"}\n                {missingNoun}. Deleted, or not visible to you. The saved {missingIds.length === 1 ? \"id stays\" : \"ids stay\"} until you remove {missingIds.length === 1 ? \"it\" : \"them\"}.\n              </span>\n            </span>\n            {readOnly ? null : (\n              <button\n                type=\"button\"\n                aria-label={`Remove ${missingIds.length} missing ${missingNoun}`}\n                onClick={() => onChange(ids.filter((y) => !rec.missing.has(y)))}\n                className=\"flex rounded-kit-sm p-0.5 hover:bg-kit-hover hover:text-kit-fg\"\n              >\n                <IconX className=\"size-3\" stroke={1.5} aria-hidden />\n              </button>\n            )}\n          </span>\n        ) : null}\n      </div>\n      {rec.error ? (\n        <p role=\"alert\" className=\"text-kit-xs text-kit-danger-fg\">\n          {rec.error}\n        </p>\n      ) : null}\n      {max != null ? (\n        <span className=\"tabular-nums self-end text-kit-xs text-kit-fg-3\">\n          {ids.length} / {max}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/controls/rich-text/blocks.d.ts

@@ -0,0 +1,49 @@
+/**
+ * RICH TEXT · rich blocks ("islands", V2 HEAD controls/rich-text/blocks.tsx). Each renders through a portal into a
+ * contenteditable=false element inside the editor surface; its model lives on that element (`el.__rt`) so serialize()
+ * can write it back as static HTML.
+ *
+ * The image block is V2's: the toolbar (Replace · Align · Size S/M/L/Full · Link · Alt text · Remove) and the caption
+ * under it, each stored on production's image block (see dom.ts). The callout (tone · title · message), toggle, video,
+ * file and embedded component blocks are V2's too, limited to what their stored blocks keep: a callout's message and a
+ * toggle's body are plain text (production stores them as text), a component is a linked card (its fields are edited
+ * on the component itself).
+ *
+ * The table block is V2's TableBlock: the kit's table editor on the island's table value. The pull quote is V2's article
+ * block (article-blocks.tsx ArticleBlock + PullQuotePreview): drawn as the reader sees it, edited in the floating
+ * properties panel (4 settings → panel, CPO D54) through the kit SchemaForm. Key takeaways are V2's article block too,
+ * written in the text itself (article-blocks.tsx TakeawaysEditor, surface "inline"): a title line and a line per point.
+ * The embed is V2's article block too (ArticleBlock surface "popover" + EmbedPreview): a placeholder card of the link's
+ * provider, edited in a popover beside it (Link, Title; V2's Shape has no stored key, see dom.ts).
+ */
+import * as React from "react";
+import { type IslandEl, type IslandKind, type IslandModels } from "./dom";
+export interface IslandCtx {
+    readOnly?: boolean;
+    dense?: boolean;
+    emit: () => void;
+    remove: (el: IslandEl) => void;
+    /** Leave the block: caret to the start of the next line. */
+    exit: (el: IslandEl) => void;
+    /** CPO D54: an island write joins the body field's ONE undo history (`before` = the model it replaces) */
+    record?: (el: IslandEl, before: IslandModels[IslandKind], label: string, coalesce?: boolean) => void;
+    /** a refusal the author must see (an address the image cannot use) */
+    notify: (message: string, description?: string) => void;
+    duplicate?: (el: IslandEl) => void;
+    move?: (el: IslandEl, dir: -1 | 1) => void;
+    /** the body field's one history (D54): ⌘Z on a focused block or in its panel */
+    undo?: () => boolean;
+    /**
+     * One action as ONE undo step, in the host's history when it keeps one (the dock's toolbar Undo), else the body's
+     * own. `write` makes the change and answers the island it changed; `before` is that island's model before it. Answers
+     * the step's undo (an Undo toast): true, or the sentence saying why nothing was undone.
+     */
+    step?: (label: string, write: () => IslandEl | null, before?: IslandModels[IslandKind]) => () => true | string;
+    redo?: () => boolean;
+    /** Drag the block to a new position (the gutter grip's drag), for a grip drawn on the block itself */
+    drag?: (el: IslandEl, e: React.PointerEvent) => void;
+}
+export declare function Island({ el, ctx }: {
+    el: IslandEl;
+    ctx: IslandCtx;
+}): import("react/jsx-runtime").JSX.Element;