@rydr/game-sdk 3.0.0 → 3.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"action-card.js","sourceRoot":"","sources":["../../src/ui/action-card.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,SAAS,EAA+B,MAAM,WAAW,CAAC;AACnE,OAAO,EAAE,YAAY,EAA0E,MAAM,aAAa,CAAC;AAgBnH;;;;GAIG;AACH,MAAM,UAAU,eAAe,CAAC,IAAiB,EAAE,MAAoB,EAAE,OAA0B,EAAE;IACnG,MAAM,IAAI,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC;IAC7B,MAAM,MAAM,GAAG,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAC1C,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,gDAAgD;IAClF,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAE5B,OAAO;QACL,GAAG,IAAI;QACP,MAAM;QACN,UAAU,EAAE,MAAM,CAAC,UAAU;QAC7B,WAAW,EAAE,MAAM,CAAC,WAAW;QAC/B,WAAW,EAAE,MAAM,CAAC,WAAW;QAC/B,UAAU,EAAE,MAAM,CAAC,UAAU;QAC7B,0FAA0F;QAC1F,WAAW,EAAE,CAAC,EAAW,EAAE,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;KAChF,CAAC;AACJ,CAAC;AAYD,4FAA4F;AAC5F,MAAM,UAAU,mBAAmB,CAAC,MAAoB,EAAE,UAAyB,MAAM;IACvF,OAAO,YAAY,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC;AAC9C,CAAC;AAED,kFAAkF;AAClF,MAAM,UAAU,iBAAiB,CAAC,IAAiB,EAAE,MAAoB,EAAE,KAAa;IACtF,OAAO,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;AAClD,CAAC"}

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

@@ -0,0 +1,41 @@
+/**
+ * ACTION DIAMOND — the full A/B/Y/Z move diamond: four action cards in a losange (Y top, A right, B
+ * bottom, Z left). Each card is exactly the {@link mountActionCard} card (same `.rydr-ui-card` style +
+ * keycap), with a freeform content SLOT the consumer fills. The diamond is a centred grid that sizes
+ * to its content; `compact` / `rowGap` / `columnGap` tune the spread.
+ */
+import { type ButtonLetter, type ButtonSource } from "./keycap.js";
+import { type ActionCard } from "./action-card.js";
+/** One diamond item: a full action card (same `.rydr-ui-card` style) with a `setActive` highlight added. */
+export interface DiamondCard extends ActionCard {
+    /** Highlight this card (e.g. the currently-selected move). */
+    setActive(on: boolean): void;
+}
+export interface ActionDiamond {
+    root: HTMLElement;
+    /** The four cards by face button (Y top · A right · B bottom · Z left). */
+    cards: Record<ButtonLetter, DiamondCard>;
+    dispose(): void;
+}
+export interface ActionDiamondOptions {
+    colored?: boolean;
+    /** Initial content per button — a string label (e.g. the attack name) or custom DOM in `content`. */
+    cards?: Partial<Record<ButtonLetter, {
+        content?: string | HTMLElement;
+        label?: string;
+    }>>;
+    /** Vertical gap (px) between the stacked Y/B centre cards. */
+    rowGap?: number;
+    /** Horizontal gap (px) between the centre column and the Z/A side cards. */
+    columnGap?: number;
+    /** Wire every card's keycap to real controller input (pressed while its button is held). */
+    press?: ButtonSource;
+}
+/**
+ * Mount the A/B/Y/Z move diamond: Z left · Y+B stacked in the centre column · A right. Each card is
+ * the {@link mountActionCard} card with a freeform content SLOT — an attack-name string, or any custom
+ * DOM. The cluster sizes to its content and stays centred; per-card `setActive`/`setCooldown` drive
+ * the move state.
+ */
+export declare function mountActionDiamond(host: HTMLElement, opts?: ActionDiamondOptions): ActionDiamond;
+//# sourceMappingURL=action-diamond.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"action-diamond.d.ts","sourceRoot":"","sources":["../../src/ui/action-diamond.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AACnE,OAAO,EAAmB,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAIpE,4GAA4G;AAC5G,MAAM,WAAW,WAAY,SAAQ,UAAU;IAC7C,8DAA8D;IAC9D,SAAS,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,CAAC;CAC9B;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,WAAW,CAAC;IAClB,2EAA2E;IAC3E,KAAK,EAAE,MAAM,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;IACzC,OAAO,IAAI,IAAI,CAAC;CACjB;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qGAAqG;IACrG,KAAK,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,YAAY,EAAE;QAAE,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IAC1F,8DAA8D;IAC9D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4FAA4F;IAC5F,KAAK,CAAC,EAAE,YAAY,CAAC;CACtB;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,GAAE,oBAAyB,GAAG,aAAa,CAkBpG"}

