@sampleapp.ai/sdk 1.0.35 → 1.0.37

package/dist/components/guardian/header.js

@@ -1,61 +0,0 @@
-"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

@@ -1,65 +0,0 @@
-"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

@@ -1,44 +0,0 @@
-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

@@ -1,101 +0,0 @@
-"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,
-    };
-}