@moku-labs/game 0.9.0 → 0.11.0

package/dist/{types-xXfyk56Q.d.mts → types-BUwDHKXm.d.mts}

@@ -1,1913 +1,1913 @@
-import { B as ComponentValue, Bt as Api, D as Point$2, F as AnyComponentType, I as AnyComponentValue, It as Descriptor, Jt as Json, O as ViewportSize, P as AnyComponent, Rt as Hint, V as Entity, Z as ChangeHook, at as ProjectionMotion, it as NumericFields, k as Api$2, lt as ViewHandle, m as Api$3, nt as Motion, o as Events$1, pn as Api$5, rt as MotionHandle, t as Api$4, ut as Api$1, xn as Require, z as ComponentType } from "./types-B0v5VVa3.mjs";
+import { A as Api$2, B as ComponentType, F as AnyComponent, H as Entity, I as AnyComponentType, L as AnyComponentValue, Lt as Descriptor, O as Point$2, Q as ChangeHook, Sn as Require, V as ComponentValue, Vt as Api$5, Xt as Json, at as NumericFields, dt as Api$1, h as Api$3, hn as Api, it as MotionHandle, k as ViewportSize, ot as ProjectionMotion, rt as Motion, s as Events$1, t as Api$4, ut as ViewHandle, zt as Hint } from "./types-ZQLYXo5X.mjs";
 import { Log } from "@moku-labs/common/browser";
 import { PluginCtx } from "@moku-labs/core";
 
-//#region src/plugins/renderer/components.d.ts
+//#region src/plugins/ui/styles/types.d.ts
 /**
- * Where a view sits, in reference units and radians. Relative to the `Parent` when there is one.
- * `pivot` is the local point the view turns and scales around, and `x`, `y` is where that point
- * lands; the default pivot `{ x: 0, y: 0 }` is the view's own origin.
+ * A length that may also come from the notch. The four tokens are replaced by `resolve` with the
+ * matching `viewport.safeArea` value.
  *
  * @example
  * ```ts
- * // A 200 x 80 button that grows around its centre.
- * const value: TransformValue = {
- *   x: 640, y: 340, rotation: 0, scale: 1.1, pivot: { x: 100, y: 40 }
- * };
+ * const top: SafeAreaToken = "safeArea.top";
  * ```
  */
-type TransformValue = {
-  x: number;
-  y: number;
-  rotation: number;
-  scale: number;
-  pivot: Point$2;
-};
+type SafeAreaToken = "safeArea.top" | "safeArea.right" | "safeArea.bottom" | "safeArea.left";
 /**
- * How a sized sprite fills its box: `"fill"` stretches, `"contain"` scales uniformly inside the
- * box and centres, `"cover"` scales uniformly over the box and crops the overflow.
+ * A length in reference units, or one of the safe-area tokens.
  *
  * @example
  * ```ts
- * const fit: SpriteFit = "cover";
+ * const length: Length = 24;
  * ```
  */
-type SpriteFit = "fill" | "contain" | "cover";
+type Length = number | SafeAreaToken;
 /**
- * One textured quad. `texture` is an asset key; `defineGame` narrows it to the game's keys.
- * `width` and `height` are the box in reference units; 0 on an axis keeps the texture's own size
- * there. `anchor` is the point of the box that sits on the `Transform`. `alpha` fades the quad
- * and the entity's children.
+ * Padding or margin: one number for every edge, or a value per edge.
  *
  * @example
  * ```ts
- * const value: SpriteValue = {
- *   texture: "board.bg-forest-meadow", tint: 0xffffff, alpha: 1, anchor: { x: 0, y: 0 },
- *   width: 1080, height: 1920, fit: "cover"
- * };
+ * const padding: Edges = { top: "safeArea.top", left: 16 };
  * ```
  */
