@sampleapp.ai/sdk 1.0.42 → 1.0.44

package/dist/components/sandbox/Sandbox.js

@@ -1,11 +1,86 @@
 "use client";
-import React, { useEffect, useState } from "react";
-import { fetchSandboxConfig } from "./api";
+import React, { useEffect, useState, useCallback, useRef } from "react";
+import { fetchSandboxConfigWithContent, buildConfigFromContent } from "./api";
 import GuardianPlayground from "./guardian/guardian-playground";
 import { GuardianProvider } from "./guardian/context/guardian-context";
 import { VmProvider } from "./guardian/context/vm-context";
-import { buildGuardianConfig } from "./guardian/utils";
 import { Skeleton } from "../ui/skeleton";
+import { useTreeSelector } from "../../hooks/use-tree-selector";
+import { SELECTABLE_NODE_TYPES } from "../../lib/types/tree-config";
+import { useFrameParams } from "./guardian/hooks/use-frame-params";
+/**
+ * Inner component that uses the tree selector hook
+ * Separated to ensure hooks are called after data is loaded
+ */
+function SandboxInner({ configWithContent, apiKey, env, themeColor, theme, config }) {
+    var _a;
+    const [currentConfig, setCurrentConfig] = useState(configWithContent.legacyConfig);
+    // Get frame params for syncing external selection changes
+    const frameParams = useFrameParams();
+    const isFrame = (config === null || config === void 0 ? void 0 : config.isFrame) || frameParams.isFrame;
+    // Track previous nodeTypes to detect changes
+    const prevNodeTypesRef = useRef({});
+    // Handle selection changes - update the config when user selects different options
+    const handleSelectionChange = useCallback((selection, content) => {
+        if (content) {
+            const newConfig = buildConfigFromContent(content);
+            // Apply theme color override if provided
+            if (themeColor) {
+                newConfig.themeColor = themeColor;
+                newConfig.useCases = newConfig.useCases.map((uc) => (Object.assign(Object.assign({}, uc), { themeColor: themeColor, frameworks: uc.frameworks.map((fw) => (Object.assign(Object.assign({}, fw), { themeColor: themeColor }))) })));
+            }
+            setCurrentConfig(newConfig);
+        }
+    }, [themeColor]);
+    // Use the tree selector hook for managing selection state
+    const { sections, selectOption, currentContent, selection } = useTreeSelector({
+        config: configWithContent.techStackConfig,
+        allContent: configWithContent.allContent,
+        initialPath: configWithContent.initialSelectionPath,
+        onSelectionChange: handleSelectionChange
+    });
+    // Sync frame params with tree selector when in frame mode
+    // This effect listens for changes in URL params (via postMessage or direct URL changes)
+    // and updates the tree selector state accordingly
+    useEffect(() => {
+        if (!isFrame) {
+            return;
+        }
+        const prevNodeTypes = prevNodeTypesRef.current;
+        const currentNodeTypes = frameParams.nodeTypes;
+        // Check each node type for changes and call selectOption if changed
+        for (const nodeType of SELECTABLE_NODE_TYPES) {
+            const prevValue = prevNodeTypes[nodeType];
+            const currentValue = currentNodeTypes[nodeType];
+            // If the value changed and there's a new value, update the selection
+            if (currentValue && currentValue !== prevValue) {
+                // Only select if this nodeType exists in the current sections
+                const sectionExists = sections.some((s) => s.nodeType === nodeType);
+                if (sectionExists) {
+                    // Check if the option exists in the section
+                    const section = sections.find((s) => s.nodeType === nodeType);
+                    const optionExists = section === null || section === void 0 ? void 0 : section.options.some((o) => o.key === currentValue);
+                    if (optionExists) {
+                        selectOption(nodeType, currentValue);
+                    }
+                }
+            }
+        }
+        // Update the ref for next comparison
+        prevNodeTypesRef.current = Object.assign({}, currentNodeTypes);
+    }, [isFrame, frameParams.nodeTypes, sections, selectOption]);
+    // Get the first use case and framework from current config
+    const firstUseCase = currentConfig.useCases[0];
+    const firstFramework = (_a = firstUseCase === null || firstUseCase === void 0 ? void 0 : firstUseCase.frameworks[0]) === null || _a === void 0 ? void 0 : _a.key;
+    if (!firstUseCase || !firstFramework) {
+        return (React.createElement("div", { className: "flex items-center justify-center h-screen bg-white dark:bg-black" },
+            React.createElement("div", { className: "text-red-500" }, "No use cases or frameworks found")));
+    }
+    return (React.createElement(GuardianProvider, null,
+        React.createElement(VmProvider, null,
+            React.createElement("div", { className: "h-screen w-screen bg-white dark:bg-black" },
+                React.createElement(GuardianPlayground, { sandboxConfig: currentConfig, sections: sections, onSelect: selectOption, useCase: firstUseCase.id, framework: firstFramework, isFrame: isFrame, apiKey: apiKey, env: env, chatUid: currentConfig.chatUid, theme: theme, hasNetworkView: config === null || config === void 0 ? void 0 : config.hasNetworkView, stationaryPublishedUrl: config === null || config === void 0 ? void 0 : config.stationaryPublishedUrl })))));
+}
 /**
  * Sandbox component - simplified API for embedding sandboxes
  *
@@ -33,14 +108,22 @@ import { Skeleton } from "../ui/skeleton";
  * />
  * ```
  */