package/dist/ui/action-diamond.js

@@ -0,0 +1,35 @@
+/**
+ * ACTION DIAMOND — the full A/B/Y/Z move diamond: four action cards in a losange (Y top, A right, B
+ * bottom, Z left). Each card is exactly the {@link mountActionCard} card (same `.rydr-ui-card` style +
+ * keycap), with a freeform content SLOT the consumer fills. The diamond is a centred grid that sizes
+ * to its content; `compact` / `rowGap` / `columnGap` tune the spread.
+ */
+import {} from "./keycap.js";
+import { mountActionCard } from "./action-card.js";
+const POS_CLASS = { Y: "pos-top", A: "pos-rgt", B: "pos-bot", Z: "pos-lft" };
+/**
+ * Mount the A/B/Y/Z move diamond: Z left · Y+B stacked in the centre column · A right. Each card is
+ * the {@link mountActionCard} card with a freeform content SLOT — an attack-name string, or any custom
+ * DOM. The cluster sizes to its content and stays centred; per-card `setActive`/`setCooldown` drive
+ * the move state.
+ */
+export function mountActionDiamond(host, opts = {}) {
+    const colored = opts.colored ?? true;
+    const root = document.createElement("div");
+    root.className = "rydr-ui-dia";
+    if (opts.rowGap != null)
+        root.style.rowGap = `${opts.rowGap}px`;
+    if (opts.columnGap != null)
+        root.style.columnGap = `${opts.columnGap}px`;
+    const cards = {};
+    for (const button of ["Y", "A", "B", "Z"]) {
+        const init = opts.cards?.[button];
+        const card = mountActionCard(root, button, { colored, animate: false, inline: true, press: opts.press, content: init?.content, label: init?.label });
+        card.root.classList.add("rydr-ui-dia-card", POS_CLASS[button]);
+        card.setActive = (on) => card.root.classList.toggle("active", on);
+        cards[button] = card;
+    }
+    host.appendChild(root);
+    return { root, cards, dispose: () => root.remove() };
+}
+//# sourceMappingURL=action-diamond.js.map

package/dist/ui/action-diamond.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-diamond.js","sourceRoot":"","sources":["../../src/ui/action-diamond.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAwC,MAAM,aAAa,CAAC;AACnE,OAAO,EAAE,eAAe,EAAmB,MAAM,kBAAkB,CAAC;AAEpE,MAAM,SAAS,GAAiC,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC;AA2B3G;;;;;GAKG;AACH,MAAM,UAAU,kBAAkB,CAAC,IAAiB,EAAE,OAA6B,EAAE;IACnF,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC;IACrC,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC3C,IAAI,CAAC,SAAS,GAAG,aAAa,CAAC;IAC/B,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI;QAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC;IAChE,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI;QAAE,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,SAAS,IAAI,CAAC;IAEzE,MAAM,KAAK,GAAG,EAAuC,CAAC;IACtD,KAAK,MAAM,MAAM,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAmB,EAAE,CAAC;QAC5D,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC,CAAC;QAClC,MAAM,IAAI,GAAG,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,CAAgB,CAAC;QACpK,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,kBAAkB,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC;QAC/D,IAAI,CAAC,SAAS,GAAG,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;QAClE,KAAK,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC;IACvB,CAAC;IAED,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IACvB,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC;AACvD,CAAC"}

package/dist/ui/card.d.ts

