@dreamboard-games/ui-sdk 0.0.41

package/dist/components/DiceRoller.js

@@ -0,0 +1,319 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { motion } from "framer-motion";
+import { useCallback, useEffect, useRef, useState, } from "react";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from "../internal/ui/dialog.js";
+import { surfaceStyle } from "../theme/derive.js";
+import { useTheme, useThemeCssVars } from "../theme/ThemeProvider.js";
+import { interactionLabel } from "../utils/interaction-labels.js";
+import { ThemedButton } from "./ThemedButton.js";
+const DEFAULT_MIN_SPIN_MS = 1200;
+const DEFAULT_REVEAL_HOLD_MS = 1400;
+const FACE_SEQUENCE = [1, 2, 3, 4, 5, 6];
+export function DiceRoller({ values, diceCount = 2, render, rollAction, className, }) {
+    const allRolled = values?.every((v) => v !== null && v !== undefined) ?? false;
+    const sum = allRolled
+        ? values?.reduce((a, b) => (a ?? 0) + (b ?? 0), 0)
+        : undefined;
+    const displayCount = values?.length ?? diceCount;
+    const renderProps = {
+        values,
+        sum,
+        diceCount: displayCount,
+        allRolled,
+    };
+    return (_jsxs("div", { className: clsx("flex flex-col items-center gap-4", className), role: "region", "aria-label": "Dice roller", children: [render ? render(renderProps) : _jsx(DefaultDiceReadout, { ...renderProps }), rollAction ? (_jsx(DiceRollDialog, { action: rollAction, values: values, diceCount: displayCount })) : null, _jsx("div", { className: "sr-only", "aria-live": "polite", children: allRolled && values
+                    ? `Rolled ${values.join(", ")}. Total: ${sum}`
+                    : "Dice not rolled yet" })] }));
+}
+function DefaultDiceReadout({ values, sum, diceCount, allRolled, }) {
+    const theme = useTheme();
+    const dice = values ?? Array(diceCount).fill(undefined);
+    return (_jsxs("div", { style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: theme.space[2],
+        }, children: [allRolled ? (_jsxs("strong", { style: {
+                    fontFamily: theme.typography.fontFamily.display,
+                    fontSize: theme.typography.fontSize.lg,
+                    color: theme.semantic.text.primary,
+                    fontVariantNumeric: "tabular-nums",
+                }, children: ["Total ", sum] })) : null, _jsx(DiceRow, { values: dice, size: 44, rolling: false })] }));
+}
+function DiceRollDialog({ action, values, diceCount, }) {
+    const theme = useTheme();
+    const themeCssVars = useThemeCssVars();
+    const reducedMotion = theme.motion.reducedMotion === "true";
+    const [open, setOpen] = useState(false);
+    const [phase, setPhase] = useState("idle");
+    const [error, setError] = useState(null);
+    const [animatedValues, setAnimatedValues] = useState(() => nextAnimatedValues(diceCount));
+    const [revealedValues, setRevealedValues] = useState(undefined);
+    const startedAtRef = useRef(0);
+    const revealedRollKeyRef = useRef(null);
+    const handle = action.handle;
+    const shouldPresentDialog = Boolean(handle);
+    const minSpinMs = reducedMotion
+        ? 0
+        : (action.minSpinMs ?? DEFAULT_MIN_SPIN_MS);
+    const revealHoldMs = action.revealHoldMs ?? DEFAULT_REVEAL_HOLD_MS;
+    const rolledValuesKey = values?.join(",") ?? "";
+    const valuesAreReady = values !== undefined &&
+        values.length > 0 &&
+        values.every((value) => typeof value === "number");
+    useEffect(() => {
+        if (!shouldPresentDialog) {
+            setOpen(false);
+            return;
+        }
+        if (!valuesAreReady) {
+            revealedRollKeyRef.current = null;
+            setOpen(true);
+            if (phase !== "rolling") {
+                setPhase("idle");
+                setRevealedValues(undefined);
+                setError(null);
+            }
+            return;
+        }
+        if (open &&
+            phase === "idle" &&
+            revealedRollKeyRef.current !== rolledValuesKey) {
+            startedAtRef.current = Date.now();
+            setPhase("rolling");
+            setAnimatedValues(nextAnimatedValues(diceCount));
+        }
+    }, [
+        diceCount,
+        open,
+        phase,
+        rolledValuesKey,
+        shouldPresentDialog,
+        valuesAreReady,
+    ]);
+    useEffect(() => {
+        if (phase !== "rolling")
+            return;
+        if (reducedMotion)
+            return;
+        const interval = setInterval(() => {
+            setAnimatedValues(nextAnimatedValues(diceCount));
+        }, 120);
+        return () => clearInterval(interval);
+    }, [diceCount, phase, reducedMotion]);
+    useEffect(() => {
+        if (phase !== "rolling" || !valuesAreReady || !values)
+            return;
+        const remaining = Math.max(0, minSpinMs - (Date.now() - startedAtRef.current));
+        const timeout = setTimeout(() => {
+            setRevealedValues([...values]);
+            revealedRollKeyRef.current = rolledValuesKey;
+            setPhase("revealed");
+        }, remaining);
+        return () => clearTimeout(timeout);
+    }, [minSpinMs, phase, rolledValuesKey, values, valuesAreReady]);
+    useEffect(() => {
+        if (phase !== "revealed")
+            return;
+        const timeout = setTimeout(() => {
+            setOpen(false);
+            setPhase("idle");
+        }, revealHoldMs);
+        return () => clearTimeout(timeout);
+    }, [phase, revealHoldMs]);
+    const roll = useCallback(async () => {
+        if (!handle || !handle.available || phase === "rolling")
+            return;
+        startedAtRef.current = Date.now();
+        setOpen(true);
+        setPhase("rolling");
+        setError(null);
+        setRevealedValues(undefined);
+        setAnimatedValues(nextAnimatedValues(diceCount));
+        try {
+            await handle.submit({});
+        }
+        catch (caught) {
+            setPhase("idle");
+            setError(caught instanceof Error ? caught.message : "Unable to roll dice.");
+        }
+    }, [diceCount, handle, phase]);
+    const displayValues = phase === "rolling"
+        ? animatedValues
+        : (revealedValues ?? values ?? Array(diceCount).fill(undefined));
+    const displaySum = sumValues(displayValues);
+    const fallbackLabel = handle
+        ? interactionLabel(handle.descriptor)
+        : undefined;
+    const title = action.title ?? fallbackLabel ?? "Roll dice";
+    const description = action.description ?? "Roll to resolve the current turn.";
+    const resultLabel = action.resultLabel ?? "Roll result";
+    const rollLabel = action.rollLabel ?? fallbackLabel ?? "Roll dice";
+    const disabled = !handle?.available || phase === "rolling";
+    const canClose = true;
+    return (_jsx(Dialog, { open: open, onOpenChange: canClose ? setOpen : undefined, children: _jsxs(DialogContent, { "data-dismiss-behavior": "dismiss", showCloseButton: canClose, className: "max-h-[calc(100vh-2rem)] overflow-y-auto p-4 sm:max-w-md sm:p-6", style: {
+                ...themeCssVars,
+                ...surfaceStyle(theme, { tone: "sheet", radius: "lg" }),
+                width: "min(100%, 28rem)",
+                fontFamily: theme.typography.fontFamily.body,
+            }, onEscapeKeyDown: canClose ? undefined : (event) => event.preventDefault(), onInteractOutside: canClose ? undefined : (event) => event.preventDefault(), children: [_jsxs(DialogHeader, { className: "text-center sm:text-center", children: [_jsx(DialogTitle, { style: {
+                                fontFamily: theme.typography.fontFamily.display,
+                                fontSize: theme.typography.fontSize.xl,
+                            }, children: title }), _jsx(DialogDescription, { children: description })] }), _jsxs("div", { style: {
+                        display: "flex",
+                        flexDirection: "column",
+                        alignItems: "center",
+                        gap: theme.space[4],
+                    }, children: [_jsx(RollResult, { label: resultLabel, sum: displaySum, phase: phase }), _jsx(DiceRow, { values: displayValues, size: 76, rolling: phase === "rolling" }), error ? (_jsx("span", { role: "alert", style: {
+                                color: theme.semantic.intent.danger.solid,
+                                fontSize: theme.typography.fontSize.sm,
+                                textAlign: "center",
+                            }, children: error })) : null, _jsx(ThemedButton, { type: "button", variant: "primary", size: "lg", disabled: disabled, pressed: phase === "rolling", onClick: (event) => {
+                                event.preventDefault();
+                                void roll();
+                            }, children: phase === "rolling" ? "Rolling..." : rollLabel })] })] }) }));
+}
+function RollResult({ label, sum, phase, }) {
+    const theme = useTheme();
+    return (_jsxs("div", { role: "status", "aria-live": "polite", style: {
+            ...surfaceStyle(theme, { tone: "inset", radius: "lg" }),
+            width: "100%",
+            padding: `${theme.space[3]} ${theme.space[4]}`,
+            textAlign: "center",
+        }, children: [_jsx("div", { style: {
+                    color: theme.semantic.text.muted,
+                    fontSize: theme.typography.fontSize.xs,
+                    fontWeight: theme.typography.fontWeight.bold,
+                    letterSpacing: theme.typography.letterSpacing.wide,
+                    textTransform: "uppercase",
+                }, children: label }), _jsx("div", { style: {
+                    fontFamily: theme.typography.fontFamily.display,
+                    fontSize: "clamp(2.75rem, 12vw, 4.5rem)",
+                    fontWeight: theme.typography.fontWeight.bold,
+                    lineHeight: 1,
+                    color: theme.semantic.text.primary,
+                    fontVariantNumeric: "tabular-nums",
+                }, children: sum ?? (phase === "rolling" ? "..." : "?") })] }));
+}
+function DiceRow({ values, size, rolling, }) {
+    const gap = Math.max(8, Math.round(size * 0.18));
+    return (_jsx("div", { role: "list", "aria-label": "Dice values", style: {
+            display: "flex",
+            justifyContent: "center",
+            gap,
+            flexWrap: "wrap",
+        }, children: values.map((value, index) => (_jsx(DieFace, { value: value, size: size, rolling: rolling, index: index }, index))) }));
+}
+function DieFace({ value, size, rolling, index, }) {
+    const theme = useTheme();
+    const reducedMotion = theme.motion.reducedMotion === "true";
+    const showPips = typeof value === "number" && value >= 1 && value <= 6;
+    const style = {
+        position: "relative",
+        width: size,
+        height: size,
+        borderRadius: Math.max(10, Math.round(size * 0.2)),
+        border: `1px solid ${theme.semantic.border.default}`,
+        background: `linear-gradient(145deg, ${theme.semantic.surface.card}, ${theme.semantic.surface.inset})`,
+        boxShadow: `${theme.elevation.lifted}, inset 0 1px 0 rgba(255,255,255,0.45)`,
+        color: theme.semantic.text.primary,
+        display: "grid",
+        placeItems: "center",
+        flex: "0 0 auto",
+        overflow: "hidden",
+    };
+    return (_jsx(motion.div, { role: "listitem", "aria-label": typeof value === "number"
+            ? `Die ${index + 1}: ${value}`
+            : `Die ${index + 1}: not rolled`, style: style, animate: rolling && !reducedMotion
+            ? {
+                rotate: [0, 12, -10, 0],
+                y: [0, -8, 0],
+                scale: [1, 1.04, 1],
+            }
+            : { rotate: 0, y: 0, scale: 1 }, transition: rolling && !reducedMotion
+            ? {
+                repeat: Infinity,
+                duration: 0.42,
+                delay: index * 0.06,
+                ease: "easeInOut",
+            }
+            : { duration: 0.2 }, children: showPips ? (_jsx(PipFace, { value: value })) : (_jsx("span", { style: {
+                fontFamily: theme.typography.fontFamily.display,
+                fontSize: Math.round(size * 0.42),
+                fontWeight: theme.typography.fontWeight.bold,
+                fontVariantNumeric: "tabular-nums",
+            }, children: value ?? "?" })) }));
+}
+function PipFace({ value }) {
+    const theme = useTheme();
+    const pips = pipPositions(value);
+    return (_jsx("span", { "aria-hidden": true, style: {
+            position: "absolute",
+            inset: "18%",
+        }, children: pips.map(([left, top], index) => (_jsx("span", { style: {
+                position: "absolute",
+                left: `${left}%`,
+                top: `${top}%`,
+                width: "22%",
+                height: "22%",
+                borderRadius: "9999px",
+                transform: "translate(-50%, -50%)",
+                background: theme.semantic.text.primary,
+                boxShadow: "0 1px 2px rgba(0,0,0,0.25)",
+            } }, `${left}-${top}-${index}`))) }));
+}
+function pipPositions(value) {
+    switch (value) {
+        case 1:
+            return [[50, 50]];
+        case 2:
+            return [
+                [28, 28],
+                [72, 72],
+            ];
+        case 3:
+            return [
+                [28, 28],
+                [50, 50],
+                [72, 72],
+            ];
+        case 4:
+            return [
+                [28, 28],
+                [72, 28],
+                [28, 72],
+                [72, 72],
+            ];
+        case 5:
+            return [
+                [28, 28],
+                [72, 28],
+                [50, 50],
+                [28, 72],
+                [72, 72],
+            ];
+        case 6:
+            return [
+                [28, 25],
+                [72, 25],
+                [28, 50],
+                [72, 50],
+                [28, 75],
+                [72, 75],
+            ];
+        default:
+            return [];
+    }
+}
+function nextAnimatedValues(count) {
+    return Array.from({ length: count }, (_, index) => {
+        const offset = Math.floor(Math.random() * FACE_SEQUENCE.length);
+        return FACE_SEQUENCE[(offset + index) % FACE_SEQUENCE.length] ?? 1;
+    });
+}
+function sumValues(values) {
+    if (!values.every((value) => typeof value === "number"))
+        return undefined;
+    return values.reduce((total, value) => total + (value ?? 0), 0);
+}

