@rydr/game-sdk 3.0.0 → 3.1.0

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

@@ -0,0 +1,29 @@
+/**
+ * `@rydr/game-sdk/ui/showcase` — a live catalog of every `@rydr/game-sdk/ui` component in every state,
+ * rendered into a host-provided element by {@link mountUiShowcase}. The SDK owns *what* the catalog
+ * shows (so it versions with the components and stays the single source of truth); a host provides
+ * only *where*:
+ *
+ *   • a standalone dev page in this repo (`examples/ui`) for fast local iteration — see its `main.ts`;
+ *   • the platform shell, mounting this at an admin-gated route to review the components in the real
+ *     trainer-screen chrome.
+ *
+ * This entry is intentionally NOT re-exported from `@rydr/game-sdk/ui`, so a game importing the actual
+ * components never pulls the catalog into its bundle. Pass a real `session` for live watts + real
+ * button reflection; omit it and the catalog renders static.
+ */
+import { type ShowcaseSession } from "./gallery.js";
+export type { ShowcaseSession } from "./gallery.js";
+export interface UiShowcaseOptions {
+    /**
+     * A real `PlatformSession` (or a stand-in) — drives the live watts readout and wires every keycap to
+     * real controller presses (`UP`/`DOWN`/`A` also drive the choice menu). Omit for a static catalog.
+     */
+    session?: ShowcaseSession;
+}
+export interface UiShowcase {
+    dispose(): void;
+}
+/** Mount the full UI catalog into `host`. Returns a handle whose `dispose()` tears it all down. */
+export declare function mountUiShowcase(host: HTMLElement, opts?: UiShowcaseOptions): UiShowcase;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/showcase/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAiBH,OAAO,EAA2B,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAE7E,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAoBpD,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;CAC3B;AAED,MAAM,WAAW,UAAU;IACzB,OAAO,IAAI,IAAI,CAAC;CACjB;AAED,mGAAmG;AACnG,wBAAgB,eAAe,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,GAAE,iBAAsB,GAAG,UAAU,CAiN3F"}

package/dist/ui/showcase/index.js

