@debuffjp/ui 0.0.0-stage → 0.3.0

package/README.md

@@ -1,3 +1,47 @@
-# Temporary Holding Version
+# @debuffjp/ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The screens around your game: fades between areas, title and pause menus, framed panels. No dependencies, and each export can be used on its own. Everything runs on `update(dt)`, so replays and scenarios stay deterministic.
+
+```ts
+import { Menu, Transition } from "@debuffjp/ui";
+
+const fade = new Transition({ duration: 0.35, color: "#1a1020" });
+let volume = 10;
+const pause = new Menu(
+  [
+    { label: "resume", onSelect: () => (paused = false) },
+    { label: "volume", value: () => `${volume}`, change: (d) => (volume = Math.max(0, Math.min(10, volume + d))) },
+    { label: "restart", onSelect: () => fade.run(reset) },
+  ],
+  { actions: { up: "up", down: "down", confirm: "jump", back: "pause", left: "left", right: "right" } },
+);
+
+// every step
+fade.update(dt);
+if (fade.blocking) return;
+if (paused) pause.update(input);
+
+// render, after the world
+if (paused) pause.drawPanel(draw, game.width / 2, game.height / 2, { title: "paused" });
+fade.draw(draw, 0, 0, game.width, game.height);
+```
+
+## Layout
+
+Text is measured with `draw.measure`, so nothing is positioned by guesswork:
+
+- The cursor has its own column. Labels never shift when focus moves.
+- Values (`value: () => string`) are right-aligned in a column of their own.
+- `drawPanel` centres the frame on a point, mirrors the cursor column so the labels and the title share a centre, and pads evenly on all sides.
+- Every position snaps to whole pixels, so pixel fonts stay crisp.
+
+## API
+
+- `Transition`: `run(swap?)` → covers the screen, calls `swap` once fully covered, then uncovers. `update(dt)`, `draw(draw, x, y, w, h)`, `stop()`, `active`, `blocking`, `cover`, `inspect()`
+- `Menu`: `new Menu(items, { actions, onBack, wrap })`, `update(input)` (with `input.pointer`, a tap selects the row under it; on a value row the left half lowers and the right half raises), `tap(x, y)`, `move(delta)`, `select()`, `measure(draw, style)`, `draw(draw, x, y, style)`, `drawPanel(draw, cx, cy, style)`, `focused`, `inspect()`
+  - items: `{ label, onSelect?, disabled?, value?, change? }`
+  - style: `font`, `color`, `focusColor`, `disabledColor`, `gap` (3), `align` (`left`/`center`), `cursor` (`>`), `cursorGap` (4), `valueGap` (12); panel adds `title`, `titleFont`, `titleColor`, `titleGap` (6), `borders`, `fill`, `padding` (6)
+- `panel(draw, x, y, w, h, borders, fill?)`: 1px rings, outermost first, then the fill
+- `panelAround(draw, cx, cy, w, h, { borders, fill, padding })`: a panel fitted around content, centred and pixel-snapped; returns the content's top-left
+
+Colours and fonts are yours to choose; the defaults are plain greys.

package/dist/draw-like.d.ts

@@ -0,0 +1,30 @@
+/** A CSS font string or a font object such as `@debuffjp/core`'s `BitmapFont`. */
+export type FontLike = string | object;
+export interface TextOptions {
+    font?: FontLike;
+    color?: string | number;
+    align?: "left" | "center" | "right";
+    baseline?: "top" | "middle" | "bottom";
+}
+/** The parts of `@debuffjp/core`'s `Draw` that ui uses. Structural, so ui has no dependencies. */
+export interface DrawLike {
+    alpha: number;
+    rect(x: number, y: number, w: number, h: number, color: string | number): void;
+    text(text: string, x: number, y: number, options?: TextOptions): void;
+    /** The box `text()` fills, in logical pixels. */
+    measure(text: string, font?: FontLike): {
+        w: number;
+        h: number;
+    };
+}
+/** The part of `@debuffjp/input`'s `Input` that `Menu` reads. */
+export interface InputLike<A extends string = string> {
+    pressed(action: A): boolean;
+    /** When present, tapping or clicking a row selects it. */
+    pointer?: {
+        x: number;
+        y: number;
+        pressed: boolean;
+    };
+}
+//# sourceMappingURL=draw-like.d.ts.map

