skybridge 0.0.0-dev.edc0ede → 0.0.0-dev.edd7e4d

package/dist/web/bridges/types.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.test.js","sourceRoot":"","sources":["../../../src/web/bridges/types.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAE/C,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;IACjC,EAAE,CAAC,iCAAiC,EAAE,GAAG,EAAE;QACzC,MAAM,GAAG,GAAG,IAAI,iBAAiB,CAAC,YAAY,CAAC,CAAC;QAChD,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,6CAA6C,CAAC,CAAC;QACxE,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;QAC3C,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IACxC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+BAA+B,EAAE,GAAG,EAAE;QACvC,MAAM,GAAG,GAAG,IAAI,iBAAiB,CAAC,UAAU,EAAE,2BAA2B,CAAC,CAAC;QAC3E,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,IAAI,CACtB,sEAAsE,CACvE,CAAC;QACF,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAC;IACvD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yBAAyB,EAAE,GAAG,EAAE;QACjC,MAAM,CAAC,IAAI,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IAC3D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { describe, expect, it } from \"vitest\";\nimport { NotSupportedError } from \"./types.js\";\n\ndescribe(\"NotSupportedError\", () => {\n  it(\"includes method name in message\", () => {\n    const err = new NotSupportedError(\"uploadFile\");\n    expect(err.message).toBe(\"uploadFile is not supported in this runtime\");\n    expect(err.name).toBe(\"NotSupportedError\");\n    expect(err.method).toBe(\"uploadFile\");\n  });\n\n  it(\"includes reason when provided\", () => {\n    const err = new NotSupportedError(\"callTool\", \"MCP transport unavailable\");\n    expect(err.message).toBe(\n      \"callTool is not supported in this runtime: MCP transport unavailable\",\n    );\n    expect(err.reason).toBe(\"MCP transport unavailable\");\n  });\n\n  it(\"is an instance of Error\", () => {\n    expect(new NotSupportedError(\"x\")).toBeInstanceOf(Error);\n  });\n});\n"]}

package/dist/web/bridges/use-host-context.d.ts

@@ -0,0 +1,7 @@
+import type { HostContext } from "./types.js";
+/**
+ * @internal
+ * Subscribe to a single {@link HostContext} key via `useSyncExternalStore`.
+ * Used to build the higher-level hooks; prefer those for app code.
+ */
+export declare const useHostContext: <K extends keyof HostContext>(key: K) => HostContext[K];

package/dist/web/bridges/use-host-context.js

@@ -0,0 +1,13 @@
+import { useSyncExternalStore } from "react";
+import { getAdaptor } from "./get-adaptor.js";
+/**
+ * @internal
+ * Subscribe to a single {@link HostContext} key via `useSyncExternalStore`.
+ * Used to build the higher-level hooks; prefer those for app code.
+ */
+export const useHostContext = (key) => {
+    const adaptor = getAdaptor();
+    const store = adaptor.getHostContextStore(key);
+    return useSyncExternalStore(store.subscribe, store.getSnapshot);
+};
+//# sourceMappingURL=use-host-context.js.map

package/dist/web/bridges/use-host-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-host-context.js","sourceRoot":"","sources":["../../../src/web/bridges/use-host-context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,GAAM,EACU,EAAE;IAClB,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,MAAM,KAAK,GAAG,OAAO,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC;IAE/C,OAAO,oBAAoB,CAAC,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;AAClE,CAAC,CAAC","sourcesContent":["import { useSyncExternalStore } from \"react\";\nimport { getAdaptor } from \"./get-adaptor.js\";\nimport type { HostContext } from \"./types.js\";\n\n/**\n * @internal\n * Subscribe to a single {@link HostContext} key via `useSyncExternalStore`.\n * Used to build the higher-level hooks; prefer those for app code.\n */\nexport const useHostContext = <K extends keyof HostContext>(\n  key: K,\n): HostContext[K] => {\n  const adaptor = getAdaptor();\n  const store = adaptor.getHostContextStore(key);\n\n  return useSyncExternalStore(store.subscribe, store.getSnapshot);\n};\n"]}

package/dist/web/components/modal-provider.d.ts

@@ -0,0 +1,4 @@
+import { type ReactNode } from "react";
+export declare function ModalProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/web/components/modal-provider.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useSyncExternalStore } from "react";
+import { getAdaptor } from "../bridges/index.js";
+const modalStyles = `
+.sb-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 9998;
+}
+.sb-modal-container {
+  border-radius: 12px;
+  position: fixed;
+  inset: 0;
+  margin: auto;
+  width: fit-content;
+  height: fit-content;
+  background: white;
+  z-index: 9999;
+}
+`;
+export function ModalProvider({ children }) {
+    const adaptor = getAdaptor();
+    const displayStore = adaptor.getHostContextStore("display");
+    const { mode } = useSyncExternalStore(displayStore.subscribe, displayStore.getSnapshot);
+    const isOpen = mode === "modal";
+    const handleBackdropClick = (e) => {
+        if (e.target === e.currentTarget) {
+            adaptor.closeModal();
+        }
+    };
+    useEffect(() => {
+        if (!isOpen) {
+            return;
+        }
+        const handler = (e) => {
+            if (e.key === "Escape") {
+                adaptor.closeModal();
+            }
+        };
+        document.addEventListener("keydown", handler);
+        return () => document.removeEventListener("keydown", handler);
+    }, [isOpen, adaptor]);
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: modalStyles }), isOpen && (_jsx("div", { role: "dialog", className: "sb-modal-backdrop", onClick: handleBackdropClick })), _jsx("div", { className: isOpen ? "sb-modal-container" : undefined, children: children })] }));
+}
+//# sourceMappingURL=modal-provider.js.map