-export default function Sandbox({ apiKey, sandboxId, env, themeColor, theme = "dark", }) {
-    var _a;
+/**
+ *
+ * Configurations for the config param
+ * {
+ *  isFrame: boolean;
+ * }
+ *
+ *
+ */
+export default function Sandbox({ apiKey, sandboxId, env, themeColor, theme = "dark", config }) {
     // Validate apiKey immediately
     if (!apiKey || apiKey.trim() === "") {
         return (React.createElement("div", { className: "flex items-center justify-center h-screen bg-white dark:bg-black" },
             React.createElement("div", { className: "text-red-500" }, "Error: apiKey is required. Please provide a valid API key.")));
     }
-    const [config, setConfig] = useState(null);
+    const [configWithContent, setConfigWithContent] = useState(null);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
     useEffect(() => {
@@ -49,14 +132,15 @@ export default function Sandbox({ apiKey, sandboxId, env, themeColor, theme = "d
             try {
                 setLoading(true);
                 setError(null);
-                const fetchedConfig = await fetchSandboxConfig(apiKey, sandboxId);
+                const fetchedConfig = await fetchSandboxConfigWithContent(apiKey, sandboxId);
                 if (!cancelled) {
                     // Override theme color if provided
                     if (themeColor) {
-                        fetchedConfig.themeColor = themeColor;
-                        fetchedConfig.useCases = fetchedConfig.useCases.map((uc) => (Object.assign(Object.assign({}, uc), { themeColor: themeColor, frameworks: uc.frameworks.map((fw) => (Object.assign(Object.assign({}, fw), { themeColor: themeColor }))) })));
+                        fetchedConfig.legacyConfig.themeColor = themeColor;
+                        fetchedConfig.legacyConfig.useCases =
+                            fetchedConfig.legacyConfig.useCases.map((uc) => (Object.assign(Object.assign({}, uc), { themeColor: themeColor, frameworks: uc.frameworks.map((fw) => (Object.assign(Object.assign({}, fw), { themeColor: themeColor }))) })));
                     }
-                    setConfig(fetchedConfig);
+                    setConfigWithContent(fetchedConfig);
                     setLoading(false);
                 }
             }
@@ -82,25 +166,8 @@ export default function Sandbox({ apiKey, sandboxId, env, themeColor, theme = "d
                 "Error: ",
                 error)));
     }
-    if (!config) {
+    if (!configWithContent) {
         return null;
     }
-    // Build the nested config from use cases
-    const nestedConfig = buildGuardianConfig(config.useCases, {
-        playgroundUid: sandboxId,
-        playgroundLogo: config.playgroundLogo || (React.createElement("div", { className: "text-zinc-900 dark:text-white font-bold text-xl" }, config.name)),
-    });
-    // Get the first use case and framework as defaults
-    const firstUseCase = config.useCases[0];
-    const firstFramework = (_a = firstUseCase === null || firstUseCase === void 0 ? void 0 : firstUseCase.frameworks[0]) === null || _a === void 0 ? void 0 : _a.key;
-    if (!firstUseCase || !firstFramework) {
-        return (React.createElement("div", { className: "flex items-center justify-center h-screen bg-white dark:bg-black" },
-            React.createElement("div", { className: "text-red-500" }, "No use cases or frameworks found")));
-    }
-    // TODO: Pass env variables to the container runtime
-    // This will be implemented when integrating with the container technology
-    return (React.createElement(GuardianProvider, null,
-        React.createElement(VmProvider, null,
-            React.createElement("div", { className: "h-screen w-screen bg-white dark:bg-black" },
-                React.createElement(GuardianPlayground, { nestedConfig: nestedConfig, useCase: firstUseCase.id, framework: firstFramework, isFrame: false, apiKey: apiKey, env: env, chatUid: config.chatUid, theme: theme })))));
+    return (React.createElement(SandboxInner, { configWithContent: configWithContent, apiKey: apiKey, env: env, themeColor: themeColor, theme: theme, config: config }));
 }

package/dist/components/sandbox/api.js

@@ -15,10 +15,82 @@ function createDownloadLink(downloadEndpoint) {
     document.body.removeChild(link);
 }
 /**
- * Fetches sandbox configuration from the API
+ * Fetches sandbox configuration with all content for upfront loading
+ * This enables instant switching between tech stack options without API calls
+ *
+ * @param apiKey - API key from SandboxProps
+ * @param sandboxId - Sandbox content UID (maps to sandbox_content_uid)
+ * @returns Extended sandbox configuration with all content
+ */
+export async function fetchSandboxConfigWithContent(apiKey, sandboxId) {
+    const client = createApiClient({ apiKey });
+    // 1. Fetch the initially requested sandbox content
+    const initialContent = await client.sandboxContent.getPublic(sandboxId);
+    // 2. Fetch the use case to get tech_stack_config
+    const useCase = await client.sandboxUseCase.getById(initialContent.use_case_id);
+    // 3. Fetch ALL sandbox content for this use case (for local filtering)
+    const allContent = await client.sandboxContent.getByUseCaseId(initialContent.use_case_id);
+    // 4. Build legacy config for backward compatibility
+    const legacyConfig = buildLegacyConfig(initialContent);
+    return {
+        useCase,
+        techStackConfig: useCase.tech_stack_config,
+        allContent,
+        initialContent,
+        initialSelectionPath: initialContent.selection_path || [],
+        legacyConfig,
+    };
+}
+/**
+ * Build legacy SandboxConfig from SandboxContent for backward compatibility
+ */
+function buildLegacyConfig(sandboxContent) {
+    const frameworkKey = sandboxContent.framework || Framework.NEXTJS;
+    const generatedCode = sandboxContent.generated_code || {};
+    const completeCodeZipFile = "";
+    return {
+        id: sandboxContent.uid,
+        name: sandboxContent.uid,
+        description: sandboxContent.markdown || "",
+        themeColor: "#3b82f6",
+        hasPreview: sandboxContent.has_preview,
+        chatUid: sandboxContent.chat_uid || "",
+        useCases: [
+            {
+                id: sandboxContent.uid,
+                name: sandboxContent.uid,
+                description: sandboxContent.markdown || "",
+                themeColor: "#3b82f6",
+                hasPreview: sandboxContent.has_preview,
+                frameworks: [
+                    {
+                        key: frameworkKey,
+                        browserUrl: sandboxContent.published_url || "",
+                        sandboxUid: sandboxContent.uid,
+                        codeZipFile: Object.keys(generatedCode).length > 0 ? generatedCode : "",
+                        completeCodeZipFile,
+                        useVm: sandboxContent.is_vm_enabled || false,
+                        CustomConsole: sandboxContent.markdown || "",
+                        GuideView: "Default Guide",
+                        gitUrl: sandboxContent.github_url || undefined,
+                    },
+                ],
+            },
+        ],
+    };
+}
+/**
+ * Build SandboxConfig from any SandboxContent (for switching between selections)
+ */
+export function buildConfigFromContent(content) {
+    return buildLegacyConfig(content);
+}
+/**
+ * Fetches sandbox configuration from the API (legacy method)
  * @param apiKey - API key from SandboxProps
  * @param sandboxId - Sandbox content UID (maps to sandbox_content_uid)
  * @returns Sandbox configuration
+ * @deprecated Use fetchSandboxConfigWithContent for tree-based selection
  */
 export async function fetchSandboxConfig(apiKey, sandboxId) {
     const client = createApiClient({

package/dist/components/sandbox/guardian/code-focus-section.js

@@ -1,6 +1,7 @@
 "use client";
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import { useGuardianContext } from "./context/guardian-context";
+import { useSdkTheme } from "./context/theme-context";
 // Helper function to find a node in the file tree by path
 function getTargetNode(fileTree, targetPath) {
     const parts = targetPath.split("/").filter(Boolean);
@@ -163,6 +164,7 @@ let sectionIdCounter = 0;
 export default function CodeFocusSection({ filePath, lineRange, title, description, children, themeColor, }) {
     const sectionRef = useRef(null);
     const sectionIdRef = useRef(`code-focus-${++sectionIdCounter}`);
+    const { isDark } = useSdkTheme();
     const { generatedCode, fileTree, setActiveFilePath, setActiveFileName, setActiveLineNumber, setActiveLineRange, updateCode, setLanguage, filesEdited, activeFilePath, activeLineRange, } = useGuardianContext();
     // Memoize the focus code function to prevent unnecessary recreations
     const focusCode = useCallback(() => {
@@ -306,7 +308,7 @@ export default function CodeFocusSection({ filePath, lineRange, title, descripti
                 marginLeft: "-2rem",
             } })),
         React.createElement("div", { className: "flex items-center gap-2" },
-            React.createElement("h3", { className: "text-md font-semibold text-gray-900 dark:text-gray-100" }, title)),
-        description && (React.createElement("p", { className: "text-sm text-gray-400 mt-3" }, description)),
+            React.createElement("h3", { className: `text-md font-semibold ${isDark ? "text-gray-100" : "text-gray-900"}` }, title)),
+        description && (React.createElement("p", { className: `text-sm mt-3 ${isDark ? "text-gray-400" : "text-gray-600"}` }, description)),
         children && React.createElement("div", { className: "mt-3" }, children)));
 }

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

@@ -0,0 +1,47 @@
+"use client";
+import React, { createContext, useContext, useState, useEffect, } from "react";
+const ThemeContext = createContext(undefined);
+export function SdkThemeProvider({ children, theme = "dark" }) {
+    const [resolvedTheme, setResolvedTheme] = useState(theme === "system" ? "dark" : theme);
+    // Handle system theme preference
+    useEffect(() => {
+        if (theme === "system") {
+            // Check if we're in browser environment
+            if (typeof window === "undefined")
+                return;
+            const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+            setResolvedTheme(mediaQuery.matches ? "dark" : "light");
+            const handler = (e) => {
+                setResolvedTheme(e.matches ? "dark" : "light");
+            };
+            mediaQuery.addEventListener("change", handler);
+            return () => mediaQuery.removeEventListener("change", handler);
+        }
+        else {
+            setResolvedTheme(theme);
+        }
+    }, [theme]);
+    const value = {
+        themeMode: theme,
+        resolvedTheme,
+        isDark: resolvedTheme === "dark",
+    };
+    return (React.createElement(ThemeContext.Provider, { value: value }, children));
+}
+export function useSdkTheme() {
+    const context = useContext(ThemeContext);
+    if (!context) {
+        throw new Error("useSdkTheme must be used within a SdkThemeProvider");
+    }
+    return context;
+}
+/**
+ * Hook that returns theme-aware class names
+ * @param lightClass - Class to use in light mode
+ * @param darkClass - Class to use in dark mode
+ * @returns The appropriate class based on current theme
+ */
+export function useThemeClass(lightClass, darkClass) {
+    const { isDark } = useSdkTheme();
+    return isDark ? darkClass : lightClass;
+}

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

@@ -4,7 +4,7 @@ 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, gitUrl, isBrowserUrlReady = false, sandboxId, apiKey, sandboxError, }) {
+export default function GuardianDemo({ CustomConsole, GuideView, browserUrl, playgroundUid, useVm, codeZipFile, completeCodeZipFile, variant, themeColor, hasPreview, isFrame = false, isGuardian = false, gitUrl, isBrowserUrlReady = false, sandboxId, apiKey, sandboxError, hasNetworkView = false, }) {
     const { isBrowserMaximized } = useGuardianContext();
     const { setCurrentView } = useGuardianContext();
     const [reloadCounter, setReloadCounter] = useState(0);
@@ -24,12 +24,12 @@ export default function GuardianDemo({ CustomConsole, GuideView, browserUrl, pla
     }, [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, isBrowserMaximized: isBrowserMaximized, isBrowserUrlReady: isBrowserUrlReady, sandboxId: sandboxId, apiKey: apiKey, sandboxError: sandboxError }));
+        return (React.createElement(RightView, { reloadCounter: reloadCounter, overlayStage: overlayStage, browserUrl: browserUrl, useVm: useVm, codeZipFile: codeZipFile, hasPreview: hasPreview, variant: variant, themeColor: themeColor, completeCodeZipFile: completeCodeZipFile, isGuardian: isGuardian, isBrowserMaximized: isBrowserMaximized, isBrowserUrlReady: isBrowserUrlReady, isFrame: isFrame, sandboxId: sandboxId, apiKey: apiKey, sandboxError: sandboxError, hasNetworkView: hasNetworkView }));
     }
     // 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 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, isBrowserUrlReady: isBrowserUrlReady, sandboxId: sandboxId, apiKey: apiKey, sandboxError: sandboxError })));
+            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, isBrowserUrlReady: isBrowserUrlReady, isFrame: isFrame, sandboxId: sandboxId, apiKey: apiKey, sandboxError: sandboxError, hasNetworkView: hasNetworkView })));
     }
