@bettercms-ai/kit 0.1.1 → 2.0.0

package/dist/engine/array.js

@@ -0,0 +1,906 @@
+import { cn } from "../lib/cn.js";
+import { useForm, useKitEnv, useKitServices } from "../context.js";
+import { ensureKeys, isObj, itemId, newKey, pathKey } from "../lib/path.js";
+import { KitIcon } from "../lib/icons.js";
+import { FieldLabelForContext } from "../ui/field-context.js";
+import { Button } from "../ui/button.js";
+import { Menu, MenuContent, MenuItem, MenuLabel, MenuSeparator, MenuTrigger, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, Popover, PopoverAnchor, PopoverContent, Tooltip } from "../ui/overlay.js";
+import { initialFor, itemNoun, itemOpenMode, itemSchemaFor, itemSchemas, newItem, previewOf, primitiveItem } from "../lib/schema.js";
+import { IssueDot, Thumb } from "./bits.js";
+import { FieldShell, PeerStack } from "./field-shell.js";
+import { INSET_LINE, InsetScope } from "./grouping.js";
+import { FieldList } from "./field-list.js";
+import { ItemList, OrderLockSlot, arrayMove, useDragReorder } from "./item-list.js";
+import { CONTROLS, FallbackControl, useFieldAccess } from "./kit-field.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { IconArrowDown, IconArrowUp, IconArrowsDiagonal, IconCheck, IconChevronDown, IconChevronRight, IconCopy, IconDots, IconGripVertical, IconMinus, IconPlus, IconRowInsertBottom, IconRowInsertTop, IconTrash, IconX } from "@tabler/icons-react";
+import { AnimatePresence, motion } from "framer-motion";
+//#region src/engine/array.tsx
+/**
+* ARRAYS — compact PREVIEW ROWS that rest closed (CPO D8 + production; V2 HEAD 9829bf1 kit/engine/array.tsx): grip ·
+* thumb · title + subtitle · validation dot · presence · always-visible ⋯ (Move up/down, Duplicate, Add above/below,
+* Remove). Opening a row follows ONE rule (CPO D43): ≤3 simple fields expand inline, else it drills in (`openMode`
+* overrides). Reorder by drag with layout animation; delete with an Undo toast; "Add {noun}" (a type menu when several
+* item types); min/max honoured.
+* Arrays of primitives render as a gallery (images), reference chips, or — for text, numbers and URLs — the ITEM LIST
+* (CPO D47): one input per row, no drill. Arrays of one-field objects (`[{ text }]`) use the same item list. Small
+* objects with an `included` / `isIncluded` switch get that switch as a check on the row itself.
+*
+* Host wiring (RowsHostContext): a drill row calls `drill(path)` (the frame push); without one it falls back to
+* `form.navigate` while the form draws frames (`form.canNavigate`), else drill rows are inert (no button, no ›).
+* Dialog items render the host's `NestedForm` (V2 kit-field NestedForm: its own navigation stack); without one the
+* dialog shows the item's FieldList.
+*
+* Kit deviations from V2: sorting is `useDragReorder` (no @dnd-kit in the kit; it keeps dnd-kit's pointer and keyboard
+* sensor semantics: Space / Enter picks up, arrows move, Space / Enter drops as one write, Escape cancels; the table editor's cross-list drag via
+* `sortableId` is not ported); toasts come from KitServices (absent → silent); the gallery and reference-chip controls come from
+* ARRAY_CONTROLS (registered by the controls lane); a host that never registered them edits the raw list (FallbackControl).
+*/
+var RowsHostContext = React.createContext({});
+/** The frame push for a drill row, or undefined when nothing can draw the frame (the row is then inert). */
+function useDrill() {
+	const host = React.useContext(RowsHostContext);
+	const form = useForm();
+	return host.drill ?? (form?.canNavigate ? form.navigate : void 0);
+}
+/** Primitive-array controls V2 imports from controls/media (GalleryControl) and controls/reference (ReferencesControl). */
+var ARRAY_CONTROLS = {};
+var plural = (noun) => noun.endsWith("y") && !/[aeiou]y$/.test(noun) ? `${noun.slice(0, -1)}ies` : noun.endsWith("s") ? noun : `${noun}s`;
+function ArrayField({ field, path }) {
+	const prim = primitiveItem(field);
+	if (prim) return /* @__PURE__ */ jsx(PrimitiveArray, {
+		field,
+		item: prim,
+		path
+	});
+	const one = oneFieldItem(field);
+	if (one) return /* @__PURE__ */ jsx(OneFieldArray, {
+		field,
+		item: one.item,
+		inner: one.inner,
+		path
+	});
+	return /* @__PURE__ */ jsx(ObjectArray, {
+		field,
+		path
+	});
+}
+/** Item types that edit as one line in the item list. */
+var LIST_KIND = {
+	string: "text",
+	text: "text",
+	slug: "text",
+	url: "url",
+	email: "email",
+	number: "number"
+};
+/** `[{ _key, text }]` — an object item with exactly one line-like field edits as the item list (unless the schema forces another open mode). */
+function oneFieldItem(field) {
+	if (field.openMode && field.openMode !== "inline") return void 0;
+	const of = itemSchemas(field);
+	const item = of.length === 1 ? of[0] : void 0;
+	const inner = item?.type === "object" && item.fields?.length === 1 ? item.fields[0] : void 0;
+	return item && inner && LIST_KIND[inner.type] && !inner.scale ? {
+		item,
+		inner
+	} : void 0;
+}
+/** The boolean an item shows as a check on its row ("included" in a feature list). */
+var ROW_TOGGLE = /^(is)?included$/i;
+var rowToggleField = (s) => s?.fields?.find((f) => f.type === "boolean" && ROW_TOGGLE.test(f.name));
+/** List meta on the message line: "3 items · max 6". */
+function listMeta(n, field) {
+	const { min, max } = field.validation ?? {};
+	const base = `${n} ${n === 1 ? "item" : "items"}`;
+	return max != null ? `${base} · max ${max}` : min != null ? `${base} · min ${min}` : n ? base : "";
+}
+function PrimitiveArray({ field, item, path }) {
+	const form = useForm();
+	const id = React.useId();
+	const { readOnly } = useFieldAccess(field);
+	const key = pathKey(path);
+	const value = form.getAt(path);
+	const list = Array.isArray(value) ? value : [];
+	const onChange = (v) => form.setAt(path, v);
+	const props = {
+		field,
+		value: list,
+		onChange,
+		id,
+		readOnly,
+		path,
+		onBlur: () => form.touch(key)
+	};
+	const kind = LIST_KIND[item.type];
+	const adapter = React.useMemo(() => kind ? {
+		kind,
+		read: (v) => v == null ? "" : String(v),
+		write: (v) => v,
+		valuePath: (i) => [i],
+		placeholder: item.placeholder ?? (item.title && !/^(item|value)$/i.test(item.title) ? item.title : void 0)
+	} : void 0, [
+		kind,
+		item.placeholder,
+		item.title
+	]);
+	const Gallery = ARRAY_CONTROLS.gallery;
+	const References = ARRAY_CONTROLS.references;
+	const control = item.type === "image" ? Gallery ? /* @__PURE__ */ jsx(Gallery, { ...props }) : /* @__PURE__ */ jsx(FallbackControl, { ...props }) : item.type === "reference" ? References ? /* @__PURE__ */ jsx(References, {
+		...props,
+		field: {
+			...field,
+			reference: item.reference
+		}
+	}) : /* @__PURE__ */ jsx(FallbackControl, { ...props }) : adapter ? /* @__PURE__ */ jsx(ItemList, {
+		field,
+		path,
+		list,
+		readOnly,
+		adapter,
+		inputId: id
+	}) : /* @__PURE__ */ jsx(InlineList, {
+		field,
+		item,
+		path,
+		list,
+		readOnly
+	});
+	return /* @__PURE__ */ jsx(FieldShell, {
+		field,
+		path,
+		id,
+		value: list,
+		onChange,
+		readOnly,
+		issue: form.visibleIssue(key),
+		meta: item.type === "reference" ? void 0 : /* @__PURE__ */ jsx("span", {
+			className: "text-kit-xs text-kit-fg-3",
+			children: listMeta(list.length, field)
+		}),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "@container",
+			children: control
+		})
+	});
+}
+function OneFieldArray({ field, item, inner, path }) {
+	const form = useForm();
+	const id = React.useId();
+	const { readOnly } = useFieldAccess(field);
+	const key = pathKey(path);
+	const value = form.getAt(path);
+	const list = Array.isArray(value) ? value : [];
+	const adapter = React.useMemo(() => ({
+		kind: LIST_KIND[inner.type],
+		read: (v) => {
+			const x = isObj(v) ? v[inner.name] : void 0;
+			return x == null ? "" : String(x);
+		},
+		write: (v, prev) => ({
+			...isObj(prev) ? prev : newItem(field, item),
+			[inner.name]: v
+		}),
+		keyOf: (v) => isObj(v) && typeof v._key === "string" ? v._key : void 0,
+		valuePath: (i) => [i, inner.name],
+		placeholder: inner.placeholder ?? item.preview?.fallback?.replace(/^Untitled /i, "").replace(/^./, (c) => c.toUpperCase())
+	}), [
+		field,
+		item,
+		inner
+	]);
+	React.useEffect(() => {
+		if (!readOnly && list.some((it) => isObj(it) && typeof it._key !== "string")) form.setAt(path, ensureKeys(list));
+	}, [list, readOnly]);
+	return /* @__PURE__ */ jsx(FieldShell, {
+		field,
+		path,
+		id,
+		value: list,
+		onChange: (v) => form.setAt(path, v),
+		readOnly,
+		issue: form.visibleIssue(key),
+		meta: /* @__PURE__ */ jsx("span", {
+			className: "text-kit-xs text-kit-fg-3",
+			children: listMeta(list.length, field)
+		}),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "@container",
+			children: /* @__PURE__ */ jsx(ItemList, {
+				field,
+				path,
+				list,
+				readOnly,
+				adapter,
+				inputId: id
+			})
+		})
+	});
+}
+function InlineList({ field, item, path, list, readOnly }) {
+	const form = useForm();
+	const Control = CONTROLS[item.type] ?? FallbackControl;
+	const max = field.validation?.max;
+	const ids = list.map((_, i) => `p${i}`);
+	const sort = useDragReorder(ids, (from, to) => form.setAt(path, arrayMove(list, from, to)), { disabled: readOnly || !!field.orderLocked });
+	const ops = useListOps(field, path, list, (next) => form.setAt(path, next));
+	const rowControl = (v, i) => /* @__PURE__ */ jsx(Control, {
+		field: {
+			...item,
+			title: `${item.title} ${i + 1}`
+		},
+		value: v,
+		onChange: (n) => form.setAt([...path, i], n),
+		id: `${pathKey(path)}-${i}`,
+		path: [...path, i],
+		readOnly
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1.5",
+		children: [
+			list.map((v, i) => /* @__PURE__ */ jsxs(InlineRow, {
+				id: ids[i],
+				labelId: `${pathKey(path)}-${i}-label`,
+				sort,
+				readOnly,
+				orderLocked: !!field.orderLocked,
+				onRemove: () => ops.remove(i, `${item.title} ${i + 1}`),
+				children: [/* @__PURE__ */ jsx("span", {
+					id: `${pathKey(path)}-${i}-label`,
+					className: "sr-only",
+					children: `${item.title} ${i + 1}`
+				}), /* @__PURE__ */ jsx(FieldLabelForContext.Provider, {
+					value: {
+						htmlFor: `${pathKey(path)}-${i}`,
+						labelId: `${pathKey(path)}-${i}-label`
+					},
+					children: rowControl(v, i)
+				})]
+			}, ids[i])),
+			sort.a11y,
+			readOnly ? null : /* @__PURE__ */ jsxs(Button, {
+				size: "sm",
+				variant: "ghost",
+				className: "self-start text-kit-fg-2",
+				leftIcon: /* @__PURE__ */ jsx(IconPlus, { stroke: 1.5 }),
+				disabled: max != null && list.length >= max,
+				onClick: () => form.setAt(path, [...list, initialFor(item)]),
+				children: ["Add ", itemNoun(field)]
+			})
+		]
+	});
+}
+function InlineRow({ id, labelId, sort, children, onRemove, readOnly, orderLocked }) {
+	return /* @__PURE__ */ jsxs("div", {
+		ref: sort.register(id),
+		style: sort.style(id),
+		className: cn("group/il flex items-start gap-1", sort.active === id && "relative z-10"),
+		children: [
+			readOnly ? null : orderLocked ? /* @__PURE__ */ jsx(OrderLockSlot, { className: "mt-1.5" }) : /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Drag to reorder",
+				...sort.handle(id),
+				className: "mt-1.5 flex h-5 w-4 shrink-0 cursor-grab touch-none items-center justify-center text-kit-fg-4 hover:text-kit-fg-2 active:cursor-grabbing",
+				children: /* @__PURE__ */ jsx(IconGripVertical, {
+					className: "size-3.5",
+					stroke: 1.5
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				role: "group",
+				"aria-labelledby": labelId,
+				className: "min-w-0 flex-1",
+				children
+			}),
+			readOnly ? null : /* @__PURE__ */ jsx(Tooltip, {
+				content: "Remove",
+				children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "Remove",
+					onClick: onRemove,
+					className: "mt-1 flex size-6 shrink-0 items-center justify-center rounded-kit-md text-kit-fg-3 opacity-0 transition-opacity hover:bg-kit-hover hover:text-kit-fg focus-visible:opacity-100 group-hover/il:opacity-100",
+					children: /* @__PURE__ */ jsx(IconX, {
+						className: "size-3.5",
+						stroke: 1.5
+					})
+				})
+			})
+		]
+	});
+}
+function ObjectArray({ field, path }) {
+	const form = useForm();
+	const host = React.useContext(RowsHostContext);
+	const drill = useDrill();
+	const id = React.useId();
+	const { readOnly } = useFieldAccess(field);
+	const key = pathKey(path);
+	const value = form.getAt(path);
+	const list = Array.isArray(value) ? value : [];
+	const of = itemSchemas(field);
+	const mode = itemOpenMode(field);
+	const rows = list.map((it, i) => {
+		const s = itemSchemaFor(field, it);
+		const tf = rowToggleField(s);
+		return {
+			id: itemId(it, i),
+			index: i,
+			item: it,
+			preview: previewOf(s, it, i, s?.title ?? itemNoun(field)),
+			path: [...path, i],
+			chip: of.length > 1 ? s?.title : void 0,
+			dim: tf ? isObj(it) && it[tf.name] === false : void 0
+		};
+	});
+	const write = (next) => form.setAt(path, ensureKeys(next));
+	const ops = useListOps(field, path, list, write, (i) => mode === "drill" ? drill?.([...path, i]) : void 0);
+	const [openId, setOpenId] = React.useState(null);
+	const dialogNav = React.useRef(null);
+	const Nested = host.NestedForm;
+	return /* @__PURE__ */ jsx(FieldShell, {
+		field,
+		path,
+		id,
+		value: list,
+		onChange: (v) => form.setAt(path, v),
+		readOnly,
+		issue: form.visibleIssue(key),
+		meta: /* @__PURE__ */ jsx("span", {
+			className: "text-kit-xs text-kit-fg-3",
+			children: listMeta(list.length, field)
+		}),
+		children: /* @__PURE__ */ jsx(RowList, {
+			field,
+			rows,
+			readOnly,
+			layout: field.arrayLayout ?? "list",
+			mode,
+			openId,
+			onOpen: mode === "drill" ? drill && ((r) => drill(r.path)) : (r) => setOpenId(openId === r.id ? null : r.id),
+			onCloseInline: () => setOpenId(null),
+			ops,
+			dialogNav,
+			rowToggle: (r) => {
+				const tf = rowToggleField(itemSchemaFor(field, r.item));
+				if (!tf) return null;
+				const on = isObj(r.item) && r.item[tf.name] !== false;
+				return /* @__PURE__ */ jsx(RowCheck, {
+					on,
+					label: tf.title,
+					title: r.preview.title,
+					readOnly,
+					onToggle: () => form.setAt([...r.path, tf.name], !on)
+				});
+			},
+			renderInline: (r) => {
+				const s = itemSchemaFor(field, r.item);
+				if (mode === "dialog" && Nested) return /* @__PURE__ */ jsx(Nested, {
+					fields: s?.fields ?? [],
+					title: r.preview.title,
+					icon: s?.icon,
+					path: r.path,
+					navRef: dialogNav
+				});
+				const tf = rowToggleField(s);
+				return /* @__PURE__ */ jsx(FieldList, {
+					fields: (s?.fields ?? []).filter((f) => f !== tf),
+					basePath: r.path,
+					memoryKey: `inl:${pathKey(r.path)}`
+				});
+			},
+			emptyLabel: `No ${plural(itemNoun(field))} yet.`,
+			addButton: /* @__PURE__ */ jsx(AddItemButton, {
+				field,
+				disabled: readOnly || field.validation?.max != null && list.length >= field.validation.max,
+				onAdd: ops.add
+			})
+		})
+	});
+}
+/** Shared list operations (arrays and slots). Remove shows an Undo toast; add can drill into the new item. */
+function useListOps(field, _path, list, write, afterAdd) {
+	const { toast } = useKitServices();
+	const { min, max } = field.validation ?? {};
+	const atMax = max != null && list.length >= max;
+	const atMin = min != null && list.length <= min;
+	const limit = () => toast?.("Limit reached", { description: `${field.title} allows ${max} at most.` });
+	return {
+		atMax,
+		atMin,
+		add: (item, at = list.length) => {
+			if (atMax) return limit();
+			write([
+				...list.slice(0, at),
+				item,
+				...list.slice(at)
+			]);
+			window.setTimeout(() => afterAdd?.(at), 0);
+		},
+		duplicate: (i) => {
+			if (atMax) return limit();
+			const copy = isObj(list[i]) ? {
+				...structuredClone(list[i]),
+				_key: newKey()
+			} : list[i];
+			write([
+				...list.slice(0, i + 1),
+				copy,
+				...list.slice(i + 1)
+			]);
+		},
+		move: (i, d) => write(arrayMove(list, i, i + d)),
+		reorder: (from, to) => write(arrayMove(list, from, to)),
+		remove: (i, title) => {
+			if (atMin) return toast?.(`At least ${min} required`, { description: `${field.title} needs ${min} or more.` });
+			const prev = list;
+			write(list.filter((_, j) => j !== i));
+			toast?.(`“${title}” removed`, {
+				action: {
+					label: "Undo",
+					onClick: () => write(prev)
+				},
+				duration: 1e4
+			});
+		},
+		insertBlank: (at) => {
+			const s = itemSchemas(field)[0];
+			if (!s || atMax) return;
+			write([
+				...list.slice(0, at),
+				newItem(field, s),
+				...list.slice(at)
+			]);
+		}
+	};
+}
+function AddItemButton({ field, onAdd, disabled }) {
+	const of = itemSchemas(field);
+	const noun = itemNoun(field);
+	if (of.length <= 1) return /* @__PURE__ */ jsxs(Button, {
+		size: "sm",
+		variant: "ghost",
+		className: "text-kit-fg-2",
+		leftIcon: /* @__PURE__ */ jsx(IconPlus, { stroke: 1.5 }),
+		disabled,
+		onClick: () => of[0] && onAdd(newItem(field, of[0])),
+		children: ["Add ", noun]
+	});
+	return /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsxs(MenuTrigger, {
+		render: /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			variant: "ghost",
+			className: "text-kit-fg-2",
+			leftIcon: /* @__PURE__ */ jsx(IconPlus, { stroke: 1.5 }),
+			disabled
+		}),
+		children: ["Add ", noun]
+	}), /* @__PURE__ */ jsxs(MenuContent, {
+		align: "start",
+		className: "w-64",
+		children: [/* @__PURE__ */ jsxs(MenuLabel, { children: ["Add to ", field.title.toLowerCase()] }), of.map((s) => /* @__PURE__ */ jsx(MenuItem, {
+			icon: /* @__PURE__ */ jsx(KitIcon, { name: s.icon }),
+			onClick: () => onAdd(newItem(field, s)),
+			className: "h-auto py-1.5",
+			children: /* @__PURE__ */ jsxs("span", {
+				className: "flex flex-col",
+				children: [/* @__PURE__ */ jsx("span", { children: s.title }), s.description ? /* @__PURE__ */ jsx("span", {
+					className: "whitespace-normal text-kit-xs text-kit-fg-3",
+					children: s.description
+				}) : null]
+			})
+		}, s.name))]
+	})] });
+}
+/** The row list used by arrays AND slots. Without `onOpen` the rows are inert (a drill nothing can draw yet). */
+function RowList({ field, rows, readOnly, layout, mode, openId, onOpen, onCloseInline, ops, renderInline, emptyLabel, addButton, leading, rowToggle, dialogNav, menuExtra }) {
+	const sort = useDragReorder(rows.map((r) => r.id), ops.reorder, {
+		axis: layout === "grid" ? "grid" : "y",
+		disabled: readOnly || !!field.orderLocked,
+		distance: 5
+	});
+	const openRow = rows.find((r) => r.id === openId);
+	if (rows.length === 0) return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col items-center gap-2 rounded-kit-lg border border-dashed border-kit-line-strong px-4 py-5 text-center",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-kit-sm text-kit-fg-3",
+			children: emptyLabel
+		}), readOnly ? null : addButton]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1.5",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: cn(layout === "grid" ? "grid grid-cols-2 gap-1.5 @[520px]:grid-cols-3" : "overflow-hidden rounded-kit-lg border border-kit-line bg-kit-surface"),
+				children: /* @__PURE__ */ jsx(AnimatePresence, {
+					initial: false,
+					children: rows.map((r) => /* @__PURE__ */ jsx(Row, {
+						r,
+						count: rows.length,
+						field,
+						readOnly,
+						grid: layout === "grid",
+						mode,
+						open: openId === r.id,
+						onOpen: onOpen ? () => onOpen(r) : void 0,
+						ops,
+						sort,
+						leading: leading?.(r),
+						toggle: rowToggle?.(r),
+						extra: menuExtra?.(r),
+						inline: mode === "inline" && openId === r.id ? renderInline(r) : null,
+						popover: mode === "popover" && openId === r.id ? renderInline(r) : null,
+						onClosePopover: onCloseInline
+					}, r.id))
+				})
+			}),
+			sort.a11y,
+			readOnly ? null : /* @__PURE__ */ jsx("div", {
+				className: "flex items-center",
+				children: addButton
+			}),
+			mode === "dialog" && openRow ? /* @__PURE__ */ jsx(Modal, {
+				open: true,
+				onOpenChange: (o, d) => {
+					if (o) return;
+					if (d.reason === "escape-key" && dialogNav?.current?.back()) return d.cancel();
+					onCloseInline();
+				},
+				children: /* @__PURE__ */ jsxs(ModalContent, {
+					size: "lg",
+					children: [
+						/* @__PURE__ */ jsx(ModalHeader, {
+							title: openRow.preview.title,
+							description: `${field.title} · ${openRow.index + 1} of ${rows.length}`,
+							icon: /* @__PURE__ */ jsx(KitIcon, { name: openRow.preview.icon ?? field.icon })
+						}),
+						/* @__PURE__ */ jsx(ModalBody, {
+							className: "flex min-h-[320px] flex-col gap-5",
+							children: renderInline(openRow)
+						}),
+						/* @__PURE__ */ jsxs(ModalFooter, { children: [/* @__PURE__ */ jsx("span", {
+							className: "mr-auto text-kit-xs text-kit-fg-3",
+							children: "Changes save as you type"
+						}), /* @__PURE__ */ jsx(Button, {
+							variant: "primary",
+							onClick: onCloseInline,
+							children: "Done"
+						})] })
+					]
+				})
+			}) : null
+		]
+	});
+}
+function Row({ r, count, field, readOnly, grid, mode, open, onOpen, ops, sort, leading, toggle, extra, inline, popover, onClosePopover }) {
+	const form = useForm();
+	const env = useKitEnv();
+	const uid = React.useId();
+	const isDragging = sort.active === r.id;
+	const dragging = sort.active != null;
+	const roll = form?.rollup(r.path) ?? {
+		errors: 0,
+		warnings: 0
+	};
+	const peers = Object.entries(env.presence).filter(([k]) => k === pathKey(r.path) || k.startsWith(`${pathKey(r.path)}.`)).flatMap(([, p]) => p);
+	const nChanged = env.review?.count(r.path) ?? 0;
+	const changeBar = nChanged ? /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: "pointer-events-none absolute inset-y-1.5 left-0 z-[1] w-0.5 rounded-full",
+		style: { background: env.review.color(r.path) ?? "var(--kit-warning)" }
+	}) : null;
+	const changedNote = nChanged ? `${nChanged} changed` : "";
+	const menu = readOnly ? null : /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsx(MenuTrigger, {
+		"aria-label": `${r.preview.title} actions`,
+		onClick: (e) => e.stopPropagation(),
+		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 data-[popup-open]:text-kit-fg",
+		children: /* @__PURE__ */ jsx(IconDots, {
+			className: "size-4",
+			stroke: 1.5
+		})
+	}), /* @__PURE__ */ jsxs(MenuContent, {
+		align: "end",
+		className: "w-52",
+		children: [
+			/* @__PURE__ */ jsx(MenuItem, {
+				icon: /* @__PURE__ */ jsx(IconArrowUp, { stroke: 1.5 }),
+				disabled: !!field.orderLocked || r.index === 0,
+				onClick: () => ops.move(r.index, -1),
+				children: "Move up"
+			}),
+			/* @__PURE__ */ jsx(MenuItem, {
+				icon: /* @__PURE__ */ jsx(IconArrowDown, { stroke: 1.5 }),
+				disabled: !!field.orderLocked || r.index === count - 1,
+				onClick: () => ops.move(r.index, 1),
+				children: "Move down"
+			}),
+			/* @__PURE__ */ jsx(MenuSeparator, {}),
+			/* @__PURE__ */ jsx(MenuItem, {
+				icon: /* @__PURE__ */ jsx(IconCopy, { stroke: 1.5 }),
+				disabled: ops.atMax,
+				onClick: () => ops.duplicate(r.index),
+				children: ops.atMax ? "Duplicate · limit reached" : "Duplicate"
+			}),
+			field.type === "array" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuItem, {
+				icon: /* @__PURE__ */ jsx(IconRowInsertTop, { stroke: 1.5 }),
+				disabled: ops.atMax,
+				onClick: () => ops.insertBlank(r.index),
+				children: "Add item above"
+			}), /* @__PURE__ */ jsx(MenuItem, {
+				icon: /* @__PURE__ */ jsx(IconRowInsertBottom, { stroke: 1.5 }),
+				disabled: ops.atMax,
+				onClick: () => ops.insertBlank(r.index + 1),
+				children: "Add item below"
+			})] }) : null,
+			extra ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuSeparator, {}), extra] }) : null,
+			/* @__PURE__ */ jsx(MenuSeparator, {}),
+			/* @__PURE__ */ jsx(MenuItem, {
+				danger: true,
+				icon: /* @__PURE__ */ jsx(IconTrash, { stroke: 1.5 }),
+				disabled: ops.atMin,
+				onClick: () => ops.remove(r.index, r.preview.title),
+				children: ops.atMin ? `Remove · at least ${field.validation?.min} required` : "Remove"
+			})
+		]
+	})] });
+	const grip = readOnly ? null : field.orderLocked ? /* @__PURE__ */ jsx(OrderLockSlot, { className: "h-7 items-center" }) : /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": `Reorder ${r.preview.title}`,
+		onClick: (e) => e.stopPropagation(),
+		...sort.handle(r.id),
+		className: "relative flex h-7 w-4 shrink-0 cursor-grab touch-none items-center justify-center text-kit-fg-4 transition-colors before:absolute before:-inset-2 hover:text-kit-fg-2 active:cursor-grabbing",
+		children: /* @__PURE__ */ jsx(IconGripVertical, {
+			className: "size-3.5",
+			stroke: 1.5
+		})
+	});
+	if (grid) {
+		const tile = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			className: "flex aspect-[4/3] items-center justify-center bg-kit-muted",
+			children: r.preview.media ? /* @__PURE__ */ jsx("img", {
+				src: r.preview.media,
+				alt: "",
+				className: "size-full object-cover"
+			}) : /* @__PURE__ */ jsx(KitIcon, {
+				name: r.preview.icon ?? field.icon,
+				className: "size-5 text-kit-fg-3"
+			})
+		}), /* @__PURE__ */ jsx("span", {
+			className: "block truncate px-2 pb-1.5 pt-1.5 text-kit-xs font-medium text-kit-fg",
+			children: r.preview.title
+		})] });
+		return /* @__PURE__ */ jsx("div", {
+			ref: sort.register(r.id),
+			style: sort.style(r.id),
+			className: cn("relative", isDragging && "z-10"),
+			children: /* @__PURE__ */ jsxs(motion.div, {
+				layout: !isDragging ? "position" : false,
+				initial: {
+					opacity: 0,
+					scale: .97
+				},
+				animate: {
+					opacity: 1,
+					scale: 1
+				},
+				exit: {
+					opacity: 0,
+					scale: .97
+				},
+				className: cn("group/row relative overflow-hidden rounded-kit-lg border border-kit-line bg-kit-surface transition-colors hover:border-kit-line-strong", isDragging && "shadow-kit-lg"),
+				children: [
+					onOpen ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: onOpen,
+						"aria-label": `Open ${r.preview.title}, ${r.index + 1} of ${count}`,
+						"aria-haspopup": mode === "popover" || mode === "dialog" ? "dialog" : void 0,
+						className: "block w-full text-left",
+						children: tile
+					}) : /* @__PURE__ */ jsx("div", {
+						className: "block w-full text-left",
+						children: tile
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "absolute right-1 top-1 flex items-center gap-0.5 rounded-kit-md bg-kit-surface/90 opacity-0 shadow-kit-xs transition-opacity group-hover/row:opacity-100 [@media(pointer:coarse)]:opacity-100",
+						children: [grip, menu]
+					}),
+					/* @__PURE__ */ jsx(IssueDot, {
+						errors: roll.errors,
+						warnings: roll.warnings,
+						className: "absolute left-2 top-2 ring-2 ring-kit-surface"
+					}),
+					changeBar
+				]
+			})
+		});
+	}
+	const inlineMode = mode === "inline";
+	const bodyId = `${uid}${r.id}-body`;
+	const verb = inlineMode ? open ? "Collapse" : "Expand" : "Open";
+	const trailing = !onOpen ? null : inlineMode ? /* @__PURE__ */ jsx(IconChevronDown, {
+		"aria-hidden": true,
+		className: cn("size-4 shrink-0 text-kit-fg-3 transition-transform duration-200", open && "rotate-180 text-kit-fg-2"),
+		stroke: 1.5
+	}) : mode === "drill" ? /* @__PURE__ */ jsx(IconChevronRight, {
+		"aria-hidden": true,
+		className: "size-4 shrink-0 text-kit-fg-3 transition-transform duration-150 group-hover/row:translate-x-0.5",
+		stroke: 1.5
+	}) : /* @__PURE__ */ jsx(IconArrowsDiagonal, {
+		"aria-hidden": true,
+		className: "size-3.5 shrink-0 text-kit-fg-3",
+		stroke: 1.5
+	});
+	const titleInner = /* @__PURE__ */ jsxs(Fragment, { children: [leading ?? (toggle && !r.preview.media ? null : /* @__PURE__ */ jsx(Thumb, {
+		media: r.preview.media,
+		icon: r.preview.icon ?? field.icon
+	})), /* @__PURE__ */ jsxs("span", {
+		className: "min-w-0 flex-1",
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: cn("flex items-center gap-1.5 truncate text-kit-sm", r.preview.empty || r.dim ? "text-kit-fg-3" : "text-kit-fg", open && "font-medium"),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: r.preview.title
+			}), r.chip ? /* @__PURE__ */ jsx("span", {
+				className: "shrink-0 rounded-kit-md bg-kit-muted px-1 text-kit-2xs font-medium text-kit-fg-2",
+				children: r.chip
+			}) : null]
+		}), (r.extra ?? r.preview.subtitle) || changedNote ? /* @__PURE__ */ jsxs("span", {
+			className: "block truncate text-kit-xs text-kit-fg-3",
+			children: [changedNote ? /* @__PURE__ */ jsxs("span", {
+				className: "text-kit-fg-2",
+				children: [changedNote, r.extra ?? r.preview.subtitle ? " · " : ""]
+			}) : null, r.extra ?? r.preview.subtitle]
+		}) : null]
+	})] });
+	const rowInner = /* @__PURE__ */ jsxs("div", {
+		onClick: (e) => {
+			const target = e.target;
+			if (!onOpen || !e.currentTarget.contains(target) || target.closest("button,[role^=menuitem],a,input")) return;
+			onOpen();
+		},
+		className: cn(onOpen ? "group/row flex min-h-12 cursor-pointer items-center gap-2 py-1.5 pl-1.5 pr-2 transition-colors" : "group/row flex min-h-12 items-center gap-2 py-1.5 pl-1.5 pr-2 transition-colors", open ? "bg-kit-subtle" : onOpen && "hover:bg-kit-subtle"),
+		children: [
+			grip,
+			toggle,
+			onOpen ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onOpen,
+				"data-row-open": r.id,
+				"aria-expanded": mode === "drill" ? void 0 : open,
+				"aria-controls": inlineMode && open ? bodyId : void 0,
+				"aria-haspopup": mode === "popover" || mode === "dialog" ? "dialog" : void 0,
+				"aria-label": `${verb} ${r.preview.title}${r.chip ? `, ${r.chip}` : ""}${changedNote ? `, ${changedNote}` : ""}, ${r.index + 1} of ${count}`,
+				className: "flex min-w-0 flex-1 items-center gap-2.5 rounded-kit-md text-left outline-none",
+				children: titleInner
+			}) : /* @__PURE__ */ jsx("div", {
+				"data-row-open": r.id,
+				className: "flex min-w-0 flex-1 items-center gap-2.5 text-left",
+				children: titleInner
+			}),
+			/* @__PURE__ */ jsx(IssueDot, {
+				errors: roll.errors,
+				warnings: roll.warnings
+			}),
+			peers.length ? /* @__PURE__ */ jsx(PeerStack, {
+				peers,
+				size: 16
+			}) : null,
+			menu,
+			trailing
+		]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref: sort.register(r.id),
+		style: sort.style(r.id),
+		"data-row-id": r.id,
+		className: cn("relative border-b border-kit-line-subtle bg-kit-surface last:border-b-0", isDragging && "z-10 rounded-kit-lg shadow-kit-lg ring-1 ring-kit-line-strong"),
+		children: [changeBar, /* @__PURE__ */ jsxs(motion.div, {
+			layout: !isDragging && !dragging ? "position" : false,
+			initial: dragging ? false : {
+				opacity: 0,
+				height: 0
+			},
+			animate: {
+				opacity: 1,
+				height: "auto"
+			},
+			exit: dragging ? {
+				opacity: 0,
+				height: 0,
+				transition: { duration: 0 }
+			} : {
+				opacity: 0,
+				height: 0
+			},
+			transition: {
+				duration: .2,
+				ease: [
+					.22,
+					1,
+					.36,
+					1
+				]
+			},
+			className: "overflow-hidden",
+			children: [mode === "popover" ? /* @__PURE__ */ jsxs(Popover, {
+				open,
+				onOpenChange: (o) => !o && onClosePopover(),
+				children: [/* @__PURE__ */ jsx(PopoverAnchor, { render: rowInner }), /* @__PURE__ */ jsx(PopoverContent, {
+					className: "w-[340px] p-4",
+					align: "end",
+					side: "left",
+					sideOffset: 10,
+					children: popover
+				})]
+			}) : rowInner, inlineMode ? /* @__PURE__ */ jsx(AnimatePresence, {
+				initial: false,
+				children: open ? /* @__PURE__ */ jsx(motion.div, {
+					initial: {
+						height: 0,
+						opacity: 0
+					},
+					animate: {
+						height: "auto",
+						opacity: 1
+					},
+					exit: {
+						height: 0,
+						opacity: 0
+					},
+					transition: {
+						duration: .2,
+						ease: [
+							.22,
+							1,
+							.36,
+							1
+						]
+					},
+					className: "overflow-hidden",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "px-3 pb-3 pt-1",
+						children: /* @__PURE__ */ jsx("div", {
+							id: bodyId,
+							role: "group",
+							"aria-label": r.preview.title,
+							"data-group": "inset",
+							className: INSET_LINE,
+							children: /* @__PURE__ */ jsx(InsetScope, { children: inline })
+						})
+					})
+				}) : null
+			}) : null]
+		})]
+	});
+}
+/** The included / not-included check on a feature row (D47): a real checkbox, outside the row's open button. */
+function RowCheck({ on, label, title, readOnly, onToggle }) {
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: on ? label : `Not ${label.toLowerCase()}`,
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			role: "checkbox",
+			"aria-checked": on,
+			"aria-label": `${label}: ${title}`,
+			disabled: readOnly,
+			onClick: (e) => {
+				e.stopPropagation();
+				onToggle();
+			},
+			className: "group/chk flex size-7 shrink-0 items-center justify-center rounded-kit-md transition-colors hover:bg-kit-hover disabled:pointer-events-none",
+			children: /* @__PURE__ */ jsx("span", {
+				className: cn("flex size-[18px] items-center justify-center rounded-full transition-colors", on ? "bg-kit-control-checked text-kit-fg-inverse" : "border border-dashed border-kit-field-border-hover text-kit-fg-3 group-hover/chk:border-[var(--kit-emphasis-line)]"),
+				children: on ? /* @__PURE__ */ jsx(IconCheck, {
+					className: "size-3",
+					stroke: 2.5
+				}) : /* @__PURE__ */ jsx(IconMinus, {
+					className: "size-3",
+					stroke: 2
+				})
+			})
+		})
+	});
+}
+//#endregion
+export { ARRAY_CONTROLS, ArrayField, RowList, RowsHostContext, rowToggleField, useDrill, useListOps };
+
+//# sourceMappingURL=array.js.map