@datamoc/mw_games 0.7.6 → 0.7.8

package/dist/two-d/ui/MarkupText.d.ts

@@ -0,0 +1,53 @@
+import { Container } from 'pixi.js';
+import type { Texture2D } from '../render/Types2D.ts';
+import { type MarkupAlign, type MarkupDirection } from './markup.ts';
+export interface MarkupTextOptions {
+    text?: string;
+    /** wrap width in pixels; omit for a single unwrapped line */
+    maxWidth?: number;
+    /** distance between baselines; defaults to the theme's size times line height */
+    lineHeight?: number;
+    align?: MarkupAlign;
+    /** flow direction; defaults to the theme's `direction` */
+    direction?: MarkupDirection;
+    /** text texture resolution; omit for the renderer default */
+    resolution?: number;
+    /** how an `<img>` path becomes a texture; defaults to the asset resolver with a `Texture.EMPTY` fallback */
+    resolveImage?: (path: string) => Texture2D;
+    /** what a `$name` in the text becomes, the same contract `parseMarkup` takes */
+    variables?: Readonly<Record<string, string>>;
+}
+/**
+ * The canvas backend for inline markup, and the counterpart to `RichLabel`'s HTML text: the same
+ * `MarkupSpan` stream, laid out once by `layoutMarkupLines` and `positionMarkupLines`, drawn here
+ * as one `Text2D` per styled run (colour, size, emphasis) and one `Sprite2D` per `<img>` span,
+ * resolved through the asset resolver. That split is the point - Pixi's `HTMLText` (which
+ * `RichLabel` builds on) renders emphasis but has no inline-image primitive, so an image would
+ * otherwise be dropped or a caller would have to position it itself at a `layoutMarkupLines`
+ * offset by hand. This class is the component that does that wiring.
+ *
+ * Costs more than a `Label` (one drawable per run), so it is for descriptions, dialogue lines
+ * and help bodies, not per-frame numbers - the same guidance `RichLabel` already carries.
+ *
+ * @example
+ * ```ts
+ * import { MarkupText } from '@datamoc/mw_games/two-d/ui';
+ *
+ * const description = new MarkupText({ text: 'Pay <b>10</b> gold<img>coin.png</img>', maxWidth: 240 });
+ * description.setText('Pay <b>15</b> gold<img>coin.png</img>');
+ * ```
+ */
+export declare class MarkupText extends Container {
+    private readonly opts;
+    private readonly themeListener;
+    constructor(options?: MarkupTextOptions);
+    /** replaces the markup source and redraws, so a description can be updated in place */
+    setText(value: string): void;
+    /** re-parses, re-lays-out and re-draws; a theme change must re-measure against the new font */
+    private rebuild;
+    private measurePiece;
+    private textFor;
+    private spriteFor;
+    destroy(options?: Parameters<Container['destroy']>[0]): void;
+}
+//# sourceMappingURL=MarkupText.d.ts.map

package/dist/two-d/ui/MarkupText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkupText.d.ts","sourceRoot":"","sources":["../../../src/two-d/ui/MarkupText.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAW,MAAM,SAAS,CAAC;AAE7C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEtD,OAAO,EAIN,KAAK,WAAW,EAChB,KAAK,eAAe,EAGpB,MAAM,aAAa,CAAC;AAGrB,MAAM,WAAW,iBAAiB;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iFAAiF;IACjF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,6DAA6D;IAC7D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4GAA4G;IAC5G,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,SAAS,CAAC;IAC3C,gFAAgF;IAChF,SAAS,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;CAC7C;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBAAa,UAAW,SAAQ,SAAS;IACxC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAoB;IACzC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAiC;IAE/D,YAAY,OAAO,GAAE,iBAAsB,EAK1C;IAED,uFAAuF;IACvF,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAG3B;IAED,+FAA+F;IAC/F,OAAO,CAAC,OAAO;IAgCf,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,OAAO;IAef,OAAO,CAAC,SAAS;IASR,OAAO,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAGpE;CACD"}

package/dist/two-d/ui/MarkupText.js

