foldkit-primitives 0.15.3 → 0.16.0

package/dist/dom/index.mjs

@@ -1,1857 +0,0 @@
-import { A as FocusScope, C as targetOf, D as Moved, E as MoveStarted, O as HideOutside, S as Targets, T as MoveEnded, _ as PointerDrag, a as TextCommitted, b as TargetHovered, c as DRAG_THRESHOLD, d as DragPlace, f as DragStarted, g as HOLD_TO_DRAG_MS, h as HOLD_SLOP, i as TextCancelled, j as tabbableWithin, k as ScrollLock, l as DragCancelled, m as DraggedOver, n as EditAsked, o as TextEdited, p as DragZone, r as EditableText, s as textOf, t as FollowTabStop, u as DragDropped, v as boxOf, w as Move, x as TargetPressed, y as zoneOf } from "../follow-tab-stop-Caog2qg1.mjs";
-import { Effect, Option, Queue, Schema, Stream } from "effect";
-import * as Mount from "foldkit/mount";
-import { defineMessageUnion } from "foldkit/message";
-import * as Dom from "foldkit/dom";
-import { fromString, toString } from "foldkit/url";
-//#region src/dom/autofocus.ts
-const Focused = Schema.TaggedStruct("Focused", {});
-/**
-* Autofocus as a Mount: focuses the element on insert, then emits `Focused`.
-* The message means focus was requested — a non-focusable element or a
-* hidden tab may decline, and the browser does not report that. Plain
-* `focus()`, no scroll options: scroll behavior stays the application's
-* choice.
-*/
-const Autofocus = Mount.define("Autofocus", {
-	messages: [Focused],
-	execute: ({ element }) => Effect.sync(() => {
-		const focusable = element;
-		if (typeof focusable.focus === "function") focusable.focus.call(element);
-		return Focused.make({});
-	})
-});
-//#endregion
-//#region src/dom/clipboard.ts
-/**
-* The clipboard as Commands: run in `update` beside any bundle. A copy yields
-* `Copied` or `CopyFailed`, a read `Read` or `ReadFailed`. No Model involved:
-* the clipboard is not application state.
-*/
-const ClipboardMessage = defineMessageUnion({
-	Copied: {},
-	CopyFailed: { message: Schema.String }
-});
-const ClipboardReadMessage = defineMessageUnion({
-	Read: { text: Schema.String },
-	ReadFailed: { message: Schema.String }
-});
-const failMessage$2 = (error) => error instanceof Error ? error.message : String(error);
-/**
-* Copies text to the clipboard. Without a clipboard API (SSR, insecure
-* context, denied permission) the command yields `CopyFailed` instead of
-* throwing, so `update` handles both outcomes as Messages.
-*/
-const copyText = (text) => ({
-	name: "Clipboard.copy",
-	args: { text },
-	effect: typeof navigator !== "undefined" && typeof navigator.clipboard?.writeText === "function" ? Effect.matchEffect(Effect.tryPromise({
-		try: () => navigator.clipboard.writeText(text),
-		catch: failMessage$2
-	}), {
-		onFailure: (message) => Effect.succeed(ClipboardMessage.CopyFailed({ message })),
-		onSuccess: () => Effect.succeed(ClipboardMessage.Copied())
-	}) : Effect.succeed(ClipboardMessage.CopyFailed({ message: "clipboard is unavailable" }))
-});
-/**
-* Reads the clipboard's text. The browser may ask the user first; a refusal,
-* an insecure context or no clipboard API yields `ReadFailed`.
-*/
-const readText = () => ({
-	name: "Clipboard.read",
-	effect: typeof navigator !== "undefined" && typeof navigator.clipboard?.readText === "function" ? Effect.matchEffect(Effect.tryPromise({
-		try: () => navigator.clipboard.readText(),
-		catch: failMessage$2
-	}), {
-		onFailure: (message) => Effect.succeed(ClipboardReadMessage.ReadFailed({ message })),
-		onSuccess: (text) => Effect.succeed(ClipboardReadMessage.Read({ text }))
-	}) : Effect.succeed(ClipboardReadMessage.ReadFailed({ message: "clipboard is unavailable" }))
-});
-//#endregion
-//#region src/dom/input-mask.ts
-/** What `InputMask` reports after each edit: the masked text shown, and the characters typed. */
-const Input = Schema.TaggedStruct("Input", {
-	value: Schema.String,
-	raw: Schema.String
-});
-const isDigit = (char) => char >= "0" && char <= "9";
-const isLetter = (char) => char >= "a" && char <= "z" || char >= "A" && char <= "Z";
-const matches = (placeholder, char) => placeholder === "#" ? isDigit(char) : placeholder === "A" ? isLetter(char) : isDigit(char) || isLetter(char);
-const isPlaceholder = (char) => char === "#" || char === "A" || char === "*";
-/** Whether any placeholder at or after `from` consumes any input at or after `at`. */
-const fillable = (pattern, from, value, at) => {
-	for (let i = from; i < pattern.length; i++) {
-		const placeholder = pattern[i];
-		if (!isPlaceholder(placeholder)) continue;
-		for (let j = at; j < value.length; j++) if (matches(placeholder, value[j])) return true;
-	}
-	return false;
-};
-/**
-* The mask as a pure function: `#` takes a digit, `A` a letter, `*` either, and
-* any other character of the pattern is written in once input reaches past it.
-* Input that fits no placeholder is skipped. `masked` is what the field shows;
-* `raw` is only the characters typed.
-*/
-const applyMask = (value, pattern) => {
-	let masked = "";
-	let raw = "";
-	let at = 0;
-	for (let i = 0; i < pattern.length; i++) {
-		const slot = pattern[i];
-		if (isPlaceholder(slot)) {
-			while (at < value.length && !matches(slot, value[at])) at++;
-			if (at >= value.length) break;
-			masked += value[at];
-			raw += value[at];
-			at++;
-		} else if (fillable(pattern, i + 1, value, at)) masked += slot;
-		else break;
-	}
-	return {
-		masked,
-		raw
-	};
-};
-const asField = (element) => {
-	const field = element;
-	return typeof field.value === "string" && typeof field.addEventListener === "function" ? field : null;
-};
-/**
-* An input mask as a Mount plus a pure mask function. The pattern language
-* is three placeholders — `#` digit, `A` letter, `*` either, all ASCII —
-* with every other character literal. Literals appear only once a later placeholder
-* consumes input, so partial values never dangle a separator. The Mount
-* rewrites the field, restores the caret approximately, and emits `Input`
-* with both the masked and raw values; the parent owns the state, like any
-* controlled input.
-*/
-const InputMask = Mount.defineStream("InputMask", {
-	messages: [Input],
-	args: { pattern: Schema.String },
-	execute: ({ element, pattern }) => Stream.callback((queue) => Effect.gen(function* () {
-		const field = asField(element);
-		if (field === null) return;
-		const onInput = () => {
-			const { masked, raw } = applyMask(field.value, pattern);
-			if (masked !== field.value) {
-				const caret = field.selectionStart ?? masked.length;
-				field.value = masked;
-				const at = Math.min(caret, masked.length);
-				try {
-					field.setSelectionRange?.(at, at);
-				} catch {}
-			}
-			Queue.offerUnsafe(queue, Input.make({
-				value: masked,
-				raw
-			}));
-		};
-		yield* Effect.acquireRelease(Effect.sync(() => {
-			field.addEventListener("input", onInput);
-			return field;
-		}), (current) => Effect.sync(() => current.removeEventListener("input", onInput)));
-	}))
-});
-//#endregion
-//#region src/dom/keep-in-view.ts
-/**
-* Keeps what is marked in view as a Mount: whenever an element in the mounted
-* one's subtree newly matches `selector`, such as the row just selected in a
-* list, it is scrolled into view the least amount that shows it (`nearest`).
-* The element keeps its identity and its focus: nothing is redrawn to move it.
-*
-* It watches with a `MutationObserver` for as long as it is mounted, which is as
-* long as the list or canvas that can change what is marked.
-*/
-const KeepInView = Mount.defineStream("KeepInView", {
-	messages: [Schema.Never],
-	args: { 
-	/** What is marked, as a selector within the element: `[aria-selected="true"]`. */
-selector: Schema.String },
-	execute: ({ element, selector }) => Stream.callback(() => Effect.acquireRelease(Effect.sync(() => {
-		let marked = element.querySelector(selector);
-		const observer = new MutationObserver(() => {
-			const now = element.querySelector(selector);
-			if (now !== null && now !== marked && typeof now.scrollIntoView === "function") now.scrollIntoView({
-				block: "nearest",
-				inline: "nearest"
-			});
-			marked = now;
-		});
-		observer.observe(element, {
-			subtree: true,
-			childList: true,
-			attributes: true
-		});
-		return observer;
-	}), (observer) => Effect.sync(() => observer.disconnect())))
-});
-//#endregion
-//#region src/dom/script-loader.ts
-/**
-* Script loading as a Command: appends a `src` script to the head unless one
-* is already there. Idempotent by URL — concurrent placements collapse onto
-* the first tag instead of fetching twice. Yields `Loaded` on success and
-* `LoadFailed` otherwise (network error, no document), so `update` handles
-* both outcomes as Messages.
-*/
-const ScriptMessage = defineMessageUnion({
-	Loaded: {},
-	LoadFailed: { message: Schema.String }
-});
-const failMessage$1 = (error) => error instanceof Error ? error.message : String(error);
-const inflight = /* @__PURE__ */ new Map();
-/** Loads a script by URL, once per URL. */
-const loadScript = (src) => ({
-	name: "Script.load",
-	args: { src },
-	effect: Effect.matchEffect(Effect.tryPromise({
-		try: () => {
-			if (typeof document === "undefined") return Promise.reject(/* @__PURE__ */ new Error("script loading is unavailable"));
-			const running = inflight.get(src);
-			if (running !== void 0) return running;
-			if (Array.from(document.getElementsByTagName("script")).some((element) => element.getAttribute("src") === src)) return Promise.resolve();
-			const tracked = new Promise((resolve, reject) => {
-				const element = document.createElement("script");
-				element.src = src;
-				element.async = true;
-				element.onload = () => resolve();
-				element.onerror = () => {
-					element.remove();
-					reject(/* @__PURE__ */ new Error(`failed to load script: ${src}`));
-				};
-				document.head.appendChild(element);
-			}).then(() => {
-				inflight.delete(src);
-			}, (error) => {
-				inflight.delete(src);
-				throw error;
-			});
-			inflight.set(src, tracked);
-			return tracked;
-		},
-		catch: (error) => error
-	}), {
-		onFailure: (error) => Effect.succeed(ScriptMessage.LoadFailed({ message: failMessage$1(error) })),
-		onSuccess: () => Effect.succeed(ScriptMessage.Loaded())
-	})
-});
-//#endregion
-//#region src/dom/share.ts
-/**
-* Web Share as a Command: runs in `update` beside any bundle, yields
-* `Shared` on success. Dismissal is its own outcome, not a failure — the
-* application tells a cancelled sheet apart from a broken one. Without a
-* share API (desktop, insecure context) it yields `ShareFailed` instead of
-* throwing, so `update` handles every outcome as a Message.
-*/
-const ShareData = Schema.Struct({
-	title: Schema.optional(Schema.String),
-	text: Schema.optional(Schema.String),
-	url: Schema.optional(Schema.String)
-});
-const ShareMessage = defineMessageUnion({
-	Shared: {},
-	Dismissed: {},
-	ShareFailed: { message: Schema.String }
-});
-const failMessage = (error) => error instanceof Error ? error.message : String(error);
-const isDismissal = (error) => typeof error?.name === "string" && error.name === "AbortError";
-/** Shares data through the platform sheet. */
-const share = (data) => ({
-	name: "Share.share",
-	args: { data },
-	effect: typeof navigator !== "undefined" && typeof navigator.share === "function" ? Effect.matchEffect(Effect.tryPromise({
-		try: () => navigator.share({
-			...data.title !== void 0 ? { title: data.title } : {},
-			...data.text !== void 0 ? { text: data.text } : {},
-			...data.url !== void 0 ? { url: data.url } : {}
-		}),
-		catch: (error) => error
-	}), {
-		onFailure: (error) => Effect.succeed(isDismissal(error) ? ShareMessage.Dismissed() : ShareMessage.ShareFailed({ message: failMessage(error) })),
-		onSuccess: () => Effect.succeed(ShareMessage.Shared())
-	}) : Effect.succeed(ShareMessage.ShareFailed({ message: "share is unavailable" }))
-});
-//#endregion
-//#region src/dom/measure.ts
-/** The custom properties `Measure` writes for a target named `name`. */
-const measured = (name) => ({
-	x: `--fk-${name}-x`,
-	y: `--fk-${name}-y`,
-	w: `--fk-${name}-w`,
-	h: `--fk-${name}-h`,
-	display: `--fk-${name}-display`,
-	/**
-	* `1` for the measure that finds the mark on another element than the
-	* last, `0` for any other (the layout moved or resized the same one, or
-	* it is the first found): an overlay that glides to a new mark scales its
-	* duration by it, so it keeps to its element as the layout settles.
-	*/
-	moving: `--fk-${name}-moving`
-});
-/**
-* Measures marked elements as a Mount, for a view to draw something over them,
-* such as an editor's selection outline, with no Message and no Model: where
-* an element is, is presentation, known to the DOM and to no transition.
-*
-* For each named target, the first element in the mounted one's subtree that
-* matches its selector is measured relative to the mounted element's scroll
-* box, which is what an absolutely placed child of it is laid out in. The
-* mounted element gets `--fk-<name>-x`, `-y`, `-w` and `-h` in pixels, and
-* `--fk-<name>-display`: `block` while a target is found, `none` while none is,
-* and `--fk-<name>-moving` (see `measured`).
-*
-* It measures again when the subtree changes (a selection moves) or the
-* mounted element or a measured one changes size, in the frame the change is
-* drawn in; and, at most once a frame, when the mounted element scrolls, the
-* window resizes, an image or a font inside loads, and on every frame of a
-* transition or an animation inside. What moves a target by any other way,
-* such as a stylesheet added that shifts it without resizing it, is seen at
-* the next of these.
-*/
-const Measure = Mount.defineStream("Measure", {
-	messages: [Schema.Never],
-	args: { 
-	/** Each target by name, as a selector within the element: `{ selected: '[aria-selected="true"]' }`. */
-targets: Schema.Record(Schema.String, Schema.String) },
-	execute: ({ element, targets }) => Stream.callback(() => Effect.acquireRelease(Effect.sync(() => {
-		const container = element;
-		const names = Object.keys(targets);
-		let watched = [];
-		const last = /* @__PURE__ */ new Map();
-		let frame;
-		let animating = false;
-		const measure = () => {
-			if (frame !== void 0) cancelAnimationFrame(frame);
-			frame = void 0;
-			const box = container.getBoundingClientRect();
-			const found = [];
-			for (const name of names) {
-				const property = measured(name);
-				const target = container.querySelector(targets[name]);
-				if (target === null) {
-					container.style.setProperty(property.display, "none");
-					continue;
-				}
-				found.push(target);
-				const previous = last.get(name);
-				last.set(name, target);
-				const rect = target.getBoundingClientRect();
-				const x = rect.left - box.left - container.clientLeft + container.scrollLeft;
-				const y = rect.top - box.top - container.clientTop + container.scrollTop;
-				container.style.setProperty(property.x, `${x}px`);
-				container.style.setProperty(property.y, `${y}px`);
-				container.style.setProperty(property.w, `${rect.width}px`);
-				container.style.setProperty(property.h, `${rect.height}px`);
-				container.style.setProperty(property.display, "block");
-				container.style.setProperty(property.moving, previous === void 0 || previous === target ? "0" : "1");
-			}
-			if (found.length !== watched.length || found.some((each, at) => each !== watched[at])) {
-				for (const each of watched) sizes.unobserve(each);
-				for (const each of found) sizes.observe(each);
-				watched = found;
-			}
-			if (animating) {
-				animating = container.getAnimations({ subtree: true }).some((animation) => animation.playState === "running");
-				if (animating) soon();
-			}
-		};
-		const soon = () => {
-			if (frame === void 0) frame = requestAnimationFrame(measure);
-		};
-		const moving = () => {
-			animating = true;
-			soon();
-		};
-		const changes = new MutationObserver(measure);
-		const sizes = new ResizeObserver(measure);
-		document.fonts.addEventListener("loadingdone", soon);
-		changes.observe(container, {
-			subtree: true,
-			childList: true,
-			attributes: true
-		});
-		sizes.observe(container);
-		container.addEventListener("scroll", soon, { passive: true });
-		window.addEventListener("resize", soon);
-		container.addEventListener("load", soon, { capture: true });
-		container.addEventListener("transitionrun", moving);
-		container.addEventListener("animationstart", moving);
-		measure();
-		return () => {
-			if (frame !== void 0) cancelAnimationFrame(frame);
-			changes.disconnect();
-			sizes.disconnect();
-			container.removeEventListener("scroll", soon);
-			window.removeEventListener("resize", soon);
-			container.removeEventListener("load", soon, { capture: true });
-			document.fonts.removeEventListener("loadingdone", soon);
-			container.removeEventListener("transitionrun", moving);
-			container.removeEventListener("animationstart", moving);
-		};
-	}), (stop) => Effect.sync(stop)))
-});
-//#endregion
-//#region src/dom/scroll.ts
-/**
-* Where the window is scrolled, across an application's own navigations, as
-* a stream. Left to itself, a browser keeps the scroll of the entry it
-* leaves when a link pushes a new one, and on Back restores the old offset
-* before the application has drawn the entry it returns to, so the offset is
-* clamped to a page still loading. Here a pushed entry starts at the top,
-* and Back, Forward or a reload return where that entry was, once the page
-* is tall enough to hold it.
-*
-* Three rules, each found the slow way:
-*
-* 1. The offset is taken when the reader acts. The next screen is drawn
-*    before a Navigate Command pushes the address, so by the time the URL
-*    changes the window is already clamped to the new, shorter page. The
-*    scroll is recorded at the reader's click or key (capture phase), and at
-*    the start of Back and Forward, which begin in the browser before
-*    anything is drawn.
-* 2. A restore holds its place while the next screen settles. A restore made
-*    when the entry changes is undone by the loading state drawn right after
-*    it, so the target is held on each frame for a moment, until the reader
-*    scrolls, touches or types, or another navigation starts.
-* 3. Entries are keyed by the Navigation API's entry key, which a reload and
-*    a full navigation keep; offsets rest in `sessionStorage`, so Back into
-*    another document restores too. Where the browser has no Navigation API
-*    the stream attaches nothing and leaves the browser's own behaviour
-*    alone.
-*
-* Lift with `Subscription.persistentEntry`; the stream sends no Messages. Only
-* the window scrolls: a nested container is the route graph's to know, when
-* `Site.transition` arrives.
-*/
-const navigationTypeOf = (event) => "navigationType" in event ? Option.some(event.navigationType) : Option.none();
-const readSaved = (storageKey) => {
-	try {
-		const stored = JSON.parse(sessionStorage.getItem(storageKey) ?? "[]");
-		return new Map(Array.isArray(stored) ? stored.filter((pair) => Array.isArray(pair) && typeof pair[0] === "string" && typeof pair[1] === "number") : []);
-	} catch {
-		return /* @__PURE__ */ new Map();
-	}
-};
-/** Starts keeping the scroll; the release undoes everything it installed. */
-const attach = (storageKey, kept, patience) => {
-	const navigation = window.navigation;
-	if (navigation === void 0) return () => {};
-	const restoration = window.history.scrollRestoration;
-	window.history.scrollRestoration = "manual";
-	const saved = readSaved(storageKey);
-	const detaches = [];
-	const on = (target, type, listener, capture) => {
-		target.addEventListener(type, listener, capture);
-		detaches.push(() => target.removeEventListener(type, listener, capture));
-	};
-	const keyOf = () => Option.fromNullOr(navigation.currentEntry).pipe(Option.map((entry) => entry.key));
-	/** Where the current entry was left, if it has been. */
-	const savedHere = () => Option.flatMap(keyOf(), (key) => Option.fromUndefinedOr(saved.get(key)));
-	const remember = () => {
-		const key = keyOf();
-		if (Option.isNone(key)) return;
-		saved.delete(key.value);
-		saved.set(key.value, window.scrollY);
-		for (const old of saved.keys()) {
-			if (saved.size <= kept) break;
-			saved.delete(old);
-		}
-	};
-	let settling = new AbortController();
-	/**
-	* Holds the window at `top` while the next screen settles, whenever the page
-	* can hold it, until the reader scrolls, touches or types, or another
-	* navigation starts.
-	*/
-	const settle = (top) => {
-		settling.abort();
-		settling = new AbortController();
-		const { signal } = settling;
-		for (const input of [
-			"wheel",
-			"touchstart",
-			"keydown",
-			"pointerdown"
-		]) window.addEventListener(input, () => settling.abort(), {
-			passive: true,
-			signal
-		});
-		const until = performance.now() + patience;
-		const step = () => {
-			if (signal.aborted) return;
-			if (document.documentElement.scrollHeight - window.innerHeight >= top && Math.round(window.scrollY) !== top) window.scrollTo({
-				top,
-				behavior: "instant"
-			});
-			if (performance.now() < until) requestAnimationFrame(step);
-			else settling.abort();
-		};
-		step();
-	};
-	const acted = () => remember();
-	for (const input of ["click", "keydown"]) on(window, input, acted, true);
-	const traversing = (event) => {
-		if (Option.contains(navigationTypeOf(event), "traverse")) remember();
-	};
-	on(navigation, "navigate", traversing);
-	const changed = (event) => {
-		const type = navigationTypeOf(event);
-		if (Option.contains(type, "push")) settle(0);
-		else if (Option.contains(type, "traverse")) settle(Option.getOrElse(savedHere(), () => 0));
-	};
-	on(navigation, "currententrychange", changed);
-	const hidden = () => {
-		remember();
-		try {
-			sessionStorage.setItem(storageKey, JSON.stringify([...saved]));
-		} catch {}
-	};
-	on(window, "pagehide", hidden);
-	const here = savedHere();
-	if (Option.isSome(here)) settle(here.value);
-	return () => {
-		settling.abort();
-		for (const detach of detaches) detach();
-		window.history.scrollRestoration = restoration;
-	};
-};
-/**
-* Keeps the window's scroll across same-document navigations: a pushed entry
-* starts at the top, and Back, Forward or a reload return where that entry
-* was. Without a window the stream is empty instead of throwing. Lift with
-* `Subscription.persistentEntry`; the stream sends no Messages.
-*/
-const keepScroll = (options = {}) => {
-	if (typeof window === "undefined") return Stream.empty;
-	const storageKey = options.storageKey ?? "foldkit:scroll";
-	const kept = options.kept ?? 50;
-	const patience = options.patience ?? 2e3;
-	return Stream.callback(() => Effect.acquireRelease(Effect.sync(() => attach(storageKey, kept, patience)), (detach) => Effect.sync(detach)));
-};
-//#endregion
-//#region src/dom/pointed-links.ts
-/**
-* The address of the link a reader points at or tabs to, on the page's own
-* origin: where they may go next, for a `Data.preload` before they go. Each
-* link once while they stay on it, since crossing its text sends one event
-* per element inside it. Without a document the stream is empty. Lift with
-* `Subscription.persistentEntry`, mapping each address to a Message.
-*/
-const pointedLinks = () => {
-	if (typeof document === "undefined") return Stream.empty;
-	const linkOf = (event) => {
-		const link = event.target instanceof Element ? event.target.closest("a[href]") : null;
-		return link instanceof HTMLAnchorElement && link.origin === window.location.origin ? fromString(link.href) : Option.none();
-	};
-	return Stream.merge(Dom.streamFromEventFilterMap({
-		target: document,
-		type: "pointerover",
-		filterMapEvent: linkOf
-	}), Dom.streamFromEventFilterMap({
-		target: document,
-		type: "focusin",
-		filterMapEvent: linkOf
-	})).pipe(Stream.changesWith((a, b) => toString(a) === toString(b)));
-};
-//#endregion
-//#region src/dom/fluid-hover.ts
-/** The custom properties `FluidHover` writes on its container for a highlight named `name`. */
-const fluidHovered = (name) => ({
-	x: `--fk-${name}-x`,
-	y: `--fk-${name}-y`,
-	w: `--fk-${name}-w`,
-	h: `--fk-${name}-h`,
-	/** `1` while an item is highlighted, `0` once the pointer and focus have left. */
-	shown: `--fk-${name}-shown`,
-	/**
-	* `0` for the frame the highlight appears in, then `1`: a highlight's
-	* movement scales its duration by it, so it appears on its item rather
-	* than sliding in from where it last was.
-	*/
-	moving: `--fk-${name}-moving`
-});
-/**
-* The attribute `FluidHover` sets on its container, to the highlight's name,
-* while it runs: a stylist draws the highlight, and drops each item's own
-* hover, only under it.
-*/
-const FLUID_HOVER_ATTRIBUTE = "data-fluid-hover";
-/** The attribute that names, inside an item, the control a press in a gap reaches. */
-const FLUID_PRESS_ATTRIBUTE = "data-fluid-press";
-/** The attribute on the item the highlight is shown on, for what CSS draws beside it. */
-const FLUID_LIT_ATTRIBUTE = "data-fluid-lit";
-/**
-* The attribute `FluidHover` sets on its container, to the highlight's name,
-* while the item that highlight is on is held. A stylist draws the press on
-* the highlight (`data-fluid-held`) rather than on the item, whose own press
-* is hidden under it; a press in a gap marks it too where `gapClick` sends
-* that press to the lit item.
-*/
-const FLUID_HELD_ATTRIBUTE = "data-fluid-held";
-const Axis = Schema.Literals([
-	"x",
-	"y",
-	"xy"
-]);
-/** How far a point is from a rectangle along each axis: zero inside it. */
-const gap = (low, high, at) => Math.max(low - at, 0, at - high);
-const away = {
-	x: (dx, dy) => dx * 1e6 + dy,
-	y: (dx, dy) => dy * 1e6 + dx,
-	xy: Math.hypot
-};
-const distance = (rect, x, y, axis) => away[axis](gap(rect.left, rect.right, x), gap(rect.top, rect.bottom, y));
-const isDisabled = (item) => item.matches("[aria-disabled=\"true\"], [data-disabled]:not([data-disabled=\"false\"]), :disabled");
-/**
-* One highlight that follows the pointer across a container's items, as a
-* Mount, with no Message and no Model: which item the pointer is nearest is
-* presentation, known to the DOM and to no transition.
-*
-* The item nearest the pointer is the one highlighted, so the pointer in a gap
-* between two items still points at one, and the highlight moves from item to
-* item instead of blinking off between them. On the `y` axis nearness is read
-* vertically (a list), on `x` horizontally (a strip), on `xy` both (a grid). A
-* disabled item (`aria-disabled="true"`, `data-disabled`, `:disabled`) is never
-* highlighted. An item reached by the keyboard (`:focus-visible`) is
-* highlighted too, and with `focused`, the item that selector finds from a
-* focused element that is no item (a tree's row, from its focused
-* `treeitem`, which also holds the rows beneath it); a touch highlights
-* nothing, since there is no pointer to
-* follow before the press.
-*
-* The container gets `--fk-<name>-x`, `-y`, `-w` and `-h` in pixels, relative
-* to its scroll box like `Measure`'s, and `-shown` and `-moving` (see
-* `fluidHovered`); a view draws the highlight as an absolutely placed child
-* that reads them. With `gapClick`, a click in a gap presses the highlighted
-* item: its descendant marked `data-fluid-press`, or the item itself; with
-* `gapReach` too, only a click within that many pixels of it, as a grid of
-* cards with wide gutters wants (Fluid Functionalism's uses 16). A popup
-* measured before it has a layout box keeps its last complete place, and
-* tries again for three frames, rather than drawing the highlight at zero.
-* The item the highlight is shown on carries `data-fluid-lit`, so a style
-* can change what sits beside it (a table hides the lines around the lit
-* row); its container carries `data-fluid-held` while that item is pressed.
-*
-* `follows` names the item the highlight sits on while the pointer is not
-* moving it: a menu marks the row its keys reach (`[data-active]`), and the
-* highlight goes there whenever that mark moves, so the keys and the pointer
-* light the same one. `from` names the item a fresh highlight grows out of,
-* as a tab's hover leaves the chosen tab. A highlight always fades where it
-* is: once the pointer leaves, nothing should move. It stays only for an item
-* the keyboard reached (`:focus-visible`), not one a click focused.
-*/
-const FluidHover = Mount.defineStream("FluidHover", {
-	messages: [Schema.Never],
-	args: {
-		/** The highlight's name, which names the custom properties. */
-		name: Schema.String,
-		/** The selector of an item within the container. */
-		item: Schema.String,
-		axis: Axis,
-		gapClick: Schema.Boolean,
-		/** How far from the highlighted item, in pixels, a click in a gap still presses it. */
-		gapReach: Schema.optional(Schema.Number),
-		/** The selector of the item the highlight sits on while the pointer is not moving it. */
-		follows: Schema.optional(Schema.String),
-		/** The selector of the item a fresh highlight grows out of. */
-		from: Schema.optional(Schema.String),
-		/** The selector, run from a focused element outside any item, of the item it lights. */
-		focused: Schema.optional(Schema.String)
-	},
-	execute: ({ element, name, item: selector, axis, gapClick, gapReach, follows, from, focused }) => Stream.callback(() => Effect.acquireRelease(Effect.sync(() => {
-		const container = element;
-		const property = fluidHovered(name);
-		let active = null;
-		let followed = null;
-		let pointer = null;
-		let frame;
-		const origin = () => from === void 0 ? null : container.querySelector(from);
-		let retries = 0;
-		const place = (at = active) => {
-			if (at === null) return;
-			const box = container.getBoundingClientRect();
-			const rect = at.getBoundingClientRect();
-			if (rect.width === 0 && rect.height === 0) {
-				if (retries < 3) {
-					retries += 1;
-					requestAnimationFrame(() => place(at));
-				}
-				return;
-			}
-			retries = 0;
-			const x = rect.left - box.left - container.clientLeft + container.scrollLeft;
-			const y = rect.top - box.top - container.clientTop + container.scrollTop;
-			container.style.setProperty(property.x, `${x}px`);
-			container.style.setProperty(property.y, `${y}px`);
-			container.style.setProperty(property.w, `${rect.width}px`);
-			container.style.setProperty(property.h, `${rect.height}px`);
-		};
-		/** Marks `item` as the lit one, and nothing else. */
-		const light = (item) => {
-			container.querySelectorAll(`[${FLUID_LIT_ATTRIBUTE}]`).forEach((each) => each !== item && each.removeAttribute("data-fluid-lit"));
-			item?.setAttribute(FLUID_LIT_ATTRIBUTE, "");
-		};
-		const show = (next) => {
-			const appearing = container.style.getPropertyValue(property.shown) !== "1";
-			active = next;
-			light(next);
-			const grows = appearing ? origin() : null;
-			if (appearing) container.style.setProperty(property.moving, "0");
-			if (grows === null) {
-				place();
-				container.style.setProperty(property.shown, "1");
-			} else {
-				place(grows);
-				requestAnimationFrame(() => {
-					if (active !== next) return;
-					place();
-					container.style.setProperty(property.shown, "1");
-				});
-			}
-			if (appearing) requestAnimationFrame(() => container.style.setProperty(property.moving, "1"));
-		};
-		const hide = () => {
-			container.style.setProperty(property.shown, "0");
-			container.removeAttribute(FLUID_HELD_ATTRIBUTE);
-			light(null);
-		};
-		/** Whether the keyboard has an item focused, which the highlight then stays on. */
-		const keyed = () => {
-			const focused = document.activeElement;
-			return focused !== null && container.contains(focused) && focused.matches(":focus-visible");
-		};
-		const nearest = (x, y) => {
-			let best = null;
-			let bestDistance = Infinity;
-			for (const each of Array.from(container.querySelectorAll(selector))) {
-				if (isDisabled(each)) continue;
-				const far = distance(each.getBoundingClientRect(), x, y, axis);
-				if (far < bestDistance) {
-					best = each;
-					bestDistance = far;
-				}
-			}
-			return best;
-		};
-		const follow = () => {
-			frame = void 0;
-			if (pointer === null) return;
-			const next = nearest(pointer.x, pointer.y);
-			if (next === null) hide();
-			else if (next !== active || container.style.getPropertyValue(property.shown) !== "1") show(next);
-		};
-		const move = (event) => {
-			if (event.pointerType === "touch") return;
-			pointer = {
-				x: event.clientX,
-				y: event.clientY
-			};
-			if (frame === void 0) frame = requestAnimationFrame(follow);
-		};
-		const leave = () => {
-			pointer = null;
-			release();
-			if (!keyed()) hide();
-		};
-		const focus = (event) => {
-			if (!(event.target instanceof Element) || !event.target.matches(":focus-visible")) return;
-			const owner = event.target.closest(selector) ?? (focused === void 0 ? null : event.target.querySelector(focused));
-			if (owner !== null && container.contains(owner) && !isDisabled(owner)) show(owner);
-		};
-		const blur = (event) => {
-			const to = event.relatedTarget;
-			if (pointer === null && !(to instanceof Node && container.contains(to))) hide();
-		};
-		const reachOf = (item, event) => gapReach === void 0 || distance(item.getBoundingClientRect(), event.clientX, event.clientY, "xy") <= gapReach;
-		/** Whether a click in a gap presses the lit item, within `gapReach` of it. */
-		const reaches = (item, event) => gapClick && reachOf(item, event);
-		const click = (event) => {
-			if (active === null) return;
-			if (container.style.getPropertyValue(property.shown) !== "1") return;
-			const target = event.target;
-			if (!(target instanceof Element) || target.closest(selector) !== null) return;
-			if (!reaches(active, event)) return;
-			const press = active.querySelector(`[data-fluid-press]`) ?? active;
-			if (press instanceof HTMLElement) press.click();
-		};
-		const soon = () => {
-			if (active !== null) requestAnimationFrame(() => place());
-		};
-		/**
-		* Marks the container as held where the press is the lit item's: the
-		* item itself, or a gap a click there reaches through (`gapClick`). A
-		* press on another item is that item's, once the pointer has lit it.
-		*/
-		const press = (event) => {
-			if (event.button !== 0 || active === null) return;
-			if (container.style.getPropertyValue(property.shown) !== "1") return;
-			const target = event.target;
-			if (!(target instanceof Element)) return;
-			const inItem = target.closest(selector) !== null;
-			if (inItem && !active.contains(target)) return;
-			if (!inItem && !reaches(active, event)) return;
-			container.setAttribute(FLUID_HELD_ATTRIBUTE, name);
-		};
-		const release = () => container.removeAttribute(FLUID_HELD_ATTRIBUTE);
-		/** The marked item moved: the highlight goes with it, or fades if it is gone. */
-		const marked = () => {
-			if (follows === void 0) return;
-			const next = container.querySelector(follows);
-			if (next === followed) return;
-			followed = next;
-			if (next !== null && !isDisabled(next)) show(next);
-			else if (pointer === null && !keyed()) hide();
-		};
-		const sizes = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(soon);
-		const marks = follows === void 0 ? void 0 : new MutationObserver(marked);
-		sizes?.observe(container);
-		marks?.observe(container, {
-			subtree: true,
-			childList: true,
-			attributes: true
-		});
-		container.addEventListener("pointermove", move, { passive: true });
-		container.addEventListener("pointerdown", press);
-		container.addEventListener("pointerleave", leave);
-		window.addEventListener("pointerup", release);
-		window.addEventListener("pointercancel", release);
-		container.addEventListener("focusin", focus);
-		container.addEventListener("focusout", blur);
-		container.addEventListener("click", click);
-		container.addEventListener("scroll", soon, { passive: true });
-		window.addEventListener("resize", soon);
-		container.style.setProperty(property.shown, "0");
-		container.setAttribute(FLUID_HOVER_ATTRIBUTE, name);
-		marked();
-		return () => {
-			if (frame !== void 0) cancelAnimationFrame(frame);
-			sizes?.disconnect();
-			marks?.disconnect();
-			container.removeAttribute(FLUID_HOVER_ATTRIBUTE);
-			container.removeAttribute(FLUID_HELD_ATTRIBUTE);
-			light(null);
-			container.removeEventListener("pointermove", move);
-			container.removeEventListener("pointerdown", press);
-			container.removeEventListener("pointerleave", leave);
-			window.removeEventListener("pointerup", release);
-			window.removeEventListener("pointercancel", release);
-			container.removeEventListener("focusin", focus);
-			container.removeEventListener("focusout", blur);
-			container.removeEventListener("click", click);
-			container.removeEventListener("scroll", soon);
-			window.removeEventListener("resize", soon);
-		};
-	}), (stop) => Effect.sync(stop)))
-});
-//#endregion
-//#region src/dom/keyboard-inset.ts
-/**
-* The custom property `KeyboardInset` writes on its element: how much of the layout
-* viewport's bottom the on-screen keyboard (or anything else the visual viewport leaves
-* out) covers, in pixels.
-*/
-const KEYBOARD_INSET = "--fk-keyboard-inset";
-/**
-* The part of the layout viewport's height below the visual viewport: what the on-screen
-* keyboard covers. Rounded down, since a fraction of a pixel of zoom is no keyboard.
-*/
-const keyboardInset = (view) => view.visualViewport === null ? 0 : Math.max(0, Math.floor(view.innerHeight - view.visualViewport.height - view.visualViewport.offsetTop));
-/**
-* The on-screen keyboard's height as a Mount, with no Message and no Model: where it is
-* is the browser's. iOS Safari, and Chrome on Android unless the page asks otherwise,
-* leave the layout viewport as it is when the keyboard opens, so a panel fixed to the
-* screen keeps its height and its bottom under the keys. This writes `KEYBOARD_INSET` on
-* the element, from the visual viewport's size and scroll, for a style to pad or shrink by
-* (`var(--fk-keyboard-inset, 0px)`), and removes it when the element goes. Where there is
-* no visual viewport it writes nothing.
-*/
-const KeyboardInset = Mount.defineStream("KeyboardInset", {
-	messages: [Schema.Never],
-	args: {},
-	execute: ({ element }) => Stream.callback(() => Effect.acquireRelease(Effect.sync(() => {
-		const view = element.ownerDocument.defaultView;
-		const viewport = view?.visualViewport;
-		if (!(element instanceof HTMLElement) || view === null || view === void 0 || viewport === null || viewport === void 0) return () => {};
-		const target = element;
-		const measure = () => target.style.setProperty(KEYBOARD_INSET, `${keyboardInset(view)}px`);
-		measure();
-		viewport.addEventListener("resize", measure);
-		viewport.addEventListener("scroll", measure);
-		return () => {
-			viewport.removeEventListener("resize", measure);
-			viewport.removeEventListener("scroll", measure);
-			target.style.removeProperty(KEYBOARD_INSET);
-		};
-	}), (release) => Effect.sync(release)))
-});
-//#endregion
-//#region src/dom/scroll-bars.ts
-/**
-* The attribute that marks a bar beside a scroller `ScrollBars` runs on, set
-* to the axis it shows: `block` (the up-and-down bar) or `inline`.
-*/
-const SCROLL_BAR_ATTRIBUTE = "data-scroll-bar";
-/**
-* The attribute `ScrollBars` sets on its scroller while it draws the bars, so a
-* style hides the native bar only then: with no Mount running (a coarse
-* pointer, a page not yet hydrated) the browser's bar stays.
-*/
-const SCROLL_OVERLAID_ATTRIBUTE = "data-scroll-overlaid";
-/**
-* The custom properties `ScrollBars` writes on each bar, in pixels, for its
-* thumb to read: how far along the bar the thumb starts, and how long it is.
-* Physical: an inline bar's offset is from its left edge in either direction.
-*/
-const scrollThumb = {
-	offset: "--fk-scroll-thumb-offset",
-	size: "--fk-scroll-thumb-size"
-};
-/** The shortest a thumb is drawn, however long the content, so it stays a target. */
-const SHORTEST = 20;
-const FINE_POINTER = "(hover: hover) and (pointer: fine)";
-/**
-* An overlay scrollbar as a Mount, with no Message and no Model: where a
-* scroller is scrolled is the browser's, and the bar only shows it.
-*
-* It runs on the scroller (or on an element holding it, named by `scroller`,
-* when the scroller carries another Mount) and drives the bars drawn beside
-* it: the scroller's parent's children marked `data-scroll-bar` (`block` or
-* `inline`), which a style lays over the scroller's edge. Each bar gets `data-scrollable` while its axis has
-* more to scroll, `data-shown` while the scroller scrolls or the pointer moves
-* over it, until `idle` milliseconds pass with neither (or longer, while the
-* pointer rests on a bar), and `data-dragging` while its thumb is dragged; and
-* `--fk-scroll-thumb-offset` and `-size` (see `scrollThumb`). Pressing a bar
-* off its thumb moves the thumb there, then drags it.
-*
-* It does nothing where the primary pointer is coarse or cannot hover, decided
-* when it mounts: touch keeps the browser's bar and its physics. Otherwise the
-* scroller gets `data-scroll-overlaid`, for a style to hide the native bar.
-* How the bar looks, rests, widens and fades is the style's.
-*/
-const ScrollBars = Mount.defineStream("ScrollBars", {
-	messages: [Schema.Never],
-	args: {
-		/** How long, in milliseconds, the bars stay after the last scroll or move. Default 600. */
-		idle: Schema.optional(Schema.Number),
-		/**
-		* The scroller, as a selector within the element, when it cannot hold this
-		* Mount itself (another component's, with a Mount of its own); looked for
-		* once, when it mounts. Default: the element is the scroller.
-		*/
-		scroller: Schema.optional(Schema.String)
-	},
-	execute: ({ element, idle = 600, scroller: within }) => Stream.callback(() => Effect.acquireRelease(Effect.sync(() => {
-		if (typeof matchMedia !== "function" || !matchMedia(FINE_POINTER).matches) return () => {};
-		const found = within === void 0 ? element : element.querySelector(within);
-		if (!(found instanceof HTMLElement)) return () => {};
-		const scroller = found;
-		const area = scroller.parentElement;
-		if (area === null) return () => {};
-		const isBar = (child) => child instanceof HTMLElement && child.hasAttribute("data-scroll-bar");
-		/** Looked for at each use, so a redraw that replaced a bar is followed. */
-		const bars = () => Array.from(area.children).filter(isBar);
-		const axisOf = (bar) => bar.getAttribute("data-scroll-bar") === "inline" ? "inline" : "block";
-		/** The scroller along one axis, with the start measured from the top or the left. */
-		const extent = (axis) => {
-			if (axis === "block") return {
-				view: scroller.clientHeight,
-				content: scroller.scrollHeight,
-				start: scroller.scrollTop
-			};
-			const room = scroller.scrollWidth - scroller.clientWidth;
-			const rtl = getComputedStyle(scroller).direction === "rtl";
-			return {
-				view: scroller.clientWidth,
-				content: scroller.scrollWidth,
-				start: rtl ? room + scroller.scrollLeft : scroller.scrollLeft
-			};
-		};
-		const scrollTo = (axis, start) => {
-			if (axis === "block") {
-				scroller.scrollTop = start;
-				return;
-			}
-			const room = scroller.scrollWidth - scroller.clientWidth;
-			const rtl = getComputedStyle(scroller).direction === "rtl";
-			scroller.scrollLeft = rtl ? start - room : start;
-		};
-		const trackOf = (bar, axis) => axis === "block" ? bar.clientHeight : bar.clientWidth;
-		/** Where the thumb is along its bar, or nothing while the axis has nothing to scroll. */
-		const thumbOf = (bar, axis) => {
-			const { view, content, start } = extent(axis);
-			const track = trackOf(bar, axis);
-			if (content - view < 1 || track <= 0) return null;
-			const size = Math.min(track, Math.max(SHORTEST, track * view / content));
-			return {
-				track,
-				size,
-				offset: (track - size) * start / (content - view),
-				room: content - view
-			};
-		};
-		const set = (bar, name, value) => {
-			if (bar.style.getPropertyValue(name) !== value) bar.style.setProperty(name, value);
-		};
-		const mark = (bar, name, on) => {
-			if (bar.hasAttribute(name) !== on) bar.toggleAttribute(name, on);
-		};
-		let frame;
-		const update = () => {
-			if (frame !== void 0) cancelAnimationFrame(frame);
-			frame = void 0;
-			for (const bar of bars()) {
-				const axis = axisOf(bar);
-				const { view, content } = extent(axis);
-				mark(bar, "data-scrollable", content - view >= 1);
-				const thumb = thumbOf(bar, axis);
-				if (thumb === null) continue;
-				set(bar, scrollThumb.offset, `${thumb.offset}px`);
-				set(bar, scrollThumb.size, `${thumb.size}px`);
-			}
-		};
-		const soon = () => {
-			if (frame === void 0) frame = requestAnimationFrame(update);
-		};
-		let hiding;
-		let resting = null;
-		/** Ends the drag under way, if one is. */
-		let dragging = null;
-		const hide = () => {
-			hiding = void 0;
-			if (resting !== null || dragging !== null) return;
-			for (const bar of bars()) mark(bar, "data-shown", false);
-		};
-		const show = () => {
-			for (const bar of bars()) mark(bar, "data-shown", true);
-			if (hiding !== void 0) clearTimeout(hiding);
-			hiding = setTimeout(hide, idle);
-		};
-		const scrolled = () => {
-			update();
-			show();
-		};
-		const moved = (event) => {
-			if (event.pointerType !== "touch") show();
-		};
-		const entered = (event) => {
-			if (event.pointerType === "touch") return;
-			area.addEventListener("pointermove", moved, { passive: true });
-			show();
-		};
-		const left = () => {
-			area.removeEventListener("pointermove", moved);
-			resting = null;
-			if (hiding === void 0) hiding = setTimeout(hide, idle);
-		};
-		const over = (event) => {
-			const target = event.target;
-			resting = target instanceof Element ? bars().find((bar) => bar.contains(target)) ?? null : null;
-		};
-		const pressed = (event) => {
-			if (event.button !== 0 || event.pointerType === "touch" || dragging !== null) return;
-			const target = event.target;
-			if (!(target instanceof Element)) return;
-			const bar = bars().find((each) => each.contains(target));
-			if (bar === void 0) return;
-			const axis = axisOf(bar);
-			const thumb = thumbOf(bar, axis);
-			if (thumb === null) return;
-			event.preventDefault();
-			const along = (at) => {
-				const box = bar.getBoundingClientRect();
-				return axis === "block" ? at.clientY - box.top - bar.clientTop : at.clientX - box.left - bar.clientLeft;
-			};
-			const at = along(event);
-			const onThumb = at >= thumb.offset && at <= thumb.offset + thumb.size;
-			const grab = onThumb ? at - thumb.offset : thumb.size / 2;
-			const follow = (to) => {
-				const current = thumbOf(bar, axis);
-				if (current === null) return;
-				const offset = Math.min(Math.max(along(to) - grab, 0), current.track - current.size);
-				scrollTo(axis, offset / (current.track - current.size) * current.room);
-			};
-			const id = event.pointerId;
-			const move = (to) => {
-				if (to.pointerId === id) follow(to);
-			};
-			const end = (to) => {
-				if (to.pointerId === id) stop();
-			};
-			const owner = bar.ownerDocument;
-			const stop = () => {
-				owner.removeEventListener("pointermove", move);
-				owner.removeEventListener("pointerup", end);
-				owner.removeEventListener("pointercancel", end);
-				mark(bar, "data-dragging", false);
-				dragging = null;
-				show();
-			};
-			owner.addEventListener("pointermove", move);
-			owner.addEventListener("pointerup", end);
-			owner.addEventListener("pointercancel", end);
-			mark(bar, "data-dragging", true);
-			dragging = stop;
-			show();
-			if (!onThumb) follow(event);
-		};
-		const sizes = new ResizeObserver(soon);
-		const changes = new MutationObserver((records) => {
-			for (const record of records) {
-				for (const node of Array.from(record.removedNodes)) if (node instanceof Element) sizes.unobserve(node);
-				for (const node of Array.from(record.addedNodes)) if (node instanceof Element && (record.target === scroller || isBar(node))) sizes.observe(node);
-			}
-			soon();
-		});
-		sizes.observe(scroller);
-		for (const child of Array.from(scroller.children)) sizes.observe(child);
-		for (const bar of bars()) sizes.observe(bar);
-		changes.observe(scroller, { childList: true });
-		changes.observe(area, { childList: true });
-		scroller.addEventListener("scroll", scrolled, { passive: true });
-		area.addEventListener("pointerenter", entered);
-		area.addEventListener("pointerleave", left);
-		area.addEventListener("pointerover", over);
-		area.addEventListener("pointerdown", pressed);
-		scroller.setAttribute(SCROLL_OVERLAID_ATTRIBUTE, "");
-		update();
-		return () => {
-			dragging?.();
-			if (frame !== void 0) cancelAnimationFrame(frame);
-			if (hiding !== void 0) clearTimeout(hiding);
-			sizes.disconnect();
-			changes.disconnect();
-			scroller.removeEventListener("scroll", scrolled);
-			area.removeEventListener("pointerenter", entered);
-			area.removeEventListener("pointerleave", left);
-			area.removeEventListener("pointerover", over);
-			area.removeEventListener("pointerdown", pressed);
-			area.removeEventListener("pointermove", moved);
-			scroller.removeAttribute(SCROLL_OVERLAID_ATTRIBUTE);
-			for (const bar of bars()) {
-				for (const name of [
-					"data-scrollable",
-					"data-shown",
-					"data-dragging"
-				]) bar.removeAttribute(name);
-				bar.style.removeProperty(scrollThumb.offset);
-				bar.style.removeProperty(scrollThumb.size);
-			}
-		};
-	}), (stop) => Effect.sync(stop)))
-});
-//#endregion
-//#region src/dom/swipe.ts
-const SwipeStarted = Schema.TaggedStruct("SwipeStarted", {
-	pointerId: Schema.Number,
-	pointerType: Schema.String,
-	/** The border box of what `measure` names (the element itself by default), as the swipe starts. */
-	width: Schema.Number,
-	height: Schema.Number
-});
-const Swiped = Schema.TaggedStruct("Swiped", {
-	pointerId: Schema.Number,
-	/** From where the pointer went down, in CSS pixels. */
-	deltaX: Schema.Number,
-	deltaY: Schema.Number
-});
-const SwipeEnded = Schema.TaggedStruct("SwipeEnded", {
-	pointerId: Schema.Number,
-	/** From where the pointer went down to where it came up, in CSS pixels. */
-	deltaX: Schema.Number,
-	deltaY: Schema.Number,
-	/**
-	* How fast the pointer was moving as it came up, in pixels a millisecond,
-	* over the last `SWIPE_WINDOW` milliseconds: 0 when it rested there first.
-	*/
-	velocityX: Schema.Number,
-	velocityY: Schema.Number,
-	/** `false` when the pointer was cancelled or capture was lost. */
-	completed: Schema.Boolean
-});
-/** How far back, in milliseconds, the release velocity looks. */
-const SWIPE_WINDOW = 100;
-/**
-* What a swipe never starts on when its element `scrolls`: a field whose own
-* drag selects text or moves a thumb, and anything marked `data-no-swipe`.
-*/
-const NO_SWIPE = "input, textarea, select, [contenteditable=\"\"], [contenteditable=\"true\"], [data-no-swipe]";
-/** Every element a Swipe is mounted on: a touch inside one is that one's, not an outer one's. */
-const owners = /* @__PURE__ */ new WeakSet();
-/**
-* The velocity of the samples within `SWIPE_WINDOW` of the last: the way
-* from the oldest of them to the last over the time between. A pointer that
-* came to rest before the last sample has no recent way to measure, so 0.
-*/
-const velocityOf = (samples) => {
-	const last = samples.at(-1);
-	if (last === void 0) return {
-		x: 0,
-		y: 0
-	};
-	const first = samples.find((sample) => last.at - sample.at <= 100) ?? last;
-	const elapsed = last.at - first.at;
-	return elapsed <= 0 ? {
-		x: 0,
-		y: 0
-	} : {
-		x: (last.x - first.x) / elapsed,
-		y: (last.y - first.y) / elapsed
-	};
-};
-/**
-* Whether anything from `target` up to `root` can still scroll along `axis`
-* the way a finger moving `along` (positive is down or right) pulls it: a
-* finger going down scrolls content toward its start.
-*/
-const canScroll = (target, root, axis, along) => {
-	for (let at = target; at !== null; at = at.parentElement) {
-		const overflow = getComputedStyle(at)[axis === "y" ? "overflowY" : "overflowX"];
-		if (overflow === "auto" || overflow === "scroll") {
-			const position = Math.abs(axis === "y" ? at.scrollTop : at.scrollLeft);
-			const room = axis === "y" ? at.scrollHeight - at.clientHeight : at.scrollWidth - at.clientWidth;
-			if (room > 1 && (along > 0 ? position > .5 : position < room - .5)) return true;
-		}
-		if (at === root) return false;
-	}
-	return false;
-};
-/**
-* `Move` with the speed of its release, for a gesture that a flick ends
-* (a sheet dragged to dismiss, a card swiped away): a primary-button pointer
-* down (or, given a `slop`, its first move past it) captures the pointer,
-* each move reports the delta from where it was pressed, and up reports the
-* last delta with the velocity over the last `SWIPE_WINDOW` milliseconds, by
-* the events' own time stamps. Cancel or lost capture ends it incomplete.
-* The start reports the size of what is moved, so a distance can be read as
-* a share of it. What a delta or a speed means is the parent's `update`.
-* Capture is released with the Mount.
-*
-* Given `scrolls`, the element holds content that scrolls (a sheet's panel),
-* and a touch is followed by touch events, whose move can still refuse the
-* browser's scroll once the touch is under way, where a pointer's cannot:
-* past the slop, a touch that runs along the axis and finds nothing under it
-* that can scroll further its way swipes, and the browser scrolls any other.
-* A touch inside an element with a Swipe of its own (a handle in the panel)
-* is that one's, and none starts on a field or on `data-no-swipe`
-* (`NO_SWIPE`).
-*/
-const Swipe = Mount.defineStream("Swipe", {
-	messages: [
-		SwipeStarted,
-		Swiped,
-		SwipeEnded
-	],
-	args: {
-		/**
-		* The nearest ancestor matching this selector is measured as the swipe
-		* starts, for what the swipe moves (a sheet's panel, dragged by its
-		* handle). Default: the element itself.
-		*/
-		measure: Schema.optional(Schema.String),
-		/**
-		* How far, in pixels, a press must move before it is a swipe. Until
-		* then nothing is captured or reported, so a press that stays put is
-		* still a click on whatever is under it (a tab inside a drag grip).
-		* Default 0: the press itself starts the swipe; with `scrolls`, the
-		* first move decides.
-		*/
-		slop: Schema.optional(Schema.Number),
-		/** The axis the element's content scrolls along, which a touch yields to; see above. */
-		scrolls: Schema.optional(Schema.Literals(["x", "y"])),
-		/** Follows touches alone: a mouse or a pen is left to the page (and to a handle's own Swipe). */
-		touchOnly: Schema.optional(Schema.Boolean)
-	},
-	execute: ({ element, measure, slop = 0, scrolls, touchOnly = false }) => Stream.callback((queue) => Effect.acquireRelease(Effect.sync(() => {
-		const target = element;
-		let active = null;
-		const offer = (fact) => Queue.offerUnsafe(queue, fact);
-		const sampleOf = (at, x = 0, y = 0) => ({
-			at,
-			x,
-			y
-		});
-		const end = (pointerId, last, completed, captured) => {
-			if (active === null || active.pointerId !== pointerId) return;
-			const { samples, started } = active;
-			active = null;
-			if (!started) return;
-			if (captured) try {
-				target.releasePointerCapture?.(pointerId);
-			} catch {}
-			const final = completed ? last : samples.at(-1) ?? last;
-			const all = completed ? [...samples, final] : samples;
-			const start = all[0] ?? final;
-			const velocity = completed ? velocityOf(all) : {
-				x: 0,
-				y: 0
-			};
-			offer(SwipeEnded.make({
-				pointerId,
-				deltaX: final.x - start.x,
-				deltaY: final.y - start.y,
-				velocityX: velocity.x,
-				velocityY: velocity.y,
-				completed
-			}));
-		};
-		const begin = (pointer, capture) => {
-			pointer.started = true;
-			if (capture) try {
-				target.setPointerCapture?.(pointer.pointerId);
-			} catch {}
-			const box = (measure === void 0 ? element : element.closest(measure) ?? element).getBoundingClientRect();
-			offer(SwipeStarted.make({
-				pointerId: pointer.pointerId,
-				pointerType: pointer.pointerType,
-				width: box.width,
-				height: box.height
-			}));
-		};
-		const moved = (pointer, sample) => {
-			const start = pointer.samples[0] ?? sample;
-			pointer.samples = [
-				start,
-				...pointer.samples.slice(1).filter((each) => sample.at - each.at <= 100),
-				sample
-			];
-			offer(Swiped.make({
-				pointerId: pointer.pointerId,
-				deltaX: sample.x - start.x,
-				deltaY: sample.y - start.y
-			}));
-		};
-		const ownTouch = (from) => {
-			if (!(from instanceof Element)) return false;
-			const field = from.closest(NO_SWIPE);
-			if (field !== null && element.contains(field)) return false;
-			for (let at = from; at !== null && at !== element; at = at.parentElement) if (owners.has(at)) return false;
-			return true;
-		};
-		const touchOf = (event, id) => Array.from(event.changedTouches).find((touch) => touch.identifier === id);
-		let touched = null;
-		const pointerListeners = [
-			["pointerdown", (event) => {
-				const pointer = event;
-				const type = pointer.pointerType ?? "mouse";
-				if (scrolls !== void 0 && type === "touch") return;
-				if (touchOnly && type !== "touch") return;
-				if ((pointer.button ?? 0) !== 0 || active !== null) return;
-				active = {
-					pointerId: pointer.pointerId ?? 0,
-					pointerType: type,
-					samples: [sampleOf(pointer.timeStamp, pointer.clientX, pointer.clientY)],
-					started: false
-				};
-				if (slop <= 0) begin(active, true);
-			}],
-			["pointermove", (event) => {
-				const pointer = event;
-				if (active === null || active.pointerId !== (pointer.pointerId ?? 0)) return;
-				const sample = sampleOf(pointer.timeStamp, pointer.clientX, pointer.clientY);
-				if (!active.started) {
-					const start = active.samples[0] ?? sample;
-					if (Math.hypot(sample.x - start.x, sample.y - start.y) < slop) return;
-					begin(active, true);
-				}
-				moved(active, sample);
-			}],
-			...[
-				"pointerup",
-				"pointercancel",
-				"lostpointercapture"
-			].map((type) => [type, (event) => {
-				const pointer = event;
-				if (active?.pointerType === "touch" && scrolls !== void 0) return;
-				end(pointer.pointerId ?? 0, sampleOf(pointer.timeStamp, pointer.clientX, pointer.clientY), type === "pointerup", true);
-			}])
-		];
-		const touchListeners = scrolls === void 0 ? [] : [
-			["touchstart", (event) => {
-				const touches = event;
-				const touch = touches.changedTouches[0];
-				if (active !== null || touches.touches.length !== 1 || touch === void 0) return;
-				if (!ownTouch(touches.target)) return;
-				touched = touches.target;
-				active = {
-					pointerId: touch.identifier,
-					pointerType: "touch",
-					samples: [sampleOf(touches.timeStamp, touch.clientX, touch.clientY)],
-					started: false
-				};
-			}],
-			["touchmove", (event) => {
-				const touches = event;
-				if (active === null) return;
-				const touch = touchOf(touches, active.pointerId);
-				if (touch === void 0) return;
-				const sample = sampleOf(touches.timeStamp, touch.clientX, touch.clientY);
-				if (!active.started) {
-					const start = active.samples[0] ?? sample;
-					const dx = sample.x - start.x;
-					const dy = sample.y - start.y;
-					if (Math.hypot(dx, dy) < Math.max(slop, 1)) return;
-					const along = scrolls === "y" ? dy : dx;
-					if (Math.abs(scrolls === "y" ? dx : dy) > Math.abs(along) || canScroll(touched ?? element, element, scrolls, along) || !touches.cancelable) {
-						active = null;
-						return;
-					}
-					begin(active, false);
-				}
-				touches.preventDefault();
-				moved(active, sample);
-			}],
-			...["touchend", "touchcancel"].map((type) => [type, (event) => {
-				const touches = event;
-				if (active === null) return;
-				const touch = touchOf(touches, active.pointerId);
-				if (touch === void 0) return;
-				end(active.pointerId, sampleOf(touches.timeStamp, touch.clientX, touch.clientY), type === "touchend", false);
-			}])
-		];
-		owners.add(element);
-		for (const [type, listener] of pointerListeners) element.addEventListener(type, listener);
-		for (const [type, listener] of touchListeners) element.addEventListener(type, listener, { passive: false });
-		return {
-			pointerListeners,
-			touchListeners,
-			current: () => active
-		};
-	}), ({ pointerListeners, touchListeners, current }) => Effect.sync(() => {
-		owners.delete(element);
-		for (const [type, listener] of pointerListeners) element.removeEventListener(type, listener);
-		for (const [type, listener] of touchListeners) element.removeEventListener(type, listener);
-		const pointer = current();
-		if (pointer !== null && !(pointer.pointerType === "touch" && scrolls !== void 0)) try {
-			element.releasePointerCapture?.(pointer.pointerId);
-		} catch {}
-	})))
-});
-//#endregion
-//#region src/dom/scroll-settle.ts
-const ScrollSettled = Schema.TaggedStruct("ScrollSettled", { 
-/** The item whose start lies nearest the scroller's start, from 0. */
-index: Schema.Number });
-/** How long a scroll must be still to count as settled, where `scrollend` is missing. */
-const SETTLE_QUIET = 120;
-/**
-* Hears a scroller come to rest, as a Mount: after a swipe, a fling, a
-* trackpad or a scroll a Command made, it reports which of its items starts
-* nearest its own start (inside its `scroll-padding`), the start being the
-* right edge right to left. A snapping carousel reads it as the slide shown.
-*
-* At insert it first scrolls, at once, to item `start` (the Mount's args are
-* read only then, so this is where a redrawn or restored scroller begins),
-* and reports where it lies, since a scroller drawn already at rest sends no
-* `scrollend`. It listens for `scrollend` where the browser has it, and
-* otherwise for a scroll that is quiet for `SETTLE_QUIET` milliseconds.
-*/
-const ScrollSettle = Mount.defineStream("ScrollSettle", {
-	messages: [ScrollSettled],
-	args: {
-		/** Which children are the items; default every child. */
-		item: Schema.optional(Schema.String),
-		/** Default `inline`, the row a carousel scrolls along. */
-		axis: Schema.optional(Schema.Literals(["inline", "block"])),
-		/** The item to scroll to at insert; default the first, which needs no scroll. */
-		start: Schema.optional(Schema.Number)
-	},
-	execute: ({ element, item, axis = "inline", start = 0 }) => Stream.callback((queue) => Effect.acquireRelease(Effect.sync(() => {
-		const items = () => Array.from(item === void 0 ? element.children : element.querySelectorAll(`:scope > ${item}`));
-		/** How far `child`'s start lies past the scroller's start, along the axis. */
-		const offsetOf = (child) => {
-			const style = getComputedStyle(element);
-			const box = element.getBoundingClientRect();
-			const own = child.getBoundingClientRect();
-			if (axis === "block") return own.top - box.top - (parseFloat(style.scrollPaddingBlockStart) || 0);
-			const padding = parseFloat(style.scrollPaddingInlineStart) || 0;
-			return style.direction === "rtl" ? box.right - padding - own.right : own.left - box.left - padding;
-		};
-		const report = () => {
-			let nearest = -1;
-			let distance = Infinity;
-			items().forEach((child, index) => {
-				const away = Math.abs(offsetOf(child));
-				if (away < distance) {
-					nearest = index;
-					distance = away;
-				}
-			});
-			if (nearest >= 0) Queue.offerUnsafe(queue, ScrollSettled.make({ index: nearest }));
-		};
-		const first = items()[start];
-		const before = element.scrollLeft + element.scrollTop;
-		if (start > 0 && first !== void 0) {
-			const by = offsetOf(first);
-			const rtl = axis === "inline" && getComputedStyle(element).direction === "rtl";
-			element.scrollTo(axis === "block" ? {
-				top: element.scrollTop + by,
-				behavior: "instant"
-			} : {
-				left: element.scrollLeft + (rtl ? -by : by),
-				behavior: "instant"
-			});
-		}
-		if (element.scrollLeft + element.scrollTop === before) report();
-		let quiet;
-		const hasEnd = "onscrollend" in element;
-		const listener = hasEnd ? report : () => {
-			clearTimeout(quiet);
-			quiet = setTimeout(report, 120);
-		};
-		const type = hasEnd ? "scrollend" : "scroll";
-		element.addEventListener(type, listener);
-		return () => {
-			clearTimeout(quiet);
-			element.removeEventListener(type, listener);
-		};
-	}), (detach) => Effect.sync(detach)))
-});
-//#endregion
-//#region src/dom/pointer-position.ts
-/**
-* A place in an element's padding box, in CSS pixels from its top left
-* corner, and the pointer's pressure there (0 to 1; a mouse reads 0.5 while
-* a button is down). A captured pointer can be outside the box, so `x` and
-* `y` can be negative or past its size.
-*/
-const PointerPoint = Schema.Struct({
-	x: Schema.Number,
-	y: Schema.Number,
-	pressure: Schema.Number
-});
-/** The padding box's size at the event, in CSS pixels. */
-const Size = {
-	width: Schema.Number,
-	height: Schema.Number
-};
-const PointerPressed = Schema.TaggedStruct("PointerPressed", {
-	...Size,
-	point: PointerPoint,
-	/** `mouse`, `pen` or `touch`, as the browser names it. */
-	pointerType: Schema.String
-});
-const PointerMoved = Schema.TaggedStruct("PointerMoved", {
-	...Size,
-	/** Where the pointer is now. */
-	point: PointerPoint,
-	/**
-	* Every place it passed since the last move, ending with `point`: the
-	* browser's coalesced events, so a fast stroke keeps its curve. Just
-	* `point` where the browser coalesces none.
-	*/
-	points: Schema.Array(PointerPoint)
-});
-const PointerReleased = Schema.TaggedStruct("PointerReleased", { 
-/** `false` when the pointer was cancelled, lost its capture, or pressed again unreleased. */
-completed: Schema.Boolean });
-/**
-* The padding box of an element whose border box is `rect`: inside its
-* border, padding included. An absolutely positioned child (a thumb, a
-* stroke) is laid out against it, so a place read here is where that child
-* sits, whatever padding a stylist adds.
-*/
-const paddingBoxOf = (layout) => {
-	const { rect, border } = layout;
-	return {
-		left: rect.left + border.left,
-		top: rect.top + border.top,
-		width: Math.max(0, rect.width - border.left - border.right),
-		height: Math.max(0, rect.height - border.top - border.bottom)
-	};
-};
-const borderOf = (style) => ({
-	top: parseFloat(style.borderTopWidth),
-	right: parseFloat(style.borderRightWidth),
-	bottom: parseFloat(style.borderBottomWidth),
-	left: parseFloat(style.borderLeftWidth)
-});
-/**
-* An element's padding box now, in the viewport, as `PointerPosition`
-* measures it: for a size kept beside its places, which a `ResizeObserver`'s
-* content box does not match once the element has padding. Read from the
-* bounding rectangle and the computed border, since `clientWidth` and
-* `clientLeft` round to whole pixels.
-*/
-const measurePaddingBox = (element) => paddingBoxOf({
-	rect: element.getBoundingClientRect(),
-	border: borderOf(getComputedStyle(element))
-});
-const pointIn = (box, event) => ({
-	x: event.clientX - box.left,
-	y: event.clientY - box.top,
-	pressure: event.pressure
-});
-/**
-* Where one pointer is inside an element, as a Mount, for a surface the
-* pointer draws on or points into (a color area, a dial, a signature pad): a
-* primary press, each move until the release, and the release, each with
-* the place in the element's padding box and the box's size. The box is
-* measured at each event, so an element that moved or resized is followed.
-* Coordinates are raw, left to right and top down whatever the direction:
-* what a place means (a share, an angle, a reading direction) is the parent's.
-*
-* The pointer is captured from press to release, so a drag that leaves the
-* element is still heard, and the moves and the release are listened to only
-* meanwhile. A press keeps the browser's own focus and text selection away,
-* and a second pointer while one is down is ignored.
-*/
-const PointerPosition = Mount.defineStream("PointerPosition", {
-	messages: [
-		PointerPressed,
-		PointerMoved,
-		PointerReleased
-	],
-	args: { 
-	/**
-	* A descendant to focus on a press, found by this selector (a thumb), so
-	* the keys go on from where the pointer left it.
-	*/
-focus: Schema.optionalKey(Schema.String) },
-	execute: ({ element, focus }) => Stream.callback((queue) => Effect.acquireRelease(Effect.sync(() => {
-		const offer = (fact) => Queue.offerUnsafe(queue, fact);
-		let held = Option.none();
-		const ours = (event) => event instanceof PointerEvent && Option.contains(held, event.pointerId);
-		const release = () => {
-			if (Option.isNone(held)) return;
-			const pointerId = held.value;
-			held = Option.none();
-			for (const [type, listener] of during) element.removeEventListener(type, listener);
-			try {
-				element.releasePointerCapture(pointerId);
-			} catch {}
-		};
-		const end = (completed) => (event) => {
-			if (!ours(event)) return;
-			release();
-			offer(PointerReleased.make({ completed }));
-		};
-		const move = (event) => {
-			if (!ours(event)) return;
-			const box = measurePaddingBox(element);
-			const point = pointIn(box, event);
-			const coalesced = event.getCoalescedEvents?.() ?? [];
-			offer(PointerMoved.make({
-				width: box.width,
-				height: box.height,
-				point,
-				points: coalesced.length > 0 ? coalesced.map((one) => pointIn(box, one)) : [point]
-			}));
-		};
-		const during = [
-			["pointermove", move],
-			["pointerup", end(true)],
-			["pointercancel", end(false)],
-			["lostpointercapture", end(false)]
-		];
-		const down = (event) => {
-			if (!(event instanceof PointerEvent) || event.button !== 0) return;
-			if (Option.isSome(held)) {
-				if (!ours(event)) return;
-				release();
-				offer(PointerReleased.make({ completed: false }));
-			}
-			held = Option.some(event.pointerId);
-			for (const [type, listener] of during) element.addEventListener(type, listener);
-			try {
-				element.setPointerCapture(event.pointerId);
-			} catch {}
-			event.preventDefault();
-			if (focus !== void 0) {
-				const into = element.querySelector(focus);
-				if (into instanceof HTMLElement) into.focus();
-			}
-			const box = measurePaddingBox(element);
-			offer(PointerPressed.make({
-				width: box.width,
-				height: box.height,
-				point: pointIn(box, event),
-				pointerType: event.pointerType
-			}));
-		};
-		element.addEventListener("pointerdown", down);
-		return () => {
-			element.removeEventListener("pointerdown", down);
-			release();
-		};
-	}), (stop) => Effect.sync(stop)))
-});
-//#endregion
-//#region src/dom/track-box.ts
-/** The attribute on the mounted element naming the element `TrackBox` follows, by id. */
-const TRACK_TARGET_ATTRIBUTE = "data-target";
-/** The custom properties `TrackBox` writes for `name`, as `measured` names `Measure`'s. */
-const trackedBox = (name) => ({
-	x: `--fk-${name}-x`,
-	y: `--fk-${name}-y`,
-	w: `--fk-${name}-w`,
-	h: `--fk-${name}-h`,
-	radius: `--fk-${name}-radius`
-});
-/** Sent as the followed element changes: its id, and whether it is on the page. */
-const TrackedTarget = Schema.TaggedStruct("TrackedTarget", {
-	target: Schema.String,
-	found: Schema.Boolean
-});
-/**
-* The radius a box of `width` by `height` draws for a computed
-* `border-top-left-radius` of `value` (`8px`, `50%`, `8px 4px`): its
-* horizontal length in pixels, a share of the width for a percentage, and
-* never more than half the shorter side, where the browser stops it.
-*/
-const cornerRadius = (value, width, height) => {
-	const first = value.trim().split(/\s+/)[0] ?? "";
-	const length = parseFloat(first);
-	if (!Number.isFinite(length)) return 0;
-	const pixels = first.endsWith("%") ? length * width / 100 : length;
-	return Math.max(0, Math.min(pixels, width / 2, height / 2));
-};
-/**
-* Follows another element's box, as a Mount: the element whose id is the
-* mounted element's `data-target` (`TRACK_TARGET_ATTRIBUTE`). Its box in
-* viewport pixels is written on the mounted element as `--fk-<name>-x`,
-* `-y`, `-w` and `-h`, and with `radius`, its top left corner's radius as
-* `--fk-<name>-radius` (`cornerRadius`), so a fixed overlay drawn from them
-* (a tour's cutout, a coach mark's ring) sits over it. While nothing is
-* followed they are removed, so a stylist's fallbacks apply.
-*
-* The box is read again on a scroll anywhere (heard on the way down, since
-* `scroll` does not bubble), a window resize, the followed element's own
-* resize, and any change to the document's elements, which is also how a
-* target drawn anew under the same id is found. `data-target` is read again
-* whenever it changes, so one element can glide from target to target
-* without being drawn again, which a Mount's args, read once, could not do.
-* What moves the target by any other way (a stylesheet added) is seen at the
-* next of these.
-*
-* Whether a target is on the page is the parent's to act on (a tour shows
-* the step in the middle instead), so each change of the target or of
-* whether it is found sends `TrackedTarget`, starting with the first one.
-* Since it sends a Message, a component may draw it by default: a Scene test
-* resolves it with what the parent maps it to. An empty `data-target` follows
-* nothing and sends nothing.
-*/
-const TrackBox = Mount.defineStream("TrackBox", {
-	messages: [TrackedTarget],
-	args: {
-		/** The custom properties' prefix: `tour` writes `--fk-tour-x`. */
-		name: Schema.String,
-		/** Whether to write the target's corner radius too; it reads the target's computed style. */
-		radius: Schema.optional(Schema.Boolean)
-	},
-	execute: ({ element, name, radius = false }) => Stream.callback((queue) => Effect.acquireRelease(Effect.sync(() => {
-		const document = element.ownerDocument;
-		const view = document.defaultView;
-		const properties = trackedBox(name);
-		const style = element instanceof HTMLElement ? element.style : void 0;
-		let target = null;
-		let told;
-		const place = () => {
-			if (style === void 0) return;
-			if (target === null) {
-				for (const property of Object.values(properties)) style.removeProperty(property);
-				return;
-			}
-			const box = target.getBoundingClientRect();
-			style.setProperty(properties.x, `${box.left}px`);
-			style.setProperty(properties.y, `${box.top}px`);
-			style.setProperty(properties.w, `${box.width}px`);
-			style.setProperty(properties.h, `${box.height}px`);
-			if (radius) {
-				const corner = getComputedStyle(target).borderTopLeftRadius;
-				style.setProperty(properties.radius, `${cornerRadius(corner, box.width, box.height)}px`);
-			}
-		};
-		const follow = () => {
-			const id = element.getAttribute("data-target") ?? "";
-			const found = id === "" ? null : document.getElementById(id);
-			if (found !== target) {
-				if (target !== null) resized.unobserve(target);
-				if (found !== null) resized.observe(found);
-				target = found;
-			}
-			place();
-			if (id !== "" && (told?.target !== id || told.found !== (found !== null))) {
-				told = TrackedTarget.make({
-					target: id,
-					found: found !== null
-				});
-				Queue.offerUnsafe(queue, told);
-			}
-		};
-		const resized = new ResizeObserver(place);
-		const changed = new MutationObserver(follow);
-		changed.observe(element, {
-			attributes: true,
-			attributeFilter: [TRACK_TARGET_ATTRIBUTE]
-		});
-		changed.observe(document, {
-			childList: true,
-			subtree: true
-		});
-		view?.addEventListener("scroll", place, {
-			capture: true,
-			passive: true
-		});
-		view?.addEventListener("resize", place);
-		follow();
-		return () => {
-			changed.disconnect();
-			resized.disconnect();
-			view?.removeEventListener("scroll", place, { capture: true });
-			view?.removeEventListener("resize", place);
-		};
-	}), (stop) => Effect.sync(stop)))
-});
-//#endregion
-//#region src/dom/image-decode.ts
-/**
-* An image fetched and decoded before it is shown, as a Command: a lightbox
-* or a carousel asks for the next picture, and shows it on `Decoded`, so the
-* switch never passes through a blank frame. A Command, not a Mount: the
-* Model decides to show the image, so the Message that leads there carries
-* the news that it is ready.
-*/
-const ImageDecodeMessage = defineMessageUnion({
-	Decoded: { src: Schema.String },
-	DecodeFailed: {
-		src: Schema.String,
-		message: Schema.String
-	}
-});
-/**
-* Fetches and decodes `source` (`img.decode()`), yielding `Decoded` once it
-* can be painted at once, or `DecodeFailed` when it cannot be fetched or read,
-* or there is no document (a server render). Given `srcset` and `sizes`, as
-* `foldkit-media`'s `Picture.Img` has them, the browser picks the candidate
-* it would draw, so the decoded file is the one shown.
-*/
-const decodeImage = (source) => ({
-	name: "Image.decode",
-	args: { src: source.src },
-	effect: typeof document === "undefined" ? Effect.succeed(ImageDecodeMessage.DecodeFailed({
-		src: source.src,
-		message: "there is no document"
-	})) : Effect.matchEffect(Effect.tryPromise({
-		try: () => {
-			const image = new Image();
-			if (source.sizes !== void 0) image.sizes = source.sizes;
-			if (source.srcset !== void 0) image.srcset = source.srcset;
-			image.src = source.src;
-			return image.decode();
-		},
-		catch: (error) => error instanceof Error ? error.message : String(error)
-	}), {
-		onFailure: (message) => Effect.succeed(ImageDecodeMessage.DecodeFailed({
-			src: source.src,
-			message
-		})),
-		onSuccess: () => Effect.succeed(ImageDecodeMessage.Decoded({ src: source.src }))
-	})
-});
-//#endregion
-export { Autofocus, ClipboardMessage, ClipboardReadMessage, DRAG_THRESHOLD, DragCancelled, DragDropped, DragPlace, DragStarted, DragZone, DraggedOver, EditAsked, EditableText, FLUID_HELD_ATTRIBUTE, FLUID_HOVER_ATTRIBUTE, FLUID_LIT_ATTRIBUTE, FLUID_PRESS_ATTRIBUTE, FluidHover, FocusScope, Focused, FollowTabStop, HOLD_SLOP, HOLD_TO_DRAG_MS, HideOutside, ImageDecodeMessage, Input, InputMask, KEYBOARD_INSET, KeepInView, KeyboardInset, Measure, Move, MoveEnded, MoveStarted, Moved, NO_SWIPE, PointerDrag, PointerMoved, PointerPoint, PointerPosition, PointerPressed, PointerReleased, SCROLL_BAR_ATTRIBUTE, SCROLL_OVERLAID_ATTRIBUTE, SETTLE_QUIET, SWIPE_WINDOW, ScriptMessage, ScrollBars, ScrollLock, ScrollSettle, ScrollSettled, ShareData, ShareMessage, Swipe, SwipeEnded, SwipeStarted, Swiped, TRACK_TARGET_ATTRIBUTE, TargetHovered, TargetPressed, Targets, TextCancelled, TextCommitted, TextEdited, TrackBox, TrackedTarget, applyMask, boxOf, canScroll, copyText, cornerRadius, decodeImage, fluidHovered, keepScroll, keyboardInset, loadScript, measurePaddingBox, measured, paddingBoxOf, pointedLinks, readText, scrollThumb, share, tabbableWithin, targetOf, textOf, trackedBox, velocityOf, zoneOf };
-
-//# sourceMappingURL=index.mjs.map