1681-engine 0.0.0-stage → 0.5.9

package/dist/ui/Label.js

@@ -0,0 +1,35 @@
+import { BitmapLabel as x } from "../core/BitmapLabel.js";
+import { Text as m } from "../core/Text.js";
+import { Widget as c } from "./Widget.js";
+class i extends c {
+  constructor(t) {
+    super(), this.text = t, t.anchor.set(0, 0), t.position.set(0, 0), this.addChild(t), this.last = t.text, this.measure();
+  }
+  text;
+  last = "";
+  /** A label printed with a canvas `Text`. */
+  static text(t, s) {
+    return new i(new m(0, 0, t, s));
+  }
+  /** A label printed from a bitmap font (see `installLabelFont`; `glyphs` beyond ASCII it will print). */
+  static bitmap(t, s, e, h, r = "#000000", o = 0, a = 1, n = "") {
+    return new i(new x(0, 0, t, s, e, h, r, o, a, n));
+  }
+  get value() {
+    return this.last;
+  }
+  /** Changes the text; the same string again costs nothing (a HUD may set it every frame). */
+  setText(t) {
+    return t === this.last ? this : (this.last = t, this.text.text = t, this.measure(), this);
+  }
+  measure() {
+    const t = this.boxW, s = this.boxH;
+    this.boxW = Math.ceil(this.text.width), this.boxH = Math.ceil(this.text.height), (this.boxW !== t || this.boxH !== s) && this.notifyResized();
+  }
+  redraw() {
+    this.alpha = this.enabled ? 1 : 0.5;
+  }
+}
+export {
+  i as Label
+};

package/dist/ui/List.js

@@ -0,0 +1,44 @@
+import { stackLayout as n } from "./layout/stack.js";
+import { ScrollView as c } from "./ScrollView.js";
+import { sizeOf as a, Widget as l } from "./Widget.js";
+class m extends c {
+  constructor(t) {
+    super(t), this.listOptions = t;
+  }
+  listOptions;
+  rows = [];
+  get items() {
+    return this.rows;
+  }
+  add(...t) {
+    for (const s of t)
+      this.rows.push(s), this.content.addChild(s);
+    return this.relayout();
+  }
+  remove(t, s = !1) {
+    const e = this.rows.indexOf(t);
+    return e >= 0 && this.rows.splice(e, 1), t.parent === this.content && this.content.removeChild(t), s && t.destroy({ children: !0 }), this.relayout();
+  }
+  clear(t = !0) {
+    for (const s of this.rows.splice(0))
+      this.content.removeChild(s), t && s.destroy({ children: !0 });
+    return this.relayout();
+  }
+  /** Lays the rows out again (after a row changed size). */
+  relayout() {
+    const t = this.listOptions.padding ?? 0, s = this.listOptions.stretch ?? !0, e = this.host?.pixelPerfect ?? !1, r = n(this.rows.map(a), {
+      gap: this.listOptions.gap ?? 0,
+      padding: t,
+      align: s ? "stretch" : "start",
+      crossSize: this.boxWidth - 2 * t,
+      snap: e
+    });
+    return this.rows.forEach((i, h) => {
+      const o = r.items[h];
+      i.position.set(o.x, o.y), s && i instanceof l && i.boxWidth !== o.width && i.resize(o.width, i.boxHeight);
+    }), this.setContentHeight(r.height), this.host?.invalidateFocus(), this;
+  }
+}
+export {
+  m as List
+};

package/dist/ui/Panel.js