package/dist/draw-like.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"draw-like.d.ts","sourceRoot":"","sources":["../src/draw-like.ts"],"names":[],"mappings":"AAAA,kFAAkF;AAClF,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AAEvC,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;CACxC;AAED,kGAAkG;AAClG,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC/E,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACtE,iDAAiD;IACjD,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,QAAQ,GAAG;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAClE;AAED,iEAAiE;AACjE,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAClD,OAAO,CAAC,MAAM,EAAE,CAAC,GAAG,OAAO,CAAC;IAC5B,0DAA0D;IAC1D,OAAO,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC;CACtD"}

package/dist/draw-like.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=draw-like.js.map

package/dist/draw-like.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"draw-like.js","sourceRoot":"","sources":["../src/draw-like.ts"],"names":[],"mappings":""}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export type { DrawLike, FontLike, InputLike, TextOptions } from "./draw-like.js";
+export { Menu, type MenuActions, type MenuItem, type MenuOptions, type MenuPanelStyle, type MenuStyle } from "./menu.js";
+export { type FrameStyle, panel, panelAround } from "./panel.js";
+export { Transition, type TransitionOptions } from "./transition.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AACjF,OAAO,EAAE,IAAI,EAAE,KAAK,WAAW,EAAE,KAAK,QAAQ,EAAE,KAAK,WAAW,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AACzH,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/index.js

@@ -0,0 +1,4 @@
+export { Menu } from "./menu.js";
+export { panel, panelAround } from "./panel.js";
+export { Transition } from "./transition.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAA0F,MAAM,WAAW,CAAC;AACzH,OAAO,EAAmB,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACjE,OAAO,EAAE,UAAU,EAA0B,MAAM,iBAAiB,CAAC"}

package/dist/menu.d.ts

