@rydr/game-sdk 3.0.1 → 3.1.1

package/dist/ui/dialogue-card.d.ts

@@ -0,0 +1,54 @@
+/**
+ * DIALOGUE CARD — an NPC discussion box built from the kit: a {@link Card} (dark container) holding
+ * the speaker's NAME, the LINE below (revealed with a small typewriter), and a controller KEYCAP
+ * (default A, from the barrel) in the corner as the "continue" affordance — preceded by a cue that
+ * reads ▸ while there's more to say and flips to ✓ on the last screen (the next A press closes it).
+ *
+ * The consumer authors **lines** — each one is shown DIRECTLY as a single screen (one A press per
+ * line), never re-wrapped or split by the component. To keep a long line from breaking the layout,
+ * the box is a fixed N-line frame with `overflow:hidden` (it can't grow), and each line has a soft
+ * character budget (`maxChars`): exceed it and the card logs a dev warning so the author knows the
+ * line may overflow. Char count is a rough proxy for "will this fit" — enough to give an idea.
+ *
+ * `open(name, lines)` starts a conversation; `advance()` finishes the current typewriter, steps to the
+ * next line, or — past the last line — closes the card and returns `false`. Fixed bottom-centre by
+ * default (a classic RPG bar), or `inline:true` to lay it in normal flow.
+ */
+import { type Card } from "./card.js";
+import { type ButtonLetter, type ButtonSource, type Keycap } from "./keycap.js";
+export interface DialogueCardOptions {
+    /** The "continue" button shown in the corner (default "A"). */
+    button?: ButtonLetter;
+    /** Lay the card inline (normal flow) instead of fixed bottom-centre. */
+    inline?: boolean;
+    /** Typewriter speed, ms per character (default 18; 0 = reveal instantly). */
+    typeMs?: number;
+    /** Wire the continue keycap to real controller input (pressed while its button is held). */
+    press?: ButtonSource;
+    /** Box height, in text lines: the line is clipped to this fixed frame so it can't grow (default 3). */
+    maxLines?: number;
+    /** Soft per-line character budget: a longer line logs a dev warning (default 140). */
+    maxChars?: number;
+    /** Fires with the line index whenever a NEW line becomes visible (at `open` and on each `advance` step,
+     *  not when a press merely finishes the typewriter). Used e.g. to drive a speaker's talking animation. */
+    onLine?: (idx: number) => void;
+}
+export interface DialogueCard {
+    root: HTMLElement;
+    /** The underlying card (container) — for styling / positioning. */
+    card: Card;
+    /** The continue keycap (drive its state if you want). */
+    keycap: Keycap;
+    /** Start a conversation: speaker name + lines. Each line is shown directly as one screen. */
+    open(name: string, lines: string[]): void;
+    /** Finish the typewriter, step to the next line, or close past the last line; `false` once closed. */
+    advance(): boolean;
+    /** Hide the card and reset. */
+    close(): void;
+    setVisible(v: boolean): void;
+    setScreenPos(x: number, y: number): void;
+    dispose(): void;
+}
+/** Mount a discussion card: name + typed line + a "continue" cue & keycap, inside the shared dark card. */
+export declare function mountDialogueCard(host: HTMLElement, opts?: DialogueCardOptions): DialogueCard;
+//# sourceMappingURL=dialogue-card.d.ts.map

package/dist/ui/dialogue-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialogue-card.d.ts","sourceRoot":"","sources":["../../src/ui/dialogue-card.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAa,KAAK,IAAI,EAAE,MAAM,WAAW,CAAC;AACjD,OAAO,EAAgB,KAAK,YAAY,EAAE,KAAK,YAAY,EAAE,KAAK,MAAM,EAAE,MAAM,aAAa,CAAC;AAK9F,MAAM,WAAW,mBAAmB;IAClC,+DAA+D;IAC/D,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,wEAAwE;IACxE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4FAA4F;IAC5F,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,uGAAuG;IACvG,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sFAAsF;IACtF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;8GAC0G;IAC1G,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,WAAW,CAAC;IAClB,mEAAmE;IACnE,IAAI,EAAE,IAAI,CAAC;IACX,yDAAyD;IACzD,MAAM,EAAE,MAAM,CAAC;IACf,6FAA6F;IAC7F,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IAC1C,sGAAsG;IACtG,OAAO,IAAI,OAAO,CAAC;IACnB,+BAA+B;IAC/B,KAAK,IAAI,IAAI,CAAC;IACd,UAAU,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC7B,YAAY,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzC,OAAO,IAAI,IAAI,CAAC;CACjB;AAED,2GAA2G;AAC3G,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,GAAE,mBAAwB,GAAG,YAAY,CA6EjG"}

package/dist/ui/dialogue-card.js

