@moku-labs/game 0.15.7 → 0.15.9

package/dist/{src-nJYt0LMr.mjs → src-Cs1bP3v7.mjs}

@@ -2,7 +2,7 @@ import { t as __exportAll } from "./rolldown-runtime-8H4AJuhK.mjs";
 import { r as systemSource, t as memory } from "./memory-CWlqhS7l.mjs";
 import { a as finishDrafts, i as enableDraftPatches, n as deepFreeze$1, o as openDrafts, r as dropDrafts } from "./drafts-BawpSaVp.mjs";
 import { d as graphHash, f as isRestCheckpoint, h as pushEntry, i as servePaused, l as findNode, m as compact, n as captureFrame, o as collectFlows, p as slotNames, r as serveCaptures, s as describeGraph, t as cancelCaptures, u as framePath } from "./capture-D7XvoHdH.mjs";
-import { A as Order, C as Sprite, D as Exiting, F as system, I as systemsFor, L as tag, M as component, O as Layer, P as resource, S as Shape, T as componentsFor, _ as HudPart, b as OverlayLevel, c as Countdown, d as builtInStyles, g as Display, h as textFor, i as samePose, j as Tree, k as Now, l as Text, m as readStyle, n as drawnRect, o as visualOf$1, r as fitScaleOf, s as visualRectOf, t as CONTENT$1, v as NineSlice, w as Transform, x as Parent, y as Overlay } from "./visual-2m4wJL_z.mjs";
+import { A as Now, C as Sprite, E as componentsFor, F as resource, I as system, L as systemsFor, M as Tree, N as component, O as Exiting, R as tag, S as Shape, T as arcDefaults, _ as HudPart, b as OverlayLevel, c as Countdown, d as builtInStyles, g as Display, h as textFor, i as samePose, j as Order, k as Layer, l as Text, m as readStyle, n as drawnRect, o as visualOf$1, r as fitScaleOf, s as visualRectOf, t as CONTENT$1, v as NineSlice, w as Transform, x as Parent, y as Overlay } from "./visual-CIUx49C0.mjs";
 import { a as isDev } from "./dev-BNndV-hU.mjs";
 import { i as isComponentDefinition, n as flatten, r as defineComponent } from "./flatten-BkXuscAV.mjs";
 import { envPlugin, logPlugin } from "@moku-labs/common/browser";
