@jgengine/react 0.36.0 → 0.38.0

package/dist/gameMenuSaves.js

@@ -0,0 +1,468 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { formatSavePlaytime } from "@jgengine/core/game/saveSlotIndex";
+import { hudDuration, hudEase, hudFont, hudSpace, hudType } from "./hudTokens.js";
+import { useMenuNav } from "./menuNav.js";
+import { relativeSavedAt, useSaveSlots } from "./saveSlots.js";
+/**
+ * The save slot `meta` key a card reads as its thumbnail: a data URL or image URL captured when the
+ * save was written. Every other meta key is shown as a progress chip and never interpreted.
+ */
+export const SAVE_SLOT_THUMBNAIL_KEY = "thumbnail";
+/** The character name a save card shows first, when the game supplies one as its own meta key. */
+export const SAVE_SLOT_CHARACTER_KEY = "character";
+const cardSurface = {
+    position: "relative",
+    width: "100%",
+    boxSizing: "border-box",
+    display: "flex",
+    flexDirection: "column",
+    gap: 8,
+    minWidth: 0,
+    padding: 10,
+    borderRadius: "var(--jg-menu-card-radius, 12px)",
+    background: "linear-gradient(180deg, rgba(16,22,30,0.78), rgba(8,11,16,0.86))",
+    boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.09), 0 14px 34px -18px rgba(0,0,0,0.9)",
+    backdropFilter: "blur(6px)",
+    color: "var(--jg-text, #f2f6fb)",
+    fontFamily: hudFont.body,
+    textAlign: "left",
+};
+function thumbnailOf(slot) {
+    const value = slot.meta[SAVE_SLOT_THUMBNAIL_KEY];
+    if (typeof value !== "string" || value.length === 0)
+        return null;
+    return value;
+}
+function progressEntries(slot) {
+    return Object.entries(slot.meta)
+        .filter(([key, value]) => key !== SAVE_SLOT_THUMBNAIL_KEY && key !== "playtime" && String(value).length > 0)
+        .map(([key, value]) => [key, String(value)]);
+}
+function playtimeOf(slot) {
+    const value = slot.meta.playtime;
+    if (value === undefined)
+        return null;
+    if (typeof value === "number")
+        return formatSavePlaytime(value);
+    return String(value);
+}
+/**
+ * One save slot as a card: a captured thumbnail, the character name, playtime, the game's progress
+ * summary and when it was saved — or, for an empty slot, an empty slot with a New Game affordance.
+ * Deleting takes two presses: the first swaps the button for a confirm pair, so a mis-click cannot
+ * erase a run.
+ *
+ * @capability save-slot-card save slot as a card — thumbnail, character, playtime, progress, timestamp, confirmed delete
+ */
+export function SaveSlotCard({ slot, now = Date.now, recent = false, onSelect, onDelete, loadLabel, className, style, }) {
+    const [confirming, setConfirming] = useState(false);
+    const thumb = thumbnailOf(slot);
+    const playtime = playtimeOf(slot);
+    const progress = progressEntries(slot);
+    const character = slot.meta[SAVE_SLOT_CHARACTER_KEY];
+    if (slot.empty) {
+        return (_jsxs("button", { type: "button", "data-save-slot-card": "", "data-save-slot-id": slot.id, "data-empty": "", className: className, onClick: () => onSelect?.(slot), style: {
+                ...cardSurface,
+                cursor: onSelect === undefined ? "default" : "pointer",
+                alignItems: "flex-start",
+                justifyContent: "flex-end",
+                border: "none",
+                boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.07), inset 0 0 40px -18px rgba(125,211,252,0.4), 0 10px 26px -20px rgba(0,0,0,0.9)",
+                background: "linear-gradient(180deg, rgba(12,17,24,0.6), rgba(6,9,13,0.72))",
+                ...style,
+            }, children: [_jsx("div", { "data-save-slot-thumb": "", "data-empty": "", style: {
+                        width: "100%",
+                        aspectRatio: "16 / 9",
+                        borderRadius: 8,
+                        border: "1px dashed rgba(203,213,225,0.28)",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        color: "rgba(203,213,225,0.5)",
+                        fontSize: hudType("xs"),
+                        letterSpacing: "0.12em",
+                        textTransform: "uppercase",
+                    }, children: "Empty slot" }), _jsx("span", { style: { fontSize: hudType("md"), fontWeight: 700 }, children: "New game" }), _jsxs("span", { style: { fontSize: hudType("xs"), color: "rgba(203,213,225,0.6)" }, children: ["Slot ", slot.id] })] }));
+    }
+    return (_jsxs("div", { "data-save-slot-card": "", "data-save-slot-id": slot.id, "data-recent": recent ? "" : undefined, className: className, style: {
+            ...cardSurface,
+            boxShadow: recent
+                ? "inset 0 0 0 1px var(--jg-accent, #7dd3fc), 0 0 0 1px rgba(125,211,252,0.35), 0 18px 40px -18px rgba(0,0,0,0.95)"
+                : cardSurface.boxShadow,
+            ...style,
+        }, children: [_jsxs("div", { "data-save-slot-thumb": "", style: {
+                    position: "relative",
+                    width: "100%",
+                    aspectRatio: "16 / 9",
+                    borderRadius: 8,
+                    overflow: "hidden",
+                    background: "radial-gradient(120% 120% at 30% 20%, rgba(125,211,252,0.22), rgba(8,12,18,0.9))",
+                }, children: [thumb === null ? (_jsx("span", { style: {
+                            position: "absolute",
+                            inset: 0,
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            fontSize: hudType("xs"),
+                            letterSpacing: "0.12em",
+                            textTransform: "uppercase",
+                            color: "rgba(203,213,225,0.45)",
+                        }, children: "No capture" })) : (_jsx("img", { "data-save-slot-thumb-img": "", src: thumb, alt: "", style: { width: "100%", height: "100%", objectFit: "cover", display: "block" } })), _jsx("span", { style: {
+                            position: "absolute",
+                            left: 0,
+                            right: 0,
+                            bottom: 0,
+                            height: "42%",
+                            background: "linear-gradient(180deg, transparent, rgba(4,7,11,0.92))",
+                        } }), _jsx("span", { "data-save-slot-name": "", style: {
+                            position: "absolute",
+                            left: 8,
+                            bottom: 5,
+                            fontFamily: hudFont.display,
+                            fontSize: hudType("lg"),
+                            fontWeight: 800,
+                            letterSpacing: "0.01em",
+                            textShadow: "0 2px 12px rgba(0,0,0,0.8)",
+                        }, children: slot.name ?? slot.id }), recent ? (_jsx("span", { "data-save-slot-recent": "", style: {
+                            position: "absolute",
+                            top: 6,
+                            right: 6,
+                            padding: "2px 7px",
+                            borderRadius: 999,
+                            background: "var(--jg-accent, #7dd3fc)",
+                            color: "#04121b",
+                            fontSize: 10,
+                            fontWeight: 800,
+                            letterSpacing: "0.09em",
+                            textTransform: "uppercase",
+                        }, children: "Latest" })) : null] }), _jsxs("div", { style: { display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 8 }, children: [_jsxs("span", { style: { fontSize: hudType("xs"), color: "rgba(203,213,225,0.66)", display: "flex", gap: 6, flexWrap: "wrap" }, children: [typeof character === "string" ? _jsx("span", { "data-save-slot-character": "", children: character }) : null, playtime === null ? null : _jsxs("span", { "data-save-slot-playtime": "", children: [playtime, " played"] })] }), slot.savedAt === undefined ? null : (_jsx("span", { "data-save-slot-saved-at": "", title: new Date(slot.savedAt).toLocaleString(), style: { fontSize: hudType("xs"), color: "var(--jg-accent, #7dd3fc)", fontWeight: 600, whiteSpace: "nowrap" }, children: relativeSavedAt(slot.savedAt, now()) }))] }), progress.length === 0 ? null : (_jsx("div", { style: { display: "flex", gap: 5, flexWrap: "wrap" }, children: progress.map(([key, value]) => (_jsxs("span", { "data-save-slot-chip": key, style: {
+                        padding: "2px 7px",
+                        borderRadius: 999,
+                        background: "rgba(148,163,184,0.14)",
+                        color: "rgba(226,235,245,0.82)",
+                        fontSize: 11,
+                        fontWeight: 600,
+                        whiteSpace: "nowrap",
+                    }, children: [_jsx("span", { style: { opacity: 0.6, textTransform: "uppercase", letterSpacing: "0.08em", fontSize: 10 }, children: key }), " ", value] }, key))) })), _jsxs("div", { style: { display: "flex", gap: 6, marginTop: "auto" }, children: [_jsx("button", { type: "button", "data-save-slot-load": "", onClick: () => onSelect?.(slot), style: {
+                            flex: 1,
+                            padding: "7px 10px",
+                            borderRadius: 8,
+                            border: "none",
+                            background: "var(--jg-accent, #7dd3fc)",
+                            color: "#04121b",
+                            fontSize: hudType("sm"),
+                            fontWeight: 800,
+                            letterSpacing: "0.04em",
+                            textTransform: "uppercase",
+                            cursor: "pointer",
+                        }, children: loadLabel ?? "Load" }), onDelete === undefined ? null : confirming ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", "data-save-slot-confirm-delete": "", onClick: () => {
+                                    setConfirming(false);
+                                    onDelete(slot);
+                                }, style: {
+                                    padding: "7px 10px",
+                                    borderRadius: 8,
+                                    border: "1px solid var(--jg-danger, #e5484d)",
+                                    background: "rgba(229,72,77,0.2)",
+                                    color: "#ffd7d8",
+                                    fontSize: hudType("sm"),
+                                    fontWeight: 800,
+                                    cursor: "pointer",
+                                }, children: "Delete" }), _jsx("button", { type: "button", "data-save-slot-cancel-delete": "", onClick: () => setConfirming(false), style: {
+                                    padding: "7px 10px",
+                                    borderRadius: 8,
+                                    border: "1px solid rgba(148,163,184,0.3)",
+                                    background: "transparent",
+                                    color: "rgba(226,235,245,0.8)",
+                                    fontSize: hudType("sm"),
+                                    fontWeight: 700,
+                                    cursor: "pointer",
+                                }, children: "Keep" })] })) : (_jsx("button", { type: "button", "data-save-slot-delete": "", "aria-label": `Delete ${slot.name ?? slot.id}`, onClick: (event) => {
+                            event.stopPropagation();
+                            setConfirming(true);
+                        }, style: {
+                            padding: "7px 10px",
+                            borderRadius: 8,
+                            border: "1px solid rgba(148,163,184,0.28)",
+                            background: "transparent",
+                            color: "rgba(226,235,245,0.72)",
+                            fontSize: hudType("sm"),
+                            fontWeight: 700,
+                            cursor: "pointer",
+                        }, children: "Delete" }))] })] }));
+}
+/**
+ * The slot grid for a {@link GameMenu} detail pane: Continue over the most recent save, then one card
+ * per slot. Arrow keys move between cards, Enter loads, and the grid scrolls inside its own pane
+ * rather than the page.
+ *
+ * @capability save-slots-pane slot grid pane for the game menu — Continue newest, per-slot cards, keyboard navigation
+ */
+export function SaveSlotsPane({ model, onContinue, onLoad, onNew, onDelete, heading = "Save slots", now = Date.now, columns = 2, className, style, }) {
+    const slots = useSaveSlots(model);
+    const recent = model.mostRecent();
+    const tracks = columns === "auto" ? 3 : columns;
+    const nav = useMenuNav({
+        ids: slots.map((slot) => slot.id),
+        columns: tracks,
+        wrap: false,
+        onConfirm: (id) => {
+            const slot = slots.find((candidate) => candidate.id === id);
+            if (slot === undefined)
+                return;
+            if (slot.empty)
+                onNew?.(slot);
+            else
+                onLoad?.(slot);
+        },
+    });
+    return (_jsxs("div", { "data-save-slots-pane": "", className: className, style: { display: "flex", flexDirection: "column", minHeight: 0, flex: 1, gap: hudSpace("md"), ...style }, children: [_jsxs("div", { style: { display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 12 }, children: [_jsx("div", { style: { fontFamily: hudFont.display, fontSize: hudType("xxl"), fontWeight: 800, letterSpacing: "0.01em" }, children: heading }), onContinue === undefined || recent === null ? null : (_jsxs("button", { type: "button", "data-save-slots-continue": "", onClick: () => onContinue(recent), style: {
+                            padding: "8px 16px",
+                            borderRadius: 999,
+                            border: "none",
+                            background: "var(--jg-accent, #7dd3fc)",
+                            color: "#04121b",
+                            fontSize: hudType("sm"),
+                            fontWeight: 800,
+                            letterSpacing: "0.06em",
+                            textTransform: "uppercase",
+                            cursor: "pointer",
+                            boxShadow: "0 10px 24px -12px rgba(125,211,252,0.8)",
+                        }, children: ["Continue ", recent.name ?? recent.id] }))] }), _jsx("div", { ...nav.containerProps, "data-save-slots-grid": "", style: {
+                    display: "grid",
+                    gridTemplateColumns: columns === "auto" ? "repeat(auto-fill, minmax(230px, 1fr))" : `repeat(${columns}, minmax(0, 1fr))`,
+                    gap: hudSpace("md"),
+                    minHeight: 0,
+                    overflowY: "auto",
+                    overscrollBehavior: "contain",
+                    scrollbarWidth: "none",
+                    paddingRight: 2,
+                    paddingBottom: 4,
+                }, children: slots.map((slot) => {
+                    const active = nav.activeId === slot.id;
+                    return (_jsx("div", { style: { minWidth: 0, outline: active ? "none" : undefined }, children: _jsx(SaveSlotCard, { slot: slot, now: now, recent: recent !== null && recent.id === slot.id, ...(onLoad === undefined && onNew === undefined
+                                ? {}
+                                : {
+                                    onSelect: (chosen) => {
+                                        if (chosen.empty)
+                                            onNew?.(chosen);
+                                        else
+                                            onLoad?.(chosen);
+                                    },
+                                }), ...(onDelete === undefined ? {} : { onDelete }), style: {
+                                height: "100%",
+                                ...(active
+                                    ? {
+                                        boxShadow: "inset 0 0 0 1px var(--jg-accent, #7dd3fc), 0 0 0 1px rgba(125,211,252,0.5), 0 18px 40px -18px rgba(0,0,0,0.95)",
+                                        transform: "translateY(-2px)",
+                                        transition: `transform ${hudDuration("fast")} ${hudEase("spring")}`,
+                                    }
+                                    : {}),
+                            } }) }, slot.id));
+                }) })] }));
+}
+/**
+ * The Continue detail pane: the save being continued, read big — captured thumbnail, character, time
+ * played, the game's progress summary, when it was saved, and the resume action.
+ *
+ * @capability continue-pane continue detail pane — the save being resumed with thumbnail, character, playtime and progress
+ */
+export function ContinuePane({ slot, onContinue, emptyMessage = "No run saved yet. Start a new game to begin one.", now = Date.now, className, style, }) {
+    if (slot === null) {
+        return (_jsxs("div", { "data-continue-pane": "", "data-empty": "", className: className, style: {
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center",
+                gap: 10,
+                minHeight: 0,
+                color: "rgba(226,235,245,0.62)",
+                fontFamily: hudFont.body,
+                ...style,
+            }, children: [_jsx("div", { style: { fontFamily: hudFont.display, fontSize: hudType("xxl"), fontWeight: 800, color: "rgba(226,235,245,0.8)" }, children: "Nothing to continue" }), _jsx("p", { style: { margin: 0, fontSize: hudType("md"), maxWidth: "42ch" }, children: emptyMessage })] }));
+    }
+    const thumb = thumbnailOf(slot);
+    const playtime = playtimeOf(slot);
+    const progress = progressEntries(slot);
+    return (_jsxs("div", { "data-continue-pane": "", "data-save-slot-id": slot.id, className: className, style: { display: "flex", flexDirection: "column", gap: hudSpace("md"), minHeight: 0, ...style }, children: [_jsxs("div", { style: {
+                    position: "relative",
+                    width: "min(100%, 560px)",
+                    aspectRatio: "16 / 9",
+                    borderRadius: 14,
+                    overflow: "hidden",
+                    boxShadow: "0 30px 70px -30px rgba(0,0,0,0.95), inset 0 0 0 1px rgba(255,255,255,0.12)",
+                    background: "radial-gradient(120% 120% at 28% 18%, rgba(125,211,252,0.25), rgba(6,10,16,0.92))",
+                }, children: [thumb === null ? (_jsx("span", { style: {
+                            position: "absolute",
+                            left: 14,
+                            bottom: 12,
+                            fontSize: hudType("xs"),
+                            letterSpacing: "0.16em",
+                            textTransform: "uppercase",
+                            color: "rgba(203,213,225,0.36)",
+                        }, children: "No capture yet" })) : (_jsx("img", { "data-continue-thumb": "", src: thumb, alt: "", style: { width: "100%", height: "100%", objectFit: "cover", display: "block" } })), _jsx("span", { style: {
+                            position: "absolute",
+                            inset: 0,
+                            background: "linear-gradient(180deg, transparent 40%, rgba(4,7,11,0.9))",
+                        } }), _jsxs("div", { style: { position: "absolute", left: 14, bottom: 10, right: 14 }, children: [_jsx("div", { style: { fontSize: hudType("xs"), letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--jg-accent, #7dd3fc)", fontWeight: 700 }, children: "Continue" }), _jsx("div", { "data-continue-name": "", style: { fontFamily: hudFont.display, fontSize: hudType("display"), fontWeight: 800, lineHeight: 1.05 }, children: slot.name ?? slot.id })] })] }), _jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: 8, alignItems: "center" }, children: [playtime === null ? null : (_jsxs("span", { "data-continue-playtime": "", style: {
+                            padding: "5px 11px",
+                            borderRadius: 999,
+                            background: "rgba(148,163,184,0.16)",
+                            fontSize: hudType("sm"),
+                            fontWeight: 700,
+                        }, children: [playtime, " played"] })), progress.map(([key, value]) => (_jsxs("span", { "data-continue-chip": key, style: {
+                            padding: "5px 11px",
+                            borderRadius: 999,
+                            background: "rgba(148,163,184,0.16)",
+                            fontSize: hudType("sm"),
+                            fontWeight: 600,
+                        }, children: [_jsx("span", { style: { opacity: 0.6, textTransform: "uppercase", letterSpacing: "0.08em", fontSize: 11 }, children: key }), " ", value] }, key))), slot.savedAt === undefined ? null : (_jsxs("span", { "data-continue-saved-at": "", style: { fontSize: hudType("sm"), color: "rgba(203,213,225,0.62)" }, children: ["Saved ", relativeSavedAt(slot.savedAt, now()), " \u00B7 ", new Date(slot.savedAt).toLocaleString()] }))] }), onContinue === undefined ? null : (_jsx("button", { type: "button", "data-continue-action": "", onClick: () => onContinue(slot), style: {
+                    alignSelf: "flex-start",
+                    padding: "11px 22px",
+                    borderRadius: 10,
+                    border: "none",
+                    background: "var(--jg-accent, #7dd3fc)",
+                    color: "#04121b",
+                    fontFamily: hudFont.display,
+                    fontSize: hudType("lg"),
+                    fontWeight: 800,
+                    letterSpacing: "0.05em",
+                    textTransform: "uppercase",
+                    cursor: "pointer",
+                    boxShadow: "0 18px 34px -18px rgba(125,211,252,0.9)",
+                }, children: "Resume" }))] }));
+}
+/**
+ * The New Game detail pane: a character name field, an optional palette and avatar choice, and the
+ * action that starts the run. The name field is a real form field, so menu key handling leaves typing
+ * alone (Enter inside the field starts the run).
+ *
+ * @capability new-character-pane character creation pane — name field, palette and avatar choice, start action
+ */
+export function NewCharacterPane({ name, onNameChange, palettes, paletteId, onPaletteChange, avatars, avatarId, onAvatarChange, onStart, heading = "New run", nameLabel = "Character name", namePlaceholder = "Name your character", maxLength = 24, startLabel = "Begin", className, style, }) {
+    const trimmed = name.trim();
+    const start = () => {
+        if (trimmed.length === 0)
+            return;
+        onStart({ name: trimmed, paletteId: paletteId ?? null, avatarId: avatarId ?? null });
+    };
+    return (_jsxs("div", { "data-new-character-pane": "", className: className, style: { display: "flex", flexDirection: "column", gap: hudSpace("md"), minHeight: 0, fontFamily: hudFont.body, ...style }, children: [_jsx("div", { style: { fontFamily: hudFont.display, fontSize: hudType("xxl"), fontWeight: 800 }, children: heading }), _jsxs("label", { style: { display: "flex", flexDirection: "column", gap: 6, maxWidth: 420 }, children: [_jsx("span", { style: { fontSize: hudType("xs"), letterSpacing: "0.16em", textTransform: "uppercase", color: "rgba(203,213,225,0.7)" }, children: nameLabel }), _jsx("input", { "data-new-character-name": "", value: name, maxLength: maxLength, placeholder: namePlaceholder, onChange: (event) => onNameChange(event.target.value), onKeyDown: (event) => {
+                            if (event.key === "Enter") {
+                                event.preventDefault();
+                                start();
+                            }
+                        }, style: {
+                            padding: "10px 12px",
+                            borderRadius: 10,
+                            border: "1px solid rgba(148,163,184,0.35)",
+                            background: "rgba(8,12,18,0.72)",
+                            color: "var(--jg-text, #f2f6fb)",
+                            fontFamily: hudFont.display,
+                            fontSize: hudType("xl"),
+                            fontWeight: 700,
+                            outline: "none",
+                            boxShadow: "inset 0 1px 0 rgba(255,255,255,0.06)",
+                        } })] }), avatars === undefined || avatars.length === 0 ? null : (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [_jsx("span", { style: { fontSize: hudType("xs"), letterSpacing: "0.16em", textTransform: "uppercase", color: "rgba(203,213,225,0.7)" }, children: "Avatar" }), _jsx("div", { "data-new-character-avatars": "", style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: avatars.map((avatar) => {
+                            const picked = avatar.id === avatarId;
+                            return (_jsx("button", { type: "button", "data-new-character-avatar": avatar.id, "aria-pressed": picked, onClick: () => onAvatarChange?.(avatar.id), style: {
+                                    width: 46,
+                                    height: 46,
+                                    borderRadius: 999,
+                                    border: picked ? "1px solid var(--jg-accent, #7dd3fc)" : "1px solid rgba(148,163,184,0.28)",
+                                    background: picked ? "rgba(125,211,252,0.2)" : "rgba(10,14,20,0.7)",
+                                    color: "var(--jg-text, #f2f6fb)",
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    fontFamily: hudFont.display,
+                                    fontSize: hudType("lg"),
+                                    fontWeight: 800,
+                                    cursor: "pointer",
+                                }, children: avatar.glyph ?? avatar.label.slice(0, 1).toUpperCase() }, avatar.id));
+                        }) })] })), palettes === undefined || palettes.length === 0 ? null : (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [_jsx("span", { style: { fontSize: hudType("xs"), letterSpacing: "0.16em", textTransform: "uppercase", color: "rgba(203,213,225,0.7)" }, children: "Palette" }), _jsx("div", { "data-new-character-palettes": "", style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: palettes.map((palette) => {
+                            const picked = palette.id === paletteId;
+                            return (_jsxs("button", { type: "button", "data-new-character-palette": palette.id, "aria-pressed": picked, onClick: () => onPaletteChange?.(palette.id), style: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: 7,
+                                    padding: "4px 10px 4px 4px",
+                                    borderRadius: 999,
+                                    border: picked ? "1px solid var(--jg-accent, #7dd3fc)" : "1px solid rgba(148,163,184,0.26)",
+                                    background: picked ? "rgba(125,211,252,0.14)" : "rgba(10,14,20,0.62)",
+                                    color: "rgba(226,235,245,0.86)",
+                                    fontSize: hudType("sm"),
+                                    fontWeight: 600,
+                                    cursor: "pointer",
+                                }, children: [_jsx("span", { style: { display: "flex" }, children: palette.colors.map((color, index) => (_jsx("span", { style: {
+                                                width: 14,
+                                                height: 14,
+                                                borderRadius: 999,
+                                                background: color,
+                                                marginLeft: index === 0 ? 0 : -4,
+                                                boxShadow: "0 0 0 1px rgba(0,0,0,0.5)",
+                                            } }, index))) }), palette.label] }, palette.id));
+                        }) })] })), _jsx("button", { type: "button", "data-new-character-start": "", disabled: trimmed.length === 0, onClick: start, style: {
+                    alignSelf: "flex-start",
+                    padding: "11px 22px",
+                    borderRadius: 10,
+                    border: "none",
+                    background: trimmed.length === 0 ? "rgba(148,163,184,0.24)" : "var(--jg-accent, #7dd3fc)",
+                    color: trimmed.length === 0 ? "rgba(226,235,245,0.5)" : "#04121b",
+                    fontFamily: hudFont.display,
+                    fontSize: hudType("lg"),
+                    fontWeight: 800,
+                    letterSpacing: "0.05em",
+                    textTransform: "uppercase",
+                    cursor: trimmed.length === 0 ? "not-allowed" : "pointer",
+                    boxShadow: trimmed.length === 0 ? "none" : "0 18px 34px -18px rgba(125,211,252,0.9)",
+                }, children: startLabel })] }));
+}
+/**
+ * The Credits detail pane: a scroller that belongs to the pane. Wheel, arrows, PageUp/PageDown, Home
+ * and End scroll it, the native scrollbar is hidden, and the page behind never moves.
+ *
+ * @capability credits-pane credits detail pane — sections scrolled inside the pane
+ */
+export function CreditsPane({ sections, heading = "Credits", notice, className, style }) {
+    return (_jsxs("div", { "data-credits-pane": "", className: className, style: { display: "flex", flexDirection: "column", gap: hudSpace("sm"), minHeight: 0, flex: 1, fontFamily: hudFont.body, ...style }, children: [_jsx("div", { style: { fontFamily: hudFont.display, fontSize: hudType("xxl"), fontWeight: 800 }, children: heading }), _jsxs("div", { "data-credits-scroller": "", tabIndex: 0, onKeyDown: (event) => {
+                    const target = event.currentTarget;
+                    const step = target.clientHeight * 0.8;
+                    const moves = {
+                        ArrowDown: 48,
+                        ArrowUp: -48,
+                        PageDown: step,
+                        PageUp: -step,
+                    };
+                    if (event.key === "Home") {
+                        event.preventDefault();
+                        target.scrollTop = 0;
+                        return;
+                    }
+                    if (event.key === "End") {
+                        event.preventDefault();
+                        target.scrollTop = target.scrollHeight;
+                        return;
+                    }
+                    const delta = moves[event.key];
+                    if (delta === undefined)
+                        return;
+                    event.preventDefault();
+                    event.stopPropagation();
+                    target.scrollTop += delta;
+                }, style: {
+                    minHeight: 0,
+                    overflowY: "auto",
+                    overscrollBehavior: "contain",
+                    scrollbarWidth: "none",
+                    paddingRight: 6,
+                    outline: "none",
+                    maskImage: "linear-gradient(180deg, transparent 0, #000 16px, #000 calc(100% - 22px), transparent 100%)",
+                    WebkitMaskImage: "linear-gradient(180deg, transparent 0, #000 16px, #000 calc(100% - 22px), transparent 100%)",
+                }, children: [sections.map((section) => (_jsxs("section", { "data-credits-section": "", style: { marginBottom: hudSpace("lg") }, children: [_jsx("div", { style: {
+                                    fontSize: hudType("xs"),
+                                    letterSpacing: "0.22em",
+                                    textTransform: "uppercase",
+                                    color: "var(--jg-accent, #7dd3fc)",
+                                    fontWeight: 700,
+                                    marginBottom: 6,
+                                }, children: section.heading }), section.entries.map((entry) => (_jsxs("div", { style: { display: "flex", justifyContent: "space-between", gap: 16, padding: "3px 0", fontSize: hudType("md") }, children: [_jsx("span", { style: { fontWeight: 600 }, children: entry.label }), entry.detail === undefined ? null : (_jsx("span", { style: { color: "rgba(203,213,225,0.62)", textAlign: "right" }, children: entry.detail }))] }, `${section.heading}:${entry.label}`)))] }, section.heading))), notice === undefined ? null : (_jsx("p", { style: { margin: 0, fontSize: hudType("xs"), color: "rgba(203,213,225,0.5)", maxWidth: "60ch" }, children: notice }))] })] }));
+}

