foldkit-primitives 0.10.2 → 0.11.0

package/dist/dom/index.mjs

@@ -545,6 +545,1049 @@ const pointedLinks = () => {
 	})).pipe(Stream.changesWith((a, b) => toString(a) === toString(b)));
 };
 //#endregion
-export { Autofocus, ClipboardMessage, ClipboardReadMessage, DRAG_THRESHOLD, DragCancelled, DragDropped, DragPlace, DragStarted, DragZone, DraggedOver, EditAsked, EditableText, FocusScope, Focused, FollowTabStop, HideOutside, Input, InputMask, KeepInView, Measure, Move, MoveEnded, MoveStarted, Moved, PointerDrag, ScriptMessage, ScrollLock, ShareData, ShareMessage, TargetHovered, TargetPressed, Targets, TextCancelled, TextCommitted, TextEdited, applyMask, boxOf, copyText, keepScroll, loadScript, measured, pointedLinks, readText, share, tabbableWithin, targetOf, textOf, zoneOf };
+//#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";
+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; 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).
+*
+* `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)
+	},
+	execute: ({ element, name, item: selector, axis, gapClick, gapReach, follows, from }) => 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");
+			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;
+			if (!keyed()) hide();
+		};
+		const focus = (event) => {
+			if (!(event.target instanceof Element) || !event.target.matches(":focus-visible")) return;
+			const owner = event.target.closest(selector);
+			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 click = (event) => {
+			if (!gapClick || active === null) return;
+			if (container.style.getPropertyValue(property.shown) !== "1") return;
+			const target = event.target;
+			if (!(target instanceof Element) || target.closest(selector) !== null) return;
+			const reach = distance(active.getBoundingClientRect(), event.clientX, event.clientY, "xy");
+			if (gapReach !== void 0 && reach > gapReach) return;
+			const press = active.querySelector(`[data-fluid-press]`) ?? active;
+			if (press instanceof HTMLElement) press.click();
+		};
+		const soon = () => {
+			if (active !== null) requestAnimationFrame(() => place());
+		};
+		/** 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("pointerleave", leave);
+		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);
+			light(null);
+			container.removeEventListener("pointermove", move);
+			container.removeEventListener("pointerleave", leave);
+			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/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;
+/**
+* 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
+	};
+};
+/**
+* `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 captures the pointer, each move reports the delta from where it
+* started, 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.
+*/
+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) },
+	execute: ({ element, measure }) => Stream.callback((queue) => Effect.acquireRelease(Effect.sync(() => {
+		const target = element;
+		let active = null;
+		const offer = (fact) => Queue.offerUnsafe(queue, fact);
+		const sampleOf = (event) => ({
+			at: event.timeStamp,
+			x: event.clientX ?? 0,
+			y: event.clientY ?? 0
+		});
+		const end = (event, completed) => {
+			const pointerId = event.pointerId ?? 0;
+			if (active === null || active.pointerId !== pointerId) return;
+			const { samples } = active;
+			active = null;
+			try {
+				target.releasePointerCapture?.(pointerId);
+			} catch {}
+			const last = completed ? sampleOf(event) : samples.at(-1) ?? sampleOf(event);
+			const all = completed ? [...samples, last] : samples;
+			const start = all[0] ?? last;
+			const velocity = completed ? velocityOf(all) : {
+				x: 0,
+				y: 0
+			};
+			offer(SwipeEnded.make({
+				pointerId,
+				deltaX: last.x - start.x,
+				deltaY: last.y - start.y,
+				velocityX: velocity.x,
+				velocityY: velocity.y,
+				completed
+			}));
+		};
+		const listeners = [
+			["pointerdown", (event) => {
+				const pointer = event;
+				if ((pointer.button ?? 0) !== 0 || active !== null) return;
+				const pointerId = pointer.pointerId ?? 0;
+				active = {
+					pointerId,
+					samples: [sampleOf(pointer)]
+				};
+				try {
+					target.setPointerCapture?.(pointerId);
+				} catch {}
+				const box = (measure === void 0 ? element : element.closest(measure) ?? element).getBoundingClientRect();
+				offer(SwipeStarted.make({
+					pointerId,
+					pointerType: pointer.pointerType ?? "mouse",
+					width: box.width,
+					height: box.height
+				}));
+			}],
+			["pointermove", (event) => {
+				const pointer = event;
+				const pointerId = pointer.pointerId ?? 0;
+				if (active === null || active.pointerId !== pointerId) return;
+				const sample = sampleOf(pointer);
+				const start = active.samples[0] ?? sample;
+				active.samples = [
+					start,
+					...active.samples.slice(1).filter((each) => sample.at - each.at <= 100),
+					sample
+				];
+				offer(Swiped.make({
+					pointerId,
+					deltaX: sample.x - start.x,
+					deltaY: sample.y - start.y
+				}));
+			}],
+			["pointerup", (event) => end(event, true)],
+			["pointercancel", (event) => end(event, false)],
+			["lostpointercapture", (event) => end(event, false)]
+		];
+		for (const [type, listener] of listeners) element.addEventListener(type, listener);
+		return {
+			listeners,
+			current: () => active
+		};
+	}), ({ listeners, current }) => Effect.sync(() => {
+		for (const [type, listener] of listeners) element.removeEventListener(type, listener);
+		const pointer = current();
+		if (pointer !== null) 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
+export { Autofocus, ClipboardMessage, ClipboardReadMessage, DRAG_THRESHOLD, DragCancelled, DragDropped, DragPlace, DragStarted, DragZone, DraggedOver, EditAsked, EditableText, FLUID_HOVER_ATTRIBUTE, FLUID_LIT_ATTRIBUTE, FLUID_PRESS_ATTRIBUTE, FluidHover, FocusScope, Focused, FollowTabStop, HideOutside, Input, InputMask, KeepInView, Measure, Move, MoveEnded, MoveStarted, Moved, 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, copyText, cornerRadius, fluidHovered, keepScroll, loadScript, measurePaddingBox, measured, paddingBoxOf, pointedLinks, readText, scrollThumb, share, tabbableWithin, targetOf, textOf, trackedBox, velocityOf, zoneOf };
 
 //# sourceMappingURL=index.mjs.map