@@ -3337,7 +3337,7 @@ function deliver$1(state, answer) {
 * @param ctx - Domain context of the flow plugin.
 * @param answer - The answer the closed gate refused.
 */
-function hold(ctx, answer) {
+function hold$1(ctx, answer) {
 	if (ctx.state.fx.mode === "fast") return;
 	if (!ctx.deps.time.isRunning()) return;
 	if (ctx.config.holdMs <= 0 && ctx.state.gate.held !== void 0) return;
@@ -3376,7 +3376,7 @@ function createGateApi(ctx) {
 	return {
 		answer: (answer) => {
 			if (ctx.state.gate.open === void 0) {
-				hold(ctx, answer);
+				hold$1(ctx, answer);
 				return false;
 			}
 			if (!accepts(ctx.state.gate, answer)) return false;
@@ -5506,7 +5506,7 @@ function startDeadline(timeoutMs) {
 * @param running - The promise of `run()`.
 * @returns `true` when the loop settled, `false` when the deadline won and the loop still runs.
 */
-async function settle$1(ctx, running) {
+async function settle$2(ctx, running) {
 	const quiet = running.then(noop, noop);
 	const deadline = startDeadline(ctx.config.settleTimeoutMs);
 	try {
@@ -5535,7 +5535,7 @@ async function stopRunner(ctx) {
 		stop.abort("stop");
 		state.abort = stop;
 	}
-	const settled = running === void 0 || await settle$1(ctx, running);
+	const settled = running === void 0 || await settle$2(ctx, running);
 	state.running = void 0;
 	ctx.state.gate.held = void 0;
 	if (settled) state.abort = void 0;
@@ -24372,7 +24372,7 @@ function destroyPools(state) {
 * view with `applyPose`.
 */
 /** How deep a parent chain is followed; deeper is treated as a loop. */
-const MAX_DEPTH$5 = 32;
+const MAX_DEPTH$6 = 32;
 /**
 * The parent an entity moves with.
 *
@@ -24394,7 +24394,7 @@ function parentOf$1(ecs, entity) {
 */
 function isLeaving(ecs, entity) {
 	let current = entity;
-	for (let depth = 0; depth < MAX_DEPTH$5 && current !== 0; depth += 1) {
+	for (let depth = 0; depth < MAX_DEPTH$6 && current !== 0; depth += 1) {
 		if (ecs.has(current, Exiting)) return true;
 		current = parentOf$1(ecs, current);
 	}
@@ -24500,7 +24500,7 @@ function rootPoseInto(ecs, entity, out, own) {
 	out.pivot.x = start.pivot.x;
 	out.pivot.y = start.pivot.y;
 	let current = entity;
-	for (let depth = 0; depth < MAX_DEPTH$5; depth += 1) {
+	for (let depth = 0; depth < MAX_DEPTH$6; depth += 1) {
 		const parent = parentOf$1(ecs, current);
 		if (parent === 0) break;
 		const above = ecs.get(parent, Transform) ?? Transform.defaults;
@@ -24841,7 +24841,7 @@ const RETAKE_STREAK = 3;
 /** Frames in a row with no mark in it before a live range is kept as a picture again (spec 23's `CALM_AFTER`). */
 const CALM_FRAMES = 8;
 /** How deep a walk up the tree goes. */
-const MAX_DEPTH$4 = 32;
+const MAX_DEPTH$5 = 32;
 /** CSS px a view may fall short of the viewport frame and still cover it: the reference frame rounds by a fraction. */
 const COVER_SLACK = 1;
 /** The whole-frame reasons after which a kept picture is taken again: the screen changed whole. */
@@ -25005,7 +25005,7 @@ function sameList$1(left, right) {
 */
 function inRange(set, node, root) {
 	let current = node;
-	for (let depth = 0; depth < MAX_DEPTH$4 && current !== null && current !== root; depth += 1) {
+	for (let depth = 0; depth < MAX_DEPTH$5 && current !== null && current !== root; depth += 1) {
 		if (set.has(current)) return true;
 		current = current.parent;
 	}
@@ -25527,10 +25527,22 @@ function stopOverlays(state) {
 }
 //#endregion
 //#region src/plugins/renderer/sync/shape-path.ts
+/**
+* @file renderer/sync — the path of a `Shape`: a rectangle, a rounded rectangle or a triangle,
+* its fill, and its stroke, solid or dashed, or an arc, a stroke alone. A dashed stroke walks the
+* outline (straight edges, and rounded corners sampled as arcs) and strokes one open line per dash.
+* An arc runs on the circle inscribed in its box, from 12 o'clock clockwise.
+*/
 /** Chords per rounded corner of a dashed outline: under 0.3 u off the arc at a 48 u radius. */
 const CORNER_SAMPLES = 8;
 /** The gap between two dashes, as a fraction of the dash length. */
 const GAP_RATIO = .5;
+/** Segments of a full ring: a ring of 28 u across strays under 0.03 u off its circle. */
+const RING_SEGMENTS = 48;
+/** The fewest segments of an arc that draws: a sliver still bends. */
+const ARC_MIN_SEGMENTS = 2;
+/** 12 o'clock, where an arc starts: Pixi's angles run clockwise from 3 o'clock. */
+const TWELVE = -Math.PI / 2;
 /**
 * The corner radius the rectangle is drawn with: Pixi clamps it to half the shorter side.
 *
@@ -25715,8 +25727,9 @@ function dashesOf(outline, dash) {
 }
 /**
 * Draws the path of a shape and fills it in a colour at the alpha given. At alpha 0 the path stays unfilled, so only
-* a stroke shows. A clip mask is drawn here too, never dashed. A fill-only shape is drawn white and coloured by the
-* object's tint, so a colour change draws no path (spec 26 R2.1).
+* a stroke shows. A clip mask is drawn here too, never dashed; the path of an arc here is its box, which is what it
+* clips its children to. A fill-only shape is drawn white and coloured by the object's tint, so a colour change draws
+* no path (spec 26 R2.1).
 *
 * @param object - The graphics to draw on.
 * @param value - The shape value.
@@ -25726,7 +25739,7 @@ function dashesOf(outline, dash) {
 function drawShapePath(object, value, fillAlpha, color = value.fill) {
 	object.clear();
 	if (value.kind === "triangle") object.moveTo(0, 0).lineTo(value.w, value.h / 2).lineTo(0, value.h).closePath();
-	else if (value.radius > 0) object.roundRect(0, 0, value.w, value.h, value.radius);
+	else if (value.kind === "rect" && value.radius > 0) object.roundRect(0, 0, value.w, value.h, value.radius);
 	else object.rect(0, 0, value.w, value.h);
 	if (fillAlpha <= 0) return;
 	object.fill(fillAlpha < 1 ? {
@@ -25759,6 +25772,102 @@ function strokeShape(object, value) {
 	}
 	object.stroke(style);
 }
+/**
+* The share of the circle an arc sweeps, clamped to 0..1: anything not above 0, `NaN` too, is 0; a whole ring when
+* the value leaves it out.
+*
+* @param value - The shape value.
+* @returns The share.
+* @example
+* ```ts
+* sweepOf({ ...Shape.defaults, kind: "arc", sweep: 1.4 }); // 1
+* ```
+*/
+function sweepOf(value) {
+	const sweep = value.sweep ?? arcDefaults.sweep;
+	if (Number.isNaN(sweep) || sweep <= 0) return 0;
+	return Math.min(sweep, 1);
+}
+/**
+* The radius of the circle an arc runs on: inscribed in the shorter side of its box, inside its stroke.
+*
+* @param value - The shape value.
+* @returns The radius in reference units; 0 or below when the stroke leaves no circle.
+* @example
+* ```ts
+* arcRadiusOf({ ...Shape.defaults, kind: "arc", w: 28, h: 40, strokeWidth: 2 }); // 13
+* ```
+*/
+function arcRadiusOf(value) {
+	return (Math.min(value.w, value.h) - value.strokeWidth) / 2;
+}
+/**
+* Tells whether an arc draws nothing: no stroke width, no sweep, or no circle inside its stroke.
+*
+* @param value - The shape value, an arc.
+* @returns True for an arc whose `Graphics` would hold no instruction.
+* @example
+* ```ts
+* isEmptyArc({ ...Shape.defaults, kind: "arc", w: 28, h: 28, strokeWidth: 2, sweep: 0 }); // true
+* ```
+*/
+function isEmptyArc(value) {
+	return value.strokeWidth <= 0 || sweepOf(value) <= 0 || arcRadiusOf(value) <= 0;
+}
+/**
+* Strokes an arc: from 12 o'clock clockwise over its share of the circle, in segments as many as its angle needs (48
+* for a ring, at least 2), ended by its `cap`. A full ring is closed and has no ends. Nothing for an empty arc. Drawn
+* only when the shape changed: never rebuilt per frame.
+*
+* @param object - The graphics, cleared.
+* @param value - The shape value, an arc.
+*/
+function strokeArc(object, value) {
+	if (isEmptyArc(value)) return;
+	const sweep = sweepOf(value);
+	const radius = arcRadiusOf(value);
+	const ring = sweep >= 1;
+	const segments = Math.max(ARC_MIN_SEGMENTS, Math.ceil(sweep * RING_SEGMENTS));
+	const step = sweep * 2 * Math.PI / segments;
+	const centreX = value.w / 2;
+	const centreY = value.h / 2;
+	const last = ring ? segments - 1 : segments;
+	object.moveTo(centreX, centreY - radius);
+	for (let index = 1; index <= last; index += 1) {
+		const angle = TWELVE + index * step;
+		object.lineTo(centreX + radius * Math.cos(angle), centreY + radius * Math.sin(angle));
+	}
+	if (ring) {
+		object.closePath();
+		object.stroke({
+			color: value.stroke,
+			width: value.strokeWidth
+		});
+		return;
+	}
+	object.stroke({
+		color: value.stroke,
+		width: value.strokeWidth,
+		cap: value.cap ?? arcDefaults.cap
+	});
+}
+/**
+* Paints a shape on its graphics: an arc as its stroke alone, every other kind as its path, its fill in a colour at its
+* own fill alpha, and its stroke. The one call that draws a shape's visual.
+*
+* @param object - The graphics.
+* @param value - The shape value.
+* @param color - The colour of the fill: white for a tinted shape, the value's own otherwise.
+*/
+function paintShape(object, value, color) {
+	if (value.kind === "arc") {
+		object.clear();
+		strokeArc(object, value);
+		return;
+	}
+	drawShapePath(object, value, value.fillAlpha, color);
+	strokeShape(object, value);
+}
 //#endregion
 //#region src/plugins/renderer/sync/sizing.ts
 /**
@@ -26738,8 +26847,20 @@ function copyClip(drawn, value) {
 	return drawn;
 }
 /**
+* Tells whether an arc was drawn with this value already: only what its stroke is built from, its
+* box, its stroke, its share and its ends. A new fill, fill alpha, radius or dash builds nothing.
+*
+* @param drawn - What the graphics was last drawn with, an arc too.
+* @param value - The arc now.
+* @returns True when nothing has to be drawn.
+*/
+function sameArc(drawn, value) {
+	return drawn.w === value.w && drawn.h === value.h && drawn.stroke === value.stroke && drawn.strokeWidth === value.strokeWidth && drawn.sweep === value.sweep && drawn.cap === value.cap;
+}
+/**
 * Tells whether a shape's graphics was drawn with this value already: the path, the fill and the
-* stroke. Its alpha, its clip and the fill of a tinted shape (its tint) are written apart.
+* stroke; for an arc only its stroke. Its alpha, its clip and the fill of a tinted shape (its tint)
+* are written apart.
 *
 * @param drawn - What the graphics was last drawn with.
 * @param value - The shape value now.
@@ -26747,7 +26868,9 @@ function copyClip(drawn, value) {
 * @returns True when nothing has to be drawn.
 */
 function sameShape$1(drawn, value, tinted) {
-	return drawn !== void 0 && drawn.tinted === tinted && (tinted || drawn.fill === value.fill) && drawn.kind === value.kind && drawn.w === value.w && drawn.h === value.h && drawn.fillAlpha === value.fillAlpha && drawn.radius === value.radius && drawn.stroke === value.stroke && drawn.strokeWidth === value.strokeWidth && drawn.dash === value.dash;
+	if (drawn === void 0 || drawn.tinted !== tinted || drawn.kind !== value.kind) return false;
+	if (value.kind === "arc") return sameArc(drawn, value);
+	return (tinted || drawn.fill === value.fill) && drawn.w === value.w && drawn.h === value.h && drawn.fillAlpha === value.fillAlpha && drawn.radius === value.radius && drawn.stroke === value.stroke && drawn.strokeWidth === value.strokeWidth && drawn.dash === value.dash && drawn.sweep === value.sweep && drawn.cap === value.cap;
 }
 /**
 * Keeps what a shape's graphics was drawn with, in the object it had, or in a new one the first
@@ -26760,7 +26883,7 @@ function sameShape$1(drawn, value, tinted) {
 */
 function copyShape(drawn, value, tinted) {
 	if (drawn === void 0) {
-		const { kind, w, h, fill, fillAlpha, radius, stroke, strokeWidth, dash } = value;
+		const { kind, w, h, fill, fillAlpha, radius, stroke, strokeWidth, dash, sweep, cap } = value;
 		return {
 			tinted,
 			kind,
@@ -26771,7 +26894,9 @@ function copyShape(drawn, value, tinted) {
 			radius,
 			stroke,
 			strokeWidth,
-			dash
+			dash,
+			sweep,
+			cap
 		};
 	}
 	const copy = drawn;
@@ -26785,10 +26910,13 @@ function copyShape(drawn, value, tinted) {
 	copy.stroke = value.stroke;
 	copy.strokeWidth = value.strokeWidth;
 	copy.dash = value.dash;
+	copy.sweep = value.sweep;
+	copy.cap = value.cap;
 	return copy;
 }
 /**
-* Tells whether a shape draws nothing: no stroke, and no fill alpha or no area. Pure.
+* Tells whether a shape draws nothing: no stroke, and no fill alpha or no area; an arc with no stroke, no sweep or no
+* circle inside its stroke. Pure.
 *
 * @param value - The shape value.
 * @returns True for a shape whose `Graphics` would hold no instruction.
@@ -26798,6 +26926,7 @@ function copyShape(drawn, value, tinted) {
 * ```
 */
 function isEmptyShape(value) {
+	if (value.kind === "arc") return isEmptyArc(value);
 	return value.strokeWidth <= 0 && (value.fillAlpha <= 0 || value.w <= 0 || value.h <= 0);
 }
 /**
@@ -26815,8 +26944,7 @@ function drawShape(sctx, entity, view, object, value) {
 	const tinted = value.strokeWidth <= 0;
 	if (!sameShape$1(view.drawn, value, tinted)) {
 		markView(sctx, entity);
-		drawShapePath(object, value, value.fillAlpha, tinted ? WHITE$1 : value.fill);
-		strokeShape(object, value);
+		paintShape(object, value, tinted ? WHITE$1 : value.fill);
 		sctx.ctx.state.sync.redraws += 1;
 		view.drawn = copyShape(view.drawn, value, tinted);
 	}
@@ -27963,7 +28091,7 @@ function installPassCounting(pixi, sinks) {
 //#endregion
 //#region src/plugins/renderer/sync/hit-test.ts
 /** How deep a parent chain or a container tree is followed. */
-const MAX_DEPTH$3 = 32;
+const MAX_DEPTH$4 = 32;
 /** Below this effective alpha a view is treated as not there. */
 const MIN_ALPHA = .01;
 /**
@@ -28045,7 +28173,7 @@ function clipBoxOf(sctx, entity) {
 function clippedOut(sctx, entity, x, y) {
 	const ecs = sctx.ctx.deps.world.ecs;
 	let current = parentOf$1(ecs, entity);
-	for (let depth = 0; depth < MAX_DEPTH$3 && current !== 0; depth += 1) {
+	for (let depth = 0; depth < MAX_DEPTH$4 && current !== 0; depth += 1) {
 		const box = clipBoxOf(sctx, current);
 		if (box !== void 0 && !inBox(box, localPoint(sctx, current, x, y))) return true;
 		current = parentOf$1(ecs, current);
@@ -28064,7 +28192,7 @@ function clippedOut(sctx, entity, x, y) {
 function effectiveAlpha(object, root, off) {
 	let alpha = 1;
 	let current = object;
-	for (let depth = 0; depth < MAX_DEPTH$3 && current !== void 0; depth += 1) {
+	for (let depth = 0; depth < MAX_DEPTH$4 && current !== void 0; depth += 1) {
 		if (current === root) return alpha;
 		if (!current.visible || off?.has(current) === true) return 0;
 		alpha *= current.alpha;
@@ -28094,7 +28222,7 @@ function isShown$1(object, root, off) {
 * @returns The same array.
 */
 function topFirst(container, out, depth = 0) {
-	if (depth >= MAX_DEPTH$3) return out;
+	if (depth >= MAX_DEPTH$4) return out;
 	const ordered = container.children.toSorted((left, right) => left.zIndex - right.zIndex);
 	for (let index = ordered.length - 1; index >= 0; index -= 1) {
 		const child = ordered[index];
@@ -28183,7 +28311,7 @@ function hitAll(sctx, x, y) {
 * hit test walks, so a box the doors report is the box a click reaches.
 */
 /** How deep a parent chain is followed; deeper is treated as a loop. */
-const MAX_DEPTH$2 = 32;
+const MAX_DEPTH$3 = 32;
 /**
 * The four corners of a box, clockwise from the top-left one.
 *
@@ -28277,7 +28405,7 @@ function boundsOf(sctx, entity) {
 function layerOf(sctx, entity) {
 	const ecs = sctx.ctx.deps.world.ecs;
 	let top = entity;
-	for (let depth = 0; depth < MAX_DEPTH$2; depth += 1) {
+	for (let depth = 0; depth < MAX_DEPTH$3; depth += 1) {
 		const parent = parentOf$1(ecs, top);
 		if (parent === 0) break;
 		top = parent;
@@ -28692,7 +28820,7 @@ function stepParts(sctx) {
 //#endregion
 //#region src/plugins/renderer/sync/overlay.ts
 /** How deep a `Parent` chain or a walk up the tree goes. */
-const MAX_DEPTH$1 = 32;
+const MAX_DEPTH$2 = 32;
 /** The owner `ui` gives the entities it spawns: the only overlays honoured (O4.8). */
 const UI_OWNER_NAME = "ui";
 /**
@@ -28761,7 +28889,7 @@ function clampInto(sctx, entity, into, raw) {
 function rootOf(sctx, entity) {
 	const ecs = sctx.ctx.deps.world.ecs;
 	let current = entity;
-	for (let depth = 0; depth < MAX_DEPTH$1; depth += 1) {
+	for (let depth = 0; depth < MAX_DEPTH$2; depth += 1) {
 		const parent = parentOf$1(ecs, current);
 		if (parent === 0) return current;
 		current = parent;
@@ -28974,7 +29102,7 @@ function drawnAlpha(sctx, record) {
 	const alphaFilter = sctx.deps.host.pixi()?.AlphaFilter;
 	let alpha = 1;
 	let node = view.wrapper ?? view.object;
-	for (let depth = 0; depth < MAX_DEPTH$1 && node !== null; depth += 1) {
+	for (let depth = 0; depth < MAX_DEPTH$2 && node !== null; depth += 1) {
 		if (node === root) return alpha;
 		if (!node.visible) return 0;
 		const owner = state.viewOfTop.get(node);
@@ -36162,7 +36290,7 @@ async function settledRecord(state, bundle) {
 * @param size - The size of the decoded image.
 * @param mips - True for a texture uploaded with its full mip chain.
 */
-function resize(target, size, mips) {
+function resize$1(target, size, mips) {
 	if (target === void 0 || size === void 0) return;
 	target.width = size.width;
 	target.height = size.height;
@@ -36184,7 +36312,7 @@ function storeFont(io, record, owner, font, sizes) {
 	const old = record.fonts.get(file.key);
 	record.fonts.set(file.key, font);
 	for (const page of old?.pages ?? []) io.destroyTexture(page);
-	for (const [at, texture] of font.pages.entries()) resize(pages[at], sizes.get(texture), false);
+	for (const [at, texture] of font.pages.entries()) resize$1(pages[at], sizes.get(texture), false);
 	file.mb = sumMb(pages);
 }
 /**
@@ -36209,7 +36337,7 @@ function store(io, record, fresh, sizes) {
 	const old = record.textures.get(file.key);
 	record.textures.set(file.key, fresh.texture);
 	if (old !== void 0) io.destroyTexture(old);
-	resize(file, sizes.get(fresh.texture), file.mips === true);
+	resize$1(file, sizes.get(fresh.texture), file.mips === true);
 }
 /**
 * Makes the numbers and the picture follow the files that were stored: the megabytes of the
@@ -41376,7 +41504,7 @@ function finish(ectx, run, definition, passed) {
 * @param definition - The definition.
 * @param messages - What the compiler said.
 */
-function settle(ectx, run, definition, messages) {
+function settle$1(ectx, run, definition, messages) {
 	const { checks } = ectx.state;
 	if (checks.run !== run || checks.status.get(definition) !== "pending") return;
 	const errors = messages.filter((message) => message.type === "error");
@@ -41402,7 +41530,7 @@ function checkWgsl(ectx, run, definition) {
 		finish(ectx, run, definition, true);
 		return;
 	}
-	device.createShaderModule({ code: definition.source }).getCompilationInfo().then((info) => settle(ectx, run, definition, info.messages), () => settle(ectx, run, definition, []));
+	device.createShaderModule({ code: definition.source }).getCompilationInfo().then((info) => settle$1(ectx, run, definition, info.messages), () => settle$1(ectx, run, definition, []));
 }
 /**
 * Reads the errors of a WebGL info log, one per `ERROR: 0:<line>: <message>` line; a summary line
@@ -43032,7 +43160,7 @@ const EFFECTS_OWNER = Object.freeze({
 	name: "effects"
 });
 /** How deep a parent chain is followed, as `rootPoseOf` does; deeper is treated as a loop. */
-const MAX_DEPTH = 32;
+const MAX_DEPTH$1 = 32;
 /**
 * The one dynamic set of an emitter container (P9): positions, frames, rotations and colours
 * upload every frame; `uvs` stays static, because a frame is set at birth and the same `update()`
@@ -43075,7 +43203,7 @@ function bornFields(size) {
 */
 function topOf(ecs, host) {
 	let top = host;
-	for (let depth = 0; depth < MAX_DEPTH; depth += 1) {
+	for (let depth = 0; depth < MAX_DEPTH$1; depth += 1) {
 		const parent = parentOf$1(ecs, top);
 		if (parent === 0) break;
 		top = parent;
@@ -45182,6 +45310,10 @@ function submit(ctx, entity, answer) {
 }
 //#endregion
 //#region src/plugins/input/components.ts
+const scrollableDefaults = {
+	axis: "y",
+	moving: false
+};
 /**
 * Fresh defaults for a component that names an intent. A function, so each component type gets
 * its own payload object instead of sharing one.
@@ -45281,6 +45413,13 @@ const Pressed = /*#__PURE__*/ tag("Pressed");
 */
 const PointerOver = /*#__PURE__*/ tag("PointerOver");
 /**
+* On every ui scroll container, internal: ui writes it, input reads it, a game never sees it. A
+* press that leaves the tap slop along `axis` goes from the pressed view to the innermost scroll
+* of that axis the view hangs in by its `Parent` chain; a finger that lands on a view inside a
+* scroll that is `moving` stops it and answers nothing.
+*/
+const Scrollable = /*#__PURE__*/ component("Scrollable", scrollableDefaults);
+/**
 * Where the one pointer is, in reference units. Written once per frame by the frame step. `id`
 * names the pointer it follows, `-1` at rest.
 */
@@ -45290,8 +45429,12 @@ const Pointer = /*#__PURE__*/ resource("Pointer", pointerDefaults);
 /**
 * @file input plugin — who is under the finger. Every lookup goes through `renderer.sync.hitTest`,
 * which answers `undefined` without a DOM, and every accept function refuses a view that is
-* already playing its exit. A trace takes a cell only inside a circle smaller than its box.
+* already playing its exit. A trace takes a cell only inside a circle smaller than its box. The
+* scroll a press belongs to is found up the pressed view's own `Parent` chain, never under the
+* point: a view drawn over a scroll from another root keeps its press.
 */
+/** How deep a `Parent` chain is followed; deeper is treated as a loop. */
+const MAX_DEPTH = 32;
 /**
 * Resolves what `app.input.*` was pointed at. A `{ projection, key }` goes through
 * `world.projection.entityOf`, which answers for live views only, so a view in the despawn queue
@@ -45374,6 +45517,44 @@ function findPressed(ctx, x, y) {
 	return ctx.deps.renderer.sync.hitTest(x, y, (entity) => acceptPress(ctx, entity));
 }
 /**
+* The innermost scroll a view sits in that moves now: the view itself or the nearest ancestor of
+* its `Parent` chain that carries a `Scrollable` with `moving` true and is not on its way out. A
+* finger that lands on the view stops that scroll. A view of another root drawn over the scroll,
+* a HUD button or a popup, hangs in no chain of it, so it keeps its press. Reads only, allocates
+* nothing.
+*
+* @param ctx - Domain context of the input plugin.
+* @param entity - The view the hit test found under the finger.
+* @returns The scroll, or `undefined` when no scroll the view sits in moves.
+*/
+function movingScrollOf(ctx, entity) {
+	const { ecs } = ctx.deps.world;
+	let current = entity;
+	for (let depth = 0; depth < MAX_DEPTH && current !== 0; depth += 1) {
+		if (ecs.get(current, Scrollable)?.moving === true && !ecs.has(current, Exiting)) return current;
+		current = parentOf$1(ecs, current);
+	}
+}
+/**
+* The innermost scroll of an axis a pressed view sits in: the view itself or the nearest ancestor
+* of its `Parent` chain that carries a `Scrollable` of that axis and is not on its way out. A list
+* under a modal is in no chain of the modal's button, so a drift on that button never pans it.
+* Reads only, allocates nothing.
+*
+* @param ctx - Domain context of the input plugin.
+* @param entity - The pressed view.
+* @param axis - The dominant axis of the pan.
+* @returns The scroll, or `undefined` when the view sits in no scroll of that axis.
+*/
+function scrollOnAxisOf(ctx, entity, axis) {
+	const { ecs } = ctx.deps.world;
+	let current = entity;
+	for (let depth = 0; depth < MAX_DEPTH && current !== 0; depth += 1) {
+		if (ecs.get(current, Scrollable)?.axis === axis && !ecs.has(current, Exiting)) return current;
+		current = parentOf$1(ecs, current);
+	}
+}
+/**
 * The topmost drop target at a point.
 *
 * @param ctx - Domain context of the input plugin.
@@ -46397,6 +46578,20 @@ function direction(from, to) {
 	return dy >= 0 ? "down" : "up";
 }
 /**
+* The axis a pan moves on: the dominant one, horizontal on an exact diagonal.
+*
+* @param from - Where the press started.
+* @param to - Where the finger is.
+* @returns The axis of the larger move.
+* @example
+* ```ts
+* axisOf({ x: 0, y: 0 }, { x: 20, y: -5 }); // "x"
+* ```
+*/
+function axisOf$1(from, to) {
+	return Math.abs(to.x - from.x) >= Math.abs(to.y - from.y) ? "x" : "y";
+}
+/**
 * Takes or releases the pointer capture of the canvas. A pointer that is already gone — a down
 * and an up inside one frame — cannot be captured; the browser throws and the gesture goes on.
 *
@@ -46415,7 +46610,7 @@ function capture(ctx, on) {
 }
 /**
 * Ends the gesture: the press tag goes, the capture is released and the machine forgets the
-* pointer, whether it moved, the entity and its key.
+* pointer, whether it moved or caught a scroll, the entity and its key.
 *
 * @param ctx - Domain context of the input plugin.
 */
@@ -46426,16 +46621,30 @@ function toIdle(ctx) {
 	ctx.state.phase = "idle";
 	ctx.state.pointerId = void 0;
 	ctx.state.moved = false;
+	ctx.state.caught = false;
 	ctx.state.entity = void 0;
 	ctx.state.key = void 0;
 	ctx.state.pressedMs = 0;
 }
 /**
+* Makes a view the pressed one: it is remembered with its projection key and tagged `Pressed`.
+*
+* @param ctx - Domain context of the input plugin.
+* @param entity - The view that takes the press.
+*/
+function press(ctx, entity) {
+	ctx.state.entity = entity;
+	ctx.state.key = ctx.deps.world.projection.keyOf(entity);
+	ctx.deps.world.ecs.tag(entity, Pressed);
+}
+/**
 * Takes the pointer and looks for the view under it. The pointer is taken even where no view is.
 * While the finger rests (`rests`) the next finger that goes down takes the pointer over and this
 * press is cancelled; once it starts a gesture — a drag, a move past the tap slop, a long press, a
-* trace — a second finger stays ignored. A view that carries `Traceable` starts a trace instead of
-* a press: it is not tagged `Pressed`.
+* trace — a second finger stays ignored. When the view under the finger sits in a moving scroll,
+* that scroll takes the press: the finger stops it, and the press is caught. A view drawn over a
+* moving scroll from another root, a HUD or a popup button, keeps its press. A view that carries
+* `Traceable` starts a trace instead of a press: it is not tagged `Pressed`.
 *
 * @param ctx - Domain context of the input plugin.
 * @param pointer - The `Pointer` resource of this frame.
@@ -46443,9 +46652,10 @@ function toIdle(ctx) {
 * @param sample - The raw sample.
 */
 function onDown(ctx, pointer, point, sample) {
-	const { ecs, projection } = ctx.deps.world;
+	const { ecs } = ctx.deps.world;
 	ctx.state.pointerId = sample.pointerId;
 	ctx.state.moved = false;
+	ctx.state.caught = false;
 	ctx.state.start = {
 		x: point.x,
 		y: point.y
@@ -46457,16 +46667,42 @@ function onDown(ctx, pointer, point, sample) {
 	capture(ctx, true);
 	const entity = findPressed(ctx, point.x, point.y);
 	if (entity === void 0) return;
+	const scroll = movingScrollOf(ctx, entity);
+	if (scroll !== void 0) {
+		ctx.state.caught = true;
+		press(ctx, scroll);
+		return;
+	}
 	if (ecs.has(entity, Traceable)) {
 		beginTrace(ctx, entity, point);
 		return;
 	}
-	ctx.state.entity = entity;
-	ctx.state.key = projection.keyOf(entity);
-	ecs.tag(entity, Pressed);
+	press(ctx, entity);
 	if (ecs.has(entity, Draggable) && ecs.has(entity, Swipeable)) ctx.log.warn("input: Draggable wins over Swipeable", { view: ctx.state.key });
 }
 /**
+* The press just left the tap slop: it goes to the scroll it pans, the innermost `Scrollable` of
+* the pressed view's own `Parent` chain (the view itself included) that moves on the dominant axis
+* of the move. The view loses `Pressed`, and the press is marked caught: it is a scroll gesture
+* now, so its release answers nothing, also when the finger came back inside the slop. A
+* draggable or swipeable view keeps its gesture, a caught press keeps its scroll, and a view that
+* sits in no scroll of that axis keeps its press, also a popup button drawn over a list.
+*
+* @param ctx - Domain context of the input plugin.
+* @param point - Where the finger is, in reference units.
+*/
+function handOff(ctx, point) {
+	const { caught, entity, start } = ctx.state;
+	const { ecs } = ctx.deps.world;
+	if (entity === void 0 || caught) return;
+	if (ecs.has(entity, Draggable) || ecs.has(entity, Swipeable)) return;
+	const scroll = scrollOnAxisOf(ctx, entity, axisOf$1(start, point));
+	if (scroll === void 0 || scroll === entity) return;
+	ecs.untag(entity, Pressed);
+	ctx.state.caught = true;
+	press(ctx, scroll);
+}
+/**
 * Turns a press on a draggable view into a drag once the finger left the start by more than
 * `dragStartPx`. A draggable view with no projection key cannot be carried: `mute`, `lift` and
 * `settle` belong to a projection, so the gesture is reported and given up.
@@ -46492,13 +46728,15 @@ function onMove(ctx, point) {
 * Answers the release of a press: a tap when the finger stayed inside the slop, a swipe when it
 * went far enough and fast enough. Neither: nothing happened, and nothing has to be undone. Every
 * release inside the slop runs the `onTap` listeners first, so a view that carries only
-* `Touchable` is heard although it answers nothing.
+* `Touchable` is heard although it answers nothing. A caught press belongs to a scroll — it
+* stopped a moving one or was handed to one — and answers nothing and runs no listener.
 *
 * @param ctx - Domain context of the input plugin.
 * @param entity - The pressed view.
 * @param point - Where the finger let go, in reference units.
 */
 function answerRelease(ctx, entity, point) {
+	if (ctx.state.caught) return;
 	const { ecs } = ctx.deps.world;
 	const travelled = distance(ctx.state.start, point);
 	if (travelled <= ctx.config.tapSlopPx) {
@@ -46565,13 +46803,24 @@ function rests(ctx) {
 	return ctx.state.phase === "pressed" && !ctx.state.moved;
 }
 /**
+* Tells whether a sample takes the press past the tap slop for the first time: the press has not
+* moved yet and the finger is farther than `tapSlopPx` from the start.
+*
+* @param ctx - Domain context of the input plugin.
+* @param point - Where the finger is, in reference units.
+* @returns True in the one sample that turns the press into a moved one.
+*/
+function leavesSlop(ctx, point) {
+	return ctx.state.phase === "pressed" && !ctx.state.moved && distance(ctx.state.start, point) > ctx.config.tapSlopPx;
+}
+/**
 * Feeds one raw sample to the machine. A leave does nothing here. A sample of another pointer is
 * dropped while a pointer is followed: the second finger is ignored. One exception: a press while
 * the followed pointer rests takes the pointer over and cancels the resting press, so a resting
 * thumb or palm never blocks the finger that plays. A move of an idle mouse or pen hit-tests
 * nothing: its point is returned, so the drain moves the hover once per frame. A move of a press
-* past the tap slop marks the press as moved for good. A lost capture ends the gesture like a
-* cancel.
+* past the tap slop marks the press as moved for good and, in that one sample, hands it to the
+* scroll it pans. A lost capture ends the gesture like a cancel.
 *
 * @param ctx - Domain context of the input plugin.
 * @param pointer - The `Pointer` resource of this frame.
@@ -46594,7 +46843,10 @@ function handleSample(ctx, pointer, sample) {
 			break;
 		case "move":
 			if (isHover(ctx, pointer, sample)) return point;
-			if (ctx.state.phase === "pressed" && !ctx.state.moved && distance(ctx.state.start, point) > ctx.config.tapSlopPx) ctx.state.moved = true;
+			if (leavesSlop(ctx, point)) {
+				ctx.state.moved = true;
+				handOff(ctx, point);
+			}
 			if (ctx.state.phase === "tracing") extendTrace(ctx, point);
 			else onMove(ctx, point);
 			break;
@@ -46767,6 +47019,7 @@ function createInputState(_ctx) {
 		phase: "idle",
 		pointerId: void 0,
 		moved: false,
+		caught: false,
 		entity: void 0,
 		key: void 0,
 		start: {
@@ -50176,6 +50429,31 @@ const Scroll = /*#__PURE__*/ component("Scroll", {
 	min: 0
 });
 /**
+* On every scroll container: where it stands and whether it moves, for a game system and the
+* read door. `ui` writes it in a frame where the offset or `max` changed, and once more with
+* `moving: false` when it stops; a game reads it and never writes it.
+*
+* @example
+* ```ts
+* // A board system dims the events of the order strip while it rests on the orders.
+* export const stripMist = system({
+*   name: "board.stripMist",
+*   phase: "animate",
+*   query: [ScrollState, OrderStrip],
+*   run: entities => {
+*     for (const [entity, scroll] of entities) {
+*       // scroll: { offset: 318, max: 390, moving: false }
+*     }
+*   }
+* });
+* ```
+*/
+const ScrollState = /*#__PURE__*/ component("ScrollState", {
+	offset: 0,
+	max: 0,
+	moving: false
+});
+/**
 * On the root entity of a popup kept beneath another popup (`popup(..., { over })`). Internal to
 * `ui`: not exported from the package root. Every element of that root resolves `is.covered`.
 */
@@ -51908,8 +52186,9 @@ function windowFormOf(node) {
 }
 /**
 * Refuses the props of a scroll its windowed form cannot take: some but not all of `rows`,
-* `rowHeight` and `row`, or a row height that is not above 0. Called before anything is spawned or
-* patched, so a refused scroll leaves no half-made element.
+* `rowHeight` and `row`, a row height that is not above 0, or `axis: "x"`, since the rows of a
+* window stand one below the other. Called before anything is spawned or patched, so a refused
+* scroll leaves no half-made element.
 *
 * @param node - The node being placed.
 * @throws {Error} For a windowed scroll whose props do not hold.
@@ -51919,7 +52198,50 @@ function windowFormOf(node) {
 * ```
 */
 function checkWindow(node) {
-	if (node.type === "scroll") windowFormOf(node);
+	if (node.type !== "scroll") return;
+	if (windowFormOf(node) !== void 0 && axisOf(node) === "x") throw new Error("[game] A windowed scroll moves on y only.\n  Drop axis \"x\" or use the children form.");
+}
+/**
+* The axis a scroll moves on: `"x"` when its props say so, else `"y"`.
+*
+* @param node - The node of a scroll.
+* @returns The axis.
+* @example
+* ```ts
+* axisOf({ type: "scroll", props: { axis: "x" }, children: [] }); // "x"
+* ```
+*/
+function axisOf(node) {
+	return node.props.axis === "x" ? "x" : "y";
+}
+/**
+* The motion record a scroll spawns with: its axis, still at the start, not placed yet. The
+* first solve puts it at its `offset` prop.
+*
+* @param node - The node of the scroll that enters.
+* @returns A new record.
+* @example
+* ```ts
+* scrollMotionOf({ type: "scroll", props: { axis: "x" }, children: [] }).mode; // "still"
+* ```
+*/
+function scrollMotionOf(node) {
+	return {
+		axis: axisOf(node),
+		mode: "still",
+		offset: 0,
+		max: 0,
+		velocity: 0,
+		from: 0,
+		to: 0,
+		duration: 0,
+		elapsed: 0,
+		pointer: 0,
+		start: 0,
+		seen: 0,
+		placed: false,
+		atProp: false
+	};
 }
 /**
 * Builds a spacer: an empty node of a fixed height that never shrinks.
@@ -54345,15 +54667,23 @@ const VISUALS = [
 ];
 /**
 * The input components of an element and the Escape marker; a disabled or covered button drops
-* the answering one and the marker.
+* the answering one and the marker. A scroll's three hold its runtime state.
 */
 const INPUTS = [
 	Tappable,
 	Touchable,
 	LocalWrite,
 	Scroll,
+	Scrollable,
+	ScrollState,
 	Escapable
 ];
+/** The components of a scroll that hold where it stands: added once, never patched by a render. */
+const SCROLL_STATE = namesOf$1([
+	Scroll,
+	Scrollable,
+	ScrollState
+]);
 /**
 * One list of the visual and the input types. Its own function, because lint rule L5 refuses a
 * collection built in a module-scope declaration.
@@ -54368,6 +54698,14 @@ function concatTypes(...lists) {
 const LIVE_TYPES = concatTypes(VISUALS, INPUTS);
 /** The owned fields of a type that gives none to a plugin: one list, never a new one. */
 const NO_OWNED = [];
+/** The time of a reconcile a test steps by hand: no ms pass, so no scroll moves. */
+const NO_TIME = Object.freeze({
+	delta: 0,
+	elapsed: 0,
+	scale: 1,
+	frame: 0,
+	idle: false
+});
 /**
 * Tells whether a list of component values holds one of a type.
 *
@@ -54408,6 +54746,11 @@ const ELEMENT_OWNED = namesOf$1([
 ]);
 /** The style of a scroll's content: one object, so a render never reads as a new style. */
 const CONTENT_STYLE = Object.freeze({ origin: "topLeft" });
+/** The style of an x scroll's content: its children stand side by side. */
+const CONTENT_ROW_STYLE = Object.freeze({
+	origin: "topLeft",
+	direction: "row"
+});
 /**
 * The props, besides `style`, `state` and `content`, that a live element is written from: `bind`,
 * `texture`, `name` and `fit` reach its visual, `intent`, `payload`, `local` and `escape` its
@@ -54445,23 +54788,24 @@ function writesSame(previous, next) {
 /**
 * The children one element is diffed against. A scroll container holds exactly one of them: the
 * content the finger moves, which keeps the rects of its own children and carries them along. Its
-* pivot is its top-left corner, so the scroll step writes its offset straight into `y`; it lays
-* its children out as a column. The content of a windowed scroll holds the slots of its window,
-* the two spacers and the rows, instead of the markup's children.
+* pivot is its top-left corner, so the scroll step writes its offset straight into `x` or `y`; it
+* lays its children out as a column, or as a row on the `x` axis. The content of a windowed scroll
+* holds the slots of its window, the two spacers and the rows, instead of the markup's children.
 *
 * @param node - The node the markup wrote.
 * @param slots - The slots of a windowed scroll, top spacer to bottom spacer.
+* @param axis - The axis of a scroll, the one it spawned with.
 * @returns The children of the element.
 * @example
 * ```ts
 * childrenOf({ type: "scroll", props: {}, children: [] }).length; // 1
 * ```
 */
-function childrenOf(node, slots) {
+function childrenOf(node, slots, axis = "y") {
 	if (node.type !== "scroll") return node.children;
 	return [{
 		type: CONTENT$1,
-		props: { style: CONTENT_STYLE },
+		props: { style: axis === "x" ? CONTENT_ROW_STYLE : CONTENT_STYLE },
 		children: slots ?? node.children
 	}];
 }
@@ -54540,16 +54884,15 @@ function styleOf(node) {
 	return typeof style === "object" && style !== null ? style : void 0;
 }
 /**
-* Refuses the tags that cannot be placed: a text field that names no local field, a horizontal
-* scroll, and a windowed scroll whose props do not hold.
+* Refuses the tags that cannot be placed: a text field that names no local field, and a windowed
+* scroll whose props do not hold.
 *
 * @param node - The node being placed.
-* @throws {Error} For an `input` tag without `local`, for a horizontal scroll and for a windowed
-*   scroll whose props do not hold.
+* @throws {Error} For an `input` tag without `local`, and for a windowed scroll whose props do
+*   not hold.
 */
 function checkTag(node) {
 	if (node.type === "input" && typeof node.props.local !== "string") throw new Error("[game] An input needs a local field.\n  Write <input local=\"name\" />.");
-	if (node.type === "scroll" && node.props.axis === "x") throw new Error("[game] Horizontal scroll arrives after V3.\n  Use axis \"y\".");
 	checkWindow(node);
 }
 /**
@@ -54572,16 +54915,28 @@ function answerOf(node) {
 /**
 * The input components of an element: a button answers the gate, writes local state, or only
 * swallows the tap; a panel swallows the tap too, so nothing under it answers; a text field takes
-* the tap that starts its editing; a scroll container takes the press that moves its content. A button of a covered popup answers nothing,
-* so only the top popup answers the gate. A button with the `escape` prop that answers also
-* carries `Escapable`, the control the Escape key taps.
+* the tap that starts its editing; a scroll container takes the press that moves its content and
+* carries where it stands, on the axis it spawned with. A button of a covered popup answers
+* nothing, so only the top popup answers the gate. A button with the `escape` prop that answers
+* also carries `Escapable`, the control the Escape key taps.
 *
 * @param element - The element to make touchable.
 * @returns The component values.
 */
 function inputOf(element) {
 	const { type, node, is } = element;
-	if (type === "scroll") return [Touchable(), Scroll({ axis: "y" })];
+	if (type === "scroll") {
+		const axis = element.scroll?.axis ?? "y";
+		return [
+			Touchable(),
+			Scroll({ axis }),
+			Scrollable({
+				axis,
+				moving: false
+			}),
+			ScrollState()
+		];
+	}
 	if (type === "panel" || type === "input") return [Touchable()];
 	if (type !== "button") return [];
 	if (is.disabled || is.covered) return [Touchable()];
@@ -54800,6 +55155,7 @@ function createReconciler(ctx, modules, fields) {
 	let slotsVersion = -1;
 	let slotsRoots = -1;
 	let placedUnder;
+	let rendered = 0;
 	/**
 	* Registers the key of an element under its root, so `entityOf` and `find` answer for it. A key
 	* `ui` gave a node of its own, a spacer's, is never registered.
@@ -54896,13 +55252,16 @@ function createReconciler(ctx, modules, fields) {
 		trackHost(state, element);
 		registerKey(root, element);
 		if (element.type === "input") fields.enter(element);
-		if (element.type === "scroll") state.scrolls.add(entity);
+		if (element.type === "scroll") {
+			state.scrolls.add(entity);
+			element.scroll = scrollMotionOf(node);
+		}
 		modules.layout.attach(element);
 		element.basis = {
 			epoch: state.epoch,
 			rowHeight: range.rowHeightOf(parent, node)
 		};
-		diffChildren(root, element, childrenOf(node, range.slotsFor(element)), instance);
+		diffChildren(root, element, childrenOf(node, range.slotsFor(element), element.scroll?.axis), instance);
 		root.needsSolve = true;
 		return entity;
 	}
@@ -55039,11 +55398,12 @@ function createReconciler(ctx, modules, fields) {
 	/**
 	* Writes the visual and input components of a live element again. A visual or an input the
 	* element no longer carries is removed, so a variant can trade the rectangle for a nine-slice and
-	* back, and a button that became disabled stops answering the gate. `Scroll` is only ever added:
-	* its offset belongs to the finger, and a new look or a new rect never resets it. The look
-	* written is recorded as the rest of the visual, so the rest the world holds is always the one
-	* the element is drawn with: a restore brings it back to exactly that. The extras of the
-	* `components` prop are diffed last. Every call is one write pass of `UiCounters`.
+	* back, and a button that became disabled stops answering the gate. `Scroll`, `Scrollable` and
+	* `ScrollState` are only ever added: where a scroll stands belongs to the finger and the scroll
+	* step, and a new look or a new rect never resets it. The look written is recorded as the rest
+	* of the visual, so the rest the world holds is always the one the element is drawn with: a
+	* restore brings it back to exactly that. The extras of the `components` prop are diffed last.
+	* Every call is one write pass of `UiCounters`.
 	*
 	* @param element - The element that changed.
 	*/
@@ -55060,7 +55420,8 @@ function createReconciler(ctx, modules, fields) {
 	}
 	/**
 	* Writes one visual or input value onto a live element: added when the entity lacks it, else
-	* its fields patched, but never a tag or `Scroll`, and never a field its type gives to a plugin.
+	* its fields patched, but never a tag or the state of a scroll, and never a field its type gives
+	* to a plugin.
 	*
 	* @param element - The live element.
 	* @param value - The value of this render.
@@ -55070,7 +55431,7 @@ function createReconciler(ctx, modules, fields) {
 			ecs.add(element.entity, value);
 			return;
 		}
-		if (value.value === true || value.type === Scroll) return;
+		if (value.value === true || SCROLL_STATE.has(value.type.componentName)) return;
 		const owned = ecs.typeOf(value.type.componentName)?.owned ?? NO_OWNED;
 		ecs.set(element.entity, asHandle(value.type), livePatch(value.value, owned));
 	}
@@ -55149,6 +55510,7 @@ function createReconciler(ctx, modules, fields) {
 	*/
 	function patch(root, element, node, instance) {
 		checkWindow(node);
+		warnAxis(element, node);
 		const change = compare(root, element, node);
 		const motion = node.props.motion;
 		const loopChanged = !sameLoop(element.motion?.loop, motion?.loop);
@@ -55169,7 +55531,22 @@ function createReconciler(ctx, modules, fields) {
 				rowHeight: change.rowHeight
 			};
 		}
-		diffChildren(root, element, childrenOf(node, range.slotsFor(element)), instance);
+		diffChildren(root, element, childrenOf(node, range.slotsFor(element), element.scroll?.axis), instance);
+	}
+	/**
+	* Warns once when a render gives a live scroll another `axis`: it keeps the one it spawned with.
+	*
+	* @param element - The element being patched.
+	* @param node - The node of this render.
+	*/
+	function warnAxis(element, node) {
+		const axis = element.scroll?.axis;
+		if (axis === void 0 || axis === axisOf(node) || element.warned.has("scroll-axis-fixed")) return;
+		element.warned.add("scroll-axis-fixed");
+		ctx.log.warn("ui:scroll-axis-fixed", {
+			key: element.key ?? element.identity,
+			axis
+		});
 	}
 	/**
 	* Counts a patch that brings a loop of another reference that is not really another loop: the
@@ -55826,8 +56203,10 @@ function createReconciler(ctx, modules, fields) {
 	* again, the roots a scene placed again, the popups that may leave, the pull of the text being
 	* typed, the scroll offsets and the windowed ranges, the bound texts that show a string of
 	* another size, the viewport, the dirty roots and the hosted views.
+	*
+	* @param time - The frame's `Time`: the scrolls move by its `delta`.
 	*/
-	function reconcile() {
+	function reconcile(time = NO_TIME) {
 		sweep();
 		state.reconciles += 1;
 		if (state.remount) remountRoots();
@@ -55835,13 +56214,14 @@ function createReconciler(ctx, modules, fields) {
 		settlePopups(ctx, state, unmountRoot);
 		fields.pull();
 		const containers = scrollContainers();
-		modules.layout.scroll(containers, lookup);
+		modules.layout.scroll(containers, lookup, time);
 		range.step(containers);
 		markResizedTexts(ctx, state, modules.layout);
 		markResizedIcons(ctx, state, modules.layout);
 		const viewportChanged = modules.styles.useViewport(ctx.deps.renderer.viewport.size());
 		if (viewportChanged) state.epoch += 1;
 		const count = dirtyRoots(viewportChanged);
+		rendered = count;
 		for (let index = 0; index < count; index += 1) {
 			const root = dirtyList[index];
 			if (root !== void 0) reconcileDirtyRoot(root);
@@ -55867,16 +56247,22 @@ function createReconciler(ctx, modules, fields) {
 	/**
 	* The second system of phase `layout`: every root takes its slot, then one solve per marked
 	* root, a root in a slot after the root of its slot and in its content box, then the rects, the
-	* rest poses and the hooks, and the hosting of the hosts that came. The hints released since the last frame step are dropped at its end, so
-	* the `change.Box` and `change.Transform` hooks the solve plays get the hint the reconcile
-	* routed, and the next frame starts with none.
+	* rest poses and the hooks, the scrolls settled on what the solve and the render gave them, and
+	* the hosting of the hosts that came. The hints released since the last frame step are dropped
+	* at its end, so the `change.Box` and `change.Transform` hooks the solve plays get the hint the
+	* reconcile routed, and the next frame starts with none.
+	*
+	* @param time - The frame's `Time`: a scroll left moving asks for a frame only while it runs.
 	*/
-	function solve() {
+	function solve(time = NO_TIME) {
 		const viewport = modules.styles.viewport();
 		viewportBox.w = viewport?.width ?? 0;
 		viewportBox.h = viewport?.height ?? 0;
 		assignSlots();
-		if (layOutRoots(viewportBox)) ctx.deps.time.wake();
+		const changed = layOutRoots(viewportBox);
+		if (changed) ctx.deps.time.wake();
+		if (changed || rendered > 0) modules.layout.settleScroll(scrollContainers(), lookup, time);
+		rendered = 0;
 		settleOverlays(ctx, state, modules.layout);
 		if (state.risen.size > 0) {
 			hostViews(ctx, state, state.risen);
@@ -56053,7 +56439,8 @@ function sceneLayersOf(ctx) {
 *
 * @param ctx - Domain context of the ui plugin.
 * @param modules - The styles and layout modules, injected in that order.
-* @returns The module: `tree`, `find` and `lint` reach the game, the rest the frame.
+* @returns The module: `tree`, `find`, `lint`, `fill` and `scroll` reach the game, the rest the
+*   frame.
 */
 function createJsxApi(ctx, modules) {
 	const state = ctx.state.jsx;
@@ -56070,6 +56457,7 @@ function createJsxApi(ctx, modules) {
 	const frame = createReconciler(ctx, modules, fields);
 	const focus = createFocus(ctx, frame.markPointer, topRoot, fields);
 	const resolvedOf = (entity) => ctx.deps.world.ecs.get(entity, Text)?.resolved;
+	const lookup = (entity) => state.elements.get(entity);
 	const find = (key) => {
 		for (const root of sortedRoots(state, layerNames())) {
 			const entity = state.byKey.get(root.entity)?.get(key);
@@ -56090,12 +56478,25 @@ function createJsxApi(ctx, modules) {
 			fields.fill(entity, value);
 			return true;
 		},
+		scroll: (key, to) => {
+			const entity = find(key);
+			const element = entity === void 0 ? void 0 : lookup(entity);
+			if (element?.scroll === void 0) {
+				ctx.log.warn("ui:scroll-without-scroll", { key });
+				return false;
+			}
+			if (!modules.layout.scrollTo(element, to, lookup)) {
+				ctx.log.warn("ui:scroll-before-solve", { key });
+				return false;
+			}
+			return true;
+		},
 		open: fields.open,
 		pointer: (sample) => fields.pointer(sample),
 		tapped: (entity) => focus.tapped(entity),
 		reconcile: frame.reconcile,
-		solve: () => {
-			frame.solve();
+		solve: (time) => {
+			frame.solve(time);
 			focus.refresh();
 			fields.place();
 		},
@@ -57200,25 +57601,63 @@ function createPopupHandler(ctx, state, jsx) {
 //#endregion
 //#region src/plugins/ui/layout/scroll.ts
 /**
-* @file ui/layout — vertical scroll: while the container is pressed the content moves with the
-* finger through one `Transform` write. No solve, no motion — the children keep their rects. A
-* windowed scroll knows its content height from `rows × rowHeight`, so its range is kept even
-* when no finger is on it.
+* @file ui/layout — scroll. A scroll container moves its content on its axis: with the finger,
+* then in a fling that slows down, or in a glide to a `snap` stop; it starts at its `offset`
+* prop, glides when the prop changes, and stays inside the range every solve gives it, with hard
+* edges. The content moves by one `Transform` write on the axis: no solve, no motion, the children
+* keep their rects. `Scroll` holds the offset the way the windowed range is cut with (0 and below),
+* `ScrollState` the way a game reads it (0 to `max`), `Scrollable` whether it moves, for `input`.
+* The exact numbers live on the element's `scroll` record and the samples of the press in the
+* layout state, written in place; the components get whole reference units. A frame allocates
+* nothing.
 */
+/** How far ahead a release carries its velocity before the nearest `snap` stop is taken, in ms. */
+const PROJECT_MS = 260;
+/** What a fling keeps of its velocity per ms. */
+const DECAY_PER_MS = .998;
+/** The speed under which a fling stops, in reference units per ms. */
+const STOP_SPEED = .02;
+/** The shortest glide, in ms. */
+const GLIDE_MS = 260;
+/** The ms each reference unit of distance adds to a glide. */
+const GLIDE_MS_PER_UNIT = 1.1;
+/** The longest glide, in ms. */
+const GLIDE_MAX_MS = 620;
+/** The samples of the last ms before a release give its velocity. */
+const VELOCITY_MS = 100;
+/** A finger that stood still for longer than this before its release lets go with no velocity, in ms. */
+const STILL_MS = 50;
+/** The numbers of one sample in the ring: where the finger was on the axis, and when. */
+const SAMPLE_STRIDE = 2;
+/** The fewest samples a release velocity is read from. */
+const MIN_SAMPLES = 2;
+/**
+* Keeps an offset from the start inside 0 to `max`.
+*
+* @param offset - Where the content would stand, from the start.
+* @param max - The largest offset.
+* @returns The offset it stands at.
+* @example
+* ```ts
+* within(420, 390); // 390
+* ```
+*/
+function within(offset, max) {
+	return Math.min(max, Math.max(0, offset));
+}
 /**
-* Keeps an offset inside the scrollable range: never below the end of the content, never above
-* the top.
+* How far a length runs past a window, in whole reference units: 0 when it fits.
 *
-* @param offset - Where the content would go.
-* @param min - The most negative offset, which is viewport height minus content height.
-* @returns The offset the content is written with.
+* @param length - What is scrolled.
+* @param window - What shows of it.
+* @returns The largest offset.
 * @example
 * ```ts
-* clampOffset(40, -300); // 0
+* extent(696, 306); // 390
 * ```
 */
-function clampOffset(offset, min) {
-	return Math.min(0, Math.max(min, offset));
+function extent(length, window) {
+	return Math.max(0, Math.round(length - window));
 }
 /**
 * The content entity of a scroll container: its single child.
@@ -57232,106 +57671,491 @@ function contentOf(container, lookup) {
 	return first === void 0 ? void 0 : lookup(first);
 }
 /**
-* The height of what a container scrolls: `rows × rowHeight` for a windowed scroll, which equals
-* its solved content rect, else the solved content rect.
+* The largest offset of a scroll on its axis: its content's rect past its own, or
+* `rows × rowHeight` past its height for a windowed scroll.
 *
-* @param container - The scroll element.
+* @param container - The scroll element, with a solved rect.
 * @param content - Its content element.
-* @returns The height in reference units.
+* @param axis - The axis it moves on.
+* @returns The largest offset, in whole reference units.
 */
-function contentHeightOf(container, content) {
+function maxOf(container, content, axis) {
+	if (axis === "x") return extent(content.rect.w, container.rect.w);
 	const window = container.window;
-	return window === void 0 ? content.rect.h : window.rows * window.rowHeight;
+	return extent(window === void 0 ? content.rect.h : window.rows * window.rowHeight, container.rect.h);
+}
+/**
+* The `offset` prop of the scroll's last render: 0 when it is left out or is no finite number.
+*
+* @param container - The scroll element.
+* @returns The offset it asks for, from the start.
+*/
+function askedOffsetOf(container) {
+	const offset = container.node.props.offset;
+	return typeof offset === "number" && Number.isFinite(offset) ? offset : 0;
+}
+/**
+* The `snap` prop of the scroll's last render.
+*
+* @param container - The scroll element.
+* @returns The stops, or `undefined` when it names none.
+*/
+function snapOf(container) {
+	const snap = container.node.props.snap;
+	return Array.isArray(snap) && snap.length > 0 ? snap : void 0;
+}
+/**
+* The stop nearest to an offset, each stop kept inside 0 to `max`; the first of two as near.
+*
+* @param snap - The stops the scroll names.
+* @param offset - Where the release would carry it.
+* @param max - The largest offset.
+* @param fallback - Where it stays when no stop is a number.
+* @returns The stop.
+* @example
+* ```ts
+* nearestStop([0, 318, 390], 300, 390, 300); // 318
+* ```
+*/
+function nearestStop(snap, offset, max, fallback) {
+	let nearest = fallback;
+	let distance = Number.POSITIVE_INFINITY;
+	for (const candidate of snap) {
+		if (typeof candidate !== "number") continue;
+		const kept = within(candidate, max);
+		if (Math.abs(kept - offset) < distance) {
+			nearest = kept;
+			distance = Math.abs(kept - offset);
+		}
+	}
+	return nearest;
+}
+/**
+* Stops a scroll where it stands.
+*
+* @param motion - Its motion.
+*/
+function stop(motion) {
+	motion.mode = "still";
+	motion.velocity = 0;
+}
+/**
+* Starts a glide to an offset, kept inside the range, on the curve `1 − (1 − p)³` over
+* `min(620, 260 + distance × 1.1)` ms. A scroll already there stops instead.
+*
+* @param motion - Its motion.
+* @param target - Where it goes, from the start.
+*/
+function glideTo(motion, target) {
+	const to = within(target, motion.max);
+	const distance = Math.abs(to - motion.offset);
+	if (distance === 0) {
+		stop(motion);
+		return;
+	}
+	motion.mode = "glide";
+	motion.velocity = 0;
+	motion.from = motion.offset;
+	motion.to = to;
+	motion.elapsed = 0;
+	motion.duration = Math.min(GLIDE_MAX_MS, GLIDE_MS + distance * GLIDE_MS_PER_UNIT);
+}
+/**
+* Where a sample of the press starts in the ring: `back` samples before the newest one, 0 being
+* the newest. The position is at the index, the time right after it.
+*
+* @param state - The layout state, which keeps the samples of the press.
+* @param back - How many samples before the newest; 0 to the number of slots minus 1.
+* @returns The index of the sample in `scrollRing`.
+*/
+function slotBefore(state, back) {
+	const slots = state.scrollRing.length / SAMPLE_STRIDE;
+	return (state.scrollHead + slots - 1 - back) % slots * SAMPLE_STRIDE;
+}
+/**
+* Follows the finger on a held scroll. The first frame of a press, a hand-off included, takes the
+* finger where it is as the start, stops a fling or a glide where it stands, and ends the scroll's
+* standing at its `offset` prop; the offset then moves against the finger, inside 0 to `max`.
+* Every frame adds the finger's sample to the ring.
+*
+* @param state - The layout state, which keeps the samples of the press.
+* @param container - The held scroll.
+* @param motion - Its motion.
+* @param pointer - The `Pointer` resource of this frame.
+*/
+function hold(state, container, motion, pointer) {
+	const at = motion.axis === "x" ? pointer.x : pointer.y;
+	const ring = state.scrollRing;
+	const slots = ring.length / SAMPLE_STRIDE;
+	if (motion.mode !== "held" || state.scrolling !== container.entity) {
+		motion.mode = "held";
+		motion.velocity = 0;
+		motion.pointer = at;
+		motion.start = motion.offset;
+		motion.atProp = false;
+		state.scrolling = container.entity;
+		state.scrollSamples = 0;
+		state.scrollMoved = state.scrollClock;
+	}
+	motion.offset = within(motion.start - (at - motion.pointer), motion.max);
+	if (state.scrollSamples > 0 && ring[slotBefore(state, 0)] !== at) state.scrollMoved = state.scrollClock;
+	ring[state.scrollHead * SAMPLE_STRIDE] = at;
+	ring[state.scrollHead * SAMPLE_STRIDE + 1] = state.scrollClock;
+	state.scrollHead = (state.scrollHead + 1) % slots;
+	state.scrollSamples = Math.min(slots, state.scrollSamples + 1);
+}
+/**
+* The velocity of the offset at a release, in units a ms, positive toward `max`: the finger's
+* move over its samples of the last 100 ms, against the finger. 0 when the finger stood still for
+* more than 50 ms before it let go, or left a single sample.
+*
+* @param state - The layout state, which keeps the samples of the press.
+* @returns The velocity.
+*/
+function releaseVelocity(state) {
+	const ring = state.scrollRing;
+	const now = state.scrollClock;
+	if (state.scrollSamples < MIN_SAMPLES || now - state.scrollMoved > STILL_MS) return 0;
+	const newest = slotBefore(state, 0);
+	let oldest = newest;
+	for (let back = 1; back < state.scrollSamples; back += 1) {
+		const slot = slotBefore(state, back);
+		if ((ring[slot + 1] ?? 0) < now - VELOCITY_MS) break;
+		oldest = slot;
+	}
+	const span = (ring[newest + 1] ?? 0) - (ring[oldest + 1] ?? 0);
+	return span > 0 ? ((ring[oldest] ?? 0) - (ring[newest] ?? 0)) / span : 0;
+}
+/**
+* Lets go of a scroll the finger held. With `snap` it glides to the stop nearest to where its
+* velocity carries in 260 ms; without, it flings, or stands when it was let go too slowly. A
+* press whose samples a later press took lets go with no velocity.
+*
+* @param state - The layout state, which keeps the samples of the press.
+* @param container - The scroll that was held.
+* @param motion - Its motion.
+* @param owned - Whether the samples are this press's.
+*/
+function letGo(state, container, motion, owned) {
+	const velocity = owned ? releaseVelocity(state) : 0;
+	const snap = snapOf(container);
+	if (snap !== void 0) {
+		glideTo(motion, nearestStop(snap, motion.offset + velocity * PROJECT_MS, motion.max, motion.offset));
+		return;
+	}
+	if (Math.abs(velocity) < STOP_SPEED) {
+		stop(motion);
+		return;
+	}
+	motion.mode = "fling";
+	motion.velocity = velocity;
+}
+/**
+* Moves a flinging scroll by the frame: the offset by its velocity, the velocity down by 0.998 a
+* ms. It stops under 0.02 units a ms, or on an edge: the edges are hard and nothing passes the
+* rest of the fling to a parent.
+*
+* @param motion - Its motion.
+* @param time - The frame's `Time`.
+*/
+function fling(motion, time) {
+	const delta = time.delta;
+	const next = motion.offset + motion.velocity * delta;
+	motion.offset = within(next, motion.max);
+	motion.velocity *= DECAY_PER_MS ** delta;
+	if (motion.offset !== next || Math.abs(motion.velocity) < STOP_SPEED) stop(motion);
 }
 /**
-* Writes an offset and the range it was clamped to, and moves the content there.
+* Moves a gliding scroll by the frame along `1 − (1 − p)³`; at its end it stands on its target.
+*
+* @param motion - Its motion.
+* @param time - The frame's `Time`.
+*/
+function glide(motion, time) {
+	motion.elapsed += time.delta;
+	const progress = Math.min(1, motion.elapsed / motion.duration);
+	if (progress === 1) {
+		motion.offset = motion.to;
+		stop(motion);
+		return;
+	}
+	const left = 1 - progress;
+	motion.offset = motion.from + (motion.to - motion.from) * (1 - left * left * left);
+}
+/**
+* Moves the content to a whole offset on the scroll's axis, from where the solve put it: one
+* `Transform` write, none when it stands there already. The rects of the solve are whole numbers
+* that Yoga hands out as doubles; rounded, the pose is a small integer, which `Object.assign`
+* copies into the world without a box.
 *
 * @param ctx - Domain context of the ui plugin.
+* @param state - The layout state, which keeps the patches.
 * @param container - The scroll element.
 * @param content - Its content element.
-* @param scroll - What its `Scroll` holds now.
+* @param motion - Its motion.
 */
-function moveContent(ctx, container, content, scroll) {
+function moveContent(ctx, state, container, content, motion) {
 	const ecs = ctx.deps.world.ecs;
-	ecs.set(container.entity, Scroll, {
-		offset: scroll.offset,
-		min: scroll.min
-	});
-	ecs.set(content.entity, Transform, { y: content.rect.y - container.rect.y + scroll.offset });
+	const pose = ecs.get(content.entity, Transform);
+	const offset = Math.round(motion.offset);
+	if (pose === void 0) return;
+	if (motion.axis === "x") {
+		const x = Math.round(content.rect.x - container.rect.x) - offset;
+		if (pose.x === x) return;
+		state.scrollPatches.x.x = x;
+		ecs.set(content.entity, Transform, state.scrollPatches.x);
+		return;
+	}
+	const y = Math.round(content.rect.y - container.rect.y) - offset;
+	if (pose.y === y) return;
+	state.scrollPatches.y.y = y;
+	ecs.set(content.entity, Transform, state.scrollPatches.y);
 }
 /**
-* Keeps the offset of a scroll inside the range its content height gives, and writes that range,
-* when either moved: a windowed list whose rows shrank, or its first solve.
+* Writes what changed of a scroll, in whole units: `Scroll` when its offset or range moved,
+* `ScrollState` when the offset, `max` or `moving` changed, `Scrollable` when `moving` did, and
+* the content's pose. A frame where nothing changed writes nothing.
 *
 * @param ctx - Domain context of the ui plugin.
-* @param container - The scroll element, with a solved rect.
+* @param state - The layout state, which keeps the patches.
+* @param container - The scroll element.
 * @param content - Its content element.
-* @param contentHeight - The height of what it scrolls.
-* @returns The offset the content stands at.
-*/
-function keepInRange(ctx, container, content, contentHeight) {
-	const scroll = ctx.deps.world.ecs.get(container.entity, Scroll);
-	if (scroll === void 0) return 0;
-	const min = Math.min(0, container.rect.h - contentHeight);
-	const offset = clampOffset(scroll.offset, min);
-	if (offset !== scroll.offset || min !== scroll.min) moveContent(ctx, container, content, {
-		...scroll,
-		offset,
-		min
-	});
-	return offset;
+* @param motion - Its motion.
+*/
+function show(ctx, state, container, content, motion) {
+	const ecs = ctx.deps.world.ecs;
+	const patches = state.scrollPatches;
+	const offset = Math.round(motion.offset);
+	const moving = motion.mode !== "still";
+	const scroll = ecs.get(container.entity, Scroll);
+	const shown = ecs.get(container.entity, ScrollState);
+	const scrollable = ecs.get(container.entity, Scrollable);
+	const rangeMoved = scroll !== void 0 && (scroll.offset !== 0 - offset || scroll.min !== 0 - motion.max);
+	const stateMoved = shown !== void 0 && (shown.offset !== offset || shown.max !== motion.max || shown.moving !== moving);
+	if (rangeMoved) {
+		patches.scroll.offset = 0 - offset;
+		patches.scroll.min = 0 - motion.max;
+		ecs.set(container.entity, Scroll, patches.scroll);
+	}
+	if (stateMoved) {
+		patches.state.offset = offset;
+		patches.state.max = motion.max;
+		patches.state.moving = moving;
+		ecs.set(container.entity, ScrollState, patches.state);
+	}
+	if (scrollable !== void 0 && scrollable.moving !== moving) {
+		patches.scrollable.moving = moving;
+		ecs.set(container.entity, Scrollable, patches.scrollable);
+	}
+	moveContent(ctx, state, container, content, motion);
 }
 /**
-* Re-clamps a live windowed scroll to the content height of its new rows before its range is
-* cut, so a list that shrank below the window moves up in the same frame.
+* Tells whether a scroll has nothing to do this frame: its first solve has not placed it yet, or
+* it stands still and no finger is on it.
+*
+* @param motion - Its motion.
+* @param pressed - Whether a finger is on it.
+* @returns True when the frame leaves it alone.
+*/
+function isIdle(motion, pressed) {
+	return !motion.placed || !pressed && motion.mode === "still";
+}
+/**
+* Moves one scroll by the frame: the finger while it is pressed, the release when it lets go,
+* then a fling or a glide, and writes what changed. A still scroll no finger is on costs a tag
+* check.
 *
 * @param ctx - Domain context of the ui plugin.
+* @param state - The layout state.
 * @param container - The live scroll element.
-* @param contentHeight - `rows × rowHeight` of this render.
 * @param lookup - How a child entity becomes its element.
-* @returns The offset the content stands at.
+* @param pointer - The `Pointer` resource of this frame.
+* @param time - The frame's `Time`.
+* @returns True while the scroll moves.
 */
-function clampScroll(ctx, container, contentHeight, lookup) {
+function stepOne(ctx, state, container, lookup, pointer, time) {
+	const ecs = ctx.deps.world.ecs;
+	const pressed = ecs.has(container.entity, Pressed);
+	const released = !pressed && state.scrolling === container.entity;
+	if (released) state.scrolling = void 0;
+	const motion = container.scroll;
+	if (motion === void 0 || isIdle(motion, pressed)) return false;
 	const content = contentOf(container, lookup);
-	if (content === void 0) return ctx.deps.world.ecs.get(container.entity, Scroll)?.offset ?? 0;
-	return keepInRange(ctx, container, content, contentHeight);
+	if (content === void 0 || !ecs.has(container.entity, Scroll)) return false;
+	if (pressed) hold(state, container, motion, pointer);
+	else if (motion.mode === "held") letGo(state, container, motion, released);
+	if (motion.mode === "fling") fling(motion, time);
+	else if (motion.mode === "glide") glide(motion, time);
+	show(ctx, state, container, content, motion);
+	return motion.mode !== "still";
 }
 /**
-* Moves the content of every pressed scroll container with the finger. A windowed container no
-* finger is on keeps its offset inside the range of its rows.
+* Moves every scroll container by the frame: with the finger while it is pressed, then in a
+* fling or a glide after it lets go. Time is the frame's `delta`, so a time scale and a pause
+* apply. While a scroll moves, `time.wake()` keeps the frames coming; at a time scale of 0 no
+* frame is asked for: a fling or a glide stands where it is and goes on once time runs again,
+* and a finger's samples wake the loop themselves.
 *
 * @param ctx - Domain context of the ui plugin.
-* @param state - The layout state, which remembers where the drag started.
+* @param state - The layout state, which keeps the samples of the press.
 * @param containers - The live scroll elements.
 * @param lookup - How a child entity becomes its element.
+* @param time - The frame's `Time`.
+*/
+function stepScroll(ctx, state, containers, lookup, time) {
+	const pointer = ctx.deps.world.ecs.resource(Pointer);
+	let moving = false;
+	state.scrollClock += time.delta;
+	for (const container of containers) if (stepOne(ctx, state, container, lookup, pointer, time)) moving = true;
+	if (moving && time.delta > 0) ctx.deps.time.wake();
+}
+/**
+* Takes a new range: the offset keeps inside it at once, and so does a running glide. A scroll
+* that follows its `offset` prop goes on following it in the new range: standing, it stands at
+* the prop at once; gliding to it, it glides on to it from where it is. So a prop the first range
+* was too short for is reached once the content grows, a text measured again when its font
+* arrives.
+*
+* @param motion - The motion of the scroll.
+* @param max - The largest offset the solve gives it now.
+*/
+function resize(motion, max) {
+	if (max === motion.max) return;
+	motion.max = max;
+	motion.offset = within(motion.offset, max);
+	motion.from = within(motion.from, max);
+	motion.to = within(motion.to, max);
+	if (!motion.atProp) return;
+	if (motion.mode === "glide") glideTo(motion, motion.seen);
+	else motion.offset = within(motion.seen, max);
+}
+/**
+* Puts a scroll the solve just spawned at its `offset` prop, inside its range, and lets it follow
+* the prop from there. Its spawn waits in the queue of the phase: these values replace the queued
+* ones at the flush, before the first draw.
+*
+* @param ctx - Domain context of the ui plugin.
+* @param container - The scroll element, live since this solve.
+* @param content - Its content element.
+* @param motion - Its motion, not placed yet.
 */
-function stepScroll(ctx, state, containers, lookup) {
+function place$1(ctx, container, content, motion) {
 	const ecs = ctx.deps.world.ecs;
-	const pointer = ecs.resource(Pointer);
+	const rest = content.rest;
+	motion.placed = true;
+	motion.atProp = true;
+	motion.max = maxOf(container, content, motion.axis);
+	motion.seen = askedOffsetOf(container);
+	motion.offset = within(motion.seen, motion.max);
+	const offset = Math.round(motion.offset);
+	const pose = motion.axis === "x" ? {
+		...rest,
+		x: content.rect.x - container.rect.x - offset
+	} : {
+		...rest,
+		y: content.rect.y - container.rect.y - offset
+	};
+	ecs.add(container.entity, Scroll({
+		axis: motion.axis,
+		offset: 0 - offset,
+		min: 0 - motion.max
+	}));
+	ecs.add(container.entity, ScrollState({
+		offset,
+		max: motion.max,
+		moving: false
+	}));
+	ecs.add(content.entity, Transform(pose));
+}
+/**
+* Settles a placed scroll on what the solve and the render of this frame gave it: a new range at
+* once, then a glide to a new `offset` prop, which the scroll follows from then on. A scroll the
+* finger holds only remembers the prop.
+*
+* @param ctx - Domain context of the ui plugin.
+* @param state - The layout state, which keeps the patches.
+* @param container - The scroll element.
+* @param content - Its content element.
+* @param motion - Its motion, placed.
+*/
+function settle(ctx, state, container, content, motion) {
+	resize(motion, maxOf(container, content, motion.axis));
+	const asked = askedOffsetOf(container);
+	if (asked !== motion.seen) {
+		motion.seen = asked;
+		if (motion.mode !== "held") {
+			glideTo(motion, asked);
+			motion.atProp = true;
+		}
+	}
+	show(ctx, state, container, content, motion);
+}
+/**
+* Settles every scroll on what the solve and the render of this frame gave it. A scroll the solve
+* just spawned takes its place at its `offset` prop. A placed one keeps inside a new range at
+* once, a running glide's target too, and glides to a new `offset` prop; the same value on a
+* re-render does nothing, and a scroll the finger holds only remembers it. A scroll left moving
+* wakes the loop the way `stepScroll` does: not at a time scale of 0, where it stands.
+*
+* @param ctx - Domain context of the ui plugin.
+* @param state - The layout state, which keeps the patches.
+* @param containers - The live scroll elements.
+* @param lookup - How a child entity becomes its element.
+* @param time - The frame's `Time`.
+*/
+function settleScroll(ctx, state, containers, lookup, time) {
+	let moving = false;
 	for (const container of containers) {
-		const scroll = ecs.get(container.entity, Scroll);
+		const motion = container.scroll;
 		const content = contentOf(container, lookup);
-		if (scroll === void 0 || content === void 0) continue;
-		if (!ecs.has(container.entity, Pressed)) {
-			if (state.scrolling === container.entity) state.scrolling = void 0;
-			if (container.window !== void 0) keepInRange(ctx, container, content, contentHeightOf(container, content));
-			continue;
-		}
-		if (state.scrolling !== container.entity) {
-			state.scrolling = container.entity;
-			state.scrollStart = {
-				pointerY: pointer.y,
-				offset: scroll.offset
-			};
-		}
-		const min = Math.min(0, container.rect.h - contentHeightOf(container, content));
-		const offset = clampOffset(state.scrollStart.offset + (pointer.y - state.scrollStart.pointerY), min);
-		moveContent(ctx, container, content, {
-			...scroll,
-			offset,
-			min
-		});
+		if (motion === void 0 || content === void 0) continue;
+		if (motion.placed) settle(ctx, state, container, content, motion);
+		else place$1(ctx, container, content, motion);
+		if (motion.mode !== "still") moving = true;
 	}
+	if (moving && time.delta > 0) ctx.deps.time.wake();
+}
+/**
+* Re-clamps a live windowed scroll to the content height of its new rows before its range is
+* cut, so a list that shrank below the window moves up in the same frame.
+*
+* @param ctx - Domain context of the ui plugin.
+* @param state - The layout state, which keeps the patches.
+* @param container - The live scroll element.
+* @param contentHeight - `rows × rowHeight` of this render.
+* @param lookup - How a child entity becomes its element.
+* @returns The offset the content stands at, 0 and below, as `Scroll` holds it.
+*/
+function clampScroll(ctx, state, container, contentHeight, lookup) {
+	const motion = container.scroll;
+	const content = contentOf(container, lookup);
+	if (motion === void 0 || !motion.placed || content === void 0) return 0;
+	resize(motion, extent(contentHeight, container.rect.h));
+	show(ctx, state, container, content, motion);
+	return 0 - Math.round(motion.offset);
+}
+/**
+* Puts a placed scroll at an offset at once, inside its range: a fling or a glide stops, the
+* scroll no longer follows its `offset` prop, and `ScrollState` says it stands. A finger that
+* holds it goes on from there.
+*
+* @param ctx - Domain context of the ui plugin.
+* @param state - The layout state, which keeps the patches.
+* @param container - The scroll element.
+* @param to - Where it goes, from the start; `NaN` leaves it where it is.
+* @param lookup - How a child entity becomes its element.
+* @returns True when the scroll took it; false before its first solve placed it.
+*/
+function scrollTo(ctx, state, container, to, lookup) {
+	const motion = container.scroll;
+	const content = contentOf(container, lookup);
+	if (motion === void 0 || !motion.placed || content === void 0) return false;
+	motion.offset = within(Number.isNaN(to) ? motion.offset : to, motion.max);
+	motion.atProp = false;
+	stop(motion);
+	show(ctx, state, container, content, motion);
+	ctx.deps.time.wake();
+	return true;
 }
 //#endregion
 //#region src/plugins/ui/layout/solve.ts
@@ -57546,7 +58370,9 @@ function textSourceOf(ctx) {
 	};
 }
 /**
-* Writes the style of an element onto its node and keeps its measure function in step.
+* Writes the style of an element onto its node and keeps its measure function in step. An `x`
+* scroll lays its content out the way a row does: along `x`, as wide as it is, as tall as the
+* scroll.
 *
 * @param state - The layout state.
 * @param source - What a text element is measured through.
@@ -57555,7 +58381,8 @@ function textSourceOf(ctx) {
 function writeStyle(state, source, element) {
 	const node = state.byEntity.get(element.entity);
 	if (node === void 0 || state.yoga === void 0) return;
-	applyStyleToNode(state.yoga, node, element.style, element.type, element.parentType);
+	const tag = element.scroll?.axis === "x" ? "row" : element.type;
+	applyStyleToNode(state.yoga, node, element.style, tag, element.parentType);
 	installMeasure(state, node, element, source);
 }
 /**
@@ -57618,8 +58445,10 @@ function createLayoutApi(ctx) {
 			play(ctx, element, hook);
 		},
 		settled: (element) => canDespawn(element),
-		scroll: (containers, lookup) => stepScroll(ctx, state, containers, lookup),
-		clampScroll: (container, contentHeight, lookup) => clampScroll(ctx, container, contentHeight, lookup),
+		scroll: (containers, lookup, time) => stepScroll(ctx, state, containers, lookup, time),
+		settleScroll: (containers, lookup, time) => settleScroll(ctx, state, containers, lookup, time),
+		clampScroll: (container, contentHeight, lookup) => clampScroll(ctx, state, container, contentHeight, lookup),
+		scrollTo: (container, to, lookup) => scrollTo(ctx, state, container, to, lookup),
 		windowOf,
 		popupHandler: (jsx) => createPopupHandler(ctx, state, jsx),
 		guideHandler: () => createGuideHandler(ctx),
@@ -58195,12 +59024,12 @@ function openRegistrations(ctx, jsx, layout) {
 		name: "ui.reconcile",
 		phase: "layout",
 		query: [],
-		run: jsx.reconcile
+		run: (_rows, frame) => jsx.reconcile(frame.time)
 	})), ecs.system(system({
 		name: "ui.solve",
 		phase: "layout",
 		query: [],
-		run: jsx.solve
+		run: (_rows, frame) => jsx.solve(frame.time)
 	})), ecs.onAdded(Tree, (entity) => {
 		const place = projection.keyOf(entity);
 		jsx.mountRoot(entity, place?.projection ?? "ui", ecs.get(entity, Layer)?.name ?? "ui");
@@ -58247,6 +59076,7 @@ function stopUi(state) {
 	state.layout.nodes = 0;
 	state.layout.yoga = void 0;
 	state.layout.scrolling = void 0;
+	state.layout.scrollSamples = 0;
 	state.layout.iconLine = void 0;
 	state.jsx.components.clear();
 	state.jsx.roots.clear();
@@ -58537,7 +59367,7 @@ function createModules(ctx) {
 	};
 }
 /**
-* Creates the ui API: the four members a game calls, flat.
+* Creates the ui API: the five members a game calls, flat.
 *
 * @param ctx - Kernel context of the ui plugin.
 * @returns The plugin API.
@@ -58548,7 +59378,8 @@ function createUiApi(ctx) {
 		tree: jsx.tree,
 		find: jsx.find,
 		lint: jsx.lint,
-		fill: jsx.fill
+		fill: jsx.fill,
+		scroll: jsx.scroll
 	};
 }
 //#endregion
@@ -58650,8 +59481,8 @@ function createJsxState() {
 //#endregion
 //#region src/plugins/ui/layout/state.ts
 /**
-* Creates an empty map. Its own non-exported function, because lint rule L5 refuses a collection
-* built inside an exported declaration.
+* Creates an empty map. Its own non-exported function, because lint rule L5 refuses a
+* collection built inside an exported declaration.
 *
 * @returns A map with nothing in it.
 */
@@ -58659,13 +59490,39 @@ function emptyMap() {
 	return /* @__PURE__ */ new Map();
 }
 /**
+* Creates the ring of pointer samples: a position and a time for each of `SAMPLES`. Its own
+* non-exported function, for the same rule.
+*
+* @returns The ring, zeroed.
+*/
+function sampleRing() {
+	return /* @__PURE__ */ new Float64Array(10);
+}
+/**
+* Creates the patches the scroll step writes with, every field 0 or false.
+*
+* @returns The patches.
+*/
+function scrollPatches() {
+	return {
+		scroll: {
+			offset: 0,
+			min: 0
+		},
+		state: {
+			offset: 0,
+			max: 0,
+			moving: false
+		},
+		scrollable: { moving: false },
+		x: { x: 0 },
+		y: { y: 0 }
+	};
+}
+/**
 * Creates the layout branch of the ui state. Everything starts empty: Yoga arrives in `onStart`.
 *
 * @returns The module state.
-* @example
-* ```ts
-* createLayoutState().nodes; // 0
-* ```
 */
 function createLayoutState() {
 	return {
@@ -58675,10 +59532,12 @@ function createLayoutState() {
 		measured: 0,
 		solves: 0,
 		scrolling: void 0,
-		scrollStart: {
-			pointerY: 0,
-			offset: 0
-		},
+		scrollClock: 0,
+		scrollRing: sampleRing(),
+		scrollHead: 0,
+		scrollSamples: 0,
+		scrollMoved: 0,
+		scrollPatches: scrollPatches(),
 		iconLine: void 0,
 		order: 0,
 		cleanups: []
@@ -58740,9 +59599,10 @@ function createUiState(_ctx) {
 	};
 }
 /**
-* Ui plugin: `app.ui.tree()`, `app.ui.find(...)`, `app.ui.lint()`, `app.ui.fill(...)`, the
-* text field `<input local>`, the components `Box`, `LocalWrite` and
-* `DebugTrigger`, and the helpers `defineComponent`, `defineStyle`, `defineTokens` and `popup`.
+* Ui plugin: `app.ui.tree()`, `app.ui.find(...)`, `app.ui.lint()`, `app.ui.fill(...)`,
+* `app.ui.scroll(...)`, the text field `<input local>`, the components `Box`, `LocalWrite`,
+* `DebugTrigger` and `ScrollState`, and the helpers `defineComponent`, `defineStyle`,
+* `defineTokens` and `popup`.
 *
 * @example
 * ```ts
@@ -60313,4 +61173,4 @@ const screen = [
 	uiPlugin
 ];
 //#endregion
-export { mark as $, PROBLEM_RULES as $t, types_exports$11 as A, Alpha as At, Box as B, scenesPlugin as Bt, types_exports$4 as C, Traceable as Ct, types_exports$8 as D, messageDuration as Dt, types_exports$7 as E, messageArgument as Et, types_exports$16 as F, Noise as Ft, defineStyle as G, Frames as Gt, LocalWrite as H, animPlugin as Ht, types_exports$17 as I, Outline as It, HAPTIC_KINDS as J, frameAt as Jt, textPlugin as K, rendererPlugin as Kt, uiPlugin as L, defineFilter as Lt, types_exports$13 as M, ColorMatrix as Mt, types_exports$14 as N, Displacement as Nt, types_exports$9 as O, effectsPlugin as Ot, types_exports$15 as P, Glow as Pt, haptic as Q, PERF_LOG_VERSION as Qt, resolve as R, debugPlugin as Rt, types_exports$3 as S, Touchable as St, types_exports$6 as T, i18nPlugin as Tt, popup as U, AnimPlayer as Ut, DebugTrigger as V, assetsPlugin as Vt, defineTokens as W, Animation as Wt, external as X, PERF_CAUSES as Xt, defineAnimation as Y, MONITOR_SECTIONS as Yt, frames as Z, PERF_GAP_BUCKETS as Zt, defineBundles as _, PointerOver as _t, cubicBezier as a, exit as an, spawn as at, types_exports$1 as b, Swipeable as bt, hint as c, type as cn, tween as ct, defineScene as d, lifecyclePlugin as dn, inputPlugin as dt, SHADER_WHATS as en, parallel as et, tr as f, timePlugin as fn, Draggable as ft, music as g, Pointer as gt, defineEmitter as h, Hovered as ht, screen as i, refuseStart as in, sfx as it, types_exports$12 as j, Blur as jt, types_exports$10 as k, Emitter as kt, schedule as l, modelPlugin as ln, use as lt, flattenFeatures as m, Held as mt, createPlugin as n, worldPlugin as nn, sequence as nt, defineEffect as o, slot as on, spawned as ot, defineFeature as p, clockPlugin as pn, DropTarget as pt, platformPlugin as q, PASS_KINDS as qt, defineGame as r, flowPlugin as rn, set as rt, guide as s, to as sn, stagger as st, createApp as t, DEMAND_REASONS as tn, play$1 as tt, projection as u, SaveUnreadableError as un, wait as ut, load as v, Pressable as vt, types_exports$5 as w, Traced as wt, types_exports$2 as x, Tappable as xt, types_exports as y, Pressed as yt, defineMotion as z, audioPlugin as zt };
+export { haptic as $, PERF_LOG_VERSION as $t, types_exports$11 as A, Emitter as At, Box as B, audioPlugin as Bt, types_exports$4 as C, Touchable as Ct, types_exports$8 as D, messageArgument as Dt, types_exports$7 as E, i18nPlugin as Et, types_exports$16 as F, Glow as Ft, defineTokens as G, Animation as Gt, LocalWrite as H, assetsPlugin as Ht, types_exports$17 as I, Noise as It, platformPlugin as J, PASS_KINDS as Jt, defineStyle as K, Frames as Kt, uiPlugin as L, Outline as Lt, types_exports$13 as M, Blur as Mt, types_exports$14 as N, ColorMatrix as Nt, types_exports$9 as O, messageDuration as Ot, types_exports$15 as P, Displacement as Pt, frames as Q, PERF_GAP_BUCKETS as Qt, resolve as R, defineFilter as Rt, types_exports$3 as S, Tappable as St, types_exports$6 as T, Traced as Tt, ScrollState as U, animPlugin as Ut, DebugTrigger as V, scenesPlugin as Vt, popup as W, AnimPlayer as Wt, defineAnimation as X, MONITOR_SECTIONS as Xt, HAPTIC_KINDS as Y, frameAt as Yt, external as Z, PERF_CAUSES as Zt, defineBundles as _, Pointer as _t, cubicBezier as a, refuseStart as an, sfx as at, types_exports$1 as b, Pressed as bt, hint as c, to as cn, stagger as ct, defineScene as d, SaveUnreadableError as dn, wait as dt, PROBLEM_RULES as en, mark as et, tr as f, lifecyclePlugin as fn, inputPlugin as ft, music as g, Hovered as gt, defineEmitter as h, Held as ht, screen as i, flowPlugin as in, set as it, types_exports$12 as j, Alpha as jt, types_exports$10 as k, effectsPlugin as kt, schedule as l, type as ln, tween as lt, flattenFeatures as m, clockPlugin as mn, DropTarget as mt, createPlugin as n, DEMAND_REASONS as nn, play$1 as nt, defineEffect as o, exit as on, spawn as ot, defineFeature as p, timePlugin as pn, Draggable as pt, textPlugin as q, rendererPlugin as qt, defineGame as r, worldPlugin as rn, sequence as rt, guide as s, slot as sn, spawned as st, createApp as t, SHADER_WHATS as tn, parallel as tt, projection as u, modelPlugin as un, use as ut, load as v, PointerOver as vt, types_exports$5 as w, Traceable as wt, types_exports$2 as x, Swipeable as xt, types_exports as y, Pressable as yt, defineMotion as z, debugPlugin as zt };