@@ -0,0 +1,107 @@
+import type { DrawLike, FontLike, InputLike } from "./draw-like.js";
+import { type FrameStyle } from "./panel.js";
+export interface MenuItem {
+    label: string;
+    onSelect?: () => void;
+    /** Skipped by navigation and drawn dimmed. */
+    disabled?: boolean;
+    /** Shown in a right-hand column, e.g. a volume or "on"/"off". Read every draw. */
+    value?: () => string;
+    /** Left/right on this row (with `left`/`right` actions) call this with -1 or 1. */
+    change?: (dir: -1 | 1) => void;
+}
+export interface MenuActions<A extends string = string> {
+    up: A;
+    down: A;
+    confirm: A;
+    /** Optional; calls `onBack`. */
+    back?: A;
+    /** Optional; adjust the focused row's value. */
+    left?: A;
+    right?: A;
+}
+export interface MenuOptions<A extends string = string> {
+    /** Input action names. Default `{ up: "up", down: "down", confirm: "confirm" }`. */
+    actions?: MenuActions<A>;
+    onBack?: () => void;
+    /** Wrap from the last item to the first. Default true. */
+    wrap?: boolean;
+}
+export interface MenuStyle {
+    /** CSS font or `BitmapFont`. Default "8px monospace". */
+    font?: FontLike;
+    color?: string | number;
+    focusColor?: string | number;
+    disabledColor?: string | number;
+    /** Extra pixels between rows. Default 3. */
+    gap?: number;
+    /** "left" lines labels up after the cursor; "center" centres each label. Default "left". */
+    align?: "left" | "center";
+    /** Drawn beside the focused label, in its own column so labels never shift. Default ">". */
+    cursor?: string;
+    /** Pixels between the cursor and its label. Default 4. */
+    cursorGap?: number;
+    /** Minimum pixels between the label column and the value column. Default 12. */
+    valueGap?: number;
+}
+export interface MenuPanelStyle extends MenuStyle, FrameStyle {
+    title?: string;
+    titleFont?: FontLike;
+    titleColor?: string | number;
+    /** Pixels between the title and the first row. Default 6. */
+    titleGap?: number;
+}
+/**
+ * A vertical list of choices for title screens, pause menus and settings. Navigates with your
+ * existing input actions, so keyboard, gamepad and touch bindings all work. Layout is measured, so
+ * rows, cursor and frame line up to the pixel with any font.
+ *
+ * ```ts
+ * const pause = new Menu([
+ *   { label: "resume", onSelect: () => (paused = false) },
+ *   { label: "restart", onSelect: reset },
+ * ], { actions: { up: "up", down: "down", confirm: "jump" } });
+ * // every step while paused: pause.update(input)
+ * // render: pause.drawPanel(draw, game.width / 2, game.height / 2, { title: "paused" })
+ * ```
+ */
+export declare class Menu<A extends string = string> {
+    items: MenuItem[];
+    focus: number;
+    wrap: boolean;
+    onBack: (() => void) | undefined;
+    private actions;
+    /** Row boxes from the last draw, for pointer hits. */
+    private rows;
+    constructor(items: MenuItem[], options?: MenuOptions<A>);
+    get focused(): MenuItem | undefined;
+    /** Move focus by `delta`, skipping disabled items. */
+    move(delta: number): void;
+    /** Activate the focused item. */
+    select(): void;
+    /** Read input for this step. Returns true if anything happened. */
+    update(input: InputLike<A>): boolean;
+    /** `mirror` reserves the cursor column on the right too, so the labels sit on the box's centre. */
+    /**
+     * Tap at logical (x, y), using the rows from the last draw. Selects the row; on a row with a value,
+     * the left half lowers it and the right half raises it.
+     */
+    tap(x: number, y: number): boolean;
+    private layout;
+    /** The box `draw` fills with this style, in logical pixels. */
+    measure(draw: DrawLike, style?: MenuStyle): {
+        w: number;
+        h: number;
+    };
+    /** Draw the rows with their box's top-left at (x, y). Positions snap to whole pixels. */
+    draw(draw: DrawLike, x: number, y: number, style?: MenuStyle): void;
+    private drawLayout;
+    /** A framed menu with an optional title, centred on (cx, cy). */
+    drawPanel(draw: DrawLike, cx: number, cy: number, style?: MenuPanelStyle): void;
+    inspect(): {
+        focus: number;
+        focused: string | undefined;
+        items: string[];
+    };
+}
+//# sourceMappingURL=menu.d.ts.map

package/dist/menu.d.ts.map

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

package/dist/menu.js

