skybridge 0.0.0-dev.fc2b7e8 → 0.0.0-dev.fc2b815

package/dist/web/hooks/use-files.test.js

@@ -0,0 +1,54 @@
+import { renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { AppsSdkAdaptor } from "../bridges/apps-sdk/adaptor.js";
+import { useFiles } from "./use-files.js";
+describe("useFiles", () => {
+    const OpenaiMock = {
+        uploadFile: vi.fn().mockResolvedValue({
+            fileId: `sediment://file_abc123`,
+        }),
+        getFileDownloadUrl: vi.fn(),
+        widgetState: null,
+        setWidgetState: vi.fn(),
+    };
+    beforeEach(() => {
+        vi.stubGlobal("skybridge", { hostType: "apps-sdk" });
+        vi.stubGlobal("openai", OpenaiMock);
+    });
+    afterEach(() => {
+        vi.unstubAllGlobals();
+        vi.clearAllMocks();
+        AppsSdkAdaptor.resetInstance();
+    });
+    const dummyFile = new File([], "test.txt");
+    it("should upload a file to ChatGPT", () => {
+        const { result } = renderHook(() => useFiles());
+        result.current.upload(dummyFile);
+        expect(OpenaiMock.uploadFile).toHaveBeenCalledWith(dummyFile, undefined);
+    });
+    it("should upload a file with library option", () => {
+        const { result } = renderHook(() => useFiles());
+        result.current.upload(dummyFile, { library: true });
+        expect(OpenaiMock.uploadFile).toHaveBeenCalledWith(dummyFile, {
+            library: true,
+        });
+    });
+    it("should select files from ChatGPT", async () => {
+        const selectedFiles = [
+            { fileId: "file_1", fileName: "doc.pdf", mimeType: "application/pdf" },
+        ];
+        OpenaiMock.selectFiles = vi.fn().mockResolvedValue(selectedFiles);
+        const { result } = renderHook(() => useFiles());
+        const files = await result.current.selectFiles();
+        expect(OpenaiMock.selectFiles).toHaveBeenCalled();
+        expect(files).toEqual(selectedFiles);
+        delete OpenaiMock.selectFiles;
+    });
+    it("should download a file from ChatGPT", () => {
+        const fileId = "123";
+        const { result } = renderHook(() => useFiles());
+        result.current.getDownloadUrl({ fileId });
+        expect(OpenaiMock.getFileDownloadUrl).toHaveBeenCalledWith({ fileId });
+    });
+});
+//# sourceMappingURL=use-files.test.js.map

package/dist/web/hooks/use-files.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-files.test.js","sourceRoot":"","sources":["../../../src/web/hooks/use-files.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { renderHook } from \"@testing-library/react\";\nimport { afterEach, beforeEach, describe, expect, it, vi } from \"vitest\";\nimport { AppsSdkAdaptor } from \"../bridges/apps-sdk/adaptor.js\";\nimport { useFiles } from \"./use-files.js\";\n\ndescribe(\"useFiles\", () => {\n  const OpenaiMock: Record<string, unknown> = {\n    uploadFile: vi.fn().mockResolvedValue({\n      fileId: `sediment://file_abc123`,\n    }),\n    getFileDownloadUrl: vi.fn(),\n    widgetState: null,\n    setWidgetState: vi.fn(),\n  };\n\n  beforeEach(() => {\n    vi.stubGlobal(\"skybridge\", { hostType: \"apps-sdk\" });\n    vi.stubGlobal(\"openai\", OpenaiMock);\n  });\n\n  afterEach(() => {\n    vi.unstubAllGlobals();\n    vi.clearAllMocks();\n    AppsSdkAdaptor.resetInstance();\n  });\n\n  const dummyFile = new File([], \"test.txt\");\n\n  it(\"should upload a file to ChatGPT\", () => {\n    const { result } = renderHook(() => useFiles());\n\n    result.current.upload(dummyFile);\n    expect(OpenaiMock.uploadFile).toHaveBeenCalledWith(dummyFile, undefined);\n  });\n\n  it(\"should upload a file with library option\", () => {\n    const { result } = renderHook(() => useFiles());\n\n    result.current.upload(dummyFile, { library: true });\n    expect(OpenaiMock.uploadFile).toHaveBeenCalledWith(dummyFile, {\n      library: true,\n    });\n  });\n\n  it(\"should select files from ChatGPT\", async () => {\n    const selectedFiles = [\n      { fileId: \"file_1\", fileName: \"doc.pdf\", mimeType: \"application/pdf\" },\n    ];\n    OpenaiMock.selectFiles = vi.fn().mockResolvedValue(selectedFiles);\n\n    const { result } = renderHook(() => useFiles());\n\n    const files = await result.current.selectFiles();\n    expect(OpenaiMock.selectFiles).toHaveBeenCalled();\n    expect(files).toEqual(selectedFiles);\n\n    delete OpenaiMock.selectFiles;\n  });\n\n  it(\"should download a file from ChatGPT\", () => {\n    const fileId = \"123\";\n    const { result } = renderHook(() => useFiles());\n\n    result.current.getDownloadUrl({ fileId });\n    expect(OpenaiMock.getFileDownloadUrl).toHaveBeenCalledWith({ fileId });\n  });\n});\n"]}

package/dist/web/hooks/use-layout.d.ts

