@moku-labs/game 0.15.14 → 0.15.17

package/dist/{src-Co5sO4z1.mjs → src-sg41xWNr.mjs}

@@ -2,7 +2,7 @@ import { t as __exportAll } from "./rolldown-runtime-8H4AJuhK.mjs";
 import { r as systemSource, t as memory } from "./memory-CWlqhS7l.mjs";
 import { a as finishDrafts, i as enableDraftPatches, n as deepFreeze$1, o as openDrafts, r as dropDrafts } from "./drafts-BawpSaVp.mjs";
 import { d as graphHash, f as isRestCheckpoint, h as pushEntry, i as servePaused, l as findNode, m as compact, n as captureFrame, o as collectFlows, p as slotNames, r as serveCaptures, s as describeGraph, t as cancelCaptures, u as framePath } from "./capture-D7XvoHdH.mjs";
-import { $ as component, A as localPoseOf, B as OverlayLevel, C as builtInStyles, D as textFor, E as readStyle, F as rootPoseOf, G as arcDefaults, H as Shape, I as Display, J as Exiting, K as componentsFor, L as HudPart, M as poseUnder, N as rootPointOf, O as applyPose, P as rootPoseInto, Q as Tree, R as NineSlice, U as Sprite, V as Parent, W as Transform, X as Now, Y as Layer, Z as Order, _ as uiFor, a as visualOf$1, b as Countdown, c as Covered, d as LocalWrite, f as Scroll, h as UiCounters, i as samePose, it as tag, j as parentOf$1, k as isLeaving, l as DebugTrigger, m as UI_OWNER, n as drawnRect, nt as system, o as visualRectOf, p as ScrollState, r as fitScaleOf, rt as systemsFor, s as Box, t as CONTENT$1, tt as resource, u as Escapable, x as Text, z as Overlay } from "./visual-CbGKzlj0.mjs";
+import { $ as component, A as localPoseOf, B as OverlayLevel, C as builtInStyles, D as textFor, E as readStyle, F as rootPoseOf, G as arcDefaults, H as Shape, I as Display, J as Exiting, K as componentsFor, L as HudPart, M as poseUnder, N as rootPointOf, O as applyPose, P as rootPoseInto, Q as Tree, R as NineSlice, U as Sprite, V as Parent, W as Transform, X as Now, Y as Layer, Z as Order, _ as uiFor, a as visualOf$1, b as Countdown, c as Covered, d as LocalWrite, f as Scroll, h as UiCounters, i as samePose, it as tag, j as parentOf$1, k as isLeaving, l as DebugTrigger, m as UI_OWNER, n as drawnRect, nt as system, o as visualRectOf, p as ScrollState, r as fitScaleOf, rt as systemsFor, s as Box, t as CONTENT$1, tt as resource, u as Escapable, x as Text, z as Overlay } from "./visual-DNM5oFYx.mjs";
 import { a as isDev } from "./dev-BNndV-hU.mjs";
 import { n as isComponentDefinition } from "./component-DGg5DqKK.mjs";
 import { n as flatten } from "./flatten-nUX9PpGo.mjs";
