@pulse-editor/react-api 0.1.1-beta.83 → 0.1.1-beta.85

package/dist/hooks/editor/use-app-settings.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Hook to access and update persisted settings for a specific app in the editor.
+ * @param appId The ID of the app whose settings should be retrieved and updated.
+ * @returns `isReady`, the current `settings` object, and an `updateSettings` function.
+ */
+export default function useAppSettings(appId: string): {
+    isReady: boolean;
+    isLoaded: boolean;
+    settings: Record<string, any>;
+    refetch: () => Promise<void>;
+    updateSettings: (newSettings: Record<string, any>) => Promise<void>;
+    deleteSetting: (key: string) => Promise<void>;
+};

package/dist/hooks/editor/use-oauth.d.ts

@@ -0,0 +1,20 @@
+import { OAuthConnectConfig } from "@pulse-editor/shared-utils";
+/**
+ * Hook to manage OAuth credentials for a Pulse App.
+ *
+ * Handles the full OAuth flow automatically:
+ * - Dynamic client registration (RFC 7591) when `registrationEndpoint` is provided
+ * - PKCE code challenge generation
+ * - Opening the authorization modal
+ * - Token exchange and storage (via the Pulse Editor backend)
+ *
+ * @param appId The ID of the app.
+ * @param provider A provider identifier used to namespace the OAuth state.
+ */
+export default function useOAuth(appId: string, provider?: string): {
+    isReady: boolean;
+    isLoading: boolean;
+    isAuthenticated: boolean;
+    connect: (config: OAuthConnectConfig) => Promise<void>;
+    disconnect: () => Promise<void>;
+};

package/dist/hooks/editor/use-snapshot-state.d.ts

@@ -1 +1,9 @@
-export default function useSnapShotState<T>(key: string, initialValue?: T, onRestore?: (value: T) => void): readonly [T, import("react").Dispatch<import("react").SetStateAction<T>>];
+/**
+ * A hook that syncs state with a snapshot context,
+ * allowing for state restoration across component unmounts and remounts.
+ * @param key
+ * @param initialValue
+ * @param onRestore
+ * @returns
+ */
+export default function useSnapshotState<T>(key: string, initialValue?: T, onRestore?: (value: T) => void): readonly [T, import("react").Dispatch<import("react").SetStateAction<T>>];

package/dist/main.d.ts

@@ -1,8 +1,8 @@
 import useAgentTools from "./hooks/agent/use-agent-tools";
 import useAgents from "./hooks/agent/use-agents";
+import useActionEffect from "./hooks/editor/use-action-effect";
 import useLoading from "./hooks/editor/use-loading";
 import useNotification from "./hooks/editor/use-notification";
-import useActionEffect from "./hooks/editor/use-action-effect";
 import useTheme from "./hooks/editor/use-theme";
 import useFile from "./hooks/workspace/use-file";
 import useImageGen from "./hooks/ai-modality/use-image-gen";
@@ -11,8 +11,10 @@ import useOCR from "./hooks/ai-modality/use-ocr";
 import useSTT from "./hooks/ai-modality/use-stt";
 import useTTS from "./hooks/ai-modality/use-tts";
 import useVideoGen from "./hooks/ai-modality/use-video-gen";
+import useAppSettings from "./hooks/editor/use-app-settings";
 import { useArtifact } from "./hooks/editor/use-artifact";
 import useEditorEnv from "./hooks/editor/use-editor-env";
+import useOAuth from "./hooks/editor/use-oauth";
 import useOpenApp from "./hooks/editor/use-open-app";
 import useOpenLink from "./hooks/editor/use-open-link";
 import useOwnedAppView from "./hooks/editor/use-owned-app-view";
@@ -24,4 +26,4 @@ import useTerminal from "./hooks/workspace/use-terminal";
 import useWorkspaceInfo from "./hooks/workspace/use-workspace-info";
 import ReceiveFileProvider from "./providers/receive-file-provider";
 import SnapshotProvider from "./providers/snapshot-provider";
-export { ReceiveFileProvider, SnapshotProvider, useAgents, useAgentTools, useArtifact, useEditorEnv, useFile, useFileSystem, useImageGen, useLLM, useLoading, useNotification, useOCR, useOpenApp, useOpenLink, useOwnedAppView, useReceiveFile, useActionEffect, useSnapshotState, useSTT, useTerminal, useTheme, useTranslations, useTTS, useVideoGen, useWorkspaceInfo, };
+export { ReceiveFileProvider, SnapshotProvider, useActionEffect, useAgents, useAgentTools, useAppSettings, useArtifact, useEditorEnv, useFile, useFileSystem, useImageGen, useLLM, useLoading, useNotification, useOAuth, useOCR, useOpenApp, useOpenLink, useOwnedAppView, useReceiveFile, useSnapshotState, useSTT, useTerminal, useTheme, useTranslations, useTTS, useVideoGen, useWorkspaceInfo, };

package/dist/main.js

