@rydr/game-sdk 7.0.1 → 8.0.0

package/dist/ui/controller/combo-demo.d.ts

@@ -0,0 +1,74 @@
+/**
+ * COMBO DEMO — the dynamic view: a looping animation of the combination a rider must perform.
+ *
+ * ```ts
+ * const demo = mountComboDemo(host, {
+ *   press: session,                                    // for the rider's lettering, NOT for input
+ *   action: { label: "Dash", combo: ["LT", "LSTICK:left"] },
+ * });
+ * demo.setAction(next);   // swaps cleanly mid-loop
+ * ```
+ *
+ * The timeline is **derived from the combo**, never authored per action, which is what keeps it generic:
+ *
+ *  - *hold* (default) — idle, then each control engages in turn 200 ms apart (a stick eases to full
+ *    deflection rather than snapping), everything holds together for a beat, releases, and repeats. The
+ *    stagger is the point: it shows that the controls are held *simultaneously*, which a single
+ *    all-at-once flash does not.
+ *  - *sequence* (`action.sequence`) — each control presses, holds and releases in turn, with the strip's
+ *    `→` separators filling in behind the current step.
+ *  - a stick token with no direction sweeps once around its travel circle: "any direction".
+ *
+ * It drives exactly the same `PadDriver.setPart` / `setStick` and `ComboStrip.setPressed` that real input
+ * drives in the static view, so the demo and the live pad cannot drift apart — there is one renderer.
+ *
+ * **Self-driving, unlike `createPowerRace`.** This is an attract animation with no gameplay coupling, so
+ * it owns its own `requestAnimationFrame` rather than asking the game for a `tick(dt)`. It pauses while
+ * the tab is hidden, and `play()`/`pause()` are there for the caller.
+ *
+ * **`prefers-reduced-motion` is honoured by not animating at all**: the demo renders the fully-engaged end
+ * state statically. A looping motion graphic is precisely what that media query exists to suppress, and a
+ * still frame of "all of this, held together" still answers the rider's question.
+ */
+import type { GlyphSet } from "../../protocol/glyphs.js";
+import { type ControllerPad, type PadInputSource } from "./controller-pad.js";
+import type { StickPictogramStyle } from "./input-chip.js";
+import { type ControlAction } from "./tokens.js";
+import type { PadBrandKey } from "./types.js";
+export interface ComboDemoOptions {
+    /** The single action to demonstrate. */
+    action: ControlAction;
+    /**
+     * A session, used ONLY to learn the rider's lettering and to follow pad swaps — the demo deliberately
+     * does not wire it to input. The animation is the sole writer of the drawing's state; letting real
+     * presses write it too would make the two fight for the same classes every frame.
+     */
+    press?: PadInputSource;
+    brand?: PadBrandKey;
+    glyphSet?: GlyphSet;
+    /** Draw the controller. Default true; `false` gives a compact chips-only cue. */
+    showPad?: boolean;
+    /** Show the action's label above the animation. Default true. */
+    showLabel?: boolean;
+    size?: "sm" | "md" | "lg";
+    labels?: boolean;
+    colored?: boolean;
+    accent?: string;
+    /** Drawing convention for the joystick pictograms in the chips. See {@link StickPictogramStyle}. */
+    stickStyle?: StickPictogramStyle;
+    /** Playback rate. `1` = normal, `0.5` = half speed for a slow walkthrough. */
+    speed?: number;
+    /** Called each time the loop completes a full cycle. */
+    onCycle?: () => void;
+}
+export interface ComboDemo {
+    readonly root: HTMLDivElement;
+    readonly pad: ControllerPad | undefined;
+    setAction(action: ControlAction): void;
+    play(): void;
+    pause(): void;
+    setSpeed(mult: number): void;
+    dispose(): void;
+}
+export declare function mountComboDemo(host: HTMLElement, opts: ComboDemoOptions): ComboDemo;
+//# sourceMappingURL=combo-demo.d.ts.map