@@ -0,0 +1,24 @@
+import { type SafeArea, type Theme } from "../bridges/index.js";
+export type LayoutState = {
+    theme: Theme;
+    maxHeight: number | undefined;
+    safeArea: SafeArea;
+};
+/**
+ * Hook for accessing layout and visual environment information.
+ * These values may change on resize or theme toggle.
+ *
+ * @example
+ * ```tsx
+ * const { theme, maxHeight, safeArea } = useLayout();
+ *
+ * // Apply theme-aware styling
+ * const backgroundColor = theme === "dark" ? "#1a1a1a" : "#ffffff";
+ *
+ * // Respect safe area insets
+ * const paddingTop = safeArea.insets.top;
+ * ```
+ *
+ * @see https://docs.skybridge.tech/api-reference/use-layout
+ */
+export declare function useLayout(): LayoutState;

package/dist/web/hooks/use-layout.js

@@ -0,0 +1,25 @@
+import { useHostContext } from "../bridges/index.js";
+/**
+ * Hook for accessing layout and visual environment information.
+ * These values may change on resize or theme toggle.
+ *
+ * @example
+ * ```tsx
+ * const { theme, maxHeight, safeArea } = useLayout();
+ *
+ * // Apply theme-aware styling
+ * const backgroundColor = theme === "dark" ? "#1a1a1a" : "#ffffff";
+ *
+ * // Respect safe area insets
+ * const paddingTop = safeArea.insets.top;
+ * ```
+ *
+ * @see https://docs.skybridge.tech/api-reference/use-layout
+ */
+export function useLayout() {
+    const theme = useHostContext("theme");
+    const maxHeight = useHostContext("maxHeight");
+    const safeArea = useHostContext("safeArea");
+    return { theme, maxHeight, safeArea };
+}
+//# sourceMappingURL=use-layout.js.map

package/dist/web/hooks/use-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-layout.js","sourceRoot":"","sources":["../../../src/web/hooks/use-layout.ts"],"names":[],"mappings":"AAAA,OAAO,EAA6B,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAQhF;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,SAAS;IACvB,MAAM,KAAK,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC;IACtC,MAAM,SAAS,GAAG,cAAc,CAAC,WAAW,CAAC,CAAC;IAC9C,MAAM,QAAQ,GAAG,cAAc,CAAC,UAAU,CAAC,CAAC;IAE5C,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC;AACxC,CAAC","sourcesContent":["import { type SafeArea, type Theme, useHostContext } from \"../bridges/index.js\";\n\nexport type LayoutState = {\n  theme: Theme;\n  maxHeight: number | undefined;\n  safeArea: SafeArea;\n};\n\n/**\n * Hook for accessing layout and visual environment information.\n * These values may change on resize or theme toggle.\n *\n * @example\n * ```tsx\n * const { theme, maxHeight, safeArea } = useLayout();\n *\n * // Apply theme-aware styling\n * const backgroundColor = theme === \"dark\" ? \"#1a1a1a\" : \"#ffffff\";\n *\n * // Respect safe area insets\n * const paddingTop = safeArea.insets.top;\n * ```\n *\n * @see https://docs.skybridge.tech/api-reference/use-layout\n */\nexport function useLayout(): LayoutState {\n  const theme = useHostContext(\"theme\");\n  const maxHeight = useHostContext(\"maxHeight\");\n  const safeArea = useHostContext(\"safeArea\");\n\n  return { theme, maxHeight, safeArea };\n}\n"]}

package/dist/web/hooks/use-layout.test.d.ts

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

package/dist/web/hooks/use-layout.test.js