@@ -1,4 +1,4 @@
-import { InterModuleCommunication, IMCMessageTypeEnum } from '@pulse-editor/shared-utils';
+import { InterModuleCommunication, IMCMessageTypeEnum, OAuthStatusEnum } from '@pulse-editor/shared-utils';
 import React, { useState, useEffect, useRef, useMemo, useCallback, createContext, useContext } from 'react';
 
 var byteToHex = [];
@@ -492,40 +492,6 @@ function useAgents() {
     };
 }
 
-function useLoading() {
-    const receiverHandlerMap = new Map();
-    const { imc, isReady } = useIMC(receiverHandlerMap, "loading");
-    const [isLoading, setIsLoading] = useState(true);
-    useEffect(() => {
-        if (isReady) {
-            imc?.sendMessage(IMCMessageTypeEnum.EditorLoadingApp, {
-                isLoading,
-            });
-        }
-    }, [isLoading]);
-    function toggleLoading(isLoading) {
-        setIsLoading((prev) => isLoading);
-    }
-    return {
-        isReady,
-        toggleLoading,
-    };
-}
-
-function useNotification() {
-    const receiverHandlerMap = new Map();
-    const { imc, isReady } = useIMC(receiverHandlerMap, "notification");
-    function openNotification(text, type) {
-        if (isReady) {
-            imc?.sendMessage(IMCMessageTypeEnum.EditorShowNotification, {
-                text,
-                type,
-            });
-        }
-    }
-    return { isReady, openNotification };
-}
-
 var MANIFEST_EXT = '.json';
 var BROWSER_LOG_KEY = 'FEDERATION_DEBUG';
 var NameTransformSymbol = {
@@ -5851,6 +5817,40 @@ function useActionEffect(params, deps, isExtReady = true) {
     };
 }
 
+function useLoading() {
+    const receiverHandlerMap = new Map();
+    const { imc, isReady } = useIMC(receiverHandlerMap, "loading");
+    const [isLoading, setIsLoading] = useState(true);
+    useEffect(() => {
+        if (isReady) {
+            imc?.sendMessage(IMCMessageTypeEnum.EditorLoadingApp, {
+                isLoading,
+            });
+        }
+    }, [isLoading]);
+    function toggleLoading(isLoading) {
+        setIsLoading((prev) => isLoading);
+    }
+    return {
+        isReady,
+        toggleLoading,
+    };
+}
+
+function useNotification() {
+    const receiverHandlerMap = new Map();
+    const { imc, isReady } = useIMC(receiverHandlerMap, "notification");
+    function openNotification(text, type) {
+        if (isReady) {
+            imc?.sendMessage(IMCMessageTypeEnum.EditorShowNotification, {
+                text,
+                type,
+            });
+        }
+    }
+    return { isReady, openNotification };
+}
+
 function useTheme() {
     const [theme, setTheme] = useState("light");
     const receiverHandlerMap = new Map();
@@ -6182,6 +6182,54 @@ function useVideoGen() {
     };
 }
 
+/**
+ * Hook to access and update persisted settings for a specific app in the editor.
+ * @param appId The ID of the app whose settings should be retrieved and updated.
+ * @returns `isReady`, the current `settings` object, and an `updateSettings` function.
+ */
+function useAppSettings(appId) {
+    const receiverHandlerMap = new Map();
+    const { imc, isReady } = useIMC(receiverHandlerMap, "app-settings");
+    const [settings, setSettings] = useState({});
+    const [isLoaded, setIsLoaded] = useState(false);
+    useEffect(() => {
+        if (isReady) {
+            refetch();
+        }
+    }, [isReady]);
+    async function refetch() {
+        const result = await imc?.sendMessage(IMCMessageTypeEnum.EditorGetAppSettings, { appId });
+        setSettings(result ?? {});
+        setIsLoaded(true);
+    }
+    async function updateSettings(newSettings) {
+        await imc?.sendMessage(IMCMessageTypeEnum.EditorSetAppSettings, {
+            appId,
+            settings: newSettings,
+        });
+        setSettings((prev) => ({ ...prev, ...newSettings }));
+    }
+    async function deleteSetting(key) {
+        await imc?.sendMessage(IMCMessageTypeEnum.EditorDeleteAppSetting, {
+            appId,
+            key,
+        });
+        setSettings((prev) => {
+            const next = { ...prev };
+            delete next[key];
+            return next;
+        });
+    }
+    return {
+        isReady,
+        isLoaded,
+        settings,
+        refetch,
+        updateSettings,
+        deleteSetting,
+    };
+}
+
 function useArtifact() {
     const receiverHandlerMap = new Map();
     const { imc, isReady } = useIMC(receiverHandlerMap, "artifact");
@@ -6223,6 +6271,101 @@ function useEditorEnv() {
     };
 }
 
