@sampleapp.ai/sdk 1.0.29 → 1.0.30

package/dist/components/guardian/header.js

@@ -0,0 +1,61 @@
+"use client";
+import React from "react";
+import { Badge } from "./ui/badge";
+import GlassmorphicCombobox from "./header/glassmorphic-combobox";
+export default function Header({ demoOptions, frameworkOptions, firstFrameworkByUseCase, currentFramework, playgroundLogo, currentUseCase, }) {
+    var _a, _b;
+    // Derive values directly from props (which come from the URL)
+    // No internal state - the URL is the source of truth
+    const selectedUseCase = currentUseCase || ((_a = demoOptions[0]) === null || _a === void 0 ? void 0 : _a.value);
+    const selectedFramework = currentFramework || ((_b = frameworkOptions[0]) === null || _b === void 0 ? void 0 : _b.value);
+    // Build options with hrefs
+    const demoOptionsWithHrefs = demoOptions.map((opt) => {
+        var _a;
+        return (Object.assign(Object.assign({}, opt), { 
+            // Link to first available framework for this use case
+            href: `/${opt.value}?framework=${(firstFrameworkByUseCase === null || firstFrameworkByUseCase === void 0 ? void 0 : firstFrameworkByUseCase[opt.value]) || ((_a = frameworkOptions[0]) === null || _a === void 0 ? void 0 : _a.value)}` }));
+    });
+    const frameworkOptionsWithHrefs = frameworkOptions.map((opt) => (Object.assign(Object.assign({}, opt), { href: `/${selectedUseCase}?framework=${opt.value}` })));
+    // Derive environment metadata for badge styling and label
+    const environment = (process.env.NEXT_PUBLIC_ENVIRONMENT ||
+        process.env.NODE_ENV ||
+        "development").toLowerCase();
+    const envMeta = {
+        production: {
+            label: "Production",
+            badgeClass: "border-emerald-500/30 bg-emerald-500/10 text-emerald-200",
+            dotClass: "bg-emerald-400 shadow-[0_0_0_3px_rgba(16,185,129,0.25)]",
+        },
+        staging: {
+            label: "Staging",
+            badgeClass: "border-amber-500/30 bg-amber-500/10 text-amber-100",
+            dotClass: "bg-amber-400 shadow-[0_0_0_3px_rgba(245,158,11,0.25)]",
+        },
+        test: {
+            label: "Test",
+            badgeClass: "border-cyan-500/30 bg-cyan-500/10 text-cyan-100",
+            dotClass: "bg-cyan-400 shadow-[0_0_0_3px_rgba(34,211,238,0.25)]",
+        },
+        preview: {
+            label: "Preview",
+            badgeClass: "border-sky-500/30 bg-sky-500/10 text-sky-100",
+            dotClass: "bg-sky-400 shadow-[0_0_0_3px_rgba(56,189,248,0.25)]",
+        },
+        development: {
+            label: "Demo Environment",
+            badgeClass: "border-violet-500/30 bg-violet-500/10 text-violet-100",
+            dotClass: "bg-violet-400 shadow-[0_0_0_3px_rgba(139,92,246,0.25)]",
+        },
+    };
+    const meta = envMeta[environment] || envMeta.development;
+    return (React.createElement("div", { className: "grid grid-cols-[1fr_auto_1fr] items-center w-full ml-6" },
+        React.createElement("div", { className: "justify-self-start" }, playgroundLogo),
+        React.createElement("div", { className: "justify-self-center" },
+            React.createElement("div", { className: "flex gap-2" },
+                React.createElement(GlassmorphicCombobox, { options: demoOptionsWithHrefs, value: selectedUseCase, placeholder: "Select use case...", searchPlaceholder: "Search use case..." }),
+                React.createElement(GlassmorphicCombobox, { options: frameworkOptionsWithHrefs, value: selectedFramework, placeholder: "Select framework...", searchPlaceholder: "Search framework...", className: "w-32" }))),
+        React.createElement("div", { className: "justify-self-end mr-6" },
+            React.createElement(Badge, { className: `rounded-full px-5 py-3 flex items-center gap-2 border ${meta.badgeClass} backdrop-blur-sm shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] text-sm`, "aria-label": `${meta.label} environment` },
+                React.createElement("span", { className: `inline-block h-2 w-2 rounded-full ${meta.dotClass}` }),
+                meta.label))));
+}