@@ -0,0 +1,37 @@
+import { NineSliceSprite as a, Graphics as n, Rectangle as c } from "pixi.js";
+import { Widget as f } from "./Widget.js";
+class x extends f {
+  constructor(i, e, l, s = {}) {
+    if (super(), this.skin = i, "texture" in i) {
+      const { left: t, top: h, right: o, bottom: r } = i.insets;
+      this.slice = new a({ texture: i.texture, leftWidth: t, topHeight: h, rightWidth: o, bottomHeight: r }), this.addChild(this.slice);
+    } else
+      this.box = new n(), this.addChild(this.box);
+    (s.blocksPointer ?? !0) && (this.makeInteractive(), this.hitArea = new c(0, 0, 0, 0)), this.resize(e, l);
+  }
+  skin;
+  slice = null;
+  box = null;
+  redraw() {
+    const i = this.boxW, e = this.boxH;
+    if (this.hitArea instanceof c && (this.hitArea.width = i, this.hitArea.height = e), this.slice) {
+      this.slice.roundPixels = this.host?.pixelPerfect ?? !1, this.slice.width = i, this.slice.height = e;
+      return;
+    }
+    const l = this.skin, s = this.box;
+    s.clear();
+    const t = l.border ?? 0, h = l.fillAlpha ?? l.alpha ?? 1, o = l.borderAlpha ?? l.alpha ?? 1;
+    if (!(i <= 0 || e <= 0))
+      if (t > 0) {
+        const r = { color: l.borderColor ?? 16777215, alpha: o };
+        if (i <= 2 * t || e <= 2 * t) {
+          s.rect(0, 0, i, e).fill(r);
+          return;
+        }
+        s.rect(0, 0, i, t).fill(r), s.rect(0, e - t, i, t).fill(r), s.rect(0, t, t, e - 2 * t).fill(r), s.rect(i - t, t, t, e - 2 * t).fill(r), h > 0 && s.rect(t, t, i - 2 * t, e - 2 * t).fill({ color: l.color, alpha: h });
+      } else h > 0 && s.rect(0, 0, i, e).fill({ color: l.color, alpha: h });
+  }
+}
+export {
+  x as Panel
+};

package/dist/ui/ScrollView.js