+function generateRandomString(length) {
+    const array = new Uint8Array(length);
+    crypto.getRandomValues(array);
+    return Array.from(array, (b) => b.toString(16).padStart(2, "0")).join("");
+}
+/**
+ * Hook to manage OAuth credentials for a Pulse App.
+ *
+ * Handles the full OAuth flow automatically:
+ * - Dynamic client registration (RFC 7591) when `registrationEndpoint` is provided
+ * - PKCE code challenge generation
+ * - Opening the authorization modal
+ * - Token exchange and storage (via the Pulse Editor backend)
+ *
+ * @param appId The ID of the app.
+ * @param provider A provider identifier used to namespace the OAuth state.
+ */
+function useOAuth(appId, provider = "default") {
+    const { isReady, isLoaded } = useAppSettings(appId);
+    const [isAuthenticated, setIsAuthenticated] = useState(false);
+    const receiverHandlerMap = new Map();
+    const { imc, isReady: isIMCReady } = useIMC(receiverHandlerMap, "oauth");
+    async function checkAuthStatus() {
+        if (!isIMCReady)
+            return;
+        try {
+            const status = await imc?.sendMessage(IMCMessageTypeEnum.EditorOAuthCheckStatus, { appId, provider });
+            setIsAuthenticated(status === OAuthStatusEnum.Authenticated);
+        }
+        catch {
+            setIsAuthenticated(false);
+        }
+    }
+    useEffect(() => {
+        checkAuthStatus();
+    }, [isIMCReady]);
+    /**
+     * Initiate the OAuth flow. The editor handles everything:
+     * - Dynamic client registration (if `registrationEndpoint` is provided and `clientId` is omitted)
+     * - PKCE (`codeVerifier` is auto-generated if not provided)
+     * - Opening the consent modal and authorization window
+     * - Token exchange and storage
+     */
+    async function connect(config) {
+        if (!isIMCReady) {
+            throw new Error("IMC is not ready.");
+        }
+        // Auto-generate PKCE code verifier if not provided
+        const resolvedConfig = { ...config };
+        if (!resolvedConfig.codeVerifier) {
+            resolvedConfig.codeVerifier = generateRandomString(64);
+            resolvedConfig.codeChallengeMethod =
+                resolvedConfig.codeChallengeMethod ?? "S256";
+        }
+        await imc?.sendMessage(IMCMessageTypeEnum.EditorOAuthConnect, {
+            appId,
+            provider,
+            config: resolvedConfig,
+        });
+    }
+    /**
+     * Sign out: sends a disconnect request through the editor to remove
+     * stored OAuth tokens on the backend for this provider.
+     */
+    async function disconnect() {
+        if (!isIMCReady) {
+            throw new Error("IMC is not ready.");
+        }
+        await imc?.sendMessage(IMCMessageTypeEnum.EditorOAuthDisconnect, {
+            appId,
+            provider,
+        });
+        setIsAuthenticated(false);
+    }
+    // Revalidate OAuth status when the user returns to the tab
+    useEffect(() => {
+        function handleVisibilityChange() {
+            if (document.visibilityState === "visible") {
+                checkAuthStatus();
+            }
+        }
+        document.addEventListener("visibilitychange", handleVisibilityChange);
+        return () => {
+            document.removeEventListener("visibilitychange", handleVisibilityChange);
+        };
+    }, [isIMCReady]);
+    return {
+        isReady,
+        isLoading: !isLoaded,
+        isAuthenticated,
+        connect,
+        disconnect,
+    };
+}
+
 function useOpenApp() {
     const receiverHandlerMap = new Map();
     const { imc, isReady } = useIMC(receiverHandlerMap, "open-app");
@@ -6315,7 +6458,15 @@ function SnapshotProvider({ children, }) {
     return (React.createElement(SnapshotContext.Provider, { value: { states, setStates } }, children));
 }
 
-function useSnapShotState(key, initialValue, onRestore) {
+/**
+ * A hook that syncs state with a snapshot context,
+ * allowing for state restoration across component unmounts and remounts.
+ * @param key
+ * @param initialValue
+ * @param onRestore
+ * @returns
+ */
+function useSnapshotState(key, initialValue, onRestore) {
     const snapshotContext = useContext(SnapshotContext);
     if (!snapshotContext) {
         throw new Error("useSnapShotState must be used within a SnapshotProvider");
@@ -6543,5 +6694,5 @@ function useWorkspaceInfo() {
     };
 }
 
-export { ReceiveFileProvider, SnapshotProvider, useActionEffect, useAgentTools, useAgents, useArtifact, useEditorEnv, useFile, useFileSystem, useImageGen, useLLM, useLoading, useNotification, useOCR, useOpenApp, useOpenLink, useOwnedAppView, useReceiveFile, useSTT, useSnapShotState as useSnapshotState, useTTS, useTerminal, useTheme, useTranslations, useVideoGen, useWorkspaceInfo };
+export { ReceiveFileProvider, SnapshotProvider, useActionEffect, useAgentTools, useAgents, useAppSettings, useArtifact, useEditorEnv, useFile, useFileSystem, useImageGen, useLLM, useLoading, useNotification, useOAuth, useOCR, useOpenApp, useOpenLink, useOwnedAppView, useReceiveFile, useSTT, useSnapshotState, useTTS, useTerminal, useTheme, useTranslations, useVideoGen, useWorkspaceInfo };
 //# sourceMappingURL=main.js.map