@@ -0,0 +1,96 @@
+import { renderHook, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { McpAppAdaptor } from "../bridges/mcp-app/adaptor.js";
+import { McpAppBridge } from "../bridges/mcp-app/bridge.js";
+import { getMcpAppHostPostMessageMock, MockResizeObserver, } from "./test/utils.js";
+import { useLayout } from "./use-layout.js";
+describe("useLayout", () => {
+    describe("apps-sdk host type", () => {
+        let OpenaiMock;
+        beforeEach(() => {
+            OpenaiMock = {
+                theme: "light",
+                maxHeight: 500,
+                safeArea: { insets: { top: 0, bottom: 0, left: 0, right: 0 } },
+            };
+            vi.stubGlobal("openai", OpenaiMock);
+            vi.stubGlobal("skybridge", { hostType: "apps-sdk" });
+        });
+        afterEach(() => {
+            vi.unstubAllGlobals();
+            vi.resetAllMocks();
+        });
+        it("should return theme, maxHeight, and safeArea from window.openai", () => {
+            const { result } = renderHook(() => useLayout());
+            expect(result.current.theme).toBe("light");
+            expect(result.current.maxHeight).toBe(500);
+            expect(result.current.safeArea).toEqual({
+                insets: { top: 0, bottom: 0, left: 0, right: 0 },
+            });
+        });
+        it("should return dark theme when set to dark", () => {
+            OpenaiMock.theme = "dark";
+            const { result } = renderHook(() => useLayout());
+            expect(result.current.theme).toBe("dark");
+        });
+        it("should return different maxHeight when set", () => {
+            OpenaiMock.maxHeight = 800;
+            const { result } = renderHook(() => useLayout());
+            expect(result.current.maxHeight).toBe(800);
+        });
+        it("should return safeArea with insets when set", () => {
+            OpenaiMock.safeArea = {
+                insets: { top: 44, bottom: 34, left: 0, right: 0 },
+            };
+            const { result } = renderHook(() => useLayout());
+            expect(result.current.safeArea.insets.top).toBe(44);
+            expect(result.current.safeArea.insets.bottom).toBe(34);
+        });
+    });
+    describe("mcp-app host type", () => {
+        beforeEach(() => {
+            vi.stubGlobal("skybridge", { hostType: "mcp-app" });
+            vi.stubGlobal("ResizeObserver", MockResizeObserver);
+        });
+        afterEach(async () => {
+            vi.unstubAllGlobals();
+            vi.resetAllMocks();
+            McpAppBridge.resetInstance();
+            McpAppAdaptor.resetInstance();
+        });
+        it("should return theme, maxHeight, and safeArea from mcp host context", async () => {
+            vi.stubGlobal("parent", {
+                postMessage: getMcpAppHostPostMessageMock({
+                    theme: "dark",
+                    containerDimensions: { maxHeight: 800, width: 400 },
+                    safeAreaInsets: { top: 20, right: 0, bottom: 34, left: 0 },
+                }),
+            });
+            const { result } = renderHook(() => useLayout());
+            await waitFor(() => {
+                expect(result.current.theme).toBe("dark");
+                expect(result.current.maxHeight).toBe(800);
+                expect(result.current.safeArea).toEqual({
+                    insets: { top: 20, right: 0, bottom: 34, left: 0 },
+                });
+            });
+        });
+        it("should maintain safeArea referential stability when data has not changed", async () => {
+            vi.stubGlobal("parent", {
+                postMessage: getMcpAppHostPostMessageMock({
+                    theme: "light",
+                    containerDimensions: { maxHeight: 500, width: 400 },
+                    safeAreaInsets: { top: 44, right: 0, bottom: 34, left: 0 },
+                }),
+            });
+            const { result, rerender } = renderHook(() => useLayout());
+            await waitFor(() => {
+                expect(result.current.safeArea).toBeDefined();
+            });
+            const initialSafeArea = result.current.safeArea;
+            rerender();
+            expect(result.current.safeArea).toBe(initialSafeArea);
+        });
+    });
+});
+//# sourceMappingURL=use-layout.test.js.map

package/dist/web/hooks/use-layout.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-layout.test.js","sourceRoot":"","sources":["../../../src/web/hooks/use-layout.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { renderHook, waitFor } from \"@testing-library/react\";\nimport { afterEach, beforeEach, describe, expect, it, vi } from \"vitest\";\nimport { McpAppAdaptor } from \"../bridges/mcp-app/adaptor.js\";\nimport { McpAppBridge } from \"../bridges/mcp-app/bridge.js\";\nimport type { SafeArea, Theme } from \"../bridges/types.js\";\nimport {\n  getMcpAppHostPostMessageMock,\n  MockResizeObserver,\n} from \"./test/utils.js\";\nimport { useLayout } from \"./use-layout.js\";\n\ndescribe(\"useLayout\", () => {\n  describe(\"apps-sdk host type\", () => {\n    let OpenaiMock: {\n      theme: Theme;\n      maxHeight: number;\n      safeArea: SafeArea;\n    };\n\n    beforeEach(() => {\n      OpenaiMock = {\n        theme: \"light\",\n        maxHeight: 500,\n        safeArea: { insets: { top: 0, bottom: 0, left: 0, right: 0 } },\n      };\n      vi.stubGlobal(\"openai\", OpenaiMock);\n      vi.stubGlobal(\"skybridge\", { hostType: \"apps-sdk\" });\n    });\n\n    afterEach(() => {\n      vi.unstubAllGlobals();\n      vi.resetAllMocks();\n    });\n\n    it(\"should return theme, maxHeight, and safeArea from window.openai\", () => {\n      const { result } = renderHook(() => useLayout());\n\n      expect(result.current.theme).toBe(\"light\");\n      expect(result.current.maxHeight).toBe(500);\n      expect(result.current.safeArea).toEqual({\n        insets: { top: 0, bottom: 0, left: 0, right: 0 },\n      });\n    });\n\n    it(\"should return dark theme when set to dark\", () => {\n      OpenaiMock.theme = \"dark\";\n      const { result } = renderHook(() => useLayout());\n\n      expect(result.current.theme).toBe(\"dark\");\n    });\n\n    it(\"should return different maxHeight when set\", () => {\n      OpenaiMock.maxHeight = 800;\n      const { result } = renderHook(() => useLayout());\n\n      expect(result.current.maxHeight).toBe(800);\n    });\n\n    it(\"should return safeArea with insets when set\", () => {\n      OpenaiMock.safeArea = {\n        insets: { top: 44, bottom: 34, left: 0, right: 0 },\n      };\n      const { result } = renderHook(() => useLayout());\n\n      expect(result.current.safeArea.insets.top).toBe(44);\n      expect(result.current.safeArea.insets.bottom).toBe(34);\n    });\n  });\n\n  describe(\"mcp-app host type\", () => {\n    beforeEach(() => {\n      vi.stubGlobal(\"skybridge\", { hostType: \"mcp-app\" });\n      vi.stubGlobal(\"ResizeObserver\", MockResizeObserver);\n    });\n\n    afterEach(async () => {\n      vi.unstubAllGlobals();\n      vi.resetAllMocks();\n      McpAppBridge.resetInstance();\n      McpAppAdaptor.resetInstance();\n    });\n\n    it(\"should return theme, maxHeight, and safeArea from mcp host context\", async () => {\n      vi.stubGlobal(\"parent\", {\n        postMessage: getMcpAppHostPostMessageMock({\n          theme: \"dark\",\n          containerDimensions: { maxHeight: 800, width: 400 },\n          safeAreaInsets: { top: 20, right: 0, bottom: 34, left: 0 },\n        }),\n      });\n      const { result } = renderHook(() => useLayout());\n\n      await waitFor(() => {\n        expect(result.current.theme).toBe(\"dark\");\n        expect(result.current.maxHeight).toBe(800);\n        expect(result.current.safeArea).toEqual({\n          insets: { top: 20, right: 0, bottom: 34, left: 0 },\n        });\n      });\n    });\n\n    it(\"should maintain safeArea referential stability when data has not changed\", async () => {\n      vi.stubGlobal(\"parent\", {\n        postMessage: getMcpAppHostPostMessageMock({\n          theme: \"light\",\n          containerDimensions: { maxHeight: 500, width: 400 },\n          safeAreaInsets: { top: 44, right: 0, bottom: 34, left: 0 },\n        }),\n      });\n      const { result, rerender } = renderHook(() => useLayout());\n\n      await waitFor(() => {\n        expect(result.current.safeArea).toBeDefined();\n      });\n\n      const initialSafeArea = result.current.safeArea;\n\n      rerender();\n\n      expect(result.current.safeArea).toBe(initialSafeArea);\n    });\n  });\n});\n"]}

