1681-engine 0.0.0-stage → 0.5.8

package/dist/types/ui/layout/placeTooltip.d.ts

@@ -0,0 +1,23 @@
+import { type Point, type Rect, type Size } from './geometry.js';
+export type TipSide = 'below' | 'above' | 'right' | 'left';
+export interface TooltipOptions {
+    /** The side tried first (default 'below'); the opposite one when it does not fit. */
+    side?: TipSide;
+    /** Between the anchor and the tip (default 4). */
+    gap?: number;
+    /** Kept clear of the screen's edges (default 4). */
+    margin?: number;
+    /** Across the side: line up with the anchor's start or centre on it (default 'start'). */
+    align?: 'start' | 'center';
+    snap?: boolean;
+}
+export interface TooltipPlacement extends Point {
+    /** The side it went on after flipping. */
+    side: TipSide;
+}
+/**
+ * Where a tooltip of `tip` size goes beside `anchor`: on the preferred side when it fits, flipped to the opposite one
+ * when it does not, the roomier of the two when neither does; then slid along the edge to stay on screen.
+ */
+export declare function placeTooltip(anchor: Rect, tip: Size, viewport: Size, options?: TooltipOptions): TooltipPlacement;
+//# sourceMappingURL=placeTooltip.d.ts.map

package/dist/types/ui/layout/placeTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"placeTooltip.d.ts","sourceRoot":"","sources":["../../../../src/ui/layout/placeTooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,KAAK,EAAE,KAAK,IAAI,EAAE,KAAK,IAAI,EAAE,MAAM,YAAY,CAAC;AAE7E,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;AAE3D,MAAM,WAAW,cAAc;IAC7B,qFAAqF;IACrF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,kDAAkD;IAClD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0FAA0F;IAC1F,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,gBAAiB,SAAQ,KAAK;IAC7C,0CAA0C;IAC1C,IAAI,EAAE,OAAO,CAAC;CACf;AAkBD;;;GAGG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,GAAE,cAAmB,GAAG,gBAAgB,CAwBpH"}

package/dist/types/ui/layout/scroll.d.ts

@@ -0,0 +1,17 @@
+/** How far content of `content` length can scroll in a window of `viewport` length. */
+export declare function maxScroll(content: number, viewport: number): number;
+/** A scroll offset kept between the top and the last full window of content. */
+export declare function clampScroll(offset: number, content: number, viewport: number): number;
+/**
+ * The smallest scroll that brings an item (`start`, `size` along the scroll axis) fully into view: a list moved by
+ * the keyboard follows the focus without jumping when the focus is already visible.
+ */
+export declare function scrollIntoView(offset: number, start: number, size: number, viewport: number, content: number): number;
+/** Below this speed (px a second) a fling has stopped. */
+export declare const FLING_STOP = 8;
+/**
+ * A fling's speed after `dtMs`, losing `friction` of it every 60th of a second: the same glide at any frame rate.
+ * 0 once it falls under `FLING_STOP`.
+ */
+export declare function stepFling(velocity: number, dtMs: number, friction?: number): number;
+//# sourceMappingURL=scroll.d.ts.map

package/dist/types/ui/layout/scroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll.d.ts","sourceRoot":"","sources":["../../../../src/ui/layout/scroll.ts"],"names":[],"mappings":"AAEA,uFAAuF;AACvF,wBAAgB,SAAS,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAEnE;AAED,gFAAgF;AAChF,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAErF;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,CAKrH;AAED,0DAA0D;AAC1D,eAAO,MAAM,UAAU,IAAI,CAAC;AAE5B;;;GAGG;AACH,wBAAgB,SAAS,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,SAAO,GAAG,MAAM,CAGjF"}

package/dist/types/ui/layout/slider.d.ts

@@ -0,0 +1,7 @@
+/** A value held to the range and to the nearest `step` above `min` (no step: any value). */
+export declare function quantize(value: number, min: number, max: number, step?: number): number;
+/** Where `value` sits along the range, 0–1. */
+export declare function sliderFraction(value: number, min: number, max: number): number;
+/** The value under a pointer at `px` on a track starting at `trackStart`, `trackLength` long. */
+export declare function sliderValueAt(px: number, trackStart: number, trackLength: number, min: number, max: number, step?: number): number;
+//# sourceMappingURL=slider.d.ts.map

package/dist/types/ui/layout/slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../../src/ui/layout/slider.ts"],"names":[],"mappings":"AAEA,4FAA4F;AAC5F,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,SAAI,GAAG,MAAM,CAMlF;AAED,+CAA+C;AAC/C,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAE9E;AAED,iGAAiG;AACjG,wBAAgB,aAAa,CAAC,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,SAAI,GAAG,MAAM,CAG7H"}

package/dist/types/ui/layout/stack.d.ts

@@ -0,0 +1,26 @@
+import { type Insets, type Rect, type Size } from './geometry.js';
+export type StackDirection = 'vertical' | 'horizontal';
+/** Where items sit across the stack: its start, middle or end, or stretched to the widest (tallest) one. */
+export type StackAlign = 'start' | 'center' | 'end' | 'stretch';
+export interface StackOptions {
+    direction?: StackDirection;
+    /** Between two items (default 0). */
+    gap?: number;
+    /** Inside the stack's edge (default 0). */
+    padding?: number | Partial<Insets>;
+    align?: StackAlign;
+    /** A cross size to align in instead of the widest item's (a column as wide as its window). */
+    crossSize?: number;
+    /** Whole pixels (pixel-perfect UI). */
+    snap?: boolean;
+}
+export interface StackResult extends Size {
+    /** One rect per item, in the order given, relative to the stack's top-left. */
+    items: Rect[];
+}
+/**
+ * Lays items one after another down (or across) with a gap, inside padding. The stack's size is what the items
+ * need, so a parent can lay the stack out in turn. Pure, for canvas widgets and DOM/React layouts alike.
+ */
+export declare function stackLayout(sizes: readonly Size[], options?: StackOptions): StackResult;
+//# sourceMappingURL=stack.d.ts.map

package/dist/types/ui/layout/stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../../../src/ui/layout/stack.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,MAAM,EAAE,KAAK,IAAI,EAAE,KAAK,IAAI,EAAE,MAAM,YAAY,CAAC;AAE/E,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,YAAY,CAAC;AACvD,4GAA4G;AAC5G,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAEhE,MAAM,WAAW,YAAY;IAC3B,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,qCAAqC;IACrC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,8FAA8F;IAC9F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uCAAuC;IACvC,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,WAAY,SAAQ,IAAI;IACvC,+EAA+E;IAC/E,KAAK,EAAE,IAAI,EAAE,CAAC;CACf;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,SAAS,IAAI,EAAE,EAAE,OAAO,GAAE,YAAiB,GAAG,WAAW,CAkC3F"}

package/dist/types/ui/layout/wrapRow.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Breaks a row of items (tabs, chips, buttons) into lines no wider than `maxWidth`: each line holds the indices of
+ * its items in order. An item wider than the line still gets a line of its own rather than being dropped.
+ */
+export declare function wrapRow(widths: readonly number[], maxWidth: number, gap?: number): number[][];
+//# sourceMappingURL=wrapRow.d.ts.map

package/dist/types/ui/layout/wrapRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wrapRow.d.ts","sourceRoot":"","sources":["../../../../src/ui/layout/wrapRow.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,OAAO,CAAC,MAAM,EAAE,SAAS,MAAM,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,SAAI,GAAG,MAAM,EAAE,EAAE,CAkBxF"}

package/dist/ui/Bar.js