-    return (React.createElement(ConsoleWithApp, { containerClassName: "", console: React.createElement(ConsoleWithGuide, { CustomConsole: CustomConsole, GuideView: GuideView, playgroundUid: playgroundUid, onReloadPreview: handleReloadPreview, onStageChange: handleStageChange, codeZipFile: codeZipFile, themeColor: themeColor, browserUrl: browserUrl, gitUrl: gitUrl, sandboxId: sandboxId, apiKey: apiKey }), app: React.createElement(RightView, { reloadCounter: reloadCounter, overlayStage: overlayStage, browserUrl: browserUrl, useVm: useVm, codeZipFile: codeZipFile, hasPreview: hasPreview, variant: variant, themeColor: themeColor, completeCodeZipFile: completeCodeZipFile, isGuardian: isGuardian, isBrowserMaximized: isBrowserMaximized, isBrowserUrlReady: isBrowserUrlReady, sandboxId: sandboxId, apiKey: apiKey, sandboxError: sandboxError }) }));
+    return (React.createElement(ConsoleWithApp, { containerClassName: "", console: React.createElement(ConsoleWithGuide, { CustomConsole: CustomConsole, GuideView: GuideView, playgroundUid: playgroundUid, onReloadPreview: handleReloadPreview, onStageChange: handleStageChange, codeZipFile: codeZipFile, themeColor: themeColor, browserUrl: browserUrl, gitUrl: gitUrl, sandboxId: sandboxId, apiKey: apiKey }), app: React.createElement(RightView, { reloadCounter: reloadCounter, overlayStage: overlayStage, browserUrl: browserUrl, useVm: useVm, codeZipFile: codeZipFile, hasPreview: hasPreview, variant: variant, themeColor: themeColor, completeCodeZipFile: completeCodeZipFile, isGuardian: isGuardian, isBrowserMaximized: isBrowserMaximized, isBrowserUrlReady: isBrowserUrlReady, isFrame: isFrame, sandboxId: sandboxId, apiKey: apiKey, sandboxError: sandboxError, hasNetworkView: hasNetworkView }) }));
 }

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