@@ -0,0 +1,95 @@
+import { Sprite as a, Texture as l, Rectangle as r, Container as c, Graphics as f } from "pixi.js";
+import { clampScroll as p, scrollIntoView as d, stepFling as g, maxScroll as u } from "./layout/scroll.js";
+import { Widget as n } from "./Widget.js";
+class w extends n {
+  constructor(t) {
+    super(), this.options = t, this.addChild(this.content, this.clip), this.content.mask = this.clip;
+    const s = t.barColor === void 0 ? 16777215 : t.barColor;
+    this.bar = s === null ? null : new a(l.WHITE), this.bar && (this.bar.tint = s, this.bar.alpha = 0.4, this.addChild(this.bar)), this.makeInteractive(), this.hitArea = new r(0, 0, 0, 0), this.on("wheel", (i) => {
+      const o = t.wheelStep ?? 48, e = Math.max(-o, Math.min(o, i.deltaY));
+      this.scrollTo(this.offset + e) && i.stopPropagation();
+    }), this.on("pointerdown", (i) => this.dragStart(i)), this.resize(t.width, t.height);
+  }
+  options;
+  content = new c();
+  /** True from the moment a press became a drag until the next press: buttons inside ignore that tap. */
+  suppressesTaps = !1;
+  clip = new f();
+  bar;
+  offset = 0;
+  contentH = 0;
+  velocity = 0;
+  ticking = !1;
+  clipW = -1;
+  clipH = -1;
+  dragFrom = 0;
+  dragOffset = 0;
+  lastY = 0;
+  lastT = 0;
+  onMove = (t) => this.dragMove(t);
+  onUp = () => this.dragEnd();
+  get scrollY() {
+    return this.offset;
+  }
+  get contentHeight() {
+    return this.contentH;
+  }
+  /** Sets how tall the content is (default: measured from it by `measure`). */
+  setContentHeight(t) {
+    return this.contentH = Math.max(0, t), this.scrollTo(this.offset), this.redraw(), this;
+  }
+  /** Measures the content's drawn height; call after filling it. */
+  measure() {
+    const t = this.content.getLocalBounds();
+    return this.setContentHeight(t.maxY);
+  }
+  /** Scrolls to `y`, kept in range; true when it moved. */
+  scrollTo(t) {
+    const s = p(t, this.contentH, this.boxH);
+    return s === this.offset ? !1 : (this.offset = s, this.redraw(), !0);
+  }
+  /** Brings a child into view (the focus manager calls it when a widget inside is focused). */
+  reveal(t) {
+    const s = this.content.toLocal(t.getGlobalPosition()).y, i = t instanceof n ? t.boxHeight : t.getLocalBounds().maxY;
+    this.velocity = 0, this.scrollTo(d(this.offset, s, i, this.boxH, this.contentH));
+  }
+  tick(t) {
+    if (this.destroyed || this.velocity === 0) return this.ticking = !1;
+    const s = this.scrollTo(this.offset + this.velocity * t / 1e3);
+    return this.velocity = s ? g(this.velocity, t) : 0, this.ticking = this.velocity !== 0, this.ticking;
+  }
+  destroy() {
+    this.dragEnd(), super.destroy({ children: !0 });
+  }
+  dragStart(t) {
+    this.suppressesTaps = !1, this.velocity = 0, this.dragFrom = t.global.y, this.dragOffset = this.offset, this.lastY = t.global.y, this.lastT = performance.now(), this.on("globalpointermove", this.onMove), this.on("pointerup", this.onUp), this.on("pointerupoutside", this.onUp);
+  }
+  dragMove(t) {
+    const s = t.global.y;
+    if (!this.suppressesTaps && Math.abs(s - this.dragFrom) < (this.options.dragSlop ?? 6)) return;
+    this.suppressesTaps = !0;
+    const i = performance.now(), o = i - this.lastT;
+    o > 0 && (this.velocity = (this.lastY - s) / o * 1e3), this.lastY = s, this.lastT = i, this.scrollTo(this.dragOffset + (this.dragFrom - s));
+  }
+  dragEnd() {
+    if (this.off("globalpointermove", this.onMove), this.off("pointerup", this.onUp), this.off("pointerupoutside", this.onUp), performance.now() - this.lastT > 80 && (this.velocity = 0), this.velocity !== 0 && !this.ticking) {
+      const t = this.host;
+      t ? (this.ticking = !0, t.animate(this)) : this.velocity = 0;
+    }
+  }
+  redraw() {
+    const t = this.boxW, s = this.boxH;
+    (t !== this.clipW || s !== this.clipH) && (this.clipW = t, this.clipH = s, this.clip.clear().rect(0, 0, t, s).fill(16777215)), this.hitArea instanceof r && (this.hitArea.width = t, this.hitArea.height = s);
+    const i = this.host?.pixelPerfect ?? !1;
+    if (this.content.y = i ? -Math.round(this.offset) : -this.offset, this.bar) {
+      const o = u(this.contentH, s);
+      if (this.bar.visible = o > 0, o > 0) {
+        const e = this.options.barWidth ?? 2, h = Math.max(8, Math.round(s * s / this.contentH));
+        this.bar.setSize(e, h), this.bar.position.set(t - e, Math.round(this.offset / o * (s - h)));
+      }
+    }
+  }
+}
+export {
+  w as ScrollView
+};

package/dist/ui/Slider.js