package/dist/web/hooks/use-open-external.d.ts

@@ -0,0 +1,20 @@
+import type { OpenExternalOptions } from "../bridges/types.js";
+/** Function that opens a URL outside the view's iframe, returned by {@link useOpenExternal}. */
+export type OpenExternalFn = (href: string, options?: OpenExternalOptions) => void;
+/**
+ * Open an external URL through the host (e.g. in the user's browser).
+ *
+ * Use this instead of `window.open` or anchor `target="_blank"`, which are
+ * unreliable inside a sandboxed iframe. Hosts may transform the URL (e.g.
+ * ChatGPT appends a `?redirectUrl=…` parameter for allowlisted targets — pass
+ * `redirectUrl: false` to suppress it).
+ *
+ * @example
+ * ```tsx
+ * const openExternal = useOpenExternal();
+ * <button onClick={() => openExternal("https://example.com")}>Open docs</button>
+ * ```
+ *
+ * @see https://docs.skybridge.tech/api-reference/use-open-external
+ */
+export declare function useOpenExternal(): OpenExternalFn;

package/dist/web/hooks/use-open-external.js

@@ -0,0 +1,24 @@
+import { useCallback } from "react";
+import { getAdaptor } from "../bridges/index.js";
+/**
+ * Open an external URL through the host (e.g. in the user's browser).
+ *
+ * Use this instead of `window.open` or anchor `target="_blank"`, which are
+ * unreliable inside a sandboxed iframe. Hosts may transform the URL (e.g.
+ * ChatGPT appends a `?redirectUrl=…` parameter for allowlisted targets — pass
+ * `redirectUrl: false` to suppress it).
+ *
+ * @example
+ * ```tsx
+ * const openExternal = useOpenExternal();
+ * <button onClick={() => openExternal("https://example.com")}>Open docs</button>
+ * ```
+ *
+ * @see https://docs.skybridge.tech/api-reference/use-open-external
+ */
+export function useOpenExternal() {
+    const adaptor = getAdaptor();
+    const openExternal = useCallback((href, options) => adaptor.openExternal(href, options), [adaptor]);
+    return openExternal;
+}
+//# sourceMappingURL=use-open-external.js.map

package/dist/web/hooks/use-open-external.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-open-external.js","sourceRoot":"","sources":["../../../src/web/hooks/use-open-external.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AASjD;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,eAAe;IAC7B,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,IAAY,EAAE,OAA6B,EAAE,EAAE,CAC9C,OAAO,CAAC,YAAY,CAAC,IAAI,EAAE,OAAO,CAAC,EACrC,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,OAAO,YAAY,CAAC;AACtB,CAAC","sourcesContent":["import { useCallback } from \"react\";\nimport { getAdaptor } from \"../bridges/index.js\";\nimport type { OpenExternalOptions } from \"../bridges/types.js\";\n\n/** Function that opens a URL outside the view's iframe, returned by {@link useOpenExternal}. */\nexport type OpenExternalFn = (\n  href: string,\n  options?: OpenExternalOptions,\n) => void;\n\n/**\n * Open an external URL through the host (e.g. in the user's browser).\n *\n * Use this instead of `window.open` or anchor `target=\"_blank\"`, which are\n * unreliable inside a sandboxed iframe. Hosts may transform the URL (e.g.\n * ChatGPT appends a `?redirectUrl=…` parameter for allowlisted targets — pass\n * `redirectUrl: false` to suppress it).\n *\n * @example\n * ```tsx\n * const openExternal = useOpenExternal();\n * <button onClick={() => openExternal(\"https://example.com\")}>Open docs</button>\n * ```\n *\n * @see https://docs.skybridge.tech/api-reference/use-open-external\n */\nexport function useOpenExternal(): OpenExternalFn {\n  const adaptor = getAdaptor();\n  const openExternal = useCallback(\n    (href: string, options?: OpenExternalOptions) =>\n      adaptor.openExternal(href, options),\n    [adaptor],\n  );\n\n  return openExternal;\n}\n"]}

package/dist/web/hooks/use-open-external.test.d.ts

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

package/dist/web/hooks/use-open-external.test.js