package/dist/gameMenuSound.d.ts

@@ -0,0 +1,41 @@
+/**
+ * The short, quiet click a menu makes when the selection moves or is confirmed. Generated with an
+ * oscillator instead of shipped as an audio file, so a game gets menu feedback without authoring a
+ * sound and the whole thing unmounts with the screen.
+ */
+/** Which feedback sound to play. */
+export type GameMenuSoundKind = "move" | "confirm" | "back";
+/** The sound player's readable state: on/off, gain, and whether audio is actually running. */
+export interface GameMenuSoundState {
+    /** Whether the player will make sound. */
+    enabled: boolean;
+    /** Peak gain per tick. */
+    volume: number;
+    /** Whether an audio context exists and is running - what a test or a settings preview reads. */
+    ready: boolean;
+}
+/** A menu sound player. Give it to `GameMenu`'s `sound` prop, or call its methods from your own menu. */
+export interface GameMenuSound {
+    /** Play one tick. A no-op when audio is unavailable or the browser blocked it. */
+    play(kind: GameMenuSoundKind): void;
+    /** Release the audio context. Safe to call twice. */
+    dispose(): void;
+    /** Read the player state without starting audio. */
+    state(): GameMenuSoundState;
+    /** Apply a saved player state - a settings toggle muting the menu without rebuilding it. */
+    restore(next: GameMenuSoundState): void;
+}
+/** How {@link createGameMenuSound} is tuned. */
+export interface GameMenuSoundConfig {
+    /** Turn sound off entirely. Default true. */
+    enabled?: boolean;
+    /** Peak gain per tick. Default 0.045 — audible, never a jingle. */
+    volume?: number;
+}
+/**
+ * A tiny WebAudio click generator for menu feedback: one oscillator burst per tick, created on the
+ * first play (so a browser autoplay policy does not log an error at mount) and reused after.
+ *
+ * @capability menu-sound generated click for menu move/confirm/back, no audio asset
+ */
+export declare function createGameMenuSound(config?: GameMenuSoundConfig): GameMenuSound;