@@ -0,0 +1,54 @@
+import { Sprite as n, Texture as o } from "pixi.js";
+import { drainState as c, setDrainValue as u, stepDrain as f } from "./layout/barDrain.js";
+import { Widget as d } from "./Widget.js";
+function h(e, t) {
+  const i = new n(o.WHITE);
+  return i.tint = e, i.alpha = t, i;
+}
+function a(e, t, i) {
+  return i ? Math.round(e * t) : e * t;
+}
+class v extends d {
+  constructor(t) {
+    super(), this.options = t, this.state = c(t.value ?? 1), this.back = h(t.backColor ?? 0, t.backAlpha ?? 0.5), this.trail = h(t.trailColor ?? 16777215, t.trailAlpha ?? 0.6), this.fill = h(t.color, 1), this.addChild(this.back, this.trail, this.fill), this.resize(t.width, t.height);
+  }
+  options;
+  state;
+  back;
+  trail;
+  fill;
+  ticking = !1;
+  get value() {
+    return this.state.value;
+  }
+  /** The trail's length (what was held before the last losses), 0–1. */
+  get trailValue() {
+    return this.state.trail;
+  }
+  /** Sets the bar, 0–1; `instant` drops the trail with it (a respawn, a new target). */
+  setValue(t, i = !1) {
+    if (t === this.state.value && !i) return this;
+    if (u(this.state, t, this.options), i && (this.state.trail = this.state.value), this.redraw(), this.state.trail > this.state.value && !this.ticking) {
+      const s = this.host;
+      s && (this.ticking = !0, s.animate(this));
+    }
+    return this;
+  }
+  /** Advances the drain; a bar under a `UiRoot` is ticked for you, one standing alone is ticked by the game. */
+  tick(t) {
+    return this.destroyed ? this.ticking = !1 : (f(this.state, t, this.options), this.redraw(), this.ticking = this.state.trail > this.state.value, this.ticking);
+  }
+  redraw() {
+    const t = this.boxW, i = this.boxH, s = this.host?.pixelPerfect ?? !1;
+    if (this.back.setSize(t, i), this.options.vertical) {
+      const r = a(this.state.trail, i, s), l = a(this.state.value, i, s);
+      this.trail.setSize(t, r), this.trail.position.set(0, i - r), this.fill.setSize(t, l), this.fill.position.set(0, i - l);
+    } else
+      this.trail.setSize(a(this.state.trail, t, s), i), this.fill.setSize(a(this.state.value, t, s), i);
+    this.alpha = this.enabled ? 1 : 0.5;
+  }
+}
+export {
+  v as Bar
+};
+//# sourceMappingURL=Bar.js.map

package/dist/ui/Bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Bar.js","sources":["../../src/ui/Bar.ts"],"sourcesContent":["import { Sprite, Texture } from 'pixi.js';\nimport { drainState, setDrainValue, stepDrain, type DrainOptions, type DrainState } from './layout/barDrain';\nimport type { UiTicking } from './UiHost';\nimport { Widget } from './Widget';\n\nexport interface BarOptions extends DrainOptions {\n  width: number;\n  height: number;\n  /** The bar itself. */\n  color: number;\n  /** The trail behind it after a loss (default white at 0.6 alpha). */\n  trailColor?: number;\n  trailAlpha?: number;\n  /** The empty part (default black at half alpha). */\n  backColor?: number;\n  backAlpha?: number;\n  /** Fills upward instead of rightward. */\n  vertical?: boolean;\n  /** Starting value, 0–1 (default 1). */\n  value?: number;\n}\n\n/** One white texel stretched and tinted: three sprites a bar, no Graphics rebuilt while it drains. */\nfunction strip(color: number, alpha: number): Sprite {\n  const s = new Sprite(Texture.WHITE);\n  s.tint = color;\n  s.alpha = alpha;\n  return s;\n}\n\n/** A fraction of a length, on whole pixels when `snap`. */\nfunction part(f: number, full: number, snap: boolean): number {\n  return snap ? Math.round(f * full) : f * full;\n}\n\n/**\n * A health or progress bar with a delayed drain: a loss shows as a trail that holds a moment, then drains down to\n * the bar, so the player sees how much a hit took. Ticks only while the trail is draining.\n */\nexport class Bar extends Widget implements UiTicking {\n  private readonly state: DrainState;\n  private readonly back: Sprite;\n  private readonly trail: Sprite;\n  private readonly fill: Sprite;\n  private ticking = false;\n\n  constructor(private readonly options: BarOptions) {\n    super();\n    this.state = drainState(options.value ?? 1);\n    this.back = strip(options.backColor ?? 0x000000, options.backAlpha ?? 0.5);\n    this.trail = strip(options.trailColor ?? 0xffffff, options.trailAlpha ?? 0.6);\n    this.fill = strip(options.color, 1);\n    this.addChild(this.back, this.trail, this.fill);\n    this.resize(options.width, options.height);\n  }\n\n  get value(): number {\n    return this.state.value;\n  }\n\n  /** The trail's length (what was held before the last losses), 0–1. */\n  get trailValue(): number {\n    return this.state.trail;\n  }\n\n  /** Sets the bar, 0–1; `instant` drops the trail with it (a respawn, a new target). */\n  setValue(value: number, instant = false): this {\n    if (value === this.state.value && !instant) return this;\n    setDrainValue(this.state, value, this.options);\n    if (instant) this.state.trail = this.state.value;\n    this.redraw();\n    if (this.state.trail > this.state.value && !this.ticking) {\n      const host = this.host;\n      if (host) {\n        this.ticking = true;\n        host.animate(this);\n      }\n    }\n    return this;\n  }\n\n  /** Advances the drain; a bar under a `UiRoot` is ticked for you, one standing alone is ticked by the game. */\n  tick(dtMs: number): boolean {\n    if (this.destroyed) return (this.ticking = false);\n    stepDrain(this.state, dtMs, this.options);\n    this.redraw();\n    this.ticking = this.state.trail > this.state.value;\n    return this.ticking;\n  }\n\n  protected redraw(): void {\n    const w = this.boxW;\n    const h = this.boxH;\n    const snap = this.host?.pixelPerfect ?? false;\n    this.back.setSize(w, h);\n    if (this.options.vertical) {\n      const t = part(this.state.trail, h, snap);\n      const v = part(this.state.value, h, snap);\n      this.trail.setSize(w, t);\n      this.trail.position.set(0, h - t);\n      this.fill.setSize(w, v);\n      this.fill.position.set(0, h - v);\n    } else {\n      this.trail.setSize(part(this.state.trail, w, snap), h);\n      this.fill.setSize(part(this.state.value, w, snap), h);\n    }\n    this.alpha = this.enabled ? 1 : 0.5;\n  }\n}\n"],"names":["strip","color","alpha","s","Sprite","Texture","part","f","full","snap","Bar","Widget","options","drainState","value","instant","setDrainValue","host","dtMs","stepDrain","w","h","t","v"],"mappings":";;;AAuBA,SAASA,EAAMC,GAAeC,GAAuB;AACnD,QAAMC,IAAI,IAAIC,EAAOC,EAAQ,KAAK;AAClC,SAAAF,EAAE,OAAOF,GACTE,EAAE,QAAQD,GACHC;AACT;AAGA,SAASG,EAAKC,GAAWC,GAAcC,GAAuB;AAC5D,SAAOA,IAAO,KAAK,MAAMF,IAAIC,CAAI,IAAID,IAAIC;AAC3C;AAMO,MAAME,UAAYC,EAA4B;AAAA,EAOnD,YAA6BC,GAAqB;AAChD,UAAA,GAD2B,KAAA,UAAAA,GAE3B,KAAK,QAAQC,EAAWD,EAAQ,SAAS,CAAC,GAC1C,KAAK,OAAOZ,EAAMY,EAAQ,aAAa,GAAUA,EAAQ,aAAa,GAAG,GACzE,KAAK,QAAQZ,EAAMY,EAAQ,cAAc,UAAUA,EAAQ,cAAc,GAAG,GAC5E,KAAK,OAAOZ,EAAMY,EAAQ,OAAO,CAAC,GAClC,KAAK,SAAS,KAAK,MAAM,KAAK,OAAO,KAAK,IAAI,GAC9C,KAAK,OAAOA,EAAQ,OAAOA,EAAQ,MAAM;AAAA,EAC3C;AAAA,EAR6B;AAAA,EANZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACT,UAAU;AAAA,EAYlB,IAAI,QAAgB;AAClB,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA;AAAA,EAGA,IAAI,aAAqB;AACvB,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA;AAAA,EAGA,SAASE,GAAeC,IAAU,IAAa;AAC7C,QAAID,MAAU,KAAK,MAAM,SAAS,CAACC,EAAS,QAAO;AAInD,QAHAC,EAAc,KAAK,OAAOF,GAAO,KAAK,OAAO,GACzCC,MAAS,KAAK,MAAM,QAAQ,KAAK,MAAM,QAC3C,KAAK,OAAA,GACD,KAAK,MAAM,QAAQ,KAAK,MAAM,SAAS,CAAC,KAAK,SAAS;AACxD,YAAME,IAAO,KAAK;AAClB,MAAIA,MACF,KAAK,UAAU,IACfA,EAAK,QAAQ,IAAI;AAAA,IAErB;AACA,WAAO;AAAA,EACT;AAAA;AAAA,EAGA,KAAKC,GAAuB;AAC1B,WAAI,KAAK,YAAmB,KAAK,UAAU,MAC3CC,EAAU,KAAK,OAAOD,GAAM,KAAK,OAAO,GACxC,KAAK,OAAA,GACL,KAAK,UAAU,KAAK,MAAM,QAAQ,KAAK,MAAM,OACtC,KAAK;AAAA,EACd;AAAA,EAEU,SAAe;AACvB,UAAME,IAAI,KAAK,MACTC,IAAI,KAAK,MACTZ,IAAO,KAAK,MAAM,gBAAgB;AAExC,QADA,KAAK,KAAK,QAAQW,GAAGC,CAAC,GAClB,KAAK,QAAQ,UAAU;AACzB,YAAMC,IAAIhB,EAAK,KAAK,MAAM,OAAOe,GAAGZ,CAAI,GAClCc,IAAIjB,EAAK,KAAK,MAAM,OAAOe,GAAGZ,CAAI;AACxC,WAAK,MAAM,QAAQW,GAAGE,CAAC,GACvB,KAAK,MAAM,SAAS,IAAI,GAAGD,IAAIC,CAAC,GAChC,KAAK,KAAK,QAAQF,GAAGG,CAAC,GACtB,KAAK,KAAK,SAAS,IAAI,GAAGF,IAAIE,CAAC;AAAA,IACjC;AACE,WAAK,MAAM,QAAQjB,EAAK,KAAK,MAAM,OAAOc,GAAGX,CAAI,GAAGY,CAAC,GACrD,KAAK,KAAK,QAAQf,EAAK,KAAK,MAAM,OAAOc,GAAGX,CAAI,GAAGY,CAAC;AAEtD,SAAK,QAAQ,KAAK,UAAU,IAAI;AAAA,EAClC;AACF;"}