package/dist/ui/controller/combo-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combo-demo.d.ts","sourceRoot":"","sources":["../../../src/ui/controller/combo-demo.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAEzD,OAAO,EAAsB,KAAK,aAAa,EAAE,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAClG,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAG3D,OAAO,EAAgC,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAC/E,OAAO,KAAK,EAAE,WAAW,EAAW,MAAM,YAAY,CAAC;AAEvD,MAAM,WAAW,gBAAgB;IAC/B,wCAAwC;IACxC,MAAM,EAAE,aAAa,CAAC;IACtB;;;;OAIG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,iFAAiF;IACjF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iEAAiE;IACjE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oGAAoG;IACpG,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,IAAI,EAAE,cAAc,CAAC;IAC9B,QAAQ,CAAC,GAAG,EAAE,aAAa,GAAG,SAAS,CAAC;IACxC,SAAS,CAAC,MAAM,EAAE,aAAa,GAAG,IAAI,CAAC;IACvC,IAAI,IAAI,IAAI,CAAC;IACb,KAAK,IAAI,IAAI,CAAC;IACd,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,OAAO,IAAI,IAAI,CAAC;CACjB;AA4CD,wBAAgB,cAAc,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,gBAAgB,GAAG,SAAS,CA4OnF"}

package/dist/ui/controller/combo-demo.js