@@ -0,0 +1,122 @@
+import { Container, Texture } from 'pixi.js';
+import { Sprite2D, Text2D } from '../render/Shape2D.js';
+import { texture } from '../../assets/loader.js';
+import { layoutMarkupLines, parseMarkup, positionMarkupLines, } from './markup.js';
+import { theme, themeChanged } from './theme.js';
+/**
+ * The canvas backend for inline markup, and the counterpart to `RichLabel`'s HTML text: the same
+ * `MarkupSpan` stream, laid out once by `layoutMarkupLines` and `positionMarkupLines`, drawn here
+ * as one `Text2D` per styled run (colour, size, emphasis) and one `Sprite2D` per `<img>` span,
+ * resolved through the asset resolver. That split is the point - Pixi's `HTMLText` (which
+ * `RichLabel` builds on) renders emphasis but has no inline-image primitive, so an image would
+ * otherwise be dropped or a caller would have to position it itself at a `layoutMarkupLines`
+ * offset by hand. This class is the component that does that wiring.
+ *
+ * Costs more than a `Label` (one drawable per run), so it is for descriptions, dialogue lines
+ * and help bodies, not per-frame numbers - the same guidance `RichLabel` already carries.
+ *
+ * @example
+ * ```ts
+ * import { MarkupText } from '@datamoc/mw_games/two-d/ui';
+ *
+ * const description = new MarkupText({ text: 'Pay <b>10</b> gold<img>coin.png</img>', maxWidth: 240 });
+ * description.setText('Pay <b>15</b> gold<img>coin.png</img>');
+ * ```
+ */
+export class MarkupText extends Container {
+    constructor(options = {}) {
+        super();
+        this.themeListener = (t) => this.rebuild(t);
+        this.opts = options;
+        this.rebuild(theme());
+        themeChanged.add(this.themeListener);
+    }
+    /** replaces the markup source and redraws, so a description can be updated in place */
+    setText(value) {
+        this.opts.text = value;
+        this.rebuild(theme());
+    }
+    /** re-parses, re-lays-out and re-draws; a theme change must re-measure against the new font */
+    rebuild(t) {
+        for (const child of this.removeChildren())
+            child.destroy();
+        const lineHeight = this.opts.lineHeight ?? t.font.size * t.font.lineHeight;
+        const wrapWidth = this.opts.maxWidth ?? Number.POSITIVE_INFINITY;
+        const alignWidth = this.opts.maxWidth ?? 0;
+        const direction = this.opts.direction ?? t.direction;
+        const resolveImage = this.opts.resolveImage ?? ((path) => texture(path, Texture.EMPTY));
+        const context = canvasContext();
+        const measure = (piece) => this.measurePiece(piece, t, lineHeight, resolveImage, context);
+        const spans = parseMarkup(this.opts.text ?? '', { variables: this.opts.variables });
+        const lines = layoutMarkupLines(spans, measure, wrapWidth);
+        const runs = positionMarkupLines(lines, {
+            measure,
+            maxWidth: alignWidth,
+            lineHeight,
+            direction,
+            align: this.opts.align ?? (this.opts.maxWidth === undefined ? 'left' : undefined),
+        });
+        for (const run of runs) {
+            const child = run.span.image !== undefined
+                ? this.spriteFor(run.span.image, lineHeight, resolveImage)
+                : this.textFor(run.span, t, lineHeight);
+            child.x = run.x;
+            child.y = run.y;
+            this.addChild(child);
+        }
+    }
+    measurePiece(piece, t, lineHeight, resolveImage, context) {
+        if (piece.image !== undefined)
+            return imageDisplaySize(resolveImage(piece.image), lineHeight).width;
+        if (!context)
+            return piece.text.length * (piece.size ?? t.font.size);
+        context.font = fontString(piece, t.font.family, t.font.size);
+        return context.measureText(piece.text).width;
+    }
+    textFor(span, t, lineHeight) {
+        return new Text2D({
+            text: span.text,
+            resolution: this.opts.resolution,
+            style: {
+                fontFamily: t.font.family,
+                fontSize: span.size ?? t.font.size,
+                fontWeight: span.bold ? 'bold' : 'normal',
+                fontStyle: span.italic ? 'italic' : 'normal',
+                fill: span.color ?? t.color.text,
+                lineHeight,
+            },
+        });
+    }
+    spriteFor(path, lineHeight, resolveImage) {
+        const tex = resolveImage(path);
+        const size = imageDisplaySize(tex, lineHeight);
+        const sprite = new Sprite2D(tex);
+        sprite.width = size.width;
+        sprite.height = size.height;
+        return sprite;
+    }
+    destroy(options) {
+        themeChanged.remove(this.themeListener);
+        super.destroy(options);
+    }
+}
+/** a shared canvas 2D context, the same way Pixi's own `Text` measurement works under the hood */
+let measureContext = null;
+function canvasContext() {
+    if (typeof document === 'undefined')
+        return null;
+    measureContext ??= document.createElement('canvas').getContext('2d');
+    return measureContext;
+}
+function fontString(piece, family, fallbackSize) {
+    const style = piece.italic ? 'italic ' : '';
+    const weight = piece.bold ? 'bold ' : '';
+    return `${style}${weight}${piece.size ?? fallbackSize}px ${family}`;
+}
+/** an image run's drawn size: the line's own height, with the texture's aspect ratio kept */
+function imageDisplaySize(tex, lineHeight) {
+    const width = tex.width > 0 ? tex.width : lineHeight;
+    const height = tex.height > 0 ? tex.height : lineHeight;
+    return { width: width * (lineHeight / height), height: lineHeight };
+}
+//# sourceMappingURL=MarkupText.js.map