@@ -0,0 +1,107 @@
+/**
+ * DIALOGUE CARD — an NPC discussion box built from the kit: a {@link Card} (dark container) holding
+ * the speaker's NAME, the LINE below (revealed with a small typewriter), and a controller KEYCAP
+ * (default A, from the barrel) in the corner as the "continue" affordance — preceded by a cue that
+ * reads ▸ while there's more to say and flips to ✓ on the last screen (the next A press closes it).
+ *
+ * The consumer authors **lines** — each one is shown DIRECTLY as a single screen (one A press per
+ * line), never re-wrapped or split by the component. To keep a long line from breaking the layout,
+ * the box is a fixed N-line frame with `overflow:hidden` (it can't grow), and each line has a soft
+ * character budget (`maxChars`): exceed it and the card logs a dev warning so the author knows the
+ * line may overflow. Char count is a rough proxy for "will this fit" — enough to give an idea.
+ *
+ * `open(name, lines)` starts a conversation; `advance()` finishes the current typewriter, steps to the
+ * next line, or — past the last line — closes the card and returns `false`. Fixed bottom-centre by
+ * default (a classic RPG bar), or `inline:true` to lay it in normal flow.
+ */
+import { mountCard } from "./card.js";
+import { createKeycap } from "./keycap.js";
+const CUE_MORE = "▸"; // there's another page after this one
+const CUE_END = "✓"; // last page — the next press closes the conversation
+/** Mount a discussion card: name + typed line + a "continue" cue & keycap, inside the shared dark card. */
+export function mountDialogueCard(host, opts = {}) {
+    const ms = opts.typeMs ?? 18;
+    const maxLines = Math.max(1, opts.maxLines ?? 3);
+    const maxChars = Math.max(1, opts.maxChars ?? 140);
+    const wrap = document.createElement("div");
+    wrap.className = "rydr-ui-dlg";
+    const nameEl = document.createElement("div");
+    nameEl.className = "rydr-ui-dlg-name";
+    const lineEl = document.createElement("div");
+    lineEl.className = "rydr-ui-dlg-line";
+    const go = document.createElement("div");
+    go.className = "rydr-ui-dlg-go";
+    const cueEl = document.createElement("span");
+    cueEl.className = "rydr-ui-dlg-cue";
+    const keycap = createKeycap(opts.button ?? "A", { variant: "solo", animate: true, press: opts.press });
+    go.append(cueEl, keycap.el);
+    wrap.append(nameEl, lineEl, go);
+    const card = mountCard(host, { content: wrap, inline: opts.inline });
+    card.setVisible(false);
+    // Lock the visible line to a fixed N-line frame (line-height is 1.4) and clip overflow: a line that
+    // runs past the budget is trimmed, not allowed to grow the box and break the surrounding layout.
+    lineEl.style.height = `${(maxLines * 1.4).toFixed(2)}em`;
+    lineEl.style.overflow = "hidden";
+    let lines = [];
+    let idx = 0;
+    let timer = null;
+    const stop = () => { if (timer !== null) {
+        clearInterval(timer);
+        timer = null;
+    } };
+    const showLine = () => {
+        stop();
+        opts.onLine?.(idx); // a new line is now on screen → let the caller react (e.g. alternate a talking clip)
+        const full = lines[idx] ?? "";
+        cueEl.textContent = idx >= lines.length - 1 ? CUE_END : CUE_MORE; // ✓ on the last line, else ▸
+        if (ms <= 0) {
+            lineEl.textContent = full;
+            return;
+        }
+        let shown = 0;
+        lineEl.textContent = "";
+        timer = setInterval(() => {
+            shown++;
+            lineEl.textContent = full.slice(0, shown);
+            if (shown >= full.length)
+                stop();
+        }, ms);
+    };
+    const close = () => { stop(); card.setVisible(false); lines = []; idx = 0; };
+    return {
+        root: card.root,
+        card,
+        keycap,
+        open(name, ls) {
+            // Char count is a rough proxy for "will this fit the box" — enough to flag a likely overflow.
+            ls.forEach((l, i) => {
+                if (l.length > maxChars)
+                    console.warn(`[dialogue-card] line ${i} is ${l.length} chars (budget ${maxChars}); it may be clipped: "${l.slice(0, 48)}…"`);
+            });
+            nameEl.textContent = name;
+            lines = ls;
+            idx = 0;
+            card.setVisible(true);
+            showLine();
+        },
+        advance() {
+            if (timer !== null) {
+                stop();
+                lineEl.textContent = lines[idx] ?? "";
+                return true;
+            } // finish the line
+            idx++;
+            if (idx >= lines.length) {
+                close();
+                return false;
+            } // past the last line → close
+            showLine();
+            return true;
+        },
+        close,
+        setVisible: card.setVisible,
+        setScreenPos: card.setScreenPos,
+        dispose: () => { stop(); card.dispose(); },
+    };
+}
+//# sourceMappingURL=dialogue-card.js.map