@@ -5,10 +5,12 @@ import React, { useMemo, useState } from "react";
 // import DefaultGuideView from "../default-guide-view";
 import { Markdown } from "../ui/markdown";
 import sampleappLogo from "../../../../assets/sampleapp-logo.png";
+import { useSdkTheme } from "../context/theme-context";
 function Logo({ href, width }) {
+    const { isDark } = useSdkTheme();
     return (React.createElement("div", { className: "flex justify-center md:justify-start" },
         React.createElement("a", { href: href ? href : "https://sampleapp.ai", className: "flex", target: "_blank", rel: "noopener noreferrer" },
-            React.createElement("div", { className: "invert dark:invert-0" },
+            React.createElement("div", { className: isDark ? "" : "invert" },
                 React.createElement("img", { src: sampleappLogo, alt: "SampleApp Logo", width: width || 160, height: 40 })))));
 }
 export default function ConsoleWithGuide({ CustomConsole, GuideView, playgroundUid, onReloadPreview, onStageChange, codeZipFile, themeColor, browserUrl, gitUrl, sandboxId, apiKey, }) {
@@ -20,7 +22,7 @@ export default function ConsoleWithGuide({ CustomConsole, GuideView, playgroundU
         if (typeof CustomConsole === "string") {
             return (React.createElement("div", { className: "h-full flex flex-col" },
                 React.createElement("div", { className: "flex-1 px-8 " },
-                    React.createElement(Markdown, { className: "text-zinc-900 dark:text-gray-100", themeColor: themeColor, browserUrl: browserUrl, gitUrl: gitUrl, sandboxId: sandboxId, apiKey: apiKey }, CustomConsole))));
+                    React.createElement(Markdown, { themeColor: themeColor, browserUrl: browserUrl, gitUrl: gitUrl, sandboxId: sandboxId, apiKey: apiKey }, CustomConsole))));
         }
         const CustomConsoleComponent = CustomConsole;
         return (React.createElement(CustomConsoleComponent, { onReloadPreview: onReloadPreview !== null && onReloadPreview !== void 0 ? onReloadPreview : (() => { }), onStageChange: onStageChange !== null && onStageChange !== void 0 ? onStageChange : (() => { }), themeColor: themeColor }));
@@ -56,9 +58,13 @@ export default function ConsoleWithGuide({ CustomConsole, GuideView, playgroundU
     return (React.createElement("div", { className: "flex-1 min-h-0 relative flex flex-col" },
         React.createElement("div", { className: "h-[calc(100vh-9.5rem)] min-h-0 overflow-hidden flex-1 flex flex-col" },
             React.createElement("div", { className: "flex-1 min-h-0 overflow-y-auto" }, isConsoleView && renderCustomConsole()),
-            React.createElement("div", { className: "relative" },
-                React.createElement("div", { className: "flex flex-row w-full items-center text-xs justify-center opacity-30 mt-1 pb-2 bg-background" },
-                    React.createElement("span", { className: "text-zinc-600 dark:text-gray-300" }, "Powered by"),
-                    React.createElement("span", { className: "hover:bg-accent rounded-sm p-1 mx-1" },
-                        React.createElement(Logo, { width: 100, href: "https://sampleapp.ai" })))))));
+            React.createElement(PoweredByFooter, null))));
+}
+function PoweredByFooter() {
+    const { isDark } = useSdkTheme();
+    return (React.createElement("div", { className: "relative" },
+        React.createElement("div", { className: "flex flex-row w-full items-center text-xs justify-center opacity-30 mt-1 pb-2 bg-background" },
+            React.createElement("span", { className: isDark ? "text-gray-300" : "text-zinc-600" }, "Powered by"),
+            React.createElement("span", { className: "hover:bg-accent rounded-sm p-1 mx-1" },
+                React.createElement(Logo, { width: 100, href: "https://sampleapp.ai" })))));
 }

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