@@ -0,0 +1,54 @@
+import { Rectangle as r } from "pixi.js";
+import { quantize as n, sliderValueAt as a, sliderFraction as o } from "./layout/slider.js";
+import { Panel as s } from "./Panel.js";
+import { Widget as l } from "./Widget.js";
+class b extends l {
+  constructor(t) {
+    super(), this.options = t, this.focusable = !0, this.min = t.min ?? 0, this.max = t.max ?? 1, this.current = n(t.value ?? this.min, this.min, this.max, t.step), this.onChange = t.onChange ?? null, this.track = new s(t.track, t.width, t.height, { blocksPointer: !1 }), this.fill = t.fill ? new s(t.fill, 0, t.height, { blocksPointer: !1 }) : null, this.knob = new s(t.knob, t.knobWidth ?? t.height, t.height, { blocksPointer: !1 }), this.focusFace = t.focus ? new s(t.focus, t.width, t.height, { blocksPointer: !1 }) : null, this.addChild(this.track), this.fill && this.addChild(this.fill), this.focusFace && this.addChild(this.focusFace), this.addChild(this.knob), this.makeInteractive(), this.cursor = "pointer", this.hitArea = new r(0, 0, 0, 0), this.on("pointerdown", (i) => {
+      this.enabled && (this.on("globalpointermove", this.onMove), this.on("pointerup", this.onUp), this.on("pointerupoutside", this.onUp), this.dragTo(i));
+    }), this.resize(t.width, t.height);
+  }
+  options;
+  onChange;
+  min;
+  max;
+  current;
+  track;
+  fill;
+  knob;
+  focusFace;
+  onMove = (t) => this.dragTo(t);
+  onUp = () => this.endDrag();
+  get value() {
+    return this.current;
+  }
+  /** Sets it; `silent` skips `onChange`. */
+  setValue(t, i = !1) {
+    const e = n(t, this.min, this.max, this.options.step);
+    return e === this.current ? this : (this.current = e, this.redraw(), i || this.onChange?.(e), this);
+  }
+  navigate(t) {
+    if (t !== "left" && t !== "right") return !1;
+    const i = this.options.navStep ?? (this.options.step || (this.max - this.min) / 10);
+    return this.setValue(this.current + (t === "right" ? i : -i)), !0;
+  }
+  destroy() {
+    this.endDrag(), super.destroy({ children: !0 });
+  }
+  dragTo(t) {
+    const i = this.toLocal(t.global), e = this.knob.boxWidth;
+    this.setValue(a(i.x, e / 2, this.boxW - e, this.min, this.max, this.options.step));
+  }
+  endDrag() {
+    this.off("globalpointermove", this.onMove), this.off("pointerup", this.onUp), this.off("pointerupoutside", this.onUp);
+  }
+  redraw() {
+    const t = this.boxW, i = this.boxH;
+    this.track.resize(t, i), this.focusFace?.resize(t, i), this.focusFace && (this.focusFace.visible = this.focused && this.enabled), this.hitArea instanceof r && (this.hitArea.width = t, this.hitArea.height = i);
+    const e = this.knob.boxWidth, h = Math.round(o(this.current, this.min, this.max) * (t - e));
+    this.knob.place(h, 0), this.fill?.resize(h + Math.round(e / 2), i), this.alpha = this.enabled ? 1 : 0.5;
+  }
+}
+export {
+  b as Slider
+};

package/dist/ui/Stack.js

@@ -0,0 +1,27 @@
+import { stackLayout as n } from "./layout/stack.js";
+import { Widget as h, sizeOf as a } from "./Widget.js";
+class f extends h {
+  constructor(t = {}) {
+    super(), this.options = t;
+  }
+  options;
+  add(...t) {
+    for (const o of t) this.addChild(o);
+    return this.layout(), this.host?.invalidateFocus(), this;
+  }
+  remove(t, o = !1) {
+    return t.parent === this && this.removeChild(t), o && t.destroy({ children: !0 }), this.layout(), this.host?.invalidateFocus(), this;
+  }
+  layout() {
+    const t = this.children.filter((i) => i.visible), o = this.options.snap ?? this.host?.pixelPerfect ?? !1, e = n(t.map(a), { ...this.options, snap: o });
+    return t.forEach((i, r) => {
+      const s = e.items[r];
+      i.position.set(s.x, s.y), this.options.align === "stretch" && i instanceof h && (i.boxWidth !== s.width || i.boxHeight !== s.height) && i.resize(s.width, s.height);
+    }), this.boxW = e.width, this.boxH = e.height, this;
+  }
+  redraw() {
+  }
+}
+export {
+  f as Stack
+};

package/dist/ui/Toggle.js