package/dist/ui/dialogue-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialogue-card.js","sourceRoot":"","sources":["../../src/ui/dialogue-card.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,SAAS,EAAa,MAAM,WAAW,CAAC;AACjD,OAAO,EAAE,YAAY,EAAqD,MAAM,aAAa,CAAC;AAE9F,MAAM,QAAQ,GAAG,GAAG,CAAC,CAAC,sCAAsC;AAC5D,MAAM,OAAO,GAAG,GAAG,CAAC,CAAE,qDAAqD;AAqC3E,2GAA2G;AAC3G,MAAM,UAAU,iBAAiB,CAAC,IAAiB,EAAE,OAA4B,EAAE;IACjF,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI,EAAE,CAAC;IAC7B,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,CAAC;IACjD,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,QAAQ,IAAI,GAAG,CAAC,CAAC;IACnD,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC3C,IAAI,CAAC,SAAS,GAAG,aAAa,CAAC;IAC/B,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC7C,MAAM,CAAC,SAAS,GAAG,kBAAkB,CAAC;IACtC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC7C,MAAM,CAAC,SAAS,GAAG,kBAAkB,CAAC;IACtC,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACzC,EAAE,CAAC,SAAS,GAAG,gBAAgB,CAAC;IAChC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7C,KAAK,CAAC,SAAS,GAAG,iBAAiB,CAAC;IACpC,MAAM,MAAM,GAAG,YAAY,CAAC,IAAI,CAAC,MAAM,IAAI,GAAG,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IACvG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC;IAC5B,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC;IAEhC,MAAM,IAAI,GAAG,SAAS,CAAC,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;IACrE,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;IAEvB,oGAAoG;IACpG,iGAAiG;IACjG,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;IACzD,MAAM,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAEjC,IAAI,KAAK,GAAa,EAAE,CAAC;IACzB,IAAI,GAAG,GAAG,CAAC,CAAC;IACZ,IAAI,KAAK,GAA0C,IAAI,CAAC;IAExD,MAAM,IAAI,GAAG,GAAG,EAAE,GAAG,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;QAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAAC,KAAK,GAAG,IAAI,CAAC;IAAC,CAAC,CAAC,CAAC,CAAC;IAEnF,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,IAAI,EAAE,CAAC;QACP,IAAI,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,qFAAqF;QACzG,MAAM,IAAI,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;QAC9B,KAAK,CAAC,WAAW,GAAG,GAAG,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,6BAA6B;QAC/F,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC;YAAC,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC;YAAC,OAAO;QAAC,CAAC;QACnD,IAAI,KAAK,GAAG,CAAC,CAAC;QACd,MAAM,CAAC,WAAW,GAAG,EAAE,CAAC;QACxB,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE;YACvB,KAAK,EAAE,CAAC;YACR,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;YAC1C,IAAI,KAAK,IAAI,IAAI,CAAC,MAAM;gBAAE,IAAI,EAAE,CAAC;QACnC,CAAC,EAAE,EAAE,CAAC,CAAC;IACT,CAAC,CAAC;IAEF,MAAM,KAAK,GAAG,GAAG,EAAE,GAAG,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAE7E,OAAO;QACL,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,IAAI;QACJ,MAAM;QACN,IAAI,CAAC,IAAI,EAAE,EAAE;YACX,8FAA8F;YAC9F,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;gBAClB,IAAI,CAAC,CAAC,MAAM,GAAG,QAAQ;oBACrB,OAAO,CAAC,IAAI,CAAC,wBAAwB,CAAC,OAAO,CAAC,CAAC,MAAM,kBAAkB,QAAQ,0BAA0B,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC;YACjI,CAAC,CAAC,CAAC;YACH,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC;YAC1B,KAAK,GAAG,EAAE,CAAC;YACX,GAAG,GAAG,CAAC,CAAC;YACR,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;YACtB,QAAQ,EAAE,CAAC;QACb,CAAC;QACD,OAAO;YACL,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;gBAAC,IAAI,EAAE,CAAC;gBAAC,MAAM,CAAC,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;gBAAC,OAAO,IAAI,CAAC;YAAC,CAAC,CAAC,kBAAkB;YACtG,GAAG,EAAE,CAAC;YACN,IAAI,GAAG,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;gBAAC,KAAK,EAAE,CAAC;gBAAC,OAAO,KAAK,CAAC;YAAC,CAAC,CAAC,6BAA6B;YACjF,QAAQ,EAAE,CAAC;YACX,OAAO,IAAI,CAAC;QACd,CAAC;QACD,KAAK;QACL,UAAU,EAAE,IAAI,CAAC,UAAU;QAC3B,YAAY,EAAE,IAAI,CAAC,YAAY;QAC/B,OAAO,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;KAC3C,CAAC;AACJ,CAAC"}

package/dist/ui/index.d.ts