@@ -0,0 +1,182 @@
+import { panelAround } from "./panel.js";
+const FONT = "8px monospace";
+/**
+ * A vertical list of choices for title screens, pause menus and settings. Navigates with your
+ * existing input actions, so keyboard, gamepad and touch bindings all work. Layout is measured, so
+ * rows, cursor and frame line up to the pixel with any font.
+ *
+ * ```ts
+ * const pause = new Menu([
+ *   { label: "resume", onSelect: () => (paused = false) },
+ *   { label: "restart", onSelect: reset },
+ * ], { actions: { up: "up", down: "down", confirm: "jump" } });
+ * // every step while paused: pause.update(input)
+ * // render: pause.drawPanel(draw, game.width / 2, game.height / 2, { title: "paused" })
+ * ```
+ */
+export class Menu {
+    items;
+    focus = 0;
+    wrap;
+    onBack;
+    actions;
+    /** Row boxes from the last draw, for pointer hits. */
+    rows = [];
+    constructor(items, options = {}) {
+        this.items = items;
+        this.actions = options.actions ?? { up: "up", down: "down", confirm: "confirm" };
+        this.wrap = options.wrap ?? true;
+        this.onBack = options.onBack;
+        if (this.items[this.focus]?.disabled)
+            this.move(1);
+    }
+    get focused() {
+        return this.items[this.focus];
+    }
+    /** Move focus by `delta`, skipping disabled items. */
+    move(delta) {
+        const n = this.items.length;
+        if (n === 0)
+            return;
+        let i = this.focus;
+        for (let tries = 0; tries < n; tries++) {
+            const next = i + delta;
+            if (!this.wrap && (next < 0 || next >= n))
+                return;
+            i = (next + n) % n;
+            if (!this.items[i]?.disabled) {
+                this.focus = i;
+                return;
+            }
+        }
+    }
+    /** Activate the focused item. */
+    select() {
+        const item = this.focused;
+        if (item && !item.disabled)
+            item.onSelect?.();
+    }
+    /** Read input for this step. Returns true if anything happened. */
+    update(input) {
+        // A tap is handled by the rows alone, so a pointer bound to "confirm" doesn't also select the focused row.
+        if (input.pointer?.pressed)
+            return this.tap(input.pointer.x, input.pointer.y);
+        const a = this.actions;
+        if (input.pressed(a.up))
+            this.move(-1);
+        else if (input.pressed(a.down))
+            this.move(1);
+        else if (input.pressed(a.confirm))
+            this.select();
+        else if (a.back && input.pressed(a.back))
+            this.onBack?.();
+        else if (a.left && input.pressed(a.left))
+            this.focused?.change?.(-1);
+        else if (a.right && input.pressed(a.right))
+            this.focused?.change?.(1);
+        else
+            return false;
+        return true;
+    }
+    /** `mirror` reserves the cursor column on the right too, so the labels sit on the box's centre. */
+    /**
+     * Tap at logical (x, y), using the rows from the last draw. Selects the row; on a row with a value,
+     * the left half lowers it and the right half raises it.
+     */
+    tap(x, y) {
+        const i = this.rows.findIndex((r) => x >= r.x && x < r.x + r.w && y >= r.y && y < r.y + r.h);
+        const item = this.items[i];
+        if (!item || item.disabled)
+            return false;
+        this.focus = i;
+        const row = this.rows[i];
+        if (item.change)
+            item.change(x < row.x + row.w / 2 ? -1 : 1);
+        else
+            this.select();
+        return true;
+    }
+    layout(draw, style, mirror = style.align === "center") {
+        const font = style.font ?? FONT;
+        const cursor = draw.measure(style.cursor ?? ">", font);
+        const gutter = cursor.w + (style.cursorGap ?? 4);
+        let rowH = cursor.h;
+        const widths = this.items.map((item) => {
+            const m = draw.measure(item.label, font);
+            rowH = Math.max(rowH, m.h);
+            return m.w;
+        });
+        const labelW = Math.max(0, ...widths);
+        const values = this.items.map((item) => item.value?.());
+        const valueWidths = values.map((v) => (v ? draw.measure(v, font).w : 0));
+        const valueW = Math.max(0, ...valueWidths);
+        const gap = style.gap ?? 3;
+        const n = this.items.length;
+        const w = labelW + gutter * (mirror ? 2 : 1) + (valueW ? (style.valueGap ?? 12) + valueW : 0);
+        return {
+            mirror,
+            font,
+            gutter,
+            cursorW: cursor.w,
+            rowH,
+            gap,
+            labelW,
+            widths,
+            values,
+            valueWidths,
+            w,
+            h: n ? n * rowH + (n - 1) * gap : 0,
+        };
+    }
+    /** The box `draw` fills with this style, in logical pixels. */
+    measure(draw, style = {}) {
+        const { w, h } = this.layout(draw, style);
+        return { w, h };
+    }
+    /** Draw the rows with their box's top-left at (x, y). Positions snap to whole pixels. */
+    draw(draw, x, y, style = {}) {
+        this.drawLayout(draw, x, y, style, this.layout(draw, style));
+    }
+    drawLayout(draw, x, y, style, l) {
+        const mirror = l.mirror;
+        this.rows = [];
+        const x0 = Math.round(x);
+        const y0 = Math.round(y);
+        for (let i = 0; i < this.items.length; i++) {
+            const item = this.items[i];
+            const focused = i === this.focus;
+            const color = item.disabled ? (style.disabledColor ?? "#666") : focused ? (style.focusColor ?? "#fff") : (style.color ?? "#999");
+            const offset = style.align === "center" ? Math.floor((l.labelW - (l.widths[i] ?? 0)) / 2) : 0;
+            const lx = x0 + l.gutter + offset;
+            const ry = y0 + i * (l.rowH + l.gap);
+            // Hit box: the full row width, extended into half the gap above and below so taps between rows land.
+            this.rows.push({ x: x0, y: ry - Math.floor(l.gap / 2), w: l.w, h: l.rowH + l.gap });
+            draw.text(item.label, lx, ry, { font: l.font, color });
+            if (focused)
+                draw.text(style.cursor ?? ">", lx - l.gutter, ry, { font: l.font, color });
+            const value = l.values[i];
+            // Values are right-aligned to the box edge, so a column of numbers lines up.
+            if (value)
+                draw.text(value, x0 + l.w - (mirror ? l.gutter : 0) - (l.valueWidths[i] ?? 0), ry, { font: l.font, color });
+        }
+    }
+    /** A framed menu with an optional title, centred on (cx, cy). */
+    drawPanel(draw, cx, cy, style = {}) {
+        const menu = this.layout(draw, style, true);
+        const titleFont = style.titleFont ?? menu.font;
+        const title = style.title ? draw.measure(style.title, titleFont) : { w: 0, h: 0 };
+        const titleH = style.title ? title.h + (style.titleGap ?? 6) : 0;
+        const w = Math.max(menu.w, title.w);
+        const at = panelAround(draw, cx, cy, w, titleH + menu.h, style);
+        if (style.title)
+            draw.text(style.title, at.x + Math.floor((w - title.w) / 2), at.y, {
+                font: titleFont,
+                color: style.titleColor ?? style.focusColor ?? "#fff",
+            });
+        this.drawLayout(draw, at.x + Math.floor((w - menu.w) / 2), at.y + titleH, style, menu);
+    }
+    inspect() {
+        return { focus: this.focus, focused: this.focused?.label, items: this.items.map((i) => i.label) };
+    }
+}
+//# sourceMappingURL=menu.js.map

