@sampleapp.ai/sdk 1.0.36 → 1.0.37

package/dist/components/guardian/context/guardian-context.js

@@ -1,94 +0,0 @@
-"use client";
-import React, { createContext, useContext, useState, useCallback, } from "react";
-import { CodeLanguage, } from "../types/ide-types";
-const GuardianContext = createContext(undefined);
-export function GuardianProvider({ children }) {
-    const [previewUrl, setPreviewUrlState] = useState("");
-    const [isBrowserMaximized, setIsBrowserMaximized] = useState(false);
-    const [currentView, setCurrentViewState] = useState("preview");
-    // Code state
-    const [code, setCode] = useState("");
-    const [language, setLanguage] = useState(CodeLanguage.TEXT);
-    const [activeFileName, setActiveFileName] = useState("");
-    const [activeFilePath, setActiveFilePath] = useState("");
-    const [activeLineNumber, setActiveLineNumber] = useState(undefined);
-    const [activeLineRange, setActiveLineRange] = useState(undefined);
-    const [isGeneratingCode, setIsGeneratingCode] = useState(false);
-    // Generated code and file tree
-    const [generatedCode, setGeneratedCodeState] = useState({});
-    const [fileTree, setFileTree] = useState({
-        name: "root",
-        children: {},
-        type: "folder",
-        metadata: {
-            response_type: "CodeOutput",
-            file_path: "",
-            code_file_name: "",
-            code_language: CodeLanguage.TEXT,
-            dependencies_to_install: [],
-            framework: null,
-            full_code: "",
-        },
-    });
-    // Dependencies and edited files
-    const [activeDependenciesToInstall, setActiveDependenciesToInstall] = useState([]);
-    const [filesEdited, setFilesEdited] = useState({});
-    const setPreviewUrl = useCallback((url) => {
-        setPreviewUrlState(url);
-    }, []);
-    const setIsBrowserMaximizedState = useCallback((maximized) => {
-        setIsBrowserMaximized(maximized);
-    }, []);
-    const setCurrentView = useCallback((view) => {
-        setCurrentViewState(view);
-    }, []);
-    const updateCode = useCallback((newCode) => {
-        setCode(newCode);
-    }, []);
-    const setGeneratedCode = useCallback((generatedCode) => {
-        if (typeof generatedCode === "function") {
-            setGeneratedCodeState((prev) => generatedCode(prev));
-        }
-        else {
-            setGeneratedCodeState(generatedCode);
-        }
-    }, []);
-    const value = {
-        previewUrl,
-        setPreviewUrl,
-        isBrowserMaximized,
-        setIsBrowserMaximized: setIsBrowserMaximizedState,
-        currentView,
-        setCurrentView,
-        code,
-        updateCode,
-        language,
-        setLanguage,
-        activeFileName,
-        setActiveFileName,
-        activeFilePath,
-        setActiveFilePath,
-        activeLineNumber,
-        setActiveLineNumber,
-        activeLineRange,
-        setActiveLineRange,
-        isGeneratingCode,
-        setIsGeneratingCode,
-        generatedCode,
-        setGeneratedCode,
-        fileTree,
-        setFileTree,
-        activeDependenciesToInstall,
-        setActiveDependenciesToInstall,
-        filesEdited,
-        setFilesEdited,
-    };
-    return (React.createElement(GuardianContext.Provider, { value: value }, children));
-}
-export function useGuardianContext() {
-    const context = useContext(GuardianContext);
-    if (!context) {
-        throw new Error("useGuardianContext must be used within a GuardianProvider");
-    }
-    return context;
-}

package/dist/components/guardian/context/vm-context.js