@@ -0,0 +1,295 @@
+/**
+ * COMBO DEMO — the dynamic view: a looping animation of the combination a rider must perform.
+ *
+ * ```ts
+ * const demo = mountComboDemo(host, {
+ *   press: session,                                    // for the rider's lettering, NOT for input
+ *   action: { label: "Dash", combo: ["LT", "LSTICK:left"] },
+ * });
+ * demo.setAction(next);   // swaps cleanly mid-loop
+ * ```
+ *
+ * The timeline is **derived from the combo**, never authored per action, which is what keeps it generic:
+ *
+ *  - *hold* (default) — idle, then each control engages in turn 200 ms apart (a stick eases to full
+ *    deflection rather than snapping), everything holds together for a beat, releases, and repeats. The
+ *    stagger is the point: it shows that the controls are held *simultaneously*, which a single
+ *    all-at-once flash does not.
+ *  - *sequence* (`action.sequence`) — each control presses, holds and releases in turn, with the strip's
+ *    `→` separators filling in behind the current step.
+ *  - a stick token with no direction sweeps once around its travel circle: "any direction".
+ *
+ * It drives exactly the same `PadDriver.setPart` / `setStick` and `ComboStrip.setPressed` that real input
+ * drives in the static view, so the demo and the live pad cannot drift apart — there is one renderer.
+ *
+ * **Self-driving, unlike `createPowerRace`.** This is an attract animation with no gameplay coupling, so
+ * it owns its own `requestAnimationFrame` rather than asking the game for a `tick(dt)`. It pauses while
+ * the tab is hidden, and `play()`/`pause()` are there for the caller.
+ *
+ * **`prefers-reduced-motion` is honoured by not animating at all**: the demo renders the fully-engaged end
+ * state statically. A looping motion graphic is precisely what that media query exists to suppress, and a
+ * still frame of "all of this, held together" still answers the rider's question.
+ */
+import { createComboStrip } from "./combo-strip.js";
+import { mountControllerPad } from "./controller-pad.js";
+import { litPartOfControl } from "./parts-map.js";
+import { injectPadCss } from "./styles.js";
+import { parseToken, STICK_DIR_VECTOR } from "./tokens.js";
+// Timings in seconds. Tuned to read at a glance from a few feet away, not to be brisk.
+const HOLD_IDLE = 0.4;
+const HOLD_STAGGER = 0.2;
+const HOLD_RAMP = 0.2;
+const HOLD_SUSTAIN = 0.7;
+const HOLD_RELEASE = 0.25;
+const HOLD_TAIL = 0.5;
+const SEQ_IDLE = 0.4;
+const SEQ_PRESS = 0.35;
+const SEQ_GAP = 0.15;
+const SEQ_TAIL = 0.4;
+/** One full revolution of an undirected stick sweep. */
+const SWEEP_PERIOD = 1.2;
+const smoothstep = (t) => {
+    const c = Math.max(0, Math.min(1, t));
+    return c * c * (3 - 2 * c);
+};
+function channelsOf(action) {
+    return action.combo.map((token, index) => {
+        const t = parseToken(token);
+        if (t.kind === "stick") {
+            return {
+                index,
+                stick: {
+                    side: t.stick === "LSTICK" ? "l" : "r",
+                    vec: t.dir ? STICK_DIR_VECTOR[t.dir] : null, // null = undirected → sweep
+                },
+            };
+        }
+        return { index, part: litPartOfControl(t.name) };
+    });
+}
+export function mountComboDemo(host, opts) {
+    injectPadCss();
+    const root = document.createElement("div");
+    root.className = "rydr-paddemo";
+    host.appendChild(root);
+    const showPad = opts.showPad ?? true;
+    const showLabel = opts.showLabel ?? true;
+    let speed = opts.speed ?? 1;
+    let labelEl;
+    let hintEl;
+    if (showLabel) {
+        labelEl = document.createElement("div");
+        labelEl.className = "rydr-paddemo-label";
+        root.appendChild(labelEl);
+        hintEl = document.createElement("div");
+        hintEl.className = "rydr-paddemo-hint";
+        root.appendChild(hintEl);
+    }
+    const padCell = document.createElement("div");
+    const stripCell = document.createElement("div");
+    if (showPad)
+        root.appendChild(padCell);
+    root.appendChild(stripCell);
+    // Glyph-only shim: gives the pad the rider's lettering and pad-swap notifications, while its inert
+    // `onButton` guarantees real presses never write the drawing the animation owns.
+    const glyphOnly = opts.press && {
+        onButton: () => () => { },
+        hardware: opts.press.hardware,
+    };
+    const pad = showPad
+        ? mountControllerPad(padCell, {
+            press: glyphOnly,
+            brand: opts.brand,
+            glyphSet: opts.glyphSet,
+            size: opts.size ?? "md",
+            labels: opts.labels,
+            accent: opts.accent,
+        })
+        : undefined;
+    let action = opts.action;
+    let channels = channelsOf(action);
+    let strip;
+    function buildStrip() {
+        strip = createComboStrip(action, {
+            glyphSet: opts.glyphSet ?? pad?.glyphSet() ?? undefined,
+            colored: opts.colored,
+            stickStyle: opts.stickStyle,
+        });
+        stripCell.textContent = "";
+        stripCell.appendChild(strip.el);
+    }
+    function syncLabel() {
+        if (labelEl)
+            labelEl.textContent = action.label;
+        if (hintEl) {
+            hintEl.textContent = action.hint ?? "";
+            hintEl.style.display = action.hint ? "" : "none";
+        }
+    }
+    buildStrip();
+    syncLabel();
+    /** Total cycle length, in seconds at speed 1. */
+    function cycleLength() {
+        const n = Math.max(1, action.combo.length);
+        if (action.sequence)
+            return SEQ_IDLE + n * (SEQ_PRESS + SEQ_GAP) + SEQ_TAIL;
+        return HOLD_IDLE + (n - 1) * HOLD_STAGGER + HOLD_RAMP + HOLD_SUSTAIN + HOLD_RELEASE + HOLD_TAIL;
+    }
+    /**
+     * Write the state of the whole combination at cycle time `t` (seconds).
+     *
+     * One function for both modes and for the reduced-motion still, so there is exactly one place that
+     * decides what "engaged" looks like.
+     */
+    function renderAt(t) {
+        const driver = pad?.driver();
+        if (action.sequence) {
+            let completed = 0;
+            channels.forEach((ch) => {
+                const start = SEQ_IDLE + ch.index * (SEQ_PRESS + SEQ_GAP);
+                const end = start + SEQ_PRESS;
+                if (t >= end)
+                    completed++;
+                const on = t >= start && t < end;
+                const ramp = on ? smoothstep((t - start) / Math.min(0.12, SEQ_PRESS / 3)) : 0;
+                applyChannel(ch, on, ramp, t - start, driver);
+            });
+            strip.setStep(completed);
+            return;
+        }
+        const n = Math.max(1, action.combo.length);
+        const allDown = HOLD_IDLE + (n - 1) * HOLD_STAGGER + HOLD_RAMP;
+        const sustainEnd = allDown + HOLD_SUSTAIN;
+        const releaseEnd = sustainEnd + HOLD_RELEASE;
+        for (const ch of channels) {
+            const onset = HOLD_IDLE + ch.index * HOLD_STAGGER;
+            const on = t >= onset && t < sustainEnd;
+            let ramp = 0;
+            if (t >= onset && t < sustainEnd)
+                ramp = smoothstep((t - onset) / HOLD_RAMP);
+            else if (t >= sustainEnd && t < releaseEnd)
+                ramp = 1 - smoothstep((t - sustainEnd) / HOLD_RELEASE);
+            applyChannel(ch, on, ramp, t - onset, driver);
+        }
+    }
+    function applyChannel(ch, on, ramp, since, driver) {
+        if (ch.stick) {
+            let x;
+            let y;
+            if (ch.stick.vec) {
+                x = ch.stick.vec[0] * ramp;
+                y = ch.stick.vec[1] * ramp;
+            }
+            else {
+                // Undirected: sweep the cap around its circle so it reads as "any direction".
+                const angle = (Math.max(0, since) / SWEEP_PERIOD) * Math.PI * 2;
+                x = Math.cos(angle) * ramp;
+                y = Math.sin(angle) * ramp;
+            }
+            driver?.setStick(ch.stick.side, x, y);
+            strip.setDeflectionAt(ch.index, x, y);
+            // A stick is "pressed" in the strip once it's meaningfully deflected — matches the pad's own glow.
+            strip.setPressedAt(ch.index, ramp > 0.35);
+            return;
+        }
+        strip.setPressedAt(ch.index, on);
+        if (ch.part && driver) {
+            driver.setPart(ch.part, on);
+            if (ch.part === "lt")
+                driver.setMeter("l", on ? 1 : 0);
+            if (ch.part === "rt")
+                driver.setMeter("r", on ? 1 : 0);
+        }
+    }
+    /** The still frame for reduced motion: everything engaged, sticks at full deflection. */
+    function renderStill() {
+        const driver = pad?.driver();
+        for (const ch of channels)
+            applyChannel(ch, true, 1, 0, driver);
+        strip.setStep(action.combo.length);
+    }
+    // ── the loop ────────────────────────────────────────────────────────────────────────────────────
+    const reduceMotion = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+    let raf = 0;
+    let elapsed = 0;
+    let lastTs = 0;
+    let wantPlaying = true;
+    function frame(ts) {
+        raf = requestAnimationFrame(frame);
+        const dt = lastTs ? Math.min(0.05, (ts - lastTs) / 1000) : 0;
+        lastTs = ts;
+        elapsed += dt * speed;
+        const len = cycleLength();
+        if (elapsed >= len) {
+            elapsed -= len * Math.floor(elapsed / len);
+            opts.onCycle?.();
+        }
+        renderAt(elapsed);
+    }
+    function start() {
+        if (raf || reduceMotion)
+            return;
+        lastTs = 0;
+        raf = requestAnimationFrame(frame);
+    }
+    function stop() {
+        if (raf)
+            cancelAnimationFrame(raf);
+        raf = 0;
+    }
+    const onVisibility = () => {
+        if (document.visibilityState === "hidden")
+            stop();
+        else if (wantPlaying)
+            start();
+    };
+    document.addEventListener("visibilitychange", onVisibility);
+    if (reduceMotion)
+        renderStill();
+    else
+        start();
+    // A pad swap rebuilds the drawing (new nodes, new driver) and re-letters, so the chips must follow.
+    const offRebuild = pad?.onRebuild(() => {
+        buildStrip();
+        if (reduceMotion)
+            renderStill();
+    });
+    function reset(next) {
+        action = next;
+        channels = channelsOf(action);
+        // Release the previous combination before the new one draws, or a part the old action lit and the
+        // new one doesn't would stay lit forever.
+        pad?.driver().clearAll();
+        buildStrip();
+        syncLabel();
+        elapsed = 0;
+        lastTs = 0;
+        if (reduceMotion)
+            renderStill();
+    }
+    return {
+        root,
+        pad,
+        setAction: reset,
+        play() {
+            wantPlaying = true;
+            start();
+        },
+        pause() {
+            wantPlaying = false;
+            stop();
+        },
+        setSpeed(mult) {
+            speed = Math.max(0.05, mult);
+        },
+        dispose() {
+            stop();
+            document.removeEventListener("visibilitychange", onVisibility);
+            offRebuild?.();
+            strip.dispose();
+            pad?.dispose();
+            root.remove();
+        },
+    };
+}
+//# sourceMappingURL=combo-demo.js.map