@@ -0,0 +1,31 @@
+/**
+ * `@rydr/game-sdk/ui` — the reusable controller-button UI: a DOM/CSS keycap of the A/B/Y/Z face
+ * buttons and the UP/DOWN/LEFT/RIGHT d-pad, plus higher-level pieces built from it (a dark glass card
+ * with a content slot, an action card, the full A/B/Y/Z move diamond, an NPC dialogue card, a player
+ * choice menu, and a labeled diamond). Games use it to show "which button to press" in one consistent
+ * visual language across the library.
+ *
+ * Self-contained, like `@rydr/game-sdk/three`'s perf-overlay: it injects its own scoped `.rydr-ui-*`
+ * CSS once into `<head>`, depends on no global styles or CSS variables, and pulls in no three.js — so
+ * a game gets the look just by constructing a component. Wire any keycap to real input by passing the
+ * `session` (it satisfies the structural {@link ButtonSource}); the keycap then reflects real presses.
+ *
+ * ──────────────────────────────────────────────────────────────────────────────────────────────
+ * **Do NOT restyle the components — their type sizes and dimensions are deliberate.** Every RYDR
+ * game is played on a **trainer screen viewed from a few feet away while pedaling**, so the keycaps,
+ * card labels, dialogue/choice type, and diamond spacing are tuned to stay legible at that distance.
+ * Shrinking a label "to fit", overriding the `.rydr-ui-*` font sizes / paddings / widths, or wrapping
+ * a component in a `transform: scale()` breaks that contract and makes the UI unreadable on a real
+ * setup. Fill the **content slot** (`mountCard`/`mountActionCard` take any DOM, the diamond takes a
+ * label or custom node) and use the provided state methods — but treat the frame's sizing as fixed.
+ * If a label doesn't fit, shorten the text, don't shrink the type.
+ * ──────────────────────────────────────────────────────────────────────────────────────────────
+ */
+export * from "./keycap.js";
+export * from "./card.js";
+export * from "./action-card.js";
+export * from "./action-diamond.js";
+export * from "./dialogue-card.js";
+export * from "./choice-card.js";
+export * from "./labeled-diamond.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC"}

package/dist/ui/index.js

@@ -0,0 +1,31 @@
+/**
+ * `@rydr/game-sdk/ui` — the reusable controller-button UI: a DOM/CSS keycap of the A/B/Y/Z face
+ * buttons and the UP/DOWN/LEFT/RIGHT d-pad, plus higher-level pieces built from it (a dark glass card
+ * with a content slot, an action card, the full A/B/Y/Z move diamond, an NPC dialogue card, a player
+ * choice menu, and a labeled diamond). Games use it to show "which button to press" in one consistent
+ * visual language across the library.
+ *
+ * Self-contained, like `@rydr/game-sdk/three`'s perf-overlay: it injects its own scoped `.rydr-ui-*`
+ * CSS once into `<head>`, depends on no global styles or CSS variables, and pulls in no three.js — so
+ * a game gets the look just by constructing a component. Wire any keycap to real input by passing the
+ * `session` (it satisfies the structural {@link ButtonSource}); the keycap then reflects real presses.
+ *
+ * ──────────────────────────────────────────────────────────────────────────────────────────────
+ * **Do NOT restyle the components — their type sizes and dimensions are deliberate.** Every RYDR
+ * game is played on a **trainer screen viewed from a few feet away while pedaling**, so the keycaps,
+ * card labels, dialogue/choice type, and diamond spacing are tuned to stay legible at that distance.
+ * Shrinking a label "to fit", overriding the `.rydr-ui-*` font sizes / paddings / widths, or wrapping
+ * a component in a `transform: scale()` breaks that contract and makes the UI unreadable on a real
+ * setup. Fill the **content slot** (`mountCard`/`mountActionCard` take any DOM, the diamond takes a
+ * label or custom node) and use the provided state methods — but treat the frame's sizing as fixed.
+ * If a label doesn't fit, shorten the text, don't shrink the type.
+ * ──────────────────────────────────────────────────────────────────────────────────────────────
+ */
+export * from "./keycap.js";
+export * from "./card.js";
+export * from "./action-card.js";
+export * from "./action-diamond.js";
+export * from "./dialogue-card.js";
+export * from "./choice-card.js";
+export * from "./labeled-diamond.js";
+//# sourceMappingURL=index.js.map

package/dist/ui/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC"}

package/dist/ui/keycap.d.ts

