@bettercms-ai/kit 0.1.1 → 1.0.0

package/engine/item-list.js

@@ -0,0 +1,703 @@
+import { cn } from "../lib/cn.js";
+import { newKey, pathKey } from "../lib/path.js";
+import { useForm, useKitServices } from "../context.js";
+import { Button } from "../ui/button.js";
+import { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger } from "../ui/overlay.js";
+import { itemNoun } from "../lib/schema.js";
+import { Textarea } from "../ui/input.js";
+import * as React from "react";
+import { IconArrowDown, IconArrowUp, IconCopy, IconDots, IconGripVertical, IconPlus, IconTrash } from "@tabler/icons-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useReducedMotion } from "framer-motion";
+//#region src/kit/engine/item-list.tsx
+/**
+* ITEM LIST — arrays of one line each (CPO D47): feature lists, bullets, "what's included", key points
+* (V2 HEAD 9829bf1 kit/engine/item-list.tsx).
+* Each item is a row you type into directly: grip · auto-growing input (founder rule: the whole text shows) · ⋯.
+* No drill frame, no expand. Keyboard: Enter adds the next item, Backspace on an empty row removes it, a multi-line
+* paste becomes several items, ⌥↑ / ⌥↓ move the row, ↑ / ↓ at the edges of the text step between rows. None of these
+* keys are printed on screen (D44); they live in aria labels and the ⋯ menu.
+*
+* Works for arrays of primitives (string / text / url / email / number) AND arrays of one-field objects
+* (`[{ _key, text }]`), which read and write that one field and keep their `_key`.
+*
+* Kit deviation: V2 sorts with @dnd-kit, which is not on the kit's package allow-list. `useDragReorder` below is the
+* kit's sortable: pointer drag on the grip (4px activation, siblings slide out of the way like dnd-kit's vertical
+* strategy), and dnd-kit's KeyboardSensor + sortableKeyboardCoordinates on a focused grip: Space / Enter picks the row
+* up, the arrow keys move it (siblings slide, nothing is written yet), Space / Enter / Tab drops it as ONE reorder
+* (one undo step), Escape puts it back. `sort.a11y` is dnd-kit's accessibility markup (hidden instructions + a visually
+* hidden `role="status"` live region), rendered where V2's DndContext rendered it: right after the sortable children.
+*/
+/** V2 controls/text TEXT_FOCUS: a list row's input shows the field focus border only, no ring shadow. */
+var TEXT_FOCUS = "focus:shadow-none focus-visible:shadow-none";
+var EASE = "cubic-bezier(0.22, 1, 0.36, 1)";
+var cap = (s) => s.charAt(0).toUpperCase() + s.slice(1);
+/** "- Net-30", "• Net-30", "1. Net-30", "[x] Net-30" → "Net-30" */
+var stripBullet = (s) => s.replace(/^\s*(?:[-*•‣◦▪–—]|\d+[.)]|\[[ xX]\])\s+/, "").trim();
+var move = (list, from, to) => {
+	const next = list.slice();
+	const [it] = next.splice(from, 1);
+	next.splice(to, 0, it);
+	return next;
+};
+/** dnd-kit's arrayMove, for callers that reorder lists. */
+var arrayMove = move;
+function toValue(kind, text) {
+	if (kind === "number") {
+		const t = text.trim();
+		if (!t) return null;
+		const n = Number(t.replace(/,/g, ""));
+		return Number.isFinite(n) ? n : void 0;
+	}
+	return kind === "url" || kind === "email" ? text.trim() : text;
+}
+/** Tiles on the first row of a grid at pick-up (↑ / ↓ jump by this many, like sortableKeyboardCoordinates). */
+var columns = (rects) => {
+	const top = rects[0]?.top;
+	return top == null ? 1 : Math.max(1, rects.filter((r) => r?.top === top).length);
+};
+/**
+* Sortable rows by id. `register(id)` goes on the element that moves, `handle(id)` on its grip. Pointer: drag past
+* `distance` px to pick up; the row follows the pointer, siblings slide (list axis by one row, grid into the
+* neighbour's rect), the drop commits ONE reorder.
+* Keyboard on the grip (dnd-kit KeyboardSensor): Space / Enter picks up; ↑ / ↓ (← / → too in a grid, where ↑ / ↓ jump
+* a row of tiles) move it one slot; Space / Enter / Tab drops it as ONE reorder; Escape (or leaving the grip) cancels
+* with nothing written. Focus stays on the grip.
+*/
+function useDragReorder(ids, onReorder, { axis = "y", disabled = false, distance = 4 } = {}) {
+	const [drag, setDrag] = React.useState(null);
+	const [announcement, setOwnAnnouncement] = React.useState("");
+	const ownId = React.useId();
+	const shared = React.useContext(SharedSortContext);
+	const describedBy = shared?.id ?? ownId;
+	const setAnnouncement = shared?.announce ?? setOwnAnnouncement;
+	const glide = useReducedMotion() ? "none" : `transform 200ms ${EASE}`;
+	const els = React.useRef(/* @__PURE__ */ new Map());
+	const grips = React.useRef(/* @__PURE__ */ new Map());
+	const refocus = React.useRef(null);
+	const kb = React.useRef(null);
+	const setKb = (s) => {
+		kb.current = s;
+		setDrag(s);
+	};
+	const latest = React.useRef({
+		ids,
+		onReorder
+	});
+	latest.current = {
+		ids,
+		onReorder
+	};
+	React.useLayoutEffect(() => {
+		const id = refocus.current;
+		if (!id) return;
+		refocus.current = null;
+		const g = grips.current.get(id);
+		if (g && document.activeElement !== g) g.focus();
+	});
+	const register = (id) => (el) => {
+		if (el) els.current.set(id, el);
+		else els.current.delete(id);
+	};
+	const onPointerDown = (id) => (e) => {
+		if (disabled || e.button !== 0 || kb.current) return;
+		e.stopPropagation();
+		const from = latest.current.ids.indexOf(id);
+		if (from < 0) return;
+		const x0 = e.clientX;
+		const y0 = e.clientY;
+		let rects = [];
+		let state = null;
+		const userSelect = document.body.style.userSelect;
+		const onMove = (ev) => {
+			const dx = ev.clientX - x0;
+			const dy = ev.clientY - y0;
+			if (!state) {
+				if (Math.hypot(dx, dy) < distance) return;
+				rects = latest.current.ids.map((k) => els.current.get(k)?.getBoundingClientRect());
+				const r = rects[from];
+				const next = rects[from + 1] ?? rects[from - 1];
+				const gap = r && next ? Math.max(0, next.top > r.top ? next.top - r.bottom : r.top - next.bottom) : 0;
+				state = {
+					id,
+					from,
+					over: from,
+					dx,
+					dy,
+					shift: (r?.height ?? 0) + gap,
+					rects
+				};
+				document.body.style.userSelect = "none";
+				setAnnouncement(`Picked up item ${from + 1} of ${latest.current.ids.length}.`);
+			}
+			const hit = rects.findIndex((r) => r && ev.clientY >= r.top && ev.clientY <= r.bottom && (axis === "y" || ev.clientX >= r.left && ev.clientX <= r.right));
+			state = {
+				...state,
+				dx,
+				dy,
+				over: hit >= 0 ? hit : state.over
+			};
+			setDrag(state);
+		};
+		const end = (commit) => {
+			window.removeEventListener("pointermove", onMove);
+			window.removeEventListener("pointerup", onUp);
+			window.removeEventListener("pointercancel", onCancel);
+			document.body.style.userSelect = userSelect;
+			const s = state;
+			setDrag(null);
+			if (!s) return;
+			const swallow = (ce) => {
+				ce.stopPropagation();
+				ce.preventDefault();
+			};
+			window.addEventListener("click", swallow, {
+				capture: true,
+				once: true
+			});
+			window.setTimeout(() => window.removeEventListener("click", swallow, { capture: true }), 0);
+			if (commit && s.over !== s.from) latest.current.onReorder(s.from, s.over);
+			setAnnouncement(commit ? `Item dropped at position ${s.over + 1} of ${latest.current.ids.length}.` : `Dragging was cancelled. Item ${s.from + 1} was dropped.`);
+		};
+		const onUp = () => end(true);
+		const onCancel = () => end(false);
+		window.addEventListener("pointermove", onMove);
+		window.addEventListener("pointerup", onUp);
+		window.addEventListener("pointercancel", onCancel);
+	};
+	/** where the picked-up row sits over slot `over` (the sortable strategies' target rect) */
+	const offset = (s, over) => {
+		const a = s.rects[s.from];
+		const b = s.rects[over];
+		if (!a || !b || over === s.from) return {
+			dx: 0,
+			dy: 0
+		};
+		if (axis === "grid") return {
+			dx: b.left - a.left,
+			dy: b.top - a.top
+		};
+		return {
+			dx: 0,
+			dy: over > s.from ? b.bottom - a.bottom : b.top - a.top
+		};
+	};
+	const onKeyDown = (id) => (e) => {
+		if (disabled || e.nativeEvent.isComposing) return;
+		const { ids: list, onReorder: commit } = latest.current;
+		const n = list.length;
+		const s = kb.current;
+		if (!s) {
+			if (e.key !== " " && e.key !== "Enter") return;
+			const from = list.indexOf(id);
+			if (from < 0 || drag) return;
+			e.preventDefault();
+			e.stopPropagation();
+			const rects = list.map((k) => els.current.get(k)?.getBoundingClientRect());
+			const r = rects[from];
+			const next = rects[from + 1] ?? rects[from - 1];
+			const gap = r && next ? Math.max(0, next.top > r.top ? next.top - r.bottom : r.top - next.bottom) : 0;
+			setKb({
+				id,
+				from,
+				over: from,
+				dx: 0,
+				dy: 0,
+				shift: (r?.height ?? 0) + gap,
+				rects,
+				keyboard: true
+			});
+			setAnnouncement(`Picked up item ${from + 1} of ${n}.`);
+			return;
+		}
+		if (s.id !== id) return;
+		if (e.key === " " || e.key === "Enter" || e.key === "Tab") {
+			if (e.key !== "Tab") {
+				e.preventDefault();
+				refocus.current = id;
+			}
+			e.stopPropagation();
+			setKb(null);
+			if (list[s.from] !== id) return setAnnouncement(`The list changed while moving. Item ${s.from + 1} was not moved.`);
+			if (s.over !== s.from) commit(s.from, s.over);
+			setAnnouncement(`Item dropped at position ${s.over + 1} of ${n}.`);
+			return;
+		}
+		if (e.key === "Escape") {
+			e.preventDefault();
+			e.stopPropagation();
+			refocus.current = id;
+			setKb(null);
+			setAnnouncement(`Dragging was cancelled. Item ${s.from + 1} was dropped.`);
+			return;
+		}
+		const rowStep = axis === "grid" ? columns(s.rects) : 1;
+		const step = e.key === "ArrowDown" ? rowStep : e.key === "ArrowUp" ? -rowStep : axis === "grid" && e.key === "ArrowRight" ? 1 : axis === "grid" && e.key === "ArrowLeft" ? -1 : 0;
+		if (!step) return;
+		e.preventDefault();
+		e.stopPropagation();
+		const to = s.over + step;
+		if (to < 0 || to >= n) return;
+		setKb({
+			...s,
+			over: to,
+			...offset(s, to)
+		});
+		setAnnouncement(`Item moved to position ${to + 1} of ${n}.`);
+	};
+	const onBlur = (id) => () => {
+		const s = kb.current;
+		if (!s || s.id !== id) return;
+		setKb(null);
+		setAnnouncement(`Dragging was cancelled. Item ${s.from + 1} was dropped.`);
+	};
+	const handle = (id) => ({
+		ref: (el) => {
+			if (el) grips.current.set(id, el);
+			else grips.current.delete(id);
+		},
+		onPointerDown: onPointerDown(id),
+		onKeyDown: onKeyDown(id),
+		onBlur: onBlur(id),
+		"aria-pressed": drag?.id === id ? true : void 0,
+		"aria-roledescription": "sortable",
+		"aria-describedby": describedBy,
+		"data-drag-handle": id
+	});
+	const style = (id) => {
+		if (!drag) return void 0;
+		if (id === drag.id) return {
+			transform: `translate3d(${axis === "grid" ? drag.dx : 0}px, ${drag.dy}px, 0)`,
+			zIndex: 10,
+			position: "relative",
+			transition: drag.keyboard ? glide : "none"
+		};
+		const i = ids.indexOf(id);
+		const { from, over, shift } = drag;
+		if (axis === "grid") {
+			const to = from < over && i > from && i <= over ? i - 1 : from > over && i >= over && i < from ? i + 1 : i;
+			const a = drag.rects[i];
+			const b = drag.rects[to];
+			return {
+				transform: to !== i && a && b ? `translate3d(${b.left - a.left}px, ${b.top - a.top}px, 0)` : void 0,
+				transition: glide
+			};
+		}
+		const dy = from < over && i > from && i <= over ? -shift : from > over && i >= over && i < from ? shift : 0;
+		return {
+			transform: dy ? `translate3d(0, ${dy}px, 0)` : void 0,
+			transition: glide
+		};
+	};
+	const a11y = shared ? null : /* @__PURE__ */ jsx(SortAnnouncer, {
+		id: describedBy,
+		announcement
+	});
+	return {
+		register,
+		handle,
+		style,
+		active: drag?.id ?? null,
+		over: drag ? ids[drag.over] ?? null : null,
+		a11y
+	};
+}
+var SharedSortContext = React.createContext(null);
+/**
+* One announcer for several sortable lists, as V2 has where ONE DndContext wraps them (a table's row groups): the
+* lists under `SharedSortProvider value={value}` describe their grips with its instructions and announce into its live region, and `a11y`
+* renders once where V2's DndContext rendered it (after its children).
+*/
+function useSharedSort() {
+	const [announcement, setAnnouncement] = React.useState("");
+	const id = React.useId();
+	return {
+		value: React.useMemo(() => ({
+			id,
+			announce: setAnnouncement
+		}), [id]),
+		a11y: /* @__PURE__ */ jsx(SortAnnouncer, {
+			id,
+			announcement
+		})
+	};
+}
+var SharedSortProvider = SharedSortContext.Provider;
+var LIVE_REGION = {
+	position: "fixed",
+	top: 0,
+	left: 0,
+	width: 1,
+	height: 1,
+	margin: -1,
+	border: 0,
+	padding: 0,
+	overflow: "hidden",
+	clip: "rect(0 0 0 0)",
+	clipPath: "inset(100%)",
+	whiteSpace: "nowrap"
+};
+/**
+* dnd-kit's <Accessibility> (V2 got it from every DndContext): the drag instructions (display: none, named by each
+* handle's aria-describedby) and an assertive `role="status"` live region with the last move. Like dnd-kit it renders
+* only after mount.
+*/
+function SortAnnouncer({ id, announcement }) {
+	const [mounted, setMounted] = React.useState(false);
+	React.useEffect(() => setMounted(true), []);
+	if (!mounted) return null;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		id,
+		style: { display: "none" },
+		children: "To pick up a draggable item, press the space bar or enter. While dragging, use the arrow keys to move the item. Press space or enter again to drop the item in its new position, or press escape to cancel."
+	}), /* @__PURE__ */ jsx("div", {
+		style: LIVE_REGION,
+		role: "status",
+		"aria-live": "assertive",
+		"aria-atomic": true,
+		children: announcement
+	})] });
+}
+/** Keys for list items that have none (primitives): stable across our own edits, regenerated on outside changes. */
+function useRowKeys(list, keyOf) {
+	const local = React.useRef([]);
+	if (keyOf) return {
+		keys: list.map((it, i) => keyOf(it) ?? `i${i}`),
+		set: (_) => {}
+	};
+	if (local.current.length !== list.length) {
+		const next = local.current.slice(0, list.length);
+		while (next.length < list.length) next.push(newKey());
+		local.current = next;
+	}
+	return {
+		keys: local.current,
+		set: (k) => local.current = k
+	};
+}
+function ItemList({ field, path, list, readOnly, adapter, inputId }) {
+	const form = useForm();
+	const { toast } = useKitServices();
+	const { min, max } = field.validation ?? {};
+	const noun = itemNoun(field);
+	const { keys, set: setKeys } = useRowKeys(list, adapter.keyOf);
+	const inputs = React.useRef(/* @__PURE__ */ new Map());
+	const addRef = React.useRef(null);
+	const focusReq = React.useRef(null);
+	const atMax = max != null && list.length >= max;
+	const atMin = min != null && list.length <= min;
+	React.useLayoutEffect(() => {
+		const req = focusReq.current;
+		if (!req) return;
+		const el = inputs.current.get(req.key);
+		if (!el) return;
+		focusReq.current = null;
+		el.focus({ preventScroll: false });
+		const at = req.caret === "start" ? 0 : req.caret === "end" ? el.value.length : Math.min(req.caret, el.value.length);
+		el.setSelectionRange(at, at);
+		el.scrollIntoView?.({ block: "nearest" });
+	});
+	const commit = (next, nextKeys) => {
+		setKeys(nextKeys);
+		form.setAt(path, next);
+	};
+	const limitToast = () => toast?.("Limit reached", { description: `${field.title} allows ${max} at most.` });
+	/** Insert `values` after row i (and optionally replace row i itself in the same write). */
+	const insertAfter = (i, values, caret = "end", current) => {
+		const room = max == null ? values.length : Math.max(0, max - list.length);
+		if (room === 0) return limitToast();
+		const take = values.slice(0, room);
+		if (take.length < values.length) toast?.("Some lines were left out", { description: `${field.title} allows ${max} at most, so ${values.length - take.length} didn't fit.` });
+		const items = take.map((v) => adapter.write(v));
+		const newKeys = items.map((it) => adapter.keyOf?.(it) ?? newKey());
+		commit([
+			...current === void 0 ? list.slice(0, i + 1) : [...list.slice(0, i), current],
+			...items,
+			...list.slice(i + 1)
+		], [
+			...keys.slice(0, i + 1),
+			...newKeys,
+			...keys.slice(i + 1)
+		]);
+		focusReq.current = {
+			key: newKeys[newKeys.length - 1],
+			caret
+		};
+	};
+	const add = () => {
+		if (atMax) return limitToast();
+		insertAfter(list.length - 1, [adapter.kind === "number" ? null : ""]);
+	};
+	const removeAt = (i, opts = {}) => {
+		if (atMin) return toast?.(`At least ${min} required`, { description: `${field.title} needs ${min} or more.` });
+		const prevList = list;
+		const prevKeys = keys;
+		commit(list.filter((_, j) => j !== i), keys.filter((_, j) => j !== i));
+		if (opts.focus !== "none") {
+			const target = i > 0 ? keys[i - 1] : keys[i + 1];
+			if (target) focusReq.current = {
+				key: target,
+				caret: i > 0 ? "end" : "start"
+			};
+			else window.setTimeout(() => addRef.current?.focus(), 0);
+		}
+		if (opts.undo) {
+			const text = adapter.read(prevList[i]);
+			toast?.(text ? `“${text.length > 40 ? `${text.slice(0, 38)}…` : text}” removed` : `${cap(noun)} removed`, {
+				action: {
+					label: "Undo",
+					onClick: () => commit(prevList, prevKeys)
+				},
+				duration: 1e4
+			});
+		}
+	};
+	const moveRow = (i, d, keepFocus = false) => {
+		const to = i + d;
+		if (to < 0 || to >= list.length) return;
+		const caret = inputs.current.get(keys[i])?.selectionStart ?? "end";
+		commit(move(list, i, to), move(keys, i, to));
+		if (keepFocus) focusReq.current = {
+			key: keys[i],
+			caret
+		};
+	};
+	const duplicate = (i) => {
+		if (atMax) return limitToast();
+		insertAfter(i, [toValue(adapter.kind, adapter.read(list[i])) ?? adapter.read(list[i])]);
+	};
+	const focusRow = (i, caret) => {
+		const el = inputs.current.get(keys[i]);
+		if (!el) return;
+		el.focus();
+		const at = caret === "start" ? 0 : el.value.length;
+		el.setSelectionRange(at, at);
+	};
+	const sort = useDragReorder(keys, (from, to) => commit(move(list, from, to), move(keys, from, to)), { disabled: readOnly });
+	const n = list.length;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1.5",
+		children: [n ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("ul", {
+			className: "flex flex-col gap-1.5",
+			"aria-label": field.title,
+			children: list.map((item, i) => /* @__PURE__ */ jsx(ItemRow, {
+				rowKey: keys[i],
+				sort,
+				index: i,
+				count: n,
+				noun,
+				item,
+				adapter,
+				readOnly,
+				fieldKey: pathKey([...path, ...adapter.valuePath(i)]),
+				invalid: !!form.visibleIssue(pathKey([...path, ...adapter.valuePath(i)])),
+				inputId: i === 0 ? inputId : void 0,
+				canAdd: !atMax,
+				canRemove: !atMin,
+				min,
+				register: (el) => el ? inputs.current.set(keys[i], el) : inputs.current.delete(keys[i]),
+				onChange: (v) => form.setAt([...path, i], adapter.write(v, item)),
+				onBlur: () => form.touch(pathKey([...path, ...adapter.valuePath(i)])),
+				onEnter: (caretAtStart) => {
+					if (!adapter.read(item).trim() && i === n - 1) return;
+					if (atMax) return limitToast();
+					if (caretAtStart && adapter.read(item)) {
+						const k = adapter.write(adapter.kind === "number" ? null : "");
+						const nk = adapter.keyOf?.(k) ?? newKey();
+						commit([
+							...list.slice(0, i),
+							k,
+							...list.slice(i)
+						], [
+							...keys.slice(0, i),
+							nk,
+							...keys.slice(i)
+						]);
+						focusReq.current = {
+							key: keys[i],
+							caret: "start"
+						};
+						return;
+					}
+					insertAfter(i, [adapter.kind === "number" ? null : ""]);
+				},
+				onBackspaceEmpty: () => removeAt(i, { focus: "prev" }),
+				onPasteLines: (first, rest, caret) => {
+					const items = rest.map((t) => toValue(adapter.kind, t)).filter((v) => v !== void 0);
+					const current = adapter.write(toValue(adapter.kind, first) ?? first, item);
+					if (items.length && !atMax) insertAfter(i, items, "end", current);
+					else {
+						if (items.length) limitToast();
+						form.setAt([...path, i], current);
+						focusReq.current = {
+							key: keys[i],
+							caret
+						};
+					}
+				},
+				onMove: (d) => moveRow(i, d, true),
+				onStep: (d) => {
+					const j = i + d;
+					if (j >= 0 && j < n) focusRow(j, d < 0 ? "end" : "start");
+				},
+				onDuplicate: () => duplicate(i),
+				onRemove: () => removeAt(i, { undo: true }),
+				onMenuMove: (d) => moveRow(i, d)
+			}, keys[i]))
+		}), sort.a11y] }) : null, readOnly ? n ? null : /* @__PURE__ */ jsx("span", {
+			className: "text-kit-sm text-kit-fg-3",
+			children: "Nothing here yet."
+		}) : /* @__PURE__ */ jsxs(Button, {
+			ref: addRef,
+			size: "sm",
+			variant: "ghost",
+			className: "-ml-1 self-start text-kit-fg-2",
+			leftIcon: /* @__PURE__ */ jsx(IconPlus, { stroke: 1.5 }),
+			disabled: atMax,
+			onClick: add,
+			children: ["Add ", noun]
+		})]
+	});
+}
+function ItemRow({ rowKey, sort, index, count, noun, item, adapter, readOnly, fieldKey, invalid, inputId, canAdd, canRemove, min, register, onChange, onBlur, onEnter, onBackspaceEmpty, onPasteLines, onMove, onStep, onDuplicate, onRemove, onMenuMove }) {
+	const isDragging = sort.active === rowKey;
+	const text = adapter.read(item);
+	const [draft, setDraft] = React.useState(null);
+	const shown = draft ?? text;
+	const label = `${cap(noun)} ${index + 1} of ${count}`;
+	const name = text ? `“${text.length > 32 ? `${text.slice(0, 30)}…` : text}”` : `${noun} ${index + 1}`;
+	return /* @__PURE__ */ jsxs("li", {
+		ref: sort.register(rowKey),
+		style: sort.style(rowKey),
+		"data-field-key": fieldKey,
+		className: cn("group/il relative flex items-start gap-1", isDragging && "z-10 rounded-kit-md bg-kit-surface shadow-kit-lg"),
+		children: [
+			readOnly ? null : /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": `Reorder ${name}`,
+				...sort.handle(rowKey),
+				className: "relative mt-1.5 flex h-5 w-4 shrink-0 cursor-grab touch-none items-center justify-center rounded-kit-sm text-kit-fg-4 transition-colors before:absolute before:-inset-1.5 hover:text-kit-fg-2 active:cursor-grabbing",
+				children: /* @__PURE__ */ jsx(IconGripVertical, {
+					className: "size-3.5",
+					stroke: 1.5
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "min-w-0 flex-1",
+				children: /* @__PURE__ */ jsx(Textarea, {
+					ref: register,
+					id: inputId,
+					rows: 1,
+					value: shown,
+					readOnly,
+					"aria-label": label,
+					"aria-invalid": invalid || void 0,
+					placeholder: adapter.placeholder ?? cap(noun),
+					inputMode: adapter.kind === "number" ? "decimal" : adapter.kind === "url" ? "url" : adapter.kind === "email" ? "email" : void 0,
+					spellCheck: adapter.kind === "text",
+					onBlur: () => {
+						setDraft(null);
+						onBlur();
+					},
+					onChange: (e) => {
+						const raw = e.target.value.replace(/\r?\n/g, " ");
+						if (adapter.kind === "number") {
+							setDraft(raw);
+							const v = toValue("number", raw);
+							if (v !== void 0) onChange(v);
+							return;
+						}
+						onChange(toValue(adapter.kind, raw));
+					},
+					onPaste: (e) => {
+						if (readOnly) return;
+						const clip = e.clipboardData.getData("text/plain");
+						if (!/\r?\n/.test(clip.trim())) return;
+						const lines = clip.split(/\r?\n/).map(stripBullet).filter(Boolean);
+						if (lines.length < 2) return;
+						e.preventDefault();
+						const el = e.currentTarget;
+						const before = el.value.slice(0, el.selectionStart);
+						const after = el.value.slice(el.selectionEnd);
+						const rest = lines.slice(1);
+						rest[rest.length - 1] = `${rest[rest.length - 1]}${after}`;
+						onPasteLines(`${before}${lines[0]}`, rest, before.length + lines[0].length);
+					},
+					onKeyDown: (e) => {
+						if (readOnly || e.nativeEvent.isComposing) return;
+						const el = e.currentTarget;
+						const atStart = el.selectionStart === 0 && el.selectionEnd === 0;
+						const atEnd = el.selectionStart === el.value.length && el.selectionEnd === el.value.length;
+						if (e.key === "Enter" && !e.shiftKey && !e.metaKey && !e.ctrlKey) {
+							e.preventDefault();
+							onEnter(atStart && el.value.length > 0);
+						} else if (e.key === "Backspace" && !el.value && canRemove) {
+							e.preventDefault();
+							onBackspaceEmpty();
+						} else if (e.altKey && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
+							e.preventDefault();
+							onMove(e.key === "ArrowUp" ? -1 : 1);
+						} else if (e.key === "ArrowUp" && atStart && !e.shiftKey) {
+							if (index > 0) {
+								e.preventDefault();
+								onStep(-1);
+							}
+						} else if (e.key === "ArrowDown" && atEnd && !e.shiftKey) {
+							if (index < count - 1) {
+								e.preventDefault();
+								onStep(1);
+							}
+						}
+					},
+					className: cn(TEXT_FOCUS, "min-h-8 py-1.5 leading-5")
+				})
+			}),
+			readOnly ? null : /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsx(MenuTrigger, {
+				"aria-label": `${cap(noun)} ${index + 1} actions`,
+				className: "mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-kit-md text-kit-fg-4 transition-colors hover:bg-kit-hover hover:text-kit-fg group-focus-within/il:text-kit-fg-3 group-hover/il:text-kit-fg-3 data-[popup-open]:bg-kit-hover data-[popup-open]:text-kit-fg",
+				children: /* @__PURE__ */ jsx(IconDots, {
+					className: "size-4",
+					stroke: 1.5
+				})
+			}), /* @__PURE__ */ jsxs(MenuContent, {
+				align: "end",
+				className: "w-48",
+				children: [
+					/* @__PURE__ */ jsx(MenuItem, {
+						icon: /* @__PURE__ */ jsx(IconCopy, { stroke: 1.5 }),
+						disabled: !canAdd,
+						onClick: onDuplicate,
+						children: canAdd ? "Duplicate" : "Duplicate · limit reached"
+					}),
+					/* @__PURE__ */ jsx(MenuSeparator, {}),
+					/* @__PURE__ */ jsx(MenuItem, {
+						icon: /* @__PURE__ */ jsx(IconArrowUp, { stroke: 1.5 }),
+						disabled: index === 0,
+						shortcut: "⌥↑",
+						onClick: () => onMenuMove(-1),
+						children: "Move up"
+					}),
+					/* @__PURE__ */ jsx(MenuItem, {
+						icon: /* @__PURE__ */ jsx(IconArrowDown, { stroke: 1.5 }),
+						disabled: index === count - 1,
+						shortcut: "⌥↓",
+						onClick: () => onMenuMove(1),
+						children: "Move down"
+					}),
+					/* @__PURE__ */ jsx(MenuSeparator, {}),
+					/* @__PURE__ */ jsx(MenuItem, {
+						danger: true,
+						icon: /* @__PURE__ */ jsx(IconTrash, { stroke: 1.5 }),
+						disabled: !canRemove,
+						onClick: onRemove,
+						children: canRemove ? "Delete" : `Delete · at least ${min} required`
+					})
+				]
+			})] })
+		]
+	});
+}
+//#endregion
+export { ItemList, SharedSortProvider, arrayMove, useDragReorder, useSharedSort };
+
+//# sourceMappingURL=item-list.js.map