@sampleapp.ai/sdk 1.0.43 → 1.0.45

package/dist/components/sandbox/Sandbox.js

@@ -1,18 +1,25 @@
 "use client";
-import React, { useEffect, useState, useCallback } from "react";
-import { fetchSandboxConfigWithContent, buildConfigFromContent, } 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 { 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, }) {
+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) {
@@ -26,12 +33,42 @@ function SandboxInner({ configWithContent, apiKey, env, themeColor, theme, confi
         }
     }, [themeColor]);
     // Use the tree selector hook for managing selection state
-    const { sections, selectOption, currentContent } = useTreeSelector({
+    const { sections, selectOption, currentContent, selection } = useTreeSelector({
         config: configWithContent.techStackConfig,
         allContent: configWithContent.allContent,
         initialPath: configWithContent.initialSelectionPath,
-        onSelectionChange: handleSelectionChange,
+        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;
@@ -42,7 +79,7 @@ function SandboxInner({ configWithContent, apiKey, env, themeColor, theme, confi
     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: config === null || config === void 0 ? void 0 : config.isFrame, apiKey: apiKey, env: env, chatUid: currentConfig.chatUid, theme: theme })))));
+                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 })))));
 }
 /**
  * Sandbox component - simplified API for embedding sandboxes
@@ -71,7 +108,7 @@ function SandboxInner({ configWithContent, apiKey, env, themeColor, theme, confi
  * />
  * ```
  */
-export default function Sandbox({ apiKey, sandboxId, env, themeColor, theme = "dark", config, }) {
+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" },

package/dist/components/sandbox/guardian/app-layout-no-sidebar.js

@@ -1,10 +1,10 @@
 import React from "react";
 import { cn } from "../../../lib/utils";
-export default function AppLayoutNoSidebar({ header, hasBodyPadding = true, children, textColorStyle, }) {
+export default function AppLayoutNoSidebar({ header, hasBodyPadding = true, children, textColorStyle }) {
     return (React.createElement("div", { className: "flex flex-col h-full" },
         header && (React.createElement("header", { className: "flex h-20 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 w-full" },
             React.createElement("div", { className: "flex items-center w-full" }, header))),
-        React.createElement("div", { className: cn("flex flex-1 flex-col pt-0 min-h-0 pr-6 pb-6", hasBodyPadding && "gap-4 p-4", 
+        React.createElement("div", { className: cn("flex flex-1 flex-col pt-0 min-h-0 md:pr-6 pb-6", hasBodyPadding && "gap-4 p-4", 
             // Use CSS variable with Tailwind arbitrary value
             textColorStyle &&
                 "text-[var(--guardian-text-color)] dark:text-[var(--guardian-text-color-dark)]"), style: textColorStyle }, children)));

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

@@ -1,10 +1,14 @@
 "use client";
 import React, { useEffect, useState, useCallback } from "react";
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 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, }) {
+import RightTopDownView from "../right-view/right-top-down-view";
+import { cn } from "../../../../lib/utils";
+import { BookOpen, Monitor } from "lucide-react";
+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);
@@ -19,17 +23,61 @@ export default function GuardianDemo({ CustomConsole, GuideView, browserUrl, pla
             setTimeout(() => setOverlayStage("hidden"), 3000);
         }
     }, []);
+    const [mobileTab, setMobileTab] = useState("guide");
     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, isBrowserMaximized: isBrowserMaximized, isBrowserUrlReady: isBrowserUrlReady, isFrame: isFrame, 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, isFrame: isFrame, 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, isFrame: isFrame, sandboxId: sandboxId, apiKey: apiKey, sandboxError: sandboxError }) }));