@@ -1,28 +0,0 @@
-"use client";
-import React, { createContext, useContext, useState } from "react";
-const VmContext = createContext(undefined);
-export const VmProvider = ({ children }) => {
-    const [vmUrlMap, setVmUrlMap] = useState({});
-    const setVmUrl = (uid, url) => {
-        setVmUrlMap((prev) => (Object.assign(Object.assign({}, prev), { [uid]: url })));
-    };
-    const getVmUrl = (uid) => {
-        const value = vmUrlMap[uid];
-        // Return undefined if it's an error marker
-        return value === "error" ? undefined : value;
-    };
-    const setVmError = (uid) => {
-        setVmUrlMap((prev) => (Object.assign(Object.assign({}, prev), { [uid]: "error" })));
-    };
-    const hasError = (uid) => {
-        return vmUrlMap[uid] === "error";
-    };
-    return (React.createElement(VmContext.Provider, { value: { vmUrlMap, setVmUrl, getVmUrl, setVmError, hasError } }, children));
-};
-export const useVmContext = () => {
-    const context = useContext(VmContext);
-    if (!context) {
-        throw new Error("useVmContext must be used within a VmProvider");
-    }
-    return context;
-};

package/dist/components/guardian/default-guide-view.js

@@ -1,34 +0,0 @@
-"use client";
-import React from "react";
-import { Markdown } from "./ui/markdown";
-export default function DefaultGuideView({ themeColor, }) {
-    return (React.createElement("div", { className: "h-full flex flex-col" },
-        React.createElement("div", { className: "flex-1 px-8 py-6" },
-            React.createElement(Markdown, { className: "text-gray-100", themeColor: themeColor }, `# Guardian Guide
-
-Learn how to use Guardian to build and deploy your application with confidence.
-
-## Getting Started
-
-Guardian provides a comprehensive development environment with real-time preview, code editing, and AI assistance.
-
-### Features
-
-- **Live Preview**: See your changes instantly as you code
-- **Code Editor**: Edit files directly in the browser
-- **AI Assistant**: Get help with your code using the Ask AI feature
-
-### Navigation
-
-Use the tabs at the top to switch between:
-- **Guide**: View this documentation
-- **Ask AI**: Get AI-powered assistance with your code
-
-### Code Editing
-
-Select files from the file selector to view and edit them. The editor supports syntax highlighting and automatic formatting.
-
-### Preview
-
-The preview panel shows your running application. Use the reload button to refresh the preview when needed.`))));
-}

package/dist/components/guardian/demo/guardian-demo.js

@@ -1,35 +0,0 @@
-"use client";
-import React, { useEffect, useState, useCallback } from "react";
-import ConsoleWithApp from "../ui/console-with-app";
-import { useGuardianContext } from "../context/guardian-context";
-import ConsoleWithGuide from "./left-view";
-import RightView from "../right-view/right-view";
-export default function GuardianDemo({ CustomConsole, GuideView, browserUrl, playgroundUid, useVm, codeZipFile, completeCodeZipFile, variant, themeColor, hasPreview, isFrame = false, isGuardian = false, }) {
-    const { isBrowserMaximized } = useGuardianContext();
-    const { setCurrentView } = useGuardianContext();
-    const [reloadCounter, setReloadCounter] = useState(0);
-    const [overlayStage, setOverlayStage] = useState("hidden");
-    const handleReloadPreview = useCallback(() => {
-        setReloadCounter((c) => c + 1);
-    }, []);
-    const handleStageChange = useCallback((stage) => {
-        setOverlayStage(stage);
-        if (stage === "rebuilding") {
-            // Simulate a 3-second rebuild then hide
-            setTimeout(() => setOverlayStage("hidden"), 3000);
-        }
-    }, []);
-    useEffect(() => {
-        setCurrentView("preview");
-    }, [setCurrentView]);
-    // If isFrame, just return RightView directly
-    if (isFrame) {
-        return (React.createElement(RightView, { reloadCounter: reloadCounter, overlayStage: overlayStage, browserUrl: browserUrl, useVm: useVm, codeZipFile: codeZipFile, hasPreview: hasPreview, variant: variant, themeColor: themeColor, completeCodeZipFile: completeCodeZipFile, isGuardian: isGuardian }));
-    }
-    // If browser is maximized, render RightView at full size without the console
-    if (isBrowserMaximized && isGuardian) {
-        return (React.createElement("div", { className: "w-full h-full rounded-2xl border border-border overflow-hidden" },
-            React.createElement(RightView, { reloadCounter: reloadCounter, overlayStage: overlayStage, browserUrl: browserUrl, useVm: useVm, codeZipFile: codeZipFile, hasPreview: hasPreview, variant: variant, themeColor: themeColor, completeCodeZipFile: completeCodeZipFile, isGuardian: isGuardian, isBrowserMaximized: true })));
-    }
-    return (React.createElement(ConsoleWithApp, { containerClassName: "rounded-2xl border border-border", console: React.createElement(ConsoleWithGuide, { CustomConsole: CustomConsole, GuideView: GuideView, playgroundUid: playgroundUid, onReloadPreview: handleReloadPreview, onStageChange: handleStageChange, codeZipFile: codeZipFile, themeColor: themeColor }), app: React.createElement(RightView, { reloadCounter: reloadCounter, overlayStage: overlayStage, browserUrl: browserUrl, useVm: useVm, codeZipFile: codeZipFile, hasPreview: hasPreview, variant: variant, themeColor: themeColor, completeCodeZipFile: completeCodeZipFile, isGuardian: isGuardian }) }));
-}