package/dist/two-d/ui/MarkupText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkupText.js","sourceRoot":"","sources":["../../../src/two-d/ui/MarkupText.ts"],"names":[],"mappings":"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"}

package/dist/two-d/ui/ScrollBox.d.ts

@@ -0,0 +1,67 @@
+import { Container } from 'pixi.js';
+import { Signal } from '../../core/Signal.ts';
+/**
+ * Clamps a scroll offset so the content never pulls away from the top or leaves a gap past the
+ * bottom. When the content is shorter than the viewport the only offset is 0.
+ *
+ * @example
+ * ```ts
+ * import { scrollOffset } from '@datamoc/mw_games/two-d/ui';
+ *
+ * console.log(scrollOffset(-5, 500, 200)); // 0
+ * console.log(scrollOffset(900, 500, 200)); // 300
+ * ```
+ */
+export declare function scrollOffset(offset: number, contentSize: number, viewportSize: number): number;
+export interface ScrollBoxOptions {
+    width: number;
+    height: number;
+    /** how tall the content is; set it again with `setContentHeight` as the content changes */
+    contentHeight?: number;
+    offset?: number;
+}
+/**
+ * A clipped viewport with a scrollbar: put rows in `content` and they scroll inside the box,
+ * everything outside it hidden by a mask. The scrollbar is drawn from the theme; the wheel,
+ * `scrollBy` and `scrollIntoView` all run through `scrollOffset`, so they clamp the same way.
+ *
+ * @example
+ * ```ts
+ * import { ScrollBox } from '@datamoc/mw_games/two-d/ui';
+ *
+ * const box = new ScrollBox({ width: 200, height: 120, contentHeight: 400 });
+ * box.scrollBy(60);
+ * console.log(box.offset); // 60
+ * ```
+ */
+export declare class ScrollBox extends Container {
+    readonly onChange: Signal<number>;
+    /** add the rows to scroll here */
+    readonly content: Container<import("pixi.js").ContainerChild>;
+    private maskShape;
+    private track;
+    private thumb;
+    private width_;
+    private height_;
+    private contentHeight_;
+    private offset_;
+    private readonly themeListener;
+    constructor(options: ScrollBoxOptions);
+    get offset(): number;
+    get contentHeight(): number;
+    get viewportHeight(): number;
+    /** how far the content can scroll; 0 when it all fits */
+    get maxOffset(): number;
+    get scrollable(): boolean;
+    setContentHeight(height: number): void;
+    resize(width: number, height: number): void;
+    scrollBy(delta: number): void;
+    scrollTo(offset: number): void;
+    /** scrolls just enough to bring a `height`-tall item at `top` fully into view */
+    scrollIntoView(top: number, height: number): void;
+    private setOffset;
+    private readonly handleWheel;
+    private draw;
+    destroy(options?: Parameters<Container['destroy']>[0]): void;
+}
+//# sourceMappingURL=ScrollBox.d.ts.map