@@ -0,0 +1,65 @@
+import { renderHook, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { McpAppBridge } from "../bridges/mcp-app/bridge.js";
+import { getMcpAppHostPostMessageMock, MockResizeObserver, } from "./test/utils.js";
+import { useOpenExternal } from "./use-open-external.js";
+describe("useOpenExternal", () => {
+    describe("apps-sdk host", () => {
+        let openExternalMock;
+        beforeEach(() => {
+            openExternalMock = vi.fn();
+            vi.stubGlobal("openai", {
+                openExternal: openExternalMock,
+            });
+            vi.stubGlobal("skybridge", { hostType: "apps-sdk" });
+        });
+        afterEach(() => {
+            vi.unstubAllGlobals();
+            vi.resetAllMocks();
+        });
+        it("should return a function that calls window.openai.openExternal with the href", () => {
+            const { result } = renderHook(() => useOpenExternal());
+            const href = "https://example.com";
+            result.current(href);
+            expect(openExternalMock).toHaveBeenCalledTimes(1);
+            expect(openExternalMock).toHaveBeenCalledWith({ href });
+        });
+        it("should forward redirectUrl false option to window.openai.openExternal", () => {
+            const { result } = renderHook(() => useOpenExternal());
+            const href = "https://example.com";
+            result.current(href, { redirectUrl: false });
+            expect(openExternalMock).toHaveBeenCalledTimes(1);
+            expect(openExternalMock).toHaveBeenCalledWith({
+                href,
+                redirectUrl: false,
+            });
+        });
+    });
+    describe("mcp-app host", () => {
+        let postMessageMock;
+        beforeEach(() => {
+            vi.stubGlobal("skybridge", { hostType: "mcp-app" });
+            vi.stubGlobal("ResizeObserver", MockResizeObserver);
+            postMessageMock = getMcpAppHostPostMessageMock();
+            vi.stubGlobal("parent", { postMessage: postMessageMock });
+        });
+        afterEach(async () => {
+            vi.unstubAllGlobals();
+            vi.resetAllMocks();
+            McpAppBridge.resetInstance();
+        });
+        it("should return a function that sends ui/open-link request to the MCP host", async () => {
+            const { result } = renderHook(() => useOpenExternal());
+            const href = "https://example.com";
+            result.current(href, { redirectUrl: false });
+            await waitFor(() => {
+                expect(postMessageMock).toHaveBeenCalledWith(expect.objectContaining({
+                    jsonrpc: "2.0",
+                    method: "ui/open-link",
+                    params: { url: href },
+                }), "*");
+            });
+        });
+    });
+});
+//# sourceMappingURL=use-open-external.test.js.map

package/dist/web/hooks/use-open-external.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-open-external.test.js","sourceRoot":"","sources":["../../../src/web/hooks/use-open-external.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { renderHook, waitFor } from \"@testing-library/react\";\nimport { afterEach, beforeEach, describe, expect, it, vi } from \"vitest\";\nimport { McpAppBridge } from \"../bridges/mcp-app/bridge.js\";\nimport {\n  getMcpAppHostPostMessageMock,\n  MockResizeObserver,\n} from \"./test/utils.js\";\nimport { useOpenExternal } from \"./use-open-external.js\";\n\ndescribe(\"useOpenExternal\", () => {\n  describe(\"apps-sdk host\", () => {\n    let openExternalMock: ReturnType<typeof vi.fn>;\n\n    beforeEach(() => {\n      openExternalMock = vi.fn();\n      vi.stubGlobal(\"openai\", {\n        openExternal: openExternalMock,\n      });\n      vi.stubGlobal(\"skybridge\", { hostType: \"apps-sdk\" });\n    });\n\n    afterEach(() => {\n      vi.unstubAllGlobals();\n      vi.resetAllMocks();\n    });\n\n    it(\"should return a function that calls window.openai.openExternal with the href\", () => {\n      const { result } = renderHook(() => useOpenExternal());\n\n      const href = \"https://example.com\";\n      result.current(href);\n\n      expect(openExternalMock).toHaveBeenCalledTimes(1);\n      expect(openExternalMock).toHaveBeenCalledWith({ href });\n    });\n\n    it(\"should forward redirectUrl false option to window.openai.openExternal\", () => {\n      const { result } = renderHook(() => useOpenExternal());\n\n      const href = \"https://example.com\";\n      result.current(href, { redirectUrl: false });\n\n      expect(openExternalMock).toHaveBeenCalledTimes(1);\n      expect(openExternalMock).toHaveBeenCalledWith({\n        href,\n        redirectUrl: false,\n      });\n    });\n  });\n\n  describe(\"mcp-app host\", () => {\n    let postMessageMock: ReturnType<typeof getMcpAppHostPostMessageMock>;\n\n    beforeEach(() => {\n      vi.stubGlobal(\"skybridge\", { hostType: \"mcp-app\" });\n      vi.stubGlobal(\"ResizeObserver\", MockResizeObserver);\n      postMessageMock = getMcpAppHostPostMessageMock();\n      vi.stubGlobal(\"parent\", { postMessage: postMessageMock });\n    });\n\n    afterEach(async () => {\n      vi.unstubAllGlobals();\n      vi.resetAllMocks();\n      McpAppBridge.resetInstance();\n    });\n\n    it(\"should return a function that sends ui/open-link request to the MCP host\", async () => {\n      const { result } = renderHook(() => useOpenExternal());\n\n      const href = \"https://example.com\";\n      result.current(href, { redirectUrl: false });\n\n      await waitFor(() => {\n        expect(postMessageMock).toHaveBeenCalledWith(\n          expect.objectContaining({\n            jsonrpc: \"2.0\",\n            method: \"ui/open-link\",\n            params: { url: href },\n          }),\n          \"*\",\n        );\n      });\n    });\n  });\n});\n"]}

package/dist/web/hooks/use-request-close.d.ts

@@ -0,0 +1,16 @@
+/** Function that asks the host to close the current view, returned by {@link useRequestClose}. */
+export type RequestCloseFn = () => Promise<void>;
+/**
+ * Ask the host to close (dismiss) the current view. The host decides whether
+ * to honor the request. Useful from modal views or after a terminal action
+ * like "Done".
+ *
+ * @example
+ * ```tsx
+ * const close = useRequestClose();
+ * <button onClick={() => close()}>Done</button>
+ * ```
+ *
+ * @see https://docs.skybridge.tech/api-reference/use-request-close
+ */
+export declare function useRequestClose(): RequestCloseFn;