@@ -0,0 +1,77 @@
+/**
+ * KEYCAP — a DOM/CSS keycap of the controller face buttons (zero dependencies), so a game can show
+ * "which button to press" in a consistent visual language. Two shapes:
+ *
+ *   • "full" — the classic diamond: the active button enlarged + coloured, the other three small + grey.
+ *   • "solo" — light variation: JUST the active button (the idle siblings removed).
+ *
+ * The keycap is a small STATE MACHINE: it can pulse (the bouncing attract animation), show a pressed
+ * sink, run a depleting COOLDOWN ring + countdown, render colored or neutral ("mono"), and hide.
+ *
+ * Two button families share that machine: `createKeycap` for the A/B/Y/Z face buttons (a letter on
+ * the active pip) and `createDpadKeycap` for the UP/DOWN/LEFT/RIGHT directional buttons (a white
+ * chevron on a steel-grey pip, rotated per direction). They differ ONLY in the face drawn and the
+ * button name the press-wiring listens for; everything else is identical.
+ */
+import type { ButtonName, ButtonEdge } from "../protocol/index.js";
+/** The four face buttons (a subset of the canonical {@link ButtonName} vocabulary). */
+export type ButtonLetter = "A" | "B" | "Y" | "Z";
+/** The four directional buttons (the canonical d-pad {@link ButtonName}s). */
+export type DirButton = "UP" | "DOWN" | "LEFT" | "RIGHT";
+/** "full" = the 4-button diamond; "solo" = just the active button. */
+export type KeycapVariant = "full" | "solo";
+/** @deprecated alias kept for back-compat. */
+export type DiamondVariant = KeycapVariant;
+/**
+ * A controller button-event source — the minimal slice of the platform `session` the keycap needs to
+ * auto-reflect real presses. A `PlatformSession` satisfies it structurally (you just pass `session`).
+ */
+export interface ButtonSource {
+    onButton(cb: (e: {
+        name: ButtonName;
+        edge: ButtonEdge;
+    }) => void): () => void;
+}
+export interface KeycapOptions {
+    /** "solo" (default) shows only the active button; "full" shows the 4-button diamond. */
+    variant?: KeycapVariant;
+    /** Per-button hue (default true). `false` → a neutral palette (full colour can be too loud). */
+    colored?: boolean;
+    /** Run the bouncing pulse on the active button (default true). */
+    animate?: boolean;
+    /**
+     * Wire the keycap to real controller input: pass `session` (or anything with `onButton`) and the
+     * keycap shows its pressed sink while ITS button is held (down → pressed, up → released).
+     */
+    press?: ButtonSource;
+}
+/** A bare keycap with its state setters. */
+export interface Keycap {
+    /** The root element to place wherever you want. */
+    el: HTMLElement;
+    /** Pressed-in sink (default false). */
+    setPressed(on: boolean): void;
+    /** Bouncing pulse on the active button. */
+    setAnimated(on: boolean): void;
+    /**
+     * Cooldown ring on the active button. `frac` 0..1 = portion REMAINING (depletes clockwise from 12
+     * o'clock); pass `label` to show a centred countdown (e.g. the remaining seconds). `null` clears it.
+     */
+    setCooldown(frac: number | null, label?: string | number): void;
+    /** Per-button hue on/off. */
+    setColored(on: boolean): void;
+    /** Disabled = the action is unavailable: flat grey, inert (no pulse/press), letter dimmed. */
+    setDisabled(on: boolean): void;
+    /** Hide/show the keycap. */
+    setVisible(on: boolean): void;
+    dispose(): void;
+}
+/** Build a bare A/B/Y/Z keycap with state setters. */
+export declare function createKeycap(button: ButtonLetter, opts?: KeycapOptions): Keycap;
+/**
+ * Build a bare directional (UP/DOWN/LEFT/RIGHT) keycap. Identical state machine to {@link createKeycap}
+ * — solo/full, pulse, pressed, cooldown ring — only the active button shows a WHITE chevron (rotated
+ * per direction) on a steel-grey pip, not the loud A/B/Y/Z hues.
+ */
+export declare function createDpadKeycap(dir: DirButton, opts?: KeycapOptions): Keycap;
+//# sourceMappingURL=keycap.d.ts.map

package/dist/ui/keycap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keycap.d.ts","sourceRoot":"","sources":["../../src/ui/keycap.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAGnE,uFAAuF;AACvF,MAAM,MAAM,YAAY,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AACjD,8EAA8E;AAC9E,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AACzD,sEAAsE;AACtE,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,MAAM,CAAC;AAC5C,8CAA8C;AAC9C,MAAM,MAAM,cAAc,GAAG,aAAa,CAAC;AAE3C;;;GAGG;AACH,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE;QAAE,IAAI,EAAE,UAAU,CAAC;QAAC,IAAI,EAAE,UAAU,CAAA;KAAE,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;CAC/E;AAED,MAAM,WAAW,aAAa;IAC5B,wFAAwF;IACxF,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,gGAAgG;IAChG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kEAAkE;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;CACtB;AAED,4CAA4C;AAC5C,MAAM,WAAW,MAAM;IACrB,mDAAmD;IACnD,EAAE,EAAE,WAAW,CAAC;IAChB,uCAAuC;IACvC,UAAU,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,CAAC;IAC9B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B;;;OAGG;IACH,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAChE,6BAA6B;IAC7B,UAAU,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,CAAC;IAC9B,8FAA8F;IAC9F,WAAW,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B,4BAA4B;IAC5B,UAAU,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,CAAC;IAC9B,OAAO,IAAI,IAAI,CAAC;CACjB;AA8ID,sDAAsD;AACtD,wBAAgB,YAAY,CAAC,MAAM,EAAE,YAAY,EAAE,IAAI,GAAE,aAAkB,GAAG,MAAM,CAEnF;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,SAAS,EAAE,IAAI,GAAE,aAAkB,GAAG,MAAM,CAEjF"}

package/dist/ui/keycap.js