package/dist/two-d/ui/ScrollBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollBox.d.ts","sourceRoot":"","sources":["../../../src/two-d/ui/ScrollBox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAG9C;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,GAAG,MAAM,CAE9F;AAED,MAAM,WAAW,gBAAgB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,2FAA2F;IAC3F,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;GAaG;AACH,qBAAa,SAAU,SAAQ,SAAS;IACvC,QAAQ,CAAC,QAAQ,iBAAwB;IAEzC,kCAAkC;IAClC,QAAQ,CAAC,OAAO,8CAAmB;IAEnC,OAAO,CAAC,SAAS,CAAkB;IACnC,OAAO,CAAC,KAAK,CAAkB;IAC/B,OAAO,CAAC,KAAK,CAAkB;IAE/B,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,OAAO,CAAS;IAExB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAqB;IAEnD,YAAY,OAAO,EAAE,gBAAgB,EAoBpC;IAED,IAAI,MAAM,IAAI,MAAM,CAEnB;IAED,IAAI,aAAa,IAAI,MAAM,CAE1B;IAED,IAAI,cAAc,IAAI,MAAM,CAE3B;IAED,yDAAyD;IACzD,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,IAAI,UAAU,IAAI,OAAO,CAExB;IAED,gBAAgB,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAGrC;IAED,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAI1C;IAED,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAE5B;IAED,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAE7B;IAED,iFAAiF;IACjF,cAAc,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAGhD;IAED,OAAO,CAAC,SAAS;IAUjB,OAAO,CAAC,QAAQ,CAAC,WAAW,CAE1B;IAEF,OAAO,CAAC,IAAI;IAmBH,OAAO,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAGpE;CACD"}

package/dist/two-d/ui/ScrollBox.js

@@ -0,0 +1,127 @@
+import { Container, Graphics } from 'pixi.js';
+import { Signal } from '../../core/Signal.js';
+import { theme, themeChanged } from './theme.js';
+/**
+ * Clamps a scroll offset so the content never pulls away from the top or leaves a gap past the
+ * bottom. When the content is shorter than the viewport the only offset is 0.
+ *
+ * @example
+ * ```ts
+ * import { scrollOffset } from '@datamoc/mw_games/two-d/ui';
+ *
+ * console.log(scrollOffset(-5, 500, 200)); // 0
+ * console.log(scrollOffset(900, 500, 200)); // 300
+ * ```
+ */
+export function scrollOffset(offset, contentSize, viewportSize) {
+    return Math.max(0, Math.min(Math.max(0, contentSize - viewportSize), offset));
+}
+/**
+ * A clipped viewport with a scrollbar: put rows in `content` and they scroll inside the box,
+ * everything outside it hidden by a mask. The scrollbar is drawn from the theme; the wheel,
+ * `scrollBy` and `scrollIntoView` all run through `scrollOffset`, so they clamp the same way.
+ *
+ * @example
+ * ```ts
+ * import { ScrollBox } from '@datamoc/mw_games/two-d/ui';
+ *
+ * const box = new ScrollBox({ width: 200, height: 120, contentHeight: 400 });
+ * box.scrollBy(60);
+ * console.log(box.offset); // 60
+ * ```
+ */
+export class ScrollBox extends Container {
+    constructor(options) {
+        super();
+        this.onChange = new Signal();
+        /** add the rows to scroll here */
+        this.content = new Container();
+        this.maskShape = new Graphics();
+        this.track = new Graphics();
+        this.thumb = new Graphics();
+        this.themeListener = () => this.draw();
+        this.handleWheel = (event) => {
+            this.scrollBy(event.deltaY);
+        };
+        this.width_ = options.width;
+        this.height_ = options.height;
+        this.contentHeight_ = Math.max(0, options.contentHeight ?? 0);
+        this.offset_ = scrollOffset(options.offset ?? 0, this.contentHeight_, this.height_);
+        this.addChild(this.content);
+        this.addChild(this.maskShape);
+        this.addChild(this.track);
+        this.addChild(this.thumb);
+        this.content.mask = this.maskShape;
+        this.eventMode = 'static';
+        this.on('wheel', this.handleWheel);
+        this.draw();
+        themeChanged.add(this.themeListener);
+    }
+    get offset() {
+        return this.offset_;
+    }
+    get contentHeight() {
+        return this.contentHeight_;
+    }
+    get viewportHeight() {
+        return this.height_;
+    }
+    /** how far the content can scroll; 0 when it all fits */
+    get maxOffset() {
+        return Math.max(0, this.contentHeight_ - this.height_);
+    }
+    get scrollable() {
+        return this.maxOffset > 0;
+    }
+    setContentHeight(height) {
+        this.contentHeight_ = Math.max(0, height);
+        this.setOffset(scrollOffset(this.offset_, this.contentHeight_, this.height_));
+    }
+    resize(width, height) {
+        this.width_ = width;
+        this.height_ = height;
+        this.setOffset(scrollOffset(this.offset_, this.contentHeight_, this.height_));
+    }
+    scrollBy(delta) {
+        this.setOffset(scrollOffset(this.offset_ + delta, this.contentHeight_, this.height_));
+    }
+    scrollTo(offset) {
+        this.setOffset(scrollOffset(offset, this.contentHeight_, this.height_));
+    }
+    /** scrolls just enough to bring a `height`-tall item at `top` fully into view */
+    scrollIntoView(top, height) {
+        if (top < this.offset_)
+            this.scrollTo(top);
+        else if (top + height > this.offset_ + this.height_)
+            this.scrollTo(top + height - this.height_);
+    }
+    setOffset(offset) {
+        if (offset === this.offset_) {
+            this.draw();
+            return;
+        }
+        this.offset_ = offset;
+        this.draw();
+        this.onChange.dispatch(offset);
+    }
+    draw() {
+        const t = theme();
+        this.content.y = -this.offset_;
+        this.maskShape.clear().rect(0, 0, this.width_, this.height_).fill({ color: 0xffffff });
+        this.track.clear();
+        this.thumb.clear();
+        if (!this.scrollable)
+            return;
+        const barWidth = 6;
+        const x = this.width_ - barWidth;
+        this.track.roundRect(x, 0, barWidth, this.height_, barWidth / 2).fill({ color: t.color.panelFill });
+        const thumbHeight = Math.max(barWidth, (this.height_ / this.contentHeight_) * this.height_);
+        const thumbY = (this.offset_ / this.maxOffset) * (this.height_ - thumbHeight);
+        this.thumb.roundRect(x, thumbY, barWidth, thumbHeight, barWidth / 2).fill({ color: t.color.textHighlight });
+    }
+    destroy(options) {
+        themeChanged.remove(this.themeListener);
+        super.destroy(options);
+    }
+}
+//# sourceMappingURL=ScrollBox.js.map