package/dist/ui/controller/combo-demo.js.map

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

package/dist/ui/controller/combo-strip.d.ts

@@ -0,0 +1,36 @@
+/**
+ * COMBO STRIP — the row of chips that says what to press for one action.
+ *
+ *     [L2] + [✕]      two controls held together (the default)
+ *     [L2] → [✕]      two controls in order (`action.sequence`)
+ *     [stick◀]        one control
+ *
+ * This is the "combination" half of a callout card, and the demo drives the same object, so the static
+ * legend and the animated tutorial can never disagree about what a combination looks like.
+ *
+ * Addressing is by INDEX rather than by token, because a combination may legitimately repeat a control
+ * (a double-tap sequence is `["DIAMOND_DOWN", "DIAMOND_DOWN"]`) and a token lookup would drive both
+ * chips at once. `setPressed(token, …)` exists for convenience and hits the first match.
+ */
+import { type InputChip, type InputChipOptions } from "./input-chip.js";
+import type { ComboToken, ControlAction } from "./tokens.js";
+export interface ComboStrip {
+    readonly el: HTMLElement;
+    readonly tokens: readonly ComboToken[];
+    readonly chips: readonly InputChip[];
+    /** Press/release the chip at `index`. Out-of-range indices are ignored. */
+    setPressedAt(index: number, on: boolean): void;
+    /** Press/release the FIRST chip carrying `token`. */
+    setPressed(token: ComboToken, on: boolean): void;
+    setAllPressed(on: boolean): void;
+    /** Deflect the stick chip at `index` (no-op on other chip kinds). Convention: right = +1, up = +1. */
+    setDeflectionAt(index: number, x: number, y: number): void;
+    /**
+     * In a sequence, mark separators before `step` as done so the eye can follow the progression.
+     * `-1` clears. No effect on a simultaneous combo, which has no ordering to show.
+     */
+    setStep(step: number): void;
+    dispose(): void;
+}
+export declare function createComboStrip(action: ControlAction, opts?: InputChipOptions): ComboStrip;
+//# sourceMappingURL=combo-strip.d.ts.map

