@moku-labs/game 0.0.1 → 0.0.2

package/dist/types-yg_ywtT-.d.mts

@@ -0,0 +1,1859 @@
+import { D as Hint, L as Json, T as Descriptor, k as Api, lt as Require, t as Api$1 } from "./types-JNc_UQBo.mjs";
+import { E as ViewHandle, M as ComponentValue, N as Entity, O as AnyComponentType, S as ProjectionMotion, b as MotionHandle, c as Point$1, j as ComponentType, l as ViewportSize, m as ChangeHook, t as Api$3, u as Api$2, y as Motion } from "./types-BxkNNYul.mjs";
+import { Log } from "@moku-labs/common/browser";
+import { PluginCtx } from "@moku-labs/core";
+
+//#region src/plugins/input/types.d.ts
+declare namespace types_d_exports$1 {
+  export { Config$1 as Config, Deps, Direction, GesturePhase, InputApi, InputCtx, KernelSlice, KeyInput, KeyListener, Point, 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 = {
+  x: number;
+  y: number;
+};
+/**
+ * The dominant axis of a swipe.
+ *
+ * @example
+ * ```ts
+ * const direction: Direction = "left";
+ * ```
+ */
+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;
+};
+/**
+ * Where the one active pointer stands in the gesture machine.
+ *
+ * @example
+ * ```ts
+ * const phase: GesturePhase = "dragging";
+ * ```
+ */
+type GesturePhase = "idle" | "pressed" | "longPressed" | "dragging";
+/**
+ * What `onTap` hands a listener: the view the finger let go on, inside the tap slop.
+ *
+ * @example
+ * ```ts
+ * const tapped: Entity[] = [];
+ * const listener: TapListener = entity => tapped.push(entity);
+ * ```
+ */
+type TapListener = (entity: Entity) => void;
+/**
+ * One key press as `onKey` hands it to a listener: the DOM `KeyboardEvent.key` and whether Shift
+ * was held.
+ *
+ * @example
+ * ```ts
+ * const backTab: KeyInput = { key: "Tab", shift: true };
+ * ```
+ */
+type KeyInput = {
+  key: string;
+  shift: boolean;
+};
+/**
+ * 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 closeOnEscape: KeyListener = key => key.key === "Escape";
+ * ```
+ */
+type KeyListener = (key: KeyInput) => boolean | void;
+/**
+ * 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
+ * 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" } } } });
+ * ```
+ */
+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;
+  };
+};
+/**
+ * input plugin state: the raw queue the DOM handlers write, and the one gesture in progress.
+ */
+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; /** `Transform` minus the pointer at the moment of the grab. */
+  grabOffset: Point; /** 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 remover `world.projection.mute` returned, while a drag runs. */
+  unmute: (() => void) | 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[]; /** 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[];
+};
+/**
+ * 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 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 InputApi = {
+  /**
+   * 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" } }
+   * ```
+   */
+  tap(target: Target): boolean;
+  /**
+   * 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" } }
+   * ```
+   */
+  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;
+  /**
+   * 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 on every key pressed while the canvas is attached, and on every
+   * `key` call. 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;
+  };
+};
+/**
+ * Resolved dependency APIs.
+ */
+type Deps = {
+  time: Api;
+  flow: Api$1;
+  world: Api$2;
+  renderer: Api$3;
+};
+/**
+ * What the kernel context offers before the deps are attached.
+ *
+ * `input` owns no event, so `emit` is the kernel's and never called here.
+ */
+type KernelSlice = PluginCtx<Config$1, State$1> & {
+  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 & {
+  readonly deps: Deps;
+};
+declare namespace types_d_exports {
+  export { Argument, CompiledMessage, CompiledMessages, Config, ElementNode, Events, I18nApi, I18nCtx, I18nKit, IntlKit, KeysWithoutParameters, Message, Part, RegisteredModule, ResolvedModule, 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 icon: ElementNode = { type: "icon", props: { name: "hud.coin" }, children: [] };
+ * ```
+ */
+type ElementNode = {
+  type: string;
+  key?: string;
+  props: object;
+  children: readonly 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.
+ *
+ * @example
+ * ```ts
+ * const reward: Argument = 25;
+ * const players: Argument = ["Ann", "Bo"];
+ * ```
+ */
+type Argument = string | number | readonly string[] | ElementNode;
+/**
+ * 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 orders: Message<"hud.orders", { n: number }> = { key: "hud.orders", params: { n: 3 } };
+ * ```
+ */
+type Message<Key extends string = string, Values = Record<string, Argument>> = {
+  key: Key;
+  params?: Values;
+};
+/**
+ * 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 parts: Part[] = [
+ *   { kind: "element", node: { type: "icon", props: { name: "hud.coin" }, children: [] } },
+ *   { kind: "text", text: " 25" }
+ * ];
+ * ```
+ */
+type Part = {
+  kind: "text";
+  text: string;
+} | {
+  kind: "element";
+  node: ElementNode;
+};
+/**
+ * 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
+ * const intl = createIntlKit("ru");
+ * intl.plural().select(3); // "few"
+ * ```
+ */
+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;
+};
+/**
+ * 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 = {
+  /** 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>;
+};
+/**
+ * One module registered for one locale, with the name it can be blamed under when two of them
+ * carry the same key.
+ */
+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;
+};
+/**
+ * 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 = {
+  /** 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;
+};
+/**
+ * i18n plugin events.
+ */
+type Events = {
+  /** The current locale changed and its messages are loaded. */"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 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 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;
+  /**
+   * 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[];
+};
+/**
+ * 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, State, Events> & {
+  readonly global: object;
+  readonly log: Log.LogApi;
+  readonly require: Require;
+};
+/**
+ * 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 table: StringTable = { "hud.orders": { n: 3 }, "orders.complete": {} };
+ * ```
+ */
+type StringTable = Record<string, unknown>;
+/**
+ * The keys of a table whose message takes no parameters, so `tr` may be called with the key
+ * alone.
+ *
+ * @example
+ * ```ts
+ * type Keys = KeysWithoutParameters<{ "home.play": Record<never, never>; "hud.orders": { n: number } }>;
+ * // "home.play"
+ * ```
+ */
+type KeysWithoutParameters<Table extends StringTable> = { [Key in keyof Table]: Record<never, never> extends Table[Key] ? Key : never }[keyof Table] & string;
+/**
+ * `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 { tr } = i18nFor<{ "hud.orders": { n: number } }>();
+ * tr("hud.orders", { n: 3 }); // { key: "hud.orders", params: { n: 3 } }
+ * ```
+ */
+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]>;
+};
+/**
+ * What `defineGame` spreads from this plugin.
+ *
+ * @example
+ * ```ts
+ * const kit: I18nKit<{ "home.play": Record<never, never> }> = i18nFor();
+ * kit.tr("home.play"); // { key: "home.play" }
+ * ```
+ */
+type I18nKit<Table extends StringTable> = {
+  tr: TypedTr<Table>;
+};
+//#endregion
+//#region src/plugins/renderer/components.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.
+ *
+ * @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 }
+ * };
+ * ```
+ */
+type TransformValue = {
+  x: number;
+  y: number;
+  rotation: number;
+  scale: number;
+  pivot: Point$1;
+};
+/**
+ * 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 fit: SpriteFit = "cover";
+ * ```
+ */
+type SpriteFit = "fill" | "contain" | "cover";
+/**
+ * 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`.
+ *
+ * @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"
+ * };
+ * ```
+ */
+type SpriteValue = {
+  texture: string;
+  tint: number;
+  alpha: number;
+  anchor: Point$1;
+  width: number;
+  height: number;
+  fit: SpriteFit;
+};
+/**
+ * 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.
+ *
+ * @example
+ * ```ts
+ * const value: NineSliceValue = {
+ *   texture: "ui.panel", width: 600, height: 320, alpha: 1, tint: 0xffffff, debug: false
+ * };
+ * // The board tray, outlined while its insets are checked.
+ * const tray: NineSliceValue = {
+ *   texture: "board.board-tray", width: 1000, height: 1040, alpha: 1, tint: 0xffffff, debug: true
+ * };
+ * ```
+ */
+type NineSliceValue = {
+  texture: string;
+  width: number;
+  height: number;
+  alpha: number;
+  tint: number;
+  debug: boolean;
+};
+/**
+ * The escape hatch: the game owns a Pixi object and `sync` only attaches and detaches it.
+ *
+ * @example
+ * ```ts
+ * const value: DisplayValue = { object: spineAnimation };
+ * ```
+ */
+type DisplayValue = {
+  object: unknown;
+};
+/**
+ * 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. `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.
+ *
+ * @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 ShapeValue = {
+  kind: "rect" | "triangle";
+  w: number;
+  h: number;
+  fill: number;
+  fillAlpha: number;
+  alpha: number;
+  radius: number;
+  stroke: number;
+  strokeWidth: number;
+  dash: number;
+  clip: boolean;
+};
+/**
+ * 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 SpriteOptions = {
+  texture: string;
+  at: Point$1;
+  tint?: number;
+  alpha?: number;
+  anchor?: Point$1;
+  scale?: number;
+};
+/**
+ * Where a view sits: reference units, radians, uniform scale, and the local point it turns
+ * around.
+ */
+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.
+ */
+declare const NineSlice: ComponentType<{
+  texture: string;
+  width: number;
+  height: number;
+  alpha: number;
+  tint: number;
+  debug: 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>];
+//#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.
+ * @example
+ * ```ts
+ * const Panel = defineComponent("Panel", {
+ *   local: { tab: "audio" },
+ *   view: (props: { volume: number }, local) => ({ type: "column", props: {}, children: [] })
+ * });
+ * Panel.name; // "Panel"
+ * ```
+ */
+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>;
+/**
+ * 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 Row = defineComponent("Row", { view: () => ({ type: "row", props: {}, children: [] }) });
+ * Row.outcomes; // undefined
+ * ```
+ */
+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
+/**
+ * A length that may also come from the notch. The four tokens are replaced by `resolve` with the
+ * matching `viewport.safeArea` value.
+ *
+ * @example
+ * ```ts
+ * const top: SafeAreaToken = "safeArea.top";
+ * ```
+ */
+type SafeAreaToken = "safeArea.top" | "safeArea.right" | "safeArea.bottom" | "safeArea.left";
+/**
+ * A length in reference units, or one of the safe-area tokens.
+ *
+ * @example
+ * ```ts
+ * const length: Length = 24;
+ * ```
+ */
+type Length = number | SafeAreaToken;
+/**
+ * Padding or margin: one number for every edge, or a value per edge.
+ *
+ * @example
+ * ```ts
+ * const padding: Edges = { top: "safeArea.top", left: 16 };
+ * ```
+ */
+type Edges = Length | {
+  top?: Length;
+  right?: Length;
+  bottom?: Length;
+  left?: Length;
+};
+/**
+ * A main-axis or cross-axis size: reference units, a percent of the parent, or `"auto"`.
+ *
+ * @example
+ * ```ts
+ * const width: Extent = "50%";
+ * ```
+ */
+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 box group: what the element takes up before its children are placed.
+ *
+ * @example
+ * ```ts
+ * // The board slot: 970 u of cells, scaled down on a short phone.
+ * const box: BoxStyle = { width: 970, height: 970, fit: "contain" };
+ * ```
+ */
+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";
+};
+/**
+ * The position group. `reason` is the comment `lint()` asks for next to an absolute element.
+ *
+ * @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 };
+ * ```
+ */
+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;
+};
+/**
+ * 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
+ * // 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 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;
+};
+/**
+ * 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";
+ * ```
+ */
+type Origin = "center" | "top" | "topLeft" | {
+  x: number;
+  y: number;
+};
+/**
+ * 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" };
+ * ```
+ */
+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;
+};
+/**
+ * Everything but the variants: the five groups of the vocabulary.
+ *
+ * @example
+ * ```ts
+ * const base: BaseStyle = { direction: "row", gap: 8, fill: 0x101018 };
+ * ```
+ */
+type BaseStyle<Asset extends string = string> = FlowStyle & BoxStyle & PositionStyle & VisualStyle<Asset> & TransformStyle;
+/**
+ * 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" }
+ * };
+ * ```
+ */
+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>;
+};
+/**
+ * The four viewport variants of a style, applied in the order portrait, landscape, tall, wide.
+ *
+ * @example
+ * ```ts
+ * const variants: WhenVariants = { landscape: { direction: "row" } };
+ * ```
+ */
+type WhenVariants<Asset extends string = string> = {
+  portrait?: BaseStyle<Asset>;
+  landscape?: BaseStyle<Asset>;
+  tall?: BaseStyle<Asset>;
+  wide?: BaseStyle<Asset>;
+};
+/**
+ * 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 topBar: Style = { direction: "row", gap: 12, when: { landscape: { justify: "end" } } };
+ * ```
+ */
+type Style<Asset extends string = string> = BaseStyle<Asset> & {
+  is?: IsVariants<Asset>;
+  when?: WhenVariants<Asset>;
+};
+/**
+ * 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 resolved: ResolvedStyle = { direction: "row", gap: 12, padding: 24 };
+ * ```
+ */
+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;
+};
+/**
+ * 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 };
+ * ```
+ */
+type WhenFlags = {
+  portrait: boolean;
+  landscape: boolean;
+  tall: boolean;
+  wide: boolean;
+};
+/**
+ * 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 flags: IsFlags = {
+ *   pressed: false, hover: true, focus: false, disabled: false, active: true, selected: false,
+ *   covered: false
+ * };
+ * ```
+ */
+type IsFlags = {
+  pressed: boolean;
+  hover: boolean;
+  focus: boolean;
+  disabled: boolean;
+  active: boolean;
+  selected: boolean;
+  covered: boolean;
+};
+/**
+ * A flat table of design tokens a game reads in its styles.
+ *
+ * @example
+ * ```ts
+ * const tokens: Tokens = { space: { md: 16 }, color: { panel: 0x101018 } };
+ * ```
+ */
+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>>;
+};
+/**
+ * styles module state: the flags of the frame and the viewport they were read from.
+ */
+type StylesState = {
+  flags: WhenFlags;
+  viewport: ViewportSize | undefined;
+};
+//#endregion
+//#region src/plugins/ui/jsx/intrinsics.d.ts
+/**
+ * The optional brand that makes a wrong value print the name of the prop it was written on.
+ *
+ * @example
+ * ```ts
+ * type Named = string & Brand<"ButtonIntent">;
+ * ```
+ */
+type Brand<Name extends string> = {
+  readonly _ui?: Name;
+};
+/** The intent a button answers the gate with. */
+type ButtonIntent = string & Brand<"ButtonIntent">;
+/** The payload that travels with a button's intent. */
+type ButtonPayload = Json & Brand<"ButtonPayload">;
+/** The patch a button writes into the local state of its nearest component. */
+type ButtonLocal = Record<string, unknown> & Brand<"ButtonLocal">;
+/** Makes a button the control the Escape key taps while its root is the top one. */
+type ButtonEscape = boolean & Brand<"ButtonEscape">;
+/** What a text draws: a plain string, or a message of the game's string table. */
+type TextContent = (string | Message) & Brand<"TextContent">;
+/** The component field a text follows instead of a content. */
+type TextBind = {
+  component: string;
+  field: string;
+} & Brand<"TextBind">;
+/** The text style key, or a layout style when the built-in `body` is meant. */
+type TextStyleProp = (string | Style) & Brand<"TextStyleProp">;
+/** The asset key of an image. */
+type ImageTexture = string & Brand<"ImageTexture">;
+/** The asset key of an icon. */
+type IconName = string & Brand<"IconName">;
+/** How an image or an icon fills its rect: inside it, over it (cropped), or stretched. */
+type ImageFit = ("contain" | "cover" | "fill") & Brand<"ImageFit">;
+/** The axis a scroll container moves on. `"x"` throws until V4. */
+type ScrollAxis = ("x" | "y") & Brand<"ScrollAxis">;
+/** The world projections whose live views a container draws inside itself. */
+type HostedProjections = readonly string[] & Brand<"HostedProjections">;
+/**
+ * The props every tag takes, with the key kept out: JSX passes it as the third argument.
+ *
+ * @example
+ * ```ts
+ * const props: BoxProps = { style: { gap: 8 } };
+ * ```
+ */
+type BoxProps = CommonProps;
+/**
+ * What a container takes: the common props and the projections it hosts. Every live view of a
+ * hosted projection that has no parent, and is not held by a drag, is drawn inside the element,
+ * in its local space; it falls back to its layer when the element leaves.
+ *
+ * @example
+ * ```tsx
+ * // The board of a merge game sits in a slot that shrinks to fit a short phone.
+ * <stack
+ *   key="boardSlot"
+ *   hosts={["board.cells", "board.generators", "board.items"]}
+ *   style={{ width: 970, height: 970, fit: "contain" }}
+ * />;
+ * // one frame after the slot is laid out, every live cell, generator and item view without a
+ * // parent carries Parent({ entity: slot }) and draws in the slot's 0..970 space
+ * ```
+ */
+type HostProps = CommonProps & {
+  hosts?: HostedProjections;
+};
+/**
+ * What a button takes. `intent` and `local` exclude each other: a button either answers the gate
+ * or writes local state. `escape` marks the control the Escape key taps: the close button or the
+ * backdrop of a dismissable popup.
+ *
+ * @example
+ * ```ts
+ * const props: ButtonTagProps = { intent: "claim", payload: { orderId: "o1" } };
+ * // The close button of the settings popup: Escape taps it while the popup is on top.
+ * const close: ButtonTagProps = { intent: "close", escape: true };
+ * ```
+ */
+type ButtonTagProps = CommonProps & {
+  escape?: ButtonEscape;
+} & ({
+  intent?: ButtonIntent;
+  payload?: ButtonPayload;
+  local?: never;
+} | {
+  intent?: never;
+  payload?: never;
+  local?: ButtonLocal;
+});
+/**
+ * What a text takes: a content or a bind, and the style key that carries its size.
+ *
+ * @example
+ * ```ts
+ * const props: TextTagProps = { content: "120", style: "digits" };
+ * ```
+ */
+type TextTagProps = Omit<CommonProps, "style"> & {
+  content?: TextContent;
+  bind?: TextBind;
+  style?: TextStyleProp;
+};
+/**
+ * What an image takes: the texture key is required; `fit` is `"contain"` unless it says so.
+ *
+ * @example
+ * ```ts
+ * // A full-bleed background.
+ * const props: ImageProps = {
+ *   texture: "board.bg-forest-meadow",
+ *   fit: "cover",
+ *   style: { position: "absolute", left: 0, top: 0, width: "100%", height: "100%" }
+ * };
+ * ```
+ */
+type ImageProps = CommonProps & {
+  texture: ImageTexture;
+  fit?: ImageFit;
+};
+/**
+ * What an icon takes: the asset key is required; without a size it follows the line height.
+ *
+ * @example
+ * ```ts
+ * const props: IconProps = { name: "hud.gear", fit: "contain" };
+ * ```
+ */
+type IconProps = CommonProps & {
+  name: IconName;
+  fit?: ImageFit;
+};
+/**
+ * What a panel takes: the common props. Its nine-slice is a style field, and it swallows every
+ * tap that lands on it.
+ *
+ * @example
+ * ```ts
+ * const props: PanelProps = { style: { nineSlice: "ui.panel", padding: 32 } };
+ * ```
+ */
+type PanelProps = CommonProps;
+/**
+ * What a scroll container takes.
+ *
+ * @example
+ * ```ts
+ * const props: ScrollProps = { axis: "y" };
+ * ```
+ */
+type ScrollProps = CommonProps & {
+  axis?: ScrollAxis;
+};
+/**
+ * The thirteen tags a screen is written with.
+ *
+ * @example
+ * ```ts
+ * const tags: (keyof UiIntrinsicElements)[] = ["row", "column", "button"];
+ * ```
+ */
+type UiIntrinsicElements = {
+  screen: HostProps;
+  layer: BoxProps;
+  row: HostProps;
+  column: HostProps;
+  stack: HostProps;
+  spacer: BoxProps;
+  panel: PanelProps;
+  image: ImageProps;
+  icon: IconProps;
+  text: TextTagProps;
+  button: ButtonTagProps;
+  scroll: ScrollProps;
+  input: BoxProps;
+};
+/**
+ * The props of one tag with its `style` narrowed to the asset keys of one game, so a nine-slice
+ * key outside them is an error where the tag is written. Distributes over a union, so the two
+ * shapes of a button stay apart.
+ *
+ * @example
+ * ```ts
+ * type Panel = Restyled<PanelProps, "ui.panel">; // style?: Style<"ui.panel">
+ * ```
+ */
+type Restyled<Properties, Asset extends string> = Properties extends unknown ? Omit<Properties, "style"> & {
+  style?: Style<Asset>;
+} : never;
+/**
+ * The same tags with the asset keys, text style keys and message keys of one game. `uiFor`
+ * carries it, so a game can name the type of its own intrinsics. The asset keys narrow `texture`,
+ * `name` and the `nineSlice` of every style.
+ *
+ * @example
+ * ```ts
+ * type Tags = IntrinsicElementsFor<"ui.coin", "digits", "hud.coins">;
+ * ```
+ */
+type IntrinsicElementsFor<Asset extends string, TextStyleKey extends string, StringKey extends string> = { [Tag in Exclude<keyof UiIntrinsicElements, "image" | "icon" | "text">]: Restyled<UiIntrinsicElements[Tag], Asset> } & {
+  image: Restyled<CommonProps, Asset> & {
+    texture: Asset;
+    fit?: "contain" | "cover" | "fill";
+  };
+  icon: Restyled<CommonProps, Asset> & {
+    name: Asset;
+    fit?: "contain" | "cover" | "fill";
+  };
+  text: Omit<CommonProps, "style"> & {
+    content?: string | Message<StringKey>;
+    bind?: TextBind;
+    style?: TextStyleKey | Style<Asset>;
+  };
+};
+//#endregion
+//#region src/plugins/ui/styles/tokens.d.ts
+/**
+ * Declares the design tokens of a game: spaces, colours, radii and font keys, flat and plain.
+ *
+ * @param tokens - The four groups; every key inside them is the game's own.
+ * @returns The same object, frozen.
+ * @example
+ * ```ts
+ * defineTokens({ space: { md: 16 } }).space.md; // 16
+ * ```
+ */
+declare function defineTokens<const Given extends Tokens>(tokens: Given): Readonly<Given>;
+//#endregion
+//#region src/plugins/ui/components.d.ts
+/**
+ * The rect of a ui element in root coordinates, in reference units. Its `x` and `y` are the rest
+ * pose of the `Transform` of that entity, so a motion never fights the layout.
+ *
+ * @example
+ * ```ts
+ * const value: BoxValue = { x: 0, y: 0, w: 1080, h: 96 };
+ * ```
+ */
+type BoxValue = {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+};
+/**
+ * What a button with `local` writes into the local state of its nearest component instance.
+ *
+ * @example
+ * ```ts
+ * const value: LocalWriteValue = { patch: { tab: "audio" } };
+ * ```
+ */
+type LocalWriteValue = {
+  patch: Record<string, unknown>;
+};
+/**
+ * The rect of a ui element in root coordinates. Written by the solve, read by `tree()`, `lint()`
+ * and the hit test of `guide`.
+ */
+declare const Box: ComponentType<{
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}>;
+/**
+ * On a button that writes local state instead of naming an intent. `input.onTap` reports the tap
+ * and `ui` merges the patch into the nearest component instance.
+ */
+declare const LocalWrite: ComponentType<LocalWriteValue>;
+/**
+ * Builds the effect a node awaits to show a popup. The gate opens for the outcomes of the
+ * component, so the node resolves with the intent one of its buttons answered. `over` names the
+ * component of a popup that stays mounted beneath this one, drawn covered, until this one is gone.
+ *
+ * @param component - A component declared with `outcomes`.
+ * @param props - What its view is called with.
+ * @param options - How the popup stands to the others.
+ * @param options.over - The component name of the popup kept beneath this one.
+ * @returns The descriptor `fx()` takes.
+ * @example
+ * ```ts
+ * const Reward = defineComponent("Reward", {
+ *   outcomes: { claim: {} },
+ *   view: () => ({ type: "panel", props: {}, children: [] })
+ * });
+ * popup(Reward, { gold: 5 });
+ * // { kind: "popup", payload: { component: "Reward", props: { gold: 5 } }, answers: ["claim"] }
+ * ```
+ * @example
+ * ```ts
+ * // The settings node asks before a reset; the settings stay beneath, covered.
+ * const Confirm = defineComponent("Confirm", {
+ *   outcomes: { reset: {}, cancel: {} },
+ *   view: () => ({ type: "panel", props: {}, children: [] })
+ * });
+ * popup(Confirm, {}, { over: "Settings" });
+ * // { kind: "popup", payload: { component: "Confirm", props: {}, over: "Settings" },
+ * //   answers: ["reset", "cancel"] }
+ * ```
+ */
+declare function popup<Properties extends object, Local extends object>(component: PopupComponent<Properties, Local>, props: Properties, options?: {
+  over?: string;
+}): Descriptor;
+//#endregion
+//#region src/plugins/ui/jsx/types.d.ts
+/**
+ * One node of an element description, as the JSX runtime builds it. `key` is the third argument
+ * of `jsx`, never a member of `props`.
+ *
+ * @example
+ * ```ts
+ * const node: DescriptionNode = { type: "row", key: "tabs", props: {}, children: [] };
+ * ```
+ */
+type DescriptionNode = {
+  type: string;
+  key?: string;
+  props: Record<string, unknown>;
+  children: DescriptionNode[];
+};
+/**
+ * What may sit between the tags of a node before `flatten` is done with it: nodes, arrays,
+ * strings, numbers and the three values that drop.
+ *
+ * @example
+ * ```ts
+ * const child: JsxChild = "5 coins";
+ * ```
+ */
+type JsxChild = DescriptionNode | string | number | boolean | null | undefined | readonly JsxChild[];
+/**
+ * One `change` hook of a ui element: its handle, the value before and the value after.
+ *
+ * @example
+ * ```ts
+ * const moved: ElementChange<BoxValue> = (view, previous, next) =>
+ *   next.y > previous.y ? view.toRest(Transform, { ms: 200 }) : undefined;
+ * ```
+ */
+type ElementChange<Value> = (view: ViewHandle<unknown>, previous: Value, next: Value, hint?: Hint) => Motion;
+/**
+ * The motion hooks of one element: the hook triple of `world.projection`, which `defineMotion`
+ * of `anim` returns. `ui` plays two `change` hooks itself and hands them typed values: `Box` gets
+ * the rects, `Transform` the rest poses. A hook for any other component name is accepted, so every
+ * `defineMotion` result fits, and `ui` never plays it.
+ *
+ * @example
+ * ```ts
+ * // An order card that grows into its ready pose sways once on the way.
+ * const cardMotion: ElementMotion = {
+ *   change: {
+ *     Transform: (view, previous, next) =>
+ *       next.scale > previous.scale
+ *         ? view.all([
+ *             view.toRest(Transform, { ms: 240 }),
+ *             view.tween(Transform, { rotation: 0.12 }, { ms: 520, additive: true })
+ *           ])
+ *         : view.toRest(Transform, { ms: 240 })
+ *   }
+ * };
+ * ```
+ */
+type ElementMotion = Omit<ProjectionMotion<unknown>, "change"> & {
+  readonly change?: {
+    readonly [component: string]: ChangeHook<never>;
+    Box?(view: ViewHandle<unknown>, previous: BoxValue, next: BoxValue, hint?: Hint): Motion;
+    Transform?(view: ViewHandle<unknown>, previous: TransformValue, next: TransformValue, hint?: Hint): Motion;
+  };
+};
+/**
+ * What a game hands `defineComponent`: the local state one instance starts with, the outcomes a
+ * popup of it resolves with, and the view that runs at every reconcile.
+ *
+ * @example
+ * ```ts
+ * const spec: ComponentSpec<{ volume: number }, { tab: string }, never> = {
+ *   local: { tab: "audio" },
+ *   view: (props, local) => ({ type: "column", props: {}, children: [] })
+ * };
+ * ```
+ */
+type ComponentSpec<Properties extends object, Local extends object, Outcomes> = {
+  readonly local?: Local;
+  readonly outcomes?: Outcomes;
+  view(props: Properties, local: Local): DescriptionNode;
+};
+/**
+ * What `defineComponent` returns: a function JSX may call, carrying the name, the outcomes and
+ * the local state a fresh instance is cloned from.
+ *
+ * @example
+ * ```ts
+ * const Settings = defineComponent("Settings", { view: () => ({ type: "column", props: {}, children: [] }) });
+ * Settings.name; // "Settings"
+ * ```
+ */
+type ComponentDefinition<Properties extends object = object, Local extends object = object, Outcomes = undefined> = {
+  (props: Properties): DescriptionNode;
+  readonly name: string;
+  readonly outcomes: Outcomes;
+  readonly local: Local;
+  readonly view: (props: Properties, local: Local) => DescriptionNode;
+  readonly isUiComponent: true;
+};
+/**
+ * A component that names outcomes, which is what `popup` takes. `Local` stays a parameter
+ * because the `local` argument of `view` is contravariant: pinned to `object` it would refuse
+ * every component that keeps local state.
+ *
+ * @example
+ * ```ts
+ * const settings: PopupComponent<{ volume: number }, { tab: string }> = Settings;
+ * ```
+ */
+type PopupComponent<Properties extends object, Local extends object = object> = ComponentDefinition<Properties, Local, Record<string, unknown>>;
+/**
+ * A component definition with its type arguments erased, as the registry stores it.
+ */
+type AnyComponentDefinition = ComponentDefinition<never, never, unknown>;
+/**
+ * One live instance of a component: the local state kept by identity across renders.
+ */
+type Instance = {
+  identity: string;
+  component: string;
+  local: Record<string, unknown>;
+  props: object;
+  dirty: boolean;
+};
+/**
+ * One live element: the entity, the Yoga node, the resolved style and the place in the tree.
+ * `rect` is natural: under a `fit` ancestor it is the rect before that ancestor's scale. `fit`
+ * is the element's own fit scale (1 without `fit: "contain"`), and `rest` the rest `Transform`
+ * last written for it. `loop` is the motion of the running `loop` hook, kept apart from
+ * `handles`: it never ends, so the exit sweep must not wait for it.
+ */
+type Element = {
+  entity: Entity;
+  identity: string;
+  type: string;
+  key: string | undefined;
+  parentType: string | undefined;
+  root: Entity;
+  node: DescriptionNode;
+  style: ResolvedStyle;
+  is: IsFlags;
+  rect: {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+  };
+  previous: {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+  };
+  moved: boolean;
+  fit: number;
+  rest: TransformValue;
+  handles: MotionHandle[];
+  loop: MotionHandle | undefined;
+  motion: ElementMotion | undefined;
+  parent: Entity | undefined;
+  children: Entity[];
+  instance: string | undefined;
+  live: boolean;
+  entered: boolean;
+  dropKey: (() => void) | undefined;
+};
+/**
+ * The popup side of a root: the handler that shows it now and the root it was opened over.
+ * `released` turns true when that handler's effect ended (answered, or its node aborted): the
+ * root then stays until the flow rests on a node that shows no popup of its component.
+ */
+type PopupLink = {
+  close: () => void;
+  released?: boolean;
+  over?: Entity;
+};
+/**
+ * One reconciled tree: a projection view or a popup, with the flags the frame step reads.
+ * `covered` is true while the root is kept under another popup; every element of the root then
+ * resolves `is.covered`.
+ */
+type Root = {
+  entity: Entity;
+  name: string;
+  tree: DescriptionNode;
+  layer: string;
+  order: number;
+  dirty: boolean;
+  needsSolve: boolean;
+  element: Entity | undefined;
+  popup: PopupLink | undefined;
+  covered: boolean;
+};
+/**
+ * Where the focus ring was last drawn: the layer and order of its root, the rect grown by the
+ * ring offset, and the corner radius.
+ */
+type DrawnRing = {
+  layer: string;
+  order: number;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  radius: number;
+};
+/**
+ * The keyboard focus: the focused element, the two entities of the ring drawn around it, where
+ * the ring was last drawn, and whether ui itself is tapping, so its own Enter tap does not read
+ * as a pointer tap that clears the focus.
+ */
+type FocusState = {
+  entity: Entity | undefined;
+  ring: {
+    halo: Entity;
+    ring: Entity;
+  } | undefined;
+  drawn: DrawnRing | undefined;
+  tapping: boolean;
+};
+/**
+ * jsx module state. `hosts` holds the elements with a `hosts` prop; `hosted` maps a world view to
+ * the element that hosts it.
+ */
+type JsxState = {
+  components: Map<string, AnyComponentDefinition>;
+  roots: Map<Entity, Root>;
+  elements: Map<Entity, Element>;
+  byIdentity: Map<string, Entity>;
+  byKey: Map<Entity, Map<string, Entity>>;
+  instances: Map<string, Instance>;
+  exiting: Set<Entity>;
+  removing: Set<Entity>;
+  hosts: Set<Entity>;
+  hosted: Map<Entity, Entity>;
+  reconciles: number;
+  focus: FocusState;
+};
+/**
+ * One node of the snapshot `tree()` answers with. `rect` is natural: under a `fit` ancestor it
+ * is the rect before that ancestor's scale. An element with `fit: "contain"` adds `fitScale`,
+ * the scale it is drawn at.
+ *
+ * @example
+ * ```ts
+ * // The board slot of a merge game on an iPhone SE.
+ * const node: UiNode = {
+ *   key: "boardSlot", type: "stack", rect: { x: 55, y: 223, w: 970, h: 970 },
+ *   style: { width: 970, height: 970, fit: "contain" },
+ *   state: {
+ *     pressed: false, hover: false, focus: false, disabled: false, active: false, selected: false,
+ *     covered: false
+ *   },
+ *   fitScale: 0.8,
+ *   children: []
+ * };
+ * ```
+ */
+type UiNode = {
+  key: string | undefined;
+  type: string;
+  rect: {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+  };
+  style: ResolvedStyle;
+  state: IsFlags;
+  local?: Record<string, unknown>;
+  fitScale?: number;
+  children: UiNode[];
+};
+/**
+ * One thing `lint()` found on the live screen.
+ *
+ * @example
+ * ```ts
+ * const finding: Finding = { rule: "tap-target", key: "claim", detail: "32x32 pt" };
+ * ```
+ */
+type Finding = {
+  rule: "tap-target" | "text-overflow" | "absolute-without-reason" | "nine-slice-clipped" | "z-index-on-root";
+  key: string;
+  detail: string;
+};
+/**
+ * What the common props of every intrinsic tag accept. A tag's own props are added to it.
+ *
+ * @example
+ * ```ts
+ * const props: CommonProps = { style: { gap: 8 }, state: { active: true } };
+ * ```
+ */
+type CommonProps = {
+  key?: string;
+  style?: Style;
+  state?: {
+    active?: boolean;
+    disabled?: boolean;
+    selected?: boolean;
+  }; /** The motion hooks; `undefined` written out stops a running loop, as leaving it out does. */
+  motion?: ElementMotion | undefined;
+  children?: JsxChild;
+};
+//#endregion
+export { Transform as A, types_d_exports as B, NineSliceValue as C, Sprite as D, ShapeValue as E, Events as F, InputApi as H, I18nApi as I, Message as L, sprite as M, Argument as N, SpriteOptions as O, Config as P, State as R, NineSlice as S, Shape as T, State$1 as U, Config$1 as V, types_d_exports$1 as W, Style as _, JsxChild as a, defineComponent as b, UiNode as c, popup as d, defineTokens as f, ResolvedStyle as g, IsFlags as h, Finding as i, TransformValue as j, SpriteValue as k, Box as l, UiIntrinsicElements as m, ElementChange as n, JsxState as o, IntrinsicElementsFor as p, ElementMotion as r, PopupComponent as s, DescriptionNode as t, LocalWrite as u, StylesState as v, Parent as w, Display as x, WhenFlags as y, TypedTr as z };