@@ -34675,7 +34675,7 @@ function pickVictim(state) {
 		const entry = state.manifest.bundles[name];
 		if (record.status !== "loaded" || entry === void 0) continue;
 		if (state.pinned.has(name) || isPermanent(entry.tier)) continue;
-		if (state.sceneNamed.includes(name)) continue;
+		if (state.sceneNamed.includes(name) || state.sceneLeaving.includes(name)) continue;
 		if (state.queue?.bundles.includes(name) === true) continue;
 		if (record.lastUsed >= smallest) continue;
 		smallest = record.lastUsed;
@@ -34830,8 +34830,9 @@ function featuresOnStack(ctx) {
 }
 /**
 * Tells whether a bundle must stay where the game stands now: it is pinned (a bundle of the node
-* entered last), the mounted scene names it (the last list `sceneBundles` received), its feature
-* is in `onStack`, or its tier is permanent.
+* entered last), the mounted scene names it (the last list `sceneBundles` received), a leaving
+* scene named it and its elements still play their exit, its feature is in `onStack`, or its tier
+* is permanent.
 *
 * @param ctx - Domain context of the plugin.
 * @param name - Name of the bundle.
@@ -34841,25 +34842,66 @@ function featuresOnStack(ctx) {
 */
 function isHeld(ctx, name, entry, onStack) {
 	const state = ctx.state;
-	return state.pinned.has(name) || state.sceneNamed.includes(name) || onStack.has(entry.feature) || isPermanent(entry.tier);
+	return state.pinned.has(name) || state.sceneNamed.includes(name) || state.sceneLeaving.includes(name) || onStack.has(entry.feature) || isPermanent(entry.tier);
 }
 /**
-* Unloads every loaded `"leave"` bundle nobody holds any more, with the reason `"leave"`. A
-* running load is never aborted by it, and a `"budget"` bundle is never touched. Headless it does
-* nothing.
+* Unloads every loaded `"leave"` bundle nobody holds any more, with the reason `"leave"`; a
+* leaving scene holds its bundles only while anything carries `Exiting`. A running load is never
+* aborted by it, and a `"budget"` bundle is never touched. Headless it does nothing.
 *
 * @param ctx - Domain context of the plugin.
 */
 function releaseLeftBundles(ctx) {
 	const state = ctx.state;
 	if (state.io === void 0) return;
+	if (state.sceneLeaving.length > 0 && state.exiting === 0) state.sceneLeaving = [];
 	const onStack = featuresOnStack(ctx);
-	for (const [name, record] of state.records) {
-		const entry = state.manifest.bundles[name];
-		if (record.status !== "loaded" || entry?.release !== "leave") continue;
-		if (isHeld(ctx, name, entry, onStack)) continue;
-		unloadBundle(ctx, name, "leave");
-	}
+	for (const name of state.records.keys()) unloadIfLeft(ctx, name, onStack);
+}
+/**
+* Takes the list the mounted scene names now. A bundle the list named before and names no more
+* stays held as a leaving scene's, until nothing carries `Exiting` (F51); a name the list takes
+* again is the mounted scene's once more.
+*
+* @param state - The plugin state.
+* @param named - The bundles the mounted scene names now.
+*/
+function nameSceneBundles(state, named) {
+	const leaving = state.sceneLeaving.filter((name) => !named.includes(name));
+	for (const name of state.sceneNamed) if (!named.includes(name) && !leaving.includes(name)) leaving.push(name);
+	state.sceneLeaving = leaving;
+	state.sceneNamed = [...named];
+}
+/**
+* Lets the bundles a leaving scene named go once nothing carries `Exiting` any more: each loaded
+* `"leave"` bundle among them that nothing else holds is unloaded with the reason `"leave"`, at
+* once, not at the next rest. A bundle of another release stays, as it would have. The world calls
+* it through `onRemoved(Exiting)`, so the check costs a length read while no scene leaves, and
+* a count read while one does.
+*
+* @param ctx - Domain context of the plugin.
+*/
+function releaseSceneLeft(ctx) {
+	const state = ctx.state;
+	if (state.sceneLeaving.length === 0 || state.exiting > 0) return;
+	const names = state.sceneLeaving;
+	state.sceneLeaving = [];
+	if (state.io === void 0) return;
+	const onStack = featuresOnStack(ctx);
+	for (const name of names) unloadIfLeft(ctx, name, onStack);
+}
+/**
+* Unloads one bundle with the reason `"leave"` when it is a loaded `"leave"` bundle nobody holds.
+*
+* @param ctx - Domain context of the plugin.
+* @param name - Name of the bundle.
+* @param onStack - The features on the stack, from `featuresOnStack`.
+*/
+function unloadIfLeft(ctx, name, onStack) {
+	const entry = ctx.state.manifest.bundles[name];
+	if (ctx.state.records.get(name)?.status !== "loaded" || entry?.release !== "leave") return;
+	if (isHeld(ctx, name, entry, onStack)) return;
+	unloadBundle(ctx, name, "leave");
 }
 //#endregion
 //#region src/plugins/scenes/bundles.ts
@@ -35337,21 +35379,22 @@ function startPreload(ctx) {
 //#endregion
 //#region src/plugins/assets/lifecycle.ts
 /**
-* @file assets plugin — lifecycle: the three registrations of `onInit`, the boot of `onStart`
+* @file assets plugin — lifecycle: the five registrations of `onInit`, the boot of `onStart`
 * and the teardown that frees every texture and cancels every fetch.
 */
 /**
-* Resolves the dependency APIs `flow`, `renderer`, `time` and `model` with `ctx.require`.
+* Resolves the dependency APIs `flow`, `renderer`, `time`, `model` and `world` with `ctx.require`.
 *
 * @param ctx - Kernel context of the assets plugin.
-* @returns The four dependency APIs.
+* @returns The five dependency APIs.
 */
 function resolveDeps$5(ctx) {
 	return {
 		flow: ctx.require(flowPlugin),
 		renderer: ctx.require(rendererPlugin),
 		time: ctx.require(timePlugin),
-		model: ctx.require(modelPlugin)
+		model: ctx.require(modelPlugin),
+		world: ctx.require(worldPlugin)
 	};
 }
 /**
@@ -35451,19 +35494,20 @@ async function enterNode(ctx, node, run) {
 }
 /**
 * Connects the plugin in `onInit`: the `load` stage of `onEnter`, the handler of the `load`
-* effect and the texture provider of `renderer`. The three removers go to the state, because
-* `onStop` has nothing but the state.
+* effect, the texture provider of `renderer`, and the start and the end of an exit in `world`,
+* counted so a leaving scene's bundles go when the last exit ends (F51). The five removers go to
+* the state, because `onStop` has nothing but the state.
 *
 * @param ctx - Kernel context of the assets plugin.
-* @example
-* ```ts
-* connectAssets(ctx);
-* ctx.state.removers.length; // 3
-* ```
 */
 function connectAssets(ctx) {
 	const assets = withDeps$6(ctx);
-	assets.state.removers.push(assets.deps.flow.onEnter("load", (node, run) => enterNode(assets, node, run)), assets.deps.flow.fx.handle("load", (descriptor, run) => runLoadEffect(assets, descriptor, run), { runInFast: true }), assets.deps.renderer.sync.textures.provide((key) => lookupTexture(assets, key)));
+	assets.state.removers.push(assets.deps.flow.onEnter("load", (node, run) => enterNode(assets, node, run)), assets.deps.flow.fx.handle("load", (descriptor, run) => runLoadEffect(assets, descriptor, run), { runInFast: true }), assets.deps.renderer.sync.textures.provide((key) => lookupTexture(assets, key)), assets.deps.world.ecs.onAdded(Exiting, () => {
+		assets.state.exiting += 1;
+	}), assets.deps.world.ecs.onRemoved(Exiting, () => {
+		assets.state.exiting -= 1;
+		releaseSceneLeft(assets);
+	}));
 }
 /**
 * Picks the I/O seam: the configured one, the browser pair over `renderer.sync.textures` when
@@ -35539,7 +35583,7 @@ async function startAssets(ctx) {
 }
 /**
 * Frees everything in `onStop`: the preload and every running load are aborted, every texture is
-* destroyed, the three registrations are removed and the registries are emptied, the companions
+* destroyed, the five registrations are removed and the registries are emptied, the companions
 * too. A teardown context carries the state and nothing else, so no other plugin is called here:
 * no companion's `unload` either, its plugin stopped before this one.
 *
@@ -35571,6 +35615,8 @@ function releaseAll(state) {
 	state.current = void 0;
 	state.sceneId = void 0;
 	state.sceneNamed = [];
+	state.sceneLeaving = [];
+	state.exiting = 0;
 	state.restPending = false;
 	state.stamps = void 0;
 	state.swapping = void 0;
@@ -35717,9 +35763,7 @@ function createAssetsApi(ctx) {
 		font: (key) => loadedRecord(assets, key)?.fonts.get(key),
 		audio: (key) => loadedRecord(assets, key)?.audio.get(key),
 		usage: () => usage(assets),
-		sceneBundles: (named) => {
-			ctx.state.sceneNamed = [...named];
-		},
+		sceneBundles: (named) => nameSceneBundles(ctx.state, named),
 		has: (bundle) => Object.hasOwn(ctx.state.manifest.bundles, bundle),
 		companions: { add: (companion) => addCompanion(ctx.state, companion) }
 	};
@@ -36387,6 +36431,8 @@ function createAssetsState() {
 		stamps: void 0,
 		swapping: void 0,
 		sceneNamed: [],
+		sceneLeaving: [],
+		exiting: 0,
 		companions: [],
 		restPending: false
 	};
@@ -36411,7 +36457,8 @@ const assetsPlugin = /*#__PURE__*/ createPlugin$1("assets", {
 		flowPlugin,
 		rendererPlugin,
 		timePlugin,
-		modelPlugin
+		modelPlugin,
+		worldPlugin
 	],
 	config: {
 		manifest: void 0,
@@ -47931,6 +47978,12 @@ const platformPlugin = /*#__PURE__*/ createPlugin$1("platform", {
 const FALLBACK_ADVANCE = .6;
 /** Line height of a style whose font is not loaded, as a share of the style size. */
 const FALLBACK_LINE = 1.2;
+/**
+* How much wider than its box a line of a `"box"` style may be. `ui` lays a text out in whole units
+* and rounds its measure with this tolerance, so a line that adds up to a hair over a whole unit
+* (ten glyphs of 14.4 are 144.00000000000003) stays on the line the measure kept it on.
+*/
+const BOX_SLACK = 1e-4;
 /** Splits a run's text into words, runs of spaces and line breaks, separators kept. */
 const TOKENS = /(\n| +)/;
 /**
@@ -48405,13 +48458,33 @@ function emptyKeys() {
 	return /* @__PURE__ */ new Set();
 }
 /**
+* The width a block of a style wraps at: the width of the style, the box for a `"box"` style that
+* has one, or nothing for one line per `\n` segment.
+*
+* @param style - The style of the label.
+* @param box - The laid-out width of the text element; 0 when it has none.
+* @returns The wrap width in reference pixels, or `undefined` for no wrapping.
+* @example
+* ```ts
+* wrapOf({ ...bodyStyle, wrap: "box" }, 0); // undefined: no box, one line
+* ```
+*/
+function wrapOf(style, box) {
+	if (style.wrap === "none") return void 0;
+	if (style.wrap !== "box") return style.wrap;
+	return box > 0 ? box + BOX_SLACK : void 0;
+}
+/**
 * Lays a block of runs out: the lines, the width of the widest one and the total height. The
-* alignment of the style changes nothing here; it moves the lines when they are drawn.
+* alignment of the style changes nothing here; it moves the lines when they are drawn. A style
+* with `wrap: "box"` wraps at `box`, the width `ui` laid its text element out at, and is one line
+* without one; any other style ignores `box`.
 *
 * @param runs - What `parseTags` made of the resolved string.
 * @param style - The style of the label.
 * @param tables - The advance tables that are loaded, by font key.
 * @param options - Where a warning goes.
+* @param box - The width a `"box"` style wraps at, in reference pixels; 0 for none.
 * @returns The lines and the size of the block in reference pixels.
 * @example
 * ```ts
@@ -48419,13 +48492,14 @@ function emptyKeys() {
 * // { lines: [{ runs: [], width: 0 }], width: 0, height: 38.4 }
 * ```
 */
-function layoutRuns(runs, style, tables, options) {
+function layoutRuns(runs, style, tables, options, box = 0) {
 	const once = onceOnly(options);
-	const lines = style.wrap === "none" ? layoutFixed(runs, style, tables, once) : layoutWrapped(runs, {
+	const wrap = wrapOf(style, box);
+	const lines = wrap === void 0 ? layoutFixed(runs, style, tables, once) : layoutWrapped(runs, {
 		style,
 		tables,
 		options: once
-	}, style.wrap);
+	}, wrap);
 	let width = 0;
 	for (const line of lines) width = Math.max(width, line.width);
 	return {
@@ -48720,20 +48794,34 @@ function styleOf$1(ctx, name) {
 	return ctx.state.styles.get("body") ?? builtInStyles(ctx.config.fonts).body;
 }
 /**
+* Tells whether a style wraps at the box of its text element. An unknown name is drawn as `body`,
+* so it answers for `body`. Two map reads, no warning: the frame step asks it.
+*
+* @param ctx - Domain context of the text plugin.
+* @param styleName - The style name a component wrote.
+* @returns True for a style with `wrap: "box"`.
+*/
+function wrapsAtBox(ctx, styleName) {
+	return (ctx.state.styles.get(styleName) ?? ctx.state.styles.get("body"))?.wrap === "box";
+}
+/**
 * The layout of one resolved string in one style, from the cache or freshly laid out. The cache
-* is what makes `measure` cheap enough for `ui` to ask per invalidation.
+* is what makes `measure` cheap enough for `ui` to ask per invalidation. A `"box"` style with a
+* box is cached per width too; any other style ignores the box and keeps one layout.
 *
 * @param ctx - Domain context of the text plugin.
 * @param resolved - The tagged string.
 * @param styleName - The style name.
+* @param box - The width a `"box"` style wraps at; 0 for one line.
 * @returns The lines and the size of the block.
 */
-function layoutFor(ctx, resolved, styleName) {
-	const key = `${styleName}${CACHE_SEPARATOR}${resolved}`;
+function layoutFor(ctx, resolved, styleName, box = 0) {
+	const width = box > 0 && wrapsAtBox(ctx, styleName) ? box : 0;
+	const key = width > 0 ? `${styleName}${CACHE_SEPARATOR}${width}${CACHE_SEPARATOR}${resolved}` : `${styleName}${CACHE_SEPARATOR}${resolved}`;
 	const hit = ctx.state.cache.get(key);
 	if (hit !== void 0) return hit;
 	const warn = warnFor(ctx);
-	const layout = layoutRuns(parseTags(resolved, warn), styleOf$1(ctx, styleName), ctx.state.tables, { warn });
+	const layout = layoutRuns(parseTags(resolved, warn), styleOf$1(ctx, styleName), ctx.state.tables, { warn }, width);
 	if (ctx.state.cache.size >= CACHE_LIMIT) {
 		const oldest = ctx.state.cache.keys().next().value;
 		if (oldest !== void 0) ctx.state.cache.delete(oldest);
@@ -48942,7 +49030,8 @@ function remember(ctx, entity, text, frame, unit) {
 			bindRef: text.bind,
 			bind: bindKeyOf(text.bind),
 			locale: frame.locale,
-			unit
+			unit,
+			box: text.box
 		});
 		return;
 	}
@@ -48954,6 +49043,23 @@ function remember(ctx, entity, text, frame, unit) {
 	seen.style = text.style;
 	seen.locale = frame.locale;
 	seen.unit = unit;
+	seen.box = text.box;
+}
+/**
+* Tells whether a label of a `"box"` style was laid out at another box than it carries now. The
+* box of a label of any other style is only noted: it draws the same at every width, so a resize
+* resolves nothing. A label whose box stands costs one compare.
+*
+* @param ctx - Domain context of the text plugin.
+* @param seen - What was resolved for the label last.
+* @param text - Its component value.
+* @returns True when the label has to be laid out at its new box.
+*/
+function boxMoved(ctx, seen, text) {
+	if (seen.box === text.box) return false;
+	if (wrapsAtBox(ctx, text.style)) return true;
+	seen.box = text.box;
+	return false;
 }
 /**
 * Keeps the measured size of a label: made once, then overwritten in place.
@@ -48983,7 +49089,7 @@ function keepSize(ctx, entity, layout) {
 * @returns True when nothing has to be formatted or written.
 */
 function isShown(seen, text, unit, format, frame) {
-	return seen !== void 0 && seen.unit === unit && seen.style === text.style && isSameBind(seen, text.bind) && (format !== "duration" || seen.locale === frame.locale);
+	return seen.unit === unit && seen.style === text.style && isSameBind(seen, text.bind) && (format !== "duration" || seen.locale === frame.locale);
 }
 /**
 * Writes the new string of a bound label, its measured size, and for a countdown the time left,
@@ -49001,7 +49107,7 @@ function showBound(ctx, entity, text, next, value) {
 		ctx.deps.world.ecs.set(entity, Text, { resolved: next });
 		if (value !== void 0 && text.bind !== void 0 && isCountdownLeft(text.bind)) ctx.deps.world.ecs.set(entity, Countdown, { left: value });
 	}
-	if (changed || !ctx.state.measured.has(entity)) keepSize(ctx, entity, layoutFor(ctx, next, text.style));
+	if (changed || !ctx.state.measured.has(entity)) keepSize(ctx, entity, layoutFor(ctx, next, text.style, text.box));
 }
 /**
 * Writes the string a bound label already shows once more, and measures it again. A mark on a
@@ -49015,7 +49121,7 @@ function showBound(ctx, entity, text, next, value) {
 */
 function showAgain(ctx, entity, text) {
 	ctx.deps.world.ecs.set(entity, Text, { resolved: text.resolved });
-	keepSize(ctx, entity, layoutFor(ctx, text.resolved, text.style));
+	keepSize(ctx, entity, layoutFor(ctx, text.resolved, text.style, text.box));
 }
 /**
 * Reports a bound label whose style is not a digits style, once per style. An unknown style name
@@ -49033,8 +49139,9 @@ function warnWithoutDigits(ctx, styleName) {
 * One frame of a bound label: the value read every frame, the string built and written only
 * when its unit moved. A label that stands still costs a read and a few compares and keeps
 * nothing: no tag is parsed, no key is built. A marked label that stands still is written once
-* with the string it shows. The style is checked for digits only when the label is written, so
-* a label on a wrong style builds no warning key per frame.
+* with the string it shows; one of a `"box"` style that ui laid out at another box is measured at
+* it. The style is checked for digits only when the label is written, so a label on a wrong style
+* builds no warning key per frame.
 *
 * @param ctx - Domain context of the text plugin.
 * @param entity - The entity.
@@ -49047,10 +49154,9 @@ function stepBound(ctx, entity, text, bind, frame) {
 	const format = value === void 0 ? "int" : formatOf(ctx, entity, bind, value);
 	const unit = value === void 0 ? void 0 : unitOf(value, format);
 	const marked = ctx.state.dirty.delete(entity);
-	if (isShown(ctx.state.seen.get(entity), text, unit, format, frame)) {
-		if (!marked) return;
-		warnWithoutDigits(ctx, text.style);
-		showAgain(ctx, entity, text);
+	const seen = ctx.state.seen.get(entity);
+	if (seen !== void 0 && isShown(seen, text, unit, format, frame)) {
+		standStill(ctx, entity, text, seen, marked);
 		return;
 	}
 	warnWithoutDigits(ctx, text.style);
@@ -49058,8 +49164,27 @@ function stepBound(ctx, entity, text, bind, frame) {
 	remember(ctx, entity, text, frame, unit);
 }
 /**
-* Tells whether a label has to be resolved again. Change sets are cleared every frame and `ui`
-* writes `Text` after this system, so the comparison is against what was seen, not `changed`.
+* One frame of a bound label whose unit stands still: a marked one is written once as it is, one of
+* a `"box"` style that ui laid out at another box is measured at it. Either way the box is noted.
+*
+* @param ctx - Domain context of the text plugin.
+* @param entity - The entity.
+* @param text - Its component value.
+* @param seen - What was resolved for the label last.
+* @param marked - Whether the label was marked this frame.
+*/
+function standStill(ctx, entity, text, seen, marked) {
+	if (marked) {
+		warnWithoutDigits(ctx, text.style);
+		showAgain(ctx, entity, text);
+	} else if (boxMoved(ctx, seen, text)) keepSize(ctx, entity, layoutFor(ctx, text.resolved, text.style, text.box));
+	else return;
+	seen.box = text.box;
+}
+/**
+* Tells whether a label has to be resolved again: its content, style, bind or locale moved, or
+* ui laid a label of a `"box"` style out at another box. Change sets are cleared every frame and
+* `ui` writes `Text` after this system, so the comparison is against what was seen, not `changed`.
 *
 * @param ctx - Domain context of the text plugin.
 * @param entity - The entity.
@@ -49071,7 +49196,7 @@ function isStale(ctx, entity, text, frame) {
 	if (ctx.state.dirty.has(entity)) return true;
 	const seen = ctx.state.seen.get(entity);
 	if (seen === void 0) return true;
-	return seen.content !== text.content || seen.style !== text.style || !isSameBind(seen, text.bind) || seen.locale !== frame.locale;
+	return seen.content !== text.content || seen.style !== text.style || !isSameBind(seen, text.bind) || seen.locale !== frame.locale || boxMoved(ctx, seen, text);
 }
 /**
 * One frame of one label.
@@ -49087,7 +49212,7 @@ function stepText(ctx, entity, text, frame) {
 		return;
 	}
 	if (!isStale(ctx, entity, text, frame)) return;
-	keepSize(ctx, entity, layoutFor(ctx, resolveContent(ctx, entity, text), text.style));
+	keepSize(ctx, entity, layoutFor(ctx, resolveContent(ctx, entity, text), text.style, text.box));
 	ctx.state.dirty.delete(entity);
 	remember(ctx, entity, text, frame);
 }
@@ -49661,15 +49786,19 @@ function buildRun(ctx, pixi, run, style, at) {
 }
 /**
 * The style and the laid-out block of one component value, under the generation of this moment.
+* A `"box"` style wraps at the box `ui` wrote; with none (a label outside a ui layout) it is one
+* line, and a dev warning says so once per style.
 *
 * @param ctx - Domain context of the text plugin.
 * @param value - The component value.
 * @returns What the container is filled from.
 */
 function labelOf(ctx, value) {
+	const style = styleOf$1(ctx, value.style);
+	if (style.wrap === "box" && (value.box ?? 0) <= 0 && value.resolved !== "") warnOnce(ctx, `wrap-box:${value.style}`, "text: wrap \"box\" outside layout", { style: value.style });
 	return {
-		style: styleOf$1(ctx, value.style),
-		layout: layoutFor(ctx, value.resolved, value.style),
+		style,
+		layout: layoutFor(ctx, value.resolved, value.style, value.box),
 		generation: ctx.state.generation
 	};
 }
@@ -49786,8 +49915,9 @@ function samePoint(first, second) {
 /**
 * Tells whether a container already shows a value: the string, the style name and the anchor it
 * was last updated with, drawn with the style object that is current and under the generation
-* that is current. A replaced style is a new object under the same name. A font or an icon a dev
-* hot swap replaced moves the generation, because the objects hold textures that are destroyed.
+* that is current, and for a `"box"` style at the same box. A replaced style is a new object under
+* the same name. A font or an icon a dev hot swap replaced moves the generation, because the
+* objects hold textures that are destroyed. The box of any other style changes nothing drawn.
 *
 * @param ctx - Domain context of the text plugin.
 * @param container - The container of this label.
@@ -49797,7 +49927,8 @@ function samePoint(first, second) {
 */
 function isCurrent(ctx, container, previous, next) {
 	const drawn = ctx.state.drawn.get(container);
-	return previous.resolved === next.resolved && previous.style === next.style && samePoint(previous.anchor, next.anchor) && drawn?.style === styleOf$1(ctx, next.style) && drawn.generation === ctx.state.generation;
+	const boxStands = previous.box === next.box || drawn?.style.wrap !== "box";
+	return previous.resolved === next.resolved && previous.style === next.style && samePoint(previous.anchor, next.anchor) && drawn?.style === styleOf$1(ctx, next.style) && drawn.generation === ctx.state.generation && boxStands;
 }
 /**
 * Draws a changed value into a container that holds a label already. A ticking counter keeps its
@@ -50054,9 +50185,9 @@ function createTextApi(ctx) {
 		return domain;
 	};
 	return {
-		measure: (content, style) => {
+		measure: (content, style, width = 0) => {
 			const tctx = text();
-			return sizeOf(layoutFor(tctx, sourceOf(tctx, content), style));
+			return sizeOf(layoutFor(tctx, sourceOf(tctx, content), style, width));
 		},
 		hasGlyph: (char, style) => hasGlyphOf(text(), char, style),
 		styles: () => Object.freeze([...ctx.state.styles.keys()]),
@@ -54789,6 +54920,16 @@ function entitySet(entities) {
 	return new Set(entities);
 }
 /**
+* Tells whether an element whose `Box` just came arrives with an enter: new, and not a row a
+* range change scrolled in.
+*
+* @param element - The element, if it is still known.
+* @returns True when its enter hook is to play.
+*/
+function arrives(element) {
+	return element !== void 0 && !element.entered && !element.scrolledIn;
+}
+/**
 * Builds the reconcile half of the jsx module: the two systems of the frame and the root
 * bookkeeping around them.
 *
@@ -55729,7 +55870,8 @@ function createReconciler(ctx, modules, fields) {
 	/**
 	* Keeps an element whose spawn has just been applied: the world calls it from the `Box` hook, at
 	* the flush of phase `layout`. Its enter hook waits for `playEntered`, so the game's systems see
-	* the entity first (F48).
+	* the entity first (F48). The hook itself plays at once, so they see the start pose it writes (F49);
+	* `ui.enter` plays it again when one of them changed what it read.
 	*
 	* @param entity - The entity the `Box` was attached to.
 	*/
@@ -55738,6 +55880,8 @@ function createReconciler(ctx, modules, fields) {
 		if (entering.count < entering.list.length) entering.list[entering.count] = entity;
 		else entering.list.push(entity);
 		entering.count += 1;
+		const element = state.elements.get(entity);
+		if (arrives(element)) modules.layout.pose(element, overlayOf(element) === void 0 ? void 0 : createSpan());
 	}
 	/**
 	* Plays the enter hooks queued since the last call, in the order the elements came. The `ui.enter`
@@ -56593,6 +56737,203 @@ function watched(handle, span, watch) {
 	};
 }
 /**
+* A handle that keeps what an enter hook read and wrote: the components it read with `get`, the
+* components it wrote, and every `set` with the values it wrote over. Everything goes on to the
+* real handle.
+*
+* @param handle - The handle the hook plays on.
+* @param posed - Where it is kept.
+* @returns The recording handle.
+*/
+function recording(handle, posed) {
+	const wrote = (component) => {
+		if (!posed.written.includes(component.componentName)) posed.written.push(component.componentName);
+	};
+	return {
+		entity: handle.entity,
+		key: handle.key,
+		get: (component) => {
+			if (!posed.reads.some((read) => read.component === component)) posed.reads.push({
+				component: asAnyComponent(component),
+				seen: {}
+			});
+			return handle.get(component);
+		},
+		rest: (component) => handle.rest(component),
+		set: (component, patch) => {
+			wrote(component);
+			keepWrite(posed, asAnyComponent(component), patch, handle.get(component));
+			handle.set(component, patch);
+		},
+		tween: (component, to, options) => {
+			wrote(component);
+			return handle.tween(component, to, options);
+		},
+		toRest: (component, options) => {
+			wrote(component);
+			return handle.toRest(component, options);
+		},
+		all: (handles) => handle.all(handles),
+		peer: (key) => handle.peer(key)
+	};
+}
+/**
+* Keeps one `set` of an enter hook with the values its fields had before it. A component the
+* entity does not carry yet has nothing to go back to: a replay writes it again.
+*
+* @param posed - Where the write is kept.
+* @param component - The component the hook wrote.
+* @param patch - The fields it wrote.
+* @param current - The component's value before the write, if the entity carries it.
+*/
+function keepWrite(posed, component, patch, current) {
+	if (current === void 0) return;
+	const wrote = { ...patch };
+	const was = current;
+	const before = {};
+	for (const field of Object.keys(wrote)) before[field] = was[field];
+	posed.writes.push({
+		component,
+		wrote,
+		before
+	});
+}
+/**
+* A component type as the record of an enter play keeps it.
+*
+* @param component - The component type a hook used.
+* @returns The same type, read as a record of fields.
+*/
+function asAnyComponent(component) {
+	return component;
+}
+/**
+* Plays the enter hook of an element at its `Box`, before the game's systems of phase `sync` see
+* the element, so they see its start pose (F49). What the hook read and wrote is kept on the
+* element: `enterPosed` plays it again in `ui.enter` when a game system changed a component it
+* read (F48), and keeps this play otherwise.
+*
+* @param ctx - Domain context of the ui plugin.
+* @param element - The element whose `Box` was just attached.
+* @param span - Notes the longest finite track the hook starts, for the level of an overlay.
+*/
+function poseEnter(ctx, element, span) {
+	const hook = element.motion?.enter;
+	if (hook === void 0) return;
+	const posed = {
+		motion: void 0,
+		reads: [],
+		written: [],
+		writes: [],
+		span
+	};
+	posed.motion = play(ctx, element, (view) => hook(recording(view, posed), element.node, void 0, element.cause), span);
+	element.posed = posed;
+	const ecs = ctx.deps.world.ecs;
+	for (const read of posed.reads) {
+		if (posed.written.includes(read.component.componentName)) continue;
+		read.seen = { ...ecs.get(element.entity, read.component) };
+	}
+}
+/**
+* Tells whether a game system changed a component the enter hook read at the `Box`.
+*
+* @param ctx - Domain context of the ui plugin.
+* @param element - The element.
+* @param posed - What the play at the `Box` kept.
+* @returns True when a field the hook could have read is not what it was.
+*/
+function readChanged(ctx, element, posed) {
+	const ecs = ctx.deps.world.ecs;
+	for (const read of posed.reads) {
+		if (posed.written.includes(read.component.componentName)) continue;
+		if (fieldsDiffer(read.seen, ecs.get(element.entity, read.component))) return true;
+	}
+	return false;
+}
+/**
+* Tells whether a component's value is not the one a play saw: a field differs, one came or went,
+* or the component itself went.
+*
+* @param seen - The fields as the play saw them.
+* @param now - The value now, or nothing when the entity lost the component.
+* @returns True when they differ.
+* @example
+* ```ts
+* fieldsDiffer({ dy: 300 }, { dy: 180 }); // true
+* ```
+*/
+function fieldsDiffer(seen, now) {
+	if (now === void 0) return Object.keys(seen).length > 0;
+	const value = now;
+	const fields = /* @__PURE__ */ new Set([...Object.keys(seen), ...Object.keys(value)]);
+	for (const field of fields) if (value[field] !== seen[field]) return true;
+	return false;
+}
+/**
+* Undoes the play at the `Box` before the hook plays again: its motion is cancelled and forgotten,
+* and a field still holding what a `set` wrote gets its value from before. A field written since
+* keeps the new value. The later writes go back first, so the first one's value is what stays.
+*
+* @param ctx - Domain context of the ui plugin.
+* @param element - The element.
+* @param posed - What the play at the `Box` kept.
+*/
+function undoPosed(ctx, element, posed) {
+	forgetMotion(element, posed.motion);
+	for (const write of posed.writes.toReversed()) revertWrite(ctx, element, write);
+}
+/**
+* Cancels the motion of a play that is undone and takes it out of the element's handles.
+*
+* @param element - The element.
+* @param motion - The motion the play returned, if any.
+*/
+function forgetMotion(element, motion) {
+	if (motion === void 0) return;
+	motion.cancel();
+	const at = element.handles.indexOf(motion);
+	if (at !== -1) element.handles.splice(at, 1);
+	element.endless?.delete(motion);
+}
+/**
+* Gives one `set` of an undone play back: each field still holding what it wrote gets the value it
+* had before.
+*
+* @param ctx - Domain context of the ui plugin.
+* @param element - The element.
+* @param write - The write to take back.
+*/
+function revertWrite(ctx, element, write) {
+	const ecs = ctx.deps.world.ecs;
+	const current = ecs.get(element.entity, write.component);
+	if (current === void 0) return;
+	const kept = Object.keys(write.wrote).filter((field) => current[field] === write.wrote[field]);
+	if (kept.length === 0) return;
+	ecs.set(element.entity, write.component, Object.fromEntries(kept.map((field) => [field, write.before[field]])));
+}
+/**
+* Settles the enter hook an element played at its `Box`, in `ui.enter`: when a game system of
+* `sync` changed a component the hook read, the play is undone and the hook plays again on what
+* the system wrote (F48); otherwise the play stands, and an overlay's span gets what it noted.
+*
+* @param ctx - Domain context of the ui plugin.
+* @param element - The element whose enter plays now.
+* @param span - Where the longest finite track is noted, for the level of an overlay.
+* @returns True when the play at the `Box` stands; false when there was none, or it was undone.
+*/
+function enterPosed(ctx, element, span) {
+	const posed = element.posed;
+	if (posed === void 0) return false;
+	element.posed = void 0;
+	if (readChanged(ctx, element, posed)) {
+		undoPosed(ctx, element, posed);
+		return false;
+	}
+	if (span !== void 0 && posed.span !== void 0) Object.assign(span, posed.span);
+	return true;
+}
+/**
 * Runs one motion hook and keeps the handle it returned, so the exit sweep knows when the
 * element is still playing. A motion whose hook started a track that repeats forever is also
 * noted as endless: the sweep never waits for it. Without a hook the value the solve wrote stands;
@@ -57175,23 +57516,55 @@ function shownOf(element, source) {
 }
 /**
 * The size a text or an icon takes before Yoga clamps it: an icon is square on one line of its
-* text style, a bound text measures the string it shows, any other text its content. The size is
-* rounded up to whole units. Yoga rounds a node with a measure function outward but sizes its
-* parent from the unrounded length, so a fractional size would run into the parent's padding.
+* text style, a bound text measures the string it shows, any other text its content, wrapped at
+* `width` when its style wraps at its box. The size is rounded up to whole units. Yoga rounds a
+* node with a measure function outward but sizes its parent from the unrounded length, so a
+* fractional size would run into the parent's padding.
 *
 * @param element - The text or icon element.
 * @param source - What it is measured through.
+* @param width - The width Yoga offers, or `undefined` when it bounds none.
 * @returns The width and the height, in whole units.
 */
-function naturalSize(element, source) {
+function naturalSize(element, source, width) {
 	const { content, style } = contentOf$1(element);
-	const size = element.type === "icon" ? squareOf(source.measure(LINE_SAMPLE, style)) : source.measure(shownOf(element, source) ?? content, style);
+	const size = element.type === "icon" ? squareOf(source.measure(LINE_SAMPLE, style)) : source.measure(shownOf(element, source) ?? content, style, width);
 	return {
 		width: Math.ceil(size.width - WHOLE_EPSILON),
 		height: Math.ceil(size.height - WHOLE_EPSILON)
 	};
 }
 /**
+* The width Yoga bounds a measure with: what it offers in an exact or an at-most mode, nothing in
+* an undefined one, where a text is as wide as one line of it.
+*
+* @param yoga - The loaded Yoga module, for the measure modes.
+* @param width - What Yoga offered on the width.
+* @param mode - How to read that width.
+* @returns The width, or `undefined` when none is bounded.
+*/
+function offeredWidth(yoga, width, mode) {
+	if (mode === yoga.MEASURE_MODE_UNDEFINED || !Number.isFinite(width)) return void 0;
+	return width;
+}
+/**
+* The width a text wrapped at: the width Yoga offered, when the text measures to another size
+* there than on one line, which only a style with `wrap: "box"` does. A text that fits, any other
+* style and an icon wrapped at none, so `ui` writes no box on them and a described or saved `Text`
+* carries none.
+*
+* @param element - The text or icon element.
+* @param source - What it is measured through.
+* @param offered - The width Yoga offered, or `undefined` when it bounded none.
+* @param size - What the element measured at `offered`.
+* @returns The width, or `undefined` when the text did not wrap at it.
+*/
+function wrappedAt(element, source, offered, size) {
+	if (offered === void 0 || element.type !== "text") return void 0;
+	const line = naturalSize(element, source);
+	return line.width !== size.width || line.height !== size.height ? offered : void 0;
+}
+/**
 * Clamps one axis of a measured size to what Yoga offered on that axis.
 *
 * @param yoga - The loaded Yoga module, for the three measure modes.
@@ -57227,7 +57600,8 @@ function clampToMode(yoga, measured, asked) {
 }
 /**
 * Installs the measure function of a text element, or drops it when the text is fixed. The
-* function keeps the size it answered on the element, for `remeasureShown`.
+* function keeps the size it answered and the width it was offered on the element, for
+* `remeasureShown`.
 *
 * @param state - The layout state, for the Yoga module and the `measured` counter.
 * @param node - The node of the element.
@@ -57242,9 +57616,11 @@ function installMeasure(state, node, element, source) {
 		return;
 	}
 	const measureFunction = (width, widthMode, height, heightMode) => {
-		const size = naturalSize(element, source);
+		const offered = offeredWidth(yoga, width, widthMode);
+		const size = naturalSize(element, source, offered);
 		state.measured += 1;
 		element.measuredSize = size;
+		element.measuredWidth = wrappedAt(element, source, offered, size);
 		if (element.type === "icon") state.iconLine = lineOf(source);
 		return clampToMode(yoga, size, {
 			width,
@@ -57266,12 +57642,29 @@ function markMeasured(state, element) {
 	state.byEntity.get(element.entity)?.markDirty();
 }
 /**
+* The width a text that was measured inside a bound width is laid out at now: its node's content
+* width from the last solve. Yoga may serve a width it measured before from its own cache without
+* calling the measure function, so the width that function was offered last can be another one.
+*
+* @param state - The layout state, for the edge enums of Yoga.
+* @param node - The node of the text.
+* @param element - The text element.
+* @returns The content width, or `undefined` when the text was measured unbounded.
+*/
+function laidOutWidth(state, node, element) {
+	const yoga = state.yoga;
+	if (element.measuredWidth === void 0 || yoga === void 0) return void 0;
+	const padding = node.getComputedPadding(yoga.EDGE_LEFT) + node.getComputedPadding(yoga.EDGE_RIGHT);
+	return node.getComputedWidth() - padding;
+}
+/**
 * Marks the node of a text dirty when what it draws now measures to another size than the node was
 * laid out with. `text` writes `Text` when the shown string of a bound label changes, and for
 * every label it resolves again: a message after a new locale, any label when its font arrives or
 * its style is swapped. So a text without `bind` is measured again too, and a counter that rolls
-* through digits of one width asks for no solve. A text with a fixed size has no measure function
-* and is left alone.
+* through digits of one width asks for no solve. A text whose width was bounded is measured at
+* the width it is laid out at now, so one that wraps at its box compares the same lines. A text
+* with a fixed size has no measure function and is left alone.
 *
 * @param state - The layout state, for the node of the element.
 * @param element - An element whose `Text` changed this frame.
@@ -57283,7 +57676,7 @@ function remeasureShown(state, element, source) {
 	const before = element.measuredSize;
 	if (node === void 0 || before === void 0) return false;
 	if (!needsMeasure(element)) return false;
-	const size = naturalSize(element, source);
+	const size = naturalSize(element, source, laidOutWidth(state, node, element));
 	if (size.width === before.width && size.height === before.height) return false;
 	node.markDirty();
 	return true;
@@ -58139,7 +58532,7 @@ async function loadYogaModule() {
 */
 function textSourceOf(ctx) {
 	return {
-		measure: (content, style) => ctx.deps.text.measure(content, style),
+		measure: (content, style, width) => ctx.deps.text.measure(content, style, width),
 		resolved: (entity) => ctx.deps.world.ecs.get(entity, Text)?.resolved,
 		duration: (ms) => ctx.deps.i18n.duration(ms)
 	};
@@ -58202,9 +58595,11 @@ function createLayoutApi(ctx) {
 		},
 		enter: (element, span) => {
 			const hook = element.motion?.enter;
-			play(ctx, element, hook === void 0 ? void 0 : (view) => hook(view, element.node, void 0, element.cause), span);
+			const played = hook === void 0 ? void 0 : (view) => hook(view, element.node, void 0, element.cause);
+			if (!enterPosed(ctx, element, span)) play(ctx, element, played, span);
 			startLoop(ctx, element);
 		},
+		pose: (element, span) => poseEnter(ctx, element, span),
 		loop: (element) => startLoop(ctx, element),
 		change: (element, previous, hint) => {
 			const hook = element.motion?.change?.Box;
@@ -58787,8 +59182,9 @@ function registerComponents(ctx, jsx) {
 * control, so the cursor shows a hand over a local-state button. On an agent page also the tap
 * counter of `DebugTrigger` and its check of a view that takes no press.
 *
-* The `Box` hook only queues an element; `ui.enter` plays its enter hook after the game's systems
-* of the frame and before it is drawn (F48). Every remover goes into the state, so the teardown
+* The `Box` hook plays an element's enter hook and queues it, so the game's systems see its start
+* pose (F49); `ui.enter` starts its loop after them and before the frame is drawn, and plays the
+* hook again when a system changed what it read (F48). Every remover goes into the state, so the teardown
 * closes exactly these, and gives every hosted view its layer back before the ui entities go.
 *
 * @param ctx - Domain context of the ui plugin.