package/dist/menu.js.map

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

package/dist/panel.d.ts

@@ -0,0 +1,23 @@
+import type { DrawLike } from "./draw-like.js";
+/**
+ * A framed box: each colour in `borders` is a 1px ring, outermost first, then `fill` inside.
+ * `panel(draw, 48, 40, 160, 64, ["#c3a6d8", "#1a1020", "#5b3a6e"], "#1a1020")`
+ */
+export declare function panel(draw: DrawLike, x: number, y: number, w: number, h: number, borders: readonly (string | number)[], fill?: string | number): void;
+export interface FrameStyle {
+    /** 1px rings, outermost first. Default one light ring. */
+    borders?: readonly (string | number)[];
+    /** Default a dark grey. */
+    fill?: string | number;
+    /** Space between the innermost ring and the content. Default 6. */
+    padding?: number;
+}
+/**
+ * Draw a panel that fits content of `w`×`h` centred on (cx, cy), snapped to whole pixels.
+ * Returns the content's top-left, where you draw what goes inside.
+ */
+export declare function panelAround(draw: DrawLike, cx: number, cy: number, w: number, h: number, style?: FrameStyle): {
+    x: number;
+    y: number;
+};
+//# sourceMappingURL=panel.d.ts.map

package/dist/panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../src/panel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C;;;GAGG;AACH,wBAAgB,KAAK,CACnB,IAAI,EAAE,QAAQ,EACd,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,OAAO,EAAE,SAAS,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,EACrC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GACrB,IAAI,CAQN;AAED,MAAM,WAAW,UAAU;IACzB,0DAA0D;IAC1D,OAAO,CAAC,EAAE,SAAS,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IACvC,2BAA2B;IAC3B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,mEAAmE;IACnE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,wBAAgB,WAAW,CACzB,IAAI,EAAE,QAAQ,EACd,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,GAAE,UAAe,GACrB;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAS1B"}