@@ -0,0 +1,36 @@
+import { Sprite as s, Texture as h, Rectangle as r } from "pixi.js";
+import { Panel as i } from "./Panel.js";
+import { Widget as a } from "./Widget.js";
+class o extends a {
+  constructor(e) {
+    super(), this.options = e, this.focusable = !0, this.checked = e.value ?? !1, this.onChange = e.onChange ?? null, this.box = new i(e.box, e.size, e.size, { blocksPointer: !1 }), this.mark = typeof e.mark == "number" ? new s(h.WHITE) : new s(e.mark), typeof e.mark == "number" && (this.mark.tint = e.mark), this.focusFace = e.focus ? new i(e.focus, e.size, e.size, { blocksPointer: !1 }) : null, this.addChild(this.box, this.mark), this.focusFace && this.addChild(this.focusFace), this.makeInteractive(), this.cursor = "pointer", this.hitArea = new r(0, 0, e.size, e.size), this.on("pointertap", () => this.set(!this.checked)), this.resize(e.size, e.size);
+  }
+  options;
+  onChange;
+  checked;
+  box;
+  mark;
+  focusFace;
+  get value() {
+    return this.checked;
+  }
+  /** Sets it; `silent` skips `onChange` (mirroring a stored setting into the widget). */
+  set(e, t = !1) {
+    return e === this.checked || !t && !this.enabled ? this : (this.checked = e, this.redraw(), t || this.onChange?.(e), this);
+  }
+  activate() {
+    this.set(!this.checked);
+  }
+  redraw() {
+    const e = this.boxW;
+    if (this.box.resize(e, this.boxH), this.focusFace?.resize(e, this.boxH), this.focusFace && (this.focusFace.visible = this.focused && this.enabled), this.mark.visible = this.checked, typeof this.options.mark == "number") {
+      const t = Math.round(e / 4);
+      this.mark.setSize(e - 2 * t, this.boxH - 2 * t), this.mark.position.set(t, t);
+    } else
+      this.mark.position.set(Math.round((e - this.mark.texture.width) / 2), Math.round((this.boxH - this.mark.texture.height) / 2));
+    this.alpha = this.enabled ? 1 : 0.5;
+  }
+}
+export {
+  o as Toggle
+};

package/dist/ui/UiHost.js

@@ -0,0 +1,8 @@
+function e(r) {
+  for (let t = r; t; t = t.parent)
+    if (t.isUiHost === !0) return t;
+  return null;
+}
+export {
+  e as uiHostOf
+};

package/dist/ui/UiPointerGate.js

@@ -0,0 +1,24 @@
+import { Pointer as n } from "../core/Pointer.js";
+const t = /* @__PURE__ */ new WeakSet();
+let i = 0, r = null, s = null;
+const u = {
+  /** Marks a native event (a federated event's `nativeEvent`) as taken by the UI. */
+  consume(e) {
+    e && t.add(e);
+  },
+  /** Whether the UI took this native event (a game's own canvas listener may ask too). */
+  wasConsumed(e) {
+    return !!e && t.has(e);
+  },
+  /** Chains the gate into `Pointer.ignorePress`; counted, so two UI roots install it once. Returns the uninstall. */
+  install() {
+    i++ === 0 && (r = n.ignorePress, s = (l) => t.has(l) || (r?.(l) ?? !1), n.ignorePress = s);
+    let e = !1;
+    return () => {
+      e || (e = !0, !(--i > 0) && (n.ignorePress === s && (n.ignorePress = r), r = null, s = null));
+    };
+  }
+};
+export {
+  u as UiPointerGate
+};

package/dist/ui/UiRoot.js