+    const rightViewProps = {
+        reloadCounter,
+        overlayStage,
+        browserUrl,
+        useVm,
+        codeZipFile,
+        hasPreview,
+        variant,
+        themeColor,
+        completeCodeZipFile,
+        isGuardian,
+        isBrowserMaximized,
+        isBrowserUrlReady: isBrowserUrlReady !== null && isBrowserUrlReady !== void 0 ? isBrowserUrlReady : false,
+        isFrame,
+        sandboxId,
+        apiKey,
+        sandboxError,
+        hasNetworkView
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "md:hidden h-full flex flex-col min-h-0" },
+            React.createElement("div", { className: "flex-1 min-h-0 overflow-hidden flex flex-col" }, mobileTab === "guide" ? (React.createElement(PanelGroup, { direction: "vertical", className: "flex-1 min-h-0" },
+                React.createElement(Panel, { defaultSize: 50, minSize: 25, maxSize: 75, order: 1 },
+                    React.createElement("div", { className: "h-full w-full overflow-y-auto overflow-x-hidden" },
+                        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 }))),
+                React.createElement(PanelResizeHandle, { className: "h-2 relative group flex-shrink-0 bg-zinc-900 dark:bg-zinc-950" },
+                    React.createElement("div", { className: "absolute inset-x-0 top-1/2 -translate-y-1/2 h-1 -mt-0.5 group-active:bg-blue-400/30 transition-colors flex justify-center items-center" },
+                        React.createElement("div", { className: "h-full w-12 rounded-full bg-zinc-600 dark:bg-zinc-500" }))),
+                React.createElement(Panel, { defaultSize: 50, minSize: 25, maxSize: 75, order: 2 },
+                    React.createElement("div", { className: "h-full w-full min-h-0" },
+                        React.createElement(RightTopDownView, Object.assign({}, rightViewProps, { hasPreview: false, codeOnly: true })))))) : (React.createElement("div", { className: "flex-1 min-h-0" },
+                React.createElement(RightView, Object.assign({}, rightViewProps, { previewOnly: true }))))),
+            React.createElement("div", { className: "flex-shrink-0 border-t border-zinc-800 dark:border-zinc-700 bg-zinc-900/95 dark:bg-zinc-950/95 backdrop-blur-sm px-3 py-2 flex items-center justify-center gap-1" },
+                React.createElement("button", { type: "button", onClick: () => setMobileTab("guide"), className: cn("flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-colors", mobileTab === "guide"
+                        ? "bg-zinc-700 dark:bg-zinc-600 text-white"
+                        : "text-zinc-500 hover:text-zinc-300") },
+                    React.createElement(BookOpen, { className: "w-4 h-4" }),
+                    "Guide"),
+                React.createElement("button", { type: "button", onClick: () => setMobileTab("preview"), className: cn("flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-colors", mobileTab === "preview"
+                        ? "bg-zinc-700 dark:bg-zinc-600 text-white"
+                        : "text-zinc-500 hover:text-zinc-300") },
+                    React.createElement(Monitor, { className: "w-4 h-4" }),
+                    "Preview"))),
+        React.createElement(ConsoleWithApp, { containerClassName: "hidden md:block", 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

@@ -9,7 +9,7 @@ import { useFrameMessages } from "./hooks/use-frame-messages";
 import { useVmContext } from "./context/vm-context";
 import { cn } from "../../../lib/utils";
 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, }) {
+gitUrl, hasNetworkView = false }) {
     const { previewUrl, setPreviewUrl } = useGuardianContext();
     const { vmResolution } = useVmContext();
     const [sandboxError, setSandboxError] = React.useState(null);
@@ -61,7 +61,7 @@ gitUrl, }) {
             browserUrl,
             useVm,
             resolution: vmResolution,
-            apiKey,
+            apiKey
         })
             .then((url) => {
             setPreviewUrl(url);
@@ -80,9 +80,9 @@ gitUrl, }) {
     // 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, { 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

@@ -7,16 +7,19 @@ import { buildGuardianConfig } from "./utils";
 /**
  * Guardian Playground component with tree-based tech stack selection.
  * Uses sections from useTreeSelector for dynamic header rendering.
+ *
+ * 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({ sandboxConfig, sections, onSelect, 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 }) {
     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)),
+        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) {
@@ -37,5 +40,5 @@ export default function GuardianPlayground({ sandboxConfig, sections, onSelect,
                 "\"")));
     }
     return (React.createElement(GuardianStyleWrapper, { themeColor: frameworkConfig.themeColor, theme: theme },
-        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 })));
+        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 })));
 }

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)));
 };

package/dist/components/sandbox/guardian/header.js

@@ -1,5 +1,6 @@
 "use client";
 import React from "react";
+import { useSdkTheme } from "./context/theme-context";
 /**
  * Header component for dynamic tech stack selection
  *
@@ -7,24 +8,30 @@ import React from "react";
  * based on the tech_stack_config tree structure.
  */
 export default function Header({ sections, onSelect, playgroundLogo, themecolor }) {
-    console.log("playgroundLogo", playgroundLogo);
+    const { isDark } = useSdkTheme();
     return (React.createElement("div", { className: "w-full sticky top-0 z-50 px-4 lg:px-8 backdrop-blur-md" },
         React.createElement("div", { className: "flex flex-wrap items-center justify-between py-2" },
             React.createElement("div", { className: "flex flex-wrap items-center gap-6" }, sections.map((section) => {
                 var _a;
                 return (React.createElement("div", { key: section.nodeType, className: "flex items-center flex-wrap gap-3" },
-                    React.createElement("span", { className: "text-sm font-semibold text-gray-600 dark:text-gray-400 whitespace-nowrap" }, section.label),
+                    React.createElement("span", { className: `text-sm font-semibold whitespace-nowrap ${isDark ? "text-gray-400" : "text-gray-600"}` }, section.label),
                     React.createElement("div", { className: "hidden md:block" },
                         React.createElement("div", { className: "flex items-center gap-2" }, section.options.map((option) => {
                             const isSelected = option.isSelected;
-                            const isDisabled = option.hasContent === false;
+                            // Only disable non-leaf nodes that have no content
+                            // Leaf nodes should always be clickable (they represent final selections)
+                            const isDisabled = option.hasContent === false && !option.isLeaf;
                             return (React.createElement("button", { key: option.key, onClick: () => {
                                     if (!isDisabled) {
                                         onSelect(section.nodeType, option.key);
                                     }
                                 }, disabled: isDisabled, className: `inline-flex items-center px-3 py-1.5 text-xs font-medium rounded-md border transition-all cursor-pointer active:scale-[0.98] ${isSelected
-                                    ? "bg-white dark:bg-zinc-900 hover:bg-zinc-100 dark:hover:bg-zinc-800"
-                                    : "bg-white dark:bg-zinc-900 border-zinc-300 dark:border-zinc-700 text-zinc-900 dark:text-zinc-100 hover:bg-zinc-100 dark:hover:bg-zinc-800"} ${isDisabled ? "opacity-50 cursor-not-allowed" : ""}`, style: isSelected && themecolor
+                                    ? isDark
+                                        ? "bg-zinc-900 hover:bg-zinc-800"
+                                        : "bg-white hover:bg-zinc-100"
+                                    : isDark
+                                        ? "bg-zinc-900 border-zinc-700 text-zinc-100 hover:bg-zinc-800"
+                                        : "bg-white border-zinc-300 text-zinc-900 hover:bg-zinc-100"} ${isDisabled ? "opacity-50 cursor-not-allowed" : ""}`, style: isSelected && themecolor
                                     ? {
                                         borderColor: themecolor,
                                         color: themecolor
@@ -34,7 +41,9 @@ export default function Header({ sections, onSelect, playgroundLogo, themecolor
                     React.createElement("div", { className: "block md:hidden relative" },
                         React.createElement("select", { value: ((_a = section.options.find((o) => o.isSelected)) === null || _a === void 0 ? void 0 : _a.key) || "", onChange: (e) => {
                                 onSelect(section.nodeType, e.target.value);
-                            }, className: "appearance-none bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-md px-3 py-1.5 pr-8 text-xs font-medium text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-primary dark:focus:ring-primary-light focus:border-transparent transition-all hover:bg-zinc-100 dark:hover:bg-zinc-800" }, section.options.map((option) => (React.createElement("option", { key: option.key, value: option.key, disabled: option.hasContent === false }, option.label)))),
+                            }, className: `appearance-none border rounded-md px-3 py-1.5 pr-8 text-xs font-medium focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all ${isDark
+                                ? "bg-zinc-900 border-zinc-700 text-zinc-100 hover:bg-zinc-800"
+                                : "bg-white border-zinc-300 text-zinc-900 hover:bg-zinc-100"}` }, section.options.map((option) => (React.createElement("option", { key: option.key, value: option.key, disabled: option.hasContent === false && !option.isLeaf }, option.label)))),
                         React.createElement("svg", { "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", className: "absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none text-zinc-400" },
                             React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.35 9.915a.875.875 0 0 1 1.235-.065L8 13.823l4.415-3.973a.875.875 0 0 1 1.17 1.3l-5 4.5a.873.873 0 0 1-1.17 0l-5-4.5a.875.875 0 0 1-.065-1.235ZM7.415.35a.873.873 0 0 1 1.17 0l5 4.5a.875.875 0 1 1-1.17 1.3L8 2.177 3.585 6.15a.875.875 0 0 1-1.17-1.3l5-4.5Z", fill: "currentColor" })))));
             })))));

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

@@ -1,5 +1,6 @@
 "use client";
 import { useEffect, useRef } from "react";
+import { SELECTABLE_NODE_TYPES } from "../../../../lib/types/tree-config";
 /**
  * Hook to handle postMessage communication with parent window when in iframe mode.
  * - Sends IFRAME_READY when mounted
@@ -7,10 +8,11 @@ import { useEffect, useRef } from "react";
  * - Works with useFrameParams() which reads the updated URL params
  *
  * Supported UPDATE_VIEW message fields:
- * - framework: Switch between frameworks (e.g., "nextjs", "react")
+ * - Node type selections: product, version, architecture, frontend, backend, framework, integration, platform
  * - activeFilePath: Change the active file in the editor
  * - linesStart/linesEnd: Highlight specific line range in the editor
  * - theme: Override the theme color (hex color)
+ * - iframeUrl: Override the preview iframe URL
  */
 export function useFrameMessages() {
     const hasSignaledReady = useRef(false);
@@ -18,11 +20,16 @@ export function useFrameMessages() {
         if (typeof window === "undefined")
             return;
         // Check if we're in an iframe
-        const isFrame = window.self !== window.top;
-        if (!isFrame)
+        const isInIframe = window.self !== window.top;
+        // Also check URL param for isFrame (for testing without actual iframe)
+        const searchParams = new URLSearchParams(window.location.search);
+        const isFrameParam = searchParams.get("isFrame") === "true";
+        // Listen for messages if we're in an iframe OR if isFrame=true in URL
+        if (!isInIframe && !isFrameParam) {
             return;
-        // Signal to parent that we're ready to receive messages
-        if (!hasSignaledReady.current && window.parent) {
+        }
+        // Signal to parent that we're ready to receive messages (only if actually in iframe)
+        if (isInIframe && !hasSignaledReady.current && window.parent) {
             window.parent.postMessage({ type: "IFRAME_READY" }, "*");
             hasSignaledReady.current = true;
         }
@@ -32,10 +39,18 @@ export function useFrameMessages() {
             const data = event.data;
             if (data.type === "UPDATE_VIEW") {
                 const url = new URL(window.location.href);
-                // Update URL params based on message
+                // Update all node type params
+                for (const nodeType of SELECTABLE_NODE_TYPES) {
+                    const value = data[nodeType];
+                    if (value !== undefined && typeof value === "string") {
+                        url.searchParams.set(nodeType, value);
+                    }
+                }
+                // Legacy framework param (also handled above via SELECTABLE_NODE_TYPES)
                 if (data.framework !== undefined) {
                     url.searchParams.set("framework", data.framework);
                 }
+                // Editor-related params
                 if (data.activeFilePath !== undefined) {
                     url.searchParams.set("activeFilePath", data.activeFilePath);
                 }
@@ -54,12 +69,13 @@ export function useFrameMessages() {
                 // 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 () => {
+            window.removeEventListener("message", handleMessage);
+        };
     }, []);
     return {};
 }