package/dist/panel.js

@@ -0,0 +1,30 @@
+/**
+ * A framed box: each colour in `borders` is a 1px ring, outermost first, then `fill` inside.
+ * `panel(draw, 48, 40, 160, 64, ["#c3a6d8", "#1a1020", "#5b3a6e"], "#1a1020")`
+ */
+export function panel(draw, x, y, w, h, borders, fill) {
+    let i = 0;
+    for (const c of borders) {
+        if (w - i * 2 <= 0 || h - i * 2 <= 0)
+            return;
+        draw.rect(x + i, y + i, w - i * 2, h - i * 2, c);
+        i++;
+    }
+    if (fill !== undefined && w - i * 2 > 0 && h - i * 2 > 0)
+        draw.rect(x + i, y + i, w - i * 2, h - i * 2, fill);
+}
+/**
+ * Draw a panel that fits content of `w`×`h` centred on (cx, cy), snapped to whole pixels.
+ * Returns the content's top-left, where you draw what goes inside.
+ */
+export function panelAround(draw, cx, cy, w, h, style = {}) {
+    const borders = style.borders ?? ["#ddd"];
+    const inset = borders.length + (style.padding ?? 6);
+    const outerW = Math.ceil(w) + inset * 2;
+    const outerH = Math.ceil(h) + inset * 2;
+    const x = Math.round(cx - outerW / 2);
+    const y = Math.round(cy - outerH / 2);
+    panel(draw, x, y, outerW, outerH, borders, style.fill ?? "#222");
+    return { x: x + inset, y: y + inset };
+}
+//# sourceMappingURL=panel.js.map

package/dist/panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.js","sourceRoot":"","sources":["../src/panel.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,UAAU,KAAK,CACnB,IAAc,EACd,CAAS,EACT,CAAS,EACT,CAAS,EACT,CAAS,EACT,OAAqC,EACrC,IAAsB;IAEtB,IAAI,CAAC,GAAG,CAAC,CAAC;IACV,KAAK,MAAM,CAAC,IAAI,OAAO,EAAE,CAAC;QACxB,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC;YAAE,OAAO;QAC7C,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QACjD,CAAC,EAAE,CAAC;IACN,CAAC;IACD,IAAI,IAAI,KAAK,SAAS,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC;QAAE,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,CAAC;AAChH,CAAC;AAWD;;;GAGG;AACH,MAAM,UAAU,WAAW,CACzB,IAAc,EACd,EAAU,EACV,EAAU,EACV,CAAS,EACT,CAAS,EACT,KAAK,GAAe,EAAE;IAEtB,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC;IAC1C,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC;IACpD,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC;IACxC,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC;IACxC,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,MAAM,GAAG,CAAC,CAAC,CAAC;IACtC,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,MAAM,GAAG,CAAC,CAAC,CAAC;IACtC,KAAK,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC,IAAI,IAAI,MAAM,CAAC,CAAC;IACjE,OAAO,EAAE,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC;AACxC,CAAC"}

package/dist/transition.d.ts