@@ -0,0 +1,45 @@
+/**
+ * CARD — the dark glass card (the "ATTAQUER" look): a styled frame with a CONTENT SLOT (`card.body`)
+ * the game fills with whatever it wants (a label, a creature plate, a dialogue line, …). No keycap —
+ * that's {@link mountActionCard}, which composes this card with a controller button on top.
+ *
+ * A standalone card WRAPS its content; `inline:false` (default) places it fixed bottom-centre (use
+ * `setScreenPos` to track a projected point), `inline:true` lays it in normal flow.
+ */
+export interface CardOptions {
+    /** Initial slot content — a string (set as text) or an element appended into `body`. */
+    content?: string | HTMLElement;
+    /** Convenience: a single line of label text (rendered as the card's body). */
+    label?: string;
+    /** Lay the card inline (in normal flow) instead of fixed bottom-centre. */
+    inline?: boolean;
+    /** Fixed card width (number → px, or any CSS length). Omit → the card hugs its content. */
+    width?: number | string;
+    /** Fixed card height (number → px, or any CSS length). Omit → the card hugs its content. */
+    height?: number | string;
+}
+/** A mounted card: a styled frame + a content slot the game owns. */
+export interface Card {
+    root: HTMLElement;
+    /** The content SLOT — append your own DOM here, or use setContent/setLabel. */
+    body: HTMLElement;
+    setLabel(text: string): void;
+    setContent(content: string | HTMLElement): void;
+    /** Disabled = the action is unavailable: the card (and any floating keycap) fades to 50% + inert. */
+    setDisabled(on: boolean): void;
+    setVisible(v: boolean): void;
+    /** Centre the card at a viewport pixel (e.g. a creature projected to screen). */
+    setScreenPos(x: number, y: number): void;
+    dispose(): void;
+}
+/**
+ * Build the card DOM + handle WITHOUT attaching it to a host. Also returns the inner `.rydr-ui-card`
+ * element so {@link mountActionCard} can hang a keycap on it. Internal building block — most callers
+ * want `mountCard` or `mountActionCard`.
+ */
+export declare function buildCard(opts?: CardOptions): Card & {
+    card: HTMLElement;
+};
+/** Mount a standalone dark card (no keycap) with a content slot. */
+export declare function mountCard(host: HTMLElement, opts?: CardOptions): Card;
+//# sourceMappingURL=card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/ui/card.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,MAAM,WAAW,WAAW;IAC1B,wFAAwF;IACxF,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAC/B,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2EAA2E;IAC3E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2FAA2F;IAC3F,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,4FAA4F;IAC5F,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED,qEAAqE;AACrE,MAAM,WAAW,IAAI;IACnB,IAAI,EAAE,WAAW,CAAC;IAClB,+EAA+E;IAC/E,IAAI,EAAE,WAAW,CAAC;IAClB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAAC;IAChD,qGAAqG;IACrG,WAAW,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B,UAAU,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC7B,iFAAiF;IACjF,YAAY,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzC,OAAO,IAAI,IAAI,CAAC;CACjB;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,IAAI,GAAE,WAAgB,GAAG,IAAI,GAAG;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,CAgD9E;AAED,oEAAoE;AACpE,wBAAgB,SAAS,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,GAAE,WAAgB,GAAG,IAAI,CAIzE"}

package/dist/ui/card.js

@@ -0,0 +1,73 @@
+/**
+ * CARD — the dark glass card (the "ATTAQUER" look): a styled frame with a CONTENT SLOT (`card.body`)
+ * the game fills with whatever it wants (a label, a creature plate, a dialogue line, …). No keycap —
+ * that's {@link mountActionCard}, which composes this card with a controller button on top.
+ *
+ * A standalone card WRAPS its content; `inline:false` (default) places it fixed bottom-centre (use
+ * `setScreenPos` to track a projected point), `inline:true` lays it in normal flow.
+ */
+import { injectCss } from "./styles.js";
+/**
+ * Build the card DOM + handle WITHOUT attaching it to a host. Also returns the inner `.rydr-ui-card`
+ * element so {@link mountActionCard} can hang a keycap on it. Internal building block — most callers
+ * want `mountCard` or `mountActionCard`.
+ */
+export function buildCard(opts = {}) {
+    injectCss();
+    const root = document.createElement("div");
+    root.className = "rydr-ui-root" + (opts.inline ? " inline" : "");
+    const card = document.createElement("div");
+    card.className = "rydr-ui-card";
+    // size is the consumer's choice: hug content (default), or a fixed frame when width/height are given.
+    if (opts.width != null || opts.height != null) {
+        card.classList.add("fixed");
+        const len = (v) => (typeof v === "number" ? `${v}px` : v);
+        if (opts.width != null)
+            card.style.width = len(opts.width);
+        if (opts.height != null)
+            card.style.height = len(opts.height);
+    }
+    const body = document.createElement("div");
+    body.className = "rydr-ui-card-body";
+    card.appendChild(body);
+    root.appendChild(card);
+    const setContent = (content) => {
+        body.textContent = "";
+        if (typeof content === "string") {
+            const span = document.createElement("span");
+            span.className = "rydr-ui-card-lbl";
+            span.textContent = content;
+            body.appendChild(span);
+        }
+        else {
+            body.appendChild(content);
+        }
+    };
+    if (opts.content != null)
+        setContent(opts.content);
+    else if (opts.label != null)
+        setContent(opts.label);
+    return {
+        root,
+        card,
+        body,
+        setLabel: (t) => setContent(t),
+        setContent,
+        setDisabled: (on) => card.classList.toggle("disabled", on),
+        setVisible: (v) => { root.style.opacity = v ? "1" : "0"; },
+        setScreenPos(x, y) {
+            root.style.left = `${x}px`;
+            root.style.top = `${y}px`;
+            root.style.bottom = "auto";
+            root.style.transform = "translate(-50%, -50%)";
+        },
+        dispose: () => root.remove(),
+    };
+}
+/** Mount a standalone dark card (no keycap) with a content slot. */
+export function mountCard(host, opts = {}) {
+    const card = buildCard(opts);
+    host.appendChild(card.root);
+    return card;
+}
+//# sourceMappingURL=card.js.map