package/dist/gameMenuSound.js

@@ -0,0 +1,82 @@
+/**
+ * The short, quiet click a menu makes when the selection moves or is confirmed. Generated with an
+ * oscillator instead of shipped as an audio file, so a game gets menu feedback without authoring a
+ * sound and the whole thing unmounts with the screen.
+ */
+const TONES = {
+    move: { frequency: 880, ms: 26, gain: 1 },
+    confirm: { frequency: 1320, ms: 52, gain: 1.25 },
+    back: { frequency: 587, ms: 40, gain: 0.9 },
+};
+/**
+ * A tiny WebAudio click generator for menu feedback: one oscillator burst per tick, created on the
+ * first play (so a browser autoplay policy does not log an error at mount) and reused after.
+ *
+ * @capability menu-sound generated click for menu move/confirm/back, no audio asset
+ */
+export function createGameMenuSound(config = {}) {
+    let enabled = config.enabled ?? true;
+    let volume = config.volume ?? 0.045;
+    let context = null;
+    let broken = false;
+    function ensure() {
+        if (!enabled || broken)
+            return null;
+        if (context !== null)
+            return context;
+        const Ctor = typeof globalThis.AudioContext === "function"
+            ? globalThis.AudioContext
+            : globalThis.webkitAudioContext;
+        if (Ctor === undefined) {
+            broken = true;
+            return null;
+        }
+        try {
+            context = new Ctor();
+            return context;
+        }
+        catch {
+            broken = true;
+            return null;
+        }
+    }
+    return {
+        play(kind) {
+            const audio = ensure();
+            if (audio === null)
+                return;
+            if (audio.state === "suspended")
+                void audio.resume().catch(() => { });
+            const tone = TONES[kind];
+            const start = audio.currentTime;
+            const end = start + tone.ms / 1000;
+            const oscillator = audio.createOscillator();
+            const gain = audio.createGain();
+            oscillator.type = "triangle";
+            oscillator.frequency.setValueAtTime(tone.frequency, start);
+            oscillator.frequency.exponentialRampToValueAtTime(tone.frequency * 1.18, end);
+            gain.gain.setValueAtTime(0.0001, start);
+            gain.gain.exponentialRampToValueAtTime(volume * tone.gain, start + 0.006);
+            gain.gain.exponentialRampToValueAtTime(0.0001, end);
+            oscillator.connect(gain);
+            gain.connect(audio.destination);
+            oscillator.start(start);
+            oscillator.stop(end + 0.01);
+        },
+        state() {
+            return { enabled, volume, ready: context !== null && context.state === "running" };
+        },
+        restore(next) {
+            enabled = next.enabled;
+            volume = next.volume;
+            if (!enabled)
+                this.dispose();
+        },
+        dispose() {
+            const audio = context;
+            context = null;
+            if (audio !== null)
+                void audio.close().catch(() => { });
+        },
+    };
+}