@@ -0,0 +1,160 @@
+/**
+ * KEYCAP — a DOM/CSS keycap of the controller face buttons (zero dependencies), so a game can show
+ * "which button to press" in a consistent visual language. Two shapes:
+ *
+ *   • "full" — the classic diamond: the active button enlarged + coloured, the other three small + grey.
+ *   • "solo" — light variation: JUST the active button (the idle siblings removed).
+ *
+ * The keycap is a small STATE MACHINE: it can pulse (the bouncing attract animation), show a pressed
+ * sink, run a depleting COOLDOWN ring + countdown, render colored or neutral ("mono"), and hide.
+ *
+ * Two button families share that machine: `createKeycap` for the A/B/Y/Z face buttons (a letter on
+ * the active pip) and `createDpadKeycap` for the UP/DOWN/LEFT/RIGHT directional buttons (a white
+ * chevron on a steel-grey pip, rotated per direction). They differ ONLY in the face drawn and the
+ * button name the press-wiring listens for; everything else is identical.
+ */
+import { injectCss } from "./styles.js";
+const LETTER = { top: "Y", rgt: "A", bot: "B", lft: "Z" };
+const COLOR = { top: "#4DD5FF", rgt: "#00C968", bot: "#FF79FF", lft: "#FF7A0C" };
+const DIR = { top: [0, -1], bot: [0, 1], lft: [-1, 0], rgt: [1, 0] };
+const POS_OF = { Y: "top", A: "rgt", B: "bot", Z: "lft" };
+const POS_OF_DIR = { UP: "top", DOWN: "bot", LEFT: "lft", RIGHT: "rgt" };
+/** Rotation (deg) applied to the base-points-up chevron so it points the right way per position. */
+const ROT = { top: 0, rgt: 90, bot: 180, lft: 270 };
+/** The chevron glyph, drawn in a 24×24 box pointing UP (rotated per position); white on the pip. */
+const CHEVRON = `<polyline points="5,15 12,8 19,15" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"/>`;
+/** Background tone of a directional keycap's active pip ("acier" / steel-grey); the glyph stays white. */
+const DPAD_TONE = "#566273";
+const PIP = 20, PIP_ACTIVE = 38, LETTER_FONT = 23;
+const NEUTRAL_ACTIVE = "#ffffff"; // mono active button: white face (the letter stays dark)
+const INACTIVE = "#3a424e"; // the idle siblings in a full diamond
+/** Letter face — the A/B/Y/Z glyph (sized up on the active button, hidden font otherwise). */
+const letterFace = (pos, active) => {
+    const lt = document.createElement("span");
+    lt.className = "rydr-ui-pip-letter";
+    if (active)
+        lt.style.fontSize = `${LETTER_FONT}px`;
+    lt.textContent = LETTER[pos];
+    return lt;
+};
+/** Directional face — a white chevron (only on the active button; siblings stay blank). */
+const chevronFace = (pos, active, size) => {
+    if (!active)
+        return null;
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute("viewBox", "0 0 24 24");
+    svg.setAttribute("width", String(Math.round(size * 0.62)));
+    svg.setAttribute("height", String(Math.round(size * 0.62)));
+    svg.setAttribute("class", "rydr-ui-pip-glyph");
+    svg.style.transform = `rotate(${ROT[pos]}deg)`;
+    svg.style.color = "#ffffff"; // white icon on the steel pip
+    svg.innerHTML = CHEVRON;
+    return svg;
+};
+/** Make one keycap pip (a circular button). Active pips also carry cooldown scaffolding. */
+function makePip(active, color, pos, size, animate, face) {
+    const pip = document.createElement("div");
+    pip.className = "rydr-ui-pip" + (active ? " active" : "") + (active && animate ? " anim" : "");
+    pip.style.setProperty("--c", active ? color : INACTIVE);
+    pip.style.width = pip.style.height = `${size}px`;
+    const content = face(pos, active, size);
+    if (content)
+        pip.appendChild(content);
+    if (active) {
+        const ring = document.createElement("div"); // cooldown — a circular loader inside the rim
+        ring.className = "rydr-ui-ring";
+        pip.appendChild(ring);
+        const num = document.createElement("span"); // cooldown — centred countdown number
+        num.className = "rydr-ui-cd-num";
+        pip.appendChild(num);
+    }
+    return pip;
+}
+/** Build the keycap for `activePos`; returns the element + a reference to the active pip (for state). */
+function buildPips(activePos, variant, colored, animate, face, accent) {
+    const diamond = document.createElement("div");
+    diamond.className = "rydr-ui-diamond";
+    // `accent` (used by the directional keycap) overrides the per-button hue with a fixed tone.
+    const activeColor = accent ?? (colored ? COLOR[activePos] : NEUTRAL_ACTIVE);
+    if (variant === "solo") {
+        diamond.style.width = diamond.style.height = `${PIP_ACTIVE}px`;
+        const pip = makePip(true, activeColor, activePos, PIP_ACTIVE, animate, face);
+        pip.style.left = pip.style.top = "0px";
+        diamond.appendChild(pip);
+        return { el: diamond, activePip: pip };
+    }
+    const ri = PIP / 2, Ra = PIP_ACTIVE / 2, r0 = Ra, D = r0 + ri;
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    const pts = {};
+    for (const k of ["top", "lft", "rgt", "bot"]) {
+        const active = k === activePos, r = active ? Ra : ri, dist = active ? D : r0;
+        const cx = DIR[k][0] * dist, cy = DIR[k][1] * dist;
+        pts[k] = { cx, cy, r, active };
+        minX = Math.min(minX, cx - r);
+        maxX = Math.max(maxX, cx + r);
+        minY = Math.min(minY, cy - r);
+        maxY = Math.max(maxY, cy + r);
+    }
+    diamond.style.width = `${maxX - minX}px`;
+    diamond.style.height = `${maxY - minY}px`;
+    let activePip;
+    for (const k of ["top", "lft", "rgt", "bot"]) {
+        const pt = pts[k];
+        const pip = makePip(pt.active, pt.active ? activeColor : (colored ? COLOR[k] : NEUTRAL_ACTIVE), k, pt.r * 2, animate, face);
+        pip.style.left = `${pt.cx - pt.r - minX}px`;
+        pip.style.top = `${pt.cy - pt.r - minY}px`;
+        diamond.appendChild(pip);
+        if (pt.active)
+            activePip = pip;
+    }
+    return { el: diamond, activePip };
+}
+/**
+ * Build the keycap + its state setters. Shared core for both the A/B/Y/Z (`createKeycap`) and the
+ * directional (`createDpadKeycap`) factories — they differ only in the `face` drawn and the button
+ * name (`pressName`) the press-wiring listens for.
+ */
+function build(activePos, pressName, face, opts, accent) {
+    injectCss();
+    const variant = opts.variant ?? "solo";
+    const animate = opts.animate ?? true;
+    const colored = opts.colored ?? true;
+    const { el, activePip } = buildPips(activePos, variant, colored, animate, face, accent);
+    const num = activePip.querySelector(".rydr-ui-cd-num");
+    const setPressed = (on) => activePip.classList.toggle("pressed", on);
+    // wire to real controller input: pressed while THIS button is held (down → pressed, up → released)
+    const off = opts.press?.onButton((e) => { if (e.name === pressName)
+        setPressed(e.edge === "down"); });
+    return {
+        el,
+        setPressed,
+        setAnimated: (on) => activePip.classList.toggle("anim", on),
+        setColored: (on) => activePip.style.setProperty("--c", accent ?? (on ? COLOR[activePos] : NEUTRAL_ACTIVE)),
+        setDisabled: (on) => activePip.classList.toggle("disabled", on),
+        setVisible: (on) => { el.style.visibility = on ? "" : "hidden"; },
+        setCooldown: (frac, label) => {
+            if (frac == null) {
+                activePip.classList.remove("cooling");
+                return;
+            }
+            activePip.classList.add("cooling");
+            activePip.style.setProperty("--cd", String(Math.max(0, Math.min(1, frac))));
+            if (num)
+                num.textContent = label == null ? "" : String(label);
+        },
+        dispose: () => { off?.(); el.remove(); },
+    };
+}
+/** Build a bare A/B/Y/Z keycap with state setters. */
+export function createKeycap(button, opts = {}) {
+    return build(POS_OF[button], button, letterFace, opts);
+}
+/**
+ * Build a bare directional (UP/DOWN/LEFT/RIGHT) keycap. Identical state machine to {@link createKeycap}
+ * — solo/full, pulse, pressed, cooldown ring — only the active button shows a WHITE chevron (rotated
+ * per direction) on a steel-grey pip, not the loud A/B/Y/Z hues.
+ */
+export function createDpadKeycap(dir, opts = {}) {
+    return build(POS_OF_DIR[dir], dir, chevronFace, opts, DPAD_TONE);
+}
+//# sourceMappingURL=keycap.js.map