package/dist/ui/controller/combo-strip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combo-strip.d.ts","sourceRoot":"","sources":["../../../src/ui/controller/combo-strip.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAmB,KAAK,SAAS,EAAE,KAAK,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAEzF,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE7D,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,EAAE,WAAW,CAAC;IACzB,QAAQ,CAAC,MAAM,EAAE,SAAS,UAAU,EAAE,CAAC;IACvC,QAAQ,CAAC,KAAK,EAAE,SAAS,SAAS,EAAE,CAAC;IACrC,2EAA2E;IAC3E,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/C,qDAAqD;IACrD,UAAU,CAAC,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE,OAAO,GAAG,IAAI,CAAC;IACjD,aAAa,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,CAAC;IACjC,sGAAsG;IACtG,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3D;;;OAGG;IACH,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,OAAO,IAAI,IAAI,CAAC;CACjB;AAED,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,aAAa,EAAE,IAAI,GAAE,gBAAqB,GAAG,UAAU,CAiD/F"}

package/dist/ui/controller/combo-strip.js

@@ -0,0 +1,66 @@
+/**
+ * COMBO STRIP — the row of chips that says what to press for one action.
+ *
+ *     [L2] + [✕]      two controls held together (the default)
+ *     [L2] → [✕]      two controls in order (`action.sequence`)
+ *     [stick◀]        one control
+ *
+ * This is the "combination" half of a callout card, and the demo drives the same object, so the static
+ * legend and the animated tutorial can never disagree about what a combination looks like.
+ *
+ * Addressing is by INDEX rather than by token, because a combination may legitimately repeat a control
+ * (a double-tap sequence is `["DIAMOND_DOWN", "DIAMOND_DOWN"]`) and a token lookup would drive both
+ * chips at once. `setPressed(token, …)` exists for convenience and hits the first match.
+ */
+import { createInputChip } from "./input-chip.js";
+import { injectPadCss } from "./styles.js";
+export function createComboStrip(action, opts = {}) {
+    injectPadCss();
+    const el = document.createElement("span");
+    el.className = "rydr-pad-strip";
+    const tokens = [...action.combo];
+    const chips = [];
+    const seps = [];
+    tokens.forEach((token, i) => {
+        if (i > 0) {
+            const sep = document.createElement("span");
+            sep.className = "rydr-pad-strip-sep";
+            // "+" = at the same time, "→" = then. The glyph is the whole explanation.
+            sep.textContent = action.sequence ? "→" : "+";
+            el.appendChild(sep);
+            seps.push(sep);
+        }
+        const chip = createInputChip(token, opts);
+        chips.push(chip);
+        el.appendChild(chip.el);
+    });
+    const setPressedAt = (index, on) => chips[index]?.setPressed(on);
+    return {
+        el,
+        tokens,
+        chips,
+        setPressedAt,
+        setPressed(token, on) {
+            const i = tokens.indexOf(token);
+            if (i >= 0)
+                setPressedAt(i, on);
+        },
+        setAllPressed(on) {
+            for (const chip of chips)
+                chip.setPressed(on);
+        },
+        setDeflectionAt(index, x, y) {
+            chips[index]?.setDeflection(x, y);
+        },
+        setStep(step) {
+            // Separator i sits between chip i and chip i+1, so it is "done" once step has passed chip i+1.
+            seps.forEach((sep, i) => sep.classList.toggle("done", action.sequence === true && step > i));
+        },
+        dispose() {
+            for (const chip of chips)
+                chip.dispose();
+            el.remove();
+        },
+    };
+}
+//# sourceMappingURL=combo-strip.js.map