package/dist/web/components/modal-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-provider.js","sourceRoot":"","sources":["../../../src/web/components/modal-provider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,SAAS,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEjD,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;;;CAiBnB,CAAC;AAEF,MAAM,UAAU,aAAa,CAAC,EAAE,QAAQ,EAA2B;IACjE,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,MAAM,YAAY,GAAG,OAAO,CAAC,mBAAmB,CAAC,SAAS,CAAC,CAAC;IAC5D,MAAM,EAAE,IAAI,EAAE,GAAG,oBAAoB,CACnC,YAAY,CAAC,SAAS,EACtB,YAAY,CAAC,WAAW,CACzB,CAAC;IACF,MAAM,MAAM,GAAG,IAAI,KAAK,OAAO,CAAC;IAEhC,MAAM,mBAAmB,GAAG,CAAC,CAAmB,EAAE,EAAE;QAClD,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa,EAAE,CAAC;YACjC,OAAO,CAAC,UAAU,EAAE,CAAC;QACvB,CAAC;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,OAAO;QACT,CAAC;QACD,MAAM,OAAO,GAAG,CAAC,CAAgB,EAAE,EAAE;YACnC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBACvB,OAAO,CAAC,UAAU,EAAE,CAAC;YACvB,CAAC;QACH,CAAC,CAAC;QACF,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;QAC9C,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IAChE,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAEtB,OAAO,CACL,8BACE,0BAAQ,WAAW,GAAS,EAC3B,MAAM,IAAI,CAET,cACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,mBAAmB,EAC7B,OAAO,EAAE,mBAAmB,GAC5B,CACH,EACD,cAAK,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,SAAS,YACtD,QAAQ,GACL,IACL,CACJ,CAAC;AACJ,CAAC","sourcesContent":["import { type ReactNode, useEffect, useSyncExternalStore } from \"react\";\nimport { getAdaptor } from \"../bridges/index.js\";\n\nconst modalStyles = `\n.sb-modal-backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 9998;\n}\n.sb-modal-container {\n  border-radius: 12px;\n  position: fixed;\n  inset: 0;\n  margin: auto;\n  width: fit-content;\n  height: fit-content;\n  background: white;\n  z-index: 9999;\n}\n`;\n\nexport function ModalProvider({ children }: { children: ReactNode }) {\n  const adaptor = getAdaptor();\n  const displayStore = adaptor.getHostContextStore(\"display\");\n  const { mode } = useSyncExternalStore(\n    displayStore.subscribe,\n    displayStore.getSnapshot,\n  );\n  const isOpen = mode === \"modal\";\n\n  const handleBackdropClick = (e: React.MouseEvent) => {\n    if (e.target === e.currentTarget) {\n      adaptor.closeModal();\n    }\n  };\n\n  useEffect(() => {\n    if (!isOpen) {\n      return;\n    }\n    const handler = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") {\n        adaptor.closeModal();\n      }\n    };\n    document.addEventListener(\"keydown\", handler);\n    return () => document.removeEventListener(\"keydown\", handler);\n  }, [isOpen, adaptor]);\n\n  return (\n    <>\n      <style>{modalStyles}</style>\n      {isOpen && (\n        // biome-ignore lint/a11y/useKeyWithClickEvents: backdrop isn't focusable\n        <div\n          role=\"dialog\"\n          className=\"sb-modal-backdrop\"\n          onClick={handleBackdropClick}\n        />\n      )}\n      <div className={isOpen ? \"sb-modal-container\" : undefined}>\n        {children}\n      </div>\n    </>\n  );\n}\n"]}

package/dist/web/create-store.d.ts