package/dist/two-d/ui/ScrollBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollBox.js","sourceRoot":"","sources":["../../../src/two-d/ui/ScrollBox.ts"],"names":[],"mappings":"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"}

package/dist/two-d/ui/Skins.d.ts

@@ -0,0 +1,59 @@
+import type { Texture2D } from '../render/Types2D.ts';
+export type WidgetState = 'idle' | 'hover' | 'pressed' | 'disabled' | 'selected' | 'focused';
+/**
+ * The visual a widget draws itself with in one state. Every field is optional and each falls back
+ * independently as `Skins.resolve` walks its chain, so a skin can override just one channel of a
+ * widget's look - its pressed background, say - and keep the rest.
+ */
+export interface Skin {
+    background?: number;
+    border?: number;
+    borderWidth?: number;
+    text?: number;
+    padding?: number;
+    texture?: Texture2D;
+    /** how many pixels of `texture` are its fixed border */
+    borderInset?: number;
+}
+export type SkinStates = Partial<Record<WidgetState, Skin>>;
+/** A widget's entry: a bare skin, meaning its idle look, or one look per state. */
+export type SkinData = Skin | SkinStates;
+/**
+ * Per-widget and per-state skins, looked up by name - the data-driven half of what GUI2 puts in
+ * `data/gui/*.cfg`, and the thing the one global `Theme` has no room for.
+ *
+ * A lookup walks a fixed chain so a caller never gets `undefined`: the widget's own state, its
+ * idle look, the wildcard widget's state, the wildcard's idle look, then an empty skin. That is
+ * what lets a game define a shared `*` skin once and override only the two widgets it cares about,
+ * and what makes a state a widget never defined fall back rather than disappear.
+ *
+ * @example
+ * ```ts
+ * import { Skins } from '@datamoc/mw_games/two-d/ui';
+ *
+ * const skins = new Skins();
+ * skins.define('*', 'idle', { background: 0x101018, text: 0xe8e8f0 });
+ * skins.define('button', 'pressed', { background: 0xffe680, text: 0x101018 });
+ *
+ * console.log(skins.resolve('button', 'pressed').text); // 0x101018, the override
+ * console.log(skins.resolve('label', 'idle').background); // 0x101018, the wildcard
+ * ```
+ */
+export declare class Skins {
+    private readonly map;
+    /** the wildcard widget every lookup falls back to */
+    static readonly ANY = "*";
+    define(widget: string, state: WidgetState, skin: Skin): void;
+    has(widget: string): boolean;
+    widgets(): string[];
+    /** the skin a widget draws in a state, following the fallback chain to an empty skin */
+    resolve(widget: string, state?: WidgetState): Skin;
+    /** every state a widget has an entry for, not counting the wildcard fallback */
+    statesOf(widget: string): WidgetState[];
+    /**
+     * Builds a registry from plain data - the shape a config file would parse into. An entry with
+     * any state key is read as one look per state; anything else is that widget's idle look.
+     */
+    static from(data: Readonly<Record<string, SkinData>>): Skins;
+}
+//# sourceMappingURL=Skins.d.ts.map