package/dist/ui/keycap.js.map

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

package/dist/ui/labeled-diamond.d.ts

@@ -0,0 +1,32 @@
+/**
+ * LABELED DIAMOND — a central A/B/Y/Z pip cluster where ANY number of buttons can be active at once,
+ * each active button carrying a label that radiates outward from its position (Y above · B below ·
+ * Z to the left, right-aligned · A to the right, left-aligned). Where the {@link mountActionDiamond}
+ * is a HUD of four big move cards, this is the compact "here are the actions on offer" affordance —
+ * e.g. an inspect target showing `Y Inspecter · A Équiper · B Inventaire` around the button glyphs.
+ *
+ * Each label is seated in the shared dark glass {@link Card} so it stays legible on any background.
+ * Fixed-overlay by default (call `setScreenPos` to track a projected world point), or `inline:true`
+ * to lay it in normal flow.
+ */
+import { type ButtonLetter } from "./keycap.js";
+export interface LabeledDiamondOptions {
+    /** Lay the diamond inline (normal flow, full width) instead of as a fixed overlay. */
+    inline?: boolean;
+    /** Initial active labels — a label string activates that button; omit a button to leave it greyed. */
+    actions?: Partial<Record<ButtonLetter, string>>;
+}
+export interface LabeledDiamond {
+    root: HTMLElement;
+    /** Activate a button with a radiating label, or pass `null`/`""` to deactivate it (pip greys, label hides). */
+    setLabel(button: ButtonLetter, text: string | null): void;
+    /** Disable an active action: its pip goes inert grey and its label fades back. */
+    setDisabled(button: ButtonLetter, on: boolean): void;
+    setVisible(v: boolean): void;
+    /** Centre the diamond at a viewport pixel (e.g. a target projected to screen). */
+    setScreenPos(x: number, y: number): void;
+    dispose(): void;
+}
+/** Mount a labeled A/B/Y/Z diamond: a pip cluster with a card-seated label radiating from each active button. */
+export declare function mountLabeledDiamond(host: HTMLElement, opts?: LabeledDiamondOptions): LabeledDiamond;
+//# sourceMappingURL=labeled-diamond.d.ts.map