package/dist/components/Drawer.d.ts

@@ -0,0 +1,19 @@
+/** Mobile-friendly slide-out panel built on vaul. Used as fallback when cards can't fit on screen. */
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+declare function Drawer({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerTrigger({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerPortal({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerClose({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerOverlay({ className, style, ...props }: React.ComponentProps<typeof DrawerPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
+interface DrawerContentProps extends React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> {
+    showHandle?: boolean;
+    children?: React.ReactNode;
+}
+declare function DrawerContent({ className, children, showHandle, ...props }: DrawerContentProps): import("react/jsx-runtime").JSX.Element;
+declare function DrawerHeader({ className, ...props }: React.ComponentPropsWithoutRef<"div">): import("react/jsx-runtime").JSX.Element;
+declare function DrawerFooter({ className, ...props }: React.ComponentPropsWithoutRef<"div">): import("react/jsx-runtime").JSX.Element;
+declare function DrawerTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerDescription({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, };
+//# sourceMappingURL=Drawer.d.ts.map

package/dist/components/Drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../src/components/Drawer.tsx"],"names":[],"mappings":"AAAA,sGAAsG;AAEtG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,MAAM,CAAC;AAGjD,iBAAS,MAAM,CAAC,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAEnD;AAED,iBAAS,aAAa,CAAC,EACrB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAEtD;AAED,iBAAS,YAAY,CAAC,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,CAAC,2CAErD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAEpD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAoBtD;AAED,UAAU,kBACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC;IACtE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,UAAiB,EACjB,GAAG,KAAK,EACT,EAAE,kBAAkB,2CA8CpB;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,2CAQvC;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,2CAQvC;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAQpD;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,2CAQ1D;AAED,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,aAAa,EACb,WAAW,EACX,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,CAAC"}

package/dist/components/Drawer.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Drawer as DrawerPrimitive } from "vaul";
+import { clsx } from "clsx";
+function Drawer({ ...props }) {
+    return _jsx(DrawerPrimitive.Root, { "data-slot": "drawer", ...props });
+}
+function DrawerTrigger({ ...props }) {
+    return _jsx(DrawerPrimitive.Trigger, { "data-slot": "drawer-trigger", ...props });
+}
+function DrawerPortal({ ...props }) {
+    return _jsx(DrawerPrimitive.Portal, { "data-slot": "drawer-portal", ...props });
+}
+function DrawerClose({ ...props }) {
+    return _jsx(DrawerPrimitive.Close, { "data-slot": "drawer-close", ...props });
+}
+function DrawerOverlay({ className, style, ...props }) {
+    return (_jsx(DrawerPrimitive.Overlay, { "data-slot": "drawer-overlay", className: clsx("fixed inset-0 z-50 bg-black/50", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className), style: {
+            position: "fixed",
+            inset: 0,
+            zIndex: 50,
+            background: "rgba(0, 0, 0, 0.5)",
+            ...style,
+        }, ...props }));
+}
+function DrawerContent({ className, children, showHandle = true, ...props }) {
+    return (_jsxs(DrawerPortal, { "data-slot": "drawer-portal", children: [_jsx(DrawerOverlay, {}), _jsxs(DrawerPrimitive.Content, { "data-slot": "drawer-content", className: clsx("group/drawer-content fixed z-50 flex h-auto flex-col bg-white", 
+                // Bottom drawer (default for mobile hand display)
+                "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0", "data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh]", "data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t", 
+                // Top drawer
+                "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0", "data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh]", "data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b", 
+                // Right drawer
+                "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0", "data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:max-w-sm", "data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l", 
+                // Left drawer
+                "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0", "data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:max-w-sm", "data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r", className), ...props, children: [showHandle && (_jsx("div", { className: "mx-auto mt-4 h-2 w-[100px] shrink-0 rounded-full bg-slate-300", style: {
+                            width: 100,
+                            height: 8,
+                            margin: "16px auto 0",
+                            flexShrink: 0,
+                            borderRadius: 999,
+                            background: "#cbd5e1",
+                        } })), children] })] }));
+}
+function DrawerHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "drawer-header", className: clsx("flex flex-col gap-1.5 p-4", className), ...props }));
+}
+function DrawerFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "drawer-footer", className: clsx("mt-auto flex flex-col gap-2 p-4", className), ...props }));
+}
+function DrawerTitle({ className, ...props }) {
+    return (_jsx(DrawerPrimitive.Title, { "data-slot": "drawer-title", className: clsx("text-slate-900 font-semibold text-lg", className), ...props }));
+}
+function DrawerDescription({ className, ...props }) {
+    return (_jsx(DrawerPrimitive.Description, { "data-slot": "drawer-description", className: clsx("text-slate-500 text-sm", className), ...props }));
+}
+export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, };