package/dist/two-d/ui/Skins.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skins.d.ts","sourceRoot":"","sources":["../../../src/two-d/ui/Skins.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEtD,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC;AAE7F;;;;GAIG;AACH,MAAM,WAAW,IAAI;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,wDAAwD;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,MAAM,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC,CAAC;AAC5D,mFAAmF;AACnF,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,UAAU,CAAC;AAIzC;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBAAa,KAAK;IACjB,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAiC;IAErD,qDAAqD;IACrD,MAAM,CAAC,QAAQ,CAAC,GAAG,OAAO;IAE1B,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,GAAG,IAAI,CAI3D;IAED,GAAG,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAE3B;IAED,OAAO,IAAI,MAAM,EAAE,CAElB;IAED,wFAAwF;IACxF,OAAO,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,GAAE,WAAoB,GAAG,IAAI,CAQzD;IAED,gFAAgF;IAChF,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,WAAW,EAAE,CAGtC;IAED;;;OAGG;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,GAAG,KAAK,CAa3D;CACD"}

package/dist/two-d/ui/Skins.js

@@ -0,0 +1,77 @@
+const STATES = ['idle', 'hover', 'pressed', 'disabled', 'selected', 'focused'];
+/**
+ * Per-widget and per-state skins, looked up by name - the data-driven half of what GUI2 puts in
+ * `data/gui/*.cfg`, and the thing the one global `Theme` has no room for.
+ *
+ * A lookup walks a fixed chain so a caller never gets `undefined`: the widget's own state, its
+ * idle look, the wildcard widget's state, the wildcard's idle look, then an empty skin. That is
+ * what lets a game define a shared `*` skin once and override only the two widgets it cares about,
+ * and what makes a state a widget never defined fall back rather than disappear.
+ *
+ * @example
+ * ```ts
+ * import { Skins } from '@datamoc/mw_games/two-d/ui';
+ *
+ * const skins = new Skins();
+ * skins.define('*', 'idle', { background: 0x101018, text: 0xe8e8f0 });
+ * skins.define('button', 'pressed', { background: 0xffe680, text: 0x101018 });
+ *
+ * console.log(skins.resolve('button', 'pressed').text); // 0x101018, the override
+ * console.log(skins.resolve('label', 'idle').background); // 0x101018, the wildcard
+ * ```
+ */
+export class Skins {
+    constructor() {
+        this.map = new Map();
+    }
+    /** the wildcard widget every lookup falls back to */
+    static { this.ANY = '*'; }
+    define(widget, state, skin) {
+        const states = this.map.get(widget) ?? {};
+        states[state] = { ...states[state], ...skin };
+        this.map.set(widget, states);
+    }
+    has(widget) {
+        return this.map.has(widget);
+    }
+    widgets() {
+        return [...this.map.keys()];
+    }
+    /** the skin a widget draws in a state, following the fallback chain to an empty skin */
+    resolve(widget, state = 'idle') {
+        return (this.map.get(widget)?.[state] ??
+            this.map.get(widget)?.idle ??
+            this.map.get(Skins.ANY)?.[state] ??
+            this.map.get(Skins.ANY)?.idle ??
+            {});
+    }
+    /** every state a widget has an entry for, not counting the wildcard fallback */
+    statesOf(widget) {
+        const states = this.map.get(widget);
+        return states ? STATES.filter((state) => states[state] !== undefined) : [];
+    }
+    /**
+     * Builds a registry from plain data - the shape a config file would parse into. An entry with
+     * any state key is read as one look per state; anything else is that widget's idle look.
+     */
+    static from(data) {
+        const skins = new Skins();
+        for (const [widget, value] of Object.entries(data)) {
+            if (isStateMap(value)) {
+                for (const state of STATES) {
+                    const skin = value[state];
+                    if (skin)
+                        skins.define(widget, state, skin);
+                }
+            }
+            else {
+                skins.define(widget, 'idle', value);
+            }
+        }
+        return skins;
+    }
+}
+function isStateMap(value) {
+    return STATES.some((state) => value[state] !== undefined);
+}
+//# sourceMappingURL=Skins.js.map