package/dist/components/guardian/demo/left-view/toggle.js

@@ -1,28 +0,0 @@
-"use client";
-import React from "react";
-import { motion } from "framer-motion";
-import { cn } from "../../../../lib/utils";
-export default function SlidingEditPreviewToggle({ playgroundUid, variant = "default", buttonClassName = "", tabs = [
-    { id: "editor", label: "Edit" },
-    { id: "preview", label: "Preview" },
-], currentView, setCurrentView, }) {
-    // Outer div and button shape depending on variant
-    const rootClasses = variant === "pill"
-        ? "relative inline-flex items-center bg-muted/30 rounded-full p-1 border border-border/50"
-        : "relative inline-flex items-center bg-muted/30 rounded-lg p-1";
-    const btnShape = variant === "pill" ? "rounded-full" : "rounded-md";
-    const highlightShape = variant === "pill" ? "rounded-full" : "rounded-md";
-    // Default button padding if none provided
-    const defaultButtonPadding = variant === "pill" ? "px-5 py-2" : "px-4 py-1.5";
-    return (React.createElement("div", { className: rootClasses }, tabs.map((tab) => (React.createElement("button", { key: tab.id, onClick: () => setCurrentView(tab.id), className: cn(`relative ${defaultButtonPadding} text-sm font-medium transition-colors duration-150 ${btnShape} ${currentView === tab.id
-            ? "text-foreground"
-            : "text-muted-foreground hover:text-foreground/80"}`, buttonClassName), style: {
-            WebkitTapHighlightColor: "transparent",
-        } },
-        currentView === tab.id && (React.createElement(motion.div, { layoutId: "activeTabGuide", className: cn(`absolute inset-0 bg-neutral-200 dark:bg-neutral-700 ${highlightShape} shadow-sm border border-border/50`), initial: false, transition: {
-                type: "spring",
-                stiffness: 500,
-                damping: 30,
-            } })),
-        React.createElement("span", { className: "relative z-10" }, tab.label))))));
-}

package/dist/components/guardian/demo/left-view.js

