@dreamboard-games/ui-sdk 0.0.41

package/dist/context/InteractionDraftContext.js

@@ -0,0 +1,145 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from "react";
+import { useStore } from "zustand";
+import { createStore } from "zustand/vanilla";
+import { useShallow } from "zustand/shallow";
+const EMPTY_DRAFT = Object.freeze({});
+export function createInteractionUiStore() {
+    const store = createStore()(() => ({
+        drafts: {},
+        arms: {},
+        submitting: {},
+    }));
+    const api = {
+        getDraft(interactionId) {
+            return store.getState().drafts[interactionId] ?? EMPTY_DRAFT;
+        },
+        setInput(interactionId, key, value) {
+            store.setState((prev) => {
+                const current = prev.drafts[interactionId];
+                if (current && current[key] === value)
+                    return prev;
+                return {
+                    ...prev,
+                    drafts: {
+                        ...prev.drafts,
+                        [interactionId]: { ...(current ?? {}), [key]: value },
+                    },
+                };
+            });
+        },
+        clearInput(interactionId, key) {
+            store.setState((prev) => {
+                const current = prev.drafts[interactionId];
+                if (!current)
+                    return prev;
+                if (key === undefined) {
+                    const { [interactionId]: _omit, ...rest } = prev.drafts;
+                    return { ...prev, drafts: rest };
+                }
+                if (!(key in current))
+                    return prev;
+                const { [key]: _omitKey, ...remainingKeys } = current;
+                if (Object.keys(remainingKeys).length === 0) {
+                    const { [interactionId]: _omit, ...rest } = prev.drafts;
+                    return { ...prev, drafts: rest };
+                }
+                return {
+                    ...prev,
+                    drafts: { ...prev.drafts, [interactionId]: remainingKeys },
+                };
+            });
+        },
+        clearAll() {
+            store.setState((prev) => {
+                if (Object.keys(prev.drafts).length === 0 &&
+                    Object.keys(prev.arms).length === 0 &&
+                    Object.keys(prev.submitting).length === 0) {
+                    return prev;
+                }
+                return { drafts: {}, arms: {}, submitting: {} };
+            });
+        },
+        getArmed(surface) {
+            return store.getState().arms[surface] ?? null;
+        },
+        arm(surface, interactionId) {
+            store.setState((prev) => {
+                const current = prev.arms[surface] ?? null;
+                if (current === interactionId)
+                    return prev;
+                if (interactionId === null) {
+                    const { [surface]: _omit, ...rest } = prev.arms;
+                    return { ...prev, arms: rest };
+                }
+                return { ...prev, arms: { ...prev.arms, [surface]: interactionId } };
+            });
+        },
+        isSubmitting(interactionId) {
+            return store.getState().submitting[interactionId] === true;
+        },
+        setSubmitting(interactionId, submitting) {
+            store.setState((prev) => {
+                const current = prev.submitting[interactionId] === true;
+                if (current === submitting)
+                    return prev;
+                if (!submitting) {
+                    const { [interactionId]: _omit, ...rest } = prev.submitting;
+                    return { ...prev, submitting: rest };
+                }
+                return {
+                    ...prev,
+                    submitting: { ...prev.submitting, [interactionId]: true },
+                };
+            });
+        },
+    };
+    return Object.assign(store, api);
+}
+const InteractionUiCtx = createContext(null);
+/**
+ * React provider that holds draft input state shared across every surface
+ * inside the tree. Auto-installed by `<PluginRuntime>`; authors rarely
+ * mount it directly. Mount manually when rendering surface components in
+ * isolation (e.g., Storybook, snapshot tests).
+ *
+ * ```tsx
+ * <InteractionUiProvider>
+ *   <PanelSurface />
+ *   <BoardSurface>{(ctx) => <Board ctx={ctx} />}</BoardSurface>
+ * </InteractionUiProvider>
+ * ```
+ */
+export function InteractionUiProvider({ children, store, }) {
+    const ownedStore = useMemo(() => createInteractionUiStore(), []);
+    return (_jsx(InteractionUiCtx.Provider, { value: store ?? ownedStore, children: children }));
+}
+/**
+ * Access the active draft store. Falls back to an inert in-memory store
+ * when no provider is mounted, so surface hooks remain callable in bare
+ * test harnesses without crashing — draft state simply isn't shared
+ * across components in that case.
+ */
+export function useInteractionUiStore() {
+    const ctx = useContext(InteractionUiCtx);
+    const fallback = useMemo(() => createInteractionUiStore(), []);
+    return ctx ?? fallback;
+}
+/**
+ * Subscribe to the draft for a single interaction id with per-slice
+ * re-renders. Returns a stable empty object when the draft is unset.
+ */
+export function useInteractionDraft(interactionId) {
+    const store = useInteractionUiStore();
+    return useStore(store, useShallow((state) => state.drafts[interactionId] ?? EMPTY_DRAFT));
+}
+/** Subscribe to the armed interaction id on a given surface. */
+export function useArmedInteraction(surface) {
+    const store = useInteractionUiStore();
+    return useStore(store, (state) => state.arms[surface] ?? null);
+}
+/** Subscribe to local submitting status for a single interaction key. */
+export function useInteractionSubmitting(interactionId) {
+    const store = useInteractionUiStore();
+    return useStore(store, (state) => state.submitting[interactionId] === true);
+}

