@jgengine/react 0.36.0 → 0.38.0

package/dist/gameMenu.js

@@ -0,0 +1,390 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, } from "react";
+import { useReducedMotion } from "./accessibility.js";
+import { createGameMenuSound } from "./gameMenuSound.js";
+import { hudDuration, hudEase, hudFont, hudType } from "./hudTokens.js";
+import { useMenuNav } from "./menuNav.js";
+let scrollLocks = 0;
+let savedDocumentOverflow = "";
+let savedBodyOverflow = "";
+function lockDocumentScroll() {
+    if (typeof document === "undefined")
+        return () => { };
+    if (scrollLocks === 0) {
+        savedDocumentOverflow = document.documentElement.style.overflow;
+        savedBodyOverflow = document.body.style.overflow;
+        document.documentElement.style.overflow = "hidden";
+        document.body.style.overflow = "hidden";
+    }
+    scrollLocks += 1;
+    let released = false;
+    return () => {
+        if (released)
+            return;
+        released = true;
+        scrollLocks -= 1;
+        if (scrollLocks > 0 || typeof document === "undefined")
+            return;
+        document.documentElement.style.overflow = savedDocumentOverflow;
+        document.body.style.overflow = savedBodyOverflow;
+    };
+}
+/**
+ * Lock the page scroll while `active`, so a fixed full-bleed surface is exactly the viewport and the
+ * document behind it never gains a scrollbar. Nested and repeated locks are counted, and the previous
+ * inline styles are restored when the last one releases.
+ *
+ * @capability use-viewport-scroll-lock count-aware document scroll lock for full-bleed surfaces
+ */
+export function useViewportScrollLock(active) {
+    useEffect(() => {
+        if (!active)
+            return;
+        return lockDocumentScroll();
+    }, [active]);
+}
+const ROW_HEIGHT = { title: 58, pause: 46 };
+const VIGNETTE = "radial-gradient(125% 110% at 26% 42%, rgba(4,7,12,0.02) 0%, rgba(4,7,12,0.34) 66%, rgba(2,4,7,0.8) 100%)";
+const TINT = "linear-gradient(100deg, rgba(6,10,16,0.9) 0%, rgba(6,10,16,0.74) 34%, rgba(6,10,16,0.34) 56%, rgba(6,10,16,0.08) 78%, rgba(6,10,16,0.28) 100%)";
+function logoNode(logo, title, reduced) {
+    if (logo === undefined || logo === null || logo === false)
+        return null;
+    if (typeof logo === "object" && !Array.isArray(logo) && !("type" in logo)) {
+        const spec = logo;
+        const size = "var(--jg-menu-logo-size, clamp(30px, 4.6vw, 66px))";
+        if (spec.image !== undefined) {
+            return (_jsx("img", { "data-jg-game-menu-logo": "", src: spec.image, alt: spec.alt ?? spec.title ?? title ?? "", style: {
+                    display: "block",
+                    width: "auto",
+                    height: `calc(${size} * 1.15)`,
+                    maxWidth: "min(420px, 46vw)",
+                    objectFit: "contain",
+                    filter: "drop-shadow(0 8px 30px rgba(0,0,0,0.6))",
+                } }));
+        }
+        return (_jsx("div", { "data-jg-game-menu-logo": "", style: {
+                fontFamily: hudFont.display,
+                fontSize: size,
+                fontWeight: 800,
+                lineHeight: 0.98,
+                letterSpacing: "-0.02em",
+                color: "var(--jg-text, #f7f9fc)",
+                textShadow: "0 2px 24px rgba(0,0,0,0.65), 0 0 60px var(--jg-accent-glow, rgba(88,196,255,0.25))",
+                animation: reduced ? undefined : `jg-menu-rise 620ms ${hudEase("easeOut")} both`,
+            }, children: spec.text ?? spec.title ?? title }));
+    }
+    return (_jsx("div", { "data-jg-game-menu-logo": "", style: {
+            fontFamily: hudFont.display,
+            fontSize: "var(--jg-menu-logo-size, clamp(30px, 4.6vw, 66px))",
+            fontWeight: 800,
+            lineHeight: 0.98,
+            letterSpacing: "-0.02em",
+            color: "var(--jg-text, #f7f9fc)",
+            textShadow: "0 2px 24px rgba(0,0,0,0.65), 0 0 60px var(--jg-accent-glow, rgba(88,196,255,0.25))",
+            animation: reduced ? undefined : `jg-menu-rise 620ms ${hudEase("easeOut")} both`,
+        }, children: logo }));
+}
+/**
+ * A game front-end menu: full-bleed over a living background, with a logo, an animated primary list
+ * and a detail pane that follows the highlighted verb. One system covers the main menu and the pause
+ * menu (`variant="pause"`), keyboard and gamepad navigation come from `useMenuNav`, confirmation
+ * ticks are generated (no audio asset), and the document never scrolls while it is open.
+ *
+ * The engine owns the surface, layout, motion, focus order, sound and the save/character panes it
+ * exports next to this component. The game owns the art, the logo, the wording, the verbs and what
+ * each detail pane shows.
+ *
+ * @capability game-menu full-bleed game menu — living background, token-sized logo, animated navigable verbs, detail pane, selection sound, pause variant, no page scrollbar
+ */
+export function GameMenu({ items, initialId, onSelect, onBack, onHighlight, detail, logo, eyebrow, tagline, background, art, secondary, footer, controlHint, sound = true, variant = "title", open = true, reducedMotion, label, className, style, detailClassName, detailStyle, }) {
+    const prefersReduced = useReducedMotion();
+    const reduced = reducedMotion === undefined ? prefersReduced : reducedMotion || prefersReduced;
+    useViewportScrollLock(open);
+    const allItems = useMemo(() => [...items, ...(secondary ?? [])], [items, secondary]);
+    const disabled = useMemo(() => allItems.filter((item) => item.disabled === true).map((item) => item.id), [allItems]);
+    const soundRef = useRef(null);
+    useEffect(() => {
+        if (sound === false)
+            return;
+        const player = typeof sound === "object" ? sound : createGameMenuSound();
+        soundRef.current = player;
+        return () => {
+            if (typeof sound !== "object")
+                player.dispose();
+            soundRef.current = null;
+        };
+    }, [sound]);
+    const onHighlightRef = useRef(onHighlight);
+    onHighlightRef.current = onHighlight;
+    const nav = useMenuNav({
+        ids: allItems.map((item) => item.id),
+        disabled,
+        enabled: open,
+        ...(initialId === undefined ? {} : { initialId }),
+        onConfirm: (id) => {
+            const item = allItems.find((candidate) => candidate.id === id);
+            if (item === undefined || item.disabled === true)
+                return;
+            soundRef.current?.play("confirm");
+            onSelect(id);
+        },
+        ...(onBack === undefined
+            ? {}
+            : {
+                onBack: () => {
+                    soundRef.current?.play("back");
+                    onBack();
+                },
+            }),
+    });
+    // A cursor that happens to rest over a row when the menu opens must not select it: hover only
+    // counts once the pointer has actually moved in this session.
+    const pointerMoved = useRef(false);
+    useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        const mark = () => { pointerMoved.current = true; };
+        window.addEventListener("pointermove", mark, { passive: true });
+        return () => window.removeEventListener("pointermove", mark);
+    }, []);
+    const hoverProps = (id) => {
+        const props = nav.itemProps(id);
+        return { ...props, onPointerEnter: () => { if (pointerMoved.current)
+                props.onPointerEnter(); } };
+    };
+    const activeId = nav.activeId;
+    const activeIndex = allItems.findIndex((item) => item.id === activeId);
+    const mounted = useRef(false);
+    const appliedInitial = useRef(initialId);
+    // `initialId` is the verb the game wants focused (Continue when a save exists). When that changes
+    // after mount — a save finished loading, a screen swapped — move the selection rather than
+    // remounting the whole menu, which would replay the entry animation and drop focus.
+    useEffect(() => {
+        if (initialId === undefined || appliedInitial.current === initialId || disabled.includes(initialId))
+            return;
+        appliedInitial.current = initialId;
+        nav.setActive(initialId);
+    }, [initialId, disabled, nav.activeId, nav.setActive]);
+    // The first pass can run before item refs exist, so focus the selection once after paint when the
+    // menu owns an idle document. Arrow keys then land on the menu itself instead of the page.
+    useEffect(() => {
+        if (!open)
+            return;
+        if (typeof requestAnimationFrame !== "function")
+            return;
+        const frame = requestAnimationFrame(() => {
+            const active = typeof document === "undefined" ? null : document.activeElement;
+            const insideMenu = active !== null && typeof active.closest === "function" && active.closest("[data-jg-game-menu]") !== null;
+            if (insideMenu && active !== document.body)
+                return;
+            const target = document.querySelector("[data-jg-game-menu] [data-jg-menu-item][aria-current='true']");
+            target?.focus({ preventScroll: true });
+        });
+        return () => cancelAnimationFrame(frame);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open, activeId]);
+    useEffect(() => {
+        if (!mounted.current) {
+            mounted.current = true;
+        }
+        else if (activeId !== null) {
+            soundRef.current?.play("move");
+        }
+        onHighlightRef.current?.(activeId);
+    }, [activeId]);
+    if (!open)
+        return null;
+    const isPause = variant === "pause";
+    const rowHeight = ROW_HEIGHT[variant];
+    const primaryCount = items.length;
+    const detailNode = typeof detail === "function" ? detail(activeId) : detail;
+    const title = typeof logo === "object" && logo !== null && !Array.isArray(logo) ? logo.title : undefined;
+    const surfaceLabel = label ?? (isPause ? "Paused" : "Main menu");
+    return (_jsxs("div", { "data-jg-game-menu": "", "data-variant": variant, "data-open": "", role: "dialog", "aria-modal": "true", "aria-label": surfaceLabel, className: className, style: {
+            position: "fixed",
+            inset: 0,
+            width: "100vw",
+            height: "100dvh",
+            maxWidth: "100vw",
+            maxHeight: "100dvh",
+            overflow: "hidden",
+            overscrollBehavior: "contain",
+            display: "grid",
+            gridTemplateRows: "auto minmax(0, 1fr) auto",
+            gridTemplateColumns: "minmax(232px, clamp(232px, 27vw, 360px)) minmax(0, 1fr)",
+            columnGap: "clamp(16px, 3vw, 56px)",
+            padding: isPause
+                ? "clamp(16px, 2.4vw, 34px) clamp(20px, 3.2vw, 56px)"
+                : "clamp(18px, 3.2vw, 56px) clamp(20px, 3.6vw, 64px)",
+            boxSizing: "border-box",
+            color: "var(--jg-text, #f5f7fa)",
+            fontFamily: hudFont.body,
+            animation: reduced ? undefined : `jg-fade-in ${hudDuration("slow")} ${hudEase("easeOut")} both`,
+            ...style,
+        }, children: [_jsxs("div", { "data-jg-game-menu-backdrop": "", "aria-hidden": "true", style: { position: "absolute", inset: 0, overflow: "hidden", pointerEvents: "none", zIndex: 0 }, children: [background === undefined ? null : (_jsx("div", { "data-jg-game-menu-live": "", style: { position: "absolute", inset: 0 }, children: background })), art === undefined ? null : (_jsx("div", { "data-jg-game-menu-art": "", style: {
+                            position: "absolute",
+                            inset: "-8%",
+                            backgroundImage: `url(${art})`,
+                            backgroundSize: "cover",
+                            backgroundPosition: "center",
+                            transform: "scale(1.06)",
+                            animation: reduced ? undefined : "jg-menu-drift 46s ease-in-out infinite alternate",
+                            willChange: "transform",
+                        } })), _jsx("div", { "data-jg-game-menu-tint": "", style: { position: "absolute", inset: 0, background: TINT, opacity: isPause ? 1 : 0.94 } }), _jsx("div", { "data-jg-game-menu-vignette": "", style: { position: "absolute", inset: 0, background: VIGNETTE } }), _jsx("div", { "data-jg-game-menu-grain": "", style: {
+                            position: "absolute",
+                            inset: 0,
+                            opacity: 0.06,
+                            backgroundImage: "repeating-linear-gradient(0deg, rgba(255,255,255,0.5) 0px, rgba(255,255,255,0.5) 1px, transparent 1px, transparent 3px)",
+                            mixBlendMode: "overlay",
+                        } })] }), _jsxs("header", { "data-jg-game-menu-header": "", style: {
+                    position: "relative",
+                    zIndex: 1,
+                    gridColumn: "1 / -1",
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: 6,
+                    minWidth: 0,
+                }, children: [eyebrow === undefined ? null : (_jsx("div", { "data-jg-game-menu-eyebrow": "", style: {
+                            fontSize: hudType("xs"),
+                            letterSpacing: "0.3em",
+                            textTransform: "uppercase",
+                            color: "var(--jg-accent, #7dd3fc)",
+                            fontWeight: 700,
+                        }, children: eyebrow })), logoNode(logo, title, reduced), tagline === undefined ? null : (_jsx("div", { "data-jg-game-menu-tagline": "", style: {
+                            fontSize: hudType(isPause ? "sm" : "md"),
+                            color: "var(--jg-text-dim, rgba(226,235,245,0.68))",
+                            maxWidth: "46ch",
+                        }, children: tagline }))] }), _jsx("div", { "data-jg-game-menu-nav-wrap": "", style: {
+                    position: "relative",
+                    zIndex: 1,
+                    display: "flex",
+                    flexDirection: "column",
+                    justifyContent: isPause ? "center" : "flex-start",
+                    minHeight: 0,
+                    paddingTop: isPause ? 0 : "clamp(8px, 2vh, 28px)",
+                }, children: _jsxs("nav", { "data-jg-game-menu-items": "", ...nav.containerProps, style: { position: "relative", display: "flex", flexDirection: "column", gap: 2 }, onKeyDown: (event) => {
+                        nav.containerProps.onKeyDown(event);
+                        if (event.key === "ArrowDown" || event.key === "ArrowUp")
+                            event.stopPropagation();
+                    }, children: [_jsx("div", { "data-jg-game-menu-rail": "", "aria-hidden": "true", style: {
+                                position: "absolute",
+                                left: 0,
+                                right: 8,
+                                top: 0,
+                                height: rowHeight,
+                                borderRadius: 10,
+                                opacity: activeIndex < 0 ? 0 : 1,
+                                transform: `translate3d(0, ${Math.max(0, activeIndex) * (rowHeight + 2)}px, 0) scale(${activeIndex >= primaryCount ? 0.98 : 1})`,
+                                transition: reduced
+                                    ? undefined
+                                    : `transform ${hudDuration("base")} ${hudEase("spring")}, opacity ${hudDuration("fast")} ${hudEase("easeOut")}`,
+                                background: "linear-gradient(90deg, var(--jg-accent-glow, rgba(94,196,255,0.22)) 0%, rgba(255,255,255,0.05) 62%, transparent 100%)",
+                                boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.14), 0 10px 30px -14px rgba(0,0,0,0.9)",
+                                borderLeft: "2px solid var(--jg-accent, #7dd3fc)",
+                            } }), items.map((item) => {
+                            const active = item.id === activeId;
+                            return (_jsxs("button", { type: "button", ...hoverProps(item.id), "data-jg-game-menu-item": item.id, "data-active": active ? "" : undefined, disabled: item.disabled === true, onClick: () => {
+                                    if (item.disabled === true)
+                                        return;
+                                    soundRef.current?.play("confirm");
+                                    onSelect(item.id);
+                                }, style: {
+                                    position: "relative",
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "space-between",
+                                    gap: 10,
+                                    height: rowHeight,
+                                    paddingLeft: active ? 18 : 12,
+                                    paddingRight: 12,
+                                    border: "none",
+                                    background: "transparent",
+                                    color: item.disabled === true ? "rgba(226,235,245,0.32)" : active ? "var(--jg-text, #ffffff)" : "rgba(226,235,245,0.78)",
+                                    fontFamily: hudFont.display,
+                                    fontSize: hudType(isPause ? "md" : "xl"),
+                                    fontWeight: active ? 700 : 600,
+                                    letterSpacing: "0.01em",
+                                    textAlign: "left",
+                                    cursor: item.disabled === true ? "not-allowed" : "pointer",
+                                    transition: reduced ? undefined : `padding ${hudDuration("base")} ${hudEase("spring")}, color ${hudDuration("fast")} linear`,
+                                    textShadow: active
+                                        ? "0 1px 12px rgba(0,0,0,0.8), 0 0 22px var(--jg-accent-glow, rgba(94,196,255,0.4))"
+                                        : "0 1px 10px rgba(0,0,0,0.72)",
+                                    outline: "none",
+                                }, children: [_jsxs("span", { style: { display: "flex", flexDirection: "column", gap: 1, minWidth: 0 }, children: [_jsx("span", { style: { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: item.label }), item.hint === undefined ? null : (_jsx("span", { style: {
+                                                    fontSize: hudType("xs"),
+                                                    fontWeight: 500,
+                                                    letterSpacing: 0,
+                                                    color: "var(--jg-text-dim, rgba(203,213,225,0.66))",
+                                                    whiteSpace: "nowrap",
+                                                    overflow: "hidden",
+                                                    textOverflow: "ellipsis",
+                                                    opacity: active ? 1 : 0.72,
+                                                }, children: item.hint }))] }), item.badge === undefined ? null : (_jsx("span", { style: { fontSize: hudType("xs"), color: "var(--jg-accent, #7dd3fc)", fontWeight: 700 }, children: item.badge }))] }, item.id));
+                        }), secondary === undefined || secondary.length === 0 ? null : (_jsx("div", { style: { height: 1, margin: "10px 12px", background: "rgba(255,255,255,0.12)" }, "aria-hidden": "true" })), (secondary ?? []).map((item) => {
+                            const active = item.id === activeId;
+                            return (_jsx("button", { type: "button", ...hoverProps(item.id), "data-jg-game-menu-item": item.id, "data-secondary": "", "data-active": active ? "" : undefined, disabled: item.disabled === true, onClick: () => {
+                                    if (item.disabled === true)
+                                        return;
+                                    soundRef.current?.play("confirm");
+                                    onSelect(item.id);
+                                }, style: {
+                                    position: "relative",
+                                    display: "flex",
+                                    alignItems: "center",
+                                    height: rowHeight,
+                                    paddingLeft: active ? 18 : 12,
+                                    border: "none",
+                                    background: "transparent",
+                                    color: active ? "var(--jg-text, #ffffff)" : "rgba(203,213,225,0.6)",
+                                    fontFamily: hudFont.body,
+                                    fontSize: hudType("md"),
+                                    fontWeight: 600,
+                                    textAlign: "left",
+                                    cursor: item.disabled === true ? "not-allowed" : "pointer",
+                                    transition: reduced ? undefined : `padding ${hudDuration("base")} ${hudEase("spring")}`,
+                                    outline: "none",
+                                }, children: item.label }, item.id));
+                        })] }) }), _jsx("div", { "data-jg-game-menu-detail": "", "data-detail-id": activeId ?? "", className: detailClassName, style: {
+                    position: "relative",
+                    zIndex: 1,
+                    minWidth: 0,
+                    minHeight: 0,
+                    maxHeight: "100%",
+                    overflow: "hidden",
+                    display: "flex",
+                    flexDirection: "column",
+                    paddingTop: isPause ? 0 : "clamp(6px, 1.6vh, 20px)",
+                    ...detailStyle,
+                }, children: detailNode === undefined || detailNode === null ? null : (_jsx("div", { "data-jg-game-menu-pane": "", style: {
+                        minHeight: 0,
+                        flex: 1,
+                        display: "flex",
+                        flexDirection: "column",
+                        animation: reduced ? undefined : `jg-menu-pane-in ${hudDuration("slow")} ${hudEase("easeOut")} both`,
+                    }, children: detailNode }, activeId ?? "none")) }), _jsxs("footer", { "data-jg-game-menu-footer": "", style: {
+                    position: "relative",
+                    zIndex: 1,
+                    gridColumn: "1 / -1",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    gap: 16,
+                    paddingTop: 8,
+                    fontSize: hudType("xs"),
+                    letterSpacing: "0.08em",
+                    textTransform: "uppercase",
+                    color: "rgba(203,213,225,0.45)",
+                }, children: [_jsx("span", { "data-jg-game-menu-footer-left": "", children: footer }), _jsx("span", { "data-jg-kbd-hint": "", "data-jg-game-menu-footer-hint": "", children: controlHint ??
+                            (isPause ? "Esc resume · Enter select" : "↑↓ move · Enter select · Esc back") })] })] }));
+}
+/**
+ * A pause menu built from {@link GameMenu}: the same surface and navigation at a smaller scale, so a
+ * game composes one menu system rather than a second one. Escape (or B/Start) resumes.
+ *
+ * @capability game-pause-menu pause menu from the shared game-menu system — same navigation and surface, sized down
+ */
+export function GamePauseMenu(props) {
+    const { onResume, onBack, ...rest } = props;
+    return _jsx(GameMenu, { ...rest, variant: "pause", onBack: onBack ?? onResume, label: rest.label ?? "Paused" });
+}

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;