package/dist/ui/labeled-diamond.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"labeled-diamond.d.ts","sourceRoot":"","sources":["../../src/ui/labeled-diamond.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAUhD,MAAM,WAAW,qBAAqB;IACpC,sFAAsF;IACtF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sGAAsG;IACtG,OAAO,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC;CACjD;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,WAAW,CAAC;IAClB,+GAA+G;IAC/G,QAAQ,CAAC,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1D,kFAAkF;IAClF,WAAW,CAAC,MAAM,EAAE,YAAY,EAAE,EAAE,EAAE,OAAO,GAAG,IAAI,CAAC;IACrD,UAAU,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC7B,kFAAkF;IAClF,YAAY,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzC,OAAO,IAAI,IAAI,CAAC;CACjB;AAED,iHAAiH;AACjH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,GAAE,qBAA0B,GAAG,cAAc,CAsEvG"}

package/dist/ui/labeled-diamond.js

@@ -0,0 +1,86 @@
+/**
+ * LABELED DIAMOND — a central A/B/Y/Z pip cluster where ANY number of buttons can be active at once,
+ * each active button carrying a label that radiates outward from its position (Y above · B below ·
+ * Z to the left, right-aligned · A to the right, left-aligned). Where the {@link mountActionDiamond}
+ * is a HUD of four big move cards, this is the compact "here are the actions on offer" affordance —
+ * e.g. an inspect target showing `Y Inspecter · A Équiper · B Inventaire` around the button glyphs.
+ *
+ * Each label is seated in the shared dark glass {@link Card} so it stays legible on any background.
+ * Fixed-overlay by default (call `setScreenPos` to track a projected world point), or `inline:true`
+ * to lay it in normal flow.
+ */
+import { mountCard } from "./card.js";
+import {} from "./keycap.js";
+import { injectCss } from "./styles.js";
+const POS = { Y: "top", A: "rgt", B: "bot", Z: "lft" };
+/** Per-position hue — mirrors the keycap palette (Y cyan · A green · B magenta · Z orange). */
+const COLOR = { top: "#4DD5FF", rgt: "#00C968", bot: "#FF79FF", lft: "#FF7A0C" };
+const INACTIVE = "#3a424e"; // a button that isn't part of this menu (greyed, sunk)
+const FACES = ["Y", "A", "B", "Z"];
+/** Mount a labeled A/B/Y/Z diamond: a pip cluster with a card-seated label radiating from each active button. */
+export function mountLabeledDiamond(host, opts = {}) {
+    injectCss();
+    const root = document.createElement("div");
+    root.className = "rydr-ui-ld-host" + (opts.inline ? " inline" : "");
+    const wrap = document.createElement("div");
+    wrap.className = "rydr-ui-ld-wrap";
+    root.appendChild(wrap);
+    // the central 4-pip cluster — every face button, active ones lit + raised, the rest greyed + sunk
+    const cluster = document.createElement("div");
+    cluster.className = "rydr-ui-ld-cluster";
+    wrap.appendChild(cluster);
+    const pips = {};
+    const slots = {};
+    const cards = {};
+    for (const b of FACES) {
+        const pos = POS[b];
+        const pip = document.createElement("div");
+        pip.className = `rydr-ui-pip pos-${pos}`;
+        pip.style.setProperty("--c", INACTIVE);
+        pip.style.opacity = "0.5";
+        const lt = document.createElement("span");
+        lt.className = "rydr-ui-pip-letter";
+        lt.style.fontSize = "18px";
+        lt.textContent = b;
+        pip.appendChild(lt);
+        cluster.appendChild(pip);
+        pips[b] = pip;
+        // one outer label cell per button (pre-created, shown only while the button is active), each
+        // seated in the dark glass card so it reads on any background
+        const slot = document.createElement("div");
+        slot.className = `rydr-ui-ld-lbl rydr-ui-ld-lbl-${pos}`;
+        slot.style.display = "none";
+        cards[b] = mountCard(slot, { content: "", inline: true });
+        wrap.appendChild(slot);
+        slots[b] = slot;
+    }
+    host.appendChild(root);
+    const setLabel = (button, text) => {
+        const on = text != null && text !== "";
+        pips[button].classList.toggle("active", on);
+        if (!on)
+            pips[button].classList.remove("disabled"); // a deactivated button can't stay "disabled"
+        pips[button].style.setProperty("--c", on ? COLOR[POS[button]] : INACTIVE);
+        pips[button].style.opacity = on ? "1" : "0.5";
+        slots[button].style.display = on ? "" : "none";
+        if (on)
+            cards[button].setLabel(text);
+    };
+    for (const b of FACES)
+        setLabel(b, opts.actions?.[b] ?? null);
+    return {
+        root,
+        setLabel,
+        setDisabled: (button, on) => {
+            pips[button].classList.toggle("disabled", on);
+            slots[button].classList.toggle("rydr-ui-ld-lbl-off", on);
+        },
+        setVisible: (v) => { root.style.visibility = v ? "" : "hidden"; },
+        setScreenPos(x, y) {
+            root.style.left = `${x}px`;
+            root.style.top = `${y}px`;
+        },
+        dispose: () => root.remove(),
+    };
+}
+//# sourceMappingURL=labeled-diamond.js.map