package/dist/components/ErrorBoundary.d.ts

@@ -0,0 +1,24 @@
+/**
+ * ErrorBoundary component
+ *
+ * Catches React errors and displays a fallback UI
+ */
+import { Component, type ReactNode, type ErrorInfo } from "react";
+export interface ErrorBoundaryProps {
+    children: ReactNode;
+    fallback?: (error: Error, reset: () => void) => ReactNode;
+    onError?: (error: Error, errorInfo: ErrorInfo) => void;
+}
+interface ErrorBoundaryState {
+    hasError: boolean;
+    error: Error | null;
+}
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    handleReset: () => void;
+    render(): ReactNode;
+}
+export {};
+//# sourceMappingURL=ErrorBoundary.d.ts.map

package/dist/components/ErrorBoundary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.d.ts","sourceRoot":"","sources":["../../src/components/ErrorBoundary.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlE,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC;IAC1D,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;CACxD;AAED,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACrB;AAED,qBAAa,aAAc,SAAQ,SAAS,CAC1C,kBAAkB,EAClB,kBAAkB,CACnB;gBACa,KAAK,EAAE,kBAAkB;IAKrC,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK,GAAG,kBAAkB;IAIjE,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,GAAG,IAAI;IAM3D,WAAW,QAAO,IAAI,CAEpB;IAEF,MAAM,IAAI,SAAS;CAgBpB"}