@@ -0,0 +1,29 @@
+import { type StateCreator } from "zustand";
+import type { UnknownObject } from "./types.js";
+/**
+ * Create a Zustand store that is bidirectionally synced with the host's
+ * `viewState`. Local store updates persist to the host, and external host
+ * updates rehydrate the store — making the store the single source of truth
+ * for state that should survive view remounts.
+ *
+ * Use this when you outgrow {@link useViewState} and want first-class Zustand
+ * ergonomics (selectors, actions, middleware). Otherwise prefer `useViewState`.
+ *
+ * Skybridge-internal context fields (see {@link DataLLM}) are filtered out
+ * automatically before reaching your store.
+ *
+ * @typeParam State - Shape of the store's state. Must be a plain object.
+ *
+ * @example
+ * ```ts
+ * export const useStore = createStore<{ count: number; inc: () => void }>(
+ *   (set) => ({
+ *     count: 0,
+ *     inc: () => set((s) => ({ count: s.count + 1 })),
+ *   }),
+ * );
+ * ```
+ *
+ * @see https://docs.skybridge.tech/api-reference/create-store
+ */
+export declare function createStore<State extends UnknownObject>(storeCreator: StateCreator<State, [], [], State>, defaultState?: State | (() => State)): import("zustand").UseBoundStore<import("zustand").StoreApi<State>>;

package/dist/web/create-store.js

@@ -0,0 +1,64 @@
+import { dequal } from "dequal/lite";
+import { create } from "zustand";
+import { getAdaptor } from "./bridges/index.js";
+import { filterViewContext, getInitialState, injectViewContext, serializeState, } from "./helpers/state.js";
+/**
+ * Create a Zustand store that is bidirectionally synced with the host's
+ * `viewState`. Local store updates persist to the host, and external host
+ * updates rehydrate the store — making the store the single source of truth
+ * for state that should survive view remounts.
+ *
+ * Use this when you outgrow {@link useViewState} and want first-class Zustand
+ * ergonomics (selectors, actions, middleware). Otherwise prefer `useViewState`.
+ *
+ * Skybridge-internal context fields (see {@link DataLLM}) are filtered out
+ * automatically before reaching your store.
+ *
+ * @typeParam State - Shape of the store's state. Must be a plain object.
+ *
+ * @example
+ * ```ts
+ * export const useStore = createStore<{ count: number; inc: () => void }>(
+ *   (set) => ({
+ *     count: 0,
+ *     inc: () => set((s) => ({ count: s.count + 1 })),
+ *   }),
+ * );
+ * ```
+ *
+ * @see https://docs.skybridge.tech/api-reference/create-store
+ */
+export function createStore(storeCreator, defaultState) {
+    const initialState = getInitialState(defaultState);
+    const store = create()((...args) => {
+        const baseStore = storeCreator(...args);
+        if (initialState !== null) {
+            return { ...baseStore, ...initialState };
+        }
+        return baseStore;
+    });
+    // Bidirectional sync between the Zustand store and the adaptor's viewState.
+    // Store changes persist to the host; external viewState changes rehydrate the store.
+    store.subscribe((state) => {
+        const serializedState = serializeState(state);
+        if (serializedState !== null && serializedState !== undefined) {
+            const stateToPersist = injectViewContext(serializedState);
+            if (stateToPersist !== null) {
+                getAdaptor().setViewState(stateToPersist);
+            }
+        }
+    });
+    const viewStateStore = getAdaptor().getHostContextStore("viewState");
+    viewStateStore.subscribe(() => {
+        const externalState = viewStateStore.getSnapshot();
+        if (externalState !== null) {
+            const filtered = filterViewContext(externalState);
+            const current = serializeState(store.getState());
+            if (!dequal(filtered, current)) {
+                store.setState(filtered);
+            }
+        }
+    });
+    return store;
+}
+//# sourceMappingURL=create-store.js.map