package/dist/ui/Button.js

@@ -0,0 +1,58 @@
+import { Rectangle as c } from "pixi.js";
+import { Panel as f } from "./Panel.js";
+import { Widget as d, sizeOf as l } from "./Widget.js";
+function u(o) {
+  for (let t = o; t; t = t.parent) if (t.suppressesTaps === !0) return !0;
+  return !1;
+}
+class v extends d {
+  constructor(t) {
+    super(), this.options = t, this.focusable = !0, this.onClick = t.onClick ?? null;
+    const s = t.skin;
+    for (const i of [s.normal, s.hover, s.pressed, s.disabled])
+      if (i && !this.faces.has(i)) {
+        const e = new f(i, t.width, t.height, { blocksPointer: !1 });
+        this.faces.set(i, e), this.addChild(e);
+      }
+    this.focusFace = s.focus ? new f(s.focus, t.width, t.height, { blocksPointer: !1 }) : null, this.focusFace && this.addChild(this.focusFace), this.content = t.content ?? null, this.content && this.addChild(this.content), this.makeInteractive(), this.cursor = "pointer", this.hitArea = new c(0, 0, 0, 0), this.on("pointerover", () => this.setPointer(!0, this.pressing)), this.on("pointerout", () => this.setPointer(!1, this.pressing)), this.on("pointerdown", () => this.setPointer(this.hovered, !0)), this.on("pointerup", () => this.setPointer(this.hovered, !1)), this.on("pointerupoutside", () => this.setPointer(!1, !1)), this.on("pointercancel", () => this.setPointer(!1, !1)), this.on("pointertap", () => {
+      u(this) || this.click();
+    }), this.resize(t.width, t.height);
+  }
+  options;
+  onClick;
+  faces = /* @__PURE__ */ new Map();
+  focusFace;
+  content;
+  hovered = !1;
+  pressing = !1;
+  get state() {
+    return this.enabled ? this.pressing ? "pressed" : this.hovered ? "hover" : "normal" : "disabled";
+  }
+  /** Runs the button's action, if it is enabled. */
+  click() {
+    this.enabled && this.onClick?.();
+  }
+  activate() {
+    this.click();
+  }
+  childResized(t) {
+    t === this.content && this.redraw();
+  }
+  setPointer(t, s) {
+    t === this.hovered && s === this.pressing || (this.hovered = t, this.pressing = s, this.redraw());
+  }
+  redraw() {
+    const t = this.options.skin, s = this.state, i = (s === "disabled" ? t.disabled : s === "pressed" ? t.pressed ?? t.hover : s === "hover" ? t.hover : void 0) ?? t.normal;
+    for (const [e, h] of this.faces)
+      h.visible = e === i, (h.boxWidth !== this.boxW || h.boxHeight !== this.boxH) && h.resize(this.boxW, this.boxH);
+    if (this.focusFace && (this.focusFace.visible = this.focused && this.enabled, (this.focusFace.boxWidth !== this.boxW || this.focusFace.boxHeight !== this.boxH) && this.focusFace.resize(this.boxW, this.boxH)), this.hitArea instanceof c && (this.hitArea.width = this.boxW, this.hitArea.height = this.boxH), this.content) {
+      const e = l(this.content), h = s === "pressed" ? t.pressOffset ?? 1 : 0, n = this.host?.pixelPerfect ?? !1, r = (this.boxW - e.width) / 2, a = (this.boxH - e.height) / 2 + h;
+      this.content.position.set(n ? Math.round(r) : r, n ? Math.round(a) : a);
+    }
+    this.alpha = s === "disabled" && !t.disabled ? 0.5 : 1;
+  }
+}
+export {
+  v as Button
+};
+//# sourceMappingURL=Button.js.map