package/dist/ui/controller/combo-strip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combo-strip.js","sourceRoot":"","sources":["../../../src/ui/controller/combo-strip.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAE,eAAe,EAAyC,MAAM,iBAAiB,CAAC;AACzF,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAsB3C,MAAM,UAAU,gBAAgB,CAAC,MAAqB,EAAE,OAAyB,EAAE;IACjF,YAAY,EAAE,CAAC;IACf,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC1C,EAAE,CAAC,SAAS,GAAG,gBAAgB,CAAC;IAEhC,MAAM,MAAM,GAAG,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACjC,MAAM,KAAK,GAAgB,EAAE,CAAC;IAC9B,MAAM,IAAI,GAAkB,EAAE,CAAC;IAE/B,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;QAC1B,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;YACV,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YAC3C,GAAG,CAAC,SAAS,GAAG,oBAAoB,CAAC;YACrC,0EAA0E;YAC1E,GAAG,CAAC,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;YAC9C,EAAE,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;YACpB,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACjB,CAAC;QACD,MAAM,IAAI,GAAG,eAAe,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;QAC1C,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACjB,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAC1B,CAAC,CAAC,CAAC;IAEH,MAAM,YAAY,GAA+B,CAAC,KAAK,EAAE,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,EAAE,CAAC,CAAC;IAE7F,OAAO;QACL,EAAE;QACF,MAAM;QACN,KAAK;QACL,YAAY;QACZ,UAAU,CAAC,KAAK,EAAE,EAAE;YAClB,MAAM,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;YAChC,IAAI,CAAC,IAAI,CAAC;gBAAE,YAAY,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;QAClC,CAAC;QACD,aAAa,CAAC,EAAE;YACd,KAAK,MAAM,IAAI,IAAI,KAAK;gBAAE,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;QAChD,CAAC;QACD,eAAe,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC;YACzB,KAAK,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QACpC,CAAC;QACD,OAAO,CAAC,IAAI;YACV,+FAA+F;YAC/F,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,QAAQ,KAAK,IAAI,IAAI,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC;QAC/F,CAAC;QACD,OAAO;YACL,KAAK,MAAM,IAAI,IAAI,KAAK;gBAAE,IAAI,CAAC,OAAO,EAAE,CAAC;YACzC,EAAE,CAAC,MAAM,EAAE,CAAC;QACd,CAAC;KACF,CAAC;AACJ,CAAC"}

package/dist/ui/controller/control-trainer.d.ts