package/dist/web/create-store.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-store.js","sourceRoot":"","sources":["../../src/web/create-store.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,MAAM,EAAqB,MAAM,SAAS,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,iBAAiB,EACjB,cAAc,GACf,MAAM,oBAAoB,CAAC;AAG5B;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,WAAW,CACzB,YAAgD,EAChD,YAAoC;IAEpC,MAAM,YAAY,GAAG,eAAe,CAAC,YAAY,CAAC,CAAC;IAEnD,MAAM,KAAK,GAAG,MAAM,EAAS,CAC3B,CAAC,GAAG,IAAoD,EAAE,EAAE;QAC1D,MAAM,SAAS,GAAG,YAAY,CAAC,GAAG,IAAI,CAAC,CAAC;QAExC,IAAI,YAAY,KAAK,IAAI,EAAE,CAAC;YAC1B,OAAO,EAAE,GAAG,SAAS,EAAE,GAAG,YAAY,EAAE,CAAC;QAC3C,CAAC;QAED,OAAO,SAAS,CAAC;IACnB,CAAC,CACF,CAAC;IAEF,4EAA4E;IAC5E,qFAAqF;IACrF,KAAK,CAAC,SAAS,CAAC,CAAC,KAAY,EAAE,EAAE;QAC/B,MAAM,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;QAC9C,IAAI,eAAe,KAAK,IAAI,IAAI,eAAe,KAAK,SAAS,EAAE,CAAC;YAC9D,MAAM,cAAc,GAAG,iBAAiB,CAAC,eAAwB,CAAC,CAAC;YACnE,IAAI,cAAc,KAAK,IAAI,EAAE,CAAC;gBAC5B,UAAU,EAAE,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;YAC5C,CAAC;QACH,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,UAAU,EAAE,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC;IACrE,cAAc,CAAC,SAAS,CAAC,GAAG,EAAE;QAC5B,MAAM,aAAa,GAAG,cAAc,CAAC,WAAW,EAAE,CAAC;QACnD,IAAI,aAAa,KAAK,IAAI,EAAE,CAAC;YAC3B,MAAM,QAAQ,GAAG,iBAAiB,CAAC,aAAa,CAAU,CAAC;YAC3D,MAAM,OAAO,GAAG,cAAc,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAU,CAAC;YAC1D,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAC,EAAE,CAAC;gBAC/B,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;YAC3B,CAAC;QACH,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,KAAK,CAAC;AACf,CAAC","sourcesContent":["import { dequal } from \"dequal/lite\";\nimport { create, type StateCreator } from \"zustand\";\nimport { getAdaptor } from \"./bridges/index.js\";\nimport {\n  filterViewContext,\n  getInitialState,\n  injectViewContext,\n  serializeState,\n} from \"./helpers/state.js\";\nimport type { UnknownObject } from \"./types.js\";\n\n/**\n * Create a Zustand store that is bidirectionally synced with the host's\n * `viewState`. Local store updates persist to the host, and external host\n * updates rehydrate the store — making the store the single source of truth\n * for state that should survive view remounts.\n *\n * Use this when you outgrow {@link useViewState} and want first-class Zustand\n * ergonomics (selectors, actions, middleware). Otherwise prefer `useViewState`.\n *\n * Skybridge-internal context fields (see {@link DataLLM}) are filtered out\n * automatically before reaching your store.\n *\n * @typeParam State - Shape of the store's state. Must be a plain object.\n *\n * @example\n * ```ts\n * export const useStore = createStore<{ count: number; inc: () => void }>(\n *   (set) => ({\n *     count: 0,\n *     inc: () => set((s) => ({ count: s.count + 1 })),\n *   }),\n * );\n * ```\n *\n * @see https://docs.skybridge.tech/api-reference/create-store\n */\nexport function createStore<State extends UnknownObject>(\n  storeCreator: StateCreator<State, [], [], State>,\n  defaultState?: State | (() => State),\n) {\n  const initialState = getInitialState(defaultState);\n\n  const store = create<State>()(\n    (...args: Parameters<StateCreator<State, [], [], State>>) => {\n      const baseStore = storeCreator(...args);\n\n      if (initialState !== null) {\n        return { ...baseStore, ...initialState };\n      }\n\n      return baseStore;\n    },\n  );\n\n  // Bidirectional sync between the Zustand store and the adaptor's viewState.\n  // Store changes persist to the host; external viewState changes rehydrate the store.\n  store.subscribe((state: State) => {\n    const serializedState = serializeState(state);\n    if (serializedState !== null && serializedState !== undefined) {\n      const stateToPersist = injectViewContext(serializedState as State);\n      if (stateToPersist !== null) {\n        getAdaptor().setViewState(stateToPersist);\n      }\n    }\n  });\n\n  const viewStateStore = getAdaptor().getHostContextStore(\"viewState\");\n  viewStateStore.subscribe(() => {\n    const externalState = viewStateStore.getSnapshot();\n    if (externalState !== null) {\n      const filtered = filterViewContext(externalState) as State;\n      const current = serializeState(store.getState()) as State;\n      if (!dequal(filtered, current)) {\n        store.setState(filtered);\n      }\n    }\n  });\n\n  return store;\n}\n"]}

package/dist/web/create-store.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/web/create-store.test.js