@@ -0,0 +1,44 @@
+import type { DrawLike } from "./draw-like.js";
+export interface TransitionOptions {
+    /** Seconds to fade out, and again to fade back in. Default 0.35. */
+    duration?: number;
+    /** Cover colour. Default black. */
+    color?: string | number;
+}
+/**
+ * A fade-out → swap → fade-in screen transition. `run(swap)` covers the screen, calls `swap` once
+ * fully covered (move the player, load the level, change scene), then uncovers it. Driven by
+ * `update(dt)`, so it stays deterministic under replays and scenarios.
+ *
+ * ```ts
+ * const fade = new Transition({ color: "#1a1020" });
+ * fade.run(() => placePlayer(stairs));
+ * // every step: fade.update(dt); if (fade.blocking) return;
+ * // after drawing the world: fade.draw(draw, 0, 0, game.width, game.height);
+ * ```
+ */
+export declare class Transition {
+    duration: number;
+    color: string | number;
+    private t;
+    private swap;
+    constructor(options?: TransitionOptions);
+    /** Start a transition. Ignored while one is already running, so a held button can't stack them. */
+    run(swap?: () => void): boolean;
+    /** Cancel without calling the pending swap, e.g. on a full reset. */
+    stop(): void;
+    /** A transition is running. */
+    get active(): boolean;
+    /** Still covering or swapping: gameplay usually pauses until the fade-in starts. */
+    get blocking(): boolean;
+    /** How covered the screen is, 0 to 1. */
+    get cover(): number;
+    update(dt: number): void;
+    /** Draw the cover over a region (usually the whole screen, or the play area below a HUD). */
+    draw(draw: DrawLike, x: number, y: number, w: number, h: number): void;
+    inspect(): {
+        active: boolean;
+        cover: number;
+    };
+}
+//# sourceMappingURL=transition.d.ts.map

package/dist/transition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transition.d.ts","sourceRoot":"","sources":["../src/transition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,MAAM,WAAW,iBAAiB;IAChC,oEAAoE;IACpE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED;;;;;;;;;;;GAWG;AACH,qBAAa,UAAU;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,OAAO,CAAC,CAAC,CAAM;IACf,OAAO,CAAC,IAAI,CAA2B;IAEvC,YAAY,OAAO,GAAE,iBAAsB,EAG1C;IAED,mGAAmG;IACnG,GAAG,CAAC,IAAI,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAK9B;IAED,qEAAqE;IACrE,IAAI,IAAI,IAAI,CAGX;IAED,+BAA+B;IAC/B,IAAI,MAAM,IAAI,OAAO,CAEpB;IAED,oFAAoF;IACpF,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,yCAAyC;IACzC,IAAI,KAAK,IAAI,MAAM,CAGlB;IAED,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAUvB;IAED,6FAA6F;IAC7F,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAOrE;IAED,OAAO,IAAI;QAAE,MAAM,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAE5C;CACF"}

package/dist/transition.js

@@ -0,0 +1,76 @@
+/**
+ * A fade-out → swap → fade-in screen transition. `run(swap)` covers the screen, calls `swap` once
+ * fully covered (move the player, load the level, change scene), then uncovers it. Driven by
+ * `update(dt)`, so it stays deterministic under replays and scenarios.
+ *
+ * ```ts
+ * const fade = new Transition({ color: "#1a1020" });
+ * fade.run(() => placePlayer(stairs));
+ * // every step: fade.update(dt); if (fade.blocking) return;
+ * // after drawing the world: fade.draw(draw, 0, 0, game.width, game.height);
+ * ```
+ */
+export class Transition {
+    duration;
+    color;
+    t = -1;
+    swap;
+    constructor(options = {}) {
+        this.duration = options.duration ?? 0.35;
+        this.color = options.color ?? "#000";
+    }
+    /** Start a transition. Ignored while one is already running, so a held button can't stack them. */
+    run(swap) {
+        if (this.active)
+            return false;
+        this.t = 0;
+        this.swap = swap;
+        return true;
+    }
+    /** Cancel without calling the pending swap, e.g. on a full reset. */
+    stop() {
+        this.t = -1;
+        this.swap = undefined;
+    }
+    /** A transition is running. */
+    get active() {
+        return this.t >= 0;
+    }
+    /** Still covering or swapping: gameplay usually pauses until the fade-in starts. */
+    get blocking() {
+        return this.t >= 0 && this.t < 1;
+    }
+    /** How covered the screen is, 0 to 1. */
+    get cover() {
+        if (this.t < 0)
+            return 0;
+        return this.t < 1 ? this.t : Math.max(0, 2 - this.t);
+    }
+    update(dt) {
+        if (this.t < 0)
+            return;
+        const before = this.t;
+        this.t += dt / Math.max(this.duration, 1e-6);
+        if (before < 1 && this.t >= 1) {
+            const swap = this.swap;
+            this.swap = undefined;
+            swap?.();
+        }
+        if (this.t >= 2)
+            this.t = -1;
+    }
+    /** Draw the cover over a region (usually the whole screen, or the play area below a HUD). */
+    draw(draw, x, y, w, h) {
+        const a = this.cover;
+        if (a <= 0)
+            return;
+        const prev = draw.alpha;
+        draw.alpha = prev * a;
+        draw.rect(x, y, w, h, this.color);
+        draw.alpha = prev;
+    }
+    inspect() {
+        return { active: this.active, cover: this.cover };
+    }
+}
+//# sourceMappingURL=transition.js.map