-type SpriteValue = {
-  texture: string;
-  tint: number;
-  alpha: number;
-  anchor: Point$2;
-  width: number;
-  height: number;
-  fit: SpriteFit;
+type Edges = Length | {
+  top?: Length;
+  right?: Length;
+  bottom?: Length;
+  left?: Length;
 };
 /**
- * A stretchable panel. The slice borders come with the texture, not with the component. `debug`
- * strokes the bounds and the four cut lines over the panel: cyan, red when the corners overlap or
- * the texture is missing. `clip` masks the children of the entity to the `width × height` box,
- * the same rule as `Shape.clip`: the mask is a filled rectangle and is never drawn, and the panel
- * itself is never masked. `alpha` fades the panel and the entity's children.
+ * A main-axis or cross-axis size: reference units, a percent of the parent, or `"auto"`.
  *
  * @example
  * ```ts
- * const value: NineSliceValue = {
- *   texture: "ui.panel", width: 600, height: 320, alpha: 1, tint: 0xffffff, debug: false,
- *   clip: false
- * };
- * // The board tray, outlined while its insets are checked.
- * const tray: NineSliceValue = {
- *   ...value, texture: "board.board-tray", width: 1000, height: 1040, debug: true
- * };
- * // A text field: a long value never draws outside the frame.
- * const field: NineSliceValue = {
- *   ...value, texture: "ui.field", width: 480, height: 96, clip: true
- * };
+ * const width: Extent = "50%";
  * ```
  */
-type NineSliceValue = {
-  texture: string;
-  width: number;
-  height: number;
-  alpha: number;
-  tint: number;
-  debug: boolean;
-  clip: boolean;
+type Extent = number | `${number}%` | "auto";
+/**
+ * The flow group of the vocabulary: what Yoga's flexbox calls are set from.
+ *
+ * @example
+ * ```ts
+ * const flow: FlowStyle = { direction: "row", gap: 12, justify: "between" };
+ * ```
+ */
+type FlowStyle = {
+  direction?: "row" | "column";
+  wrap?: boolean;
+  justify?: "start" | "center" | "end" | "between" | "around" | "evenly";
+  align?: "start" | "center" | "end" | "stretch";
+  alignSelf?: "auto" | "start" | "center" | "end" | "stretch";
+  gap?: number;
+  grow?: number;
+  shrink?: number;
 };
 /**
- * The escape hatch: the game owns a Pixi object and `sync` only attaches and detaches it.
+ * The box group: what the element takes up before its children are placed.
  *
  * @example
  * ```ts
- * const value: DisplayValue = { object: spineAnimation };
+ * // The board slot: 970 u of cells, scaled down on a short phone.
+ * const box: BoxStyle = { width: 970, height: 970, fit: "contain" };
  * ```
  */
-type DisplayValue = {
-  object: unknown;
+type BoxStyle = {
+  padding?: Edges;
+  margin?: Edges;
+  width?: Extent;
+  height?: Extent;
+  minWidth?: Extent;
+  minHeight?: Extent;
+  maxWidth?: Extent;
+  maxHeight?: Extent;
+  aspect?: number; /** `"hidden"` clips the children to the rect, as a scroll container does. */
+  overflow?: "visible" | "hidden" | "scroll";
+  /**
+   * `"contain"`: the element keeps its own size and leaves the flow, then is scaled down to fit
+   * the content box of its parent and centred in it. Its children keep their natural rects.
+   */
+  fit?: "contain";
 };
 /**
- * A filled rounded rectangle or a triangle, anchored at the top left of the `Transform`. `kind`
- * picks the outline: `"rect"` (the default) or `"triangle"`, which fills its `w × h` box pointing
- * right (rotate the element for another direction) and ignores `radius`. `fillAlpha` is the alpha
- * of the fill alone: 0 draws only the stroke, a ring. `alpha` fades the whole shape and the
- * entity's children: a disabled button at 0.6 draws its icon at 0.6 too. `dash` is the
- * dash length of the stroke in reference units, with gaps of half a dash; 0 strokes a solid line.
- * `clip` masks the children of the entity to the shape, always solid, which is how `ui` draws a
- * scroll and an overflow. The shape itself is never masked, so its stroke is drawn whole.
+ * The position group. `reason` is the comment `lint()` asks for next to an absolute element.
  *
  * @example
  * ```ts
- * const value: ShapeValue = {
- *   kind: "rect", w: 320, h: 96, fill: 0x101018, fillAlpha: 1, alpha: 1, radius: 16,
- *   stroke: 0x000000, strokeWidth: 0, dash: 0, clip: false
- * };
- * // The honey ring on a selected cell: a stroke and no fill.
- * const ring: ShapeValue = {
- *   kind: "rect", w: 140, h: 140, fill: 0xffffff, fillAlpha: 0, alpha: 1, radius: 24,
- *   stroke: 0xffc233, strokeWidth: 6, dash: 0, clip: false
- * };
- * // The play glyph of a watch button, and a dashed focus ring: 10 u dashes, 5 u gaps.
- * const play: ShapeValue = { ...ring, kind: "triangle", w: 36, h: 40, fillAlpha: 1, strokeWidth: 0 };
- * const focus: ShapeValue = { ...ring, w: 200, h: 80, stroke: 0x3a2212, strokeWidth: 4, dash: 10 };
+ * const pinned: PositionStyle = { position: "absolute", top: 0, right: 0, reason: "badge" };
+ * // The order strip of the board drawn over the tray that follows it.
+ * const strip: PositionStyle = { zIndex: 1 };
  * ```
  */
-type ShapeValue = {
-  kind: "rect" | "triangle";
-  w: number;
-  h: number;
-  fill: number;
-  fillAlpha: number;
-  alpha: number;
-  radius: number;
-  stroke: number;
-  strokeWidth: number;
-  dash: number;
-  clip: boolean;
+type PositionStyle = {
+  position?: "relative" | "absolute";
+  left?: Length;
+  top?: Length;
+  right?: Length;
+  bottom?: Length;
+  reason?: string;
+  /**
+   * The draw order among the siblings, an integer: a higher one draws over a lower one, and a
+   * sibling without it draws at 0 in markup order. Ignored on a root element, which `lint()`
+   * reports; a root draws at the order of its layer.
+   */
+  zIndex?: number;
 };
 /**
- * What `sprite()` takes: the two things every visual needs, and the four that have defaults.
+ * The visual group: what is written to `Shape`, `Sprite` or `NineSlice`. There is no font size
+ * here — the size of a text comes from its text style key.
  *
  * @example
  * ```ts
- * const options: SpriteOptions = { texture: "board.cell", at: { x: 540, y: 300 } };
+ * // A wooden button: the nine-slice of the style, greyed while disabled.
+ * const visual: VisualStyle = { nineSlice: "ui.button-wood", alpha: 1, tint: 0xffffff };
+ * // The popup board while its insets are checked: the slice lines drawn over it.
+ * const checked: VisualStyle = { nineSlice: "ui.panel-signboard", debug: true };
+ * // The play glyph of the Watch button, and a dashed ring around a slot.
+ * const play: VisualStyle = { shape: "triangle", fill: 0xfffbe8 };
+ * const slot: VisualStyle = { stroke: 0x3a2212, strokeWidth: 4, dash: 10, radius: 24 };
  * ```
  */
-type SpriteOptions = {
-  texture: string;
-  at: Point$2;
-  tint?: number;
+type VisualStyle<Asset extends string = string> = {
+  fill?: number;
+  stroke?: number;
+  strokeWidth?: number;
+  radius?: number;
   alpha?: number;
-  anchor?: Point$2;
-  scale?: number;
+  /**
+   * The shape of the rectangle an element without a nine-slice is drawn with: `"rect"` (the
+   * default) or `"triangle"`, which fills the box pointing right and ignores `radius`. Turn the
+   * element with `rotation` for another direction.
+   */
+  shape?: "rect" | "triangle"; /** The dash length of the stroke in reference units, with gaps of half a dash; 0 is solid. */
+  dash?: number;
+  /**
+   * The asset key of a nine-slice drawn at the rect instead of the rounded rectangle. Any tag
+   * but `image`, `icon` and `text` takes it; a clipping element (`scroll`, `overflow: "hidden"`)
+   * keeps its rectangle, which carries the clip.
+   */
+  nineSlice?: Asset; /** Multiplies the colour of a nine-slice or an image. */
+  tint?: number;
+  /**
+   * Outlines the nine-slice of the style: its bounds and the four slice lines, cyan, red when
+   * the corners overlap or the texture is missing. A look for checking art, never for a player.
+   */
+  debug?: boolean;
 };
 /**
- * Where a view sits: reference units, radians, uniform scale, and the local point it turns
- * around.
+ * Where an element turns and scales: its centre, the middle of its top edge, its top-left
+ * corner, or a point given in fractions of its box.
+ *
+ * @example
+ * ```ts
+ * // A sign that hangs from its ropes swings around the middle of its top edge.
+ * const origin: Origin = "top";
+ * ```
  */
-declare const Transform: ComponentType<TransformValue>;
+type Origin = "center" | "top" | "topLeft" | {
+  x: number;
+  y: number;
+};
 /**
- * One textured quad. `texture` is an asset key, resolved through the texture providers; a size
- * and a `fit` draw it into a box.
+ * The transform group: how an element is drawn, never where it is laid out. Written into the
+ * rest `Transform`, so a hover lift or a pressed sink never moves a sibling.
+ *
+ * @example
+ * ```ts
+ * // A button that lifts under the mouse.
+ * const lift: TransformStyle = { offsetY: -6, scale: 1.05, origin: "center" };
+ * // The title plaque of a popup, tilted by 1.5 degrees around the middle of its top edge.
+ * const plaque: TransformStyle = { rotation: -0.026, origin: "top" };
+ * ```
  */
-declare const Sprite: ComponentType<SpriteValue>;
+type TransformStyle = {
+  /** Moves the drawn element right, in reference units. */offsetX?: number; /** Moves the drawn element down, in reference units. */
+  offsetY?: number; /** Uniform scale around the origin. */
+  scale?: number; /** Turns the drawn element around the origin, in radians, clockwise; 0 by default. */
+  rotation?: number; /** The point the element scales and turns around; the centre by default. */
+  origin?: Origin;
+};
 /**
- * A stretchable panel, sized in reference units, with its own alpha and tint. `debug: true` draws
- * the slice outline over it. `clip: true` masks the children of the entity to the panel box.
+ * Everything but the variants: the five groups of the vocabulary.
+ *
+ * @example
+ * ```ts
+ * const base: BaseStyle = { direction: "row", gap: 8, fill: 0x101018 };
+ * ```
  */
-declare const NineSlice: ComponentType<{
-  texture: string;
-  width: number;
-  height: number;
-  alpha: number;
-  tint: number;
-  debug: boolean;
-  clip: boolean;
-}>;
-/**
- * The entity this view moves with. `0` means no parent.
- */
-declare const Parent: ComponentType<{
-  entity: number;
-}>;
-/**
- * A display object the game owns. Never pooled, never destroyed by `sync`.
- */
-declare const Display: ComponentType<DisplayValue>;
+type BaseStyle<Asset extends string = string> = FlowStyle & BoxStyle & PositionStyle & VisualStyle<Asset> & TransformStyle;
 /**
- * A filled rounded rectangle or a right-pointing triangle, drawn with Pixi `Graphics` and redrawn
- * only when a field changed. `fillAlpha: 0` draws only the stroke, `dash` above 0 dashes it.
- * `clip: true` masks the children of the entity to the shape.
+ * The seven state variants of a style, applied in the order disabled, active, selected, hover,
+ * focus, pressed, covered. While `disabled` is true, `hover` and `pressed` are not applied.
+ *
+ * @example
+ * ```ts
+ * // One rule set for every control: lift on hover, sink when pressed, swap the texture when off.
+ * const variants: IsVariants = {
+ *   hover: { offsetY: -6, scale: 1.05 },
+ *   focus: { scale: 1.05 },
+ *   pressed: { offsetY: 4, scale: 0.95 },
+ *   disabled: { nineSlice: "ui.button-disabled" }
+ * };
+ * ```
  */
-declare const Shape: ComponentType<ShapeValue>;
+type IsVariants<Asset extends string = string> = {
+  pressed?: BaseStyle<Asset>;
+  disabled?: BaseStyle<Asset>;
+  active?: BaseStyle<Asset>;
+  selected?: BaseStyle<Asset>; /** The mouse or pen is over the element. Touch never hovers. */
+  hover?: BaseStyle<Asset>; /** The keyboard focus is on the element: Tab moved it there, and no pointer tapped since. */
+  focus?: BaseStyle<Asset>; /** The popup the element belongs to is kept under another one. */
+  covered?: BaseStyle<Asset>;
+};
 /**
- * Bundles the two components every visual needs, so a projection `view` reads as one line.
+ * The four viewport variants of a style, applied in the order portrait, landscape, tall, wide.
  *
- * @param options - Texture key, position, and the four values that have defaults.
- * @returns The `Sprite` and the `Transform` value, in that order.
  * @example
  * ```ts
- * sprite({ texture: "board.cell", at: { x: 540, y: 300 } });
- * // [Sprite({ texture: "board.cell", tint: 0xffffff, alpha: 1, anchor: { x: 0.5, y: 0.5 },
- * //   width: 0, height: 0, fit: "fill" }),
- * //  Transform({ x: 540, y: 300, rotation: 0, scale: 1, pivot: { x: 0, y: 0 } })]
+ * const variants: WhenVariants = { landscape: { direction: "row" } };
  * ```
  */
-declare function sprite(options: SpriteOptions): [ComponentValue<SpriteValue>, ComponentValue<TransformValue>];
-declare namespace types_d_exports$2 {
-  export { Carried, Config$2 as Config, Deps$1 as Deps, Direction, GesturePhase, InputApi, InputCtx, KernelSlice$1 as KernelSlice, KeyInput, KeyListener, Point$1 as Point, PointerListener, RawSample, State$2 as State, TapListener, Target };
-}
+type WhenVariants<Asset extends string = string> = {
+  portrait?: BaseStyle<Asset>;
+  landscape?: BaseStyle<Asset>;
+  tall?: BaseStyle<Asset>;
+  wide?: BaseStyle<Asset>;
+};
 /**
- * A point in reference units, as `renderer.viewport.toReference` answers it.
+ * One style as a game writes it: the base vocabulary plus the two variant tables. `Asset` is the
+ * game's asset key union: `uiFor` narrows `nineSlice` to it, the way it narrows `texture`.
  *
  * @example
  * ```ts
- * const point: Point = { x: 540, y: 960 };
+ * const topBar: Style = { direction: "row", gap: 12, when: { landscape: { justify: "end" } } };
  * ```
  */
-type Point$1 = {
-  x: number;
-  y: number;
+type Style<Asset extends string = string> = BaseStyle<Asset> & {
+  is?: IsVariants<Asset>;
+  when?: WhenVariants<Asset>;
 };
 /**
- * The dominant axis of a swipe.
+ * What `resolve` answers with: the base vocabulary with every safe-area token replaced by a
+ * number and every variant already merged in. Frozen.
  *
  * @example
  * ```ts
- * const direction: Direction = "left";
+ * const resolved: ResolvedStyle = { direction: "row", gap: 12, padding: 24 };
  * ```
  */
-type Direction = "up" | "down" | "left" | "right";
+type ResolvedStyle = Omit<BaseStyle, "padding" | "margin" | "left" | "top" | "right" | "bottom"> & {
+  padding?: number | {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+  };
+  margin?: number | {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+  };
+  left?: number;
+  top?: number;
+  right?: number;
+  bottom?: number;
+};
 /**
- * What `app.input.*` is pointed at: the projection key of a live view, or an entity. A key never
- * addresses a view in the despawn queue.
+ * The viewport flags of a style: which `when` variants apply this frame.
  *
  * @example
  * ```ts
- * const target: Target = { projection: "board.items", key: "i5" };
+ * const flags: WhenFlags = { portrait: true, landscape: false, tall: true, wide: false };
  * ```
  */
-type Target = {
-  projection: string;
-  key: string;
-} | Entity;
+type WhenFlags = {
+  portrait: boolean;
+  landscape: boolean;
+  tall: boolean;
+  wide: boolean;
+};
 /**
- * One pointer event as the DOM handlers queue it: no hit test, no reference units, no decision.
- * `cancel` is a `pointercancel`, `lost` a lost pointer capture, `leave` the pointer leaving the
- * canvas. `pointerType` is the device: only a mouse or a pen hovers.
+ * The state flags of an element: what the markup declared (`disabled`, `active`, `selected`),
+ * `pressed` and `hover` from the pointer, `focus` from the keyboard, and `covered` from the root
+ * it belongs to.
  *
  * @example
  * ```ts
- * const sample: RawSample = {
- *   kind: "down", pointerType: "touch", pointerId: 1, clientX: 320, clientY: 640
+ * const flags: IsFlags = {
+ *   pressed: false, hover: true, focus: false, disabled: false, active: true, selected: false,
+ *   covered: false
  * };
  * ```
  */
-type RawSample = {
-  kind: "down" | "move" | "up" | "cancel" | "lost" | "leave";
-  pointerType: "mouse" | "touch" | "pen";
-  pointerId: number;
-  clientX: number;
-  clientY: number;
+type IsFlags = {
+  pressed: boolean;
+  hover: boolean;
+  focus: boolean;
+  disabled: boolean;
+  active: boolean;
+  selected: boolean;
+  covered: boolean;
 };
 /**
- * Where the one active pointer stands in the gesture machine.
+ * A flat table of design tokens a game reads in its styles.
  *
  * @example
  * ```ts
- * const phase: GesturePhase = "dragging";
+ * const tokens: Tokens = { space: { md: 16 }, color: { panel: 0x101018 } };
  * ```
  */
-type GesturePhase = "idle" | "pressed" | "longPressed" | "dragging" | "tracing";
+type Tokens = {
+  readonly space?: Readonly<Record<string, number>>;
+  readonly color?: Readonly<Record<string, number>>;
+  readonly radius?: Readonly<Record<string, number>>;
+  readonly font?: Readonly<Record<string, string>>;
+};
 /**
- * What `onTap` hands a listener: the view the finger let go on, inside the tap slop.
+ * styles module state: the flags of the frame and the viewport they were read from.
+ */
+type StylesState = {
+  flags: WhenFlags;
+  viewport: ViewportSize | undefined;
+};
+declare namespace types_d_exports$2 {
+  export { Argument, CompiledMessage, CompiledMessages, Config$2 as Config, DurationStyle, ElementNode, Events, I18nApi, I18nCtx, I18nKit, IntlKit, KeysWithoutParameters, Message, Part, RegisteredModule, ResolvedModule, State$2 as State, StringTable, StringsLoader, TypedTr };
+}
+/**
+ * One interface element handed to a message as a parameter. Structural on purpose: it mirrors
+ * the `DescriptionNode` of `world/projection`, which sits beside `i18n`, so neither plugin
+ * imports the other (seam resolution 1).
  *
  * @example
  * ```ts
- * const tapped: Entity[] = [];
- * const listener: TapListener = entity => tapped.push(entity);
+ * const icon: ElementNode = { type: "icon", props: { name: "hud.coin" }, children: [] };
  * ```
  */
-type TapListener = (entity: Entity) => void;
+type ElementNode = {
+  type: string;
+  key?: string;
+  props: object;
+  children: readonly unknown[];
+};
 /**
- * What `onPointer` registers: called with the raw sample inside the DOM listener, for the kinds
- * `down`, `up` and `cancel`, right after the sample is queued.
+ * What a message parameter may be: a word, a number, a list of words, or an element the
+ * interface draws in the middle of the sentence.
  *
  * @example
  * ```ts
- * const lifts: RawSample[] = [];
- * const listener: PointerListener = sample => {
- *   if (sample.kind === "up") lifts.push(sample);
- * };
+ * const reward: Argument = 25;
+ * const players: Argument = ["Ann", "Bo"];
  * ```
  */
-type PointerListener = (sample: RawSample) => void;
+type Argument = string | number | readonly string[] | ElementNode;
 /**
- * One key press as `onKey` hands it to a listener: the DOM `KeyboardEvent.key` and whether Shift
- * was held.
+ * What `tr` returns: the key and the parameters, frozen. No locale and no string is read at the
+ * call site, so the same value survives a locale change and can be compared and logged.
  *
  * @example
  * ```ts
- * const backTab: KeyInput = { key: "Tab", shift: true };
+ * const orders: Message<"hud.orders", { n: number }> = { key: "hud.orders", params: { n: 3 } };
  * ```
  */
-type KeyInput = {
-  key: string;
-  shift: boolean;
+type Message<Key extends string = string, Values = Record<string, Argument>> = {
+  key: Key;
+  params?: Values;
 };
 /**
- * What `onKey` registers. Returning `true` marks the key handled: input then calls
- * `preventDefault()` on the DOM event, and `app.input.pressKey` answers `true`.
+ * One piece of a formatted message: a run of text, or an element to draw in place. The consumer
+ * never joins the pieces itself, which is what keeps an icon inside a sentence possible.
  *
  * @example
  * ```ts
- * const closeOnEscape: KeyListener = key => key.key === "Escape";
+ * const parts: Part[] = [
+ *   { kind: "element", node: { type: "icon", props: { name: "hud.coin" }, children: [] } },
+ *   { kind: "text", text: " 25" }
+ * ];
  * ```
  */
-type KeyListener = (key: KeyInput) => boolean | void;
+type Part = {
+  kind: "text";
+  text: string;
+} | {
+  kind: "element";
+  node: ElementNode;
+};
 /**
- * input plugin config. Every distance is in reference px, every duration in milliseconds of
- * `time`, so a time scale and a pause apply to the gestures too.
+ * The `Intl.*` formatters of one locale, each memoised by the JSON of its options. Compiled
+ * messages are handed one and never construct a formatter themselves.
  *
  * @example
  * ```ts
- * createApp({ plugins: [...screen], pluginConfigs: { input: { longPressMs: 300, swipeMinPx: 64 } } });
- * // A merge game carries the item in the hand 8% bigger: a board item resting at scale 0.5 on
- * // screen is drawn at 0.54 from the grab to the drop, even after a press squashed it, then
- * // flies home at 0.5.
- * createApp({ plugins: [...screen], pluginConfigs: { input: { heldScale: 1.08 } } });
- * // A game with its own cursors: the config merges shallowly, so both values are given.
- * createApp({ plugins: [...screen], pluginConfigs: { input: { cursor: { control: "grab", idle: "default" } } } });
- * // A word grid with 40 px cells: the finger's path is hit-tested every 16 px, below the
- * // shortest cell span, so a fast finger skips no letter.
- * createApp({ plugins: [...screen], pluginConfigs: { input: { traceStepPx: 16 } } });
+ * const intl = createIntlKit("ru");
+ * intl.plural().select(3); // "few"
  * ```
  */
-type Config$2 = {
-  /** Largest move, in reference px, that still counts as a tap or a long press. */tapSlopPx: number; /** Hold time, in ms of `time`, after which a `Pressable` answers. */
-  longPressMs: number; /** Move, in reference px, that turns a press on a `Draggable` into a drag. */
-  dragStartPx: number; /** Shortest swipe, in reference px. */
-  swipeMinPx: number; /** Longest swipe, in ms of `time`, from pointer down to pointer up. */
-  swipeMaxMs: number;
+type IntlKit = {
+  /** The locale every formatter of this kit is built for. */locale: string; /** The plural rules of the locale; `{ type: "ordinal" }` for `selectordinal`. */
+  plural(options?: Intl.PluralRulesOptions): Intl.PluralRules; /** The number format of the locale. */
+  number(options?: Intl.NumberFormatOptions): Intl.NumberFormat; /** The list format of the locale, which ICU MessageFormat 1 has no syntax for. */
+  list(options?: Intl.ListFormatOptions): Intl.ListFormat; /** The date and time format of the locale. */
+  date(options?: Intl.DateTimeFormatOptions): Intl.DateTimeFormat;
   /**
-   * How much bigger the view in the hand is drawn: its rest scale in root space times this, from
-   * the grab to the release, so a squash a press left on it does not shrink the lift. A view with
-   * no recorded rest starts from its scale at the grab. The drop, the cancel and the abort write
-   * the rest scale back, so the way home starts at the view's own size. `1` changes nothing.
+   * The duration format of the locale. A compiled `{left, duration}` reads it with
+   * `secondsDisplay: "always"`, so a countdown at zero still says "0 sec".
+   *
+   * @param options - The `Intl.DurationFormat` options.
+   * @returns The memoised formatter for these options.
+   * @throws {Error} When the runtime has no `Intl.DurationFormat`.
+   * @example
+   * ```ts
+   * const intl = createIntlKit("en");
+   * intl.duration({ style: "short" }).format({ minutes: 1, seconds: 35 }); // "1 min, 35 sec"
+   * ```
    */
-  heldScale: number;
-  /**
-   * CSS cursors of the canvas. `control` shows while a mouse or a pen rests on a view that
-   * carries `Tappable`, `Draggable`, `Pressable`, `Swipeable` or a component another plugin
-   * registered through `controls.add`, such as ui's `LocalWrite`; `idle` shows everywhere else.
-   * `""` hands the cursor back to the page's own style.
-   */
-  cursor: {
-    control: string;
-    idle: string;
-  };
-  /**
-   * Reference px between two hit tests along the finger's path inside one frame of a trace. Keep
-   * it below the shortest cell span: a longer step jumps over a cell.
-   */
-  traceStepPx: number;
+  duration(options?: Intl.DurationFormatOptions): Intl.DurationFormat;
+};
+/**
+ * How a duration reads: `"long"` (1 minute, 35 seconds), `"short"` (1 min, 35 sec), `"narrow"`
+ * (1m 35s) or `"digital"` (0:01:35). A string file names one in `{left, duration, short}`.
+ *
+ * @example
+ * ```ts
+ * const style: DurationStyle = "digital"; // app.i18n.duration(95_000, style) is "0:01:35"
+ * ```
+ */
+type DurationStyle = "long" | "short" | "narrow" | "digital";
+/**
+ * One message as the build wrote it: a plain function of the parameters and the locale's kit.
+ * There is no ICU parser at run time.
+ *
+ * @example
+ * ```ts
+ * const hello: CompiledMessage = p => [{ kind: "text", text: `Hi ${String(p.name)}` }];
+ * ```
+ */
+type CompiledMessage = (params: Record<string, unknown>, intl: IntlKit) => Part[];
+/**
+ * One compiled module: every message of one locale by its key.
+ *
+ * @example
+ * ```ts
+ * const en: CompiledMessages = { "home.play": () => [{ kind: "text", text: "Play" }] };
+ * ```
+ */
+type CompiledMessages = Record<string, CompiledMessage>;
+/**
+ * A compiled module that is imported on first use. A module namespace is unwrapped to its
+ * `default` member (seam resolution 2).
+ *
+ * @example
+ * ```ts
+ * const loadEnglish: StringsLoader = () => import("./generated/strings.en");
+ * ```
+ */
+type StringsLoader = () => Promise<CompiledMessages | {
+  default: CompiledMessages;
+}>;
+/**
+ * i18n plugin config.
+ *
+ * @example
+ * ```ts
+ * createApp({ pluginConfigs: { i18n: { locale: "ru", fallback: "en", locales: {} } } });
+ * ```
+ */
+type Config$2 = {
+  /** The locale at start. */locale: string; /** The locale a missing key is read from before it is reported missing. */
+  fallback: string;
   /**
-   * The hit circle of a trace cell: its radius is this times the short side of the cell's hit
-   * box, around the box centre. A diagonal then crosses no corner of a neighbour.
+   * Compiled modules outside features, per locale; a loader is imported on first use and its
+   * `default` is unwrapped.
    */
-  traceInset: number;
+  locales: Record<string, CompiledMessages | StringsLoader>;
 };
 /**
- * One view a drag carries on top of the held one: hung under the held view from the grab to the
- * release.
+ * One module registered for one locale, with the name it can be blamed under when two of them
+ * carry the same key.
  */
-type Carried = {
-  /** The carried view. */entity: Entity; /** The `Parent` it had at the grab, hung back under it on the release. */
-  parent: Entity | undefined; /** The remover `world.projection.mute` returned for its root pose. */
-  unmute: () => void;
+type RegisteredModule = {
+  /** The feature that brought the module, or `"pluginConfigs.i18n"` for a configured one. */from: string; /** The module itself, or the loader that fetches it on first use. */
+  messages: CompiledMessages | StringsLoader;
 };
 /**
- * input plugin state: the raw queue the DOM handlers write, and the one gesture in progress.
+ * One registered module whose loader already ran, ready to be merged into a locale.
+ */
+type ResolvedModule = {
+  /** The feature that brought the module, or `"pluginConfigs.i18n"` for a configured one. */from: string; /** The module itself. */
+  messages: CompiledMessages;
+};
+/**
+ * i18n plugin state.
  */
 type State$2 = {
-  /** Written by the DOM handlers, drained by the frame step. */samples: RawSample[];
-  phase: GesturePhase; /** The one active pointer. A sample of any other pointer is dropped while this is set. */
-  pointerId: number | undefined; /** The pressed or held entity. */
-  entity: Entity | undefined; /** The projection key of `entity`, read once at press time. */
-  key: {
-    projection: string;
-    key: string;
-  } | undefined; /** Reference px at pointer down. */
-  start: Point$1; /** `Transform` minus the pointer at the moment of the grab. */
-  grabOffset: Point$1; /** Sum of `time.delta` since pointer down. No device clock is ever read. */
-  pressedMs: number; /** The drop target that carries `Hovered` during a drag. */
-  hovered: Entity | undefined; /** The view that carries `PointerOver`: a press would take it, and a mouse or a pen is over it. */
-  pointerOver: Entity | undefined; /** The `Parent` the held view had at the grab. It is hung back under it on the release. */
-  parent: Entity | undefined; /** The rest scale of the held view in root space: the base of `heldScale`, set back on drop. */
-  restScale: number | undefined;
-  /**
-   * The root pose of the held view, written at the grab and at every move. A carried view is
-   * placed from it when the held view despawns before the release and takes its `Transform`.
-   */
-  heldPose: TransformValue | undefined; /** The remover `world.projection.mute` returned, while a drag runs. */
-  unmute: (() => void) | undefined; /** The views a drag carries on top of the held one, in `carry` order; empty outside a drag. */
-  carried: Carried[]; /** The cells of the trace in progress, in path order; empty outside a trace. */
-  path: Entity[]; /** The intent of the first cell of the trace; a cell of another intent closes the path. */
-  traceIntent: string | undefined; /** True once a cell of another intent was crossed: the path neither grows nor pops. */
-  traceClosed: boolean; /** Where the finger was at the last frame of the trace: the segment starts there. */
-  lastPoint: Point$1 | undefined;
-  canvas: HTMLCanvasElement | undefined;
-  offFrame: (() => void) | undefined;
-  detach: (() => void) | undefined; /** Registered through `onTap`, called in this order on every tap. */
-  tapListeners: TapListener[]; /** Registered through `onKey`, called in this order on every key. */
-  keyListeners: KeyListener[]; /** Registered through `onPointer`, called in this order inside the DOM listener. */
-  pointerListeners: PointerListener[]; /** Takes the one `keydown` listener off `window`; set while a canvas is attached. */
-  detachKeys: (() => void) | undefined; /** `time.wake`, bound in `onInit`: every pointer sample leaves the idle frame rate. */
-  wake: (() => void) | undefined; /** The cursor last written on the attached canvas; `undefined` while nothing was written. */
-  cursor: string | undefined; /** Component types other plugins registered through `controls.add`, once per registration. */
-  controls: AnyComponentType[];
+  /** The current locale; `config.locale` until `setLocale`. */locale: string; /** Per locale, one entry per feature and one for the config, filled in `onStart`. */
+  registered: Map<string, RegisteredModule[]>; /** Merged and resolved modules per locale. */
+  loaded: Map<string, CompiledMessages>; /** One kit per locale, built on first use. */
+  intl: Map<string, IntlKit>; /** Keys already reported missing, so each warns once. */
+  warned: Set<string>; /** The `setLocale` in flight; a later call waits for it. */
+  loading: Promise<void> | undefined;
 };
 /**
- * input plugin API, `app.input`: the same door for the finger, for a test and for an agent. Each
- * method builds the Answer the gesture would build and hands it to `flow.gate.answer`. Nothing
- * moves: no coordinates, no frames, no `Held`, no `settle`.
+ * i18n plugin events.
+ */
+type Events = {
+  /** The current locale changed, or its messages were replaced. */"i18n:locale-changed": {
+    locale: string;
+  };
+};
+/**
+ * i18n plugin API, `app.i18n`. Messages are data everywhere else in the game; this is the one
+ * place a locale is read and a sentence becomes parts.
  *
  * @example
  * ```ts
- * // A headless test plays the board without a screen.
- * app.input.tap({ projection: "board.generators", key: "g1" }); // true: the generator spat an item
- * app.input.drag({ projection: "board.items", key: "i5" }, { projection: "board.items", key: "i7" });
+ * // A settings screen shows the languages the game was built with and switches to one.
+ * app.i18n.locales(); // ["en", "ru"]
+ * await app.i18n.setLocale("en");
+ * app.i18n.plain(tr("hud.orders", { n: 3 })); // "3 orders"
  * ```
  */
-type InputApi = {
+type I18nApi = {
   /**
-   * Reads the `Tappable` of a view and answers its intent.
+   * The locale every `format` without a second argument reads.
    *
-   * @param target - The projection key of a live view, or an entity.
-   * @returns What `flow.gate.answer` returned: true when the gate took the answer.
+   * @returns The current locale.
    * @example
    * ```ts
-   * // A hidden-object test finds one object without touching a pixel.
-   * app.input.tap({ projection: "scene.objects", key: "lamp" });
-   * // true: answers { intent: "found", payload: { id: "lamp" } }
+   * app.i18n.locale(); // "ru", the pluginConfigs.i18n.locale the game started with
    * ```
    */
-  tap(target: Target): boolean;
+  locale(): string;
   /**
-   * Reads the `Pressable` of a view and answers its intent, the way a long press would.
+   * Switches the current locale. A lazy module is imported once, then `i18n:locale-changed` is
+   * emitted; `text` re-resolves every message on it. A call for the locale already current
+   * resolves at once and emits nothing.
    *
-   * @param target - The projection key of a live view, or an entity.
-   * @returns What `flow.gate.answer` returned: true when the gate took the answer.
+   * @param locale - The locale to switch to.
+   * @returns A promise that settles when the messages of that locale are loaded.
+   * @throws {Error} When no feature and no config brought a module for the locale.
    * @example
    * ```ts
-   * // An agent opens the info card of an item without holding a finger for 450 ms.
-   * app.input.press({ projection: "board.items", key: "i5" });
-   * // true: answers { intent: "info", payload: { id: "i5" } }
+   * // features/settings/nodes.ts: the language button of the settings screen.
+   * await app.i18n.setLocale("en"); // loads the compiled module, then emits i18n:locale-changed
+   * app.i18n.locale(); // "en"
    * ```
    */
-  press(target: Target): boolean;
+  setLocale(locale: string): Promise<void>;
   /**
-   * Reads the `Draggable` of the source and the `DropTarget` of the destination and answers the
-   * destination's intent with both payloads merged. The destination wins a key both carry.
+   * Formats a message in the current locale. Resolution order is the current locale, then
+   * `config.fallback`, then missing: a missing key gives one text part `⟦key⟧` and one warning.
    *
-   * @param from - The view that is carried.
-   * @param to - The view it is dropped on; this one names the intent.
-   * @returns What `flow.gate.answer` returned: true when the gate took the answer.
+   * @param message - What `tr` returned.
+   * @returns The parts of the sentence, adjacent text merged.
    * @example
    * ```ts
-   * // The merge test of the fixture game: two items of level 1 become one of level 2.
-   * app.input.drag({ projection: "board.items", key: "i5" }, { projection: "board.items", key: "i7" });
-   * // true: answers { intent: "merge", payload: { from: "c2", to: "c3" } }
+   * // text resolves the `content` of a Text component every time the locale changes.
+   * app.i18n.format(tr("hud.orders", { n: 3 })); // [{ kind: "text", text: "3 заказа" }]
    * ```
    */
-  drag(from: Target, to: Target): boolean;
+  format(message: Message): readonly Part[];
   /**
-   * Reads the `Swipeable` of a view and answers its intent with the direction in the payload.
+   * Formats a message in another registered locale, without switching. `ui.lint` measures a
+   * label in every locale this way.
    *
-   * @param target - The projection key of a live view, or an entity.
-   * @param direction - Which way the finger would have gone.
-   * @returns What `flow.gate.answer` returned: true when the gate took the answer.
+   * @param message - What `tr` returned.
+   * @param locale - The registered locale to read.
+   * @returns The parts of the sentence in that locale.
+   * @throws {Error} When the locale is not registered, or is registered but not loaded yet.
    * @example
    * ```ts
-   * // A match-3 test swaps the cell c2 with its right neighbour.
-   * app.input.swipe({ projection: "board.cells", key: "c2" }, "right");
-   * // true: answers { intent: "swap", payload: { cell: "c2", direction: "right" } }
+   * // ui.lint does this for every entry of app.i18n.locales() and keeps the widest result.
+   * app.i18n.format(tr("hud.orders", { n: 3 }), "en"); // [{ kind: "text", text: "3 orders" }]
+   * app.i18n.locale(); // "ru": reading another locale never switches
    * ```
    */
-  swipe(target: Target, direction: Direction): boolean;
+  format(message: Message, locale: string): readonly Part[];
   /**
-   * Reads the `Traceable` of every cell and answers one path, the way a finger drawn through the
-   * cells would: the intent of the cells and `{ path }`, the cell payloads in order. Every cell
-   * must name the same intent. An empty list, a cell with no `Traceable` and two intents warn and
-   * answer `false` without calling the gate. Nothing is tagged `Traced`.
+   * The parts joined into one string, elements dropped. For logs, tests and `flow.describe()`.
    *
-   * @param path - The cells in the order the finger goes through them.
-   * @returns What `flow.gate.answer` returned: true when the gate took the answer.
+   * @param message - What `tr` returned.
+   * @returns The sentence as text.
    * @example
    * ```ts
-   * // A word-game test spells a word without a finger.
-   * app.input.trace([
-   *   { projection: "board.cells", key: "b3" },
-   *   { projection: "board.cells", key: "c3" },
-   *   { projection: "board.cells", key: "d3" }
-   * ]);
-   * // true: answers { intent: "word", payload: { path: [{ cell: "b3" }, { cell: "c3" }, { cell: "d3" }] } }
+   * // A test asserts what the HUD says without touching the renderer.
+   * app.i18n.plain(tr("hud.coins", { n: 25, icon: coinIcon })); // "25": the icon is dropped
    * ```
    */
-  trace(path: readonly Target[]): boolean;
+  plain(message: Message): string;
   /**
-   * Registers a listener called on every tap — a press and a release inside `tapSlopPx` — on the
-   * topmost view the hit test accepted, before the `Tappable` answer. A view that carries only
-   * `Touchable` reaches the listeners and answers nothing. A listener that throws is logged with
-   * its entity, and the listeners after it still run.
+   * Tells whether a key exists in the current locale or in the fallback.
    *
-   * @param fn - What to run with the tapped entity.
-   * @returns The remover; call it to stop listening.
+   * @param key - The message key.
+   * @returns True when `format` would find a message for it.
    * @example
    * ```ts
-   * // ui applies the local patch of the button the finger tapped.
-   * const off = ctx.require(inputPlugin).onTap(entity => {
-   *   const write = ctx.require(worldPlugin).ecs.get(entity, LocalWrite);
-   *
-   *   if (write !== undefined) applyLocal(entity, write.patch);
-   * });
-   * off(); // in onStop
+   * // A projection hides the label of an order that has no description yet.
+   * app.i18n.has("orders.hint"); // false: no locale brought that key
    * ```
    */
-  onTap(fn: TapListener): () => void;
-  /**
-   * Registers a listener called synchronously inside the DOM pointer listener, right after the
-   * sample is queued, for `pointerdown`, `pointerup` and `pointercancel`. It is the one place a
-   * browser call that needs the user gesture can run, such as `focus()` on a text field: in the
-   * next frame iOS shows no keyboard. Never called for a move, a leave or a lost capture, and never
-   * by `tap`, `press`, `drag` or `swipe`, which have no DOM moment. The sample is raw: client px,
-   * no hit test. Listeners run in registration order; a listener that throws is logged with the
-   * sample kind, and the listeners after it still run.
-   *
-   * @param fn - What to run with the raw sample.
-   * @returns The remover; call it to stop listening.
-   * @example
-   * ```ts
-   * // ui opens the keyboard the moment the finger lifts on a text field, inside the DOM listener.
-   * const off = ctx.require(inputPlugin).onPointer(sample => {
-   *   if (sample.kind === "up" && fieldAt(sample.clientX, sample.clientY) !== undefined) element.focus({ preventScroll: true });
-   *   if (sample.kind === "down" && fieldAt(sample.clientX, sample.clientY) === undefined) element.blur();
-   * });
-   * // a tap on the Rename field on an iPhone: the keyboard shows; a tap on the parchment next to it: the keyboard hides
-   * off(); // in onStop
-   * ```
-   */
-  onPointer(fn: PointerListener): () => void;
+  has(key: string): boolean;
   /**
-   * Registers a listener called on every key pressed while the canvas is attached, and on every
-   * `pressKey` call. A key typed into a text field is not handed over, except Enter and Escape,
-   * and an Enter that commits an IME composition is dropped. Listeners run in registration order,
-   * all of them, each time. A listener that
-   * returns `true` marks the key handled, and input calls `preventDefault()` on the DOM event. A
-   * listener that throws is logged with its key, and the listeners after it still run.
+   * Formats milliseconds in the current locale through `Intl.DurationFormat`. The value is rounded
+   * up to whole seconds, so a countdown never reads zero while time is left; a negative or
+   * non-finite value reads as zero; the seconds are always shown. `text` formats a field bound
+   * with `format: "duration"` through this call.
    *
-   * @param fn - What to run with the key; return `true` when it handled it.
-   * @returns The remover; call it to stop listening.
+   * @param ms - The duration in milliseconds.
+   * @param style - How the duration reads. Default `"short"`.
+   * @returns The duration as text.
+   * @throws {Error} When the runtime has no `Intl.DurationFormat`.
    * @example
    * ```ts
-   * // ui moves the keyboard focus on Tab and keeps the browser from leaving the canvas.
-   * const off = ctx.require(inputPlugin).onKey(key => {
-   *   if (key.key !== "Tab") return false;
-   *   moveFocus(key.shift ? -1 : 1);
-   *
-   *   return true;
-   * });
-   * off(); // in onStop
+   * // The out-of-energy popup shows when the next refill comes, locale "en".
+   * app.i18n.duration(95_000); // "1 min, 35 sec"
+   * app.i18n.duration(95_000, "digital"); // "0:01:35"
+   * app.i18n.duration(500); // "1 sec": rounded up
    * ```
    */
-  onKey(fn: KeyListener): () => void;
+  duration(ms: number, style?: DurationStyle): string;
   /**
-   * Presses a key without a keyboard: runs the `onKey` listeners exactly as a DOM `keydown` does.
+   * Every locale at least one feature or the config brought a module for, sorted.
    *
-   * @param key - The DOM `KeyboardEvent.key`, such as `"Tab"`, `"Enter"`, `" "` or `"Escape"`.
-   * @param options - How the key is pressed.
-   * @param options.shift - True presses it with Shift held; the default is `false`.
-   * @returns True when a listener handled the key.
+   * @returns The registered locales.
    * @example
    * ```ts
-   * // A headless test walks the settings popup backwards and closes it.
-   * app.input.pressKey("Tab", { shift: true }); // true: ui moved the focus to the previous control
-   * app.input.pressKey("Escape"); // true: ui tapped the popup's close button
-   * app.input.pressKey("q"); // false: no listener handles it
+   * // The language menu is built from this list, and ui.lint measures the widest locale.
+   * app.i18n.locales(); // ["en", "ru"]
    * ```
    */
-  pressKey(key: string, options?: {
-    shift?: boolean;
-  }): boolean;
+  locales(): readonly string[];
   /**
-   * The CSS cursor input set on the canvas: `config.cursor.control` while a mouse or a pen rests
-   * on a control, `config.cursor.idle` otherwise and whenever nothing is attached.
+   * Swaps the compiled module of one feature in a loaded locale, for the dev hot swap. The one
+   * registered module whose keys overlap `messages` takes them, the locale is merged again and
+   * every key may warn once more. When the locale is the current one or the fallback,
+   * `i18n:locale-changed` is emitted with the current locale, so `text` re-resolves every label.
+   * A locale not loaded yet is left alone: its loader imports the new module later.
    *
-   * @returns The cursor value.
+   * @param locale - The locale of the saved `generated/strings.<locale>.ts`.
+   * @param messages - The `default` export of the new module.
+   * @throws {Error} When no registered module, or more than one, shares a key with `messages`.
    * @example
    * ```ts
-   * // An e2e check: the mouse rests on the Play button of the home screen.
-   * app.input.cursor(); // "pointer"
-   * // The mouse moves to the empty sky above it.
-   * app.input.cursor(); // ""
+   * // ui's hot swap: generated/strings.ru.ts was written again with "hud.orders" as "3 заказа!".
+   * ctx.require(i18nPlugin).replace("ru", next.default); // emits i18n:locale-changed
+   * app.i18n.plain(tr("hud.orders", { n: 3 })); // "3 заказа!": text redraws the label
    * ```
    */
-  cursor(): string;
-  /**
-   * The components that make a view a control besides input's own: the cursor shows
-   * `config.cursor.control` over a view that carries one of them.
-   */
-  controls: {
-    /**
-     * Registers a component type of another plugin as a control. A type registered twice stays
-     * a control until both removers ran.
-     *
-     * @param component - The component or tag type that makes a view answer a press.
-     * @returns The remover; call it to take the registration back.
-     * @example
-     * ```ts
-     * // ui counts its local-state buttons as controls, so the mouse over a tab shows a hand.
-     * const off = ctx.require(inputPlugin).controls.add(LocalWrite);
-     * app.input.cursor(); // "pointer" while the mouse rests on the Audio tab
-     * off(); // in onStop
-     * ```
-     */
-    add(component: AnyComponentType): () => void;
-  };
-};
-/**
- * Resolved dependency APIs.
- */
-type Deps$1 = {
-  time: Api;
-  flow: Api$1;
-  world: Api$2;
-  renderer: Api$3;
+  replace(locale: string, messages: CompiledMessages): void;
 };
 /**
- * What the kernel context offers before the deps are attached.
+ * What the kernel context offers this plugin.
  *
- * `input` owns no event, so `emit` is the kernel's and never called here.
+ * `index.ts` writes `events` with an annotated `register` (core spec `14-EVENT-REGISTRATION.md`
+ * row 8), so the own event reaches the context the kernel hands the factories and `emit` is the
+ * kernel's own, i18n-typed one. No member of the context is cast.
  */
-type KernelSlice$1 = PluginCtx<Config$2, State$2> & {
+type I18nCtx = PluginCtx<Config$2, State$2, Events> & {
   readonly global: object;
   readonly log: Log.LogApi;
   readonly require: Require;
 };
 /**
- * Domain context of the input plugin: the kernel slice plus the four resolved dependencies.
- */
-type InputCtx = KernelSlice$1 & {
-  readonly deps: Deps$1;
-};
-declare namespace types_d_exports$1 {
-  export { Argument, CompiledMessage, CompiledMessages, Config$1 as Config, DurationStyle, ElementNode, Events, I18nApi, I18nCtx, I18nKit, IntlKit, KeysWithoutParameters, Message, Part, RegisteredModule, ResolvedModule, State$1 as State, StringTable, StringsLoader, TypedTr };
-}
-/**
- * One interface element handed to a message as a parameter. Structural on purpose: it mirrors
- * the `DescriptionNode` of `world/projection`, which sits beside `i18n`, so neither plugin
- * imports the other (seam resolution 1).
+ * The key-to-parameters table a game generates: `generated/strings.ts` exports it as `Strings`.
+ * A key with no parameters carries `Record<never, never>`.
  *
  * @example
  * ```ts
- * const icon: ElementNode = { type: "icon", props: { name: "hud.coin" }, children: [] };
+ * const table: StringTable = { "hud.orders": { n: 3 }, "orders.complete": {} };
  * ```
  */
-type ElementNode = {
-  type: string;
-  key?: string;
-  props: object;
-  children: readonly unknown[];
-};
+type StringTable = Record<string, unknown>;
 /**
- * What a message parameter may be: a word, a number, a list of words, or an element the
- * interface draws in the middle of the sentence.
+ * The keys of a table whose message takes no parameters, so `tr` may be called with the key
+ * alone.
  *
  * @example
  * ```ts
- * const reward: Argument = 25;
- * const players: Argument = ["Ann", "Bo"];
+ * type Keys = KeysWithoutParameters<{ "home.play": Record<never, never>; "hud.orders": { n: number } }>;
+ * // "home.play"
  * ```
  */
-type Argument = string | number | readonly string[] | ElementNode;
+type KeysWithoutParameters<Table extends StringTable> = { [Key in keyof Table]: Record<never, never> extends Table[Key] ? Key : never }[keyof Table] & string;
 /**
- * What `tr` returns: the key and the parameters, frozen. No locale and no string is read at the
- * call site, so the same value survives a locale change and can be compared and logged.
+ * `tr` as one game reads it: the key is checked against the generated table, and the parameters
+ * are the ones that key declares. A key with no parameters takes no second argument.
  *
  * @example
  * ```ts
- * const orders: Message<"hud.orders", { n: number }> = { key: "hud.orders", params: { n: 3 } };
+ * const { tr } = i18nFor<{ "hud.orders": { n: number } }>();
+ * tr("hud.orders", { n: 3 }); // { key: "hud.orders", params: { n: 3 } }
  * ```
  */
-type Message<Key extends string = string, Values = Record<string, Argument>> = {
-  key: Key;
-  params?: Values;
+type TypedTr<Table extends StringTable> = {
+  <Key extends KeysWithoutParameters<Table>>(key: Key): Message<Key, Table[Key]>;
+  <Key extends keyof Table & string>(key: Key, params: Table[Key]): Message<Key, Table[Key]>;
 };
 /**
- * One piece of a formatted message: a run of text, or an element to draw in place. The consumer
- * never joins the pieces itself, which is what keeps an icon inside a sentence possible.
+ * What `defineGame` spreads from this plugin.
  *
  * @example
  * ```ts
- * const parts: Part[] = [
- *   { kind: "element", node: { type: "icon", props: { name: "hud.coin" }, children: [] } },
- *   { kind: "text", text: " 25" }
- * ];
+ * const kit: I18nKit<{ "home.play": Record<never, never> }> = i18nFor();
+ * kit.tr("home.play"); // { key: "home.play" }
  * ```
  */
-type Part = {
-  kind: "text";
-  text: string;
-} | {
-  kind: "element";
-  node: ElementNode;
+type I18nKit<Table extends StringTable> = {
+  tr: TypedTr<Table>;
 };
+//#endregion
+//#region src/plugins/renderer/components.d.ts
 /**
- * The `Intl.*` formatters of one locale, each memoised by the JSON of its options. Compiled
- * messages are handed one and never construct a formatter themselves.
+ * Where a view sits, in reference units and radians. Relative to the `Parent` when there is one.
+ * `pivot` is the local point the view turns and scales around, and `x`, `y` is where that point
+ * lands; the default pivot `{ x: 0, y: 0 }` is the view's own origin.
  *
  * @example
  * ```ts
- * const intl = createIntlKit("ru");
- * intl.plural().select(3); // "few"
+ * // A 200 x 80 button that grows around its centre.
+ * const value: TransformValue = {
+ *   x: 640, y: 340, rotation: 0, scale: 1.1, pivot: { x: 100, y: 40 }
+ * };
  * ```
  */
-type IntlKit = {
-  /** The locale every formatter of this kit is built for. */locale: string; /** The plural rules of the locale; `{ type: "ordinal" }` for `selectordinal`. */
-  plural(options?: Intl.PluralRulesOptions): Intl.PluralRules; /** The number format of the locale. */
-  number(options?: Intl.NumberFormatOptions): Intl.NumberFormat; /** The list format of the locale, which ICU MessageFormat 1 has no syntax for. */
-  list(options?: Intl.ListFormatOptions): Intl.ListFormat; /** The date and time format of the locale. */
-  date(options?: Intl.DateTimeFormatOptions): Intl.DateTimeFormat;
-  /**
-   * The duration format of the locale. A compiled `{left, duration}` reads it with
-   * `secondsDisplay: "always"`, so a countdown at zero still says "0 sec".
-   *
-   * @param options - The `Intl.DurationFormat` options.
-   * @returns The memoised formatter for these options.
-   * @throws {Error} When the runtime has no `Intl.DurationFormat`.
-   * @example
-   * ```ts
-   * const intl = createIntlKit("en");
-   * intl.duration({ style: "short" }).format({ minutes: 1, seconds: 35 }); // "1 min, 35 sec"
-   * ```
-   */
-  duration(options?: Intl.DurationFormatOptions): Intl.DurationFormat;
+type TransformValue = {
+  x: number;
+  y: number;
+  rotation: number;
+  scale: number;
+  pivot: Point$2;
 };
 /**
- * How a duration reads: `"long"` (1 minute, 35 seconds), `"short"` (1 min, 35 sec), `"narrow"`
- * (1m 35s) or `"digital"` (0:01:35). A string file names one in `{left, duration, short}`.
+ * How a sized sprite fills its box: `"fill"` stretches, `"contain"` scales uniformly inside the
+ * box and centres, `"cover"` scales uniformly over the box and crops the overflow.
  *
  * @example
  * ```ts
- * const style: DurationStyle = "digital"; // app.i18n.duration(95_000, style) is "0:01:35"
+ * const fit: SpriteFit = "cover";
  * ```
  */
-type DurationStyle = "long" | "short" | "narrow" | "digital";
+type SpriteFit = "fill" | "contain" | "cover";
 /**
- * One message as the build wrote it: a plain function of the parameters and the locale's kit.
- * There is no ICU parser at run time.
+ * One textured quad. `texture` is an asset key; `defineGame` narrows it to the game's keys.
+ * `width` and `height` are the box in reference units; 0 on an axis keeps the texture's own size
+ * there. `anchor` is the point of the box that sits on the `Transform`. `alpha` fades the quad
+ * and the entity's children.
  *
  * @example
  * ```ts
- * const hello: CompiledMessage = p => [{ kind: "text", text: `Hi ${String(p.name)}` }];
+ * const value: SpriteValue = {
+ *   texture: "board.bg-forest-meadow", tint: 0xffffff, alpha: 1, anchor: { x: 0, y: 0 },
+ *   width: 1080, height: 1920, fit: "cover"
+ * };
  * ```
  */
-type CompiledMessage = (params: Record<string, unknown>, intl: IntlKit) => Part[];
-/**
- * One compiled module: every message of one locale by its key.
- *
- * @example
- * ```ts
- * const en: CompiledMessages = { "home.play": () => [{ kind: "text", text: "Play" }] };
- * ```
- */
-type CompiledMessages = Record<string, CompiledMessage>;
+type SpriteValue = {
+  texture: string;
+  tint: number;
+  alpha: number;
+  anchor: Point$2;
+  width: number;
+  height: number;
+  fit: SpriteFit;
+};
 /**
- * A compiled module that is imported on first use. A module namespace is unwrapped to its
- * `default` member (seam resolution 2).
+ * A stretchable panel. The slice borders come with the texture, not with the component. `debug`
+ * strokes the bounds and the four cut lines over the panel: cyan, red when the corners overlap or
+ * the texture is missing. `clip` masks the children of the entity to the `width × height` box,
+ * the same rule as `Shape.clip`: the mask is a filled rectangle and is never drawn, and the panel
+ * itself is never masked. `alpha` fades the panel and the entity's children.
  *
  * @example
  * ```ts
- * const loadEnglish: StringsLoader = () => import("./generated/strings.en");
+ * const value: NineSliceValue = {
+ *   texture: "ui.panel", width: 600, height: 320, alpha: 1, tint: 0xffffff, debug: false,
+ *   clip: false
+ * };
+ * // The board tray, outlined while its insets are checked.
+ * const tray: NineSliceValue = {
+ *   ...value, texture: "board.board-tray", width: 1000, height: 1040, debug: true
+ * };
+ * // A text field: a long value never draws outside the frame.
+ * const field: NineSliceValue = {
+ *   ...value, texture: "ui.field", width: 480, height: 96, clip: true
+ * };
  * ```
  */
-type StringsLoader = () => Promise<CompiledMessages | {
-  default: CompiledMessages;
-}>;
+type NineSliceValue = {
+  texture: string;
+  width: number;
+  height: number;
+  alpha: number;
+  tint: number;
+  debug: boolean;
+  clip: boolean;
+};
 /**
- * i18n plugin config.
+ * The escape hatch: the game owns a Pixi object and `sync` only attaches and detaches it.
  *
  * @example
  * ```ts
- * createApp({ pluginConfigs: { i18n: { locale: "ru", fallback: "en", locales: {} } } });
+ * const value: DisplayValue = { object: spineAnimation };
  * ```
  */
-type Config$1 = {
-  /** The locale at start. */locale: string; /** The locale a missing key is read from before it is reported missing. */
-  fallback: string;
-  /**
-   * Compiled modules outside features, per locale; a loader is imported on first use and its
-   * `default` is unwrapped.
-   */
-  locales: Record<string, CompiledMessages | StringsLoader>;
+type DisplayValue = {
+  object: unknown;
 };
 /**
- * One module registered for one locale, with the name it can be blamed under when two of them
- * carry the same key.
+ * A filled rounded rectangle or a triangle, anchored at the top left of the `Transform`. `kind`
+ * picks the outline: `"rect"` (the default) or `"triangle"`, which fills its `w × h` box pointing
+ * right (rotate the element for another direction) and ignores `radius`. `fillAlpha` is the alpha
+ * of the fill alone: 0 draws only the stroke, a ring. `alpha` fades the whole shape and the
+ * entity's children: a disabled button at 0.6 draws its icon at 0.6 too. `dash` is the
+ * dash length of the stroke in reference units, with gaps of half a dash; 0 strokes a solid line.
+ * `clip` masks the children of the entity to the shape, always solid, which is how `ui` draws a
+ * scroll and an overflow. The shape itself is never masked, so its stroke is drawn whole.
+ *
+ * @example
+ * ```ts
+ * const value: ShapeValue = {
+ *   kind: "rect", w: 320, h: 96, fill: 0x101018, fillAlpha: 1, alpha: 1, radius: 16,
+ *   stroke: 0x000000, strokeWidth: 0, dash: 0, clip: false
+ * };
+ * // The honey ring on a selected cell: a stroke and no fill.
+ * const ring: ShapeValue = {
+ *   kind: "rect", w: 140, h: 140, fill: 0xffffff, fillAlpha: 0, alpha: 1, radius: 24,
+ *   stroke: 0xffc233, strokeWidth: 6, dash: 0, clip: false
+ * };
+ * // The play glyph of a watch button, and a dashed focus ring: 10 u dashes, 5 u gaps.
+ * const play: ShapeValue = { ...ring, kind: "triangle", w: 36, h: 40, fillAlpha: 1, strokeWidth: 0 };
+ * const focus: ShapeValue = { ...ring, w: 200, h: 80, stroke: 0x3a2212, strokeWidth: 4, dash: 10 };
+ * ```
  */
-type RegisteredModule = {
-  /** The feature that brought the module, or `"pluginConfigs.i18n"` for a configured one. */from: string; /** The module itself, or the loader that fetches it on first use. */
-  messages: CompiledMessages | StringsLoader;
+type ShapeValue = {
+  kind: "rect" | "triangle";
+  w: number;
+  h: number;
+  fill: number;
+  fillAlpha: number;
+  alpha: number;
+  radius: number;
+  stroke: number;
+  strokeWidth: number;
+  dash: number;
+  clip: boolean;
 };
 /**
- * One registered module whose loader already ran, ready to be merged into a locale.
+ * What `sprite()` takes: the two things every visual needs, and the four that have defaults.
+ *
+ * @example
+ * ```ts
+ * const options: SpriteOptions = { texture: "board.cell", at: { x: 540, y: 300 } };
+ * ```
  */
-type ResolvedModule = {
-  /** The feature that brought the module, or `"pluginConfigs.i18n"` for a configured one. */from: string; /** The module itself. */
-  messages: CompiledMessages;
+type SpriteOptions = {
+  texture: string;
+  at: Point$2;
+  tint?: number;
+  alpha?: number;
+  anchor?: Point$2;
+  scale?: number;
 };
 /**
- * i18n plugin state.
+ * Where a view sits: reference units, radians, uniform scale, and the local point it turns
+ * around.
  */
-type State$1 = {
-  /** The current locale; `config.locale` until `setLocale`. */locale: string; /** Per locale, one entry per feature and one for the config, filled in `onStart`. */
-  registered: Map<string, RegisteredModule[]>; /** Merged and resolved modules per locale. */
-  loaded: Map<string, CompiledMessages>; /** One kit per locale, built on first use. */
-  intl: Map<string, IntlKit>; /** Keys already reported missing, so each warns once. */
-  warned: Set<string>; /** The `setLocale` in flight; a later call waits for it. */
-  loading: Promise<void> | undefined;
+declare const Transform: ComponentType<TransformValue>;
+/**
+ * One textured quad. `texture` is an asset key, resolved through the texture providers; a size
+ * and a `fit` draw it into a box.
+ */
+declare const Sprite: ComponentType<SpriteValue>;
+/**
+ * A stretchable panel, sized in reference units, with its own alpha and tint. `debug: true` draws
+ * the slice outline over it. `clip: true` masks the children of the entity to the panel box.
+ */
+declare const NineSlice: ComponentType<{
+  texture: string;
+  width: number;
+  height: number;
+  alpha: number;
+  tint: number;
+  debug: boolean;
+  clip: boolean;
+}>;
+/**
+ * The entity this view moves with. `0` means no parent.
+ */
+declare const Parent: ComponentType<{
+  entity: number;
+}>;
+/**
+ * A display object the game owns. Never pooled, never destroyed by `sync`.
+ */
+declare const Display: ComponentType<DisplayValue>;
+/**
+ * A filled rounded rectangle or a right-pointing triangle, drawn with Pixi `Graphics` and redrawn
+ * only when a field changed. `fillAlpha: 0` draws only the stroke, `dash` above 0 dashes it.
+ * `clip: true` masks the children of the entity to the shape.
+ */
+declare const Shape: ComponentType<ShapeValue>;
+/**
+ * Bundles the two components every visual needs, so a projection `view` reads as one line.
+ *
+ * @param options - Texture key, position, and the four values that have defaults.
+ * @returns The `Sprite` and the `Transform` value, in that order.
+ * @example
+ * ```ts
+ * sprite({ texture: "board.cell", at: { x: 540, y: 300 } });
+ * // [Sprite({ texture: "board.cell", tint: 0xffffff, alpha: 1, anchor: { x: 0.5, y: 0.5 },
+ * //   width: 0, height: 0, fit: "fill" }),
+ * //  Transform({ x: 540, y: 300, rotation: 0, scale: 1, pivot: { x: 0, y: 0 } })]
+ * ```
+ */
+declare function sprite(options: SpriteOptions): [ComponentValue<SpriteValue>, ComponentValue<TransformValue>];
+declare namespace types_d_exports$1 {
+  export { Carried, Config$1 as Config, Deps$1 as Deps, Direction, GesturePhase, InputApi, InputCtx, KernelSlice$1 as KernelSlice, KeyInput, KeyListener, Point$1 as Point, PointerListener, RawSample, State$1 as State, TapListener, Target };
+}
+/**
+ * A point in reference units, as `renderer.viewport.toReference` answers it.
+ *
+ * @example
+ * ```ts
+ * const point: Point = { x: 540, y: 960 };
+ * ```
+ */
+type Point$1 = {
+  x: number;
+  y: number;
 };
 /**
- * i18n plugin events.
+ * The dominant axis of a swipe.
+ *
+ * @example
+ * ```ts
+ * const direction: Direction = "left";
+ * ```
  */
-type Events = {
-  /** The current locale changed, or its messages were replaced. */"i18n:locale-changed": {
-    locale: string;
-  };
+type Direction = "up" | "down" | "left" | "right";
+/**
+ * What `app.input.*` is pointed at: the projection key of a live view, or an entity. A key never
+ * addresses a view in the despawn queue.
+ *
+ * @example
+ * ```ts
+ * const target: Target = { projection: "board.items", key: "i5" };
+ * ```
+ */
+type Target = {
+  projection: string;
+  key: string;
+} | Entity;
+/**
+ * One pointer event as the DOM handlers queue it: no hit test, no reference units, no decision.
+ * `cancel` is a `pointercancel`, `lost` a lost pointer capture, `leave` the pointer leaving the
+ * canvas. `pointerType` is the device: only a mouse or a pen hovers.
+ *
+ * @example
+ * ```ts
+ * const sample: RawSample = {
+ *   kind: "down", pointerType: "touch", pointerId: 1, clientX: 320, clientY: 640
+ * };
+ * ```
+ */
+type RawSample = {
+  kind: "down" | "move" | "up" | "cancel" | "lost" | "leave";
+  pointerType: "mouse" | "touch" | "pen";
+  pointerId: number;
+  clientX: number;
+  clientY: number;
 };
 /**
- * i18n plugin API, `app.i18n`. Messages are data everywhere else in the game; this is the one
- * place a locale is read and a sentence becomes parts.
+ * Where the one active pointer stands in the gesture machine.
  *
  * @example
  * ```ts
- * // A settings screen shows the languages the game was built with and switches to one.
- * app.i18n.locales(); // ["en", "ru"]
- * await app.i18n.setLocale("en");
- * app.i18n.plain(tr("hud.orders", { n: 3 })); // "3 orders"
+ * const phase: GesturePhase = "dragging";
  * ```
  */
-type I18nApi = {
-  /**
-   * The locale every `format` without a second argument reads.
-   *
-   * @returns The current locale.
-   * @example
-   * ```ts
-   * app.i18n.locale(); // "ru", the pluginConfigs.i18n.locale the game started with
-   * ```
-   */
-  locale(): string;
-  /**
-   * Switches the current locale. A lazy module is imported once, then `i18n:locale-changed` is
-   * emitted; `text` re-resolves every message on it. A call for the locale already current
-   * resolves at once and emits nothing.
-   *
-   * @param locale - The locale to switch to.
-   * @returns A promise that settles when the messages of that locale are loaded.
-   * @throws {Error} When no feature and no config brought a module for the locale.
-   * @example
-   * ```ts
-   * // features/settings/nodes.ts: the language button of the settings screen.
-   * await app.i18n.setLocale("en"); // loads the compiled module, then emits i18n:locale-changed
-   * app.i18n.locale(); // "en"
-   * ```
-   */
-  setLocale(locale: string): Promise<void>;
-  /**
-   * Formats a message in the current locale. Resolution order is the current locale, then
-   * `config.fallback`, then missing: a missing key gives one text part `⟦key⟧` and one warning.
-   *
-   * @param message - What `tr` returned.
-   * @returns The parts of the sentence, adjacent text merged.
-   * @example
-   * ```ts
-   * // text resolves the `content` of a Text component every time the locale changes.
-   * app.i18n.format(tr("hud.orders", { n: 3 })); // [{ kind: "text", text: "3 заказа" }]
-   * ```
-   */
-  format(message: Message): readonly Part[];
-  /**
-   * Formats a message in another registered locale, without switching. `ui.lint` measures a
-   * label in every locale this way.
-   *
-   * @param message - What `tr` returned.
-   * @param locale - The registered locale to read.
-   * @returns The parts of the sentence in that locale.
-   * @throws {Error} When the locale is not registered, or is registered but not loaded yet.
-   * @example
-   * ```ts
-   * // ui.lint does this for every entry of app.i18n.locales() and keeps the widest result.
-   * app.i18n.format(tr("hud.orders", { n: 3 }), "en"); // [{ kind: "text", text: "3 orders" }]
-   * app.i18n.locale(); // "ru": reading another locale never switches
-   * ```
-   */
-  format(message: Message, locale: string): readonly Part[];
-  /**
-   * The parts joined into one string, elements dropped. For logs, tests and `flow.describe()`.
-   *
-   * @param message - What `tr` returned.
-   * @returns The sentence as text.
-   * @example
-   * ```ts
-   * // A test asserts what the HUD says without touching the renderer.
-   * app.i18n.plain(tr("hud.coins", { n: 25, icon: coinIcon })); // "25": the icon is dropped
-   * ```
-   */
-  plain(message: Message): string;
-  /**
-   * Tells whether a key exists in the current locale or in the fallback.
-   *
-   * @param key - The message key.
-   * @returns True when `format` would find a message for it.
-   * @example
-   * ```ts
-   * // A projection hides the label of an order that has no description yet.
-   * app.i18n.has("orders.hint"); // false: no locale brought that key
-   * ```
-   */
-  has(key: string): boolean;
-  /**
-   * Formats milliseconds in the current locale through `Intl.DurationFormat`. The value is rounded
-   * up to whole seconds, so a countdown never reads zero while time is left; a negative or
-   * non-finite value reads as zero; the seconds are always shown. `text` formats a field bound
-   * with `format: "duration"` through this call.
-   *
-   * @param ms - The duration in milliseconds.
-   * @param style - How the duration reads. Default `"short"`.
-   * @returns The duration as text.
-   * @throws {Error} When the runtime has no `Intl.DurationFormat`.
-   * @example
-   * ```ts
-   * // The out-of-energy popup shows when the next refill comes, locale "en".
-   * app.i18n.duration(95_000); // "1 min, 35 sec"
-   * app.i18n.duration(95_000, "digital"); // "0:01:35"
-   * app.i18n.duration(500); // "1 sec": rounded up
-   * ```
-   */
-  duration(ms: number, style?: DurationStyle): string;
-  /**
-   * Every locale at least one feature or the config brought a module for, sorted.
-   *
-   * @returns The registered locales.
-   * @example
-   * ```ts
-   * // The language menu is built from this list, and ui.lint measures the widest locale.
-   * app.i18n.locales(); // ["en", "ru"]
-   * ```
-   */
-  locales(): readonly string[];
-  /**
-   * Swaps the compiled module of one feature in a loaded locale, for the dev hot swap. The one
-   * registered module whose keys overlap `messages` takes them, the locale is merged again and
-   * every key may warn once more. When the locale is the current one or the fallback,
-   * `i18n:locale-changed` is emitted with the current locale, so `text` re-resolves every label.
-   * A locale not loaded yet is left alone: its loader imports the new module later.
-   *
-   * @param locale - The locale of the saved `generated/strings.<locale>.ts`.
-   * @param messages - The `default` export of the new module.
-   * @throws {Error} When no registered module, or more than one, shares a key with `messages`.
-   * @example
-   * ```ts
-   * // ui's hot swap: generated/strings.ru.ts was written again with "hud.orders" as "3 заказа!".
-   * ctx.require(i18nPlugin).replace("ru", next.default); // emits i18n:locale-changed
-   * app.i18n.plain(tr("hud.orders", { n: 3 })); // "3 заказа!": text redraws the label
-   * ```
-   */
-  replace(locale: string, messages: CompiledMessages): void;
-};
-/**
- * What the kernel context offers this plugin.
- *
- * `index.ts` writes `events` with an annotated `register` (core spec `14-EVENT-REGISTRATION.md`
- * row 8), so the own event reaches the context the kernel hands the factories and `emit` is the
- * kernel's own, i18n-typed one. No member of the context is cast.
- */
-type I18nCtx = PluginCtx<Config$1, State$1, Events> & {
-  readonly global: object;
-  readonly log: Log.LogApi;
-  readonly require: Require;
-};
+type GesturePhase = "idle" | "pressed" | "longPressed" | "dragging" | "tracing";
 /**
- * The key-to-parameters table a game generates: `generated/strings.ts` exports it as `Strings`.
- * A key with no parameters carries `Record<never, never>`.
+ * What `onTap` hands a listener: the view the finger let go on, inside the tap slop.
  *
  * @example
  * ```ts
- * const table: StringTable = { "hud.orders": { n: 3 }, "orders.complete": {} };
+ * const tapped: Entity[] = [];
+ * const listener: TapListener = entity => tapped.push(entity);
  * ```
  */
-type StringTable = Record<string, unknown>;
+type TapListener = (entity: Entity) => void;
 /**
- * The keys of a table whose message takes no parameters, so `tr` may be called with the key
- * alone.
+ * What `onPointer` registers: called with the raw sample inside the DOM listener, for the kinds
+ * `down`, `up` and `cancel`, right after the sample is queued.
  *
  * @example
  * ```ts
- * type Keys = KeysWithoutParameters<{ "home.play": Record<never, never>; "hud.orders": { n: number } }>;
- * // "home.play"
+ * const lifts: RawSample[] = [];
+ * const listener: PointerListener = sample => {
+ *   if (sample.kind === "up") lifts.push(sample);
+ * };
  * ```
  */
-type KeysWithoutParameters<Table extends StringTable> = { [Key in keyof Table]: Record<never, never> extends Table[Key] ? Key : never }[keyof Table] & string;
+type PointerListener = (sample: RawSample) => void;
 /**
- * `tr` as one game reads it: the key is checked against the generated table, and the parameters
- * are the ones that key declares. A key with no parameters takes no second argument.
+ * One key press as `onKey` hands it to a listener: the DOM `KeyboardEvent.key` and whether Shift
+ * was held.
  *
  * @example
  * ```ts
- * const { tr } = i18nFor<{ "hud.orders": { n: number } }>();
- * tr("hud.orders", { n: 3 }); // { key: "hud.orders", params: { n: 3 } }
+ * const backTab: KeyInput = { key: "Tab", shift: true };
  * ```
  */
-type TypedTr<Table extends StringTable> = {
-  <Key extends KeysWithoutParameters<Table>>(key: Key): Message<Key, Table[Key]>;
-  <Key extends keyof Table & string>(key: Key, params: Table[Key]): Message<Key, Table[Key]>;
+type KeyInput = {
+  key: string;
+  shift: boolean;
 };
 /**
- * What `defineGame` spreads from this plugin.
+ * What `onKey` registers. Returning `true` marks the key handled: input then calls
+ * `preventDefault()` on the DOM event, and `app.input.pressKey` answers `true`.
  *
  * @example
  * ```ts
- * const kit: I18nKit<{ "home.play": Record<never, never> }> = i18nFor();
- * kit.tr("home.play"); // { key: "home.play" }
+ * const closeOnEscape: KeyListener = key => key.key === "Escape";
  * ```
  */
-type I18nKit<Table extends StringTable> = {
-  tr: TypedTr<Table>;
-};
-declare namespace types_d_exports {
-  export { AdvanceTable, BindField, BindOptions, BundleLoaded, BundleUnloaded, Config, CountdownValue, Deps, DrawnLabel, IconRun, KernelSlice, LayoutOptions, Line, LocaleChanged, Point, Run, SeenText, Size, State, TextAlign, TextApi, TextBind, TextCtx, TextFormat, TextLayout, TextRun, TextShadow, TextStyle, TextStyleInput, TextStyles, TextValue, TextWrap, Warn };
-}
+type KeyListener = (key: KeyInput) => boolean | void;
 /**
- * A point in reference units: where a label sits, and which point of the block sits there.
+ * input plugin config. Every distance is in reference px, every duration in milliseconds of
+ * `time`, so a time scale and a pause apply to the gestures too.
  *
  * @example
  * ```ts
- * const anchor: Point = { x: 0.5, y: 0.5 };
+ * createApp({ plugins: [...screen], pluginConfigs: { input: { longPressMs: 300, swipeMinPx: 64 } } });
+ * // A merge game carries the item in the hand 8% bigger: a board item resting at scale 0.5 on
+ * // screen is drawn at 0.54 from the grab to the drop, even after a press squashed it, then
+ * // flies home at 0.5.
+ * createApp({ plugins: [...screen], pluginConfigs: { input: { heldScale: 1.08 } } });
+ * // A game with its own cursors: the config merges shallowly, so both values are given.
+ * createApp({ plugins: [...screen], pluginConfigs: { input: { cursor: { control: "grab", idle: "default" } } } });
+ * // A word grid with 40 px cells: the finger's path is hit-tested every 16 px, below the
+ * // shortest cell span, so a fast finger skips no letter.
+ * createApp({ plugins: [...screen], pluginConfigs: { input: { traceStepPx: 16 } } });
  * ```
  */
-type Point = {
-  x: number;
-  y: number;
+type Config$1 = {
+  /** Largest move, in reference px, that still counts as a tap or a long press. */tapSlopPx: number; /** Hold time, in ms of `time`, after which a `Pressable` answers. */
+  longPressMs: number; /** Move, in reference px, that turns a press on a `Draggable` into a drag. */
+  dragStartPx: number; /** Shortest swipe, in reference px. */
+  swipeMinPx: number; /** Longest swipe, in ms of `time`, from pointer down to pointer up. */
+  swipeMaxMs: number;
+  /**
+   * How much bigger the view in the hand is drawn: its rest scale in root space times this, from
+   * the grab to the release, so a squash a press left on it does not shrink the lift. A view with
+   * no recorded rest starts from its scale at the grab. The drop, the cancel and the abort write
+   * the rest scale back, so the way home starts at the view's own size. `1` changes nothing.
+   */
+  heldScale: number;
+  /**
+   * CSS cursors of the canvas. `control` shows while a mouse or a pen rests on a view that
+   * carries `Tappable`, `Draggable`, `Pressable`, `Swipeable` or a component another plugin
+   * registered through `controls.add`, such as ui's `LocalWrite`; `idle` shows everywhere else.
+   * `""` hands the cursor back to the page's own style.
+   */
+  cursor: {
+    control: string;
+    idle: string;
+  };
+  /**
+   * Reference px between two hit tests along the finger's path inside one frame of a trace. Keep
+   * it below the shortest cell span: a longer step jumps over a cell.
+   */
+  traceStepPx: number;
+  /**
+   * The hit circle of a trace cell: its radius is this times the short side of the cell's hit
+   * box, around the box centre. A diagonal then crosses no corner of a neighbour.
+   */
+  traceInset: number;
 };
 /**
- * The size of a measured block, in reference pixels.
- *
- * @example
- * ```ts
- * const size: Size = { width: 57.6, height: 38.4 };
- * ```
+ * One view a drag carries on top of the held one: hung under the held view from the grab to the
+ * release.
  */
-type Size = {
-  width: number;
-  height: number;
+type Carried = {
+  /** The carried view. */entity: Entity; /** The `Parent` it had at the grab, hung back under it on the release. */
+  parent: Entity | undefined; /** The remover `world.projection.mute` returned for its root pose. */
+  unmute: () => void;
 };
 /**
- * How a bound number is shown. `"int"` rounds it; the three time formats take milliseconds and
- * show whole seconds, rounded up, so a timer never reads zero while time is left.
- *
- * @example
- * ```ts
- * const format: TextFormat = "mm:ss"; // 95_000 ms shows "01:35"
- * ```
+ * input plugin state: the raw queue the DOM handlers write, and the one gesture in progress.
  */
-type TextFormat = "int" | "mm:ss" | "h:mm:ss" | "duration";
-/** The brand only `bind()` puts on a `TextBind`. Type-only: nothing is emitted for it. */
-declare const textBind: unique symbol;
-/**
- * Which numeric component field a label shows, and how. Plain data in the component, so a
- * snapshot lists it; nominal, so only `bind()` makes one and a hand-written literal does not
- * compile.
- *
- * @example
- * ```ts
- * const Counter = component("Counter", { value: 0 });
- * const coins: TextBind = bind(Counter, "value");
- * // { component: "Counter", field: "value", format: "int" }
- * ```
- */
-type TextBind = {
-  readonly component: string;
-  readonly field: string;
-  readonly format: TextFormat;
-} & {
-  readonly [textBind]: true;
-};
-/**
- * The numeric fields of a component value, by name: what `bind()` takes as its field.
- *
- * @example
- * ```ts
- * type Fields = BindField<{ value: number; name: string }>; // "value"
- * ```
- */
-type BindField<Value extends object> = keyof NumericFields<Value> & string;
-/**
- * What `bind()` takes after the field. The format is `"int"` when left out.
- *
- * @example
- * ```ts
- * const options: BindOptions = { format: "mm:ss" };
- * ```
- */
-type BindOptions = {
-  format?: TextFormat;
-};
-/**
- * A moment to count down to, and how much is left. A game writes `until`, a moment of `clock` in
- * epoch milliseconds; `left` is engine-owned and follows what the label shows.
- *
- * @example
- * ```ts
- * // clock.now() is 1_790_000_000_000: the chest opens in 95 s.
- * const chest: CountdownValue = { until: 1_790_000_095_000, left: 95_000 };
- * ```
- */
-type CountdownValue = {
-  until: number;
-  left: number;
-};
-/**
- * What the `Text` component holds. `resolved` is engine-owned: a game writes `content`, `style`,
- * `bind`, `anchor` and `alpha`, and reads `resolved`. `alpha` fades every run, shadow and icon of
- * the block together, 1 by default; a change is written in place and a tween can drive it.
- *
- * @example
- * ```ts
- * const value: TextValue = {
- *   content: "+5", style: "body", bind: undefined, anchor: { x: 0.5, y: 0.5 }, alpha: 1,
- *   resolved: "+5"
- * };
- * // The hint of an empty name field, at half alpha.
- * const hint: TextValue = { ...value, content: "Your name", alpha: 0.5, resolved: "Your name" };
- * ```
- */
-type TextValue = {
-  content: string | Message;
-  style: string;
-  bind: TextBind | undefined;
-  anchor: Point;
-  alpha: number;
-  resolved: string;
-};
-/**
- * Where the lines of a block sit inside the widest of them.
- *
- * @example
- * ```ts
- * const align: TextAlign = "center";
- * ```
- */
-type TextAlign = "left" | "center" | "right";
-/**
- * The wrap width of a style in reference pixels, or `"none"` for one line per `\n` segment.
- *
- * @example
- * ```ts
- * const wrap: TextWrap = 480;
- * ```
- */
-type TextWrap = number | "none";
-/**
- * The drop shadow of a style as the plugin stores it: a copy of every glyph run in `color`, at
- * `alpha`, moved by `dx` and `dy` reference pixels.
- *
- * @example
- * ```ts
- * const shadow: TextShadow = { color: 0x5b3a1e, dx: 0, dy: 4, alpha: 1 };
- * ```
- */
-type TextShadow = {
-  color: number;
-  dx: number;
-  dy: number;
-  alpha: number;
+type State$1 = {
+  /** Written by the DOM handlers, drained by the frame step. */samples: RawSample[];
+  phase: GesturePhase; /** The one active pointer. A sample of any other pointer is dropped while this is set. */
+  pointerId: number | undefined; /** The pressed or held entity. */
+  entity: Entity | undefined; /** The projection key of `entity`, read once at press time. */
+  key: {
+    projection: string;
+    key: string;
+  } | undefined; /** Reference px at pointer down. */
+  start: Point$1; /** `Transform` minus the pointer at the moment of the grab. */
+  grabOffset: Point$1; /** Sum of `time.delta` since pointer down. No device clock is ever read. */
+  pressedMs: number; /** The drop target that carries `Hovered` during a drag. */
+  hovered: Entity | undefined; /** The view that carries `PointerOver`: a press would take it, and a mouse or a pen is over it. */
+  pointerOver: Entity | undefined; /** The `Parent` the held view had at the grab. It is hung back under it on the release. */
+  parent: Entity | undefined; /** The rest scale of the held view in root space: the base of `heldScale`, set back on drop. */
+  restScale: number | undefined;
+  /**
+   * The root pose of the held view, written at the grab and at every move. A carried view is
+   * placed from it when the held view despawns before the release and takes its `Transform`.
+   */
+  heldPose: TransformValue | undefined; /** The remover `world.projection.mute` returned, while a drag runs. */
+  unmute: (() => void) | undefined; /** The views a drag carries on top of the held one, in `carry` order; empty outside a drag. */
+  carried: Carried[]; /** The cells of the trace in progress, in path order; empty outside a trace. */
+  path: Entity[]; /** The intent of the first cell of the trace; a cell of another intent closes the path. */
+  traceIntent: string | undefined; /** True once a cell of another intent was crossed: the path neither grows nor pops. */
+  traceClosed: boolean; /** Where the finger was at the last frame of the trace: the segment starts there. */
+  lastPoint: Point$1 | undefined;
+  canvas: HTMLCanvasElement | undefined;
+  offFrame: (() => void) | undefined;
+  detach: (() => void) | undefined; /** Registered through `onTap`, called in this order on every tap. */
+  tapListeners: TapListener[]; /** Registered through `onKey`, called in this order on every key. */
+  keyListeners: KeyListener[]; /** Registered through `onPointer`, called in this order inside the DOM listener. */
+  pointerListeners: PointerListener[]; /** Takes the one `keydown` listener off `window`; set while a canvas is attached. */
+  detachKeys: (() => void) | undefined; /** `time.wake`, bound in `onInit`: every pointer sample leaves the idle frame rate. */
+  wake: (() => void) | undefined; /** The cursor last written on the attached canvas; `undefined` while nothing was written. */
+  cursor: string | undefined; /** Component types other plugins registered through `controls.add`, once per registration. */
+  controls: AnyComponentType[];
 };
 /**
- * One style as a game writes it: the font and the size are required, the rest has defaults.
+ * input plugin API, `app.input`: the same door for the finger, for a test and for an agent. Each
+ * method builds the Answer the gesture would build and hands it to `flow.gate.answer`. Nothing
+ * moves: no coordinates, no frames, no `Held`, no `settle`.
  *
  * @example
  * ```ts
- * // A popup title: cream display glyphs over a brown shadow 4 px down.
- * const title: TextStyleInput = {
- *   font: "ui.font-display", size: 56, fill: 0xfff3d6, shadow: { color: 0x5b3a1e, dx: 0, dy: 4 }
- * };
- *
- * defineTextStyles({ "popup.title": title }).map["popup.title"]?.shadow;
- * // { color: 0x5b3a1e, dx: 0, dy: 4, alpha: 1 }
+ * // A headless test plays the board without a screen.
+ * app.input.tap({ projection: "board.generators", key: "g1" }); // true: the generator spat an item
+ * app.input.drag({ projection: "board.items", key: "i5" }, { projection: "board.items", key: "i7" });
  * ```
  */
-type TextStyleInput = {
-  font: string;
-  bold?: string;
-  italic?: string;
-  size: number;
-  fill: number; /** The outline colour. Drawn only when `strokeWidth` is above 0. */
-  stroke?: number;
+type InputApi = {
   /**
-   * The outline width in reference px: 8 copies of each glyph run on a circle this wide (12 from 6
-   * on), tinted `stroke`. 0 draws none. It never changes what `measure` answers.
+   * Reads the `Tappable` of a view and answers its intent.
+   *
+   * @param target - The projection key of a live view, or an entity.
+   * @returns What `flow.gate.answer` returned: true when the gate took the answer.
+   * @example
+   * ```ts
+   * // A hidden-object test finds one object without touching a pixel.
+   * app.input.tap({ projection: "scene.objects", key: "lamp" });
+   * // true: answers { intent: "found", payload: { id: "lamp" } }
+   * ```
    */
-  strokeWidth?: number;
-  letterSpacing?: number;
-  align?: TextAlign;
-  wrap?: TextWrap;
-  digits?: boolean;
+  tap(target: Target): boolean;
   /**
-   * A drop shadow under every glyph run, in reference px at the style size. `alpha` is 1 when
-   * left out. It never changes what `measure` answers.
+   * Reads the `Pressable` of a view and answers its intent, the way a long press would.
+   *
+   * @param target - The projection key of a live view, or an entity.
+   * @returns What `flow.gate.answer` returned: true when the gate took the answer.
+   * @example
+   * ```ts
+   * // An agent opens the info card of an item without holding a finger for 450 ms.
+   * app.input.press({ projection: "board.items", key: "i5" });
+   * // true: answers { intent: "info", payload: { id: "i5" } }
+   * ```
    */
-  shadow?: {
-    color: number;
-    dx: number;
-    dy: number;
-    alpha?: number;
+  press(target: Target): boolean;
+  /**
+   * Reads the `Draggable` of the source and the `DropTarget` of the destination and answers the
+   * destination's intent with both payloads merged. The destination wins a key both carry.
+   *
+   * @param from - The view that is carried.
+   * @param to - The view it is dropped on; this one names the intent.
+   * @returns What `flow.gate.answer` returned: true when the gate took the answer.
+   * @example
+   * ```ts
+   * // The merge test of the fixture game: two items of level 1 become one of level 2.
+   * app.input.drag({ projection: "board.items", key: "i5" }, { projection: "board.items", key: "i7" });
+   * // true: answers { intent: "merge", payload: { from: "c2", to: "c3" } }
+   * ```
+   */
+  drag(from: Target, to: Target): boolean;
+  /**
+   * Reads the `Swipeable` of a view and answers its intent with the direction in the payload.
+   *
+   * @param target - The projection key of a live view, or an entity.
+   * @param direction - Which way the finger would have gone.
+   * @returns What `flow.gate.answer` returned: true when the gate took the answer.
+   * @example
+   * ```ts
+   * // A match-3 test swaps the cell c2 with its right neighbour.
+   * app.input.swipe({ projection: "board.cells", key: "c2" }, "right");
+   * // true: answers { intent: "swap", payload: { cell: "c2", direction: "right" } }
+   * ```
+   */
+  swipe(target: Target, direction: Direction): boolean;
+  /**
+   * Reads the `Traceable` of every cell and answers one path, the way a finger drawn through the
+   * cells would: the intent of the cells and `{ path }`, the cell payloads in order. Every cell
+   * must name the same intent. An empty list, a cell with no `Traceable` and two intents warn and
+   * answer `false` without calling the gate. Nothing is tagged `Traced`.
+   *
+   * @param path - The cells in the order the finger goes through them.
+   * @returns What `flow.gate.answer` returned: true when the gate took the answer.
+   * @example
+   * ```ts
+   * // A word-game test spells a word without a finger.
+   * app.input.trace([
+   *   { projection: "board.cells", key: "b3" },
+   *   { projection: "board.cells", key: "c3" },
+   *   { projection: "board.cells", key: "d3" }
+   * ]);
+   * // true: answers { intent: "word", payload: { path: [{ cell: "b3" }, { cell: "c3" }, { cell: "d3" }] } }
+   * ```
+   */
+  trace(path: readonly Target[]): boolean;
+  /**
+   * Registers a listener called on every tap — a press and a release inside `tapSlopPx` — on the
+   * topmost view the hit test accepted, before the `Tappable` answer. A view that carries only
+   * `Touchable` reaches the listeners and answers nothing. A listener that throws is logged with
+   * its entity, and the listeners after it still run.
+   *
+   * @param fn - What to run with the tapped entity.
+   * @returns The remover; call it to stop listening.
+   * @example
+   * ```ts
+   * // ui applies the local patch of the button the finger tapped.
+   * const off = ctx.require(inputPlugin).onTap(entity => {
+   *   const write = ctx.require(worldPlugin).ecs.get(entity, LocalWrite);
+   *
+   *   if (write !== undefined) applyLocal(entity, write.patch);
+   * });
+   * off(); // in onStop
+   * ```
+   */
+  onTap(fn: TapListener): () => void;
+  /**
+   * Registers a listener called synchronously inside the DOM pointer listener, right after the
+   * sample is queued, for `pointerdown`, `pointerup` and `pointercancel`. It is the one place a
+   * browser call that needs the user gesture can run, such as `focus()` on a text field: in the
+   * next frame iOS shows no keyboard. Never called for a move, a leave or a lost capture, and never
+   * by `tap`, `press`, `drag` or `swipe`, which have no DOM moment. The sample is raw: client px,
+   * no hit test. Listeners run in registration order; a listener that throws is logged with the
+   * sample kind, and the listeners after it still run.
+   *
+   * @param fn - What to run with the raw sample.
+   * @returns The remover; call it to stop listening.
+   * @example
+   * ```ts
+   * // ui opens the keyboard the moment the finger lifts on a text field, inside the DOM listener.
+   * const off = ctx.require(inputPlugin).onPointer(sample => {
+   *   if (sample.kind === "up" && fieldAt(sample.clientX, sample.clientY) !== undefined) element.focus({ preventScroll: true });
+   *   if (sample.kind === "down" && fieldAt(sample.clientX, sample.clientY) === undefined) element.blur();
+   * });
+   * // a tap on the Rename field on an iPhone: the keyboard shows; a tap on the parchment next to it: the keyboard hides
+   * off(); // in onStop
+   * ```
+   */
+  onPointer(fn: PointerListener): () => void;
+  /**
+   * Registers a listener called on every key pressed while the canvas is attached, and on every
+   * `pressKey` call. A key typed into a text field is not handed over, except Enter and Escape,
+   * and an Enter that commits an IME composition is dropped. Listeners run in registration order,
+   * all of them, each time. A listener that
+   * returns `true` marks the key handled, and input calls `preventDefault()` on the DOM event. A
+   * listener that throws is logged with its key, and the listeners after it still run.
+   *
+   * @param fn - What to run with the key; return `true` when it handled it.
+   * @returns The remover; call it to stop listening.
+   * @example
+   * ```ts
+   * // ui moves the keyboard focus on Tab and keeps the browser from leaving the canvas.
+   * const off = ctx.require(inputPlugin).onKey(key => {
+   *   if (key.key !== "Tab") return false;
+   *   moveFocus(key.shift ? -1 : 1);
+   *
+   *   return true;
+   * });
+   * off(); // in onStop
+   * ```
+   */
+  onKey(fn: KeyListener): () => void;
+  /**
+   * Presses a key without a keyboard: runs the `onKey` listeners exactly as a DOM `keydown` does.
+   *
+   * @param key - The DOM `KeyboardEvent.key`, such as `"Tab"`, `"Enter"`, `" "` or `"Escape"`.
+   * @param options - How the key is pressed.
+   * @param options.shift - True presses it with Shift held; the default is `false`.
+   * @returns True when a listener handled the key.
+   * @example
+   * ```ts
+   * // A headless test walks the settings popup backwards and closes it.
+   * app.input.pressKey("Tab", { shift: true }); // true: ui moved the focus to the previous control
+   * app.input.pressKey("Escape"); // true: ui tapped the popup's close button
+   * app.input.pressKey("q"); // false: no listener handles it
+   * ```
+   */
+  pressKey(key: string, options?: {
+    shift?: boolean;
+  }): boolean;
+  /**
+   * The CSS cursor input set on the canvas: `config.cursor.control` while a mouse or a pen rests
+   * on a control, `config.cursor.idle` otherwise and whenever nothing is attached.
+   *
+   * @returns The cursor value.
+   * @example
+   * ```ts
+   * // An e2e check: the mouse rests on the Play button of the home screen.
+   * app.input.cursor(); // "pointer"
+   * // The mouse moves to the empty sky above it.
+   * app.input.cursor(); // ""
+   * ```
+   */
+  cursor(): string;
+  /**
+   * The components that make a view a control besides input's own: the cursor shows
+   * `config.cursor.control` over a view that carries one of them.
+   */
+  controls: {
+    /**
+     * Registers a component type of another plugin as a control. A type registered twice stays
+     * a control until both removers ran.
+     *
+     * @param component - The component or tag type that makes a view answer a press.
+     * @returns The remover; call it to take the registration back.
+     * @example
+     * ```ts
+     * // ui counts its local-state buttons as controls, so the mouse over a tab shows a hand.
+     * const off = ctx.require(inputPlugin).controls.add(LocalWrite);
+     * app.input.cursor(); // "pointer" while the mouse rests on the Audio tab
+     * off(); // in onStop
+     * ```
+     */
+    add(component: AnyComponentType): () => void;
   };
 };
 /**
- * One style as the plugin stores it: every field filled, `bold` and `italic` only when the game
- * shipped those MSDF fonts, `shadow` only when the style has one.
- *
- * @example
- * ```ts
- * const style: TextStyle = {
- *   font: "ui.font-body", bold: undefined, italic: undefined, size: 32, fill: 0xffffff,
- *   stroke: 0x000000, strokeWidth: 0, letterSpacing: 0, align: "left", wrap: "none",
- *   digits: false, shadow: undefined
- * };
- * ```
- */
-type TextStyle = {
-  font: string;
-  bold: string | undefined;
-  italic: string | undefined;
-  size: number;
-  fill: number;
-  stroke: number;
-  strokeWidth: number;
-  letterSpacing: number;
-  align: TextAlign;
-  wrap: TextWrap;
-  digits: boolean;
-  shadow: TextShadow | undefined;
-};
-/**
- * What `defineTextStyles` returns and a feature registers under its `textStyles` key. Structural
- * on purpose: `flow` carries the map, `text` reads it.
- *
- * @example
- * ```ts
- * const styles: TextStyles = { kind: "textStyles", map: { "hud.title": bodyStyle } };
- * ```
+ * Resolved dependency APIs.
  */
-type TextStyles = {
-  readonly kind: "textStyles";
-  readonly map: Record<string, TextStyle>;
+type Deps$1 = {
+  time: Api;
+  flow: Api$1;
+  world: Api$2;
+  renderer: Api$3;
 };
 /**
- * The advances of one font at the size the `.fnt` was exported with. Widths scale by
- * `style.size / size`; kerning pairs are ignored.
+ * What the kernel context offers before the deps are attached.
  *
- * @example
- * ```ts
- * const table: AdvanceTable = { size: 32, lineHeight: 40, advances: new Map([["1", 18]]) };
- * ```
+ * `input` owns no event, so `emit` is the kernel's and never called here.
  */
-type AdvanceTable = {
-  size: number;
-  lineHeight: number;
-  advances: Map<string, number>;
+type KernelSlice$1 = PluginCtx<Config$1, State$1> & {
+  readonly global: object;
+  readonly log: Log.LogApi;
+  readonly require: Require;
 };
 /**
- * One run of glyphs: the text and the flags every glyph in it shares.
- *
- * @example
- * ```ts
- * const run: TextRun = { kind: "text", text: "+5", bold: true, italic: false, color: 0xffe082 };
- * ```
+ * Domain context of the input plugin: the kernel slice plus the four resolved dependencies.
  */
-type TextRun = {
-  kind: "text";
-  text: string;
-  bold: boolean;
-  italic: boolean;
-  color: number | undefined;
+type InputCtx = KernelSlice$1 & {
+  readonly deps: Deps$1;
 };
+//#endregion
+//#region src/plugins/ui/jsx/component.d.ts
 /**
- * One inline icon: an asset key drawn square at the line height.
+ * Declares a component: a piece of interface with local state, outcomes, or both. The view runs
+ * at every reconcile with the instance's own local state, never at build time.
  *
+ * @param name - Unique name across every feature of the game.
+ * @param spec - The initial local state, the outcomes a popup resolves with, and the view.
+ * @returns The component, ready to stand in a tag and in a feature's `ui` key.
  * @example
  * ```ts
- * const run: IconRun = { kind: "icon", key: "hud.coin" };
+ * const Panel = defineComponent("Panel", {
+ *   local: { tab: "audio" },
+ *   view: (props: { volume: number }, local) => ({ type: "column", props: {}, children: [] })
+ * });
+ * Panel.name; // "Panel"
  * ```
  */
-type IconRun = {
-  kind: "icon";
-  key: string;
-};
+declare function defineComponent<Properties extends object, Local extends object, Outcomes extends Record<string, unknown>>(name: string, spec: ComponentSpec<Properties, Local, Outcomes> & {
+  readonly outcomes: Outcomes;
+}): ComponentDefinition<Properties, Local, Outcomes>;
 /**
- * A piece of a line: glyphs or one inline icon.
+ * Declares a component without outcomes: it may stand in a tree, never in a `popup`.
  *
+ * @param name - Unique name across every feature of the game.
+ * @param spec - The initial local state and the view.
+ * @returns The component, ready to stand in a tag.
  * @example
  * ```ts
- * const runs: Run[] = [{ kind: "icon", key: "hud.coin" }];
+ * const Row = defineComponent("Row", { view: () => ({ type: "row", props: {}, children: [] }) });
+ * Row.outcomes; // undefined
  * ```
  */
-type Run = TextRun | IconRun;
+declare function defineComponent<Properties extends object, Local extends object>(name: string, spec: ComponentSpec<Properties, Local, never>): ComponentDefinition<Properties, Local, undefined>;
+declare namespace types_d_exports {
+  export { AdvanceTable, BindField, BindOptions, BundleLoaded, BundleUnloaded, Config, CountdownValue, Deps, DrawnLabel, IconRun, KernelSlice, LayoutOptions, Line, LocaleChanged, Point, Run, SeenText, Size, State, TextAlign, TextApi, TextBind, TextCtx, TextFormat, TextLayout, TextRun, TextShadow, TextStyle, TextStyleInput, TextStyles, TextValue, TextWrap, Warn };
+}
 /**
- * One laid-out line and how wide it is.
+ * A point in reference units: where a label sits, and which point of the block sits there.
  *
  * @example
  * ```ts
- * const line: Line = { runs: [{ kind: "icon", key: "hud.coin" }], width: 38.4 };
+ * const anchor: Point = { x: 0.5, y: 0.5 };
  * ```
  */
-type Line = {
-  runs: Run[];
-  width: number;
+type Point = {
+  x: number;
+  y: number;
 };
 /**
- * A laid-out block: its lines and the size `measure` answers with.
+ * The size of a measured block, in reference pixels.
  *
  * @example
  * ```ts
- * const layout: TextLayout = { lines: [], width: 0, height: 0 };
+ * const size: Size = { width: 57.6, height: 38.4 };
  * ```
  */
-type TextLayout = {
-  lines: Line[];
+type Size = {
   width: number;
   height: number;
 };
 /**
- * What one label container was last filled from: the style object and the laid-out block. An
- * update with the same style object, the same anchor and the same lines and runs writes the new
- * text and positions into the objects already there.
- */
-type DrawnLabel = {
-  style: TextStyle;
-  layout: TextLayout;
-};
-/**
- * A dev warning that is written once per key. Pure modules take it as an argument, so nothing
- * below the plugin context reaches the log itself.
+ * How a bound number is shown. `"int"` rounds it; the three time formats take milliseconds and
+ * show whole seconds, rounded up, so a timer never reads zero while time is left.
  *
  * @example
  * ```ts
- * const warn: Warn = (key, message) => seen.has(key) || log.warn(message);
+ * const format: TextFormat = "mm:ss"; // 95_000 ms shows "01:35"
  * ```
  */
-type Warn = (key: string, message: string, data?: Record<string, unknown>) => void;
+type TextFormat = "int" | "mm:ss" | "h:mm:ss" | "duration";
+/** The brand only `bind()` puts on a `TextBind`. Type-only: nothing is emitted for it. */
+declare const textBind: unique symbol;
 /**
- * What the pure layout needs next to the runs, the style and the tables.
+ * Which numeric component field a label shows, and how. Plain data in the component, so a
+ * snapshot lists it; nominal, so only `bind()` makes one and a hand-written literal does not
+ * compile.
  *
  * @example
  * ```ts
- * const options: LayoutOptions = { warn: () => undefined };
+ * const Counter = component("Counter", { value: 0 });
+ * const coins: TextBind = bind(Counter, "value");
+ * // { component: "Counter", field: "value", format: "int" }
  * ```
  */
-type LayoutOptions = {
-  warn: Warn;
+type TextBind = {
+  readonly component: string;
+  readonly field: string;
+  readonly format: TextFormat;
+} & {
+  readonly [textBind]: true;
 };
 /**
- * What was resolved for one entity last, so the frame step knows whether anything moved. `unit`
- * is what the shown string of a bound label was built from: the rounded value for `"int"`, whole
- * seconds for a time format.
+ * The numeric fields of a component value, by name: what `bind()` takes as its field.
  *
  * @example
  * ```ts
- * const seen: SeenText = {
- *   content: "", style: "digits", bind: "Countdown.left:mm:ss", locale: "ru", unit: 95
- * };
+ * type Fields = BindField<{ value: number; name: string }>; // "value"
  * ```
  */
-type SeenText = {
-  content: unknown;
-  style: string;
-  bind: string | undefined;
-  locale: string;
-  unit: number | undefined;
-};
+type BindField<Value extends object> = keyof NumericFields<Value> & string;
 /**
- * text plugin config.
+ * What `bind()` takes after the field. The format is `"int"` when left out.
  *
  * @example
  * ```ts
- * createApp({ pluginConfigs: { text: { fonts: { body: "ui.body", digits: "ui.digits" } } } });
+ * const options: BindOptions = { format: "mm:ss" };
  * ```
  */
-type Config = {
-  /** The two fonts every game ships in its boot bundle. They back the built-in styles. */fonts: {
-    body: string;
-    digits: string;
-  };
-};
-/**
- * text plugin state.
- */
-type State = {
-  /** Built-in styles first, then the styles of every feature in feature order. */styles: Map<string, TextStyle>; /** Style name to the feature that brought it, for the duplicate error. */
-  styleOwner: Map<string, string>; /** The config fonts plus every `font`, `bold` and `italic` of every style. */
-  fontKeys: Set<string>; /** The parsed advance table per font key, filled when `assets` has the font. */
-  tables: Map<string, AdvanceTable>; /** The font keys handed to `renderer.sync.fonts.install`. */
-  installed: Set<string>; /** What was resolved for an entity last. */
-  seen: Map<Entity, SeenText>; /** `bind.component` to its world type; `undefined` after the one warning. */
-  bindTypes: Map<string, AnyComponent | undefined>; /** The measured size of every live label, for `ui`. */
-  measured: Map<Entity, Size>; /** Layout per `style + resolved`, oldest dropped first. */
-  cache: Map<string, TextLayout>; /** What every live label container was last filled from, by container. */
-  drawn: WeakMap<object, DrawnLabel>; /** Entities to re-resolve in the next layout phase. */
-  dirty: Set<Entity>; /** Warning keys already written, so a style, a tag, a glyph or a font warns once. */
-  warned: Set<string>; /** The system, the two world hooks and the display adapter. */
-  removers: Array<() => void>;
+type BindOptions = {
+  format?: TextFormat;
 };
 /**
- * text plugin API, `app.text`. Two questions: how big a piece of text is, and which styles the
- * game registered; and one order, the dev hot swap of a styles file. Everything else happens in
- * the frame.
+ * A moment to count down to, and how much is left. A game writes `until`, a moment of `clock` in
+ * epoch milliseconds; `left` is engine-owned and follows what the label shows.
  *
  * @example
  * ```ts
- * app.text.measure("120", "digits"); // { width: 57.6, height: 38.4 }
- * app.text.styles(); // ["body", "digits"]
+ * // clock.now() is 1_790_000_000_000: the chest opens in 95 s.
+ * const chest: CountdownValue = { until: 1_790_000_095_000, left: 95_000 };
  * ```
  */
-type TextApi = {
-  /**
-   * The size of a piece of text in reference pixels, from the advance table of the style's font.
-   * A `Message` is formatted in the current locale first. Never touches a canvas, so the answer
-   * is the same in a browser and in plain Bun. Cached per style and resolved string.
-   *
-   * @param content - A plain string, or what `tr` returned.
-   * @param style - A registered style name. An unknown one warns once and measures as `body`.
-   * @returns The width and height of the block.
-   * @example
-   * ```ts
-   * // `ui.layout` asks once per invalidation, from the Yoga measure function of a text element.
-   * const text = ctx.require(textPlugin);
-   *
-   * text.measure("120", "digits"); // { width: 57.6, height: 38.4 } on the 0.6 em fallback
-   * ```
-   */
-  measure(content: string | Message, style: string): Size;
-  /**
-   * Whether the font of a style has a glyph for one character, the lookup Pixi draws by. A
-   * character its font lacks is drawn as nothing and `measure` counts it 0 wide. While the font is
-   * not loaded every character counts, as the 0.6 em fallback measures it. An unknown style warns
-   * once and looks up `body`.
-   *
-   * @param char - One character, a whole code point.
-   * @param style - A registered style name.
-   * @returns False only for a character a loaded font has no glyph for.
-   * @example
-   * ```ts
-   * // `ui` measures the caret of a text field over the characters the font draws.
-   * const text = ctx.require(textPlugin);
-   *
-   * text.hasGlyph("A", "body"); // true
-   * text.hasGlyph("😀", "body"); // false once the body font is loaded: it has no emoji glyph
-   * ```
-   */
-  hasGlyph(char: string, style: string): boolean;
-  /**
-   * The registered style names: the two built-ins first, then the styles of every feature in
-   * feature order.
-   *
-   * @returns A frozen list of style names.
-   * @example
-   * ```ts
-   * // A dev overlay lists what a game may write in a `style` prop.
-   * app.text.styles(); // ["body", "digits", "hud.digits"]
-   * ```
-   */
-  styles(): readonly string[];
-  /**
-   * The dev hot swap of a styles file: writes every style of the map over the table. A known
-   * name keeps the feature that owns it, a new name is added and usable at once. The fonts the
-   * styles name are read, the measured layouts are dropped, and every label is laid out again
-   * on the next frame and redrawn with the new style, even when its text and its style name did
-   * not change. The game loop is woken for that frame.
-   *
-   * @param styles - What `defineTextStyles` returned in the saved module.
-   * @example
-   * ```ts
-   * // `ui` hot swaps a saved `hud/styles.ts`: the "hud.title" labels redraw at 64 px.
-   * const uiStyles = defineTextStyles({
-   *   "hud.title": { font: "ui.font-body", size: 64, fill: 0xff0000 }
-   * });
-   *
-   * ctx.require(textPlugin).replaceStyles(uiStyles);
-   * ctx.require(textPlugin).measure("12", "hud.title").height; // 76.8 on the 0.6 em fallback
-   * ```
-   */
-  replaceStyles(styles: TextStyles): void;
-};
-/**
- * Resolved dependency APIs.
- */
-type Deps = {
-  time: Api;
-  flow: Api$1;
-  world: Api$2;
-  renderer: Api$3;
-  assets: Api$4;
-  i18n: I18nApi;
-  clock: Api$5;
-};
-/**
- * What the kernel context offers before the deps are attached.
- *
- * `text` owns no event, so `emit` is the kernel's and never called here.
- */
-type KernelSlice = PluginCtx<Config, State> & {
-  readonly global: object;
-  readonly log: Log.LogApi;
-  readonly require: Require;
-};
-/**
- * Domain context shared by the files of the plugin: the kernel slice plus the resolved deps.
- */
-type TextCtx = KernelSlice & {
-  readonly deps: Deps;
+type CountdownValue = {
+  until: number;
+  left: number;
 };
 /**
- * Payload of the `assets:bundle-loaded` hook: a bundle landed, so a font may be readable now.
- */
-type BundleLoaded = Events$1["assets:bundle-loaded"];
-/**
- * Payload of the `assets:bundle-unloaded` hook: `keys` names the assets that left.
- */
-type BundleUnloaded = Events$1["assets:bundle-unloaded"];
-/**
- * Payload of the `i18n:locale-changed` hook: every message has to be resolved again.
- */
-type LocaleChanged = Events["i18n:locale-changed"];
-//#endregion
-//#region src/plugins/ui/jsx/component.d.ts
-/**
- * Declares a component: a piece of interface with local state, outcomes, or both. The view runs
- * at every reconcile with the instance's own local state, never at build time.
- *
- * @param name - Unique name across every feature of the game.
- * @param spec - The initial local state, the outcomes a popup resolves with, and the view.
- * @returns The component, ready to stand in a tag and in a feature's `ui` key.
+ * What the `Text` component holds. `resolved` is engine-owned: a game writes `content`, `style`,
+ * `bind`, `anchor` and `alpha`, and reads `resolved`. `alpha` fades every run, shadow and icon of
+ * the block together, 1 by default; a change is written in place and a tween can drive it.
+ *
  * @example
  * ```ts
- * const Panel = defineComponent("Panel", {
- *   local: { tab: "audio" },
- *   view: (props: { volume: number }, local) => ({ type: "column", props: {}, children: [] })
- * });
- * Panel.name; // "Panel"
+ * const value: TextValue = {
+ *   content: "+5", style: "body", bind: undefined, anchor: { x: 0.5, y: 0.5 }, alpha: 1,
+ *   resolved: "+5"
+ * };
+ * // The hint of an empty name field, at half alpha.
+ * const hint: TextValue = { ...value, content: "Your name", alpha: 0.5, resolved: "Your name" };
  * ```
  */
-declare function defineComponent<Properties extends object, Local extends object, Outcomes extends Record<string, unknown>>(name: string, spec: ComponentSpec<Properties, Local, Outcomes> & {
-  readonly outcomes: Outcomes;
-}): ComponentDefinition<Properties, Local, Outcomes>;
+type TextValue = {
+  content: string | Message;
+  style: string;
+  bind: TextBind | undefined;
+  anchor: Point;
+  alpha: number;
+  resolved: string;
+};
 /**
- * Declares a component without outcomes: it may stand in a tree, never in a `popup`.
+ * Where the lines of a block sit inside the widest of them.
  *
- * @param name - Unique name across every feature of the game.
- * @param spec - The initial local state and the view.
- * @returns The component, ready to stand in a tag.
  * @example
  * ```ts
- * const Row = defineComponent("Row", { view: () => ({ type: "row", props: {}, children: [] }) });
- * Row.outcomes; // undefined
+ * const align: TextAlign = "center";
  * ```
  */
-declare function defineComponent<Properties extends object, Local extends object>(name: string, spec: ComponentSpec<Properties, Local, never>): ComponentDefinition<Properties, Local, undefined>;
-//#endregion
-//#region src/plugins/ui/styles/types.d.ts
+type TextAlign = "left" | "center" | "right";
 /**
- * A length that may also come from the notch. The four tokens are replaced by `resolve` with the
- * matching `viewport.safeArea` value.
+ * The wrap width of a style in reference pixels, or `"none"` for one line per `\n` segment.
  *
  * @example
  * ```ts
- * const top: SafeAreaToken = "safeArea.top";
+ * const wrap: TextWrap = 480;
  * ```
  */
-type SafeAreaToken = "safeArea.top" | "safeArea.right" | "safeArea.bottom" | "safeArea.left";
+type TextWrap = number | "none";
 /**
- * A length in reference units, or one of the safe-area tokens.
+ * The drop shadow of a style as the plugin stores it: a copy of every glyph run in `color`, at
+ * `alpha`, moved by `dx` and `dy` reference pixels.
  *
  * @example
  * ```ts
- * const length: Length = 24;
+ * const shadow: TextShadow = { color: 0x5b3a1e, dx: 0, dy: 4, alpha: 1 };
  * ```
  */
-type Length = number | SafeAreaToken;
+type TextShadow = {
+  color: number;
+  dx: number;
+  dy: number;
+  alpha: number;
+};
 /**
- * Padding or margin: one number for every edge, or a value per edge.
+ * One style as a game writes it: the font and the size are required, the rest has defaults.
  *
  * @example
  * ```ts
- * const padding: Edges = { top: "safeArea.top", left: 16 };
+ * // A popup title: cream display glyphs over a brown shadow 4 px down.
+ * const title: TextStyleInput = {
+ *   font: "ui.font-display", size: 56, fill: 0xfff3d6, shadow: { color: 0x5b3a1e, dx: 0, dy: 4 }
+ * };
+ *
+ * defineTextStyles({ "popup.title": title }).map["popup.title"]?.shadow;
+ * // { color: 0x5b3a1e, dx: 0, dy: 4, alpha: 1 }
  * ```
  */
-type Edges = Length | {
-  top?: Length;
-  right?: Length;
-  bottom?: Length;
-  left?: Length;
+type TextStyleInput = {
+  font: string;
+  bold?: string;
+  italic?: string;
+  size: number;
+  fill: number; /** The outline colour. Drawn only when `strokeWidth` is above 0. */
+  stroke?: number;
+  /**
+   * The outline width in reference px: 8 copies of each glyph run on a circle this wide (12 from 6
+   * on), tinted `stroke`. 0 draws none. It never changes what `measure` answers.
+   */
+  strokeWidth?: number;
+  letterSpacing?: number;
+  align?: TextAlign;
+  wrap?: TextWrap;
+  digits?: boolean;
+  /**
+   * A drop shadow under every glyph run, in reference px at the style size. `alpha` is 1 when
+   * left out. It never changes what `measure` answers.
+   */
+  shadow?: {
+    color: number;
+    dx: number;
+    dy: number;
+    alpha?: number;
+  };
 };
 /**
- * A main-axis or cross-axis size: reference units, a percent of the parent, or `"auto"`.
+ * One style as the plugin stores it: every field filled, `bold` and `italic` only when the game
+ * shipped those MSDF fonts, `shadow` only when the style has one.
  *
  * @example
  * ```ts
- * const width: Extent = "50%";
+ * const style: TextStyle = {
+ *   font: "ui.font-body", bold: undefined, italic: undefined, size: 32, fill: 0xffffff,
+ *   stroke: 0x000000, strokeWidth: 0, letterSpacing: 0, align: "left", wrap: "none",
+ *   digits: false, shadow: undefined
+ * };
  * ```
  */
-type Extent = number | `${number}%` | "auto";
+type TextStyle = {
+  font: string;
+  bold: string | undefined;
+  italic: string | undefined;
+  size: number;
+  fill: number;
+  stroke: number;
+  strokeWidth: number;
+  letterSpacing: number;
+  align: TextAlign;
+  wrap: TextWrap;
+  digits: boolean;
+  shadow: TextShadow | undefined;
+};
 /**
- * The flow group of the vocabulary: what Yoga's flexbox calls are set from.
+ * What `defineTextStyles` returns and a feature registers under its `textStyles` key. Structural
+ * on purpose: `flow` carries the map, `text` reads it.
  *
  * @example
  * ```ts
- * const flow: FlowStyle = { direction: "row", gap: 12, justify: "between" };
+ * const styles: TextStyles = { kind: "textStyles", map: { "hud.title": bodyStyle } };
  * ```
  */
-type FlowStyle = {
-  direction?: "row" | "column";
-  wrap?: boolean;
-  justify?: "start" | "center" | "end" | "between" | "around" | "evenly";
-  align?: "start" | "center" | "end" | "stretch";
-  alignSelf?: "auto" | "start" | "center" | "end" | "stretch";
-  gap?: number;
-  grow?: number;
-  shrink?: number;
+type TextStyles = {
+  readonly kind: "textStyles";
+  readonly map: Record<string, TextStyle>;
 };
 /**
- * The box group: what the element takes up before its children are placed.
+ * The advances of one font at the size the `.fnt` was exported with. Widths scale by
+ * `style.size / size`; kerning pairs are ignored.
  *
  * @example
  * ```ts
- * // The board slot: 970 u of cells, scaled down on a short phone.
- * const box: BoxStyle = { width: 970, height: 970, fit: "contain" };
+ * const table: AdvanceTable = { size: 32, lineHeight: 40, advances: new Map([["1", 18]]) };
  * ```
  */
-type BoxStyle = {
-  padding?: Edges;
-  margin?: Edges;
-  width?: Extent;
-  height?: Extent;
-  minWidth?: Extent;
-  minHeight?: Extent;
-  maxWidth?: Extent;
-  maxHeight?: Extent;
-  aspect?: number; /** `"hidden"` clips the children to the rect, as a scroll container does. */
-  overflow?: "visible" | "hidden" | "scroll";
-  /**
-   * `"contain"`: the element keeps its own size and leaves the flow, then is scaled down to fit
-   * the content box of its parent and centred in it. Its children keep their natural rects.
-   */
-  fit?: "contain";
+type AdvanceTable = {
+  size: number;
+  lineHeight: number;
+  advances: Map<string, number>;
 };
 /**
- * The position group. `reason` is the comment `lint()` asks for next to an absolute element.
+ * One run of glyphs: the text and the flags every glyph in it shares.
  *
  * @example
  * ```ts
- * const pinned: PositionStyle = { position: "absolute", top: 0, right: 0, reason: "badge" };
- * // The order strip of the board drawn over the tray that follows it.
- * const strip: PositionStyle = { zIndex: 1 };
+ * const run: TextRun = { kind: "text", text: "+5", bold: true, italic: false, color: 0xffe082 };
  * ```
  */
-type PositionStyle = {
-  position?: "relative" | "absolute";
-  left?: Length;
-  top?: Length;
-  right?: Length;
-  bottom?: Length;
-  reason?: string;
-  /**
-   * The draw order among the siblings, an integer: a higher one draws over a lower one, and a
-   * sibling without it draws at 0 in markup order. Ignored on a root element, which `lint()`
-   * reports; a root draws at the order of its layer.
-   */
-  zIndex?: number;
+type TextRun = {
+  kind: "text";
+  text: string;
+  bold: boolean;
+  italic: boolean;
+  color: number | undefined;
 };
 /**
- * The visual group: what is written to `Shape`, `Sprite` or `NineSlice`. There is no font size
- * here — the size of a text comes from its text style key.
+ * One inline icon: an asset key drawn square at the line height.
  *
  * @example
  * ```ts
- * // A wooden button: the nine-slice of the style, greyed while disabled.
- * const visual: VisualStyle = { nineSlice: "ui.button-wood", alpha: 1, tint: 0xffffff };
- * // The popup board while its insets are checked: the slice lines drawn over it.
- * const checked: VisualStyle = { nineSlice: "ui.panel-signboard", debug: true };
- * // The play glyph of the Watch button, and a dashed ring around a slot.
- * const play: VisualStyle = { shape: "triangle", fill: 0xfffbe8 };
- * const slot: VisualStyle = { stroke: 0x3a2212, strokeWidth: 4, dash: 10, radius: 24 };
+ * const run: IconRun = { kind: "icon", key: "hud.coin" };
  * ```
  */
-type VisualStyle<Asset extends string = string> = {
-  fill?: number;
-  stroke?: number;
-  strokeWidth?: number;
-  radius?: number;
-  alpha?: number;
-  /**
-   * The shape of the rectangle an element without a nine-slice is drawn with: `"rect"` (the
-   * default) or `"triangle"`, which fills the box pointing right and ignores `radius`. Turn the
-   * element with `rotation` for another direction.
-   */
-  shape?: "rect" | "triangle"; /** The dash length of the stroke in reference units, with gaps of half a dash; 0 is solid. */
-  dash?: number;
-  /**
-   * The asset key of a nine-slice drawn at the rect instead of the rounded rectangle. Any tag
-   * but `image`, `icon` and `text` takes it; a clipping element (`scroll`, `overflow: "hidden"`)
-   * keeps its rectangle, which carries the clip.
-   */
-  nineSlice?: Asset; /** Multiplies the colour of a nine-slice or an image. */
-  tint?: number;
-  /**
-   * Outlines the nine-slice of the style: its bounds and the four slice lines, cyan, red when
-   * the corners overlap or the texture is missing. A look for checking art, never for a player.
-   */
-  debug?: boolean;
+type IconRun = {
+  kind: "icon";
+  key: string;
 };
 /**
- * Where an element turns and scales: its centre, the middle of its top edge, its top-left
- * corner, or a point given in fractions of its box.
+ * A piece of a line: glyphs or one inline icon.
  *
  * @example
  * ```ts
- * // A sign that hangs from its ropes swings around the middle of its top edge.
- * const origin: Origin = "top";
+ * const runs: Run[] = [{ kind: "icon", key: "hud.coin" }];
  * ```
  */
-type Origin = "center" | "top" | "topLeft" | {
-  x: number;
-  y: number;
-};
+type Run = TextRun | IconRun;
 /**
- * The transform group: how an element is drawn, never where it is laid out. Written into the
- * rest `Transform`, so a hover lift or a pressed sink never moves a sibling.
+ * One laid-out line and how wide it is.
  *
  * @example
  * ```ts
- * // A button that lifts under the mouse.
- * const lift: TransformStyle = { offsetY: -6, scale: 1.05, origin: "center" };
- * // The title plaque of a popup, tilted by 1.5 degrees around the middle of its top edge.
- * const plaque: TransformStyle = { rotation: -0.026, origin: "top" };
+ * const line: Line = { runs: [{ kind: "icon", key: "hud.coin" }], width: 38.4 };
  * ```
  */
-type TransformStyle = {
-  /** Moves the drawn element right, in reference units. */offsetX?: number; /** Moves the drawn element down, in reference units. */
-  offsetY?: number; /** Uniform scale around the origin. */
-  scale?: number; /** Turns the drawn element around the origin, in radians, clockwise; 0 by default. */
-  rotation?: number; /** The point the element scales and turns around; the centre by default. */
-  origin?: Origin;
+type Line = {
+  runs: Run[];
+  width: number;
 };
 /**
- * Everything but the variants: the five groups of the vocabulary.
+ * A laid-out block: its lines and the size `measure` answers with.
  *
  * @example
  * ```ts
- * const base: BaseStyle = { direction: "row", gap: 8, fill: 0x101018 };
+ * const layout: TextLayout = { lines: [], width: 0, height: 0 };
  * ```
  */
-type BaseStyle<Asset extends string = string> = FlowStyle & BoxStyle & PositionStyle & VisualStyle<Asset> & TransformStyle;
+type TextLayout = {
+  lines: Line[];
+  width: number;
+  height: number;
+};
 /**
- * The seven state variants of a style, applied in the order disabled, active, selected, hover,
- * focus, pressed, covered. While `disabled` is true, `hover` and `pressed` are not applied.
+ * What one label container was last filled from: the style object and the laid-out block. An
+ * update with the same style object, the same anchor and the same lines and runs writes the new
+ * text and positions into the objects already there.
+ */
+type DrawnLabel = {
+  style: TextStyle;
+  layout: TextLayout;
+};
+/**
+ * A dev warning that is written once per key. Pure modules take it as an argument, so nothing
+ * below the plugin context reaches the log itself.
  *
  * @example
  * ```ts
- * // One rule set for every control: lift on hover, sink when pressed, swap the texture when off.
- * const variants: IsVariants = {
- *   hover: { offsetY: -6, scale: 1.05 },
- *   focus: { scale: 1.05 },
- *   pressed: { offsetY: 4, scale: 0.95 },
- *   disabled: { nineSlice: "ui.button-disabled" }
- * };
+ * const warn: Warn = (key, message) => seen.has(key) || log.warn(message);
  * ```
  */
-type IsVariants<Asset extends string = string> = {
-  pressed?: BaseStyle<Asset>;
-  disabled?: BaseStyle<Asset>;
-  active?: BaseStyle<Asset>;
-  selected?: BaseStyle<Asset>; /** The mouse or pen is over the element. Touch never hovers. */
-  hover?: BaseStyle<Asset>; /** The keyboard focus is on the element: Tab moved it there, and no pointer tapped since. */
-  focus?: BaseStyle<Asset>; /** The popup the element belongs to is kept under another one. */
-  covered?: BaseStyle<Asset>;
-};
+type Warn = (key: string, message: string, data?: Record<string, unknown>) => void;
 /**
- * The four viewport variants of a style, applied in the order portrait, landscape, tall, wide.
+ * What the pure layout needs next to the runs, the style and the tables.
  *
  * @example
  * ```ts
- * const variants: WhenVariants = { landscape: { direction: "row" } };
+ * const options: LayoutOptions = { warn: () => undefined };
  * ```
  */
-type WhenVariants<Asset extends string = string> = {
-  portrait?: BaseStyle<Asset>;
-  landscape?: BaseStyle<Asset>;
-  tall?: BaseStyle<Asset>;
-  wide?: BaseStyle<Asset>;
+type LayoutOptions = {
+  warn: Warn;
 };
 /**
- * One style as a game writes it: the base vocabulary plus the two variant tables. `Asset` is the
- * game's asset key union: `uiFor` narrows `nineSlice` to it, the way it narrows `texture`.
+ * What was resolved for one entity last, so the frame step knows whether anything moved. `unit`
+ * is what the shown string of a bound label was built from: the rounded value for `"int"`, whole
+ * seconds for a time format.
  *
  * @example
  * ```ts
- * const topBar: Style = { direction: "row", gap: 12, when: { landscape: { justify: "end" } } };
+ * const seen: SeenText = {
+ *   content: "", style: "digits", bind: "Countdown.left:mm:ss", locale: "ru", unit: 95
+ * };
  * ```
  */
-type Style<Asset extends string = string> = BaseStyle<Asset> & {
-  is?: IsVariants<Asset>;
-  when?: WhenVariants<Asset>;
+type SeenText = {
+  content: unknown;
+  style: string;
+  bind: string | undefined;
+  locale: string;
+  unit: number | undefined;
 };
 /**
- * What `resolve` answers with: the base vocabulary with every safe-area token replaced by a
- * number and every variant already merged in. Frozen.
+ * text plugin config.
  *
  * @example
  * ```ts
- * const resolved: ResolvedStyle = { direction: "row", gap: 12, padding: 24 };
+ * createApp({ pluginConfigs: { text: { fonts: { body: "ui.body", digits: "ui.digits" } } } });
  * ```
  */
-type ResolvedStyle = Omit<BaseStyle, "padding" | "margin" | "left" | "top" | "right" | "bottom"> & {
-  padding?: number | {
-    top?: number;
-    right?: number;
-    bottom?: number;
-    left?: number;
-  };
-  margin?: number | {
-    top?: number;
-    right?: number;
-    bottom?: number;
-    left?: number;
+type Config = {
+  /** The two fonts every game ships in its boot bundle. They back the built-in styles. */fonts: {
+    body: string;
+    digits: string;
   };
-  left?: number;
-  top?: number;
-  right?: number;
-  bottom?: number;
 };
 /**
- * The viewport flags of a style: which `when` variants apply this frame.
- *
- * @example
- * ```ts
- * const flags: WhenFlags = { portrait: true, landscape: false, tall: true, wide: false };
- * ```
+ * text plugin state.
  */
-type WhenFlags = {
-  portrait: boolean;
-  landscape: boolean;
-  tall: boolean;
-  wide: boolean;
+type State = {
+  /** Built-in styles first, then the styles of every feature in feature order. */styles: Map<string, TextStyle>; /** Style name to the feature that brought it, for the duplicate error. */
+  styleOwner: Map<string, string>; /** The config fonts plus every `font`, `bold` and `italic` of every style. */
+  fontKeys: Set<string>; /** The parsed advance table per font key, filled when `assets` has the font. */
+  tables: Map<string, AdvanceTable>; /** The font keys handed to `renderer.sync.fonts.install`. */
+  installed: Set<string>; /** What was resolved for an entity last. */
+  seen: Map<Entity, SeenText>; /** `bind.component` to its world type; `undefined` after the one warning. */
+  bindTypes: Map<string, AnyComponent | undefined>; /** The measured size of every live label, for `ui`. */
+  measured: Map<Entity, Size>; /** Layout per `style + resolved`, oldest dropped first. */
+  cache: Map<string, TextLayout>; /** What every live label container was last filled from, by container. */
+  drawn: WeakMap<object, DrawnLabel>; /** Entities to re-resolve in the next layout phase. */
+  dirty: Set<Entity>; /** Warning keys already written, so a style, a tag, a glyph or a font warns once. */
+  warned: Set<string>; /** The system, the two world hooks and the display adapter. */
+  removers: Array<() => void>;
 };
 /**
- * The state flags of an element: what the markup declared (`disabled`, `active`, `selected`),
- * `pressed` and `hover` from the pointer, `focus` from the keyboard, and `covered` from the root
- * it belongs to.
+ * text plugin API, `app.text`. Two questions: how big a piece of text is, and which styles the
+ * game registered; and one order, the dev hot swap of a styles file. Everything else happens in
+ * the frame.
  *
  * @example
  * ```ts
- * const flags: IsFlags = {
- *   pressed: false, hover: true, focus: false, disabled: false, active: true, selected: false,
- *   covered: false
- * };
+ * app.text.measure("120", "digits"); // { width: 57.6, height: 38.4 }
+ * app.text.styles(); // ["body", "digits"]
  * ```
  */
-type IsFlags = {
-  pressed: boolean;
-  hover: boolean;
-  focus: boolean;
-  disabled: boolean;
-  active: boolean;
-  selected: boolean;
-  covered: boolean;
+type TextApi = {
+  /**
+   * The size of a piece of text in reference pixels, from the advance table of the style's font.
+   * A `Message` is formatted in the current locale first. Never touches a canvas, so the answer
+   * is the same in a browser and in plain Bun. Cached per style and resolved string.
+   *
+   * @param content - A plain string, or what `tr` returned.
+   * @param style - A registered style name. An unknown one warns once and measures as `body`.
+   * @returns The width and height of the block.
+   * @example
+   * ```ts
+   * // `ui.layout` asks once per invalidation, from the Yoga measure function of a text element.
+   * const text = ctx.require(textPlugin);
+   *
+   * text.measure("120", "digits"); // { width: 57.6, height: 38.4 } on the 0.6 em fallback
+   * ```
+   */
+  measure(content: string | Message, style: string): Size;
+  /**
+   * Whether the font of a style has a glyph for one character, the lookup Pixi draws by. A
+   * character its font lacks is drawn as nothing and `measure` counts it 0 wide. While the font is
+   * not loaded every character counts, as the 0.6 em fallback measures it. An unknown style warns
+   * once and looks up `body`.
+   *
+   * @param char - One character, a whole code point.
+   * @param style - A registered style name.
+   * @returns False only for a character a loaded font has no glyph for.
+   * @example
+   * ```ts
+   * // `ui` measures the caret of a text field over the characters the font draws.
+   * const text = ctx.require(textPlugin);
+   *
+   * text.hasGlyph("A", "body"); // true
+   * text.hasGlyph("😀", "body"); // false once the body font is loaded: it has no emoji glyph
+   * ```
+   */
+  hasGlyph(char: string, style: string): boolean;
+  /**
+   * The registered style names: the two built-ins first, then the styles of every feature in
+   * feature order.
+   *
+   * @returns A frozen list of style names.
+   * @example
+   * ```ts
+   * // A dev overlay lists what a game may write in a `style` prop.
+   * app.text.styles(); // ["body", "digits", "hud.digits"]
+   * ```
+   */
+  styles(): readonly string[];
+  /**
+   * The dev hot swap of a styles file: writes every style of the map over the table. A known
+   * name keeps the feature that owns it, a new name is added and usable at once. The fonts the
+   * styles name are read, the measured layouts are dropped, and every label is laid out again
+   * on the next frame and redrawn with the new style, even when its text and its style name did
+   * not change. The game loop is woken for that frame.
+   *
+   * @param styles - What `defineTextStyles` returned in the saved module.
+   * @example
+   * ```ts
+   * // `ui` hot swaps a saved `hud/styles.ts`: the "hud.title" labels redraw at 64 px.
+   * const uiStyles = defineTextStyles({
+   *   "hud.title": { font: "ui.font-body", size: 64, fill: 0xff0000 }
+   * });
+   *
+   * ctx.require(textPlugin).replaceStyles(uiStyles);
+   * ctx.require(textPlugin).measure("12", "hud.title").height; // 76.8 on the 0.6 em fallback
+   * ```
+   */
+  replaceStyles(styles: TextStyles): void;
 };
 /**
- * A flat table of design tokens a game reads in its styles.
+ * Resolved dependency APIs.
+ */
+type Deps = {
+  time: Api;
+  flow: Api$1;
+  world: Api$2;
+  renderer: Api$3;
+  assets: Api$4;
+  i18n: I18nApi;
+  clock: Api$5;
+};
+/**
+ * What the kernel context offers before the deps are attached.
  *
- * @example
- * ```ts
- * const tokens: Tokens = { space: { md: 16 }, color: { panel: 0x101018 } };
- * ```
+ * `text` owns no event, so `emit` is the kernel's and never called here.
  */
-type Tokens = {
-  readonly space?: Readonly<Record<string, number>>;
-  readonly color?: Readonly<Record<string, number>>;
-  readonly radius?: Readonly<Record<string, number>>;
-  readonly font?: Readonly<Record<string, string>>;
+type KernelSlice = PluginCtx<Config, State> & {
+  readonly global: object;
+  readonly log: Log.LogApi;
+  readonly require: Require;
 };
 /**
- * styles module state: the flags of the frame and the viewport they were read from.
+ * Domain context shared by the files of the plugin: the kernel slice plus the resolved deps.
  */
-type StylesState = {
-  flags: WhenFlags;
-  viewport: ViewportSize | undefined;
+type TextCtx = KernelSlice & {
+  readonly deps: Deps;
 };
+/**
+ * Payload of the `assets:bundle-loaded` hook: a bundle landed, so a font may be readable now.
+ */
+type BundleLoaded = Events$1["assets:bundle-loaded"];
+/**
+ * Payload of the `assets:bundle-unloaded` hook: `keys` names the assets that left.
+ */
+type BundleUnloaded = Events$1["assets:bundle-unloaded"];
+/**
+ * Payload of the `i18n:locale-changed` hook: every message has to be resolved again.
+ */
+type LocaleChanged = Events["i18n:locale-changed"];
 //#endregion
 //#region src/plugins/ui/jsx/intrinsics.d.ts
 /**
@@ -2777,4 +2777,4 @@ type CommonProps = {
   components?: ElementComponents;
 };
 //#endregion
-export { SpriteValue as $, TextStyleInput as A, types_d_exports$1 as B, Config as C, TextApi as D, State as E, Config$1 as F, Display as G, InputApi as H, I18nApi as I, Parent as J, NineSlice as K, Message as L, TextValue as M, types_d_exports as N, TextBind as O, Argument as P, SpriteOptions as Q, State$1 as R, BindOptions as S, Point as T, State$2 as U, Config$2 as V, types_d_exports$2 as W, ShapeValue as X, Shape as Y, Sprite as Z, Style as _, JsxChild as a, defineComponent as b, UiNode as c, popup as d, Transform as et, defineTokens as f, ResolvedStyle as g, IsFlags as h, Finding as i, TextStyles as j, TextFormat as k, Box as l, UiIntrinsicElements as m, ElementChange as n, sprite as nt, JsxState as o, IntrinsicElementsFor as p, NineSliceValue as q, ElementMotion as r, PopupComponent as s, DescriptionNode as t, TransformValue as tt, LocalWrite as u, StylesState as v, CountdownValue as w, BindField as x, WhenFlags as y, TypedTr as z };
+export { ResolvedStyle as $, InputApi as A, SpriteOptions as B, TextFormat as C, types_d_exports as D, TextValue as E, NineSliceValue as F, Argument as G, Transform as H, Parent as I, Message as J, Config$2 as K, Shape as L, types_d_exports$1 as M, Display as N, defineComponent as O, NineSlice as P, IsFlags as Q, ShapeValue as R, TextBind as S, TextStyles as T, TransformValue as U, SpriteValue as V, sprite as W, TypedTr as X, State$2 as Y, types_d_exports$2 as Z, Config as _, JsxChild as a, State as b, UiNode as c, popup as d, Style as et, defineTokens as f, BindOptions as g, BindField as h, Finding as i, State$1 as j, Config$1 as k, Box as l, UiIntrinsicElements as m, ElementChange as n, WhenFlags as nt, JsxState as o, IntrinsicElementsFor as p, I18nApi as q, ElementMotion as r, PopupComponent as s, DescriptionNode as t, StylesState as tt, LocalWrite as u, CountdownValue as v, TextStyleInput as w, TextApi as x, Point as y, Sprite as z };