@@ -0,0 +1,132 @@
+import { cleanup } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi, } from "vitest";
+import { HostAdaptor } from "./bridges/adaptor.js";
+import { getAdaptor } from "./bridges/get-adaptor.js";
+import { McpAppBridge } from "./bridges/mcp-app/bridge.js";
+import { createStore } from "./create-store.js";
+import { VIEW_CONTEXT_KEY } from "./data-llm.js";
+import { getMcpAppHostPostMessageMock, MockResizeObserver, } from "./hooks/test/utils.js";
+describe("createStore", () => {
+    afterEach(() => {
+        HostAdaptor.resetInstance();
+        vi.unstubAllGlobals();
+        vi.resetAllMocks();
+    });
+    describe("apps-sdk mode", () => {
+        let OpenaiMock;
+        beforeEach(() => {
+            OpenaiMock = {
+                widgetState: null,
+                setWidgetState: vi.fn().mockResolvedValue(undefined),
+            };
+            vi.stubGlobal("openai", OpenaiMock);
+            vi.stubGlobal("skybridge", { hostType: "apps-sdk" });
+        });
+        it("should create a store without default state", () => {
+            const storeCreator = () => ({
+                count: 0,
+            });
+            const store = createStore(storeCreator);
+            expect(store.getState()).toEqual({ count: 0 });
+        });
+        it("should create a store with default state", () => {
+            const storeCreator = () => ({
+                count: 0,
+                name: "initial",
+            });
+            const defaultState = { count: 5, name: "default" };
+            const store = createStore(storeCreator, defaultState);
+            expect(store.getState()).toEqual({ count: 5, name: "default" });
+        });
+        it("should initialize from window.openai.widgetState when available", () => {
+            const storeCreator = () => ({
+                count: 0,
+                name: "initial",
+            });
+            const windowState = { count: 20, name: "window" };
+            OpenaiMock.widgetState = { modelContent: windowState };
+            const store = createStore(storeCreator);
+            expect(store.getState()).toEqual({ count: 20, name: "window" });
+        });
+        it("should persist state changes to window.openai.setWidgetState", async () => {
+            const storeCreator = (set) => ({
+                count: 0,
+                increment: () => set((state) => ({ count: state.count + 1 })),
+            });
+            const store = createStore(storeCreator);
+            store.getState().increment();
+            await vi.waitFor(() => {
+                expect(OpenaiMock.setWidgetState).toHaveBeenCalled();
+            });
+            const callArgs = OpenaiMock.setWidgetState.mock.calls[0]?.[0];
+            expect(callArgs).toEqual({
+                modelContent: { count: 1 },
+                privateContent: {},
+            });
+        });
+        it("should filter view context from initial state", () => {
+            const storeCreator = () => ({
+                count: 0,
+            });
+            const windowState = {
+                count: 5,
+                [VIEW_CONTEXT_KEY]: "context-value",
+            };
+            OpenaiMock.widgetState = { modelContent: windowState };
+            const store = createStore(storeCreator);
+            expect(store.getState()).toEqual({ count: 5 });
+            expect(store.getState()[VIEW_CONTEXT_KEY]).toBeUndefined();
+        });
+    });
+    describe("mcp-app mode", () => {
+        beforeEach(() => {
+            vi.stubGlobal("openai", undefined);
+            vi.stubGlobal("skybridge", { hostType: "mcp-app" });
+            vi.stubGlobal("ResizeObserver", MockResizeObserver);
+        });
+        afterEach(async () => {
+            cleanup();
+            HostAdaptor.resetInstance();
+            McpAppBridge.resetInstance();
+        });
+        it("should initialize with null viewState", () => {
+            const adaptor = getAdaptor();
+            const viewState = adaptor.getHostContextStore("viewState").getSnapshot();
+            expect(viewState).toBeNull();
+        });
+        it("should create a store with default state when no persisted state exists", () => {
+            const storeCreator = () => ({
+                count: 0,
+            });
+            const store = createStore(storeCreator);
+            expect(store.getState()).toEqual({ count: 0 });
+        });
+        it("should update in-memory state via setViewState", async () => {
+            const adaptor = getAdaptor();
+            vi.spyOn(adaptor, "setViewState").mockResolvedValue(undefined);
+            const storeCreator = (set) => ({
+                count: 0,
+                increment: () => set((state) => ({ count: state.count + 1 })),
+            });
+            const store = createStore(storeCreator);
+            store.getState().increment();
+            await vi.waitFor(() => {
+                expect(adaptor.setViewState).toHaveBeenCalledWith({ count: 1 });
+            });
+        });
+        it("should notify listeners when view state changes", async () => {
+            const postMessageMock = getMcpAppHostPostMessageMock();
+            vi.stubGlobal("parent", { postMessage: postMessageMock });
+            const adaptor = getAdaptor();
+            const listener = vi.fn();
+            adaptor.getHostContextStore("viewState").subscribe(listener);
+            await adaptor.setViewState({ count: 42 });
+            expect(postMessageMock).toHaveBeenCalledWith(expect.objectContaining({ method: "ui/update-model-context" }), "*");
+            expect(listener).toHaveBeenCalled();
+            expect(adaptor.getHostContextStore("viewState").getSnapshot()).toEqual({
+                count: 42,
+            });
+        });
+    });
+});
+//# sourceMappingURL=create-store.test.js.map