package/dist/ui/card.js.map

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

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

@@ -0,0 +1,73 @@
+/**
+ * CHOICE CARD — a PLAYER-facing menu built from the kit: a {@link Card} (dark container) holding an
+ * optional SPEAKER name, an optional PROMPT line, and a vertical list of selectable OPTIONS. One option
+ * is highlighted at a time; ▲▼ move the highlight (clamped at the ends) and the confirm KEYCAP (default
+ * A) rides the right of the highlighted option. Where the dialogue card is the NPC talking, this is how
+ * the PLAYER answers — e.g. "Voici le Vivax que j'aimerais aller voir…" + a list of Vivax.
+ *
+ * `open({...})` shows the menu; `moveBy(±1)` / `setIndex(i)` move the highlight; `confirm()` returns the
+ * chosen `{index,label}` (and fires `onConfirm`). The consumer wires these to controller input
+ * (UP/DOWN → moveBy, A → confirm), mirroring how the dialogue card's `advance()` is driven.
+ *
+ * Each option + the prompt share the dialogue card's soft `maxChars` budget (a long string logs a dev
+ * warning), and the rows clamp + wrap so an over-long label can't break the layout. 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 ChoiceCardOptions {
+    /** The confirm button parked on the highlighted option (default "A"). */
+    button?: ButtonLetter;
+    /** Lay the card inline (normal flow) instead of fixed bottom-centre. */
+    inline?: boolean;
+    /** Wire the confirm keycap to real controller input (pressed while its button is held). */
+    press?: ButtonSource;
+    /** Soft per-string character budget for the prompt and each option (default 140). */
+    maxChars?: number;
+    /**
+     * Show a directional-keycap guide on the left of the highlighted option (default true): both UP and
+     * DOWN always appear, with the unavailable one disabled (UP at the top, DOWN at the bottom).
+     */
+    arrows?: boolean;
+}
+export interface ChoiceConfig {
+    /** Speaker name above the prompt (e.g. the player's name); omit/empty to hide. */
+    name?: string;
+    /** The question shown above the options (e.g. "Voici le Vivax que j'aimerais aller voir…"). Optional
+     *  but strongly recommended — it frames the choice; omit/empty to hide. */
+    prompt?: string;
+    /** The selectable options, top to bottom. */
+    options: string[];
+    /** Initially highlighted index (default 0). */
+    selected?: number;
+    /** Called when `confirm()` runs, with the chosen option. */
+    onConfirm?: (index: number, label: string) => void;
+}
+export interface ChoiceCard {
+    root: HTMLElement;
+    /** The underlying card (container) — for styling / positioning. */
+    card: Card;
+    /** The confirm keycap (drive its state if you want). */
+    keycap: Keycap;
+    /** Show the menu: speaker + prompt + options, highlighting `selected` (default 0). */
+    open(cfg: ChoiceConfig): void;
+    /** Move the highlight by `delta` (clamped at the ends, matching the arrow guide); returns the new index. */
+    moveBy(delta: number): number;
+    /** Set the highlight to `i` (clamped into range); returns the new index. */
+    setIndex(i: number): number;
+    /** The currently highlighted index. */
+    index(): number;
+    /** Confirm the current option: fires `onConfirm` and returns `{index,label}` (null if no options). */
+    confirm(): {
+        index: number;
+        label: string;
+    } | null;
+    /** Hide the card and reset. */
+    close(): void;
+    setVisible(v: boolean): void;
+    setScreenPos(x: number, y: number): void;
+    dispose(): void;
+}
+/** Mount a choice card: name + prompt + a highlighted option list + a confirm cue & keycap. */
+export declare function mountChoiceCard(host: HTMLElement, opts?: ChoiceCardOptions): ChoiceCard;
+//# sourceMappingURL=choice-card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"choice-card.d.ts","sourceRoot":"","sources":["../../src/ui/choice-card.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAa,KAAK,IAAI,EAAE,MAAM,WAAW,CAAC;AACjD,OAAO,EAAkC,KAAK,YAAY,EAAE,KAAK,YAAY,EAAE,KAAK,MAAM,EAAE,MAAM,aAAa,CAAC;AAEhH,MAAM,WAAW,iBAAiB;IAChC,yEAAyE;IACzE,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,wEAAwE;IACxE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2FAA2F;IAC3F,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,YAAY;IAC3B,kFAAkF;IAClF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;+EAC2E;IAC3E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6CAA6C;IAC7C,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpD;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,WAAW,CAAC;IAClB,mEAAmE;IACnE,IAAI,EAAE,IAAI,CAAC;IACX,wDAAwD;IACxD,MAAM,EAAE,MAAM,CAAC;IACf,sFAAsF;IACtF,IAAI,CAAC,GAAG,EAAE,YAAY,GAAG,IAAI,CAAC;IAC9B,4GAA4G;IAC5G,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,4EAA4E;IAC5E,QAAQ,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,uCAAuC;IACvC,KAAK,IAAI,MAAM,CAAC;IAChB,sGAAsG;IACtG,OAAO,IAAI;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACnD,+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,+FAA+F;AAC/F,wBAAgB,eAAe,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,GAAE,iBAAsB,GAAG,UAAU,CAyH3F"}