@@ -0,0 +1,255 @@
+/**
+ * `@rydr/game-sdk/ui/showcase` — a live catalog of every `@rydr/game-sdk/ui` component in every state,
+ * rendered into a host-provided element by {@link mountUiShowcase}. The SDK owns *what* the catalog
+ * shows (so it versions with the components and stays the single source of truth); a host provides
+ * only *where*:
+ *
+ *   • a standalone dev page in this repo (`examples/ui`) for fast local iteration — see its `main.ts`;
+ *   • the platform shell, mounting this at an admin-gated route to review the components in the real
+ *     trainer-screen chrome.
+ *
+ * This entry is intentionally NOT re-exported from `@rydr/game-sdk/ui`, so a game importing the actual
+ * components never pulls the catalog into its bundle. Pass a real `session` for live watts + real
+ * button reflection; omit it and the catalog renders static.
+ */
+import { createKeycap, createDpadKeycap, mountCard, mountActionCard, mountActionDiamond, mountDialogueCard, mountChoiceCard, mountLabeledDiamond, } from "../index.js";
+import { Gallery, el, makeCanvas } from "./gallery.js";
+const FACES = ["A", "B", "Y", "Z"];
+const DIRS = ["UP", "RIGHT", "DOWN", "LEFT"];
+const READY_HOLD = 2; // seconds a keycap stays "ready" (full colour) between cooldown cycles
+const DLG_STEP = 2.6; // seconds between auto-advances of the demo dialogue
+const DLG_LINES = [
+    "There you are at last. I have waited since dawn, and was beginning to lose hope that a new challenger would walk through the village gates.",
+    "Come closer.",
+    "Out in the tall grass to the north sleep creatures that wait for a spark to bind themselves to a worthy hand.",
+    "Choose well.",
+    "Remember the one rule that truly matters: push hard when you feel the resistance rise, for your power decides the outcome.",
+    "Good luck.",
+];
+const CHOICE_PROMPT = "Which path would you like to take?";
+const CHOICE_OPTIONS = ["The northern grass", "The river crossing", "The old mine"];
+/** Mount the full UI catalog into `host`. Returns a handle whose `dispose()` tears it all down. */
+export function mountUiShowcase(host, opts = {}) {
+    const session = opts.session;
+    const press = session; // a session satisfies the components' structural `ButtonSource`
+    const g = new Gallery(host, {
+        title: "RYDR — controller-button UI",
+        sub: "The same components everywhere: pick a shape + state, fill the content slot. Tuned for a trainer screen — don't restyle the type.",
+        css: BS_CSS,
+    });
+    let clock = 0;
+    const cooldowns = [];
+    let dialogue;
+    let dlgT = 0;
+    let choice;
+    let offButton;
+    // a captioned cell holding a centred node
+    const cell = (grid, caption, node) => {
+        const c = el(grid, "div", "bs-cell");
+        const stage = el(c, "div", "bs-stage");
+        stage.appendChild(node);
+        el(c, "div", "bs-cap", caption);
+    };
+    // a captioned cell with extra room for a card's floating keycap; returns the stage to mount into
+    const cardCell = (grid, caption) => {
+        const c = el(grid, "div", "bs-cell");
+        const stage = el(c, "div", "bs-stage card");
+        el(c, "div", "bs-cap", caption);
+        return stage;
+    };
+    // a generic "icon + name" node — the consumer's OWN content fitted inside a card's fixed slot
+    const iconLabel = (name, color) => {
+        const { canvas, c } = makeCanvas(20, 20);
+        c.fillStyle = color;
+        c.beginPath();
+        c.moveTo(10, 1);
+        c.lineTo(19, 10);
+        c.lineTo(10, 19);
+        c.lineTo(1, 10);
+        c.closePath();
+        c.fill();
+        const wrap = document.createElement("div");
+        wrap.style.cssText = "display:flex;align-items:center;gap:7px;font:800 16px system-ui,sans-serif;";
+        const span = document.createElement("span");
+        span.textContent = name;
+        wrap.append(canvas, span);
+        return wrap;
+    };
+    // --- Solo keycap: every state ------------------------------------------
+    g.section("Single button (solo)", "One key. The base states.");
+    {
+        const grid = el(g.list, "div", "bs-grid");
+        cell(grid, "Idle (press A)", createKeycap("A", { animate: false, press }).el);
+        cell(grid, "Pulse", createKeycap("A", { animate: true }).el);
+        const pressed = createKeycap("A", { animate: false });
+        pressed.setPressed(true);
+        cell(grid, "Pressed", pressed.el);
+        const cd = createKeycap("A", { animate: false });
+        cooldowns.push({ kc: cd, total: 5 });
+        cell(grid, "Cooldown", cd.el);
+        const off = createKeycap("A", { animate: false });
+        off.setDisabled(true);
+        cell(grid, "Disabled", off.el);
+    }
+    // --- Full A/B/Y/Z diamond ----------------------------------------------
+    g.section("A/B/Y/Z diamond", "All four keys, one active. Colour vs mono, and cooldown.");
+    {
+        const grid = el(g.list, "div", "bs-grid");
+        for (const f of FACES)
+            cell(grid, `Active: ${f}`, createKeycap(f, { variant: "full", animate: false }).el);
+        cell(grid, "Colour", createKeycap("A", { variant: "full", colored: true, animate: false }).el);
+        cell(grid, "Mono", createKeycap("A", { variant: "full", colored: false, animate: false }).el);
+        const cd = createKeycap("A", { variant: "full", animate: false });
+        cooldowns.push({ kc: cd, total: 6 });
+        cell(grid, "Cooldown (on the key)", cd.el);
+    }
+    // --- Directional buttons -----------------------------------------------
+    g.section("Directional buttons", "The same state machine as the face buttons (solo/full, pulse, pressed, cooldown). A white chevron on a steel pip, not the bright key hues.");
+    {
+        const grid = el(g.list, "div", "bs-grid");
+        for (const d of DIRS)
+            cell(grid, `Solo: ${d}`, createDpadKeycap(d, { animate: false }).el);
+        cell(grid, "Pulse (UP)", createDpadKeycap("UP", { animate: true }).el);
+        const pressed = createDpadKeycap("UP", { animate: false });
+        pressed.setPressed(true);
+        cell(grid, "Pressed (UP)", pressed.el);
+        const cd = createDpadKeycap("UP", { animate: false });
+        cooldowns.push({ kc: cd, total: 5 });
+        cell(grid, "Cooldown (UP)", cd.el);
+        cell(grid, "Diamond (UP active)", createDpadKeycap("UP", { variant: "full", animate: false }).el);
+    }
+    // --- Action card: slot content -----------------------------------------
+    g.section("Action card (content slot)", "The frame + the key are provided; the game fills the slot.");
+    {
+        const grid = el(g.list, "div", "bs-grid");
+        const plain = cardCell(grid, "Plain label");
+        mountActionCard(plain, "A", { label: "Attack", inline: true, press });
+        const custom = cardCell(grid, "Custom (icon + text)");
+        const card = mountActionCard(custom, "A", { inline: true, animate: false, press });
+        card.setContent(iconLabel("Ember", "#FF7A0C"));
+        cooldowns.push({ kc: card.keycap, total: 4 });
+        const off = cardCell(grid, "Disabled (action unavailable)");
+        const disabled = mountActionCard(off, "A", { label: "Attack", inline: true, animate: false });
+        disabled.setDisabled(true);
+    }
+    // --- the dark card ALONE (no keycap) -----------------------------------
+    g.section("Card alone (no key)", "Just a dark padded container, no key. Size it however: hug the content, or fix it. Reuse it for labels, dialogue boxes, etc.");
+    {
+        const grid = el(g.list, "div", "bs-grid");
+        mountCard(cardCell(grid, "Hugs content"), { content: iconLabel("Ember", "#FF7A0C"), inline: true });
+        mountCard(cardCell(grid, "Fixed size (200×84)"), { content: iconLabel("Ember", "#FF7A0C"), inline: true, width: 200, height: 84 });
+    }
+    // --- the dialogue card -------------------------------------------------
+    g.section("Dialogue card", "NPC dialogue box: name + line (typewriter) + an A key to continue. The cue flips from ▸ (more) to ✓ (last line). Auto-advances in a loop here.");
+    {
+        const stage = el(g.list, "div", "bs-dialog");
+        dialogue = mountDialogueCard(stage, { inline: true, press });
+        dialogue.open("Master Orsane", DLG_LINES);
+    }
+    // --- the choice card ---------------------------------------------------
+    g.section("Choice card (player menu)", "The PLAYER's menu: name + question + a list of options. ▲▼ move the (clamped) selection, and the A key sits to the right of the active option and follows it. Arrows show only on the active option.");
+    {
+        const stage = el(g.list, "div", "bs-dialog");
+        const status = el(g.list, "div", "bs-cap");
+        choice = mountChoiceCard(stage, { inline: true, press });
+        choice.open({
+            name: "Player",
+            prompt: CHOICE_PROMPT,
+            options: CHOICE_OPTIONS,
+            onConfirm: (_i, label) => { status.textContent = `Confirmed: ${label}`; },
+        });
+        if (session) {
+            offButton = session.onButton((e) => {
+                if (e.edge !== "down" || !choice)
+                    return;
+                if (e.name === "UP")
+                    choice.moveBy(-1);
+                else if (e.name === "DOWN")
+                    choice.moveBy(1);
+                else if (e.name === "A")
+                    choice.confirm();
+            });
+        }
+        else {
+            status.textContent = "(pass a session to drive ▲▼ / A)";
+        }
+    }
+    // --- the WHOLE move diamond --------------------------------------------
+    g.section("Move diamond (HUD)", "The A/B/Y/Z diamond: Z left · Y+B stacked centre · A right. Four content cards. A = selected, Z = cooling, B = disabled. Press the keys → the card sinks.");
+    {
+        const stage = el(g.list, "div", "bs-diamond");
+        const dia = mountActionDiamond(stage, { press, cards: { Y: { label: "Spark" }, A: { label: "Quake" }, B: {}, Z: { label: "Blaze" } } });
+        dia.cards.A.setActive(true);
+        cooldowns.push({ kc: dia.cards.Z.keycap, total: 6 });
+        dia.cards.B.setDisabled(true);
+    }
+    g.section("Move diamond (HUD) — mono", "The same diamond in mono: white keys with a dark letter instead of the bright hues. Same states.");
+    {
+        const stage = el(g.list, "div", "bs-diamond");
+        const dia = mountActionDiamond(stage, { press, colored: false, cards: { Y: { label: "Spark" }, A: { label: "Quake" }, B: {}, Z: { label: "Blaze" } } });
+        dia.cards.A.setActive(true);
+        cooldowns.push({ kc: dia.cards.Z.keycap, total: 6 });
+        dia.cards.B.setDisabled(true);
+    }
+    // --- the labeled diamond -----------------------------------------------
+    g.section("Labeled diamond", "A central A/B/Y/Z pip cluster, any number of buttons active at once, each label radiating from its key (Y above, B below, Z left, A right) and seated in the dark card. Toggle disables the Y action.");
+    {
+        const cellWrap = el(g.list, "div", "bs-cell ld-cell");
+        const stage = el(cellWrap, "div", "bs-ld");
+        const ld = mountLabeledDiamond(stage, { inline: true, actions: { Y: "Inspect", A: "Equip", B: "Inventory" } });
+        let disabled = false;
+        const btn = el(cellWrap, "button", "bs-btn");
+        const sync = () => {
+            ld.setDisabled("Y", disabled);
+            btn.textContent = disabled ? "Enable “Inspect”" : "Disable “Inspect”";
+        };
+        btn.addEventListener("click", () => { disabled = !disabled; sync(); });
+        sync();
+    }
+    g.run({
+        session,
+        perFrame: (dt) => {
+            clock += dt;
+            for (const { kc, total } of cooldowns) {
+                const phase = clock % (total + READY_HOLD);
+                if (phase < total)
+                    kc.setCooldown((total - phase) / total, Math.ceil(total - phase));
+                else
+                    kc.setCooldown(null);
+            }
+            dlgT += dt;
+            if (dialogue && dlgT >= DLG_STEP) {
+                dlgT = 0;
+                if (!dialogue.advance())
+                    dialogue.open("Master Orsane", DLG_LINES);
+            }
+        },
+    });
+    return {
+        dispose: () => {
+            offButton?.();
+            choice?.dispose();
+            dialogue?.dispose();
+            g.dispose();
+        },
+    };
+}
+const BS_CSS = `
+.bs-grid { display: grid; gap: 0.85rem; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
+.bs-cell { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
+           border-radius: 14px; padding: 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.85rem; }
+.bs-stage { min-height: 96px; display: flex; align-items: flex-end; justify-content: center; padding: 14px 0 22px; }
+.bs-stage.card { min-height: 120px; padding-bottom: 42px; }
+.bs-cap { font-size: 0.8rem; font-weight: 700; opacity: 0.8; text-align: center; }
+.bs-diamond { position: relative; width: 100%; height: min(64vh, 480px);
+              background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
+              border-radius: 16px; padding: 1.25rem; box-sizing: border-box; }
+.bs-dialog { display: flex; justify-content: center; padding: 1.5rem 0 2.5rem; }
+.ld-cell { grid-column: 1 / -1; }
+.bs-ld { display: flex; justify-content: center; width: 100%; min-height: 220px; }
+.bs-btn { margin-top: 4px; padding: 7px 14px; border-radius: 10px; cursor: pointer;
+          font: 700 0.82rem system-ui, sans-serif; color: #eef4ff;
+          background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.18); }
+.bs-btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3); }
+`;
+//# sourceMappingURL=index.js.map