package/dist/web/create-store.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-store.test.js","sourceRoot":"","sources":["../../src/web/create-store.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { cleanup } from \"@testing-library/react\";\nimport {\n  afterEach,\n  beforeEach,\n  describe,\n  expect,\n  it,\n  type Mock,\n  vi,\n} from \"vitest\";\nimport type { StateCreator } from \"zustand\";\nimport { HostAdaptor } from \"./bridges/adaptor.js\";\nimport { getAdaptor } from \"./bridges/get-adaptor.js\";\nimport { McpAppBridge } from \"./bridges/mcp-app/bridge.js\";\nimport { createStore } from \"./create-store.js\";\nimport { VIEW_CONTEXT_KEY } from \"./data-llm.js\";\nimport {\n  getMcpAppHostPostMessageMock,\n  MockResizeObserver,\n} from \"./hooks/test/utils.js\";\n\ndescribe(\"createStore\", () => {\n  afterEach(() => {\n    HostAdaptor.resetInstance();\n    vi.unstubAllGlobals();\n    vi.resetAllMocks();\n  });\n\n  describe(\"apps-sdk mode\", () => {\n    let OpenaiMock: {\n      widgetState: unknown;\n      setWidgetState: Mock;\n    };\n\n    beforeEach(() => {\n      OpenaiMock = {\n        widgetState: null,\n        setWidgetState: vi.fn().mockResolvedValue(undefined),\n      };\n      vi.stubGlobal(\"openai\", OpenaiMock);\n      vi.stubGlobal(\"skybridge\", { hostType: \"apps-sdk\" });\n    });\n\n    it(\"should create a store without default state\", () => {\n      type TestState = { count: number };\n      const storeCreator: StateCreator<TestState, [], [], TestState> = () => ({\n        count: 0,\n      });\n\n      const store = createStore(storeCreator);\n\n      expect(store.getState()).toEqual({ count: 0 });\n    });\n\n    it(\"should create a store with default state\", () => {\n      type TestState = { count: number; name: string };\n      const storeCreator: StateCreator<TestState, [], [], TestState> = () => ({\n        count: 0,\n        name: \"initial\",\n      });\n      const defaultState = { count: 5, name: \"default\" };\n\n      const store = createStore(storeCreator, defaultState);\n\n      expect(store.getState()).toEqual({ count: 5, name: \"default\" });\n    });\n\n    it(\"should initialize from window.openai.widgetState when available\", () => {\n      type TestState = { count: number; name: string };\n      const storeCreator: StateCreator<TestState, [], [], TestState> = () => ({\n        count: 0,\n        name: \"initial\",\n      });\n      const windowState = { count: 20, name: \"window\" };\n      OpenaiMock.widgetState = { modelContent: windowState };\n\n      const store = createStore(storeCreator);\n\n      expect(store.getState()).toEqual({ count: 20, name: \"window\" });\n    });\n\n    it(\"should persist state changes to window.openai.setWidgetState\", async () => {\n      type TestState = { count: number; increment: () => void };\n      const storeCreator: StateCreator<TestState, [], [], TestState> = (\n        set,\n      ) => ({\n        count: 0,\n        increment: () => set((state) => ({ count: state.count + 1 })),\n      });\n\n      const store = createStore(storeCreator);\n      store.getState().increment();\n\n      await vi.waitFor(() => {\n        expect(OpenaiMock.setWidgetState).toHaveBeenCalled();\n      });\n\n      const callArgs = OpenaiMock.setWidgetState.mock.calls[0]?.[0];\n      expect(callArgs).toEqual({\n        modelContent: { count: 1 },\n        privateContent: {},\n      });\n    });\n\n    it(\"should filter view context from initial state\", () => {\n      type TestState = { count: number };\n      const storeCreator: StateCreator<TestState, [], [], TestState> = () => ({\n        count: 0,\n      });\n      const windowState = {\n        count: 5,\n        [VIEW_CONTEXT_KEY]: \"context-value\",\n      };\n      OpenaiMock.widgetState = { modelContent: windowState };\n\n      const store = createStore(storeCreator);\n\n      expect(store.getState()).toEqual({ count: 5 });\n      expect(\n        (store.getState() as Record<string, unknown>)[VIEW_CONTEXT_KEY],\n      ).toBeUndefined();\n    });\n  });\n\n  describe(\"mcp-app mode\", () => {\n    beforeEach(() => {\n      vi.stubGlobal(\"openai\", undefined);\n      vi.stubGlobal(\"skybridge\", { hostType: \"mcp-app\" });\n      vi.stubGlobal(\"ResizeObserver\", MockResizeObserver);\n    });\n\n    afterEach(async () => {\n      cleanup();\n      HostAdaptor.resetInstance();\n      McpAppBridge.resetInstance();\n    });\n\n    it(\"should initialize with null viewState\", () => {\n      const adaptor = getAdaptor();\n      const viewState = adaptor.getHostContextStore(\"viewState\").getSnapshot();\n\n      expect(viewState).toBeNull();\n    });\n\n    it(\"should create a store with default state when no persisted state exists\", () => {\n      type TestState = { count: number };\n      const storeCreator: StateCreator<TestState, [], [], TestState> = () => ({\n        count: 0,\n      });\n\n      const store = createStore(storeCreator);\n\n      expect(store.getState()).toEqual({ count: 0 });\n    });\n\n    it(\"should update in-memory state via setViewState\", async () => {\n      const adaptor = getAdaptor();\n      vi.spyOn(adaptor, \"setViewState\").mockResolvedValue(undefined);\n\n      type TestState = { count: number; increment: () => void };\n      const storeCreator: StateCreator<TestState, [], [], TestState> = (\n        set,\n      ) => ({\n        count: 0,\n        increment: () => set((state) => ({ count: state.count + 1 })),\n      });\n\n      const store = createStore(storeCreator);\n      store.getState().increment();\n\n      await vi.waitFor(() => {\n        expect(adaptor.setViewState).toHaveBeenCalledWith({ count: 1 });\n      });\n    });\n\n    it(\"should notify listeners when view state changes\", async () => {\n      const postMessageMock = getMcpAppHostPostMessageMock();\n      vi.stubGlobal(\"parent\", { postMessage: postMessageMock });\n\n      const adaptor = getAdaptor();\n      const listener = vi.fn();\n\n      adaptor.getHostContextStore(\"viewState\").subscribe(listener);\n      await adaptor.setViewState({ count: 42 });\n\n      expect(postMessageMock).toHaveBeenCalledWith(\n        expect.objectContaining({ method: \"ui/update-model-context\" }),\n        \"*\",\n      );\n      expect(listener).toHaveBeenCalled();\n      expect(adaptor.getHostContextStore(\"viewState\").getSnapshot()).toEqual({\n        count: 42,\n      });\n    });\n  });\n});\n"]}

