@cssints/headless 0.18.0 → 0.20.0

package/dist/index.mjs

@@ -2051,6 +2051,90 @@ const createCheckbox = (options = {}) => {
 		}
 	};
 };
+// src/field.ts
+const text = (value) => value === void 0 || value === "" ? void 0 : value;
+const external = (value) => (value === void 0 ? [] : typeof value === "string" ? [value] : value).filter((id) => id !== "");
+/**
+* The ARIA contract of a form field: a label, a control, a hint and an error.
+* There is no APG pattern for it (APG has no "form field"; the nearest is the
+* label and description rules of the accessible name computation), so the
+* contract comes from WAI-ARIA 1.2 (`aria-describedby`, `aria-invalid`,
+* `aria-required`) and HTML (`label[for]`, `required`), and from the
+* majority of Base UI Field, react-aria TextField and ariakit FormControl,
+* which list the description and the error message together. It is not checked
+* against a Quint spec; `test/field.browser.test.tsx` is its oracle.
+*
+* Decisions: the error does not replace the hint, both are listed, hint first
+* (the hint is what tells the user how to fix the error); an error implies
+* invalid and `invalid: false` overrides it; a hidden message is never
+* referenced, so `aria-describedby` has no dangling id. The error element is
+* `role="alert"` only while it is shown (a hidden element announces nothing, and
+* one that appears is announced); the hint is never an alert.
+*
+* `describedby` lists host-owned ids after the field's own: one refusal that
+* belongs to two controls is one form-level element (with its own `role`), named
+* by both. The field cannot know whether that element is shown: the host
+* passes the id only while it is.
+*
+* Options are read when an attribute is read: pass getters, never destructure.
+*/
+const createField = (options = {}) => {
+	const base = options.id ?? createUniqueId();
+	const controlId = `${base}-control`;
+	const labelId = `${base}-label`;
+	const hintId = `${base}-hint`;
+	const errorId = `${base}-error`;
+	const hint = () => text(options.hint);
+	const message = () => text(options.error) ?? (typeof options.invalid === "string" ? text(options.invalid) : void 0);
+	const invalid = () => options.invalid === false ? false : options.invalid === true || message() !== void 0;
+	const error = () => invalid() ? message() : void 0;
+	const describedIds = () => [
+		...hint() === void 0 ? [] : [hintId],
+		...error() === void 0 ? [] : [errorId],
+		...external(options.describedby)
+	];
+	return {
+		invalid,
+		hint,
+		error,
+		describedIds,
+		controlProps: {
+			id: controlId,
+			get "aria-describedby"() {
+				const ids = describedIds();
+				return ids.length === 0 ? void 0 : ids.join(" ");
+			},
+			get "aria-invalid"() {
+				return invalid() ? "true" : void 0;
+			},
+			get "aria-required"() {
+				return options.required === true ? "true" : void 0;
+			},
+			get required() {
+				return options.required === true ? true : void 0;
+			}
+		},
+		labelProps: {
+			id: labelId,
+			for: controlId
+		},
+		hintProps: {
+			id: hintId,
+			get hidden() {
+				return hint() === void 0;
+			}
+		},
+		errorProps: {
+			id: errorId,
+			get hidden() {
+				return error() === void 0;
+			},
+			get role() {
+				return error() === void 0 ? void 0 : "alert";
+			}
+		}
+	};
+};
 // src/checkbox-group.ts
 const CHILDREN = [
 	"c0",
@@ -2089,7 +2173,17 @@ const nextFocus = (focus) => {
 * pass `value` + `onValueChange` to own the checked subset. The checked set is
 * packed internally so it rides the scalar `createControllable`.
 *
-* Behaviour is checked against `specs/apg/checkbox-group.qnt` by the bridge.
+* The name, the description and the error are `createField`'s contract on the
+* `role="group"` element (`aria-label` / `aria-labelledby`, `aria-describedby`,
+* `aria-invalid`, an error element that is `role="alert"` while it is shown), so
+* a group reads like the fields around it. The group is not a `<label for>`
+* target: a host names a visible label element's id with `labelledby`, or passes
+* `label` without one.
+*
+* Behaviour is checked against `specs/apg/checkbox-group.qnt` by the bridge. That
+* model leaves labelling out on purpose ("shift+Tab, accessible names,
+* fieldset/legend or role=group labelling" in its header), so the field contract
+* is checked by plain assertions in `test/checkbox-group.browser.test.tsx`.
 */
 const createCheckboxGroup = (options) => {
 	const values = options.values;
@@ -2100,6 +2194,18 @@ const createCheckboxGroup = (options) => {
 		initial: packedOf(options.defaultValue ?? []),
 		onChange: () => (next) => options.onValueChange?.(labelsOf(next))
 	});
+	const field = createField({
+		id: options.id,
+		get invalid() {
+			return options.invalid;
+		},
+		get error() {
+			return options.error;
+		},
+		get describedby() {
+			return options.describedby;
+		}
+	});
 	const [memory, setMemory] = createSignal(normalizeChildren([]));
 	const [remember, setRememberSignal] = createSignal(options.remember === true);
 	const [focused, setFocused] = createSignal("none");
@@ -2157,6 +2263,9 @@ const createCheckboxGroup = (options) => {
 		focused,
 		parentChecked,
 		checkedValues: () => selectedValues(children()),
+		error: field.error,
+		invalid: field.invalid,
+		describedIds: field.describedIds,
 		click: (target) => {
 			activate(target);
 		},
@@ -2179,7 +2288,20 @@ const createCheckboxGroup = (options) => {
 			requestPacked(packed(normalizeChildren(next)));
 		},
 		groupProps: {
+			id: field.controlProps.id,
 			role: "group",
+			get "aria-label"() {
+				return options.label;
+			},
+			get "aria-labelledby"() {
+				return options.labelledby;
+			},
+			get "aria-describedby"() {
+				return field.controlProps["aria-describedby"];
+			},
+			get "aria-invalid"() {
+				return field.controlProps["aria-invalid"];
+			},
 			onKeyDown: (event) => {
 				if (event.key === "Tab") {
 					event.preventDefault();
@@ -2190,6 +2312,7 @@ const createCheckboxGroup = (options) => {
 				}
 			}
 		},
+		errorProps: field.errorProps,
 		parentProps: {
 			role: "checkbox",
 			get "aria-checked"() {
@@ -2584,72 +2707,472 @@ const createDialogModal = (options = {}) => {
 		}
 	};
 };
-// src/overlay-shell.ts
-/**
-* The page-wide half of a modal overlay: one scroll lock, one stack of open
-* overlays, the tabbables of a panel and the Tab cycle over them. Shared by
-* `createConfirm` and `createDrawer` so that a confirm opened over a drawer (or
-* the reverse) takes Escape and Tab first, and the scroll lock outlives the
-* first of them to close.
-*/
-const TABBABLE = "a[href], button, input, select, textarea, [tabindex], [contenteditable]";
-/** The visible, tabbable elements of `root`, in document order. */
-const tabbables = (root) => Array.from(root.querySelectorAll(TABBABLE)).filter((element) => element.tabIndex >= 0 && !element.matches(":disabled") && element.getClientRects().length > 0);
-/** The first tabbable element of `root`, if any. */
-const firstFocusable$1 = (root) => tabbables(root)[0];
-/**
-* Wraps Tab / Shift+Tab inside `root` and pulls a focus that escaped back in
-* on the next Tab. With nothing tabbable the panel itself (which is
-* `tabindex="-1"`) keeps the focus.
-*/
-const cycleFocus = (event, root) => {
-	const items = tabbables(root);
-	const first = items[0];
-	const last = items.at(-1);
-	const active = document.activeElement;
-	const inside = root.contains(active);
-	if (first === void 0 || last === void 0) {
-		event.preventDefault();
-		root.focus();
-	} else if (event.shiftKey && (!inside || active === first || active === root)) {
-		event.preventDefault();
-		last.focus();
-	} else if (!event.shiftKey && (!inside || active === last)) {
-		event.preventDefault();
-		first.focus();
+// src/hotkeys.ts
+const MODIFIERS = /* @__PURE__ */ new Set([
+	"mod",
+	"ctrl",
+	"alt",
+	"shift",
+	"meta"
+]);
+const SHIFTED = /* @__PURE__ */ new Set("~!@#$%^&*()_+{}|:\"<>?");
+const detectsApple = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/.test(navigator.platform || navigator.userAgent);
+const parse = (keys, isApple) => {
+	const parts = keys.toLowerCase().split("+");
+	const key = parts.pop() ?? "";
+	if (key === "" || MODIFIERS.has(key)) throw new TypeError(`hotkeys: "${keys}" ends with no key`);
+	const chord = {
+		ctrl: false,
+		meta: false,
+		alt: false,
+		shift: SHIFTED.has(key),
+		key
+	};
+	for (const part of parts) switch (part) {
+		case "mod":
+			if (isApple) chord.meta = true;
+			else chord.ctrl = true;
+			break;
+		case "ctrl":
+			chord.ctrl = true;
+			break;
+		case "meta":
+			chord.meta = true;
+			break;
+		case "alt":
+			chord.alt = true;
+			break;
+		case "shift":
+			chord.shift = true;
+			break;
+		default: throw new TypeError(`hotkeys: "${part}" in "${keys}" is not a modifier`);
 	}
+	return chord;
 };
-let scrollLocks = 0;
-let scrollBefore = "";
+const matches = (chord, event) => event.key.toLowerCase() === chord.key && event.ctrlKey === chord.ctrl && event.metaKey === chord.meta && event.altKey === chord.alt && event.shiftKey === chord.shift;
+const editable = (target) => target instanceof HTMLElement && (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable);
+const inScope = (scope, target) => scope === void 0 || target instanceof Node && scope.contains(target);
 /**
-* `overflow: hidden` on the document element, counted: the first holder takes
-* it, the last to release restores what `overflow` was. The returned release is
-* idempotent.
+* One `keydown` listener in the capture phase, one list of chords. A chord
+* fires when its modifiers match exactly, its `when` holds, its scope contains
+* the event's target, and the focus is not in a text field (unless
+* `allowInEditable`). The most recently bound match is the only one that fires,
+* so a modal's `"/"` overrides the page's and unbinding it brings the page's
+* back; `preventDefault` is on by default for the bindings whose chord the
+* browser would otherwise act on (Cmd/Ctrl+S, Cmd/Ctrl+K).
 */
-const lockScroll = () => {
-	const root = document.documentElement;
-	if (scrollLocks++ === 0) {
-		scrollBefore = root.style.overflow;
-		root.style.overflow = "hidden";
-	}
-	let released = false;
-	return () => {
-		if (released) return;
-		released = true;
-		if (--scrollLocks === 0) root.style.overflow = scrollBefore;
+const createHotkeys = (options = {}) => {
+	const isApple = options.isApple ?? detectsApple();
+	const bindings = [];
+	let listening = false;
+	let disposed = false;
+	const onKeyDown = (event) => {
+		for (let i = bindings.length - 1; i >= 0; i--) {
+			const entry = bindings[i];
+			if (entry === void 0) continue;
+			const { chord, binding } = entry;
+			if (!matches(chord, event) || binding.when?.() === false) continue;
+			if (!inScope(binding.scope, event.target)) continue;
+			if (binding.allowInEditable !== true && editable(event.target)) continue;
+			if (binding.preventDefault !== false) event.preventDefault();
+			binding.onTrigger(event);
+			return;
+		}
+	};
+	const stop = () => {
+		if (!listening) return;
+		listening = false;
+		document.removeEventListener("keydown", onKeyDown, true);
+	};
+	return {
+		bind: (binding) => {
+			if (disposed) return () => {};
+			const entry = {
+				chord: parse(binding.keys, isApple),
+				binding
+			};
+			bindings.push(entry);
+			if (!listening) {
+				listening = true;
+				document.addEventListener("keydown", onKeyDown, true);
+			}
+			return () => {
+				const at = bindings.indexOf(entry);
+				if (at === -1) return;
+				bindings.splice(at, 1);
+				if (bindings.length === 0) stop();
+			};
+		},
+		dispose: () => {
+			disposed = true;
+			bindings.length = 0;
+			stop();
+		}
 	};
 };
-const openOverlays = [];
+// src/status.ts
 /**
-* Joins the open overlays; the last one to claim takes Escape and Tab. Returns
-* the release (idempotent), which may be called in any order.
-*/
-const claimOverlay = (self) => {
-	openOverlays.push(self);
-	let claimed = true;
-	return () => {
-		if (!claimed) return;
-		claimed = false;
+* APG Alert's polite sibling: one `role=status` live region whose text the host
+* replaces ("Link copied", "Saved"). It is not a queue: a second message shows
+* in place of the first, so a burst reads as the last state, not as N alerts.
+* The region is rendered once and stays mounted, which is what makes a change
+* of its text announced.
+*
+* A status is never for errors: an error that needs attention now is
+* `createAlert` (`role=alert`, assertive), and a message with a title, a
+* description and a timeout is `createToast`.
+*/
+const createStatus = (options = {}) => {
+	const id = options.id ?? createUniqueId();
+	const [message, setMessage] = createSignal();
+	return {
+		message,
+		show: (text) => {
+			setMessage(text);
+		},
+		clear: () => {
+			setMessage(void 0);
+		},
+		statusProps: {
+			id,
+			role: "status",
+			"aria-live": "polite",
+			"aria-atomic": "true"
+		}
+	};
+};
+// src/textbox.ts
+const control = (field, options) => ({
+	...field.controlProps,
+	get type() {
+		return options.type ?? "text";
+	},
+	get autoComplete() {
+		return options.autoComplete;
+	},
+	get spellcheck() {
+		if (options.spellCheck === void 0) return;
+		return options.spellCheck ? "true" : "false";
+	},
+	get autocapitalize() {
+		return options.autoCapitalize;
+	},
+	get inputmode() {
+		return options.inputMode;
+	},
+	get maxlength() {
+		return options.maxLength;
+	},
+	get readOnly() {
+		return options.readOnly === true ? true : void 0;
+	},
+	get disabled() {
+		return options.disabled === true ? true : void 0;
+	},
+	get name() {
+		return options.name;
+	},
+	get dir() {
+		return options.dir;
+	},
+	get placeholder() {
+		return options.placeholder;
+	},
+	onInput: (event) => {
+		options.onValueChange?.(event.currentTarget.value);
+	}
+});
+/**
+* A text input with the field contract attached: label, hint, error (announced),
+* `aria-describedby` and `aria-invalid` come from `createField`; this adds the
+* props a host forgets — autofill tokens, spellcheck, inputmode, maxlength, the
+* disabled/readOnly pair. Platform: native (`input` is its own APG-equivalent;
+* no primitive re-implements text editing, which is why there is no key
+* handling here).
+*
+* Both `required` and `aria-required` are emitted: the native attribute is what
+* the browser enforces, the ARIA one is what a custom widget reading the same
+* props needs. A host that validates itself passes `noValidate` on the form
+* rather than dropping the attribute.
+*/
+const createTextInput = (options = {}) => {
+	const field = createField(options);
+	return {
+		...field,
+		controlProps: control(field, options)
+	};
+};
+/**
+* The same contract for a textarea, plus rows, wrap and resize. `resize` is a
+* style because CSS has no attribute for it; `none` is the value a layout that
+* owns its own height wants.
+*/
+const createTextArea = (options = {}) => {
+	const field = createField(options);
+	return {
+		...field,
+		controlProps: {
+			...control(field, options),
+			get rows() {
+				return options.rows;
+			},
+			get wrap() {
+				return options.wrap;
+			},
+			get style() {
+				return options.resize === void 0 ? void 0 : { resize: options.resize };
+			}
+		}
+	};
+};
+// src/command-palette.ts
+const countLabel = (count) => count === 0 ? "No commands" : count === 1 ? "1 command" : `${count} commands`;
+/**
+* A command palette: `createDialogModal` (a modal dialog, announced as one),
+* `createTextInput` (a `searchbox`, not a combobox — choosing runs a command,
+* it does not complete the field) and one filtered list. Focus stays in the
+* field; `aria-activedescendant` names the highlighted option, and ↓ on the
+* last / ↑ on the first return the highlight to the field. Home/End are menu
+* keys only while the field is empty, so the caret keeps them while typing.
+* Filtering is a plain case-insensitive substring match on the label and the
+* keywords, no fuzzy scoring: a palette is short and stable, and ranking
+* (recency, scopes) is a policy the host owns.
+*
+* The host's: rendering and grouping (the `group` field, headings, the CSS),
+* async commands (a rejected `run` is the host's to report), and any close
+* other than Escape / a command. `runActive` closes before it runs.
+*/
+const createCommandPalette = (options) => {
+	const corpus = options.commands;
+	const base = createUniqueId();
+	const titleId = `${base}-title`;
+	const listId = `${base}-list`;
+	const optionId = (id) => `${base}-option-${id}`;
+	const labels = {
+		title: options.labels?.title ?? "Command palette",
+		placeholder: options.labels?.placeholder ?? "Type a command",
+		empty: options.labels?.empty ?? "No commands found",
+		results: options.labels?.results ?? countLabel
+	};
+	const filter = (text) => {
+		const needle = text.toLowerCase();
+		return corpus.filter((command) => command.label.toLowerCase().includes(needle) || (command.keywords ?? []).some((keyword) => keyword.toLowerCase().includes(needle))).map(({ id, label, group }) => ({
+			id,
+			label,
+			group
+		}));
+	};
+	const [query, setQueryRaw] = createSignal("");
+	const [active, setActiveRaw] = createSignal(0);
+	const results = () => filter(query());
+	const dialog = createDialogModal({
+		id: base,
+		role: "dialog",
+		labelledby: titleId,
+		value: options.open,
+		onOpenChange: (open) => options.onOpenChange?.(open)
+	});
+	const status = createStatus();
+	const setQuery = (text) => {
+		setQueryRaw(text);
+		setActiveRaw(filter(text).length > 0 ? 0 : -1);
+	};
+	const run = (id) => {
+		const chosen = corpus.find((command) => command.id === id);
+		if (chosen === void 0) return;
+		dialog.close();
+		return chosen.run();
+	};
+	const runActive = () => {
+		const current = results()[active()];
+		return current === void 0 ? void 0 : run(current.id);
+	};
+	const onKeyDown = (event) => {
+		if (event.isComposing) return;
+		const last = results().length - 1;
+		switch (event.key) {
+			case "ArrowDown":
+				event.preventDefault();
+				setActiveRaw(active() < last ? active() + 1 : -1);
+				return;
+			case "ArrowUp":
+				event.preventDefault();
+				setActiveRaw(active() > 0 ? active() - 1 : last);
+				return;
+			case "Home":
+			case "End":
+				if (query() !== "") return;
+				event.preventDefault();
+				setActiveRaw(event.key === "Home" ? last >= 0 ? 0 : -1 : last);
+				return;
+			case "Enter":
+				event.preventDefault();
+				runActive();
+				return;
+			default: return;
+		}
+	};
+	let returnFocus = null;
+	createEffect(() => dialog.open(), (isOpen) => {
+		if (isOpen) {
+			returnFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+			document.getElementById(`${base}-control`)?.focus();
+			return;
+		}
+		setQueryRaw("");
+		setActiveRaw(0);
+		const back = returnFocus;
+		returnFocus = null;
+		if (back !== null && back.isConnected) back.focus();
+	});
+	createEffect(() => [dialog.open(), results().length], ([isOpen, count]) => {
+		if (isOpen) status.show(labels.results(count));
+		else status.clear();
+	});
+	const input = createTextInput({
+		id: base,
+		type: "text",
+		autoComplete: "off",
+		spellCheck: false,
+		placeholder: labels.placeholder,
+		onValueChange: setQuery
+	});
+	return {
+		open: dialog.open,
+		openPalette: dialog.openDialog,
+		closePalette: dialog.close,
+		query,
+		setQuery,
+		active,
+		setActive: (index) => setActiveRaw(Math.max(-1, Math.min(index, results().length - 1))),
+		results,
+		labels,
+		status: status.message,
+		inputProps: {
+			...input.controlProps,
+			role: "searchbox",
+			get value() {
+				return query();
+			},
+			"aria-controls": listId,
+			get "aria-activedescendant"() {
+				const current = results()[active()];
+				return current === void 0 ? void 0 : optionId(current.id);
+			},
+			onKeyDown
+		},
+		listProps: {
+			id: listId,
+			role: "listbox",
+			"aria-labelledby": titleId,
+			onMouseDown: (event) => event.preventDefault()
+		},
+		optionProps: (id) => ({
+			id: optionId(id),
+			role: "option",
+			get "aria-selected"() {
+				return results()[active()]?.id === id ? "true" : "false";
+			},
+			tabindex: -1,
+			onClick: () => {
+				if (results().some((result) => result.id === id)) run(id);
+			},
+			onMouseEnter: () => {
+				const index = results().findIndex((result) => result.id === id);
+				if (index >= 0) setActiveRaw(index);
+			}
+		}),
+		emptyProps: { get hidden() {
+			return results().length > 0;
+		} },
+		statusProps: status.statusProps,
+		dialogProps: dialog.dialogProps,
+		backdropProps: dialog.backdropProps,
+		titleProps: { id: titleId },
+		runActive,
+		attach: () => {
+			const hotkeys = createHotkeys();
+			const unbind = hotkeys.bind({
+				keys: options.hotkey ?? "mod+k",
+				allowInEditable: true,
+				onTrigger: () => {
+					if (dialog.open()) dialog.close();
+					else dialog.openDialog();
+				}
+			});
+			return () => {
+				unbind();
+				hotkeys.dispose();
+			};
+		}
+	};
+};
+// src/overlay-shell.ts
+/**
+* The page-wide half of a modal overlay: one scroll lock, one stack of open
+* overlays, the tabbables of a panel and the Tab cycle over them. Shared by
+* `createConfirm` and `createDrawer` so that a confirm opened over a drawer (or
+* the reverse) takes Escape and Tab first, and the scroll lock outlives the
+* first of them to close.
+*/
+const TABBABLE = "a[href], button, input, select, textarea, [tabindex], [contenteditable]";
+/** The visible, tabbable elements of `root`, in document order. */
+const tabbables = (root) => Array.from(root.querySelectorAll(TABBABLE)).filter((element) => element.tabIndex >= 0 && !element.matches(":disabled") && element.getClientRects().length > 0);
+/** The first tabbable element of `root`, if any. */
+const firstFocusable$1 = (root) => tabbables(root)[0];
+/**
+* Wraps Tab / Shift+Tab inside `root` and pulls a focus that escaped back in
+* on the next Tab. With nothing tabbable the panel itself (which is
+* `tabindex="-1"`) keeps the focus.
+*/
+const cycleFocus = (event, root) => {
+	const items = tabbables(root);
+	const first = items[0];
+	const last = items.at(-1);
+	const active = document.activeElement;
+	const inside = root.contains(active);
+	if (first === void 0 || last === void 0) {
+		event.preventDefault();
+		root.focus();
+	} else if (event.shiftKey && (!inside || active === first || active === root)) {
+		event.preventDefault();
+		last.focus();
+	} else if (!event.shiftKey && (!inside || active === last)) {
+		event.preventDefault();
+		first.focus();
+	}
+};
+let scrollLocks = 0;
+let scrollBefore = "";
+/**
+* `overflow: hidden` on the document element, counted: the first holder takes
+* it, the last to release restores what `overflow` was. The returned release is
+* idempotent.
+*/
+const lockScroll = () => {
+	const root = document.documentElement;
+	if (scrollLocks++ === 0) {
+		scrollBefore = root.style.overflow;
+		root.style.overflow = "hidden";
+	}
+	let released = false;
+	return () => {
+		if (released) return;
+		released = true;
+		if (--scrollLocks === 0) root.style.overflow = scrollBefore;
+	};
+};
+const openOverlays = [];
+/**
+* Joins the open overlays; the last one to claim takes Escape and Tab. Returns
+* the release (idempotent), which may be called in any order.
+*/
+const claimOverlay = (self) => {
+	openOverlays.push(self);
+	let claimed = true;
+	return () => {
+		if (!claimed) return;
+		claimed = false;
 		const at = openOverlays.indexOf(self);
 		if (at !== -1) openOverlays.splice(at, 1);
 	};
@@ -2939,6 +3462,165 @@ const createDrawer = (options = {}) => {
 		handleProps: { "aria-hidden": "true" }
 	};
 };
+// src/dropzone.ts
+const REASON_TEXT = {
+	type: "unsupported type",
+	size: "too large"
+};
+const tokensOf = (accept) => (accept ?? "").split(",").map((token) => token.trim().toLowerCase()).filter((token) => token !== "");
+/** The HTML `accept` grammar: a token starting with "." is an extension, else a MIME type, `*` allowed. */
+const accepts = (accept, file) => {
+	const tokens = tokensOf(accept);
+	if (tokens.length === 0) return true;
+	const name = file.name.toLowerCase();
+	const [fileType = "", fileSubtype = ""] = file.type.toLowerCase().split("/");
+	return tokens.some((token) => {
+		if (token.startsWith(".")) return name.endsWith(token);
+		const [type = "", subtype = ""] = token.split("/");
+		return type === fileType && (subtype === "*" || subtype === fileSubtype);
+	});
+};
+const refusal = (options, file) => {
+	if (!accepts(options.accept, file)) return "type";
+	if (options.maxSize !== void 0 && file.size > options.maxSize) return "size";
+};
+const messageOf = (batch) => {
+	if (batch === void 0) return;
+	const files = batch.total === 1 ? "1 file" : `${batch.total} files`;
+	if (batch.rejected.length === 0) return files;
+	const reasons = [...new Set(batch.rejected)].map((reason) => REASON_TEXT[reason]).join(", ");
+	return `${files}, ${batch.rejected.length} rejected: ${reasons}`;
+};
+/**
+* A file drop zone. There is no APG pattern and no Quint spec for one: the
+* contract is HTML's file input plus WAI-ARIA's live region, and
+* `test/dropzone.browser.test.tsx` is its oracle.
+*
+* Decisions:
+* - **The zone is never drag-only.** `browseProps` spreads onto a real
+*   `<button type="button">` that clicks the hidden input, so the picker is the
+*   keyboard path (Enter and Space are the platform's) and a pointer user can
+*   click as well as drag. The drop handlers add nothing the button cannot do.
+* - **Validation happens once per file**, in the order type then size, and a
+*   refused file reaches `onReject` with the reason the host shows. `accept` is
+*   the HTML grammar (`.` extension, MIME type, `*`); `maxSize` is bytes.
+* - **Dropping a folder or a `DataTransfer` with no files is a no-op**: no
+*   `onFiles`, no `onReject`, no message, and the previous announcement stays.
+* - **`dragleave` counts.** A child's `dragleave` bubbles to the zone, so the
+*   state is a depth counter: it clears only when the drag leaves the zone
+*   itself, or on a drop.
+* - **The zone is `role=group`** so `labels.zone` is exposed; `dragging()` is
+*   the only drag state a skin reads (no `data-dragging`).
+* - `disabled` marks the zone `aria-disabled`, disables the input natively and
+*   the browse button, and drops every drag before it becomes a batch.
+*/
+const createDropZone = (options) => {
+	const id = createUniqueId();
+	const [depth, setDepth] = createSignal(0);
+	const [batch, setBatch] = createSignal();
+	const disabled = () => options.disabled === true;
+	const deliver = (files) => {
+		if (disabled() || files.length === 0) return;
+		const accepted = [];
+		const rejected = [];
+		for (const file of files) {
+			const reason = refusal(options, file);
+			if (reason === void 0) accepted.push(file);
+			else {
+				rejected.push(reason);
+				options.onReject?.({
+					file,
+					reason
+				});
+			}
+		}
+		setBatch({
+			total: files.length,
+			rejected
+		});
+		if (accepted.length > 0) options.onFiles(accepted);
+	};
+	const dropped = (event) => {
+		event.preventDefault();
+		setDepth(0);
+		if (disabled()) return;
+		const transfer = event.dataTransfer;
+		if (transfer === null) return;
+		const items = Array.from(transfer.items).filter((item) => item.kind === "file");
+		const files = Array.from(transfer.files);
+		if (files.length === 0) return;
+		if (items.length > 0 && items.every((item) => item.webkitGetAsEntry?.()?.isDirectory === true)) return;
+		deliver(files);
+	};
+	const picked = (event) => {
+		const input = event.currentTarget;
+		const files = Array.from(input.files ?? []);
+		input.value = "";
+		deliver(files);
+	};
+	const browse = () => {
+		if (disabled()) return;
+		document.getElementById(id)?.click();
+	};
+	return {
+		dragging: () => depth() > 0,
+		message: () => messageOf(batch()),
+		inputProps: {
+			id,
+			type: "file",
+			get accept() {
+				return options.accept;
+			},
+			get multiple() {
+				return options.multiple === true ? true : void 0;
+			},
+			get disabled() {
+				return disabled() ? true : void 0;
+			},
+			hidden: true,
+			onChange: picked
+		},
+		zoneProps: {
+			role: "group",
+			get "aria-label"() {
+				return options.labels?.zone;
+			},
+			get "aria-disabled"() {
+				return disabled() ? "true" : void 0;
+			},
+			onDragEnter: (event) => {
+				event.preventDefault();
+				if (!disabled()) setDepth(depth() + 1);
+			},
+			onDragOver: (event) => {
+				event.preventDefault();
+			},
+			onDragLeave: (event) => {
+				event.preventDefault();
+				if (!disabled()) setDepth(Math.max(0, depth() - 1));
+			},
+			onDrop: dropped
+		},
+		browseProps: {
+			type: "button",
+			get disabled() {
+				return disabled() ? true : void 0;
+			},
+			get "aria-disabled"() {
+				return disabled() ? "true" : void 0;
+			},
+			get "aria-label"() {
+				return options.labels?.browse;
+			},
+			onClick: browse
+		},
+		statusProps: {
+			role: "status",
+			"aria-live": "polite",
+			"aria-atomic": "true"
+		}
+	};
+};
 // src/feed.ts
 /**
 * APG Feed (https://www.w3.org/WAI/ARIA/apg/patterns/feed/): state plus prop
@@ -3013,148 +3695,64 @@ const createFeed = (options = {}) => {
 		}
 	};
 	return {
-		items,
-		loaded,
-		busy,
-		active,
-		focusArticle,
-		pageDown,
-		pageUp,
-		ctrlEnd: () => setActive("after"),
-		ctrlHome: () => setActive("before"),
-		loadStart: startLoad,
-		loadFinish: (count) => {
-			if (phase() !== "loading") return;
-			const all = total();
-			const remaining = all === null ? count : Math.max(0, all - loaded());
-			const next = loaded() + Math.min(count, all === null ? count : remaining);
-			requestLoaded(next);
-			setPhase("idle");
-		},
-		loadFail: () => {
-			if (phase() === "loading") setPhase("idle");
-		},
-		setSizeMode: (mode) => setSizeMode(mode),
-		setTotalKnown: (known) => setTotalKnown(known),
-		feedProps: {
-			id: base,
-			role: "feed",
-			get "aria-busy"() {
-				return busy() ? "true" : void 0;
-			},
-			"aria-labelledby": options.labelledBy
-		},
-		articleProps: (posinset) => ({
-			id: `${base}-article-${posinset}`,
-			role: "article",
-			"aria-posinset": posinset,
-			get "aria-setsize"() {
-				if (sizeMode() === "loaded") return loaded();
-				const all = total();
-				return totalKnown() && all !== null ? all : -1;
-			},
-			"aria-labelledby": `${base}-article-${posinset}-title`,
-			"aria-describedby": `${base}-article-${posinset}-content`,
-			tabindex: 0,
-			get hidden() {
-				return posinset > loaded();
-			},
-			onFocus: () => focusArticle(posinset),
-			onKeyDown
-		}),
-		beforeProps: {
-			id: `${base}-before`,
-			tabindex: 0,
-			onFocus: () => setActive("before")
-		},
-		afterProps: {
-			id: `${base}-after`,
-			tabindex: 0,
-			onFocus: () => setActive("after")
-		}
-	};
-};
-// src/field.ts
-const text = (value) => value === void 0 || value === "" ? void 0 : value;
-const external = (value) => (value === void 0 ? [] : typeof value === "string" ? [value] : value).filter((id) => id !== "");
-/**
-* The ARIA contract of a form field: a label, a control, a hint and an error.
-* There is no APG pattern for it (APG has no "form field"; the nearest is the
-* label and description rules of the accessible name computation), so the
-* contract comes from WAI-ARIA 1.2 (`aria-describedby`, `aria-invalid`,
-* `aria-required`) and HTML (`label[for]`, `required`), and from the
-* majority of Base UI Field, react-aria TextField and ariakit FormControl,
-* which list the description and the error message together. It is not checked
-* against a Quint spec; `test/field.browser.test.tsx` is its oracle.
-*
-* Decisions: the error does not replace the hint, both are listed, hint first
-* (the hint is what tells the user how to fix the error); an error implies
-* invalid and `invalid: false` overrides it; a hidden message is never
-* referenced, so `aria-describedby` has no dangling id. The error element is
-* `role="alert"` only while it is shown (a hidden element announces nothing, and
-* one that appears is announced); the hint is never an alert.
-*
-* `describedby` lists host-owned ids after the field's own: one refusal that
-* belongs to two controls is one form-level element (with its own `role`), named
-* by both. The field cannot know whether that element is shown: the host
-* passes the id only while it is.
-*
-* Options are read when an attribute is read: pass getters, never destructure.
-*/
-const createField = (options = {}) => {
-	const base = options.id ?? createUniqueId();
-	const controlId = `${base}-control`;
-	const labelId = `${base}-label`;
-	const hintId = `${base}-hint`;
-	const errorId = `${base}-error`;
-	const hint = () => text(options.hint);
-	const message = () => text(options.error) ?? (typeof options.invalid === "string" ? text(options.invalid) : void 0);
-	const invalid = () => options.invalid === false ? false : options.invalid === true || message() !== void 0;
-	const error = () => invalid() ? message() : void 0;
-	const describedIds = () => [
-		...hint() === void 0 ? [] : [hintId],
-		...error() === void 0 ? [] : [errorId],
-		...external(options.describedby)
-	];
-	return {
-		invalid,
-		hint,
-		error,
-		describedIds,
-		controlProps: {
-			id: controlId,
-			get "aria-describedby"() {
-				const ids = describedIds();
-				return ids.length === 0 ? void 0 : ids.join(" ");
-			},
-			get "aria-invalid"() {
-				return invalid() ? "true" : void 0;
-			},
-			get "aria-required"() {
-				return options.required === true ? "true" : void 0;
-			},
-			get required() {
-				return options.required === true ? true : void 0;
-			}
+		items,
+		loaded,
+		busy,
+		active,
+		focusArticle,
+		pageDown,
+		pageUp,
+		ctrlEnd: () => setActive("after"),
+		ctrlHome: () => setActive("before"),
+		loadStart: startLoad,
+		loadFinish: (count) => {
+			if (phase() !== "loading") return;
+			const all = total();
+			const remaining = all === null ? count : Math.max(0, all - loaded());
+			const next = loaded() + Math.min(count, all === null ? count : remaining);
+			requestLoaded(next);
+			setPhase("idle");
 		},
-		labelProps: {
-			id: labelId,
-			for: controlId
+		loadFail: () => {
+			if (phase() === "loading") setPhase("idle");
 		},
-		hintProps: {
-			id: hintId,
-			get hidden() {
-				return hint() === void 0;
-			}
+		setSizeMode: (mode) => setSizeMode(mode),
+		setTotalKnown: (known) => setTotalKnown(known),
+		feedProps: {
+			id: base,
+			role: "feed",
+			get "aria-busy"() {
+				return busy() ? "true" : void 0;
+			},
+			"aria-labelledby": options.labelledBy
 		},
-		errorProps: {
-			id: errorId,
+		articleProps: (posinset) => ({
+			id: `${base}-article-${posinset}`,
+			role: "article",
+			"aria-posinset": posinset,
+			get "aria-setsize"() {
+				if (sizeMode() === "loaded") return loaded();
+				const all = total();
+				return totalKnown() && all !== null ? all : -1;
+			},
+			"aria-labelledby": `${base}-article-${posinset}-title`,
+			"aria-describedby": `${base}-article-${posinset}-content`,
+			tabindex: 0,
 			get hidden() {
-				return error() === void 0;
+				return posinset > loaded();
 			},
-			get role() {
-				return error() === void 0 ? void 0 : "alert";
-			}
+			onFocus: () => focusArticle(posinset),
+			onKeyDown
+		}),
+		beforeProps: {
+			id: `${base}-before`,
+			tabindex: 0,
+			onFocus: () => setActive("before")
+		},
+		afterProps: {
+			id: `${base}-after`,
+			tabindex: 0,
+			onFocus: () => setActive("after")
 		}
 	};
 };
@@ -4131,106 +4729,218 @@ const createGrid = (options = {}) => {
 		}
 	};
 };
-// src/hotkeys.ts
-const MODIFIERS = /* @__PURE__ */ new Set([
-	"mod",
-	"ctrl",
-	"alt",
-	"shift",
-	"meta"
-]);
-const SHIFTED = /* @__PURE__ */ new Set("~!@#$%^&*()_+{}|:\"<>?");
-const detectsApple = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/.test(navigator.platform || navigator.userAgent);
-const parse = (keys, isApple) => {
-	const parts = keys.toLowerCase().split("+");
-	const key = parts.pop() ?? "";
-	if (key === "" || MODIFIERS.has(key)) throw new TypeError(`hotkeys: "${keys}" ends with no key`);
-	const chord = {
-		ctrl: false,
-		meta: false,
-		alt: false,
-		shift: SHIFTED.has(key),
-		key
-	};
-	for (const part of parts) switch (part) {
-		case "mod":
-			if (isApple) chord.meta = true;
-			else chord.ctrl = true;
-			break;
-		case "ctrl":
-			chord.ctrl = true;
-			break;
-		case "meta":
-			chord.meta = true;
-			break;
-		case "alt":
-			chord.alt = true;
-			break;
-		case "shift":
-			chord.shift = true;
-			break;
-		default: throw new TypeError(`hotkeys: "${part}" in "${keys}" is not a modifier`);
-	}
-	return chord;
+// src/knob.ts
+/** The pointer must travel this far before the drag picks a mode. */
+const LOCK_PX = 6;
+/** A slide is only locked while the other axis stays this small a share of the movement. */
+const SLIDE_VARIANCE = .35;
+/** The radius (px) at which a full turn sweeps the whole range; farther out is finer. */
+const REFERENCE_RADIUS = 100;
+/** The radius floor of the spin sensitivity, so a grab at the centre is not wildly coarse. */
+const MIN_SPIN_RADIUS = 25;
+/** Pixels of slide that move the value by the whole range. */
+const SLIDE_PX_PER_RANGE = 200;
+const angleOf = (x, y) => Math.atan2(y, x) * 180 / Math.PI;
+const angleDelta = (from, to) => {
+	const diff = (to - from) % 360;
+	return diff > 180 ? diff - 360 : diff < -180 ? diff + 360 : diff;
 };
-const matches = (chord, event) => event.key.toLowerCase() === chord.key && event.ctrlKey === chord.ctrl && event.metaKey === chord.meta && event.altKey === chord.alt && event.shiftKey === chord.shift;
-const editable = (target) => target instanceof HTMLElement && (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable);
-const inScope = (scope, target) => scope === void 0 || target instanceof Node && scope.contains(target);
 /**
-* One `keydown` listener in the capture phase, one list of chords. A chord
-* fires when its modifiers match exactly, its `when` holds, its scope contains
-* the event's target, and the focus is not in a text field (unless
-* `allowInEditable`). The most recently bound match is the only one that fires,
-* so a modal's `"/"` overrides the page's and unbinding it brings the page's
-* back; `preventDefault` is on by default for the bindings whose chord the
-* browser would otherwise act on (Cmd/Ctrl+S, Cmd/Ctrl+K).
+* A virtual knob after GarageBand's (https://jherrm.github.io/knobs/): one
+* control turned three ways — spun around its centre, or slid vertically or
+* horizontally, one gesture locked per drag. Plain Solid signals, no elements,
+* no styling. **No ARIA role exists for a dial**, so the knob is a `role=slider`
+* with `aria-valuenow` / `aria-valuetext`; the value the host renders in
+* `valueProps` is the live announcement (`role=status`), and a numeric field
+* must sit next to the dial, because a dial is never the only control.
+*
+* Request/commit (map ticket `rt1p`): uncontrolled by default (`defaultValue`);
+* pass `value` + `onValueChange` to own the value. A key, a wheel, a drag and
+* `setValue`/`stepBy` are requests the host may ignore.
+*
+* Gestures (`gesture`, default "both"), decided once on the first meaningful
+* movement so a drag never switches modes:
+* - a movement that stays on one axis (the other axis under `SLIDE_VARIANCE` of
+*   it) locks a slide — the reference's "slide in a straight line";
+* - any other movement is a turn around the centre: the angle the pointer
+*   covers is the value, and the farther from the centre the finer it is;
+* - `gesture: "spin"` / `"slide"` disable the other.
+*
+* A vertical slide turns the knob the way the grabbed side would turn a real
+* one: down on the right half is clockwise (up in value), down on the left half
+* counter-clockwise. A horizontal slide uses the same left/right side (the
+* reference picks top/bottom for this one; one rule for both is simpler to
+* learn). `wrap` makes the dial continuous instead of clamped.
+*
+* ponytail: no momentum/inertia and no `disabled` — the reference has a
+* deceleration tail, and no host here has asked for one; add inertia in the
+* host's rAF loop if a look needs it.
 */
-const createHotkeys = (options = {}) => {
-	const isApple = options.isApple ?? detectsApple();
-	const bindings = [];
-	let listening = false;
-	let disposed = false;
+const createKnob = (options = {}) => {
+	const min = options.min ?? 0;
+	const max = options.max ?? 100;
+	const step = options.step ?? 1;
+	const span = max - min;
+	const base = options.id ?? createUniqueId();
+	const wrap = () => options.wrap === true;
+	const bound = (next) => {
+		if (span <= 0) return min;
+		if (wrap()) return min + ((next - min) % span + span) % span;
+		return Math.max(min, Math.min(max, next));
+	};
+	const quantize = (next) => {
+		const stepped = step > 0 ? min + Math.round((next - min) / step) * step : next;
+		return bound(Number(stepped.toPrecision(12)));
+	};
+	const [value, request] = createControllable({
+		value: () => options.value,
+		initial: quantize(options.defaultValue ?? min + span / 2),
+		onChange: () => options.onValueChange
+	});
+	const commit = (next) => request(quantize(next));
+	const percentOf = (at) => {
+		if (span <= 0) return 0;
+		const fraction = (at - min) / span;
+		return wrap() ? fraction - Math.floor(fraction) : Math.max(0, Math.min(1, fraction));
+	};
+	const stepBy = (delta) => commit(value() + delta);
 	const onKeyDown = (event) => {
-		for (let i = bindings.length - 1; i >= 0; i--) {
-			const entry = bindings[i];
-			if (entry === void 0) continue;
-			const { chord, binding } = entry;
-			if (!matches(chord, event) || binding.when?.() === false) continue;
-			if (!inScope(binding.scope, event.target)) continue;
-			if (binding.allowInEditable !== true && editable(event.target)) continue;
-			if (binding.preventDefault !== false) event.preventDefault();
-			binding.onTrigger(event);
-			return;
+		switch (event.key) {
+			case "ArrowUp":
+			case "ArrowRight":
+				stepBy(step);
+				break;
+			case "ArrowDown":
+			case "ArrowLeft":
+				stepBy(-step);
+				break;
+			case "PageUp":
+				stepBy(step * 10);
+				break;
+			case "PageDown":
+				stepBy(-step * 10);
+				break;
+			case "Home":
+				commit(min);
+				break;
+			case "End":
+				commit(max);
+				break;
+			default: return;
 		}
+		event.preventDefault();
 	};
-	const stop = () => {
-		if (!listening) return;
-		listening = false;
-		document.removeEventListener("keydown", onKeyDown, true);
+	let drag;
+	const modeFor = (current, event) => {
+		if (options.gesture === "spin") return "spin";
+		const dx = event.clientX - current.fromX;
+		const dy = event.clientY - current.fromY;
+		const vertical = Math.abs(dy);
+		const horizontal = Math.abs(dx);
+		const straight = Math.min(vertical, horizontal) <= Math.max(vertical, horizontal) * SLIDE_VARIANCE;
+		if (options.gesture !== "slide" && !straight) return "spin";
+		return vertical >= horizontal ? "vertical" : "horizontal";
 	};
-	return {
-		bind: (binding) => {
-			if (disposed) return () => {};
-			const entry = {
-				chord: parse(binding.keys, isApple),
-				binding
-			};
-			bindings.push(entry);
-			if (!listening) {
-				listening = true;
-				document.addEventListener("keydown", onKeyDown, true);
+	const pointerDown = (event) => {
+		if (event.pointerType === "mouse" && event.button !== 0) return;
+		const element = event.currentTarget;
+		if (!(element instanceof Element)) return;
+		try {
+			element.setPointerCapture(event.pointerId);
+		} catch {}
+		const rect = element.getBoundingClientRect();
+		const centreX = rect.left + rect.width / 2;
+		const centreY = rect.top + rect.height / 2;
+		const startAngle = angleOf(event.clientX - centreX, event.clientY - centreY);
+		drag = {
+			pointerId: event.pointerId,
+			centreX,
+			centreY,
+			side: event.clientX >= centreX ? 1 : -1,
+			fromX: event.clientX,
+			fromY: event.clientY,
+			startAngle,
+			raw: value(),
+			mode: void 0,
+			lastAngle: startAngle,
+			lastX: event.clientX,
+			lastY: event.clientY
+		};
+	};
+	const pointerMove = (event) => {
+		const current = drag;
+		if (current === void 0 || current.pointerId !== event.pointerId) return;
+		if (current.mode === void 0) {
+			if (Math.hypot(event.clientX - current.fromX, event.clientY - current.fromY) < LOCK_PX) return;
+			current.mode = modeFor(current, event);
+			if (current.mode === "spin") current.lastAngle = current.startAngle;
+			else {
+				current.lastX = current.fromX;
+				current.lastY = current.fromY;
 			}
-			return () => {
-				const at = bindings.indexOf(entry);
-				if (at === -1) return;
-				bindings.splice(at, 1);
-				if (bindings.length === 0) stop();
-			};
+		}
+		if (current.mode === "spin") {
+			const angle = angleOf(event.clientX - current.centreX, event.clientY - current.centreY);
+			const delta = angleDelta(current.lastAngle, angle);
+			current.lastAngle = angle;
+			const radius = Math.hypot(event.clientX - current.centreX, event.clientY - current.centreY);
+			const perDegree = span / 360 * (REFERENCE_RADIUS / Math.max(radius, MIN_SPIN_RADIUS));
+			current.raw = bound(current.raw + delta * perDegree);
+		} else {
+			const pixels = current.mode === "vertical" ? event.clientY - current.lastY : event.clientX - current.lastX;
+			current.lastX = event.clientX;
+			current.lastY = event.clientY;
+			current.raw = bound(current.raw + pixels * (span / SLIDE_PX_PER_RANGE) * current.side);
+		}
+		commit(current.raw);
+	};
+	const pointerUp = (event) => {
+		const current = drag;
+		if (current === void 0 || current.pointerId !== event.pointerId) return;
+		drag = void 0;
+		const target = event.currentTarget;
+		if (target instanceof Element) try {
+			target.releasePointerCapture(event.pointerId);
+		} catch {}
+	};
+	const onWheel = (event) => {
+		if (event.deltaY === 0) return;
+		event.preventDefault();
+		stepBy(event.deltaY < 0 ? step : -step);
+	};
+	return {
+		value,
+		setValue: commit,
+		percentOf,
+		stepBy,
+		knobProps: {
+			role: "slider",
+			get tabindex() {
+				return 0;
+			},
+			"aria-valuemin": String(min),
+			"aria-valuemax": String(max),
+			get "aria-valuenow"() {
+				return String(value());
+			},
+			get "aria-valuetext"() {
+				const format = options.format;
+				return format === void 0 ? String(value()) : format(value());
+			},
+			get "aria-label"() {
+				return options.labels?.knob ?? "Knob";
+			},
+			onKeyDown,
+			onPointerDown: pointerDown,
+			onPointerMove: pointerMove,
+			onPointerUp: pointerUp,
+			onPointerCancel: pointerUp,
+			onWheel
 		},
-		dispose: () => {
-			disposed = true;
-			bindings.length = 0;
-			stop();
+		valueProps: {
+			id: `${base}-value`,
+			role: "status",
+			"aria-live": "polite"
 		}
 	};
 };
@@ -4661,9 +5371,11 @@ const createMenu = (options) => {
 	const disabled = new Set(options.disabled ?? []);
 	for (const [index, item] of items.entries()) if (item.disabled) disabled.add(index);
 	const held = (options.triggerMode ?? "outside") === "held";
-	let level = 0;
-	let index = -1;
-	let open = options.defaultOpen ?? false;
+	const [isOpen, requestOpen] = createControllable({
+		value: () => options.open,
+		initial: options.defaultOpen === true,
+		onChange: () => options.onOpenChange
+	});
 	let checked = new Set(options.defaultChecked ?? []);
 	const variantChoice = () => {
 		if (options.variant === "mixed") return 1;
@@ -4699,57 +5411,80 @@ const createMenu = (options) => {
 		version();
 		return read();
 	};
-	if (open) {
-		level = 2;
-		index = 0;
-	} else if (held) level = 1;
+	let closed = held ? 1 : 0;
+	let index = 0;
+	let seenOpen = isOpen();
 	const isDisabled = (i) => disabled.has(i);
-	const setFocus = (nextLevel, nextIndex) => {
-		level = nextLevel;
-		index = nextIndex;
+	const sync = () => {
+		const now = isOpen();
+		if (now === seenOpen) return;
+		seenOpen = now;
+		index = now ? 0 : -1;
+		closed = now ? closed : 1;
+	};
+	const level = () => {
+		sync();
+		return isOpen() ? 2 : closed;
+	};
+	const focusedIndex = () => {
+		sync();
+		return index;
+	};
+	const focusItem = (next) => {
+		index = next;
 		bump();
 	};
+	const move = (want, nextIndex, nextClosed) => {
+		const apply = () => {
+			seenOpen = isOpen();
+			index = want ? nextIndex : -1;
+			closed = nextClosed;
+			bump();
+		};
+		if (isOpen() === want) {
+			apply();
+			return;
+		}
+		requestOpen(want);
+		if (options.open === void 0) {
+			apply();
+			return;
+		}
+		queueMicrotask(() => {
+			if (isOpen() === want) apply();
+		});
+	};
 	const openOn = (target) => {
-		level = 2;
-		index = target;
-		open = true;
-		bump();
-		options.onOpenChange?.(true);
+		move(true, target, 1);
 	};
 	const closeToTrigger = () => {
-		level = 1;
-		index = -1;
-		open = false;
-		bump();
-		options.onOpenChange?.(false);
+		move(false, -1, 1);
 	};
 	const focusTrigger = () => {
-		if (level === 0) setFocus(1, -1);
+		if (level() === 0) {
+			closed = 1;
+			bump();
+		}
 	};
 	const leave = () => {
-		const wasOpen = open;
-		level = held ? 1 : 0;
-		index = -1;
-		open = false;
-		bump();
-		if (wasOpen) options.onOpenChange?.(false);
+		move(false, -1, held ? 1 : 0);
 	};
 	const clickTrigger = () => {
-		if (open) closeToTrigger();
+		if (isOpen()) closeToTrigger();
 		else openOn(0);
 	};
 	const openMenu = () => {
-		if (!open) openOn(0);
+		if (!isOpen()) openOn(0);
 	};
 	const closeMenu = () => {
-		if (open) closeToTrigger();
+		if (isOpen()) closeToTrigger();
 	};
 	const activate = (close) => {
-		if (level === 1) {
+		if (level() === 1) {
 			openOn(0);
 			return;
 		}
-		if (level !== 2 || index < 0 || isDisabled(index)) return;
+		if (level() !== 2 || index < 0 || isDisabled(index)) return;
 		const item = items[index];
 		if (item === void 0) return;
 		if (item.kind === "checkbox") {
@@ -4790,23 +5525,23 @@ const createMenu = (options) => {
 				activate(false);
 				break;
 			case "ArrowDown":
-				if (level === 1) openOn(0);
-				else if (level === 2) setFocus(2, wrapNext(index));
+				if (level() === 1) openOn(0);
+				else if (level() === 2) focusItem(wrapNext(focusedIndex()));
 				break;
 			case "ArrowUp":
-				if (level === 1) openOn(count - 1);
-				else if (level === 2) setFocus(2, wrapPrev(index));
+				if (level() === 1) openOn(count - 1);
+				else if (level() === 2) focusItem(wrapPrev(focusedIndex()));
 				break;
 			case "Home":
-				if (level === 2) setFocus(2, 0);
+				if (level() === 2) focusItem(0);
 				break;
 			case "End":
-				if (level === 2) setFocus(2, count - 1);
+				if (level() === 2) focusItem(count - 1);
 				break;
 			case "Escape":
-				if (level === 2) closeToTrigger();
+				if (level() === 2) closeToTrigger();
 				break;
-			case "Tab": if (level !== 0) leave();
+			case "Tab": if (level() !== 0) leave();
 		}
 	};
 	const search = (from, text) => {
@@ -4817,36 +5552,36 @@ const createMenu = (options) => {
 		}
 	};
 	const type = (text) => {
-		if (!open || text.length === 0) return;
+		if (!isOpen() || text.length === 0) return;
 		buffer += text;
 		if (bufferTimer !== void 0) clearTimeout(bufferTimer);
 		bufferTimer = setTimeout(() => {
 			buffer = "";
 		}, prefs.typeaheadDelayMs);
-		const match = search(index >= 0 ? index : 0, buffer);
-		if (match !== void 0) setFocus(2, match);
+		const from = focusedIndex() >= 0 ? focusedIndex() : 0;
+		const match = search(from, buffer);
+		if (match !== void 0) focusItem(match);
 	};
 	const codeOf = (i) => i % 2 === 0 ? 1 : 2;
 	const typeaheadCode = (code) => {
-		if (!open) return;
-		const from = index >= 0 ? index : 0;
+		if (!isOpen()) return;
+		const from = focusedIndex() >= 0 ? focusedIndex() : 0;
 		for (let offset = 1; offset < count; offset += 1) {
 			const candidate = (from + offset) % count;
 			if (codeOf(candidate) === code) {
-				setFocus(2, candidate);
+				focusItem(candidate);
 				return;
 			}
 		}
 	};
 	const setFocusItem = (i) => {
 		if (i < 0 || i >= count) return;
-		open = true;
-		setFocus(2, i);
+		move(true, i, 1);
 	};
 	return {
-		open: track(() => open),
-		focusLevel: track(() => level),
-		focusIndex: track(() => index),
+		open: track(isOpen),
+		focusLevel: track(level),
+		focusIndex: track(focusedIndex),
 		items,
 		checked: track(() => [...currentChecked()].sort((a, b) => a - b)),
 		choice: track(() => currentChoice()),
@@ -4865,7 +5600,7 @@ const createMenu = (options) => {
 			"aria-haspopup": "menu",
 			get "aria-expanded"() {
 				version();
-				return open ? "true" : "false";
+				return isOpen() ? "true" : "false";
 			},
 			"aria-controls": menuId,
 			get disabled() {
@@ -4887,7 +5622,7 @@ const createMenu = (options) => {
 			role: "menu",
 			get hidden() {
 				version();
-				return !open;
+				return !isOpen();
 			},
 			onKeyDown: (event) => {
 				if (event.key === "Tab" || event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Home" || event.key === "End") event.preventDefault();
@@ -4913,7 +5648,7 @@ const createMenu = (options) => {
 			},
 			get tabindex() {
 				version();
-				return level === 2 && index === i ? 0 : -1;
+				return level() === 2 && index === i ? 0 : -1;
 			},
 			onClick: () => {
 				if (isDisabled(i)) return;
@@ -5930,6 +6665,11 @@ const valueTextFor$1 = (value) => value <= 3 ? "low" : value <= 7 ? "medium" : "
 * pass `value` + `onValueChange` to own the value. A key or rail press is a
 * request the host may ignore.
 *
+* `disabled` is a widget-level extension of the pattern (the spec lists it
+* under its deliberate omissions): the thumb keeps its tab stop and announces
+* `aria-disabled`, and every key and rail press is dropped before it becomes a
+* request.
+*
 * ponytail: dragging (pointer capture/move) is not modelled — the spec
 * deliberately only fixes a discrete rail press.
 */
@@ -5948,6 +6688,7 @@ const createSlider = (options = {}) => {
 	const [focused, setFocused] = createSignal(false);
 	const orientation = () => options.orientation ?? "horizontal";
 	const direction = () => options.direction ?? "ltr";
+	const disabled = () => options.disabled === true;
 	const flipped = () => orientation() === "horizontal" && direction() === "rtl";
 	const commit = (next) => request(clamp(next));
 	const delta = (key) => {
@@ -5962,7 +6703,7 @@ const createSlider = (options = {}) => {
 		}
 	};
 	const keyDown = (key) => {
-		if (!focused()) return false;
+		if (!focused() || disabled()) return false;
 		if (key === "Home") {
 			commit(min);
 			return true;
@@ -5977,6 +6718,7 @@ const createSlider = (options = {}) => {
 		return true;
 	};
 	const pointerDown = (position) => {
+		if (disabled()) return;
 		const steps = Math.round(position * (max - min) / step);
 		commit(min + steps * step);
 		setFocused(true);
@@ -6003,6 +6745,9 @@ const createSlider = (options = {}) => {
 			get "aria-orientation"() {
 				return orientation();
 			},
+			get "aria-disabled"() {
+				return disabled() ? "true" : void 0;
+			},
 			get tabindex() {
 				return 0;
 			},
@@ -6167,6 +6912,12 @@ const createSliderMultiThumb = (options = {}) => {
 * stepper buttons, Enter and blur are requests the host may ignore; typing and
 * Escape change no committed value.
 *
+* `disabled` is a widget-level extension of the pattern (the spec models the
+* steppers' bound only, and lists this under its deliberate omissions): the
+* field announces `aria-disabled` and carries the native `disabled`, every key,
+* typed draft and both steppers are dropped before they become a request, and
+* neither stepper offers itself.
+*
 * ponytail: commit/revert on Enter/blur/Escape is the common convention, not
 * APG text.
 */
@@ -6187,6 +6938,7 @@ const createSpinbutton = (options = {}) => {
 	const [editing, setEditing] = createSignal(false);
 	const [draft, setDraft] = createSignal("");
 	const [wrap, setWrapSignal] = createSignal(options.wrap ?? false);
+	const disabled = () => options.disabled === true;
 	const draftInRange = (text) => {
 		const number = Number(text);
 		return text.trim() !== "" && number >= min && number <= max;
@@ -6214,7 +6966,7 @@ const createSpinbutton = (options = {}) => {
 		commitValue(next);
 	};
 	const keyDown = (key) => {
-		if (!focused()) return false;
+		if (!focused() || disabled()) return false;
 		switch (key) {
 			case "ArrowUp":
 				applyStep(1, step);
@@ -6246,7 +6998,7 @@ const createSpinbutton = (options = {}) => {
 		}
 	};
 	const commit = () => {
-		if (!focused()) return;
+		if (!focused() || disabled()) return;
 		const next = baseValue();
 		clearDraft();
 		commitValue(next);
@@ -6254,8 +7006,25 @@ const createSpinbutton = (options = {}) => {
 	const revert = () => {
 		clearDraft();
 	};
+	const blurField = () => {
+		const next = baseValue();
+		clearDraft();
+		setFocused(false);
+		if (disabled()) return;
+		commitValue(next);
+	};
+	const increment = () => {
+		if (disabled()) return;
+		setFocused(true);
+		applyStep(1, step);
+	};
+	const decrement = () => {
+		if (disabled()) return;
+		setFocused(true);
+		applyStep(-1, step);
+	};
 	const displayed = () => editing() ? draft() : String(value());
-	const ariaDisabled = (atBound) => !wrap() && atBound ? "true" : void 0;
+	const ariaDisabled = (atBound) => disabled() || !wrap() && atBound ? "true" : void 0;
 	return {
 		value,
 		focused,
@@ -6264,28 +7033,17 @@ const createSpinbutton = (options = {}) => {
 		displayed,
 		setValue: commitValue,
 		focus: () => setFocused(true),
-		blur: () => {
-			const next = baseValue();
-			clearDraft();
-			setFocused(false);
-			commitValue(next);
-		},
+		blur: blurField,
 		keyDown,
 		typeInput: (text) => {
-			if (!focused()) return;
+			if (!focused() || disabled()) return;
 			setEditing(true);
 			setDraft(text);
 		},
 		commit,
 		revert,
-		increment: () => {
-			setFocused(true);
-			applyStep(1, step);
-		},
-		decrement: () => {
-			setFocused(true);
-			applyStep(-1, step);
-		},
+		increment,
+		decrement,
 		setWrap: (next) => setWrapSignal(next),
 		inputProps: {
 			id: `${base}-input`,
@@ -6301,6 +7059,12 @@ const createSpinbutton = (options = {}) => {
 			get "aria-invalid"() {
 				return editing() && !draftInRange(draft()) ? "true" : void 0;
 			},
+			get "aria-disabled"() {
+				return disabled() ? "true" : void 0;
+			},
+			get disabled() {
+				return disabled();
+			},
 			get tabindex() {
 				return 0;
 			},
@@ -6308,18 +7072,13 @@ const createSpinbutton = (options = {}) => {
 				return displayed();
 			},
 			onFocus: () => setFocused(true),
-			onBlur: () => {
-				const next = baseValue();
-				clearDraft();
-				setFocused(false);
-				commitValue(next);
-			},
+			onBlur: blurField,
 			onKeyDown: (event) => {
 				if (keyDown(event.key)) event.preventDefault();
 			},
 			onInput: (event) => {
 				const target = event.currentTarget;
-				if (target !== null) {
+				if (target !== null && !disabled()) {
 					setEditing(true);
 					setDraft(target.value);
 				}
@@ -6333,10 +7092,7 @@ const createSpinbutton = (options = {}) => {
 				return ariaDisabled(value() === max);
 			},
 			onMouseDown: (event) => event.preventDefault(),
-			onClick: () => {
-				setFocused(true);
-				applyStep(1, step);
-			}
+			onClick: increment
 		},
 		decrementProps: {
 			role: "button",
@@ -6346,41 +7102,7 @@ const createSpinbutton = (options = {}) => {
 				return ariaDisabled(value() === min);
 			},
 			onMouseDown: (event) => event.preventDefault(),
-			onClick: () => {
-				setFocused(true);
-				applyStep(-1, step);
-			}
-		}
-	};
-};
-// src/status.ts
-/**
-* APG Alert's polite sibling: one `role=status` live region whose text the host
-* replaces ("Link copied", "Saved"). It is not a queue: a second message shows
-* in place of the first, so a burst reads as the last state, not as N alerts.
-* The region is rendered once and stays mounted, which is what makes a change
-* of its text announced.
-*
-* A status is never for errors: an error that needs attention now is
-* `createAlert` (`role=alert`, assertive), and a message with a title, a
-* description and a timeout is `createToast`.
-*/
-const createStatus = (options = {}) => {
-	const id = options.id ?? createUniqueId();
-	const [message, setMessage] = createSignal();
-	return {
-		message,
-		show: (text) => {
-			setMessage(text);
-		},
-		clear: () => {
-			setMessage(void 0);
-		},
-		statusProps: {
-			id,
-			role: "status",
-			"aria-live": "polite",
-			"aria-atomic": "true"
+			onClick: decrement
 		}
 	};
 };
@@ -6638,90 +7360,6 @@ const createTable = (options) => {
 		toggleRow
 	};
 };
-// src/textbox.ts
-const control = (field, options) => ({
-	...field.controlProps,
-	get type() {
-		return options.type ?? "text";
-	},
-	get autoComplete() {
-		return options.autoComplete;
-	},
-	get spellcheck() {
-		if (options.spellCheck === void 0) return;
-		return options.spellCheck ? "true" : "false";
-	},
-	get autocapitalize() {
-		return options.autoCapitalize;
-	},
-	get inputmode() {
-		return options.inputMode;
-	},
-	get maxlength() {
-		return options.maxLength;
-	},
-	get readOnly() {
-		return options.readOnly === true ? true : void 0;
-	},
-	get disabled() {
-		return options.disabled === true ? true : void 0;
-	},
-	get name() {
-		return options.name;
-	},
-	get dir() {
-		return options.dir;
-	},
-	get placeholder() {
-		return options.placeholder;
-	},
-	onInput: (event) => {
-		options.onValueChange?.(event.currentTarget.value);
-	}
-});
-/**
-* A text input with the field contract attached: label, hint, error (announced),
-* `aria-describedby` and `aria-invalid` come from `createField`; this adds the
-* props a host forgets — autofill tokens, spellcheck, inputmode, maxlength, the
-* disabled/readOnly pair. Platform: native (`input` is its own APG-equivalent;
-* no primitive re-implements text editing, which is why there is no key
-* handling here).
-*
-* Both `required` and `aria-required` are emitted: the native attribute is what
-* the browser enforces, the ARIA one is what a custom widget reading the same
-* props needs. A host that validates itself passes `noValidate` on the form
-* rather than dropping the attribute.
-*/
-const createTextInput = (options = {}) => {
-	const field = createField(options);
-	return {
-		...field,
-		controlProps: control(field, options)
-	};
-};
-/**
-* The same contract for a textarea, plus rows, wrap and resize. `resize` is a
-* style because CSS has no attribute for it; `none` is the value a layout that
-* owns its own height wants.
-*/
-const createTextArea = (options = {}) => {
-	const field = createField(options);
-	return {
-		...field,
-		controlProps: {
-			...control(field, options),
-			get rows() {
-				return options.rows;
-			},
-			get wrap() {
-				return options.wrap;
-			},
-			get style() {
-				return options.resize === void 0 ? void 0 : { resize: options.resize };
-			}
-		}
-	};
-};
 // src/tabs.ts
 /**
 * APG Tabs (https://www.w3.org/WAI/ARIA/apg/patterns/tabs/): state plus prop
@@ -6736,28 +7374,40 @@ const createTextArea = (options = {}) => {
 * Request/commit (map ticket `rt1p`): uncontrolled by default
 * (`defaultSelected`); pass `value` + `onValueChange` to own the selection.
 * Programmatic methods (`select`, `setSelected`, `keyDown`) are requests too.
+*
+* Close and rename are an **extension** (bean `cssints-gdv2`): the APG spec
+* models a `deletable` flavour but neither a callback nor a rename, and this
+* primitive owns no list. `closable` / `renamable` turn on the props; `onClose`
+* / `onRename` ask the host, which removes or renames. Focus after a close goes
+* to the tab that slid into the closed one's place, or to the previous tab when
+* the last one closed; closing the last remaining tab is refused, as the spec
+* refuses an empty tablist.
 */
 const createTabs = (options = {}) => {
-	const items = Math.max(1, options.items ?? 4);
+	/** The live count: the host shrinks its list after a close, and the options are read lazily. */
+	const count = () => Math.max(1, options.items ?? 4);
 	const base = options.id ?? createUniqueId();
 	const disabled = new Set(options.disabled ?? []);
 	const focusablePanels = new Set(options.focusablePanels ?? []);
 	const activation = () => options.activation ?? "automatic";
 	const orientation = () => options.orientation ?? "horizontal";
+	const closable = () => options.closable ?? false;
+	const renamable = () => options.renamable ?? false;
+	const labelOf = (index) => options.label?.(index) ?? `tab ${index + 1}`;
 	const firstEnabled = () => {
-		for (let index = 0; index < items; index += 1) if (!disabled.has(index)) return index;
+		for (let index = 0; index < count(); index += 1) if (!disabled.has(index)) return index;
 		return 0;
 	};
 	const initial = options.defaultSelected ?? firstEnabled();
 	const [selected, request] = createControllable({
 		value: () => options.value,
-		initial: initial >= 0 && initial < items && !disabled.has(initial) ? initial : firstEnabled(),
+		initial: initial >= 0 && initial < count() && !disabled.has(initial) ? initial : firstEnabled(),
 		onChange: () => options.onValueChange
 	});
 	/** The tab that carries `tabindex=0`: the selected one, or the first enabled. */
 	const roving = () => disabled.has(selected()) ? firstEnabled() : selected();
 	const select = (index) => {
-		if (index < 0 || index >= items || disabled.has(index)) return;
+		if (index < 0 || index >= count() || disabled.has(index)) return;
 		request(index);
 	};
 	const move = (index) => {
@@ -6765,14 +7415,59 @@ const createTabs = (options = {}) => {
 		if (activation() === "automatic") select(index);
 	};
 	const step = (from, delta) => {
-		for (let offset = 1; offset <= items; offset += 1) {
-			const candidate = ((from + delta * offset) % items + items) % items;
+		for (let offset = 1; offset <= count(); offset += 1) {
+			const candidate = ((from + delta * offset) % count() + count()) % count();
 			if (!disabled.has(candidate)) return candidate;
 		}
 		return from;
 	};
 	const [focused, setFocused] = createSignal(-1);
+	/**
+	* The tab that takes focus once `onClose(index)`'s removal lands: the tab at
+	* `index` in the shortened list (the following tab slid into it), or the
+	* previous one when the last tab closed.
+	*/
+	const focusAfterClose = (index) => index < count() - 1 ? index : Math.max(0, count() - 2);
+	const close = (index) => {
+		if (!closable() || count() <= 1 || index < 0 || index >= count()) return;
+		const next = focusAfterClose(index);
+		setFocused(next);
+		if (selected() === index) select(next);
+		options.onClose?.(index);
+	};
+	const [editVersion, setEditVersion] = createSignal(0);
+	let editingIndex = null;
+	const editing = () => {
+		editVersion();
+		return editingIndex;
+	};
+	const setEditing = (index) => {
+		editingIndex = index;
+		setEditVersion((version) => version + 1);
+	};
+	const [draft, setDraft] = createSignal("");
+	const begin = (index) => {
+		if (!renamable() || disabled.has(index) || index < 0 || index >= count()) return;
+		setEditing(index);
+		setDraft(options.label?.(index) ?? "");
+	};
+	const cancel = () => {
+		if (editing() === null) return;
+		setEditing(null);
+		setDraft("");
+	};
+	/** Enter / blur commit; an empty label is not a name, so it cancels. */
+	const commit = (label) => {
+		const index = editing();
+		if (index === null) return;
+		setEditing(null);
+		setDraft("");
+		const trimmed = label.trim();
+		if (trimmed === "") return;
+		options.onRename?.(index, trimmed);
+	};
 	const keyDown = (key) => {
+		if (editing() !== null) return;
 		const current = focused();
 		if (current < 0) return;
 		const forward = orientation() === "horizontal" ? "ArrowRight" : "ArrowDown";
@@ -6788,27 +7483,34 @@ const createTabs = (options = {}) => {
 				move(firstEnabled());
 				break;
 			case "End": {
-				let last = items - 1;
+				let last = count() - 1;
 				while (last > 0 && disabled.has(last)) last -= 1;
 				move(last);
 				break;
 			}
 			case "Enter":
 			case " ":
-			case "Space": select(current);
+			case "Space":
+				select(current);
+				break;
+			case "Delete": close(current);
 		}
 	};
 	return {
-		items,
+		get items() {
+			return count();
+		},
 		selected,
 		focused,
+		editing,
 		select,
 		setSelected: (index) => {
-			if (index >= 0 && index < items) request(index);
+			if (index >= 0 && index < count()) request(index);
 		},
 		focusTab: (index) => {
-			if (index >= 0 && index < items) setFocused(index);
+			if (index >= 0 && index < count()) setFocused(index);
 		},
+		focusAfterClose,
 		keyDown,
 		tablistProps: {
 			role: "tablist",
@@ -6841,6 +7543,12 @@ const createTabs = (options = {}) => {
 				setFocused(index);
 			},
 			onKeyDown: (event) => {
+				if (editing() !== null) return;
+				if (event.key === "Delete" && closable()) {
+					event.preventDefault();
+					close(index);
+					return;
+				}
 				const before = focused();
 				keyDown(event.key);
 				if (focused() !== before || event.key === "Enter" || event.key === " ") event.preventDefault();
@@ -6856,6 +7564,43 @@ const createTabs = (options = {}) => {
 			get hidden() {
 				return selected() !== index;
 			}
+		}),
+		closeProps: (index) => ({
+			get "aria-label"() {
+				return `Close ${labelOf(index)}`;
+			},
+			tabindex: -1,
+			onClick: () => close(index)
+		}),
+		renameProps: (index) => ({
+			onDblClick: () => begin(index),
+			editing: () => editing() === index,
+			begin,
+			commit,
+			cancel,
+			inputProps: {
+				type: "text",
+				get value() {
+					return draft();
+				},
+				get "aria-label"() {
+					return `Rename ${labelOf(index)}`;
+				},
+				onInput: (event) => {
+					const target = event.currentTarget;
+					if (target !== null) setDraft(target.value);
+				},
+				onKeyDown: (event) => {
+					if (event.key === "Enter") {
+						event.preventDefault();
+						commit(draft());
+					} else if (event.key === "Escape") {
+						event.preventDefault();
+						cancel();
+					}
+				},
+				onBlur: () => commit(draft())
+			}
 		})
 	};
 };
@@ -6936,11 +7681,10 @@ const shrink = (x) => x <= MIN_WIDTH ? x : x - Math.floor(x / 4) < MIN_WIDTH ? M
 const grow = (x) => x >= DOMAIN_MAX ? x : x + Math.floor(x / 4) > DOMAIN_MAX ? DOMAIN_MAX : x + Math.floor(x / 4);
 const clampStart = (start, w) => start < DOMAIN_MIN ? DOMAIN_MIN : start + w > DOMAIN_MAX ? DOMAIN_MAX - w : start;
 /**
-* Headless span timeline on Solid 2. The exported accessors are signals; the
-* prop objects are getter-backed, so spreading them keeps every attribute
-* reactive.
+* The demo tree: five fixed spans, collapsing, zoom. Its oracle is
+* `specs/apg/timeline.qnt` through the differential walk.
 */
-const createTimeline = (options = {}) => {
+const createDemoTimeline = (options = {}) => {
 	const initialExpanded = (options.defaultExpanded ?? []).reduce((mask, node) => setBit(mask, node, true), 0);
 	const [expanded, setExpanded] = createSignal(initialExpanded);
 	const [selected, requestSelected] = createControllable({
@@ -7095,6 +7839,172 @@ const createTimeline = (options = {}) => {
 		}
 	};
 };
+/** A zero-length span still paints: at least half a percent of the track. */
+const MIN_BAR_WIDTH = .5;
+/** Aim for about five ticks, whatever the extent. */
+const TICK_TARGET = 5;
+const percent = (value) => `${Math.round(value * 1e3) / 1e3}%`;
+/** 1, 2 or 5 times a power of ten, the step that makes the fewest labels fit. */
+const niceStep = (span) => {
+	const raw = span / TICK_TARGET;
+	const magnitude = 10 ** Math.floor(Math.log10(raw));
+	const normalized = raw / magnitude;
+	return (normalized <= 1 ? 1 : normalized <= 2 ? 2 : normalized <= 5 ? 5 : 10) * magnitude;
+};
+const formatTick = (value, step, unit) => {
+	const decimals = step >= 1 ? 0 : Math.min(6, Math.ceil(-Math.log10(step)));
+	return `${value.toFixed(decimals)} ${unit}`;
+};
+/**
+* The rows mode: real span data on one axis. Everything hangs off `options.rows`
+* read at attribute-read time, so the host may pass a getter and a trace may
+* arrive after mount.
+*/
+const createRowsTimeline = (options) => {
+	const rows = () => options.rows;
+	const rowOf = (id) => {
+		const row = rows().find((candidate) => candidate.id === id);
+		if (row === void 0) throw new Error(`createTimeline: no row ${id}`);
+		return row;
+	};
+	const [selectedId, requestSelected] = createControllable({
+		value: () => options.selected,
+		initial: void 0,
+		onChange: () => (id) => {
+			if (id !== void 0) options.onSelect?.(id);
+		}
+	});
+	const [focus, setFocus] = createSignal(void 0);
+	const currentFocus = () => focus() ?? rows()[0]?.id;
+	const select = (id) => {
+		requestSelected(id);
+	};
+	const extent = () => {
+		let start = Number.POSITIVE_INFINITY;
+		let end = Number.NEGATIVE_INFINITY;
+		for (const row of rows()) {
+			start = Math.min(start, row.start);
+			end = Math.max(end, row.end);
+		}
+		return start <= end ? {
+			start,
+			end
+		} : {
+			start: 0,
+			end: 0
+		};
+	};
+	const ticks = () => {
+		if (rows().length === 0) return [];
+		const { start, end } = extent();
+		const unit = options.axis?.unit ?? "ms";
+		const span = end - start;
+		if (!(span > 0)) return [{
+			value: start,
+			left: 0,
+			label: formatTick(start, 1, unit)
+		}];
+		const step = niceStep(span);
+		const out = [];
+		for (let value = Math.ceil(start / step) * step; value <= end; value += step) out.push({
+			value,
+			left: (value - start) / span * 100,
+			label: formatTick(value, step, unit)
+		});
+		return out;
+	};
+	const barStyle = (id) => {
+		const row = rowOf(id);
+		const depth = String(row.depth ?? 0);
+		const { start, end } = extent();
+		const span = end - start;
+		if (!(span > 0)) return {
+			left: "0%",
+			width: percent(MIN_BAR_WIDTH),
+			"--depth": depth
+		};
+		const left = Math.max(0, (row.start - start) / span * 100);
+		const width = Math.max(MIN_BAR_WIDTH, (row.end - row.start) / span * 100);
+		return {
+			left: percent(left),
+			width: percent(width),
+			"--depth": depth
+		};
+	};
+	const onKeyDown = (id, event) => {
+		const list = rows();
+		const index = list.findIndex((row) => row.id === id);
+		switch (event.key) {
+			case "ArrowDown":
+				setFocus(list[Math.min(index + 1, list.length - 1)]?.id);
+				break;
+			case "ArrowUp":
+				setFocus(list[Math.max(index - 1, 0)]?.id);
+				break;
+			case "Home":
+				setFocus(list[0]?.id);
+				break;
+			case "End":
+				setFocus(list[list.length - 1]?.id);
+				break;
+			case "Enter":
+			case " ":
+				select(id);
+				break;
+			default: return;
+		}
+		event.preventDefault();
+	};
+	return {
+		extent,
+		depthOf: (id) => rowOf(id).depth ?? 0,
+		listProps: {
+			role: "list",
+			"aria-label": "Span timeline"
+		},
+		rowProps: (id) => ({
+			role: "listitem",
+			get "aria-level"() {
+				return (rowOf(id).depth ?? 0) + 1;
+			},
+			get "aria-current"() {
+				return selectedId() === id ? "true" : void 0;
+			},
+			get "data-status"() {
+				return rowOf(id).status ?? "unset";
+			},
+			get tabindex() {
+				return currentFocus() === id ? 0 : -1;
+			},
+			onClick: () => {
+				setFocus(id);
+				select(id);
+			},
+			onKeyDown: (event) => onKeyDown(id, event)
+		}),
+		barProps: (id) => ({
+			"aria-hidden": "true",
+			get style() {
+				return barStyle(id);
+			}
+		}),
+		labelProps: (id) => ({ get style() {
+			return { "--depth": String(rowOf(id).depth ?? 0) };
+		} }),
+		rulerProps: {
+			role: "presentation",
+			"aria-hidden": "true",
+			get ticks() {
+				return ticks();
+			}
+		},
+		select,
+		selectedId
+	};
+};
+function createTimeline(options = {}) {
+	return "rows" in options ? createRowsTimeline(options) : createDemoTimeline(options);
+}
 // src/toast.ts
 const DEFAULT_TIMEOUT_MS = 5e3;
 const DEFAULT_MAX = 3;
@@ -8825,4 +9735,4 @@ const createRearrangeableListbox = (options) => {
 		})
 	};
 };
-export { ConfirmPendingError, DEFAULT_PREFS, DRAG_PX, GRID, NO_POS, SNAP_PX, TONE, TREEVIEW_NODES, TWEEN_TICKS, WORLD_BOUND, YES_POS, ZMAX, ZMIN, ZONE, cellPart, createAccordion, createAlert, createAlertDialog, createBreadcrumb, createButton, createCanvas, createCarousel, createCheckbox, createCheckboxGroup, createCombobox, createConfirm, createDialogModal, createDisclosure, createDrawer, createFeed, createField, createGrid, createHotkeys, createLink, createListbox, createMenu, createMenubar, createMeter, createPagination, createPanZoom, createPlayer, createPopover, createRadioGroup, createRearrangeableListbox, createResizablePanels, createScrollspy, createSlider, createSliderMultiThumb, createSpinbutton, createStatus, createSwitch, createTable, createTabs, createTextArea, createTextInput, createTimeline, createToast, createToolbar, createTooltipGroup, createTreegrid, createTreeview, createWindowSplitter, gridCandidates, headerPart, packSelection, packSort, rowPart, treegridCellPart, treegridFocusTargetPart, treegridRowPart, withPrefs };
+export { ConfirmPendingError, DEFAULT_PREFS, DRAG_PX, GRID, NO_POS, SNAP_PX, TONE, TREEVIEW_NODES, TWEEN_TICKS, WORLD_BOUND, YES_POS, ZMAX, ZMIN, ZONE, cellPart, createAccordion, createAlert, createAlertDialog, createBreadcrumb, createButton, createCanvas, createCarousel, createCheckbox, createCheckboxGroup, createCombobox, createCommandPalette, createConfirm, createDialogModal, createDisclosure, createDrawer, createDropZone, createFeed, createField, createGrid, createHotkeys, createKnob, createLink, createListbox, createMenu, createMenubar, createMeter, createPagination, createPanZoom, createPlayer, createPopover, createRadioGroup, createRearrangeableListbox, createResizablePanels, createScrollspy, createSlider, createSliderMultiThumb, createSpinbutton, createStatus, createSwitch, createTable, createTabs, createTextArea, createTextInput, createTimeline, createToast, createToolbar, createTooltipGroup, createTreegrid, createTreeview, createWindowSplitter, gridCandidates, headerPart, packSelection, packSort, rowPart, treegridCellPart, treegridFocusTargetPart, treegridRowPart, withPrefs };