@@ -0,0 +1,132 @@
+/**
+ * CONTROL TRAINER — a guided lesson: "here's what to press; now you do it."
+ *
+ * Where {@link mountComboDemo} only *shows* a combination on a loop, this one **watches the rider** and
+ * gates on them actually performing it. It exists for the paired lessons where two related controls have
+ * to be taught together — the case that named it being the trainer resistance, which is one concept
+ * (`Changer la résistance`) with two opposite halves (`−` and `+`).
+ *
+ * ```ts
+ * mountControlTrainer(modalBody, {
+ *   title: "Changer la résistance",
+ *   press: shellInput,
+ *   steps: [
+ *     { label: "Réduire la résistance",   combo: ["LSTICK_PRESS", "LB"] },
+ *     { label: "Augmenter la résistance", combo: ["LSTICK_PRESS", "RB"] },
+ *   ],
+ *   onComplete: () => closeModal(),
+ * });
+ * ```
+ *
+ * Layout: the title, then one panel per step laid left → right, then **one shared controller drawing
+ * spanning the full width** underneath. Sharing the drawing is the point — both halves of the lesson are
+ * on the same physical pad, and seeing the left paddle and the right paddle light up on one picture is
+ * what teaches the pairing.
+ *
+ * Each step walks three states, and each one has to *look* like what it means:
+ *
+ *   1. **hint** — whitish, pulsing, on both the panel's chips and the pad's buttons. This is an
+ *      instruction, so it must not look like a press; the pulse is what separates the two, since a solid
+ *      fill is what a real press already looks like. The prompt shows **one step at a time, alternating**,
+ *      and builds each combination up **cumulatively** — the first control lights, STAYS lit, and the next
+ *      joins it a beat later. Prompting both halves at once would light four controls on one pad and read
+ *      as "press all of this"; blinking them in turn would never show that they are held together.
+ *   2. **active** — the accent colour, and the pulse STOPS. The rider has started but the combination
+ *      isn't complete yet: on a two-control step this is the state between the first control and the
+ *      second.
+ *   3. **done** — the step's PANEL turns green and its ✓ pops, the moment the WHOLE combination is held.
+ *      Holding all of it is doing it; there is nothing further to wait for, and it stays done whether or
+ *      not the rider keeps the controls down.
+ *
+ * **The controller drawing is never green.** White and blue have already taught the rider that colour on
+ * the pad means *now*, so progress there would be a third colour breaking that rule — a green button
+ * beside a white one reads as "and this one too". Progress lives on the panels, whose chips picture the
+ * same combination one line up, so the confirmation still lands on the controls they just pressed. See
+ * `paint` for the two languages.
+ *
+ * When every step is done, `onComplete` fires after a short beat so the last ✓ is actually seen. The
+ * component does not close anything itself — it has no idea it's in a modal. The host owns that, exactly
+ * as with every other piece of this kit.
+ *
+ * ⚠️ **The resistance case needs a shell-side input source.** `LB`/`RB` are shell-owned: the
+ * SDK client turns those keys into `trainer.adjustResistance` intents and they never reach a game's
+ * `onButton` (see {@link ShellControl}). So a *game* can build a trainer for its own buttons, but a
+ * resistance lesson has to be driven by the shell, which is also the only place that lesson belongs.
+ */
+import type { ButtonEdge } from "../../protocol/buttons.js";
+import type { AxisName } from "../../protocol/buttons.js";
+import type { GlyphSet } from "../../protocol/glyphs.js";
+import { type ControllerPad } from "./controller-pad.js";
+import type { StickPictogramStyle } from "./input-chip.js";
+import { type ComboToken, type ControlName } from "./tokens.js";
+import type { PadBrandKey } from "./types.js";
+/**
+ * The input the lesson watches.
+ *
+ * Typed on {@link ControlName}, not `ButtonName`, so a shell-side source can report `LB`/`RB`.
+ * A `PlatformSession` satisfies it structurally and can drive any lesson made of game buttons.
+ */
+export interface TrainerInputSource {
+    onButton(cb: (e: {
+        name: ControlName;
+        edge: ButtonEdge;
+    }) => void): () => void;
+    axis?(name: AxisName): number;
+    hardware?: {
+        current: {
+            glyphSet?: GlyphSet;
+        };
+        subscribe?(cb: (snapshot: {
+            glyphSet?: GlyphSet;
+        }) => void): () => void;
+    };
+}
+export interface TrainerStep {
+    /** What the rider has to do — the panel heading. */
+    label: string;
+    /** The controls that do it. Several tokens = they must all be engaged together. */
+    combo: readonly ComboToken[];
+    /** The controls must be engaged IN ORDER rather than together. */
+    sequence?: boolean;
+    /** A quieter line under the label. */
+    hint?: string;
+    /** Stable key, for `onStepComplete`. Falls back to `label`. */
+    id?: string;
+}
+export interface ControlTrainerOptions {
+    /** The one thing the lesson is about — e.g. "Changer la résistance". */
+    title: string;
+    /** One panel per step, laid left → right in the order given. */
+    steps: readonly TrainerStep[];
+    /** The input to watch. Without it the lesson still renders and prompts, but can never complete. */
+    press?: TrainerInputSource;
+    brand?: PadBrandKey;
+    glyphSet?: GlyphSet;
+    labels?: boolean;
+    accent?: string;
+    colored?: boolean;
+    stickStyle?: StickPictogramStyle;
+    /** Pad size preset. Default `"lg"` — the drawing is the shared reference here, so make it readable. */
+    size?: "sm" | "md" | "lg";
+    /**
+     * How long to hold on the final ✓ before `onComplete`. Default 900ms.
+     *
+     * Not decoration: firing the instant the last control is released would yank the lesson away before the
+     * rider sees that they got it right, which is the only feedback the whole exercise exists to give.
+     */
+    completionDelayMs?: number;
+    onStepComplete?(step: TrainerStep, index: number): void;
+    /** Every step done. The host closes its modal here — the component never closes itself. */
+    onComplete?(): void;
+}
+export interface ControlTrainer {
+    readonly root: HTMLDivElement;
+    readonly pad: ControllerPad;
+    /** Which steps are done, by index. */
+    completed(): readonly boolean[];
+    /** Back to square one — every step un-done, prompts pulsing again. */
+    reset(): void;
+    dispose(): void;
+}
+export declare function mountControlTrainer(host: HTMLElement, opts: ControlTrainerOptions): ControlTrainer;
+//# sourceMappingURL=control-trainer.d.ts.map

