@dreamboard-games/ui-sdk 0.0.41

package/dist/runtime/createPluginRuntimeAPI.js

@@ -0,0 +1,419 @@
+import { z } from "zod";
+/**
+ * Message schemas from main app to plugin
+ * We define them here to avoid circular dependencies with apps/web
+ */
+// Main → Plugin: Initialize plugin with session info
+const InitMessageSchema = z.object({
+    type: z.literal("init"),
+    sessionId: z.string(),
+    controllablePlayerIds: z.array(z.string()),
+    controllingPlayerId: z.string(),
+    userId: z.string().nullable(),
+});
+// Main → Plugin: Health check ping
+const PingMessageSchema = z.object({
+    type: z.literal("ping"),
+});
+// Main → Plugin: State sync - sends complete state snapshot
+const StateSyncMessageSchema = z.object({
+    type: z.literal("state-sync"),
+    syncId: z.number(),
+    state: z.custom((data) => {
+        return (typeof data === "object" &&
+            data !== null &&
+            "session" in data &&
+            "notifications" in data);
+    }),
+});
+// Main → Plugin: Validation result response
+const ValidateInteractionResultMessageSchema = z.object({
+    type: z.literal("validate-interaction-result"),
+    messageId: z.string(),
+    result: z.object({
+        valid: z.boolean(),
+        errorCode: z.string().nullable().optional(),
+        message: z.string().nullable().optional(),
+    }),
+});
+const SubmitResultMessageSchema = z.object({
+    type: z.literal("submit-result"),
+    messageId: z.string(),
+    accepted: z.boolean(),
+    errorCode: z.string().nullable().optional(),
+    message: z.string().nullable().optional(),
+});
+// Union of all messages from main → plugin
+const MainToPluginMessageSchema = z.discriminatedUnion("type", [
+    InitMessageSchema,
+    PingMessageSchema,
+    StateSyncMessageSchema,
+    ValidateInteractionResultMessageSchema,
+    SubmitResultMessageSchema,
+]);
+/**
+ * Mint a client-side correlation id for a single submitted interaction.
+ * This id flows plugin -> host gateway -> backend HTTP header
+ * (`X-Dreamboard-Client-Action-Id`), and back to the host via the recorded
+ * `version -> actionId` map so the full t0..t8 latency trace can be
+ * assembled for Tier-0 input-latency observability. Falls back to a
+ * timestamp-seeded pseudo-uuid on environments without `crypto.randomUUID`
+ * (older sandboxed browsers in tests) so we never crash the plugin.
+ */
+const mintClientActionId = () => {
+    const cryptoLike = globalThis.crypto;
+    if (cryptoLike?.randomUUID) {
+        try {
+            return cryptoLike.randomUUID();
+        }
+        catch {
+            // fall through to fallback
+        }
+    }
+    const rand = Math.random().toString(16).slice(2);
+    return `cid-${Date.now().toString(16)}-${rand}`;
+};
+const PLUGIN_RUNTIME_SINGLETON_KEY = "__dreamboardPluginRuntimeApi";
+/**
+ * Creates a RuntimeAPI implementation for plugin iframes.
+ *
+ * Architecture (state-sync):
+ * - Host maintains all state in GameSessionStore
+ * - Host sends complete state snapshots via state-sync messages
+ * - Plugin stores received state and notifies subscribers
+ * - No buffering needed - plugin only renders when state exists
+ *
+ * Security:
+ * - Plugin runs in sandboxed iframe (no network access, no same-origin)
+ * - All backend communication goes through main app
+ *
+ * @returns PluginRuntimeAPI instance
+ */
+export function createPluginRuntimeAPI() {
+    const existingRuntime = globalThis[PLUGIN_RUNTIME_SINGLETON_KEY];
+    if (existingRuntime) {
+        return existingRuntime;
+    }
+    // State-sync state
+    let currentStateSnapshot = null;
+    const stateListeners = new Set();
+    // Session state
+    const sessionState = {
+        status: "loading",
+        sessionId: null,
+        controllablePlayerIds: [],
+        controllingPlayerId: null,
+        userId: null,
+    };
+    const sessionStateListeners = new Set();
+    // Pending validation requests
+    const pendingValidations = new Map();
+    let validationIdCounter = 0;
+    const pendingSubmissions = new Map();
+    let submitIdCounter = 0;
+    // Helper functions
+    const notifySessionStateChange = () => {
+        sessionStateListeners.forEach((listener) => {
+            try {
+                listener({ ...sessionState });
+            }
+            catch {
+                // Silently catch listener errors
+            }
+        });
+    };
+    const notifyStateListeners = () => {
+        if (!currentStateSnapshot)
+            return;
+        const snapshot = currentStateSnapshot;
+        stateListeners.forEach((listener) => {
+            try {
+                listener(snapshot);
+            }
+            catch {
+                // Silently catch listener errors
+            }
+        });
+    };
+    const createSubmissionError = (errorCode, message) => {
+        const error = new Error(message ?? "Submission failed");
+        error.name = "SubmissionError";
+        error.errorCode = errorCode;
+        return error;
+    };
+    const submitViaParent = (payload) => new Promise((resolve, reject) => {
+        const messageId = `submit-${++submitIdCounter}`;
+        pendingSubmissions.set(messageId, { resolve, reject });
+        // Plugin-iframe `Date.now()` ships alongside the postMessage
+        // as the `t0_click` timestamp for Tier-0 input-latency
+        // observability. Date.now() (not performance.now()) is
+        // intentional: the iframe and the host share a wall-clock
+        // base but not a `performance.now()` origin.
+        const clientSubmittedAtMs = Date.now();
+        if (payload.clientActionId && typeof performance !== "undefined") {
+            try {
+                performance.mark(`dreamboard.t0_click.${payload.clientActionId}`, {
+                    detail: { clientActionId: payload.clientActionId },
+                });
+            }
+            catch {
+                // performance.mark detail arg not supported in older browsers; ignore
+            }
+        }
+        window.parent.postMessage({ ...payload, messageId, clientSubmittedAtMs }, "*");
+        setTimeout(() => {
+            const pending = pendingSubmissions.get(messageId);
+            if (!pending) {
+                return;
+            }
+            pendingSubmissions.delete(messageId);
+            pending.reject(createSubmissionError("submission-timeout", "Submission request timed out"));
+        }, 10000);
+    });
+    // Message handler
+    const handleMessage = (event) => {
+        const rawMessage = event.data;
+        const parseResult = MainToPluginMessageSchema.safeParse(rawMessage);
+        if (!parseResult.success) {
+            // Only warn for messages that look like they're meant for us
+            if (rawMessage?.type && typeof rawMessage.type === "string") {
+                // eslint-disable-next-line no-console
+                console.warn("[Plugin RuntimeAPI] Invalid message received:", rawMessage.type);
+            }
+            return;
+        }
+        const message = parseResult.data;
+        switch (message.type) {
+            case "init": {
+                // eslint-disable-next-line no-console
+                console.log("[Plugin RuntimeAPI] Received init message");
+                sessionState.status = "ready";
+                sessionState.sessionId = message.sessionId;
+                sessionState.controllablePlayerIds =
+                    message.controllablePlayerIds;
+                sessionState.controllingPlayerId =
+                    message.controllingPlayerId;
+                sessionState.userId = message.userId;
+                notifySessionStateChange();
+                window.parent.postMessage({ type: "ready" }, "*");
+                break;
+            }
+            case "ping": {
+                window.parent.postMessage({ type: "pong" }, "*");
+                break;
+            }
+            case "state-sync": {
+                // Handle state-sync from host
+                // eslint-disable-next-line no-console
+                console.log("[Plugin RuntimeAPI] Received state-sync, syncId:", message.syncId);
+                // Tier-0 perf: capture `t7_state_sync_received` wall-clock
+                // timestamp up-front so the host can stitch it onto the
+                // perf HUD via the outgoing state-ack message.
+                const clientReceivedAtMs = Date.now();
+                if (typeof performance !== "undefined") {
+                    try {
+                        performance.mark(`dreamboard.t7_state_sync_received.sync-${message.syncId}`, { detail: { syncId: message.syncId } });
+                    }
+                    catch {
+                        // performance.mark detail arg not supported; ignore
+                    }
+                }
+                currentStateSnapshot = message.state;
+                // Update session state from snapshot
+                if (message.state.session) {
+                    sessionState.sessionId = message.state.session.sessionId;
+                    sessionState.controllablePlayerIds =
+                        message.state.session.controllablePlayerIds;
+                    sessionState.controllingPlayerId =
+                        message.state.session.controllingPlayerId;
+                    sessionState.userId = message.state.session.userId;
+                    sessionState.status = "ready";
+                    notifySessionStateChange();
+                }
+                // Notify state listeners
+                notifyStateListeners();
+                // Send acknowledgment (carrying t7 timestamp for the host
+                // perf HUD; host ignores it when perf is disabled).
+                window.parent.postMessage({
+                    type: "state-ack",
+                    syncId: message.syncId,
+                    clientReceivedAtMs,
+                }, "*");
+                // Tier-0 perf: after notifyStateListeners has kicked React's
+                // render, schedule a post-commit microtask + rAF chain so the
+                // follow-up `state-rendered` message lands close to when the
+                // plugin's DOM would have been painted. `queueMicrotask` is
+                // used first because most React listeners finish synchronously;
+                // `requestAnimationFrame` then bounces to the next paint tick.
+                const schedulePostRender = () => {
+                    const send = () => {
+                        const clientRenderedAtMs = Date.now();
+                        if (typeof performance !== "undefined") {
+                            try {
+                                performance.mark(`dreamboard.t8_render_commit.sync-${message.syncId}`, { detail: { syncId: message.syncId } });
+                            }
+                            catch {
+                                // ignore
+                            }
+                        }
+                        window.parent.postMessage({
+                            type: "state-rendered",
+                            syncId: message.syncId,
+                            clientReceivedAtMs,
+                            clientRenderedAtMs,
+                        }, "*");
+                    };
+                    if (typeof requestAnimationFrame === "function") {
+                        requestAnimationFrame(send);
+                    }
+                    else {
+                        queueMicrotask(send);
+                    }
+                };
+                queueMicrotask(schedulePostRender);
+                break;
+            }
+            case "validate-interaction-result": {
+                const resolver = pendingValidations.get(message.messageId);
+                if (resolver) {
+                    pendingValidations.delete(message.messageId);
+                    resolver({
+                        valid: message.result.valid,
+                        errorCode: message.result.errorCode ?? undefined,
+                        message: message.result.message ?? undefined,
+                    });
+                }
+                break;
+            }
+            case "submit-result": {
+                const pending = pendingSubmissions.get(message.messageId);
+                if (!pending) {
+                    break;
+                }
+                if (typeof performance !== "undefined") {
+                    try {
+                        performance.mark(`dreamboard.t3b_ack.${message.messageId}`, {
+                            detail: { messageId: message.messageId },
+                        });
+                    }
+                    catch {
+                        // ignore
+                    }
+                }
+                pendingSubmissions.delete(message.messageId);
+                if (message.accepted) {
+                    pending.resolve();
+                }
+                else {
+                    pending.reject(createSubmissionError(message.errorCode ?? undefined, message.message ?? undefined));
+                }
+                break;
+            }
+        }
+    };
+    window.addEventListener("message", handleMessage);
+    // Error handlers
+    const sendErrorToParent = (message, code, stack) => {
+        // eslint-disable-next-line no-console
+        console.error(`[Plugin RuntimeAPI] ${code}:`, message, stack || "");
+        window.parent.postMessage({
+            type: "error",
+            message: stack ? `${message}\n${stack}` : message,
+            code,
+        }, "*");
+    };
+    window.onerror = (message, source, lineno, colno, error) => {
+        const errorMessage = typeof message === "string" ? message : error?.message || "Unknown error";
+        const location = source ? ` at ${source}:${lineno}:${colno}` : "";
+        sendErrorToParent(errorMessage + location, "UNCAUGHT_ERROR", error?.stack);
+        return false;
+    };
+    window.onunhandledrejection = (event) => {
+        const reason = event.reason;
+        const message = reason instanceof Error
+            ? reason.message
+            : typeof reason === "string"
+                ? reason
+                : JSON.stringify(reason);
+        const stack = reason instanceof Error ? reason.stack : undefined;
+        sendErrorToParent(message, "UNHANDLED_REJECTION", stack);
+    };
+    // eslint-disable-next-line no-console
+    console.log("[Plugin RuntimeAPI] ✅ Initialized (state-sync architecture)");
+    const runtime = {
+        // State-sync methods
+        getSnapshot: () => currentStateSnapshot,
+        subscribeToState: (listener) => {
+            stateListeners.add(listener);
+            // Immediately notify with current state if available
+            if (currentStateSnapshot) {
+                try {
+                    listener(currentStateSnapshot);
+                }
+                catch {
+                    // Silently catch listener errors
+                }
+            }
+            return () => {
+                stateListeners.delete(listener);
+            };
+        },
+        validateInteraction: async (playerId, interactionId, params) => {
+            return new Promise((resolve) => {
+                const messageId = `validate-${++validationIdCounter}`;
+                pendingValidations.set(messageId, resolve);
+                window.parent.postMessage({
+                    type: "validate-interaction",
+                    playerId,
+                    interactionId,
+                    params,
+                    messageId,
+                }, "*");
+                // Timeout after 10 seconds to avoid hanging forever
+                setTimeout(() => {
+                    if (pendingValidations.has(messageId)) {
+                        pendingValidations.delete(messageId);
+                        resolve({
+                            valid: false,
+                            errorCode: "validation-timeout",
+                            message: "Validation request timed out",
+                        });
+                    }
+                }, 10000);
+            });
+        },
+        submitInteraction: async (playerId, interactionId, params) => submitViaParent({
+            type: "interaction",
+            playerId,
+            interactionId,
+            params,
+            clientActionId: mintClientActionId(),
+        }),
+        getSessionState: () => ({ ...sessionState }),
+        disconnect: () => {
+            window.removeEventListener("message", handleMessage);
+            window.onerror = null;
+            window.onunhandledrejection = null;
+            sessionStateListeners.clear();
+            stateListeners.clear();
+            pendingValidations.clear();
+            pendingSubmissions.clear();
+            currentStateSnapshot = null;
+        },
+        switchPlayer: (playerId) => {
+            window.parent.postMessage({ type: "switch-player", playerId }, "*");
+        },
+        restoreHistory: (entryId) => {
+            window.parent.postMessage({ type: "restore-history", entryId }, "*");
+        },
+        _subscribeToSessionState: (listener) => {
+            sessionStateListeners.add(listener);
+            listener({ ...sessionState });
+            return () => {
+                sessionStateListeners.delete(listener);
+            };
+        },
+    };
+    globalThis[PLUGIN_RUNTIME_SINGLETON_KEY] = runtime;
+    return runtime;
+}