@@ -1,49 +0,0 @@
-"use client";
-import React, { useMemo, useState } from "react";
-import SlidingConsoleGuideToggle from "./left-view/toggle";
-import AskAiView from "../ask-ai-view";
-import DefaultGuideView from "../default-guide-view";
-import { Markdown } from "../ui/markdown";
-export default function ConsoleWithGuide({ CustomConsole, GuideView, playgroundUid, onReloadPreview, onStageChange, codeZipFile, themeColor, }) {
-    const [currentView, setCurrentView] = useState("console");
-    const isConsoleView = useMemo(() => currentView === "console", [currentView]);
-    const isGuideView = useMemo(() => currentView === "guide", [currentView]);
-    const isChatView = useMemo(() => currentView === "chat", [currentView]);
-    const renderCustomConsole = () => {
-        if (typeof CustomConsole === "string") {
-            return (React.createElement("div", { className: "h-full flex flex-col" },
-                React.createElement("div", { className: "flex-1 px-8 py-6" },
-                    React.createElement(Markdown, { className: "text-gray-100", themeColor: themeColor }, CustomConsole))));
-        }
-        const CustomConsoleComponent = CustomConsole;
-        return (React.createElement(CustomConsoleComponent, { onReloadPreview: onReloadPreview !== null && onReloadPreview !== void 0 ? onReloadPreview : (() => { }), onStageChange: onStageChange !== null && onStageChange !== void 0 ? onStageChange : (() => { }), themeColor: themeColor }));
-    };
-    // Determine which guide view to render
-    const renderGuideView = () => {
-        if (!GuideView) {
-            // If no GuideView provided, render default
-            return (React.createElement(DefaultGuideView, { onReloadPreview: onReloadPreview !== null && onReloadPreview !== void 0 ? onReloadPreview : (() => { }), onStageChange: onStageChange !== null && onStageChange !== void 0 ? onStageChange : (() => { }), themeColor: themeColor }));
-        }
-        // If GuideView is a string, render as markdown
-        if (typeof GuideView === "string") {
-            return (React.createElement("div", { className: "h-full flex flex-col" },
-                React.createElement("div", { className: "flex-1 px-8 py-6" },
-                    React.createElement(Markdown, { className: "text-gray-100", themeColor: themeColor }, GuideView))));
-        }
-        // Otherwise, render as React component
-        const GuideComponent = GuideView;
-        return React.createElement(GuideComponent, null);
-    };
-    return (React.createElement("div", { className: "flex-1 min-h-0 relative" },
-        React.createElement("div", { className: "flex justify-center border-b border-border" },
-            React.createElement(SlidingConsoleGuideToggle, { playgroundUid: playgroundUid, variant: "pill", buttonClassName: "text-sm px-4 py-1", currentView: currentView, setCurrentView: setCurrentView, tabs: [
-                    { id: "console", label: "Guide" },
-                    ...(GuideView ? [{ id: "guide-og", label: "Guide OG" }] : []),
-                    { id: "chat", label: "Ask AI" },
-                ] })),
-        React.createElement("div", { className: "h-[calc(100vh-9.5rem)] min-h-0 overflow-hidden" },
-            React.createElement("div", { className: "h-full min-h-0 overflow-y-auto" },
-                isConsoleView && renderCustomConsole(),
-                isGuideView && renderGuideView(),
-                isChatView && (React.createElement(AskAiView, { codeZipFile: codeZipFile, playgroundUid: playgroundUid, themeColor: themeColor }))))));
-}

package/dist/components/guardian/guardian-component.js