package/dist/components/guardian/hooks/use-frame-messages.js

@@ -0,0 +1,65 @@
+"use client";
+import { useEffect, useRef } from "react";
+/**
+ * Hook to handle postMessage communication with parent window when in iframe mode.
+ * - Sends IFRAME_READY when mounted
+ * - Listens for UPDATE_VIEW messages and updates URL params accordingly
+ * - Works with useFrameParams() which reads the updated URL params
+ *
+ * Supported UPDATE_VIEW message fields:
+ * - framework: Switch between frameworks (e.g., "nextjs", "react")
+ * - activeFilePath: Change the active file in the editor
+ * - linesStart/linesEnd: Highlight specific line range in the editor
+ * - theme: Override the theme color (hex color)
+ */
+export function useFrameMessages() {
+    const hasSignaledReady = useRef(false);
+    useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        // Check if we're in an iframe
+        const isFrame = window.self !== window.top;
+        if (!isFrame)
+            return;
+        // Signal to parent that we're ready to receive messages
+        if (!hasSignaledReady.current && window.parent) {
+            window.parent.postMessage({ type: "IFRAME_READY" }, "*");
+            hasSignaledReady.current = true;
+        }
+        const handleMessage = (event) => {
+            // Optional: Add origin validation for security in production
+            // if (event.origin !== 'https://your-allowed-origin.com') return;
+            const data = event.data;
+            if (data.type === "UPDATE_VIEW") {
+                const url = new URL(window.location.href);
+                // Update URL params based on message
+                if (data.framework !== undefined) {
+                    url.searchParams.set("framework", data.framework);
+                }
+                if (data.activeFilePath !== undefined) {
+                    url.searchParams.set("activeFilePath", data.activeFilePath);
+                }
+                if (data.linesStart !== undefined) {
+                    url.searchParams.set("linesStart", String(data.linesStart));
+                }
+                if (data.linesEnd !== undefined) {
+                    url.searchParams.set("linesEnd", String(data.linesEnd));
+                }
+                if (data.theme !== undefined) {
+                    url.searchParams.set("theme", data.theme);
+                }
+                if (data.iframeUrl !== undefined) {
+                    url.searchParams.set("iframeUrl", data.iframeUrl);
+                }
+                // Update URL without page reload
+                window.history.replaceState({}, "", url.toString());
+                // Dispatch a custom event so React components can react immediately
+                // (useFrameParams may have a slight delay)
+                window.dispatchEvent(new CustomEvent("frameParamsUpdated", { detail: data }));
+            }
+        };
+        window.addEventListener("message", handleMessage);
+        return () => window.removeEventListener("message", handleMessage);
+    }, []);
+    return {};
+}

package/dist/components/guardian/hooks/use-frame-params.js

@@ -0,0 +1,44 @@
+import { useMemo } from "react";
+/**
+ * Hook to read frame-mode search parameters from URL.
+ * These params override config/context when isFrame=true.
+ *
+ * Note: This is a simplified version that reads from window.location.search.
+ * For Next.js apps, you can use the Next.js version that uses useSearchParams.
+ */
+export function useFrameParams() {
+    return useMemo(() => {
+        if (typeof window === "undefined") {
+            return {
+                isFrame: false,
+                framework: undefined,
+                theme: undefined,
+                activeFilePath: undefined,
+                linesStart: undefined,
+                linesEnd: undefined,
+                iframeUrl: undefined,
+            };
+        }
+        const searchParams = new URLSearchParams(window.location.search);
+        const isFrame = searchParams.get("isFrame") === "true";
+        const framework = searchParams.get("framework") || undefined;
+        const theme = searchParams.get("theme") || undefined;
+        const activeFilePath = searchParams.get("activeFilePath") || undefined;
+        const linesStart = searchParams.get("linesStart")
+            ? parseInt(searchParams.get("linesStart"), 10)
+            : undefined;
+        const linesEnd = searchParams.get("linesEnd")
+            ? parseInt(searchParams.get("linesEnd"), 10)
+            : undefined;
+        const iframeUrl = searchParams.get("iframeUrl") || undefined;
+        return {
+            isFrame,
+            framework,
+            theme,
+            activeFilePath,
+            linesStart,
+            linesEnd,
+            iframeUrl,
+        };
+    }, [typeof window !== "undefined" ? window.location.search : ""]);
+}

package/dist/components/guardian/hooks/use-sandbox-url-loader.js