package/dist/two-d/ui/Skins.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skins.js","sourceRoot":"","sources":["../../../src/two-d/ui/Skins.ts"],"names":[],"mappings":"AAwBA,MAAM,MAAM,GAA2B,CAAC,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC;AAEvG;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,OAAO,KAAK;IAAlB;QACkB,QAAG,GAAG,IAAI,GAAG,EAAsB,CAAC;IAsDtD,CAAC;IApDA,qDAAqD;aACrC,QAAG,GAAG,GAAG,AAAN,CAAO;IAE1B,MAAM,CAAC,MAAc,EAAE,KAAkB,EAAE,IAAU;QACpD,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;QAC1C,MAAM,CAAC,KAAK,CAAC,GAAG,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC;QAC9C,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,CAAC;IAED,GAAG,CAAC,MAAc;QACjB,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IAC7B,CAAC;IAED,OAAO;QACN,OAAO,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC;IAC7B,CAAC;IAED,wFAAwF;IACxF,OAAO,CAAC,MAAc,EAAE,KAAK,GAAgB,MAAM;QAClD,OAAO,CACN,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC;YAC7B,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,IAAI;YAC1B,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,KAAK,CAAC;YAChC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,IAAI;YAC7B,EAAE,CACF,CAAC;IACH,CAAC;IAED,gFAAgF;IAChF,QAAQ,CAAC,MAAc;QACtB,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QACpC,OAAO,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5E,CAAC;IAED;;;OAGG;IACH,MAAM,CAAC,IAAI,CAAC,IAAwC;QACnD,MAAM,KAAK,GAAG,IAAI,KAAK,EAAE,CAAC;QAC1B,KAAK,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;YACpD,IAAI,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC;gBACvB,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;oBAC5B,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;oBAC1B,IAAI,IAAI;wBAAE,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;gBAC7C,CAAC;YACF,CAAC;iBAAM,CAAC;gBACP,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;YACrC,CAAC;QACF,CAAC;QACD,OAAO,KAAK,CAAC;IACd,CAAC;CACD;AAED,SAAS,UAAU,CAAC,KAAe;IAClC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAE,KAAoB,CAAC,KAAK,CAAC,KAAK,SAAS,CAAC,CAAC;AAC3E,CAAC"}

package/dist/two-d/ui/Slider.d.ts

