@moku-labs/game 0.15.6 → 0.15.8

package/dist/{src-DWJabPi4.mjs → src-DNVAJHwd.mjs}

@@ -598,6 +598,16 @@ const DROP_SHARE = .1;
 const DWELL_BASE_MS = 5e3;
 /** The dwell never grows past this, ms. */
 const DWELL_MAX_MS = 12e4;
+/** The render scales the adaptive rule steps through, highest first: shares of the canvas resolution. */
+const SCALE_STEPS = Object.freeze([
+	1,
+	.85,
+	.75,
+	.6,
+	.5
+]);
+/** No scale to step through: the renderer allows none. */
+const NO_SCALES = Object.freeze([]);
 /** The thermal statuses in order of heat: Android's `THERMAL_STATUS_*` numbers are their indexes. */
 const THERMAL_STATUSES = [
 	"none",
@@ -632,6 +642,22 @@ function ladderOf(displayHz, maxFps, floor) {
 	return Object.freeze(steps);
 }
 /**
+* The render scales the rule may choose down to a floor, highest first, frozen; none when 1 alone reaches it. A floor
+* between two steps stops at the step above it (the renderer's config only takes a step). Allocates: called when the
+* renderer allows a floor, never per frame.
+*
+* @param floor - The lowest scale the renderer allows.
+* @returns The scales.
+* @example
+* ```ts
+* scaleStepsOf(0.75); // [1, 0.85, 0.75]
+* ```
+*/
+function scaleStepsOf(floor) {
+	const steps = SCALE_STEPS.filter((step) => step >= floor);
+	return steps.length > 1 ? Object.freeze(steps) : NO_SCALES;
+}
+/**
 * The index in `DISPLAY_RATES` a tick interval votes for: the rate whose period is within `DISPLAY_TOLERANCE` of
 * it, or -1. An indexed loop: no allocation.
 *
@@ -789,17 +815,20 @@ function thermalTarget(ladder, status, fps) {
 //#region src/plugins/time/rate.ts
 /**
 * @file time — the adaptive frame rate (spec 21 G3–G6): the governor that drops to the next divisor of the display
-* rate when drawn frames come late and returns one step after steady room, the display rate learned from the ticks
-* in every app (and with the governor from the native shell), the thermal input, and `setRate`. Every number of the
-* per-frame path lives in the governor and the display state, allocated once; a frame allocates nothing here. Only a
-* change allocates: its payload, the snapshot, the request.
+* rate when drawn frames come late and returns one step after steady room, on a GPU-bound screen the render scale
+* stepped before the rate, the back-off of failed returns, the display rate learned from the ticks in every app (and
+* with the governor from the native shell), the thermal input, and `setRate`. Every number of the per-frame path lives
+* in the governor and the display state, allocated once; a frame allocates nothing here. Only a change allocates: its
+* payload, the snapshot, the request.
 */
-/** The ladder before the display rate is known, and always without `adaptive`. */
+/** The ladder before the display rate is known, and always without `adaptive`; the scales the renderer allows none of. */
 const NO_STEPS = Object.freeze([]);
 /** Bit of a sample that came late. */
 const MISSED = 1;
 /** Bit of a sample whose frame was heavy for the higher rate. */
 const HEAVY = 2;
+/** Bit of a late sample whose frame kept the main thread longer than its frame. */
+const BUSY = 4;
 /** The thermal rank from which the rule never steps up: `"moderate"` and every hotter status. */
 const HEAT_LIMIT_RANK = 2;
 /** Milliseconds in a second: turns a rate into the period of one frame. */
@@ -852,6 +881,7 @@ function createGovernor(floor) {
 	return {
 		floor,
 		ladder: NO_STEPS,
+		scales: NO_STEPS,
 		thermal: null,
 		lastDrawn: false,
 		lastIdle: false,
@@ -865,12 +895,14 @@ function createGovernor(floor) {
 		dropTail: 0,
 		dropDrawn: 0,
 		dropMissed: 0,
+		dropBusy: 0,
 		returnTail: 0,
 		returnDrawn: 0,
 		returnMissed: 0,
 		returnHeavy: 0,
 		switchedAt: Number.NEGATIVE_INFINITY,
 		lastReturnAt: Number.NEGATIVE_INFINITY,
+		climbed: false,
 		dwellMs: DWELL_BASE_MS,
 		requested: 0,
 		requestSeq: 0
@@ -906,7 +938,8 @@ function snapshotOf(rate) {
 		ladder: governor?.ladder ?? NO_STEPS,
 		thermal: governor?.thermal ?? null,
 		asked,
-		heldBy: asked !== null && hz !== null && asked > hz ? "panel" : null
+		heldBy: asked !== null && hz !== null && asked > hz ? "panel" : null,
+		scale: rate.scale
 	});
 }
 /**
@@ -923,6 +956,7 @@ function createRateState(config) {
 	const mode = floor === void 0 ? "fixed" : "auto";
 	const parts = {
 		fps: config.maxFps,
+		scale: 1,
 		mode,
 		reason: "start",
 		display: createDisplayState(),
@@ -953,6 +987,7 @@ function emptyWindows(g) {
 	g.dropTail = g.written;
 	g.dropDrawn = 0;
 	g.dropMissed = 0;
+	g.dropBusy = 0;
 	g.returnTail = g.written;
 	g.returnDrawn = 0;
 	g.returnMissed = 0;
@@ -967,6 +1002,7 @@ function dropOldest(g) {
 	const flags = g.sampleFlags[g.dropTail % 512] ?? 0;
 	g.dropDrawn -= 1;
 	if ((flags & MISSED) !== 0) g.dropMissed -= 1;
+	if ((flags & BUSY) !== 0) g.dropBusy -= 1;
 	g.dropTail += 1;
 }
 /**
@@ -1022,8 +1058,19 @@ function evidenceOf(g, reason) {
 	};
 }
 /**
-* The dwell's bookkeeping of a switch: a drop soon after a return doubles it (a failed return), a drop after a long
-* hold resets it, a return notes when it happened, `setRate` starts it over; the display and the heat leave it.
+* Starts the back-off over: the base dwell, no return to judge.
+*
+* @param g - The governor.
+*/
+function resetDwell(g) {
+	g.dwellMs = DWELL_BASE_MS;
+	g.lastReturnAt = Number.NEGATIVE_INFINITY;
+	g.climbed = false;
+}
+/**
+* The dwell's bookkeeping of a switch: the first drop after a return judges it (held less than a minute it failed and
+* the dwell doubles, held longer the dwell starts over), the steps down after it leave the dwell, a return notes when
+* it happened, `setRate` starts it over; the display and the heat leave it.
 *
 * @param g - The governor.
 * @param reason - The reason of the switch.
@@ -1031,19 +1078,16 @@ function evidenceOf(g, reason) {
 */
 function keepDwell(g, reason, at) {
 	switch (reason) {
-		case "missed": {
-			const held = at - g.lastReturnAt;
-			if (held < 1e4) g.dwellMs = Math.min(2 * g.dwellMs, DWELL_MAX_MS);
-			else if (held >= 6e4) g.dwellMs = DWELL_BASE_MS;
+		case "missed":
+			if (g.climbed) g.dwellMs = at - g.lastReturnAt < 6e4 ? Math.min(2 * g.dwellMs, DWELL_MAX_MS) : DWELL_BASE_MS;
+			g.climbed = false;
 			break;
-		}
 		case "headroom":
 			g.lastReturnAt = at;
+			g.climbed = true;
 			break;
 		case "forced":
-		case "auto":
-			g.dwellMs = DWELL_BASE_MS;
-			g.lastReturnAt = Number.NEGATIVE_INFINITY;
+		case "auto": resetDwell(g);
 	}
 }
 /**
@@ -1082,22 +1126,25 @@ function requestRate(ctx) {
 	followNativeRate(ctx, (answer) => readAnswer(ctx, g, seq, answer));
 }
 /**
-* The one place the rate or its mode changes (the governor, the display, the heat and `setRate` call it). Nothing
-* when both stay. Otherwise the dwell is kept, both windows are emptied and the next interval is skipped, the
-* snapshot is rebuilt, `time:rate` is emitted with the evidence, the change is logged and the shell is asked for the
-* new rate. The new cap applies from the next tick: the frame that is due still runs.
+* The one place the rate, the render scale or the mode changes (the governor, the display, the heat and `setRate`
+* call it). Nothing when all stay. Otherwise the dwell is kept, both windows are emptied and the next interval is
+* skipped, the snapshot is rebuilt, `time:rate` is emitted with the evidence, the change is logged and the shell is
+* asked for the new rate. The new cap applies from the next tick: the frame that is due still runs, at the new scale.
 *
 * @param ctx - Domain context of the time plugin.
 * @param to - The new rate.
+* @param scale - The new render scale.
 * @param mode - The new mode.
 * @param reason - Why.
 * @param at - When, on the page clock.
 */
-function switchRate(ctx, to, mode, reason, at) {
+function switchRate(ctx, to, scale, mode, reason, at) {
 	const { rate } = ctx.state;
-	if (to === rate.fps && mode === rate.mode) return;
+	if (to === rate.fps && scale === rate.scale && mode === rate.mode) return;
 	const g = rate.governor;
 	const from = rate.fps;
+	const fromScale = rate.scale;
+	const scaleOnly = to === from && mode === rate.mode;
 	const evidence = evidenceOf(g, reason);
 	if (g !== void 0) {
 		keepDwell(g, reason, at);
@@ -1106,6 +1153,7 @@ function switchRate(ctx, to, mode, reason, at) {
 		emptyWindows(g);
 	}
 	rate.fps = to;
+	rate.scale = scale;
 	rate.mode = mode;
 	rate.reason = reason;
 	rate.snapshot = snapshotOf(rate);
@@ -1117,8 +1165,15 @@ function switchRate(ctx, to, mode, reason, at) {
 		displayHz: rate.display.hz,
 		thermal: g?.thermal ?? null,
 		window: evidence,
-		dwellMs: g?.dwellMs ?? 0
+		dwellMs: g?.dwellMs ?? 0,
+		scale
+	});
+	if (scale !== fromScale) ctx.log.info("time: render scale", {
+		from: fromScale,
+		to: scale,
+		reason
 	});
+	if (scaleOnly) return;
 	ctx.log.info("time: frame rate", {
 		from,
 		to,
@@ -1137,7 +1192,7 @@ function applyThermal(ctx, g) {
 	const { rate } = ctx.state;
 	if (rate.mode !== "auto" || g.ladder.length === 0) return;
 	const to = thermalTarget(g.ladder, g.thermal, rate.fps);
-	if (to < rate.fps) switchRate(ctx, to, "auto", "thermal", nowOf());
+	if (to < rate.fps) switchRate(ctx, to, rate.scale, "auto", "thermal", nowOf());
 }
 /**
 * Stores a new thermal status of the shell and applies it. A status the shell sent wrong, and the same status
@@ -1182,7 +1237,7 @@ function learnDisplay(ctx, hz, at) {
 	if (g !== void 0) g.ladder = ladderOf(hz, ctx.config.maxFps, g.floor);
 	rate.snapshot = snapshotOf(rate);
 	if (g === void 0 || rate.mode !== "auto") return;
-	if (!g.ladder.includes(rate.fps)) switchRate(ctx, g.ladder.find((step) => step <= rate.fps) ?? g.ladder.at(-1) ?? rate.fps, "auto", "display", at);
+	if (!g.ladder.includes(rate.fps)) switchRate(ctx, g.ladder.find((step) => step <= rate.fps) ?? g.ladder.at(-1) ?? rate.fps, rate.scale, "auto", "display", at);
 	if (first) applyThermal(ctx, g);
 }
 /**
@@ -1279,31 +1334,54 @@ function shouldDrop(g) {
 	return g.dropMissed >= Math.max(8, Math.ceil(DROP_SHARE * g.dropDrawn));
 }
 /**
-* Tells whether the return window has room to step up: no heat, the dwell passed, 90 drawn frames in three seconds
-* with at most one late and a tenth heavy.
+* Tells whether the late frames of the drop window are GPU-bound: fewer than half of them kept the main thread longer
+* than their frame.
+*
+* @param g - The governor.
+* @returns True when the scale, not the rate, should give.
+*/
+function gpuBound(g) {
+	return 2 * g.dropBusy < g.dropMissed;
+}
+/**
+* Tells whether the return window has room to step up: no heat, the dwell passed (twice the dwell for a step of the
+* scale), 90 drawn frames in three seconds with at most one late, and for a step of the rate a tenth heavy at most.
 *
 * @param g - The governor.
 * @param at - The page time of the sample.
-* @returns True when the rate may return one step.
+* @param scaleStep - The step up is one of the render scale: it costs the GPU, not the main thread.
+* @returns True when the rule may return one step.
 */
-function canReturn(g, at) {
-	return thermalRank(g.thermal) < HEAT_LIMIT_RANK && at - g.switchedAt >= g.dwellMs && g.returnDrawn >= 90 && g.returnMissed <= 1 && g.returnHeavy <= Math.floor(.1 * g.returnDrawn);
+function canReturn(g, at, scaleStep) {
+	return thermalRank(g.thermal) < HEAT_LIMIT_RANK && at - g.switchedAt >= (scaleStep ? 2 * g.dwellMs : g.dwellMs) && g.returnDrawn >= 90 && g.returnMissed <= 1 && (scaleStep || g.returnHeavy <= Math.floor(.1 * g.returnDrawn));
 }
 /**
-* Decides on the windows after a sample: down one step when late intervals reach `max(8, 10 %)` of the second's,
-* up one step after the dwell with 90 steady drawn frames in three seconds, at most one late and a tenth heavy, and
-* no heat.
+* Decides on the windows after a sample. Down one step when late intervals reach `max(8, 10 %)` of the second's: the
+* render scale when the window is GPU-bound and a lower scale is allowed, the rate otherwise. Up one step in the
+* reverse of the way down, with 90 steady drawn frames in three seconds, at most one late and no heat: the rate first,
+* at the scale it dropped at, after the dwell and with a tenth heavy at most, then the scale after twice the dwell. A
+* probe of the higher rate so never starts at full scale, and its failure changes no resolution.
 *
 * @param ctx - Domain context of the time plugin.
 * @param g - The governor.
 * @param at - The page time of the sample.
 */
 function decide(ctx, g, at) {
-	const { fps } = ctx.state.rate;
-	const lower = stepBelow(g.ladder, fps);
+	const { fps, scale } = ctx.state.rate;
+	if (shouldDrop(g)) {
+		const smaller = gpuBound(g) ? stepBelow(g.scales, scale) : void 0;
+		const lower = stepBelow(g.ladder, fps);
+		if (smaller !== void 0) switchRate(ctx, fps, smaller, "auto", "missed", at);
+		else if (lower !== void 0) switchRate(ctx, lower, scale, "auto", "missed", at);
+		return;
+	}
 	const higher = stepAbove(g.ladder, fps);
-	if (lower !== void 0 && shouldDrop(g)) switchRate(ctx, lower, "auto", "missed", at);
-	else if (higher !== void 0 && canReturn(g, at)) switchRate(ctx, higher, "auto", "headroom", at);
+	if (higher !== void 0 && canReturn(g, at, false)) {
+		switchRate(ctx, higher, scale, "auto", "headroom", at);
+		return;
+	}
+	const larger = stepAbove(g.scales, scale);
+	if (larger !== void 0 && canReturn(g, at, true)) switchRate(ctx, fps, larger, "auto", "headroom", at);
 }
 /**
 * Judges the interval from the last run frame's start to this one: the first after a change is skipped, one that is
@@ -1325,10 +1403,11 @@ function judgeFrame$1(ctx, g, intervalMs, at) {
 	const higher = stepAbove(g.ladder, fps);
 	const missed = intervalMs > missLineMs(fps, ctx.state.rate.display.hz ?? fps);
 	const heavy = higher !== void 0 && g.lastWorkMs > .5 * SECOND_MS$1 / higher;
+	const busy = missed && g.lastWorkMs > SECOND_MS$1 / fps;
 	const slot = g.written % 512;
 	evict$2(g, at);
 	g.sampleAt[slot] = at;
-	g.sampleFlags[slot] = (missed ? MISSED : 0) | (heavy ? HEAVY : 0);
+	g.sampleFlags[slot] = (missed ? MISSED : 0) | (heavy ? HEAVY : 0) | (busy ? BUSY : 0);
 	g.written += 1;
 	g.dropDrawn += 1;
 	g.returnDrawn += 1;
@@ -1337,6 +1416,7 @@ function judgeFrame$1(ctx, g, intervalMs, at) {
 		g.returnMissed += 1;
 	}
 	if (heavy) g.returnHeavy += 1;
+	if (busy) g.dropBusy += 1;
 	decide(ctx, g, at);
 }
 /**
@@ -1358,6 +1438,39 @@ function closeFrame(ctx, g, workMs) {
 	g.lastWorkMs = Math.max(0, workMs - agentMs);
 }
 /**
+* Starts the governor over for a new scene: the back-off of failed returns goes back to the base dwell, both windows
+* are emptied and the next interval is skipped, so the new screen is judged on its own frames. The rate and the scale
+* stay. Nothing without a governor.
+*
+* @param rate - The rate state.
+*/
+function sceneRate(rate) {
+	const g = rate.governor;
+	if (g === void 0) return;
+	resetDwell(g);
+	g.skipNext = true;
+	emptyWindows(g);
+}
+/**
+* Sets the render scales the rule may step through, down to `floor`. A scale under the new floor goes up to it at
+* once, quietly: the caller draws at what it decided. Nothing without a governor.
+*
+* @param rate - The rate state.
+* @param floor - The lowest scale the renderer allows; 1 allows none.
+* @returns The frame rate after the call.
+*/
+function allowScale(rate, floor) {
+	const g = rate.governor;
+	if (g === void 0) return rate.snapshot;
+	g.scales = scaleStepsOf(floor);
+	const lowest = g.scales.at(-1) ?? 1;
+	if (rate.scale < lowest) {
+		rate.scale = lowest;
+		rate.snapshot = snapshotOf(rate);
+	}
+	return rate.snapshot;
+}
+/**
 * Restarts the tick history of the display after a resume and, with a governor, its windows, and skips the next
 * interval: a return from the background is a new situation. The display rate already known stays.
 *
@@ -1403,10 +1516,10 @@ function resumeAuto(ctx) {
 	const { maxFps } = ctx.config;
 	const g = ctx.state.rate.governor;
 	if (g === void 0) {
-		switchRate(ctx, maxFps, "fixed", "auto", nowOf());
+		switchRate(ctx, maxFps, 1, "fixed", "auto", nowOf());
 		return;
 	}
-	switchRate(ctx, autoRate(g, maxFps), "auto", "auto", nowOf());
+	switchRate(ctx, autoRate(g, maxFps), 1, "auto", "auto", nowOf());
 }
 /**
 * Forces the rate (the exact cap, never above `maxFps`) or gives it back to the config with `"auto"`.
@@ -1420,7 +1533,7 @@ function setRateChoice(ctx, choice) {
 	const value = choice;
 	if (!isChoice(value)) throw new Error(`[game] time.setRate takes "auto", 30, 60 or 120.\n  Pass one of them, not ${String(value)}.`);
 	const { rate } = ctx.state;
-	if (value !== "auto") switchRate(ctx, Math.min(value, ctx.config.maxFps), "forced", "forced", nowOf());
+	if (value !== "auto") switchRate(ctx, Math.min(value, ctx.config.maxFps), 1, "forced", "forced", nowOf());
 	else if (rate.mode === "forced") resumeAuto(ctx);
 	return rate.snapshot;
 }
@@ -1694,7 +1807,7 @@ function countFrameListeners(ctx) {
 }
 /**
 * Creates the time API: frame callbacks per phase, the `Time` resource, scale, pause and
-* resume, `wake` for the idle cap, the measurement of an agent build, the frame rate, and `step`
+* resume, `wake` for the idle cap, the measurement of an agent build, the frame rate and its render scale, and `step`
 * for tests and tools.
 *
 * @param ctx - Domain context of the time plugin.
@@ -1744,6 +1857,8 @@ function createTimeApi(ctx) {
 		},
 		rate: () => ctx.state.rate.snapshot,
 		setRate: (choice) => setRateChoice(ctx, choice),
+		allowScale: (floor) => allowScale(ctx.state.rate, floor),
+		sceneChanged: () => sceneRate(ctx.state.rate),
 		frameDrawn: () => {
 			ctx.state.rate.drawnNow = true;
 		},
@@ -1907,7 +2022,7 @@ const timePlugin = /*#__PURE__*/ createPlugin$1("time", {
 	},
 	events: (register) => register.map({
 		"time:thermal": "The native shell reported a thermal reading",
-		"time:rate": "The loop's frame rate changed"
+		"time:rate": "The loop's frame rate or render scale changed"
 	}),
 	createState: createTimeState,
 	api: createTimeApi,
@@ -3222,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;
@@ -3261,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;
@@ -5391,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 {
@@ -5420,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;
@@ -12845,7 +12960,541 @@ function installRebindingRenderGroupPipe(pixi) {
 	};
 }
 //#endregion
+//#region src/plugins/renderer/host/render-pass.ts
+/** Pixi's `CLEAR.NONE`. */
+const CLEAR_NONE = 0;
+/** Pixi's `CLEAR.ALL`: colour, depth and stencil. */
+const CLEAR_ALL = 17664;
+/** Pixi's `CLEAR.COLOR`. */
+const CLEAR_COLOR = 16384;
+/**
+* The `CLEAR` bits of a pass's clear, as Pixi reads a boolean. `clearBits(true); // 17664`
+*
+* @param clear - The clear Pixi was handed.
+* @returns The bits.
+*/
+function clearBits(clear) {
+	if (clear === true) return CLEAR_ALL;
+	if (clear === false) return CLEAR_NONE;
+	return clear;
+}
+/**
+* Builds the classes of the lazy canvas pass from the module object, at call time, because the bases arrive with the
+* lazily loaded module. Each system keeps its base's `static extension` object as it is, so the registry files it
+* under the same type and name. They cost one test of two booleans per pipeline request, and nothing else per draw.
+*
+* @param pixi - The loaded Pixi module.
+* @returns The render target system and the pipeline system.
+*/
+function createLazyCanvasClasses(pixi) {
+	/**
+	* Pixi's WebGPU adaptor, which begins a pass on the canvas at its first draw and sets the canvas's stencil and depth
+	* operations by the rule of the file. One per renderer.
+	*/
+	class LazyCanvasAdaptor extends pixi.GpuRenderTargetAdaptor {
+		/** The canvas is bound and its pass has not begun: the pipeline system begins it at the first draw. */
+		pending = false;
+		/** A pipeline that tests or writes depth was asked for: the canvas keeps its depth from then on. */
+		depthUsed = false;
+		/** The renderer: Pixi's own `_renderer` is private. */
+		gpu = void 0;
+		/** The render target system: Pixi's own `_renderTargetSystem` is private. */
+		targets = void 0;
+		/** The renderer's pipeline system is the lazy one: only then does a pass wait for a draw. */
+		hooked = false;
+		/** The canvas whose pass is pending or whose clear is owed. */
+		canvas = void 0;
+		/** The `CLEAR` bits the canvas owes. */
+		owed = CLEAR_NONE;
+		/** The colour of the owed clear, copied, when one was given. */
+		owedColor = [
+			0,
+			0,
+			0,
+			0
+		];
+		/** `owedColor` holds the colour of the owed clear. */
+		owedColorSet = false;
+		/** The viewport of the canvas's pass to come, copied from the bind that deferred it. */
+		view = new pixi.Rectangle();
+		/** The canvas whose pass this adaptor began and has not ended. */
+		openCanvas = void 0;
+		/** The open canvas pass stores its stencil. */
+		keepStencil = false;
+		/** The open canvas pass stores its depth. */
+		keepDepth = false;
+		/** The pass being begun stores its stencil. */
+		planStencil = false;
+		/** The pass being begun stores its depth. */
+		planDepth = false;
+		/** The canvas pass that ended last stored its depth. */
+		depthStored = false;
+		/** A canvas pass began since the last `renderEnd`. */
+		acquired = false;
+		/** A mask was pushed on the canvas in the last frame drawn on it. */
+		maskedBefore = false;
+		/** A mask was pushed on the canvas in this frame. */
+		maskedNow = false;
+		/** The root bind of the canvas emitted no target change: the stencil system hears of it when its pass begins. */
+		changeOwed = false;
+		/**
+		* Keeps the renderer and the render target system, then lets Pixi subscribe the adaptor.
+		*
+		* @param renderer - The WebGPU renderer.
+		* @param renderTargetSystem - Its render target system.
+		*/
+		init(renderer, renderTargetSystem) {
+			super.init(renderer, renderTargetSystem);
+			this.gpu = renderer;
+			this.targets = renderTargetSystem;
+		}
+		/** Forgets every pass of the old device, then lets Pixi drop its restore helper. */
+		contextChange() {
+			super.contextChange();
+			this.pending = false;
+			this.canvas = void 0;
+			this.owed = CLEAR_NONE;
+			this.owedColorSet = false;
+			this.openCanvas = void 0;
+			this.depthStored = false;
+			this.changeOwed = false;
+		}
+		/**
+		* Tells whether the root bind of a render may skip its target change: the root is a canvas whose pass is deferred.
+		* The adaptor then owes the stencil system the change, until the canvas pass begins or another target is bound.
+		*
+		* @param root - The root target of the render.
+		* @returns True when the bind may skip the change.
+		*/
+		owesChange(root) {
+			this.changeOwed = this.defers(root);
+			return this.changeOwed;
+		}
+		/**
+		* Begins a pass as Pixi does on any target but the canvas inside a frame. On the canvas it reuses an open pass as
+		* Pixi does, and otherwise ends the open pass and defers the canvas's, its clear owed.
+		*
+		* @param renderTarget - The target.
+		* @param clear - What to clear.
+		* @param clearColor - The colour to clear to.
+		* @param viewport - The viewport.
+		* @param mipLevel - The mip level.
+		* @param layer - The array layer.
+		*/
+		startRenderPass(renderTarget, clear = true, clearColor, viewport, mipLevel = 0, layer = 0) {
+			if (viewport === void 0 || mipLevel !== 0 || layer !== 0 || !this.defers(renderTarget)) {
+				this.pending = false;
+				this.openCanvas = void 0;
+				this.changeOwed = false;
+				super.startRenderPass(renderTarget, clear, clearColor, viewport, mipLevel, layer);
+				return;
+			}
+			const bits = clearBits(clear);
+			if (this.canvas !== void 0 && this.canvas !== renderTarget) this.settleCanvas();
+			if (bits === CLEAR_NONE && this.isOpen(renderTarget)) {
+				this.beginCanvas(renderTarget, CLEAR_NONE, void 0, viewport);
+				return;
+			}
+			this.finishRenderPass();
+			this.canvas = renderTarget;
+			this.pending = true;
+			this.owe(bits, clearColor);
+			this.view.copyFrom(viewport);
+		}
+		/** Ends the open pass, as Pixi does. */
+		finishRenderPass() {
+			super.finishRenderPass();
+			this.openCanvas = void 0;
+		}
+		/**
+		* Copies out of a render target, as Pixi does. A copy that reads or writes the canvas first pays the clear it owes,
+		* or a first pass it never had; a canvas that had its pass in this render and owes nothing begins no empty one.
+		*
+		* @param source - The target copied from.
+		* @param destination - The texture copied into.
+		* @param from - The origin in the source.
+		* @param size - The size of the copy.
+		* @param to - The origin in the destination.
+		* @returns The destination.
+		*/
+		copyToTexture(source, destination, from, size, to) {
+			const canvas = this.canvas;
+			if (canvas !== void 0 && (source === canvas || destination.source === canvas.colorTexture) && (this.owed !== CLEAR_NONE || !this.acquired)) this.payOwed(canvas);
+			return super.copyToTexture(source, destination, from, size, to);
+		}
+		/**
+		* Copies a render target's depth, as Pixi does; a copy of the canvas's depth makes the canvas keep its depth from
+		* then on, and pays the clear it owes first.
+		*
+		* @param source - The target copied from.
+		* @param destination - The depth texture copied into.
+		* @param from - The origin in the source.
+		* @param size - The size of the copy.
+		* @param to - The origin in the destination.
+		*/
+		copyDepthTexture(source, destination, from, size, to) {
+			if (this.isCanvas(source)) {
+				this.depthUsed = true;
+				if (source === this.canvas) this.payOwed(source);
+			}
+			super.copyDepthTexture(source, destination, from, size, to);
+		}
+		/** Begins the pending canvas pass, with the clear it owes: a draw is about to be recorded into it. */
+		beginPending() {
+			const target = this.canvas;
+			if (!this.pending || target === void 0) return;
+			const bits = this.owed;
+			const color = this.owedColorSet ? this.owedColor : void 0;
+			this.pending = false;
+			this.canvas = void 0;
+			this.owed = CLEAR_NONE;
+			this.owedColorSet = false;
+			this.beginCanvas(target, bits, color, this.view);
+		}
+		/**
+		* A pipeline that tests or writes depth was asked for: the canvas keeps its depth from now on, and an open canvas
+		* pass that discards it begins again, with the depth cleared, as nothing wrote it yet, and stored.
+		*/
+		useDepth() {
+			this.depthUsed = true;
+			const canvas = this.openCanvas;
+			if (canvas?.depthStencilAttachment !== void 0 && !this.keepDepth && this.passOpen()) this.restart(canvas);
+		}
+		/**
+		* A stencil mask is about to be pushed on the bound target: on the canvas, the stencil is kept from now on.
+		*
+		* @param target - The bound target.
+		*/
+		maskPushes(target) {
+			if (this.isCanvas(target)) this.maskedNow = true;
+		}
+		/**
+		* A stencil mask was pushed on the bound target: an open canvas pass that discards its stencil begins again, the
+		* stencil cleared, as no mask was open, and stored, before the mask is drawn. A pending canvas pass whose target
+		* change is owed begins now, so the stencil system knows its target before it sets the mask's mode.
+		*
+		* @param target - The bound target.
+		*/
+		maskPushed(target) {
+			if (this.changeOwed && this.pending && this.canvas === target) this.beginPending();
+			else if (this.openCanvas === target && !this.keepStencil && this.passOpen()) this.restart(target);
+		}
+		/**
+		* The end of a render call: pays the clear the canvas owes, gives a canvas that saw no pass one, so the frame
+		* clears and presents it as Pixi's does, and moves the mask memory on after a frame drawn on the canvas.
+		*
+		* @param root - The root target of the render call.
+		*/
+		settle(root) {
+			this.settleCanvas();
+			this.acquired = false;
+			if (this.isCanvas(root)) {
+				this.maskedBefore = this.maskedNow;
+				this.maskedNow = false;
+			}
+		}
+		/**
+		* Tells whether a pass on a target waits for its first draw: the target is a canvas without multisampling, and the
+		* renderer's pipeline system is the lazy one that begins it.
+		*
+		* @param target - The target.
+		* @returns True when the pass is deferred.
+		*/
+		defers(target) {
+			if (!this.hooked) this.hooked = this.gpu?.pipeline instanceof LazyCanvasPipeline;
+			return this.hooked && this.isCanvas(target);
+		}
+		/**
+		* Tells whether a target is a canvas without multisampling: Pixi gives a canvas's GPU target its context.
+		*
+		* @param target - The target.
+		* @returns True for such a canvas.
+		*/
+		isCanvas(target) {
+			const targets = this.targets;
+			if (targets === void 0) return false;
+			const gpuTarget = targets.getGpuRenderTarget(target);
+			return gpuTarget.contexts.length > 0 && !gpuTarget.msaa;
+		}
+		/**
+		* Tells whether a pass of the encoder is open.
+		*
+		* @returns True while one is.
+		*/
+		passOpen() {
+			const encoder = this.gpu?.encoder;
+			return encoder !== void 0 && encoder.renderPassEncoder !== null;
+		}
+		/**
+		* Tells whether the pass this adaptor began on a canvas is still open.
+		*
+		* @param target - The canvas.
+		* @returns True when its pass is open.
+		*/
+		isOpen(target) {
+			return this.openCanvas === target && this.passOpen();
+		}
+		/**
+		* Adds a clear to the one the canvas owes; a colour clear given a colour keeps a copy of it.
+		*
+		* @param bits - The `CLEAR` bits.
+		* @param color - The colour, when one was given.
+		*/
+		owe(bits, color) {
+			const colour = bits & CLEAR_COLOR;
+			this.owed |= bits;
+			if (colour === 0) return;
+			this.owedColorSet = Array.isArray(color);
+			if (!Array.isArray(color)) return;
+			this.owedColor[0] = color[0];
+			this.owedColor[1] = color[1];
+			this.owedColor[2] = color[2];
+			this.owedColor[3] = color[3];
+		}
+		/**
+		* Begins a pass on the canvas through Pixi, with the stencil and depth operations of the rule set on its
+		* depth-stencil attachment first, where Pixi's descriptor reads them; a clear Pixi was asked for still wins. Pixi
+		* reuses an open pass when nothing is cleared and nothing changed; a pass that really began is recorded.
+		*
+		* @param target - The canvas.
+		* @param bits - The `CLEAR` bits.
+		* @param color - The clear colour, when one was given.
+		* @param viewport - The viewport.
+		*/
+		beginCanvas(target, bits, color, viewport) {
+			const gpu = this.gpu;
+			const targets = this.targets;
+			if (gpu === void 0 || targets === void 0) return;
+			this.planDepthStencil(target, targets);
+			const before = gpu.encoder.renderPassEncoder;
+			if (viewport !== this.view) this.view.copyFrom(viewport);
+			super.startRenderPass(target, bits, color, viewport, 0, 0);
+			this.openCanvas = target;
+			if (gpu.encoder.renderPassEncoder !== before) this.began(target, targets);
+		}
+		/**
+		* Sets the stencil and depth operations of the rule on the canvas's depth-stencil attachment, made first when
+		* Pixi would make it, and keeps what the pass stores.
+		*
+		* @param target - The canvas.
+		* @param targets - The render target system.
+		*/
+		planDepthStencil(target, targets) {
+			if ((target.stencil || target.depth) && target.depthStencilAttachment === void 0) target.ensureDepthStencilTexture();
+			const attachment = target.depthStencilAttachment;
+			const masked = targets.getGpuRenderTarget(target).maskStackIndex !== 0;
+			this.planStencil = masked || this.maskedBefore || this.maskedNow;
+			this.planDepth = this.depthUsed && attachment !== void 0;
+			if (attachment === void 0) return;
+			attachment.stencilLoadOp = masked ? "load" : "clear";
+			attachment.stencilStoreOp = this.planStencil ? "store" : "discard";
+			attachment.depthLoadOp = this.depthStored ? "load" : "clear";
+			attachment.depthStoreOp = this.planDepth ? "store" : "discard";
+		}
+		/**
+		* Records a canvas pass that really began (Pixi did not reuse the open one), and tells the stencil system of the
+		* canvas when the root bind owes it the change, now that there is a pass to set its reference on.
+		*
+		* @param target - The canvas.
+		* @param targets - The render target system.
+		*/
+		began(target, targets) {
+			this.acquired = true;
+			this.keepStencil = this.planStencil;
+			this.keepDepth = this.planDepth;
+			this.depthStored = this.planDepth;
+			if (this.changeOwed) {
+				this.changeOwed = false;
+				targets.onRenderTargetChange.emit(target);
+			}
+		}
+		/**
+		* Begins and ends one pass on a canvas now, with the clear it owes, and leaves the canvas bound with nothing owed.
+		*
+		* @param target - The canvas.
+		*/
+		payOwed(target) {
+			const bits = this.owed;
+			const color = this.owedColorSet ? this.owedColor : void 0;
+			this.owed = CLEAR_NONE;
+			this.owedColorSet = false;
+			this.beginCanvas(target, bits, color, this.view);
+			this.finishRenderPass();
+		}
+		/**
+		* Ends the canvas's wait: pays the clear it owes, or a first pass it never had, and forgets it.
+		*/
+		settleCanvas() {
+			const target = this.canvas;
+			if (target === void 0) return;
+			if (this.owed !== CLEAR_NONE || !this.acquired) this.payOwed(target);
+			this.pending = false;
+			this.canvas = void 0;
+		}
+		/**
+		* Begins the open canvas pass again with nothing cleared, by the rule as it stands now, and sets its stencil
+		* reference again: a new pass starts from 0, and Pixi sets it only when the mode or the target changes.
+		*
+		* @param target - The canvas.
+		*/
+		restart(target) {
+			const gpu = this.gpu;
+			const targets = this.targets;
+			if (gpu === void 0 || targets === void 0) return;
+			this.finishRenderPass();
+			this.beginCanvas(target, CLEAR_NONE, void 0, this.view);
+			gpu.encoder.setStencilReference(targets.getGpuRenderTarget(target).stencilReference);
+		}
+	}
+	/** Pixi's WebGPU render target system over the lazy adaptor, which settles the canvas at the end of a render. */
+	class LazyCanvasTargets extends pixi.GpuRenderTargetSystem {
+		static extension = pixi.GpuRenderTargetSystem.extension;
+		/** The adaptor, typed as the lazy one. */
+		lazy;
+		/**
+		* Makes Pixi's system, then puts the lazy adaptor in the place of Pixi's.
+		*
+		* @param renderer - The WebGPU renderer.
+		*/
+		constructor(renderer) {
+			super(renderer);
+			const lazy = new LazyCanvasAdaptor();
+			lazy.init(renderer, this);
+			this.adaptor = lazy;
+			this.lazy = lazy;
+		}
+		/**
+		* Starts a render as Pixi does; a root canvas whose pass is deferred is marked bound first, so Pixi's bind of it
+		* emits no target change: the adaptor emits it when the pass begins.
+		*
+		* @param options - The root binding.
+		*/
+		renderStart(options) {
+			const root = this.getRenderTarget(options.target);
+			if (this.renderTarget !== root && Boolean(root.flipY) === Boolean(options.flipY) && this.lazy.owesChange(root)) this.renderTarget = root;
+			super.renderStart(options);
+		}
+		/** The end of a render call, before the encoder submits it: the canvas settles. */
+		renderEnd() {
+			this.lazy.settle(this.rootRenderTarget);
+		}
+		/** Makes sure the bound target has a stencil for a mask about to be pushed, and keeps it by the rule. */
+		ensureDepthStencil() {
+			const target = this.renderTarget;
+			this.lazy.maskPushes(target);
+			super.ensureDepthStencil();
+			this.lazy.maskPushed(target);
+		}
+	}
+	/** Pixi's WebGPU pipeline system, which begins a deferred canvas pass before a draw or a stencil reference needs it. */
+	class LazyCanvasPipeline extends pixi.PipelineSystem {
+		static extension = pixi.PipelineSystem.extension;
+		/** The renderer: Pixi's own `_renderer` is private. */
+		host;
+		/** The lazy adaptor of the renderer, once found. */
+		lazy = void 0;
+		/**
+		* Keeps the renderer it is made for.
+		*
+		* @param renderer - The WebGPU renderer.
+		*/
+		constructor(renderer) {
+			super(renderer);
+			this.host = renderer;
+		}
+		/**
+		* Notes a state that tests or writes depth, begins a pending canvas pass, then answers Pixi's pipeline. Its five
+		* arguments are named, not spread: a rest array would be made at every draw.
+		*
+		* @param geometry - The geometry.
+		* @param program - The program.
+		* @param state - The state.
+		* @param topology - The topology.
+		* @param overrides - The shader overrides.
+		* @returns The pipeline.
+		*/
+		getPipeline(geometry, program, state, topology, overrides) {
+			const lazy = this.lazy ?? this.link();
+			if (lazy !== void 0) {
+				if (!lazy.depthUsed && (state.depthTest || state.depthMask)) lazy.useDepth();
+				if (lazy.pending) lazy.beginPending();
+			}
+			return super.getPipeline(geometry, program, state, topology, overrides);
+		}
+		/**
+		* Begins a pending canvas pass, then answers Pixi's buffer names: the first call of a batch or a graphics draw.
+		*
+		* @param geometry - The geometry.
+		* @param program - The program.
+		* @returns The names of the buffers to bind.
+		*/
+		getBufferNamesToBind(geometry, program) {
+			this.beginPending();
+			return super.getBufferNamesToBind(geometry, program);
+		}
+		/**
+		* Begins a pending canvas pass, then sets the stencil mode: the stencil system sets its reference on the pass next.
+		*
+		* @param stencilMode - The stencil mode.
+		*/
+		setStencilMode(stencilMode) {
+			this.beginPending();
+			super.setStencilMode(stencilMode);
+		}
+		/**
+		* Begins a pending canvas pass, then answers Pixi's key: a render bundle is recorded or replayed next.
+		*
+		* @returns The key.
+		*/
+		get bundleStateKey() {
+			this.beginPending();
+			return super.bundleStateKey;
+		}
+		/** Begins the pending canvas pass of the renderer, when there is one. */
+		beginPending() {
+			const lazy = this.lazy ?? this.link();
+			if (lazy?.pending === true) lazy.beginPending();
+		}
+		/**
+		* Finds the renderer's lazy adaptor, once its render target system exists.
+		*
+		* @returns The adaptor, or `undefined` while there is none.
+		*/
+		link() {
+			const adaptor = this.host.renderTarget.adaptor;
+			if (adaptor instanceof LazyCanvasAdaptor) this.lazy = adaptor;
+			return this.lazy;
+		}
+	}
+	return {
+		targets: LazyCanvasTargets,
+		pipeline: LazyCanvasPipeline
+	};
+}
+/**
+* Swaps Pixi's WebGPU render target and pipeline systems for the lazy canvas ones in the module's extension registry,
+* and registers Pixi's stencil system again after them: the registry appends a class it is given, and the stencil
+* system subscribes to the render target system when it is made, so it must come later. Every application made
+* afterwards defers its canvas pass. The registry is global to the module object, so the remover matters: it puts
+* Pixi's own classes back, the stencil system again last.
+*
+* @param pixi - The loaded Pixi module.
+* @returns The remover.
+* @throws {TypeError} When the module has none of the classes to subclass.
+*/
+function installLazyCanvasPass(pixi) {
+	const lazy = createLazyCanvasClasses(pixi);
+	pixi.extensions.remove(pixi.GpuRenderTargetSystem, pixi.GpuStencilSystem, pixi.PipelineSystem);
+	pixi.extensions.add(lazy.targets, pixi.GpuStencilSystem, lazy.pipeline);
+	return () => {
+		pixi.extensions.remove(lazy.targets, pixi.GpuStencilSystem, lazy.pipeline);
+		pixi.extensions.add(pixi.GpuRenderTargetSystem, pixi.GpuStencilSystem, pixi.PipelineSystem);
+	};
+}
+//#endregion
 //#region src/plugins/renderer/host/resolution.ts
+/** The short side, in CSS pixels, at or under which a coarse pointer is a phone: the rule of `effects.phone`. */
+const PHONE_SIDE$1 = 820;
 /**
 * Device pixels per CSS pixel of the window; 1 without a window. Moved here from `host/init.ts`.
 *
@@ -12855,20 +13504,67 @@ function devicePixels() {
 	return typeof globalThis.devicePixelRatio === "number" ? globalThis.devicePixelRatio : 1;
 }
 /**
-* The resolution to draw at: the override, else the device pixels under the cap.
+* The resolution to draw at: the override, else the device pixels under the cap at the render scale.
 *
 * @param state - The resolution state of the host.
 * @param state.dpr - Device pixels per CSS pixel.
 * @param state.cap - The cap of `maxResolution`.
 * @param state.override - The switch of `monitor.setResolution`, when set.
+* @param state.scale - The render scale of the adaptive frame rate.
 * @returns The target resolution.
 * @example
 * ```ts
-* targetResolution({ dpr: 2.81, cap: 2, override: undefined }); // 2
+* targetResolution({ dpr: 2.81, cap: 2, override: undefined, scale: 0.75 }); // 1.5
 * ```
 */
 function targetResolution(state) {
-	return state.override ?? Math.min(state.dpr, state.cap);
+	return state.override ?? Math.min(state.dpr, state.cap) * state.scale;
+}
+/**
+* Tells a phone: a coarse pointer and a short side of at most 820 CSS px, the rule `effects` reads for `phone: "auto"`.
+* False without a window.
+*
+* @returns True on a phone.
+*/
+function isPhone() {
+	if (typeof globalThis.matchMedia !== "function") return false;
+	return globalThis.matchMedia("(pointer: coarse)").matches && Math.min(globalThis.innerWidth, globalThis.innerHeight) <= PHONE_SIDE$1;
+}
+/**
+* The lowest render scale the adaptive frame rate may choose on this device: the floor of `adaptiveScale` where its
+* `devices` take this one, otherwise 1, none.
+*
+* @param config - The resolved plugin config.
+* @returns The floor; 1 allows no scale.
+*/
+function scaleFloorOf(config) {
+	const { adaptiveScale } = config;
+	if (adaptiveScale === false) return 1;
+	return adaptiveScale.devices === "all" || isPhone() ? adaptiveScale.floor : 1;
+}
+/**
+* Follows the render scale `time:rate` carries: remembers it and asks for the target with reason `"rate"`. The
+* override still wins.
+*
+* @param state - The host branch of the plugin state.
+* @param scale - The render scale the adaptive frame rate chose.
+* @returns True when a change is now pending.
+*/
+function followScale(state, scale) {
+	if (scale === state.resolution.scale) return false;
+	state.resolution.scale = scale;
+	return askResolution(state, targetResolution(state.resolution), "rate");
+}
+/**
+* Lets the adaptive frame rate step the render scale down to the floor of this device, or to none while the override
+* holds, and takes the scale it answers: a scale it withdrew is 1 again.
+*
+* @param ctx - Domain context of the renderer plugin.
+*/
+function allowRuleScale(ctx) {
+	const { resolution } = ctx.state.host;
+	const floor = resolution.override === void 0 ? resolution.floor : 1;
+	resolution.scale = ctx.deps.time.allowScale(floor).scale;
 }
 /**
 * The one mechanism: remembers a resolution for the next frame. Nothing is applied here. While no
@@ -13461,7 +14157,8 @@ function createPoolState() {
 /**
 * Creates the initial host state: no Pixi, no application, nothing drawn, nothing listening, no
 * counting, no bitmap text pipe and no render-group pipe installed, the resolution of a page without a window (device
-* pixels 1, cap 2, no override, nothing pending), no own GPU, no kept picture and no pool trim yet.
+* pixels 1, cap 2, no override, nothing pending, the whole scale, no scale allowed yet), no own GPU, no kept picture
+* and no pool trim yet.
 *
 * @returns The host branch of the plugin state.
 */
@@ -13483,11 +14180,14 @@ function createHostState() {
 		uninstallPasses: void 0,
 		uninstallSdfText: void 0,
 		uninstallRenderGroup: void 0,
+		uninstallRenderPass: void 0,
 		resolution: {
 			dpr: 1,
 			cap: 2,
 			override: void 0,
-			pending: void 0
+			pending: void 0,
+			scale: 1,
+			floor: 1
 		},
 		onResolutionChange: [],
 		ownGpu: void 0,
@@ -13604,11 +14304,42 @@ function installRenderGroup(ctx, pixi) {
 	}
 }
 /**
+* Swaps Pixi's WebGPU render target and pipeline systems for the renderer's, which begin the canvas's render pass at
+* its first draw and keep the canvas's stencil and depth only where something reads them (B3). Like the batched text it
+* runs before `new Application()`, once per host state, in every build. A Pixi without the pieces draws on with its own
+* systems, with a warning.
+*
+* @param ctx - Domain context of the renderer plugin.
+* @param pixi - The module the application is built from.
+*/
+function installRenderPass(ctx, pixi) {
+	const state = ctx.state.host;
+	if (state.uninstallRenderPass !== void 0) return;
+	try {
+		state.uninstallRenderPass = installLazyCanvasPass(pixi);
+	} catch (error) {
+		ctx.log.warn("renderer: the canvas pass begins at render start", { error });
+	}
+}
+/**
+* Tells whether a feature brings a filter that reads what was drawn under its view (`defineFilter({ backdrop: true })`).
+* Pixi's WebGL renderer copies that from its back buffer, and skips such a filter, with a warning, without one; the back
+* buffer costs a full-screen copy per drawn frame, so it is asked for only then. WebGPU copies from the canvas and
+* ignores the option.
+*
+* @param features - Every feature of the game, its sub-features included.
+* @returns True when one of their filters is a backdrop.
+*/
+function wantsBackBuffer(features) {
+	for (const feature of features) for (const entry of feature.description.filters ?? []) if ("backdrop" in entry.filter && entry.filter.backdrop === true) return true;
+	return false;
+}
+/**
 * Loads Pixi once, creates the application and appends its canvas, at the target resolution of
 * now: a restore after a lost device comes back at it, override included. Pixi picks WebGL by
 * itself when WebGPU is missing, so only a device with neither ends up in the catch of the
 * caller. An agent build marks the Pixi load and the init on the page's timeline and hands Pixi
-* the engine's own device.
+* the engine's own device. A game with a backdrop filter gets Pixi's WebGL back buffer.
 *
 * @param ctx - Domain context of the renderer plugin.
 * @param mount - Where the canvas goes.
@@ -13625,6 +14356,7 @@ async function createApplication(ctx, mount, deps) {
 	installTextBatch(ctx, pixi);
 	installCounting$1(ctx, pixi, deps);
 	installRenderGroup(ctx, pixi);
+	installRenderPass(ctx, pixi);
 	state.resolution.dpr = devicePixels();
 	state.resolution.cap = ctx.config.maxResolution;
 	state.resolution.pending = void 0;
@@ -13636,7 +14368,8 @@ async function createApplication(ctx, mount, deps) {
 		resolution: targetResolution(state.resolution),
 		autoDensity: true,
 		autoStart: false,
-		sharedTicker: false
+		sharedTicker: false,
+		useBackBuffer: wantsBackBuffer(ctx.deps.flow.features.all())
 	};
 	await (typeof __MOKU_GAME_AGENT__ !== "undefined" && __MOKU_GAME_AGENT__ ? initTimed(ctx, app, options) : app.init(options));
 	state.app = app;
@@ -13668,8 +14401,8 @@ function destroyApplication(state) {
 /**
 * Undoes everything `init` created. Works on the state alone, because `onStop` has no context.
 * `ready` drops first, so a device that goes away during the teardown is ignored. The draw
-* counter, the batched text and the render-group pipe swap Pixi's own classes back, so the next application on
-* the page starts from them. The pool trim starts over and its listeners go; Pixi's pool itself is left.
+* counter, the batched text, the render-group pipe and the lazy canvas pass swap Pixi's own classes back, so the next
+* application on the page starts from them. The pool trim starts over and its listeners go; Pixi's pool itself is left.
 *
 * @param state - The host branch of the plugin state.
 */
@@ -13687,6 +14420,8 @@ function stopHost(state) {
 	state.uninstallSdfText = void 0;
 	state.uninstallRenderGroup?.();
 	state.uninstallRenderGroup = void 0;
+	state.uninstallRenderPass?.();
+	state.uninstallRenderPass = void 0;
 	state.unsupported?.remove();
 	state.unsupported = void 0;
 	state.onReady.length = 0;
@@ -14199,6 +14934,7 @@ function createHostApi(ctx, deps) {
 		setResolution: (value, reason) => askResolution(state, value, reason),
 		overrideResolution: (value) => {
 			state.resolution.override = value;
+			allowRuleScale(ctx);
 			refreshResolution(ctx, "debug");
 			return targetResolution(state.resolution);
 		},
@@ -14256,6 +14992,8 @@ function createHostApi(ctx, deps) {
 			watchDevice(ctx, restart);
 			watchVisibility(ctx);
 			watchPixelRatio(ctx);
+			state.resolution.floor = scaleFloorOf(ctx.config);
+			allowRuleScale(ctx);
 			state.ready = true;
 			for (const fn of state.onReady) fn();
 		}
@@ -23634,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.
 *
@@ -23656,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);
 	}
@@ -23762,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;
@@ -24103,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. */
@@ -24267,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;
 	}
@@ -27225,7 +27963,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;
 /**
@@ -27307,7 +28045,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);
@@ -27326,7 +28064,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;
@@ -27356,7 +28094,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];
@@ -27445,7 +28183,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.
 *
@@ -27539,7 +28277,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;
@@ -27954,7 +28692,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";
 /**
@@ -28023,7 +28761,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;
@@ -28236,7 +28974,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);
@@ -29683,9 +30421,9 @@ function createRendererApi(ctx) {
 //#region src/plugins/renderer/handlers.ts
 /**
 * @file renderer plugin — the hooks: a pause hands the captures still waiting for a drawn frame
-* their picture, since no frame comes while the clock is paused, and trims Pixi's texture pool. In an agent build the
-* performance monitor also hears the pause stack, the flow path, the thermal readings and the
-* changes of the frame rate.
+* their picture, since no frame comes while the clock is paused, and trims Pixi's texture pool; a change of the frame
+* rate brings the render scale the adaptive rule chose. In an agent build the performance monitor also hears the pause
+* stack, the flow path, the thermal readings, the changes of the frame rate and of the scale.
 */
 /**
 * Creates the hooks of the renderer. `time` is resolved when a hook fires, not while this factory
@@ -29743,13 +30481,23 @@ function createHandlers$5(ctx) {
 			if (typeof __MOKU_GAME_AGENT__ !== "undefined" && __MOKU_GAME_AGENT__) monitorOf().thermal(reading);
 		},
 		/**
-		* Writes a change of the frame rate as a `rate` event line, the payload as its detail. Agent
-		* builds only.
+		* Draws at the render scale the change carries from the next frame, in every build. An agent build writes the
+		* change as a `rate` event line, the payload as its detail, and a move of the scale as a `scale` line.
 		*
 		* @param change - The change `time:rate` carried.
 		*/
 		"time:rate": (change) => {
-			if (typeof __MOKU_GAME_AGENT__ !== "undefined" && __MOKU_GAME_AGENT__) monitorOf().event("rate", change);
+			const from = ctx.state.host.resolution.scale;
+			followScale(ctx.state.host, change.scale);
+			if (typeof __MOKU_GAME_AGENT__ !== "undefined" && __MOKU_GAME_AGENT__) {
+				monitorOf().event("rate", change);
+				if (change.scale !== from) monitorOf().event("scale", {
+					from,
+					to: change.scale,
+					reason: change.reason,
+					fps: change.to
+				});
+			}
 		}
 	};
 }
@@ -29974,12 +30722,28 @@ function checkPoolTrim(poolTrim) {
 	if (!isCount(aboveMb)) throw new Error(`[game] renderer.poolTrim.aboveMb is ${String(aboveMb)}.\n  Give the MiB the targets must grow by, 0 or more.`);
 }
 /**
+* Checks the adaptive render scale of the config: `false`, or a floor that is a step of the scale and the devices it
+* applies to.
+*
+* @param adaptiveScale - What the config holds.
+* @throws {Error} When it is neither `false` nor an object, the floor is not 1, 0.85, 0.75, 0.6 or 0.5, or the
+*   devices are neither `"phone"` nor `"all"`.
+*/
+function checkAdaptiveScale(adaptiveScale) {
+	if (adaptiveScale === false) return;
+	if (typeof adaptiveScale !== "object" || adaptiveScale === null) throw new Error(`[game] renderer.adaptiveScale is ${String(adaptiveScale)}.\n  Give { floor, devices } or false.`);
+	const floor = "floor" in adaptiveScale ? adaptiveScale.floor : void 0;
+	const devices = "devices" in adaptiveScale ? adaptiveScale.devices : void 0;
+	if (typeof floor !== "number" || !SCALE_STEPS.includes(floor)) throw new Error(`[game] renderer.adaptiveScale.floor is ${String(floor)}.\n  Give a step of the scale: 1, 0.85, 0.75, 0.6 or 0.5.`);
+	if (devices !== "phone" && devices !== "all") throw new Error(`[game] renderer.adaptiveScale.devices is ${String(devices)}.\n  Give "phone" or "all".`);
+}
+/**
 * Checks the numbers of the config a game can get wrong, at `createApp`, in every build: the
-* resolution cap, the pool trim, the performance monitor, the budget of the kept pictures and the
-* probe draws of the warm-up.
+* resolution cap, the pool trim, the adaptive render scale, the performance monitor, the budget of the kept pictures
+* and the probe draws of the warm-up.
 *
 * @param config - The resolved plugin config.
-* @throws {Error} When `maxResolution` is not a number above 0, `poolTrim` fails its check,
+* @throws {Error} When `maxResolution` is not a number above 0, `poolTrim` or `adaptiveScale` fails its check,
 *   `monitor.budgetMs` is neither `"rate"` nor a number above 0, `monitor.frames` is not a whole
 *   number from 64 to 16384, `keptMb` is not a finite number of at least 0, or `warm` is not a
 *   whole number from 0 to 16.
@@ -29989,6 +30753,7 @@ function checkConfig(config) {
 	const { budgetMs, frames } = config.monitor;
 	if (!Number.isFinite(maxResolution) || maxResolution <= 0) throw new Error(`[game] renderer.maxResolution is ${maxResolution}.\n  Give a number above 0.`);
 	checkPoolTrim(config.poolTrim);
+	checkAdaptiveScale(config.adaptiveScale);
 	if (budgetMs !== "rate" && !(Number.isFinite(budgetMs) && budgetMs > 0)) throw new Error(`[game] renderer.monitor.budgetMs is ${String(budgetMs)}.\n  Give the frame budget in milliseconds, or "rate" for one frame of the current rate.`);
 	if (!Number.isInteger(frames) || frames < RING_FRAMES.min || frames > RING_FRAMES.max) throw new Error(`[game] renderer.monitor.frames is ${frames}.\n  Give a whole number from 64 to 16384.`);
 	if (typeof keptMb !== "number" || !Number.isFinite(keptMb) || keptMb < 0) throw new Error(`[game] renderer.keptMb is ${String(keptMb)}.\n  Give the MiB kept pictures may hold, or 0 to keep none.`);
@@ -30074,7 +30839,11 @@ const rendererPlugin = /*#__PURE__*/ createPlugin$1("renderer", {
 		},
 		onDemand: false,
 		keptMb: 64,
-		warm: 1
+		warm: 1,
+		adaptiveScale: {
+			floor: .75,
+			devices: "phone"
+		}
 	},
 	events: (register) => register.map({ "renderer:device-lost": "The GPU device or context was lost; the game is paused" }),
 	createState: createRendererState,
@@ -35393,7 +36162,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;
@@ -35415,7 +36184,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);
 }
 /**
@@ -35440,7 +36209,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
@@ -35880,7 +36649,7 @@ function leavingOf(previous, scene) {
 * Builds the scene in one synchronous block: the layers, then the projections only the old scene
 * lists out, then the list of the new scene in (a projection both list stays and takes its new
 * place), the new scene to the world's systems, then the list the scene names to `assets`, then
-* the frame loop out of its idle cap, and only then the event.
+* the frame loop out of its idle cap and the adaptive frame rate told of the new screen, and only then the event.
 *
 * @param ctx - Domain context of the plugin.
 * @param scene - The scene whose bundles are there.
@@ -35899,6 +36668,7 @@ function apply(ctx, scene, named) {
 	state.named = named;
 	ctx.deps.assets.sceneBundles(named);
 	ctx.deps.time.wake();
+	ctx.deps.time.sceneChanged();
 	ctx.emit("scenes:changed", {
 		from,
 		to: scene.id,
@@ -37645,96 +38415,6 @@ function createEffectsApi(ctx) {
 	};
 }
 //#endregion
-//#region src/plugins/effects/filters/glsl.ts
-/**
-* The head of every filter's GLSL. `#version 300 es` comes first, so Pixi compiles both stages
-* as GLSL ES 3.0 and the dev check compiles the same text; `highp` matches the `f32` of the WGSL
-* twin and the precision of the uniforms the vertex stage shares. Then the texture coordinate of
-* `defaultFilterVert`, the output, the input texture and the global filter uniforms as `vec4`.
-*/
-const GLSL_HEADER = `#version 300 es
-precision highp float;
-
-in vec2 vTextureCoord;
-out vec4 finalColor;
-
-uniform sampler2D uTexture;
-uniform vec4 uInputSize;
-uniform vec4 uInputPixel;
-uniform vec4 uInputClamp;
-uniform vec4 uOutputFrame;
-uniform vec4 uGlobalFrame;
-uniform vec4 uOutputTexture;
-
-`;
-/** The GLSL type of each uniform type: a number is a `float`, a colour or a tuple a vector. */
-const GLSL_TYPES = {
-	f32: "float",
-	"vec2<f32>": "vec2",
-	"vec3<f32>": "vec3",
-	"vec4<f32>": "vec4"
-};
-/**
-* One `uniform` line per uniform, in declaration order, under the bare names the group keys.
-* Nothing without uniforms.
-*
-* @param uniforms - The uniforms in declaration order.
-* @returns The GLSL lines, or `""`.
-* @example
-* ```ts
-* glslUniforms([{ name: "color", type: "vec3<f32>", form: "color", size: 3 }]); // "uniform vec3 color;\n\n"
-* ```
-*/
-function glslUniforms(uniforms) {
-	if (uniforms.length === 0) return "";
-	return `${uniforms.map((uniform) => `uniform ${GLSL_TYPES[uniform.type]} ${uniform.name};\n`).join("")}\n`;
-}
-/**
-* The engine's half of each input in GLSL: the texture, and the function that reads it at the body's uv, its scale
-* and its clamp applied. The two uniforms it reads are declared before it by `glslUniforms`. Nothing without inputs.
-*
-* @param inputs - The inputs in declaration order.
-* @returns The GLSL lines, or `""`.
-* @example
-* ```ts
-* glslInputs([blurInput]).startsWith("uniform sampler2D blurTexture;"); // true
-* ```
-*/
-function glslInputs(inputs) {
-	return inputs.map((input) => `uniform sampler2D ${input.texture};\n\nvec4 ${input.sample}(vec2 uv) {\n  return textureLod(${input.texture}, clamp(uv * uInputSize.xy * ${input.scale.name}, ${input.clamp.name}.xy, ${input.clamp.name}.zw), 0.0);\n}
-
-`).join("");
-}
-/** The GLSL twin of `canvasPixel(uv)`: the pixel's canvas position in CSS px (spec 23 P8.3). */
-const GLSL_CANVAS_PIXEL = `vec2 canvasPixel(vec2 uv) {
-  return uOutputFrame.xy + keptOrigin + uv * uInputSize.xy;
-}
-
-`;
-/**
-* The whole GLSL of a filter: the header, the uniforms (then the scale and the clamp of each input, then the
-* engine's `keptOrigin` of a body that calls `canvasPixel`), the inputs, the helper, the body.
-*
-* @param uniforms - The uniforms in declaration order.
-* @param inputs - The inputs in declaration order.
-* @param body - The fragment body the game wrote.
-* @param origin - The `keptOrigin` uniform, for a body that calls `canvasPixel`.
-* @returns The GLSL fragment source the `GlProgram` is built from.
-* @example
-* ```ts
-* assembleGlsl([], [], body).endsWith(body); // true
-* ```
-*/
-function assembleGlsl(uniforms, inputs, body, origin) {
-	const declared = glslUniforms([
-		...uniforms,
-		...inputs.flatMap((input) => [input.scale, input.clamp]),
-		...origin === void 0 ? [] : [origin]
-	]);
-	const helper = origin === void 0 ? "" : GLSL_CANVAS_PIXEL;
-	return `${GLSL_HEADER}${declared}${glslInputs(inputs)}${helper}${body}`;
-}
-//#endregion
 //#region src/plugins/effects/filters/wgsl.ts
 /**
 * The head of every filter shader: the global filter uniforms and the input texture and sampler
@@ -37811,30 +38491,165 @@ const CANVAS_PIXEL = `fn canvasPixel(uv: vec2<f32>) -> vec2<f32> {
   return gfu.uOutputFrame.xy + fu.keptOrigin + uv * gfu.uInputSize.xy;
 }
 
+`;
+/**
+* The engine's uniform a backdrop's `sampleBack` scales its uv by: one over the size of the back texture's backing,
+* CSS px. Filled by every apply from the texture Pixi copied.
+*/
+const BACK_SCALE = Object.freeze({
+	name: "backScale",
+	type: "vec2<f32>",
+	form: "vector",
+	size: 2
+});
+/** The engine's uniform a backdrop's `sampleBack` clamps to: half a texel inside the copied part of the back texture. */
+const BACK_CLAMP = Object.freeze({
+	name: "backClamp",
+	type: "vec4<f32>",
+	form: "vector",
+	size: 4
+});
+/**
+* What a backdrop's body reads what was drawn under its view through: the texture Pixi's filter system copies the
+* canvas into and binds at group 0 binding 3 (`Filter.blendRequired`), sampled at the body's uv with the engine's
+* scale and clamp, as an input is.
+*/
+const SAMPLE_BACK = `@group(0) @binding(3) var uBackTexture: texture_2d<f32>;
+
+fn sampleBack(uv: vec2<f32>) -> vec4<f32> {
+  return textureSampleLevel(uBackTexture, uSampler, clamp(uv * gfu.uInputSize.xy * fu.backScale, fu.backClamp.xy, fu.backClamp.zw), 0.0);
+}
+
 `;
 /**
 * The whole source of a filter: the header, the uniform struct (the uniforms, then the scale and the clamp of each
-* input, then the engine's `keptOrigin` of a body that calls `canvasPixel`), the input bindings, the helper, the
-* body. A body without the helper assembles byte-identically to one without the cache.
+* input, then a backdrop's back scale and clamp, then the engine's `keptOrigin` of a body that calls `canvasPixel`),
+* the input bindings, a backdrop's `sampleBack`, the `canvasPixel` helper, the body. A body without either helper
+* assembles byte-identically to one without the cache and without the backdrop.
 *
 * @param uniforms - The uniforms in declaration order.
 * @param inputs - The inputs in declaration order.
 * @param body - The fragment body the game wrote.
 * @param origin - The `keptOrigin` uniform, for a body that calls `canvasPixel`.
+* @param backdrop - True for a filter that reads what was drawn under its view.
 * @returns The WGSL source both stages are built from.
 * @example
 * ```ts
-* assemble([], [], body).endsWith(body); // true
+* assemble([], [], body, undefined, true).includes("fn sampleBack(uv: vec2<f32>) -> vec4<f32>"); // true
 * ```
 */
-function assemble(uniforms, inputs, body, origin) {
+function assemble(uniforms, inputs, body, origin, backdrop = false) {
 	const struct = uniformStruct([
 		...uniforms,
 		...inputs.flatMap((input) => [input.scale, input.clamp]),
+		...backdrop ? [BACK_SCALE, BACK_CLAMP] : [],
 		...origin === void 0 ? [] : [origin]
 	]);
+	const back = backdrop ? SAMPLE_BACK : "";
 	const helper = origin === void 0 ? "" : CANVAS_PIXEL;
-	return `${HEADER}${struct}${inputBindings(inputs)}${helper}${body}`;
+	return `${HEADER}${struct}${inputBindings(inputs)}${back}${helper}${body}`;
+}
+//#endregion
+//#region src/plugins/effects/filters/glsl.ts
+/**
+* The head of every filter's GLSL. `#version 300 es` comes first, so Pixi compiles both stages
+* as GLSL ES 3.0 and the dev check compiles the same text; `highp` matches the `f32` of the WGSL
+* twin and the precision of the uniforms the vertex stage shares. Then the texture coordinate of
+* `defaultFilterVert`, the output, the input texture and the global filter uniforms as `vec4`.
+*/
+const GLSL_HEADER = `#version 300 es
+precision highp float;
+
+in vec2 vTextureCoord;
+out vec4 finalColor;
+
+uniform sampler2D uTexture;
+uniform vec4 uInputSize;
+uniform vec4 uInputPixel;
+uniform vec4 uInputClamp;
+uniform vec4 uOutputFrame;
+uniform vec4 uGlobalFrame;
+uniform vec4 uOutputTexture;
+
+`;
+/** The GLSL type of each uniform type: a number is a `float`, a colour or a tuple a vector. */
+const GLSL_TYPES = {
+	f32: "float",
+	"vec2<f32>": "vec2",
+	"vec3<f32>": "vec3",
+	"vec4<f32>": "vec4"
+};
+/**
+* One `uniform` line per uniform, in declaration order, under the bare names the group keys.
+* Nothing without uniforms.
+*
+* @param uniforms - The uniforms in declaration order.
+* @returns The GLSL lines, or `""`.
+* @example
+* ```ts
+* glslUniforms([{ name: "color", type: "vec3<f32>", form: "color", size: 3 }]); // "uniform vec3 color;\n\n"
+* ```
+*/
+function glslUniforms(uniforms) {
+	if (uniforms.length === 0) return "";
+	return `${uniforms.map((uniform) => `uniform ${GLSL_TYPES[uniform.type]} ${uniform.name};\n`).join("")}\n`;
+}
+/**
+* The engine's half of each input in GLSL: the texture, and the function that reads it at the body's uv, its scale
+* and its clamp applied. The two uniforms it reads are declared before it by `glslUniforms`. Nothing without inputs.
+*
+* @param inputs - The inputs in declaration order.
+* @returns The GLSL lines, or `""`.
+* @example
+* ```ts
+* glslInputs([blurInput]).startsWith("uniform sampler2D blurTexture;"); // true
+* ```
+*/
+function glslInputs(inputs) {
+	return inputs.map((input) => `uniform sampler2D ${input.texture};\n\nvec4 ${input.sample}(vec2 uv) {\n  return textureLod(${input.texture}, clamp(uv * uInputSize.xy * ${input.scale.name}, ${input.clamp.name}.xy, ${input.clamp.name}.zw), 0.0);\n}
+
+`).join("");
+}
+/** The GLSL twin of `canvasPixel(uv)`: the pixel's canvas position in CSS px (spec 23 P8.3). */
+const GLSL_CANVAS_PIXEL = `vec2 canvasPixel(vec2 uv) {
+  return uOutputFrame.xy + keptOrigin + uv * uInputSize.xy;
+}
+
+`;
+/** The GLSL twin of `sampleBack(uv)`: what was drawn under the view, at the body's uv, scaled and clamped. */
+const GLSL_SAMPLE_BACK = `uniform sampler2D uBackTexture;
+
+vec4 sampleBack(vec2 uv) {
+  return textureLod(uBackTexture, clamp(uv * uInputSize.xy * backScale, backClamp.xy, backClamp.zw), 0.0);
+}
+
+`;
+/**
+* The whole GLSL of a filter: the header, the uniforms (then the scale and the clamp of each input, then a backdrop's
+* back scale and clamp, then the engine's `keptOrigin` of a body that calls `canvasPixel`), the inputs, a backdrop's
+* `sampleBack`, the `canvasPixel` helper, the body.
+*
+* @param uniforms - The uniforms in declaration order.
+* @param inputs - The inputs in declaration order.
+* @param body - The fragment body the game wrote.
+* @param origin - The `keptOrigin` uniform, for a body that calls `canvasPixel`.
+* @param backdrop - True for a filter that reads what was drawn under its view.
+* @returns The GLSL fragment source the `GlProgram` is built from.
+* @example
+* ```ts
+* assembleGlsl([], [], body, undefined, true).includes("uniform sampler2D uBackTexture;"); // true
+* ```
+*/
+function assembleGlsl(uniforms, inputs, body, origin, backdrop = false) {
+	const declared = glslUniforms([
+		...uniforms,
+		...inputs.flatMap((input) => [input.scale, input.clamp]),
+		...backdrop ? [BACK_SCALE, BACK_CLAMP] : [],
+		...origin === void 0 ? [] : [origin]
+	]);
+	const back = backdrop ? GLSL_SAMPLE_BACK : "";
+	const helper = origin === void 0 ? "" : GLSL_CANVAS_PIXEL;
+	return `${GLSL_HEADER}${declared}${glslInputs(inputs)}${back}${helper}${body}`;
 }
 //#endregion
 //#region src/plugins/effects/filters/define.ts
@@ -37859,9 +38674,10 @@ const MAIN_GLSL = /\bvoid\s+main\s*\(/;
 /**
 * Names a uniform cannot take: the two fields every filter component carries, and the names the
 * shader headers declare, which a game uniform would clash with (on WebGL only, for most). The
-* GLSL header also declares `finalColor` and `vTextureCoord`.
+* GLSL header also declares `finalColor` and `vTextureCoord`; a backdrop's, `uBackTexture`,
+* `backScale`, `backClamp` and `sampleBack`.
 */
-const RESERVED_NAME = /^(?:enabled|order|uInputSize|uInputPixel|uInputClamp|uOutputFrame|uGlobalFrame|uOutputTexture|uTexture|uSampler|finalColor|vTextureCoord|keptOrigin|canvasPixel)$/;
+const RESERVED_NAME = /^(?:enabled|order|uInputSize|uInputPixel|uInputClamp|uOutputFrame|uGlobalFrame|uOutputTexture|uTexture|uSampler|finalColor|vTextureCoord|keptOrigin|canvasPixel|uBackTexture|backScale|backClamp|sampleBack)$/;
 /**
 * What a body reads of the screen: the root target's frame, the fragment position, the output target's size, the
 * origin of the output frame (its size `.zw` is the same in a picture and live).
@@ -37945,21 +38761,22 @@ function worstOf(a, b) {
 }
 /**
 * What the kept-picture cache may do with a filter, from what the game declared and what its bodies read only, never
-* the engine's header (LEAD-FIXES-4 item 3): `cache: false` is `"screen"`; a body that reads the screen and declares
-* nothing is `"screen"` too (the safe direction); a body that calls `canvasPixel` is `"placed"`, as is
-* `cache: "placed"`; everything else is `"local"`.
+* the engine's header (LEAD-FIXES-4 item 3): a backdrop and `cache: false` are `"screen"`; a body that reads the
+* screen and declares nothing is `"screen"` too (the safe direction); a body that calls `canvasPixel` is `"placed"`,
+* as is `cache: "placed"`; everything else is `"local"`.
 *
 * @param wgsl - The WGSL body.
 * @param glsl - The GLSL body.
 * @param cache - What the game declared.
+* @param backdrop - Whether the filter reads what was drawn under its view.
 * @returns The category.
 * @example
 * ```ts
-* cacheOf("let p = gfu.uOutputFrame.xy + uv * gfu.uInputSize.xy;", "", undefined); // "screen"
+* cacheOf("let p = gfu.uOutputFrame.xy + uv * gfu.uInputSize.xy;", "", undefined, false); // "screen"
 * ```
 */
-function cacheOf(wgsl, glsl, cache) {
-	if (cache === false) return "screen";
+function cacheOf(wgsl, glsl, cache, backdrop) {
+	if (cache === false || backdrop) return "screen";
 	if (cache === void 0 && (readsScreenIn(wgsl) || readsScreenIn(glsl))) return "screen";
 	if (cache === "placed" || callsCanvasPixel(wgsl, glsl)) return "placed";
 	return "local";
@@ -38026,6 +38843,48 @@ function readResolution(id, resolution) {
 	throw new Error(`[game] Filter "${id}": resolution must be from 0 to 4, 0 for the resolution of the canvas.\n  Got ${String(resolution)}.`);
 }
 /**
+* Reads the declared backdrop switch: `true`, `false` or left out. A JavaScript caller may pass anything.
+*
+* @param id - The filter id.
+* @param backdrop - What the game declared.
+* @returns True for a backdrop.
+* @throws {Error} When it is given and is not a boolean.
+*/
+function readBackdrop(id, backdrop) {
+	if (backdrop === void 0 || typeof backdrop === "boolean") return backdrop === true;
+	throw new Error(`[game] Filter "${id}": backdrop must be true or false.\n  Got ${JSON.stringify(backdrop)}.`);
+}
+/**
+* Refuses what a backdrop cannot have: a padding (Pixi copies the canvas under the padded box, and a copy past the
+* canvas edge fails on the GPU) and a cache that keeps it (what is under it changes without it).
+*
+* @param id - The filter id.
+* @param padding - The padding as declared, `0` when left out.
+* @param cache - The cache as declared.
+* @throws {Error} When the padding is not 0 or the cache keeps it.
+*/
+function checkBackdrop(id, padding, cache) {
+	if (padding !== 0) throw new Error(`[game] Filter "${id}" is a backdrop: its padding must be 0.\n  Pixi copies the canvas under the padded box, and a copy past the canvas edge fails: leave padding out.`);
+	if (cache === "local" || cache === "placed") throw new Error(`[game] Filter "${id}" is a backdrop: it reads what is drawn under its view, so it is drawn live in every frame.\n  Leave cache out, or set it to false.`);
+}
+/**
+* Reads where an input's first step reads: the view's own input (the default) or, for a backdrop, what was drawn under
+* the view. A JavaScript caller may pass anything.
+*
+* @param id - The filter id.
+* @param name - The input name.
+* @param from - What the game declared.
+* @param backdrop - Whether the filter is a backdrop.
+* @returns `"input"` or `"back"`.
+* @throws {Error} When it is neither, or `"back"` on a filter that is no backdrop.
+*/
+function readFrom(id, name, from, backdrop) {
+	if (from === void 0 || from === "input") return "input";
+	if (from !== "back") throw new Error(`[game] Filter "${id}": input "${name}" starts from ${JSON.stringify(from)}.\n  Write from: "input" or from: "back".`);
+	if (!backdrop) throw new Error(`[game] Filter "${id}": input "${name}" starts from "back", which only a backdrop filter can read.\n  Give the filter backdrop: true.`);
+	return "back";
+}
+/**
 * Tells whether a value is a list of 2 to 4 finite numbers.
 *
 * @param value - A uniform declaration.
@@ -38206,21 +39065,23 @@ function readStages(id, name, stages) {
 	for (const [index, stage] of stages.entries()) {
 		if (!isDefinedFilter(stage)) throw new Error(`[game] Filter "${id}": stage ${index} of input "${name}" is not a filter made by defineFilter.\n  List what defineFilter returned; a built-in kind cannot be a stage.`);
 		if (!drawsAlone(stage.filter)) throw new Error(`[game] Filter "${id}": stage "${stage.filter.id}" of input "${name}" has inputs or a fallback of its own.\n  A stage draws alone: give it neither.`);
+		if (stage.filter.backdrop) throw new Error(`[game] Filter "${id}": stage "${stage.filter.id}" of input "${name}" is a backdrop.\n  A stage reads the step before it: give it no backdrop.`);
 		if (!read.includes(stage)) read.push(stage);
 	}
 	return Object.freeze(read);
 }
 /**
-* Reads the inputs of a definition: the names the engine declares for each, its two uniforms, its
-* stages and its chain.
+* Reads the inputs of a definition: the names the engine declares for each, where its first step reads, its two
+* uniforms, its stages and its chain.
 *
 * @param id - The filter id.
 * @param declared - What the game declared under `inputs`.
 * @param uniforms - The read uniforms.
+* @param backdrop - Whether the filter is a backdrop: only then may an input start from back.
 * @returns The inputs in declaration order, frozen; empty without `inputs`.
 * @throws {Error} When `inputs` is not an object, has more than four entries, or an input breaks one of its rules.
 */
-function readInputs(id, declared, uniforms) {
+function readInputs(id, declared, uniforms, backdrop) {
 	if (declared === void 0) return Object.freeze([]);
 	if (typeof declared !== "object" || declared === null || Array.isArray(declared)) throw new Error(`[game] Filter "${id}": inputs must be an object of named inputs.\n  Write inputs: { blur: { stages: [...], chain } }.`);
 	const entries = Object.entries(declared);
@@ -38228,10 +39089,12 @@ function readInputs(id, declared, uniforms) {
 	const taken = /* @__PURE__ */ new Set();
 	return Object.freeze(entries.map(([name, input]) => {
 		const names = checkInputNames(id, name, uniforms, taken);
+		const from = readFrom(id, name, input.from, backdrop);
 		const stages = readStages(id, name, input.stages);
 		if (typeof input.chain !== "function") throw new TypeError(`[game] Filter "${id}": input "${name}" needs a chain.\n  Write chain: (value, { resolution }) => [{ stage, scale }].`);
 		return Object.freeze({
 			name,
+			from,
 			texture: names.texture,
 			sampler: names.sampler,
 			scale: Object.freeze({
@@ -38254,21 +39117,23 @@ function readInputs(id, declared, uniforms) {
 }
 /**
 * Reads the fallback of a definition: another filter of ours, drawing alone, over a subset of its
-* uniforms with the same types.
+* uniforms with the same types; a backdrop only for a backdrop, which it draws in place of on the same view.
 *
 * @param id - The filter id.
 * @param fallback - What the game declared under `fallback`.
 * @param uniforms - The read uniforms.
+* @param backdrop - Whether the filter is a backdrop.
 * @returns The fallback's definition, or `undefined` without one.
-* @throws {Error} When it is no filter of ours, has the same id, has inputs or a fallback, or a uniform of it is not
-*   one of this filter's with the same type.
+* @throws {Error} When it is no filter of ours, has the same id, has inputs or a fallback, a uniform of it is not
+*   one of this filter's with the same type, or it is a backdrop and the filter is not.
 */
-function readFallback(id, fallback, uniforms) {
+function readFallback(id, fallback, uniforms, backdrop) {
 	if (fallback === void 0) return void 0;
 	if (!isDefinedFilter(fallback)) throw new Error(`[game] Filter "${id}": fallback is not a filter made by defineFilter.\n  Pass what defineFilter returned.`);
 	const definition = fallback.filter;
 	if (definition.id === id) throw new Error(`[game] Filter "${id}": its fallback has the same id.\n  Give the fallback an id of its own.`);
 	if (!drawsAlone(definition)) throw new Error(`[game] Filter "${id}": its fallback "${definition.id}" has inputs or a fallback of its own.\n  A fallback draws alone and simply: give it neither.`);
+	if (definition.backdrop && !backdrop) throw new Error(`[game] Filter "${id}": its fallback "${definition.id}" is a backdrop, and "${id}" is not.\n  A fallback draws in its place on the same view: give it no backdrop, or make "${id}" a backdrop too.`);
 	for (const uniform of definition.uniforms) {
 		const own = uniforms.find((candidate) => candidate.name === uniform.name);
 		if (!(own?.type === uniform.type && own.form === uniform.form)) throw new Error(`[game] Filter "${id}": its fallback "${definition.id}" declares "${uniform.name}", which "${id}" ${own === void 0 ? "does not declare" : "declares as another type"}.\n  A fallback draws with the value of ${id}: use a subset of its uniforms.`);
@@ -38318,18 +39183,20 @@ function cacheWithInputs(cache, inputs) {
 * An `area` answers, from the value, the rectangle in the entity's own units outside of which the
 * filter draws nothing: Pixi then renders and fills only that box, not the view's bounds. A
 * `resolution` draws the view and its filters at that many texels per CSS px instead of the
-* canvas's.
-* Register it through the `filters` key of a feature. The README shows a filter with a blur input
-* and one with an `area`.
+* canvas's. A `backdrop` reads what was drawn under its view inside that box: the body calls
+* `sampleBack(uv)`, and an input may start `from: "back"`; it is drawn live in every frame.
+* Register it through the `filters` key of a feature. The README shows a filter with a blur input,
+* one with an `area` and a backdrop.
 *
 * @param id - The filter id, also the component name; unique, and not one of the built-ins.
 * @param spec - Both bodies, the uniforms, the passes one apply costs, the padding, the inputs, the fallback, the
-*   cache category, the area and the resolution.
+*   cache category, the area, the resolution and the backdrop switch.
 * @returns The component type, with the frozen `filter` definition attached.
 * @throws {Error} When the id is empty, the WGSL has no `mainFragment`, the GLSL no `void main(`,
 *   a uniform is reserved, badly named or of no known form, the passes or the padding break
 *   their rules, an input or the fallback breaks one of its rules, `passes` is given with inputs,
-*   `area` is not a function, or `resolution` is not a number from 0 to 4.
+*   `area` is not a function, `resolution` is not a number from 0 to 4, `backdrop` is not a
+*   boolean, or a backdrop has a padding or a cache that keeps it.
 * @example
 * ```ts
 * // features/board/effects.ts: a gold tint a motion hook tweens on a merge, on WebGPU and WebGL.
@@ -38343,21 +39210,23 @@ function defineFilter(id, spec) {
 	readSpec(id, spec);
 	const read = Object.entries(spec.uniforms ?? {}).map(([name, declaration]) => readUniform(id, name, declaration));
 	const uniforms = Object.freeze(read.map((entry) => entry.spec));
-	const inputs = readInputs(id, spec.inputs, uniforms);
+	const backdrop = readBackdrop(id, spec.backdrop);
+	const inputs = readInputs(id, spec.inputs, uniforms, backdrop);
 	if (spec.inputs !== void 0 && spec.passes !== void 0) throw new Error(`[game] Filter "${id}": passes is counted by the engine for a filter with inputs.\n  Leave passes out.`);
-	const fallback = readFallback(id, spec.fallback, uniforms);
+	const fallback = readFallback(id, spec.fallback, uniforms, backdrop);
 	const passes = spec.passes ?? 1;
 	const padding = spec.padding ?? 0;
 	checkCost(id, passes, padding, uniforms);
 	checkCache(id, spec.cache);
+	if (backdrop) checkBackdrop(id, padding, spec.cache);
 	const area = readArea(id, spec.area);
 	const resolution = readResolution(id, spec.resolution);
 	const origin = callsCanvasPixel(spec.wgsl, spec.glsl) ? KEPT_ORIGIN : void 0;
-	const cache = cacheWithInputs(cacheOf(spec.wgsl, spec.glsl, spec.cache), inputs);
+	const cache = cacheWithInputs(cacheOf(spec.wgsl, spec.glsl, spec.cache, backdrop), inputs);
 	const filter = Object.freeze({
 		id,
-		source: assemble(uniforms, inputs, spec.wgsl, origin),
-		glsl: assembleGlsl(uniforms, inputs, spec.glsl, origin),
+		source: assemble(uniforms, inputs, spec.wgsl, origin, backdrop),
+		glsl: assembleGlsl(uniforms, inputs, spec.glsl, origin, backdrop),
 		uniforms,
 		passes,
 		padding,
@@ -38366,9 +39235,10 @@ function defineFilter(id, spec) {
 		cache,
 		origin,
 		resolution,
+		backdrop,
 		...area === void 0 ? {} : { area }
 	});
-	if (spec.cache !== false && (readsScreenIn(spec.wgsl) || readsScreenIn(spec.glsl))) screenReaders.add(filter);
+	if (!backdrop && spec.cache !== false && (readsScreenIn(spec.wgsl) || readsScreenIn(spec.glsl))) screenReaders.add(filter);
 	const defaults = Object.fromEntries([
 		...read.map((entry) => [entry.spec.name, entry.value]),
 		["enabled", true],
@@ -38828,7 +39698,9 @@ function brokenMark() {
 * asks the renderer for no frame. A destroy frees the uniform buffers first: `Filter.destroy()`
 * leaves them to a GC that runs after a minute (P10). A filter with inputs draws each place of its
 * chains through Pixi's public `applyFilter` from inside its own `apply`, into pooled textures given
-* back in a `finally`; a stand-in draws in place of a broken kind or instance.
+* back in a `finally`; a stand-in draws in place of a broken kind or instance. A backdrop is built
+* with Pixi's `blendRequired`: Pixi copies the canvas under the view before it draws, and the apply
+* places `sampleBack` on that copy (`activeBackTexture`) and starts the chains `from: "back"` there.
 */
 /**
 * The resolution of every filter but `Blur`: the render target's, so a filter draws at the
@@ -39001,11 +39873,21 @@ function createOurs(pixi, definition, value) {
 			type: input.clamp.type
 		};
 	}
+	if (definition.backdrop) {
+		structures[BACK_SCALE.name] = {
+			value: new Float32Array(BACK_SCALE.size),
+			type: BACK_SCALE.type
+		};
+		structures[BACK_CLAMP.name] = {
+			value: new Float32Array(BACK_CLAMP.size),
+			type: BACK_CLAMP.type
+		};
+	}
 	if (definition.origin !== void 0) structures[definition.origin.name] = {
 		value: new Float32Array(definition.origin.size),
 		type: definition.origin.type
 	};
-	const group = definition.uniforms.length > 0 || definition.inputs.length > 0 || definition.origin !== void 0 ? new pixi.UniformGroup(structures) : void 0;
+	const group = definition.uniforms.length > 0 || definition.inputs.length > 0 || definition.backdrop || definition.origin !== void 0 ? new pixi.UniformGroup(structures) : void 0;
 	const resources = group === void 0 ? {} : { fu: group };
 	const empty = pixi.Texture.EMPTY.source;
 	for (const input of definition.inputs) {
@@ -39019,7 +39901,8 @@ function createOurs(pixi, definition, value) {
 			glProgram,
 			resources,
 			padding: paddingOf$1(definition, value),
-			resolution: resolutionOf(definition.resolution)
+			resolution: resolutionOf(definition.resolution),
+			blendRequired: definition.backdrop
 		}),
 		group,
 		definition,
@@ -39278,10 +40161,85 @@ function createFilter(ectx, pixi, kind, value, probeMap) {
 		entity: 0
 	});
 	if (instance.kind === "wgsl" && instance.definition.inputs.length > 0) wireInputs(ectx, pixi, instance);
+	else if (instance.kind === "wgsl" && instance.definition.backdrop) wireBack(pixi, instance);
 	guardApply(ectx, instance, kind);
 	return instance;
 }
 /**
+* What was drawn under the view of the running apply: the texture Pixi's filter system copied the canvas under the
+* view's box into, or its empty texture outside a backdrop's pop.
+*
+* @param pixi - The module the renderer loaded.
+* @param manager - Pixi's filter system, inside an apply.
+* @returns The back texture.
+*/
+function backOf(pixi, manager) {
+	return manager.activeBackTexture ?? pixi.Texture.EMPTY;
+}
+/**
+* Writes the scale and the clamp that place a sample of the body's uv on a texture: one over the size of its backing,
+* and half a texel inside the part of it its frame covers, rounded to float32. Written only where a value differs, so
+* Pixi's bind group stays cached; no array is allocated.
+*
+* @param uniforms - The values of the uniform group.
+* @param scaleName - The `vec2` scale uniform.
+* @param clampName - The `vec4` clamp uniform.
+* @param texture - The texture the body samples through them.
+*/
+function writePlacement(uniforms, scaleName, clampName, texture) {
+	const { source } = texture;
+	const scale = uniforms[scaleName];
+	const clamp = uniforms[clampName];
+	const halfX = .5 / source.pixelWidth;
+	const halfY = .5 / source.pixelHeight;
+	if (scale instanceof Float32Array) {
+		writeAt(scale, 0, 1 / source.width, true);
+		writeAt(scale, 1, 1 / source.height, true);
+	}
+	if (clamp instanceof Float32Array) {
+		writeAt(clamp, 0, halfX, true);
+		writeAt(clamp, 1, halfY, true);
+		writeAt(clamp, 2, texture.frame.width / source.width - halfX, true);
+		writeAt(clamp, 3, texture.frame.height / source.height - halfY, true);
+	}
+}
+/**
+* Places a backdrop's `sampleBack` on the back texture of this apply. Pixi binds the texture itself (group 0
+* binding 3); the engine fills the scale and the clamp, since the copy's backing is sized at the resolution of the
+* surface under the view, the input's at the view's.
+*
+* @param body - The backdrop body.
+* @param back - What was drawn under the view.
+*/
+function bindBack(body, back) {
+	const uniforms = body.group?.uniforms;
+	if (uniforms !== void 0) writePlacement(uniforms, BACK_SCALE.name, BACK_CLAMP.name, back);
+}
+/**
+* The apply of a backdrop without inputs, as Pixi calls it: `sampleBack` placed on the copy Pixi made, then the body
+* drawn from the view's input.
+*
+* @param pixi - The module the renderer loaded.
+* @param body - The backdrop body.
+* @param manager - Pixi's filter system.
+* @param input - The view's input texture.
+* @param output - The output.
+* @param clearMode - Whether the output is cleared.
+*/
+function applyBack(pixi, body, manager, input, output, clearMode) {
+	bindBack(body, backOf(pixi, manager));
+	manager.applyFilter(body.filter, input, output, clearMode);
+}
+/**
+* Gives a backdrop body without inputs its own `apply`, which places `sampleBack` before it draws.
+*
+* @param pixi - The module the renderer loaded.
+* @param body - The body, just built.
+*/
+function wireBack(pixi, body) {
+	body.filter.apply = (manager, input, output, clearMode) => applyBack(pixi, body, manager, input, output, clearMode);
+}
+/**
 * The share of the resolution the last place of one input draws at.
 *
 * @param inputs - The chains of the instance.
@@ -39307,8 +40265,12 @@ function stagesOf(inputs) {
 * @param inputs - The chains of the instance.
 */
 function giveBack(pixi, inputs) {
-	for (const target of inputs.taken) pixi.TexturePool.returnTexture(target);
-	inputs.taken.length = 0;
+	const { taken } = inputs;
+	for (let index = 0; index < taken.length; index += 1) {
+		const target = taken[index];
+		if (target !== void 0) pixi.TexturePool.returnTexture(target);
+	}
+	while (taken.length > 0) taken.pop();
 }
 /**
 * Draws the places of one input, each from the one before, the first from `from`, into a pooled
@@ -39318,7 +40280,7 @@ function giveBack(pixi, inputs) {
 * @param inputs - The chains of the instance.
 * @param index - The input.
 * @param manager - Pixi's filter system, inside an active filter pass.
-* @param from - The view's input, or a kept picture.
+* @param from - The view's input, the copy of what was drawn under the view, or a kept picture.
 * @param resolution - The resolution of `from`.
 * @param target - Where the last place draws, instead of a pooled texture.
 * @returns The texture the last place drew into; `from` for an empty chain.
@@ -39360,20 +40322,7 @@ function bindInput(instance, index, last) {
 	const { resources } = instance.filter;
 	if (resources[input.texture] !== source) resources[input.texture] = source;
 	if (resources[input.sampler] !== source.style) resources[input.sampler] = source.style;
-	const scale = uniforms[input.scale.name];
-	const clamp = uniforms[input.clamp.name];
-	const halfX = .5 / source.pixelWidth;
-	const halfY = .5 / source.pixelHeight;
-	if (scale instanceof Float32Array) {
-		writeAt(scale, 0, 1 / source.width, true);
-		writeAt(scale, 1, 1 / source.height, true);
-	}
-	if (clamp instanceof Float32Array) {
-		writeAt(clamp, 0, halfX, true);
-		writeAt(clamp, 1, halfY, true);
-		writeAt(clamp, 2, last.frame.width / source.width - halfX, true);
-		writeAt(clamp, 3, last.frame.height / source.height - halfY, true);
-	}
+	writePlacement(uniforms, input.scale.name, input.clamp.name, last);
 }
 /**
 * Points every input's texture and sampler back at Pixi's empty texture: a filter never holds a
@@ -39394,11 +40343,24 @@ function unbindInputs(pixi, instance) {
 	}
 }
 /**
+* Tells whether the chains of an instance must run again for the resolutions of this apply: the view's input's for a
+* chain that starts from it, what was drawn under the view's for one that starts from back.
+*
+* @param inputs - The chains of the instance.
+* @param resolution - The resolution of the view's input.
+* @param backResolution - The resolution of the back; the input's for a filter that reads none.
+* @returns True when one the chains start from changed.
+*/
+function resolutionMoved(inputs, resolution, backResolution) {
+	return inputs.fromInput && resolution !== inputs.resolution || inputs.fromBack && backResolution !== inputs.backResolution;
+}
+/**
 * The apply of a filter with inputs, as Pixi calls it: a resolution change runs the chains once
-* at the new value, then every place draws, the last texture of each input is bound, and the main
-* body draws from the view's input. Held results are bound instead and no stage draws. The pooled
-* textures go back and the inputs are unbound in a `finally`, also when a place throws; a throw then
-* reaches the guard, which breaks the instance.
+* at the new value, then every place draws, each chain from the view's input or, `from: "back"`,
+* from the copy Pixi made of the canvas under the view, the last texture of each input is bound, a
+* backdrop's `sampleBack` is placed, and the main body draws from the view's input. Held results are
+* bound instead and no stage draws. The pooled textures go back and the inputs are unbound in a
+* `finally`, also when a place throws; a throw then reaches the guard, which breaks the instance.
 *
 * @param ectx - Domain context of the effects plugin.
 * @param pixi - The module the renderer loaded.
@@ -39411,16 +40373,23 @@ function unbindInputs(pixi, instance) {
 */
 function applyInputs(ectx, pixi, instance, inputs, manager, input, output, clearMode) {
 	const { resolution } = input.source;
-	if (inputs.held === void 0 && resolution !== inputs.resolution) evaluateInRender(ectx, pixi, instance, inputs, resolution);
+	const { definition } = instance;
+	const back = definition.backdrop ? backOf(pixi, manager) : input;
+	const backResolution = inputs.fromBack ? back.source.resolution : resolution;
+	if (inputs.held === void 0 && resolutionMoved(inputs, resolution, backResolution)) evaluateInRender(ectx, pixi, instance, inputs, resolution, backResolution);
 	if (instance.broken) {
 		drawBroken(instance, manager, input, output, clearMode);
 		return;
 	}
 	try {
 		for (let index = 0; index < inputs.places.length; index += 1) {
-			const last = inputs.held === void 0 ? drawChain(pixi, inputs, index, manager, input, resolution) : inputs.held[index] ?? input;
+			const fromBack = definition.inputs[index]?.from === "back";
+			const start = fromBack ? back : input;
+			const startResolution = fromBack ? backResolution : resolution;
+			const last = inputs.held === void 0 ? drawChain(pixi, inputs, index, manager, start, startResolution) : inputs.held[index] ?? input;
 			bindInput(instance, index, last);
 		}
+		if (definition.backdrop) bindBack(instance, back);
 		manager.applyFilter(instance.filter, input, output, clearMode);
 	} finally {
 		giveBack(pixi, inputs);
@@ -39442,7 +40411,7 @@ function applyInputs(ectx, pixi, instance, inputs, manager, input, output, clear
 */
 function drawInto(ectx, pixi, instance, inputs, manager, picture, targets) {
 	const { resolution } = picture.source;
-	if (!instance.broken && resolution !== inputs.resolution) evaluateInRender(ectx, pixi, instance, inputs, resolution);
+	if (!instance.broken && resolution !== inputs.resolution) evaluateInRender(ectx, pixi, instance, inputs, resolution, resolution);
 	if (instance.broken) return;
 	try {
 		for (let index = 0; index < inputs.places.length; index += 1) {
@@ -39462,10 +40431,14 @@ function drawInto(ectx, pixi, instance, inputs, manager, picture, targets) {
 * @param instance - The instance, just built.
 */
 function wireInputs(ectx, pixi, instance) {
-	const count = instance.definition.inputs.length;
+	const declared = instance.definition.inputs;
+	const count = declared.length;
 	const inputs = {
 		stale: true,
 		resolution: 0,
+		backResolution: 0,
+		fromInput: declared.some((input) => input.from === "input"),
+		fromBack: declared.some((input) => input.from === "back"),
 		version: 0,
 		context: { resolution: 0 },
 		places: Array.from({ length: count }, () => []),
@@ -39491,7 +40464,9 @@ function wireInputs(ectx, pixi, instance) {
 	instance.inputs = inputs;
 	instance.filter.apply = (manager, input, output, clearMode) => applyInputs(ectx, pixi, instance, inputs, manager, input, output, clearMode);
 	const { resolution } = instance.definition;
-	evaluate(ectx, pixi, instance, inputs, resolution > 0 ? resolution : ectx.deps.renderer.host.resolution());
+	const canvas = ectx.deps.renderer.host.resolution();
+	const own = resolution > 0 ? resolution : canvas;
+	evaluate(ectx, pixi, instance, inputs, own, inputs.fromBack ? canvas : own);
 }
 /**
 * Reads one property of a value a chain returned, whatever its type.
@@ -39685,9 +40660,10 @@ function placeSteps(pixi, inputs, index, steps) {
 	return changed || rebuilt;
 }
 /**
-* Runs the chain of every input for the instance's value at a resolution and places its steps.
+* Runs the chain of every input for the instance's value at a resolution and places its steps: a chain that starts
+* from the view's input at the input's resolution, one that starts from back at the back's.
 * A chain that throws or returns a step it may not draw breaks the instance (reason `"chain"`).
-* The version moves when a place, a scale, a stage uniform or the resolution changed; the passes
+* The version moves when a place, a scale, a stage uniform or a resolution changed; the passes
 * become the main body plus every place.
 *
 * @param ectx - Domain context of the effects plugin.
@@ -39695,14 +40671,15 @@ function placeSteps(pixi, inputs, index, steps) {
 * @param instance - The instance.
 * @param inputs - Its chains.
 * @param resolution - The resolution of the texture the view is drawn into.
+* @param backResolution - The resolution of what was drawn under the view; the input's for a filter that reads none.
 */
-function evaluate(ectx, pixi, instance, inputs, resolution) {
+function evaluate(ectx, pixi, instance, inputs, resolution, backResolution) {
 	const kind = ectx.state.kinds.get(instance.kindId);
-	let changed = resolution !== inputs.resolution;
+	let changed = resolution !== inputs.resolution || backResolution !== inputs.backResolution;
 	let passes = 1;
-	inputs.context.resolution = resolution;
 	for (const [index, input] of instance.definition.inputs.entries()) {
 		let steps;
+		inputs.context.resolution = input.from === "back" ? backResolution : resolution;
 		try {
 			steps = input.chain(instance.value, inputs.context);
 		} catch (error) {
@@ -39718,6 +40695,7 @@ function evaluate(ectx, pixi, instance, inputs, resolution) {
 		passes += steps.length;
 	}
 	inputs.resolution = resolution;
+	inputs.backResolution = backResolution;
 	inputs.stale = false;
 	instance.passes = passes;
 	if (changed) inputs.version += 1;
@@ -39732,9 +40710,10 @@ function evaluate(ectx, pixi, instance, inputs, resolution) {
 * @param instance - The instance.
 * @param inputs - Its chains.
 * @param resolution - The resolution of the texture the view is drawn into.
+* @param backResolution - The resolution of what was drawn under the view.
 */
-function evaluateInRender(ectx, pixi, instance, inputs, resolution) {
-	evaluate(ectx, pixi, instance, inputs, resolution);
+function evaluateInRender(ectx, pixi, instance, inputs, resolution, backResolution) {
+	evaluate(ectx, pixi, instance, inputs, resolution, backResolution);
 	ectx.state.filterSync.all = true;
 }
 /**
@@ -39756,12 +40735,13 @@ function refreshInputs(ectx, pixi, instance, off) {
 		inputs.retired.length = 0;
 	}
 	if (instance.broken || !instance.filter.enabled || off || !inputs.stale) return;
-	evaluate(ectx, pixi, instance, inputs, inputs.resolution);
+	evaluate(ectx, pixi, instance, inputs, inputs.resolution, inputs.backResolution);
 }
 /**
 * The body a stand-in of a dev build draws: the fallback with the striped mark over it, or the
 * mark alone. The pair draws the fallback into one pooled texture of the input's frame and
-* resolution, then the mark from it into the output, and gives the texture back in a `finally`.
+* resolution, then the mark from it into the output, and gives the texture back in a `finally`. A
+* backdrop fallback has its `sampleBack` placed first.
 *
 * @param pixi - The module the renderer loaded.
 * @param fallback - The checked fallback, or `undefined`.
@@ -39786,6 +40766,7 @@ function markedBody(pixi, fallback, value) {
 		request.height = input.frame.height;
 		request.resolution = input.source.resolution;
 		const pooled = pixi.TexturePool.getOptimalTexture(request);
+		if (body.definition.backdrop) bindBack(body, backOf(pixi, manager));
 		try {
 			manager.applyFilter(body.filter, input, pooled, true);
 			manager.applyFilter(mark.filter, pooled, output, clearMode);
@@ -39815,7 +40796,10 @@ function createStandIn(ectx, pixi, kind, value) {
 	const usable = status === "ok" ? fallback : void 0;
 	let body;
 	if (typeof __MOKU_GAME_DEV__ !== "undefined" && __MOKU_GAME_DEV__ === true) body = markedBody(pixi, usable, value);
-	else if (usable !== void 0) body = createOurs(pixi, usable, value);
+	else if (usable !== void 0) {
+		body = createOurs(pixi, usable, value);
+		if (usable.backdrop) wireBack(pixi, body);
+	}
 	if (body === void 0) return void 0;
 	body.filter.enabled = value.enabled;
 	body.areaStale = body.definition.area !== void 0;
@@ -40392,7 +41376,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");
@@ -40418,7 +41402,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
@@ -41001,14 +41985,27 @@ function cacheOfInstance(instance) {
 	return instance.kind === "wgsl" ? instance.definition.cache : CORE_CACHE[instance.kind];
 }
 /**
+* Tells whether one of the inputs of a definition starts from the view's own input: its chain draws a copy of the
+* view's subtree. A chain from back draws what was drawn under the view instead.
+*
+* @param definition - The definition.
+* @returns True when one does.
+*/
+function readsOwnInput(definition) {
+	const { inputs } = definition;
+	for (let index = 0; index < inputs.length; index += 1) if (inputs[index]?.from === "input") return true;
+	return false;
+}
+/**
 * Whether an instance shows a blurred copy of what is under it (spec 23 P8.5): the built-in `Blur`, or one of ours
-* with inputs. The predicate an overlay's held loops read (spec 22).
+* with an input drawn from its own subtree. A backdrop whose chains start from back blurs the scene under the view,
+* not the view: an overlay holds no loops for it. The predicate an overlay's held loops read (spec 22).
 *
 * @param instance - The instance.
 * @returns True, or `undefined` for every other filter (the slot leaves the key out).
 */
 function blursOf(instance) {
-	return instance.kind === "blur" || instance.kind === "wgsl" && instance.definition.inputs.length > 0 ? true : void 0;
+	return instance.kind === "blur" || instance.kind === "wgsl" && readsOwnInput(instance.definition) ? true : void 0;
 }
 /**
 * Tells whether a debug switch turned a kind off (`effects.diagnostics.disable`). The guard is
@@ -42035,7 +43032,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()`
@@ -42078,7 +43075,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;
@@ -44185,6 +45182,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.
@@ -44284,6 +45285,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.
 */
@@ -44293,8 +45301,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
@@ -44377,6 +45389,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.
@@ -45400,6 +46450,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.
 *
@@ -45418,7 +46482,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.
 */
@@ -45429,16 +46493,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.
@@ -45446,9 +46524,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
@@ -45460,16 +46539,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.
@@ -45495,13 +46600,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) {
@@ -45568,13 +46675,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.
@@ -45597,7 +46715,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;
@@ -45770,6 +46891,7 @@ function createInputState(_ctx) {
 		phase: "idle",
 		pointerId: void 0,
 		moved: false,
+		caught: false,
 		entity: void 0,
 		key: void 0,
 		start: {
@@ -49179,6 +50301,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`.
 */
@@ -50911,8 +52058,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.
@@ -50922,7 +52070,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.
@@ -53348,15 +54539,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.
@@ -53371,6 +54570,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.
 *
@@ -53411,6 +54618,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
@@ -53448,23 +54660,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
 	}];
 }
@@ -53543,16 +54756,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);
 }
 /**
@@ -53575,16 +54787,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()];
@@ -53803,6 +55027,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.
@@ -53899,13 +55124,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;
 	}
@@ -54042,11 +55270,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.
 	*/
@@ -54063,7 +55292,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.
@@ -54073,7 +55303,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));
 	}
@@ -54152,6 +55382,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);
@@ -54172,7 +55403,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
@@ -54829,8 +56075,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();
@@ -54838,13 +56086,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);
@@ -54870,16 +56119,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);
@@ -55056,7 +56311,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;
@@ -55073,6 +56329,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);
@@ -55093,12 +56350,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();
 		},
@@ -56203,25 +57473,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.
@@ -56235,106 +57543,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;
 }
 /**
-* Writes an offset and the range it was clamped to, and moves the content there.
+* 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);
+}
+/**
+* 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
@@ -56549,7 +58242,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.
@@ -56558,7 +58253,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);
 }
 /**
@@ -56621,8 +58317,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),
@@ -57198,12 +58896,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");
@@ -57250,6 +58948,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();
@@ -57540,7 +59239,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.
@@ -57551,7 +59250,8 @@ function createUiApi(ctx) {
 		tree: jsx.tree,
 		find: jsx.find,
 		lint: jsx.lint,
-		fill: jsx.fill
+		fill: jsx.fill,
+		scroll: jsx.scroll
 	};
 }
 //#endregion
@@ -57653,8 +59353,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.
 */
@@ -57662,13 +59362,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 {
@@ -57678,10 +59404,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: []
@@ -57743,9 +59471,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
@@ -59151,6 +60880,7 @@ function cubicBezier(x1, y1, x2, y2) {
 * | renderer | preference | "webgpu", WebGL is Pixi's fallback |
 * | renderer | aspect | { min: 4/3, max: 21/9 }; shallow merge: a game that sets `aspect` gives both fields |
 * | renderer | poolLimit | 256 |
+* | renderer | adaptiveScale | { floor: 0.75, devices: "phone" }, the render scale of the adaptive frame rate on a GPU-bound phone; false keeps the resolution; shallow merge: a game that sets it gives both fields |
 * | renderer | unsupportedMessage | "This device cannot run the game." |
 * | renderer | loadPixi | () => import("pixi.js") |
 * | renderer | debug | { nineSlice: false, verifyFrames: false, kept: true, overdraw: false }; shallow merge: a game that sets `debug` replaces the whole object, and a switch it leaves out is off, except `kept`, which stays on unless set to false; `verifyFrames` and `overdraw` work in dev and debug builds only |
@@ -59315,4 +61045,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 };