package/dist/web/hooks/use-request-close.js

@@ -0,0 +1,21 @@
+import { useCallback } from "react";
+import { getAdaptor } from "../bridges/index.js";
+/**
+ * Ask the host to close (dismiss) the current view. The host decides whether
+ * to honor the request. Useful from modal views or after a terminal action
+ * like "Done".
+ *
+ * @example
+ * ```tsx
+ * const close = useRequestClose();
+ * <button onClick={() => close()}>Done</button>
+ * ```
+ *
+ * @see https://docs.skybridge.tech/api-reference/use-request-close
+ */
+export function useRequestClose() {
+    const adaptor = getAdaptor();
+    const requestClose = useCallback(() => adaptor.requestClose(), [adaptor]);
+    return requestClose;
+}
+//# sourceMappingURL=use-request-close.js.map

package/dist/web/hooks/use-request-close.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-request-close.js","sourceRoot":"","sources":["../../../src/web/hooks/use-request-close.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAKjD;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,eAAe;IAC7B,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,YAAY,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAE1E,OAAO,YAAY,CAAC;AACtB,CAAC","sourcesContent":["import { useCallback } from \"react\";\nimport { getAdaptor } from \"../bridges/index.js\";\n\n/** Function that asks the host to close the current view, returned by {@link useRequestClose}. */\nexport type RequestCloseFn = () => Promise<void>;\n\n/**\n * Ask the host to close (dismiss) the current view. The host decides whether\n * to honor the request. Useful from modal views or after a terminal action\n * like \"Done\".\n *\n * @example\n * ```tsx\n * const close = useRequestClose();\n * <button onClick={() => close()}>Done</button>\n * ```\n *\n * @see https://docs.skybridge.tech/api-reference/use-request-close\n */\nexport function useRequestClose(): RequestCloseFn {\n  const adaptor = getAdaptor();\n  const requestClose = useCallback(() => adaptor.requestClose(), [adaptor]);\n\n  return requestClose;\n}\n"]}

package/dist/web/hooks/use-request-close.test.d.ts

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

package/dist/web/hooks/use-request-close.test.js