@@ -0,0 +1,92 @@
+import { Container as h } from "pixi.js";
+import { Stage as o } from "../core/Stage.js";
+import { FocusManager as r, DEFAULT_NAV as c } from "./FocusManager.js";
+import { anchorPosition as p } from "./layout/anchor.js";
+import { UiPointerGate as a } from "./UiPointerGate.js";
+import { sizeOf as d } from "./Widget.js";
+class y extends h {
+  constructor(i, t = {}) {
+    super(), this.stage = i, this.pixelPerfect = t.pixelPerfect ?? i.cameras.main.roundPixels, this.focus = new r(this, { ...c, ...t.bindings }), (t.parent ?? i.screen).addChild(this), this.cleanup.push(i.onResize(() => this.layout()), a.install()), this.ticker = i.app.ticker, this.ticker.add(this.onTick);
+  }
+  stage;
+  isUiHost = !0;
+  pixelPerfect;
+  focus;
+  pins = [];
+  moving = /* @__PURE__ */ new Set();
+  modals = [];
+  cleanup = [];
+  ticker;
+  onTick = (i) => this.guardedUpdate(i.deltaMS);
+  /** The screen's size in screen pixels. */
+  get viewport() {
+    return { width: this.stage.width, height: this.stage.height };
+  }
+  /** A modal is open or a widget has focus: the game should leave its own actions alone this step. */
+  get capturesInput() {
+    return this.modals.length > 0 || this.focus.focused !== null;
+  }
+  /** Adds `child` and keeps it pinned to a screen anchor, `margin` in from the edges, through every resize. */
+  pin(i, t, s = 0) {
+    i.parent !== this && this.addChild(i);
+    const e = this.pins.findIndex((n) => n.child === i);
+    return e >= 0 && this.pins.splice(e, 1), this.pins.push({ child: i, anchor: t, margin: s }), this.place(this.pins[this.pins.length - 1]), this.invalidateFocus(), this;
+  }
+  unpin(i) {
+    const t = this.pins.findIndex((s) => s.child === i);
+    return t >= 0 && this.pins.splice(t, 1), this;
+  }
+  /** Places every pinned piece and open modal again (after one changed size; resizes do it by themselves). */
+  layout() {
+    for (let t = this.pins.length - 1; t >= 0; t--) {
+      const s = this.pins[t];
+      s.child.destroyed ? this.pins.splice(t, 1) : this.place(s);
+    }
+    const i = this.viewport;
+    for (const t of this.modals) t.layoutFor(i);
+  }
+  /** Opens a modal over everything: focus is trapped inside it until it closes. */
+  openModal(i) {
+    this.modals.includes(i) || (this.modals.push(i), this.addChild(i), i.layoutFor(this.viewport), this.focus.pushScope(i, () => i.cancel()));
+  }
+  closeModal(i) {
+    const t = this.modals.indexOf(i);
+    t < 0 || (this.modals.splice(t, 1), this.focus.popScope(i), i.parent === this && this.removeChild(i));
+  }
+  /** Reads one step of navigation input (call between `actions.poll()` and `endStep()`); true when the UI used it. */
+  handleInput(i) {
+    return this.focus.handle(i);
+  }
+  invalidateFocus() {
+    this.focus.invalidate();
+  }
+  animate(i) {
+    this.moving.add(i);
+  }
+  /** Ticks what is moving; called by the ticker, or by a game driving the UI itself. */
+  update(i) {
+    for (const t of this.moving) t.tick(i) || this.moving.delete(t);
+  }
+  destroy() {
+    if (!this.destroyed) {
+      this.ticker.remove(this.onTick);
+      for (const i of this.cleanup.splice(0)) i();
+      this.moving.clear(), this.pins.length = 0, this.modals.length = 0, super.destroy({ children: !0 });
+    }
+  }
+  place(i) {
+    const t = p(i.anchor, d(i.child), this.viewport, i.margin, this.pixelPerfect);
+    i.child.position.set(t.x, t.y);
+  }
+  /** A ticker listener that throws never asks for the next frame: the UI's faults are caught and reported once. */
+  guardedUpdate(i) {
+    try {
+      this.update(i);
+    } catch (t) {
+      this.moving.clear(), console.error("[ui] update failed", t), o.onCaught?.("[ui] update", t);
+    }
+  }
+}
+export {
+  y as UiRoot
+};

package/dist/ui/Widget.js