package/dist/ui/choice-card.js

@@ -0,0 +1,141 @@
+/**
+ * CHOICE CARD — a PLAYER-facing menu built from the kit: a {@link Card} (dark container) holding an
+ * optional SPEAKER name, an optional PROMPT line, and a vertical list of selectable OPTIONS. One option
+ * is highlighted at a time; ▲▼ move the highlight (clamped at the ends) and the confirm KEYCAP (default
+ * A) rides the right of the highlighted option. Where the dialogue card is the NPC talking, this is how
+ * the PLAYER answers — e.g. "Voici le Vivax que j'aimerais aller voir…" + a list of Vivax.
+ *
+ * `open({...})` shows the menu; `moveBy(±1)` / `setIndex(i)` move the highlight; `confirm()` returns the
+ * chosen `{index,label}` (and fires `onConfirm`). The consumer wires these to controller input
+ * (UP/DOWN → moveBy, A → confirm), mirroring how the dialogue card's `advance()` is driven.
+ *
+ * Each option + the prompt share the dialogue card's soft `maxChars` budget (a long string logs a dev
+ * warning), and the rows clamp + wrap so an over-long label can't break the layout. 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, createDpadKeycap } from "./keycap.js";
+/** Mount a choice card: name + prompt + a highlighted option list + a confirm cue & keycap. */
+export function mountChoiceCard(host, opts = {}) {
+    const maxChars = Math.max(1, opts.maxChars ?? 140);
+    const showArrows = opts.arrows ?? true;
+    const wrap = document.createElement("div");
+    wrap.className = "rydr-ui-choice";
+    const nameEl = document.createElement("div");
+    nameEl.className = "rydr-ui-choice-name";
+    const promptEl = document.createElement("div");
+    promptEl.className = "rydr-ui-choice-prompt";
+    const listEl = document.createElement("div");
+    listEl.className = "rydr-ui-choice-list";
+    const keycap = createKeycap(opts.button ?? "A", { variant: "solo", animate: true, press: opts.press });
+    // the keycap is parked on the highlighted row by render(); it has no fixed home in the card.
+    wrap.append(nameEl, promptEl, listEl);
+    const card = mountCard(host, { content: wrap, inline: opts.inline });
+    card.setVisible(false);
+    let options = [];
+    let rows = [];
+    let gutters = [];
+    let arrowKeycaps = [];
+    let idx = 0;
+    let onConfirm;
+    const clearArrows = () => {
+        arrowKeycaps.forEach((k) => k.dispose());
+        arrowKeycaps = [];
+        gutters.forEach((gu) => { gu.textContent = ""; });
+    };
+    // Char count is a rough proxy for "will this fit" — enough to flag a likely overflow to the author.
+    const checkLen = (s, what) => {
+        if (s.length > maxChars)
+            console.warn(`[choice-card] ${what} is ${s.length} chars (budget ${maxChars}); it may be clipped: "${s.slice(0, 48)}…"`);
+    };
+    const render = () => {
+        rows.forEach((r, i) => r.classList.toggle("selected", i === idx));
+        // park the (single) confirm keycap on the right of the highlighted row so it rides selection.
+        const selectedRow = rows[idx];
+        if (selectedRow)
+            selectedRow.appendChild(keycap.el);
+        if (!showArrows)
+            return;
+        // arrows live ONLY on the highlighted row: BOTH UP and DOWN always show, but the one with nowhere
+        // to go is disabled (UP at the top, DOWN at the bottom) — a moving guide of where ▲▼ can take you.
+        clearArrows();
+        const guide = gutters[idx];
+        if (!guide)
+            return;
+        const up = createDpadKeycap("UP", { animate: false });
+        const dn = createDpadKeycap("DOWN", { animate: false });
+        up.setDisabled(idx <= 0);
+        dn.setDisabled(idx >= options.length - 1);
+        arrowKeycaps.push(up, dn);
+        guide.append(up.el, dn.el);
+    };
+    return {
+        root: card.root,
+        card,
+        keycap,
+        open(cfg) {
+            const name = cfg.name ?? "";
+            const prompt = cfg.prompt ?? "";
+            nameEl.textContent = name;
+            nameEl.style.display = name ? "" : "none";
+            promptEl.textContent = prompt;
+            promptEl.style.display = prompt ? "" : "none";
+            if (prompt)
+                checkLen(prompt, "prompt");
+            options = cfg.options.slice();
+            onConfirm = cfg.onConfirm;
+            clearArrows();
+            listEl.textContent = "";
+            gutters = [];
+            rows = options.map((label, i) => {
+                checkLen(label, `option ${i}`);
+                const row = document.createElement("div");
+                row.className = "rydr-ui-choice-opt" + (showArrows ? " has-arrows" : "");
+                if (showArrows) {
+                    // an empty, absolutely-positioned left gutter; render() fills only the selected row's gutter
+                    // with the right arrows (UP unless first, DOWN unless last) — so the guide rides the highlight.
+                    const guide = document.createElement("div");
+                    guide.className = "rydr-ui-choice-arrows";
+                    row.appendChild(guide);
+                    gutters[i] = guide;
+                }
+                const lbl = document.createElement("span");
+                lbl.className = "rydr-ui-choice-label";
+                lbl.textContent = label;
+                row.appendChild(lbl);
+                listEl.appendChild(row);
+                return row;
+            });
+            idx = Math.min(Math.max(0, cfg.selected ?? 0), Math.max(0, options.length - 1));
+            render();
+            card.setVisible(true);
+        },
+        moveBy(delta) {
+            if (options.length === 0)
+                return idx;
+            idx = Math.min(Math.max(0, idx + delta), options.length - 1); // clamp at the ends
+            render();
+            return idx;
+        },
+        setIndex(i) {
+            if (options.length === 0)
+                return idx;
+            idx = Math.min(Math.max(0, i), options.length - 1);
+            render();
+            return idx;
+        },
+        index: () => idx,
+        confirm() {
+            const label = options[idx];
+            if (label == null)
+                return null;
+            onConfirm?.(idx, label);
+            return { index: idx, label };
+        },
+        close: () => { card.setVisible(false); clearArrows(); options = []; rows = []; idx = 0; },
+        setVisible: card.setVisible,
+        setScreenPos: card.setScreenPos,
+        dispose: () => { clearArrows(); card.dispose(); },
+    };
+}
+//# sourceMappingURL=choice-card.js.map

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

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

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":"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"}