package/dist/web/data-llm.d.ts

@@ -0,0 +1,47 @@
+import { type ReactNode } from "react";
+/** Text content surfaced to the model by a {@link DataLLM} component. */
+export type DataLLMContent = string;
+/**
+ * A node in the {@link DataLLM} tree. Nested `<DataLLM>` elements form a
+ * hierarchy that is serialized as an indented bullet list for the model.
+ */
+export interface DataLLMNode {
+    id: string;
+    parentId: string | null;
+    content: string | null;
+}
+/**
+ * Key under which the serialized {@link DataLLM} tree is persisted on the
+ * host's `viewState`. The host exposes the value to the model on subsequent
+ * turns.
+ */
+export declare const VIEW_CONTEXT_KEY: "__view_context";
+interface DataLLMProps {
+    content: DataLLMContent | null | undefined;
+    children?: ReactNode;
+}
+/**
+ * Surface in-view content to the LLM so it can reason about what the user is
+ * seeing without an extra tool call.
+ *
+ * Each `<DataLLM>` registers `content` as a node in a tree (parented by any
+ * enclosing `<DataLLM>`). The flattened tree is serialized as an indented
+ * bullet list and persisted on the host's `viewState` under
+ * {@link VIEW_CONTEXT_KEY}; the host then surfaces it to the model as part of
+ * the next turn's context.
+ *
+ * Pass `null`/`undefined` for `content` to register only as a structural
+ * parent (useful for grouping).
+ *
+ * @example
+ * ```tsx
+ * <DataLLM content="Active filters">
+ *   <DataLLM content={`Sort: ${sort}`} />
+ *   <DataLLM content={`Page: ${page}`} />
+ * </DataLLM>
+ * ```
+ *
+ * @see https://docs.skybridge.tech/api-reference/data-llm
+ */
+export declare function DataLLM({ content, children }: DataLLMProps): import("react").JSX.Element;
+export {};

package/dist/{src/web → web}/data-llm.js

