@lute-lang/player-web 0.0.0-stage → 0.40.0

package/dist/index.js

@@ -0,0 +1,3361 @@
+// src/mount.ts
+import { Context as Context5, Effect as Effect19, Exit, Layer as Layer5, ManagedRuntime, Scope as Scope2, Stream as Stream8, SubscriptionRef as SubscriptionRef3 } from "effect";
+import * as KeyValueStore from "effect/persistence/KeyValueStore";
+import * as BrowserKeyValueStore from "@effect/platform-browser/BrowserKeyValueStore";
+import * as FetchHttpClient from "effect/http/FetchHttpClient";
+import * as RuntimeBrowser from "@lute-lang/runtime/browser";
+import * as Runtime from "@lute-lang/runtime";
+import { LutePlayer, BindingsLoader } from "@lute-lang/player";
+
+// src/engine/app.ts
+import { Context, Effect, Layer, PubSub, Stream } from "effect";
+import { Application, Container } from "pixi.js";
+var makeLayers = () => {
+  const camera = new Container;
+  const actors = new Container;
+  camera.addChild(actors);
+  return {
+    background: new Container,
+    cg: new Container,
+    camera,
+    actors,
+    video: new Container,
+    dialogue: new Container,
+    choice: new Container,
+    overlay: new Container,
+    transition: new Container
+  };
+};
+
+class PixiApp extends Context.Service()("Lute.Web.PixiApp") {
+  static layer = (element, design, background = 0) => Layer.effect(PixiApp, Effect.gen(function* () {
+    const app = new Application;
+    yield* Effect.tryPromise({
+      try: () => app.init({
+        preference: "webgl",
+        antialias: true,
+        resizeTo: element,
+        backgroundColor: background,
+        autoDensity: true,
+        resolution: typeof window === "undefined" ? 1 : window.devicePixelRatio
+      }),
+      catch: (cause) => cause
+    });
+    element.appendChild(app.canvas);
+    const root = new Container;
+    const layers = makeLayers();
+    root.addChild(layers.background, layers.cg, layers.camera, layers.video, layers.dialogue, layers.choice, layers.overlay, layers.transition);
+    layers.camera.pivot.set(design.width / 2, design.height / 2);
+    layers.camera.position.set(design.width / 2, design.height / 2);
+    app.stage.addChild(root);
+    const resize = (width, height) => {
+      const viewWidth = (width ?? element.clientWidth) || app.screen.width / app.renderer.resolution;
+      const viewHeight = (height ?? element.clientHeight) || app.screen.height / app.renderer.resolution;
+      const scale = Math.min(viewWidth / design.width, viewHeight / design.height);
+      root.scale.set(scale);
+      root.position.set((viewWidth - design.width * scale) / 2, (viewHeight - design.height * scale) / 2);
+    };
+    app.renderer.on("resize", resize);
+    resize();
+    const framesPubSub = yield* PubSub.unbounded();
+    const frame = (ticker) => {
+      PubSub.publishUnsafe(framesPubSub, Math.min(0.1, Math.max(0, ticker.deltaMS / 1000)));
+    };
+    app.ticker.add(frame);
+    const frames = Stream.fromPubSub(framesPubSub);
+    const service = { app, layers, design, frames };
+    return yield* Effect.acquireRelease(Effect.succeed(service), () => Effect.sync(() => {
+      app.ticker.remove(frame);
+      app.renderer.off("resize", resize);
+      Effect.runPromise(PubSub.shutdown(framesPubSub));
+      app.destroy(true, {
+        children: true,
+        texture: true,
+        textureSource: true,
+        context: true
+      });
+    }));
+  }));
+}
+
+// src/engine/world.ts
+import { Context as Context2, Deferred, Effect as Effect2, Layer as Layer2, Stream as Stream2 } from "effect";
+var complete = (entry) => {
+  Effect2.runSync(Deferred.succeed(entry.done, undefined));
+};
+
+class World extends Context2.Service()("Lute.Web.World") {
+  static layer = Layer2.effect(World, Effect2.gen(function* () {
+    const pixi = yield* PixiApp;
+    const entries = [];
+    const world = {
+      run: (target, behaviour) => {
+        const done = Deferred.makeUnsafe();
+        entries.push({ target, behaviour, done });
+        return Deferred.await(done);
+      },
+      finishAll: (target) => Effect2.sync(() => {
+        let index = entries.length - 1;
+        while (index >= 0) {
+          const entry = entries[index];
+          if (entry === undefined) {
+            index -= 1;
+            continue;
+          }
+          if (target === undefined || entry.target === target) {
+            entry.behaviour.finish();
+            entry.behaviour.dispose();
+            complete(entry);
+            const last = entries.pop();
+            if (last !== undefined && index < entries.length)
+              entries[index] = last;
+          }
+          index -= 1;
+        }
+      }),
+      cancel: (target) => Effect2.sync(() => {
+        let index = entries.length - 1;
+        while (index >= 0) {
+          const entry = entries[index];
+          if (entry === undefined) {
+            index -= 1;
+            continue;
+          }
+          if (target === undefined || entry.target === target) {
+            entry.behaviour.dispose();
+            complete(entry);
+            const last = entries.pop();
+            if (last !== undefined && index < entries.length)
+              entries[index] = last;
+          }
+          index -= 1;
+        }
+      }),
+      size: Effect2.sync(() => entries.length)
+    };
+    const ticker = Stream2.runForEach(pixi.frames, (dt) => Effect2.sync(() => {
+      let index = entries.length - 1;
+      while (index >= 0) {
+        const entry = entries[index];
+        if (entry === undefined) {
+          index -= 1;
+          continue;
+        }
+        if (entry.behaviour.update(dt) === "done") {
+          entry.behaviour.dispose();
+          complete(entry);
+          const last = entries.pop();
+          if (last !== undefined && index < entries.length)
+            entries[index] = last;
+        }
+        index -= 1;
+      }
+    }));
+    yield* Effect2.forkScoped(ticker);
+    return world;
+  }));
+}
+
+// src/ui/ui.ts
+import { Context as Context3, Effect as Effect3, Layer as Layer3, Queue, Stream as Stream3 } from "effect";
+import { Container as Container6, Graphics as Graphics6 } from "pixi.js";
+
+// src/ui/widgets/base.ts
+import { Container as Container2, Graphics, Rectangle, Text } from "pixi.js";
+
+class FocusManager {
+  items = [];
+  index = -1;
+  ring;
+  register(item) {
+    if (!this.items.includes(item))
+      this.items.push(item);
+    if (this.index < 0 && item.focusable)
+      this.focus(this.items.indexOf(item));
+  }
+  unregister(item) {
+    const at = this.items.indexOf(item);
+    if (at < 0)
+      return;
+    this.items.splice(at, 1);
+    if (this.index >= this.items.length)
+      this.index = this.items.length - 1;
+  }
+  move(delta) {
+    if (this.items.length === 0)
+      return;
+    let next = this.index;
+    for (let count = 0;count < this.items.length; count += 1) {
+      next = (next + delta + this.items.length) % this.items.length;
+      if (this.items[next]?.focusable) {
+        this.focus(next);
+        return;
+      }
+    }
+  }
+  handleKey(key) {
+    const current = this.items[this.index];
+    if (current?.handleKey?.(key) === true)
+      return true;
+    if (key === "Tab" || key === "ArrowDown" || key === "ArrowRight") {
+      this.move(1);
+      return true;
+    }
+    if (key === "ArrowUp" || key === "ArrowLeft") {
+      this.move(-1);
+      return true;
+    }
+    if (key === "Enter" || key === " ") {
+      current?.activate();
+      return true;
+    }
+    return false;
+  }
+  focus(index) {
+    const item = this.items[index];
+    if (!item?.focusable)
+      return;
+    if (this.index >= 0) {
+      const previous = this.items[this.index];
+      if (previous)
+        previous.focused = false;
+    }
+    this.index = index;
+    item.focused = true;
+    this.drawRing(item);
+  }
+  focusFirst() {
+    const index = this.items.findIndex((item) => item.focusable);
+    if (index >= 0)
+      this.focus(index);
+  }
+  get current() {
+    return this.items[this.index];
+  }
+  drawRing(item) {
+    const parent = item.focusNode.parent;
+    if (!parent)
+      return;
+    this.ring?.removeFromParent();
+    const bounds = item.focusNode.getLocalBounds();
+    const ring = new Graphics().roundRect(item.focusNode.x + bounds.x * item.focusNode.scale.x - 3, item.focusNode.y + bounds.y * item.focusNode.scale.y - 3, bounds.width * item.focusNode.scale.x + 6, bounds.height * item.focusNode.scale.y + 6, 5).stroke({ color: 16777215, width: 2, alpha: 0.9 });
+    parent.addChild(ring);
+    this.ring = ring;
+  }
+}
+
+class Widget extends Container2 {
+  focusable = true;
+  hasFocus = false;
+  hit;
+  theme;
+  enabled = true;
+  constructor(theme, width, height) {
+    super();
+    this.theme = theme;
+    this.eventMode = "static";
+    this.hitArea = new Rectangle(0, 0, width, height);
+    this.cursor = "pointer";
+    this.on("pointerdown", (event) => {
+      if ("preventDefault" in event.nativeEvent)
+        event.nativeEvent.preventDefault();
+      event.stopPropagation();
+    });
+    this.on("pointerup", (event) => {
+      if ("preventDefault" in event.nativeEvent)
+        event.nativeEvent.preventDefault();
+      event.stopPropagation();
+    });
+    this.hit = new Graphics().rect(0, 0, width, height).fill({ color: 16777215, alpha: 0.001 });
+    this.hit.eventMode = "static";
+    this.hit.cursor = "pointer";
+    this.addChild(this.hit);
+    this.hit.on("pointertap", () => this.activate());
+    this.on("pointerout", () => this.setHover(false));
+  }
+  get focused() {
+    return this.hasFocus;
+  }
+  set focused(value) {
+    this.hasFocus = value;
+    this.setHover(value);
+  }
+  get focusNode() {
+    return this;
+  }
+  setEnabled(enabled) {
+    this.enabled = enabled;
+    this.alpha = enabled ? 1 : 0.45;
+    this.eventMode = enabled ? "static" : "none";
+    this.hit.eventMode = enabled ? "static" : "none";
+  }
+  get isEnabled() {
+    return this.enabled;
+  }
+  setHover(_hovered) {}
+  setTheme(theme) {
+    this.theme = theme;
+  }
+}
+// src/ui/widgets/button.ts
+import { Graphics as Graphics2, Text as Text2 } from "pixi.js";
+class Button extends Widget {
+  background;
+  caption;
+  onPress;
+  hovered = false;
+  constructor(text, theme, onPress, icon) {
+    super(theme, 240, 48);
+    this.onPress = onPress;
+    this.background = new Graphics2;
+    this.caption = new Text2({
+      text: icon ? `${icon} ${text}` : text,
+      style: { fontFamily: theme.font, fontSize: 20, fill: theme.text }
+    });
+    this.caption.position.set(14, 11);
+    this.addChild(this.background, this.caption);
+    this.draw(false);
+  }
+  activate() {
+    if (this.isEnabled)
+      this.onPress();
+  }
+  setHover(hovered) {
+    this.hovered = hovered;
+    this.draw(hovered);
+  }
+  setTheme(theme) {
+    super.setTheme(theme);
+    this.caption.style = { ...this.caption.style, fontFamily: theme.font, fill: theme.text };
+    this.draw(this.hovered);
+  }
+  draw(hovered) {
+    const color = hovered || this.focused ? this.theme.accent : this.theme.panel;
+    this.background.clear().roundRect(0, 0, 240, 48, 8).fill({ color, alpha: this.focused ? 0.95 : 0.85 });
+  }
+}
+// src/ui/widgets/controls.ts
+import { Graphics as Graphics3, Text as Text3 } from "pixi.js";
+class Slider extends Widget {
+  track;
+  knob;
+  onChange;
+  value;
+  dragging = false;
+  trackWidth;
+  constructor(value, theme, onChange, width = 260) {
+    super(theme, width, 36);
+    this.trackWidth = width;
+    this.value = clamp(value);
+    this.onChange = onChange;
+    this.track = new Graphics3;
+    this.knob = new Graphics3;
+    this.addChild(this.track, this.knob);
+    this.on("pointerdown", (event) => {
+      this.dragging = true;
+      this.setFromPointer(event.global.x);
+    });
+    this.on("globalpointermove", (event) => {
+      if (this.dragging)
+        this.setFromPointer(event.global.x);
+    });
+    this.on("pointerup", () => {
+      this.dragging = false;
+    });
+    this.on("pointerupoutside", () => {
+      this.dragging = false;
+    });
+    this.draw();
+  }
+  get current() {
+    return this.value;
+  }
+  setValue(value) {
+    this.value = clamp(value);
+    this.draw();
+  }
+  activate() {
+    this.onChange(this.value);
+  }
+  handleKey(key) {
+    const amount = 0.05;
+    if (key === "ArrowLeft" || key === "ArrowDown")
+      this.change(this.value - amount);
+    else if (key === "ArrowRight" || key === "ArrowUp")
+      this.change(this.value + amount);
+    else if (key === "Home")
+      this.change(0);
+    else if (key === "End")
+      this.change(1);
+    else
+      return false;
+    return true;
+  }
+  setFromPointer(x) {
+    this.change(this.toLocal({ x, y: this.getGlobalPosition().y }).x / this.trackWidth);
+  }
+  change(value) {
+    this.value = clamp(value);
+    this.draw();
+    this.onChange(this.value);
+  }
+  draw() {
+    this.track.clear().roundRect(0, 15, this.trackWidth, 6, 3).fill({ color: this.theme.panel, alpha: 0.9 });
+    this.track.roundRect(0, 15, this.trackWidth * this.value, 6, 3).fill({ color: this.theme.accent });
+    this.knob.clear().circle(this.trackWidth * this.value, 18, 10).fill({ color: this.theme.accent });
+  }
+}
+
+class Toggle extends Widget {
+  caption;
+  background;
+  onChange;
+  value;
+  constructor(label, value, theme, onChange) {
+    super(theme, 260, 44);
+    this.value = value;
+    this.onChange = onChange;
+    this.background = new Graphics3;
+    this.caption = new Text3({ text: label, style: { fontFamily: theme.font, fontSize: 19, fill: theme.text } });
+    this.caption.position.set(0, 10);
+    this.addChild(this.background, this.caption);
+    this.draw();
+  }
+  get current() {
+    return this.value;
+  }
+  setValue(value) {
+    this.value = value;
+    this.draw();
+  }
+  activate() {
+    if (!this.isEnabled)
+      return;
+    this.value = !this.value;
+    this.draw();
+    this.onChange(this.value);
+  }
+  draw() {
+    this.background.clear().roundRect(205, 8, 48, 26, 13).fill({ color: this.value ? this.theme.accent : this.theme.panel });
+    this.background.circle(this.value ? 240 : 218, 21, 8).fill({ color: this.theme.text });
+  }
+}
+
+class Segmented extends Widget {
+  options;
+  buttons;
+  onChange;
+  value;
+  background;
+  constructor(options, value, theme, onChange) {
+    super(theme, Math.max(options.length, 1) * 130, 44);
+    this.options = options;
+    this.value = value;
+    this.onChange = onChange;
+    this.background = new Graphics3;
+    this.addChild(this.background);
+    this.buttons = options.map((option, index) => {
+      const text = new Text3({ text: option, style: { fontFamily: theme.font, fontSize: 18, fill: theme.text } });
+      text.position.set(index * 130 + 12, 10);
+      text.eventMode = "static";
+      text.on("pointertap", (event) => {
+        event.stopPropagation();
+        this.select(option);
+      });
+      this.addChild(text);
+      return text;
+    });
+    this.draw();
+  }
+  get current() {
+    return this.value;
+  }
+  activate() {
+    const index = this.options.indexOf(this.value);
+    const next = this.options[(index + 1) % this.options.length];
+    if (next !== undefined)
+      this.select(next);
+  }
+  select(value) {
+    this.value = value;
+    this.draw();
+    this.onChange(value);
+  }
+  draw() {
+    this.background.clear();
+    this.options.forEach((option, index) => {
+      const selected = option === this.value;
+      this.background.roundRect(index * 130, 0, 130, 44, 5).fill({ color: selected ? this.theme.accent : this.theme.panel, alpha: 0.9 });
+    });
+    this.buttons.forEach((text, index) => {
+      text.style = { ...text.style, fill: this.theme.text, fontFamily: this.theme.font };
+      text.alpha = this.options[index] === this.value ? 1 : 0.75;
+    });
+  }
+}
+function clamp(value) {
+  return Math.max(0, Math.min(1, Number.isFinite(value) ? value : 0));
+}
+// src/ui/widgets/list.ts
+import { Container as Container3, Graphics as Graphics4, Text as Text4 } from "pixi.js";
+function visibleRange(total, rowHeight, viewportHeight, offset) {
+  const safeHeight = Math.max(rowHeight, 1);
+  const start = Math.min(Math.max(0, Math.floor(Math.max(0, offset) / safeHeight)), Math.max(0, total));
+  const end = Math.min(total, Math.max(start, Math.ceil((Math.max(0, offset) + Math.max(0, viewportHeight)) / safeHeight) + 1));
+  return { start, end };
+}
+
+class ScrollList extends Widget {
+  viewport;
+  content;
+  scrollbar;
+  rows = new Map;
+  values;
+  renderRow;
+  rowHeight;
+  viewportHeight;
+  offset = 0;
+  dragging = false;
+  dragStart = 0;
+  dragOffset = 0;
+  constructor(values, theme, renderRow, rowHeight = 52, viewportHeight = 360, width = 600) {
+    super(theme, width, viewportHeight);
+    this.values = values;
+    this.renderRow = renderRow;
+    this.rowHeight = rowHeight;
+    this.viewportHeight = viewportHeight;
+    this.viewport = new Graphics4().rect(0, 0, width, viewportHeight).fill({ color: 16777215, alpha: 0.001 });
+    this.viewport.eventMode = "static";
+    this.content = new Container3;
+    this.scrollbar = new Graphics4;
+    this.addChild(this.content, this.viewport, this.scrollbar);
+    this.viewport.on("wheel", (event) => {
+      this.scrollBy(event.deltaY);
+    });
+    this.viewport.on("pointerdown", (event) => {
+      this.dragging = true;
+      this.dragStart = event.global.y;
+      this.dragOffset = this.offset;
+    });
+    this.viewport.on("pointermove", (event) => {
+      if (this.dragging)
+        this.setOffset(this.dragOffset + this.dragStart - event.global.y);
+    });
+    this.viewport.on("pointerup", () => {
+      this.dragging = false;
+    });
+    this.viewport.on("pointerupoutside", () => {
+      this.dragging = false;
+    });
+    this.refresh();
+  }
+  get scrollOffset() {
+    return this.offset;
+  }
+  get maxOffset() {
+    return Math.max(0, this.values.length * this.rowHeight - this.viewportHeight);
+  }
+  scrollBy(delta) {
+    this.setOffset(this.offset + delta);
+  }
+  setOffset(offset) {
+    this.offset = Math.max(0, Math.min(this.maxOffset, offset));
+    this.refresh();
+  }
+  handleKey(key) {
+    if (key === "ArrowDown")
+      this.scrollBy(this.rowHeight);
+    else if (key === "ArrowUp")
+      this.scrollBy(-this.rowHeight);
+    else if (key === "PageDown")
+      this.scrollBy(this.viewportHeight);
+    else if (key === "PageUp")
+      this.scrollBy(-this.viewportHeight);
+    else if (key === "Home")
+      this.setOffset(0);
+    else if (key === "End")
+      this.setOffset(this.maxOffset);
+    else
+      return false;
+    return true;
+  }
+  activate() {}
+  refresh() {
+    const range = visibleRange(this.values.length, this.rowHeight, this.viewportHeight, this.offset);
+    for (const [index, row] of this.rows) {
+      if (index < range.start || index >= range.end) {
+        row.removeFromParent();
+        this.rows.delete(index);
+      }
+    }
+    for (let index = range.start;index < range.end; index += 1) {
+      if (!this.rows.has(index)) {
+        const value = this.values[index];
+        if (value !== undefined) {
+          const row = this.renderRow(value, index);
+          row.position.y = index * this.rowHeight;
+          this.rows.set(index, row);
+          this.content.addChild(row);
+        }
+      }
+    }
+    this.content.position.y = -this.offset;
+    const ratio = this.values.length === 0 ? 1 : this.viewportHeight / (this.values.length * this.rowHeight);
+    const thumbHeight = Math.max(24, this.viewportHeight * Math.min(1, ratio));
+    const thumbY = this.maxOffset === 0 ? 0 : this.offset / this.maxOffset * (this.viewportHeight - thumbHeight);
+    this.scrollbar.clear().roundRect(this.width - 10, thumbY, 8, thumbHeight, 4).fill({ color: this.theme.accent, alpha: 0.8 });
+  }
+}
+
+class Panel extends Graphics4 {
+  panelWidth;
+  panelHeight;
+  theme;
+  constructor(width, height, theme, radius = 14) {
+    super();
+    this.panelWidth = width;
+    this.panelHeight = height;
+    this.theme = theme;
+    this.draw(radius);
+  }
+  setTheme(theme) {
+    this.theme = theme;
+    this.draw(14);
+  }
+  draw(radius) {
+    this.clear().roundRect(0, 0, this.panelWidth, this.panelHeight, radius).fill({ color: this.theme.panel, alpha: this.theme.panelAlpha });
+  }
+}
+
+class Label extends Text4 {
+  constructor(text, theme, size = 22) {
+    super({ text, style: { fontFamily: theme.font, fontSize: size, fill: theme.text } });
+  }
+}
+// src/ui/screens/backlog.ts
+import { Container as Container5, Text as Text6 } from "pixi.js";
+
+// src/ui/screens/common.ts
+import { Container as Container4, Graphics as Graphics5, Sprite, Text as Text5 } from "pixi.js";
+class ScreenView extends Container4 {
+  focus = new FocusManager;
+  theme;
+  emitAction;
+  panel;
+  title;
+  panelWidth;
+  panelHeight;
+  constructor(heading, theme, emit, width = 900, height = 650) {
+    super();
+    this.theme = theme;
+    this.emitAction = emit;
+    this.panelWidth = width;
+    this.panelHeight = height;
+    this.panel = new Panel(width, height, theme);
+    this.title = new Text5({ text: heading, style: { fontFamily: theme.font, fontSize: 34, fill: theme.text } });
+    this.title.position.set(32, 24);
+    this.addChild(this.panel, this.title);
+  }
+  layout(design, full = false) {
+    if (full) {
+      this.panel.clear().rect(0, 0, design.width, design.height).fill({ color: 527128, alpha: 0.94 });
+      this.position.set(0, 0);
+      return;
+    }
+    this.position.set((design.width - this.panelWidth) / 2, (design.height - this.panelHeight) / 2);
+  }
+  button(text, action, x, y, disabled = false) {
+    const button = new Button(text, this.theme, () => this.emitAction(action));
+    button.position.set(x, y);
+    button.setEnabled(!disabled);
+    this.addChild(button);
+    this.focus.register(button);
+    return button;
+  }
+  handleKey(key) {
+    return this.focus.handleKey(key);
+  }
+  clearContent() {
+    while (this.children.length > 2)
+      this.removeChildAt(2);
+  }
+}
+
+class TitleScreen extends ScreenView {
+  constructor(model, theme, emit, gameTitle = "Lute", textureFor) {
+    super(gameTitle, theme, emit, 1280, 720);
+    if (model.background !== undefined) {
+      const texture = textureFor?.(model.background);
+      if (texture !== undefined) {
+        const background = new Sprite(texture);
+        background.width = 1280;
+        background.height = 720;
+        background.alpha = 0.95;
+        this.addChildAt(background, 1);
+      }
+    }
+    const wash = new Graphics5().rect(0, 0, 1280, 720).fill({ color: 329492, alpha: 0.36 });
+    const gradient = new Graphics5().rect(0, 0, 1280, 720).fill({ color: 131850, alpha: 0.2 });
+    this.addChildAt(wash, 2);
+    this.addChildAt(gradient, 3);
+    this.title.position.set(84, 92);
+    this.title.style = { ...this.title.style, fontSize: 68, fontWeight: "700", dropShadow: { color: 0, alpha: 0.65, blur: 8, distance: 3 } };
+    this.button("New game", { type: "newGame" }, 84, 185);
+    this.button("Continue", { type: "continue" }, 84, 253, !model.canContinue);
+    this.button("Load", { type: "openLoad" }, 84, 321);
+    this.button("Settings", { type: "openSettings" }, 84, 389);
+  }
+}
+
+class MenuScreen extends ScreenView {
+  constructor(theme, emit) {
+    super("Menu", theme, emit, 620, 500);
+    this.button("Resume", { type: "close" }, 50, 100);
+    this.button("Save", { type: "openSave" }, 50, 160);
+    this.button("Load", { type: "openLoad" }, 50, 220);
+    this.button("Settings", { type: "openSettings" }, 50, 280);
+    this.button("Title", { type: "toTitle" }, 50, 340);
+  }
+}
+
+class ConfirmScreen extends ScreenView {
+  constructor(model, theme, emit) {
+    super("Confirm", theme, emit, 680, 320);
+    const message = new Text5({ text: model.message, style: { fontFamily: theme.font, fontSize: 22, fill: theme.text, wordWrap: true, wordWrapWidth: 600 } });
+    message.position.set(36, 90);
+    this.addChild(message);
+    this.button("Yes", { type: "confirm", yes: true }, 36, 220);
+    this.button("No", { type: "confirm", yes: false }, 300, 220);
+  }
+}
+
+class EndedScreen extends ScreenView {
+  constructor(model, theme, emit) {
+    super("The End", theme, emit);
+    this.title.anchor.set(0.5);
+    this.title.position.set(this.panelWidth / 2, 72);
+    this.title.style = { ...this.title.style, fontSize: 56, fontWeight: "700", align: "center" };
+    const subtitle = model.reason === "terminal" ? "Thank you for playing" : model.reason;
+    const text = new Text5({ text: subtitle, style: { fontFamily: theme.font, fontSize: 26, fill: theme.text, align: "center", wordWrap: true, wordWrapWidth: 780 } });
+    text.anchor.set(0.5);
+    text.position.set(this.panelWidth / 2, 220);
+    this.addChild(text);
+    this.button("Back to title", { type: "toTitle" }, (this.panelWidth - 240) / 2, 510);
+  }
+}
+
+class HaltedScreen extends ScreenView {
+  constructor(model, theme, emit) {
+    super("Playback halted", theme, emit);
+    this.title.anchor.set(0.5);
+    this.title.position.set(this.panelWidth / 2, 72);
+    this.title.style = { ...this.title.style, fontSize: 48, fontWeight: "700", align: "center" };
+    const text = new Text5({ text: model.message, style: { fontFamily: theme.font, fontSize: 24, fill: theme.text, align: "center", wordWrap: true, wordWrapWidth: 780 } });
+    text.anchor.set(0.5);
+    text.position.set(this.panelWidth / 2, 220);
+    this.addChild(text);
+    this.button("Back to title", { type: "toTitle" }, (this.panelWidth - 240) / 2, 510);
+  }
+}
+
+class LoadingScreen extends ScreenView {
+  constructor(model, theme, emit) {
+    super("Loading", theme, emit);
+    const bar = new Graphics5().roundRect(45, 220, 810, 26, 13).fill({ color: theme.panel });
+    bar.roundRect(45, 220, 810 * Math.max(0, Math.min(1, model.progress)), 26, 13).fill({ color: theme.accent });
+    this.addChild(bar);
+  }
+}
+
+class IdleScreen extends ScreenView {
+  constructor(model, theme, emit) {
+    super("Continue", theme, emit, 620, 420);
+    model.options.forEach((option, index) => {
+      const x = 190 + index % 2 * 270;
+      const y = 130 + Math.floor(index / 2) * 60;
+      this.button(option.label, { type: "pickIdle", index }, x, y);
+    });
+  }
+}
+
+// src/ui/screens/backlog.ts
+class BacklogScreen extends ScreenView {
+  list;
+  constructor(model, theme, emit) {
+    super("Backlog", theme, emit, 1000, 660);
+    this.list = new ScrollList(model.entries, theme, (entry) => this.row(entry, theme, emit), 72, 520, 900);
+    this.list.position.set(36, 90);
+    this.addChild(this.list);
+    this.list.setOffset(this.list.maxOffset);
+    this.button("Close", { type: "close" }, 36, 600);
+  }
+  handleKey(key) {
+    return this.list.handleKey(key) || super.handleKey(key);
+  }
+  row(entry, theme, emit) {
+    const row = new Container5;
+    const name = new Label(entry.speakerName, theme, 18);
+    const text = new Text6({ text: entry.text, style: { fontFamily: theme.font, fontSize: 18, fill: theme.text, wordWrap: true, wordWrapWidth: entry.hasVoice ? 690 : 810 } });
+    text.position.set(0, 25);
+    row.addChild(name, text);
+    if (entry.hasVoice) {
+      const voice = new Button("Voice", theme, () => emit({ type: "replayVoice", lineId: entry.lineId }));
+      voice.position.set(720, 14);
+      row.addChild(voice);
+    }
+    return row;
+  }
+}
+
+class HudScreen extends Container5 {
+  static buttonWidth = 101;
+  static gap = 4;
+  static totalWidth = 9 * HudScreen.buttonWidth + 8 * HudScreen.gap;
+  constructor(theme, emit, state) {
+    super();
+    const actions = [
+      { label: state.auto ? "Auto: on" : "Auto", action: { type: "toggleAuto" } },
+      { label: state.skip ? "Skip: on" : "Skip", action: { type: "toggleSkip" } },
+      { label: "Log", action: { type: "openBacklog" } },
+      { label: "Save", action: { type: "openSave" } },
+      { label: "Load", action: { type: "openLoad" } },
+      { label: "Q.Save", action: { type: "quickSave" } },
+      { label: "Q.Load", action: { type: "quickLoad" } },
+      { label: "Config", action: { type: "openSettings" } },
+      { label: state.hidden ? "Show" : "Hide", action: { type: "hideUI" } }
+    ];
+    actions.forEach((item, index) => {
+      const button = new Button(item.label, theme, () => emit(item.action));
+      button.scale.set(HudScreen.buttonWidth / 240);
+      button.position.set(index * (HudScreen.buttonWidth + HudScreen.gap), 0);
+      this.addChild(button);
+    });
+  }
+}
+
+// src/ui/screens/save-load.ts
+import { Sprite as Sprite2, Text as Text7, Texture as Texture2 } from "pixi.js";
+var SLOTS_PER_PAGE = 6;
+function pageSlots(slots, page) {
+  const offset = Math.max(0, page) * SLOTS_PER_PAGE;
+  return Array.from({ length: SLOTS_PER_PAGE }, (_, index) => slots[offset + index]);
+}
+
+class SaveLoadScreen extends ScreenView {
+  constructor(model, theme, emit) {
+    super(model.mode === "save" ? "Save game" : "Load game", theme, emit, 1000, 650);
+    pageSlots(model.slots, model.page).forEach((slot, index) => {
+      const x = 36 + index % 2 * 460;
+      const y = 90 + Math.floor(index / 2) * 130;
+      this.slot(slot, model.mode, theme, emit, x, y, model.page * SLOTS_PER_PAGE + index);
+    });
+    if (model.page > 0)
+      this.button("Previous", { type: "choose", option: `page:${model.page - 1}` }, 36, 595);
+    if ((model.page + 1) * SLOTS_PER_PAGE < model.slots.length)
+      this.button("Next", { type: "choose", option: `page:${model.page + 1}` }, 210, 595);
+    this.button("Close", { type: "close" }, 770, 595);
+  }
+  slot(slot, mode, theme, emit, x, y, emptyIndex) {
+    const panel = new Panel(420, 130, theme, 8);
+    panel.position.set(x, y);
+    this.addChild(panel);
+    if (slot?.thumbnail !== undefined) {
+      const image = new Sprite2(Texture2.from(slot.thumbnail));
+      image.width = 110;
+      image.height = 80;
+      image.position.set(x + 10, y + 10);
+      this.addChild(image);
+    }
+    const label = new Text7({ text: slot?.label ?? "Empty slot", style: { fontFamily: theme.font, fontSize: 18, fill: theme.text } });
+    label.position.set(x + 135, y + 20);
+    this.addChild(label);
+    const date = new Text7({ text: slot?.savedAt ?? "", style: { fontFamily: theme.font, fontSize: 14, fill: theme.text } });
+    date.position.set(x + 135, y + 48);
+    this.addChild(date);
+    if (slot !== undefined) {
+      const action = mode === "save" ? { type: "saveSlot", slot: slot.slot } : { type: "loadSlot", slot: slot.slot };
+      const button = new Button(mode === "save" ? "Save" : "Load", theme, () => emit(action));
+      button.scale.set(0.6);
+      button.position.set(x + 270, y + 72);
+      this.addChild(button);
+      this.focus.register(button);
+      if (mode === "save") {
+        const remove = new Button("Delete", theme, () => emit({ type: "deleteSlot", slot: slot.slot }));
+        remove.scale.set(0.6);
+        remove.position.set(x + 330, y + 72);
+        this.addChild(remove);
+        this.focus.register(remove);
+      }
+    } else if (mode === "save") {
+      const button = new Button("Save", theme, () => emit({ type: "saveSlot", slot: emptyIndex }));
+      button.scale.set(0.6);
+      button.position.set(x + 270, y + 72);
+      this.addChild(button);
+      this.focus.register(button);
+    }
+  }
+}
+
+// src/ui/screens/settings.ts
+import { Text as Text8 } from "pixi.js";
+class SettingsScreen extends ScreenView {
+  settings;
+  sample;
+  constructor(model, theme, emit) {
+    super("Settings", theme, emit, 1100, 680);
+    this.settings = model.settings;
+    this.sample = new Text8({ text: "The quick brown fox jumps over the lazy dog.", style: { fontFamily: theme.font, fontSize: 20, fill: theme.text } });
+    this.sample.position.set(40, 76);
+    this.addChild(this.sample);
+    this.row("Text speed", 125, new Slider(normalizeSpeed(model.settings.textSpeed), theme, (value) => {
+      const textSpeed = value === 0 ? 0 : Math.round(10 + value * 190);
+      emit({ type: "setSettings", settings: { textSpeed } });
+      this.sample.text = textSpeed === 0 ? "Instant text" : "The quick brown fox jumps over the lazy dog.";
+    }));
+    this.row("Auto delay", 180, new Slider(normalizeDelay(model.settings.autoDelay), theme, (value) => emit({ type: "setSettings", settings: { autoDelay: Math.round(value * 20) } })));
+    this.row("Skip mode", 235, new Segmented(["read", "all"], model.settings.skipMode, theme, (skipMode) => emit({ type: "setSettings", settings: { skipMode } })));
+    this.row("Master volume", 290, this.volumeSlider(model.settings.volumes.master, theme, emit, "master"));
+    this.row("Music volume", 345, this.volumeSlider(model.settings.volumes.music, theme, emit, "music"));
+    this.row("SFX volume", 400, this.volumeSlider(model.settings.volumes.sfx, theme, emit, "sfx"));
+    this.row("Voice volume", 455, this.volumeSlider(model.settings.volumes.voice, theme, emit, "voice"));
+    this.row("Window opacity", 510, new Slider(model.settings.windowOpacity, theme, (windowOpacity) => emit({ type: "setSettings", settings: { windowOpacity } })));
+    this.row("Read text colour", 565, new Toggle("Enabled", model.settings.readColour, theme, (readColour) => emit({ type: "setSettings", settings: { readColour } })));
+    this.row("Locale", 620, new Segmented(model.locales, model.settings.locale, theme, (locale) => emit({ type: "setSettings", settings: { locale } })));
+    this.button("Close", { type: "close" }, 850, 620);
+  }
+  row(name, y, control) {
+    const label = new Label(name, this.theme, 18);
+    label.position.set(40, y + 7);
+    control.position.set(250, y);
+    this.addChild(label, control);
+    this.focus.register(control);
+  }
+  volumeSlider(value, theme, emit, channel) {
+    return new Slider(value, theme, (next) => emit({ type: "setSettings", settings: { volumes: { ...this.settings.volumes, [channel]: next } } }));
+  }
+}
+function normalizeSpeed(speed) {
+  if (speed <= 0)
+    return 0;
+  return Math.max(0, Math.min(1, (speed - 10) / 190));
+}
+function normalizeDelay(delay) {
+  return Math.max(0, Math.min(1, delay / 20));
+}
+
+// src/ui/ui.ts
+var UiTag = Context3.Service("Lute.Web.Ui");
+
+class Ui {
+  actions;
+  root;
+  theme;
+  textureFor;
+  current;
+  base;
+  overlay;
+  hud;
+  hudState = "";
+  design = { width: 1280, height: 720 };
+  titleName = "Lute";
+  push = () => {};
+  constructor(root, theme, _world, textureFor) {
+    this.root = root;
+    this.theme = theme;
+    this.textureFor = textureFor;
+    this.actions = Stream3.callback((queue) => Effect3.sync(() => {
+      this.push = (action) => {
+        Queue.offerUnsafe(queue, action);
+      };
+    }));
+  }
+  show(screen) {
+    return Effect3.sync(() => {
+      const modal = ["Menu", "Backlog", "SaveLoad", "Settings", "Confirm"].includes(screen._tag);
+      if (this.overlay) {
+        this.overlay.removeFromParent();
+        this.overlay.visible = false;
+        this.overlay = undefined;
+      }
+      const next = this.build(screen);
+      if (modal) {
+        const overlay = new Container6;
+        const dim = new Graphics6().rect(0, 0, this.design.width, this.design.height).fill({ color: 0, alpha: 0.6 });
+        dim.eventMode = "static";
+        overlay.eventMode = "static";
+        overlay.on("pointerdown", (event) => {
+          if ("preventDefault" in event.nativeEvent)
+            event.nativeEvent.preventDefault();
+          if ("stopImmediatePropagation" in event.nativeEvent)
+            event.nativeEvent.stopImmediatePropagation();
+          event.stopPropagation();
+        });
+        overlay.on("pointerup", (event) => {
+          if ("preventDefault" in event.nativeEvent)
+            event.nativeEvent.preventDefault();
+          if ("stopImmediatePropagation" in event.nativeEvent)
+            event.nativeEvent.stopImmediatePropagation();
+          event.stopPropagation();
+          if (event.button === 2)
+            this.push({ type: "close" });
+        });
+        next.layout(this.design, false);
+        overlay.addChild(dim, next);
+        this.root.addChild(overlay);
+        this.overlay = overlay;
+      } else {
+        if (this.base) {
+          this.base.removeFromParent();
+          this.base.visible = false;
+        }
+        next.layout(this.design, true);
+        this.root.addChild(next);
+        this.base = next;
+      }
+      this.current = next;
+      if (this.hud)
+        this.hud.visible = !this.current;
+    });
+  }
+  hide = Effect3.sync(() => {
+    if (this.overlay) {
+      this.overlay.removeFromParent();
+      this.overlay.visible = false;
+      this.overlay = undefined;
+      this.current = this.base;
+    } else {
+      if (this.base) {
+        this.base.removeFromParent();
+        this.base.visible = false;
+      }
+      this.base = undefined;
+      this.current = undefined;
+    }
+    if (this.hud)
+      this.hud.visible = !this.current;
+  });
+  setTheme(theme) {
+    this.theme = theme;
+  }
+  setDesign(design, title = "Lute") {
+    this.design = { width: Math.max(1, design.width), height: Math.max(1, design.height) };
+    this.titleName = title;
+  }
+  resize(viewWidth, viewHeight) {
+    const scale = Math.min(viewWidth / this.design.width, viewHeight / this.design.height);
+    this.root.scale.set(Math.max(0, scale));
+    this.root.position.set((viewWidth - this.design.width * scale) / 2, (viewHeight - this.design.height * scale) / 2);
+  }
+  showHud(state) {
+    if (this.hud) {
+      this.hud.removeFromParent();
+      this.hud.visible = false;
+    }
+    this.hud = new HudScreen(this.theme, this.push, state);
+    this.hud.position.set(Math.max(16, this.design.width - HudScreen.totalWidth - 20), this.design.height - 32);
+    this.root.addChild(this.hud);
+  }
+  setPlaying(playing, state) {
+    if (playing && this.base) {
+      this.base.removeFromParent();
+      this.base.visible = false;
+      if (this.current === this.base)
+        this.current = undefined;
+      this.base = undefined;
+    }
+    const key = `${state.auto}:${state.skip}:${state.hidden}`;
+    if (playing && key !== this.hudState) {
+      this.showHud(state);
+      this.hudState = key;
+    }
+    if (this.hud)
+      this.hud.visible = playing && !state.hidden && !this.current;
+  }
+  get hasScreen() {
+    return this.current !== undefined;
+  }
+  pointerAction(clientX, clientY) {
+    if (!this.current)
+      return false;
+    const visit = (node) => {
+      const bounds = node.getBounds();
+      if (node instanceof Button && node.isEnabled && clientX >= bounds.x && clientX <= bounds.x + bounds.width && clientY >= bounds.y && clientY <= bounds.y + bounds.height) {
+        node.activate();
+        return true;
+      }
+      return node.children.some((child) => child instanceof Container6 && visit(child));
+    };
+    return visit(this.current);
+  }
+  handleKey(key) {
+    if (this.overlay && key === "Escape") {
+      this.push({ type: "close" });
+      return true;
+    }
+    return this.current?.handleKey(key) ?? false;
+  }
+  disposeLater(node) {
+    node.removeFromParent();
+    node.visible = false;
+  }
+  build(screen) {
+    const emit = (action) => this.push(action);
+    switch (screen._tag) {
+      case "Title":
+        return new TitleScreen(screen, this.theme, emit, this.titleName, this.textureFor);
+      case "Backlog":
+        return new BacklogScreen(screen, this.theme, emit);
+      case "SaveLoad":
+        return new SaveLoadScreen(screen, this.theme, emit);
+      case "Settings":
+        return new SettingsScreen(screen, this.theme, emit);
+      case "Confirm":
+        return new ConfirmScreen(screen, this.theme, emit);
+      case "Loading":
+        return new LoadingScreen(screen, this.theme, emit);
+      case "Halted":
+        return new HaltedScreen(screen, this.theme, emit);
+      case "Idle":
+        return new IdleScreen(screen, this.theme, emit);
+      case "Menu":
+        return new MenuScreen(this.theme, emit);
+      case "Ended":
+        return new EndedScreen(screen, this.theme, emit);
+    }
+  }
+}
+
+// src/assets/pixiAssets.ts
+import { Effect as Effect4, Fiber, Stream as Stream4, SubscriptionRef } from "effect";
+import { AssetMissing } from "@lute-lang/player";
+var AUDIO_EXTENSIONS = /\.(?:aac|flac|m4a|mp3|ogg|wav|webm)(?:[?#].*)?$/i;
+var VIDEO_EXTENSIONS = /\.(?:avi|m4v|mov|mp4|webm)(?:[?#].*)?$/i;
+var uniqueFiles = (files) => {
+  const result = [];
+  const seen = new Set;
+  for (const file of files) {
+    if (file.length > 0 && !seen.has(file)) {
+      seen.add(file);
+      result.push(file);
+    }
+  }
+  return result;
+};
+var pathKind = (file) => {
+  if (VIDEO_EXTENSIONS.test(file))
+    return "video";
+  if (AUDIO_EXTENSIONS.test(file))
+    return "audio";
+  return "texture";
+};
+var resolveAssetUrl = (file, base) => {
+  try {
+    return new URL(file, base).href;
+  } catch {
+    const origin = typeof globalThis.location === "object" ? globalThis.location.href : "http://localhost/";
+    return new URL(file, new URL(base, origin)).href;
+  }
+};
+
+class PixiAssets {
+  progress;
+  backend;
+  base;
+  maxConcurrency;
+  graceSeconds;
+  progressRef;
+  records = new Map;
+  unloadFibers = new Map;
+  constructor(options) {
+    const base = options.assetsBase ?? "assets/";
+    this.base = base;
+    this.backend = options.backend;
+    this.maxConcurrency = Math.max(1, Math.floor(options.concurrency ?? 4));
+    this.graceSeconds = Math.max(0, options.graceSeconds ?? 0.25);
+    this.progressRef = Effect4.runSync(SubscriptionRef.make(0));
+    this.progress = Stream4.concat(Stream4.succeed(0), SubscriptionRef.changes(this.progressRef));
+  }
+  ensure = (files) => {
+    const requested = uniqueFiles(files);
+    return Effect4.gen({ self: this }, function* () {
+      const self = this;
+      yield* Effect4.addFinalizer(() => self.release(requested));
+      yield* SubscriptionRef.set(self.progressRef, requested.length === 0 ? 1 : 0);
+      let completed = 0;
+      yield* Effect4.forEach(requested, (file) => self.acquire(file).pipe(Effect4.tap(() => Effect4.sync(() => {
+        completed += 1;
+      })), Effect4.tap(() => SubscriptionRef.set(self.progressRef, requested.length === 0 ? 1 : completed / requested.length))), { concurrency: self.maxConcurrency, discard: true });
+      yield* SubscriptionRef.set(self.progressRef, 1);
+    });
+  };
+  texture = (file) => {
+    const record = this.records.get(file);
+    return record?.kind === "texture" || record?.kind === "video" ? record.value : undefined;
+  };
+  video = (file) => {
+    const record = this.records.get(file);
+    return record?.kind === "video" ? record.value : undefined;
+  };
+  acquire = (file) => Effect4.gen({ self: this }, function* () {
+    const self = this;
+    const pending = self.unloadFibers.get(file);
+    if (pending !== undefined) {
+      yield* Fiber.interrupt(pending);
+      self.unloadFibers.delete(file);
+    }
+    const existing = self.records.get(file);
+    if (existing !== undefined) {
+      existing.refs += 1;
+      return;
+    }
+    const url = resolveAssetUrl(file, self.base);
+    const kind = pathKind(file);
+    const value = kind === "audio" ? undefined : yield* self.backend.loadTexture(url).pipe(Effect4.mapError((error) => new AssetMissing({
+      file,
+      message: error instanceof Error ? error.message : String(error)
+    })));
+    yield* kind === "audio" ? self.backend.loadAudio(url).pipe(Effect4.mapError((error) => new AssetMissing({
+      file,
+      message: error instanceof Error ? error.message : String(error)
+    }))) : Effect4.void;
+    self.records.set(file, { file, url, kind, value, refs: 1 });
+  });
+  release = (files) => Effect4.gen({ self: this }, function* () {
+    const self = this;
+    for (const file of files) {
+      const record = self.records.get(file);
+      if (record === undefined)
+        continue;
+      record.refs -= 1;
+      if (record.refs > 0)
+        continue;
+      if (self.graceSeconds === 0) {
+        yield* self.unload(record);
+        continue;
+      }
+      const fiber = yield* Effect4.forkDetach(Effect4.sleep(self.graceSeconds).pipe(Effect4.flatMap(() => self.unload(record))));
+      self.unloadFibers.set(file, fiber);
+    }
+  });
+  unload = (record) => Effect4.gen({ self: this }, function* () {
+    const self = this;
+    const current = self.records.get(record.file);
+    if (current !== record || record.refs > 0)
+      return;
+    self.records.delete(record.file);
+    self.unloadFibers.delete(record.file);
+    if (record.kind === "audio") {
+      yield* self.backend.unloadAudio(record.url);
+    } else if (record.value !== undefined) {
+      yield* self.backend.unloadTexture(record.url, record.value);
+    }
+  });
+}
+
+// src/assets/pixiAssetsBackend.ts
+import { Assets } from "pixi.js";
+import { Effect as Effect5 } from "effect";
+import { sound } from "@pixi/sound";
+var pixiAssetsBackend = {
+  loadTexture: (url) => Effect5.tryPromise(() => Assets.load(url)),
+  unloadTexture: (_url, _texture) => Effect5.void,
+  loadAudio: (url) => Effect5.callback((resume) => {
+    if (sound.exists(url)) {
+      resume(Effect5.succeed(undefined));
+      return;
+    }
+    try {
+      sound.add(url, {
+        url,
+        preload: true,
+        loaded: (error) => resume(error == null ? Effect5.succeed(undefined) : Effect5.fail(error))
+      });
+    } catch (error) {
+      resume(Effect5.fail(error));
+    }
+  }),
+  unloadAudio: (url) => Effect5.sync(() => {
+    if (sound.exists(url, false))
+      sound.remove(url);
+  })
+};
+
+// src/audio/pixiAudio.ts
+import { Deferred as Deferred2, Effect as Effect6, Fiber as Fiber2, Option, SubscriptionRef as SubscriptionRef2 } from "effect";
+
+class AudioDecodeError extends Error {
+  file;
+  _tag = "AudioDecodeError";
+  constructor(file, cause) {
+    super(`Unable to decode or play audio ${file}: ${cause instanceof Error ? cause.message : String(cause)}`);
+    this.file = file;
+  }
+}
+var clamp2 = (value) => Math.max(0, Math.min(1, value));
+var positive = (value) => Number.isFinite(value) && value > 0 ? value : 0;
+
+class PixiAudio {
+  unlocked;
+  unlock;
+  backend;
+  logger;
+  active = {
+    music: [],
+    sfx: [],
+    voice: []
+  };
+  currentVolumes;
+  gate = Deferred2.makeUnsafe();
+  constructor(options) {
+    this.backend = options.backend;
+    this.logger = options.logger ?? ((message, error) => console.warn(message, error));
+    this.currentVolumes = options.initialVolumes ?? { master: 1, music: 1, sfx: 1, voice: 1 };
+    this.unlocked = Effect6.runSync(SubscriptionRef2.make(false));
+    const self = this;
+    this.unlock = Effect6.gen(function* () {
+      if (!SubscriptionRef2.getUnsafe(self.unlocked)) {
+        yield* self.backend.unlock.pipe(Effect6.catch((error) => {
+          self.logger("Audio context could not be resumed", error);
+          return Effect6.void;
+        }));
+        yield* SubscriptionRef2.set(self.unlocked, true);
+        yield* Deferred2.succeed(self.gate, undefined);
+      }
+    });
+  }
+  play = (channel, soundToPlay) => Effect6.gen({ self: this }, function* () {
+    const self = this;
+    if (!SubscriptionRef2.getUnsafe(self.unlocked)) {
+      yield* Deferred2.await(self.gate);
+    }
+    const loaded = yield* self.backend.load(soundToPlay.file).pipe(Effect6.catch((error) => {
+      self.logger(`Audio file missing or undecodable: ${soundToPlay.file}`, error);
+      return Effect6.fail(error);
+    }), Effect6.option);
+    if (Option.isNone(loaded))
+      return;
+    const inputVolume = clamp2(soundToPlay.volume);
+    if (channel === "voice")
+      yield* self.stopVoiceImmediately();
+    const playback = yield* self.backend.play(soundToPlay.file, {
+      loop: soundToPlay.loop,
+      volume: self.effectiveVolume(channel, inputVolume)
+    }).pipe(Effect6.catch((error) => {
+      self.logger(`Audio playback failed: ${soundToPlay.file}`, error);
+      return Effect6.fail(error);
+    }), Effect6.option);
+    if (Option.isNone(playback))
+      return;
+    if (channel === "music")
+      yield* self.replaceMusic(soundToPlay.fade);
+    const record = {
+      channel,
+      inputVolume,
+      playback: playback.value,
+      fade: undefined
+    };
+    self.active[channel].push(record);
+    record.playback.setVolume(soundToPlay.fade > 0 ? 0 : self.effectiveVolume(channel, inputVolume));
+    if (positive(soundToPlay.fade) > 0) {
+      record.fade = yield* self.startFade(record, 0, 1, soundToPlay.fade, false);
+    }
+    if (!soundToPlay.loop) {
+      yield* record.playback.ended;
+      self.removeRecord(record);
+    }
+  });
+  stop = (channel, fade) => Effect6.gen({ self: this }, function* () {
+    const self = this;
+    const records = self.active[channel].slice();
+    if (records.length === 0)
+      return;
+    for (const record of records)
+      yield* self.interruptFade(record);
+    const duration = positive(fade);
+    if (duration === 0) {
+      for (const record of records) {
+        record.playback.stop();
+        self.removeRecord(record);
+      }
+      return;
+    }
+    yield* Effect6.all(records.map((record) => self.fadeOutAndStop(record, duration)), { concurrency: "unbounded" });
+  });
+  setVolumes = (volumes) => Effect6.sync(() => {
+    this.currentVolumes = {
+      master: clamp2(volumes.master),
+      music: clamp2(volumes.music),
+      sfx: clamp2(volumes.sfx),
+      voice: clamp2(volumes.voice)
+    };
+    for (const channel of ["music", "sfx", "voice"]) {
+      for (const record of this.active[channel]) {
+        record.playback.setVolume(this.effectiveVolume(channel, record.inputVolume));
+      }
+    }
+  });
+  effectiveVolume(channel, inputVolume) {
+    return clamp2(inputVolume * this.currentVolumes.master * this.currentVolumes[channel]);
+  }
+  removeRecord(record) {
+    const records = this.active[record.channel];
+    const index = records.indexOf(record);
+    if (index >= 0)
+      records.splice(index, 1);
+  }
+  interruptFade = (record) => record.fade === undefined ? Effect6.void : Fiber2.interrupt(record.fade).pipe(Effect6.asVoid, Effect6.tap(() => Effect6.sync(() => {
+    record.fade = undefined;
+  })));
+  startFade = (record, from, to, duration, stopAtEnd) => {
+    const steps = Math.max(1, Math.ceil(duration * 20));
+    const interval = duration / steps;
+    const fade = Effect6.forEach(Array.from({ length: steps }, (_, index) => index + 1), (step) => Effect6.sleep(interval).pipe(Effect6.flatMap(() => Effect6.sync(() => {
+      const factor = from + (to - from) * (step / steps);
+      record.playback.setVolume(this.effectiveVolume(record.channel, record.inputVolume) * factor);
+    }))), { discard: true }).pipe(Effect6.flatMap(() => Effect6.sync(() => {
+      record.playback.setVolume(this.effectiveVolume(record.channel, record.inputVolume) * to);
+      if (stopAtEnd)
+        record.playback.stop();
+    })));
+    return Effect6.forkDetach(fade);
+  };
+  fadeOutAndStop = (record, duration) => Effect6.gen({ self: this }, function* () {
+    const self = this;
+    const fiber = yield* self.startFade(record, 1, 0, duration, true);
+    yield* Fiber2.join(fiber);
+    self.removeRecord(record);
+  });
+  stopVoiceImmediately = () => Effect6.gen({ self: this }, function* () {
+    const self = this;
+    const records = self.active.voice.slice();
+    for (const record of records) {
+      yield* self.interruptFade(record);
+      record.playback.stop();
+      self.removeRecord(record);
+    }
+  });
+  replaceMusic = (fade) => Effect6.gen({ self: this }, function* () {
+    const self = this;
+    const old = self.active.music.slice();
+    for (const record of old) {
+      yield* self.interruptFade(record);
+      if (positive(fade) === 0) {
+        record.playback.stop();
+        self.removeRecord(record);
+      } else {
+        const fiber = yield* self.startFade(record, 1, 0, fade, true);
+        record.fade = fiber;
+        yield* Effect6.forkDetach(Fiber2.join(fiber).pipe(Effect6.flatMap(() => Effect6.sync(() => self.removeRecord(record)))));
+      }
+    }
+  });
+}
+
+// src/audio/pixiSoundBackend.ts
+import { Effect as Effect7 } from "effect";
+import { sound as sound2, webaudio } from "@pixi/sound";
+var clamp3 = (value) => Math.max(0, Math.min(1, value));
+var waitForMediaEnd = (instance) => Effect7.callback((resume) => {
+  const finish = () => resume(Effect7.succeed(undefined));
+  instance.once("end", finish);
+  instance.once("stop", finish);
+  return Effect7.sync(() => {
+    instance.off("end", finish);
+    instance.off("stop", finish);
+  });
+});
+var pixiSoundBackend = {
+  load: (file) => Effect7.callback((resume) => {
+    if (sound2.exists(file)) {
+      resume(Effect7.succeed(undefined));
+      return;
+    }
+    try {
+      sound2.add(file, {
+        url: file,
+        preload: true,
+        loaded: (error) => resume(error == null ? Effect7.succeed(undefined) : Effect7.fail(new AudioDecodeError(file, error)))
+      });
+    } catch (error) {
+      resume(Effect7.fail(new AudioDecodeError(file, error)));
+    }
+  }),
+  play: (file, options) => Effect7.tryPromise({
+    try: () => Promise.resolve(sound2.play(file, {
+      loop: options.loop,
+      volume: options.volume
+    })).then((instance) => ({
+      setVolume: (volume) => {
+        instance.volume = clamp3(volume);
+      },
+      stop: () => instance.stop(),
+      ended: options.loop ? Effect7.never : waitForMediaEnd(instance)
+    })),
+    catch: (error) => new AudioDecodeError(file, error)
+  }),
+  unlock: Effect7.tryPromise({
+    try: () => {
+      const context = sound2.context;
+      if (context instanceof webaudio.WebAudioContext && context.audioContext.state === "suspended") {
+        return context.audioContext.resume().then(() => {
+          return;
+        });
+      }
+      return Promise.resolve(undefined);
+    },
+    catch: (error) => new AudioDecodeError("<audio-context>", error)
+  })
+};
+
+// src/presenter/pixiPresenter.ts
+import { Context as Context4, Effect as Effect17, Layer as Layer4, PubSub as PubSub2, Stream as Stream6 } from "effect";
+
+// src/choice/choiceMenu.ts
+import { Deferred as Deferred3, Effect as Effect8, Stream as Stream5 } from "effect";
+import { Container as Container7, Graphics as Graphics7, Text as Text9, TextStyle } from "pixi.js";
+var isChoiceEnabled = (verdict) => verdict === "open";
+var choiceNavigation = (options) => {
+  const enabled = options.map((option) => isChoiceEnabled(option.verdict));
+  const first = enabled.findIndex(Boolean);
+  return { ids: options.map((option) => option.id), enabled, focused: first < 0 ? -1 : first };
+};
+var navigateChoice = (state, key) => {
+  if (key === "enter")
+    return state.focused >= 0 && state.enabled[state.focused] === true ? state.ids[state.focused] : undefined;
+  if (/^[1-9]$/u.test(key)) {
+    const index = Number(key) - 1;
+    return state.enabled[index] === true ? state.ids[index] : undefined;
+  }
+  if (state.focused < 0 || key !== "up" && key !== "down")
+    return state;
+  const direction = key === "up" ? -1 : 1;
+  let index = state.focused;
+  for (let count = 0;count < state.ids.length; count += 1) {
+    index = (index + direction + state.ids.length) % state.ids.length;
+    if (state.enabled[index] === true)
+      return { ...state, focused: index };
+  }
+  return state;
+};
+var hasLabel = (option) => typeof option.text === "string";
+
+class ChoiceMenu {
+  target;
+  theme;
+  panel;
+  prompt;
+  optionsLayer;
+  countdown;
+  rendered = [];
+  navigation = { ids: [], enabled: [], focused: -1 };
+  deferred;
+  resolveChoice;
+  maxRemaining = 0;
+  remainingValue = 0;
+  pulsePhase = 0;
+  constructor(parent, theme) {
+    this.theme = theme;
+    this.target = new Container7;
+    this.target.label = "ChoiceMenu";
+    this.panel = new Graphics7;
+    this.prompt = new Text9({ text: "", style: new TextStyle({ fontFamily: theme.font, fontSize: 24, fill: theme.text, wordWrap: true, wordWrapWidth: 632 }) });
+    this.optionsLayer = new Container7;
+    this.countdown = new Graphics7;
+    this.target.addChild(this.panel, this.prompt, this.optionsLayer, this.countdown);
+    parent.addChild(this.target);
+    this.target.position.set(300, 0);
+    this.target.eventMode = "static";
+    this.target.on("pointerdown", (event) => {
+      if ("preventDefault" in event.nativeEvent)
+        event.nativeEvent.preventDefault();
+      if ("stopImmediatePropagation" in event.nativeEvent)
+        event.nativeEvent.stopImmediatePropagation();
+      event.stopPropagation();
+    });
+    this.target.on("pointerup", (event) => {
+      if ("preventDefault" in event.nativeEvent)
+        event.nativeEvent.preventDefault();
+      if ("stopImmediatePropagation" in event.nativeEvent)
+        event.nativeEvent.stopImmediatePropagation();
+      event.stopPropagation();
+    });
+    this.target.on("pointertap", (event) => this.pointerAt(event.global.y));
+    if (typeof window !== "undefined")
+      window.addEventListener("keydown", this.keydown);
+    this.target.visible = false;
+  }
+  show = (choice, remaining) => (() => {
+    const self = this;
+    return Effect8.gen(function* () {
+      yield* self.hide;
+      self.target.visible = true;
+      const options = choice.options.filter((option) => option.verdict !== "spent").map((option) => ({ ...option, text: "text" in option && typeof option.text === "string" ? option.text : option.id }));
+      self.navigation = choiceNavigation(options);
+      self.prompt.text = choice.prompt ?? "";
+      self.renderOptions(options);
+      self.deferred = yield* Deferred3.make();
+      const deferred = self.deferred;
+      self.resolveChoice = (id) => {
+        if (self.deferred === deferred)
+          Effect8.runSync(Deferred3.succeed(deferred, id));
+      };
+      yield* Stream5.runForEach(remaining, (seconds) => Effect8.sync(() => {
+        if (self.maxRemaining === 0)
+          self.maxRemaining = Math.max(0, seconds);
+        self.remainingValue = Math.max(0, seconds);
+        self.drawCountdown();
+      })).pipe(Effect8.forkDetach);
+      return yield* Deferred3.await(deferred);
+    }).pipe(Effect8.ensuring(self.hide));
+  })();
+  hide = Effect8.sync(() => {
+    this.target.visible = false;
+    this.resolveChoice = undefined;
+    this.deferred = undefined;
+    this.maxRemaining = 0;
+    this.remainingValue = 0;
+    for (const item of this.rendered) {
+      item.button.removeFromParent();
+      item.button.visible = false;
+      item.label.removeFromParent();
+      item.label.visible = false;
+    }
+    this.rendered.length = 0;
+    this.optionsLayer.removeChildren();
+  });
+  setRemaining = (seconds) => {
+    if (this.maxRemaining === 0)
+      this.maxRemaining = Math.max(0, seconds);
+    this.remainingValue = Math.max(0, seconds);
+    this.drawCountdown();
+  };
+  tick = (dt) => {
+    this.pulsePhase += Math.max(0, dt);
+    if (this.remainingValue < 3)
+      this.drawCountdown();
+  };
+  keydown = (event) => {
+    if (!this.target.visible)
+      return;
+    const key = event.key === "ArrowUp" ? "up" : event.key === "ArrowDown" ? "down" : event.key === "Enter" ? "enter" : event.key;
+    const result = navigateChoice(this.navigation, key);
+    if (typeof result === "string")
+      this.resolveChoice?.(result);
+    else if (result !== undefined) {
+      this.navigation = result;
+      this.updateFocus();
+    }
+  };
+  pointerAt = (y) => {
+    for (const [index, item] of this.rendered.entries()) {
+      if (y >= item.button.y && y <= item.button.y + item.button.height && this.navigation.enabled[index] === true) {
+        this.resolveChoice?.(item.option.id);
+        return;
+      }
+    }
+  };
+  renderOptions = (options) => {
+    const width = 680;
+    this.panel.clear().roundRect(0, 0, width, 460, 12).fill({ color: this.theme.panel, alpha: this.theme.panelAlpha });
+    this.prompt.x = 24;
+    this.prompt.y = 20;
+    options.forEach((option, index) => {
+      const button = new Graphics7;
+      const label = new Text9({
+        text: hasLabel(option) ? option.text : option.id,
+        style: new TextStyle({ fontFamily: this.theme.font, fontSize: 22, fill: this.theme.text })
+      });
+      button.y = 70 + index * 48;
+      button.roundRect(20, 0, width - 40, 38, 6).fill({
+        color: this.theme.accent,
+        alpha: this.navigation.enabled[index] === true ? 0.35 : 0.25
+      });
+      label.x = 32;
+      label.y = button.y + 6;
+      button.eventMode = this.navigation.enabled[index] === true ? "static" : "none";
+      button.on("pointertap", () => {
+        if (this.navigation.enabled[index] === true)
+          this.resolveChoice?.(option.id);
+      });
+      this.optionsLayer.addChild(button, label);
+      this.rendered.push({ option, button, label });
+    });
+    this.updateFocus();
+    this.drawCountdown();
+  };
+  updateFocus = () => {
+    for (const [index, item] of this.rendered.entries()) {
+      const active = index === this.navigation.focused;
+      item.button.alpha = active ? 1 : 0.8;
+    }
+  };
+  drawCountdown = () => {
+    const ratio = this.maxRemaining <= 0 ? 0 : Math.min(1, this.remainingValue / this.maxRemaining);
+    const pulse = this.remainingValue < 3 ? 0.7 + Math.sin(this.pulsePhase * 8) * 0.3 : 1;
+    this.countdown.alpha = pulse;
+    this.countdown.clear().rect(20, 450, 640 * ratio, 6).fill({ color: this.theme.accent, alpha: pulse });
+  };
+}
+
+// src/text/dialogueWindow.ts
+import { Effect as Effect9 } from "effect";
+import { Container as Container9, Graphics as Graphics8, Text as Text11, TextStyle as TextStyle3 } from "pixi.js";
+
+// src/text/segments.ts
+var segmenter = (locale) => new Intl.Segmenter(locale || undefined, { granularity: "grapheme" });
+var buildRevealTimeline = (segments, charactersPerSecond, locale = "") => {
+  const graphemes = [];
+  const pauses = [];
+  let time = 0;
+  const speed = Math.max(0, charactersPerSecond);
+  const iterator = segmenter(locale);
+  segments.forEach((segment, segmentIndex) => {
+    if (segment._tag === "Pause") {
+      const seconds = Math.max(0, segment.seconds);
+      pauses.push({ segment: segmentIndex, start: time, end: time + seconds });
+      time += seconds;
+      return;
+    }
+    const rate = segment.rate === undefined ? 1 : Math.max(0, segment.rate);
+    const secondsPerGrapheme = speed === 0 || rate === 0 ? 0 : 1 / (speed * rate);
+    for (const part of iterator.segment(segment.text)) {
+      const start = time;
+      time += secondsPerGrapheme;
+      graphemes.push({
+        grapheme: part.segment,
+        styles: segment.styles,
+        segment: segmentIndex,
+        start,
+        end: time
+      });
+    }
+  });
+  return { graphemes, pauses, duration: time, locale };
+};
+
+// src/text/richText.ts
+import {
+  CanvasTextMetrics,
+  Text as Text10,
+  TextStyle as TextStyle2
+} from "pixi.js";
+var noStart = new Set(["、", "。", "！", "？", "」", "』", "）", "】", "〉", "》", "〕", "］", "｝"]);
+var noEnd = new Set(["「", "『", "（", "【", "〈", "《", "〔", "［", "｛"]);
+var mapTextStyle = (names, bindings, base = {}) => {
+  const result = { ...base };
+  for (const name of names) {
+    const binding = bindings[name];
+    if (binding !== undefined)
+      Object.assign(result, binding);
+  }
+  return result;
+};
+
+// src/text/dialogueWindow.ts
+var textStyle = (font, fill, size, italic = false) => new TextStyle3({ fontFamily: font, fontSize: size, fill, fontStyle: italic ? "italic" : "normal" });
+var rolePrefix = (role) => role === "os" ? "(" : "";
+var roleSuffix = (role) => role === "os" ? ")" : "";
+
+class DialogueWindow {
+  target;
+  panel;
+  namePlate;
+  nameText;
+  textArea;
+  indicator;
+  world;
+  theme;
+  options;
+  graphemeTexts = [];
+  timeline = { graphemes: [], pauses: [], duration: 0, locale: "" };
+  currentLine;
+  revealed = false;
+  panelOpacity = 1;
+  constructor(parent, world, theme, options = {}) {
+    this.world = world;
+    this.theme = theme;
+    this.options = options;
+    this.target = new Container9;
+    this.target.label = "DialogueWindow";
+    this.panel = new Graphics8;
+    this.namePlate = new Container9;
+    this.nameText = new Text11({ text: "", style: textStyle(theme.font, theme.text, options.fontSize ?? 24) });
+    this.textArea = new Container9;
+    this.indicator = new Text11({ text: "▼", style: textStyle(theme.font, theme.accent, 18) });
+    this.indicator.visible = false;
+    this.namePlate.addChild(this.nameText);
+    this.target.addChild(this.panel, this.namePlate, this.textArea, this.indicator);
+    parent.addChild(this.target);
+    this.target.visible = false;
+    this.relayout({ width: 1280, height: 720 });
+  }
+  show = (line, settings, mode) => {
+    const self = this;
+    return Effect9.gen(function* () {
+      yield* self.world.cancel(self.target);
+      self.target.visible = true;
+      self.currentLine = line;
+      self.timeline = buildRevealTimeline(line.segments, settings.textSpeed, settings.locale);
+      self.revealed = mode === "skip" || self.timeline.duration === 0;
+      self.indicator.visible = false;
+      self.namePlate.visible = line.speakerName.length > 0;
+      const role = line.role;
+      const displayName = `${rolePrefix(role)}${line.speakerName}${roleSuffix(role)}`;
+      self.nameText.text = displayName;
+      self.nameText.style = textStyle(self.theme.font, self.options.nameColors?.[line.speaker] ?? self.theme.accent, self.options.fontSize ?? 24, role === "mono" || role === "vo");
+      self.clearTextChildren();
+      self.buildTextChildren(line, settings);
+      self.setOpacity(settings.windowOpacity);
+      if (line.read && settings.readColour)
+        self.tintText(self.theme.readText);
+      else
+        self.tintText(self.theme.text);
+      const behaviour = self.typewriterBehaviour();
+      if (self.revealed)
+        behaviour.finish();
+      yield* self.world.run(self.target, behaviour);
+      self.indicator.visible = true;
+    });
+  };
+  get reveal() {
+    const self = this;
+    return Effect9.gen(function* () {
+      yield* self.world.finishAll(self.target);
+      self.revealed = true;
+      self.indicator.visible = self.currentLine !== undefined;
+    });
+  }
+  get clear() {
+    const self = this;
+    return Effect9.gen(function* () {
+      yield* self.world.cancel(self.target);
+      self.target.visible = true;
+      self.currentLine = undefined;
+      self.timeline = { graphemes: [], pauses: [], duration: 0, locale: "" };
+      self.clearTextChildren();
+      self.nameText.text = "";
+      self.namePlate.visible = false;
+      self.indicator.visible = false;
+    });
+  }
+  setOpacity = (alpha) => {
+    this.panelOpacity = Math.min(1, Math.max(0, alpha));
+    this.panel.alpha = this.panelOpacity;
+  };
+  setHidden = (hidden) => {
+    this.target.visible = !hidden;
+  };
+  relayout = (design) => {
+    const width = this.options.boxWidth ?? Math.min(1180, design.width - 100);
+    const height = this.options.boxHeight ?? 190;
+    const x = (design.width - width) / 2;
+    const y = design.height - height - 30;
+    this.panel.clear().roundRect(x, y, width, height, 18).fill({ color: this.theme.panel, alpha: this.panelOpacity * this.theme.panelAlpha });
+    const existingPlate = this.namePlate.children[1];
+    const plate = existingPlate instanceof Graphics8 ? existingPlate : new Graphics8;
+    if (!(existingPlate instanceof Graphics8))
+      this.namePlate.addChild(plate);
+    plate.clear().roundRect(0, 0, 190, 38, 10).fill({ color: this.theme.panel, alpha: 0.92 });
+    this.namePlate.x = x + 26;
+    this.namePlate.y = y - 40;
+    this.nameText.x = 14;
+    this.nameText.y = 5;
+    this.textArea.x = x + 28;
+    this.textArea.y = y + 52;
+    this.indicator.x = x + width - 42;
+    this.indicator.y = y + height - 36;
+  };
+  clearTextChildren = () => {
+    for (const child of this.textArea.removeChildren())
+      child.visible = false;
+    this.graphemeTexts.length = 0;
+  };
+  buildTextChildren = (line, settings) => {
+    const fontSize = this.options.fontSize ?? 24;
+    const byStyle = [];
+    for (const segment of line.segments) {
+      if (segment._tag !== "Text")
+        continue;
+      const previous = byStyle[byStyle.length - 1];
+      if (previous !== undefined && previous.styles.length === segment.styles.length && previous.styles.every((s, i) => s === segment.styles[i])) {
+        previous.text += segment.text;
+      } else
+        byStyle.push({ styles: segment.styles, text: segment.text });
+    }
+    for (const run of byStyle) {
+      const style = mapTextStyle(run.styles, this.options.textStyles ?? {}, {
+        fontFamily: this.theme.font,
+        fontSize,
+        color: this.theme.text
+      });
+      const text = new Text11({
+        text: "",
+        style: {
+          ...textStyle(style.fontFamily ?? this.theme.font, typeof style.color === "number" ? style.color : this.theme.text, style.fontSize ?? fontSize, style.fontStyle === "italic"),
+          wordWrap: true,
+          wordWrapWidth: 1110,
+          breakWords: true
+        }
+      });
+      text.alpha = style.alpha ?? 1;
+      text.scale.set(style.scale ?? 1);
+      this.textArea.addChild(text);
+      const count = Array.from(new Intl.Segmenter(settings.locale || undefined, { granularity: "grapheme" }).segment(run.text)).length;
+      for (let i = 0;i < count; i += 1)
+        this.graphemeTexts.push(text);
+    }
+  };
+  tintText = (colour) => {
+    for (const text of this.textArea.children) {
+      if (text instanceof Text11)
+        text.style.fill = colour;
+    }
+  };
+  typewriterBehaviour = () => {
+    let elapsed = 0;
+    let revealedCount = 0;
+    return {
+      update: (dt) => {
+        elapsed += Math.max(0, dt);
+        while (revealedCount < this.timeline.graphemes.length) {
+          const item = this.timeline.graphemes[revealedCount];
+          if (item === undefined || item.end > elapsed)
+            break;
+          const text = this.graphemeTexts[revealedCount];
+          if (text !== undefined)
+            text.text += item.grapheme;
+          revealedCount += 1;
+        }
+        if (revealedCount >= this.timeline.graphemes.length && elapsed >= this.timeline.duration) {
+          this.revealed = true;
+          return "done";
+        }
+        return "running";
+      },
+      finish: () => {
+        for (let index = revealedCount;index < this.timeline.graphemes.length; index += 1) {
+          const item = this.timeline.graphemes[index];
+          const text = this.graphemeTexts[index];
+          if (item !== undefined && text !== undefined)
+            text.text += item.grapheme;
+        }
+        revealedCount = this.timeline.graphemes.length;
+        elapsed = this.timeline.duration;
+        this.revealed = true;
+      },
+      dispose: () => {
+        return;
+      }
+    };
+  };
+}
+
+// src/scene/actor.ts
+import { Effect as Effect11 } from "effect";
+import { Container as Container13, Sprite as Sprite4 } from "pixi.js";
+
+// src/effects/catalogue.ts
+import { Effect as Effect10, Schema } from "effect";
+import { BlurFilter } from "pixi.js";
+
+// src/engine/behaviours.ts
+import { Graphics as Graphics9 } from "pixi.js";
+
+// src/engine/easing.ts
+var clamp4 = (progress) => Math.min(1, Math.max(0, progress));
+var linear = (progress) => clamp4(progress);
+var quadOut = (progress) => {
+  const value = clamp4(progress);
+  return 1 - (1 - value) * (1 - value);
+};
+
+// src/engine/behaviours.ts
+var pool = [];
+var applyTween = (target, props, starts, to, p) => {
+  if (to.x !== undefined && starts.x !== undefined)
+    target.x = starts.x + (to.x - starts.x) * p;
+  if (to.y !== undefined && starts.y !== undefined)
+    target.y = starts.y + (to.y - starts.y) * p;
+  if (to.alpha !== undefined && starts.alpha !== undefined)
+    target.alpha = starts.alpha + (to.alpha - starts.alpha) * p;
+  if (to.scaleX !== undefined && starts.scaleX !== undefined)
+    target.scale.x = starts.scaleX + (to.scaleX - starts.scaleX) * p;
+  if (to.scaleY !== undefined && starts.scaleY !== undefined)
+    target.scale.y = starts.scaleY + (to.scaleY - starts.scaleY) * p;
+  if (to.rotation !== undefined && starts.rotation !== undefined)
+    target.rotation = starts.rotation + (to.rotation - starts.rotation) * p;
+  if (to.tint !== undefined && starts.tint !== undefined)
+    target.tint = Math.round(starts.tint + (to.tint - starts.tint) * p);
+};
+
+class TweenBehaviour {
+  target;
+  props;
+  starts;
+  to;
+  duration = 0;
+  elapsed = 0;
+  easing = linear;
+  pooled = false;
+  update(dt) {
+    this.elapsed = Math.min(this.duration, this.elapsed + Math.max(0, dt));
+    const p = this.duration <= 0 ? 1 : this.easing(this.elapsed / this.duration);
+    applyTween(this.target, this.props, this.starts, this.to, p);
+    return this.elapsed >= this.duration ? "done" : "running";
+  }
+  finish() {
+    applyTween(this.target, this.props, this.starts, this.to, 1);
+    this.elapsed = this.duration;
+  }
+  dispose() {
+    if (this.pooled)
+      return;
+    this.pooled = true;
+    pool.push(this);
+  }
+}
+var tween = (target, props, to, duration, easing = linear) => {
+  const value = pool.pop() ?? new TweenBehaviour;
+  value.target = target;
+  value.props = props;
+  const starts = {};
+  if (props.x !== undefined)
+    starts.x = target.x;
+  if (props.y !== undefined)
+    starts.y = target.y;
+  if (props.alpha !== undefined)
+    starts.alpha = target.alpha;
+  if (props.scaleX !== undefined)
+    starts.scaleX = target.scale.x;
+  if (props.scaleY !== undefined)
+    starts.scaleY = target.scale.y;
+  if (props.rotation !== undefined)
+    starts.rotation = target.rotation;
+  if (props.tint !== undefined)
+    starts.tint = target.tint;
+  value.starts = starts;
+  value.to = to;
+  value.duration = Math.max(0, duration);
+  value.elapsed = 0;
+  value.easing = easing;
+  value.pooled = false;
+  return value;
+};
+var fade = (target, to, duration) => tween(target, { alpha: target.alpha }, { alpha: to }, duration, linear);
+
+class CrossfadeBehaviour {
+  from;
+  to;
+  fromStart = 1;
+  toStart = 0;
+  duration = 0;
+  elapsed = 0;
+  pooled = false;
+  update(dt) {
+    this.elapsed = Math.min(this.duration, this.elapsed + Math.max(0, dt));
+    const p = this.duration <= 0 ? 1 : this.elapsed / this.duration;
+    this.from.alpha = this.fromStart * (1 - p);
+    this.to.alpha = this.toStart + (1 - this.toStart) * p;
+    return this.elapsed >= this.duration ? "done" : "running";
+  }
+  finish() {
+    this.from.alpha = 0;
+    this.to.alpha = 1;
+    this.elapsed = this.duration;
+  }
+  dispose() {
+    if (this.pooled)
+      return;
+    this.pooled = true;
+    crossfadePool.push(this);
+  }
+}
+var crossfadePool = [];
+var crossfade = (from, to, duration) => {
+  const value = crossfadePool.pop() ?? new CrossfadeBehaviour;
+  value.from = from;
+  value.to = to;
+  value.fromStart = from.alpha;
+  value.toStart = to.alpha;
+  value.duration = Math.max(0, duration);
+  value.elapsed = 0;
+  value.pooled = false;
+  return value;
+};
+
+class ShakeBehaviour {
+  target;
+  baseX = 0;
+  baseY = 0;
+  strength = 0;
+  duration = 0;
+  frequency = 0;
+  elapsed = 0;
+  pooled = false;
+  update(dt) {
+    this.elapsed = Math.min(this.duration, this.elapsed + Math.max(0, dt));
+    if (this.elapsed >= this.duration) {
+      this.target.x = this.baseX;
+      this.target.y = this.baseY;
+      return "done";
+    }
+    const fadeOut = 1 - this.elapsed / this.duration;
+    const angle = this.elapsed * this.frequency * Math.PI * 2;
+    this.target.x = this.baseX + Math.sin(angle * 1.13) * this.strength * fadeOut;
+    this.target.y = this.baseY + Math.cos(angle * 0.97) * this.strength * fadeOut;
+    return "running";
+  }
+  finish() {
+    this.elapsed = this.duration;
+    this.target.x = this.baseX;
+    this.target.y = this.baseY;
+  }
+  dispose() {
+    if (this.pooled)
+      return;
+    this.pooled = true;
+    shakePool.push(this);
+  }
+}
+var shakePool = [];
+var shake = (target, strength, duration, frequency = 18) => {
+  const value = shakePool.pop() ?? new ShakeBehaviour;
+  value.target = target;
+  value.baseX = target.x;
+  value.baseY = target.y;
+  value.strength = strength;
+  value.duration = Math.max(0, duration);
+  value.frequency = Math.max(0, frequency);
+  value.elapsed = 0;
+  value.pooled = false;
+  return value;
+};
+
+class HopBehaviour {
+  target;
+  baseY = 0;
+  height = 0;
+  duration = 0;
+  elapsed = 0;
+  pooled = false;
+  update(dt) {
+    this.elapsed = Math.min(this.duration, this.elapsed + Math.max(0, dt));
+    const p = this.duration <= 0 ? 1 : this.elapsed / this.duration;
+    this.target.y = this.baseY - Math.sin(Math.PI * p) * this.height;
+    return this.elapsed >= this.duration ? "done" : "running";
+  }
+  finish() {
+    this.target.y = this.baseY;
+    this.elapsed = this.duration;
+  }
+  dispose() {
+    if (this.pooled)
+      return;
+    this.pooled = true;
+    hopPool.push(this);
+  }
+}
+var hopPool = [];
+var hop = (target, height, duration) => {
+  const value = hopPool.pop() ?? new HopBehaviour;
+  value.target = target;
+  value.baseY = target.y;
+  value.height = height;
+  value.duration = Math.max(0, duration);
+  value.elapsed = 0;
+  value.pooled = false;
+  return value;
+};
+var slide = (target, fromX, toX, duration) => {
+  target.x = fromX;
+  return tween(target, { x: fromX }, { x: toX }, duration, quadOut);
+};
+
+class WipeBehaviour {
+  target;
+  maskGraphic;
+  direction = "left";
+  reveal = true;
+  width = 1;
+  height = 1;
+  duration = 0;
+  elapsed = 0;
+  pooled = false;
+  updateMask(progress) {
+    const p = this.reveal ? progress : 1 - progress;
+    const x = this.direction === "right" ? this.width * (1 - p) : 0;
+    const y = this.direction === "down" ? this.height * (1 - p) : 0;
+    const width = this.direction === "left" || this.direction === "right" ? this.width * p : this.width;
+    const height = this.direction === "up" || this.direction === "down" ? this.height * p : this.height;
+    this.maskGraphic.clear().rect(x, y, Math.max(0, width), Math.max(0, height)).fill(16777215);
+  }
+  update(dt) {
+    this.elapsed = Math.min(this.duration, this.elapsed + Math.max(0, dt));
+    this.updateMask(this.duration <= 0 ? 1 : this.elapsed / this.duration);
+    return this.elapsed >= this.duration ? "done" : "running";
+  }
+  finish() {
+    this.elapsed = this.duration;
+    this.updateMask(1);
+  }
+  dispose() {
+    if (this.pooled)
+      return;
+    this.target.mask = null;
+    this.maskGraphic.clear();
+    this.pooled = true;
+    wipePool.push(this);
+  }
+}
+var wipePool = [];
+var wipe = (target, direction, duration, reveal = true) => {
+  const value = wipePool.pop() ?? new WipeBehaviour;
+  value.target = target;
+  value.maskGraphic = value.maskGraphic ?? new Graphics9;
+  value.direction = direction;
+  value.reveal = reveal;
+  value.width = Math.max(1, target.width);
+  value.height = Math.max(1, target.height);
+  value.duration = Math.max(0, duration);
+  value.elapsed = 0;
+  value.pooled = false;
+  target.mask = value.maskGraphic;
+  value.updateMask(0);
+  return value;
+};
+
+class FlashBehaviour {
+  target;
+  colour = 16777215;
+  duration = 0;
+  elapsed = 0;
+  pooled = false;
+  update(dt) {
+    this.elapsed = Math.min(this.duration, this.elapsed + Math.max(0, dt));
+    this.target.alpha = this.duration <= 0 ? 0 : 1 - this.elapsed / this.duration;
+    return this.elapsed >= this.duration ? "done" : "running";
+  }
+  finish() {
+    this.elapsed = this.duration;
+    this.target.alpha = 0;
+  }
+  dispose() {
+    if (this.pooled)
+      return;
+    this.pooled = true;
+    flashPool.push(this);
+  }
+}
+var flashPool = [];
+var flash = (overlay, colour, duration) => {
+  const value = flashPool.pop() ?? new FlashBehaviour;
+  value.target = overlay;
+  value.colour = colour;
+  value.duration = Math.max(0, duration);
+  value.elapsed = 0;
+  value.pooled = false;
+  overlay.tint = colour;
+  overlay.alpha = 1;
+  return value;
+};
+
+// src/effects/catalogue.ts
+class EffectDecodeError extends Schema.TaggedError()("EffectDecodeError", {
+  effect: Schema.String,
+  parameter: Schema.String,
+  message: Schema.String
+}) {
+}
+
+class UnknownEffect extends Schema.TaggedError()("UnknownEffect", { name: Schema.String }) {
+}
+
+class UnknownEffectParameter extends Schema.TaggedError()("UnknownEffectParameter", {
+  effect: Schema.String,
+  parameter: Schema.String
+}) {
+}
+
+class InvalidEffectParameter extends Schema.TaggedError()("InvalidEffectParameter", {
+  effect: Schema.String,
+  parameter: Schema.String,
+  message: Schema.String
+}) {
+}
+var accepted = {
+  fade: ["duration"],
+  dissolve: ["duration"],
+  wipeLeft: ["duration"],
+  wipeRight: ["duration"],
+  wipeUp: ["duration"],
+  wipeDown: ["duration"],
+  slideLeft: ["duration"],
+  slideRight: ["duration"],
+  cut: [],
+  fadeIn: ["duration"],
+  fadeOut: ["duration"],
+  slideIn: ["duration"],
+  slideOut: ["duration"],
+  hop: ["duration"],
+  shake: ["duration", "strength"],
+  none: [],
+  zoom: ["duration", "scale"],
+  pan: ["duration", "x", "y"],
+  flash: ["duration", "color"],
+  blur: ["duration", "strength"],
+  tint: ["duration", "color"]
+};
+var numberSchema = Schema.Number;
+var stringSchema = Schema.String;
+var decodeNumber = (effect, parameter, value) => typeof value !== "number" ? Effect10.fail(new EffectDecodeError({ effect, parameter, message: "expected a number" })) : Schema.decodeUnknownEffect(numberSchema)(value).pipe(Effect10.mapError(() => new EffectDecodeError({ effect, parameter, message: "expected a number" })));
+var decodeString = (effect, parameter, value) => typeof value !== "string" ? Effect10.fail(new EffectDecodeError({ effect, parameter, message: "expected a string" })) : Schema.decodeUnknownEffect(stringSchema)(value).pipe(Effect10.mapError(() => new EffectDecodeError({ effect, parameter, message: "expected a string" })));
+var parse = (name, params) => Effect10.gen(function* () {
+  const allowed = accepted[name];
+  for (const parameter of Object.keys(params)) {
+    if (!allowed.includes(parameter)) {
+      return yield* Effect10.fail(new EffectDecodeError({ effect: name, parameter, message: "unknown parameter" }));
+    }
+  }
+  for (const [parameter, value] of Object.entries(params)) {
+    if (parameter === "duration" || parameter === "strength" || parameter === "scale" || parameter === "x" || parameter === "y") {
+      yield* decodeNumber(name, parameter, value);
+    } else if (parameter === "color") {
+      yield* decodeString(name, parameter, value);
+    }
+  }
+});
+var valueNumber = (effect, params, parameter, fallback) => {
+  const value = params[parameter];
+  return value === undefined ? Effect10.succeed(fallback) : decodeNumber(effect, parameter, value);
+};
+var colour = (effect, params) => decodeString(effect, "color", params.color ?? "#ffffff").pipe(Effect10.flatMap((source) => {
+  const trimmed = source.trim();
+  const text = trimmed.startsWith("#") ? trimmed.slice(1) : trimmed.startsWith("0x") ? trimmed.slice(2) : trimmed;
+  return /^[0-9a-fA-F]{6}$/.test(text) ? Effect10.succeed(Number.parseInt(text, 16)) : Effect10.fail(new EffectDecodeError({ effect, parameter: "color", message: "expected #RRGGBB" }));
+}));
+var dimension = (target, ctx) => Math.max(1, ctx.design?.width ?? target.width, ctx.design?.height ?? target.height);
+
+class BlurBehaviour {
+  filter;
+  target;
+  end = 0;
+  duration = 0;
+  elapsed = 0;
+  constructor(target, strength, duration) {
+    this.target = target;
+    this.filter = new BlurFilter({ strength: 0 });
+    this.end = strength;
+    this.duration = Math.max(0, duration);
+    this.target.filters = [this.filter];
+  }
+  update(dt) {
+    this.elapsed = Math.min(this.duration, this.elapsed + Math.max(0, dt));
+    const progress = this.duration <= 0 ? 1 : this.elapsed / this.duration;
+    this.filter.strength = this.end * progress;
+    return this.elapsed >= this.duration ? "done" : "running";
+  }
+  finish() {
+    this.elapsed = this.duration;
+    this.filter.strength = this.end;
+  }
+  dispose() {
+    this.filter.strength = this.end;
+  }
+}
+var parseName = (name) => {
+  switch (name) {
+    case "fade":
+    case "dissolve":
+    case "wipeLeft":
+    case "wipeRight":
+    case "wipeUp":
+    case "wipeDown":
+    case "slideLeft":
+    case "slideRight":
+    case "cut":
+    case "fadeIn":
+    case "fadeOut":
+    case "slideIn":
+    case "slideOut":
+    case "hop":
+    case "shake":
+    case "none":
+    case "zoom":
+    case "pan":
+    case "flash":
+    case "blur":
+    case "tint":
+      return Effect10.succeed(name);
+    default:
+      return Effect10.fail(new EffectDecodeError({ effect: name, parameter: "", message: "unknown effect" }));
+  }
+};
+var wipeDirection = (name) => {
+  switch (name) {
+    case "wipeLeft":
+      return "left";
+    case "wipeRight":
+      return "right";
+    case "wipeUp":
+      return "up";
+    case "wipeDown":
+      return "down";
+    default:
+      return "left";
+  }
+};
+var build = (name, target, params = {}, duration = 0, ctx = {}) => Effect10.gen(function* () {
+  const effect = yield* parseName(name);
+  yield* parse(effect, params);
+  const seconds = Math.max(0, duration);
+  switch (effect) {
+    case "fade":
+    case "dissolve":
+      return [fade(target, 0, seconds)];
+    case "wipeLeft":
+    case "wipeRight":
+    case "wipeUp":
+    case "wipeDown":
+      return [wipe(target, wipeDirection(effect), seconds, true)];
+    case "slideLeft":
+      return [slide(target, target.x + dimension(target, ctx), target.x, seconds)];
+    case "slideRight":
+      return [slide(target, target.x - dimension(target, ctx), target.x, seconds)];
+    case "cut":
+    case "none":
+      return [];
+    case "fadeIn":
+      return [fade(target, 1, seconds)];
+    case "fadeOut":
+      return [fade(target, 0, seconds)];
+    case "slideIn":
+      return [slide(target, target.x + dimension(target, ctx), target.x, seconds)];
+    case "slideOut":
+      return [slide(target, target.x, target.x - dimension(target, ctx), seconds)];
+    case "hop":
+      return [hop(target, dimension(target, ctx) * 0.08, seconds)];
+    case "shake":
+      return [shake(target, yield* valueNumber(effect, params, "strength", 12), seconds)];
+    case "zoom": {
+      const scale = yield* valueNumber(effect, params, "scale", 1);
+      return [tween(target, { scaleX: target.scale.x, scaleY: target.scale.y }, { scaleX: scale, scaleY: scale }, seconds, linear)];
+    }
+    case "pan": {
+      const toX = yield* valueNumber(effect, params, "x", target.x);
+      const toY = yield* valueNumber(effect, params, "y", target.y);
+      return [tween(target, { x: target.x, y: target.y }, { x: toX, y: toY }, seconds, linear)];
+    }
+    case "flash":
+      return [flash(ctx.overlay ?? target, yield* colour(effect, params), seconds)];
+    case "blur":
+      return [new BlurBehaviour(target, yield* valueNumber(effect, params, "strength", 8), seconds)];
+    case "tint":
+      return [tween(target, { tint: target.tint }, { tint: yield* colour(effect, params) }, seconds, linear)];
+  }
+});
+var EffectCatalogue = { build };
+
+// src/scene/shared.ts
+import { Container as Container12, Graphics as Graphics10, Text as Text12, TextStyle as TextStyle4 } from "pixi.js";
+var assetFile = (bindings, assetId) => assetId === undefined ? undefined : bindings.assets?.[assetId] ?? assetId;
+var finite = (value, fallback) => value !== null && value !== undefined && Number.isFinite(value) ? value : fallback;
+var textureFor = (assets, file) => file === undefined ? undefined : assets.texture(file);
+var placeholder = (parent, name, theme, width, height) => {
+  const target = new Container12;
+  target.label = `Placeholder:${name}`;
+  const hash = Array.from(name).reduce((sum, char) => sum * 33 + char.charCodeAt(0) & 16777215, 0);
+  const block = new Graphics10().rect(0, 0, Math.max(1, width), Math.max(1, height)).fill({ color: hash || theme.accent, alpha: 0.8 });
+  const text = new Text12({ text: name, style: new TextStyle4({ fontFamily: theme.font, fontSize: Math.max(12, Math.min(32, height / 5)), fill: theme.text }) });
+  text.anchor?.set?.(0.5);
+  text.x = width / 2;
+  text.y = height / 2;
+  target.addChild(block, text);
+  parent.addChild(target);
+  return target;
+};
+var spriteTexture = (bindings, actor) => {
+  const character = bindings.characters?.[actor.character];
+  if (character === undefined)
+    return;
+  const sprite = actor.costume === undefined || actor.costume === null ? character.sprite : character.costumes?.[actor.costume] ?? character.sprite;
+  if (actor.emotion !== undefined && actor.emotion !== null)
+    return sprite.emotions?.[actor.emotion] ?? sprite.default;
+  return sprite.default;
+};
+var anchorPlacement = (anchor, design, texture) => {
+  const scale = finite(anchor?.scale, 1);
+  const x = finite(anchor?.x, 0.5) * design.width - texture.width * scale / 2;
+  const y = finite(anchor?.y, 1) * design.height - texture.height * scale;
+  return { x, y, scale };
+};
+var cgPlacement = (fit, design, texture, scale = 1, x, y) => {
+  const ratio = fit === "cover" ? Math.max(design.width / Math.max(1, texture.width), design.height / Math.max(1, texture.height)) : Math.min(design.width / Math.max(1, texture.width), design.height / Math.max(1, texture.height));
+  const actualScale = ratio * Math.max(0, scale);
+  const width = texture.width * actualScale;
+  const height = texture.height * actualScale;
+  return { x: x ?? (design.width - width) / 2, y: y ?? (design.height - height) / 2, scale: actualScale, width, height };
+};
+var clearContainer = (container) => {
+  for (const child of container.removeChildren())
+    child.destroy({ children: true });
+};
+var transitionDuration = (duration, fallback = 0) => Math.max(0, duration ?? fallback);
+
+// src/scene/actor.ts
+var resolveActorTexture = spriteTexture;
+
+class ActorSprite {
+  target;
+  actor;
+  world;
+  bindings;
+  assets;
+  design;
+  theme;
+  logger;
+  logged = new Set;
+  constructor(parent, actor, world, bindings, assets, design, theme, logger = console.warn) {
+    this.actor = actor;
+    this.world = world;
+    this.bindings = bindings;
+    this.assets = assets;
+    this.design = design;
+    this.theme = theme;
+    this.logger = logger;
+    this.target = new Container13;
+    this.target.label = `Actor:${actor.character}`;
+    parent.addChild(this.target);
+    this.updateTexture(actor);
+  }
+  updateTexture(actor) {
+    this.target.removeChildren().forEach((child) => child.destroy({ children: true }));
+    const file = resolveActorTexture(this.bindings, actor);
+    const texture = this.assets.texture(file ?? "");
+    if (texture === undefined) {
+      const key = `character:${actor.character}`;
+      if (!this.logged.has(key)) {
+        this.logged.add(key);
+        this.logger(`Missing binding ${key}`);
+      }
+      placeholder(this.target, key, this.theme, this.design.width / 3, this.design.height * 0.8);
+    } else {
+      const sprite = new Sprite4(texture);
+      sprite.label = `Sprite:${file}`;
+      const anchor = actor.anchor === null || actor.anchor === undefined ? undefined : this.bindings.anchors?.[actor.anchor];
+      const heightScale = Math.min(1, this.design.height * 0.85 / Math.max(1, texture.height));
+      const placement = anchorPlacement(anchor === undefined ? { x: 0.5, y: 1, scale: heightScale } : { ...anchor, scale: anchor.scale ?? heightScale }, this.design, { width: texture.width, height: texture.height });
+      sprite.position.set(placement.x, placement.y);
+      sprite.scale.set(placement.scale);
+      this.target.addChild(sprite);
+    }
+  }
+  play = (action, instant = false, durationOverride) => {
+    if (action === undefined || action.effect === "none" || action.effect === "cut" || instant)
+      return Effect11.void;
+    return EffectCatalogue.build(action.effect, this.target, action.params, durationOverride ?? (typeof action.params.duration === "number" ? action.params.duration : 0)).pipe(Effect11.catch(() => Effect11.succeed([])), Effect11.flatMap((behaviours) => Effect11.forEach(behaviours, (behaviour) => this.world.run(this.target, behaviour), { discard: true })));
+  };
+  destroy() {
+    this.target.destroy({ children: true });
+  }
+}
+
+// src/scene/background.ts
+import { Effect as Effect12 } from "effect";
+import { Container as Container14, Sprite as Sprite5 } from "pixi.js";
+var backgroundFile = (bindings, bg) => {
+  if (bg === null || bg === undefined)
+    return;
+  const bound = bg.location === undefined || bg.location === null ? undefined : bindings.backgrounds?.[bg.location];
+  return bg.time !== undefined && bg.time !== null ? bound?.times?.[bg.time] ?? bound?.image ?? assetFile(bindings, bg.assetId ?? undefined) : bound?.image ?? assetFile(bindings, bg.assetId ?? undefined);
+};
+
+class Background {
+  target;
+  world;
+  bindings;
+  assets;
+  theme;
+  design;
+  logger;
+  logged = new Set;
+  current;
+  constructor(parent, world, bindings, assets, design, theme, logger = console.warn) {
+    this.target = parent;
+    this.world = world;
+    this.bindings = bindings;
+    this.assets = assets;
+    this.design = design;
+    this.theme = theme;
+    this.logger = logger;
+    parent.label = parent.label || "BackgroundLayer";
+  }
+  set = (bg, transition, instant = false, durationOverride) => {
+    const file = backgroundFile(this.bindings, bg);
+    const texture = textureFor(this.assets, file);
+    if (file === undefined || texture === undefined) {
+      const key = `background:${bg?.location ?? bg?.assetId ?? "missing"}`;
+      if (!this.logged.has(key)) {
+        this.logged.add(key);
+        this.logger(`Missing binding ${key}`);
+      }
+      clearContainer(this.target);
+      const next2 = placeholder(this.target, key, this.theme, this.design.width, this.design.height);
+      next2.alpha = 1;
+      this.current = next2;
+      return Effect12.void;
+    }
+    const next = new Container14;
+    next.label = `Background:${file}`;
+    const sprite = new Sprite5(texture);
+    sprite.label = `Texture:${file}`;
+    sprite.width = this.design.width;
+    sprite.height = this.design.height;
+    next.addChild(sprite);
+    this.target.addChild(next);
+    const previous = this.current;
+    this.current = next;
+    const duration = instant ? 0 : transitionDuration(durationOverride, typeof transition?.params.duration === "number" ? transition.params.duration : 0);
+    if (previous === undefined || duration <= 0) {
+      if (previous !== undefined)
+        previous.destroy({ children: true });
+      next.alpha = 1;
+      return Effect12.void;
+    }
+    const behaviour = crossfade(previous, next, duration);
+    return this.world.run(this.target, behaviour).pipe(Effect12.tap(() => Effect12.sync(() => previous.destroy({ children: true }))));
+  };
+}
+
+// src/scene/camera.ts
+import { Effect as Effect13 } from "effect";
+var framingPlacement = (framing, design, focus) => {
+  const zoom = framing?.zoom ?? 1;
+  const centreX = design.width / 2;
+  const centreY = design.height / 2;
+  const x = focus === undefined ? centreX + (framing?.x ?? 0) : centreX + (centreX - focus.x) * zoom + (framing?.x ?? 0);
+  const y = focus === undefined ? centreY + (framing?.y ?? 0) : centreY + (centreY - focus.y) * zoom + (framing?.y ?? 0);
+  return { scale: zoom, x, y };
+};
+
+class Camera {
+  target;
+  world;
+  bindings;
+  design;
+  actors;
+  logger;
+  constructor(target, actors, world, bindings, design, logger = console.warn) {
+    this.target = target;
+    this.actors = actors;
+    this.world = world;
+    this.bindings = bindings;
+    this.design = design;
+    this.logger = logger;
+  }
+  clear = () => {
+    this.target.scale.set(1);
+    this.target.position.set(this.design.width / 2, this.design.height / 2);
+    this.target.pivot.set(this.design.width / 2, this.design.height / 2);
+  };
+  apply = (framingName, focusName) => {
+    const framing = framingName === undefined ? undefined : this.bindings.framing?.[framingName];
+    const focus = focusName === undefined ? undefined : this.findActor(focusName);
+    if (focusName !== undefined && focus === undefined)
+      this.logger(`Missing actor focus:${focusName}`);
+    const placement = framingPlacement(framing, this.design, focus);
+    this.target.scale.set(placement.scale);
+    this.target.position.set(placement.x, placement.y);
+  };
+  move = (move, duration, instant = false) => {
+    if (move === undefined || instant)
+      return Effect13.void;
+    return EffectCatalogue.build(move.effect, this.target, move.params, duration ?? (typeof move.params.duration === "number" ? move.params.duration : 0), { design: this.design, camera: this.target }).pipe(Effect13.catch(() => Effect13.succeed([])), Effect13.flatMap((behaviours) => Effect13.forEach(behaviours, (behaviour) => this.world.run(this.target, behaviour), { discard: true })));
+  };
+  findActor = (character) => {
+    const actor = this.actors.children.find((child) => child.label === `Actor:${character}`);
+    return actor === undefined ? undefined : { x: actor.x + actor.width / 2, y: actor.y + actor.height / 2 };
+  };
+}
+
+// src/scene/cgLayer.ts
+import { Effect as Effect14 } from "effect";
+import { Container as Container15, Sprite as Sprite6 } from "pixi.js";
+class CgLayer {
+  target;
+  world;
+  bindings;
+  assets;
+  design;
+  theme;
+  logger;
+  current;
+  constructor(parent, world, bindings, assets, design, theme, logger = console.warn) {
+    this.target = parent;
+    this.world = world;
+    this.bindings = bindings;
+    this.assets = assets;
+    this.design = design;
+    this.theme = theme;
+    this.logger = logger;
+  }
+  show = (cg, transition, instant = false, durationOverride) => {
+    if (cg === null || cg === undefined) {
+      const old = this.current;
+      this.current = undefined;
+      return old === undefined ? Effect14.void : Effect14.sync(() => {
+        clearContainer(this.target);
+        old.destroy({ children: true });
+      });
+    }
+    const file = assetFile(this.bindings, cg.assetId);
+    const texture = textureFor(this.assets, file);
+    const next = new Container15;
+    next.label = `Cg:${cg.assetId}`;
+    if (texture === undefined) {
+      this.logger(`Missing binding cg:${cg.assetId}`);
+      placeholder(next, `cg:${cg.assetId}`, this.theme, this.design.width, this.design.height);
+    } else {
+      const config = cg.layout === null || cg.layout === undefined ? undefined : this.bindings.cgLayouts?.[cg.layout];
+      const placement = cgPlacement(config?.fit ?? "contain", this.design, { width: texture.width, height: texture.height }, config?.scale ?? 1, config?.x, config?.y);
+      const sprite = new Sprite6(texture);
+      sprite.label = `Texture:${file}`;
+      sprite.position.set(placement.x, placement.y);
+      sprite.scale.set(placement.scale);
+      next.addChild(sprite);
+    }
+    this.target.addChild(next);
+    const previous = this.current;
+    this.current = next;
+    const duration = instant ? 0 : transitionDuration(durationOverride, typeof transition?.params.duration === "number" ? transition.params.duration : 0);
+    if (previous === undefined || duration <= 0) {
+      previous?.destroy({ children: true });
+      return Effect14.void;
+    }
+    return this.world.run(this.target, crossfade(previous, next, duration)).pipe(Effect14.tap(() => Effect14.sync(() => previous.destroy({ children: true }))));
+  };
+}
+
+// src/scene/videoLayer.ts
+import { Effect as Effect15 } from "effect";
+import { Sprite as Sprite7 } from "pixi.js";
+class VideoLayer {
+  target;
+  assets;
+  bindings;
+  design;
+  theme;
+  logger;
+  active;
+  constructor(parent, _world, bindings, assets, design, theme, logger = console.warn) {
+    this.target = parent;
+    this.bindings = bindings;
+    this.assets = assets;
+    this.design = design;
+    this.theme = theme;
+    this.logger = logger;
+    parent.label = parent.label || "VideoLayer";
+  }
+  show = (video, blocking, skip = false) => {
+    clearContainer(this.target);
+    this.active = undefined;
+    if (video === null || video === undefined)
+      return Effect15.void;
+    const file = assetFile(this.bindings, video.assetId);
+    const texture = file === undefined ? undefined : this.assets.video(file) ?? this.assets.texture(file);
+    if (texture === undefined) {
+      this.logger(`Missing binding video:${video.assetId}`);
+      placeholder(this.target, `video:${video.assetId}`, this.theme, this.design.width, this.design.height);
+      return Effect15.void;
+    }
+    const sprite = new Sprite7(texture);
+    sprite.width = this.design.width;
+    sprite.height = this.design.height;
+    this.target.addChild(sprite);
+    const resource = texture.source.resource;
+    if (!(resource instanceof HTMLVideoElement))
+      return Effect15.void;
+    this.active = resource;
+    resource.currentTime = 0;
+    resource.loop = false;
+    if (skip) {
+      if (Number.isFinite(resource.duration) && resource.duration > 0)
+        resource.currentTime = resource.duration;
+      resource.pause();
+      return Effect15.void;
+    }
+    const play = resource.play();
+    if (!blocking)
+      return Effect15.promise(() => play.then(() => {
+        return;
+      }).catch(() => {
+        return;
+      }));
+    return Effect15.callback((resume) => {
+      const finish = () => resume(Effect15.succeed(undefined));
+      resource.addEventListener("ended", finish, { once: true });
+      resource.addEventListener("error", finish, { once: true });
+      play.catch(finish);
+      return Effect15.sync(() => {
+        resource.removeEventListener("ended", finish);
+        resource.removeEventListener("error", finish);
+      });
+    });
+  };
+  hide = () => Effect15.sync(() => {
+    if (this.active !== undefined)
+      this.active.pause();
+    clearContainer(this.target);
+    this.active = undefined;
+  });
+}
+
+// src/scene/vfx.ts
+import { Effect as Effect16 } from "effect";
+import { Container as Container17 } from "pixi.js";
+class Vfx {
+  target;
+  world;
+  design;
+  constructor(parent, world, design) {
+    this.world = world;
+    this.design = design;
+    this.target = new Container17;
+    this.target.label = "Vfx";
+    parent.addChild(this.target);
+  }
+  play = (effect, duration, instant = false) => {
+    const target = new Container17;
+    target.label = `Vfx:${effect.effect}`;
+    this.target.alpha = 1;
+    this.target.addChild(target);
+    const seconds = duration ?? (typeof effect.params.duration === "number" ? effect.params.duration : 0);
+    if (instant)
+      return Effect16.sync(() => {
+        target.alpha = 0;
+        target.removeFromParent();
+        target.visible = false;
+        this.target.alpha = 0;
+      });
+    return EffectCatalogue.build(effect.effect, target, effect.params, seconds, { design: this.design, overlay: target }).pipe(Effect16.catch(() => Effect16.succeed([])), Effect16.flatMap((behaviours) => Effect16.forEach(behaviours, (behaviour) => this.world.run(target, behaviour), { discard: true })), Effect16.tap(() => Effect16.sync(() => {
+      target.alpha = 0;
+      target.removeFromParent();
+      target.visible = false;
+      this.target.alpha = 0;
+    })));
+  };
+}
+
+// src/presenter/pixiPresenter.ts
+var PixiPresenterTag = Context4.Service("Lute.Web.PixiPresenter");
+
+class PixiPresenter {
+  static layer = (bindings, theme, assets) => Layer4.effect(PixiPresenterTag, Effect17.gen(function* () {
+    const pixi = yield* PixiApp;
+    const world = yield* World;
+    const ui = yield* UiTag;
+    return new PixiPresenter({ pixi, world, ui, assets, bindings, theme });
+  }));
+  stage;
+  showLine;
+  revealLine;
+  clearLine;
+  restore;
+  showChoice;
+  hideChoice;
+  showScreen;
+  hideScreen;
+  setUiHidden;
+  applySettings;
+  capture;
+  actions;
+  pixi;
+  world;
+  ui;
+  assets;
+  bindings;
+  theme;
+  logger;
+  actors = new Map;
+  background;
+  cg;
+  video;
+  camera;
+  vfx;
+  dialogue;
+  choice;
+  choiceActions;
+  missing = new Set;
+  uiHidden = false;
+  constructor(options) {
+    this.pixi = options.pixi;
+    this.world = options.world;
+    this.ui = options.ui;
+    this.assets = options.assets;
+    this.bindings = options.bindings;
+    this.theme = options.theme;
+    this.logger = options.logger ?? ((message, error) => console.warn(message, error));
+    const design = this.pixi.design;
+    this.background = new Background(this.pixi.layers.background, this.world, this.bindings, this.assets, design, this.theme, (message) => this.logMissing(message));
+    this.cg = new CgLayer(this.pixi.layers.cg, this.world, this.bindings, this.assets, design, this.theme, (message) => this.logMissing(message));
+    this.video = new VideoLayer(this.pixi.layers.video, this.world, this.bindings, this.assets, design, this.theme, (message) => this.logMissing(message));
+    this.camera = new Camera(this.pixi.layers.camera, this.pixi.layers.actors, this.world, this.bindings, design, (message) => this.logMissing(message));
+    this.vfx = new Vfx(this.pixi.layers.overlay, this.world, design);
+    const nameColors = {};
+    for (const [character, binding] of Object.entries(this.bindings.characters ?? {})) {
+      if (binding.nameColor !== null && binding.nameColor !== undefined) {
+        const text = binding.nameColor.replace(/^#/, "");
+        if (/^[0-9a-f]{6}$/i.test(text))
+          nameColors[character] = Number.parseInt(text, 16);
+      }
+    }
+    const textStyles = Object.fromEntries(Object.entries(this.bindings.textStyles ?? {}).map(([name, style]) => [name, {
+      ...style.fontWeight === null ? {} : { fontWeight: style.fontWeight },
+      ...style.fontStyle === null ? {} : { fontStyle: style.fontStyle },
+      ...style.color === null ? {} : { color: style.color },
+      ...style.alpha === null ? {} : { alpha: style.alpha },
+      ...style.scale === null ? {} : { scale: style.scale },
+      ...style.letterSpacing === null ? {} : { letterSpacing: style.letterSpacing }
+    }]));
+    this.dialogue = new DialogueWindow(this.pixi.layers.dialogue, this.world, this.theme, { nameColors, textStyles });
+    this.dialogue.relayout(design);
+    this.choice = new ChoiceMenu(this.pixi.layers.choice, this.theme);
+    this.choiceActions = Effect17.runSync(PubSub2.unbounded());
+    this.actions = Stream6.merge(this.ui.actions, Stream6.fromPubSub(this.choiceActions));
+    this.stage = (cue, mode) => this.stageCue(cue, mode);
+    this.showLine = (line, mode) => this.dialogue.show(line, this.defaultSettings, mode);
+    this.revealLine = this.dialogue.reveal;
+    this.clearLine = this.dialogue.clear;
+    this.restore = (stage) => this.restoreStage(stage);
+    this.showChoice = (choice, remaining) => this.showChoiceInternal(choice, remaining);
+    this.hideChoice = this.choice.hide;
+    this.showScreen = (screen) => {
+      const modal = ["Menu", "Backlog", "SaveLoad", "Settings", "Confirm"].includes(screen._tag);
+      const hideDialogue = modal ? Effect17.void : Effect17.andThen(this.dialogue.clear, Effect17.sync(() => {
+        this.dialogue.setHidden(true);
+      }));
+      return Effect17.andThen(hideDialogue, screen._tag === "Title" && options.titleBackground !== undefined ? this.ui.show({ ...screen, background: options.titleBackground }) : this.ui.show(screen));
+    };
+    this.hideScreen = Effect17.andThen(this.ui.hide, Effect17.sync(() => {
+      this.dialogue.setHidden(this.uiHidden);
+    }));
+    this.setUiHidden = (hidden) => Effect17.sync(() => {
+      this.uiHidden = hidden;
+      this.dialogue.setHidden(hidden);
+    });
+    this.applySettings = (settings) => Effect17.sync(() => {
+      this.defaultSettings = { ...this.defaultSettings, ...settings };
+      this.dialogue.setOpacity(this.defaultSettings.windowOpacity);
+    });
+    this.capture = Effect17.tryPromise(() => this.pixi.app.renderer.extract.base64({ target: this.pixi.app.stage, format: "png", resolution: Math.min(320 / design.width, 180 / design.height) })).pipe(Effect17.catch(() => Effect17.succeed("data:image/png;base64,")));
+  }
+  defaultSettings = { locale: "", textSpeed: 30, windowOpacity: 1, autoDelay: 1, readColour: true, skipMode: "all", rollbackDepth: 0, volumes: { master: 1, music: 1, sfx: 1, voice: 1 } };
+  stageCue = (cue, mode) => {
+    const instant = mode === "skip";
+    switch (cue._tag) {
+      case "Background":
+        return this.background.set(cue.bg, cue.transition, instant, cue.duration);
+      case "ActorShow":
+        return this.upsertActor(cue.actor, cue.action, instant, cue.duration);
+      case "ActorExit":
+        return this.exitActor(cue.character, cue.action, instant, cue.duration);
+      case "Cg":
+        return this.cg.show(cue.cg, cue.transition, instant, cue.duration);
+      case "Video":
+        return cue.video === null ? this.video.hide() : this.video.show(cue.video, cue.blocking, instant);
+      case "Sequence": {
+        const file = cue.video === undefined ? this.bindings.sequences?.[cue.name]?.video : cue.video;
+        const stageVideo = file === undefined ? null : { assetId: file };
+        return stageVideo === null ? this.video.hide() : this.video.show(stageVideo, true, instant);
+      }
+      case "Camera": {
+        return Effect17.sync(() => this.camera.apply(cue.framing, cue.focus)).pipe(Effect17.flatMap(() => this.camera.move(cue.move ?? cue.transition, cue.duration, instant)));
+      }
+      case "Vfx":
+        return this.vfx.play(cue.effect, cue.duration, instant);
+    }
+  };
+  upsertActor = (actor, action, instant, duration) => {
+    const current = this.actors.get(actor.character);
+    if (current === undefined) {
+      const created = new ActorSprite(this.pixi.layers.actors, actor, this.world, this.bindings, this.assets, this.pixi.design, this.theme, (message) => this.logMissing(message));
+      this.actors.set(actor.character, created);
+      return created.play(action, instant, duration);
+    }
+    current.updateTexture(actor);
+    return current.play(action, instant, duration);
+  };
+  exitActor = (character, action, instant, duration) => {
+    const actor = this.actors.get(character);
+    if (actor === undefined)
+      return Effect17.void;
+    this.actors.delete(character);
+    return actor.play(action, instant, duration).pipe(Effect17.tap(() => Effect17.sync(() => actor.destroy())));
+  };
+  restoreStage = (stage) => Effect17.sync(() => {
+    clearContainer(this.pixi.layers.background);
+    clearContainer(this.pixi.layers.cg);
+    clearContainer(this.pixi.layers.video);
+    clearContainer(this.pixi.layers.actors);
+    this.actors.clear();
+    this.camera.clear();
+  }).pipe(Effect17.flatMap(() => this.background.set(stage.bg, undefined, true)), Effect17.flatMap(() => Effect17.forEach(stage.actors, (actor) => this.upsertActor(actor, undefined, true), { discard: true })), Effect17.flatMap(() => this.cg.show(stage.cg, undefined, true)), Effect17.flatMap(() => this.video.show(stage.video, false, true)));
+  showChoiceInternal = (choice, remaining) => this.choice.show(choice, remaining).pipe(Effect17.catch(() => Effect17.succeed("")), Effect17.tap((option) => Effect17.sync(() => {
+    Effect17.runSync(PubSub2.publish(this.choiceActions, { type: "choose", option }));
+  })));
+  logMissing = (message) => {
+    if (this.missing.has(message))
+      return;
+    this.missing.add(message);
+    this.logger(message);
+  };
+}
+
+// src/input/map.ts
+import { Effect as Effect18, Queue as Queue2, Stream as Stream7 } from "effect";
+var defaultInputMap = {
+  keyboard: {
+    Enter: { type: "advance" },
+    " ": { type: "advance" },
+    a: { type: "toggleAuto" },
+    A: { type: "toggleAuto" },
+    s: { type: "toggleSkip" },
+    S: { type: "toggleSkip" },
+    Escape: { type: "openMenu" },
+    PageUp: { type: "openBacklog" },
+    F5: { type: "quickSave" },
+    F9: { type: "quickLoad" },
+    h: { type: "hideUI" },
+    H: { type: "hideUI" },
+    Backspace: { type: "rollback" }
+  },
+  pointer: { click: { type: "advance" }, contextmenu: { type: "openMenu" }, middle: { type: "hideUI" } }
+};
+function resolveKeyboardAction(event, map = defaultInputMap) {
+  if (event.key === "Control")
+    return;
+  const binding = map.keyboard[event.key];
+  if (binding === undefined)
+    return;
+  if (isKeyBinding(binding)) {
+    if (binding.ctrl !== undefined && binding.ctrl !== event.ctrlKey)
+      return;
+    if (binding.shift !== undefined && binding.shift !== event.shiftKey)
+      return;
+    if (binding.alt !== undefined && binding.alt !== event.altKey)
+      return;
+    return binding.action;
+  }
+  return binding;
+}
+
+class LongPressRecognizer {
+  started = -1;
+  emitted = false;
+  start(at) {
+    this.started = at;
+    this.emitted = false;
+  }
+  end(at, threshold = 500) {
+    const result = this.started >= 0 && at - this.started >= threshold && !this.emitted;
+    this.started = -1;
+    this.emitted = result;
+    return result;
+  }
+  check(at, threshold = 500) {
+    if (this.started < 0 || this.emitted || at - this.started < threshold)
+      return false;
+    this.emitted = true;
+    return true;
+  }
+  cancel() {
+    this.started = -1;
+    this.emitted = false;
+  }
+}
+
+class SwipeRecognizer {
+  startY = 0;
+  active = false;
+  start(y) {
+    this.startY = y;
+    this.active = true;
+  }
+  end(y, threshold = 48) {
+    if (!this.active)
+      return;
+    this.active = false;
+    const delta = y - this.startY;
+    if (Math.abs(delta) < threshold)
+      return;
+    return delta < 0 ? "up" : "down";
+  }
+}
+function layer(element, map = defaultInputMap, uiConsumes, uiPointer) {
+  let emit = () => {};
+  return Stream7.callback((queue) => Effect18.acquireRelease(Effect18.sync(() => {
+    emit = (action) => {
+      Queue2.offerUnsafe(queue, action);
+    };
+    const longPress = new LongPressRecognizer;
+    const swipe = new SwipeRecognizer;
+    let controlHeld = false;
+    const down = (event) => {
+      if (uiConsumes?.() === true || event.defaultPrevented) {
+        longPress.cancel();
+        return;
+      }
+      longPress.start(event.timeStamp);
+      swipe.start(event.clientY);
+      window.setTimeout(() => {
+        if (longPress.check(performance.now()))
+          emit({ type: "openMenu" });
+      }, 500);
+    };
+    const up = (event) => {
+      if (event.button !== 0)
+        return;
+      if (uiConsumes?.() === true) {
+        longPress.cancel();
+        uiPointer?.(event);
+        return;
+      }
+      const long = longPress.end(event.timeStamp);
+      if (long)
+        emit({ type: "openMenu" });
+      else if (swipe.end(event.clientY) === "down")
+        emit({ type: "openBacklog" });
+      else
+        emit(map.pointer.click ?? { type: "advance" });
+    };
+    const key = (event) => {
+      if (event.defaultPrevented)
+        return;
+      if (uiConsumes?.() === true) {
+        event.preventDefault();
+        return;
+      }
+      if (event.key === "Control" && !controlHeld) {
+        controlHeld = true;
+        emit({ type: "skipHold", held: true });
+      }
+      const action = resolveKeyboardAction(event, map);
+      if (action !== undefined) {
+        event.preventDefault();
+        emit(action);
+      }
+    };
+    const keyup = (event) => {
+      if (event.key === "Control" && controlHeld) {
+        controlHeld = false;
+        emit({ type: "skipHold", held: false });
+      }
+    };
+    const wheel = (event) => {
+      if (event.deltaY < 0) {
+        event.preventDefault();
+        emit({ type: "openBacklog" });
+      }
+      if (event.defaultPrevented)
+        return;
+    };
+    const pointer = (event) => {
+      if (event.button === 1) {
+        event.preventDefault();
+        emit(map.pointer.middle ?? { type: "hideUI" });
+      }
+      if (event.button === 2) {
+        event.preventDefault();
+        emit(map.pointer.contextmenu ?? { type: "openMenu" });
+      }
+    };
+    const cancel = () => longPress.cancel();
+    const context = (event) => event.preventDefault();
+    element.addEventListener("keydown", key);
+    element.addEventListener("keyup", keyup);
+    element.addEventListener("pointerdown", down);
+    element.addEventListener("pointerup", up);
+    element.addEventListener("pointercancel", cancel);
+    element.addEventListener("pointerup", pointer);
+    element.addEventListener("wheel", wheel, { passive: false });
+    element.addEventListener("contextmenu", context);
+    return { key, keyup, down, up, pointer, wheel, cancel, context, longPress };
+  }), (registered) => Effect18.sync(() => {
+    element.removeEventListener("keydown", registered.key);
+    element.removeEventListener("keyup", registered.keyup);
+    element.removeEventListener("pointerdown", registered.down);
+    element.removeEventListener("pointerup", registered.up);
+    element.removeEventListener("pointercancel", registered.cancel);
+    element.removeEventListener("pointerup", registered.pointer);
+    element.removeEventListener("wheel", registered.wheel);
+    element.removeEventListener("contextmenu", registered.context);
+    registered.longPress.cancel();
+    emit = () => {};
+  })));
+}
+function isKeyBinding(value) {
+  return "action" in value;
+}
+// src/input/index.ts
+var Input = { layer };
+
+// src/theme.ts
+var DEFAULTS = {
+  font: "sans-serif",
+  text: 16777215,
+  accent: 14729344,
+  panel: 1052696,
+  panelAlpha: 0.82,
+  readText: 10132138
+};
+var parseColour = (value, fallback) => {
+  if (typeof value !== "string")
+    return fallback;
+  const text = value.trim().replace(/^#/, "").replace(/^0x/i, "");
+  return /^[0-9a-f]{6}$/i.test(text) ? Number.parseInt(text, 16) : fallback;
+};
+var themeFromBindings = (bindings) => {
+  const ui = bindings?.ui;
+  const colours = ui?.theme;
+  const alpha = typeof colours?.panelAlpha === "string" ? Number(colours.panelAlpha) : Number.NaN;
+  return {
+    font: ui?.font ?? DEFAULTS.font,
+    text: parseColour(colours?.text, DEFAULTS.text),
+    accent: parseColour(colours?.accent, DEFAULTS.accent),
+    panel: parseColour(colours?.panel, DEFAULTS.panel),
+    panelAlpha: Number.isFinite(alpha) ? Math.max(0, Math.min(1, alpha)) : DEFAULTS.panelAlpha,
+    readText: parseColour(colours?.readText, DEFAULTS.readText)
+  };
+};
+var defaultTheme = DEFAULTS;
+
+// src/mount.ts
+var slash = (value) => value.endsWith("/") ? value : `${value}/`;
+var isUrl = (value) => /^[a-z][a-z\d+.-]*:/i.test(value);
+var absoluteUrl = (value) => {
+  try {
+    return new URL(value, typeof globalThis.location === "object" ? globalThis.location.href : "http://localhost/").href;
+  } catch {
+    return value;
+  }
+};
+var resolveBase = (source, bindings, assetsUrl) => {
+  if (assetsUrl !== undefined)
+    return slash(assetsUrl);
+  const configured = bindings.assetsBase ?? "assets/";
+  if (isUrl(configured))
+    return slash(configured);
+  if (typeof source === "object" && source !== null && "url" in source)
+    return new URL(configured, source.url).href;
+  const origin = typeof globalThis.location === "object" ? globalThis.location.href : "http://localhost/";
+  return new URL(configured, origin).href;
+};
+var resolveAsset = (bindings, base, file) => {
+  const mapped = bindings.assets?.[file] ?? file;
+  if (isUrl(mapped))
+    return mapped;
+  try {
+    return new URL(mapped.replace(/^\/+/, ""), slash(base)).href;
+  } catch {
+    const origin = typeof globalThis.location === "object" ? globalThis.location.href : "http://localhost/";
+    return new URL(mapped.replace(/^\/+/, ""), new URL(slash(base), origin)).href;
+  }
+};
+var loadBindings = (source) => {
+  if (typeof source === "string")
+    return BindingsLoader.decode(source);
+  if (typeof source === "object" && source !== null && "url" in source) {
+    return BindingsLoader.loadUrl(source.url).pipe(Effect19.provide(FetchHttpClient.layer));
+  }
+  return Effect19.succeed(source);
+};
+var namespacedStorage = (key) => Effect19.map(Layer5.build(BrowserKeyValueStore.layerLocalStorage), (context) => Layer5.succeed(KeyValueStore.KeyValueStore, KeyValueStore.prefix(Context5.get(context, KeyValueStore.KeyValueStore), `${key}:`)));
+var runMount = (element, options, bindings, assetsBase) => {
+  const theme = themeFromBindings(bindings);
+  const pixiLayer = PixiApp.layer(element, bindings.canvas);
+  const worldLayer = World.layer.pipe(Layer5.provideMerge(pixiLayer));
+  return Effect19.gen(function* () {
+    const services = yield* Layer5.build(worldLayer);
+    const pixi = Context5.get(services, PixiApp);
+    const world = Context5.get(services, World);
+    const assetsOptions = { assetsBase, backend: pixiAssetsBackend };
+    const assets = new PixiAssets(assetsOptions);
+    const ui = new Ui(pixi.layers.overlay, theme, world, (file) => assets.texture(file));
+    ui.setDesign(bindings.canvas, "Lute");
+    const resolveSound = (file) => resolveAsset(bindings, assetsBase, file);
+    const audio = new PixiAudio({
+      backend: {
+        load: (file) => pixiSoundBackend.load(resolveSound(file)),
+        play: (file, playOptions) => pixiSoundBackend.play(resolveSound(file), playOptions),
+        unlock: pixiSoundBackend.unlock
+      }
+    });
+    const title = bindings.ui?.title;
+    const titleBackground = title === undefined || title === null ? undefined : resolveAsset(bindings, assetsBase, title.background);
+    if (titleBackground !== undefined)
+      yield* assets.ensure([titleBackground]);
+    const presenterOptions = titleBackground === undefined ? { pixi, world, ui, assets, bindings, theme } : { pixi, world, ui, assets, bindings, theme, titleBackground };
+    const presenter = new PixiPresenter(presenterOptions);
+    const storage = yield* namespacedStorage(options.storageKey ?? "lute");
+    const requirements = Layer5.mergeAll(RuntimeBrowser.runtime(absoluteUrl(options.wasmUrl)), RuntimeBrowser.bundle(absoluteUrl(slash(options.bundleUrl))), Runtime.InputLog.memory, storage);
+    const playerOptions = options.host === undefined ? { bindings, presenter, audio, assets } : { bindings, presenter, audio, assets, host: options.host };
+    const player = yield* LutePlayer.make(playerOptions).pipe(Effect19.provide(requirements));
+    let unlocked = false;
+    const dispatch = (action) => Effect19.gen(function* () {
+      if (!unlocked) {
+        unlocked = true;
+        yield* audio.unlock.pipe(Effect19.catch(() => Effect19.void));
+      }
+      yield* player.actions(action);
+    });
+    const keys = (event) => {
+      if (ui.handleKey(event.key))
+        event.preventDefault();
+    };
+    element.addEventListener("keydown", keys, true);
+    yield* Effect19.addFinalizer(() => Effect19.sync(() => element.removeEventListener("keydown", keys, true)));
+    yield* Effect19.forkScoped(Stream8.runForEach(Input.layer(element, undefined, () => ui.hasScreen, (event) => ui.pointerAction(event.clientX, event.clientY)), dispatch));
+    yield* Effect19.forkScoped(Stream8.runForEach(SubscriptionRef3.changes(player.view), (view) => Effect19.sync(() => {
+      ui.setPlaying(view.flow === "playing" && view.story !== "idle", { auto: view.mode === "auto", skip: view.mode === "skip", hidden: view.uiHidden });
+    })));
+    if (title !== undefined && title !== null) {
+      const file = resolveAsset(bindings, assetsBase, title.music);
+      yield* Effect19.forkScoped(audio.play("music", { file, loop: true, volume: 1, fade: 0 }).pipe(Effect19.catch(() => Effect19.void)));
+    }
+    return player;
+  });
+};
+var mount = (element, options) => Effect19.flatMap(loadBindings(options.bindings), (bindings) => runMount(element, options, bindings, resolveBase(options.bindings, bindings, options.assetsUrl)));
+var mountPlayer = async (element, options) => {
+  const runtime = ManagedRuntime.make(Layer5.empty);
+  const scope = Scope2.makeUnsafe("parallel");
+  try {
+    const handle = await runtime.runPromise(Effect19.provideService(mount(element, options), Scope2.Scope, scope));
+    let closed = false;
+    return {
+      unmount: async () => {
+        if (closed)
+          return;
+        closed = true;
+        await runtime.runPromise(handle.shutdown);
+        await runtime.runPromise(Scope2.close(scope, Exit.void));
+        await runtime.dispose();
+      },
+      view: () => runtime.runPromise(SubscriptionRef3.get(handle.view)),
+      act: (action) => runtime.runPromise(handle.actions(action))
+    };
+  } catch (error) {
+    await runtime.dispose();
+    await Scope2.close(scope, Exit.fail(error));
+    throw error;
+  }
+};
+var LuteWeb = { mount, mountPlayer };
+export {
+  Input,
+  LuteWeb,
+  defaultTheme,
+  mount,
+  mountPlayer,
+  parseColour,
+  themeFromBindings
+};