@jgengine/react 0.37.0 → 0.38.0

package/dist/gameMenuSaves.d.ts

@@ -0,0 +1,159 @@
+import { type CSSProperties, type ReactNode } from "react";
+import type { CreditsSection } from "@jgengine/core/game/credits";
+import type { SaveSlotMeta, SaveSlots } from "@jgengine/core/game/saveSlots";
+/**
+ * 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 declare 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 declare const SAVE_SLOT_CHARACTER_KEY = "character";
+/** Props for {@link SaveSlotCard}. */
+export interface SaveSlotCardProps {
+    /** The slot to render. An empty slot renders as an empty slot, not a hidden row. */
+    slot: SaveSlotMeta;
+    /** Clock (ms) for the relative "saved" line. */
+    now?: () => number;
+    /** Highlight this slot as the one Continue would resume. */
+    recent?: boolean;
+    /** Load this filled slot, or start a new game in this empty slot. */
+    onSelect?: (slot: SaveSlotMeta) => void;
+    /** Delete this slot. Only called after the player confirms. */
+    onDelete?: (slot: SaveSlotMeta) => void;
+    /** Label of the primary action on a filled card. Default `"Load"`. */
+    loadLabel?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * 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 declare function SaveSlotCard({ slot, now, recent, onSelect, onDelete, loadLabel, className, style, }: SaveSlotCardProps): ReactNode;
+/** Props for {@link SaveSlotsPane}. */
+export interface SaveSlotsPaneProps {
+    /** The save-slot index to render. */
+    model: SaveSlots;
+    /** Resume the most recent save. Continue targets `model.mostRecent()`. */
+    onContinue?: (slot: SaveSlotMeta) => void;
+    /** Load a chosen filled slot. */
+    onLoad?: (slot: SaveSlotMeta) => void;
+    /** Start a new game in a chosen empty slot. */
+    onNew?: (slot: SaveSlotMeta) => void;
+    /** Delete a confirmed slot. */
+    onDelete?: (slot: SaveSlotMeta) => void;
+    /** Heading over the grid. Default `"Save slots"`. */
+    heading?: ReactNode;
+    /** Clock (ms) for relative times. */
+    now?: () => number;
+    /** Cards per row, or `"auto"` to fit as many as the pane allows (min 230px each). Default 2. */
+    columns?: number | "auto";
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * 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 declare function SaveSlotsPane({ model, onContinue, onLoad, onNew, onDelete, heading, now, columns, className, style, }: SaveSlotsPaneProps): ReactNode;
+/** Props for {@link ContinuePane}. */
+export interface ContinuePaneProps {
+    /** The save Continue would resume. `null` when nothing is saved yet. */
+    slot: SaveSlotMeta | null;
+    /** Resume it. */
+    onContinue?: (slot: SaveSlotMeta) => void;
+    /** Shown instead of the card when `slot` is null. */
+    emptyMessage?: ReactNode;
+    /** Clock (ms) for relative times. */
+    now?: () => number;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * 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 declare function ContinuePane({ slot, onContinue, emptyMessage, now, className, style, }: ContinuePaneProps): ReactNode;
+/** One avatar/portrait choice in {@link NewCharacterPane}. */
+export interface GameMenuAvatar {
+    id: string;
+    label: string;
+    /** A glyph or small image. Falls back to the label's first letter. */
+    glyph?: ReactNode;
+}
+/** One palette choice in {@link NewCharacterPane}. */
+export interface GameMenuPalette {
+    id: string;
+    label: string;
+    /** Two or more CSS colours; rendered as a swatch chip. */
+    colors: readonly string[];
+}
+/** What {@link NewCharacterPane} reports when a run starts. */
+export interface NewCharacterChoice {
+    name: string;
+    paletteId: string | null;
+    avatarId: string | null;
+}
+/** Props for {@link NewCharacterPane}. */
+export interface NewCharacterPaneProps {
+    /** Current name value. */
+    name: string;
+    onNameChange: (name: string) => void;
+    /** Palette choices the game offers. Omit to hide the row. */
+    palettes?: readonly GameMenuPalette[];
+    paletteId?: string | null;
+    onPaletteChange?: (id: string) => void;
+    /** Avatar choices the game offers. Omit to hide the row. */
+    avatars?: readonly GameMenuAvatar[];
+    avatarId?: string | null;
+    onAvatarChange?: (id: string) => void;
+    /** Start the run with the current choice. */
+    onStart: (choice: NewCharacterChoice) => void;
+    /** Heading. Default `"New run"`. */
+    heading?: ReactNode;
+    /** Name field label. Default `"Character name"`. */
+    nameLabel?: string;
+    /** Name placeholder. */
+    namePlaceholder?: string;
+    /** Longest accepted name. Default 24. */
+    maxLength?: number;
+    /** Start button label. Default `"Begin"`. */
+    startLabel?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * 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 declare function NewCharacterPane({ name, onNameChange, palettes, paletteId, onPaletteChange, avatars, avatarId, onAvatarChange, onStart, heading, nameLabel, namePlaceholder, maxLength, startLabel, className, style, }: NewCharacterPaneProps): ReactNode;
+/** Props for {@link CreditsPane}. */
+export interface CreditsPaneProps {
+    /** Sections, in order. */
+    sections: readonly CreditsSection[];
+    /** Heading over the scroller. Default `"Credits"`. */
+    heading?: ReactNode;
+    /** Closing line, usually the asset/attribution notice. */
+    notice?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * 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 declare function CreditsPane({ sections, heading, notice, className, style }: CreditsPaneProps): ReactNode;

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 }))] })] }));
+}