@yagejs-addons/dialogue 0.1.0 → 0.2.0

package/dist/presenters.js

@@ -0,0 +1,2920 @@
+import {
+  EMPTY_PARSED,
+  LineReveal,
+  splitGraphemes
+} from "./chunk-CU47RPEB.js";
+import {
+  __name
+} from "./chunk-7QVYU63E.js";
+
+// src/render/DialogueTextView.ts
+import { MathUtils, Transform } from "@yagejs/core";
+import {
+  SplitTextComponent
+} from "@yagejs/renderer";
+
+// src/render/textEffects.ts
+function evaluateEffect(effect, timeMs, phase, out = { dx: 0, dy: 0, scale: 1, tint: void 0 }) {
+  out.dx = 0;
+  out.dy = 0;
+  out.scale = 1;
+  out.tint = void 0;
+  switch (effect) {
+    case "wave":
+      out.dy = Math.sin(timeMs / 260 + phase / 14) * 1.6;
+      break;
+    case "shake":
+      out.dx = pseudoNoise(timeMs, phase) * 1.3;
+      out.dy = pseudoNoise(timeMs, phase + 99) * 1.3;
+      break;
+    case "pulse":
+      out.scale = 1 + 0.09 * Math.sin(timeMs / 220 + phase / 18);
+      break;
+    case "rainbow":
+      out.tint = hsv((timeMs / 18 + phase * 4) % 360, 0.55, 1);
+      break;
+  }
+  return out;
+}
+__name(evaluateEffect, "evaluateEffect");
+function effectDrivesTint(effect) {
+  return effect === "rainbow";
+}
+__name(effectDrivesTint, "effectDrivesTint");
+function pseudoNoise(timeMs, seed) {
+  const t = Math.floor(timeMs / 33);
+  const x = Math.sin(t * 12.9898 + seed * 78.233) * 43758.5453;
+  return x - Math.floor(x) - 0.5;
+}
+__name(pseudoNoise, "pseudoNoise");
+function hsv(h, s, v) {
+  const c = v * s;
+  const hp = h / 60;
+  const x = c * (1 - Math.abs(hp % 2 - 1));
+  let rgb;
+  if (hp < 1) rgb = [c, x, 0];
+  else if (hp < 2) rgb = [x, c, 0];
+  else if (hp < 3) rgb = [0, c, x];
+  else if (hp < 4) rgb = [0, x, c];
+  else if (hp < 5) rgb = [x, 0, c];
+  else rgb = [c, 0, x];
+  const [r, g, b] = rgb;
+  const m = v - c;
+  return Math.round((r + m) * 255) << 16 | Math.round((g + m) * 255) << 8 | Math.round((b + m) * 255);
+}
+__name(hsv, "hsv");
+
+// src/render/DialogueTextView.ts
+var ITALIC_SKEW = -0.21;
+var BOLD_OFFSET = 0.6;
+var DialogueTextView = class {
+  constructor(cfg) {
+    this.cfg = cfg;
+    this.reveal = new LineReveal(cfg.charsPerSec);
+    this.reveal.setCompletionListener(() => this.revealListener?.());
+    this.reveal.setBeatListener((beat) => this.beatListener?.(beat));
+    if (cfg.box) this.setBox(cfg.box.x, cfg.box.y, cfg.box.width);
+  }
+  cfg;
+  static {
+    __name(this, "DialogueTextView");
+  }
+  scene;
+  line;
+  parsed;
+  boxX = 0;
+  boxY = 0;
+  wrapWidth = 200;
+  /** Top-left the split container sits at (box origin). */
+  layoutOriginX = 0;
+  layoutOriginY = 0;
+  /** Optional per-frame origin (a moving NPC's head) for diegetic bubbles. */
+  originProvider;
+  /** `nonSpacePrefix[k]` = count of non-space graphemes among the first `k`. */
+  nonSpacePrefix = new Int32Array(1);
+  /** Non-space glyphs currently visible. */
+  shownCount = -1;
+  /** Headless reveal clock — owns the grapheme cursor, `[pause]` arming, hold +
+   *  per-line + per-run speed, and the fired-once completion. This view keeps
+   *  only the pixi-`SplitText` concerns (glyph prefix mapping + per-glyph style
+   *  fan-out) and maps the clock's grapheme cursor onto them. */
+  reveal;
+  /** Elapsed ms for animated per-glyph EFFECTS (wave/shake/…) — distinct from
+   *  the reveal cursor, which LineReveal owns. */
+  elapsedMs = 0;
+  /** Scratch for {@link evaluateEffect} — one object reused across all glyphs. */
+  effectScratch = { dx: 0, dy: 0, scale: 1, tint: void 0 };
+  /** Reveal-completed listener, registered by the Session through
+   *  {@link setRevealListener} (a private seam, not a public field, so a
+   *  game can't clobber the session's wiring). */
+  revealListener;
+  /** Reveal-beat listener (ticks + inline markers), registered by the Session
+   *  through {@link setBeatListener} — same private-seam discipline. */
+  beatListener;
+  /** Master visibility gate ({@link setVisible}); hides the line WITHOUT
+   *  clearing it, so a hide/show round-trip resumes mid-typewriter. */
+  hidden = false;
+  /** Attach to a scene (host lifecycle). Must run before the first `present`. */
+  mount(scene) {
+    this.scene = scene;
+  }
+  /** Top-left of the text region, in screen px, plus the wrap width. */
+  setBox(x, y, width) {
+    this.boxX = x;
+    this.boxY = y;
+    this.wrapWidth = width;
+  }
+  /**
+   * Make the text track a per-frame origin (a diegetic bubble following an
+   * NPC). The provider returns the top-left the laid-out box should sit at;
+   * pass `undefined` to pin the text (the default box-dialogue behaviour).
+   */
+  setOrigin(provider) {
+    this.originProvider = provider;
+  }
+  /** TextChannel entry point: render + reveal a fully-resolved line. */
+  present(line) {
+    this.show(line.text, line.speed);
+  }
+  /** TextChannel: reveal everything now. */
+  completeReveal() {
+    this.skipToEnd();
+  }
+  /** TextChannel: true once the line is fully revealed. */
+  isRevealComplete() {
+    return this.reveal.isComplete();
+  }
+  /** Hold-to-speed multiplier (1 = normal, e.g. 3 while the skip key is held). */
+  setSpeedMultiplier(m) {
+    this.reveal.setSpeedMultiplier(m);
+  }
+  isRevealing() {
+    return this.reveal.isRevealing();
+  }
+  /**
+   * Show or hide the body text WITHOUT disturbing reveal progress. Toggles
+   * the laid-out split container's visibility; the per-glyph reveal cursor,
+   * timers, and styling are untouched, so a cutscene can hide mid-typewriter and
+   * show again to resume exactly where it left off.
+   */
+  setVisible(visible) {
+    this.hidden = !visible;
+    this.applyHidden();
+  }
+  /** Register the reveal-completed listener. Session-owned (a private seam, not a
+   *  public field a game could clobber); pass `undefined` to clear. */
+  setRevealListener(listener) {
+    this.revealListener = listener;
+  }
+  /** Register the reveal-beat listener (ticks + inline markers). Session-owned;
+   *  pass `undefined` to clear. The clock emits in char order as glyphs reveal. */
+  setBeatListener(listener) {
+    this.beatListener = listener;
+  }
+  /** Build the split for a parsed line and start revealing. */
+  show(parsed, lineSpeed = 1) {
+    this.clearLine();
+    this.parsed = parsed;
+    this.elapsedMs = 0;
+    this.shownCount = -1;
+    if (parsed.length > 0) this.buildLine(parsed);
+    this.reveal.begin(parsed, lineSpeed);
+    this.applyReveal();
+    this.reposition();
+    this.applyHidden();
+  }
+  /** Apply the master visibility gate to the laid-out line — toggles the split
+   *  container, leaving the per-glyph reveal state intact. */
+  applyHidden() {
+    if (this.line) this.line.comp.splitText.visible = !this.hidden;
+  }
+  /** Reveal everything immediately (jump-to-end on a click/tap). */
+  skipToEnd() {
+    this.reveal.complete();
+    this.applyReveal();
+  }
+  update(dt) {
+    if (!this.parsed) return;
+    this.elapsedMs += dt;
+    this.reveal.update(dt);
+    this.applyReveal();
+    this.reposition();
+  }
+  clear() {
+    this.clearLine();
+    this.originProvider = void 0;
+  }
+  /** Per-line teardown (also the first step of `show()`). The reveal clock is
+   *  re-armed by the next `show()` via {@link LineReveal.begin}, so there is no
+   *  reveal state to reset here. */
+  clearLine() {
+    this.line?.entity.destroy();
+    this.line = void 0;
+    this.parsed = void 0;
+    this.shownCount = -1;
+  }
+  /** Permanent teardown. (No measurer nodes to free — SplitText owns layout.) */
+  dispose() {
+    this.clear();
+  }
+  // ── build ───────────────────────────────────────────────────────────────────
+  buildLine(parsed) {
+    if (!this.scene) return;
+    const text = parsed.runs.map((r) => r.text).join("");
+    this.layoutOriginX = this.boxX;
+    this.layoutOriginY = this.boxY;
+    const entity = this.scene.spawn("dlg-line");
+    entity.add(new Transform()).setPosition(this.layoutOriginX, this.layoutOriginY);
+    const comp = entity.add(new SplitTextComponent(this.lineSplitOptions(text)));
+    const chars = comp.chars;
+    const root = comp.splitText;
+    const styles = this.buildRevealTables(parsed);
+    const effectMetas = [];
+    chars.forEach((node, i) => {
+      const style = styles[i] ?? {};
+      node.tint = style.color ?? this.cfg.textColor;
+      node.visible = false;
+      this.applyWeight(node, style);
+      if (style.effect) {
+        effectMetas.push({
+          node,
+          effect: style.effect,
+          baseX: node.position.x,
+          baseY: node.position.y,
+          splitX: localInSplit(node, root).x
+        });
+      }
+    });
+    this.line = { entity, comp, chars, effectMetas };
+  }
+  /**
+   * One grapheme-segmentation pass per line (build-time only — nothing
+   * re-segments per frame), producing both reveal tables:
+   *   - `nonSpacePrefix`: grapheme cursor → count of non-space glyphs shown
+   *   - returned styles: the run-style for each NON-SPACE glyph, in reading
+   *     order (1:1 with SplitText's `chars`, which drops whitespace)
+   * Segmenting per run matches how markup.ts counted `length`/`atChar`, so
+   * the cursor, pauses, and styles all share one basis.
+   */
+  buildRevealTables(parsed) {
+    const styles = [];
+    const prefix = [];
+    let shown = 0;
+    for (const run of parsed.runs) {
+      for (const g of splitGraphemes(run.text)) {
+        prefix.push(shown);
+        if (/\s/.test(g)) continue;
+        shown++;
+        styles.push(run.style);
+      }
+    }
+    prefix.push(shown);
+    this.nonSpacePrefix = Int32Array.from(prefix);
+    return styles;
+  }
+  /**
+   * Apply a run's bold/italic to one glyph. On the bitmap path we must NOT swap
+   * to the baked variant atlas — each atlas has its own `baseLineOffset`, which
+   * lifts/drops a swapped glyph out of line with the regular runs. So we keep the
+   * regular-atlas glyph (baseline intact) and synthesise:
+   *   - italic → shear it in place (`skew.x`)
+   *   - bold   → overlay a 1px-offset copy as a CHILD, so it rides the parent's
+   *              reveal/visibility, tint cascade, skew, and per-frame effects for
+   *              free (no separate bookkeeping).
+   * On the canvas path, real bold/italic of the same family is baseline-safe, so
+   * we just set the style flags.
+   */
+  applyWeight(node, style) {
+    if (this.cfg.bitmapFont) {
+      if (style.italic) node.skew.x = ITALIC_SKEW;
+      if (style.bold) {
+        const Ctor = node.constructor;
+        const dup = new Ctor({ text: node.text, style: node.style });
+        dup.position.set(BOLD_OFFSET, 0);
+        dup.tint = 16777215;
+        node.addChild(dup);
+      }
+      return;
+    }
+    if (style.bold || style.italic) {
+      const s = { fontSize: this.cfg.textSize, fill: 16777215, lineHeight: this.cfg.lineHeight };
+      if (this.cfg.fontFamily) s.fontFamily = this.cfg.fontFamily;
+      if (style.bold) s.fontWeight = "bold";
+      if (style.italic) s.fontStyle = "italic";
+      node.style = s;
+    }
+  }
+  // ── reveal + effects ─────────────────────────────────────────────────────────
+  applyReveal() {
+    if (!this.line) return;
+    const cursor = MathUtils.clamp(Math.floor(this.reveal.revealed), 0, this.nonSpacePrefix.length - 1);
+    const shown = this.nonSpacePrefix[cursor];
+    if (shown === this.shownCount) return;
+    const prev = this.shownCount < 0 ? 0 : this.shownCount;
+    const chars = this.line.chars;
+    const lo = Math.min(prev, shown);
+    const hi = Math.max(prev, shown);
+    for (let i = lo; i < hi; i++) chars[i].visible = i < shown;
+    this.shownCount = shown;
+  }
+  /**
+   * Per-frame placement: follow a moving origin (bubble mode) by moving the
+   * split container's `Transform` — every glyph inherits it — then apply
+   * per-glyph animated effects on top, in the glyph's own (parent) space.
+   * Only effect-bearing glyphs are walked; a static pinned line costs nothing.
+   */
+  reposition() {
+    const line = this.line;
+    if (!line) return;
+    if (this.originProvider) {
+      const o = this.originProvider();
+      line.entity.get(Transform).setPosition(o.x, o.y);
+    }
+    for (const m of line.effectMetas) {
+      if (!m.node.visible) continue;
+      const out = evaluateEffect(m.effect, this.elapsedMs, m.splitX, this.effectScratch);
+      m.node.position.set(m.baseX + out.dx, m.baseY + out.dy);
+      if (out.scale !== 1) m.node.scale.set(out.scale, out.scale);
+      if (effectDrivesTint(m.effect) && out.tint !== void 0) m.node.tint = out.tint;
+    }
+  }
+  // ── node construction ─────────────────────────────────────────────────────────
+  /** Options for the per-line split: regular atlas, wrap to the box, white fill
+   *  (per-glyph `tint` carries the real colour). */
+  lineSplitOptions(text) {
+    const style = {
+      fontSize: this.cfg.textSize,
+      fill: 16777215,
+      wordWrap: true,
+      wordWrapWidth: this.wrapWidth,
+      lineHeight: this.cfg.lineHeight
+    };
+    const font = this.cfg.bitmapFont ?? this.cfg.fontFamily;
+    if (font) style.fontFamily = font;
+    const base = {
+      text,
+      style,
+      layer: this.cfg.layer,
+      visible: true
+    };
+    if (this.cfg.bitmapFont) base.bitmap = true;
+    return base;
+  }
+};
+function localInSplit(node, root) {
+  let x = 0;
+  let y = 0;
+  let n = node;
+  while (n && n !== root) {
+    x += n.position.x;
+    y += n.position.y;
+    n = n.parent ?? void 0;
+  }
+  return { x, y };
+}
+__name(localInSplit, "localInSplit");
+
+// src/render/BubbleTextView.ts
+var BubbleTextView = class extends DialogueTextView {
+  constructor(cfg, layout) {
+    super({
+      ...cfg,
+      // Initial wrap width; updated per line in present() as the bubble widens.
+      box: { x: 0, y: 0, width: 0 }
+    });
+    this.layout = layout;
+  }
+  layout;
+  static {
+    __name(this, "BubbleTextView");
+  }
+  sceneRef;
+  mount(scene) {
+    super.mount(scene);
+    this.sceneRef = scene;
+  }
+  /** Route the missing-actor warning to the engine Logger (the layout owns the
+   *  shared anchor resolver). The base view has no diagnostics of its own. */
+  setDiagnostics(warn) {
+    this.layout.setDiagnostics(warn);
+  }
+  present(line) {
+    const size = this.layout.sizeFor(line);
+    this.setBox(0, 0, this.layout.textWrapWidth(size));
+    const speakerId = line.speaker?.id;
+    this.setOrigin(() => {
+      const anchor = this.sceneRef ? this.layout.anchorFor(this.sceneRef, speakerId) : { x: 0, y: 0 };
+      return this.layout.originFor(anchor, size);
+    });
+    super.present(line);
+  }
+};
+
+// src/render/BoxTextView.ts
+var BoxTextView = class extends DialogueTextView {
+  constructor(cfg, layout) {
+    super({ ...cfg, box: { x: 0, y: 0, width: 0 } });
+    this.layout = layout;
+  }
+  layout;
+  static {
+    __name(this, "BoxTextView");
+  }
+  present(line) {
+    const region = this.layout.textRegion();
+    this.setBox(0, 0, region.width);
+    this.setOrigin(() => {
+      const r = this.layout.textRegion();
+      return { x: r.x, y: r.y };
+    });
+    super.present(line);
+  }
+};
+
+// src/render/layers.ts
+var DIALOGUE_LAYER_FRAME = "dialogue-frame";
+var DIALOGUE_LAYER_TEXT = "dialogue-text";
+var DIALOGUE_LAYER_AVATAR = "dialogue-avatar";
+var DIALOGUE_LAYERS = [
+  { name: DIALOGUE_LAYER_FRAME, order: 1100, space: "screen" },
+  // Avatar between frame and text so a portrait can tuck behind the box edge.
+  { name: DIALOGUE_LAYER_AVATAR, order: 1105, space: "screen" },
+  { name: DIALOGUE_LAYER_TEXT, order: 1110, space: "screen" }
+];
+
+// src/actor/DialogueActor.ts
+import { Component, Transform as Transform2 } from "@yagejs/core";
+
+// src/actor/ActorRegistry.ts
+var ActorRegistry = class {
+  static {
+    __name(this, "ActorRegistry");
+  }
+  actors = /* @__PURE__ */ new Map();
+  register(speaker, actor) {
+    this.actors.set(speaker, actor);
+  }
+  unregister(speaker, actor) {
+    if (this.actors.get(speaker) === actor) this.actors.delete(speaker);
+  }
+  resolve(speaker) {
+    return speaker ? this.actors.get(speaker) : void 0;
+  }
+};
+var registries = /* @__PURE__ */ new WeakMap();
+function actorRegistryFor(scene) {
+  let registry = registries.get(scene);
+  if (!registry) {
+    registry = new ActorRegistry();
+    registries.set(scene, registry);
+  }
+  return registry;
+}
+__name(actorRegistryFor, "actorRegistryFor");
+
+// src/actor/DialogueActor.ts
+var DialogueActor = class extends Component {
+  constructor(opts) {
+    super();
+    this.opts = opts;
+  }
+  opts;
+  static {
+    __name(this, "DialogueActor");
+  }
+  get speaker() {
+    return this.opts.speaker;
+  }
+  onAdd() {
+    actorRegistryFor(this.scene).register(this.opts.speaker, this);
+  }
+  onDestroy() {
+    actorRegistryFor(this.scene).unregister(this.opts.speaker, this);
+  }
+  /** Bubble anchor in world space: the entity position plus the configured offset. */
+  anchorWorld() {
+    const t = this.entity.tryGet(Transform2);
+    const p = t?.position ?? { x: 0, y: 0 };
+    const a = this.opts.anchor ?? { x: 0, y: 0 };
+    return { x: p.x + a.x, y: p.y + a.y };
+  }
+  setExpression(expression) {
+    this.opts.onExpression?.(this.entity, expression);
+  }
+  setSpeaking(speaking) {
+    this.opts.onSpeaking?.(this.entity, speaking);
+  }
+};
+
+// src/render/bubbleAnchor.ts
+var BubbleAnchorResolver = class {
+  /**
+   * @param fallback Ultimate anchor when nothing better is known (a speaker
+   *   never seen and no prior bubble). Defaults to the world origin; a
+   *   pure-bubble bundle that shows narrator lines should point this at its
+   *   camera centre so a speakerless line lands on screen.
+   */
+  constructor(fallback = () => ({ x: 0, y: 0 })) {
+    this.fallback = fallback;
+  }
+  fallback;
+  static {
+    __name(this, "BubbleAnchorResolver");
+  }
+  lastKnown = /* @__PURE__ */ new Map();
+  lastAnchor;
+  warned = /* @__PURE__ */ new Set();
+  warn;
+  /** Wire the diagnostics sink (the controller injects the engine-Logger one). */
+  setDiagnostics(warn) {
+    this.warn = warn;
+  }
+  /**
+   * World anchor for `speakerId`. Live actor → its anchor (caches refreshed).
+   * Missing → last-known for that speaker, else the most recent any-speaker
+   * anchor, else {@link fallback}. Warns at most once per declared speaker id
+   * (per resolver instance); a speakerless line never warns.
+   */
+  resolve(scene, speakerId) {
+    const actor = actorRegistryFor(scene).resolve(speakerId);
+    if (actor) {
+      const anchor = actor.anchorWorld();
+      if (speakerId !== void 0) this.lastKnown.set(speakerId, anchor);
+      this.lastAnchor = anchor;
+      return anchor;
+    }
+    if (speakerId !== void 0 && !this.warned.has(speakerId)) {
+      this.warned.add(speakerId);
+      this.warn?.(
+        `no DialogueActor is registered for speaker "${speakerId}"; anchoring its bubble at the last-known / fallback position. Register a DialogueActor (even on an invisible entity) to place it deliberately.`
+      );
+    }
+    const known = speakerId !== void 0 ? this.lastKnown.get(speakerId) : void 0;
+    return known ?? this.lastAnchor ?? this.fallback();
+  }
+};
+
+// src/render/bubbleSizing.ts
+import { measureWrappedText } from "@yagejs/renderer";
+function bubbleSize(plainText, cfg) {
+  const oneLine = cfg.lineHeight + 2 * cfg.padding;
+  const font = cfg.bitmapFont ?? cfg.fontFamily;
+  const fontOpt = font !== void 0 ? { fontFamily: font } : {};
+  const bitmapOpt = cfg.bitmapFont !== void 0 ? { bitmap: true } : {};
+  const natural = measureWrappedText(plainText, {
+    fontSize: cfg.textSize,
+    lineHeight: cfg.lineHeight,
+    ...fontOpt,
+    ...bitmapOpt
+  });
+  const wantWidth = natural.width + 2 * cfg.padding;
+  if (wantWidth <= cfg.maxWidth) {
+    return {
+      width: Math.max(cfg.minWidth, wantWidth),
+      height: Math.max(cfg.minHeight, oneLine)
+    };
+  }
+  const inner = cfg.maxWidth - 2 * cfg.padding;
+  const wrapped = measureWrappedText(plainText, {
+    fontSize: cfg.textSize,
+    lineHeight: cfg.lineHeight,
+    wordWrapWidth: inner,
+    ...fontOpt,
+    ...bitmapOpt
+  });
+  return {
+    width: cfg.maxWidth,
+    height: Math.max(cfg.minHeight, wrapped.lineCount * cfg.lineHeight + 2 * cfg.padding)
+  };
+}
+__name(bubbleSize, "bubbleSize");
+
+// src/render/BubbleLayout.ts
+var BubbleLayout = class {
+  constructor(cfg) {
+    this.cfg = cfg;
+    this.anchors = new BubbleAnchorResolver(cfg.fallbackAnchor);
+  }
+  cfg;
+  static {
+    __name(this, "BubbleLayout");
+  }
+  anchors;
+  /** One-line memo: the session presents one line to chrome then text, so a
+   *  one-deep cache makes the second `sizeFor` free (no redundant measure pass). */
+  memoLine;
+  memoSize;
+  /** Reserved portrait column for the current line (set by the in-bubble avatar
+   *  before the chrome/text present). */
+  inset;
+  /** The current bubble content size — the say bubble (from {@link sizeFor}) or a
+   *  choice panel (from {@link setChoicePanelSize}). The in-bubble avatar centres
+   *  in this, so it follows whichever is on screen. */
+  active;
+  listeners = [];
+  /** Reserve (or clear with `undefined`) a portrait column inside the bubble.
+   *  The bubble (and a bubble choice panel) then grows to contain it and the
+   *  text/rows reflow to the narrowed column; the avatar sets this per line
+   *  before the chrome/text/choices present. */
+  setPortraitInset(inset) {
+    this.inset = inset;
+    this.memoLine = void 0;
+  }
+  /** The reserved portrait column (or undefined) — a bubble choice presenter
+   *  reads it to reflow its panel around the portrait. */
+  portraitInset() {
+    return this.inset;
+  }
+  /** Register a callback fired when the active bubble content size changes (a
+   *  say line sizes its bubble, or a choice commits its panel) — the in-bubble
+   *  avatar re-places. */
+  onChange(listener) {
+    this.listeners.push(listener);
+  }
+  /** The current bubble content size the avatar centres in (say bubble or choice
+   *  panel). */
+  activeSize() {
+    return this.active;
+  }
+  /** A bubble choice presenter commits its (inset-grown) panel size here so the
+   *  in-bubble avatar follows the panel, not the say bubble. */
+  setChoicePanelSize(size) {
+    this.setActive(size);
+  }
+  setActive(size) {
+    if (this.active && this.active.width === size.width && this.active.height === size.height) return;
+    this.active = size;
+    for (const fn of this.listeners) fn();
+  }
+  /** Inner padding (px) — the presenters position the name/caret/text by it. */
+  get padding() {
+    return this.cfg.padding;
+  }
+  /** Gap between the speaker anchor and the bubble's bottom edge (px). */
+  get offsetY() {
+    return this.cfg.offsetY;
+  }
+  /** Wire the missing-actor warning to the engine Logger (the controller's sink). */
+  setDiagnostics(warn) {
+    this.anchors.setDiagnostics(warn);
+  }
+  /** Outer bubble size to fit this line's text (+ a reserved portrait column,
+   *  if one is registered) — measured once, then memoized for the companion
+   *  presenter's read of the same line. */
+  sizeFor(line) {
+    if (line === this.memoLine && this.memoSize) return this.memoSize;
+    const plain = line.text.runs.map((r) => r.text).join("");
+    const reserve = this.inset?.width ?? 0;
+    const textSize = bubbleSize(plain, {
+      minWidth: this.cfg.minWidth,
+      maxWidth: Math.max(this.cfg.minWidth, this.cfg.maxWidth - reserve),
+      padding: this.cfg.padding,
+      minHeight: this.cfg.height,
+      textSize: this.cfg.textSize,
+      lineHeight: this.cfg.lineHeight,
+      fontFamily: this.cfg.fontFamily,
+      bitmapFont: this.cfg.bitmapFont
+    });
+    const size = {
+      width: textSize.width + reserve,
+      height: Math.max(textSize.height, (this.inset?.height ?? 0) + 2 * this.cfg.padding)
+    };
+    this.memoLine = line;
+    this.memoSize = size;
+    this.setActive(size);
+    return size;
+  }
+  /** Body-text wrap width inside the bubble — the inner width minus the
+   *  reserved portrait column (so the text reflows past an in-bubble avatar). */
+  textWrapWidth(size) {
+    return size.width - 2 * this.cfg.padding - (this.inset?.width ?? 0);
+  }
+  /** World anchor for a speaker: a live {@link DialogueActor}'s head, else the
+   *  last-known / fallback position (and a once-per-speaker warning). Shared by
+   *  all three bubble presenters so they track the same actor. */
+  anchorFor(scene, speakerId) {
+    return this.anchors.resolve(scene, speakerId);
+  }
+  /** Inner top-left a content-sized bubble's body sits at, from the speaker
+   *  anchor + the bubble size (the once-derived origin formula). Shifts past a
+   *  left-side portrait column so the text reflows beside it. */
+  originFor(anchor, size) {
+    let x = anchor.x - size.width / 2 + this.cfg.padding;
+    if (this.inset?.side === "left") x += this.inset.width;
+    return { x, y: anchor.y - (this.cfg.offsetY + size.height) + this.cfg.padding };
+  }
+};
+
+// src/render/BoxLayout.ts
+import { measureWrappedText as measureWrappedText2 } from "@yagejs/renderer";
+var TEXT_GAP = 4;
+function stackChoiceRows(rowHeights, box, padding) {
+  const x = box.x + padding;
+  const width = box.width - 2 * padding;
+  const rects = [];
+  let bottom = box.y + box.height - padding;
+  for (let i = rowHeights.length - 1; i >= 0; i--) {
+    const h = rowHeights[i] ?? 0;
+    bottom -= h;
+    rects[i] = { x, y: bottom, width, height: h };
+  }
+  return rects;
+}
+__name(stackChoiceRows, "stackChoiceRows");
+var BoxLayout = class {
+  constructor(cfg) {
+    this.cfg = cfg;
+    this.frame = this.frameAt("bottom", cfg.box.height);
+  }
+  cfg;
+  static {
+    __name(this, "BoxLayout");
+  }
+  /** Design viewport (the renderer's `virtualSize`) the box is placed within —
+   *  bound at mount via {@link setViewport}. Defaults to a sane size so headless
+   *  use (no renderer) and pre-mount calls still produce a valid frame. */
+  viewW = 800;
+  viewH = 600;
+  insets = /* @__PURE__ */ new Map();
+  listeners = [];
+  /** The committed frame — moved by `meta.position`, grown for a choice. */
+  frame;
+  /** The line currently laid out (for the choice panel's prompt + nameplate). */
+  line;
+  /**
+   * Bind the design viewport (the renderer's `virtualSize`), read at mount, so
+   * the box is a full-width bottom bar at any resolution and `meta.position`
+   * places the frame against the true screen. Recomputes the resting frame.
+   */
+  setViewport(width, height) {
+    this.viewW = width;
+    this.viewH = height;
+    this.commit(this.frameAt(positionOf(this.line), this.cfg.box.height));
+  }
+  /** Register a callback fired when the committed frame changes (a choice grows
+   *  it, or an inset reflows the text) — the chrome redraws, the text re-places. */
+  onChange(listener) {
+    this.listeners.push(listener);
+  }
+  /** The frame rect for the current line (read by the chrome to draw + place). */
+  frameRect() {
+    return this.frame;
+  }
+  /** Inner content width — choice rows wrap to this. Frame minus padding minus
+   *  any registered insets, so choices reflow around an in-box avatar the same
+   *  way the body text does. */
+  contentWidth() {
+    return this.viewW - 2 * this.cfg.box.marginX - 2 * this.cfg.padding - this.insetWidth("left") - this.insetWidth("right");
+  }
+  /** Inner padding between the frame and its contents — an in-box presenter
+   *  aligns its column to this so it sits inside the border, like the text. */
+  padding() {
+    return this.cfg.padding;
+  }
+  /** Lay out a say/prompt line: place the base-height frame at its
+   *  `meta.position`. Commits the frame (firing {@link onChange} if it moved). */
+  layoutLine(line) {
+    this.line = line;
+    this.commit(this.frameAt(positionOf(line), this.cfg.box.height));
+    return this.frame;
+  }
+  /**
+   * Grow the frame to fit a choice: nameplate band + optional prompt + the
+   * rows, capped at the field. Commits the grown frame (firing {@link onChange}
+   * so the chrome/nameplate/prompt follow) and returns the row rects stacked
+   * inside it.
+   */
+  layoutChoicePanel(rowHeights) {
+    const promptH = this.promptHeight();
+    const headH = promptH > 0 ? promptH + this.cfg.choiceGap : 0;
+    const rows = rowHeights.reduce((a, h) => a + h, 0);
+    const content = this.cfg.padding + this.bodyOffset() + headH + rows + this.cfg.padding;
+    const maxH = this.viewH - 2 * this.cfg.box.marginY;
+    const height = Math.min(Math.max(this.cfg.box.height, content), maxH);
+    this.commit(this.frameAt(positionOf(this.line), height));
+    const insetL = this.insetWidth("left");
+    const insetR = this.insetWidth("right");
+    const inner = {
+      x: this.frame.x + insetL,
+      y: this.frame.y,
+      width: this.frame.width - insetL - insetR,
+      height: this.frame.height
+    };
+    return stackChoiceRows(rowHeights, inner, this.cfg.padding);
+  }
+  /** Body-text region inside the current frame: below the nameplate band, inset
+   *  by padding, minus any registered insets (so text reflows around an avatar).
+   *  For a choice, this is the prompt region above the rows. */
+  textRegion() {
+    let x = this.frame.x + this.cfg.padding;
+    let width = this.frame.width - 2 * this.cfg.padding;
+    for (const inset of this.insets.values()) {
+      width -= inset.width;
+      if (inset.side === "left") x += inset.width;
+    }
+    return { x, y: this.frame.y + this.cfg.padding + this.bodyOffset(), width };
+  }
+  /** Top-left of the nameplate inside the current frame. */
+  nameplatePos() {
+    return { x: this.frame.x + this.cfg.padding, y: this.frame.y + this.cfg.padding - 1 };
+  }
+  /** Bottom-right continue-caret position inside the current frame. */
+  caretPos(size) {
+    return {
+      x: this.frame.x + this.frame.width - this.cfg.padding - size.width,
+      y: this.frame.y + this.frame.height - this.cfg.padding - size.height - 1
+    };
+  }
+  /**
+   * Reserve (or clear with `undefined`) a left/right column the body text
+   * reflows around — the avatar-reflow seam. The reference in-box avatar
+   * presenter registers one keyed by its own id. Fires {@link onChange} so a
+   * text view already showing this line reflows.
+   */
+  setInset(key, inset) {
+    const prev = this.insets.get(key);
+    if (inset) this.insets.set(key, inset);
+    else this.insets.delete(key);
+    if (!sameInset(prev, inset)) this.notify();
+  }
+  /** The reserved width on a side (0 if none) — an avatar presenter reads it to
+   *  place itself in the column it reserved. */
+  insetWidth(side) {
+    let w = 0;
+    for (const inset of this.insets.values()) if (inset.side === side) w += inset.width;
+    return w;
+  }
+  /** Distance from the frame top to the body text (nameplate band + gap). */
+  bodyOffset() {
+    return this.cfg.nameSize + TEXT_GAP;
+  }
+  /** Measure the current choice line's prompt (0 when there is none). */
+  promptHeight() {
+    const text = this.line?.text;
+    if (!text || text.length === 0) return 0;
+    const plain = text.runs.map((r) => r.text).join("");
+    const font = this.cfg.bitmapFont ?? this.cfg.fontFamily;
+    const measured = measureWrappedText2(plain, {
+      fontSize: this.cfg.textSize,
+      lineHeight: this.cfg.lineHeight,
+      wordWrapWidth: this.textRegion().width,
+      ...font !== void 0 ? { fontFamily: font } : {},
+      ...this.cfg.bitmapFont !== void 0 ? { bitmap: true } : {}
+    });
+    return measured.height;
+  }
+  /** Place a full-width frame of `height` at `position` within the design
+   *  viewport: `bottom` anchors `marginY` from the bottom edge, `top` mirrors it
+   *  to the top, `center` centres. The width is the viewport minus side margins. */
+  frameAt(position, height) {
+    const { marginX, marginY } = this.cfg.box;
+    let y;
+    if (position === "top") y = marginY;
+    else if (position === "center") y = (this.viewH - height) / 2;
+    else y = this.viewH - marginY - height;
+    return { x: marginX, y, width: this.viewW - 2 * marginX, height };
+  }
+  commit(frame) {
+    if (sameRect(this.frame, frame)) return;
+    this.frame = frame;
+    this.notify();
+  }
+  notify() {
+    for (const fn of this.listeners) fn();
+  }
+};
+function positionOf(line) {
+  const p = line?.meta?.["position"];
+  return p === "top" || p === "center" ? p : "bottom";
+}
+__name(positionOf, "positionOf");
+function sameRect(a, b) {
+  return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
+}
+__name(sameRect, "sameRect");
+function sameInset(a, b) {
+  if (a === void 0 || b === void 0) return a === b;
+  return a.side === b.side && a.width === b.width;
+}
+__name(sameInset, "sameInset");
+
+// src/chrome/DialogueChrome.ts
+import { Transform as Transform3 } from "@yagejs/core";
+import {
+  createNineSlice,
+  GraphicsComponent,
+  RendererKey,
+  TextComponent
+} from "@yagejs/renderer";
+
+// src/factory/theme.ts
+var DEFAULT_CARET_BLINK_MS = 260;
+var DEFAULT_CARET_SIZE = {
+  width: 7,
+  height: 5
+};
+var DEFAULT_CHOICE_GAP = 6;
+var DEFAULT_TAIL_LEAN = { x: -3, y: -2 };
+var CHROME_STYLE_DEFAULT = "default";
+var CHROME_STYLE_NONE = "none";
+function boxFrameStyles(textured) {
+  if (!textured) return void 0;
+  const out = {};
+  for (const [name, style] of Object.entries(textured)) out[name] = style.frame;
+  return out;
+}
+__name(boxFrameStyles, "boxFrameStyles");
+function defaultBubbleFrame(textured) {
+  return textured?.[CHROME_STYLE_DEFAULT]?.bubble;
+}
+__name(defaultBubbleFrame, "defaultBubbleFrame");
+
+// src/chrome/caret.ts
+function caretAlpha(timeMs, blinkMs = DEFAULT_CARET_BLINK_MS) {
+  return 0.35 + 0.65 * (0.5 + 0.5 * Math.sin(timeMs / blinkMs));
+}
+__name(caretAlpha, "caretAlpha");
+function drawCaret(g, color, size = DEFAULT_CARET_SIZE) {
+  const w = size.width;
+  const h = size.height;
+  g.poly([0, 0, w, 0, w / 2, h]).fill({ color, alpha: 1 });
+}
+__name(drawCaret, "drawCaret");
+
+// src/chrome/textOptions.ts
+function makeTextOptions(fonts, text, size, color, layer, anchor = { x: 0, y: 0 }) {
+  const style = { fontSize: size, fill: color };
+  if (fonts.bitmapFont) style.fontFamily = fonts.bitmapFont;
+  else if (fonts.fontFamily) style.fontFamily = fonts.fontFamily;
+  const base = { text, style, layer, anchor };
+  if (fonts.bitmapFont) base.bitmap = true;
+  else if (fonts.resolution !== void 0) base.resolution = fonts.resolution;
+  return base;
+}
+__name(makeTextOptions, "makeTextOptions");
+
+// src/chrome/DialogueChrome.ts
+function resolveActiveFrame(styleKey, styles) {
+  if (styleKey === CHROME_STYLE_NONE) return { kind: "none" };
+  if (styleKey !== void 0 && styles.has(styleKey)) return { kind: "nineSlice", key: styleKey };
+  if (styles.has(CHROME_STYLE_DEFAULT)) return { kind: "nineSlice", key: CHROME_STYLE_DEFAULT };
+  return { kind: "graphics" };
+}
+__name(resolveActiveFrame, "resolveActiveFrame");
+var DialogueChrome = class {
+  constructor(cfg, layout) {
+    this.cfg = cfg;
+    this.layout = layout;
+    this.layout.onChange(() => this.applyGeometry());
+  }
+  cfg;
+  layout;
+  static {
+    __name(this, "DialogueChrome");
+  }
+  frame;
+  frameGfx;
+  /** Separate entity hosting the nine-slice sprites (one per textured style);
+   *  only spawned when {@link DialogueChromeConfig.frameStyles} has entries. Its
+   *  Transform tracks the per-line frame origin so the sprites draw at local 0. */
+  frameTex;
+  frameTexTransform;
+  nineSliceHost;
+  nineSlices = /* @__PURE__ */ new Map();
+  name;
+  indicator;
+  indicatorTime = 0;
+  /** Selected textured-style name from the line's `meta.chrome`, or undefined
+   *  when the line names none. */
+  styleKey;
+  warn;
+  warnedKeys = /* @__PURE__ */ new Set();
+  /** Master gate (from {@link setVisible}); the Session drives it. Hidden at
+   *  mount until a line shows. The name/caret also need their own content
+   *  sub-state — each renders only when shown AND its content is present. */
+  visible = false;
+  nameShown = false;
+  caretShown = false;
+  /** Route the unknown-`meta.chrome` warning to the engine Logger. */
+  setDiagnostics(warn) {
+    this.warn = warn;
+  }
+  mount(scene) {
+    const cfg = this.cfg;
+    const renderer = scene.context.tryResolve(RendererKey);
+    if (renderer) this.layout.setViewport(renderer.virtualSize.width, renderer.virtualSize.height);
+    const frame = scene.spawn("dlg-frame");
+    frame.add(new Transform3()).setPosition(0, 0);
+    this.frameGfx = frame.add(new GraphicsComponent({ layer: cfg.layerFrame }));
+    this.frameGfx.graphics.visible = false;
+    this.frame = frame;
+    const styles = cfg.frameStyles;
+    if (styles && Object.keys(styles).length > 0) {
+      const texEntity = scene.spawn("dlg-frame-tex");
+      this.frameTexTransform = texEntity.add(new Transform3());
+      const host = texEntity.add(new GraphicsComponent({ layer: cfg.layerFrame }));
+      for (const [key, spec] of Object.entries(styles)) {
+        const sprite = createNineSlice({
+          texture: spec.texture,
+          leftWidth: spec.insets.left,
+          topHeight: spec.insets.top,
+          rightWidth: spec.insets.right,
+          bottomHeight: spec.insets.bottom,
+          width: this.layout.frameRect().width,
+          height: this.layout.frameRect().height
+        });
+        sprite.visible = false;
+        host.graphics.addChild(sprite);
+        this.nineSlices.set(key, sprite);
+      }
+      this.frameTex = texEntity;
+      this.nineSliceHost = host;
+    }
+    const nameEntity = scene.spawn("dlg-name");
+    const nameTransform = nameEntity.add(new Transform3());
+    const nameComp = nameEntity.add(
+      new TextComponent(makeTextOptions(cfg, "", cfg.nameSize, cfg.nameColor, cfg.layerText))
+    );
+    this.name = { entity: nameEntity, transform: nameTransform, comp: nameComp };
+    const caretSize = cfg.caret?.size ?? DEFAULT_CARET_SIZE;
+    const ind = scene.spawn("dlg-indicator");
+    const indTransform = ind.add(new Transform3());
+    const indGfx = ind.add(new GraphicsComponent({ layer: cfg.layerFrame }));
+    indGfx.draw((g) => drawCaret(g, cfg.indicatorColor, caretSize));
+    indGfx.graphics.visible = false;
+    this.indicator = { entity: ind, transform: indTransform, gfx: indGfx };
+    this.applyGeometry();
+  }
+  setNameplate(name, color) {
+    if (!this.name) return;
+    this.nameShown = name !== void 0;
+    if (name !== void 0) {
+      this.name.comp.text.style.fill = color ?? this.cfg.nameColor;
+      this.name.comp.setText(name);
+    }
+    this.apply();
+  }
+  setContinueVisible(visible) {
+    this.caretShown = visible;
+    this.indicatorTime = 0;
+    this.apply();
+  }
+  /** Place this line's frame at its `meta.position` and pick its `meta.chrome`
+   *  style. Box only; the bubble ignores both. `undefined` (no line) resets to
+   *  the default look at the resting position. */
+  present(line) {
+    const metaChrome = line?.meta?.["chrome"];
+    this.styleKey = typeof metaChrome === "string" ? metaChrome : void 0;
+    if (this.styleKey !== void 0 && this.styleKey !== CHROME_STYLE_NONE && this.nineSlices.get(this.styleKey) === void 0 && !this.warnedKeys.has(this.styleKey)) {
+      this.warnedKeys.add(this.styleKey);
+      this.warn?.(`unknown meta.chrome style "${this.styleKey}" \u2014 using the default frame`);
+    }
+    this.layout.layoutLine(line);
+    this.applyGeometry();
+    this.apply();
+  }
+  /** Show or hide the whole box. State-preserving — the name/caret content
+   *  sub-state survives, so showing again restores exactly what was up. */
+  setVisible(visible) {
+    this.visible = visible;
+    this.apply();
+  }
+  /** Redraw the frame + reposition the nameplate and caret from the owner's
+   *  current geometry (per line, and when a choice grows the frame). */
+  applyGeometry() {
+    const r = this.layout.frameRect();
+    this.frameGfx?.draw((g) => {
+      g.clear();
+      g.roundRect(r.x, r.y, r.width, r.height, this.cfg.cornerRadius).fill({ color: this.cfg.frameColor, alpha: this.cfg.frameAlpha }).stroke({ color: this.cfg.borderColor, alpha: 1, width: 2 });
+    });
+    if (this.frameTexTransform) this.frameTexTransform.setPosition(r.x, r.y);
+    for (const sprite of this.nineSlices.values()) {
+      sprite.width = r.width;
+      sprite.height = r.height;
+    }
+    if (this.name) {
+      const p = this.layout.nameplatePos();
+      this.name.transform.setPosition(p.x, p.y);
+    }
+    if (this.indicator) {
+      const p = this.layout.caretPos(this.cfg.caret?.size ?? DEFAULT_CARET_SIZE);
+      this.indicator.transform.setPosition(p.x, p.y);
+    }
+  }
+  /** Render each piece = master-visible AND its own content present. */
+  apply() {
+    const active = resolveActiveFrame(this.styleKey, this.nineSlices);
+    if (this.frameGfx) {
+      this.frameGfx.graphics.visible = this.visible && active.kind === "graphics";
+    }
+    if (this.nineSliceHost) {
+      this.nineSliceHost.graphics.visible = this.visible && active.kind === "nineSlice";
+      for (const [key, sprite] of this.nineSlices) {
+        sprite.visible = active.kind === "nineSlice" && active.key === key;
+      }
+    }
+    if (this.name) this.name.comp.text.visible = this.visible && this.nameShown;
+    if (this.indicator) {
+      this.indicator.gfx.graphics.visible = this.visible && this.caretShown;
+    }
+  }
+  update(dt) {
+    const gfx = this.indicator?.gfx.graphics;
+    if (gfx?.visible) {
+      this.indicatorTime += dt;
+      gfx.alpha = caretAlpha(this.indicatorTime, this.cfg.caret?.blinkMs);
+    }
+  }
+  dispose() {
+    this.frame?.destroy();
+    this.frameTex?.destroy();
+    this.name?.entity.destroy();
+    this.indicator?.entity.destroy();
+    this.nineSlices.clear();
+    this.frame = void 0;
+    this.frameTex = void 0;
+    this.frameTexTransform = void 0;
+    this.frameGfx = void 0;
+    this.nineSliceHost = void 0;
+    this.name = void 0;
+    this.indicator = void 0;
+  }
+};
+
+// src/chrome/ChoiceListPresenter.ts
+import { Transform as Transform4 } from "@yagejs/core";
+import { GraphicsComponent as GraphicsComponent2, TextComponent as TextComponent2 } from "@yagejs/renderer";
+
+// src/chrome/choiceRow.ts
+var DISABLED_CHOICE_ALPHA = 0.4;
+function choiceRowLabel(choice) {
+  return choice.disabled && choice.disabledReason ? `${choice.label} (${choice.disabledReason})` : choice.label;
+}
+__name(choiceRowLabel, "choiceRowLabel");
+function firstEnabledIndex(rows) {
+  const i = rows.findIndex((r) => !r.disabled);
+  return i < 0 ? 0 : i;
+}
+__name(firstEnabledIndex, "firstEnabledIndex");
+function clampSelection(position, count) {
+  return Math.min(Math.max(position, 0), count - 1);
+}
+__name(clampSelection, "clampSelection");
+function applyChoiceTint(rows, selected, color, selectedColor) {
+  rows.forEach((row, i) => {
+    const active = i === selected && !row.disabled;
+    row.comp.text.style.fill = active ? selectedColor : color;
+    row.comp.text.alpha = row.disabled ? DISABLED_CHOICE_ALPHA : 1;
+  });
+}
+__name(applyChoiceTint, "applyChoiceTint");
+
+// src/chrome/ChoiceListPresenter.ts
+var DEFAULT_SOFT_MAX_CHOICES = 8;
+var ROW_TEXT_INDENT = 6;
+var ChoiceListPresenter = class {
+  constructor(cfg, layout) {
+    this.cfg = cfg;
+    this.layout = layout;
+  }
+  cfg;
+  layout;
+  static {
+    __name(this, "ChoiceListPresenter");
+  }
+  scene;
+  highlightBar;
+  rows = [];
+  selected = -1;
+  warn;
+  /** Master visibility gate — hides the list WITHOUT clearing it, so a
+   *  hide/show round-trip keeps the rows + selection. */
+  hidden = false;
+  onChoiceChosen;
+  /** Route the soft-cap advisory to the engine Logger. */
+  setDiagnostics(warn) {
+    this.warn = warn;
+  }
+  mount(scene) {
+    this.scene = scene;
+    const hl = scene.spawn("dlg-highlight");
+    hl.add(new Transform4()).setPosition(0, 0);
+    const hlGfx = hl.add(new GraphicsComponent2({ layer: this.cfg.layerFrame }));
+    this.highlightBar = { entity: hl, gfx: hlGfx };
+  }
+  // Screen-space box list — ignores the choice context (the box frame is its
+  // backing; routing is the composite's job).
+  present(choices) {
+    this.clear();
+    if (!this.scene) return;
+    const cfg = this.cfg;
+    const gap = cfg.choiceGap ?? DEFAULT_CHOICE_GAP;
+    const softMax = cfg.softMaxChoices ?? DEFAULT_SOFT_MAX_CHOICES;
+    if (choices.length > softMax) {
+      this.warn?.(
+        `choice list: ${choices.length} options exceeds the soft max of ${softMax} \u2014 the list grows to fit, but a shorter menu (or a sub-menu) reads better`
+      );
+    }
+    const innerWidth = this.layout.contentWidth();
+    const wrapWidth = innerWidth - ROW_TEXT_INDENT - 2;
+    const built = choices.map((choice) => {
+      const entity = this.scene.spawn("dlg-choice");
+      entity.add(new Transform4());
+      const comp = entity.add(new TextComponent2(this.textOptions(choiceRowLabel(choice), wrapWidth)));
+      comp.text.visible = true;
+      const slotHeight = Math.ceil(comp.text.height) + gap;
+      return { entity, comp, disabled: choice.disabled ?? false, slotHeight };
+    });
+    const rects = this.layout.layoutChoicePanel(built.map((b) => b.slotHeight));
+    this.rows = built.map((b, i) => {
+      const rect = rects[i] ?? { x: 0, y: 0, width: innerWidth, height: b.slotHeight };
+      b.entity.get(Transform4).setPosition(rect.x + ROW_TEXT_INDENT, rect.y);
+      return { entity: b.entity, comp: b.comp, disabled: b.disabled, rect };
+    });
+    this.highlightAt(firstEnabledIndex(this.rows));
+    this.applyHidden();
+  }
+  highlight(position) {
+    this.highlightAt(position);
+  }
+  /** Show or hide the list without clearing it — state-preserving. */
+  setVisible(visible) {
+    this.hidden = !visible;
+    this.applyHidden();
+  }
+  /** Render = rows present AND not hidden. Disabled rows still show (greyed). */
+  applyHidden() {
+    for (const row of this.rows) row.comp.text.visible = !this.hidden;
+    if (this.highlightBar) {
+      const onEnabled = this.selected >= 0 && !this.rows[this.selected]?.disabled;
+      this.highlightBar.gfx.graphics.visible = !this.hidden && onEnabled;
+    }
+  }
+  /** {@link PointerChoiceTarget}: which row (if any) a screen point falls in —
+   *  from the same grown rects the rows are drawn at. */
+  choiceAtPoint(x, y) {
+    for (let i = 0; i < this.rows.length; i++) {
+      const r = this.rows[i]?.rect;
+      if (r && x >= r.x && x <= r.x + r.width && y >= r.y && y <= r.y + r.height) return i;
+    }
+    return void 0;
+  }
+  clear() {
+    for (const row of this.rows) row.entity.destroy();
+    this.rows = [];
+    this.selected = -1;
+    this.highlightBar?.gfx.draw((g) => g.clear());
+  }
+  dispose() {
+    this.clear();
+    this.highlightBar?.entity.destroy();
+    this.highlightBar = void 0;
+  }
+  highlightAt(position) {
+    if (this.rows.length === 0) return;
+    this.selected = clampSelection(position, this.rows.length);
+    applyChoiceTint(this.rows, this.selected, this.cfg.choiceColor, this.cfg.choiceSelectedColor);
+    this.drawHighlight();
+  }
+  drawHighlight() {
+    if (!this.highlightBar || this.selected < 0) return;
+    const row = this.rows[this.selected];
+    if (!row || row.disabled) {
+      this.highlightBar.gfx.draw((g) => g.clear());
+      return;
+    }
+    const r = row.rect;
+    this.highlightBar.gfx.draw((g) => {
+      g.clear();
+      g.roundRect(r.x, r.y, r.width, r.height - 1, 3).fill({
+        color: this.cfg.highlightColor,
+        alpha: 0.3
+      });
+    });
+  }
+  textOptions(text, wrapWidth) {
+    const opts = makeTextOptions(
+      this.cfg,
+      text,
+      this.cfg.choiceSize,
+      this.cfg.choiceColor,
+      this.cfg.layerText
+    );
+    opts.style.wordWrap = true;
+    opts.style.wordWrapWidth = wrapWidth;
+    return opts;
+  }
+};
+
+// src/chrome/BubbleChrome.ts
+import { Transform as Transform5 } from "@yagejs/core";
+import {
+  createNineSlice as createNineSlice2,
+  GraphicsComponent as GraphicsComponent3,
+  TextComponent as TextComponent3
+} from "@yagejs/renderer";
+var BubbleChrome = class {
+  constructor(cfg, layout) {
+    this.cfg = cfg;
+    this.layout = layout;
+    this.currentWidth = 0;
+    this.currentHeight = 0;
+  }
+  cfg;
+  layout;
+  static {
+    __name(this, "BubbleChrome");
+  }
+  scene;
+  root;
+  gfx;
+  transform;
+  /** Nine-slice body sprite (child of {@link gfx}) when textured; resized per
+   *  line. The tail stays a drawn triangle on {@link gfx}. */
+  bubbleSlice;
+  name;
+  nameTransform;
+  caret;
+  caretTransform;
+  caretTime = 0;
+  /** Current (content-sized) bubble size; recomputed per line from the layout. */
+  currentWidth;
+  currentHeight;
+  // Master visibility + content sub-state; rendered = visible && hasLine.
+  visible = false;
+  // master (from setVisible)
+  hasLine = false;
+  // a line is up (from present)
+  nameShown = false;
+  // the speaker has a name to show
+  caretShown = false;
+  // continue caret requested
+  /** Speaker id of the line on screen — re-resolved each frame by `follow()` so
+   *  the bubble tracks a live actor and falls back when one is missing. */
+  speakerId;
+  /** Route the missing-actor warning to the engine Logger (the layout owns the
+   *  shared anchor resolver). */
+  setDiagnostics(warn) {
+    this.layout.setDiagnostics(warn);
+  }
+  mount(scene) {
+    this.scene = scene;
+    const c = this.cfg;
+    const root = scene.spawn("dlg-bubble");
+    this.transform = root.add(new Transform5());
+    this.gfx = root.add(new GraphicsComponent3({ layer: c.layer }));
+    if (c.frame) {
+      const slice = createNineSlice2({
+        texture: c.frame.texture,
+        leftWidth: c.frame.insets.left,
+        topHeight: c.frame.insets.top,
+        rightWidth: c.frame.insets.right,
+        bottomHeight: c.frame.insets.bottom,
+        width: this.currentWidth,
+        height: this.currentHeight
+      });
+      this.gfx.graphics.addChild(slice);
+      this.bubbleSlice = slice;
+    }
+    this.drawBubble();
+    this.gfx.graphics.visible = false;
+    const nameEntity = scene.spawn("dlg-bubble-name");
+    this.nameTransform = nameEntity.add(new Transform5());
+    this.name = nameEntity.add(
+      new TextComponent3(makeTextOptions(c, "", c.nameSize, c.nameColor, c.layer))
+    );
+    this.name.text.visible = false;
+    const caretEntity = scene.spawn("dlg-bubble-caret");
+    this.caretTransform = caretEntity.add(new Transform5());
+    this.caret = caretEntity.add(new GraphicsComponent3({ layer: c.layer }));
+    this.caret.draw((g) => drawCaret(g, c.indicatorColor, c.caret?.size));
+    this.caret.graphics.visible = false;
+    this.root = root;
+  }
+  /** Re-anchor to the line's speaker, grow to fit the text, and reveal. The
+   *  bubble stays visible even when the speaker has no live actor — the layout
+   *  anchors it at the last-known / fallback position instead of vanishing. */
+  present(line) {
+    this.hasLine = line !== void 0;
+    this.speakerId = line?.speaker?.id;
+    if (line) {
+      const size = this.layout.sizeFor(line);
+      this.currentWidth = size.width;
+      this.currentHeight = size.height;
+      this.drawBubble();
+      const label = line.speaker?.name;
+      this.nameShown = label !== void 0 && label.length > 0;
+      if (label && this.name) {
+        this.name.text.style.fill = line.speaker?.color ?? this.cfg.nameColor;
+        this.name.setText(label);
+      }
+    } else {
+      this.nameShown = false;
+    }
+    this.apply();
+    this.follow();
+  }
+  setNameplate(name) {
+    if (name === void 0) {
+      this.nameShown = false;
+      this.apply();
+    }
+  }
+  setContinueVisible(visible) {
+    this.caretShown = visible;
+    this.caretTime = 0;
+    this.apply();
+  }
+  /** Show or hide the whole bubble — state-preserving: the line, name, and
+   *  caret content survive a hide, so showing again restores them in place
+   *  (used by a composite chrome to hide the bubble while a box line plays). */
+  setVisible(visible) {
+    this.visible = visible;
+    this.apply();
+  }
+  /** Render each piece = master-visible AND a line is up AND its content present. */
+  apply() {
+    if (this.gfx) this.gfx.graphics.visible = this.visible && this.hasLine;
+    if (this.name) {
+      this.name.text.visible = this.visible && this.hasLine && this.nameShown;
+    }
+    if (this.caret) {
+      this.caret.graphics.visible = this.visible && this.hasLine && this.caretShown;
+    }
+  }
+  update(dt) {
+    this.follow();
+    const gfx = this.caret?.graphics;
+    if (gfx?.visible) {
+      this.caretTime += dt;
+      gfx.alpha = caretAlpha(this.caretTime, this.cfg.caret?.blinkMs);
+    }
+  }
+  dispose() {
+    this.root?.destroy();
+    this.name?.entity.destroy();
+    this.caret?.entity.destroy();
+    this.root = void 0;
+    this.gfx = void 0;
+    this.transform = void 0;
+    this.bubbleSlice = void 0;
+    this.name = void 0;
+    this.nameTransform = void 0;
+    this.caret = void 0;
+    this.caretTransform = void 0;
+  }
+  /** Move the bubble + name + caret to sit above the speaker — its live actor,
+   *  or the last-known / fallback anchor when the actor is missing. */
+  follow() {
+    if (!this.scene || !this.hasLine) return;
+    const a = this.layout.anchorFor(this.scene, this.speakerId);
+    const c = this.cfg;
+    const padding = this.layout.padding;
+    const offsetY = this.layout.offsetY;
+    const w = this.currentWidth;
+    const h = this.currentHeight;
+    const caretSize = c.caret?.size ?? DEFAULT_CARET_SIZE;
+    this.transform?.setPosition(a.x, a.y);
+    this.nameTransform?.setPosition(a.x - w / 2 + padding, a.y - (offsetY + h) - c.nameSize - 1);
+    this.caretTransform?.setPosition(
+      a.x + w / 2 - padding - caretSize.width,
+      a.y - offsetY - padding - caretSize.height + 3
+    );
+  }
+  drawBubble() {
+    const c = this.cfg;
+    const offsetY = this.layout.offsetY;
+    const w = this.currentWidth;
+    const h = this.currentHeight;
+    const L = -w / 2;
+    const R = w / 2;
+    const T = -(offsetY + h);
+    const B = -offsetY;
+    const half = c.tail;
+    const lean = c.tailLean ?? DEFAULT_TAIL_LEAN;
+    const tipX = lean.x;
+    const tipY = lean.y;
+    this.gfx?.graphics.clear();
+    if (this.bubbleSlice) {
+      this.bubbleSlice.position.set(L, T);
+      this.bubbleSlice.width = w;
+      this.bubbleSlice.height = h;
+      this.gfx?.draw((g) => {
+        g.poly([-half, B, half, B, tipX, tipY]).fill({ color: c.frameColor, alpha: c.frameAlpha });
+      });
+      return;
+    }
+    const r = Math.max(0, Math.min(c.cornerRadius, w / 2 - 1, h / 2 - 1));
+    this.gfx?.draw((g) => {
+      g.moveTo(L + r, T).lineTo(R - r, T).arcTo(R, T, R, T + r, r).lineTo(R, B - r).arcTo(R, B, R - r, B, r).lineTo(half, B).lineTo(tipX, tipY).lineTo(-half, B).lineTo(L + r, B).arcTo(L, B, L, B - r, r).lineTo(L, T + r).arcTo(L, T, L + r, T, r).closePath().fill({ color: c.frameColor, alpha: c.frameAlpha }).stroke({ color: c.borderColor, alpha: 1, width: 2 });
+    });
+  }
+};
+
+// src/chrome/BubbleChoicePresenter.ts
+import { Transform as Transform6 } from "@yagejs/core";
+import {
+  GraphicsComponent as GraphicsComponent4,
+  TextComponent as TextComponent4
+} from "@yagejs/renderer";
+var BubbleChoicePresenter = class {
+  constructor(cfg, layout) {
+    this.cfg = cfg;
+    this.layout = layout;
+  }
+  cfg;
+  layout;
+  static {
+    __name(this, "BubbleChoicePresenter");
+  }
+  pointerSpace = "world";
+  scene;
+  bg;
+  highlightBar;
+  prompt;
+  rows = [];
+  selected = -1;
+  /** Master visibility gate — state-preserving hide/show. */
+  hidden = false;
+  onChoiceChosen;
+  /** Route the missing-actor warning to the engine Logger (the layout owns the
+   *  shared anchor resolver). */
+  setDiagnostics(warn) {
+    this.layout.setDiagnostics(warn);
+  }
+  /** This panel is self-contained (own bg + prompt header), so it owns the
+   *  prompt — the Session hides the chrome/body prompt for these choices. */
+  ownsPrompt() {
+    return true;
+  }
+  mount(scene) {
+    this.scene = scene;
+    const bg = scene.spawn("dlg-bchoice-bg");
+    bg.add(new Transform6()).setPosition(0, 0);
+    this.bg = { entity: bg, gfx: bg.add(new GraphicsComponent4({ layer: this.cfg.layer })) };
+    const hl = scene.spawn("dlg-bchoice-hl");
+    hl.add(new Transform6()).setPosition(0, 0);
+    this.highlightBar = { entity: hl, gfx: hl.add(new GraphicsComponent4({ layer: this.cfg.layer })) };
+  }
+  present(choices, context) {
+    this.clear();
+    if (!this.scene) return;
+    const c = this.cfg;
+    const a = this.layout.anchorFor(this.scene, context?.speaker?.id);
+    const innerW = c.width - 2 * c.padding;
+    const inset = this.layout.portraitInset();
+    const reserve = inset?.width ?? 0;
+    const panelWidth = c.width + reserve;
+    const promptStr = context?.prompt && context.prompt.length > 0 ? context.prompt.runs.map((r) => r.text).join("") : "";
+    let promptH = 0;
+    if (promptStr) {
+      const e = this.scene.spawn("dlg-bchoice-prompt");
+      e.add(new Transform6());
+      const comp = e.add(new TextComponent4(this.textOptions(promptStr, c.textColor, innerW)));
+      comp.text.visible = true;
+      promptH = Math.ceil(comp.text.height);
+      this.prompt = { entity: e, comp };
+    }
+    const n = choices.length;
+    const gap = c.choiceGap ?? DEFAULT_CHOICE_GAP;
+    const lineH = c.choiceSize + gap;
+    const headH = promptH > 0 ? promptH + gap : 0;
+    const contentH = c.padding + headH + n * lineH + c.padding;
+    const panelH = Math.max(contentH, (inset?.height ?? 0) + 2 * c.padding);
+    const left = a.x - panelWidth / 2;
+    const bottom = a.y - c.offsetY;
+    const top = bottom - panelH;
+    const contentX = left + c.padding + (inset?.side === "left" ? reserve : 0);
+    this.drawPanel(left, top, panelWidth, panelH, a.x, bottom);
+    this.prompt?.entity.get(Transform6).setPosition(contentX, top + c.padding);
+    const optionsTop = top + c.padding + headH;
+    choices.forEach((choice, i) => {
+      const rowY = optionsTop + i * lineH;
+      const entity = this.scene.spawn("dlg-bchoice");
+      entity.add(new Transform6()).setPosition(contentX + 4, rowY);
+      const comp = entity.add(new TextComponent4(this.textOptions(choiceRowLabel(choice), c.choiceColor)));
+      comp.text.visible = true;
+      this.rows.push({
+        entity,
+        comp,
+        x0: contentX,
+        x1: contentX + innerW,
+        y0: rowY,
+        y1: rowY + lineH,
+        disabled: choice.disabled ?? false
+      });
+    });
+    this.highlight(firstEnabledIndex(this.rows));
+    this.applyHidden();
+    this.layout.setChoicePanelSize({ width: panelWidth, height: panelH });
+  }
+  /** Show or hide the whole panel without clearing it — state-preserving. */
+  setVisible(visible) {
+    this.hidden = !visible;
+    this.applyHidden();
+  }
+  /** Render every piece (bg, prompt, rows, highlight) gated by the master.
+   *  Disabled rows still show (greyed); only the highlight bar is suppressed. */
+  applyHidden() {
+    const shown = !this.hidden;
+    if (this.bg) this.bg.gfx.graphics.visible = shown && this.rows.length > 0;
+    if (this.highlightBar) {
+      const onEnabled = this.selected >= 0 && !this.rows[this.selected]?.disabled;
+      this.highlightBar.gfx.graphics.visible = shown && onEnabled;
+    }
+    if (this.prompt) this.prompt.comp.text.visible = shown;
+    for (const row of this.rows) row.comp.text.visible = shown;
+  }
+  highlight(position) {
+    if (this.rows.length === 0) return;
+    this.selected = clampSelection(position, this.rows.length);
+    applyChoiceTint(this.rows, this.selected, this.cfg.choiceColor, this.cfg.choiceSelectedColor);
+    this.drawHighlight();
+  }
+  /** {@link ChoicePresenter}: which option a *world* point falls in. */
+  choiceAtPoint(x, y) {
+    for (let i = 0; i < this.rows.length; i++) {
+      const r = this.rows[i];
+      if (x >= r.x0 && x <= r.x1 && y >= r.y0 && y <= r.y1) return i;
+    }
+    return void 0;
+  }
+  clear() {
+    for (const r of this.rows) r.entity.destroy();
+    this.rows = [];
+    this.prompt?.entity.destroy();
+    this.prompt = void 0;
+    this.selected = -1;
+    this.bg?.gfx.draw((g) => g.clear());
+    this.highlightBar?.gfx.draw((g) => g.clear());
+  }
+  dispose() {
+    this.clear();
+    this.bg?.entity.destroy();
+    this.highlightBar?.entity.destroy();
+    this.bg = void 0;
+    this.highlightBar = void 0;
+  }
+  drawPanel(left, top, width, h, tailX, bottom) {
+    const c = this.cfg;
+    this.bg?.gfx.draw((g) => {
+      g.clear();
+      g.roundRect(left, top, width, h, c.cornerRadius).fill({ color: c.frameColor, alpha: c.frameAlpha }).stroke({ color: c.borderColor, alpha: 1, width: 2 });
+      g.poly([tailX - c.tail, bottom, tailX + c.tail, bottom, tailX, bottom + c.tail]).fill({
+        color: c.frameColor,
+        alpha: c.frameAlpha
+      });
+    });
+  }
+  drawHighlight() {
+    const row = this.rows[this.selected];
+    if (!this.highlightBar || !row) return;
+    if (row.disabled) {
+      this.highlightBar.gfx.draw((g) => g.clear());
+      return;
+    }
+    this.highlightBar.gfx.draw((g) => {
+      g.clear();
+      g.roundRect(row.x0, row.y0, row.x1 - row.x0, row.y1 - row.y0 - 1, 3).fill({
+        color: this.cfg.highlightColor,
+        alpha: 0.3
+      });
+    });
+  }
+  textOptions(text, color, wrapWidth) {
+    const opts = makeTextOptions(this.cfg, text, this.cfg.choiceSize, color, this.cfg.layer);
+    if (wrapWidth != null) {
+      opts.style.wordWrap = true;
+      opts.style.wordWrapWidth = wrapWidth;
+    }
+    return opts;
+  }
+};
+
+// src/chrome/RadialChoicePresenter.ts
+import { Transform as Transform7 } from "@yagejs/core";
+import { GraphicsComponent as GraphicsComponent5, TextComponent as TextComponent5 } from "@yagejs/renderer";
+var RadialChoicePresenter = class {
+  constructor(cfg) {
+    this.cfg = cfg;
+  }
+  cfg;
+  static {
+    __name(this, "RadialChoicePresenter");
+  }
+  scene;
+  hub;
+  spokes = [];
+  selected = -1;
+  /** Master visibility gate — state-preserving hide/show. */
+  hidden = false;
+  onChoiceChosen;
+  mount(scene) {
+    this.scene = scene;
+    const hub = scene.spawn("dlg-radial-hub");
+    hub.add(new Transform7()).setPosition(0, 0);
+    this.hub = { entity: hub, gfx: hub.add(new GraphicsComponent5({ layer: this.cfg.layerFrame })) };
+  }
+  present(choices) {
+    this.clear();
+    if (!this.scene) return;
+    const { center: c, radius } = this.cfg;
+    const n = choices.length;
+    choices.forEach((choice, i) => {
+      const angle = -Math.PI / 2 + i / n * Math.PI * 2;
+      const x = c.x + Math.cos(angle) * radius;
+      const y = c.y + Math.sin(angle) * radius;
+      const entity = this.scene.spawn("dlg-radial");
+      entity.add(new Transform7()).setPosition(x, y);
+      const comp = entity.add(
+        new TextComponent5(
+          makeTextOptions(
+            this.cfg,
+            choice.label,
+            this.cfg.choiceSize,
+            this.cfg.choiceColor,
+            this.cfg.layerText,
+            { x: 0.5, y: 0.5 }
+          )
+        )
+      );
+      comp.text.visible = true;
+      this.spokes.push({ entity, comp, x, y, disabled: choice.disabled ?? false });
+    });
+    this.highlight(firstEnabledIndex(this.spokes));
+    this.applyHidden();
+  }
+  highlight(position) {
+    if (this.spokes.length === 0) return;
+    this.selected = clampSelection(position, this.spokes.length);
+    applyChoiceTint(this.spokes, this.selected, this.cfg.choiceColor, this.cfg.choiceSelectedColor);
+    this.spokes.forEach((s, i) => {
+      const scale = i === this.selected && !s.disabled ? 1.15 : 1;
+      s.entity.get(Transform7).setScale(scale, scale);
+    });
+    this.drawHub();
+  }
+  /** Show or hide the wheel without clearing it — state-preserving. */
+  setVisible(visible) {
+    this.hidden = !visible;
+    this.applyHidden();
+  }
+  applyHidden() {
+    for (const s of this.spokes) s.comp.text.visible = !this.hidden;
+    if (this.hub) this.hub.gfx.graphics.visible = !this.hidden && this.spokes.length > 0;
+  }
+  /** {@link ChoicePresenter}: nearest spoke within a small radius. */
+  choiceAtPoint(x, y) {
+    let best;
+    let bestD = 22;
+    this.spokes.forEach((s, i) => {
+      const d = Math.hypot(s.x - x, s.y - y);
+      if (d < bestD) {
+        bestD = d;
+        best = i;
+      }
+    });
+    return best;
+  }
+  clear() {
+    for (const s of this.spokes) s.entity.destroy();
+    this.spokes = [];
+    this.selected = -1;
+    this.hub?.gfx.draw((g) => g.clear());
+  }
+  dispose() {
+    this.clear();
+    this.hub?.entity.destroy();
+    this.hub = void 0;
+  }
+  drawHub() {
+    if (!this.hub) return;
+    const { center: c } = this.cfg;
+    const sel = this.spokes[this.selected];
+    const active = sel && !sel.disabled ? sel : void 0;
+    this.hub.gfx.draw((g) => {
+      g.clear();
+      if (active) {
+        g.moveTo(c.x, c.y).lineTo(active.x, active.y).stroke({ color: this.cfg.choiceSelectedColor, width: 2, alpha: 0.7 });
+      }
+      g.circle(c.x, c.y, 4).fill({ color: this.cfg.hubColor, alpha: 1 });
+    });
+  }
+};
+
+// src/composite/route.ts
+function routeWithActor(line, hasActor) {
+  const speaker = line?.speaker;
+  if (speaker === void 0) return "box";
+  const view = line?.view;
+  if (view === "bubble") return "bubble";
+  if (view === "box") return "box";
+  return hasActor(speaker.id) ? "bubble" : "box";
+}
+__name(routeWithActor, "routeWithActor");
+function makeDefaultRoute() {
+  let hasActor = /* @__PURE__ */ __name(() => false, "hasActor");
+  return {
+    bind(scene) {
+      const registry = actorRegistryFor(scene);
+      hasActor = /* @__PURE__ */ __name((id) => registry.resolve(id) !== void 0, "hasActor");
+    },
+    route: /* @__PURE__ */ __name((line) => routeWithActor(line, hasActor), "route")
+  };
+}
+__name(makeDefaultRoute, "makeDefaultRoute");
+function fixedRoute(route) {
+  return { route, bind() {
+  } };
+}
+__name(fixedRoute, "fixedRoute");
+function choiceAsLine(context) {
+  return {
+    view: context?.view,
+    speaker: context?.speaker,
+    meta: context?.meta,
+    text: context?.prompt ?? EMPTY_PARSED,
+    speed: 1
+  };
+}
+__name(choiceAsLine, "choiceAsLine");
+function lineRoutesToBubble(route, line) {
+  return route(line) === "bubble";
+}
+__name(lineRoutesToBubble, "lineRoutesToBubble");
+function choiceRoutesToBubble(route, context) {
+  return route(choiceAsLine(context)) === "bubble";
+}
+__name(choiceRoutesToBubble, "choiceRoutesToBubble");
+
+// src/composite/CompositeTextPresenter.ts
+var CompositeTextPresenter = class {
+  constructor(box, bubble, routing = makeDefaultRoute()) {
+    this.box = box;
+    this.bubble = bubble;
+    this.routing = routing;
+    this.box.setRevealListener(() => this.fireReveal(this.box));
+    this.bubble.setRevealListener(() => this.fireReveal(this.bubble));
+    this.box.setBeatListener((beat) => this.fireBeat(this.box, beat));
+    this.bubble.setBeatListener((beat) => this.fireBeat(this.bubble, beat));
+  }
+  box;
+  bubble;
+  routing;
+  static {
+    __name(this, "CompositeTextPresenter");
+  }
+  active;
+  revealListener;
+  beatListener;
+  /** Master visibility gate from the Session's setVisible. */
+  visible = false;
+  /** Register the Session's reveal-completed listener. */
+  setRevealListener(listener) {
+    this.revealListener = listener;
+  }
+  /** Register the Session's reveal-beat listener (ticks + inline markers). */
+  setBeatListener(listener) {
+    this.beatListener = listener;
+  }
+  fireReveal(view) {
+    if (this.active === view) this.revealListener?.();
+  }
+  fireBeat(view, beat) {
+    if (this.active === view) this.beatListener?.(beat);
+  }
+  setDiagnostics(warn) {
+    this.box.setDiagnostics?.(warn);
+    this.bubble.setDiagnostics?.(warn);
+  }
+  mount(scene) {
+    this.routing.bind(scene);
+    this.box.mount(scene);
+    this.bubble.mount(scene);
+  }
+  present(line) {
+    const target = lineRoutesToBubble(this.routing.route, line) ? this.bubble : this.box;
+    const other = target === this.box ? this.bubble : this.box;
+    other.clear();
+    this.active = target;
+    target.present(line);
+    target.setVisible(this.visible);
+  }
+  /** Show/hide the body text — forwarded to both views (the inactive one is
+   *  cleared, so its setVisible is a no-op); state-preserving on the active. */
+  setVisible(visible) {
+    this.visible = visible;
+    this.box.setVisible(visible);
+    this.bubble.setVisible(visible);
+  }
+  completeReveal() {
+    this.active?.completeReveal();
+  }
+  isRevealComplete() {
+    return this.active ? this.active.isRevealComplete() : true;
+  }
+  isRevealing() {
+    return this.active ? this.active.isRevealing() : false;
+  }
+  setSpeedMultiplier(multiplier) {
+    this.box.setSpeedMultiplier(multiplier);
+    this.bubble.setSpeedMultiplier(multiplier);
+  }
+  update(dt) {
+    this.box.update(dt);
+    this.bubble.update(dt);
+  }
+  clear() {
+    this.box.clear();
+    this.bubble.clear();
+    this.active = void 0;
+  }
+  dispose() {
+    this.box.dispose();
+    this.bubble.dispose();
+  }
+};
+
+// src/composite/CompositeChrome.ts
+var CompositeChrome = class {
+  constructor(box, bubble, routing = makeDefaultRoute()) {
+    this.box = box;
+    this.bubble = bubble;
+    this.routing = routing;
+  }
+  box;
+  bubble;
+  routing;
+  static {
+    __name(this, "CompositeChrome");
+  }
+  active;
+  pendingName = {};
+  pendingContinue = false;
+  /** Master gate from the Session's setVisible — composed with the active
+   *  variant's own content state. Hidden at mount. */
+  visible = false;
+  mount(scene) {
+    this.routing.bind(scene);
+    this.box.mount(scene);
+    this.bubble.mount(scene);
+    this.box.setVisible(false);
+    this.bubble.setVisible(false);
+  }
+  setDiagnostics(warn) {
+    this.box.setDiagnostics?.(warn);
+    this.bubble.setDiagnostics?.(warn);
+  }
+  setNameplate(name, color) {
+    this.pendingName = { name, color };
+    this.active?.setNameplate(name, color);
+  }
+  setContinueVisible(visible) {
+    this.pendingContinue = visible;
+    this.active?.setContinueVisible(visible);
+  }
+  present(line) {
+    if (line === void 0) {
+      this.active?.present?.(void 0);
+      return;
+    }
+    const target = lineRoutesToBubble(this.routing.route, line) ? this.bubble : this.box;
+    const other = target === this.box ? this.bubble : this.box;
+    other.setVisible(false);
+    this.active = target;
+    target.setNameplate(this.pendingName.name, this.pendingName.color);
+    target.setContinueVisible(this.pendingContinue);
+    target.present?.(line);
+    target.setVisible(this.visible);
+  }
+  /** Show/hide the chrome. On show, restore ONLY the active variant
+   *  and re-apply the buffered caret; the other stays hidden. On hide, hide both
+   *  but RETAIN `active` so the next show brings back the right one. */
+  setVisible(visible) {
+    this.visible = visible;
+    if (visible) {
+      if (this.active) {
+        const other = this.active === this.box ? this.bubble : this.box;
+        other.setVisible(false);
+        this.active.setContinueVisible(this.pendingContinue);
+        this.active.setVisible(true);
+      }
+    } else {
+      this.box.setVisible(false);
+      this.bubble.setVisible(false);
+    }
+  }
+  update(dt) {
+    this.box.update(dt);
+    this.bubble.update(dt);
+  }
+  dispose() {
+    this.box.dispose();
+    this.bubble.dispose();
+  }
+};
+
+// src/composite/CompositeChoicePresenter.ts
+var CompositeChoicePresenter = class {
+  constructor(box, bubble, routing = makeDefaultRoute()) {
+    this.box = box;
+    this.bubble = bubble;
+    this.routing = routing;
+    this.box.onChoiceChosen = (p) => this.onChoiceChosen?.(p);
+    this.bubble.onChoiceChosen = (p) => this.onChoiceChosen?.(p);
+  }
+  box;
+  bubble;
+  routing;
+  static {
+    __name(this, "CompositeChoicePresenter");
+  }
+  active;
+  /** Master visibility gate from the Session's setVisible. */
+  visible = false;
+  onChoiceChosen;
+  /** The active list's pointer space (so the binding hit-tests correctly). */
+  get pointerSpace() {
+    return this.active?.pointerSpace ?? "screen";
+  }
+  setDiagnostics(warn) {
+    this.box.setDiagnostics?.(warn);
+    this.bubble.setDiagnostics?.(warn);
+  }
+  /** Routes to the variant this choice will use, so the Session knows whether
+   *  to suppress its chrome/body prompt before `present` picks the active one. */
+  ownsPrompt(context) {
+    const target = choiceRoutesToBubble(this.routing.route, context) ? this.bubble : this.box;
+    return target.ownsPrompt?.(context) ?? false;
+  }
+  mount(scene) {
+    this.routing.bind(scene);
+    this.box.mount(scene);
+    this.bubble.mount(scene);
+  }
+  present(choices, context) {
+    const target = choiceRoutesToBubble(this.routing.route, context) ? this.bubble : this.box;
+    const other = target === this.box ? this.bubble : this.box;
+    other.clear();
+    this.active = target;
+    target.present(choices, context);
+    target.setVisible(this.visible);
+  }
+  /** Show/hide the choices — forwarded to both (the inactive one is
+   *  cleared, so its setVisible is a no-op); state-preserving on the active. */
+  setVisible(visible) {
+    this.visible = visible;
+    this.box.setVisible(visible);
+    this.bubble.setVisible(visible);
+  }
+  highlight(position) {
+    this.active?.highlight(position);
+  }
+  choiceAtPoint(x, y) {
+    return this.active?.choiceAtPoint?.(x, y);
+  }
+  clear() {
+    this.box.clear();
+    this.bubble.clear();
+    this.active = void 0;
+  }
+  dispose() {
+    this.box.dispose();
+    this.bubble.dispose();
+  }
+};
+
+// src/composite/CompositeAvatarPresenter.ts
+var CompositeAvatarPresenter = class {
+  constructor(box, bubble, routing) {
+    this.box = box;
+    this.bubble = bubble;
+    this.routing = routing;
+  }
+  box;
+  bubble;
+  routing;
+  static {
+    __name(this, "CompositeAvatarPresenter");
+  }
+  mount(scene) {
+    this.routing.bind(scene);
+    this.box.mount(scene);
+    this.bubble.mount(scene);
+  }
+  setSpeaker(speaker) {
+    this.box.setSpeaker(speaker);
+    this.bubble.setSpeaker(speaker);
+  }
+  setExpression(expression) {
+    this.box.setExpression(expression);
+    this.bubble.setExpression(expression);
+  }
+  /** Forward an inline reveal marker to both (cheap + idempotent, like
+   *  setExpression — the inactive side's setExpression no-ops with no speaker). */
+  marker(marker) {
+    this.box.marker?.(marker);
+    this.bubble.marker?.(marker);
+  }
+  setSpeaking(speaking) {
+    this.box.setSpeaking(speaking);
+    this.bubble.setSpeaking(speaking);
+  }
+  present(line) {
+    if (line === void 0) {
+      this.box.present?.(void 0);
+      this.bubble.present?.(void 0);
+      return;
+    }
+    const toBubble = lineRoutesToBubble(this.routing.route, line);
+    const active = toBubble ? this.bubble : this.box;
+    const other = toBubble ? this.box : this.bubble;
+    other.present?.(void 0);
+    active.present?.(line);
+  }
+  setVisible(visible) {
+    this.box.setVisible?.(visible);
+    this.bubble.setVisible?.(visible);
+  }
+  update(dt) {
+    this.box.update(dt);
+    this.bubble.update(dt);
+  }
+  dispose() {
+    this.box.dispose();
+    this.bubble.dispose();
+  }
+};
+
+// src/avatar/AvatarPresenter.ts
+function applyExpressionMarker(avatar, marker) {
+  if (marker.name === "expression") avatar.setExpression(marker.props["expression"]);
+}
+__name(applyExpressionMarker, "applyExpressionMarker");
+var NullAvatarPresenter = class {
+  static {
+    __name(this, "NullAvatarPresenter");
+  }
+  mount() {
+  }
+  setSpeaker() {
+  }
+  setExpression() {
+  }
+  setSpeaking() {
+  }
+  update() {
+  }
+  dispose() {
+  }
+};
+
+// src/avatar/PortraitPresenter.ts
+import { Transform as Transform8 } from "@yagejs/core";
+import { SpriteComponent, texture } from "@yagejs/renderer";
+var PortraitPresenter = class {
+  constructor(cfg) {
+    this.cfg = cfg;
+  }
+  cfg;
+  static {
+    __name(this, "PortraitPresenter");
+  }
+  // Explicit `| undefined` (not `?`) so reassigning `undefined` in dispose() /
+  // setSpeaker() is legal under the repo's exactOptionalPropertyTypes.
+  scene;
+  entity;
+  sprite;
+  transform;
+  current;
+  speaking = false;
+  bobMs = 0;
+  baseX = 0;
+  baseY = 0;
+  /** Host-hidden gate — a cutscene hides the portrait with the rest of the
+   *  UI. Composes with "is a portrait speaker active": shown = current && !hidden. */
+  hidden = false;
+  handles = /* @__PURE__ */ new Map();
+  mount(scene) {
+    this.scene = scene;
+  }
+  setSpeaker(speaker) {
+    const av = speaker?.avatar;
+    if (!av || av.kind !== "portrait") {
+      this.hide();
+      this.current = void 0;
+      return;
+    }
+    this.current = av;
+    this.ensureSprite(av.ref);
+    this.baseX = av.side === "right" ? this.cfg.rightX : this.cfg.leftX;
+    this.baseY = this.cfg.y;
+    this.transform?.setPosition(this.baseX, this.baseY);
+    this.applyTexture(av.ref);
+    this.applyVisibility();
+  }
+  /** Host-hidden gate — hide the portrait during a cutscene, restore on
+   *  show. Composes with the active-speaker state, so showing again only
+   *  re-reveals the portrait if a portrait speaker is still current. */
+  setVisible(visible) {
+    this.hidden = !visible;
+    this.applyVisibility();
+  }
+  applyVisibility() {
+    if (this.sprite) {
+      this.sprite.sprite.visible = this.current !== void 0 && !this.hidden;
+    }
+  }
+  setExpression(expression) {
+    if (!this.current) return;
+    const variant = expression ? this.current.expressions?.[expression] : void 0;
+    this.applyTexture(variant ?? this.current.ref);
+  }
+  /** Interpret a mid-line `[expression=…/]` reveal marker as a face swap (the
+   *  Session name-matches nothing — the presenter owns the convention). */
+  marker(marker) {
+    applyExpressionMarker(this, marker);
+  }
+  setSpeaking(speaking) {
+    this.speaking = speaking;
+    if (!speaking) {
+      this.bobMs = 0;
+      this.transform?.setPosition(this.baseX, this.baseY);
+    }
+  }
+  update(dt) {
+    if (!this.speaking || !this.transform) return;
+    this.bobMs += dt;
+    this.transform.setPosition(this.baseX, this.baseY + Math.sin(this.bobMs / 110) * 1.5);
+  }
+  dispose() {
+    this.entity?.destroy();
+    this.entity = void 0;
+    this.sprite = void 0;
+    this.transform = void 0;
+  }
+  ensureSprite(initialPath) {
+    if (this.sprite || !this.scene) return;
+    const entity = this.scene.spawn("dlg-portrait");
+    this.transform = entity.add(new Transform8());
+    this.transform.setScale(this.cfg.scale, this.cfg.scale);
+    this.sprite = entity.add(
+      new SpriteComponent({
+        texture: this.handle(initialPath),
+        layer: this.cfg.layer,
+        anchor: { x: 0.5, y: 0.5 },
+        visible: false
+      })
+    );
+    this.entity = entity;
+  }
+  applyTexture(path) {
+    this.sprite?.setTexture(this.handle(path));
+  }
+  handle(path) {
+    let h = this.handles.get(path);
+    if (!h) {
+      h = texture(path);
+      this.handles.set(path, h);
+    }
+    return h;
+  }
+  hide() {
+    if (this.sprite) this.sprite.sprite.visible = false;
+  }
+};
+
+// src/avatar/SceneFigurePresenter.ts
+import { Transform as Transform9 } from "@yagejs/core";
+var SceneFigurePresenter = class {
+  constructor(cfg = {}) {
+    this.cfg = cfg;
+  }
+  cfg;
+  static {
+    __name(this, "SceneFigurePresenter");
+  }
+  // Explicit `| undefined` (not `?`) so reassigning `undefined` in dispose() /
+  // setSpeaker() is legal under the repo's exactOptionalPropertyTypes.
+  scene;
+  figure;
+  actor;
+  transform;
+  speaking = false;
+  bobMs = 0;
+  /** Bob displacement currently applied to the figure's Transform. The bob is
+   *  a *relative* offset (delta-translated each frame), so external movement —
+   *  an NPC walking mid-line — is preserved instead of being pinned back to a
+   *  position captured at setSpeaker time. */
+  bobOffset = 0;
+  mount(scene) {
+    this.scene = scene;
+  }
+  setSpeaker(speaker) {
+    this.releaseBob();
+    const av = speaker?.avatar;
+    if (!av || av.kind !== "scene" || !this.scene) {
+      this.figure = void 0;
+      this.actor = void 0;
+      this.transform = void 0;
+      return;
+    }
+    this.actor = actorRegistryFor(this.scene).resolve(speaker?.id);
+    this.figure = this.actor?.entity ?? this.scene.findEntity(av.ref);
+    this.transform = this.figure?.tryGet(Transform9);
+  }
+  setExpression(expression) {
+    if (this.actor) this.actor.setExpression(expression);
+    else if (this.figure) this.cfg.onExpression?.(this.figure, expression);
+  }
+  /** Mid-line `[expression=…/]` reveal marker → the figure's own expression
+   *  (actor or the `onExpression` callback). The Session name-matches nothing. */
+  marker(marker) {
+    applyExpressionMarker(this, marker);
+  }
+  setSpeaking(speaking) {
+    this.speaking = speaking;
+    if (this.actor) this.actor.setSpeaking(speaking);
+    else if (this.figure) this.cfg.onSpeaking?.(this.figure, speaking);
+    if (!speaking) this.releaseBob();
+  }
+  update(dt) {
+    if (!this.speaking || !this.transform || this.cfg.bob === false) return;
+    this.bobMs += dt;
+    const next = Math.sin(this.bobMs / 130) * 1.2;
+    this.transform.translate(0, next - this.bobOffset);
+    this.bobOffset = next;
+  }
+  dispose() {
+    this.releaseBob();
+    this.figure = void 0;
+    this.transform = void 0;
+  }
+  /** Remove only the residual bob displacement — never teleport to a captured
+   *  base, which would undo legitimate movement since speaking began. */
+  releaseBob() {
+    if (this.transform && this.bobOffset !== 0) {
+      this.transform.translate(0, -this.bobOffset);
+    }
+    this.bobOffset = 0;
+    this.bobMs = 0;
+  }
+};
+
+// src/avatar/InBoxAvatarPresenter.ts
+import { Transform as Transform10 } from "@yagejs/core";
+import {
+  GraphicsComponent as GraphicsComponent6,
+  SpriteComponent as SpriteComponent2,
+  texture as texture2
+} from "@yagejs/renderer";
+var nextId = 0;
+var InBoxAvatarPresenter = class {
+  constructor(layout, cfg) {
+    this.layout = layout;
+    this.cfg = cfg;
+    this.layout.onChange(() => this.place());
+  }
+  layout;
+  cfg;
+  static {
+    __name(this, "InBoxAvatarPresenter");
+  }
+  insetKey = `avatar:${nextId++}`;
+  // Explicit `| undefined` (not `?`) so reassigning `undefined` is legal under
+  // the repo's exactOptionalPropertyTypes.
+  scene;
+  entity;
+  sprite;
+  transform;
+  /** Optional background panel (behind the portrait), its own entity so it draws
+   *  under the sprite on the same layer. */
+  bgEntity;
+  bg;
+  bgTransform;
+  side = "left";
+  /** A portrait is up for the current line (from `meta.portrait` + presence). */
+  shown = false;
+  /** Host-hidden gate (a cutscene hides the avatar with the rest of the UI). */
+  hidden = false;
+  handles = /* @__PURE__ */ new Map();
+  mount(scene) {
+    this.scene = scene;
+  }
+  // Image/side/presence are line-driven via `present`, not the speaker def — so
+  // setSpeaker / setExpression / setSpeaking are intentionally inert here.
+  setSpeaker() {
+  }
+  setExpression() {
+  }
+  setSpeaking() {
+  }
+  /** Routes a mid-line `[expression=…/]` marker to its own setExpression (inert
+   *  here — this avatar is portrait-by-`meta`, not expression-mapped — so it's
+   *  the uniform contract, not a visible face swap). */
+  marker(marker) {
+    applyExpressionMarker(this, marker);
+  }
+  /** Read the line's `meta` to show/hide the portrait and reserve (or clear) the
+   *  text-reflow inset. Called before the body text presents, so the text wraps
+   *  to the narrowed region. */
+  present(line) {
+    const meta = line?.meta;
+    const portrait = typeof meta?.["portrait"] === "string" ? meta["portrait"] : void 0;
+    const visible = portrait !== void 0 && meta?.["presence"] !== false;
+    this.side = meta?.["side"] === "right" ? "right" : "left";
+    if (visible && portrait !== void 0) {
+      this.ensureSprite(portrait);
+      this.applyTexture(portrait);
+      this.shown = true;
+      this.layout.setInset(this.insetKey, { side: this.side, width: this.cfg.width + (this.cfg.gap ?? 8) });
+    } else {
+      this.shown = false;
+      this.layout.setInset(this.insetKey, void 0);
+    }
+    this.place();
+    this.applyVisibility();
+  }
+  /** Host-hidden gate — hide with a cutscene, restore on show (only if a
+   *  portrait is still current). */
+  setVisible(visible) {
+    this.hidden = !visible;
+    this.applyVisibility();
+  }
+  update() {
+  }
+  dispose() {
+    this.layout.setInset(this.insetKey, void 0);
+    this.entity?.destroy();
+    this.bgEntity?.destroy();
+    this.entity = void 0;
+    this.bgEntity = void 0;
+    this.sprite = void 0;
+    this.bg = void 0;
+    this.transform = void 0;
+    this.bgTransform = void 0;
+  }
+  /** Centre the portrait (+ its panel) in its reserved column, inset by the box
+   *  padding so it sits inside the border like the text — at the frame's current
+   *  rect, so it follows `meta.position` and a grown choice panel. */
+  place() {
+    if (!this.transform) return;
+    const frame = this.layout.frameRect();
+    const pad = this.layout.padding();
+    const half = this.cfg.width / 2;
+    const x = this.side === "left" ? frame.x + pad + half : frame.x + frame.width - pad - half;
+    const y = this.cfg.align === "top" ? this.layout.textRegion().y + half : frame.y + frame.height / 2;
+    this.transform.setPosition(x, y);
+    this.bgTransform?.setPosition(x, y);
+  }
+  applyVisibility() {
+    const shown = this.shown && !this.hidden;
+    if (this.sprite) this.sprite.sprite.visible = shown;
+    if (this.bg) this.bg.graphics.visible = shown;
+  }
+  ensureSprite(initialKey) {
+    if (this.sprite || !this.scene) return;
+    const bgCfg = this.cfg.background;
+    if (bgCfg) {
+      const bgEntity = this.scene.spawn("dlg-inbox-avatar-bg");
+      this.bgTransform = bgEntity.add(new Transform10());
+      const w = this.cfg.width;
+      const bg = bgEntity.add(new GraphicsComponent6({ layer: this.cfg.layer }));
+      bg.draw(
+        (g) => g.roundRect(-w / 2, -w / 2, w, w, bgCfg.radius ?? 8).fill({ color: bgCfg.color, alpha: bgCfg.alpha ?? 1 })
+      );
+      bg.graphics.visible = false;
+      this.bg = bg;
+      this.bgEntity = bgEntity;
+    }
+    const entity = this.scene.spawn("dlg-inbox-avatar");
+    this.transform = entity.add(new Transform10());
+    const scale = this.cfg.scale ?? 1;
+    this.transform.setScale(scale, scale);
+    this.sprite = entity.add(
+      new SpriteComponent2({
+        texture: this.handle(initialKey),
+        layer: this.cfg.layer,
+        anchor: { x: 0.5, y: 0.5 },
+        visible: false
+      })
+    );
+    this.entity = entity;
+  }
+  applyTexture(key) {
+    this.sprite?.setTexture(this.handle(key));
+  }
+  handle(key) {
+    let h = this.handles.get(key);
+    if (!h) {
+      h = texture2(key);
+      this.handles.set(key, h);
+    }
+    return h;
+  }
+};
+
+// src/avatar/BubbleAvatarPresenter.ts
+import { Transform as Transform11 } from "@yagejs/core";
+import {
+  GraphicsComponent as GraphicsComponent7,
+  SpriteComponent as SpriteComponent3,
+  texture as texture3
+} from "@yagejs/renderer";
+var BubbleAvatarPresenter = class {
+  constructor(layout, cfg) {
+    this.layout = layout;
+    this.cfg = cfg;
+    this.layout.onChange(() => this.follow());
+  }
+  layout;
+  cfg;
+  static {
+    __name(this, "BubbleAvatarPresenter");
+  }
+  // Explicit `| undefined` (not `?`) for exactOptionalPropertyTypes reassignment.
+  scene;
+  entity;
+  sprite;
+  transform;
+  bgEntity;
+  bg;
+  bgTransform;
+  side = "left";
+  speakerId;
+  shown = false;
+  hidden = false;
+  handles = /* @__PURE__ */ new Map();
+  mount(scene) {
+    this.scene = scene;
+  }
+  // Line-driven (via present), so the speaker-def hooks are inert here.
+  setSpeaker() {
+  }
+  setExpression() {
+  }
+  setSpeaking() {
+  }
+  /** Uniform marker contract: routes `[expression=…/]` to its own setExpression
+   *  (inert here — this avatar is portrait-by-`meta`). */
+  marker(marker) {
+    applyExpressionMarker(this, marker);
+  }
+  present(line) {
+    const meta = line?.meta;
+    const portrait = typeof meta?.["portrait"] === "string" ? meta["portrait"] : void 0;
+    const visible = portrait !== void 0 && meta?.["presence"] !== false;
+    this.side = meta?.["side"] === "right" ? "right" : "left";
+    this.speakerId = line?.speaker?.id;
+    if (visible && portrait !== void 0 && line) {
+      const gap = this.cfg.gap ?? 8;
+      this.layout.setPortraitInset({ side: this.side, width: this.cfg.size + gap, height: this.cfg.size });
+      this.ensureSprite(portrait);
+      this.applyTexture(portrait);
+      this.shown = true;
+    } else {
+      this.layout.setPortraitInset(void 0);
+      this.shown = false;
+    }
+    this.follow();
+    this.applyVisibility();
+  }
+  setVisible(visible) {
+    this.hidden = !visible;
+    this.applyVisibility();
+  }
+  update() {
+    this.follow();
+  }
+  dispose() {
+    this.entity?.destroy();
+    this.bgEntity?.destroy();
+    this.entity = void 0;
+    this.bgEntity = void 0;
+    this.sprite = void 0;
+    this.bg = void 0;
+    this.transform = void 0;
+    this.bgTransform = void 0;
+  }
+  /** Place the portrait in its reserved column INSIDE the active bubble (say
+   *  bubble or choice panel), vertically centred on the body, tracking the
+   *  speaker's (moving) anchor. */
+  follow() {
+    const size = this.layout.activeSize();
+    if (!this.transform || !this.scene || !size || !this.shown) return;
+    const a = this.layout.anchorFor(this.scene, this.speakerId);
+    const pad = this.layout.padding;
+    const half = this.cfg.size / 2;
+    const x = this.side === "left" ? a.x - size.width / 2 + pad + half : a.x + size.width / 2 - pad - half;
+    const bodyTop = a.y - this.layout.offsetY - size.height;
+    const y = this.cfg.align === "top" ? bodyTop + pad + half : a.y - this.layout.offsetY - size.height / 2;
+    this.transform.setPosition(x, y);
+    this.bgTransform?.setPosition(x, y);
+  }
+  applyVisibility() {
+    const shown = this.shown && !this.hidden;
+    if (this.sprite) this.sprite.sprite.visible = shown;
+    if (this.bg) this.bg.graphics.visible = shown;
+  }
+  ensureSprite(initialKey) {
+    if (this.sprite || !this.scene) return;
+    const bgCfg = this.cfg.background;
+    if (bgCfg) {
+      const bgEntity = this.scene.spawn("dlg-bubble-avatar-bg");
+      this.bgTransform = bgEntity.add(new Transform11());
+      const w = this.cfg.size;
+      const bg = bgEntity.add(new GraphicsComponent7({ layer: this.cfg.layer }));
+      bg.draw(
+        (g) => g.roundRect(-w / 2, -w / 2, w, w, bgCfg.radius ?? 8).fill({ color: bgCfg.color, alpha: bgCfg.alpha ?? 1 })
+      );
+      bg.graphics.visible = false;
+      this.bg = bg;
+      this.bgEntity = bgEntity;
+    }
+    const entity = this.scene.spawn("dlg-bubble-avatar");
+    this.transform = entity.add(new Transform11());
+    const scale = this.cfg.scale ?? 1;
+    this.transform.setScale(scale, scale);
+    this.sprite = entity.add(
+      new SpriteComponent3({
+        texture: this.handle(initialKey),
+        layer: this.cfg.layer,
+        anchor: { x: 0.5, y: 0.5 },
+        visible: false
+      })
+    );
+    this.entity = entity;
+  }
+  applyTexture(key) {
+    this.sprite?.setTexture(this.handle(key));
+  }
+  handle(key) {
+    let h = this.handles.get(key);
+    if (!h) {
+      h = texture3(key);
+      this.handles.set(key, h);
+    }
+    return h;
+  }
+};
+
+// src/factory/defaultTheme.ts
+function defaultTheme() {
+  return {
+    // Viewport-relative: a full-width bottom bar resolved against the renderer's
+    // design size at mount, so this works at any resolution with no override.
+    box: { marginX: 32, marginY: 24, height: 160 },
+    padding: 16,
+    frameColor: 1710638,
+    frameAlpha: 0.92,
+    borderColor: 4868746,
+    cornerRadius: 8,
+    nameColor: 16767078,
+    nameSize: 16,
+    indicatorColor: 16777215,
+    textSize: 18,
+    lineHeight: 24,
+    textColor: 15790320,
+    charsPerSec: 45,
+    choiceSize: 16,
+    choiceColor: 11184810,
+    choiceSelectedColor: 16777215,
+    highlightColor: 4868746,
+    // No bitmapFont → canvas SplitText/Text path (zero assets).
+    fontFamily: "sans-serif",
+    layerFrame: DIALOGUE_LAYER_FRAME,
+    layerText: DIALOGUE_LAYER_TEXT
+  };
+}
+__name(defaultTheme, "defaultTheme");
+
+// src/factory/themeFonts.ts
+function themeFonts(theme) {
+  return {
+    bitmapFont: theme.bitmapFont,
+    fontFamily: theme.fontFamily,
+    resolution: theme.resolution
+  };
+}
+__name(themeFonts, "themeFonts");
+
+// src/factory/createBoxDialogue.ts
+function createBoxDialogue(theme = defaultTheme(), opts = {}) {
+  const fonts = themeFonts(theme);
+  const layout = new BoxLayout({
+    box: theme.box,
+    padding: theme.padding,
+    nameSize: theme.nameSize,
+    textSize: theme.textSize,
+    lineHeight: theme.lineHeight,
+    choiceGap: theme.choiceGap ?? DEFAULT_CHOICE_GAP,
+    ...fonts
+  });
+  const chrome = new DialogueChrome(
+    {
+      frameColor: theme.frameColor,
+      frameAlpha: theme.frameAlpha,
+      borderColor: theme.borderColor,
+      cornerRadius: theme.cornerRadius,
+      nameColor: theme.nameColor,
+      nameSize: theme.nameSize,
+      indicatorColor: theme.indicatorColor,
+      caret: theme.caret,
+      frameStyles: boxFrameStyles(theme.textured),
+      layerFrame: theme.layerFrame,
+      layerText: theme.layerText,
+      ...fonts
+    },
+    layout
+  );
+  const choices = new ChoiceListPresenter(
+    {
+      choiceSize: theme.choiceSize,
+      choiceColor: theme.choiceColor,
+      choiceSelectedColor: theme.choiceSelectedColor,
+      highlightColor: theme.highlightColor,
+      choiceGap: theme.choiceGap,
+      layerFrame: theme.layerFrame,
+      layerText: theme.layerText,
+      ...fonts
+    },
+    layout
+  );
+  const text = new BoxTextView(
+    {
+      textSize: theme.textSize,
+      lineHeight: theme.lineHeight,
+      textColor: theme.textColor,
+      charsPerSec: theme.charsPerSec,
+      layer: theme.layerText,
+      ...fonts
+    },
+    layout
+  );
+  const avatar = opts.avatar?.(layout);
+  return {
+    chrome,
+    text,
+    choices,
+    ...avatar ? { avatar } : {},
+    skipMultiplier: theme.skipMultiplier
+  };
+}
+__name(createBoxDialogue, "createBoxDialogue");
+
+// src/factory/createBubbleDialogue.ts
+var DEFAULT_BUBBLE = {
+  minWidth: 90,
+  maxWidth: 260,
+  height: 40,
+  padding: 8,
+  offsetY: 24,
+  tail: 6
+};
+function createBubbleDialogue(theme = defaultTheme(), opts) {
+  const geo = { ...DEFAULT_BUBBLE, ...opts.bubble };
+  const fonts = themeFonts(theme);
+  const layout = new BubbleLayout({
+    minWidth: geo.minWidth,
+    maxWidth: geo.maxWidth,
+    height: geo.height,
+    padding: geo.padding,
+    offsetY: geo.offsetY,
+    textSize: theme.textSize,
+    lineHeight: theme.lineHeight,
+    fallbackAnchor: opts.fallbackAnchor,
+    ...fonts
+  });
+  const chrome = new BubbleChrome(
+    {
+      layer: opts.worldLayer,
+      tail: geo.tail,
+      tailLean: theme.tailLean,
+      frameColor: theme.frameColor,
+      frameAlpha: theme.frameAlpha,
+      borderColor: theme.borderColor,
+      cornerRadius: theme.cornerRadius,
+      nameColor: theme.nameColor,
+      nameSize: theme.nameSize,
+      indicatorColor: theme.indicatorColor,
+      caret: theme.caret,
+      frame: defaultBubbleFrame(theme.textured),
+      ...fonts
+    },
+    layout
+  );
+  const text = new BubbleTextView(
+    {
+      textSize: theme.textSize,
+      lineHeight: theme.lineHeight,
+      textColor: theme.textColor,
+      charsPerSec: theme.charsPerSec,
+      layer: opts.worldLayer,
+      ...fonts
+    },
+    layout
+  );
+  const choices = new BubbleChoicePresenter(
+    {
+      layer: opts.worldLayer,
+      width: geo.maxWidth,
+      padding: geo.padding,
+      offsetY: geo.offsetY,
+      tail: geo.tail,
+      choiceSize: theme.choiceSize,
+      choiceColor: theme.choiceColor,
+      choiceSelectedColor: theme.choiceSelectedColor,
+      highlightColor: theme.highlightColor,
+      choiceGap: theme.choiceGap,
+      textColor: theme.textColor,
+      frameColor: theme.frameColor,
+      frameAlpha: theme.frameAlpha,
+      borderColor: theme.borderColor,
+      cornerRadius: theme.cornerRadius,
+      ...fonts
+    },
+    layout
+  );
+  const avatar = opts.avatar?.(layout);
+  return {
+    chrome,
+    text,
+    choices,
+    ...avatar ? { avatar } : {},
+    skipMultiplier: theme.skipMultiplier
+  };
+}
+__name(createBubbleDialogue, "createBubbleDialogue");
+
+// src/factory/createMixedDialogue.ts
+function createMixedDialogue(theme = defaultTheme(), opts) {
+  const box = createBoxDialogue(theme, opts.avatar?.box ? { avatar: opts.avatar.box } : {});
+  const bubble = createBubbleDialogue(theme, {
+    worldLayer: opts.worldLayer,
+    ...opts.bubble !== void 0 ? { bubble: opts.bubble } : {},
+    ...opts.fallbackAnchor !== void 0 ? { fallbackAnchor: opts.fallbackAnchor } : {},
+    ...opts.avatar?.bubble ? { avatar: opts.avatar.bubble } : {}
+  });
+  const routing = opts.route ? fixedRoute(opts.route) : makeDefaultRoute();
+  let avatar;
+  if (box.avatar && bubble.avatar) {
+    avatar = new CompositeAvatarPresenter(box.avatar, bubble.avatar, routing);
+  } else {
+    avatar = box.avatar ?? bubble.avatar;
+  }
+  return {
+    text: new CompositeTextPresenter(box.text, bubble.text, routing),
+    chrome: new CompositeChrome(box.chrome, bubble.chrome, routing),
+    choices: new CompositeChoicePresenter(box.choices, bubble.choices, routing),
+    ...avatar ? { avatar } : {},
+    skipMultiplier: theme.skipMultiplier
+  };
+}
+__name(createMixedDialogue, "createMixedDialogue");
+export {
+  ActorRegistry,
+  BoxLayout,
+  BoxTextView,
+  BubbleAnchorResolver,
+  BubbleAvatarPresenter,
+  BubbleChoicePresenter,
+  BubbleChrome,
+  BubbleLayout,
+  BubbleTextView,
+  CHROME_STYLE_DEFAULT,
+  CHROME_STYLE_NONE,
+  ChoiceListPresenter,
+  CompositeAvatarPresenter,
+  CompositeChoicePresenter,
+  CompositeChrome,
+  CompositeTextPresenter,
+  DEFAULT_BUBBLE,
+  DEFAULT_CARET_BLINK_MS,
+  DEFAULT_CARET_SIZE,
+  DEFAULT_CHOICE_GAP,
+  DEFAULT_TAIL_LEAN,
+  DIALOGUE_LAYERS,
+  DIALOGUE_LAYER_AVATAR,
+  DIALOGUE_LAYER_FRAME,
+  DIALOGUE_LAYER_TEXT,
+  DialogueActor,
+  DialogueChrome,
+  DialogueTextView,
+  InBoxAvatarPresenter,
+  NullAvatarPresenter,
+  PortraitPresenter,
+  RadialChoicePresenter,
+  SceneFigurePresenter,
+  actorRegistryFor,
+  createBoxDialogue,
+  createBubbleDialogue,
+  createMixedDialogue,
+  defaultTheme,
+  effectDrivesTint,
+  evaluateEffect,
+  fixedRoute,
+  makeDefaultRoute,
+  routeWithActor,
+  stackChoiceRows
+};
+//# sourceMappingURL=presenters.js.map