package/dist/context/PluginSessionContext.d.ts

@@ -0,0 +1,33 @@
+import type { PluginSessionState } from "../types/runtime-api";
+/**
+ * Context for plugin session metadata.
+ * This context is provided by the RuntimeContext after receiving init message from parent.
+ */
+export declare const PluginSessionContext: import("react").Context<PluginSessionState | null>;
+/**
+ * Hook to access plugin session metadata.
+ * Returns session initialization status and IDs.
+ *
+ * @returns Plugin session state with status, sessionId, controllablePlayerIds, and controllingPlayerId
+ *
+ * @example
+ * ```tsx
+ * function MyPluginComponent() {
+ *   const { status, sessionId, controllablePlayerIds, controllingPlayerId } = usePluginSession();
+ *
+ *   if (status === "loading") {
+ *     return <div>Initializing...</div>;
+ *   }
+ *
+ *   return (
+ *     <div>
+ *       <p>Session: {sessionId}</p>
+ *       <p>Can control: {controllablePlayerIds.join(", ")}</p>
+ *       <p>Currently controlling: {controllingPlayerId}</p>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function usePluginSession(): PluginSessionState;
+//# sourceMappingURL=PluginSessionContext.d.ts.map

package/dist/context/PluginSessionContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PluginSessionContext.d.ts","sourceRoot":"","sources":["../../src/context/PluginSessionContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE/D;;;GAGG;AACH,eAAO,MAAM,oBAAoB,oDAEhC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,gBAAgB,IAAI,kBAAkB,CAUrD"}

package/dist/context/PluginSessionContext.js

@@ -0,0 +1,38 @@
+import { createContext, useContext } from "react";
+/**
+ * Context for plugin session metadata.
+ * This context is provided by the RuntimeContext after receiving init message from parent.
+ */
+export const PluginSessionContext = createContext(null);
+/**
+ * Hook to access plugin session metadata.
+ * Returns session initialization status and IDs.
+ *
+ * @returns Plugin session state with status, sessionId, controllablePlayerIds, and controllingPlayerId
+ *
+ * @example
+ * ```tsx
+ * function MyPluginComponent() {
+ *   const { status, sessionId, controllablePlayerIds, controllingPlayerId } = usePluginSession();
+ *
+ *   if (status === "loading") {
+ *     return <div>Initializing...</div>;
+ *   }
+ *
+ *   return (
+ *     <div>
+ *       <p>Session: {sessionId}</p>
+ *       <p>Can control: {controllablePlayerIds.join(", ")}</p>
+ *       <p>Currently controlling: {controllingPlayerId}</p>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function usePluginSession() {
+    const context = useContext(PluginSessionContext);
+    if (context === null) {
+        throw new Error("usePluginSession must be used within a PluginSessionContext.Provider (provided by RuntimeContext)");
+    }
+    return context;
+}

package/dist/context/PluginStateContext.d.ts

@@ -0,0 +1,116 @@
+import { default as React } from "react";
+import type { PluginStateSnapshot } from "../types/plugin-state.js";
+/**
+ * React Context for providing plugin state from state-sync messages.
+ * This is the new architecture where the host app maintains state and syncs to plugin.
+ */
+declare const PluginStateContext: React.Context<PluginStateSnapshot<unknown, string, string, string> | null>;
+export interface PluginStateProviderProps {
+    children: React.ReactNode;
+    /**
+     * Custom loading component to show while waiting for state
+     * @default DefaultLoadingScreen
+     */
+    loadingComponent?: React.ReactNode;
+}
+/**
+ * PluginStateProvider subscribes to state-sync messages from the host
+ * and provides the state to child components via context.
+ *
+ * In the new architecture:
+ * - Host only renders authored game UI after state-sync begins
+ * - Plugin receives complete state in first state-sync message
+ * - No buffering or waiting needed - state is immediately available
+ *
+ * This replaces the complex usePluginRuntime hook which had:
+ * - waitForGameStart() promise handling
+ * - finishSetup() coordination with queueMicrotask
+ * - Error timeout handling
+ *
+ * @example
+ * ```tsx
+ * function PluginRoot() {
+ *   return (
+ *     <RuntimeProvider runtime={runtime}>
+ *       <PluginStateProvider>
+ *         <App />
+ *       </PluginStateProvider>
+ *     </RuntimeProvider>
+ *   );
+ * }
+ * ```
+ */
+export declare function PluginStateProvider({ children, loadingComponent, }: PluginStateProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access the full plugin state snapshot.
+ *
+ * @throws Error if used outside of PluginStateProvider
+ * @returns Current plugin state snapshot
+ *
+ * @example
+ * ```typescript
+ * function MyComponent() {
+ *   const state = usePluginStateSnapshot();
+ *   console.log('Current phase:', state.gameplay.currentPhase);
+ * }
+ * ```
+ */
+export declare function usePluginStateSnapshot(): PluginStateSnapshot;
+/**
+ * Hook to select a specific part of the plugin state.
+ * Uses useSyncExternalStore for optimal performance - only re-renders
+ * when the selected value changes (using reference equality).
+ *
+ * @param selector - Function to select a part of the state
+ * @returns Selected value from state
+ *
+ * @example
+ * ```typescript
+ * // Only re-renders when gameplay.currentPhase changes
+ * function CurrentStateDisplay() {
+ *   const currentState = usePluginState((s) => s.gameplay.currentPhase);
+ *   return <div>State: {currentState}</div>;
+ * }
+ * ```
+ */
+export declare function usePluginState<T>(selector: (state: PluginStateSnapshot) => T): T;
+/**
+ * Hook to access plugin actions (like marking notifications read).
+ *
+ * @returns Object with action functions
+ *
+ * @example
+ * ```typescript
+ * function NotificationsList() {
+ *   const notifications = usePluginState((s) => s.notifications);
+ *   const { markNotificationRead, switchPlayer } = usePluginActions();
+ *
+ *   return (
+ *     <ul>
+ *       {notifications.map((n) => (
+ *         <li key={n.id} onClick={() => markNotificationRead(n.id)}>
+ *           {n.type}
+ *         </li>
+ *       ))}
+ *     </ul>
+ *   );
+ * }
+ * ```
+ */
+export declare function usePluginActions(): {
+    /**
+     * Mark a notification as read.
+     * Sends message to host which updates the notification in GameSessionStore.
+     */
+    markNotificationRead: (notificationId: string) => void;
+    /**
+     * Switch to a different player (for users controlling multiple seats).
+     */
+    switchPlayer: (playerId: string) => void;
+    /**
+     * Submit a player interaction (action or prompt response).
+     */
+    submitInteraction: (playerId: import("../../type-stubs/manifest-contract.js").PlayerId, interactionId: string, params: unknown) => Promise<void>;
+};
+export { PluginStateContext };
+//# sourceMappingURL=PluginStateContext.d.ts.map

package/dist/context/PluginStateContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PluginStateContext.d.ts","sourceRoot":"","sources":["../../src/context/PluginStateContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,IAAI,KAAK,EAOjB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAIpE;;;GAGG;AACH,QAAA,MAAM,kBAAkB,4EAAkD,CAAC;AAoC3E,MAAM,WAAW,wBAAwB;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACpC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,gBAA2C,GAC5C,EAAE,wBAAwB,2CAkC1B;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,sBAAsB,IAAI,mBAAmB,CAW5D;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAC9B,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,CAAC,GAC1C,CAAC,CAyBH;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,gBAAgB;IAI5B;;;OAGG;2CACoC,MAAM;IAO7C;;OAEG;6BACsB,MAAM;IAI/B;;OAEG;;EAGN;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/context/PluginStateContext.js

@@ -0,0 +1,186 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useContext, useState, useEffect, useMemo, useSyncExternalStore, } from "react";
+import { useRuntimeContext } from "./RuntimeContext.js";
+/**
+ * React Context for providing plugin state from state-sync messages.
+ * This is the new architecture where the host app maintains state and syncs to plugin.
+ */
+const PluginStateContext = createContext(null);
+/**
+ * Loading component shown while waiting for initial state
+ */
+function DefaultLoadingScreen() {
+    return (_jsx("div", { style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            height: "100%",
+            width: "100%",
+            color: "#666",
+        }, children: _jsxs("div", { style: { textAlign: "center" }, children: [_jsx("div", { style: {
+                        width: "40px",
+                        height: "40px",
+                        border: "3px solid #e0e0e0",
+                        borderTopColor: "#666",
+                        borderRadius: "50%",
+                        animation: "spin 1s linear infinite",
+                        margin: "0 auto 12px",
+                    } }), _jsx("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` }), _jsx("p", { children: "Loading game view..." })] }) }));
+}
+/**
+ * PluginStateProvider subscribes to state-sync messages from the host
+ * and provides the state to child components via context.
+ *
+ * In the new architecture:
+ * - Host only renders authored game UI after state-sync begins
+ * - Plugin receives complete state in first state-sync message
+ * - No buffering or waiting needed - state is immediately available
+ *
+ * This replaces the complex usePluginRuntime hook which had:
+ * - waitForGameStart() promise handling
+ * - finishSetup() coordination with queueMicrotask
+ * - Error timeout handling
+ *
+ * @example
+ * ```tsx
+ * function PluginRoot() {
+ *   return (
+ *     <RuntimeProvider runtime={runtime}>
+ *       <PluginStateProvider>
+ *         <App />
+ *       </PluginStateProvider>
+ *     </RuntimeProvider>
+ *   );
+ * }
+ * ```
+ */
+export function PluginStateProvider({ children, loadingComponent = _jsx(DefaultLoadingScreen, {}), }) {
+    const runtime = useRuntimeContext();
+    const [state, setState] = useState(() => runtime.getSnapshot?.() ?? null);
+    useEffect(() => {
+        // Get initial state if available
+        const initialState = runtime.getSnapshot?.();
+        if (initialState) {
+            setState(initialState);
+        }
+        // Subscribe to state changes
+        if (runtime.subscribeToState) {
+            return runtime.subscribeToState((newState) => {
+                setState(newState);
+            });
+        }
+        return () => { };
+    }, [runtime]);
+    // Don't render children until state is available
+    // In the new architecture, host guarantees state exists before rendering plugin
+    if (!state) {
+        return _jsx(_Fragment, { children: loadingComponent });
+    }
+    return (_jsx(PluginStateContext.Provider, { value: state, children: children }));
+}
+/**
+ * Hook to access the full plugin state snapshot.
+ *
+ * @throws Error if used outside of PluginStateProvider
+ * @returns Current plugin state snapshot
+ *
+ * @example
+ * ```typescript
+ * function MyComponent() {
+ *   const state = usePluginStateSnapshot();
+ *   console.log('Current phase:', state.gameplay.currentPhase);
+ * }
+ * ```
+ */
+export function usePluginStateSnapshot() {
+    const state = useContext(PluginStateContext);
+    if (!state) {
+        throw new Error("usePluginStateSnapshot must be used within PluginStateProvider. " +
+            "Make sure you have wrapped your app with <PluginStateProvider>.");
+    }
+    return state;
+}
+/**
+ * Hook to select a specific part of the plugin state.
+ * Uses useSyncExternalStore for optimal performance - only re-renders
+ * when the selected value changes (using reference equality).
+ *
+ * @param selector - Function to select a part of the state
+ * @returns Selected value from state
+ *
+ * @example
+ * ```typescript
+ * // Only re-renders when gameplay.currentPhase changes
+ * function CurrentStateDisplay() {
+ *   const currentState = usePluginState((s) => s.gameplay.currentPhase);
+ *   return <div>State: {currentState}</div>;
+ * }
+ * ```
+ */
+export function usePluginState(selector) {
+    const runtime = useRuntimeContext();
+    const subscribe = (onStoreChange) => {
+        if (!runtime.subscribeToState) {
+            return () => { };
+        }
+        return runtime.subscribeToState(() => {
+            onStoreChange();
+        });
+    };
+    const getSnapshot = () => {
+        const state = runtime.getSnapshot?.();
+        if (!state) {
+            throw new Error("usePluginState: No state available. " +
+                "Make sure you have wrapped your app with <PluginStateProvider>.");
+        }
+        return state;
+    };
+    const state = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+    return useMemo(() => selector(state), [selector, state]);
+}
+/**
+ * Hook to access plugin actions (like marking notifications read).
+ *
+ * @returns Object with action functions
+ *
+ * @example
+ * ```typescript
+ * function NotificationsList() {
+ *   const notifications = usePluginState((s) => s.notifications);
+ *   const { markNotificationRead, switchPlayer } = usePluginActions();
+ *
+ *   return (
+ *     <ul>
+ *       {notifications.map((n) => (
+ *         <li key={n.id} onClick={() => markNotificationRead(n.id)}>
+ *           {n.type}
+ *         </li>
+ *       ))}
+ *     </ul>
+ *   );
+ * }
+ * ```
+ */
+export function usePluginActions() {
+    const runtime = useRuntimeContext();
+    return {
+        /**
+         * Mark a notification as read.
+         * Sends message to host which updates the notification in GameSessionStore.
+         */
+        markNotificationRead: (notificationId) => {
+            window.parent.postMessage({ type: "mark-notification-read", notificationId }, "*");
+        },
+        /**
+         * Switch to a different player (for users controlling multiple seats).
+         */
+        switchPlayer: (playerId) => {
+            runtime.switchPlayer?.(playerId);
+        },
+        /**
+         * Submit a player interaction (action or prompt response).
+         */
+        submitInteraction: runtime.submitInteraction,
+    };
+}
+export { PluginStateContext };

package/dist/context/RuntimeContext.d.ts

@@ -0,0 +1,49 @@
+import React from "react";
+import type { RuntimeAPI } from "../types/runtime-api.js";
+/**
+ * React Context for providing RuntimeAPI to plugin components.
+ * This context must be provided by the plugin wrapper, not by the plugin code itself.
+ */
+export declare const RuntimeContext: React.Context<RuntimeAPI | null>;
+/**
+ * Hook to access the RuntimeAPI from context.
+ *
+ * @throws Error if used outside of RuntimeContext.Provider
+ * @returns RuntimeAPI instance
+ *
+ * @example
+ * ```typescript
+ * function MyPluginComponent() {
+ *   const runtime = useRuntimeContext();
+ *   return (
+ *     <button onClick={() => runtime.submitInteraction("player-1", "pass", {})}>
+ *       Pass
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+export declare function useRuntimeContext(): RuntimeAPI;
+/**
+ * RuntimeProvider component that provides both RuntimeAPI and PluginSessionContext.
+ * This component subscribes to session state changes from the RuntimeAPI and provides
+ * them through PluginSessionContext.
+ *
+ * @example
+ * ```tsx
+ * function PluginRoot() {
+ *   const runtime = createPluginRuntimeAPI();
+ *
+ *   return (
+ *     <RuntimeProvider runtime={runtime}>
+ *       <App />
+ *     </RuntimeProvider>
+ *   );
+ * }
+ * ```
+ */
+export declare function RuntimeProvider({ runtime, children, }: {
+    runtime: RuntimeAPI;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=RuntimeContext.d.ts.map

package/dist/context/RuntimeContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuntimeContext.d.ts","sourceRoot":"","sources":["../../src/context/RuntimeContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAC9E,OAAO,KAAK,EAAE,UAAU,EAAsB,MAAM,yBAAyB,CAAC;AAG9E;;;GAGG;AACH,eAAO,MAAM,cAAc,kCAAyC,CAAC;AAErE;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,iBAAiB,IAAI,UAAU,CAU9C;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,QAAQ,GACT,EAAE;IACD,OAAO,EAAE,UAAU,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,2CA+BA"}

package/dist/context/RuntimeContext.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState, useEffect } from "react";
+import { PluginSessionContext } from "./PluginSessionContext.js";
+/**
+ * React Context for providing RuntimeAPI to plugin components.
+ * This context must be provided by the plugin wrapper, not by the plugin code itself.
+ */
+export const RuntimeContext = createContext(null);
+/**
+ * Hook to access the RuntimeAPI from context.
+ *
+ * @throws Error if used outside of RuntimeContext.Provider
+ * @returns RuntimeAPI instance
+ *
+ * @example
+ * ```typescript
+ * function MyPluginComponent() {
+ *   const runtime = useRuntimeContext();
+ *   return (
+ *     <button onClick={() => runtime.submitInteraction("player-1", "pass", {})}>
+ *       Pass
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+export function useRuntimeContext() {
+    const context = useContext(RuntimeContext);
+    if (!context) {
+        throw new Error("useRuntimeContext must be used within a RuntimeContext.Provider");
+    }
+    return context;
+}
+/**
+ * RuntimeProvider component that provides both RuntimeAPI and PluginSessionContext.
+ * This component subscribes to session state changes from the RuntimeAPI and provides
+ * them through PluginSessionContext.
+ *
+ * @example
+ * ```tsx
+ * function PluginRoot() {
+ *   const runtime = createPluginRuntimeAPI();
+ *
+ *   return (
+ *     <RuntimeProvider runtime={runtime}>
+ *       <App />
+ *     </RuntimeProvider>
+ *   );
+ * }
+ * ```
+ */
+export function RuntimeProvider({ runtime, children, }) {
+    // Subscribe to session state changes
+    const [sessionState, setSessionState] = useState(() => runtime.getSessionState());
+    useEffect(() => {
+        // Subscribe to session state changes via internal API
+        const runtimeWithInternal = runtime;
+        if (runtimeWithInternal._subscribeToSessionState) {
+            return runtimeWithInternal._subscribeToSessionState((state) => {
+                setSessionState(state);
+            });
+        }
+        // Fallback: no session state subscription available
+        return () => { };
+    }, [runtime]);
+    return (_jsx(RuntimeContext.Provider, { value: runtime, children: _jsx(PluginSessionContext.Provider, { value: sessionState, children: children }) }));
+}