ajo-cloves 0.1.0

package/dist/index.js

@@ -0,0 +1,1317 @@
+//#region packages/ajo-cloves/src/core.ts
+/** True when a value is structurally a DOM element in a document-bearing runtime. */
+var dom = (value) => typeof document != "undefined" && value?.nodeType === 1;
+/** True when both Window and Document globals are available. */
+var browser = () => typeof window != "undefined" && typeof document != "undefined";
+var statefulArg = (key) => key === "key" || key === "memo" || key === "ref" || key === "skip" || key.startsWith("set:");
+/** Maps rest attrs onto an Ajo stateful host, prefixing DOM attributes with `attr:`. */
+var statefulRootAttrs = (attrs) => {
+	const result = {};
+	for (const [key, value] of Object.entries(attrs)) result[statefulArg(key) ? key : `attr:${key}`] = value;
+	return result;
+};
+/** Calls an externally supplied DOM event handler when it is a function. */
+var callHandler = (handler, event) => {
+	if (typeof handler === "function") handler(event);
+};
+/** Calls an externally supplied Ajo ref callback when it is a function. */
+var callRef = (ref, element) => {
+	if (typeof ref === "function") ref(element);
+};
+var hostSignal = (host, signal) => signal && signal !== host.signal ? AbortSignal.any([signal, host.signal]) : host.signal;
+/** Adds a listener to a DOM host for at most the caller and host lifetimes. */
+var listen = (host, type, handler, opts) => {
+	if (!dom(host)) return;
+	host.addEventListener(type, handler, {
+		...opts,
+		signal: hostSignal(host, opts?.signal)
+	});
+};
+function on(target, type, fn, host, opts) {
+	target.addEventListener(type, fn, {
+		...opts,
+		signal: hostSignal(host, opts?.signal)
+	});
+}
+var sources = /* @__PURE__ */ new Map();
+/** Subscribes to a lazily-started shared source; the real source stops with the last unsubscribe. */
+var shared = (key, start, fn, signal) => {
+	if (signal.aborted) return;
+	let source = sources.get(key);
+	const created = !source;
+	if (!source) {
+		source = {
+			stop: () => {},
+			subscribers: /* @__PURE__ */ new Set()
+		};
+		sources.set(key, source);
+	}
+	source.subscribers.add(fn);
+	const unsubscribe = () => {
+		const current = sources.get(key);
+		if (!current) return;
+		current.subscribers.delete(fn);
+		if (current.subscribers.size) return;
+		current.stop();
+		sources.delete(key);
+	};
+	signal.addEventListener("abort", unsubscribe, { once: true });
+	if (!created) return;
+	try {
+		source.stop = start(() => {
+			const current = sources.get(key);
+			if (!current) return;
+			for (const subscriber of [...current.subscribers]) subscriber();
+		});
+	} catch (error) {
+		unsubscribe();
+		throw error;
+	}
+};
+/** Wraps fn so multiple calls within one frame collapse into one run on the next frame. */
+var frame = (fn) => {
+	let handle;
+	const run = () => {
+		handle = void 0;
+		fn();
+	};
+	const schedule = (() => {
+		if (typeof requestAnimationFrame == "undefined") {
+			fn();
+			return;
+		}
+		if (handle != null) return;
+		handle = requestAnimationFrame(run);
+	});
+	schedule.cancel = () => {
+		if (handle == null) return;
+		if (typeof cancelAnimationFrame != "undefined") cancelAnimationFrame(handle);
+		handle = void 0;
+	};
+	return schedule;
+};
+/** Owns frame-coalesced binding to one live element target at a time. */
+var live = (host, opts) => {
+	const signal = host.signal;
+	let target;
+	let scope;
+	const schedule = frame(() => {
+		const current = target;
+		if (current) opts.onChange(current);
+	});
+	const stop = () => {
+		scope?.abort();
+		scope = void 0;
+		target = void 0;
+		schedule.cancel();
+	};
+	signal.addEventListener("abort", stop, { once: true });
+	return { sync() {
+		if (signal.aborted) return;
+		const next = opts.target() ?? void 0;
+		if (next === target) return;
+		scope?.abort();
+		scope = void 0;
+		schedule.cancel();
+		target = next;
+		if (!next) return;
+		const controller = new AbortController();
+		const notify = () => {
+			if (!controller.signal.aborted && target === next) schedule();
+		};
+		scope = controller;
+		try {
+			opts.bind(next, notify, controller.signal);
+		} catch (error) {
+			if (scope === controller) {
+				controller.abort();
+				scope = void 0;
+				target = void 0;
+				schedule.cancel();
+			}
+			throw error;
+		}
+		notify();
+	} };
+};
+var counters = Object.create(null);
+/** Monotonic per-prefix unique id. */
+var id = (prefix) => `${prefix}-${counters[prefix] = (counters[prefix] ?? 0) + 1}`;
+/** Stores a value while keeping at most `limit` insertion-ordered cache keys. */
+var remember = (cache, key, value, limit = 32) => {
+	if (!Number.isInteger(limit) || limit < 1) throw new RangeError("remember limit must be a positive integer");
+	cache.set(key, value);
+	while (cache.size > limit) {
+		const oldest = cache.keys().next();
+		if (oldest.done) break;
+		cache.delete(oldest.value);
+	}
+	return value;
+};
+/** Clamps a number into the inclusive [min, max] range. */
+var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+//#endregion
+//#region packages/ajo-cloves/src/announce.ts
+var hidden = "position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0";
+var polite;
+var assertive;
+var create = (channel) => {
+	const region = document.createElement("div");
+	region.setAttribute("role", channel === "polite" ? "status" : "alert");
+	region.setAttribute("aria-live", channel);
+	region.setAttribute("aria-atomic", "true");
+	region.setAttribute("style", hidden);
+	document.body.append(region);
+	return region;
+};
+var region = (channel) => {
+	const next = (channel === "polite" ? polite : assertive) ?? create(channel);
+	if (channel === "polite") polite = next;
+	else assertive = next;
+	if (!next.isConnected) document.body.append(next);
+	return next;
+};
+var send = (channel, message) => {
+	const target = region(channel);
+	target.textContent = "";
+	queueMicrotask(() => target.textContent = message);
+};
+/** Screen-reader announcements through lazily created document-lifetime aria-live regions. */
+var announce = (host) => {
+	if (!dom(host)) return {
+		polite(_message) {},
+		assertive(_message) {}
+	};
+	return {
+		polite(message) {
+			send("polite", message);
+		},
+		assertive(message) {
+			send("assertive", message);
+		}
+	};
+};
+//#endregion
+//#region packages/ajo-cloves/src/controlled.ts
+/** Controlled/uncontrolled value unification for open/value-style component args. */
+var controlled = (host, opts) => {
+	let local = opts.fallback;
+	let value = local;
+	let bound = false;
+	return {
+		get value() {
+			return value;
+		},
+		get controlled() {
+			return bound;
+		},
+		/** undefined = uncontrolled; any other value (null included) binds. */
+		sync(arg) {
+			bound = arg !== void 0;
+			value = bound ? arg : local;
+			return value;
+		},
+		set(next, event) {
+			opts.onChange?.(next, event);
+			if (!bound) local = next;
+			host.next(() => value = next);
+		},
+		accept(next, event) {
+			if (!bound) local = next;
+			host.next(() => value = next);
+			opts.onChange?.(next, event);
+		},
+		/** Seeds the uncontrolled value without notifying onChange (lazy defaults). */
+		init(next) {
+			if (bound) return;
+			local = next;
+			host.next(() => value = next);
+		}
+	};
+};
+//#endregion
+//#region packages/ajo-cloves/src/dismiss.ts
+/** Closes a surface on Escape within the given elements and/or pointerdown outside them. */
+var dismiss = (host, opts) => {
+	if (!dom(host)) return;
+	const document = host.ownerDocument;
+	const view = document.defaultView;
+	const node = (value) => Boolean(view && value instanceof view.Node);
+	const escape = opts.escape ?? "host";
+	if (escape) on(escape === "document" ? document : host, "keydown", (event) => {
+		if (event.key !== "Escape" || !opts.active()) return;
+		if (escape === "host" && opts.inside) {
+			const target = event.target;
+			const elements = opts.inside().filter((element) => !!element);
+			if (elements.length && !(node(target) && elements.some((element) => element.contains(target)))) return;
+		}
+		if (opts.prevent) event.preventDefault();
+		opts.onDismiss(event);
+	}, host);
+	if (opts.outside) on(document, "pointerdown", (event) => {
+		if (!opts.active()) return;
+		const target = event.target;
+		if (!node(target)) return;
+		if (host.contains(target)) return;
+		if (opts.inside?.().some((element) => element?.contains(target))) return;
+		opts.onDismiss(event);
+	}, host, { capture: true });
+};
+//#endregion
+//#region packages/ajo-cloves/src/grid.ts
+var move$2 = (event, rtl) => {
+	if (event.key === "ArrowLeft") return { cols: rtl ? 1 : -1 };
+	if (event.key === "ArrowRight") return { cols: rtl ? -1 : 1 };
+	if (event.key === "ArrowUp") return { rows: -1 };
+	if (event.key === "ArrowDown") return { rows: 1 };
+	if (event.key === "Home") return {
+		edge: "start",
+		extent: event.ctrlKey ? "all" : "row"
+	};
+	if (event.key === "End") return {
+		edge: "end",
+		extent: event.ctrlKey ? "all" : "row"
+	};
+	if (event.key === "PageUp") return {
+		page: -1,
+		large: event.shiftKey
+	};
+	if (event.key === "PageDown") return {
+		page: 1,
+		large: event.shiftKey
+	};
+};
+/**
+* 2D grid keyboard navigation: resolves arrows/Home/End/PageUp/PageDown to semantic movement.
+*
+* The host parameter keeps the clove signature uniform; grid holds no
+* per-host state and needs no cleanup.
+*
+* @example
+* ```ts
+* const nav = grid(this, { onMove: move => focusCell(move) })
+* ```
+*/
+var grid = (host, opts) => {
+	return { 
+	/** Routes a keydown. Returns true and prevents default for grid navigation keys. */
+handle(event) {
+		const next = move$2(event, opts.rtl?.() ?? false);
+		if (!next) return false;
+		event.preventDefault();
+		opts.onMove(next, event);
+		return true;
+	} };
+};
+//#endregion
+//#region packages/ajo-cloves/src/hotkey.ts
+var modifier = (token) => token === "mod" || token === "ctrl" || token === "meta" || token === "alt" || token === "shift";
+var matches = (chord, event) => {
+	const tokens = chord.split("+").map((token) => token.trim().toLowerCase()).filter(Boolean);
+	const key = tokens.find((token) => !modifier(token));
+	if (!key) return false;
+	const wantsMod = tokens.includes("mod");
+	const wantsCtrl = tokens.includes("ctrl");
+	const wantsMeta = tokens.includes("meta");
+	const wantsAlt = tokens.includes("alt");
+	const wantsShift = tokens.includes("shift");
+	const ctrl = event.ctrlKey;
+	const meta = event.metaKey;
+	if (wantsMod) {
+		if (ctrl === meta) return false;
+	} else if (ctrl !== wantsCtrl || meta !== wantsMeta) return false;
+	if (event.altKey !== wantsAlt) return false;
+	if (event.shiftKey !== wantsShift) return false;
+	return event.key.toLowerCase() === key;
+};
+/** Global keyboard shortcut for a single chord like 'mod+b' or 'F8'. */
+var hotkey = (host, opts) => {
+	if (!dom(host)) return;
+	on(window, "keydown", (event) => {
+		if (!matches(opts.keys(), event)) return;
+		if (!(opts.active?.() ?? true)) return;
+		if (opts.prevent ?? true) event.preventDefault();
+		opts.onPress(event);
+	}, host);
+};
+//#endregion
+//#region packages/ajo-cloves/src/timer.ts
+/** Managed one-shot timer with pause/resume, auto-cleared with the host lifecycle. */
+var timer = (host) => {
+	const signal = host.signal;
+	let handle;
+	let task;
+	let due = 0;
+	let left = 0;
+	let paused = false;
+	const stop = () => {
+		if (handle != null) clearTimeout(handle);
+		handle = void 0;
+		task = void 0;
+		due = 0;
+		left = 0;
+		paused = false;
+	};
+	const done = () => {
+		const fn = task;
+		handle = void 0;
+		task = void 0;
+		due = 0;
+		left = 0;
+		paused = false;
+		fn?.();
+	};
+	const schedule = (ms) => {
+		left = Math.max(0, ms);
+		due = Date.now() + left;
+		handle = setTimeout(done, left);
+	};
+	const view = {
+		start(ms, fn) {
+			stop();
+			if (signal.aborted) return;
+			task = fn;
+			paused = false;
+			schedule(ms);
+		},
+		stop,
+		pause() {
+			if (handle == null) return;
+			left = Math.max(0, due - Date.now());
+			clearTimeout(handle);
+			handle = void 0;
+			paused = true;
+		},
+		resume() {
+			if (!paused || !task) return;
+			paused = false;
+			schedule(left);
+		},
+		get running() {
+			return handle != null;
+		},
+		get remaining() {
+			if (handle) return Math.max(0, due - Date.now());
+			return paused ? left : 0;
+		}
+	};
+	signal.addEventListener("abort", stop, { once: true });
+	return view;
+};
+//#endregion
+//#region packages/ajo-cloves/src/hover.ts
+/** Hover intent: zones hold the surface open; delays gate open/close transitions. */
+var hover = (host, opts) => {
+	const zones = /* @__PURE__ */ new Set();
+	const opening = timer(host);
+	const closing = timer(host);
+	let opened = false;
+	const flip = (next, event) => {
+		if (opened === next) return;
+		opened = next;
+		opts.onChange(next, event);
+	};
+	return {
+		get open() {
+			return opened;
+		},
+		hold(zone, event) {
+			zones.add(zone);
+			closing.stop();
+			if (opened || opening.running) return;
+			const delay = opts.openDelay?.() ?? 0;
+			if (delay <= 0) flip(true, event);
+			else opening.start(delay, () => flip(true, event));
+		},
+		release(zone, event) {
+			zones.delete(zone);
+			if (zones.size) return;
+			opening.stop();
+			if (!opened) return;
+			const delay = opts.closeDelay?.() ?? 0;
+			if (delay <= 0) flip(false, event);
+			else closing.start(delay, () => flip(false, event));
+		},
+		sync(open) {
+			opened = open;
+		},
+		/** Stops pending transitions and forgets every held zone without notifying. */
+		cancel() {
+			opening.stop();
+			closing.stop();
+			zones.clear();
+		}
+	};
+};
+//#endregion
+//#region packages/ajo-cloves/src/resize.ts
+var registry = /* @__PURE__ */ new WeakMap();
+var observer;
+var subscriptions = 0;
+var notify = (entries, source) => {
+	if (source !== observer) return;
+	for (const entry of entries) {
+		const callbacks = registry.get(entry.target);
+		if (!callbacks) continue;
+		for (const callback of [...callbacks]) callback(entry.target);
+	}
+};
+var subscribe = (el, fn, signal) => {
+	if (signal.aborted) return;
+	observer ??= new ResizeObserver(notify);
+	const currentObserver = observer;
+	let callbacks = registry.get(el);
+	if (!callbacks) {
+		callbacks = /* @__PURE__ */ new Set();
+		try {
+			currentObserver.observe(el);
+		} catch (error) {
+			try {
+				currentObserver.unobserve(el);
+			} catch {}
+			if (!subscriptions) {
+				try {
+					currentObserver.disconnect();
+				} catch {}
+				if (observer === currentObserver) observer = void 0;
+			}
+			throw error;
+		}
+		registry.set(el, callbacks);
+	}
+	callbacks.add(fn);
+	subscriptions++;
+	const unsubscribe = () => {
+		const current = registry.get(el);
+		if (!current?.delete(fn)) return;
+		subscriptions--;
+		if (!current.size) {
+			registry.delete(el);
+			observer?.unobserve(el);
+		}
+		if (subscriptions) return;
+		observer?.disconnect();
+		observer = void 0;
+	};
+	signal.addEventListener("abort", unsubscribe, { once: true });
+};
+/**
+* Shared ResizeObserver notification for a live target element.
+*
+* @example
+* ```ts
+* const size = resize(this, { target: () => panel, onResize: el => measure(el) })
+* while (true) {
+* 	size.sync()
+* 	yield <section ref={el => panel = el} />
+* }
+* ```
+*/
+var resize = (host, opts) => {
+	if (!dom(host) || typeof ResizeObserver == "undefined") return { sync() {} };
+	return live(host, {
+		target: opts.target,
+		onChange: opts.onResize,
+		bind: (element, notify, signal) => subscribe(element, notify, signal)
+	});
+};
+//#endregion
+//#region packages/ajo-cloves/src/indicator.ts
+/**
+* Tracks a marked child inside a live container and stamps its box on the
+* container as CSS variables (`--indicator-x/y/w/h`, px in the container's
+* content coordinates) plus a `data-indicator="true"` marker while a mark
+* exists. Themes draw a pseudo-element positioned by the variables and
+* transition it, so the active marker glides between children instead of
+* jumping.
+*
+* On first placement the variables land one frame before the marker
+* attribute, so a theme pseudo-element fades in at its resting position
+* instead of sliding in from the container origin.
+*
+* @example
+* ```ts
+* const mark = indicator(this, {
+* 	target: () => list,
+* 	of: container => container.querySelector('[data-state="active"]'),
+* })
+* while (true) {
+* 	mark.sync()
+* 	yield ...
+* }
+* ```
+*/
+var indicator = (host, opts) => {
+	if (!dom(host)) return { sync() {} };
+	let container;
+	let control;
+	let placed = false;
+	const clear = (el) => {
+		el.removeAttribute("data-indicator");
+		for (const name of [
+			"x",
+			"y",
+			"w",
+			"h"
+		]) el.style.removeProperty(`--indicator-${name}`);
+		placed = false;
+	};
+	const reveal = frame(() => {
+		if (container && placed) container.setAttribute("data-indicator", "true");
+	});
+	const measure = () => {
+		if (!container) return;
+		const mark = opts.of(container);
+		if (!mark || !container.contains(mark)) {
+			container.removeAttribute("data-indicator");
+			placed = false;
+			return;
+		}
+		const box = container.getBoundingClientRect();
+		const rect = mark.getBoundingClientRect();
+		const style = container.style;
+		style.setProperty("--indicator-x", `${rect.left - box.left + container.scrollLeft}px`);
+		style.setProperty("--indicator-y", `${rect.top - box.top + container.scrollTop}px`);
+		style.setProperty("--indicator-w", `${rect.width}px`);
+		style.setProperty("--indicator-h", `${rect.height}px`);
+		if (placed) return;
+		placed = true;
+		reveal();
+	};
+	const schedule = frame(measure);
+	const size = resize(host, {
+		target: () => container,
+		onResize: () => schedule()
+	});
+	const retarget = (next) => {
+		if (next === container) return;
+		control?.abort();
+		control = void 0;
+		if (container) clear(container);
+		container = next;
+		if (!container || !opts.on?.length) return;
+		control = new AbortController();
+		host.signal.addEventListener("abort", () => control?.abort(), { signal: control.signal });
+		for (const type of opts.on) container.addEventListener(type, () => schedule(), {
+			passive: true,
+			signal: control.signal
+		});
+	};
+	host.signal.addEventListener("abort", () => {
+		schedule.cancel();
+		reveal.cancel();
+		control?.abort();
+		if (container) clear(container);
+		container = void 0;
+	}, { once: true });
+	return { sync() {
+		if (host.signal.aborted) return;
+		retarget(opts.target() ?? void 0);
+		size.sync();
+		schedule();
+	} };
+};
+//#endregion
+//#region packages/ajo-cloves/src/label.ts
+/** Field labelling: stable ids and label/control/description/error wiring for one form field. */
+var label = (host, options = {}) => {
+	const base = id(options.prefix?.() ?? "field");
+	const ids = {
+		control: base,
+		description: `${base}-description`,
+		error: `${base}-error`,
+		label: `${base}-label`
+	};
+	let described = false;
+	let invalid = false;
+	let pending = false;
+	let present = false;
+	let pass = 0;
+	const schedule = () => {
+		if (!dom(host) || pending) return;
+		pending = true;
+		queueMicrotask(() => {
+			pending = false;
+			host.next();
+		});
+	};
+	const describedby = () => {
+		const values = [];
+		if (described) values.push(ids.description);
+		if (invalid) values.push(ids.error);
+		return values.join(" ") || void 0;
+	};
+	const controlAttrs = () => ({
+		id: ids.control,
+		"aria-describedby": describedby(),
+		"aria-invalid": invalid ? "true" : void 0,
+		"aria-errormessage": invalid ? ids.error : void 0
+	});
+	return {
+		ids,
+		sync(next) {
+			invalid = next;
+		},
+		describe(next) {
+			if (next) {
+				present = true;
+				if (described) return;
+				described = true;
+				schedule();
+				return;
+			}
+			present = false;
+			if (!described) return;
+			described = false;
+			schedule();
+		},
+		get labelAttrs() {
+			return {
+				id: ids.label,
+				for: ids.control
+			};
+		},
+		get controlAttrs() {
+			return controlAttrs();
+		},
+		get buttonAttrs() {
+			return {
+				...controlAttrs(),
+				"aria-labelledby": ids.label
+			};
+		},
+		get groupAttrs() {
+			return {
+				"aria-labelledby": ids.label,
+				"aria-describedby": describedby()
+			};
+		},
+		get descriptionAttrs() {
+			return { id: ids.description };
+		},
+		get errorAttrs() {
+			return { id: ids.error };
+		},
+		reset() {
+			present = false;
+			if (!described || !dom(host)) return;
+			const current = ++pass;
+			queueMicrotask(() => {
+				if (current !== pass || present || !described) return;
+				host.next(() => {
+					described = false;
+				});
+			});
+		}
+	};
+};
+//#endregion
+//#region packages/ajo-cloves/src/media.ts
+var lists = /* @__PURE__ */ new Map();
+var fallback = (opts) => opts.fallback?.() ?? false;
+var start$1 = (query) => (notify) => {
+	const list = window.matchMedia(query);
+	lists.set(query, list);
+	list.addEventListener("change", notify);
+	return () => {
+		list.removeEventListener("change", notify);
+		if (lists.get(query) === list) lists.delete(query);
+	};
+};
+var read$1 = (query, opts) => query ? lists.get(query)?.matches ?? fallback(opts) : fallback(opts);
+/**
+* Reactive media-query match, shared per query string.
+*
+* @example
+* ```ts
+* const narrow = media(this, { query: () => '(max-width: 768px)' })
+* for (const args of this) {
+* 	narrow.sync()
+* 	yield <span>{narrow.matches ? 'narrow' : 'wide'}</span>
+* }
+* ```
+*/
+var media = (host, options) => {
+	const { query } = options;
+	let active;
+	let current = fallback(options);
+	let scope;
+	const stop = () => {
+		scope?.abort();
+		scope = void 0;
+		active = void 0;
+	};
+	const update = () => {
+		const next = read$1(active, options);
+		if (next === current) return;
+		host.next(() => {
+			current = next;
+		});
+	};
+	if (!dom(host) || typeof window.matchMedia != "function") return {
+		get matches() {
+			return fallback(options);
+		},
+		sync() {}
+	};
+	host.signal.addEventListener("abort", stop, { once: true });
+	return {
+		get matches() {
+			return read$1(active, options);
+		},
+		sync() {
+			if (host.signal.aborted) return;
+			const next = query();
+			if (next === active) {
+				current = read$1(active, options);
+				return;
+			}
+			scope?.abort();
+			scope = new AbortController();
+			active = next;
+			shared(`media:${next}`, start$1(next), update, scope.signal);
+			current = read$1(active, options);
+		}
+	};
+};
+//#endregion
+//#region packages/ajo-cloves/src/move.ts
+var isCaptureElement = (value) => value instanceof HTMLElement || value instanceof SVGElement;
+var capture = (event) => isCaptureElement(event.currentTarget) ? event.currentTarget : isCaptureElement(event.target) ? event.target : void 0;
+var update = (session, event, canceled) => {
+	const { data } = session;
+	data.x = event.clientX;
+	data.y = event.clientY;
+	data.dx = event.clientX - session.startX;
+	data.dy = event.clientY - session.startY;
+	data.canceled = canceled;
+	return data;
+};
+var release = (session) => {
+	try {
+		session.element.releasePointerCapture(session.pointer);
+	} catch {}
+};
+/**
+* Pointer-drag session lifecycle: capture, move deltas, and guaranteed cleanup.
+*
+* `data` is one object mutated across callbacks within a session; read it
+* during the callback and do not retain it across events. Consumers own
+* gesture CSS such as `touch-action`, and Escape is reported without
+* preventDefault so consumers can decide that policy.
+*
+* @example
+* ```ts
+* function* Handle(this: Host) {
+* 	const drag = move(this, { onMove(data) { resize(data.dx, data.dy) } })
+* 	yield <div set:onpointerdown={event => drag.start(event)} />
+* }
+* ```
+*/
+var move = (host, opts) => {
+	if (!dom(host)) return {
+		start(_event) {
+			return false;
+		},
+		get active() {
+			return false;
+		}
+	};
+	const lifetime = host.signal;
+	let session;
+	const finish = (current, event, canceled, releaseCapture = true) => {
+		if (session !== current || current.controller.signal.aborted) return;
+		const data = event instanceof PointerEvent ? update(current, event, canceled) : current.data;
+		if (!(event instanceof PointerEvent)) data.canceled = canceled;
+		session = void 0;
+		current.controller.abort();
+		if (releaseCapture) release(current);
+		opts.onEnd?.(data, event);
+	};
+	return {
+		start(event) {
+			if (event.button !== 0 || !event.isPrimary || session || lifetime.aborted) return false;
+			const element = capture(event);
+			if (!element) return false;
+			try {
+				element.setPointerCapture(event.pointerId);
+			} catch {}
+			const current = {
+				controller: new AbortController(),
+				data: {
+					x: event.clientX,
+					y: event.clientY,
+					dx: 0,
+					dy: 0,
+					canceled: false
+				},
+				element,
+				pointer: event.pointerId,
+				startX: event.clientX,
+				startY: event.clientY
+			};
+			const { signal } = current.controller;
+			session = current;
+			lifetime.addEventListener("abort", () => {
+				if (session !== current || signal.aborted) return;
+				session = void 0;
+				current.controller.abort();
+				release(current);
+			}, {
+				once: true,
+				signal
+			});
+			on(element, "pointermove", (next) => {
+				if (next.pointerId !== current.pointer) return;
+				opts.onMove(update(current, next, false), next);
+			}, host, { signal });
+			on(element, "pointerup", (next) => {
+				if (next.pointerId !== current.pointer) return;
+				finish(current, next, false);
+			}, host, { signal });
+			on(element, "pointercancel", (next) => {
+				if (next.pointerId !== current.pointer) return;
+				finish(current, next, true);
+			}, host, { signal });
+			on(element, "lostpointercapture", (next) => {
+				if (next.pointerId !== current.pointer) return;
+				finish(current, next, true, false);
+			}, host, { signal });
+			on(element.ownerDocument, "keydown", (next) => {
+				if (next.key === "Escape") finish(current, next, true);
+			}, host, { signal });
+			opts.onStart?.(current.data, event);
+			return true;
+		},
+		get active() {
+			return !!session;
+		}
+	};
+};
+//#endregion
+//#region packages/ajo-cloves/src/scrolling.ts
+/**
+* Scroll tracking for a live target element with leak-proof retargeting.
+*
+* @example
+* ```ts
+* const track = scrolling(this, { target: () => list, onScroll: el => read(el.scrollTop) })
+* while (true) {
+* 	track.sync()
+* 	yield <div ref={el => list = el} />
+* }
+* ```
+*/
+var scrolling = (host, opts) => {
+	if (!dom(host)) return { sync() {} };
+	return live(host, {
+		target: opts.target,
+		onChange: opts.onScroll,
+		bind: (element, notify, signal) => {
+			on(element, "scroll", notify, host, {
+				passive: true,
+				signal
+			});
+			if (opts.onEnd) on(element, "scrollend", () => opts.onEnd?.(element), host, {
+				passive: true,
+				signal
+			});
+		}
+	});
+};
+//#endregion
+//#region packages/ajo-cloves/src/overflow.ts
+var edge = (position, size, span) => {
+	if (span - size <= 1) return null;
+	const offset = Math.abs(position);
+	const start = offset > 1;
+	const end = offset < span - size - 1;
+	return start && end ? "both" : start ? "start" : "end";
+};
+var stamp = (el, name, value) => {
+	if (!value) el.removeAttribute(name);
+	else if (el.getAttribute(name) !== value) el.setAttribute(name, value);
+};
+/**
+* Stamps `data-overflow-x` / `data-overflow-y` ("start" | "end" | "both") on
+* a live scrollable element while content overflows it, tracking scroll,
+* element resize, and re-renders. Themes pair the attrs with edge fades (the
+* `[data-overflow-*]` mask preflight); the attrs are absent while everything
+* fits.
+*
+* @example
+* ```ts
+* const edges = overflow(this, { target: () => list })
+* while (true) {
+* 	edges.sync()
+* 	yield <div ref={el => list = el} />
+* }
+* ```
+*/
+var overflow = (host, opts) => {
+	if (!dom(host)) return { sync() {} };
+	const measure = (el) => {
+		stamp(el, "data-overflow-x", edge(el.scrollLeft, el.clientWidth, el.scrollWidth));
+		stamp(el, "data-overflow-y", edge(el.scrollTop, el.clientHeight, el.scrollHeight));
+	};
+	const clear = (el) => {
+		stamp(el, "data-overflow-x", null);
+		stamp(el, "data-overflow-y", null);
+	};
+	let target;
+	const scroll = scrolling(host, {
+		target: () => target,
+		onScroll: measure
+	});
+	const size = resize(host, {
+		target: () => target,
+		onResize: (el) => measure(el)
+	});
+	const schedule = frame(() => {
+		if (target) measure(target);
+	});
+	host.signal.addEventListener("abort", () => {
+		schedule.cancel();
+		if (target) clear(target);
+		target = void 0;
+	}, { once: true });
+	return { sync() {
+		if (host.signal.aborted) return;
+		const next = opts.target() ?? void 0;
+		if (next !== target) {
+			if (target) clear(target);
+			target = next;
+		}
+		scroll.sync();
+		size.sync();
+		schedule();
+	} };
+};
+//#endregion
+//#region packages/ajo-cloves/src/restore.ts
+/** Captures the focused element and returns focus to it later. */
+var restore = (host) => {
+	const inert = {
+		capture(_element) {},
+		restore() {}
+	};
+	if (!dom(host)) return inert;
+	let captured = null;
+	return {
+		capture(element) {
+			captured = arguments.length ? element ?? null : document.activeElement;
+		},
+		restore() {
+			const element = captured;
+			captured = null;
+			if (!element) return;
+			queueMicrotask(() => {
+				if (element.isConnected) element.focus();
+			});
+		}
+	};
+};
+//#endregion
+//#region packages/ajo-cloves/src/roving.ts
+var keyStep = (event, orientation, dir) => {
+	if (event.key === "Home") return "first";
+	if (event.key === "End") return "last";
+	if (orientation === "vertical" || orientation === "both") {
+		if (event.key === "ArrowUp") return -1;
+		if (event.key === "ArrowDown") return 1;
+	}
+	if (orientation === "horizontal" || orientation === "both") {
+		if (event.key === "ArrowLeft") return dir === "rtl" ? 1 : -1;
+		if (event.key === "ArrowRight") return dir === "rtl" ? -1 : 1;
+	}
+};
+/** List keyboard navigation: resolves arrow/Home/End movement over items; consumers apply focus or virtual effects. */
+var roving = (host, opts) => {
+	const inert = {
+		handle: (_event) => false,
+		move: (_step, _event) => false
+	};
+	if (!dom(host)) return inert;
+	const move = (step, event) => {
+		const list = opts.items();
+		if (!list.length) return false;
+		const active = opts.current?.() ?? document.activeElement;
+		const index = Math.max(0, list.indexOf(active));
+		const target = step === "first" ? list[0] : step === "last" ? list[list.length - 1] : list[index + step] ?? (opts.loop?.() ?? true ? list[step > 0 ? 0 : list.length - 1] : void 0);
+		if (!target) return false;
+		opts.onMove(target, event);
+		return true;
+	};
+	return {
+		handle(event) {
+			const step = keyStep(event, opts.orientation?.() ?? "vertical", opts.dir?.() ?? "ltr");
+			if (step == null || !opts.items().length) return false;
+			event.preventDefault();
+			move(step, event);
+			return true;
+		},
+		move
+	};
+};
+//#endregion
+//#region packages/ajo-cloves/src/scheme.ts
+var dark = "(prefers-color-scheme: dark)";
+/**
+* Reactive OS color-scheme preference.
+*
+* @example
+* ```ts
+* const color = scheme(this)
+* yield <span>{color.dark ? 'dark' : 'light'}</span>
+* ```
+*/
+var scheme = (host) => {
+	const query = media(host, { query: () => dark });
+	query.sync();
+	return { get dark() {
+		return query.matches;
+	} };
+};
+//#endregion
+//#region packages/ajo-cloves/src/selection.ts
+/** Single/multi selection semantics over a controlled list of values. */
+var selection = (host, opts) => {
+	const state = controlled(host, {
+		fallback: [...opts.fallback ?? []],
+		onChange: opts.onChange
+	});
+	return {
+		get values() {
+			return state.value;
+		},
+		has(value) {
+			return state.value.includes(value);
+		},
+		toggle(value, event) {
+			const base = state.value;
+			const exists = base.includes(value);
+			let next;
+			if (opts.multiple?.() ?? false) if (exists) {
+				if ((opts.required?.() ?? false) && base.length <= 1) return;
+				next = base.filter((item) => item !== value);
+			} else next = Array.from(new Set([...base, value]));
+			else if (exists) {
+				if (opts.required?.() ?? false) return;
+				next = [];
+			} else next = [value];
+			state.set(next, event);
+		},
+		set(values, event) {
+			state.set([...values], event);
+		},
+		sync(values) {
+			return state.sync(values == null ? void 0 : [...values]);
+		}
+	};
+};
+//#endregion
+//#region packages/ajo-cloves/src/spin.ts
+var move$1 = (event) => {
+	if (event.key === "ArrowUp") return { step: 1 };
+	if (event.key === "ArrowDown") return { step: -1 };
+	if (event.key === "PageUp") return { page: 1 };
+	if (event.key === "PageDown") return { page: -1 };
+	if (event.key === "Home") return { edge: "min" };
+	if (event.key === "End") return { edge: "max" };
+};
+/**
+* Spinbutton keyboard stepping: resolves ArrowUp/ArrowDown/PageUp/PageDown/Home/End to semantic movement.
+*
+* The host parameter keeps the clove signature uniform; spin holds no
+* per-host state and needs no cleanup. Aria and value state stay in the
+* consumer; composes with roving when the consumer dispatches spin first.
+*
+* @example
+* ```ts
+* const stepper = spin(this, { onMove: move => stepValue(move) })
+* ```
+*/
+var spin = (host, opts) => {
+	return { 
+	/** Routes a keydown. Returns true and prevents default for spin keys. */
+handle(event) {
+		const next = move$1(event);
+		if (!next) return false;
+		event.preventDefault();
+		opts.onMove(next, event);
+		return true;
+	} };
+};
+//#endregion
+//#region packages/ajo-cloves/src/storage.ts
+var last;
+var source = (notify) => {
+	const handler = (event) => {
+		last = event;
+		notify();
+	};
+	window.addEventListener("storage", handler);
+	return () => {
+		window.removeEventListener("storage", handler);
+		last = void 0;
+	};
+};
+var area = (name) => {
+	try {
+		return name === "local" ? window.localStorage : window.sessionStorage;
+	} catch {
+		return;
+	}
+};
+var get = (name, key, fallback) => {
+	const store = area(name);
+	if (!store) return fallback;
+	try {
+		return store.getItem(key) ?? fallback;
+	} catch {
+		return fallback;
+	}
+};
+var put = (name, key, value) => {
+	const store = area(name);
+	if (!store) return;
+	try {
+		store.setItem(key, value);
+	} catch {}
+};
+var drop = (name, key) => {
+	const store = area(name);
+	if (!store) return;
+	try {
+		store.removeItem(key);
+	} catch {}
+};
+/**
+* Reactive localStorage or sessionStorage string value with cross-tab sync.
+*
+* @example
+* ```ts
+* const theme = storage(this, { key: () => 'theme', fallback: 'light' })
+* yield <button set:onclick={() => theme.set('dark')}>{theme.value}</button>
+* ```
+*/
+var storage = (host, opts) => {
+	const name = opts.area ?? "local";
+	if (!dom(host)) return {
+		get value() {
+			return opts.fallback;
+		},
+		set(_next) {},
+		remove() {}
+	};
+	let key = opts.key();
+	let current = get(name, key, opts.fallback);
+	const sync = () => {
+		if (host.signal.aborted) return;
+		const next = opts.key();
+		if (next === key) return;
+		host.next(() => {
+			key = next;
+			current = get(name, key, opts.fallback);
+		});
+	};
+	const set = (next) => {
+		host.next(() => {
+			current = next;
+		});
+	};
+	shared("storage", source, () => {
+		sync();
+		const event = last;
+		const store = area(name);
+		if (event?.storageArea && store && event.storageArea !== store) return;
+		if (event?.key != null && event.key !== key) return;
+		const next = event?.key == null ? opts.fallback : event.key === key ? event.newValue ?? opts.fallback : get(name, key, opts.fallback);
+		if (next === current) return;
+		host.next(() => {
+			current = next;
+		});
+	}, host.signal);
+	return {
+		get value() {
+			sync();
+			return current;
+		},
+		set(next) {
+			if (host.signal.aborted) return;
+			sync();
+			put(name, key, next);
+			set(next);
+		},
+		remove() {
+			if (host.signal.aborted) return;
+			sync();
+			drop(name, key);
+			set(opts.fallback);
+		}
+	};
+};
+//#endregion
+//#region packages/ajo-cloves/src/typeahead.ts
+var label$1 = (item) => item.dataset.label ?? item.textContent?.trim() ?? "";
+var printable = (event) => event.key.length === 1 && event.key !== " " && !event.ctrlKey && !event.metaKey && !event.altKey;
+/** Typeahead: buffers printable keys and matches by label prefix without preventing default. */
+var typeahead = (host, opts) => {
+	const inert = {
+		handle: (_event) => false,
+		reset() {}
+	};
+	if (!dom(host)) return inert;
+	const resetter = timer(host);
+	let query = "";
+	const reset = () => {
+		query = "";
+		resetter.stop();
+	};
+	return {
+		handle(event) {
+			if (!printable(event)) return false;
+			query = `${query}${event.key}`.toLowerCase();
+			resetter.start(opts.delay?.() ?? 600, () => query = "");
+			const text = opts.text ?? label$1;
+			const match = opts.items().find((item) => text(item).toLowerCase().startsWith(query));
+			if (match) opts.onMatch(match, event);
+			return true;
+		},
+		reset
+	};
+};
+//#endregion
+//#region packages/ajo-cloves/src/visibility.ts
+var start = (notify) => {
+	document.addEventListener("visibilitychange", notify);
+	return () => document.removeEventListener("visibilitychange", notify);
+};
+var read = () => document.visibilityState !== "hidden";
+/**
+* Reactive document visibility.
+*
+* @example
+* ```ts
+* const page = visibility(this)
+* yield <span>{page.visible ? 'visible' : 'hidden'}</span>
+* ```
+*/
+var visibility = (host) => {
+	if (!dom(host)) return { get visible() {
+		return true;
+	} };
+	let current = read();
+	shared("visibility", start, () => {
+		const next = read();
+		if (next === current) return;
+		host.next(() => {
+			current = next;
+		});
+	}, host.signal);
+	return { get visible() {
+		return current;
+	} };
+};
+//#endregion
+export { announce, browser, callHandler, callRef, clamp, controlled, dismiss, dom, frame, grid, hotkey, hover, id, indicator, label, listen, media, move, overflow, remember, resize, restore, roving, scheme, scrolling, selection, shared, spin, statefulRootAttrs, storage, timer, typeahead, visibility };