@cssints/headless 0.17.0 → 0.19.0

package/dist/index.mjs

@@ -2939,6 +2939,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
@@ -3266,6 +3425,304 @@ const createPagination = (options) => {
 		}
 	};
 };
+// src/panzoom.ts
+/** Arrow-key pan distance, in CSS px; Shift multiplies it. */
+const PAN_STEP = 24;
+const PAN_SHIFT = 4;
+/** A ctrl/meta wheel notch. */
+const WHEEL_FACTOR = 1.1;
+const axis = (value, limit) => Math.min(limit, Math.max(-limit, value));
+/**
+* Pan and zoom for one image in a viewport: scale, offset and the prop objects
+* for a focusable viewport, the transformed image and a live value.
+*
+* **There is no APG pattern for pan-zoom.** The accessible contract is the three
+* parts this returns: a viewport that takes focus (`role=group`, `tabindex=0`,
+* `aria-roledescription="zoomable image"`), keyboard operations that stand in
+* for every pointer gesture (`+` / `=` / `-` zoom, arrows pan, `0` resets), and a
+* polite live region (`aria-describedby` of the viewport) that carries the
+* current scale. The pointer gestures are an addition for mouse and touch, never
+* the only way in. That contract is this module's own: the case it replaces
+* (kocharin-art-3's `Zoomable`, ~110 lines of pointer maths) had no keyboard path
+* and no ARIA at all, and `createCanvas` is the wrong model here — an infinite
+* canvas moves a camera over a world, while this is one image fitted to its
+* viewport.
+*
+* Wheel is zoom-with-a-modifier only: `ctrl` / `meta` (the browser's own pinch
+* arrives as `ctrl+wheel`) zooms about the cursor; a bare wheel is never
+* `preventDefault`ed, so the page keeps scrolling. Trackpad gestures differ per
+* platform and a swallowed wheel is the one thing that is never acceptable.
+*
+* Pointer: a drag pans, a second pointer pinches (about its midpoint), a double
+* click resets. Capture is best-effort (a synthetic pointer cannot be captured).
+*
+* `bounds: "clamp"` bounds the offset by half the viewport's scaled overflow, so
+* the image is expected to fill the viewport at `min` (the usual
+* `width: 100%; height: 100%` / `object-fit: cover` box). A letterboxed image
+* smaller than its viewport cannot be held gap-free; give it a viewport of its
+* own or `bounds: "free"`.
+*
+* Request/commit (`rt1p`): uncontrolled by default (`defaultScale`); pass `scale`
+* + `onScaleChange` to own the value. The offset has no controlled prop, so a
+* hosting page that rejects a scale request also gets the offset resolved for the
+* scale it refused — accept the request, or pass `bounds: "free"` and own the
+* pan elsewhere.
+*
+* The host owns the box and the looks: size the viewport, put `touch-action:
+* none` on it if a touch drag should pan, centre the image
+* (`transform-origin: 50% 50%` is the default this maths assumes), and hide the
+* live region visually rather than with `hidden` (a `hidden` live region is not
+* announced).
+*/
+const createPanZoom = (options = {}) => {
+	const min = options.min ?? 1;
+	const max = options.max ?? 4;
+	const step = options.step ?? .25;
+	const bounds = () => options.bounds ?? "clamp";
+	const valueId = createUniqueId();
+	const clamp = (next) => Math.min(max, Math.max(min, next));
+	const [scale, requestScale] = createControllable({
+		value: () => options.scale,
+		initial: clamp(options.defaultScale ?? min),
+		onChange: () => options.onScaleChange
+	});
+	const [version, setVersion] = createSignal(0);
+	let last = {
+		x: 0,
+		y: 0
+	};
+	const offset = () => {
+		version();
+		return last;
+	};
+	const setOffset = (next) => {
+		last = next;
+		setVersion((count) => count + 1);
+	};
+	let box = {
+		left: 0,
+		top: 0,
+		width: 0,
+		height: 0
+	};
+	const measure = (event) => {
+		if (!(event.currentTarget instanceof Element)) return;
+		const rect = event.currentTarget.getBoundingClientRect();
+		box = {
+			left: rect.left,
+			top: rect.top,
+			width: rect.width,
+			height: rect.height
+		};
+	};
+	const limits = (at) => ({
+		x: Math.max(0, box.width * (at - 1) / 2),
+		y: Math.max(0, box.height * (at - 1) / 2)
+	});
+	const move = (next, at = scale()) => {
+		const allowed = limits(at);
+		const target = bounds() === "free" ? next : {
+			x: axis(next.x, allowed.x),
+			y: axis(next.y, allowed.y)
+		};
+		const previous = offset();
+		if (target.x === previous.x && target.y === previous.y) return;
+		setOffset(target);
+		options.onPanChange?.(target);
+	};
+	const setScale = (next, origin) => {
+		const before = scale();
+		const target = clamp(next);
+		if (target === before) return;
+		requestScale(target);
+		const at = origin ?? {
+			x: box.width / 2,
+			y: box.height / 2
+		};
+		const o = {
+			x: at.x - box.width / 2,
+			y: at.y - box.height / 2
+		};
+		const ratio = before > 0 ? target / before : 1;
+		const current = offset();
+		move({
+			x: o.x - (o.x - current.x) * ratio,
+			y: o.y - (o.y - current.y) * ratio
+		}, target);
+	};
+	const zoomIn = () => setScale(scale() + step);
+	const zoomOut = () => setScale(scale() - step);
+	const reset = () => {
+		requestScale(min);
+		move({
+			x: 0,
+			y: 0
+		}, min);
+	};
+	const pointers = /* @__PURE__ */ new Map();
+	let drag;
+	let pinch;
+	const distance = () => {
+		const [a, b] = [...pointers.values()];
+		return a === void 0 || b === void 0 ? 0 : Math.hypot(a.x - b.x, a.y - b.y);
+	};
+	const midpoint = () => {
+		const [a, b] = [...pointers.values()];
+		if (a === void 0 || b === void 0) return {
+			x: box.left + box.width / 2,
+			y: box.top + box.height / 2
+		};
+		return {
+			x: (a.x + b.x) / 2,
+			y: (a.y + b.y) / 2
+		};
+	};
+	const local = (point) => ({
+		x: point.x - box.left,
+		y: point.y - box.top
+	});
+	const pointerDown = (event) => {
+		measure(event);
+		if (event.button !== 0) return;
+		try {
+			if (event.currentTarget instanceof Element) event.currentTarget.setPointerCapture(event.pointerId);
+		} catch {}
+		const at = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		pointers.set(event.pointerId, at);
+		drag = {
+			at,
+			from: offset()
+		};
+		if (pointers.size === 2) pinch = {
+			distance: distance(),
+			scale: scale()
+		};
+	};
+	const pointerMove = (event) => {
+		if (!pointers.has(event.pointerId)) return;
+		pointers.set(event.pointerId, {
+			x: event.clientX,
+			y: event.clientY
+		});
+		if (pointers.size === 2 && pinch !== void 0) {
+			if (pinch.distance > 0) setScale(pinch.scale * (distance() / pinch.distance), local(midpoint()));
+			return;
+		}
+		if (drag !== void 0) move({
+			x: drag.from.x + event.clientX - drag.at.x,
+			y: drag.from.y + event.clientY - drag.at.y
+		});
+	};
+	const pointerUp = (event) => {
+		pointers.delete(event.pointerId);
+		pinch = void 0;
+		const rest = [...pointers.values()][0];
+		drag = rest === void 0 ? void 0 : {
+			at: rest,
+			from: offset()
+		};
+	};
+	const wheel = (event) => {
+		if (!event.ctrlKey && !event.metaKey) return;
+		event.preventDefault();
+		measure(event);
+		const factor = event.deltaY < 0 ? WHEEL_FACTOR : 1 / WHEEL_FACTOR;
+		setScale(scale() * factor, {
+			x: event.clientX - box.left,
+			y: event.clientY - box.top
+		});
+	};
+	const keyDown = (event) => {
+		measure(event);
+		const by = PAN_STEP * (event.shiftKey ? PAN_SHIFT : 1);
+		const current = offset();
+		switch (event.key) {
+			case "+":
+			case "=":
+				zoomIn();
+				break;
+			case "-":
+			case "_":
+				zoomOut();
+				break;
+			case "0":
+				reset();
+				break;
+			case "ArrowLeft":
+				move({
+					x: current.x - by,
+					y: current.y
+				});
+				break;
+			case "ArrowRight":
+				move({
+					x: current.x + by,
+					y: current.y
+				});
+				break;
+			case "ArrowUp":
+				move({
+					x: current.x,
+					y: current.y - by
+				});
+				break;
+			case "ArrowDown":
+				move({
+					x: current.x,
+					y: current.y + by
+				});
+				break;
+			default: return;
+		}
+		event.preventDefault();
+	};
+	return {
+		scale,
+		offset,
+		reset,
+		zoomIn,
+		zoomOut,
+		setScale,
+		value: () => `${Math.round(scale() * 100)}%`,
+		viewportProps: {
+			tabindex: 0,
+			role: "group",
+			"aria-roledescription": "zoomable image",
+			get "aria-label"() {
+				return options.labels?.viewport ?? "Image";
+			},
+			get "aria-describedby"() {
+				return valueId;
+			},
+			onKeyDown: keyDown,
+			onWheel: wheel,
+			onPointerDown: pointerDown,
+			onPointerMove: pointerMove,
+			onPointerUp: pointerUp,
+			onPointerCancel: pointerUp,
+			onDblClick: (event) => {
+				measure(event);
+				reset();
+			}
+		},
+		imageProps: {
+			draggable: false,
+			get style() {
+				const at = offset();
+				return { transform: `translate(${at.x}px, ${at.y}px) scale(${scale()})` };
+			}
+		},
+		valueProps: {
+			id: valueId,
+			role: "status",
+			"aria-live": "polite",
+			"aria-atomic": "true"
+		}
+	};
+};
 // src/popover.ts
 const FLIPPED = {
 	"bottom-start": "top-start",
@@ -3833,6 +4290,109 @@ 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;
+};
+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).
+*/
+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();
+		}
+	};
+};
 // src/link.ts
 /**
 * APG Link (https://www.w3.org/WAI/ARIA/apg/patterns/link/): a native `<a href>`
@@ -5449,6 +6009,69 @@ const createResizablePanels = (options) => {
 		separatorProps
 	};
 };
+// src/scrollspy.ts
+/**
+* A scrollspy: a table of contents whose current entry is the last heading that
+* has reached the top of the scrollport, marked `aria-current="location"` on
+* its link (and nowhere else: exactly one link is current).
+*
+* **No APG pattern exists for a scrollspy**, so there is no Quint spec and no
+* ported scenarios: the contract is WAI-ARIA (`aria-current="location"`, the
+* `list` / `listitem` roles, the navigation landmark and its name) and HTML,
+* and `test/scrollspy.browser.test.tsx` is its oracle.
+*
+* **A scroll listener, not an `IntersectionObserver`.** "The last heading at or
+* above the offset" is a total order over every heading, while an observer only
+* reports what crossed its band: a band observer has to rebuild the order from
+* its enter/leave state, and it misreports after a jump (an anchor click, a
+* restored scroll position). The listener is passive, the measurements are
+* reads only (no writes, so no layout thrash), and a docs page has a dozen
+* headings — the same cost as the listener the page already keeps.
+*
+* Smooth scrolling is the host's (`scroll-behavior: smooth`): the links are
+* plain `#id` targets and nothing here moves the scrollport, so no
+* `prefers-reduced-motion` branch is needed either.
+*/
+const createScrollspy = (options) => {
+	const offset = options.offset ?? 0;
+	const first = options.entries[0]?.id;
+	const [active, setActive] = createSignal(first);
+	const at = () => {
+		const container = options.root?.()?.getBoundingClientRect().top ?? 0;
+		let id = first;
+		for (const entry of options.entries) {
+			const element = document.getElementById(entry.id);
+			if (element === null) continue;
+			if (element.getBoundingClientRect().top - container <= offset) id = entry.id;
+		}
+		return id;
+	};
+	const commit = () => {
+		const next = at();
+		if (next === active()) return;
+		setActive(next);
+		options.onChange?.(next);
+	};
+	return {
+		active,
+		navProps: { "aria-label": "On this page" },
+		listProps: { role: "list" },
+		itemProps: () => ({ role: "listitem" }),
+		linkProps: (id) => ({
+			href: `#${id}`,
+			get "aria-current"() {
+				return id === active() ? "location" : void 0;
+			}
+		}),
+		attach: () => {
+			const target = options.root?.() ?? document;
+			const listener = () => commit();
+			target.addEventListener("scroll", listener, { passive: true });
+			commit();
+			return () => target.removeEventListener("scroll", listener);
+		}
+	};
+};
 // src/slider.ts
 const valueTextFor$1 = (value) => value <= 3 ? "low" : value <= 7 ? "medium" : "high";
 /**
@@ -5466,6 +6089,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.
 */