package/dist/components/ErrorBoundary.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ErrorBoundary component
+ *
+ * Catches React errors and displays a fallback UI
+ */
+import { Component } from "react";
+import { AlertTriangle, RefreshCw } from "lucide-react";
+export class ErrorBoundary extends Component {
+    constructor(props) {
+        super(props);
+        this.handleReset = () => {
+            this.setState({ hasError: false, error: null });
+        };
+        this.state = { hasError: false, error: null };
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+    componentDidCatch(error, errorInfo) {
+        // eslint-disable-next-line no-console
+        console.error("[ErrorBoundary] Caught error:", error, errorInfo);
+        this.props.onError?.(error, errorInfo);
+    }
+    render() {
+        if (this.state.hasError && this.state.error) {
+            if (this.props.fallback) {
+                return this.props.fallback(this.state.error, this.handleReset);
+            }
+            return (_jsx(DefaultErrorFallback, { error: this.state.error, onReset: this.handleReset }));
+        }
+        return this.props.children;
+    }
+}
+function DefaultErrorFallback({ error, onReset, }) {
+    return (_jsx("div", { className: "min-h-screen flex items-center justify-center p-4 sm:p-8 bg-gradient-to-br from-red-50 to-orange-50", role: "alert", "aria-live": "assertive", children: _jsxs("div", { className: "max-w-md w-full bg-white rounded-2xl shadow-xl p-6 sm:p-8", children: [_jsx("div", { className: "flex items-center justify-center w-16 h-16 mx-auto mb-4 bg-red-100 rounded-full", children: _jsx(AlertTriangle, { size: 32, className: "text-red-600", "aria-hidden": "true" }) }), _jsx("h1", { className: "text-xl sm:text-2xl font-bold text-center text-slate-900 mb-2", children: "Something went wrong" }), _jsx("p", { className: "text-sm sm:text-base text-slate-600 text-center mb-6", children: "The game encountered an error and couldn't continue. You can try reloading to start fresh." }), _jsxs("details", { className: "mb-6", children: [_jsx("summary", { className: "cursor-pointer text-sm text-slate-500 hover:text-slate-700 mb-2", children: "Technical details" }), _jsxs("pre", { className: "text-xs bg-slate-50 text-slate-700 p-3 rounded-lg overflow-auto max-h-40 border border-slate-200", children: [error.message, error.stack && (_jsxs(_Fragment, { children: ["\n\n", error.stack] }))] })] }), _jsxs("button", { type: "button", onClick: onReset, className: "w-full flex items-center justify-center gap-2 px-4 py-3 bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white font-medium rounded-lg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2", children: [_jsx(RefreshCw, { size: 18, "aria-hidden": "true" }), "Try again"] })] }) }));
+}

package/dist/components/GameEndDisplay.d.ts

@@ -0,0 +1,27 @@
+/**
+ * End-of-game winner display and scoreboard overlay.
+ *
+ * Visual styling derives entirely from the active {@link useTheme}
+ * (semantic + intent + elevation tokens). The win moment is the
+ * Peak-end anchor of the session, so the surface intentionally pushes
+ * the loudest theme signals (display typeface, primary intent,
+ * elevation.overlay) without inventing one-off colours.
+ */
+export interface PlayerScore {
+    playerId: string;
+    name: string;
+    score: number;
+    isWinner?: boolean;
+    details?: Record<string, number>;
+}
+export interface GameEndDisplayProps {
+    isGameOver: boolean;
+    /** Sorted by rank */
+    scores: PlayerScore[];
+    winnerMessage?: string;
+    showDetails?: boolean;
+    onReturnToLobby?: () => void;
+    className?: string;
+}
+export declare function GameEndDisplay({ isGameOver, scores, winnerMessage, showDetails, onReturnToLobby, className, }: GameEndDisplayProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=GameEndDisplay.d.ts.map

package/dist/components/GameEndDisplay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GameEndDisplay.d.ts","sourceRoot":"","sources":["../../src/components/GameEndDisplay.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAgBH,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAClC;AAED,MAAM,WAAW,mBAAmB;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,qBAAqB;IACrB,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAgDD,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,MAAM,EACN,aAAa,EACb,WAAmB,EACnB,eAAe,EACf,SAAS,GACV,EAAE,mBAAmB,kDA8SrB"}