@@ -0,0 +1,89 @@
+import { Container as o } from "pixi.js";
+import { snapPx as i } from "./layout/geometry.js";
+import { uiHostOf as a } from "./UiHost.js";
+import { UiPointerGate as h } from "./UiPointerGate.js";
+function u(e) {
+  h.consume(e.nativeEvent);
+}
+class n extends o {
+  /** Whether the focus manager may land on it (buttons, sliders, toggles). */
+  focusable = !1;
+  boxW = 0;
+  boxH = 0;
+  isEnabled = !0;
+  isFocused = !1;
+  get boxWidth() {
+    return this.boxW;
+  }
+  get boxHeight() {
+    return this.boxH;
+  }
+  get enabled() {
+    return this.isEnabled;
+  }
+  set enabled(t) {
+    t !== this.isEnabled && (this.isEnabled = t, this.cursor = t && this.focusable ? "pointer" : "default", this.redraw(), this.host?.invalidateFocus());
+  }
+  get focused() {
+    return this.isFocused;
+  }
+  /** Called by the focus manager. */
+  setFocused(t) {
+    t !== this.isFocused && (this.isFocused = t, this.redraw());
+  }
+  /** Resizes the layout box (whole pixels under a pixel-perfect root) and redraws. */
+  resize(t, r) {
+    const s = this.host?.pixelPerfect ?? !1;
+    return this.boxW = Math.max(0, i(t, s)), this.boxH = Math.max(0, i(r, s)), this.redraw(), this;
+  }
+  /** Moves it, on whole pixels under a pixel-perfect root. */
+  place(t, r) {
+    const s = this.host?.pixelPerfect ?? !1;
+    return this.position.set(i(t, s), i(r, s)), this;
+  }
+  /** Focusable now: enabled, shown, and every parent shown. */
+  canFocus() {
+    if (!this.focusable || !this.isEnabled) return !1;
+    for (let t = this; t; t = t.parent) if (!t.visible) return !1;
+    return !0;
+  }
+  /** Accept pressed while focused (Enter, the pad's A). */
+  activate() {
+  }
+  /** A direction pressed while focused; true when the widget used it (a slider stepping) so focus stays. */
+  navigate(t) {
+    return !1;
+  }
+  /** The root it sits under, looked up when needed: a widget may be built before it is added. */
+  get host() {
+    return a(this);
+  }
+  /**
+   * Hit-tested by Pixi, and every press on it is kept from the world. A widget whose drawing has gaps (a scroll
+   * view, an empty panel) also sets a `hitArea` over its box, so a press between its pieces is not the world's.
+   */
+  makeInteractive() {
+    this.eventMode = "static", this.on("pointerdown", u);
+  }
+  /**
+   * A child widget's box changed size by itself (a `Label` given a longer text). A widget that places a child by its
+   * size (a `Button` centring its content) lays it out again here; the default does nothing, so a `Stack` still waits
+   * for its `layout()` and a change does not ripple up through every container.
+   */
+  childResized(t) {
+  }
+  /** Tells the parent widget this one's box changed size by itself. */
+  notifyResized() {
+    const t = this.parent;
+    t instanceof n && t.childResized(this);
+  }
+}
+function b(e) {
+  if (e instanceof n) return { width: e.boxWidth, height: e.boxHeight };
+  const t = e.getLocalBounds();
+  return { width: t.maxX, height: t.maxY };
+}
+export {
+  n as Widget,
+  b as sizeOf
+};

package/dist/ui/dom/DomOverlay.js

@@ -0,0 +1,58 @@
+class r {
+  constructor(t, s = {}) {
+    this.canvas = t, this.options = s;
+    const e = t.ownerDocument;
+    this.root = e.createElement("div"), this.content = e.createElement("div"), s.className && (this.root.className = s.className), Object.assign(this.root.style, { position: "absolute", overflow: "hidden", pointerEvents: "none", zIndex: String(s.zIndex ?? 1) }), Object.assign(this.content.style, { position: "absolute", left: "0", top: "0", transformOrigin: "0 0", pointerEvents: "none" }), this.root.appendChild(this.content), t.insertAdjacentElement("afterend", this.root), this.observer = typeof ResizeObserver == "function" ? new ResizeObserver(this.onWindow) : null, this.observer?.observe(t), window.addEventListener("resize", this.onWindow), this.sync();
+  }
+  canvas;
+  options;
+  root;
+  /** Where the UI goes: scaled by `scale`. */
+  content;
+  scaleNow = 1;
+  cssW = 0;
+  cssH = 0;
+  stretch = 1;
+  observer;
+  onWindow = () => this.sync();
+  /** Lets presses on `el` reach it (the overlay's root and content let them through to the canvas). */
+  static interactive(t) {
+    return t.style.pointerEvents = "auto", t;
+  }
+  /** The overlay's size in CSS pixels (the canvas's box). */
+  get width() {
+    return this.cssW;
+  }
+  get height() {
+    return this.cssH;
+  }
+  /** CSS pixels per screen pixel of the canvas: 1 unless CSS stretches it. */
+  get cssScale() {
+    return this.stretch;
+  }
+  get scale() {
+    return this.scaleNow;
+  }
+  /** Draws `content` at `scale` (also published as the CSS variable `--ui-scale`). */
+  setScale(t) {
+    t === this.scaleNow || !(t > 0) || (this.scaleNow = t, this.applySize());
+  }
+  /** Lines the overlay up with the canvas again; resizes do it by themselves. */
+  sync() {
+    const t = this.canvas, s = t.clientWidth, e = t.clientHeight, i = this.root.style;
+    if (i.left = `${t.offsetLeft + t.clientLeft}px`, i.top = `${t.offsetTop + t.clientTop}px`, s === this.cssW && e === this.cssH) return;
+    this.cssW = s, this.cssH = e, i.width = `${s}px`, i.height = `${e}px`;
+    const o = this.options.logicalSize?.();
+    this.stretch = o && o.width > 0 ? s / o.width : 1, this.applySize();
+  }
+  destroy() {
+    this.observer?.disconnect(), window.removeEventListener("resize", this.onWindow), this.root.remove();
+  }
+  applySize() {
+    const t = this.scaleNow, s = this.content.style;
+    s.width = `${this.cssW / t}px`, s.height = `${this.cssH / t}px`, s.transform = t === 1 ? "" : `scale(${t})`, this.root.style.setProperty("--ui-scale", String(t));
+  }
+}
+export {
+  r as DomOverlay
+};