@@ -1,79 +0,0 @@
-"use client";
-import Header from "./header";
-import AppLayoutNoSidebar from "./app-layout-no-sidebar";
-import GuardianDemo from "./demo/guardian-demo";
-import React, { useEffect, useRef } from "react";
-import { useGuardianContext } from "./context/guardian-context";
-import { useSandboxUrlLoader } from "./hooks/use-sandbox-url-loader";
-import { useFrameMessages } from "./hooks/use-frame-messages";
-export default function GuardianComponent({ demoOptions, frameworkOptions, firstFrameworkByUseCase, currentFramework, currentUseCase, CustomConsole, GuideView, playgroundLogo, playgroundUid, browserUrl, useVm, sandboxUid, codeZipFile, consoleUrlConfigs, completeCodeZipFile, variant, themeColor, hasPreview = true, isFrame = false, }) {
-    const { previewUrl, setPreviewUrl } = useGuardianContext();
-    const { getSandboxUrl, loadSandboxUrl, preloadSandboxUrls } = useSandboxUrlLoader();
-    // Initialize postMessage listener for iframe communication
-    // This sends IFRAME_READY and listens for UPDATE_VIEW messages
-    useFrameMessages();
-    // Track which console configs we've preloaded to prevent duplicates
-    const preloadedConfigsRef = useRef("");
-    // Track which main sandbox we've loaded to prevent duplicates
-    const loadedSandboxRef = useRef("");
-    // Preload console URLs when component mounts
-    useEffect(() => {
-        if (consoleUrlConfigs && consoleUrlConfigs.length > 0) {
-            // Create a key from the configs to detect changes
-            const configKey = JSON.stringify(consoleUrlConfigs.map((c) => c.sandboxUid));
-            // Only preload if we haven't already preloaded these configs
-            if (preloadedConfigsRef.current !== configKey) {
-                preloadedConfigsRef.current = configKey;
-                preloadSandboxUrls(consoleUrlConfigs).catch((error) => {
-                    console.error("Failed to preload console URLs:", error);
-                });
-            }
-        }
-        // Only re-run if consoleUrlConfigs changes (not when preloadSandboxUrls changes)
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [consoleUrlConfigs]);
-    useEffect(() => {
-        // Create a key for this sandbox load
-        const sandboxKey = `${sandboxUid}-${browserUrl}-${useVm}`;
-        // Check if we've already initiated a load for this exact sandbox config
-        if (loadedSandboxRef.current === sandboxKey) {
-            return;
-        }
-        // Check if URL is already cached for this sandboxUid + browserUrl combination
-        const existingUrl = getSandboxUrl(sandboxUid, browserUrl);
-        if (existingUrl !== undefined) {
-            // Found cached URL for this exact combination, use it immediately
-            setPreviewUrl(existingUrl);
-            loadedSandboxRef.current = sandboxKey;
-            return;
-        }
-        // Mark as loading to prevent duplicate requests
-        loadedSandboxRef.current = sandboxKey;
-        // Load the sandbox URL (will be cached by sandboxUid + browserUrl)
-        // This allows switching between different browserUrls and reverting back
-        // without losing the cached URLs
-        setPreviewUrl("");
-        loadSandboxUrl({
-            sandboxUid,
-            browserUrl,
-            useVm,
-        })
-            .then((url) => {
-            setPreviewUrl(url);
-        })
-            .catch((error) => {
-            console.error("Failed to load sandbox URL:", error);
-            // Keep preview URL empty on error
-        });
-        // Only re-run if the sandbox parameters change (not when functions change)
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [sandboxUid, browserUrl, useVm]);
-    // If isFrame, just render GuardianDemo without the header/layout wrapper
-    if (isFrame) {
-        return (React.createElement("div", { className: "h-[100vh]" },
-            React.createElement(GuardianDemo, { CustomConsole: CustomConsole, GuideView: GuideView, browserUrl: previewUrl, playgroundUid: playgroundUid, useVm: useVm, codeZipFile: codeZipFile, completeCodeZipFile: completeCodeZipFile, variant: variant, themeColor: themeColor, hasPreview: hasPreview, isFrame: isFrame, isGuardian: true })));
-    }
-    return (React.createElement(AppLayoutNoSidebar, { header: React.createElement(Header, { demoOptions: demoOptions, frameworkOptions: frameworkOptions, currentFramework: currentFramework, currentUseCase: currentUseCase, playgroundLogo: playgroundLogo, firstFrameworkByUseCase: firstFrameworkByUseCase }) },
-        React.createElement("div", { className: "absolute inset-0 mt-24 px-4 pb-4" },
-            React.createElement(GuardianDemo, { CustomConsole: CustomConsole, GuideView: GuideView, browserUrl: previewUrl, playgroundUid: playgroundUid, useVm: useVm, codeZipFile: codeZipFile, completeCodeZipFile: completeCodeZipFile, variant: variant, themeColor: themeColor, hasPreview: hasPreview, isFrame: isFrame, isGuardian: true }))));
-}

package/dist/components/guardian/guardian-demo.js

@@ -1,35 +0,0 @@
-"use client";
-import React, { useEffect, useState, useCallback } from "react";
-import ConsoleWithApp from "./ui/console-with-app";
-import { useGuardianContext } from "./context/guardian-context";
-import ConsoleWithGuide from "./demo/left-view";
-import RightView from "./right-view/right-view";
-export default function GuardianDemo({ CustomConsole, GuideView, browserUrl, playgroundUid, useVm, codeZipFile, completeCodeZipFile, variant, themeColor, hasPreview, isFrame = false, isGuardian = false, }) {
-    const { isBrowserMaximized } = useGuardianContext();
-    const { setCurrentView } = useGuardianContext();
-    const [reloadCounter, setReloadCounter] = useState(0);
-    const [overlayStage, setOverlayStage] = useState("hidden");
-    const handleReloadPreview = useCallback(() => {
-        setReloadCounter((c) => c + 1);
-    }, []);
-    const handleStageChange = useCallback((stage) => {
-        setOverlayStage(stage);
-        if (stage === "rebuilding") {
-            // Simulate a 3-second rebuild then hide
-            setTimeout(() => setOverlayStage("hidden"), 3000);
-        }
-    }, []);
-    useEffect(() => {
-        setCurrentView("preview");
-    }, [setCurrentView]);
-    // If isFrame, just return RightView directly
-    if (isFrame) {
-        return (React.createElement(RightView, { reloadCounter: reloadCounter, overlayStage: overlayStage, browserUrl: browserUrl, useVm: useVm, codeZipFile: codeZipFile, hasPreview: hasPreview, variant: variant, themeColor: themeColor, completeCodeZipFile: completeCodeZipFile, isGuardian: isGuardian }));
-    }
-    // If browser is maximized, render RightView at full size without the console
-    if (isBrowserMaximized && isGuardian) {
-        return (React.createElement("div", { className: "w-full h-full rounded-2xl border overflow-hidden" },
-            React.createElement(RightView, { reloadCounter: reloadCounter, overlayStage: overlayStage, browserUrl: browserUrl, useVm: useVm, codeZipFile: codeZipFile, hasPreview: hasPreview, variant: variant, themeColor: themeColor, completeCodeZipFile: completeCodeZipFile, isGuardian: isGuardian, isBrowserMaximized: true })));
-    }
-    return (React.createElement(ConsoleWithApp, { containerClassName: "rounded-2xl border", console: React.createElement(ConsoleWithGuide, { CustomConsole: CustomConsole, GuideView: GuideView, playgroundUid: playgroundUid, onReloadPreview: handleReloadPreview, onStageChange: handleStageChange, codeZipFile: codeZipFile, themeColor: themeColor }), app: React.createElement(RightView, { reloadCounter: reloadCounter, overlayStage: overlayStage, browserUrl: browserUrl, useVm: useVm, codeZipFile: codeZipFile, hasPreview: hasPreview, variant: variant, themeColor: themeColor, completeCodeZipFile: completeCodeZipFile, isGuardian: isGuardian }) }));
-}

package/dist/components/guardian/guardian-home.d.ts

@@ -1,4 +0,0 @@
-import { GuardianNestedConfig } from "./types";
-export default function GuardianHome({ nestedConfig, }: {
-    nestedConfig: GuardianNestedConfig;
-}): import("react").JSX.Element;

package/dist/components/guardian/guardian-home.js

@@ -1,61 +0,0 @@
-"use client";
-import Link from "next/link";
-import AppLayoutNoSidebar from "./app-layout-no-sidebar";
-import { useSandboxUrlLoader } from "./hooks/use-sandbox-url-loader";
-import { useEffect, useRef } from "react";
-export default function GuardianHome({ nestedConfig, }) {
-    var _a, _b, _c;
-    const { preloadSandboxUrls } = useSandboxUrlLoader();
-    const hasPreloadedRef = useRef(false);
-    // Preload all sandbox URLs when the home page loads (only once)
-    useEffect(() => {
-        // Prevent multiple preload attempts
-        if (hasPreloadedRef.current) {
-            return;
-        }
-        hasPreloadedRef.current = true;
-        // Extract all framework configs from nested structure
-        const configs = Object.values(nestedConfig).flatMap((uc) => Object.values(uc.frameworks).flatMap((fw) => {
-            // Include the main framework config
-            const mainConfig = {
-                sandboxUid: fw.sandboxUid,
-                browserUrl: fw.browserUrl,
-                useVm: fw.useVm,
-            };
-            // Include additional URLs from consoleUrlConfigs (urlsToPreload)
-            const additionalConfigs = fw.consoleUrlConfigs || [];
-            return [mainConfig, ...additionalConfigs];
-        }));
-        // Preload all URLs in the background
-        preloadSandboxUrls(configs).catch((error) => {
-            console.error("Failed to preload some sandbox URLs:", error);
-        });
-    }, [nestedConfig, preloadSandboxUrls]);
-    // Build unique use cases list with first framework for each
-    const uniqueUseCases = Object.entries(nestedConfig).map(([id, uc]) => {
-        const firstFramework = Object.keys(uc.frameworks)[0];
-        return {
-            id,
-            name: uc.name,
-            description: uc.description,
-            firstFramework,
-        };
-    });
-    // Get playground logo from the first framework of the first use case
-    const playgroundLogo = (_c = (_a = Object.values(nestedConfig)[0]) === null || _a === void 0 ? void 0 : _a.frameworks[Object.keys(((_b = Object.values(nestedConfig)[0]) === null || _b === void 0 ? void 0 : _b.frameworks) || {})[0]]) === null || _c === void 0 ? void 0 : _c.playgroundLogo;
-    return (React.createElement(AppLayoutNoSidebar, { header: React.createElement("div", { className: "flex items-center gap-3 ml-6" }, playgroundLogo) },
-        React.createElement("div", { className: "h-full flex flex-col" },
-            React.createElement("div", { className: "flex-1 px-6 py-6 space-y-8" },
-                React.createElement("div", { className: "space-y-3" },
-                    React.createElement("div", { className: "text-xs font-medium text-gray-400 tracking-wider uppercase" }, "Examples"),
-                    React.createElement("h1", { className: "text-2xl font-semibold text-gray-100" }, "Sample apps"),
-                    React.createElement("p", { className: "text-sm text-gray-400" }, "Select a sample app to explore and interact with")),
-                React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6" }, uniqueUseCases.map((useCase) => (React.createElement(Link, { href: `/${useCase.id}?framework=${useCase.firstFramework}`, key: useCase.id },
-                    React.createElement("div", { className: "bg-[#1a1b23] rounded-lg border border-gray-800 p-6 flex flex-col justify-between min-h-[180px] hover:border-gray-700 transition-colors cursor-pointer" },
-                        React.createElement("div", null,
-                            React.createElement("div", { className: "flex items-center gap-3 mb-2" },
-                                React.createElement("h2", { className: "font-semibold text-base text-gray-100" }, useCase.name)),
-                            React.createElement("div", { className: "text-gray-400 text-sm mb-6" }, useCase.description)),
-                        React.createElement("div", { className: "flex items-center gap-2" },
-                            React.createElement("span", { className: "text-xs text-gray-500" }, "View app \u2192")))))))))));
-}