package/dist/ui/showcase/index.js.map

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

package/dist/ui/styles.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Shared scoped `.rydr-ui-*` CSS for the controller-button UI (keycap · card · action card · action
+ * diamond · dialogue · choice · labeled diamond), injected once into <head>. Self-contained, like the
+ * perf-overlay: it injects no global styles and depends on no CSS variables, so any game gets the look
+ * just by constructing a component. Keep it dependency-free.
+ *
+ * The font sizes, paddings, and dimensions here are TUNED FOR A TRAINER SCREEN read from a few feet
+ * away while pedaling — they are part of the component contract, not defaults to be overridden.
+ * Consumers fill the content slot; they must not restyle the `.rydr-ui-*` type/sizing.
+ */
+export declare function injectCss(): void;
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/ui/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAIH,wBAAgB,SAAS,IAAI,IAAI,CAOhC"}

package/dist/ui/styles.js

@@ -0,0 +1,183 @@
+/**
+ * Shared scoped `.rydr-ui-*` CSS for the controller-button UI (keycap · card · action card · action
+ * diamond · dialogue · choice · labeled diamond), injected once into <head>. Self-contained, like the
+ * perf-overlay: it injects no global styles and depends on no CSS variables, so any game gets the look
+ * just by constructing a component. Keep it dependency-free.
+ *
+ * The font sizes, paddings, and dimensions here are TUNED FOR A TRAINER SCREEN read from a few feet
+ * away while pedaling — they are part of the component contract, not defaults to be overridden.
+ * Consumers fill the content slot; they must not restyle the `.rydr-ui-*` type/sizing.
+ */
+let cssInjected = false;
+export function injectCss() {
+    if (cssInjected || document.getElementById("rydr-ui-css")) {
+        cssInjected = true;
+        return;
+    }
+    const style = document.createElement("style");
+    style.id = "rydr-ui-css";
+    style.textContent = CSS;
+    document.head.appendChild(style);
+    cssInjected = true;
+}
+const CSS = `
+.rydr-ui-root { position: fixed; left: 50%; bottom: 96px; z-index: 40; pointer-events: none;
+            transform: translateX(-50%); opacity: 0; transition: opacity 0.18s; }
+.rydr-ui-root.inline { position: relative; left: auto; bottom: auto; transform: none; opacity: 1; display: inline-block; }
+/* the dark action card holding the content slot */
+.rydr-ui-card { position: relative; padding: 10px 20px 12px; border-radius: 12px; background: rgba(8,14,24,0.7);
+            border: 1px solid rgba(255,255,255,0.16); backdrop-filter: blur(8px); box-shadow: 0 6px 18px rgba(0,0,0,0.4);
+            color: #eef4ff; text-align: center; }
+/* the card is JUST a dark container with padding — it hugs its content by default. A consumer can fix
+   the size via the width/height options (→ .rydr-ui-card.fixed) and the content then centres inside. */
+.rydr-ui-card.fixed { box-sizing: border-box; }
+.rydr-ui-card.fixed > .rydr-ui-card-body { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
+/* inside the diamond, cards are a CONSTANT fixed-size frame (uniform), content centred. */
+.rydr-ui-dia .rydr-ui-card-body { width: 150px; min-height: 52px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
+/* a string label gets the bold, centred, 2-line-clamped "ATTAQUER" look; custom content styles itself. */
+.rydr-ui-card-lbl { font: 800 20px system-ui, sans-serif; letter-spacing: 0.04em;
+            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+            line-height: 1.12; text-align: center; overflow-wrap: anywhere; }
+/* the action-card keycap (a DIRECT child of the card) floats over the card, straddling its bottom edge.
+   Direct-child selector so keycaps nested inside the body (e.g. the dialogue card's corner) are NOT pinned. */
+.rydr-ui-card > .rydr-ui-diamond { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 65%); }
+.rydr-ui-diamond { position: relative; }
+
+/* DIALOGUE CARD — speaker name + typed line + a continue cue (▸ / ✓) and keycap, inside the dark card */
+.rydr-ui-dlg { width: min(720px, 90vw); text-align: left; }
+.rydr-ui-dlg-name { color: #ffe27a; font: 800 22px system-ui, sans-serif; letter-spacing: 0.01em; margin-bottom: 10px; }
+.rydr-ui-dlg-line { color: #eef4ff; font: 600 26px system-ui, sans-serif; line-height: 1.4; min-height: 2.8em; }
+.rydr-ui-dlg-go { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 8px; }
+.rydr-ui-dlg-cue { color: rgba(255,255,255,0.6); font: 800 22px system-ui, sans-serif; }
+
+/* CHOICE CARD — player menu: speaker name + optional prompt + a highlighted option list (▲▼ move, A confirm) */
+.rydr-ui-choice { width: min(720px, 90vw); text-align: left; }
+/* the conversation cards (NPC discussion + player choice) use even padding on all sides — the shared
+   .rydr-ui-card is asymmetric to seat a straddling keycap, which neither of these cards has. */
+.rydr-ui-card:has(> .rydr-ui-card-body > .rydr-ui-choice),
+.rydr-ui-card:has(> .rydr-ui-card-body > .rydr-ui-dlg) { padding: 20px; }
+.rydr-ui-choice-name { color: #ffe27a; font: 800 22px system-ui, sans-serif; letter-spacing: 0.01em; margin-bottom: 10px; }
+.rydr-ui-choice-prompt { color: #eef4ff; font: 600 24px system-ui, sans-serif; line-height: 1.35; margin-bottom: 14px;
+            overflow-wrap: anywhere; }
+.rydr-ui-choice-list { display: flex; flex-direction: column; gap: 10px; }
+/* an option row: a soft pill (accent-highlighted when selected). The row is tall enough to seat two
+   stacked arrows, and reserves a left gutter (.has-arrows) so labels stay aligned whether or not the
+   arrow guide is showing on this row. */
+.rydr-ui-choice-opt { position: relative; display: flex; align-items: center; min-height: 52px; padding: 12px 18px;
+            border-radius: 12px; border: 2px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04);
+            color: #dfe7f3; transition: border-color 0.12s, background 0.12s, color 0.12s, padding-left 0.1s ease, padding-right 0.1s ease; }
+/* only the SELECTED row opens a left gutter for the arrows; it pushes right quickly to make the room */
+.rydr-ui-choice-opt.has-arrows.selected { padding-left: 60px; }
+/* the confirm A keycap parks on the right of the selected row, so reserve room for it there */
+.rydr-ui-choice-opt.selected { padding-right: 58px; }
+.rydr-ui-choice-opt > .rydr-ui-diamond { position: absolute; right: 14px; top: 50%; transform: translateY(calc(-50% - 2px)); }
+/* lift the selected row so its arrow gutter (which overflows the short row) paints ABOVE the rows below */
+.rydr-ui-choice-opt.selected { border-color: rgba(255,226,122,0.85); background: rgba(255,226,122,0.1); color: #ffe27a; z-index: 2; }
+/* the left gutter is ABSOLUTE so showing/hiding arrows never shifts the label; only the selected row's
+   gutter is populated. Arrow keycaps stack (UP over DOWN), centred in the gutter. */
+.rydr-ui-choice-arrows { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 44px;
+            display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
+.rydr-ui-choice-label { flex: 1 1 auto; font: 700 24px system-ui, sans-serif; overflow-wrap: anywhere; }
+
+.rydr-ui-pip { position: absolute; border-radius: 50%; display: flex; align-items: center; justify-content: center;
+           color: #0c1014; font-family: system-ui, sans-serif;
+           background: linear-gradient(180deg, color-mix(in srgb, var(--c) 88%, #fff) 0%, var(--c) 60%);
+           box-shadow: 0 3px 0 color-mix(in srgb, var(--c) 55%, #000), 0 5px 9px rgba(0,0,0,0.45);
+           transition: transform 0.08s ease, box-shadow 0.08s ease; }
+.rydr-ui-pip-letter { font-weight: 800; line-height: 1; font-size: 0; position: relative; z-index: 2; }
+/* directional glyph (chevron/caret/arrow) — drawn pointing up, rotated per position, dark like a letter */
+.rydr-ui-pip-glyph { display: block; position: relative; z-index: 2; }
+/* in the full diamond, the idle siblings sit pressed-in (shorter) so the active button reads as raised */
+.rydr-ui-pip:not(.active) { transform: translateY(2px);
+           box-shadow: 0 1px 0 color-mix(in srgb, var(--c) 50%, #000), inset 0 1px 2px rgba(0,0,0,0.45); }
+.rydr-ui-pip.anim { animation: rydr-ui-pulse 1.6s ease-in-out infinite; }
+/* pressed sink — opposite of the pulse's lift */
+.rydr-ui-pip.pressed { transform: translateY(3px);
+                   box-shadow: 0 1px 0 color-mix(in srgb, var(--c) 55%, #000), 0 2px 4px rgba(0,0,0,0.45); }
+.rydr-ui-pip.pressed.anim { animation: none; }
+
+/* COOLDOWN — while recharging the button goes greyed + pushed-in ("spent"), with a circular loader
+   inside the rim and a centred countdown number. */
+.rydr-ui-ring { position: absolute; inset: 2px; border-radius: 50%; z-index: 3; display: none;
+            background: conic-gradient(var(--c) calc(var(--cd, 0) * 360deg), rgba(255,255,255,0.16) 0);
+            -webkit-mask: radial-gradient(closest-side, transparent 70%, #000 72%);
+                    mask: radial-gradient(closest-side, transparent 70%, #000 72%); }
+.rydr-ui-cd-num { position: absolute; inset: 0; z-index: 3; display: none; align-items: center; justify-content: center;
+              font: 800 18px system-ui, sans-serif; color: #eef4ff; }
+
+.rydr-ui-pip.cooling { animation: none; transform: translateY(3px);
+                   background: linear-gradient(180deg, #555d6b 0%, #3a414d 60%);
+                   box-shadow: 0 1px 0 #20242d, 0 2px 5px rgba(0,0,0,0.4); }
+.rydr-ui-pip.cooling .rydr-ui-pip-letter,
+.rydr-ui-pip.cooling .rydr-ui-pip-glyph { display: none; }
+.rydr-ui-pip.cooling .rydr-ui-ring { display: block; }
+.rydr-ui-pip.cooling .rydr-ui-cd-num { display: flex; }
+
+/* DISABLED — the action is unavailable. The CARD fades (frame + content read at ~50%), but the
+   floating keycap stays crisp — opacity can't be undone in children, so we dim the card's frame via
+   alpha + fade only its body, NOT the whole card, leaving the keycap to carry its OWN inert style.
+   The button reads as inert: flat grey, no pulse, no raised lip, letter dimmed. Distinct from
+   "cooling" (spent + recharging, with a ring). */
+.rydr-ui-card.disabled { background: rgba(8,14,24,0.35); border-color: rgba(255,255,255,0.07);
+                     box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
+.rydr-ui-card.disabled > .rydr-ui-card-body { opacity: 0.5; }
+.rydr-ui-pip.disabled { animation: none; transform: none;
+                    background: linear-gradient(180deg, #4a515c 0%, #3a414d 60%);
+                    box-shadow: 0 2px 0 #20242d, 0 2px 4px rgba(0,0,0,0.3); }
+.rydr-ui-pip.disabled .rydr-ui-pip-letter,
+.rydr-ui-pip.disabled .rydr-ui-pip-glyph { opacity: 0.35; color: #fff; }
+
+/* the A/B/Y/Z move diamond — Z left · Y+B stacked in the centre column · A right. A centred grid that
+   sizes to its content, so the cluster takes only the room it needs and stays centred in any container. */
+.rydr-ui-dia { display: grid; width: 100%; height: 100%; min-height: 240px; box-sizing: border-box;
+           grid-template-columns: auto auto auto; grid-template-rows: auto auto;
+           justify-content: center; align-content: center; justify-items: center; align-items: center;
+           column-gap: 10px; row-gap: 40px; }
+.rydr-ui-dia .rydr-ui-dia-card.pos-lft { grid-column: 1; grid-row: 1 / span 2; }
+.rydr-ui-dia .rydr-ui-dia-card.pos-top { grid-column: 2; grid-row: 1; }
+.rydr-ui-dia .rydr-ui-dia-card.pos-bot { grid-column: 2; grid-row: 2; }
+.rydr-ui-dia .rydr-ui-dia-card.pos-rgt { grid-column: 3; grid-row: 1 / span 2; }
+.rydr-ui-dia-card.active .rydr-ui-card { border-color: rgba(255,226,122,0.85); background: rgba(255,226,122,0.14); }
+
+/* LABELED DIAMOND (mountLabeledDiamond) — a central A/B/Y/Z pip cluster with a label radiating from
+   each active button. Outer 3×3 grid: cluster in the centre, one label cell per direction (each with
+   its own outward alignment). .rydr-ui-ld-host is the placement shell: an absolute overlay by default
+   (driven by setScreenPos), or inline + full-width when .inline. */
+.rydr-ui-ld-host { position: fixed; transform: translate(-50%, -50%); pointer-events: none; z-index: 30; }
+.rydr-ui-ld-host.inline { position: relative; transform: none; width: 100%; pointer-events: auto; }
+.rydr-ui-ld-wrap { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr auto 1fr;
+           align-items: center; justify-items: center; gap: 0; box-sizing: border-box; }
+.rydr-ui-ld-host:not(.inline) .rydr-ui-ld-wrap { width: max-content; }
+.rydr-ui-ld-host.inline .rydr-ui-ld-wrap { width: 100%; min-height: 210px; padding: 8px 0; }
+/* the pip cluster: four absolutely-placed pips packed into a tight, nearly-touching losange. (CSS gap
+   can't go negative, so we position by hand to pull the buttons right up against each other.) Lifted
+   above the labels so a button can overlap (sit on top of) the card pulled in beneath it. */
+.rydr-ui-ld-cluster { grid-area: 2 / 2; position: relative; width: 110px; height: 100px; z-index: 3; }
+.rydr-ui-ld-cluster .rydr-ui-pip { position: absolute; width: 40px; height: 40px; }
+.rydr-ui-ld-cluster .pos-top { left: 35px; top: 0; }
+.rydr-ui-ld-cluster .pos-bot { left: 35px; top: 60px; }
+.rydr-ui-ld-cluster .pos-lft { left: 0; top: 30px; }
+.rydr-ui-ld-cluster .pos-rgt { left: 70px; top: 30px; }
+/* labels seat in the outer cell matching their button, snug against the cluster + aligned outward.
+   Each label is pulled under its button so the button overlaps it, and kept BELOW the button (the
+   cluster outranks it). Top/bottom sit a touch further out, left/right a touch closer. */
+.rydr-ui-ld-lbl-top { grid-area: 1 / 2; align-self: end; text-align: center; margin-bottom: -14px; }
+.rydr-ui-ld-lbl-bot { grid-area: 3 / 2; align-self: start; text-align: center; margin-top: -14px; }
+.rydr-ui-ld-lbl-lft { grid-area: 2 / 1; justify-self: end; text-align: right; margin-right: -22px; }
+.rydr-ui-ld-lbl-rgt { grid-area: 2 / 3; justify-self: start; text-align: left; margin-left: -22px; }
+.rydr-ui-ld-lbl { position: relative; z-index: 1; }
+/* short action verbs — keep them on one line so the side labels don't get squeezed into a wrap */
+.rydr-ui-ld-lbl { white-space: nowrap; }
+.rydr-ui-ld-lbl .rydr-ui-card-lbl { white-space: nowrap; display: block; -webkit-line-clamp: initial; }
+/* a disabled action's label fades back (the pip carries its own inert grey via .rydr-ui-pip.disabled) */
+.rydr-ui-ld-lbl-off { opacity: 0.4; transition: opacity 0.12s; }
+
+@keyframes rydr-ui-pulse {
+  0%,100% { transform: translateY(0);
+            box-shadow: 0 4px 0 color-mix(in srgb, var(--c) 55%, #000), 0 7px 12px rgba(0,0,0,0.5),
+              0 0 16px 1px rgba(0,0,0,0.6); }
+  50%     { transform: translateY(-5px);
+            box-shadow: 0 4px 0 color-mix(in srgb, var(--c) 55%, #000), 0 7px 12px rgba(0,0,0,0.5),
+              0 0 30px 7px rgba(0,0,0,0.6); } }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/ui/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/ui/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,IAAI,WAAW,GAAG,KAAK,CAAC;AAExB,MAAM,UAAU,SAAS;IACvB,IAAI,WAAW,IAAI,QAAQ,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,CAAC;QAAC,WAAW,GAAG,IAAI,CAAC;QAAC,OAAO;IAAC,CAAC;IAC1F,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,EAAE,GAAG,aAAa,CAAC;IACzB,KAAK,CAAC,WAAW,GAAG,GAAG,CAAC;IACxB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACjC,WAAW,GAAG,IAAI,CAAC;AACrB,CAAC;AAED,MAAM,GAAG,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+JX,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rydr/game-sdk",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/bdefrenne/rydr-game-sdk.git"
@@ -19,6 +19,14 @@
     "./three": {
       "types": "./dist/three/index.d.ts",
       "import": "./dist/three/index.js"
+    },
+    "./ui": {
+      "types": "./dist/ui/index.d.ts",
+      "import": "./dist/ui/index.js"
+    },
+    "./ui/showcase": {
+      "types": "./dist/ui/showcase/index.d.ts",
+      "import": "./dist/ui/showcase/index.js"
     }
   },
   "main": "./dist/index.js",
@@ -32,6 +40,8 @@
     "dev": "tsc -w -p tsconfig.json",
     "clean": "rm -rf dist",
     "typecheck": "tsc --noEmit -p tsconfig.json",
+    "showcase": "npm run build && vite examples/ui",
+    "showcase:build": "npm run build && vite build examples/ui",
     "preversion": "node scripts/check-changelog.mjs",
     "version": "node scripts/sync-version.mjs && node scripts/release-changelog.mjs && git add src/protocol/version.ts CHANGELOG.md",
     "postversion": "git push --follow-tags"
@@ -47,6 +57,7 @@
   "devDependencies": {
     "@types/three": "^0.184.0",
     "three": "^0.184.0",
-    "typescript": "^5.5.0"
+    "typescript": "^5.5.0",
+    "vite": "^6.0.0"
   }
 }