package/dist/hudTheme.js

@@ -105,6 +105,10 @@ export function hudThemeVars(theme) {
         "--jg-frame-bg": frame.bg,
         "--jg-frame-border": frame.border,
         "--jg-frame-radius": frame.radius,
+        // The game menu's two design tokens: a logo sized off the display step and card corners that
+        // follow the frame radius, so a menu inherits the theme it is rendered under.
+        "--jg-menu-logo-size": "clamp(30px, 4.6vw, 66px)",
+        "--jg-menu-card-radius": frame.radius,
         "--jg-frame-glow": frame.glow,
         "--jg-slot-bg": slot.bg,
         "--jg-slot-border": slot.border,

package/dist/index.d.ts

@@ -82,3 +82,6 @@ export * from "./saveSlots.js";
 export * from "./cameraShake.js";
 export * from "./dialogBehavior.js";
 export * from "./scrollRail.js";
+export * from "./gameMenu.js";
+export * from "./gameMenuSaves.js";
+export * from "./gameMenuSound.js";

package/dist/index.js

@@ -82,3 +82,6 @@ export * from "./saveSlots.js";
 export * from "./cameraShake.js";
 export * from "./dialogBehavior.js";
 export * from "./scrollRail.js";
+export * from "./gameMenu.js";
+export * from "./gameMenuSaves.js";
+export * from "./gameMenuSound.js";

package/dist/saveThumbnail.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Turning a rendered frame into the thumbnail a save card shows. Saves keep a small JPEG/WebP data
+ * URL (a couple of KB), not a full-resolution PNG, so a slot index still fits in local storage.
+ */
+/** How {@link shrinkCapture} sizes and encodes a capture. */
+export interface SaveThumbnailOptions {
+    /** Output width in pixels. Default 320. */
+    width?: number;
+    /** Output height in pixels. Default 180 (16:9). */
+    height?: number;
+    /** Encoding quality, 0–1. Default 0.6. */
+    quality?: number;
+    /** Output format. Default `"image/jpeg"` — smallest for a photo-like frame. */
+    type?: "image/jpeg" | "image/webp";
+}
+/**
+ * Downscale a captured frame (a data URL from `captureCanvas`) to a save-card thumbnail. Resolves to
+ * the thumbnail data URL, or `null` when the capture could not be decoded (a blank or tainted frame).
+ *
+ * @capability shrink-capture downscale a captured frame to a save-card thumbnail data URL
+ */
+export declare function shrinkCapture(capture: string | null, options?: SaveThumbnailOptions): Promise<string | null>;