package/dist/components/guardian/guardian-playground.js

@@ -1,45 +0,0 @@
-"use client";
-import React from "react";
-import GuardianComponent from "./guardian-component";
-import { useFrameParams } from "./hooks/use-frame-params";
-import { GuardianStyleWrapper } from "./guardian-style-wrapper";
-/**
- * Guardian Playground component with nested config structure.
- * Expects config[useCaseId].frameworks[frameworkKey] structure.
- *
- * When isFrame=true, reads framework from URL params client-side.
- */
-export default function GuardianPlayground({ nestedConfig, useCase, framework: serverFramework, isFrame = false, }) {
-    var _a, _b;
-    // When in frame mode, allow URL params to override framework
-    const frameParams = useFrameParams();
-    const framework = isFrame && frameParams.framework ? frameParams.framework : serverFramework;
-    const useCaseConfig = nestedConfig[useCase];
-    if (!useCaseConfig) {
-        return (React.createElement("div", { className: "flex items-center justify-center h-screen" },
-            React.createElement("p", { className: "text-red-500" },
-                "Use case \"",
-                useCase,
-                "\" not found")));
-    }
-    const frameworkConfig = useCaseConfig.frameworks[framework];
-    if (!frameworkConfig) {
-        return (React.createElement("div", { className: "flex items-center justify-center h-screen" },
-            React.createElement("p", { className: "text-red-500" },
-                "Framework \"",
-                framework,
-                "\" not found in use case \"",
-                useCase,
-                "\"")));
-    }
-    // Build a map of use case ID to first available framework key
-    const firstFrameworkByUseCase = {};
-    Object.entries(nestedConfig).forEach(([useCaseId, uc]) => {
-        const firstFrameworkKey = Object.keys(uc.frameworks)[0];
-        if (firstFrameworkKey) {
-            firstFrameworkByUseCase[useCaseId] = firstFrameworkKey;
-        }
-    });
-    return (React.createElement(GuardianStyleWrapper, null,
-        React.createElement(GuardianComponent, { demoOptions: frameworkConfig.demoOptions, frameworkOptions: frameworkConfig.frameworkOptions, firstFrameworkByUseCase: firstFrameworkByUseCase, currentFramework: frameworkConfig.currentFramework, CustomConsole: frameworkConfig.CustomConsole, GuideView: frameworkConfig.GuideView, playgroundUid: frameworkConfig.playgroundUid, browserUrl: (_a = frameParams.iframeUrl) !== null && _a !== void 0 ? _a : frameworkConfig.browserUrl, useVm: frameworkConfig.useVm, playgroundLogo: frameworkConfig.playgroundLogo, sandboxUid: frameworkConfig.sandboxUid, name: frameworkConfig.name, description: frameworkConfig.description, codeZipFile: frameworkConfig.codeZipFile, completeCodeZipFile: frameworkConfig.completeCodeZipFile, consoleUrlConfigs: frameworkConfig.consoleUrlConfigs, variant: frameworkConfig.variant, themeColor: frameworkConfig.themeColor, hasPreview: (_b = frameworkConfig.hasPreview) !== null && _b !== void 0 ? _b : true, currentUseCase: useCase, isFrame: isFrame })));
-}