package/dist/ui/controller/control-trainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"control-trainer.d.ts","sourceRoot":"","sources":["../../../src/ui/controller/control-trainer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAEzD,OAAO,EAAsB,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC7E,OAAO,KAAK,EAAkB,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAI3E,OAAO,EAAgD,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAC9G,OAAO,KAAK,EAAE,WAAW,EAAW,MAAM,YAAY,CAAC;AAEvD;;;;;GAKG;AACH,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE;QAAE,IAAI,EAAE,WAAW,CAAC;QAAC,IAAI,EAAE,UAAU,CAAA;KAAE,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;IAC/E,IAAI,CAAC,CAAC,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC9B,QAAQ,CAAC,EAAE;QACT,OAAO,EAAE;YAAE,QAAQ,CAAC,EAAE,QAAQ,CAAA;SAAE,CAAC;QACjC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,EAAE;YAAE,QAAQ,CAAC,EAAE,QAAQ,CAAA;SAAE,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;KACzE,CAAC;CACH;AAED,MAAM,WAAW,WAAW;IAC1B,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,mFAAmF;IACnF,KAAK,EAAE,SAAS,UAAU,EAAE,CAAC;IAC7B,kEAAkE;IAClE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,qBAAqB;IACpC,wEAAwE;IACxE,KAAK,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,KAAK,EAAE,SAAS,WAAW,EAAE,CAAC;IAC9B,mGAAmG;IACnG,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,uGAAuG;IACvG,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACxD,2FAA2F;IAC3F,UAAU,CAAC,IAAI,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,IAAI,EAAE,cAAc,CAAC;IAC9B,QAAQ,CAAC,GAAG,EAAE,aAAa,CAAC;IAC5B,sCAAsC;IACtC,SAAS,IAAI,SAAS,OAAO,EAAE,CAAC;IAChC,sEAAsE;IACtE,KAAK,IAAI,IAAI,CAAC;IACd,OAAO,IAAI,IAAI,CAAC;CACjB;AA0DD,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,qBAAqB,GAAG,cAAc,CAuelG"}