@@ -8,15 +8,17 @@ import { useSandboxUrlLoader } from "./hooks/use-sandbox-url-loader";
 import { useFrameMessages } from "./hooks/use-frame-messages";
 import { useVmContext } from "./context/vm-context";
 import { cn } from "../../../lib/utils";
-export default function GuardianComponent({ demoOptions, frameworkOptions, firstFrameworkByUseCase, currentFramework, currentUseCase, CustomConsole, GuideView, playgroundLogo, playgroundUid, browserUrl, useVm, sandboxUid, codeZipFile, completeCodeZipFile, variant, themeColor, hasPreview = true, isFrame = false, apiKey, env, chatUid, hideHeader = false, // Hardcoded to true by default, not exposed in Sandbox.tsx
-gitUrl, }) {
+export default function GuardianComponent({ sections, onSelect, currentFramework, currentUseCase, CustomConsole, GuideView, playgroundLogo, playgroundUid, browserUrl, useVm, sandboxUid, codeZipFile, completeCodeZipFile, variant, themeColor, hasPreview = true, isFrame = false, apiKey, env, chatUid, hideHeader = false, // Hardcoded to true by default, not exposed in Sandbox.tsx
+gitUrl, hasNetworkView = false, stationaryPublishedUrl }) {
     const { previewUrl, setPreviewUrl } = useGuardianContext();
     const { vmResolution } = useVmContext();
     const [sandboxError, setSandboxError] = React.useState(null);
     // Build startSandboxConfig for use-sandbox-url-loader
     // apiKey is always included (guaranteed by parent validation)
     // Include chatUid and env when browserUrl is missing (needed for startSandbox API call)
-    const startSandboxConfig = Object.assign({ apiKey }, (!browserUrl && chatUid ? { env, chatUid } : {}));
+    // Include hasPreview to skip env/chatUid validation when no preview is needed
+    const startSandboxConfig = Object.assign({ apiKey,
+        hasPreview }, (!browserUrl && chatUid ? { env, chatUid } : {}));
     // Determine if browserUrl is ready to use immediately (from published_url)
     // If browserUrl exists, it's ready (startSandboxConfig may still exist with just apiKey for VM calls)
     const isBrowserUrlReady = !!browserUrl;
@@ -26,9 +28,20 @@ gitUrl, }) {
     useFrameMessages();
     // Track which main sandbox we've loaded to prevent duplicates
     const loadedSandboxRef = useRef("");
+    // Track initial URLs per use case for stationaryPublishedUrl feature
+    const initialUrlsByUseCaseRef = useRef(new Map());
     useEffect(() => {
         // Create a key for this sandbox load
         const sandboxKey = `${sandboxUid}-${browserUrl}-${useVm}`;
+        const useCaseKey = currentUseCase || "default";
+        // If stationaryPublishedUrl is enabled and we already have a URL for this use case,
+        // use the stored URL and skip loading a new one
+        if (stationaryPublishedUrl &&
+            initialUrlsByUseCaseRef.current.has(useCaseKey)) {
+            const storedUrl = initialUrlsByUseCaseRef.current.get(useCaseKey);
+            setPreviewUrl(storedUrl);
+            return;
+        }
         // Check if we've already initiated a load for this exact sandbox config
         if (loadedSandboxRef.current === sandboxKey) {
             return;
@@ -39,6 +52,11 @@ gitUrl, }) {
             // Found cached URL for this exact combination, use it immediately
             setPreviewUrl(existingUrl);
             loadedSandboxRef.current = sandboxKey;
+            // Store as initial URL for this use case if stationaryPublishedUrl is enabled
+            if (stationaryPublishedUrl &&
+                !initialUrlsByUseCaseRef.current.has(useCaseKey)) {
+                initialUrlsByUseCaseRef.current.set(useCaseKey, existingUrl);
+            }
             return;
         }
         // If useVm is true, wait for resolution from context before loading
@@ -59,9 +77,14 @@ gitUrl, }) {
             browserUrl,
             useVm,
             resolution: vmResolution,
-            apiKey,
+            apiKey
         })
             .then((url) => {
+            // Store as initial URL for this use case if stationaryPublishedUrl is enabled
+            if (stationaryPublishedUrl &&
+                !initialUrlsByUseCaseRef.current.has(useCaseKey)) {
+                initialUrlsByUseCaseRef.current.set(useCaseKey, url);
+            }
             setPreviewUrl(url);
             setSandboxError(null); // Clear error on success
         })