@@ -0,0 +1,52 @@
+import { renderHook, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { McpAppBridge } from "../bridges/mcp-app/bridge.js";
+import { getMcpAppHostPostMessageMock, MockResizeObserver, } from "./test/utils.js";
+import { useRequestClose } from "./use-request-close.js";
+describe("useRequestClose", () => {
+    describe("apps-sdk host", () => {
+        let requestCloseMock;
+        beforeEach(() => {
+            requestCloseMock = vi.fn().mockResolvedValue(undefined);
+            vi.stubGlobal("openai", {
+                requestClose: requestCloseMock,
+            });
+            vi.stubGlobal("skybridge", { hostType: "apps-sdk" });
+        });
+        afterEach(() => {
+            vi.unstubAllGlobals();
+            vi.resetAllMocks();
+        });
+        it("should return a function that calls window.openai.requestClose", async () => {
+            const { result } = renderHook(() => useRequestClose());
+            await result.current();
+            expect(requestCloseMock).toHaveBeenCalledTimes(1);
+            expect(requestCloseMock).toHaveBeenCalledWith();
+        });
+    });
+    describe("mcp-app host", () => {
+        let postMessageMock;
+        beforeEach(() => {
+            vi.stubGlobal("skybridge", { hostType: "mcp-app" });
+            vi.stubGlobal("ResizeObserver", MockResizeObserver);
+            postMessageMock = getMcpAppHostPostMessageMock();
+            vi.stubGlobal("parent", { postMessage: postMessageMock });
+        });
+        afterEach(async () => {
+            vi.unstubAllGlobals();
+            vi.resetAllMocks();
+            McpAppBridge.resetInstance();
+        });
+        it("should send a ui/notifications/request-teardown notification to the MCP host", async () => {
+            const { result } = renderHook(() => useRequestClose());
+            await result.current();
+            await waitFor(() => {
+                expect(postMessageMock).toHaveBeenCalledWith(expect.objectContaining({
+                    jsonrpc: "2.0",
+                    method: "ui/notifications/request-teardown",
+                }), "*");
+            });
+        });
+    });
+});
+//# sourceMappingURL=use-request-close.test.js.map

package/dist/web/hooks/use-request-close.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-request-close.test.js","sourceRoot":"","sources":["../../../src/web/hooks/use-request-close.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AACzE,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAC5D,OAAO,EACL,4BAA4B,EAC5B,kBAAkB,GACnB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEzD,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC/B,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;QAC7B,IAAI,gBAA0C,CAAC;QAE/C,UAAU,CAAC,GAAG,EAAE;YACd,gBAAgB,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC;YACxD,EAAE,CAAC,UAAU,CAAC,QAAQ,EAAE;gBACtB,YAAY,EAAE,gBAAgB;aAC/B,CAAC,CAAC;YACH,EAAE,CAAC,UAAU,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC;QACvD,CAAC,CAAC,CAAC;QAEH,SAAS,CAAC,GAAG,EAAE;YACb,EAAE,CAAC,gBAAgB,EAAE,CAAC;YACtB,EAAE,CAAC,aAAa,EAAE,CAAC;QACrB,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,gEAAgE,EAAE,KAAK,IAAI,EAAE;YAC9E,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,eAAe,EAAE,CAAC,CAAC;YAEvD,MAAM,MAAM,CAAC,OAAO,EAAE,CAAC;YAEvB,MAAM,CAAC,gBAAgB,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;YAClD,MAAM,CAAC,gBAAgB,CAAC,CAAC,oBAAoB,EAAE,CAAC;QAClD,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;QAC5B,IAAI,eAAgE,CAAC;QAErE,UAAU,CAAC,GAAG,EAAE;YACd,EAAE,CAAC,UAAU,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAC;YACpD,EAAE,CAAC,UAAU,CAAC,gBAAgB,EAAE,kBAAkB,CAAC,CAAC;YACpD,eAAe,GAAG,4BAA4B,EAAE,CAAC;YACjD,EAAE,CAAC,UAAU,CAAC,QAAQ,EAAE,EAAE,WAAW,EAAE,eAAe,EAAE,CAAC,CAAC;QAC5D,CAAC,CAAC,CAAC;QAEH,SAAS,CAAC,KAAK,IAAI,EAAE;YACnB,EAAE,CAAC,gBAAgB,EAAE,CAAC;YACtB,EAAE,CAAC,aAAa,EAAE,CAAC;YACnB,YAAY,CAAC,aAAa,EAAE,CAAC;QAC/B,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,8EAA8E,EAAE,KAAK,IAAI,EAAE;YAC5F,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,eAAe,EAAE,CAAC,CAAC;YAEvD,MAAM,MAAM,CAAC,OAAO,EAAE,CAAC;YAEvB,MAAM,OAAO,CAAC,GAAG,EAAE;gBACjB,MAAM,CAAC,eAAe,CAAC,CAAC,oBAAoB,CAC1C,MAAM,CAAC,gBAAgB,CAAC;oBACtB,OAAO,EAAE,KAAK;oBACd,MAAM,EAAE,mCAAmC;iBAC5C,CAAC,EACF,GAAG,CACJ,CAAC;YACJ,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { renderHook, waitFor } from \"@testing-library/react\";\nimport { afterEach, beforeEach, describe, expect, it, vi } from \"vitest\";\nimport { McpAppBridge } from \"../bridges/mcp-app/bridge.js\";\nimport {\n  getMcpAppHostPostMessageMock,\n  MockResizeObserver,\n} from \"./test/utils.js\";\nimport { useRequestClose } from \"./use-request-close.js\";\n\ndescribe(\"useRequestClose\", () => {\n  describe(\"apps-sdk host\", () => {\n    let requestCloseMock: ReturnType<typeof vi.fn>;\n\n    beforeEach(() => {\n      requestCloseMock = vi.fn().mockResolvedValue(undefined);\n      vi.stubGlobal(\"openai\", {\n        requestClose: requestCloseMock,\n      });\n      vi.stubGlobal(\"skybridge\", { hostType: \"apps-sdk\" });\n    });\n\n    afterEach(() => {\n      vi.unstubAllGlobals();\n      vi.resetAllMocks();\n    });\n\n    it(\"should return a function that calls window.openai.requestClose\", async () => {\n      const { result } = renderHook(() => useRequestClose());\n\n      await result.current();\n\n      expect(requestCloseMock).toHaveBeenCalledTimes(1);\n      expect(requestCloseMock).toHaveBeenCalledWith();\n    });\n  });\n\n  describe(\"mcp-app host\", () => {\n    let postMessageMock: ReturnType<typeof getMcpAppHostPostMessageMock>;\n\n    beforeEach(() => {\n      vi.stubGlobal(\"skybridge\", { hostType: \"mcp-app\" });\n      vi.stubGlobal(\"ResizeObserver\", MockResizeObserver);\n      postMessageMock = getMcpAppHostPostMessageMock();\n      vi.stubGlobal(\"parent\", { postMessage: postMessageMock });\n    });\n\n    afterEach(async () => {\n      vi.unstubAllGlobals();\n      vi.resetAllMocks();\n      McpAppBridge.resetInstance();\n    });\n\n    it(\"should send a ui/notifications/request-teardown notification to the MCP host\", async () => {\n      const { result } = renderHook(() => useRequestClose());\n\n      await result.current();\n\n      await waitFor(() => {\n        expect(postMessageMock).toHaveBeenCalledWith(\n          expect.objectContaining({\n            jsonrpc: \"2.0\",\n            method: \"ui/notifications/request-teardown\",\n          }),\n          \"*\",\n        );\n      });\n    });\n  });\n});\n"]}

package/dist/web/hooks/use-request-modal.d.ts

@@ -0,0 +1,24 @@
+import { type RequestModalOptions } from "../bridges/index.js";
+/**
+ * Open the current view in a modal overlay (`displayMode === "modal"`).
+ *
+ * Returns `{ isOpen, params, open }`: `open(opts)` triggers the host to render
+ * the view in a modal, optionally passing `params` that are surfaced back via
+ * `params` here. Useful for confirmation flows, detail panels, or any modal
+ * lifecycle owned by the host.
+ *
+ * Use {@link useDisplayMode} for non-modal display modes.
+ *
+ * @example
+ * ```tsx
+ * const { isOpen, open } = useRequestModal();
+ * <button onClick={() => open({ params: { id: 42 } })}>Show details</button>
+ * ```
+ *
+ * @see https://docs.skybridge.tech/api-reference/use-request-modal
+ */
+export declare function useRequestModal(): {
+    isOpen: boolean;
+    params: Record<string, unknown> | undefined;
+    open: (opts: RequestModalOptions) => void;
+};

package/dist/web/hooks/use-request-modal.js

