@menapo/machine 0.0.0-stage → 0.1.0

package/dist/dom.js

@@ -0,0 +1,659 @@
+//#region src/dom/layers.ts
+const layers = [];
+/** The top layer that has `key`: the one Escape, a press outside or Tab is for. */
+const topWith = (key) => layers.findLast((layer) => layer[key]);
+/**
+* Told of each layer added, and returning what undoes its work when that
+* layer goes: how `hideOthers` lifts `inert` from an overlay opened above
+* its own.
+*/
+const watchers = /* @__PURE__ */ new Set();
+/**
+* Adds `layer` on top, and returns its removal, which is true the first
+* time only: each call registers its own entry, so cleaning one up twice
+* never takes another off the stack, even on the same element.
+*/
+function addLayer(layer) {
+	layers.push(layer);
+	const undo = [...watchers].map((watch) => watch(layer.el));
+	return () => {
+		const at = layers.indexOf(layer);
+		if (at < 0) return false;
+		layers.splice(at, 1);
+		for (const fn of undo) fn();
+		return true;
+	};
+}
+/** The parent in the composed tree: a shadow root's host for its top elements. */
+const parentOf = (node) => node.parentNode instanceof ShadowRoot ? node.parentNode.host : node.parentNode;
+/** `container.contains(node)` across shadow roots, as the user sees nesting. */
+function inside(container, node) {
+	for (; node; node = parentOf(node)) if (node === container) return true;
+	return false;
+}
+/**
+* Whether `node` is in a layer above `layer`: one opened later that is not
+* `layer`'s own element again (its `dismiss` beside its `focusTrap`).
+*/
+const above = (layer, node) => layers.slice(layers.indexOf(layer) + 1).some((other) => inside(other.el, node) && !inside(other.el, layer.el));
+/** The node an event happened on, inside shadow roots too. */
+const targetOf = (event) => event.composedPath()[0];
+//#endregion
+//#region src/dom/listen.ts
+/**
+* `addEventListener` that returns its own removal, so every `/dom` helper
+* can collect its listeners as cleanups (PLAN §4.5).
+*/
+function listen(target, type, listener, options) {
+	target.addEventListener(type, listener, options);
+	return () => target.removeEventListener(type, listener, options);
+}
+//#endregion
+//#region src/dom/dismiss.ts
+/**
+* Reports Escape and interaction outside `element` to the machine instead
+* of closing anything itself, so a controlled overlay can refuse (PLAN D9).
+* Layers stack: Escape goes to the top layer with `onEscape`, and a press
+* or focus outside to the top layer with `onOutside`, so Escape in a nested
+* menu or dialog closes the inner one alone. A layer above is part of the
+* one below: a press in a menu opened from a dialog is not outside the
+* dialog. Escape that no layer handles is left to the page and the browser.
+*
+* On a modal `<dialog>`, a press on the `::backdrop` counts as outside, and
+* Escape is reported without the browser closing the dialog behind the
+* machine's back (`closedby` is not Baseline). When it closes all the same,
+* `onEscape` hears it, and a machine that stays open gets it shown again.
+*/
+function dismiss(element, options) {
+	const { onEscape, onOutside, exclude } = options;
+	const layer = {
+		el: element,
+		escape: onEscape,
+		outside: onOutside
+	};
+	let pressed = null;
+	let modal = false;
+	const outside = (event) => {
+		const target = targetOf(event);
+		if (topWith("outside") !== layer) return;
+		if (inside(exclude, target) || above(layer, target)) return;
+		if (inside(element, target)) {
+			if (target !== element || event.type !== "pointerdown" || !element.matches("dialog:modal")) return;
+			const { clientX: x, clientY: y } = event;
+			const box = element.getBoundingClientRect();
+			if (x >= box.left && x <= box.right && y >= box.top && y <= box.bottom) return;
+		}
+		onOutside();
+	};
+	queueMicrotask(() => modal = element.matches(":modal"));
+	const remove = addLayer(layer);
+	const cleanups = [
+		listen(document, "keydown", (event) => {
+			pressed = null;
+			if (event.key !== "Escape" || event.isComposing || event.defaultPrevented) return;
+			if (topWith("escape") !== layer) return;
+			event.preventDefault();
+			onEscape();
+		}),
+		listen(element, "cancel", (event) => {
+			if (event.target !== element || !event.cancelable || event.defaultPrevented) return;
+			const top = topWith("escape");
+			if (!top) return;
+			event.preventDefault();
+			top.escape();
+		}),
+		listen(element, "close", () => {
+			if (!onEscape || element.open) return;
+			onEscape();
+			if (layers.includes(layer) && element.isConnected) element[modal ? "showModal" : "show"]();
+		}),
+		listen(document, "pointerdown", (event) => {
+			pressed = targetOf(event);
+			outside(event);
+		}, true),
+		listen(document, "click", () => pressed = null, true),
+		listen(document, "focusin", (event) => {
+			const target = targetOf(event);
+			if (event.target !== document.activeElement || layers.some((other) => other.trap && inside(other.el, element) && !inside(other.el, target))) return;
+			if (!pressed || !inside(target, pressed)) outside(event);
+		})
+	];
+	return () => {
+		if (remove()) for (const cleanup of cleanups) cleanup();
+	};
+}
+//#endregion
+//#region src/dom/focusable.ts
+/**
+* What can take focus from the keyboard: `focusTrap` then drops what the
+* browser itself would skip, and `hideOthers` keeps no live region holding
+* any of it.
+*/
+const FOCUSABLE = "a[href],area[href],button,input,select,textarea,iframe,summary,[tabindex],[contenteditable]";
+//#endregion
+//#region src/dom/focus-trap.ts
+/**
+* The elements Tab reaches inside `container`, open shadow roots included,
+* in Tab's order: positive `tabindex` first, then document order.
+* `tabIndex`, `:disabled` and the visibility check drop what the browser
+* itself would skip.
+*/
+function tabbables(container) {
+	const found = [];
+	const collect = (root) => {
+		for (const el of root.querySelectorAll("*")) {
+			if (el.matches("a[href],area[href],button,input,select,textarea,iframe,summary,[tabindex],[contenteditable]") && el.tabIndex >= 0 && !el.matches(":disabled") && !el.closest("[inert]") && el.checkVisibility({ visibilityProperty: true }) && radioStop(el, root)) found.push(el);
+			if (el.shadowRoot) collect(el.shadowRoot);
+		}
+	};
+	collect(container);
+	return found.sort((a, b) => (a.tabIndex || 1e9) - (b.tabIndex || 1e9));
+}
+/** Tab stops once per radio group: on its checked radio, or on the first enabled one. */
+function radioStop(el, root) {
+	if (!(el instanceof HTMLInputElement) || el.type !== "radio" || !el.name || el.checked) return true;
+	const group = [...root.querySelectorAll(`input[type=radio][name="${CSS.escape(el.name)}"]`)];
+	return !group.some((radio) => radio.checked) && group.find((radio) => !radio.disabled) === el;
+}
+/** Where Tab lands past the page's first and last element, instead of the browser's UI. */
+function guard(tabIndex) {
+	const span = document.createElement("span");
+	span.tabIndex = tabIndex;
+	span.style.cssText = "position:fixed;opacity:0;pointer-events:none";
+	return span;
+}
+/**
+* Keeps keyboard focus inside `container`, a modal overlay that is not a
+* `<dialog>` (PLAN §4.5, §11): focus moves in (`[autofocus]`, else the first
+* tabbable element, else the container), Tab and Shift+Tab wrap at the ends
+* and are otherwise the browser's, focus that leaves is brought back (to
+* the next element when Tab took it out, else to where it was), and the
+* cleanup returns focus to where it was, or to `<body>` when that element
+* is gone.
+*
+* Focus may sit in a layer opened above it with `dismiss` or another
+* `focusTrap` (a menu, wherever it is rendered). A container with nothing
+* to focus gets `tabindex="-1"` while the trap lasts.
+*
+* A modal `<dialog>` opened with `showModal()` needs none of this: the
+* browser moves focus in, makes the page inert and restores focus on
+* `close()`, and lets Tab reach its own UI, as it intends for every page.
+*/
+function focusTrap(container) {
+	const previous = document.activeElement;
+	const layer = {
+		el: container,
+		trap: true
+	};
+	const top = () => topWith("trap") === layer;
+	let last = null;
+	let direction = 0;
+	let tabindex = false;
+	const focus = (el) => {
+		if (!el && !container.hasAttribute("tabindex")) {
+			container.tabIndex = -1;
+			tabindex = true;
+		}
+		(el ?? container).focus();
+	};
+	const remove = addLayer(layer);
+	queueMicrotask(() => {
+		if (top()) focus(container.querySelector("[autofocus]") ?? tabbables(container)[0]);
+	});
+	let guards = [];
+	const unguard = () => {
+		for (const span of guards) span.remove();
+		guards = [];
+	};
+	const cleanups = [listen(document, "keydown", (event) => {
+		if (event.key !== "Tab" || event.defaultPrevented || !top()) return;
+		let active = document.activeElement;
+		if (active && above(layer, active)) return;
+		while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
+		last = active;
+		direction = event.shiftKey ? -1 : 1;
+		unguard();
+		guards = [guard(1), guard(0)];
+		document.body.prepend(guards[0]);
+		document.body.append(guards[1]);
+	}), listen(document, "focusin", (event) => {
+		const target = targetOf(event);
+		const tab = direction;
+		direction = 0;
+		unguard();
+		if (!top() || above(layer, target)) return;
+		if (inside(container, target)) {
+			last = target;
+			return;
+		}
+		const list = tabbables(container);
+		const at = list.indexOf(last);
+		focus(!tab ? last?.isConnected && inside(container, last) ? last : list[0] : at < 0 ? list.at(tab < 0 ? -1 : 0) : list.at((at + tab) % list.length));
+	})];
+	return () => {
+		if (!remove()) return;
+		for (const cleanup of cleanups) cleanup();
+		unguard();
+		if (tabindex) container.removeAttribute("tabindex");
+		queueMicrotask(() => {
+			const active = document.activeElement;
+			if (active && active !== document.body && !inside(container, active)) return;
+			previous?.focus?.();
+			if (inside(container, document.activeElement)) document.activeElement.blur();
+		});
+	};
+}
+//#endregion
+//#region src/dom/hide-others.ts
+/**
+* Elements this module made inert, with how many `hideOthers` calls still
+* want them so: nested overlays may clean up in any order.
+*/
+const hidden = /* @__PURE__ */ new Map();
+/** Live regions, by attribute or by role, `<output>`'s included. */
+const LIVE = "[aria-live],[role=status],[role=alert],[role=log],output";
+/**
+* Makes everything outside `keep` inert: out of the accessibility tree,
+* unfocusable and deaf to the pointer, with no `aria-hidden` walk or focus
+* trap to keep in step (PLAN D15, S5). For a modal overlay that is not a
+* `<dialog>`; `showModal()` does the same for a `<dialog>`. An overlay in a
+* shadow root keeps its hosts, and the rest of its shadow tree is hidden.
+*
+* Live regions with nothing focusable inside stay outside it, so
+* announcements keep reaching screen readers, and elements the page made
+* inert itself are left as they are. A layer opened above while it lasts
+* (`dismiss` or `focusTrap`: a menu from the overlay, rendered elsewhere)
+* is kept too, until that layer goes.
+*/
+function hideOthers(...keep) {
+	const kept = [...keep, ...[...document.querySelectorAll(LIVE)].filter((el) => !el.querySelector(FOCUSABLE))];
+	const mine = [];
+	const hide = (el) => {
+		if (hidden.has(el) || !el.hasAttribute("inert")) {
+			hidden.set(el, (hidden.get(el) ?? 0) + 1);
+			el.setAttribute("inert", "");
+			mine.push(el);
+		}
+	};
+	const lift = (el) => {
+		const lifted = [];
+		const start = mine.length;
+		for (let node = el, child = null; node && node !== document.body;) {
+			if (node instanceof Element && hidden.has(node) && node.hasAttribute("inert")) {
+				node.removeAttribute("inert");
+				lifted.push(node);
+				if (child) {
+					for (const other of child.parentNode.children) if (other !== child && !kept.includes(other)) hide(other);
+				}
+			}
+			child = node;
+			node = parentOf(node);
+		}
+		const added = mine.splice(start);
+		return () => {
+			unhide(added);
+			for (const node of lifted) if (hidden.has(node)) node.setAttribute("inert", "");
+		};
+	};
+	const undo = keep.map(lift);
+	const walk = (parent) => {
+		for (const child of parent.children) {
+			if (kept.includes(child) || /^(SCRIPT|STYLE|TEMPLATE|LINK)$/.test(child.tagName)) continue;
+			if (kept.some((el) => child.contains(el))) walk(child);
+			else if (child.shadowRoot && kept.some((el) => inside(child, el))) walk(child.shadowRoot);
+			else hide(child);
+		}
+	};
+	walk(document.body);
+	watchers.add(lift);
+	return () => {
+		if (!watchers.delete(lift)) return;
+		unhide(mine.splice(0));
+		for (const fn of undo) fn();
+	};
+}
+function unhide(elements) {
+	for (const el of elements) {
+		const count = hidden.get(el) - 1;
+		if (count) hidden.set(el, count);
+		else {
+			hidden.delete(el);
+			el.removeAttribute("inert");
+		}
+	}
+}
+//#endregion
+//#region src/dom/live-region.ts
+const HIDDEN = "position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap";
+/**
+* Announces `message` to screen readers while the effect runs: politely
+* (`status`), or interrupting (`alert`) when `assertive`. The cleanup
+* withdraws it if it is still showing.
+*
+* The region lives in the topmost modal `<dialog>` open when the message
+* lands, since everything outside a modal dialog is inert and silent, else
+* in `<body>`;
+* `hideOthers` leaves live regions out. It is created once and kept: a
+* screen reader only follows regions that existed before their text changed.
+*/
+function liveRegion(message, options) {
+	const role = options?.assertive ? "alert" : "status";
+	let fresh = false;
+	const region = (parent = [...document.querySelectorAll("dialog:modal")].at(-1) ?? document.body) => {
+		let el = parent.querySelector(`:scope > [data-live-region=${role}]`);
+		if (!el) {
+			el = document.createElement("div");
+			el.dataset.liveRegion = role;
+			el.setAttribute("role", role);
+			el.setAttribute("aria-live", options?.assertive ? "assertive" : "polite");
+			el.style.cssText = HIDDEN;
+			parent.append(el);
+			fresh = true;
+		}
+		return el;
+	};
+	region(document.body);
+	let target = region();
+	target.textContent = "";
+	const fill = () => {
+		fresh = false;
+		target = region();
+		if (fresh) timer = setTimeout(fill, 100);
+		else target.textContent = message;
+	};
+	let timer = setTimeout(fill, 100);
+	return () => {
+		clearTimeout(timer);
+		if (target.textContent === message) target.textContent = "";
+	};
+}
+//#endregion
+//#region src/dom/place.ts
+const OPPOSITE = {
+	top: "bottom",
+	bottom: "top",
+	left: "right",
+	right: "left"
+};
+function place(anchor, floating, viewport, options, arrowSize) {
+	const { offset, padding } = options;
+	let [side, align] = options.placement.split("-");
+	const vertical = side === "top" || side === "bottom";
+	const room = {
+		top: anchor.y,
+		bottom: viewport.height - anchor.y - anchor.height,
+		left: anchor.x,
+		right: viewport.width - anchor.x - anchor.width
+	};
+	const need = (vertical ? floating.height : floating.width) + offset + padding;
+	if (options.flip && room[side] < need && room[OPPOSITE[side]] > room[side]) side = OPPOSITE[side];
+	if (align && vertical && options.rtl) align = align === "start" ? "end" : "start";
+	const [start, length, size, limit] = vertical ? [
+		anchor.x,
+		anchor.width,
+		floating.width,
+		viewport.width
+	] : [
+		anchor.y,
+		anchor.height,
+		floating.height,
+		viewport.height
+	];
+	let cross = align === "start" ? start : align === "end" ? start + length - size : start + (length - size) / 2;
+	if (options.shift) cross = Math.max(padding, Math.min(cross, limit - size - padding));
+	const main = side === "top" ? anchor.y - floating.height - offset : side === "bottom" ? anchor.y + anchor.height + offset : side === "left" ? anchor.x - floating.width - offset : anchor.x + anchor.width + offset;
+	const placement = align ? `${side}-${options.placement.split("-")[1]}` : side;
+	const [x, y] = vertical ? [cross, main] : [main, cross];
+	if (arrowSize === void 0) return {
+		x,
+		y,
+		placement
+	};
+	return {
+		x,
+		y,
+		placement,
+		arrow: Math.max(0, Math.min(start + length / 2 - cross - arrowSize / 2, size - arrowSize))
+	};
+}
+//#endregion
+//#region src/dom/popper.ts
+/**
+* Keeps `floating` next to `anchor` while it is shown: placed, flipped and
+* shifted inside the viewport, and moved again when either resizes, the
+* window resizes or anything scrolls, once per animation frame
+* (PLAN §4.5; no `popover` or anchor positioning while they are not Baseline
+* widely available, D16).
+*
+* `floating` is positioned `fixed`, so its containing block must be the
+* viewport: render it outside transformed, filtered or `contain`ed
+* ancestors (a portal). The placement taken is set as `data-placement`
+* for styles that depend on the side, the arrow's among them.
+*/
+function popper(anchor, floating, options = {}) {
+	const { arrow, sameWidth } = options;
+	const settings = {
+		placement: options.placement ?? "bottom",
+		offset: options.offset ?? 8,
+		padding: options.padding ?? 8,
+		flip: options.flip ?? true,
+		shift: options.shift ?? true,
+		rtl: getComputedStyle(floating).direction === "rtl"
+	};
+	const vertical = /^(top|bottom)/.test(settings.placement);
+	const snap = (value) => `${Math.round(value * devicePixelRatio) / devicePixelRatio}px`;
+	let frame = 0;
+	const update = () => {
+		frame = 0;
+		const box = anchor.getBoundingClientRect();
+		const { style } = floating;
+		style.position = "fixed";
+		if (sameWidth) style.width = `${box.width}px`;
+		const root = document.documentElement;
+		const placed = place(box, {
+			width: floating.offsetWidth,
+			height: floating.offsetHeight
+		}, {
+			width: root.clientWidth,
+			height: root.clientHeight
+		}, settings, arrow ? vertical ? arrow.offsetWidth : arrow.offsetHeight : void 0);
+		style.left = snap(placed.x);
+		style.top = snap(placed.y);
+		floating.dataset.placement = placed.placement;
+		if (arrow && placed.arrow !== void 0) {
+			arrow.style.left = vertical ? snap(placed.arrow) : "";
+			arrow.style.top = vertical ? "" : snap(placed.arrow);
+		}
+	};
+	const schedule = () => {
+		frame ||= requestAnimationFrame(update);
+	};
+	update();
+	const observer = new ResizeObserver(schedule);
+	observer.observe(anchor);
+	observer.observe(floating);
+	const cleanups = [listen(window, "scroll", schedule, {
+		capture: true,
+		passive: true
+	}), listen(window, "resize", schedule)];
+	return () => {
+		cancelAnimationFrame(frame);
+		observer.disconnect();
+		for (const cleanup of cleanups) cleanup();
+	};
+}
+//#endregion
+//#region src/dom/presence.ts
+/**
+* Calls `onDone` once `element`'s CSS animations and transitions have
+* finished, its `::before`, `::after` and `::backdrop`'s included, so a closing state can leave the element mounted until its exit
+* animation ends (PLAN §4.5). Called after the state change that starts the
+* animation: reading the element's animations applies its new styles first.
+*
+* Done on the next microtask when nothing runs, when the user prefers
+* reduced motion, or when an animation is cancelled; infinite animations
+* (a spinner inside the styles) are not waited for. The cleanup stops a
+* pending call, for a state left before the animation ended.
+*
+* A `<dialog>` animates out only while it is open: `close()` it after
+* `onDone`, in the cleanup of a state that holds both `open` and `closing`.
+*/
+function presence(element, onDone) {
+	let waiting = true;
+	const running = matchMedia("(prefers-reduced-motion: reduce)").matches ? [] : element.getAnimations({ subtree: true }).filter((animation) => {
+		const effect = animation.effect;
+		return effect?.target === element && effect.getComputedTiming().endTime !== Infinity;
+	});
+	Promise.allSettled(running.map((animation) => animation.finished)).then(() => waiting && onDone());
+	return () => {
+		waiting = false;
+	};
+}
+//#endregion
+//#region src/dom/scroll-lock.ts
+const LOCK = Symbol.for("@menapo/machine/dom:scrollLock");
+/**
+* Stops the page from scrolling under a modal overlay; the platform has no
+* such lock (S5). Nested locks count: the page scrolls again when the last
+* one is cleaned up.
+*
+* Hiding the root's overflow removes a classic scrollbar, so its width is
+* added to the root's padding on the scrollbar's side and exposed as
+* `--scrollbar-width` for fixed elements that must not shift either;
+* under `scrollbar-gutter: stable` the space stays, and both are 0.
+*/
+function scrollLock() {
+	const lock = document[LOCK] ??= {
+		count: 0,
+		unlock() {}
+	};
+	if (!lock.count++) {
+		const root = document.documentElement;
+		const { style } = root;
+		const computed = getComputedStyle(root);
+		const width = computed.scrollbarGutter.startsWith("stable") ? 0 : innerWidth - root.clientWidth;
+		const side = root.getBoundingClientRect().left + scrollX - parseFloat(computed.marginLeft) > width / 2 ? "paddingLeft" : "paddingRight";
+		const saved = [
+			style.overflow,
+			style[side],
+			style.getPropertyValue("--scrollbar-width")
+		];
+		style.overflow = "hidden";
+		style.setProperty("--scrollbar-width", `${width}px`);
+		if (width) style[side] = `${parseFloat(computed[side]) + width}px`;
+		lock.unlock = () => {
+			style.overflow = saved[0];
+			style[side] = saved[1];
+			style.setProperty("--scrollbar-width", saved[2]);
+		};
+	}
+	let locked = true;
+	return () => {
+		if (locked && !--lock.count) lock.unlock();
+		locked = false;
+	};
+}
+//#endregion
+//#region src/dom/spread.ts
+const spreads = /* @__PURE__ */ new WeakMap();
+const TEXT = /^(?:aria|data)-/;
+const PROPS = /^(?:value|checked|selected|indeterminate)$/;
+function write(element, spread, key, value) {
+	if (key.startsWith("on")) {
+		const type = key.slice(2).toLowerCase();
+		if (typeof value === "function") {
+			spread.on[type] = value;
+			element.addEventListener(type, spread.handle);
+		} else {
+			delete spread.on[type];
+			element.removeEventListener(type, spread.handle);
+		}
+	} else if (PROPS.test(key) && key in element) element[key] = value ?? (key === "value" ? "" : false);
+	else if (value == null || value === false && !TEXT.test(key)) element.removeAttribute(key);
+	else element.setAttribute(key, value === true && !TEXT.test(key) ? "" : String(value));
+}
+function spread(element, part) {
+	const props = part;
+	let spread = spreads.get(element);
+	if (!spread) {
+		const on = {};
+		spreads.set(element, spread = {
+			props: {},
+			on,
+			handle: (event) => on[event.type]?.(event)
+		});
+	}
+	const old = spread.props;
+	if (old === props) return;
+	for (const key of Object.keys(old)) if (!(key in props)) write(element, spread, key, void 0);
+	for (const key of Object.keys(props)) if (props[key] !== old[key]) write(element, spread, key, props[key]);
+	spread.props = props;
+}
+//#endregion
+//#region src/dom/typeahead.ts
+/** The items a typeahead searches: a listbox's options, a menu's items, a tree's items. */
+const ITEMS = "[role=option],[role=menuitem],[role=menuitemcheckbox],[role=menuitemradio],[role=treeitem]";
+/** As long as Chromium's native `<select>` waits between keys. */
+const TIMEOUT = 1e3;
+let collator;
+/**
+* Whether `text` starts with `query`, ignoring case and accents as a native
+* `<select>` does ("e" finds "Été"), by the collator's base letters: vowel
+* signs that make a different letter (Devanagari's, Thai's) still count.
+*/
+function startsWith(text, query) {
+	collator ??= new Intl.Collator(void 0, { sensitivity: "base" });
+	return !collator.compare(text.trim().normalize().slice(0, query.length), query);
+}
+/**
+* The index of the first text starting with `query`, searching from
+* `current` and wrapping around; -1 when none does. A single key, or the
+* same key repeated, starts after `current`, so pressing "b" again moves
+* to the next item starting with "b"; a longer query may stay on `current`.
+*/
+function match(texts, query, current) {
+	let q = query.normalize();
+	const repeated = /^(.)\1*$/su.test(q.toLocaleLowerCase());
+	if (repeated) q = String.fromCodePoint(q.codePointAt(0));
+	const from = repeated ? current + 1 : Math.max(current, 0);
+	for (let i = 0; i < texts.length; i++) {
+		const at = (from + i) % texts.length;
+		if (startsWith(texts[at], q)) return at;
+	}
+	return -1;
+}
+let query = "";
+let last = 0;
+let lastContainer;
+/**
+* Typeahead for a part's `onKeyDown`: the item in `container` whose text
+* starts with what was typed within the last second, or undefined. Items
+* are the container's options, menu items and tree items that are not
+* `aria-disabled` or hidden; the current one is the key's target, or the
+* element its `aria-activedescendant` names. A key it uses has its default
+* prevented, so a Space inside a query does not activate the item.
+*
+* ```ts
+* onKeyDown: ({ el, send }, event) => {
+*   const item = typeahead(event, el.content);
+*   if (item) send("HIGHLIGHT", { id: item.id });
+* },
+* ```
+*/
+function typeahead(event, container) {
+	const { key } = event;
+	if (!/^.$/su.test(key) || event.ctrlKey || event.metaKey || event.altKey) return;
+	if (event.timeStamp - last > TIMEOUT || container !== lastContainer?.deref()) query = "";
+	if (key === " " && !query) return;
+	event.preventDefault();
+	query += key;
+	last = event.timeStamp;
+	lastContainer = new WeakRef(container);
+	const items = [...container.querySelectorAll(ITEMS)].filter((item) => item.getAttribute("aria-disabled") !== "true" && item.checkVisibility());
+	const target = event.target;
+	const active = target.getAttribute("aria-activedescendant");
+	const current = active && document.getElementById(active) || target;
+	return items[match(items.map((item) => item.textContent ?? ""), query, items.indexOf(current))];
+}
+//#endregion
+export { dismiss, focusTrap, hideOthers, liveRegion, popper, presence, scrollLock, spread, typeahead };

package/dist/glue/preact.d.ts

@@ -0,0 +1,4 @@
+import { t as View } from "../component-DDXOyYUI.js";
+//#region src/glue/preact.d.ts
+export declare function useMachine(machine: object, props?: object): View;
+//#endregion