@@ -5484,6 +6112,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) => {
@@ -5498,7 +6127,7 @@ const createSlider = (options = {}) => {
 		}
 	};
 	const keyDown = (key) => {
-		if (!focused()) return false;
+		if (!focused() || disabled()) return false;
 		if (key === "Home") {
 			commit(min);
 			return true;
@@ -5513,6 +6142,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);
@@ -5539,6 +6169,9 @@ const createSlider = (options = {}) => {
 			get "aria-orientation"() {
 				return orientation();
 			},
+			get "aria-disabled"() {
+				return disabled() ? "true" : void 0;
+			},
 			get tabindex() {
 				return 0;
 			},
@@ -5703,6 +6336,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.
 */
@@ -5723,6 +6362,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;
@@ -5750,7 +6390,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);
@@ -5782,7 +6422,7 @@ const createSpinbutton = (options = {}) => {
 		}
 	};
 	const commit = () => {
-		if (!focused()) return;
+		if (!focused() || disabled()) return;
 		const next = baseValue();
 		clearDraft();
 		commitValue(next);
@@ -5790,8 +6430,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,
@@ -5800,28 +6457,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`,
@@ -5837,6 +6483,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;
 			},
@@ -5844,18 +6496,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);
 				}
@@ -5869,10 +6516,7 @@ const createSpinbutton = (options = {}) => {
 				return ariaDisabled(value() === max);
 			},
 			onMouseDown: (event) => event.preventDefault(),
-			onClick: () => {
-				setFocused(true);
-				applyStep(1, step);
-			}
+			onClick: increment
 		},
 		decrementProps: {
 			role: "button",
@@ -5882,10 +6526,7 @@ const createSpinbutton = (options = {}) => {
 				return ariaDisabled(value() === min);
 			},
 			onMouseDown: (event) => event.preventDefault(),
-			onClick: () => {
-				setFocused(true);
-				applyStep(-1, step);
-			}
+			onClick: decrement
 		}
 	};
 };
@@ -6272,28 +6913,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) => {
@@ -6301,14 +6954,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";
@@ -6324,27 +7022,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",
@@ -6377,6 +7082,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();
@@ -6392,6 +7103,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())
+			}
 		})
 	};
 };
@@ -6472,11 +7220,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({
@@ -6631,6 +7378,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;
@@ -8361,4 +9274,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, createLink, createListbox, createMenu, createMenubar, createMeter, createPagination, createPlayer, createPopover, createRadioGroup, createRearrangeableListbox, createResizablePanels, 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, createConfirm, createDialogModal, createDisclosure, createDrawer, createDropZone, 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 };