package/dist/ui/dom/DomWorldAnchors.js

@@ -0,0 +1,58 @@
+import { UPDATE_PRIORITY as h } from "pixi.js";
+import { worldToScreen as l, onScreen as c } from "./worldToScreen.js";
+const i = { x: 0, y: 0 };
+class m {
+  constructor(s, o) {
+    this.overlay = s, this.layer = o;
+  }
+  overlay;
+  layer;
+  anchors = [];
+  ticker = null;
+  onTick = () => this.update();
+  /** Places `el` (put inside the overlay's content if it is not already there) on `target`. Returns the remover. */
+  add(s, o, a = {}) {
+    s.parentElement || this.overlay.content.appendChild(s), s.style.position = "absolute", s.style.left = "0", s.style.top = "0";
+    const t = (a.alignX ?? 0.5) * 100, e = (a.alignY ?? 1) * 100, n = {
+      el: s,
+      target: o,
+      ox: a.offsetX ?? 0,
+      oy: a.offsetY ?? 0,
+      align: t === 0 && e === 0 ? "" : ` translate(${-t}%, ${-e}%)`,
+      margin: a.margin ?? 64,
+      lastX: NaN,
+      lastY: NaN,
+      shown: !0
+    };
+    return this.anchors.push(n), () => this.remove(s);
+  }
+  remove(s) {
+    const o = this.anchors.findIndex((a) => a.el === s);
+    o >= 0 && this.anchors.splice(o, 1);
+  }
+  /**
+   * Runs `update` on `ticker` after Pixi renders (`UTILITY` priority), so it reads the camera as this frame drew it,
+   * shake included. The returned function stops it.
+   */
+  attach(s) {
+    return this.detach(), this.ticker = s, s.add(this.onTick, void 0, h.UTILITY), () => this.detach();
+  }
+  detach() {
+    this.ticker?.remove(this.onTick), this.ticker = null;
+  }
+  /** Places every element for this frame. */
+  update() {
+    const s = this.overlay.cssScale / this.overlay.scale, o = this.overlay.width / this.overlay.scale, a = this.overlay.height / this.overlay.scale;
+    for (const t of this.anchors) {
+      l(this.layer, t.target.x, t.target.y, i, s);
+      const e = Math.round(i.x + t.ox), n = Math.round(i.y + t.oy), r = c(e, n, o, a, t.margin);
+      r !== t.shown && (t.shown = r, t.el.style.display = r ? "" : "none"), !(!r || e === t.lastX && n === t.lastY) && (t.lastX = e, t.lastY = n, t.el.style.transform = `translate3d(${e}px, ${n}px, 0)${t.align}`);
+    }
+  }
+  destroy() {
+    this.detach(), this.anchors.length = 0;
+  }
+}
+export {
+  m as DomWorldAnchors
+};