@bettercms-ai/kit 0.1.0 → 1.0.0

package/controls/table/table-editor.js

@@ -0,0 +1,2722 @@
+import { cn } from "../../lib/cn.js";
+import { useKitServices } from "../../context.js";
+import { Button, IconButton } from "../../ui/button.js";
+import { Segmented, Switch } from "../../ui/controls.js";
+import { Menu, MenuCheckItem, MenuContent, MenuItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger, Popover, PopoverAnchor, PopoverContent } from "../../ui/overlay.js";
+import { GENERAL_TABLE, boolLabels, cellNote, cellText, cellType, cellValue, coerce, isCellObject, isEmptyCell, isObjLike, normalizeTable, orderedRows, parseDelimited, parseTableElement, pasteRange, tableFromRows, tableToRows, tkey, toBool, toNumber, withValue } from "../../schema/table.js";
+import { Input, Textarea } from "../../ui/input.js";
+import { FieldSection, FieldUnit, FieldUnitRow } from "../../engine/grouping.js";
+import { Select } from "../../ui/select.js";
+import { LinkField, hrefOf, linkText, normLink } from "../link.js";
+import { SharedSortProvider, useSharedSort } from "../../engine/item-list.js";
+import { RowList } from "../../engine/array.js";
+import { ExpandedEditorModal } from "../../ui/expanded-editor-modal.js";
+import { PathCrumbs } from "../../ui/path-crumbs.js";
+import { ChoiceSwitch } from "../../ui/choice-switch.js";
+import { LinkAddressButton, isScriptHref, tableLink } from "./table-link.js";
+import { refLabel, useRefSearch } from "./refs.js";
+import * as React from "react";
+import { IconAlignLeft, IconArrowDown, IconArrowUp, IconArrowsMaximize, IconCheck, IconChevronDown, IconCurrencyDollar, IconDots, IconFileDatabase, IconFolder, IconGripVertical, IconHash, IconLayoutColumns, IconLetterT, IconLink, IconList, IconPlus, IconStar, IconTable, IconToggleRight } from "@tabler/icons-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ContextMenu } from "@base-ui/react/context-menu";
+//#region src/kit/controls/table/table-editor.tsx
+/**
+* TABLE EDITOR (CPO D42, D49, D50, D52; port of V2 src/components/table/table-editor.tsx) — calm by default.
+*
+*  Default   nested array UX (D50): Title, Columns (an array list), Rows (nested under their groups, each the kit's own
+*            array row: first cell, summary, ⋯, ›), Note under the table, then a collapsed Table settings. A row or column
+*            drills through the kit form's navigation (standard breadcrumb + frame header, TableFrame); outside a form,
+*            through a local drill with the same trail. A row is one field per column; the column's type picks the
+*            control; per-cell exceptions (words instead, footnote, clear) sit behind a quiet ⋯ by the cell's label.
+*  Expanded  the spreadsheet lives ONLY in the expanded-editor modal (D49), opened by ⤢ in the field's label row: click a
+*            cell and type, Tab / arrows / Enter move, "+" adds a column, grips reorder, ⋯ / Shift+F10 / right-click for
+*            column, row and cell options.
+*  Settings  (D52) only presentation and structure, only what `field.table.settings` offers this kind.
+*
+* Kit deviations from V2 (no @dnd-kit / Radix in the kit): rows reorder inside their run with the kit's useDragReorder
+* (pointer + ↑/↓ on the grip); moving a row to another group is the row's ⋯ › Move to group (V2 also allowed dragging it
+* across). The cell context menu is Base UI's ContextMenu. Toasts come from KitServices (absent → silent). Link cells use
+* the table's own address editor (table-link.tsx) in the spreadsheet and the global LinkField in a drilled row (as V2); reference cells search through the host (refs.ts).
+*/
+var TYPE_UI = {
+	text: {
+		label: "Text",
+		icon: IconLetterT
+	},
+	number: {
+		label: "Number",
+		icon: IconHash
+	},
+	money: {
+		label: "Price",
+		icon: IconCurrencyDollar
+	},
+	boolean: {
+		label: "Yes / No",
+		icon: IconToggleRight
+	},
+	link: {
+		label: "Link",
+		icon: IconLink
+	},
+	rating: {
+		label: "Rating",
+		icon: IconStar
+	},
+	"richtext-inline": {
+		label: "Rich text",
+		icon: IconAlignLeft,
+		dev: true
+	},
+	reference: {
+		label: "Page or CMS item",
+		icon: IconFileDatabase,
+		dev: true
+	}
+};
+var NUMERIC = [
+	"number",
+	"money",
+	"rating"
+];
+var CURRENCIES = [
+	"USD",
+	"EUR",
+	"GBP",
+	"INR"
+];
+var TypeIcon = ({ type, className }) => {
+	const I = TYPE_UI[type].icon;
+	return /* @__PURE__ */ jsx(I, {
+		className: cn("size-3.5 shrink-0 text-kit-fg-4", className),
+		stroke: 1.75,
+		"aria-hidden": true
+	});
+};
+/** A ⋯ trigger: shown on hover / focus of its group, always on touch. */
+var DOTS = "flex size-6 shrink-0 items-center justify-center rounded-kit-md text-kit-fg-3 outline-none hover:bg-kit-hover hover:text-kit-fg data-[popup-open]:bg-kit-hover data-[popup-open]:text-kit-fg";
+var mapRow = (key, f) => (t) => ({
+	...t,
+	rows: t.rows.map((r) => r._key === key ? f(r) : r)
+});
+var clean = (r) => {
+	const x = { ...r };
+	[
+		"group",
+		"footer",
+		"type",
+		"highlight"
+	].forEach((k) => !x[k] && delete x[k]);
+	return x;
+};
+/** What a person typed → the cell. A value that doesn't fit its column (e.g. "Partly" in Yes / No) becomes a text cell. */
+function typedCell(prev, col, row, raw) {
+	const colType = row.type ?? col.type;
+	const own = isCellObject(prev) ? prev.type : void 0;
+	const plain = raw.trim();
+	const note = cellNote(prev);
+	const fits = (ty) => !plain || (ty !== "number" && ty !== "money" && ty !== "rating" || toNumber(plain.replace(/(USD|EUR|GBP|JPY|INR|AUD|CAD|CHF)$/i, "")) != null) && (ty !== "boolean" || toBool(plain) != null);
+	let type = own;
+	if (own === "text" && fits(colType)) type = void 0;
+	else if (!own && !fits(colType)) type = "text";
+	const ty = type ?? colType;
+	let v;
+	if (ty === "link") {
+		const p = cellValue(prev);
+		const l = isObjLike(p) && !("ref" in p) ? p : null;
+		v = plain ? {
+			...l ?? {},
+			label: plain,
+			href: l?.href ?? ""
+		} : null;
+	} else v = coerce(raw, {
+		type: ty,
+		max: col.max
+	});
+	return type || note ? {
+		value: v,
+		...type ? { type } : {},
+		...note ? { note } : {}
+	} : v;
+}
+/** Change a column's type; filled cells are re-read as the new type (words that don't fit become a text cell). */
+function retype(t, key, type, resolveRef) {
+	const col = t.columns.find((c) => c._key === key);
+	if (!col || col.type === type) return t;
+	const next = {
+		...col,
+		type,
+		...type === "money" && !col.currency ? { currency: "USD" } : {}
+	};
+	if (type !== "number") delete next.unit;
+	if (type !== "money") delete next.currency;
+	if (type !== "rating") delete next.max;
+	if (type !== "boolean") {
+		delete next.trueLabel;
+		delete next.falseLabel;
+	}
+	if (type !== "reference") delete next.refTo;
+	if (type !== "number" && type !== "money") delete next.decimals;
+	return {
+		...t,
+		columns: t.columns.map((c) => c._key === key ? next : c),
+		rows: t.rows.map((r) => {
+			const cell = r.cells[key];
+			if (isCellObject(cell) && cell.type || r.type) return r;
+			const v = cellValue(cell);
+			if (isEmptyCell(v)) return r;
+			const raw = col.type === "link" && isObjLike(v) ? v.label : col.type === "reference" && isObjLike(v) ? refLabel(v) : cellText(col, r, cell, resolveRef);
+			const written = type === "reference" ? raw ? {
+				value: raw,
+				type: "text"
+			} : null : typedCell(cell, next, r, raw);
+			return {
+				...r,
+				cells: {
+					...r.cells,
+					[key]: written
+				}
+			};
+		})
+	};
+}
+var displayRows = (t) => {
+	const { bodies, foot } = orderedRows(t);
+	const out = [];
+	bodies.forEach((b) => b.rows.forEach((row, i) => out.push({
+		row,
+		groupStart: i === 0 ? b.group : void 0
+	})));
+	foot.forEach((row, i) => out.push({
+		row,
+		footStart: i === 0
+	}));
+	return out;
+};
+/** Move a row to a displayed position; crossing into another group (or the totals) takes on that place. */
+function moveRowTo(t, from, to) {
+	const order = displayRows(t).map((d) => d.row);
+	if (to < 0 || to >= order.length || from === to) return t;
+	const [r] = order.splice(from, 1);
+	const target = order[Math.min(to, order.length - 1)] ?? r;
+	order.splice(to, 0, clean({
+		...r,
+		group: target.group,
+		footer: target.footer
+	}));
+	return {
+		...t,
+		rows: order
+	};
+}
+var rowTitle = (t, r, i, resolveRef) => {
+	const c = t.columns[0];
+	return c && cellText(c, r, r.cells[c._key], resolveRef) || `Row ${i + 1}`;
+};
+var moveItem = (list, from, to) => {
+	const next = list.slice();
+	const [x] = next.splice(from, 1);
+	next.splice(to, 0, x);
+	return next;
+};
+var dropColumn = (t, key) => ({
+	...t,
+	columns: t.columns.filter((c) => c._key !== key),
+	rows: t.rows.map((r) => ({
+		...r,
+		cells: Object.fromEntries(Object.entries(r.cells).filter(([k]) => k !== key))
+	}))
+});
+var copyColumn = (t, i) => {
+	const c = t.columns[i];
+	const k = tkey("c");
+	const columns = [
+		...t.columns.slice(0, i + 1),
+		{
+			...c,
+			_key: k,
+			label: c.label ? `${c.label} copy` : "",
+			...c.highlight ? { highlight: void 0 } : {}
+		},
+		...t.columns.slice(i + 1)
+	];
+	return {
+		...t,
+		columns,
+		rows: t.rows.map((r) => r.cells[c._key] === void 0 ? r : {
+			...r,
+			cells: {
+				...r.cells,
+				[k]: r.cells[c._key]
+			}
+		})
+	};
+};
+/** CPO D49: the ONE way into the spreadsheet — opens it in the shared ExpandedEditorModal. Place it next to the title. */
+function TableFullScreenButton({ onOpen, className }) {
+	return /* @__PURE__ */ jsx(IconButton, {
+		size: "sm",
+		label: "Edit in full screen",
+		className,
+		onClick: onOpen,
+		children: /* @__PURE__ */ jsx(IconArrowsMaximize, { stroke: 1.5 })
+	});
+}
+function TableEditor(props) {
+	const { value, onChange, readOnly, actions, label, options = GENERAL_TABLE, developer, resolveRef, nav, fullScreen } = props;
+	const t = React.useMemo(() => normalizeTable(value), [value]);
+	const [fullInner, setFullInner] = React.useState(false);
+	const full = fullScreen?.open ?? fullInner;
+	const setFull = fullScreen?.onOpenChange ?? setFullInner;
+	const root = React.useRef(null);
+	const { toast } = useKitServices();
+	const ctx = makeCtx({
+		t,
+		onChange,
+		options,
+		developer,
+		resolveRef,
+		readOnly,
+		toast
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref: root,
+		className: "flex min-w-0 flex-col",
+		"data-table-editor": "",
+		onKeyDown: (e) => e.key !== "Escape" && !e.target.closest?.("[aria-roledescription=\"sortable\"]") && e.stopPropagation(),
+		onPaste: (e) => e.stopPropagation(),
+		onCut: (e) => e.stopPropagation(),
+		onCopy: (e) => e.stopPropagation(),
+		children: [/* @__PURE__ */ jsx(TableBody, {
+			ctx,
+			label,
+			nav,
+			head: /* @__PURE__ */ jsxs(Fragment, { children: [readOnly || fullScreen ? null : /* @__PURE__ */ jsx(TableFullScreenButton, {
+				className: "-my-1",
+				onOpen: () => setFull(true)
+			}), actions] })
+		}), /* @__PURE__ */ jsx(ExpandedEditorModal, {
+			open: full,
+			onOpenChange: setFull,
+			layout: "wide",
+			crumbs: [
+				props.parentTitle,
+				label || "Table",
+				t.caption || void 0
+			].filter(Boolean),
+			meta: `${t.rows.length} ${t.rows.length === 1 ? "row" : "rows"} · ${t.columns.length} ${t.columns.length === 1 ? "column" : "columns"}`,
+			returnFocus: () => fullScreen?.returnFocus?.() ?? root.current?.querySelector("button[aria-label=\"Edit in full screen\"]") ?? null,
+			initialFocus: () => document.querySelector("[role=dialog] [data-cell=\"0:0\"], [role=dialog] [data-cell=\"-1:0\"]"),
+			children: full ? /* @__PURE__ */ jsx("div", {
+				"data-table-editor": "",
+				className: "flex min-h-0 flex-1 flex-col",
+				onPaste: (e) => e.stopPropagation(),
+				children: /* @__PURE__ */ jsx(Grid, {
+					ctx,
+					label,
+					full: true
+				})
+			}) : null
+		})]
+	});
+}
+function makeCtx({ t, onChange, options = {}, developer, resolveRef, readOnly, toast }) {
+	const types = Object.keys(TYPE_UI).filter((ty) => options.columnTypes ? options.columnTypes.includes(ty) : !TYPE_UI[ty].dev || developer);
+	return {
+		t,
+		set: onChange,
+		edit: (f) => onChange(f(t)),
+		options,
+		developer: !!developer,
+		types,
+		resolveRef,
+		lock: !!options.lockColumns || !!readOnly,
+		readOnly: !!readOnly,
+		undoable: (message, prev, description) => toast?.(message, {
+			description,
+			action: {
+				label: "Undo",
+				onClick: () => onChange(prev)
+			},
+			duration: 1e4
+		})
+	};
+}
+/**
+* One row or one column of a table, as the body of a drilled frame (D50). The kit form shows it under the standard
+* breadcrumb and frame header, exactly like an FAQ item; hosts without a form get the same body from TableEditor.
+*/
+function TableItemEditor({ kind, index, value, onChange, options, developer, resolveRef, readOnly }) {
+	const t = React.useMemo(() => normalizeTable(value), [value]);
+	const { toast } = useKitServices();
+	const ctx = makeCtx({
+		t,
+		onChange,
+		options,
+		developer,
+		resolveRef,
+		readOnly,
+		toast
+	});
+	if (kind === "row") {
+		const row = t.rows[index];
+		return row ? /* @__PURE__ */ jsx(RowFields, {
+			ctx,
+			row
+		}) : /* @__PURE__ */ jsx(Gone, { kind: "row" });
+	}
+	const col = t.columns[index];
+	return col ? /* @__PURE__ */ jsx(ColumnFields, {
+		ctx,
+		col
+	}) : /* @__PURE__ */ jsx(Gone, { kind: "column" });
+}
+/** A frame restored onto a row or column that was deleted elsewhere says so, never an empty body. */
+var Gone = ({ kind }) => /* @__PURE__ */ jsxs("p", {
+	role: "note",
+	className: "text-kit-sm text-kit-fg-3",
+	children: [
+		"This ",
+		kind,
+		" is no longer in the table."
+	]
+});
+/** A column's minimum width: its longest header word + the type icon and ⋯ never break mid-word (≥ 96px, ≤ 240px). */
+var colMinWidth = (c, full) => {
+	const longest = Math.max(0, ...c.label.split(/\s+/).map((w) => w.length));
+	return Math.min(240, Math.max(full ? 150 : 96, Math.ceil(longest * 7.6) + 58));
+};
+function Grid({ ctx, label, full }) {
+	const { t, set, lock, readOnly } = ctx;
+	const { toast } = useKitServices();
+	const rows = displayRows(t);
+	const cols = t.columns;
+	const host = React.useRef(null);
+	const pending = React.useRef(null);
+	const [, bump] = React.useReducer((n) => n + 1, 0);
+	const focus = (r, c) => {
+		pending.current = `${r}:${c}`;
+		bump();
+	};
+	React.useLayoutEffect(() => {
+		const p = pending.current;
+		if (!p) return;
+		const el = host.current?.querySelector(`[data-cell="${p}"]`);
+		if (!el) return;
+		pending.current = null;
+		el.focus({ preventScroll: true });
+		el.scrollIntoView?.({
+			block: "nearest",
+			inline: "nearest"
+		});
+		if (el instanceof HTMLTextAreaElement) el.setSelectionRange(el.value.length, el.value.length);
+	});
+	const bodyCount = t.rows.filter((r) => !r.footer).length;
+	const atMaxRows = !!ctx.options.maxRows && bodyCount >= ctx.options.maxRows;
+	const atMaxCols = !!ctx.options.maxColumns && cols.length >= ctx.options.maxColumns;
+	const addRow = (at = rows.length) => {
+		if (readOnly) return;
+		const anchor = rows[Math.min(at, rows.length) - 1]?.row;
+		const intoTotals = !!anchor?.footer && at < rows.length;
+		if (atMaxRows && !intoTotals) return toast?.("Limit reached", { description: `This table allows ${ctx.options.maxRows} rows at most.` });
+		const order = rows.map((d) => d.row);
+		order.splice(at, 0, {
+			_key: tkey("r"),
+			cells: {},
+			...anchor?.group ? { group: anchor.group } : {},
+			...intoTotals ? { footer: true } : {}
+		});
+		set({
+			...t,
+			rows: order
+		});
+		focus(at, 0);
+	};
+	const addCol = (at = cols.length) => {
+		if (lock) return;
+		if (atMaxCols) return toast?.("Limit reached", { description: `This table allows ${ctx.options.maxColumns} columns at most.` });
+		const next = [...cols];
+		next.splice(at, 0, {
+			_key: tkey("c"),
+			label: "",
+			type: "text"
+		});
+		set({
+			...t,
+			columns: next
+		});
+		focus(-1, at);
+	};
+	const move = (from, dir) => {
+		const r = from.r + (dir === "down" ? 1 : dir === "up" ? -1 : 0);
+		const c = from.c + (dir === "right" ? 1 : dir === "left" ? -1 : 0);
+		if (c < 0 || c >= cols.length || r < -1) return;
+		if (r >= rows.length) return addRow();
+		focus(r, c);
+	};
+	const onPaste = (e, r, c) => {
+		if (readOnly) return false;
+		const html = e.clipboardData.getData("text/html");
+		const text = e.clipboardData.getData("text/plain");
+		let range = [];
+		if (html && /<table[\s>]/i.test(html) && typeof DOMParser !== "undefined") {
+			const tbl = new DOMParser().parseFromString(html, "text/html").querySelector("table");
+			if (tbl) range = tableToRows(parseTableElement(tbl)).slice(r < 0 ? 0 : 1);
+		}
+		if (!range.length && /[\t\n]/.test(text.trim())) range = parseDelimited(text);
+		if (!range.length) return false;
+		e.preventDefault();
+		const blank = t.rows.every((x) => Object.values(x.cells).every((v) => isEmptyCell(cellValue(v)))) && cols.every((x) => !x.label.trim());
+		let next;
+		if (blank && !lock && range.length > 1) {
+			const n = tableFromRows(range, { header: true });
+			next = {
+				...t,
+				columns: n.columns,
+				rows: n.rows,
+				headerColumn: n.headerColumn || t.headerColumn
+			};
+		} else next = pasteRange({
+			...t,
+			rows: rows.map((d) => d.row)
+		}, {
+			row: r,
+			col: c
+		}, range, { lockColumns: lock });
+		const body = next.rows.filter((x) => !x.footer).length;
+		if (ctx.options.maxRows && body > ctx.options.maxRows) {
+			toast?.("Paste not applied", { description: `It would make ${body} rows; this table allows ${ctx.options.maxRows}.` });
+			return true;
+		}
+		if (ctx.options.maxColumns && next.columns.length > ctx.options.maxColumns) {
+			toast?.("Paste not applied", { description: `It would make ${next.columns.length} columns; this table allows ${ctx.options.maxColumns}.` });
+			return true;
+		}
+		set(next);
+		toast?.(`Pasted ${range.length} ${range.length === 1 ? "row" : "rows"}`);
+		return true;
+	};
+	const drag = React.useRef(null);
+	const helpId = `${React.useId()}-grid-help`;
+	const [over, setOver] = React.useState(null);
+	const drop = (kind, i) => {
+		const d = drag.current;
+		drag.current = null;
+		setOver(null);
+		if (!d || d.kind !== kind || d.i === i) return;
+		if (kind === "row") set(moveRowTo(t, d.i, i));
+		else if (!lock) set({
+			...t,
+			columns: moveItem(cols, d.i, i)
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: host,
+		className: cn("min-w-0 overflow-x-auto rounded-kit-lg border border-kit-line bg-kit-surface", full && "max-h-full min-h-0 flex-1 overflow-auto"),
+		"data-full": full ? "" : void 0,
+		children: [
+			/* @__PURE__ */ jsxs("table", {
+				role: "grid",
+				"aria-label": label || t.caption || "Table",
+				"aria-describedby": helpId,
+				className: "w-full border-separate border-spacing-0 text-kit-sm",
+				children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+					/* @__PURE__ */ jsx("th", {
+						className: cn("w-8 border-b border-kit-line bg-kit-subtle", full && "sticky left-0 top-0 z-[3]"),
+						"aria-hidden": true
+					}),
+					cols.map((c, ci) => /* @__PURE__ */ jsx("th", {
+						scope: "col",
+						style: { minWidth: colMinWidth(c, full) },
+						className: cn("group/col relative border-b border-l border-kit-line bg-kit-subtle p-0 text-left align-bottom font-medium", full && "sticky top-0 z-[2]", full && ci === 0 && "left-8 z-[3]", over?.kind === "col" && over.i === ci && "shadow-[inset_2px_0_0_var(--kit-fg-2)]"),
+						onDragOver: (e) => drag.current?.kind === "col" && (e.preventDefault(), setOver({
+							kind: "col",
+							i: ci
+						})),
+						onDrop: () => drop("col", ci),
+						children: /* @__PURE__ */ jsx(ColumnMenu, {
+							ctx,
+							col: c,
+							index: ci,
+							onInsert: (right) => addCol(right ? ci + 1 : ci),
+							children: (openMenu) => /* @__PURE__ */ jsxs(Fragment, { children: [
+								lock ? null : /* @__PURE__ */ jsx("span", {
+									draggable: true,
+									onDragStart: (e) => (drag.current = {
+										kind: "col",
+										i: ci
+									}, e.dataTransfer.setData("text/plain", c.label)),
+									className: "-ml-1 hidden cursor-grab text-kit-fg-4 group-hover/col:block",
+									"aria-hidden": true,
+									children: /* @__PURE__ */ jsx(IconGripVertical, {
+										className: "size-3.5",
+										stroke: 1.5
+									})
+								}),
+								/* @__PURE__ */ jsx(TypeIcon, { type: c.type }),
+								/* @__PURE__ */ jsx(CellInput, {
+									cell: `-1:${ci}`,
+									value: c.label,
+									display: c.label,
+									placeholder: ci === 0 && t.headerColumn ? "Row names" : "Column name",
+									readOnly: lock,
+									className: cn("font-medium text-kit-fg", !t.headerRow && "text-kit-fg-3"),
+									ariaLabel: `Column ${ci + 1} name${t.headerRow ? "" : " (not shown on the page)"}`,
+									onCommit: (v) => set({
+										...t,
+										columns: t.columns.map((x) => x._key === c._key ? {
+											...x,
+											label: v.replace(/\s+/g, " ").trim()
+										} : x)
+									}),
+									onMove: (dir) => move({
+										r: -1,
+										c: ci
+									}, dir),
+									onMenu: openMenu,
+									onPaste: (e) => onPaste(e, -1, ci)
+								})
+							] })
+						})
+					}, c._key)),
+					/* @__PURE__ */ jsx("th", {
+						className: "w-9 border-b border-l border-kit-line bg-kit-subtle p-0",
+						children: lock ? null : /* @__PURE__ */ jsx(IconButton, {
+							size: "xs",
+							label: "Add column",
+							className: "mx-auto",
+							disabled: atMaxCols,
+							onClick: () => addCol(),
+							children: /* @__PURE__ */ jsx(IconPlus, { stroke: 1.75 })
+						})
+					})
+				] }) }), /* @__PURE__ */ jsx("tbody", { children: rows.map(({ row, groupStart, footStart }, ri) => /* @__PURE__ */ jsxs(React.Fragment, { children: [groupStart || footStart ? /* @__PURE__ */ jsx("tr", {
+					"aria-hidden": true,
+					children: /* @__PURE__ */ jsx("td", {
+						colSpan: cols.length + 2,
+						className: "border-t border-kit-line bg-[var(--kit-subtle-2)] px-2 py-1 text-kit-2xs font-medium text-kit-fg-3",
+						children: groupStart ? groupStart.label || "Untitled group" : "Totals"
+					})
+				}) : null, /* @__PURE__ */ jsxs("tr", {
+					className: cn("group/row", over?.kind === "row" && over.i === ri && "shadow-[inset_0_2px_0_var(--kit-fg-2)]"),
+					onDragOver: (e) => drag.current?.kind === "row" && (e.preventDefault(), setOver({
+						kind: "row",
+						i: ri
+					})),
+					onDrop: () => drop("row", ri),
+					children: [
+						/* @__PURE__ */ jsx("td", {
+							className: cn("w-8 border-t border-kit-line bg-[var(--kit-subtle-2)] p-0 align-middle", full && "sticky left-0 z-[1] bg-kit-subtle"),
+							children: readOnly ? /* @__PURE__ */ jsx("div", {
+								className: "flex h-8 items-center justify-center text-kit-2xs text-kit-fg-4",
+								children: ri + 1
+							}) : /* @__PURE__ */ jsx(RowMenu, {
+								ctx,
+								row,
+								index: ri,
+								count: rows.length,
+								onInsert: (below) => addRow(below ? ri + 1 : ri),
+								children: (trigger) => /* @__PURE__ */ jsxs("div", {
+									draggable: true,
+									onDragStart: (e) => (drag.current = {
+										kind: "row",
+										i: ri
+									}, e.dataTransfer.setData("text/plain", String(ri))),
+									className: "flex h-8 cursor-grab items-center justify-center text-kit-2xs text-kit-fg-4",
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "group-hover/row:hidden group-focus-within/row:hidden",
+										children: ri + 1
+									}), /* @__PURE__ */ jsx("span", {
+										className: "hidden group-hover/row:flex group-focus-within/row:flex",
+										children: trigger
+									})]
+								})
+							})
+						}),
+						cols.map((c, ci) => /* @__PURE__ */ jsx(GridCell, {
+							full,
+							ctx,
+							row,
+							col: c,
+							r: ri,
+							c: ci,
+							onMove: (dir) => move({
+								r: ri,
+								c: ci
+							}, dir),
+							onPaste: (e) => onPaste(e, ri, ci)
+						}, c._key)),
+						/* @__PURE__ */ jsx("td", { className: "border-l border-t border-kit-line" })
+					]
+				})] }, row._key)) })]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				id: helpId,
+				className: "sr-only",
+				children: "Tab and the arrow keys move between cells. Shift+F10 on a column, row or cell opens its options."
+			}),
+			readOnly ? null : /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: () => addRow(),
+				disabled: atMaxRows,
+				className: "flex h-8 w-full items-center gap-1.5 border-t border-kit-line px-2.5 text-left text-kit-xs text-kit-fg-3 hover:bg-kit-subtle hover:text-kit-fg disabled:opacity-45",
+				children: [
+					/* @__PURE__ */ jsx(IconPlus, {
+						className: "size-3.5",
+						stroke: 1.75,
+						"aria-hidden": true
+					}),
+					" ",
+					atMaxRows ? `Add row · ${ctx.options.maxRows} at most` : "Add row"
+				]
+			})
+		]
+	});
+}
+/** A grid cell: always editable (no select-then-edit mode). Yes / No is a check toggle; links and references open a small editor. */
+function GridCell({ ctx, row, col, r, c, onMove, onPaste, full }) {
+	const { t, edit, resolveRef, readOnly } = ctx;
+	const cell = row.cells[col._key];
+	const v = cellValue(cell);
+	const declared = cellType(col, row, cell);
+	const ty = declared === "boolean" && !isEmptyCell(v) && toBool(v) == null ? "text" : declared;
+	const write = (next) => edit(mapRow(row._key, (x) => ({
+		...x,
+		cells: {
+			...x.cells,
+			[col._key]: next ?? null
+		}
+	})));
+	const head = t.headerColumn && c === 0;
+	const note = cellNote(cell);
+	const n = note ? (t.footnotes ?? []).findIndex((f) => f._key === note) + 1 : 0;
+	const fn = note ? (t.footnotes ?? []).find((f) => f._key === note) : void 0;
+	const [noteOpen, setNoteOpen] = React.useState(false);
+	const name = `${col.label || `Column ${c + 1}`}, ${rowTitle(t, row, r, resolveRef)}`;
+	let body;
+	if (ty === "boolean") {
+		const b = toBool(v);
+		const { yes, no } = boolLabels(col);
+		body = /* @__PURE__ */ jsx("button", {
+			type: "button",
+			role: "checkbox",
+			"aria-checked": b === true,
+			"aria-label": `${name}: ${b == null ? "not set" : b ? yes : no}`,
+			"aria-readonly": readOnly || void 0,
+			"data-cell": `${r}:${c}`,
+			onClick: () => !readOnly && write(withValue(cell, b !== true)),
+			onKeyDown: (e) => {
+				const k = e.key;
+				if (k === "ArrowUp" || k === "ArrowDown" || k === "ArrowLeft" || k === "ArrowRight") {
+					e.preventDefault();
+					onMove(k.slice(5).toLowerCase());
+				} else if (k === "Enter") {
+					e.preventDefault();
+					onMove("down");
+				} else if (readOnly) return;
+				else if (k === "Delete" || k === "Backspace") {
+					e.preventDefault();
+					write(withValue(cell, null));
+				} else if (/^[yn]$/i.test(k)) {
+					e.preventDefault();
+					write(withValue(cell, /y/i.test(k)));
+				}
+			},
+			onPaste: (e) => onPaste(e),
+			className: "flex h-8 w-full items-center px-2 outline-none focus-visible:shadow-[inset_0_0_0_2px_var(--kit-fg-3)]",
+			children: b == null ? /* @__PURE__ */ jsx("span", {
+				className: "text-kit-fg-4",
+				children: "—"
+			}) : /* @__PURE__ */ jsx("span", {
+				className: cn("flex size-4 items-center justify-center rounded-kit-sm border", b ? "border-kit-inverse bg-kit-inverse text-kit-fg-inverse" : "border-kit-line-strong"),
+				children: b ? /* @__PURE__ */ jsx(IconCheck, {
+					className: "size-3",
+					stroke: 3,
+					"aria-hidden": true
+				}) : null
+			})
+		});
+	} else if (ty === "reference") body = /* @__PURE__ */ jsx(RefCell, {
+		ctx,
+		cell,
+		col,
+		cellId: `${r}:${c}`,
+		name,
+		onWrite: write,
+		onMove
+	});
+	else {
+		const draft = isEmptyCell(v) ? "" : NUMERIC.includes(ty) ? String(toNumber(v) ?? cellText(col, row, cell)) : ty === "link" && isObjLike(v) ? v.label : ty === "richtext-inline" ? String(v) : cellText(col, row, cell, resolveRef);
+		const link = ty === "link" ? isObjLike(v) && !("ref" in v) ? v : {
+			label: typeof v === "string" ? v : "",
+			href: ""
+		} : null;
+		body = /* @__PURE__ */ jsxs("div", {
+			className: "relative flex items-start",
+			children: [
+				ty === "rating" && !isEmptyCell(v) ? /* @__PURE__ */ jsx(IconStar, {
+					className: "ml-2 mt-2 size-3 shrink-0 text-kit-warning",
+					stroke: 2,
+					"aria-hidden": true
+				}) : null,
+				/* @__PURE__ */ jsx(CellInput, {
+					cell: `${r}:${c}`,
+					value: draft,
+					display: isEmptyCell(v) ? "" : ty === "rating" ? draft : cellText(col, row, cell, resolveRef),
+					placeholder: "—",
+					numeric: NUMERIC.includes(ty),
+					readOnly,
+					className: cn(head && "font-medium", NUMERIC.includes(ty) && "text-right tabular-nums"),
+					ariaLabel: name,
+					onCommit: (raw) => raw !== draft && write(typedCell(cell, col, row, raw)),
+					onMove,
+					onPaste
+				}),
+				link ? /* @__PURE__ */ jsx(LinkAddressButton, {
+					className: "mr-1 mt-1.5",
+					link,
+					readOnly,
+					onSave: (l) => write(withValue(cell, l))
+				}) : null
+			]
+		});
+	}
+	return /* @__PURE__ */ jsxs("td", {
+		className: cn("relative border-l border-t border-kit-line p-0 align-top", head && "bg-[var(--kit-subtle-2)]", full && c === 0 && "sticky left-8 z-[1] bg-kit-surface", row.highlight && "bg-kit-accent-softer", col.highlight && "bg-kit-subtle"),
+		children: [readOnly ? body : /* @__PURE__ */ jsx(CellMenu, {
+			ctx,
+			row,
+			col,
+			cell,
+			onWrite: write,
+			onNote: () => window.setTimeout(() => setNoteOpen(true)),
+			children: body
+		}), /* @__PURE__ */ jsxs(Popover, {
+			open: noteOpen && !!fn,
+			onOpenChange: setNoteOpen,
+			children: [/* @__PURE__ */ jsx(PopoverAnchor, {
+				render: n > 0 ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					tabIndex: -1,
+					"aria-label": `Footnote ${n}`,
+					onClick: () => setNoteOpen(true),
+					className: "absolute right-0.5 top-0.5 rounded-kit-xs px-0.5 text-kit-2xs leading-3 text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg"
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "pointer-events-none absolute right-1 top-1 size-0",
+					"aria-hidden": true
+				}),
+				children: n > 0 ? n : null
+			}), /* @__PURE__ */ jsx(PopoverContent, {
+				align: "end",
+				className: "w-72 p-2",
+				children: fn ? /* @__PURE__ */ jsx(Input, {
+					size: "sm",
+					autoFocus: true,
+					value: fn.text,
+					readOnly,
+					placeholder: "What the footnote says",
+					"aria-label": `Footnote ${n}`,
+					onChange: (e) => ctx.set({
+						...t,
+						footnotes: (t.footnotes ?? []).map((x) => x._key === fn._key ? {
+							...x,
+							text: e.target.value
+						} : x)
+					}),
+					onKeyDown: (e) => e.key === "Enter" && (e.preventDefault(), setNoteOpen(false))
+				}) : null
+			})]
+		})]
+	});
+}
+/** One cell's text. Shows the written value at rest ("$39", "2.4 kg") and the raw value while typing; commits on leave. */
+function CellInput({ cell, value, display, onCommit, onMove, onMenu, onPaste, placeholder, numeric, className, ariaLabel, readOnly }) {
+	const [focused, setFocused] = React.useState(false);
+	const [draft, setDraft] = React.useState(value);
+	const ref = React.useRef(null);
+	const shown = focused ? draft : display;
+	React.useLayoutEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+		el.style.height = "0px";
+		el.style.height = `${Math.max(32, el.scrollHeight)}px`;
+	}, [shown]);
+	return /* @__PURE__ */ jsx("textarea", {
+		ref,
+		rows: 1,
+		"data-cell": cell,
+		"data-cell-editing": focused && draft !== value ? "" : void 0,
+		value: shown,
+		readOnly,
+		placeholder,
+		"aria-label": ariaLabel,
+		inputMode: numeric ? "decimal" : void 0,
+		spellCheck: !numeric,
+		onFocus: () => {
+			setDraft(value);
+			setFocused(true);
+		},
+		onBlur: () => {
+			setFocused(false);
+			if (!readOnly && draft !== value) onCommit(draft);
+		},
+		onChange: (e) => setDraft(e.target.value),
+		onPaste: (e) => onPaste?.(e),
+		onKeyDown: (e) => {
+			const el = e.currentTarget;
+			const k = e.key;
+			const atStart = el.selectionStart === 0 && el.selectionEnd === 0;
+			const atEnd = el.selectionStart === el.value.length && el.selectionEnd === el.value.length;
+			const oneLine = !el.value.includes("\n");
+			if (k === "F10" && e.shiftKey || k === "ContextMenu") {
+				if (onMenu) {
+					e.preventDefault();
+					onMenu();
+				}
+			} else if (k === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+				e.preventDefault();
+				onMove("down");
+			} else if (k === "Escape" && draft !== value) {
+				e.preventDefault();
+				e.stopPropagation();
+				setDraft(value);
+			} else if (k === "ArrowUp" && (oneLine || atStart)) {
+				e.preventDefault();
+				onMove("up");
+			} else if (k === "ArrowDown" && (oneLine || atEnd)) {
+				e.preventDefault();
+				onMove("down");
+			} else if (k === "ArrowLeft" && atStart) {
+				e.preventDefault();
+				onMove("left");
+			} else if (k === "ArrowRight" && atEnd) {
+				e.preventDefault();
+				onMove("right");
+			}
+		},
+		className: cn("block min-h-8 w-full resize-none overflow-hidden bg-transparent px-2 py-1.5 text-kit-sm leading-5 text-kit-fg outline-none [overflow-wrap:normal] [word-break:normal] placeholder:text-kit-fg-4 focus:bg-kit-surface focus:shadow-[inset_0_0_0_2px_var(--kit-fg-3)]", className)
+	});
+}
+/**
+* A reference cell: a page or entry chosen from the host's search (refs.ts). Stores `{ ref, label, href? }`: the label and
+* public path travel with the id so the published table reads without a lookup.
+*/
+function RefCell({ ctx, cell, col, cellId, name, onWrite, onMove }) {
+	const [open, setOpen] = React.useState(false);
+	const [q, setQ] = React.useState("");
+	const v = cellValue(cell);
+	const r = isObjLike(v) && "ref" in v ? v : null;
+	const label = r ? ctx.resolveRef?.(r.ref)?.label ?? refLabel(r) : typeof v === "string" ? v : "";
+	const search = useRefSearch(open, col.refTo?.length ? col.refTo : null, q);
+	const pick = (o) => {
+		onWrite(withValue(cell, {
+			ref: o.id,
+			label: o.title,
+			...o.href ? { href: o.href } : {}
+		}));
+		setOpen(false);
+	};
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: (o) => (setOpen(o), o || setQ("")),
+		children: [/* @__PURE__ */ jsx(PopoverAnchor, {
+			render: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-cell": cellId,
+				"aria-label": `${name}: ${label || "not chosen"}`,
+				"aria-haspopup": "dialog",
+				disabled: ctx.readOnly,
+				onClick: () => setOpen(true),
+				onKeyDown: (e) => {
+					const k = e.key;
+					if (k.startsWith("Arrow")) {
+						e.preventDefault();
+						onMove(k.slice(5).toLowerCase());
+					} else if (!ctx.readOnly && (k === "Delete" || k === "Backspace") && !isEmptyCell(v)) {
+						e.preventDefault();
+						onWrite(withValue(cell, null));
+					}
+				},
+				className: "flex min-h-8 w-full items-center px-2 text-left text-kit-sm text-kit-fg outline-none focus-visible:shadow-[inset_0_0_0_2px_var(--kit-fg-3)]"
+			}),
+			children: label ? /* @__PURE__ */ jsx("span", {
+				className: "truncate underline decoration-kit-fg-4 underline-offset-2",
+				children: label
+			}) : /* @__PURE__ */ jsx("span", {
+				className: "text-kit-fg-4",
+				children: "Choose…"
+			})
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			align: "start",
+			className: "w-72 p-1.5",
+			children: [
+				/* @__PURE__ */ jsx(Input, {
+					size: "sm",
+					autoFocus: true,
+					value: q,
+					placeholder: "Search…",
+					"aria-label": "Find a page or entry",
+					onChange: (e) => setQ(e.target.value)
+				}),
+				/* @__PURE__ */ jsx("div", {
+					role: "status",
+					className: "sr-only",
+					children: search.status === "ready" ? `${search.options.length} results` : search.status === "loading" ? "Searching" : ""
+				}),
+				/* @__PURE__ */ jsxs("ul", {
+					className: "mt-1 max-h-56 overflow-auto",
+					"aria-label": "Pages and entries",
+					children: [
+						search.status === "ready" ? search.options.map((o) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							className: "flex w-full flex-col rounded-kit-md px-2 py-1.5 text-left hover:bg-kit-hover",
+							onClick: () => pick(o),
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "truncate text-kit-sm text-kit-fg",
+								children: o.title
+							}), o.subtitle ? /* @__PURE__ */ jsx("span", {
+								className: "truncate text-kit-xs text-kit-fg-3",
+								children: o.subtitle
+							}) : null]
+						}) }, o.id)) : null,
+						search.status === "ready" && !search.options.length ? /* @__PURE__ */ jsxs("li", {
+							className: "px-2 py-1.5 text-kit-xs text-kit-fg-3",
+							children: [
+								"Nothing found",
+								q.trim() ? ` for “${q.trim()}”` : "",
+								"."
+							]
+						}) : null,
+						search.status === "loading" ? /* @__PURE__ */ jsx("li", {
+							className: "px-2 py-1.5 text-kit-xs text-kit-fg-3",
+							children: "Searching…"
+						}) : null,
+						search.status === "error" ? /* @__PURE__ */ jsxs("li", {
+							role: "alert",
+							className: "px-2 py-1.5 text-kit-xs text-kit-danger-fg",
+							children: ["Couldn't search: ", search.message]
+						}) : null,
+						search.status === "unavailable" ? /* @__PURE__ */ jsx("li", {
+							role: "note",
+							className: "px-2 py-1.5 text-kit-xs text-kit-fg-3",
+							children: "This view can't search pages or entries, so the cell can't change here."
+						}) : null
+					]
+				}),
+				r && !ctx.readOnly ? /* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					variant: "ghost",
+					className: "mt-1 w-full justify-start text-kit-fg-2",
+					onClick: () => (onWrite(withValue(cell, null)), setOpen(false)),
+					children: "Clear"
+				}) : null
+			]
+		})]
+	});
+}
+function ColumnMenu({ ctx, col, index, onInsert, children }) {
+	const { t, set, edit, lock, types, readOnly } = ctx;
+	const [open, setOpen] = React.useState(false);
+	const [details, setDetails] = React.useState(false);
+	const n = t.columns.length;
+	const atMax = !!ctx.options.maxColumns && n >= ctx.options.maxColumns;
+	const remove = () => {
+		if (n <= 1) return;
+		const prev = t;
+		set(dropColumn(t, col._key));
+		ctx.undoable("Column deleted", prev);
+	};
+	const shownTypes = types.includes(col.type) ? types : [...types, col.type];
+	const hasDetails = !lock && (col.type === "number" || col.type === "money" || col.type === "boolean" || col.type === "rating");
+	return /* @__PURE__ */ jsxs(Popover, {
+		open: details,
+		onOpenChange: setDetails,
+		children: [/* @__PURE__ */ jsxs(PopoverAnchor, {
+			render: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 pl-1.5 pr-0.5" }),
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "flex min-w-0 flex-1 items-center gap-1",
+				children: children(() => setOpen(true))
+			}), readOnly ? null : /* @__PURE__ */ jsxs(Menu, {
+				open,
+				onOpenChange: setOpen,
+				children: [/* @__PURE__ */ jsx(MenuTrigger, {
+					tabIndex: -1,
+					"aria-label": `Options for column ${col.label || index + 1}`,
+					className: cn(DOTS, "opacity-0 focus-visible:opacity-100 group-hover/col:opacity-100 group-focus-within/col:opacity-100 data-[popup-open]:opacity-100 [@media(pointer:coarse)]:opacity-100"),
+					children: /* @__PURE__ */ jsx(IconDots, {
+						className: "size-3.5",
+						stroke: 1.5
+					})
+				}), /* @__PURE__ */ jsxs(MenuContent, {
+					align: "end",
+					className: "min-w-52",
+					children: [
+						lock ? null : /* @__PURE__ */ jsxs(MenuSub, { children: [/* @__PURE__ */ jsxs(MenuSubTrigger, {
+							icon: /* @__PURE__ */ jsx(TypeIcon, {
+								type: col.type,
+								className: "text-kit-fg-2"
+							}),
+							children: ["Type: ", TYPE_UI[col.type].label]
+						}), /* @__PURE__ */ jsx(MenuSubContent, { children: /* @__PURE__ */ jsx(MenuRadioGroup, {
+							value: col.type,
+							onValueChange: (v) => edit((x) => retype(x, col._key, v, ctx.resolveRef)),
+							children: shownTypes.map((ty) => /* @__PURE__ */ jsx(MenuRadioItem, {
+								value: ty,
+								children: /* @__PURE__ */ jsxs("span", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ jsx(TypeIcon, {
+										type: ty,
+										className: "text-kit-fg-2"
+									}), TYPE_UI[ty].label]
+								})
+							}, ty))
+						}) })] }),
+						hasDetails ? /* @__PURE__ */ jsx(MenuItem, {
+							onClick: () => window.setTimeout(() => setDetails(true)),
+							children: col.type === "number" ? "Unit…" : col.type === "money" ? "Currency…" : col.type === "rating" ? "Scale…" : "Words for yes and no…"
+						}) : null,
+						lock ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+							/* @__PURE__ */ jsx(MenuSeparator, {}),
+							/* @__PURE__ */ jsx(MenuItem, {
+								disabled: atMax,
+								onClick: () => onInsert(false),
+								children: "Insert column left"
+							}),
+							/* @__PURE__ */ jsx(MenuItem, {
+								disabled: atMax,
+								onClick: () => onInsert(true),
+								children: "Insert column right"
+							}),
+							/* @__PURE__ */ jsx(MenuItem, {
+								disabled: atMax,
+								onClick: () => set(copyColumn(t, index)),
+								children: "Duplicate column"
+							}),
+							/* @__PURE__ */ jsx(MenuItem, {
+								disabled: index === 0,
+								onClick: () => set({
+									...t,
+									columns: moveItem(t.columns, index, index - 1)
+								}),
+								children: "Move left"
+							}),
+							/* @__PURE__ */ jsx(MenuItem, {
+								disabled: index === n - 1,
+								onClick: () => set({
+									...t,
+									columns: moveItem(t.columns, index, index + 1)
+								}),
+								children: "Move right"
+							})
+						] }),
+						/* @__PURE__ */ jsx(MenuSeparator, {}),
+						/* @__PURE__ */ jsx(MenuCheckItem, {
+							checked: t.headerRow,
+							onCheckedChange: (v) => set({
+								...t,
+								headerRow: v
+							}),
+							children: "Show column names"
+						}),
+						/* @__PURE__ */ jsx(MenuCheckItem, {
+							checked: t.headerColumn,
+							onCheckedChange: (v) => set({
+								...t,
+								headerColumn: v
+							}),
+							children: "First column names each row"
+						}),
+						/* @__PURE__ */ jsx(MenuCheckItem, {
+							checked: !!col.highlight,
+							onCheckedChange: (v) => set({
+								...t,
+								columns: t.columns.map((c) => ({
+									...c,
+									highlight: c._key === col._key && v ? true : void 0
+								}))
+							}),
+							children: "Highlight this column"
+						}),
+						lock ? null : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuSeparator, {}), /* @__PURE__ */ jsx(MenuItem, {
+							danger: true,
+							disabled: n <= 1,
+							onClick: remove,
+							children: n <= 1 ? "Delete column · a table keeps one" : "Delete column"
+						})] })
+					]
+				})]
+			})]
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			align: "end",
+			className: "w-64 p-3",
+			children: /* @__PURE__ */ jsx(ColumnDetails, {
+				col,
+				onPatch: (p) => set({
+					...t,
+					columns: t.columns.map((c) => c._key === col._key ? withPatch(c, p) : c)
+				})
+			})
+		})]
+	});
+}
+/** A stored TableLink as the global link field's value (V2 tableLinkValue). */
+var tableLinkValue = (l) => ({
+	...normLink(l.href),
+	newTab: !!l.newTab,
+	target: l.newTab ? "_blank" : "_self",
+	rel: l.rel ?? "follow"
+});
+/** Patch a column; a key set to undefined is removed (the stored value never carries an empty key). */
+function withPatch(c, p) {
+	const next = {
+		...c,
+		...p
+	};
+	for (const k of Object.keys(p)) if (next[k] === void 0) delete next[k];
+	return next;
+}
+function ColumnDetails({ col, onPatch, compact = true, readOnly }) {
+	const id = React.useId();
+	const row = (key, label, node, help) => /* @__PURE__ */ jsxs("label", {
+		htmlFor: `${id}-${key}`,
+		className: cn("flex flex-col", compact ? "gap-1" : "gap-1.5"),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: cn("font-medium text-kit-fg-2", compact ? "text-kit-xs" : "text-kit-sm"),
+				children: label
+			}),
+			node,
+			help ? /* @__PURE__ */ jsx("span", {
+				className: "text-kit-2xs leading-4 text-kit-fg-3",
+				children: help
+			}) : null
+		]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col", compact ? "gap-2.5" : "gap-4"),
+		children: [
+			col.type === "number" ? row("unit", "Unit", /* @__PURE__ */ jsx(Input, {
+				id: `${id}-unit`,
+				size: "sm",
+				autoFocus: compact,
+				readOnly,
+				maxLength: 16,
+				value: col.unit ?? "",
+				placeholder: "kg, %, min",
+				onChange: (e) => onPatch({ unit: e.target.value || void 0 })
+			}), "Written after every value.") : null,
+			col.type === "money" ? row("currency", "Currency", /* @__PURE__ */ jsx(Segmented, {
+				size: "sm",
+				"aria-label": "Currency",
+				value: col.currency ?? "USD",
+				onChange: (currency) => !readOnly && onPatch({ currency }),
+				items: (CURRENCIES.includes(col.currency ?? "USD") ? CURRENCIES : [...CURRENCIES, col.currency]).map((c) => ({
+					value: c,
+					label: c
+				}))
+			})) : null,
+			col.type === "rating" ? row("max", "Out of", /* @__PURE__ */ jsx(Input, {
+				id: `${id}-max`,
+				size: "sm",
+				autoFocus: compact,
+				readOnly,
+				type: "number",
+				min: 1,
+				max: 10,
+				value: col.max ?? 5,
+				onChange: (e) => {
+					const n = Math.round(Number(e.target.value));
+					onPatch({ max: Number.isFinite(n) && n >= 1 ? Math.min(10, n) : void 0 });
+				}
+			})) : null,
+			col.type === "boolean" ? /* @__PURE__ */ jsxs(Fragment, { children: [row("yes", "Yes says", /* @__PURE__ */ jsx(Input, {
+				id: `${id}-yes`,
+				size: "sm",
+				autoFocus: compact,
+				readOnly,
+				maxLength: 300,
+				value: col.trueLabel ?? "",
+				placeholder: "Included",
+				onChange: (e) => onPatch({ trueLabel: e.target.value || void 0 })
+			}), "People who can't see the check mark hear these words."), row("no", "No says", /* @__PURE__ */ jsx(Input, {
+				id: `${id}-no`,
+				size: "sm",
+				readOnly,
+				maxLength: 300,
+				value: col.falseLabel ?? "",
+				placeholder: "Not included",
+				onChange: (e) => onPatch({ falseLabel: e.target.value || void 0 })
+			}))] }) : null
+		]
+	});
+}
+function RowMenu({ ctx, row, index, count, onInsert, children }) {
+	const { t, set, edit } = ctx;
+	const atMax = !!ctx.options.maxRows && !row.footer && t.rows.filter((r) => !r.footer).length >= ctx.options.maxRows;
+	const duplicate = () => {
+		const order = displayRows(t).map((d) => d.row);
+		order.splice(index + 1, 0, {
+			...row,
+			_key: tkey("r"),
+			cells: { ...row.cells }
+		});
+		set({
+			...t,
+			rows: order
+		});
+	};
+	const remove = () => {
+		const prev = t;
+		set({
+			...t,
+			rows: t.rows.filter((r) => r._key !== row._key)
+		});
+		ctx.undoable("Row deleted", prev);
+	};
+	const groups = offered(ctx.options).groups ? t.rowGroups ?? [] : [];
+	return /* @__PURE__ */ jsxs(Menu, { children: [children(/* @__PURE__ */ jsx(MenuTrigger, {
+		tabIndex: -1,
+		"aria-label": `Options for row ${index + 1}`,
+		className: DOTS,
+		children: /* @__PURE__ */ jsx(IconDots, {
+			className: "size-3.5",
+			stroke: 1.5
+		})
+	})), /* @__PURE__ */ jsxs(MenuContent, {
+		className: "min-w-52",
+		children: [
+			/* @__PURE__ */ jsx(MenuItem, {
+				disabled: atMax,
+				onClick: () => onInsert(false),
+				children: "Insert row above"
+			}),
+			/* @__PURE__ */ jsx(MenuItem, {
+				disabled: atMax,
+				onClick: () => onInsert(true),
+				children: "Insert row below"
+			}),
+			/* @__PURE__ */ jsx(MenuItem, {
+				disabled: atMax,
+				onClick: duplicate,
+				children: "Duplicate row"
+			}),
+			/* @__PURE__ */ jsx(MenuItem, {
+				disabled: index === 0,
+				onClick: () => set(moveRowTo(t, index, index - 1)),
+				children: "Move up"
+			}),
+			/* @__PURE__ */ jsx(MenuItem, {
+				disabled: index === count - 1,
+				onClick: () => set(moveRowTo(t, index, index + 1)),
+				children: "Move down"
+			}),
+			groups.length ? /* @__PURE__ */ jsxs(MenuSub, { children: [/* @__PURE__ */ jsx(MenuSubTrigger, { children: "Move to group" }), /* @__PURE__ */ jsx(MenuSubContent, { children: /* @__PURE__ */ jsxs(MenuRadioGroup, {
+				value: row.group ?? "",
+				onValueChange: (g) => edit(mapRow(row._key, (x) => clean({
+					...x,
+					group: g || void 0,
+					footer: void 0
+				}))),
+				children: [/* @__PURE__ */ jsx(MenuRadioItem, {
+					value: "",
+					children: "No group"
+				}), groups.map((g) => /* @__PURE__ */ jsx(MenuRadioItem, {
+					value: g._key,
+					children: g.label || "Untitled group"
+				}, g._key))]
+			}) })] }) : null,
+			offered(ctx.options).highlight ? /* @__PURE__ */ jsx(MenuCheckItem, {
+				checked: !!row.highlight,
+				onCheckedChange: (v) => edit(mapRow(row._key, (x) => clean({
+					...x,
+					highlight: v
+				}))),
+				children: "Highlight this row"
+			}) : null,
+			offered(ctx.options).totals ? /* @__PURE__ */ jsx(MenuCheckItem, {
+				checked: !!row.footer,
+				onCheckedChange: (v) => edit(mapRow(row._key, (x) => clean({
+					...x,
+					footer: v,
+					group: void 0
+				}))),
+				children: "Totals row"
+			}) : null,
+			/* @__PURE__ */ jsx(MenuSeparator, {}),
+			/* @__PURE__ */ jsx(MenuItem, {
+				danger: true,
+				onClick: remove,
+				children: "Delete row"
+			})
+		]
+	})] });
+}
+/** Right-click (or Shift+F10 / the menu key) on a cell: words instead of the column's type, a footnote, clear. */
+function CellMenu({ ctx, row, col, cell, onWrite, onNote, children }) {
+	const { t, set } = ctx;
+	const own = isCellObject(cell) ? cell.type : void 0;
+	const note = cellNote(cell);
+	const colType = row.type ?? col.type;
+	const asText = own === "text";
+	const atMax = !!ctx.options.maxRows && !row.footer && t.rows.filter((r) => !r.footer).length >= ctx.options.maxRows;
+	const setOwn = (type) => {
+		const value = coerce(cellText(col, row, cell, ctx.resolveRef), {
+			type: type ?? colType,
+			max: col.max
+		});
+		onWrite(type || note ? {
+			value,
+			...type ? { type } : {},
+			...note ? { note } : {}
+		} : value);
+	};
+	const insertRow = (below) => {
+		const order = displayRows(t).map((d) => d.row);
+		const at = order.findIndex((r) => r._key === row._key) + (below ? 1 : 0);
+		order.splice(at, 0, clean({
+			_key: tkey("r"),
+			cells: {},
+			group: row.group,
+			footer: row.footer
+		}));
+		set({
+			...t,
+			rows: order
+		});
+	};
+	return /* @__PURE__ */ jsxs(ContextMenu.Root, { children: [/* @__PURE__ */ jsx(ContextMenu.Trigger, {
+		render: /* @__PURE__ */ jsx("div", {}),
+		children
+	}), /* @__PURE__ */ jsxs(MenuContent, {
+		className: "min-w-52",
+		children: [
+			colType !== "text" && colType !== "reference" && colType !== "richtext-inline" ? /* @__PURE__ */ jsx(MenuItem, {
+				onClick: () => setOwn(asText ? void 0 : "text"),
+				children: asText ? `Use ${TYPE_UI[colType].label} like the column` : "Write words in this cell instead"
+			}) : null,
+			offered(ctx.options).footnotes ? note ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuItem, {
+				onClick: onNote,
+				children: "Edit footnote"
+			}), /* @__PURE__ */ jsx(MenuItem, {
+				onClick: () => set(unlinkNote(t, row._key, col._key)),
+				children: "Remove footnote"
+			})] }) : /* @__PURE__ */ jsx(MenuItem, {
+				onClick: () => (set(linkNote(t, row._key, col._key)[0]), onNote()),
+				children: "Add a footnote"
+			}) : null,
+			/* @__PURE__ */ jsx(MenuSeparator, {}),
+			/* @__PURE__ */ jsx(MenuItem, {
+				disabled: atMax,
+				onClick: () => insertRow(true),
+				children: "Insert row below"
+			}),
+			/* @__PURE__ */ jsx(MenuItem, {
+				disabled: atMax,
+				onClick: () => insertRow(false),
+				children: "Insert row above"
+			}),
+			/* @__PURE__ */ jsx(MenuItem, {
+				onClick: () => onWrite(withValue(cell, null)),
+				children: "Clear cell"
+			}),
+			/* @__PURE__ */ jsx(MenuItem, {
+				danger: true,
+				onClick: () => {
+					const prev = t;
+					set({
+						...t,
+						rows: t.rows.filter((r) => r._key !== row._key)
+					});
+					ctx.undoable("Row deleted", prev);
+				},
+				children: "Delete row"
+			})
+		]
+	})] });
+}
+var hasName = (t, r) => !!t.columns[0] && !isEmptyCell(cellValue(r.cells[t.columns[0]._key]));
+/** The row that was open when its drill closed, per table: focus lands back on it (form frames and the local drill). */
+var returnTo = /* @__PURE__ */ new Map();
+var ROWS_FIELD = {
+	name: "rows",
+	title: "Rows",
+	type: "table",
+	icon: "list"
+};
+var COLUMNS_FIELD = {
+	name: "columns",
+	title: "Columns",
+	type: "table",
+	icon: "layout-columns"
+};
+var noop = () => void 0;
+var colSummary = (c) => [TYPE_UI[c.type].label, c.type === "number" ? c.unit : c.type === "money" ? c.currency ?? "USD" : c.type === "rating" ? `out of ${c.max ?? 5}` : void 0].filter(Boolean).join(" · ");
+/** D52: the whole table is ONE group, shown the way every nested group is shown: a single 1px inset line on the left. */
+var TABLE_GROUP = "ml-1.5 border-l border-kit-line pl-3";
+/** A sub-part of the table field: the same label style as every field label (13/500, fg-2; fg while focus is inside). */
+var PART_LABEL = "text-kit-sm font-medium text-kit-fg-2 transition-colors group-focus-within/part:text-kit-fg";
+/** CPO D52: the settings a table kind offers, with their defaults (schema/table.ts › TableSettingsOptions). */
+var PHONES = [
+	{
+		value: "scroll",
+		label: "Scroll"
+	},
+	{
+		value: "stack",
+		label: "Stack"
+	},
+	{
+		value: "cards",
+		label: "Cards"
+	}
+];
+function offered(options) {
+	const s = options.settings ?? {};
+	const phones = PHONES.filter((p) => !s.phones || s.phones.includes(p.value));
+	return {
+		headers: s.headers !== false,
+		totals: s.totals !== false,
+		phones: phones.length > 1 ? phones : [],
+		highlight: s.highlight !== false,
+		sticky: s.sticky !== false,
+		sort: !!s.sort,
+		search: !!s.search,
+		jsonLd: (options.jsonLd ?? []).filter((x) => x !== "none"),
+		groups: options.allowGroups !== false,
+		footnotes: options.allowFootnotes !== false,
+		note: options.allowNote !== false
+	};
+}
+/** Unlink a footnote from one cell; the footnote itself goes when no other cell points at it. */
+function unlinkNote(t, rowKey, colKey) {
+	let note;
+	const rows = t.rows.map((r) => {
+		if (r._key !== rowKey) return r;
+		const c = r.cells[colKey];
+		if (!isCellObject(c) || !c.note) return r;
+		note = c.note;
+		return {
+			...r,
+			cells: {
+				...r.cells,
+				[colKey]: c.type ? {
+					value: c.value,
+					type: c.type
+				} : c.value
+			}
+		};
+	});
+	if (!note) return t;
+	const used = rows.some((r) => Object.values(r.cells).some((c) => isCellObject(c) && c.note === note));
+	return {
+		...t,
+		rows,
+		footnotes: used ? t.footnotes : (t.footnotes ?? []).filter((f) => f._key !== note)
+	};
+}
+/** Link a new, empty footnote to one cell. Returns the table and the footnote's key (its input takes focus). */
+function linkNote(t, rowKey, colKey) {
+	const f = {
+		_key: tkey("f"),
+		text: ""
+	};
+	return [{
+		...t,
+		footnotes: [...t.footnotes ?? [], f],
+		rows: t.rows.map((r) => {
+			if (r._key !== rowKey) return r;
+			const c = r.cells[colKey];
+			const own = isCellObject(c) ? c.type : void 0;
+			return {
+				...r,
+				cells: {
+					...r.cells,
+					[colKey]: {
+						value: cellValue(c),
+						...own ? { type: own } : {},
+						note: f._key
+					}
+				}
+			};
+		})
+	}, f._key];
+}
+var focusSoon = (selector) => requestAnimationFrame(() => document.querySelector(selector)?.focus());
+function TableBody({ ctx, label, nav, head }) {
+	const { t, set, readOnly, options } = ctx;
+	const [open, setOpen] = React.useState(null);
+	const host = React.useRef(null);
+	const localId = React.useId();
+	const id = nav?.id ?? localId;
+	const focusRow = (key) => host.current?.querySelector(`[data-row-open="${CSS.escape(key)}"]`)?.focus({ preventScroll: false });
+	React.useEffect(() => {
+		if (open || !returnTo.has(id)) return;
+		const raf = requestAnimationFrame(() => {
+			const key = returnTo.get(id);
+			returnTo.delete(id);
+			const a = document.activeElement;
+			if (key && (!a || a === document.body || a.matches("[data-frame-body]") || host.current?.contains(a) || !a.isConnected)) focusRow(key);
+		});
+		return () => cancelAnimationFrame(raf);
+	}, [open, id]);
+	const go = (kind, index, key) => {
+		returnTo.set(id, key);
+		if (nav) window.setTimeout(() => nav.open(kind, index), 0);
+		else setOpen({
+			kind,
+			key
+		});
+	};
+	const list = open ? open.kind === "rows" ? t.rows : t.columns : [];
+	const at = open ? list.findIndex((x) => x._key === open.key) : -1;
+	if (open && at >= 0) return /* @__PURE__ */ jsx("div", {
+		className: TABLE_GROUP,
+		children: /* @__PURE__ */ jsx(LocalDrill, {
+			ctx,
+			label,
+			open,
+			index: at,
+			onBack: () => setOpen(null),
+			onGo: (key) => setOpen({
+				kind: open.kind,
+				key
+			})
+		})
+	});
+	const base = nav?.basePath ?? [];
+	const titleId = `${id}-title`;
+	const noteId = `${id}-note`;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: host,
+		role: "group",
+		"aria-label": label || "Table",
+		className: cn(TABLE_GROUP, "flex flex-col gap-4 @max-[360px]:gap-3", !readOnly && "mb-2"),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "group/part flex flex-col gap-1.5",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex min-h-5 items-center gap-1.5",
+					children: [
+						/* @__PURE__ */ jsx("label", {
+							htmlFor: titleId,
+							className: PART_LABEL,
+							children: "Title"
+						}),
+						options.requireCaption !== false && !t.caption.trim() ? /* @__PURE__ */ jsx("span", {
+							className: "text-kit-xs text-kit-fg-3",
+							children: "Required"
+						}) : null,
+						/* @__PURE__ */ jsx("span", { className: "flex-1" }),
+						head
+					]
+				}), /* @__PURE__ */ jsx(Textarea, {
+					id: titleId,
+					rows: 1,
+					maxLength: 300,
+					value: t.caption,
+					readOnly,
+					placeholder: "What the table shows",
+					onChange: (e) => set({
+						...t,
+						caption: e.target.value.replace(/\n/g, " ")
+					}),
+					className: "min-h-8 resize-none py-1.5"
+				})]
+			}),
+			/* @__PURE__ */ jsx(ColumnsPart, {
+				ctx,
+				basePath: base,
+				onOpen: (i, key) => go("columns", i, key)
+			}),
+			/* @__PURE__ */ jsx(RowsPart, {
+				ctx,
+				basePath: base,
+				onOpen: (i, key) => go("rows", i, key)
+			}),
+			offered(options).note ? /* @__PURE__ */ jsxs("div", {
+				className: "group/part flex flex-col gap-1.5",
+				children: [/* @__PURE__ */ jsx("label", {
+					htmlFor: noteId,
+					className: PART_LABEL,
+					children: "Note under the table"
+				}), /* @__PURE__ */ jsx(Textarea, {
+					id: noteId,
+					rows: 2,
+					maxLength: 2e3,
+					value: t.notes ?? "",
+					readOnly,
+					placeholder: "Source: our own tests, September 2026.",
+					onChange: (e) => set({
+						...t,
+						notes: e.target.value || void 0
+					})
+				})]
+			}) : null,
+			readOnly ? null : /* @__PURE__ */ jsx(TableSettings, { ctx })
+		]
+	});
+}
+/** Columns: an array list like any other (type icon, name, "Yes / No" summary, ⋯, ›). */
+function ColumnsPart({ ctx, basePath, onOpen }) {
+	const { t, set, lock, options } = ctx;
+	const n = t.columns.length;
+	const atMax = !!options.maxColumns && n >= options.maxColumns;
+	const write = (columns) => set({
+		...t,
+		columns
+	});
+	const add = () => {
+		if (atMax) return;
+		const col = {
+			_key: tkey("c"),
+			label: "",
+			type: "text"
+		};
+		write([...t.columns, col]);
+		onOpen(n, col._key);
+	};
+	const ops = {
+		atMax,
+		atMin: n <= 1,
+		add,
+		duplicate: (i) => !atMax && set(copyColumn(t, i)),
+		move: (i, d) => i + d >= 0 && i + d < n && write(moveItem(t.columns, i, i + d)),
+		reorder: (from, to) => write(moveItem(t.columns, from, to)),
+		remove: (i, title) => {
+			if (n <= 1) return;
+			const prev = t;
+			set(dropColumn(t, t.columns[i]._key));
+			ctx.undoable(`“${title}” removed`, prev);
+		},
+		insertBlank: noop
+	};
+	const rows = t.columns.map((c, i) => ({
+		id: c._key,
+		index: i,
+		item: c,
+		path: [
+			...basePath,
+			"columns",
+			i
+		],
+		preview: {
+			title: c.label || "Untitled column",
+			subtitle: colSummary(c),
+			empty: !c.label
+		}
+	}));
+	return /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		"aria-label": "Columns",
+		className: "group/part flex flex-col gap-1.5",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: PART_LABEL,
+			children: "Columns"
+		}), /* @__PURE__ */ jsx(RowList, {
+			field: {
+				...COLUMNS_FIELD,
+				validation: { min: 1 }
+			},
+			rows,
+			readOnly: lock,
+			layout: "list",
+			mode: "drill",
+			openId: null,
+			onOpen: (r) => onOpen(r.index, r.id),
+			onCloseInline: noop,
+			ops,
+			renderInline: () => null,
+			emptyLabel: "No columns yet.",
+			leading: (r) => /* @__PURE__ */ jsx("span", {
+				className: "flex size-7 shrink-0 items-center justify-center rounded-kit-md bg-kit-muted text-kit-fg-2",
+				children: /* @__PURE__ */ jsx(TypeIcon, {
+					type: r.item.type,
+					className: "size-4 text-kit-fg-2"
+				})
+			}),
+			addButton: /* @__PURE__ */ jsx(Button, {
+				size: "sm",
+				variant: "ghost",
+				className: "text-kit-fg-2",
+				leftIcon: /* @__PURE__ */ jsx(IconPlus, { stroke: 1.5 }),
+				disabled: atMax,
+				onClick: add,
+				children: atMax ? `Add column · ${options.maxColumns} at most` : "Add column"
+			})
+		})]
+	});
+}
+/**
+* Rows (D52): groups live in the row list itself. Loose rows first, then each group under a heading you rename in place
+* (its ⋯ moves or removes it), then Totals. "Add group" sits next to the last "Add row"; a row changes group by its ⋯ ›
+* Move to group. Every list is the kit's array row list; drag (and ↑/↓ on the grip) reorders inside a group.
+*/
+function RowsPart({ ctx, basePath, onOpen }) {
+	const { t, set, resolveRef, readOnly, options } = ctx;
+	const can = offered(options);
+	const groups = can.groups ? t.rowGroups ?? [] : [];
+	const known = new Set(groups.map((g) => g._key));
+	const body = t.rows.filter((r) => !r.footer);
+	const runs = [];
+	const loose = body.filter((r) => !r.group || !known.has(r.group));
+	if (loose.length || !groups.length) runs.push({
+		key: "loose",
+		items: loose
+	});
+	groups.forEach((g) => runs.push({
+		key: g._key,
+		group: g,
+		items: body.filter((r) => r.group === g._key)
+	}));
+	const foot = t.rows.filter((r) => r.footer);
+	if (foot.length) runs.push({
+		key: "totals",
+		totals: true,
+		items: foot
+	});
+	const lastBody = runs.filter((r) => !r.totals).length - 1;
+	const atMax = !!options.maxRows && body.length >= options.maxRows;
+	const place = (r, x) => clean({
+		...x,
+		group: r.group?._key ?? (r.key === "loose" && x.group && !known.has(x.group) ? x.group : void 0),
+		footer: r.totals || void 0
+	});
+	const writeRuns = (next) => set({
+		...t,
+		rows: next.flatMap((r) => r.items.map((x) => place(r, x)))
+	});
+	const writeRun = (ri, items) => writeRuns(runs.map((r, j) => j === ri ? {
+		...r,
+		items
+	} : r));
+	const add = (ri) => {
+		if (atMax && !runs[ri].totals) return;
+		const run = runs[ri];
+		const row = place(run, {
+			_key: tkey("r"),
+			cells: {}
+		});
+		const rows = runs.flatMap((r, j) => j === ri ? [...r.items.map((x) => place(r, x)), row] : r.items.map((x) => place(r, x)));
+		set({
+			...t,
+			rows
+		});
+		onOpen(rows.indexOf(row), row._key);
+	};
+	const addGroup = () => {
+		const g = {
+			_key: tkey("rg"),
+			label: ""
+		};
+		set({
+			...t,
+			rowGroups: [...t.rowGroups ?? [], g]
+		});
+		focusSoon(`[data-group-name="${g._key}"]`);
+	};
+	const placeName = (k) => k === "totals" ? "Totals" : k === "loose" ? "No group" : groups.find((g) => g._key === k)?.label || "Untitled group";
+	/** Move a row to the end of another run (a group, no group, or Totals). */
+	const moveTo = (row, target) => {
+		const prev = t;
+		const rest = t.rows.filter((r) => r._key !== row._key);
+		set({
+			...t,
+			rows: [...rest, clean({
+				...row,
+				group: target.totals ? void 0 : target.group,
+				footer: target.totals || void 0
+			})]
+		});
+		ctx.undoable(`Moved to ${placeName(target.totals ? "totals" : target.group ?? "loose")}`, prev);
+	};
+	const opsFor = (ri) => {
+		const items = runs[ri].items;
+		const runMax = atMax && !runs[ri].totals;
+		return {
+			atMax: runMax,
+			atMin: false,
+			add: () => add(ri),
+			duplicate: (i) => !runMax && writeRun(ri, [
+				...items.slice(0, i + 1),
+				{
+					...items[i],
+					_key: tkey("r"),
+					cells: { ...items[i].cells }
+				},
+				...items.slice(i + 1)
+			]),
+			move: (i, d) => i + d >= 0 && i + d < items.length && writeRun(ri, moveItem(items, i, i + d)),
+			reorder: (from, to) => writeRun(ri, moveItem(items, from, to)),
+			remove: (i, title) => {
+				const prev = t;
+				writeRun(ri, items.filter((_, j) => j !== i));
+				ctx.undoable(`“${title}” removed`, prev);
+			},
+			insertBlank: noop
+		};
+	};
+	const sub = (r) => t.columns.slice(1, 3).map((c) => {
+		const s = cellText(c, r, r.cells[c._key], resolveRef);
+		return s ? `${c.label || "Untitled"}: ${s}` : "";
+	}).filter(Boolean).join(" · ");
+	const model = (row, i) => {
+		const named = hasName(t, row);
+		return {
+			id: row._key,
+			index: i,
+			item: row,
+			path: [
+				...basePath,
+				"rows",
+				t.rows.indexOf(row)
+			],
+			preview: {
+				title: named ? rowTitle(t, row, i, resolveRef) : "Untitled row",
+				subtitle: sub(row) || void 0,
+				empty: !named
+			}
+		};
+	};
+	const moveMenu = (r) => {
+		const row = r.item;
+		const here = row.footer ? "totals" : row.group && known.has(row.group) ? row.group : "";
+		const places = [
+			...groups.length ? [{
+				value: "",
+				label: "No group"
+			}] : [],
+			...groups.map((g) => ({
+				value: g._key,
+				label: g.label || "Untitled group"
+			})),
+			...can.totals && (foot.length || groups.length) ? [{
+				value: "totals",
+				label: "Totals"
+			}] : []
+		];
+		if (!places.some((p) => p.value !== here)) return null;
+		return /* @__PURE__ */ jsxs(MenuSub, { children: [/* @__PURE__ */ jsx(MenuSubTrigger, {
+			icon: /* @__PURE__ */ jsx(IconFolder, { stroke: 1.5 }),
+			children: "Move to group"
+		}), /* @__PURE__ */ jsx(MenuSubContent, {
+			className: "min-w-44",
+			children: /* @__PURE__ */ jsx(MenuRadioGroup, {
+				value: here,
+				onValueChange: (v) => v !== here && moveTo(row, v === "totals" ? { totals: true } : { group: v || void 0 }),
+				children: places.map((p) => /* @__PURE__ */ jsx(MenuRadioItem, {
+					value: p.value,
+					children: p.label
+				}, p.value || "none"))
+			})
+		})] });
+	};
+	const sharedSort = useSharedSort();
+	const unnamed = t.rows.find((r) => !hasName(t, r) && t.columns.slice(1).some((c) => !isEmptyCell(cellValue(r.cells[c._key]))));
+	const addRowButton = (ri) => /* @__PURE__ */ jsx(Button, {
+		size: "sm",
+		variant: "ghost",
+		className: "text-kit-fg-2",
+		leftIcon: /* @__PURE__ */ jsx(IconPlus, { stroke: 1.5 }),
+		disabled: atMax && !runs[ri].totals,
+		onClick: () => add(ri),
+		children: atMax && !runs[ri].totals ? `Add row · ${options.maxRows} at most` : "Add row"
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		"aria-label": "Rows",
+		className: "group/part flex flex-col gap-1.5",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: PART_LABEL,
+				children: "Rows"
+			}),
+			unnamed && !readOnly ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => onOpen(t.rows.indexOf(unnamed), unnamed._key),
+				className: "self-start text-left text-kit-xs text-kit-warning-fg underline-offset-2 hover:underline",
+				children: "A row has values but no name. Open it"
+			}) : null,
+			/* @__PURE__ */ jsx(SharedSortProvider, {
+				value: sharedSort.value,
+				children: /* @__PURE__ */ jsx("div", {
+					className: "flex flex-col gap-3",
+					children: runs.map((run, ri) => {
+						const list = /* @__PURE__ */ jsx(RowList, {
+							field: ROWS_FIELD,
+							rows: run.items.map(model),
+							readOnly,
+							layout: "list",
+							mode: "drill",
+							openId: null,
+							onOpen: (r) => onOpen(t.rows.indexOf(r.item), r.id),
+							onCloseInline: noop,
+							ops: opsFor(ri),
+							renderInline: () => null,
+							menuExtra: moveMenu,
+							emptyLabel: run.totals ? "No totals yet." : run.group ? "No rows in this group yet." : "No rows yet.",
+							addButton: ri === lastBody && can.groups ? /* @__PURE__ */ jsxs("span", {
+								className: "flex flex-wrap items-center gap-1",
+								children: [addRowButton(ri), /* @__PURE__ */ jsx(Button, {
+									size: "sm",
+									variant: "ghost",
+									className: "text-kit-fg-2",
+									leftIcon: /* @__PURE__ */ jsx(IconPlus, { stroke: 1.5 }),
+									onClick: addGroup,
+									children: "Add group"
+								})]
+							}) : addRowButton(ri)
+						});
+						if (!run.group && !run.totals) return /* @__PURE__ */ jsx("div", { children: list }, run.key);
+						return /* @__PURE__ */ jsxs("div", {
+							role: "group",
+							"aria-label": run.totals ? "Totals" : run.group.label || "Untitled group",
+							className: "flex flex-col gap-1.5",
+							children: [run.totals ? /* @__PURE__ */ jsx("span", {
+								className: "flex h-7 items-center px-0.5 text-kit-sm font-medium text-kit-fg-2",
+								children: "Totals"
+							}) : /* @__PURE__ */ jsx(GroupHeading, {
+								ctx,
+								group: run.group,
+								index: groups.indexOf(run.group),
+								count: groups.length,
+								rows: run.items.length
+							}), /* @__PURE__ */ jsx("div", {
+								className: "ml-1.5 border-l border-kit-line pl-3",
+								children: list
+							})]
+						}, run.key);
+					})
+				})
+			}),
+			sharedSort.a11y
+		]
+	});
+}
+/** A row group's heading, renamed in place. It reads as a label at rest; its ⋯ moves or removes the group. */
+function GroupHeading({ ctx, group, index, count, rows }) {
+	const { t, set, readOnly } = ctx;
+	const [draft, setDraft] = React.useState(group.label);
+	const [seen, setSeen] = React.useState(group.label);
+	if (seen !== group.label) {
+		setSeen(group.label);
+		setDraft(group.label);
+	}
+	const rename = (label) => label !== group.label && set({
+		...t,
+		rowGroups: (t.rowGroups ?? []).map((g) => g._key === group._key ? {
+			...g,
+			label
+		} : g)
+	});
+	const moveGroup = (d) => set({
+		...t,
+		rowGroups: moveItem(t.rowGroups ?? [], index, index + d)
+	});
+	const remove = () => {
+		const prev = t;
+		set({
+			...t,
+			rowGroups: (t.rowGroups ?? []).filter((g) => g._key !== group._key),
+			rows: t.rows.map((r) => r.group === group._key ? clean({
+				...r,
+				group: void 0
+			}) : r)
+		});
+		ctx.undoable(`“${group.label || "Untitled group"}” removed`, prev, rows ? `Its ${rows === 1 ? "row stays" : `${rows} rows stay`} in the table.` : void 0);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "group/gh flex min-w-0 items-center gap-1",
+		children: [/* @__PURE__ */ jsx("input", {
+			"data-group-name": group._key,
+			value: draft,
+			readOnly,
+			maxLength: 300,
+			placeholder: "Group name",
+			"aria-label": "Group name",
+			onChange: (e) => setDraft(e.target.value),
+			onBlur: () => rename(draft.replace(/\s+/g, " ").trim()),
+			onKeyDown: (e) => {
+				if (e.key === "Enter") {
+					e.preventDefault();
+					e.currentTarget.blur();
+				} else if (e.key === "Escape" && draft !== group.label) {
+					e.preventDefault();
+					e.stopPropagation();
+					setDraft(group.label);
+				}
+			},
+			className: "-mx-0.5 h-7 min-w-0 flex-1 truncate rounded-kit-md bg-transparent px-0.5 text-kit-sm font-medium text-kit-fg-2 outline-none transition-colors placeholder:font-normal placeholder:text-kit-fg-4 hover:bg-kit-hover focus:bg-kit-surface focus:px-2 focus:text-kit-fg focus:shadow-[inset_0_0_0_1px_var(--kit-line-strong)]"
+		}), readOnly ? null : /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsx(MenuTrigger, {
+			"aria-label": `Options for ${group.label || "this group"}`,
+			className: cn(DOTS, "size-7 opacity-0 focus-visible:opacity-100 group-hover/gh:opacity-100 group-focus-within/gh:opacity-100 data-[popup-open]:opacity-100 [@media(pointer:coarse)]:opacity-100"),
+			children: /* @__PURE__ */ jsx(IconDots, {
+				className: "size-4",
+				stroke: 1.5
+			})
+		}), /* @__PURE__ */ jsxs(MenuContent, {
+			align: "end",
+			className: "min-w-44",
+			children: [
+				/* @__PURE__ */ jsx(MenuItem, {
+					icon: /* @__PURE__ */ jsx(IconArrowUp, { stroke: 1.5 }),
+					disabled: index === 0,
+					onClick: () => moveGroup(-1),
+					children: "Move up"
+				}),
+				/* @__PURE__ */ jsx(MenuItem, {
+					icon: /* @__PURE__ */ jsx(IconArrowDown, { stroke: 1.5 }),
+					disabled: index >= count - 1,
+					onClick: () => moveGroup(1),
+					children: "Move down"
+				}),
+				/* @__PURE__ */ jsx(MenuSeparator, {}),
+				/* @__PURE__ */ jsx(MenuItem, {
+					danger: true,
+					onClick: remove,
+					children: "Remove group"
+				})
+			]
+		})] })]
+	});
+}
+/**
+* Height of the sticky bars pinned above a table in its scroll area: the rich-text editor publishes
+* --rt-sticky-top (field tabs + its toolbar), a kit form --kit-sticky-top (field tabs).
+*/
+var STICKY_TOP = "var(--rt-sticky-top, var(--kit-sticky-top, 0px))";
+/** Scroll only the nearest scroll area (never the shell) so `el`'s top clears the sticky bars (its scroll-margin-top). */
+function revealBelowStickies(el) {
+	if (!el) return;
+	let area = el.parentElement;
+	while (area && !/(auto|scroll)/.test(getComputedStyle(area).overflowY)) area = area.parentElement;
+	const hidden = (area ? area.getBoundingClientRect().top : 0) + (parseFloat(getComputedStyle(el).scrollMarginTop) || 0) - el.getBoundingClientRect().top;
+	if (hidden > 1) (area ?? document.scrollingElement)?.scrollBy?.({ top: -hidden });
+}
+/** Tables outside a kit form (the /style-guide/kit sandbox, demos): the same drill, with the same breadcrumb and header. */
+function LocalDrill({ ctx, label, open, index, onBack, onGo }) {
+	const { t, resolveRef } = ctx;
+	const rows = open.kind === "rows";
+	const list = rows ? t.rows : t.columns;
+	const titleAt = (i) => rows ? hasName(t, t.rows[i]) ? rowTitle(t, t.rows[i], i, resolveRef) : "Untitled row" : t.columns[i].label || "Untitled column";
+	const row = rows ? t.rows[index] : void 0;
+	const group = row?.group && !row.footer ? t.rowGroups?.find((g) => g._key === row.group) : void 0;
+	const title = titleAt(index);
+	const noun = rows ? "row" : "column";
+	const rootRef = React.useRef(null);
+	const headRef = React.useRef(null);
+	React.useLayoutEffect(() => {
+		headRef.current?.focus({ preventScroll: true });
+		const raf = requestAnimationFrame(() => revealBelowStickies(rootRef.current));
+		return () => cancelAnimationFrame(raf);
+	}, [index]);
+	const step = (d) => list[index + d] && onGo(list[index + d]._key);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: rootRef,
+		className: "flex flex-col gap-4",
+		style: { scrollMarginTop: `calc(${STICKY_TOP} + 8px)` },
+		onKeyDown: (e) => e.key === "Escape" && !e.defaultPrevented && (e.preventDefault(), onBack()),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "sticky z-[2] -my-1 bg-kit-surface py-1",
+				style: { top: STICKY_TOP },
+				children: /* @__PURE__ */ jsx(PathCrumbs, {
+					size: "sm",
+					label: "Table path",
+					items: [
+						{
+							id: "table",
+							label: label || "Table",
+							icon: /* @__PURE__ */ jsx(IconTable, {}),
+							onSelect: onBack
+						},
+						...group ? [{
+							id: "group",
+							label: group.label || "Untitled group",
+							icon: /* @__PURE__ */ jsx(IconFolder, {}),
+							onSelect: onBack
+						}] : [],
+						{
+							id: "current",
+							label: title,
+							icon: rows ? /* @__PURE__ */ jsx(IconList, {}) : /* @__PURE__ */ jsx(IconLayoutColumns, {})
+						}
+					]
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				ref: headRef,
+				tabIndex: -1,
+				className: "flex items-start gap-2.5 outline-none",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ jsx("h2", {
+						className: "truncate text-kit-base font-semibold leading-6 text-kit-fg",
+						children: title
+					}), /* @__PURE__ */ jsx("p", {
+						className: "truncate text-kit-xs leading-4 text-kit-fg-3",
+						children: `${rows ? "Row" : "Column"} ${index + 1} of ${list.length} in ${label || "the table"}`
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "-mr-1 flex shrink-0 items-center gap-0.5 pt-0.5",
+					children: [/* @__PURE__ */ jsx(IconButton, {
+						size: "sm",
+						label: index > 0 ? `Previous ${noun}: ${titleAt(index - 1)}` : `First ${noun}`,
+						disabled: index === 0,
+						onClick: () => step(-1),
+						children: /* @__PURE__ */ jsx(IconArrowUp, { stroke: 1.5 })
+					}), /* @__PURE__ */ jsx(IconButton, {
+						size: "sm",
+						label: index < list.length - 1 ? `Next ${noun}: ${titleAt(index + 1)}` : `Last ${noun}`,
+						disabled: index >= list.length - 1,
+						onClick: () => step(1),
+						children: /* @__PURE__ */ jsx(IconArrowDown, { stroke: 1.5 })
+					})]
+				})]
+			}),
+			rows ? /* @__PURE__ */ jsx(RowFields, {
+				ctx,
+				row: t.rows[index]
+			}) : /* @__PURE__ */ jsx(ColumnFields, {
+				ctx,
+				col: t.columns[index]
+			})
+		]
+	});
+}
+function RowFields({ ctx, row }) {
+	const { t, edit, readOnly, options } = ctx;
+	const write = (col, next) => edit(mapRow(row._key, (x) => ({
+		...x,
+		cells: {
+			...x.cells,
+			[col._key]: next ?? null
+		}
+	})));
+	const named = hasName(t, row);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-4",
+		children: [t.columns.map((col, ci) => /* @__PURE__ */ jsx(CellField, {
+			ctx,
+			row,
+			col,
+			ci,
+			needsName: ci === 0 && !named,
+			onWrite: (c) => write(col, c)
+		}, col._key)), readOnly || !offered(options).highlight ? null : /* @__PURE__ */ jsx(SwitchRow, {
+			label: "Highlight this row",
+			checked: !!row.highlight,
+			onChange: (v) => edit(mapRow(row._key, (x) => clean({
+				...x,
+				highlight: v
+			})))
+		})]
+	});
+}
+/**
+* One cell as a field. Per-cell exceptions are quiet: a ⋯ by the label (shown on hover or focus) offers "Write words
+* instead" for a typed column, a footnote and Clear. A footnote is written right here, under the cell (D52).
+*/
+function CellField({ ctx, row, col, ci, needsName, onWrite }) {
+	const { t, set, resolveRef, readOnly, options } = ctx;
+	const cell = row.cells[col._key];
+	const declared = cellType(col, row, cell);
+	const v = cellValue(cell);
+	const ty = declared === "boolean" && !isEmptyCell(v) && toBool(v) == null ? "text" : declared;
+	const colType = row.type ?? col.type;
+	const asWords = ty === "text" && colType !== "text";
+	const note = cellNote(cell);
+	const fn = note ? (t.footnotes ?? []).find((f) => f._key === note) : void 0;
+	const fi = fn ? (t.footnotes ?? []).indexOf(fn) : -1;
+	const id = `${row._key}-${col._key}`;
+	const name = col.label || `Column ${ci + 1}`;
+	const canWords = !readOnly && colType !== "text" && colType !== "reference" && colType !== "richtext-inline";
+	const canNote = !readOnly && offered(options).footnotes;
+	const setWords = (on) => {
+		const raw = cellText(col, row, cell, resolveRef);
+		const type = on ? "text" : void 0;
+		const value = coerce(raw, {
+			type: type ?? colType,
+			max: col.max
+		});
+		onWrite(type || note ? {
+			value,
+			...type ? { type } : {},
+			...note ? { note } : {}
+		} : value);
+	};
+	const addNote = () => {
+		const [next, key] = linkNote(t, row._key, col._key);
+		set(next);
+		focusSoon(`[data-footnote="${key}"]`);
+	};
+	const b = toBool(v);
+	let control;
+	if (ty === "boolean") control = /* @__PURE__ */ jsxs("label", {
+		className: "flex h-8 items-center gap-2.5",
+		children: [/* @__PURE__ */ jsx(Switch, {
+			id,
+			size: "sm",
+			"aria-labelledby": `${id}-name`,
+			"aria-describedby": `${id}-says`,
+			disabled: readOnly,
+			checked: b === true,
+			onCheckedChange: (x) => onWrite(withValue(cell, x))
+		}), /* @__PURE__ */ jsx("span", {
+			id: `${id}-says`,
+			className: cn("text-kit-sm", b == null ? "text-kit-fg-4" : "text-kit-fg-2"),
+			children: b == null ? "Not set" : b ? boolLabels(col).yes : boolLabels(col).no
+		})]
+	});
+	else if (ty === "reference") control = /* @__PURE__ */ jsx("div", {
+		className: "rounded-kit-md border border-kit-field-border bg-kit-field-bg",
+		children: /* @__PURE__ */ jsx(RefCell, {
+			ctx,
+			cell,
+			col,
+			cellId: id,
+			name,
+			onWrite,
+			onMove: noop
+		})
+	});
+	else if (ty === "link") {
+		const l = isObjLike(v) && !("ref" in v) ? v : {
+			label: typeof v === "string" ? v : "",
+			href: ""
+		};
+		control = /* @__PURE__ */ jsxs(FieldUnit, { children: [/* @__PURE__ */ jsx(FieldUnitRow, { children: /* @__PURE__ */ jsx("input", {
+			id,
+			className: "h-9 w-full min-w-0 bg-transparent px-2 text-kit-sm text-kit-fg outline-none placeholder:text-kit-fg-4",
+			readOnly,
+			defaultValue: l.label,
+			placeholder: "Link text",
+			"aria-label": `${name} link text`,
+			onBlur: (e) => e.target.value !== l.label && onWrite(withValue(cell, {
+				...l,
+				label: e.target.value
+			}))
+		}, `l${l.label}`) }), /* @__PURE__ */ jsx(FieldUnitRow, { children: /* @__PURE__ */ jsx(LinkField, {
+			"aria-label": `${name} link`,
+			value: tableLinkValue(l),
+			readOnly,
+			className: "border-0 bg-transparent shadow-none",
+			onChange: (n) => {
+				const o = n && typeof n === "object" ? n : null;
+				if (o && isScriptHref(hrefOf(o))) return;
+				onWrite(withValue(cell, o ? tableLink(l.label || linkText(o), hrefOf(o), o.newTab, o.rel) : {
+					label: l.label,
+					href: ""
+				}));
+			}
+		}) })] });
+	} else control = /* @__PURE__ */ jsx(FormText, {
+		id,
+		readOnly,
+		autoFocus: needsName,
+		value: isEmptyCell(v) ? "" : NUMERIC.includes(ty) ? String(toNumber(v) ?? cellText(col, row, cell)) : ty === "richtext-inline" ? String(v) : cellText(col, row, cell, resolveRef),
+		suffix: ty === "number" ? col.unit : ty === "money" ? col.currency ?? "USD" : ty === "rating" ? `/ ${col.max ?? 5}` : void 0,
+		numeric: NUMERIC.includes(ty),
+		onCommit: (raw) => onWrite(typedCell(cell, col, row, raw))
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "group/cell flex min-w-0 flex-col gap-1.5",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-h-5 min-w-0 items-center gap-1.5",
+				children: [
+					/* @__PURE__ */ jsx("label", {
+						id: `${id}-name`,
+						htmlFor: id,
+						className: "truncate text-kit-sm font-medium text-kit-fg-2 transition-colors group-focus-within/cell:text-kit-fg",
+						children: name
+					}),
+					needsName ? /* @__PURE__ */ jsx("span", {
+						className: "shrink-0 text-kit-xs text-kit-warning-fg",
+						children: "Needs a name"
+					}) : null,
+					/* @__PURE__ */ jsx("span", { className: "flex-1" }),
+					canWords || canNote || !readOnly && !isEmptyCell(v) ? /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsx(MenuTrigger, {
+						"aria-label": `Options for ${name}`,
+						className: cn(DOTS, "-my-1 opacity-0 focus-visible:opacity-100 group-hover/cell:opacity-100 group-focus-within/cell:opacity-100 data-[popup-open]:opacity-100 [@media(pointer:coarse)]:opacity-100"),
+						children: /* @__PURE__ */ jsx(IconDots, {
+							className: "size-3.5",
+							stroke: 1.5
+						})
+					}), /* @__PURE__ */ jsxs(MenuContent, {
+						align: "end",
+						className: "min-w-52",
+						children: [
+							canWords ? /* @__PURE__ */ jsx(MenuItem, {
+								onClick: () => setWords(!asWords),
+								children: asWords ? `Use ${TYPE_UI[colType].label} like the column` : "Write words instead"
+							}) : null,
+							canNote ? note ? /* @__PURE__ */ jsx(MenuItem, {
+								onClick: () => set(unlinkNote(t, row._key, col._key)),
+								children: "Remove footnote"
+							}) : /* @__PURE__ */ jsx(MenuItem, {
+								onClick: addNote,
+								children: "Add a footnote"
+							}) : null,
+							!isEmptyCell(v) ? /* @__PURE__ */ jsxs(Fragment, { children: [canWords || canNote ? /* @__PURE__ */ jsx(MenuSeparator, {}) : null, /* @__PURE__ */ jsx(MenuItem, {
+								onClick: () => onWrite(withValue(cell, null)),
+								children: "Clear"
+							})] }) : null
+						]
+					})] }) : null
+				]
+			}),
+			control,
+			fn ? /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "shrink-0 text-kit-xs text-kit-fg-3",
+					children: ["Footnote ", fi + 1]
+				}), /* @__PURE__ */ jsx(Input, {
+					size: "sm",
+					"data-footnote": fn._key,
+					value: fn.text,
+					readOnly,
+					maxLength: 2e3,
+					placeholder: "What the footnote says",
+					"aria-label": `${name}: footnote ${fi + 1}`,
+					onChange: (e) => set({
+						...t,
+						footnotes: (t.footnotes ?? []).map((x) => x._key === fn._key ? {
+							...x,
+							text: e.target.value
+						} : x)
+					})
+				})]
+			}) : null
+		]
+	});
+}
+function SwitchRow({ label, checked, onChange, disabled }) {
+	return /* @__PURE__ */ jsxs("label", {
+		className: "flex min-h-8 items-center justify-between gap-2 text-kit-sm text-kit-fg-2",
+		children: [label, /* @__PURE__ */ jsx(Switch, {
+			size: "sm",
+			checked,
+			disabled,
+			onCheckedChange: onChange,
+			"aria-label": label
+		})]
+	});
+}
+function ColumnFields({ ctx, col }) {
+	const { t, set, lock, types, readOnly } = ctx;
+	const id = React.useId();
+	const patch = (p) => set({
+		...t,
+		columns: t.columns.map((c) => c._key === col._key ? withPatch(c, p) : c)
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-4",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1.5",
+				children: [
+					/* @__PURE__ */ jsx("label", {
+						htmlFor: id,
+						className: "text-kit-sm font-medium text-kit-fg-2",
+						children: "Name"
+					}),
+					/* @__PURE__ */ jsx(Input, {
+						id,
+						size: "sm",
+						autoFocus: !col.label && !lock,
+						readOnly: lock,
+						maxLength: 300,
+						value: col.label,
+						placeholder: "Column name",
+						onChange: (e) => patch({ label: e.target.value })
+					}),
+					lock && !readOnly ? /* @__PURE__ */ jsx("span", {
+						className: "text-kit-2xs leading-4 text-kit-fg-3",
+						children: "This table's columns are set by its developer."
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1.5",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-kit-sm font-medium text-kit-fg-2",
+					children: "Type"
+				}), lock ? /* @__PURE__ */ jsxs("span", {
+					className: "flex h-8 items-center gap-2 text-kit-sm text-kit-fg-2",
+					children: [/* @__PURE__ */ jsx(TypeIcon, {
+						type: col.type,
+						className: "text-kit-fg-2"
+					}), TYPE_UI[col.type].label]
+				}) : /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsx(MenuTrigger, {
+					render: /* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						variant: "secondary",
+						className: "justify-between",
+						leftIcon: /* @__PURE__ */ jsx(TypeIcon, {
+							type: col.type,
+							className: "text-kit-fg-2"
+						}),
+						rightIcon: /* @__PURE__ */ jsx(IconChevronDown, { stroke: 1.5 })
+					}),
+					children: /* @__PURE__ */ jsx("span", {
+						className: "flex-1 text-left",
+						children: TYPE_UI[col.type].label
+					})
+				}), /* @__PURE__ */ jsx(MenuContent, {
+					align: "start",
+					className: "min-w-52",
+					children: /* @__PURE__ */ jsx(MenuRadioGroup, {
+						value: col.type,
+						onValueChange: (v) => ctx.edit((x) => retype(x, col._key, v, ctx.resolveRef)),
+						children: (types.includes(col.type) ? types : [...types, col.type]).map((ty) => /* @__PURE__ */ jsx(MenuRadioItem, {
+							value: ty,
+							children: /* @__PURE__ */ jsxs("span", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ jsx(TypeIcon, {
+									type: ty,
+									className: "text-kit-fg-2"
+								}), TYPE_UI[ty].label]
+							})
+						}, ty))
+					})
+				})] })]
+			}),
+			/* @__PURE__ */ jsx(ColumnDetails, {
+				col,
+				onPatch: patch,
+				compact: false,
+				readOnly: lock
+			})
+		]
+	});
+}
+function FormText({ id, value, onCommit, suffix, numeric, readOnly, autoFocus }) {
+	const [draft, setDraft] = React.useState(value);
+	const [seen, setSeen] = React.useState(value);
+	if (seen !== value) {
+		setSeen(value);
+		setDraft(value);
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		children: [/* @__PURE__ */ jsx(Textarea, {
+			id,
+			rows: 1,
+			value: draft,
+			readOnly,
+			autoFocus,
+			maxLength: 5e3,
+			inputMode: numeric ? "decimal" : void 0,
+			onChange: (e) => setDraft(e.target.value),
+			onBlur: () => draft !== value && onCommit(draft),
+			className: cn("min-h-8 resize-none py-1.5", suffix && "pr-12")
+		}), suffix ? /* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none absolute right-2.5 top-1.5 text-kit-xs text-kit-fg-3",
+			children: suffix
+		}) : null]
+	});
+}
+var SEARCH = [
+	{
+		value: "none",
+		label: "Nothing special"
+	},
+	{
+		value: "ItemList",
+		label: "A comparison"
+	},
+	{
+		value: "Dataset",
+		label: "A data report"
+	},
+	{
+		value: "Offers",
+		label: "A price list"
+	}
+];
+var NO_COLUMN = "__none";
+/** Totals on: an empty totals row appears at the end of the list. Off: empty totals rows go, filled ones rejoin the body. */
+function setTotals(t, on) {
+	if (on) return t.rows.some((r) => r.footer) ? t : {
+		...t,
+		rows: [...t.rows, {
+			_key: tkey("r"),
+			cells: {},
+			footer: true
+		}]
+	};
+	return {
+		...t,
+		rows: t.rows.filter((r) => !r.footer || Object.values(r.cells).some((c) => !isEmptyCell(cellValue(c)))).map((r) => r.footer ? clean({
+			...r,
+			footer: void 0
+		}) : r)
+	};
+}
+function TableSettings({ ctx }) {
+	const { t, set, developer, options } = ctx;
+	const can = offered(options);
+	const d = t.design ?? {};
+	const sortable = t.columns.some((c) => c.sortable);
+	const totals = t.rows.some((r) => r.footer);
+	const phones = d.responsive ?? "scroll";
+	const highlighted = t.columns.find((c) => c.highlight);
+	const pickable = t.columns.filter((_, i) => !(t.headerColumn && i === 0));
+	const jsonOffered = SEARCH.filter((x) => x.value === "none" || can.jsonLd.includes(x.value));
+	const showJson = can.jsonLd.length > 0 || !!t.jsonLd && t.jsonLd.type !== "none";
+	if (!(can.headers || can.totals || can.phones.length || can.highlight || can.sort || can.search || showJson || developer)) return null;
+	const design = (p) => set({
+		...t,
+		design: withPatch(d, p)
+	});
+	const summary = [
+		can.phones.length ? `${PHONES.find((p) => p.value === phones)?.label ?? "Scroll"} on phones` : "",
+		can.highlight && highlighted ? `${highlighted.label || "A column"} highlighted` : "",
+		can.totals && totals ? "Totals row" : ""
+	].filter(Boolean).join(" · ");
+	const pick = (label, node) => /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1.5",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-kit-sm font-medium text-kit-fg-2",
+			children: label
+		}), node]
+	});
+	return /* @__PURE__ */ jsxs(FieldSection, {
+		title: "Table settings",
+		defaultOpen: false,
+		summary,
+		className: "before:hidden",
+		children: [
+			can.headers ? /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col",
+				children: [
+					/* @__PURE__ */ jsx(SwitchRow, {
+						label: "Show column names",
+						checked: t.headerRow,
+						onChange: (v) => set({
+							...t,
+							headerRow: v
+						})
+					}),
+					/* @__PURE__ */ jsx(SwitchRow, {
+						label: "First column names each row",
+						checked: t.headerColumn,
+						onChange: (v) => set({
+							...t,
+							headerColumn: v
+						})
+					}),
+					can.totals ? /* @__PURE__ */ jsx(SwitchRow, {
+						label: "Totals row",
+						checked: totals,
+						onChange: (v) => set(setTotals(t, v))
+					}) : null
+				]
+			}) : can.totals ? /* @__PURE__ */ jsx(SwitchRow, {
+				label: "Totals row",
+				checked: totals,
+				onChange: (v) => set(setTotals(t, v))
+			}) : null,
+			can.highlight ? pick("Highlight column", /* @__PURE__ */ jsx(Select, {
+				"aria-label": "Highlight column",
+				value: highlighted?._key ?? NO_COLUMN,
+				onValueChange: (k) => set({
+					...t,
+					columns: t.columns.map((c) => withPatch(c, { highlight: c._key === k ? true : void 0 }))
+				}),
+				options: [{
+					value: NO_COLUMN,
+					label: "None"
+				}, ...pickable.map((c) => ({
+					value: c._key,
+					label: c.label || "Untitled column"
+				}))]
+			})) : null,
+			can.phones.length ? pick("On phones", /* @__PURE__ */ jsx(ChoiceSwitch, {
+				"aria-label": "On phones",
+				value: phones,
+				onChange: (responsive) => design({ responsive }),
+				items: can.phones
+			})) : null,
+			can.sort || can.search ? /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col",
+				children: [can.sort ? /* @__PURE__ */ jsx(SwitchRow, {
+					label: "Visitors can sort columns",
+					checked: sortable,
+					onChange: (v) => set({
+						...t,
+						columns: t.columns.map((c, i) => withPatch(c, { sortable: v && !(t.headerColumn && i === 0) ? true : void 0 }))
+					})
+				}) : null, can.search ? /* @__PURE__ */ jsx(SwitchRow, {
+					label: "Visitors can search rows",
+					checked: !!t.filterable,
+					onChange: (v) => set(dropUndefined({
+						...t,
+						filterable: v || void 0
+					}))
+				}) : null]
+			}) : null,
+			showJson ? /* @__PURE__ */ jsxs(Fragment, { children: [pick("Help search engines read this as", /* @__PURE__ */ jsx(ChoiceSwitch, {
+				"aria-label": "Help search engines read this as",
+				value: t.jsonLd?.type ?? "none",
+				onChange: (type) => set(dropUndefined({
+					...t,
+					jsonLd: type === "none" ? void 0 : {
+						...t.jsonLd,
+						type,
+						...type === "ItemList" ? { axis: t.jsonLd?.axis ?? "rows" } : {}
+					}
+				})),
+				items: jsonOffered
+			})), t.jsonLd?.type === "ItemList" && developer ? pick("The things compared are the", /* @__PURE__ */ jsx(ChoiceSwitch, {
+				"aria-label": "The things compared are the",
+				value: t.jsonLd.axis ?? "rows",
+				onChange: (axis) => set({
+					...t,
+					jsonLd: {
+						...t.jsonLd,
+						axis
+					}
+				}),
+				items: [{
+					value: "rows",
+					label: "Rows"
+				}, {
+					value: "columns",
+					label: "Columns"
+				}]
+			})) : null] }) : null,
+			developer ? /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col",
+				children: [
+					/* @__PURE__ */ jsx(SwitchRow, {
+						label: "Hide the title on the page",
+						checked: !!d.hideCaption,
+						onChange: (v) => design({ hideCaption: v || void 0 })
+					}),
+					can.sticky ? /* @__PURE__ */ jsx(SwitchRow, {
+						label: "Keep column names in view",
+						checked: !!d.sticky,
+						onChange: (v) => design({ sticky: v || void 0 })
+					}) : null,
+					/* @__PURE__ */ jsx(SwitchRow, {
+						label: "Striped rows",
+						checked: !!d.striped,
+						onChange: (v) => design({ striped: v || void 0 })
+					}),
+					/* @__PURE__ */ jsx(SwitchRow, {
+						label: "Compact",
+						checked: d.density === "compact",
+						onChange: (v) => design({ density: v ? "compact" : void 0 })
+					})
+				]
+			}) : null
+		]
+	});
+}
+var dropUndefined = (o) => Object.fromEntries(Object.entries(o).filter(([, v]) => v !== void 0));
+//#endregion
+export { TableEditor, TableFullScreenButton, TableItemEditor };
+
+//# sourceMappingURL=table-editor.js.map