package/dist/components/guardian/guardian-style-wrapper.js

@@ -1,29 +0,0 @@
-"use client";
-import React, { useEffect, useState } from "react";
-import { TAILWIND_CSS } from "../../lib/generated-css";
-/**
- * Style wrapper for Guardian components that injects Tailwind CSS
- * into the document without using Shadow DOM (preserves React context)
- */
-export const GuardianStyleWrapper = ({ children, }) => {
-    const [stylesInjected, setStylesInjected] = useState(false);
-    useEffect(() => {
-        // Check if styles are already injected
-        const existingStyle = document.getElementById("guardian-sdk-styles");
-        if (existingStyle) {
-            setStylesInjected(true);
-            return;
-        }
-        // Inject styles into document head
-        const styleElement = document.createElement("style");
-        styleElement.id = "guardian-sdk-styles";
-        // Scope styles to guardian-sdk class to avoid conflicts
-        styleElement.textContent = TAILWIND_CSS;
-        document.head.appendChild(styleElement);
-        setStylesInjected(true);
-        return () => {
-            // Don't remove styles on unmount as other Guardian components might use them
-        };
-    }, []);
-    return (React.createElement("div", { className: "guardian-sdk-root", style: { width: "100%", height: "100%" } }, children));
-};

package/dist/components/guardian/guardian-upload-spec.d.ts

@@ -1,14 +0,0 @@
-import React from "react";
-type UploadedFile = {
-    name: string;
-    size: number;
-    type: string;
-    content?: string;
-};
-type GuardianUploadSpecProps = {
-    onBack: () => void;
-    onContinue: (file: UploadedFile) => void;
-    isLoading?: boolean;
-};
-export default function GuardianUploadSpec({ onBack, onContinue, isLoading, }: GuardianUploadSpecProps): React.JSX.Element;
-export {};