@@ -74,13 +97,21 @@ gitUrl, }) {
         });
         // Re-run when sandbox parameters change OR when resolution becomes available
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [sandboxUid, browserUrl, useVm, vmResolution, apiKey]);
+    }, [
+        sandboxUid,
+        browserUrl,
+        useVm,
+        vmResolution,
+        apiKey,
+        currentUseCase,
+        stationaryPublishedUrl
+    ]);
     // 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, gitUrl: gitUrl, isBrowserUrlReady: isBrowserUrlReady, sandboxId: sandboxUid, apiKey: apiKey, sandboxError: sandboxError })));
+            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, gitUrl: gitUrl, isBrowserUrlReady: isBrowserUrlReady, sandboxId: sandboxUid, apiKey: apiKey, sandboxError: sandboxError, hasNetworkView: hasNetworkView })));
     }
-    return (React.createElement(AppLayoutNoSidebar, { header: !hideHeader ? (React.createElement(Header, { demoOptions: demoOptions, frameworkOptions: frameworkOptions, currentFramework: currentFramework, currentUseCase: currentUseCase, playgroundLogo: playgroundLogo, firstFrameworkByUseCase: firstFrameworkByUseCase, themecolor: themeColor })) : undefined, hasBodyPadding: false },
+    return (React.createElement(AppLayoutNoSidebar, { header: !hideHeader ? (React.createElement(Header, { sections: sections, onSelect: onSelect, playgroundLogo: playgroundLogo, themecolor: themeColor })) : undefined, hasBodyPadding: false },
         React.createElement("div", { className: cn("flex-1 min-h-0 flex flex-col", hideHeader && "pt-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, gitUrl: gitUrl, isBrowserUrlReady: isBrowserUrlReady, sandboxId: sandboxUid, apiKey: apiKey, sandboxError: sandboxError }))));
+            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, gitUrl: gitUrl, isBrowserUrlReady: isBrowserUrlReady, sandboxId: sandboxUid, apiKey: apiKey, sandboxError: sandboxError, hasNetworkView: hasNetworkView }))));
 }

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

@@ -3,17 +3,24 @@ import React from "react";
 import GuardianComponent from "./guardian-component";
 import { useFrameParams } from "./hooks/use-frame-params";
 import { GuardianStyleWrapper } from "./guardian-style-wrapper";
+import { buildGuardianConfig } from "./utils";
 /**
- * Guardian Playground component with nested config structure.
- * Expects config[useCaseId].frameworks[frameworkKey] structure.
+ * Guardian Playground component with tree-based tech stack selection.
+ * Uses sections from useTreeSelector for dynamic header rendering.
  *
- * When isFrame=true, reads framework from URL params client-side.
+ * Note: Frame param overrides for node types (architecture, frontend, backend, etc.)
+ * are now handled in Sandbox.tsx via the tree selector sync mechanism.
+ * This component receives the already-resolved framework from the tree selector.
  */
-export default function GuardianPlayground({ nestedConfig, useCase, framework: serverFramework, isFrame = false, apiKey, env, chatUid, theme = "dark", }) {
+export default function GuardianPlayground({ sandboxConfig, sections, onSelect, useCase, framework, isFrame = false, apiKey, env, chatUid, theme = "dark", hasNetworkView = false, stationaryPublishedUrl }) {
     var _a;
-    // When in frame mode, allow URL params to override framework
+    // Get frame params for iframeUrl override only
     const frameParams = useFrameParams();
-    const framework = isFrame && frameParams.framework ? frameParams.framework : serverFramework;
+    // Build the nested config from use cases
+    const nestedConfig = buildGuardianConfig(sandboxConfig.useCases, {
+        playgroundUid: sandboxConfig.id,
+        playgroundLogo: sandboxConfig.playgroundLogo || (React.createElement("div", { className: "text-zinc-900 dark:text-white font-bold text-xl" }, sandboxConfig.name))
+    });
     const useCaseConfig = nestedConfig[useCase];
     if (!useCaseConfig) {
         return (React.createElement("div", { className: "flex items-center justify-center h-screen" },
@@ -32,14 +39,6 @@ export default function GuardianPlayground({ nestedConfig, useCase, framework: s
                 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, { themeColor: frameworkConfig.themeColor, theme: theme },
-        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, variant: frameworkConfig.variant, themeColor: frameworkConfig.themeColor, hasPreview: frameworkConfig.hasPreview, currentUseCase: useCase, isFrame: isFrame, apiKey: apiKey, env: env, chatUid: chatUid, gitUrl: frameworkConfig.gitUrl, hideHeader: false })));
+        React.createElement(GuardianComponent, { sections: sections, onSelect: onSelect, 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, variant: frameworkConfig.variant, themeColor: frameworkConfig.themeColor, hasPreview: frameworkConfig.hasPreview, currentUseCase: useCase, isFrame: isFrame, apiKey: apiKey, env: env, chatUid: chatUid, gitUrl: frameworkConfig.gitUrl, hideHeader: false, hasNetworkView: hasNetworkView, stationaryPublishedUrl: stationaryPublishedUrl })));
 }

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

@@ -1,11 +1,12 @@
 "use client";
 import React, { useEffect, useRef, useState } from "react";
 import { TAILWIND_CSS } from "../../../lib/generated-css";
+import { SdkThemeProvider } from "./context/theme-context";
 /**
  * Style wrapper for Guardian components that injects Tailwind CSS
  * into the document without using Shadow DOM (preserves React context)
  */
-export const GuardianStyleWrapper = ({ children, themeColor = "#3b82f6", theme = "dark", }) => {
+export const GuardianStyleWrapper = ({ children, themeColor = "#3b82f6", theme = "dark" }) => {
     const [stylesInjected, setStylesInjected] = useState(false);
     const [resolvedTheme, setResolvedTheme] = useState(theme === "system" ? "dark" : theme);
     const rootRef = useRef(null);
@@ -58,9 +59,10 @@ export const GuardianStyleWrapper = ({ children, themeColor = "#3b82f6", theme =
             rootRef.current.style.setProperty("--colors-secondary", secondaryColor);
         }
     }, [themeColor]);
-    return (React.createElement("div", { ref: rootRef, className: `guardian-sdk-root bg-background text-foreground ${resolvedTheme === "dark" ? "dark" : ""}`, style: {
-            width: "100%",
-            height: "100%",
-            fontFamily: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-        } }, children));
+    return (React.createElement(SdkThemeProvider, { theme: theme },
+        React.createElement("div", { ref: rootRef, className: `guardian-sdk-root bg-background text-foreground ${resolvedTheme === "dark" ? "dark" : ""}`, style: {
+                width: "100%",
+                height: "100%",
+                fontFamily: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'
+            } }, children)));
 };