@@ -0,0 +1,31 @@
+import { useCallback } from "react";
+import { getAdaptor, useHostContext, } from "../bridges/index.js";
+/**
+ * Open the current view in a modal overlay (`displayMode === "modal"`).
+ *
+ * Returns `{ isOpen, params, open }`: `open(opts)` triggers the host to render
+ * the view in a modal, optionally passing `params` that are surfaced back via
+ * `params` here. Useful for confirmation flows, detail panels, or any modal
+ * lifecycle owned by the host.
+ *
+ * Use {@link useDisplayMode} for non-modal display modes.
+ *
+ * @example
+ * ```tsx
+ * const { isOpen, open } = useRequestModal();
+ * <button onClick={() => open({ params: { id: 42 } })}>Show details</button>
+ * ```
+ *
+ * @see https://docs.skybridge.tech/api-reference/use-request-modal
+ */
+export function useRequestModal() {
+    const adaptor = getAdaptor();
+    const display = useHostContext("display");
+    const open = useCallback((opts) => adaptor.openModal(opts), [adaptor]);
+    return {
+        isOpen: display.mode === "modal",
+        params: display.params,
+        open,
+    };
+}
+//# sourceMappingURL=use-request-modal.js.map

package/dist/web/hooks/use-request-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-request-modal.js","sourceRoot":"","sources":["../../../src/web/hooks/use-request-modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EACL,UAAU,EAEV,cAAc,GACf,MAAM,qBAAqB,CAAC;AAE7B;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,eAAe;IAC7B,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,MAAM,OAAO,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,IAAI,GAAG,WAAW,CACtB,CAAC,IAAyB,EAAE,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,EACtD,CAAC,OAAO,CAAC,CACV,CAAC;IACF,OAAO;QACL,MAAM,EAAE,OAAO,CAAC,IAAI,KAAK,OAAO;QAChC,MAAM,EAAE,OAAO,CAAC,MAAM;QACtB,IAAI;KACL,CAAC;AACJ,CAAC","sourcesContent":["import { useCallback } from \"react\";\nimport {\n  getAdaptor,\n  type RequestModalOptions,\n  useHostContext,\n} from \"../bridges/index.js\";\n\n/**\n * Open the current view in a modal overlay (`displayMode === \"modal\"`).\n *\n * Returns `{ isOpen, params, open }`: `open(opts)` triggers the host to render\n * the view in a modal, optionally passing `params` that are surfaced back via\n * `params` here. Useful for confirmation flows, detail panels, or any modal\n * lifecycle owned by the host.\n *\n * Use {@link useDisplayMode} for non-modal display modes.\n *\n * @example\n * ```tsx\n * const { isOpen, open } = useRequestModal();\n * <button onClick={() => open({ params: { id: 42 } })}>Show details</button>\n * ```\n *\n * @see https://docs.skybridge.tech/api-reference/use-request-modal\n */\nexport function useRequestModal() {\n  const adaptor = getAdaptor();\n  const display = useHostContext(\"display\");\n  const open = useCallback(\n    (opts: RequestModalOptions) => adaptor.openModal(opts),\n    [adaptor],\n  );\n  return {\n    isOpen: display.mode === \"modal\",\n    params: display.params,\n    open,\n  };\n}\n"]}

package/dist/web/hooks/use-request-modal.test.d.ts

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

package/dist/web/hooks/use-request-modal.test.js

@@ -0,0 +1,61 @@
+import { renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useRequestModal } from "./use-request-modal.js";
+describe("useRequestModal", () => {
+    let requestModalMock;
+    beforeEach(() => {
+        requestModalMock = vi.fn();
+        vi.stubGlobal("skybridge", { hostType: "apps-sdk" });
+        vi.stubGlobal("openai", {
+            requestModal: requestModalMock,
+            view: { mode: "inline" },
+        });
+    });
+    afterEach(() => {
+        vi.unstubAllGlobals();
+        vi.resetAllMocks();
+    });
+    it("should return an object with open, isOpen, and params properties where isOpen is false when mode is not modal", () => {
+        const { result } = renderHook(() => useRequestModal());
+        expect(typeof result.current).toBe("object");
+        expect(result.current).toHaveProperty("open");
+        expect(result.current).toHaveProperty("isOpen");
+        expect(result.current).toHaveProperty("params");
+        const { open, isOpen, params } = result.current;
+        expect(typeof open).toBe("function");
+        expect(isOpen).toBe(false);
+        expect(params).toBeUndefined();
+    });
+    it("should return isOpen as true when mode is modal", () => {
+        vi.stubGlobal("openai", {
+            requestModal: requestModalMock,
+            view: { mode: "modal" },
+        });
+        const { result } = renderHook(() => useRequestModal());
+        const { isOpen } = result.current;
+        expect(isOpen).toBe(true);
+    });
+    it("should return params from view when available", () => {
+        const testParams = { foo: "bar", baz: 42 };
+        vi.stubGlobal("openai", {
+            requestModal: requestModalMock,
+            view: { mode: "modal", params: testParams },
+        });
+        const { result } = renderHook(() => useRequestModal());
+        const { params } = result.current;
+        expect(params).toEqual(testParams);
+    });
+    it("should call window.openai.requestModal with the options when open is called", () => {
+        const { result } = renderHook(() => useRequestModal());
+        const { open } = result.current;
+        const options = {
+            title: "Test Modal",
+            params: { foo: "bar" },
+            template: "ui://view/modal-template.html",
+        };
+        open(options);
+        expect(requestModalMock).toHaveBeenCalledTimes(1);
+        expect(requestModalMock).toHaveBeenCalledWith(options);
+    });
+});
+//# sourceMappingURL=use-request-modal.test.js.map