@@ -0,0 +1,91 @@
+import { Container } from 'pixi.js';
+import { Signal } from '../../core/Signal.ts';
+export interface SliderOptions {
+    width: number;
+    height?: number;
+    min?: number;
+    max?: number;
+    /** the value grid; 0 or omitted is continuous */
+    step?: number;
+    value?: number;
+    /** the draggable knob's diameter; defaults to the track height */
+    knobSize?: number;
+    disabled?: boolean;
+}
+/**
+ * Where `value` sits in `[min, max]`, 0 to 1, clamped. A degenerate range reads 0 rather than
+ * dividing by zero.
+ *
+ * @example
+ * ```ts
+ * import { sliderFraction } from '@datamoc/mw_games/two-d/ui';
+ *
+ * console.log(sliderFraction(30, 0, 60)); // 0.5
+ * ```
+ */
+export declare function sliderFraction(value: number, min?: number, max?: number): number;
+/**
+ * The value at a 0-to-1 position on the track, snapped to `step` and clamped to `[min, max]`.
+ * The snap is rounded to the step's own number of decimals, so a 0.1 step reads `0.3` rather
+ * than `0.30000000000000004`.
+ *
+ * @example
+ * ```ts
+ * import { sliderValueAt } from '@datamoc/mw_games/two-d/ui';
+ *
+ * console.log(sliderValueAt(0.5, 0, 10, 1)); // 5
+ * ```
+ */
+export declare function sliderValueAt(fraction: number, min?: number, max?: number, step?: number): number;
+/**
+ * A draggable knob on a track, for a volume, difficulty or zoom setting.
+ *
+ * The track is drawn from the theme and a partial fill shows where the knob is; the value is
+ * always a number in `[min, max]`, and `sliderValueAt` is the arithmetic that turns a click or
+ * drag into one, exported so a game routing input itself gets the same snapping.
+ *
+ * @example
+ * ```ts
+ * import { Slider } from '@datamoc/mw_games/two-d/ui';
+ *
+ * const volume = new Slider({ width: 200, min: 0, max: 100, step: 5, value: 40 });
+ * volume.onChange.add((value) => console.log('volume', value));
+ * volume.setValue(75);
+ * ```
+ */
+export declare class Slider extends Container {
+    readonly onChange: Signal<number>;
+    private track;
+    private fill;
+    private knob;
+    private width_;
+    private height_;
+    private knobSize;
+    private min;
+    private max;
+    private step;
+    private value_;
+    private disabled_;
+    private dragging;
+    private readonly themeListener;
+    constructor(options: SliderOptions);
+    /** the current value, in `[min, max]` */
+    get value(): number;
+    /** where the knob sits, 0 to 1 */
+    get fraction(): number;
+    get disabled(): boolean;
+    setDisabled(disabled: boolean): void;
+    setValue(value: number): void;
+    /** moves the knob to a 0-to-1 position, the arithmetic a track click uses */
+    setFraction(fraction: number): void;
+    resize(width: number, height: number): void;
+    private get trackLength();
+    private snap;
+    private fractionAt;
+    private readonly handleDown;
+    private readonly handleMove;
+    private readonly handleUp;
+    private draw;
+    destroy(options?: Parameters<Container['destroy']>[0]): void;
+}
+//# sourceMappingURL=Slider.d.ts.map

package/dist/two-d/ui/Slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/two-d/ui/Slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAG9C,MAAM,WAAW,aAAa;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,SAAI,EAAE,GAAG,SAAI,GAAG,MAAM,CAGtE;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,QAAQ,EAAE,MAAM,EAAE,GAAG,SAAI,EAAE,GAAG,SAAI,EAAE,IAAI,SAAI,GAAG,MAAM,CAOlF;AAED;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,MAAO,SAAQ,SAAS;IACpC,QAAQ,CAAC,QAAQ,iBAAwB;IAEzC,OAAO,CAAC,KAAK,CAAkB;IAC/B,OAAO,CAAC,IAAI,CAAkB;IAC9B,OAAO,CAAC,IAAI,CAAkB;IAE9B,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,GAAG,CAAS;IACpB,OAAO,CAAC,GAAG,CAAS;IACpB,OAAO,CAAC,IAAI,CAAS;IACrB,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,SAAS,CAAU;IAE3B,OAAO,CAAC,QAAQ,CAAS;IAEzB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAqB;IAEnD,YAAY,OAAO,EAAE,aAAa,EAyBjC;IAED,yCAAyC;IACzC,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,kCAAkC;IAClC,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,WAAW,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAInC;IAED,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAS5B;IAED,6EAA6E;IAC7E,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAElC;IAED,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAI1C;IAED,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,CAAC,IAAI;IAIZ,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAIzB;IAEF,OAAO,CAAC,QAAQ,CAAC,UAAU,CAGzB;IAEF,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAEvB;IAEF,OAAO,CAAC,IAAI;IAyBH,OAAO,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAGpE;CACD"}