@moku-labs/game 0.15.31 → 0.15.33

package/dist/{src-5qdNjLKN.mjs → src-D5Nyvdhu.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);
@@ -56667,6 +56667,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 +57496,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 +57925,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 +57980,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 +58081,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 +58236,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 +58251,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 +58390,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 +58408,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 +58467,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 +58488,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 +58518,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 +58539,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 +58754,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 +59123,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 +59281,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 +59453,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 +60239,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.

package/dist/testing.d.mts

@@ -1,6 +1,6 @@
 import { $n as FeaturePlugin, Dr as Json, dr as Descriptor, gr as NodeFx, hr as Hint, sr as NodeTable, tr as AnyFlow, xr as FakeClock, yr as ClockSource } from "./types-D27I4Q7b.mjs";
-import { t as createApp } from "./index-DMeqKGSu.mjs";
-import { b as saveOf, v as WithGameState, y as memory } from "./types-DmU_qlvA.mjs";
+import { t as createApp } from "./index-ChuOBsZB.mjs";
+import { b as saveOf, v as WithGameState, y as memory } from "./types-CF6CJ55K.mjs";
 import { a as createHeadless, i as ReproResult, n as HeadlessGame, o as runRepro, r as Repro, s as stepFrames, t as HeadlessApp } from "./headless-f31cEZ7f.mjs";
 import { AnyPluginInstance } from "@moku-labs/core";
 

package/dist/testing.mjs

@@ -1,6 +1,6 @@
-import { en as refuseStart, in as type, m as flattenFeatures, t as createApp, tn as exit } from "./src-5qdNjLKN.mjs";
+import { en as refuseStart, in as type, m as flattenFeatures, t as createApp, tn as exit } from "./src-D5Nyvdhu.mjs";
 import { n as saveOf, t as memory } from "./memory-CWlqhS7l.mjs";
-import { t as fakeClock } from "./fake-6mazmHK3.mjs";
+import { n as fakeClock } from "./fake-hnJcJeYf.mjs";
 import { i as stepFrames, r as runRepro, t as createHeadless } from "./headless-Bxxl_mQX.mjs";
 //#region src/testing/fake-fx.ts
 /** The node path a refused `fx.start` names when the test gives none. */

package/dist/{types-DHamyZq1.d.mts → types-BqfwZ_lM.d.mts}

@@ -1,5 +1,5 @@
 import { $ as PixiModule, A as SyncApi, An as NumericFields, Dr as Json, En as Ease, Er as Events$3, Fn as TrackSegment, Ln as Api$2, Nn as ReducedMotion, O as FilterSlot, Pn as TrackOptions, Q as PixiFilter, Ur as Events$5, Y as Api$4, b as Events$4, dr as Descriptor, et as PixiSprite, fn as ComponentType, ft as FilterCache, k as FilterSlotInputs, kn as MotionHandle, ln as AnyComponentValue, mn as Entity, ni as Events$2, nn as Api$3, qr as Api$1, ri as Require, s as Events$1, sn as AnyComponent, t as Api$5, tt as PixiTexture, un as ComponentHandle, ur as TypeTag, ut as Point, wr as Api$6 } from "./types-D27I4Q7b.mjs";
-import { N as InputApi, R as I18nApi, X as StylesState, c as UiNode, i as Finding, l as LayoutState, n as ElementChange, o as JsxState, r as ElementMotion, w as TextApi } from "./types-BAp9HdR4.mjs";
+import { N as InputApi, R as I18nApi, X as StylesState, c as UiNode, i as Finding, l as LayoutState, n as ElementChange, o as JsxState, r as ElementMotion, w as TextApi } from "./types-DGHVGP5i.mjs";
 import { Log } from "@moku-labs/common/browser";
 import { PluginCtx } from "@moku-labs/core";
 

package/dist/{types-DmU_qlvA.d.mts → types-CF6CJ55K.d.mts}

@@ -1,7 +1,7 @@
 import { $ as PixiModule, $n as FeaturePlugin, Dr as Json, Lr as SnapshotOf, Mr as PlayerStateProvider, Nr as ProviderCall, Pr as SaveDoc, Tr as Config, X as Config$2, a as Config$3, d as Manifest, lt as Orientation, n as AssetsIo, tr as AnyFlow, ur as TypeTag, xr as FakeClock, yr as ClockSource, zn as Config$1 } from "./types-D27I4Q7b.mjs";
-import { o as AudioContextLike, s as Config$4 } from "./types-DHamyZq1.mjs";
-import { R as I18nApi, U as StringTable, W as TextKey } from "./types-BAp9HdR4.mjs";
-import { St as effectsPlugin, Tt as audioPlugin, ht as PlatformProvider, i as screen, pt as platformPlugin, t as createApp } from "./index-DMeqKGSu.mjs";
+import { o as AudioContextLike, s as Config$4 } from "./types-BqfwZ_lM.mjs";
+import { R as I18nApi, U as StringTable, W as TextKey } from "./types-DGHVGP5i.mjs";
+import { St as effectsPlugin, Tt as audioPlugin, ht as PlatformProvider, i as screen, pt as platformPlugin, t as createApp } from "./index-ChuOBsZB.mjs";
 import { AnyPluginInstance } from "@moku-labs/core";
 
 //#region src/plugins/model/store/providers/memory.d.ts