@bettercms-ai/kit 0.1.1 → 1.0.0

package/controls/reference.js

@@ -0,0 +1,761 @@
+import { cn } from "../lib/cn.js";
+import { useKitEnv, useKitServices } from "../context.js";
+import { Button } from "../ui/button.js";
+import { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger, Popover, PopoverContent, PopoverTrigger } from "../ui/overlay.js";
+import { Avatar } from "../ui/display.js";
+import { useDragReorder } from "../engine/item-list.js";
+import * as React from "react";
+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
+/**
+* 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
+* clear (⋯ → Remove). MULTI-REFERENCE — reorderable chips + "+ Add", "n / max"; at the limit the picker swaps in place.
+* (V2 HEAD 9829bf1 kit/controls/reference.tsx, DESIGN.md 6.8, 8.16, 9.6.)
+*
+* The rows come from the host (reference-services.ts): `searchReferences` is POST /content/reference-options, which
+* already applies the field's `reference.filter` and scope; `truncated` says its filter scan stopped early, and the
+* picker says so. The stored value is the target id ("en_12"; a list for many), exactly V2's shape.
+*
+* Kit deviations from V2: no seed rows (every row is a real record from the service); matching is the server's title /
+* slug search, so rows keep the server's order; a stored id the lookup cannot find shows as a "Missing" card, or in a
+* 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([
+	"page",
+	"form",
+	"collection",
+	"shopify"
+]);
+var isEntryTarget = (t) => !NON_ENTRY.has(t);
+var targetsOf = (field) => field.reference?.to ?? [];
+/** The noun the picker uses (D48: "CMS item" where V2 says "entry"). */
+function referenceNoun(to) {
+	if (to.length === 1) return to[0] === "page" ? "page" : to[0] === "form" ? "form" : to[0] === "collection" ? "collection" : to[0] === "shopify" ? "product" : "CMS item";
+	return to.length && to.every(isEntryTarget) ? "CMS item" : "item";
+}
+var plural = (noun) => noun === "CMS item" ? "CMS items" : `${noun}s`;
+var withArticle = (noun) => `${/^[aeiou]/i.test(noun) ? "an" : "a"} ${noun}`;
+var reasonOf = (e) => e instanceof Error ? e.message : String(e);
+var PAGE = 25;
+/** V2 (Radix) slides a picker that would overflow along the edge, keeping it over the panel; Base UI would flip it to
+*  end-aligned, which hangs it left over the preview */
+var SHIFT = { align: "shift" };
+var KIND_ICON = {
+	entry: IconFileDatabase,
+	page: IconFileText,
+	form: IconForms,
+	collection: IconDatabase,
+	shopify: IconShoppingBag
+};
+function RefThumb({ o, size = 28 }) {
+	if (o?.photo) return /* @__PURE__ */ jsx(Avatar, {
+		name: o.title,
+		src: o.photo,
+		size,
+		decorative: true
+	});
+	const Icon = o ? KIND_ICON[o.kind] : IconFileDatabase;
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		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",
+		children: /* @__PURE__ */ jsx(Icon, {
+			className: size > 24 ? "size-4" : "size-3.5",
+			stroke: 1.5
+		})
+	});
+}
+function DraftChip({ status }) {
+	return status === "draft" ? /* @__PURE__ */ jsx("span", {
+		className: "shrink-0 rounded-kit-md bg-kit-muted px-1 text-kit-2xs text-kit-fg-3",
+		children: "Draft"
+	}) : null;
+}
+/**
+* The records behind `ids`, read once per id through `lookupReferences`. An id the service does not hand back is
+* `missing`; a failed read is `error` (in words). A row picked in the picker is `remember`ed, so it shows at once.
+*/
+function useReferenceRecords(ids, to) {
+	const { lookupReferences } = useKitServices();
+	const [known, setKnown] = React.useState({});
+	const [missing, setMissing] = React.useState(/* @__PURE__ */ new Set());
+	const [error, setError] = React.useState(null);
+	const inflight = React.useRef(/* @__PURE__ */ new Set());
+	const alive = React.useRef(true);
+	React.useEffect(() => {
+		alive.current = true;
+		return () => {
+			alive.current = false;
+		};
+	}, []);
+	const idsKey = ids.join("|");
+	const toKey = to.join("|");
+	React.useEffect(() => {
+		if (!lookupReferences) return;
+		const asked = ids.filter((x) => !known[x] && !missing.has(x) && !inflight.current.has(x));
+		if (!asked.length) return;
+		for (const x of asked) inflight.current.add(x);
+		lookupReferences(asked, to).then((rows) => {
+			if (!alive.current) return;
+			const found = new Set(rows.map((r) => r.id));
+			setKnown((k) => ({
+				...k,
+				...Object.fromEntries(rows.map((r) => [r.id, r]))
+			}));
+			setMissing((m) => 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);
+		});
+	}, [
+		idsKey,
+		toKey,
+		lookupReferences,
+		known,
+		missing
+	]);
+	const remember = React.useCallback((o) => {
+		setKnown((k) => ({
+			...k,
+			[o.id]: o
+		}));
+		setMissing((m) => m.has(o.id) ? new Set([...m].filter((x) => x !== o.id)) : m);
+	}, []);
+	return {
+		known,
+		missing,
+		loading: !!lookupReferences && ids.some((x) => !known[x] && !missing.has(x)) && !error,
+		error,
+		remember,
+		canLookup: !!lookupReferences
+	};
+}
+function PickerBody({ to, filter, selected, multi, max, noun, onPick, onNone, canCreate, onCreated }) {
+	const { searchReferences, createReference } = useKitServices();
+	const env = useKitEnv();
+	const [q, setQ] = React.useState("");
+	const [query, setQuery] = React.useState("");
+	const [rows, setRows] = React.useState([]);
+	const [truncated, setTruncated] = React.useState(false);
+	const [loading, setLoading] = React.useState(true);
+	const [error, setError] = React.useState(null);
+	const [active, setActive] = React.useState(0);
+	const [creating, setCreating] = React.useState(false);
+	const [createBusy, setCreateBusy] = React.useState(false);
+	const [createError, setCreateError] = React.useState(null);
+	const listId = React.useId();
+	React.useEffect(() => {
+		const t = window.setTimeout(() => setQuery(q.trim()), q.trim() ? 180 : 0);
+		return () => window.clearTimeout(t);
+	}, [q]);
+	const toKey = to.join("|");
+	React.useEffect(() => {
+		if (!searchReferences) return;
+		const ctrl = new AbortController();
+		setLoading(true);
+		searchReferences({
+			to,
+			filter,
+			q: query,
+			limit: PAGE,
+			excludeId: env.docId,
+			signal: ctrl.signal
+		}).then((r) => {
+			if (ctrl.signal.aborted) return;
+			setRows(r.options.filter((o) => o.id !== env.docId));
+			setTruncated(r.truncated);
+			setError(null);
+			setActive(0);
+		}).catch((e) => !ctrl.signal.aborted && setError(reasonOf(e))).finally(() => !ctrl.signal.aborted && setLoading(false));
+		return () => ctrl.abort();
+	}, [
+		query,
+		toKey,
+		filter,
+		env.docId,
+		searchReferences
+	]);
+	const none = onNone && !q;
+	const total = rows.length + (none ? 1 : 0);
+	const at = (i) => none ? i === 0 ? null : rows[i - 1] : rows[i];
+	const full = multi && max != null && selected.length >= max;
+	const choose = (i) => {
+		const o = at(i);
+		if (o) onPick(o);
+		else if (none) onNone();
+	};
+	const optionId = (i) => `${listId}-${i}`;
+	const create = async (title) => {
+		if (!createReference) return;
+		setCreateBusy(true);
+		setCreateError(null);
+		try {
+			const o = await createReference({
+				to: to[0],
+				title
+			});
+			setCreating(false);
+			onCreated(o);
+		} catch (e) {
+			setCreateError(`Not created: ${reasonOf(e)}`);
+		} finally {
+			setCreateBusy(false);
+		}
+	};
+	const searchLabel = `Search ${noun === "page" ? "pages" : "entries"}`;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col",
+		children: [
+			/* @__PURE__ */ jsxs("label", {
+				className: "flex h-10 items-center gap-2 border-b border-kit-line px-3 text-kit-fg-3",
+				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);
+						setActive(0);
+					},
+					onKeyDown: (e) => {
+						if (e.key === "ArrowDown") {
+							e.preventDefault();
+							setActive((a) => Math.min(total - 1, a + 1));
+						} else if (e.key === "ArrowUp") {
+							e.preventDefault();
+							setActive((a) => Math.max(0, a - 1));
+						} else if (e.key === "Home") {
+							e.preventDefault();
+							setActive(0);
+						} else if (e.key === "End") {
+							e.preventDefault();
+							setActive(Math.max(0, total - 1));
+						} else if (e.key === "Enter" && total) {
+							e.preventDefault();
+							choose(Math.min(active, total - 1));
+						}
+					},
+					placeholder: `${searchLabel}…`,
+					role: "combobox",
+					"aria-expanded": true,
+					"aria-autocomplete": "list",
+					"aria-controls": listId,
+					"aria-activedescendant": total ? optionId(Math.min(active, total - 1)) : void 0,
+					"aria-label": searchLabel,
+					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", {
+				id: listId,
+				className: "max-h-72 overflow-y-auto p-1",
+				role: "listbox",
+				"aria-label": `${noun} results`,
+				"aria-multiselectable": multi || void 0,
+				"aria-busy": loading || void 0,
+				children: [
+					none ? /* @__PURE__ */ jsx("div", {
+						id: optionId(0),
+						role: "option",
+						"aria-selected": false,
+						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"),
+						children: "None"
+					}) : null,
+					rows.map((o, j) => {
+						const i = j + (none ? 1 : 0);
+						const on = selected.includes(o.id);
+						return /* @__PURE__ */ jsxs("div", {
+							id: optionId(i),
+							role: "option",
+							"aria-selected": on,
+							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"),
+							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"),
+									children: on ? /* @__PURE__ */ jsx(IconCheck, {
+										className: "size-3",
+										stroke: 3
+									}) : null
+								}) : null,
+								/* @__PURE__ */ jsx(RefThumb, {
+									o,
+									size: 28
+								}),
+								/* @__PURE__ */ jsxs("span", {
+									className: "min-w-0 flex-1",
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "block truncate text-kit-sm text-kit-fg",
+										children: o.title
+									}), o.subtitle ? /* @__PURE__ */ jsx("span", {
+										className: "block truncate text-kit-xs text-kit-fg-3",
+										children: o.subtitle
+									}) : null]
+								}),
+								/* @__PURE__ */ jsx(DraftChip, { status: o.status }),
+								!multi && on ? /* @__PURE__ */ jsx(IconCheck, {
+									className: "size-4 shrink-0 text-kit-fg",
+									stroke: 2,
+									"aria-hidden": true
+								}) : null
+							]
+						}, `${o.kind}:${o.id}`);
+					}),
+					!loading && !error && rows.length === 0 ? /* @__PURE__ */ jsx("div", {
+						className: "px-3 py-6 text-center text-kit-sm text-kit-fg-3",
+						children: "No matches"
+					}) : null,
+					loading && rows.length === 0 ? /* @__PURE__ */ jsx("div", {
+						role: "status",
+						className: "px-3 py-6 text-center text-kit-sm text-kit-fg-3",
+						children: "Searching…"
+					}) : null,
+					error ? /* @__PURE__ */ jsxs("p", {
+						role: "alert",
+						className: "px-3 py-3 text-kit-xs text-kit-danger-fg",
+						children: [
+							plural(noun).replace(/^./, (c) => c.toUpperCase()),
+							" could not be listed: ",
+							error
+						]
+					}) : null
+				]
+			}),
+			truncated && !error ? /* @__PURE__ */ jsxs("p", {
+				role: "note",
+				className: "border-t border-kit-line px-3 py-2 text-kit-xs text-kit-warning-fg",
+				children: [
+					"Some ",
+					plural(noun),
+					" were not checked against this field's filter, so the list may be incomplete. Search by name to narrow it."
+				]
+			}) : null,
+			multi ? /* @__PURE__ */ jsxs("div", {
+				className: cn("border-t border-kit-line px-3 py-2 text-kit-xs", full ? "text-kit-warning-fg" : "text-kit-fg-3"),
+				children: [
+					selected.length,
+					max != null ? ` of ${max}` : "",
+					" selected",
+					full ? ` · Limit is ${max}. Picking another swaps out the last one.` : ""
+				]
+			}) : 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",
+					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", {
+					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",
+					children: [
+						/* @__PURE__ */ jsx(IconPlus, {
+							className: "size-4",
+							stroke: 1.5,
+							"aria-hidden": true
+						}),
+						"Create new ",
+						noun,
+						q ? /* @__PURE__ */ jsxs("span", {
+							className: "truncate text-kit-fg-3",
+							children: [
+								"“",
+								q,
+								"”"
+							]
+						}) : null
+					]
+				})
+			}) : null
+		]
+	});
+}
+/** "Create new" only where the host can create a draft in the ONE entry model the field targets. */
+function useCanCreate(to) {
+	const { createReference } = useKitServices();
+	return !!createReference && to.length === 1 && isEntryTarget(to[0]);
+}
+/** Why the field cannot change its value here (no search service), in words. */
+function NoSearch({ title }) {
+	return /* @__PURE__ */ jsxs("p", {
+		role: "note",
+		className: "text-kit-xs text-kit-fg-3",
+		children: [
+			"No reference search is connected to this editor, so ",
+			title,
+			" can't be changed here."
+		]
+	});
+}
+function ReferenceControl({ field, value, onChange, readOnly, id }) {
+	const env = useKitEnv();
+	const { searchReferences, toast } = useKitServices();
+	const to = targetsOf(field);
+	const noun = referenceNoun(to);
+	const current = typeof value === "string" && value ? value : null;
+	const rec = useReferenceRecords(React.useMemo(() => current ? [current] : [], [current]), to);
+	const canCreate = useCanCreate(to) && !readOnly;
+	const [open, setOpen] = React.useState(false);
+	const pick = (o) => {
+		rec.remember(o);
+		onChange(o.id);
+		setOpen(false);
+	};
+	const editable = !readOnly;
+	const body = !editable ? null : !searchReferences ? /* @__PURE__ */ jsx(PopoverContent, {
+		className: "w-[300px] p-3",
+		align: "start",
+		collisionAvoidance: SHIFT,
+		children: /* @__PURE__ */ jsx(NoSearch, { title: field.title })
+	}) : /* @__PURE__ */ jsx(PopoverContent, {
+		className: "w-[300px] p-0",
+		align: "start",
+		collisionAvoidance: SHIFT,
+		children: /* @__PURE__ */ jsx(PickerBody, {
+			to,
+			filter: field.reference?.filter,
+			selected: current ? [current] : [],
+			noun,
+			onPick: pick,
+			onNone: current ? () => {
+				onChange(null);
+				setOpen(false);
+			} : void 0,
+			canCreate,
+			onCreated: (o) => {
+				pick(o);
+				toast?.success(`${noun.replace(/^./, (c) => c.toUpperCase())} created as a draft`, { description: `“${o.title}”` });
+			}
+		})
+	});
+	const missing = !!current && rec.missing.has(current);
+	if (current && !missing) {
+		const o = rec.known[current];
+		const title = o?.title ?? (rec.loading ? "Loading…" : current);
+		const subtitle = o ? o.subtitle : rec.error ?? (!rec.canLookup ? `Saved ${noun} id` : null);
+		const openable = !!o && o.kind === "entry" && !!o.modelSlug && !!env.onOpenReference;
+		return /* @__PURE__ */ jsxs(Popover, {
+			open,
+			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",
+				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",
+					children: [
+						/* @__PURE__ */ jsx(RefThumb, {
+							o: o ?? null,
+							size: 32
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: "min-w-0 flex-1",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: cn("block truncate text-kit-sm font-medium text-kit-fg", !o && !rec.canLookup && "font-kit-mono text-kit-xs"),
+								children: title
+							}), subtitle ? /* @__PURE__ */ jsx("span", {
+								className: cn("block truncate text-kit-xs", rec.error && !o ? "text-kit-danger-fg" : "text-kit-fg-3"),
+								children: subtitle
+							}) : null]
+						}),
+						/* @__PURE__ */ jsx(DraftChip, { status: o?.status })
+					]
+				}), readOnly ? null : /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsx(MenuTrigger, {
+					"aria-label": `${o?.title ?? field.title} actions`,
+					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",
+					children: /* @__PURE__ */ jsx(IconDots, {
+						className: "size-4",
+						stroke: 1.5,
+						"aria-hidden": true
+					})
+				}), /* @__PURE__ */ jsxs(MenuContent, {
+					align: "end",
+					className: "w-48",
+					children: [
+						openable ? /* @__PURE__ */ jsxs(MenuItem, {
+							icon: /* @__PURE__ */ jsx(IconArrowUpRight, { stroke: 1.5 }),
+							onClick: () => env.onOpenReference({
+								collectionId: o.modelSlug,
+								entryId: o.id,
+								title: o.title
+							}),
+							children: ["Open ", o.title.length > 18 ? `${o.title.slice(0, 16)}…` : o.title]
+						}) : null,
+						editable ? /* @__PURE__ */ jsx(MenuItem, {
+							icon: /* @__PURE__ */ jsx(IconReplace, { stroke: 1.5 }),
+							onClick: () => window.setTimeout(() => setOpen(true), 0),
+							children: "Replace"
+						}) : null,
+						openable || editable ? /* @__PURE__ */ jsx(MenuSeparator, {}) : null,
+						/* @__PURE__ */ jsx(MenuItem, {
+							danger: true,
+							icon: /* @__PURE__ */ jsx(IconTrash, { stroke: 1.5 }),
+							onClick: () => onChange(null),
+							children: "Remove"
+						})
+					]
+				})] })]
+			}), body]
+		});
+	}
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+			id,
+			disabled: !editable,
+			"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"),
+			children: [
+				/* @__PURE__ */ jsx(IconFileDatabase, {
+					className: "size-4 shrink-0",
+					stroke: 1.5,
+					"aria-hidden": true
+				}),
+				missing ? /* @__PURE__ */ jsxs("span", {
+					className: "flex-1 truncate",
+					children: [
+						"Missing ",
+						noun,
+						/* @__PURE__ */ jsx("span", {
+							className: "sr-only",
+							children: ". Deleted, or not visible to you. The saved id stays until you replace or remove it."
+						})
+					]
+				}) : /* @__PURE__ */ jsxs("span", {
+					className: "flex-1 truncate",
+					children: ["Select ", withArticle(noun)]
+				}),
+				/* @__PURE__ */ jsx(IconChevronDown, {
+					className: "size-3.5 shrink-0",
+					stroke: 1.5,
+					"aria-hidden": true
+				})
+			]
+		}), body]
+	});
+}
+function RefChip({ id, o, canLookup, readOnly, sort, onRemove }) {
+	const handle = sort.handle(id);
+	const title = o?.title ?? (canLookup ? "Loading…" : id);
+	return /* @__PURE__ */ jsxs("span", {
+		ref: sort.register(id),
+		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, {
+				o: o ?? null,
+				size: 20
+			}), /* @__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
+			})
+		})]
+	});
+}
+/** Multi-reference: an array of reference ids. `field` is the ARRAY field; the engine hands it the item's `reference`. */
+function ReferencesControl({ field, value, onChange, readOnly, id }) {
+	const { searchReferences } = useKitServices();
+	const item = Array.isArray(field.of) ? field.of[0] : void 0;
+	const to = item?.reference?.to ?? field.reference?.to ?? [];
+	const filter = item?.reference?.filter ?? field.reference?.filter;
+	const noun = referenceNoun(to);
+	const ids = React.useMemo(() => (Array.isArray(value) ? value : []).filter((x) => typeof x === "string" && x !== ""), [value]);
+	const rec = useReferenceRecords(ids, to);
+	const canCreate = useCanCreate(to) && !readOnly;
+	const max = field.validation?.max;
+	const missingIds = ids.filter((x) => rec.missing.has(x));
+	const shown = missingIds.length ? ids.filter((x) => !rec.missing.has(x)) : ids;
+	const sort = useDragReorder(shown, (from, to2) => {
+		const next = [...shown];
+		const [moved] = next.splice(from, 1);
+		next.splice(to2, 0, moved);
+		let i = 0;
+		onChange(ids.map((x) => rec.missing.has(x) ? x : next[i++]));
+	}, {
+		axis: "grid",
+		disabled: readOnly
+	});
+	const missingNoun = missingIds.length === 1 ? noun : plural(noun);
+	const toggle = (o) => {
+		rec.remember(o);
+		if (ids.includes(o.id)) return onChange(ids.filter((x) => x !== o.id));
+		if (max != null && ids.length >= max) return onChange([...ids.slice(0, -1), o.id]);
+		onChange([...ids, o.id]);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1",
+		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",
+				children: [
+					shown.map((x) => /* @__PURE__ */ jsx(RefChip, {
+						id: x,
+						o: rec.known[x],
+						canLookup: rec.canLookup,
+						readOnly,
+						sort,
+						onRemove: () => onChange(ids.filter((y) => y !== x))
+					}, x)),
+					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",
+							stroke: 1.5,
+							"aria-hidden": true
+						}), "Add"]
+					}), /* @__PURE__ */ jsx(PopoverContent, {
+						className: "w-[300px] p-0",
+						align: "start",
+						collisionAvoidance: SHIFT,
+						children: !searchReferences ? /* @__PURE__ */ jsx("div", {
+							className: "p-3",
+							children: /* @__PURE__ */ jsx(NoSearch, { title: field.title })
+						}) : /* @__PURE__ */ jsx(PickerBody, {
+							to,
+							filter,
+							selected: ids,
+							multi: true,
+							max,
+							noun,
+							onPick: toggle,
+							canCreate,
+							onCreated: (o) => {
+								rec.remember(o);
+								onChange(max != null && ids.length >= max ? [...ids.slice(0, -1), o.id] : [...ids, o.id]);
+							}
+						})
+					})] }) : ids.length === 0 ? /* @__PURE__ */ jsx("span", {
+						className: "px-1.5 text-kit-sm text-kit-fg-3",
+						children: "None"
+					}) : null,
+					missingIds.length ? /* @__PURE__ */ jsxs("span", {
+						"data-missing": true,
+						"data-slot": "kit-reference-missing",
+						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",
+						children: [/* @__PURE__ */ jsxs("span", {
+							className: "truncate tabular-nums",
+							children: [
+								missingIds.length,
+								" missing",
+								/* @__PURE__ */ jsxs("span", {
+									className: "sr-only",
+									children: [
+										" ",
+										missingNoun,
+										". Deleted, or not visible to you. The saved ",
+										missingIds.length === 1 ? "id stays" : "ids stay",
+										" until you remove ",
+										missingIds.length === 1 ? "it" : "them",
+										"."
+									]
+								})
+							]
+						}), readOnly ? null : /* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-label": `Remove ${missingIds.length} missing ${missingNoun}`,
+							onClick: () => onChange(ids.filter((y) => !rec.missing.has(y))),
+							className: "flex rounded-kit-sm p-0.5 hover:bg-kit-hover hover:text-kit-fg",
+							children: /* @__PURE__ */ jsx(IconX, {
+								className: "size-3",
+								stroke: 1.5,
+								"aria-hidden": true
+							})
+						})]
+					}) : null
+				]
+			}),
+			rec.error ? /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "text-kit-xs text-kit-danger-fg",
+				children: rec.error
+			}) : null,
+			max != null ? /* @__PURE__ */ jsxs("span", {
+				className: "self-end tabular-nums text-kit-xs text-kit-fg-3",
+				children: [
+					ids.length,
+					" / ",
+					max
+				]
+			}) : null
+		]
+	});
+}
+//#endregion
+export { ReferenceControl, ReferencesControl };
+
+//# sourceMappingURL=reference.js.map