package/dist/theme/ThemeProvider.d.ts

@@ -0,0 +1,98 @@
+import { type CSSProperties, type ReactNode } from "react";
+import { type Theme, type ThemeOverride } from "./tokens.js";
+/**
+ * The set of preset theme ids ships in `@dreamboard/ui-sdk`. Authors
+ * may register additional ones by passing a fully-resolved {@link Theme}
+ * instead of an id.
+ */
+export type ThemePresetId = "tabletop" | "arcade" | "studio";
+/**
+ * Resolve a preset id (or a full theme) into a {@link Theme}.
+ *
+ * Used internally by {@link ThemeProvider}; exported so authors who
+ * compose at the call site (e.g. for a side-by-side preview) can do
+ * the same resolution without mounting a provider.
+ */
+export declare function resolveTheme(input: ThemePresetId | Theme | undefined): Theme;
+/** Look up a registered preset by id. Returns `undefined` if missing. */
+export declare function getThemePreset(id: ThemePresetId): Theme | undefined;
+/**
+ * Subset returned by {@link useTheme} — the resolved theme plus a
+ * stable copy of its CSS-variable map so consumers can reuse it (for
+ * example, to apply tokens to a portal that escapes the provider).
+ */
+export interface ThemeContextValue {
+    /** Fully resolved theme. */
+    readonly theme: Theme;
+    /** CSS-var map consumable as `style` on a wrapper. */
+    readonly cssVars: CSSProperties;
+}
+declare const ThemeCtx: import("react").Context<ThemeContextValue | null>;
+export interface ThemeProviderProps {
+    /**
+     * Preset id, a full {@link Theme}, or omitted to use the `tabletop`
+     * default.
+     */
+    theme?: ThemePresetId | Theme;
+    /**
+     * Deep-partial overrides merged onto the resolved base theme. Use
+     * for one-off tweaks (e.g. swapping the player palette per game)
+     * without writing a full theme.
+     */
+    override?: ThemeOverride;
+    /**
+     * Render mode for reduced-motion enforcement.
+     *
+     * - `auto` (default): respect the user's OS-level preference via
+     *   `prefers-reduced-motion: reduce`.
+     * - `force`: force `motion.reducedMotion = "true"` regardless of the
+     *   OS preference (useful for screenshot CI).
+     * - `ignore`: never override motion (use only when the embedding
+     *   shell already decides motion behaviour).
+     */
+    reducedMotion?: "auto" | "force" | "ignore";
+    /**
+     * Where to mount the wrapper. `block` (default) renders a `div` and
+     * applies the CSS variables to it. `none` skips the wrapper entirely
+     * — only useful when the parent is already a Dreamboard provider and
+     * just needs to publish a different sub-tree (rare).
+     */
+    as?: "block" | "none";
+    /** Extra style merged after the CSS-var map. */
+    style?: CSSProperties;
+    /** Extra className for the wrapper. */
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * Mounts a Dreamboard theme. The provider:
+ *
+ * 1. Resolves the preset (or accepts a full theme).
+ * 2. Applies any deep-partial `override`.
+ * 3. Optionally clamps `motion.reducedMotion` to `"true"` based on the
+ *    OS-level preference (or a forced override).
+ * 4. Serialises the resolved theme into CSS variables on a wrapper
+ *    element so descendants can read tokens via `useTheme()` *or* via
+ *    `var(--db-...)` references in their own CSS / Tailwind.
+ *
+ * Defaults such as `<GameLayout>` mount this for you with the configured
+ * theme; mount it manually only when you need a sub-tree to use a different
+ * theme (e.g. a dark sheet over a light layout).
+ */
+export declare function ThemeProvider({ theme: themeInput, override, reducedMotion, as, style, className, children, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Read the active {@link Theme} from a {@link ThemeProvider} ancestor.
+ *
+ * Falls back to the `tabletop` preset (with no overrides) when called
+ * outside a provider — components remain renderable in isolated tests
+ * and Storybook/Cosmos fixtures without a wrapping shell.
+ */
+export declare function useTheme(): Theme;
+/**
+ * Read the {@link CSSProperties} that publish the active theme as CSS
+ * variables. Useful when porting a theme into a portal or drawer that
+ * is rendered outside the provider's DOM subtree.
+ */
+export declare function useThemeCssVars(): CSSProperties;
+export { ThemeCtx };
+//# sourceMappingURL=ThemeProvider.d.ts.map

package/dist/theme/ThemeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,OAAO,EAAc,KAAK,KAAK,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAEzE;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAQ7D;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,aAAa,GAAG,KAAK,GAAG,SAAS,GAAG,KAAK,CAc5E;AAED,yEAAyE;AACzE,wBAAgB,cAAc,CAAC,EAAE,EAAE,aAAa,GAAG,KAAK,GAAG,SAAS,CAEnE;AAED;;;;GAIG;AACH,MAAM,WAAW,iBAAiB;IAChC,4BAA4B;IAC5B,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC;IACtB,sDAAsD;IACtD,QAAQ,CAAC,OAAO,EAAE,aAAa,CAAC;CACjC;AAED,QAAA,MAAM,QAAQ,mDAAgD,CAAC;AAE/D,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,GAAG,KAAK,CAAC;IAC9B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB;;;;;;;;;OASG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC5C;;;;;OAKG;IACH,EAAE,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACtB,gDAAgD;IAChD,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAeD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EAAE,UAAU,EACjB,QAAQ,EACR,aAAsB,EACtB,EAAY,EACZ,KAAK,EACL,SAAS,EACT,QAAQ,GACT,EAAE,kBAAkB,2CAgDpB;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,IAAI,KAAK,CAGhC;AAED;;;;GAIG;AACH,wBAAgB,eAAe,IAAI,aAAa,CAQ/C;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/theme/ThemeProvider.js

@@ -0,0 +1,148 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useMemo, useState, } from "react";
+import { themeToCssVars } from "./css-vars.js";
+import { arcadeTheme } from "./presets/arcade.js";
+import { studioTheme } from "./presets/studio.js";
+import { tabletopTheme } from "./presets/tabletop.js";
+import { mergeTheme } from "./tokens.js";
+const PRESETS = {
+    tabletop: tabletopTheme,
+    arcade: arcadeTheme,
+    studio: studioTheme,
+};
+/**
+ * Resolve a preset id (or a full theme) into a {@link Theme}.
+ *
+ * Used internally by {@link ThemeProvider}; exported so authors who
+ * compose at the call site (e.g. for a side-by-side preview) can do
+ * the same resolution without mounting a provider.
+ */
+export function resolveTheme(input) {
+    if (!input)
+        return tabletopTheme;
+    if (typeof input === "string") {
+        const preset = PRESETS[input];
+        if (!preset) {
+            throw new Error(`[ui-sdk] Unknown theme preset "${input}". Pass a full Theme object or one of: ${Object.keys(PRESETS).join(", ")}.`);
+        }
+        return preset;
+    }
+    return input;
+}
+/** Look up a registered preset by id. Returns `undefined` if missing. */
+export function getThemePreset(id) {
+    return PRESETS[id];
+}
+const ThemeCtx = createContext(null);
+function usePrefersReducedMotion() {
+    const [prefers, setPrefers] = useState(false);
+    useEffect(() => {
+        if (typeof window === "undefined" || !window.matchMedia)
+            return;
+        const media = window.matchMedia("(prefers-reduced-motion: reduce)");
+        setPrefers(media.matches);
+        const handle = (event) => setPrefers(event.matches);
+        media.addEventListener("change", handle);
+        return () => media.removeEventListener("change", handle);
+    }, []);
+    return prefers;
+}
+/**
+ * Mounts a Dreamboard theme. The provider:
+ *
+ * 1. Resolves the preset (or accepts a full theme).
+ * 2. Applies any deep-partial `override`.
+ * 3. Optionally clamps `motion.reducedMotion` to `"true"` based on the
+ *    OS-level preference (or a forced override).
+ * 4. Serialises the resolved theme into CSS variables on a wrapper
+ *    element so descendants can read tokens via `useTheme()` *or* via
+ *    `var(--db-...)` references in their own CSS / Tailwind.
+ *
+ * Defaults such as `<GameLayout>` mount this for you with the configured
+ * theme; mount it manually only when you need a sub-tree to use a different
+ * theme (e.g. a dark sheet over a light layout).
+ */
+export function ThemeProvider({ theme: themeInput, override, reducedMotion = "auto", as = "block", style, className, children, }) {
+    const prefersReduced = usePrefersReducedMotion();
+    const value = useMemo(() => {
+        const base = resolveTheme(themeInput);
+        const merged = mergeTheme(base, override);
+        const motionResolved = reducedMotion === "force"
+            ? "true"
+            : reducedMotion === "ignore"
+                ? merged.motion.reducedMotion
+                : prefersReduced
+                    ? "true"
+                    : merged.motion.reducedMotion;
+        const final = motionResolved === merged.motion.reducedMotion
+            ? merged
+            : {
+                ...merged,
+                motion: { ...merged.motion, reducedMotion: motionResolved },
+            };
+        return { theme: final, cssVars: themeToCssVars(final) };
+    }, [themeInput, override, reducedMotion, prefersReduced]);
+    if (as === "none") {
+        return _jsx(ThemeCtx.Provider, { value: value, children: children });
+    }
+    const wrapperStyle = {
+        ...themeToShadcnVars(value.theme),
+        ...value.cssVars,
+        fontFamily: value.theme.typography.fontFamily.body,
+        ...style,
+    };
+    return (_jsx(ThemeCtx.Provider, { value: value, children: _jsx("div", { "data-dreamboard-theme": value.theme.meta.id, "data-dreamboard-mode": value.theme.meta.mode, "data-dreamboard-reduced-motion": value.theme.motion.reducedMotion, className: className, style: wrapperStyle, children: children }) }));
+}
+/**
+ * Read the active {@link Theme} from a {@link ThemeProvider} ancestor.
+ *
+ * Falls back to the `tabletop` preset (with no overrides) when called
+ * outside a provider — components remain renderable in isolated tests
+ * and Storybook/Cosmos fixtures without a wrapping shell.
+ */
+export function useTheme() {
+    const ctx = useContext(ThemeCtx);
+    return ctx?.theme ?? tabletopTheme;
+}
+/**
+ * Read the {@link CSSProperties} that publish the active theme as CSS
+ * variables. Useful when porting a theme into a portal or drawer that
+ * is rendered outside the provider's DOM subtree.
+ */
+export function useThemeCssVars() {
+    const ctx = useContext(ThemeCtx);
+    if (ctx)
+        return { ...themeToShadcnVars(ctx.theme), ...ctx.cssVars };
+    // Match the fallback theme exposed by `useTheme()`.
+    return {
+        ...themeToShadcnVars(tabletopTheme),
+        ...themeToCssVars(tabletopTheme),
+    };
+}
+export { ThemeCtx };
+function themeToShadcnVars(theme) {
+    const vars = {
+        "--background": theme.semantic.surface.app,
+        "--foreground": theme.semantic.text.primary,
+        "--card": theme.semantic.surface.card,
+        "--card-foreground": theme.semantic.text.primary,
+        "--popover": theme.semantic.surface.sheet,
+        "--popover-foreground": theme.semantic.text.primary,
+        "--primary": theme.semantic.intent.primary.solid,
+        "--primary-foreground": theme.semantic.intent.primary.on,
+        "--secondary": theme.semantic.intent.secondary.solid,
+        "--secondary-foreground": theme.semantic.intent.secondary.on,
+        "--muted": theme.semantic.surface.inset,
+        "--muted-foreground": theme.semantic.text.muted,
+        "--accent": theme.semantic.intent.info.soft,
+        "--accent-foreground": theme.semantic.intent.info.onSoft,
+        "--destructive": theme.semantic.intent.danger.solid,
+        "--destructive-foreground": theme.semantic.intent.danger.on,
+        "--border": theme.semantic.border.default,
+        "--input": theme.semantic.border.default,
+        "--ring": theme.semantic.border.focus,
+        "--font-sans": theme.typography.fontFamily.body,
+        "--font-display": theme.typography.fontFamily.display,
+    };
+    return vars;
+}