@moku-labs/game 0.15.32 → 0.15.34

package/dist/{src-5qdNjLKN.mjs → src-DFhuDrm7.mjs}

@@ -27678,7 +27678,7 @@ function writeBlend(sctx, entity, object, blend) {
 * @param texture - The texture to draw, or `undefined` to keep the one it has.
 * @param tint - The tint.
 */
-function writeLook(sctx, entity, object, texture, tint) {
+function writeLook$1(sctx, entity, object, texture, tint) {
 	if (texture !== void 0 && object.texture !== texture) {
 		markView(sctx, entity);
 		object.texture = texture;
@@ -27701,7 +27701,7 @@ function writeLook(sctx, entity, object, texture, tint) {
 */
 function drawPlaceholder(sctx, entity, object, view, value, texture) {
 	const box = boxInto(LAYOUT.box, PLACEHOLDER_BOX, value);
-	writeLook(sctx, entity, object, texture, PLACEHOLDER_TINT);
+	writeLook$1(sctx, entity, object, texture, PLACEHOLDER_TINT);
 	writePoint(sctx, entity, object.anchor, value.anchor.x, value.anchor.y);
 	view.drawScale.x = box.width;
 	view.drawScale.y = box.height;
@@ -27842,10 +27842,10 @@ function writeSprite(sctx, entity, view) {
 	const layout = layoutSpriteInto(LAYOUT, texture, value);
 	if (layout.cover) {
 		const cover = coverTexture(sctx, entity, value.texture, texture, layout.box, layout.crop);
-		writeLook(sctx, entity, object, cover.texture, value.tint);
+		writeLook$1(sctx, entity, object, cover.texture, value.tint);
 		showCover(sctx, entity, view, cover.frameKey);
 	} else {
-		writeLook(sctx, entity, object, texture, value.tint);
+		writeLook$1(sctx, entity, object, texture, value.tint);
 		showCover(sctx, entity, view, "");
 	}
 	writePoint(sctx, entity, object.anchor, layout.anchor.x, layout.anchor.y);
@@ -33535,6 +33535,145 @@ function dropEnded(list) {
 	while (list.length > kept) list.pop();
 }
 //#endregion
+//#region src/plugins/anim/timeline/checks.ts
+/**
+* Checks the keyframe segments of a `tween` step: at least one, every `at` in 0..1, each after the
+* one before, and the last at 1, because `to` is where the walk lands.
+*
+* @param component - Name of the component the step drives, for the error.
+* @param segments - The segments the author gave.
+* @throws {Error} When the list is empty, an `at` is out of range or out of order, or the last
+*   segment ends before 1.
+* @example
+* ```ts
+* checkSegments("Transform", [{ at: 0.5 }, { at: 1 }]); // returns; [{ at: 0.5 }] throws
+* ```
+*/
+function checkSegments(component, segments) {
+	if (segments.length === 0) throw new Error(`[game] A tween of ${component} has no segments.\n  Give it at least one segment, the last one at 1.`);
+	let previous = Number.NEGATIVE_INFINITY;
+	for (const { at } of segments) {
+		if (Number.isNaN(at) || at < 0 || at > 1) throw new Error(`[game] A tween of ${component} has a segment at ${at}.\n  Keep every at between 0 and 1.`);
+		if (at <= previous) throw new Error(`[game] A tween of ${component} has its segments out of order at ${at}.\n  Sort the segments by at, each one after the one before.`);
+		previous = at;
+	}
+	if (previous !== 1) throw new Error(`[game] A tween of ${component} ends its last segment at ${previous}.\n  End the last segment at 1: to is where the walk lands.`);
+}
+/**
+* Checks the space of a keyframe walk: an additive one names offsets, and the root space would
+* turn each offset as if it were a root position, so a chest under a slot at root y 500 would jump
+* by about 500 at its first segment. An additive walk stays in the local space.
+*
+* @param component - Name of the component the step drives, for the error.
+* @param additive - Whether the walk adds offsets.
+* @param space - The space the step names.
+* @throws {Error} When an additive walk names the root space.
+* @example
+* ```ts
+* checkWalkSpace("Transform", true, "local"); // returns; (…, true, "root") throws
+* ```
+*/
+function checkWalkSpace(component, additive, space) {
+	if (!additive || space === "local") return;
+	throw new Error(`[game] An additive tween of ${component} walks segments in the root space.\n  Use space "local" for an additive walk.`);
+}
+/**
+* Checks the repeat of a `tween` step: a whole number of extra runs, 0 or more, or `"forever"`.
+*
+* @param component - Name of the component the step drives, for the error.
+* @param repeat - The repeat the author gave.
+* @throws {Error} When the repeat is negative, not whole or not a number.
+* @example
+* ```ts
+* checkRepeat("Transform", "forever"); // returns; checkRepeat("Transform", 1.5) throws
+* ```
+*/
+function checkRepeat(component, repeat) {
+	if (repeat === "forever" || Number.isInteger(repeat) && repeat >= 0) return;
+	throw new Error(`[game] A tween of ${component} has repeat ${repeat}.\n  Give repeat a whole number of extra runs, 0 or more, or "forever".`);
+}
+/**
+* Tells whether a step never ends by itself: a `tween` that repeats forever, a `parallel` or a
+* `sequence` that holds one, and a `use` of one. Only a cancel or a finish ends it.
+*
+* @param step - The step to look into.
+* @returns True when the step never ends by itself.
+* @example
+* ```ts
+* neverEnds(wait(100)); // false
+* neverEnds(tween(1_048_576, Transform, { y: 0 }, { ms: 2400, repeat: "forever" })); // true
+* ```
+*/
+function neverEnds(step) {
+	switch (step.kind) {
+		case "tween": return step.repeat === "forever";
+		case "sequence":
+		case "parallel": return step.steps.some((child) => neverEnds(child));
+		case "use": return neverEnds(step.step);
+		default: return false;
+	}
+}
+/**
+* Checks the children of a `sequence`: a child that never ends may only be the last one, since
+* the children after it would never play. A `parallel` takes one anywhere.
+*
+* @param steps - The children, in order.
+* @throws {Error} When a child that never ends has another child after it.
+* @example
+* ```ts
+* checkSequence([wait(100), mark("landed")]); // returns; a forever tween before the mark throws
+* ```
+*/
+function checkSequence(steps) {
+	for (let index = 0; index < steps.length - 1; index++) {
+		const step = steps[index];
+		if (step !== void 0 && neverEnds(step)) throw new Error(`[game] Step ${index + 1} of a sequence never ends, so the steps after it would never play.\n  Put the forever step last, or run it in a parallel.`);
+	}
+}
+/**
+* Tells whether a step loops a frame list for ever: a `frames` step with `loop`, or a `parallel`,
+* a `sequence` or a `use` that holds one where it never lets go.
+*
+* @param step - The step to look into.
+* @returns True when a looping frame list keeps the step from ending.
+* @example
+* ```ts
+* loopsFrames(frames(1_048_576, { keys: ["fx.spark-1"], fps: 12, loop: true })); // true
+* ```
+*/
+function loopsFrames(step) {
+	switch (step.kind) {
+		case "frames": return step.loop;
+		case "parallel": return step.steps.some((child) => loopsFrames(child));
+		case "sequence": {
+			const last = step.steps.at(-1);
+			return last !== void 0 && loopsFrames(last);
+		}
+		case "use": return loopsFrames(step.step);
+		default: return false;
+	}
+}
+/**
+* Tells whether a step tree holds a `sequence` whose step before the last loops a frame list for
+* ever, so the steps after it never play. A forever `tween` there already throws when it is built;
+* a looping `frames` only warns, while games written before the rule are fixed.
+*
+* @param step - The root of the tree.
+* @returns True when a looping frame list blocks the rest of a sequence somewhere in the tree.
+* @example
+* ```ts
+* loopBlocksSequence(sequence(frames(1_048_576, { keys: ["fx.spark-1"], fps: 12, loop: true }), mark("lit"))); // true
+* ```
+*/
+function loopBlocksSequence(step) {
+	switch (step.kind) {
+		case "sequence": return step.steps.slice(0, -1).some((child) => loopsFrames(child)) || step.steps.some((child) => loopBlocksSequence(child));
+		case "parallel": return step.steps.some((child) => loopBlocksSequence(child));
+		case "use": return loopBlocksSequence(step.step);
+		default: return false;
+	}
+}
+//#endregion
 //#region src/plugins/anim/timeline/play.ts
 /**
 * @file anim/timeline — one running timeline: the bookkeeping around a cursor. It builds the step
@@ -33640,6 +33779,20 @@ function endTimeline(actx, running, finished) {
 	running.resolve();
 }
 /**
+* Warns once per animation, in a dev build, when a looping `frames` step stands before another step of a `sequence`:
+* the steps after it never play. A warning, not an error, while the games written before the rule are fixed.
+*
+* @param actx - Domain context of the anim plugin.
+* @param animation - The id of the animation that is played.
+* @param step - Its built step tree.
+*/
+function warnLoopBlocks(actx, animation, step) {
+	if (typeof __MOKU_GAME_DEV__ === "undefined" || !__MOKU_GAME_DEV__) return;
+	if (actx.state.warnedLoops.has(animation) || !loopBlocksSequence(step)) return;
+	actx.state.warnedLoops.add(animation);
+	actx.log.warn("anim:loop-blocks-sequence", { animation });
+}
+/**
 * Builds the step tree of an animation with the given targets and starts it. The build runs here,
 * once per play, so the same animation may play twice at once, each play with its own spawn table.
 * Every `{ projection, key }` target is resolved here, once: each step writes the entity that held
@@ -33656,6 +33809,7 @@ function startTimeline(actx, rt, definition, slots) {
 	const spawned = emptySpawnTable();
 	const step = definition.build(slots, { at: (target) => restPoseOf(actx, target, spawned) });
 	assertUniqueSpawns(definition.id, step);
+	warnLoopBlocks(actx, definition.id, step);
 	const id = actx.state.nextId;
 	actx.state.nextId += 1;
 	const cursor = createCursor(step);
@@ -35220,7 +35374,8 @@ function createAnimState(ctx) {
 		framesHeld: emptyMap$5(),
 		frameMutes: emptyMap$5(),
 		offFrames: [],
-		loopsHeld: void 0
+		loopsHeld: void 0,
+		warnedLoops: emptySet$3()
 	};
 }
 /**
@@ -49917,102 +50072,6 @@ function createHandlers$1(ctx) {
 	} };
 }
 //#endregion
-//#region src/plugins/anim/timeline/checks.ts
-/**
-* Checks the keyframe segments of a `tween` step: at least one, every `at` in 0..1, each after the
-* one before, and the last at 1, because `to` is where the walk lands.
-*
-* @param component - Name of the component the step drives, for the error.
-* @param segments - The segments the author gave.
-* @throws {Error} When the list is empty, an `at` is out of range or out of order, or the last
-*   segment ends before 1.
-* @example
-* ```ts
-* checkSegments("Transform", [{ at: 0.5 }, { at: 1 }]); // returns; [{ at: 0.5 }] throws
-* ```
-*/
-function checkSegments(component, segments) {
-	if (segments.length === 0) throw new Error(`[game] A tween of ${component} has no segments.\n  Give it at least one segment, the last one at 1.`);
-	let previous = Number.NEGATIVE_INFINITY;
-	for (const { at } of segments) {
-		if (Number.isNaN(at) || at < 0 || at > 1) throw new Error(`[game] A tween of ${component} has a segment at ${at}.\n  Keep every at between 0 and 1.`);
-		if (at <= previous) throw new Error(`[game] A tween of ${component} has its segments out of order at ${at}.\n  Sort the segments by at, each one after the one before.`);
-		previous = at;
-	}
-	if (previous !== 1) throw new Error(`[game] A tween of ${component} ends its last segment at ${previous}.\n  End the last segment at 1: to is where the walk lands.`);
-}
-/**
-* Checks the space of a keyframe walk: an additive one names offsets, and the root space would
-* turn each offset as if it were a root position, so a chest under a slot at root y 500 would jump
-* by about 500 at its first segment. An additive walk stays in the local space.
-*
-* @param component - Name of the component the step drives, for the error.
-* @param additive - Whether the walk adds offsets.
-* @param space - The space the step names.
-* @throws {Error} When an additive walk names the root space.
-* @example
-* ```ts
-* checkWalkSpace("Transform", true, "local"); // returns; (…, true, "root") throws
-* ```
-*/
-function checkWalkSpace(component, additive, space) {
-	if (!additive || space === "local") return;
-	throw new Error(`[game] An additive tween of ${component} walks segments in the root space.\n  Use space "local" for an additive walk.`);
-}
-/**
-* Checks the repeat of a `tween` step: a whole number of extra runs, 0 or more, or `"forever"`.
-*
-* @param component - Name of the component the step drives, for the error.
-* @param repeat - The repeat the author gave.
-* @throws {Error} When the repeat is negative, not whole or not a number.
-* @example
-* ```ts
-* checkRepeat("Transform", "forever"); // returns; checkRepeat("Transform", 1.5) throws
-* ```
-*/
-function checkRepeat(component, repeat) {
-	if (repeat === "forever" || Number.isInteger(repeat) && repeat >= 0) return;
-	throw new Error(`[game] A tween of ${component} has repeat ${repeat}.\n  Give repeat a whole number of extra runs, 0 or more, or "forever".`);
-}
-/**
-* Tells whether a step never ends by itself: a `tween` that repeats forever, a `parallel` or a
-* `sequence` that holds one, and a `use` of one. Only a cancel or a finish ends it.
-*
-* @param step - The step to look into.
-* @returns True when the step never ends by itself.
-* @example
-* ```ts
-* neverEnds(wait(100)); // false
-* neverEnds(tween(1_048_576, Transform, { y: 0 }, { ms: 2400, repeat: "forever" })); // true
-* ```
-*/
-function neverEnds(step) {
-	switch (step.kind) {
-		case "tween": return step.repeat === "forever";
-		case "sequence":
-		case "parallel": return step.steps.some((child) => neverEnds(child));
-		case "use": return neverEnds(step.step);
-		default: return false;
-	}
-}
-/**
-* Checks the children of a `sequence`: a child that never ends may only be the last one, since
-* the children after it would never play. A `parallel` takes one anywhere.
-*
-* @param steps - The children, in order.
-* @throws {Error} When a child that never ends has another child after it.
-* @example
-* ```ts
-* checkSequence([wait(100), mark("landed")]); // returns; a forever tween before the mark throws
-* ```
-*/
-function checkSequence(steps) {
-	for (let index = 0; index < steps.length - 1; index++) {
-		const step = steps[index];
-		if (step !== void 0 && neverEnds(step)) throw new Error(`[game] Step ${index + 1} of a sequence never ends, so the steps after it would never play.\n  Put the forever step last, or run it in a parallel.`);
-	}
-}
-//#endregion
 //#region src/plugins/anim/timeline/steps.ts
 /**
 * Every haptic tick `haptic(kind)` takes, in one frozen list: the three impacts, the selection
@@ -56667,6 +56726,243 @@ function forgetInstances(state, identity) {
 	for (const key of state.instances.keys()) if (key === identity || key.startsWith(`${identity}|`)) state.instances.delete(key);
 }
 //#endregion
+//#region src/plugins/ui/jsx/look.ts
+/**
+* What moved, from whether the numbers and the other fields of a look did.
+*
+* @param numbers - A numeric field moved.
+* @param others - Another field moved.
+* @returns What moved.
+* @example
+* ```ts
+* moveOf(true, false); // "numbers"
+* ```
+*/
+function moveOf(numbers, others) {
+	if (numbers) return others ? "both" : "numbers";
+	return others ? "others" : "none";
+}
+/**
+* Writes the visual of a live element whose `change` hook of that visual may play (F85). The look
+* of this render is compared with the one the element was last written with: the same look writes
+* nothing, so a running motion of the hook survives a render that changes nothing of it; other
+* fields alone are written at once; a look whose numbers moved plays the hook with the look before
+* and this one. When the hook returns a motion the track brings the numbers home and the other
+* fields are written only when they moved too; with none the look is written whole. ui's part of
+* a numbers-only change allocates nothing (`__tests__/perf/look-write.perf.ts`).
+*
+* @param writer - The reconciler's side: the pass, the values, the play and the writes.
+* @param element - The live element; its `lookPass` and `lookFrom` note a play of this pass.
+* @param value - The visual of this render.
+* @param previous - The look the element was last written with.
+* @param next - The fields of the visual of this render.
+*/
+function writeLook(writer, element, value, previous, next) {
+	const moved = lookMoved(value.type, previous, next);
+	if (moved === "none") return;
+	if (moved === "others") {
+		writer.others(element, value.type, next);
+		return;
+	}
+	const from = element.lookPass === writer.pass && element.lookFrom !== void 0 ? element.lookFrom : previous;
+	writer.values.previous = from;
+	writer.values.next = next;
+	if (!writer.play(element, value.type.componentName, writer.values)) {
+		writer.whole(element, value);
+		return;
+	}
+	element.lookPass = writer.pass;
+	element.lookFrom = from;
+	if (moved === "both") writer.others(element, value.type, next);
+}
+/**
+* Compares the value of a visual a live element was last written with and the value of this
+* render: whether its numeric fields moved, its other fields, both or none. Every
+* visual has its own comparator that reads its fields by name, so each read site meets one shape
+* of value and a fractional number is compared unboxed: per write of an element with a `change`
+* hook of its visual, 0 B (`__tests__/perf/look-moved.perf.ts`). A field the new value leaves out
+* stays on the entity, as a patch leaves it. A type that is none of the four visuals is reported
+* as `"numbers"`: its hook decides.
+*
+* @param type - The component type of the visual.
+* @param previous - The value the element was last written with.
+* @param next - The value of this render.
+* @returns What moved.
+* @example
+* ```ts
+* lookMoved(Shape, Shape({ kind: "arc", sweep: 0.25 }).value, Shape({ kind: "arc", sweep: 0.5 }).value); // "numbers"
+* ```
+*/
+function lookMoved(type, previous, next) {
+	if (type === Shape) return shapeMoved(previous, next);
+	if (type === Sprite) return spriteMoved(previous, next);
+	if (type === NineSlice) return nineSliceMoved(previous, next);
+	if (type === Text) return textMoved(previous, next);
+	return "numbers";
+}
+/**
+* What moved in a `Shape`: its sizes, colours, alphas, radius, stroke and dash are numbers, and
+* the sweep of two arcs; its kind, its clip and the ends of two arcs are not. Only an arc carries
+* `sweep` and `cap`, so they are read between two arcs alone.
+*
+* @param before - The look last written.
+* @param after - The look of this render.
+* @returns What moved.
+* @example
+* ```ts
+* shapeMoved(Shape({ kind: "arc", sweep: 0.2, cap: "round" }).value, Shape({ kind: "arc", sweep: 0.2, cap: "butt" }).value); // "others"
+* ```
+*/
+function shapeMoved(before, after) {
+	const numbers = before.w !== after.w || before.h !== after.h || before.fill !== after.fill || before.fillAlpha !== after.fillAlpha || before.alpha !== after.alpha || before.radius !== after.radius || before.stroke !== after.stroke || before.strokeWidth !== after.strokeWidth || before.dash !== after.dash;
+	const arcs = before.kind === "arc" && after.kind === "arc";
+	const others = before.kind !== after.kind || before.clip !== after.clip || arcs && before.cap !== after.cap;
+	return moveOf(numbers || arcs && before.sweep !== after.sweep, others);
+}
+/**
+* What moved in a `Sprite`: its tint, alpha and size are numbers; its texture, fit, anchor and
+* blend are not.
+*
+* @param before - The look last written.
+* @param after - The look of this render.
+* @returns What moved.
+* @example
+* ```ts
+* spriteMoved(Sprite({ texture: "ui.coin", width: 40 }).value, Sprite({ texture: "ui.coin", width: 80 }).value); // "numbers"
+* ```
+*/
+function spriteMoved(before, after) {
+	return moveOf(before.tint !== after.tint || before.alpha !== after.alpha || before.width !== after.width || before.height !== after.height, before.texture !== after.texture || before.fit !== after.fit || before.anchor.x !== after.anchor.x || before.anchor.y !== after.anchor.y || after.blend !== void 0 && before.blend !== after.blend);
+}
+/**
+* What moved in a `NineSlice`: its size, alpha and tint are numbers; its texture, outline, clip,
+* rim and blend are not.
+*
+* @param before - The look last written.
+* @param after - The look of this render.
+* @returns What moved.
+* @example
+* ```ts
+* nineSliceMoved(NineSlice({ texture: "ui.panel" }).value, NineSlice({ texture: "ui.panel", hollow: true }).value); // "others"
+* ```
+*/
+function nineSliceMoved(before, after) {
+	return moveOf(before.width !== after.width || before.height !== after.height || before.alpha !== after.alpha || before.tint !== after.tint, before.texture !== after.texture || before.debug !== after.debug || before.clip !== after.clip || after.hollow !== void 0 && before.hollow !== after.hollow || after.blend !== void 0 && before.blend !== after.blend);
+}
+/**
+* What moved in a `Text`: its alpha and the box of two texts that wrap at one are numbers; its
+* content, style, bind and anchor are not. A message or a bind written anew compares by what it
+* says. `resolved` is the text plugin's and never compared.
+*
+* @param before - The look last written.
+* @param after - The look of this render.
+* @returns What moved.
+* @example
+* ```ts
+* textMoved(Text({ content: "Play" }).value, Text({ content: "Play", alpha: 0.5 }).value); // "numbers"
+* ```
+*/
+function textMoved(before, after) {
+	const boxes = "box" in before && "box" in after;
+	return moveOf(before.alpha !== after.alpha || boxes && before.box !== after.box, !boxes && "box" in after || before.style !== after.style || before.anchor.x !== after.anchor.x || before.anchor.y !== after.anchor.y || before.content !== after.content && !sameMessage(before.content, after.content) || before.bind !== after.bind && !sameBind(before.bind, after.bind));
+}
+/**
+* Tells whether two contents of a text say the same: two messages of one key with the same
+* arguments, each compared by identity. Two strings are the same only when they are equal.
+*
+* @param before - The content last written.
+* @param after - The content of this render.
+* @returns True when the text says the same.
+* @example
+* ```ts
+* sameMessage({ key: "hud.coins", params: { n: 5 } }, { key: "hud.coins", params: { n: 5 } }); // true
+* ```
+*/
+function sameMessage(before, after) {
+	if (typeof before === "string" || typeof after === "string") return before === after;
+	return before.key === after.key && sameArguments(before.params, after.params);
+}
+/**
+* Tells whether the arguments of two messages hold the same values under the same names: a
+* `for…in` over each, every value compared by identity.
+*
+* @param before - The arguments last written.
+* @param after - The arguments of this render.
+* @returns True when both hold the same.
+* @example
+* ```ts
+* sameArguments({ n: 5 }, { n: 6 }); // false
+* ```
+*/
+function sameArguments(before, after) {
+	if (before === after) return true;
+	if (before === void 0 || after === void 0) return false;
+	for (const name in after) if (!(name in before) || before[name] !== after[name]) return false;
+	for (const name in before) if (!(name in after)) return false;
+	return true;
+}
+/**
+* Tells whether two binds of a text show the same field of the same component in one format.
+*
+* @param before - The bind last written.
+* @param after - The bind of this render.
+* @returns True when both show the same.
+* @example
+* ```ts
+* sameBind({ component: "Counter", field: "value", format: "int" }, { component: "Counter", field: "value", format: "mm:ss" }); // false
+* ```
+*/
+function sameBind(before, after) {
+	if (before === void 0 || after === void 0) return before === after;
+	return before.component === after.component && before.field === after.field && before.format === after.format;
+}
+/**
+* The fields of a visual a render writes directly while its `change` hook brings the numbers
+* home: every field that is no number, without the ones the component type gives to a plugin.
+*
+* @param value - The value of this render.
+* @param owned - The fields the component type gives to a plugin.
+* @returns The patch, or `undefined` when every field is a number.
+* @example
+* ```ts
+* otherFields({ kind: "arc", w: 32, sweep: 0.5, cap: "butt" }, []); // { kind: "arc", cap: "butt" }
+* ```
+*/
+function otherFields(value, owned) {
+	let patch;
+	for (const [field, entry] of Object.entries(value)) {
+		if (typeof entry === "number" || owned.includes(field)) continue;
+		patch ??= {};
+		patch[field] = entry;
+	}
+	return patch;
+}
+/**
+* Names, once per element and hook name, every `change` hook of an element `ui` never plays: not
+* `Box`, not `Transform`, not the visual it is drawn with, not an extra of its `components` prop.
+* Read when the element mounts and when its `motion` prop changes, against what it carries then.
+* Its effect is the log and the note: each such hook is logged at warn as `ui:change-never-plays`
+* `{ key, name }` and noted in the element's `warned`, which keeps it from being named again.
+*
+* @param ctx - Domain context of the ui plugin.
+* @param element - The live element, its visual and its extras written.
+*/
+function warnIdleChanges(ctx, element) {
+	const change = element.motion?.change;
+	if (change === void 0) return;
+	const visual = element.look?.type.componentName;
+	for (const name of Object.keys(change)) {
+		const plays = name === "Box" || name === "Transform" || name === visual || element.extras.has(name);
+		const once = `change-never-plays:${name}`;
+		if (plays || element.warned.has(once)) continue;
+		element.warned.add(once);
+		ctx.log.warn("ui:change-never-plays", {
+			key: element.key ?? element.identity,
+			name
+		});
+	}
+}
+//#endregion
 //#region src/plugins/ui/jsx/order.ts
 /**
 * @file ui — the draw order of a child element among its siblings: a composite `Order` below its `zIndex` step.
@@ -57259,6 +57555,8 @@ function concatTypes(...lists) {
 }
 /** Every type a live element may carry and drop again: the visuals, then the inputs. */
 const LIVE_TYPES = concatTypes(VISUALS, INPUTS);
+/** What the values of a look write hold before the first play: no look. */
+const NO_LOOK = Object.freeze({});
 /** 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. */
@@ -57686,6 +57984,16 @@ function entitySet(entities) {
 	return new Set(entities);
 }
 /**
+* Collects the identities of the children of one render. Its own function, because lint rule L5
+* refuses a collection built inside an exported declaration.
+*
+* @param identities - The identities, in markup order.
+* @returns The identities as a set.
+*/
+function identitySet(identities) {
+	return new Set(identities);
+}
+/**
 * Tells whether an element whose `Box` just came arrives with an enter: new, and not a row a
 * range change scrolled in.
 *
@@ -57731,6 +58039,16 @@ function createReconciler(ctx, modules, fields) {
 	let rendered = 0;
 	const isAside = (entity) => ctx.deps.world.projection.isBuilding(entity);
 	let released = false;
+	const lookWriter = {
+		pass: 0,
+		values: {
+			previous: NO_LOOK,
+			next: NO_LOOK
+		},
+		play: (element, name, values) => modules.layout.changeExtra(element, name, values, hintOf(state, element)),
+		whole: (element, value) => writeValue(element, value),
+		others: (element, type, next) => writeOthers(element, next, type)
+	};
 	/**
 	* 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.
@@ -57822,7 +58140,8 @@ function createReconciler(ctx, modules, fields) {
 			extraHandles: handleMap(),
 			warnedOwned: nameSet(),
 			warned: nameSet(),
-			scrolledIn: range.isMoving()
+			scrolledIn: range.isMoving(),
+			look: void 0
 		};
 		state.styled += 1;
 		state.elements.set(entity, element);
@@ -57976,12 +58295,13 @@ 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`, `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`.
+	* back, and a button that became disabled stops answering the gate; a visual traded away takes
+	* the motion of its `change` hook with it. `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 is recorded as the rest of the visual before it is written, so
+	* the rest the world holds is always the one the element is drawn with (a restore brings it back
+	* to exactly that) and a `change` hook of the visual brings it home with `toRest`. The extras of
+	* the `components` prop are diffed last. Every call is one write pass of `UiCounters`.
 	*
 	* @param element - The element that changed.
 	*/
@@ -57990,13 +58310,50 @@ function createReconciler(ctx, modules, fields) {
 		writeOrder(element);
 		const visuals = visualOf$1(element);
 		const inputs = inputOf(element);
-		for (const type of LIVE_TYPES) if (!carries(visuals, type) && !carries(inputs, type) && ecs.has(element.entity, type)) ecs.remove(element.entity, type);
-		for (const value of visuals) writeValue(element, value);
-		for (const value of inputs) writeValue(element, value);
+		for (const type of LIVE_TYPES) if (!carries(visuals, type) && !carries(inputs, type) && ecs.has(element.entity, type)) {
+			cancelExtra(element, type.componentName);
+			ecs.remove(element.entity, type);
+		}
 		for (const value of visuals) recordRest(ctx, element, value);
+		for (const value of visuals) writeVisual(element, value);
+		for (const value of inputs) writeValue(element, value);
 		writeExtras(element);
 	}
 	/**
+	* Writes the visual of a live element. Without a `change` hook of its name, or for a visual
+	* traded in, it is written like every other value. With one, the look decides what is written
+	* (`writeLook`, F85): nothing for the same look, the other fields alone, or the hook's play, after
+	* which the track brings the numbers home; an element held for the swap of a scene build plays
+	* none and is written whole.
+	*
+	* @param element - The live element.
+	* @param value - The visual of this render.
+	*/
+	function writeVisual(element, value) {
+		const look = element.look;
+		element.look = value;
+		const isHooked = element.motion?.change?.[value.type.componentName] !== void 0;
+		const previous = look === void 0 || look.type !== value.type ? true : look.value;
+		const next = value.value;
+		if (!isHooked || previous === true || next === true || !ecs.has(element.entity, value.type)) {
+			writeValue(element, value);
+			return;
+		}
+		writeLook(lookWriter, element, value, previous, next);
+	}
+	/**
+	* Writes the fields of a visual that are no number, while a `change` hook brings the numbers
+	* home, never a field its type gives to a plugin.
+	*
+	* @param element - The live element.
+	* @param value - The fields of the visual of this render.
+	* @param type - Its component type.
+	*/
+	function writeOthers(element, value, type) {
+		const others = otherFields(value, ecs.typeOf(type.componentName)?.owned ?? NO_OWNED);
+		if (others !== void 0) ecs.set(element.entity, asHandle(type), others);
+	}
+	/**
 	* 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 the state of a scroll, and never a field its type gives
 	* to a plugin.
@@ -58092,6 +58449,7 @@ function createReconciler(ctx, modules, fields) {
 		const change = compare(root, element, node);
 		const motion = node.props.motion;
 		const loopChanged = !sameLoop(element.motion?.loop, motion?.loop);
+		const motionChanged = motion !== element.motion;
 		if (typeof __MOKU_GAME_DEV__ !== "undefined" && __MOKU_GAME_DEV__) countRebuild(element, element.motion?.loop, motion?.loop);
 		if (!change.unchanged) delete element.basis;
 		element.node = node;
@@ -58109,6 +58467,7 @@ function createReconciler(ctx, modules, fields) {
 				rowHeight: change.rowHeight
 			};
 		}
+		if (typeof __MOKU_GAME_DEV__ !== "undefined" && __MOKU_GAME_DEV__ && motionChanged && element.live) warnIdleChanges(ctx, element);
 		diffChildren(root, element, childrenOf(node, range.slotsFor(element), element.scroll?.axis), instance);
 	}
 	/**
@@ -58167,18 +58526,20 @@ function createReconciler(ctx, modules, fields) {
 		};
 	}
 	/**
-	* Places one node: enter, patch, or exit and enter when the type at that key changed.
+	* Places one node: enter, patch, or exit and enter when the element at its identity is another
+	* one now: a component whose view returned another tag or another key. The old element leaves
+	* first, with its exit, so the new one takes the keys they share; the component itself stays and
+	* keeps its local state.
 	*
 	* @param root - The root being reconciled.
 	* @param parent - The parent element, or nothing.
 	* @param node - The node the markup wrote.
 	* @param index - Its position among its siblings.
-	* @param parentIdentity - The identity of the parent element.
+	* @param identity - Its identity: `identityOf` the parent, the node and the index.
 	* @param instance - The identity of the nearest component instance.
 	* @returns The entity of the element, or `undefined` when a component view threw.
 	*/
-	function diffNode(root, parent, node, index, parentIdentity, instance) {
-		const identity = identityOf(parentIdentity, node, index);
+	function diffNode(root, parent, node, index, identity, instance) {
 		const expanded = expand(node, identity);
 		const view = expanded.node;
 		const owner = expanded.instance ?? instance;
@@ -58186,15 +58547,29 @@ function createReconciler(ctx, modules, fields) {
 		if (effective === void 0) return state.byIdentity.get(identity);
 		const existing = state.byIdentity.get(identity);
 		const element = existing === void 0 ? void 0 : state.elements.get(existing);
-		if (element !== void 0 && element.type === effective.type) {
+		if (element !== void 0 && element.type === effective.type && element.key === effective.key) {
 			patch(root, element, effective, owner);
 			return element.entity;
 		}
-		if (element !== void 0) exitElement(element, "change");
+		if (element !== void 0) replaceElement(element, identity);
 		return enter(root, parent, effective, identity, owner, index);
 	}
 	/**
-	* Diffs the children of one element and re-places them once when the list changed.
+	* Exits the element a component's view returned before, at the component's own identity. The
+	* instances under it are forgotten with it; the component's own instance stays: the local state
+	* belongs to the component, which is still there.
+	*
+	* @param element - The element the view returned before.
+	* @param identity - The identity of the component node.
+	*/
+	function replaceElement(element, identity) {
+		const own = state.instances.get(identity);
+		exitElement(element, "change");
+		if (own !== void 0) state.instances.set(identity, own);
+	}
+	/**
+	* Diffs the children of one element and re-places them once when the list changed. The old
+	* children the render leaves out start their exit before any new child enters.
 	*
 	* @param root - The root being reconciled.
 	* @param parent - The element whose children are diffed.
@@ -58202,19 +58577,18 @@ function createReconciler(ctx, modules, fields) {
 	* @param instance - The identity of the nearest component instance.
 	*/
 	function diffChildren(root, parent, nodes, instance) {
+		const identities = nodes.map((node, index) => identityOf(parent.identity, node, index));
+		leaveOut(parent, identities);
 		const next = [];
 		for (const [index, node] of nodes.entries()) {
-			const entity = diffNode(root, parent, node, index, parent.identity, instance);
+			const entity = diffNode(root, parent, node, index, identities[index] ?? identityOf(parent.identity, node, index), instance);
 			if (entity !== void 0) next.push(entity);
 		}
 		const kept = entitySet(next);
-		const dropsRows = range.dropsRowsOf(parent);
 		for (const old of parent.children) {
-			if (kept.has(old)) continue;
+			if (kept.has(old) || state.exiting.has(old)) continue;
 			const element = state.elements.get(old);
-			if (element === void 0) continue;
-			if (dropsRows) range.dropRow(element);
-			else exitElement(element, "change");
+			if (element !== void 0) removeChild(parent, element);
 		}
 		const same = next.length === parent.children.length && next.every((entity, index) => parent.children[index] === entity);
 		parent.children = next;
@@ -58224,6 +58598,33 @@ function createReconciler(ctx, modules, fields) {
 		root.needsSolve = true;
 	}
 	/**
+	* Takes out every old child of an element whose identity no node of this render has: its exit
+	* starts, and everything under it plays its own, before a new child enters.
+	*
+	* @param parent - The element whose children are diffed.
+	* @param identities - The identities of the children of this render, in markup order.
+	*/
+	function leaveOut(parent, identities) {
+		let listed;
+		for (const [index, old] of parent.children.entries()) {
+			const element = state.elements.get(old);
+			if (element === void 0 || identities[index] === element.identity) continue;
+			listed ??= identitySet(identities);
+			if (!listed.has(element.identity)) removeChild(parent, element);
+		}
+	}
+	/**
+	* Removes one child a render left out: its exit starts. A row that a range change took out of a
+	* windowed scroll is not removed: it is dropped at once, with no exit motion.
+	*
+	* @param parent - The element whose children are diffed.
+	* @param element - The child that leaves.
+	*/
+	function removeChild(parent, element) {
+		if (range.dropsRowsOf(parent)) range.dropRow(element);
+		else exitElement(element, "change");
+	}
+	/**
 	* Starts the exit of an element and of everything under it. An element of a root built aside was
 	* never seen: it goes at once, with no exit (spec 31).
 	*
@@ -58412,8 +58813,12 @@ function createReconciler(ctx, modules, fields) {
 		warnOwned(element);
 		for (const value of element.extras.values()) recordRest(ctx, element, value);
 		if (overlayOf(element) !== void 0) ecs.add(element.entity, OverlayLevel());
-		for (const value of componentsOf(element, root)) ecs.add(element.entity, value);
+		for (const value of componentsOf(element, root)) {
+			ecs.add(element.entity, value);
+			if (VISUALS.includes(value.type)) element.look = value;
+		}
 		element.live = true;
+		if (typeof __MOKU_GAME_DEV__ !== "undefined" && __MOKU_GAME_DEV__) warnIdleChanges(ctx, element);
 		if (state.hosts.has(element.entity)) state.risen.add(element.entity);
 	}
 	/**
@@ -58777,14 +59182,17 @@ function createReconciler(ctx, modules, fields) {
 	/**
 	* Reconciles one root from the node its `Tree` carries. Its first build reads how the root came,
 	* from the world's view record, which exists by now; the elements entered by this diff take that
-	* cause, and the elements of any later diff take `"change"` (spec 16 U4).
+	* cause, and the elements of any later diff take `"change"` (spec 16 U4). A tree whose top has
+	* another identity, another key or tag, replaces the root element: the old one exits first.
 	*
 	* @param root - The root to reconcile.
 	*/
 	function reconcileRoot(root) {
-		const identity = String(root.entity);
+		const identity = identityOf(String(root.entity), root.tree, 0);
 		const first = root.element === void 0;
 		if (first) root.cause ??= ctx.deps.world.projection.causeOf(root.entity) ?? "change";
+		const previous = root.element === void 0 ? void 0 : lookup(root.element);
+		if (previous !== void 0 && previous.identity !== identity) exitElement(previous, "change");
 		state.building = first ? root.cause : "change";
 		try {
 			root.element = diffNode(root, void 0, root.tree, 0, identity);
@@ -58932,6 +59340,7 @@ function createReconciler(ctx, modules, fields) {
 	function reconcile(time = NO_TIME) {
 		sweep();
 		state.reconciles += 1;
+		lookWriter.pass += 1;
 		settleAside();
 		if (state.remount) remountRoots();
 		reorderRoots();
@@ -59103,6 +59512,7 @@ function createReconciler(ctx, modules, fields) {
 		const element = state.elements.get(entity);
 		if (element === void 0) return;
 		element.is[flag] = on;
+		lookWriter.pass += 1;
 		const style = styleFor(parentOf(element), element.node, element.is);
 		const root = state.roots.get(element.root);
 		const moved = modules.layout.affectsRect(element.style, style);
@@ -59888,14 +60298,15 @@ function noteEndless(element, motion) {
 	element.endless.add(motion);
 }
 /**
-* Plays the `change` hook of one extra component whose fields changed. The motion the last change
-* of that name started is cancelled first, so its value stays where it is and the new motion
-* starts from there; the new motion is kept with the element's handles, so an exit waits for it.
-* An element held for the swap of a scene build plays none: the caller writes the fields.
+* Plays the `change` hook of one extra component whose fields changed, or of the visual whose
+* numbers moved (F85). The motion the last change of that name started is cancelled first, so its
+* value stays where it is and the new motion starts from there; the new motion is kept with the
+* element's handles, so an exit waits for it. An element held for the swap of a scene build plays
+* none: the caller writes the fields.
 *
 * @param ctx - Domain context of the ui plugin.
-* @param element - The element that carries the extra.
-* @param name - The component name of the extra.
+* @param element - The element that carries the component.
+* @param name - The component name of the extra or the visual.
 * @param values - The value of the last render and of this one.
 * @param values.previous - The value of the last render.
 * @param values.next - The value of this render.