package/dist/ui/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../../src/ui/Button.ts"],"sourcesContent":["import { Container, Rectangle } from 'pixi.js';\nimport { Panel, type PanelSkin } from './Panel';\nimport { sizeOf, Widget } from './Widget';\n\nexport type ButtonState = 'normal' | 'hover' | 'pressed' | 'disabled';\n\nexport interface ButtonSkin {\n  normal: PanelSkin;\n  hover?: PanelSkin;\n  pressed?: PanelSkin;\n  disabled?: PanelSkin;\n  /** Drawn over the face while it has keyboard or gamepad focus (a ring, a brighter frame). */\n  focus?: PanelSkin;\n  /** How far the content drops while pressed (px, default 1): a pressed face is the same face a pixel lower. */\n  pressOffset?: number;\n}\n\nexport interface ButtonOptions {\n  width: number;\n  height: number;\n  skin: ButtonSkin;\n  /**\n   * Centred on the face: a `Label`, an icon, anything. A widget that changes size by itself (a `Label` given new\n   * text) is centred again at once; anything else, after `resize` or a state change.\n   */\n  content?: Container;\n  onClick?: () => void;\n}\n\n/** Walks up for a scroll view that was just dragged: lifting a finger after scrolling a list is not a tap. */\nfunction tapSuppressed(c: Container | null): boolean {\n  for (let p = c; p; p = p.parent) if ((p as { suppressesTaps?: boolean }).suppressesTaps === true) return true;\n  return false;\n}\n\n/**\n * A pressable button: normal, hover, pressed and disabled faces, a focus overlay, pointer and touch through Pixi's\n * events, and Accept from the keyboard or a gamepad through the focus manager.\n */\nexport class Button extends Widget {\n  onClick: (() => void) | null;\n  private readonly faces = new Map<PanelSkin, Panel>();\n  private readonly focusFace: Panel | null;\n  private readonly content: Container | null;\n  private hovered = false;\n  private pressing = false;\n\n  constructor(private readonly options: ButtonOptions) {\n    super();\n    this.focusable = true;\n    this.onClick = options.onClick ?? null;\n    const skin = options.skin;\n    // one panel per distinct skin, shown in turn: no redraw when the state changes\n    for (const s of [skin.normal, skin.hover, skin.pressed, skin.disabled]) {\n      if (s && !this.faces.has(s)) {\n        const face = new Panel(s, options.width, options.height, { blocksPointer: false });\n        this.faces.set(s, face);\n        this.addChild(face);\n      }\n    }\n    this.focusFace = skin.focus ? new Panel(skin.focus, options.width, options.height, { blocksPointer: false }) : null;\n    if (this.focusFace) this.addChild(this.focusFace);\n    this.content = options.content ?? null;\n    if (this.content) this.addChild(this.content);\n    this.makeInteractive();\n    this.cursor = 'pointer';\n    this.hitArea = new Rectangle(0, 0, 0, 0);\n    this.on('pointerover', () => this.setPointer(true, this.pressing));\n    this.on('pointerout', () => this.setPointer(false, this.pressing));\n    this.on('pointerdown', () => this.setPointer(this.hovered, true));\n    this.on('pointerup', () => this.setPointer(this.hovered, false));\n    this.on('pointerupoutside', () => this.setPointer(false, false));\n    this.on('pointercancel', () => this.setPointer(false, false));\n    // a tap: down and up on the button, by mouse, pen or finger\n    this.on('pointertap', () => {\n      if (!tapSuppressed(this)) this.click();\n    });\n    this.resize(options.width, options.height);\n  }\n\n  get state(): ButtonState {\n    if (!this.enabled) return 'disabled';\n    if (this.pressing) return 'pressed';\n    return this.hovered ? 'hover' : 'normal';\n  }\n\n  /** Runs the button's action, if it is enabled. */\n  click(): void {\n    if (this.enabled) this.onClick?.();\n  }\n\n  override activate(): void {\n    this.click();\n  }\n\n  protected override childResized(child: Widget): void {\n    if (child === this.content) this.redraw();\n  }\n\n  private setPointer(hovered: boolean, pressing: boolean): void {\n    if (hovered === this.hovered && pressing === this.pressing) return;\n    this.hovered = hovered;\n    this.pressing = pressing;\n    this.redraw();\n  }\n\n  protected redraw(): void {\n    const skin = this.options.skin;\n    const state = this.state;\n    const wanted = (state === 'disabled' ? skin.disabled : state === 'pressed' ? (skin.pressed ?? skin.hover) : state === 'hover' ? skin.hover : undefined) ?? skin.normal;\n    for (const [s, face] of this.faces) {\n      face.visible = s === wanted;\n      if (face.boxWidth !== this.boxW || face.boxHeight !== this.boxH) face.resize(this.boxW, this.boxH);\n    }\n    if (this.focusFace) {\n      this.focusFace.visible = this.focused && this.enabled;\n      if (this.focusFace.boxWidth !== this.boxW || this.focusFace.boxHeight !== this.boxH) this.focusFace.resize(this.boxW, this.boxH);\n    }\n    if (this.hitArea instanceof Rectangle) {\n      this.hitArea.width = this.boxW;\n      this.hitArea.height = this.boxH;\n    }\n    if (this.content) {\n      const s = sizeOf(this.content);\n      const drop = state === 'pressed' ? (skin.pressOffset ?? 1) : 0;\n      const snap = this.host?.pixelPerfect ?? false;\n      const x = (this.boxW - s.width) / 2;\n      const y = (this.boxH - s.height) / 2 + drop;\n      this.content.position.set(snap ? Math.round(x) : x, snap ? Math.round(y) : y);\n    }\n    // without a disabled face, a disabled button fades\n    this.alpha = state === 'disabled' && !skin.disabled ? 0.5 : 1;\n  }\n}\n"],"names":["tapSuppressed","c","p","Button","Widget","options","skin","s","face","Panel","Rectangle","child","hovered","pressing","state","wanted","sizeOf","drop","snap","x","y"],"mappings":"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"}

package/dist/ui/Dialog.js

@@ -0,0 +1,56 @@
+import { Sprite as d, Texture as a, Container as l, Rectangle as m } from "pixi.js";
+import { fitToViewport as c } from "./layout/fitToViewport.js";
+import { Panel as w } from "./Panel.js";
+import { Widget as p, sizeOf as n } from "./Widget.js";
+class H extends p {
+  constructor(t) {
+    super(), this.options = t, this.onClose = t.onClose ?? null, this.dim.tint = t.dimColor ?? 0, this.dim.alpha = t.dimAlpha ?? 0.5, this.dim.eventMode = "static", this.dim.on("pointertap", () => {
+      (t.dismissable ?? !0) && this.close();
+    });
+    const i = this.windowHeight();
+    this.frame = new w(t.frame, t.width, i), this.window.addChild(this.frame, t.content), this.addChild(this.dim, this.window), this.makeInteractive(), this.boxW = t.width, this.boxH = i;
+  }
+  options;
+  onClose;
+  dim = new d(a.WHITE);
+  window = new l();
+  frame;
+  root = null;
+  /** The window's height: the one given, or the content's with its padding. */
+  windowHeight() {
+    return this.options.height !== void 0 ? this.options.height : n(this.options.content).height + 2 * (this.options.padding ?? 8);
+  }
+  get isOpen() {
+    return this.root !== null;
+  }
+  open(t) {
+    return this.root ? this : (this.root = t, t.openModal(this), this);
+  }
+  close() {
+    const t = this.root;
+    t && (this.root = null, t.closeModal(this), this.onClose?.());
+  }
+  cancel() {
+    return this.options.dismissable ?? !0 ? (this.close(), !0) : !1;
+  }
+  layoutFor(t) {
+    this.dim.setSize(t.width, t.height), this.hitArea = new m(0, 0, t.width, t.height);
+    const i = this.host?.pixelPerfect ?? !1, o = this.windowHeight();
+    this.boxH = o;
+    const s = c({ width: this.options.width, height: o }, t, {
+      margin: this.options.margin ?? 8,
+      centre: !0,
+      minScale: i ? 1 : 0.5,
+      snap: i
+    });
+    this.window.position.set(s.x, s.y), this.window.scale.set(s.scale), this.frame.resize(s.width, s.height);
+    const e = this.options.padding ?? 8, r = n(this.options.content), h = (s.width - r.width) / 2;
+    this.options.content.position.set(i ? Math.round(Math.max(e, h)) : Math.max(e, h), e);
+  }
+  redraw() {
+  }
+}
+export {
+  H as Dialog
+};
+//# sourceMappingURL=Dialog.js.map

package/dist/ui/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sources":["../../src/ui/Dialog.ts"],"sourcesContent":["import { Container, Rectangle, Sprite, Texture } from 'pixi.js';\nimport { fitToViewport } from './layout/fitToViewport';\nimport type { Size } from './layout/geometry';\nimport { Panel, type PanelSkin } from './Panel';\nimport type { UiModal, UiRoot } from './UiRoot';\nimport { sizeOf, Widget } from './Widget';\n\nexport interface DialogOptions {\n  width: number;\n  /**\n   * The window's height. Left out, it is the content's height plus the padding above and below, measured again\n   * whenever the dialog is laid out (`UiRoot.layout()` after the content changed size).\n   */\n  height?: number;\n  frame: PanelSkin;\n  /** The body: a `Stack` of text and buttons, anything. Laid `padding` in from the frame. */\n  content: Container;\n  padding?: number;\n  /** The screen behind it is dimmed by this (default black at 0.5); every press on it is eaten. */\n  dimColor?: number;\n  dimAlpha?: number;\n  /** Cancel (Esc, the pad's B) or a press outside closes it (default true). */\n  dismissable?: boolean;\n  /** Kept clear of the screen's edges (default 8). */\n  margin?: number;\n  onClose?: () => void;\n}\n\n/**\n * A modal window: the world behind it dimmed and deaf to presses, keyboard and gamepad focus trapped inside it,\n * centred and kept inside the screen however small it gets (shrunk, never past its whole scale under pixel art).\n */\nexport class Dialog extends Widget implements UiModal {\n  onClose: (() => void) | null;\n  private readonly dim = new Sprite(Texture.WHITE);\n  private readonly window = new Container();\n  private readonly frame: Panel;\n  private root: UiRoot | null = null;\n\n  constructor(private readonly options: DialogOptions) {\n    super();\n    this.onClose = options.onClose ?? null;\n    this.dim.tint = options.dimColor ?? 0x000000;\n    this.dim.alpha = options.dimAlpha ?? 0.5;\n    this.dim.eventMode = 'static';\n    this.dim.on('pointertap', () => {\n      if (options.dismissable ?? true) this.close();\n    });\n    const height = this.windowHeight();\n    this.frame = new Panel(options.frame, options.width, height);\n    this.window.addChild(this.frame, options.content);\n    this.addChild(this.dim, this.window);\n    // the dim is the dialog's own: every press on it is the UI's\n    this.makeInteractive();\n    this.boxW = options.width;\n    this.boxH = height;\n  }\n\n  /** The window's height: the one given, or the content's with its padding. */\n  private windowHeight(): number {\n    if (this.options.height !== undefined) return this.options.height;\n    return sizeOf(this.options.content).height + 2 * (this.options.padding ?? 8);\n  }\n\n  get isOpen(): boolean {\n    return this.root !== null;\n  }\n\n  open(root: UiRoot): this {\n    if (this.root) return this;\n    this.root = root;\n    root.openModal(this);\n    return this;\n  }\n\n  close(): void {\n    const root = this.root;\n    if (!root) return;\n    this.root = null;\n    root.closeModal(this);\n    this.onClose?.();\n  }\n\n  cancel(): boolean {\n    if (!(this.options.dismissable ?? true)) return false;\n    this.close();\n    return true;\n  }\n\n  layoutFor(viewport: Size): void {\n    this.dim.setSize(viewport.width, viewport.height);\n    this.hitArea = new Rectangle(0, 0, viewport.width, viewport.height);\n    const pixel = this.host?.pixelPerfect ?? false;\n    const height = this.windowHeight();\n    this.boxH = height;\n    const fit = fitToViewport({ width: this.options.width, height }, viewport, {\n      margin: this.options.margin ?? 8,\n      centre: true,\n      minScale: pixel ? 1 : 0.5,\n      snap: pixel,\n    });\n    this.window.position.set(fit.x, fit.y);\n    this.window.scale.set(fit.scale);\n    this.frame.resize(fit.width, fit.height);\n    const pad = this.options.padding ?? 8;\n    const s = sizeOf(this.options.content);\n    const x = (fit.width - s.width) / 2;\n    this.options.content.position.set(pixel ? Math.round(Math.max(pad, x)) : Math.max(pad, x), pad);\n  }\n\n  protected redraw(): void {}\n}\n"],"names":["Dialog","Widget","options","height","Panel","Sprite","Texture","Container","sizeOf","root","viewport","Rectangle","pixel","fit","fitToViewport","pad","s","x"],"mappings":";;;;AAgCO,MAAMA,UAAeC,EAA0B;AAAA,EAOpD,YAA6BC,GAAwB;AACnD,UAAA,GAD2B,KAAA,UAAAA,GAE3B,KAAK,UAAUA,EAAQ,WAAW,MAClC,KAAK,IAAI,OAAOA,EAAQ,YAAY,GACpC,KAAK,IAAI,QAAQA,EAAQ,YAAY,KACrC,KAAK,IAAI,YAAY,UACrB,KAAK,IAAI,GAAG,cAAc,MAAM;AAC9B,OAAIA,EAAQ,eAAe,OAAM,KAAK,MAAA;AAAA,IACxC,CAAC;AACD,UAAMC,IAAS,KAAK,aAAA;AACpB,SAAK,QAAQ,IAAIC,EAAMF,EAAQ,OAAOA,EAAQ,OAAOC,CAAM,GAC3D,KAAK,OAAO,SAAS,KAAK,OAAOD,EAAQ,OAAO,GAChD,KAAK,SAAS,KAAK,KAAK,KAAK,MAAM,GAEnC,KAAK,gBAAA,GACL,KAAK,OAAOA,EAAQ,OACpB,KAAK,OAAOC;AAAA,EACd;AAAA,EAjB6B;AAAA,EAN7B;AAAA,EACiB,MAAM,IAAIE,EAAOC,EAAQ,KAAK;AAAA,EAC9B,SAAS,IAAIC,EAAA;AAAA,EACb;AAAA,EACT,OAAsB;AAAA;AAAA,EAsBtB,eAAuB;AAC7B,WAAI,KAAK,QAAQ,WAAW,SAAkB,KAAK,QAAQ,SACpDC,EAAO,KAAK,QAAQ,OAAO,EAAE,SAAS,KAAK,KAAK,QAAQ,WAAW;AAAA,EAC5E;AAAA,EAEA,IAAI,SAAkB;AACpB,WAAO,KAAK,SAAS;AAAA,EACvB;AAAA,EAEA,KAAKC,GAAoB;AACvB,WAAI,KAAK,OAAa,QACtB,KAAK,OAAOA,GACZA,EAAK,UAAU,IAAI,GACZ;AAAA,EACT;AAAA,EAEA,QAAc;AACZ,UAAMA,IAAO,KAAK;AAClB,IAAKA,MACL,KAAK,OAAO,MACZA,EAAK,WAAW,IAAI,GACpB,KAAK,UAAA;AAAA,EACP;AAAA,EAEA,SAAkB;AAChB,WAAM,KAAK,QAAQ,eAAe,MAClC,KAAK,MAAA,GACE,MAFyC;AAAA,EAGlD;AAAA,EAEA,UAAUC,GAAsB;AAC9B,SAAK,IAAI,QAAQA,EAAS,OAAOA,EAAS,MAAM,GAChD,KAAK,UAAU,IAAIC,EAAU,GAAG,GAAGD,EAAS,OAAOA,EAAS,MAAM;AAClE,UAAME,IAAQ,KAAK,MAAM,gBAAgB,IACnCT,IAAS,KAAK,aAAA;AACpB,SAAK,OAAOA;AACZ,UAAMU,IAAMC,EAAc,EAAE,OAAO,KAAK,QAAQ,OAAO,QAAAX,EAAA,GAAUO,GAAU;AAAA,MACzE,QAAQ,KAAK,QAAQ,UAAU;AAAA,MAC/B,QAAQ;AAAA,MACR,UAAUE,IAAQ,IAAI;AAAA,MACtB,MAAMA;AAAA,IAAA,CACP;AACD,SAAK,OAAO,SAAS,IAAIC,EAAI,GAAGA,EAAI,CAAC,GACrC,KAAK,OAAO,MAAM,IAAIA,EAAI,KAAK,GAC/B,KAAK,MAAM,OAAOA,EAAI,OAAOA,EAAI,MAAM;AACvC,UAAME,IAAM,KAAK,QAAQ,WAAW,GAC9BC,IAAIR,EAAO,KAAK,QAAQ,OAAO,GAC/BS,KAAKJ,EAAI,QAAQG,EAAE,SAAS;AAClC,SAAK,QAAQ,QAAQ,SAAS,IAAIJ,IAAQ,KAAK,MAAM,KAAK,IAAIG,GAAKE,CAAC,CAAC,IAAI,KAAK,IAAIF,GAAKE,CAAC,GAAGF,CAAG;AAAA,EAChG;AAAA,EAEU,SAAe;AAAA,EAAC;AAC5B;"}

package/dist/ui/FocusManager.js

@@ -0,0 +1,97 @@
+import { firstFocus as u, nextFocus as o, linearFocus as l } from "./layout/focusNav.js";
+import { Widget as h } from "./Widget.js";
+const f = {
+  up: "ui_up",
+  down: "ui_down",
+  left: "ui_left",
+  right: "ui_right",
+  accept: "ui_accept",
+  cancel: "ui_cancel",
+  next: "ui_next",
+  prev: "ui_prev"
+}, p = ["up", "down", "left", "right"];
+class x {
+  constructor(t, e = f) {
+    this.bindings = e, this.scopes.push({ container: t, onCancel: null });
+  }
+  bindings;
+  scopes = [];
+  list = null;
+  current = null;
+  get focused() {
+    return this.current;
+  }
+  /** The focusable widgets changed (added, removed, shown, hidden, enabled): collect them again on the next move. */
+  invalidate() {
+    this.list = null, this.current && (this.current.destroyed || !this.current.canFocus() || !this.inScope(this.current)) && this.focus(null);
+  }
+  /** Traps focus inside `container` until `popScope`; `onCancel` answers Cancel there (true when it used it). */
+  pushScope(t, e = null) {
+    this.scopes.push({ container: t, onCancel: e }), this.list = null, this.focus(null);
+  }
+  popScope(t) {
+    const e = this.scopes.findIndex((s) => s.container === t);
+    e <= 0 || (this.scopes.splice(e), this.list = null, this.focus(null));
+  }
+  /** The innermost scope's container (the open dialog, or the root). */
+  get scope() {
+    return this.scopes[this.scopes.length - 1].container;
+  }
+  focus(t) {
+    if (t !== this.current && (this.current?.setFocused(!1), this.current = t, !!t)) {
+      t.setFocused(!0);
+      for (let e = t.parent; e; e = e.parent) e.reveal?.(t);
+    }
+  }
+  /** Moves focus one way; the first press with nothing focused lands on the top-left widget. */
+  move(t) {
+    const e = this.widgets();
+    if (e.length === 0) return !1;
+    const s = e.map(a), n = this.current ? e.indexOf(this.current) : -1, r = n < 0 ? u(s) : o(s, n, t);
+    return r < 0 || r === n ? !1 : (this.focus(e[r]), !0);
+  }
+  /** Tab (1) or Shift+Tab (−1), in tree order, wrapping. */
+  step(t) {
+    const e = this.widgets();
+    if (e.length === 0) return !1;
+    const s = this.current ? e.indexOf(this.current) : -1;
+    return this.focus(e[l(e.length, s, t)]), !0;
+  }
+  /**
+   * Reads one step of input; call it between the game's `actions.poll()` and `endStep()`. True when the UI used a
+   * press, so the game leaves it alone.
+   */
+  handle(t) {
+    const e = this.bindings;
+    let s = !1;
+    for (const n of p)
+      t.pressed(e[n]) && (s = (this.current?.navigate(n) ?? !1) || this.move(n) || s);
+    return t.pressed(e.next) && (s = this.step(1) || s), t.pressed(e.prev) && (s = this.step(-1) || s), t.pressed(e.accept) && this.current?.canFocus() && (this.current.activate(), s = !0), t.pressed(e.cancel) && (this.scopes[this.scopes.length - 1].onCancel?.() ? s = !0 : this.current && (this.focus(null), s = !0)), s;
+  }
+  inScope(t) {
+    for (let e = t; e; e = e.parent) if (e === this.scope) return !0;
+    return !1;
+  }
+  widgets() {
+    if (!this.list) {
+      const t = [];
+      c(this.scope, t), this.list = t;
+    }
+    return this.list.filter((t) => !t.destroyed && t.canFocus());
+  }
+}
+function c(i, t) {
+  if (i.visible) {
+    i instanceof h && i.focusable && t.push(i);
+    for (const e of i.children) c(e, t);
+  }
+}
+function a(i) {
+  const t = i.getBounds();
+  return { x: t.x, y: t.y, width: t.width, height: t.height };
+}
+export {
+  f as DEFAULT_NAV,
+  x as FocusManager
+};
+//# sourceMappingURL=FocusManager.js.map

package/dist/ui/FocusManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusManager.js","sources":["../../src/ui/FocusManager.ts"],"sourcesContent":["import type { Container } from 'pixi.js';\nimport { firstFocus, linearFocus, nextFocus, type NavDirection } from './layout/focusNav';\nimport type { Rect } from './layout/geometry';\nimport { Widget } from './Widget';\n\n/** Anything that answers `pressed(action)`: the engine's `Actions`, or a game's own input. */\nexport interface NavInput {\n  pressed(action: string): boolean;\n}\n\n/** The action names the UI reads; a game binds them in its `Actions` (`ui_up: ['ArrowUp', 'pad:up', 'pad:ly-']`…). */\nexport interface NavBindings {\n  up: string;\n  down: string;\n  left: string;\n  right: string;\n  accept: string;\n  cancel: string;\n  /** Tab order, for a keyboard. */\n  next: string;\n  prev: string;\n}\n\nexport const DEFAULT_NAV: NavBindings = {\n  up: 'ui_up',\n  down: 'ui_down',\n  left: 'ui_left',\n  right: 'ui_right',\n  accept: 'ui_accept',\n  cancel: 'ui_cancel',\n  next: 'ui_next',\n  prev: 'ui_prev',\n};\n\n/** A container focus is kept inside (a dialog's trap), and what Cancel does there. */\ninterface Scope {\n  container: Container;\n  onCancel: (() => boolean) | null;\n}\n\nconst DIRECTIONS: readonly NavDirection[] = ['up', 'down', 'left', 'right'];\n\n/**\n * Keyboard and gamepad navigation between widgets: directions move spatially (to the nearest widget that way), Tab\n * steps in tree order, Accept activates, Cancel asks the innermost scope. A modal pushes a scope, and focus cannot\n * leave it until it is popped (the focus trap). The list of focusable widgets is collected only when stale.\n */\nexport class FocusManager {\n  private readonly scopes: Scope[] = [];\n  private list: Widget[] | null = null;\n  private current: Widget | null = null;\n\n  constructor(\n    root: Container,\n    readonly bindings: NavBindings = DEFAULT_NAV,\n  ) {\n    this.scopes.push({ container: root, onCancel: null });\n  }\n\n  get focused(): Widget | null {\n    return this.current;\n  }\n\n  /** The focusable widgets changed (added, removed, shown, hidden, enabled): collect them again on the next move. */\n  invalidate(): void {\n    this.list = null;\n    if (this.current && (this.current.destroyed || !this.current.canFocus() || !this.inScope(this.current))) this.focus(null);\n  }\n\n  /** Traps focus inside `container` until `popScope`; `onCancel` answers Cancel there (true when it used it). */\n  pushScope(container: Container, onCancel: (() => boolean) | null = null): void {\n    this.scopes.push({ container, onCancel });\n    this.list = null;\n    this.focus(null);\n  }\n\n  popScope(container: Container): void {\n    const i = this.scopes.findIndex((s) => s.container === container);\n    if (i <= 0) return;\n    this.scopes.splice(i);\n    this.list = null;\n    this.focus(null);\n  }\n\n  /** The innermost scope's container (the open dialog, or the root). */\n  get scope(): Container {\n    return this.scopes[this.scopes.length - 1]!.container;\n  }\n\n  focus(w: Widget | null): void {\n    if (w === this.current) return;\n    this.current?.setFocused(false);\n    this.current = w;\n    if (!w) return;\n    w.setFocused(true);\n    // a scroll view holding it brings it into view\n    for (let p = w.parent; p; p = p.parent) (p as { reveal?: (c: Widget) => void }).reveal?.(w);\n  }\n\n  /** Moves focus one way; the first press with nothing focused lands on the top-left widget. */\n  move(dir: NavDirection): boolean {\n    const list = this.widgets();\n    if (list.length === 0) return false;\n    const rects = list.map(rectOf);\n    const i = this.current ? list.indexOf(this.current) : -1;\n    const next = i < 0 ? firstFocus(rects) : nextFocus(rects, i, dir);\n    if (next < 0 || next === i) return false;\n    this.focus(list[next]!);\n    return true;\n  }\n\n  /** Tab (1) or Shift+Tab (−1), in tree order, wrapping. */\n  step(step: 1 | -1): boolean {\n    const list = this.widgets();\n    if (list.length === 0) return false;\n    const i = this.current ? list.indexOf(this.current) : -1;\n    this.focus(list[linearFocus(list.length, i, step)]!);\n    return true;\n  }\n\n  /**\n   * Reads one step of input; call it between the game's `actions.poll()` and `endStep()`. True when the UI used a\n   * press, so the game leaves it alone.\n   */\n  handle(input: NavInput): boolean {\n    const b = this.bindings;\n    let used = false;\n    for (const dir of DIRECTIONS) {\n      if (!input.pressed(b[dir])) continue;\n      // a focused widget may use the direction itself (a slider steps on left/right)\n      used = (this.current?.navigate(dir) ?? false) || this.move(dir) || used;\n    }\n    if (input.pressed(b.next)) used = this.step(1) || used;\n    if (input.pressed(b.prev)) used = this.step(-1) || used;\n    if (input.pressed(b.accept) && this.current?.canFocus()) {\n      this.current.activate();\n      used = true;\n    }\n    if (input.pressed(b.cancel)) {\n      const scope = this.scopes[this.scopes.length - 1]!;\n      if (scope.onCancel?.()) used = true;\n      else if (this.current) {\n        this.focus(null);\n        used = true;\n      }\n    }\n    return used;\n  }\n\n  private inScope(w: Container): boolean {\n    for (let p: Container | null = w; p; p = p.parent) if (p === this.scope) return true;\n    return false;\n  }\n\n  private widgets(): Widget[] {\n    if (!this.list) {\n      const out: Widget[] = [];\n      collect(this.scope, out);\n      this.list = out;\n    }\n    return this.list.filter((w) => !w.destroyed && w.canFocus());\n  }\n}\n\nfunction collect(c: Container, out: Widget[]): void {\n  if (!c.visible) return;\n  if (c instanceof Widget && c.focusable) out.push(c);\n  for (const child of c.children) collect(child, out);\n}\n\n/** A widget's box on screen: comparable across parents, whatever scrolled or scaled them. */\nfunction rectOf(w: Widget): Rect {\n  const b = w.getBounds();\n  return { x: b.x, y: b.y, width: b.width, height: b.height };\n}\n"],"names":["DEFAULT_NAV","DIRECTIONS","FocusManager","root","bindings","container","onCancel","i","w","p","dir","list","rects","rectOf","next","firstFocus","nextFocus","step","linearFocus","input","b","used","out","collect","c","Widget","child"],"mappings":"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"}

package/dist/ui/Label.js

@@ -0,0 +1,36 @@
+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
+};
+//# sourceMappingURL=Label.js.map

package/dist/ui/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.js","sources":["../../src/ui/Label.ts"],"sourcesContent":["import { BitmapLabel } from '../core/BitmapLabel';\nimport { Text, type TextStyle } from '../core/Text';\nimport { Widget } from './Widget';\n\n/** What a label prints with: a canvas `Text` (any font, rich wrapping) or a `BitmapLabel` (cheap to change). */\nexport type LabelText = Text | BitmapLabel;\n\n/**\n * A line (or block) of text with a layout box measured from what it prints. A HUD number rewritten every frame\n * should be a `BitmapLabel`: a `Text` repaints and uploads its canvas on every change.\n */\nexport class Label extends Widget {\n  private last = '';\n\n  constructor(readonly text: LabelText) {\n    super();\n    text.anchor.set(0, 0);\n    text.position.set(0, 0);\n    this.addChild(text);\n    this.last = text.text;\n    this.measure();\n  }\n\n  /** A label printed with a canvas `Text`. */\n  static text(value: string, style: TextStyle): Label {\n    return new Label(new Text(0, 0, value, style));\n  }\n\n  /** A label printed from a bitmap font (see `installLabelFont`; `glyphs` beyond ASCII it will print). */\n  static bitmap(value: string, fontFamily: string, size: number, color: string, stroke = '#000000', strokeWidth = 0, resolution = 1, glyphs = ''): Label {\n    return new Label(new BitmapLabel(0, 0, value, fontFamily, size, color, stroke, strokeWidth, resolution, glyphs));\n  }\n\n  get value(): string {\n    return this.last;\n  }\n\n  /** Changes the text; the same string again costs nothing (a HUD may set it every frame). */\n  setText(value: string): this {\n    if (value === this.last) return this;\n    this.last = value;\n    this.text.text = value;\n    this.measure();\n    return this;\n  }\n\n  private measure(): void {\n    const w = this.boxW;\n    const h = this.boxH;\n    // rounded up: a box that loses the last half pixel of a glyph clips it in a tight layout\n    this.boxW = Math.ceil(this.text.width);\n    this.boxH = Math.ceil(this.text.height);\n    if (this.boxW !== w || this.boxH !== h) this.notifyResized();\n  }\n\n  protected redraw(): void {\n    this.alpha = this.enabled ? 1 : 0.5;\n  }\n}\n"],"names":["Label","Widget","text","value","style","Text","fontFamily","size","color","stroke","strokeWidth","resolution","glyphs","BitmapLabel","w","h"],"mappings":";;;AAWO,MAAMA,UAAcC,EAAO;AAAA,EAGhC,YAAqBC,GAAiB;AACpC,UAAA,GADmB,KAAA,OAAAA,GAEnBA,EAAK,OAAO,IAAI,GAAG,CAAC,GACpBA,EAAK,SAAS,IAAI,GAAG,CAAC,GACtB,KAAK,SAASA,CAAI,GAClB,KAAK,OAAOA,EAAK,MACjB,KAAK,QAAA;AAAA,EACP;AAAA,EAPqB;AAAA,EAFb,OAAO;AAAA;AAAA,EAYf,OAAO,KAAKC,GAAeC,GAAyB;AAClD,WAAO,IAAIJ,EAAM,IAAIK,EAAK,GAAG,GAAGF,GAAOC,CAAK,CAAC;AAAA,EAC/C;AAAA;AAAA,EAGA,OAAO,OAAOD,GAAeG,GAAoBC,GAAcC,GAAeC,IAAS,WAAWC,IAAc,GAAGC,IAAa,GAAGC,IAAS,IAAW;AACrJ,WAAO,IAAIZ,EAAM,IAAIa,EAAY,GAAG,GAAGV,GAAOG,GAAYC,GAAMC,GAAOC,GAAQC,GAAaC,GAAYC,CAAM,CAAC;AAAA,EACjH;AAAA,EAEA,IAAI,QAAgB;AAClB,WAAO,KAAK;AAAA,EACd;AAAA;AAAA,EAGA,QAAQT,GAAqB;AAC3B,WAAIA,MAAU,KAAK,OAAa,QAChC,KAAK,OAAOA,GACZ,KAAK,KAAK,OAAOA,GACjB,KAAK,QAAA,GACE;AAAA,EACT;AAAA,EAEQ,UAAgB;AACtB,UAAMW,IAAI,KAAK,MACTC,IAAI,KAAK;AAEf,SAAK,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK,GACrC,KAAK,OAAO,KAAK,KAAK,KAAK,KAAK,MAAM,IAClC,KAAK,SAASD,KAAK,KAAK,SAASC,WAAQ,cAAA;AAAA,EAC/C;AAAA,EAEU,SAAe;AACvB,SAAK,QAAQ,KAAK,UAAU,IAAI;AAAA,EAClC;AACF;"}

package/dist/ui/List.js

@@ -0,0 +1,45 @@
+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
+};
+//# sourceMappingURL=List.js.map

package/dist/ui/List.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.js","sources":["../../src/ui/List.ts"],"sourcesContent":["import type { Container } from 'pixi.js';\nimport { stackLayout } from './layout/stack';\nimport { ScrollView, type ScrollViewOptions } from './ScrollView';\nimport { sizeOf, Widget } from './Widget';\n\nexport interface ListOptions extends ScrollViewOptions {\n  /** Between rows (default 0). */\n  gap?: number;\n  /** Inside the list's edge (default 0). */\n  padding?: number;\n  /** Rows as wide as the list, less the padding (default true). */\n  stretch?: boolean;\n}\n\n/** A vertical list of rows in a scroll view: rows stacked with a gap, clipped, scrolled, followed by the focus. */\nexport class List extends ScrollView {\n  private readonly rows: Container[] = [];\n\n  constructor(private readonly listOptions: ListOptions) {\n    super(listOptions);\n  }\n\n  get items(): readonly Container[] {\n    return this.rows;\n  }\n\n  add(...rows: Container[]): this {\n    for (const r of rows) {\n      this.rows.push(r);\n      this.content.addChild(r);\n    }\n    return this.relayout();\n  }\n\n  remove(row: Container, destroy = false): this {\n    const i = this.rows.indexOf(row);\n    if (i >= 0) this.rows.splice(i, 1);\n    if (row.parent === this.content) this.content.removeChild(row);\n    if (destroy) row.destroy({ children: true });\n    return this.relayout();\n  }\n\n  clear(destroy = true): this {\n    for (const r of this.rows.splice(0)) {\n      this.content.removeChild(r);\n      if (destroy) r.destroy({ children: true });\n    }\n    return this.relayout();\n  }\n\n  /** Lays the rows out again (after a row changed size). */\n  relayout(): this {\n    const pad = this.listOptions.padding ?? 0;\n    const stretch = this.listOptions.stretch ?? true;\n    const snap = this.host?.pixelPerfect ?? false;\n    const result = stackLayout(this.rows.map(sizeOf), {\n      gap: this.listOptions.gap ?? 0,\n      padding: pad,\n      align: stretch ? 'stretch' : 'start',\n      crossSize: this.boxWidth - 2 * pad,\n      snap,\n    });\n    this.rows.forEach((r, i) => {\n      const rect = result.items[i]!;\n      r.position.set(rect.x, rect.y);\n      if (stretch && r instanceof Widget && r.boxWidth !== rect.width) r.resize(rect.width, r.boxHeight);\n    });\n    this.setContentHeight(result.height);\n    this.host?.invalidateFocus();\n    return this;\n  }\n}\n"],"names":["List","ScrollView","listOptions","rows","r","row","destroy","i","pad","stretch","snap","result","stackLayout","sizeOf","rect","Widget"],"mappings":";;;AAeO,MAAMA,UAAaC,EAAW;AAAA,EAGnC,YAA6BC,GAA0B;AACrD,UAAMA,CAAW,GADU,KAAA,cAAAA;AAAA,EAE7B;AAAA,EAF6B;AAAA,EAFZ,OAAoB,CAAA;AAAA,EAMrC,IAAI,QAA8B;AAChC,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,OAAOC,GAAyB;AAC9B,eAAWC,KAAKD;AACd,WAAK,KAAK,KAAKC,CAAC,GAChB,KAAK,QAAQ,SAASA,CAAC;AAEzB,WAAO,KAAK,SAAA;AAAA,EACd;AAAA,EAEA,OAAOC,GAAgBC,IAAU,IAAa;AAC5C,UAAMC,IAAI,KAAK,KAAK,QAAQF,CAAG;AAC/B,WAAIE,KAAK,KAAG,KAAK,KAAK,OAAOA,GAAG,CAAC,GAC7BF,EAAI,WAAW,KAAK,WAAS,KAAK,QAAQ,YAAYA,CAAG,GACzDC,KAASD,EAAI,QAAQ,EAAE,UAAU,IAAM,GACpC,KAAK,SAAA;AAAA,EACd;AAAA,EAEA,MAAMC,IAAU,IAAY;AAC1B,eAAWF,KAAK,KAAK,KAAK,OAAO,CAAC;AAChC,WAAK,QAAQ,YAAYA,CAAC,GACtBE,KAASF,EAAE,QAAQ,EAAE,UAAU,IAAM;AAE3C,WAAO,KAAK,SAAA;AAAA,EACd;AAAA;AAAA,EAGA,WAAiB;AACf,UAAMI,IAAM,KAAK,YAAY,WAAW,GAClCC,IAAU,KAAK,YAAY,WAAW,IACtCC,IAAO,KAAK,MAAM,gBAAgB,IAClCC,IAASC,EAAY,KAAK,KAAK,IAAIC,CAAM,GAAG;AAAA,MAChD,KAAK,KAAK,YAAY,OAAO;AAAA,MAC7B,SAASL;AAAA,MACT,OAAOC,IAAU,YAAY;AAAA,MAC7B,WAAW,KAAK,WAAW,IAAID;AAAA,MAC/B,MAAAE;AAAA,IAAA,CACD;AACD,gBAAK,KAAK,QAAQ,CAACN,GAAGG,MAAM;AAC1B,YAAMO,IAAOH,EAAO,MAAMJ,CAAC;AAC3B,MAAAH,EAAE,SAAS,IAAIU,EAAK,GAAGA,EAAK,CAAC,GACzBL,KAAWL,aAAaW,KAAUX,EAAE,aAAaU,EAAK,SAAOV,EAAE,OAAOU,EAAK,OAAOV,EAAE,SAAS;AAAA,IACnG,CAAC,GACD,KAAK,iBAAiBO,EAAO,MAAM,GACnC,KAAK,MAAM,gBAAA,GACJ;AAAA,EACT;AACF;"}

package/dist/ui/Panel.js

@@ -0,0 +1,38 @@
+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
+};
+//# sourceMappingURL=Panel.js.map

package/dist/ui/Panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.js","sources":["../../src/ui/Panel.ts"],"sourcesContent":["import { Graphics, NineSliceSprite, Rectangle, type Texture } from 'pixi.js';\nimport type { Insets } from './layout/geometry';\nimport { Widget } from './Widget';\n\n/** A 9-slice texture: the corners stay as drawn, the edges stretch one way, the middle both. */\nexport interface TextureSkin {\n  texture: Texture;\n  /** Corner sizes in texture pixels. */\n  insets: Insets;\n}\n\n/** A plain box: fill, and an optional border drawn inside the edge. */\nexport interface ColourSkin {\n  color: number;\n  /** Opacity of fill and border alike (default 1); `fillAlpha` and `borderAlpha` override it for one of them. */\n  alpha?: number;\n  /** Opacity of the fill alone: 0 draws a bare ring (a focus mark over a face that should still show). */\n  fillAlpha?: number;\n  /** Opacity of the border alone. */\n  borderAlpha?: number;\n  border?: number;\n  borderColor?: number;\n}\n\nexport type PanelSkin = TextureSkin | ColourSkin;\n\nexport interface PanelOptions {\n  /** Presses on it are the UI's and never reach the world under it (default true). */\n  blocksPointer?: boolean;\n}\n\n/**\n * A framed box: a 9-slice of any texture (a window frame, a button face), or a colour box when a game has no art\n * yet. The background of windows, buttons, bars and dialogs.\n */\nexport class Panel extends Widget {\n  private readonly slice: NineSliceSprite | null = null;\n  private readonly box: Graphics | null = null;\n\n  constructor(\n    readonly skin: PanelSkin,\n    width: number,\n    height: number,\n    options: PanelOptions = {},\n  ) {\n    super();\n    if ('texture' in skin) {\n      const { left, top, right, bottom } = skin.insets;\n      this.slice = new NineSliceSprite({ texture: skin.texture, leftWidth: left, topHeight: top, rightWidth: right, bottomHeight: bottom });\n      this.addChild(this.slice);\n    } else {\n      this.box = new Graphics();\n      this.addChild(this.box);\n    }\n    if (options.blocksPointer ?? true) {\n      this.makeInteractive();\n      this.hitArea = new Rectangle(0, 0, 0, 0);\n    }\n    this.resize(width, height);\n  }\n\n  protected redraw(): void {\n    const w = this.boxW;\n    const h = this.boxH;\n    if (this.hitArea instanceof Rectangle) {\n      this.hitArea.width = w;\n      this.hitArea.height = h;\n    }\n    if (this.slice) {\n      // pixel art: the frame's corners land on whole pixels\n      this.slice.roundPixels = this.host?.pixelPerfect ?? false;\n      this.slice.width = w;\n      this.slice.height = h;\n      return;\n    }\n    const skin = this.skin as ColourSkin;\n    const g = this.box!;\n    g.clear();\n    const b = skin.border ?? 0;\n    const fillAlpha = skin.fillAlpha ?? skin.alpha ?? 1;\n    const borderAlpha = skin.borderAlpha ?? skin.alpha ?? 1;\n    if (w <= 0 || h <= 0) return;\n    if (b > 0) {\n      // the border as four strips round the fill, never a box under it: a see-through fill would show it through\n      const bc = { color: skin.borderColor ?? 0xffffff, alpha: borderAlpha };\n      if (w <= 2 * b || h <= 2 * b) {\n        g.rect(0, 0, w, h).fill(bc);\n        return;\n      }\n      g.rect(0, 0, w, b).fill(bc);\n      g.rect(0, h - b, w, b).fill(bc);\n      g.rect(0, b, b, h - 2 * b).fill(bc);\n      g.rect(w - b, b, b, h - 2 * b).fill(bc);\n      if (fillAlpha > 0) g.rect(b, b, w - 2 * b, h - 2 * b).fill({ color: skin.color, alpha: fillAlpha });\n    } else if (fillAlpha > 0) {\n      g.rect(0, 0, w, h).fill({ color: skin.color, alpha: fillAlpha });\n    }\n  }\n}\n"],"names":["Panel","Widget","skin","width","height","options","left","top","right","bottom","NineSliceSprite","Graphics","Rectangle","w","h","g","b","fillAlpha","borderAlpha","bc"],"mappings":";;AAmCO,MAAMA,UAAcC,EAAO;AAAA,EAIhC,YACWC,GACTC,GACAC,GACAC,IAAwB,CAAA,GACxB;AAEA,QADA,MAAA,GALS,KAAA,OAAAH,GAML,aAAaA,GAAM;AACrB,YAAM,EAAE,MAAAI,GAAM,KAAAC,GAAK,OAAAC,GAAO,QAAAC,EAAA,IAAWP,EAAK;AAC1C,WAAK,QAAQ,IAAIQ,EAAgB,EAAE,SAASR,EAAK,SAAS,WAAWI,GAAM,WAAWC,GAAK,YAAYC,GAAO,cAAcC,GAAQ,GACpI,KAAK,SAAS,KAAK,KAAK;AAAA,IAC1B;AACE,WAAK,MAAM,IAAIE,EAAA,GACf,KAAK,SAAS,KAAK,GAAG;AAExB,KAAIN,EAAQ,iBAAiB,QAC3B,KAAK,gBAAA,GACL,KAAK,UAAU,IAAIO,EAAU,GAAG,GAAG,GAAG,CAAC,IAEzC,KAAK,OAAOT,GAAOC,CAAM;AAAA,EAC3B;AAAA,EAnBW;AAAA,EAJM,QAAgC;AAAA,EAChC,MAAuB;AAAA,EAwB9B,SAAe;AACvB,UAAMS,IAAI,KAAK,MACTC,IAAI,KAAK;AAKf,QAJI,KAAK,mBAAmBF,MAC1B,KAAK,QAAQ,QAAQC,GACrB,KAAK,QAAQ,SAASC,IAEpB,KAAK,OAAO;AAEd,WAAK,MAAM,cAAc,KAAK,MAAM,gBAAgB,IACpD,KAAK,MAAM,QAAQD,GACnB,KAAK,MAAM,SAASC;AACpB;AAAA,IACF;AACA,UAAMZ,IAAO,KAAK,MACZa,IAAI,KAAK;AACf,IAAAA,EAAE,MAAA;AACF,UAAMC,IAAId,EAAK,UAAU,GACnBe,IAAYf,EAAK,aAAaA,EAAK,SAAS,GAC5CgB,IAAchB,EAAK,eAAeA,EAAK,SAAS;AACtD,QAAI,EAAAW,KAAK,KAAKC,KAAK;AACnB,UAAIE,IAAI,GAAG;AAET,cAAMG,IAAK,EAAE,OAAOjB,EAAK,eAAe,UAAU,OAAOgB,EAAA;AACzD,YAAIL,KAAK,IAAIG,KAAKF,KAAK,IAAIE,GAAG;AAC5B,UAAAD,EAAE,KAAK,GAAG,GAAGF,GAAGC,CAAC,EAAE,KAAKK,CAAE;AAC1B;AAAA,QACF;AACA,QAAAJ,EAAE,KAAK,GAAG,GAAGF,GAAGG,CAAC,EAAE,KAAKG,CAAE,GAC1BJ,EAAE,KAAK,GAAGD,IAAIE,GAAGH,GAAGG,CAAC,EAAE,KAAKG,CAAE,GAC9BJ,EAAE,KAAK,GAAGC,GAAGA,GAAGF,IAAI,IAAIE,CAAC,EAAE,KAAKG,CAAE,GAClCJ,EAAE,KAAKF,IAAIG,GAAGA,GAAGA,GAAGF,IAAI,IAAIE,CAAC,EAAE,KAAKG,CAAE,GAClCF,IAAY,KAAGF,EAAE,KAAKC,GAAGA,GAAGH,IAAI,IAAIG,GAAGF,IAAI,IAAIE,CAAC,EAAE,KAAK,EAAE,OAAOd,EAAK,OAAO,OAAOe,GAAW;AAAA,MACpG,MAAA,CAAWA,IAAY,KACrBF,EAAE,KAAK,GAAG,GAAGF,GAAGC,CAAC,EAAE,KAAK,EAAE,OAAOZ,EAAK,OAAO,OAAOe,GAAW;AAAA,EAEnE;AACF;"}