@@ -0,0 +1,101 @@
+"use client";
+import { useCallback } from "react";
+import { useVmContext } from "../context/vm-context";
+/**
+ * Creates a cache key from sandboxUid and browserUrl.
+ * This allows caching different URLs for the same sandbox.
+ */
+function getCacheKey(sandboxUid, browserUrl) {
+    return `${sandboxUid}::${browserUrl}`;
+}
+/**
+ * Hook that abstracts the logic for loading sandbox URLs.
+ * Returns functions to load URLs and check if they're already loaded.
+ */
+export function useSandboxUrlLoader() {
+    const { setVmUrl, getVmUrl, setVmError, hasError } = useVmContext();
+    /**
+     * Loads a sandbox URL. If useVm is true, fetches from the API.
+     * Otherwise, uses the browserUrl directly.
+     * Returns a promise that resolves to the final URL, or throws if loading fails.
+     *
+     * Caches by sandboxUid + browserUrl to support multiple URLs per sandbox.
+     */
+    const loadSandboxUrl = useCallback(async (config) => {
+        const { sandboxUid, browserUrl, useVm } = config;
+        const cacheKey = getCacheKey(sandboxUid, browserUrl);
+        // Check if URL is already loaded for this specific browserUrl
+        const existingUrl = getVmUrl(cacheKey);
+        if (existingUrl !== undefined) {
+            return existingUrl;
+        }
+        // Check if we've already attempted and failed for this specific browserUrl
+        if (hasError(cacheKey)) {
+            throw new Error(`Previously failed to load sandbox URL for ${sandboxUid} with ${browserUrl}`);
+        }
+        if (useVm) {
+            try {
+                // Fetch VM URL from API
+                // Note: This assumes the API endpoint is available at /api/auto-sandbox
+                // You may need to configure this based on your deployment
+                const apiBaseUrl = typeof window !== "undefined"
+                    ? window.location.origin
+                    : "";
+                const response = await fetch(`${apiBaseUrl}/api/auto-sandbox?url=${encodeURIComponent(browserUrl)}&mode=json`);
+                // Check if response is successful
+                if (!response.ok) {
+                    const errorText = await response.text();
+                    console.error(`Failed to fetch sandbox URL for ${sandboxUid}:`, errorText);
+                    // Mark as error to prevent infinite retries
+                    setVmError(cacheKey);
+                    throw new Error(`Failed to create sandbox: ${response.status} ${response.statusText}`);
+                }
+                const data = await response.json();
+                if (!data.vncUrl) {
+                    console.error(`No vncUrl in response for ${sandboxUid}:`, data);
+                    setVmError(cacheKey);
+                    throw new Error("No vncUrl in sandbox response");
+                }
+                const vncUrl = data.vncUrl;
+                setVmUrl(cacheKey, vncUrl);
+                return vncUrl;
+            }
+            catch (error) {
+                // Mark as error to prevent infinite retries
+                setVmError(cacheKey);
+                throw error;
+            }
+        }
+        else {
+            // Use browserUrl directly (non-VM mode)
+            setVmUrl(cacheKey, browserUrl);
+            return browserUrl;
+        }
+    }, [getVmUrl, setVmUrl, hasError, setVmError]);
+    /**
+     * Gets the URL for a sandbox + browserUrl combination if it's already loaded.
+     * Returns undefined if not loaded.
+     */
+    const getSandboxUrl = useCallback((sandboxUid, browserUrl) => {
+        const cacheKey = getCacheKey(sandboxUid, browserUrl);
+        return getVmUrl(cacheKey);
+    }, [getVmUrl]);
+    /**
+     * Preloads URLs for multiple sandboxes in parallel.
+     * Errors are logged but don't stop other URLs from loading.
+     */
+    const preloadSandboxUrls = useCallback(async (configs) => {
+        // Filter out configs that are already loaded or have errors
+        const configsToLoad = configs.filter((config) => {
+            const cacheKey = getCacheKey(config.sandboxUid, config.browserUrl);
+            return getVmUrl(cacheKey) === undefined && !hasError(cacheKey);
+        });
+        // Load all URLs in parallel, but catch errors individually
+        await Promise.allSettled(configsToLoad.map((config) => loadSandboxUrl(config)));
+    }, [getVmUrl, loadSandboxUrl, hasError]);
+    return {
+        loadSandboxUrl,
+        getSandboxUrl,
+        preloadSandboxUrls,
+    };
+}