package/dist/transition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transition.js","sourceRoot":"","sources":["../src/transition.ts"],"names":[],"mappings":"AASA;;;;;;;;;;;GAWG;AACH,MAAM,OAAO,UAAU;IACrB,QAAQ,CAAS;IACjB,KAAK,CAAkB;IACf,CAAC,GAAG,CAAC,CAAC,CAAC;IACP,IAAI,CAA2B;IAEvC,YAAY,OAAO,GAAsB,EAAE;QACzC,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,IAAI,IAAI,CAAC;QACzC,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,IAAI,MAAM,CAAC;IACvC,CAAC;IAED,mGAAmG;IACnG,GAAG,CAAC,IAAiB;QACnB,IAAI,IAAI,CAAC,MAAM;YAAE,OAAO,KAAK,CAAC;QAC9B,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACX,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,qEAAqE;IACrE,IAAI;QACF,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;QACZ,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;IACxB,CAAC;IAED,+BAA+B;IAC/B,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;IACrB,CAAC;IAED,oFAAoF;IACpF,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;IACnC,CAAC;IAED,yCAAyC;IACzC,IAAI,KAAK;QACP,IAAI,IAAI,CAAC,CAAC,GAAG,CAAC;YAAE,OAAO,CAAC,CAAC;QACzB,OAAO,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;IACvD,CAAC;IAED,MAAM,CAAC,EAAU;QACf,IAAI,IAAI,CAAC,CAAC,GAAG,CAAC;YAAE,OAAO;QACvB,MAAM,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;QACtB,IAAI,CAAC,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;QAC7C,IAAI,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;YAC9B,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;YACvB,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;YACtB,IAAI,EAAE,EAAE,CAAC;QACX,CAAC;QACD,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC;YAAE,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IAC/B,CAAC;IAED,6FAA6F;IAC7F,IAAI,CAAC,IAAc,EAAE,CAAS,EAAE,CAAS,EAAE,CAAS,EAAE,CAAS;QAC7D,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QACrB,IAAI,CAAC,IAAI,CAAC;YAAE,OAAO;QACnB,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC;QACxB,IAAI,CAAC,KAAK,GAAG,IAAI,GAAG,CAAC,CAAC;QACtB,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QAClC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;IACpB,CAAC;IAED,OAAO;QACL,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;IACpD,CAAC;CACF"}

package/package.json

@@ -1,6 +1,46 @@
 {
   "name": "@debuffjp/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.3.0",
+  "description": "Screen transitions, menus and panels for debuff",
+  "keywords": [
+    "game",
+    "gamedev",
+    "game-engine",
+    "2d",
+    "html5-game",
+    "browser-game",
+    "debuff",
+    "ui",
+    "menu",
+    "hud",
+    "transition"
+  ],
+  "license": "MIT",
+  "homepage": "https://debuff.jp",
+  "bugs": "https://github.com/debuffjp/debuff/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/debuffjp/debuff.git",
+    "directory": "packages/ui"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc -b"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}