@@ -1,6 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useId, } from "react";
-export const WIDGET_CONTEXT_KEY = "__widget_context";
+import { getAdaptor } from "./bridges/index.js";
+/**
+ * Key under which the serialized {@link DataLLM} tree is persisted on the
+ * host's `viewState`. The host exposes the value to the model on subsequent
+ * turns.
+ */
+export const VIEW_CONTEXT_KEY = "__view_context";
 const nodes = new Map();
 function setNode(node) {
     nodes.set(node.id, node);
@@ -12,12 +18,36 @@ function removeNode(id) {
 }
 function onChange() {
     const description = getLLMDescriptionString();
-    window.openai.setWidgetState({
-        ...window.openai.widgetState,
-        [WIDGET_CONTEXT_KEY]: description,
-    });
+    const adaptor = getAdaptor();
+    adaptor.setViewState((prevState) => ({
+        ...prevState,
+        [VIEW_CONTEXT_KEY]: description,
+    }));
 }
 const ParentIdContext = createContext(null);
+/**
+ * Surface in-view content to the LLM so it can reason about what the user is
+ * seeing without an extra tool call.
+ *
+ * Each `<DataLLM>` registers `content` as a node in a tree (parented by any
+ * enclosing `<DataLLM>`). The flattened tree is serialized as an indented
+ * bullet list and persisted on the host's `viewState` under
+ * {@link VIEW_CONTEXT_KEY}; the host then surfaces it to the model as part of
+ * the next turn's context.
+ *
+ * Pass `null`/`undefined` for `content` to register only as a structural
+ * parent (useful for grouping).
+ *
+ * @example
+ * ```tsx
+ * <DataLLM content="Active filters">
+ *   <DataLLM content={`Sort: ${sort}`} />
+ *   <DataLLM content={`Page: ${page}`} />
+ * </DataLLM>
+ * ```
+ *
+ * @see https://docs.skybridge.tech/api-reference/data-llm
+ */
 export function DataLLM({ content, children }) {
     const parentId = useContext(ParentIdContext);
     const id = useId();
@@ -42,8 +72,9 @@ function getLLMDescriptionString() {
     const byParent = new Map();
     for (const node of Array.from(nodes.values())) {
         const key = node.parentId ?? null;
-        if (!byParent.has(key))
+        if (!byParent.has(key)) {
             byParent.set(key, []);
+        }
         byParent.get(key)?.push(node);
     }
     for (const list of byParent.values()) {
@@ -52,8 +83,9 @@ function getLLMDescriptionString() {
     const lines = [];
     function traverseTree(parentId, depth) {
         const children = byParent.get(parentId);
-        if (!children)
+        if (!children) {
             return;
+        }
         for (const child of children) {
             if (child.content?.trim()) {
                 const indent = "  ".repeat(depth);

package/dist/web/data-llm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-llm.js","sourceRoot":"","sources":["../../src/web/data-llm.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  createContext,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useId,\n} from \"react\";\nimport { getAdaptor } from \"./bridges/index.js\";\n\n/** Text content surfaced to the model by a {@link DataLLM} component. */\nexport type DataLLMContent = string;\n\n/**\n * A node in the {@link DataLLM} tree. Nested `<DataLLM>` elements form a\n * hierarchy that is serialized as an indented bullet list for the model.\n */\nexport interface DataLLMNode {\n  id: string;\n  parentId: string | null;\n  content: string | null;\n}\n\n/**\n * Key under which the serialized {@link DataLLM} tree is persisted on the\n * host's `viewState`. The host exposes the value to the model on subsequent\n * turns.\n */\nexport const VIEW_CONTEXT_KEY = \"__view_context\" as const;\n\nconst nodes = new Map<string, DataLLMNode>();\n\nfunction setNode(node: DataLLMNode) {\n  nodes.set(node.id, node);\n  onChange();\n}\n\nfunction removeNode(id: string) {\n  nodes.delete(id);\n  onChange();\n}\n\nfunction onChange() {\n  const description = getLLMDescriptionString();\n  const adaptor = getAdaptor();\n  adaptor.setViewState((prevState) => ({\n    ...prevState,\n    [VIEW_CONTEXT_KEY]: description,\n  }));\n}\n\nconst ParentIdContext = createContext<string | null>(null);\n\ninterface DataLLMProps {\n  content: DataLLMContent | null | undefined;\n  children?: ReactNode;\n}\n\n/**\n * Surface in-view content to the LLM so it can reason about what the user is\n * seeing without an extra tool call.\n *\n * Each `<DataLLM>` registers `content` as a node in a tree (parented by any\n * enclosing `<DataLLM>`). The flattened tree is serialized as an indented\n * bullet list and persisted on the host's `viewState` under\n * {@link VIEW_CONTEXT_KEY}; the host then surfaces it to the model as part of\n * the next turn's context.\n *\n * Pass `null`/`undefined` for `content` to register only as a structural\n * parent (useful for grouping).\n *\n * @example\n * ```tsx\n * <DataLLM content=\"Active filters\">\n *   <DataLLM content={`Sort: ${sort}`} />\n *   <DataLLM content={`Page: ${page}`} />\n * </DataLLM>\n * ```\n *\n * @see https://docs.skybridge.tech/api-reference/data-llm\n */\nexport function DataLLM({ content, children }: DataLLMProps) {\n  const parentId = useContext(ParentIdContext);\n  const id = useId();\n\n  useEffect(() => {\n    if (content) {\n      setNode({\n        id,\n        parentId,\n        content,\n      });\n    } else {\n      removeNode(id);\n    }\n\n    return () => {\n      removeNode(id);\n    };\n  }, [id, parentId, content]);\n\n  return (\n    <ParentIdContext.Provider value={id}>{children}</ParentIdContext.Provider>\n  );\n}\n\nfunction getLLMDescriptionString(): string {\n  const byParent = new Map<string | null, DataLLMNode[]>();\n  for (const node of Array.from(nodes.values())) {\n    const key = node.parentId ?? null;\n    if (!byParent.has(key)) {\n      byParent.set(key, []);\n    }\n    byParent.get(key)?.push(node);\n  }\n\n  for (const list of byParent.values()) {\n    list.sort((a, b) => a.id.localeCompare(b.id));\n  }\n\n  const lines: string[] = [];\n\n  function traverseTree(parentId: string | null, depth: number) {\n    const children = byParent.get(parentId);\n    if (!children) {\n      return;\n    }\n\n    for (const child of children) {\n      if (child.content?.trim()) {\n        const indent = \"  \".repeat(depth);\n        lines.push(`${indent}- ${child.content.trim()}`);\n      }\n      traverseTree(child.id, depth + 1);\n    }\n  }\n\n  traverseTree(null, 0);\n\n  return lines.join(\"\\n\");\n}\n"]}

package/dist/web/data-llm.test.d.ts

@@ -0,0 +1 @@
+export {};