@sampleapp.ai/sdk 1.0.42 → 1.0.44

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

@@ -1,53 +1,49 @@
 "use client";
 import React from "react";
-export default function Header({ demoOptions, frameworkOptions, firstFrameworkByUseCase, currentFramework, playgroundLogo, currentUseCase, themecolor, }) {
-    var _a, _b;
-    // Derive values directly from props (which come from the URL)
-    const selectedUseCase = currentUseCase || ((_a = demoOptions[0]) === null || _a === void 0 ? void 0 : _a.value);
-    const selectedFramework = currentFramework || ((_b = frameworkOptions[0]) === null || _b === void 0 ? void 0 : _b.value);
-    const sections = [
-        // {
-        //   id: "useCase",
-        //   label: "Use Case:",
-        //   options: demoOptions.map((opt) => ({
-        //     ...opt,
-        //     href: `/${opt.value}?framework=${firstFrameworkByUseCase?.[opt.value] || frameworkOptions[0]?.value
-        //       }`,
-        //   })),
-        // },
-        {
-            id: "framework",
-            label: "Framework:",
-            options: frameworkOptions.map((opt) => (Object.assign(Object.assign({}, opt), { href: `/${selectedUseCase}?framework=${opt.value}` }))),
-        },
-    ];
+import { useSdkTheme } from "./context/theme-context";
+/**
+ * Header component for dynamic tech stack selection
+ *
+ * Uses sections from useTreeSelector to render selector buttons
+ * based on the tech_stack_config tree structure.
+ */
+export default function Header({ sections, onSelect, playgroundLogo, themecolor }) {
+    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" },
+        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) => {
-                const currentValue = section.id === "useCase" ? selectedUseCase : selectedFramework;
-                return (React.createElement("div", { key: section.id, 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),
+                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 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 = currentValue === option.value;
-                            return (React.createElement("button", { key: option.value, onClick: () => {
-                                    if (typeof window !== "undefined") {
-                                        window.location.href = option.href;
+                            const isSelected = option.isSelected;
+                            // 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);
                                     }
-                                }, 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"}`, style: isSelected && themecolor ? {
-                                    borderColor: themecolor,
-                                    color: themecolor,
-                                } : undefined }, option.label));
+                                }, 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
+                                    ? 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
+                                    }
+                                    : undefined }, option.label));
                         }))),
                     React.createElement("div", { className: "block md:hidden relative" },
-                        React.createElement("select", { value: currentValue, onChange: (e) => {
-                                const selectedOption = section.options.find((opt) => opt.value === e.target.value);
-                                if (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.href) {
-                                    window.location.href = selectedOption.href;
-                                }
-                            }, 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.value, value: option.value }, option.label)))),
+                        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 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 {};
 }

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

@@ -1,44 +1,102 @@
-import { useMemo } from "react";
+import { useState, useEffect } from "react";
+import { SELECTABLE_NODE_TYPES } from "../../../../lib/types/tree-config";
+/**
+ * Helper to read all frame params from URL
+ */
+function readFrameParamsFromUrl() {
+    if (typeof window === "undefined") {
+        return {
+            isFrame: false,
+            framework: undefined,
+            theme: undefined,
+            activeFilePath: undefined,
+            linesStart: undefined,
+            linesEnd: undefined,
+            iframeUrl: undefined,
+            nodeTypes: {}
+        };
+    }
+    const searchParams = new URLSearchParams(window.location.search);
+    const isFrame = searchParams.get("isFrame") === "true";
+    const theme = searchParams.get("theme") || undefined;
+    const activeFilePath = searchParams.get("activeFilePath") || undefined;
+    const linesStart = searchParams.get("linesStart")
+        ? parseInt(searchParams.get("linesStart"), 10)
+        : undefined;
+    const linesEnd = searchParams.get("linesEnd")
+        ? parseInt(searchParams.get("linesEnd"), 10)
+        : undefined;
+    const iframeUrl = searchParams.get("iframeUrl") || undefined;
+    // Read all node type params
+    const nodeTypes = {};
+    for (const nodeType of SELECTABLE_NODE_TYPES) {
+        const value = searchParams.get(nodeType);
+        if (value) {
+            nodeTypes[nodeType] = value;
+        }
+    }
+    // Legacy framework param - also populate nodeTypes.framework if present
+    const framework = searchParams.get("framework") || undefined;
+    if (framework && !nodeTypes.framework) {
+        nodeTypes.framework = framework;
+    }
+    return {
+        isFrame,
+        framework,
+        theme,
+        activeFilePath,
+        linesStart,
+        linesEnd,
+        iframeUrl,
+        nodeTypes
+    };
+}
 /**
  * Hook to read frame-mode search parameters from URL.
  * These params override config/context when isFrame=true.
  *
- * Note: This is a simplified version that reads from window.location.search.
- * For Next.js apps, you can use the Next.js version that uses useSearchParams.
+ * Supports all node type parameters:
+ * - product, version, architecture, frontend, backend, framework, integration, platform
+ *
+ * Note: This hook now uses state and listens for the "frameParamsUpdated" custom event
+ * to react immediately when URL params are updated via postMessage.
  */
 export function useFrameParams() {
-    return useMemo(() => {
-        if (typeof window === "undefined") {
-            return {
-                isFrame: false,
-                framework: undefined,
-                theme: undefined,
-                activeFilePath: undefined,
-                linesStart: undefined,
-                linesEnd: undefined,
-                iframeUrl: undefined,
-            };
-        }
-        const searchParams = new URLSearchParams(window.location.search);
-        const isFrame = searchParams.get("isFrame") === "true";
-        const framework = searchParams.get("framework") || undefined;
-        const theme = searchParams.get("theme") || undefined;
-        const activeFilePath = searchParams.get("activeFilePath") || undefined;
-        const linesStart = searchParams.get("linesStart")
-            ? parseInt(searchParams.get("linesStart"), 10)
-            : undefined;
-        const linesEnd = searchParams.get("linesEnd")
-            ? parseInt(searchParams.get("linesEnd"), 10)
-            : undefined;
-        const iframeUrl = searchParams.get("iframeUrl") || undefined;
-        return {
-            isFrame,
-            framework,
-            theme,
-            activeFilePath,
-            linesStart,
-            linesEnd,
-            iframeUrl,
+    // Initialize with empty values - will be populated on mount
+    const [params, setParams] = useState(() => ({
+        isFrame: false,
+        framework: undefined,
+        theme: undefined,
+        activeFilePath: undefined,
+        linesStart: undefined,
+        linesEnd: undefined,
+        iframeUrl: undefined,
+        nodeTypes: {}
+    }));
+    // Read initial values on mount (client-side only)
+    useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        // Read initial params from URL
+        const initialParams = readFrameParamsFromUrl();
+        setParams(initialParams);
+    }, []);
+    useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        // Handler for custom event dispatched by useFrameMessages
+        const handleFrameParamsUpdated = (event) => {
+            const newParams = readFrameParamsFromUrl();
+            setParams(newParams);
+        };
+        // Listen for the custom event
+        window.addEventListener("frameParamsUpdated", handleFrameParamsUpdated);
+        // Also listen for popstate (browser back/forward)
+        window.addEventListener("popstate", handleFrameParamsUpdated);
+        return () => {
+            window.removeEventListener("frameParamsUpdated", handleFrameParamsUpdated);
+            window.removeEventListener("popstate", handleFrameParamsUpdated);
         };
-    }, [typeof window !== "undefined" ? window.location.search : ""]);
+    }, []);
+    return params;
 }

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

@@ -50,6 +50,12 @@ export function useSandboxUrlLoader(startSandboxConfig) {
                 // Edge case: If browserUrl is empty but we have chatUid, call startSandbox first
                 let targetUrl = browserUrl;
                 if (!targetUrl || targetUrl.trim() === "") {
+                    // If hasPreview is false, we don't need to start a container
+                    // Just return empty string - no preview will be shown
+                    if ((startSandboxConfig === null || startSandboxConfig === void 0 ? void 0 : startSandboxConfig.hasPreview) === false) {
+                        setVmUrl(cacheKey, "");
+                        return "";
+                    }
                     if (startSandboxConfig === null || startSandboxConfig === void 0 ? void 0 : startSandboxConfig.chatUid) {
                         // When browserUrl (published_url) is empty, env is required to start sandbox
                         if (!startSandboxConfig.env) {
@@ -58,7 +64,7 @@ export function useSandboxUrlLoader(startSandboxConfig) {
                         // First, start the sandbox to get the container_url
                         const sandboxResponse = await client.sdk.startSandbox({
                             env: startSandboxConfig.env,
-                            chatUid: startSandboxConfig.chatUid,
+                            chatUid: startSandboxConfig.chatUid
                         });
                         targetUrl = sandboxResponse.container_url;
                     }
@@ -69,7 +75,7 @@ export function useSandboxUrlLoader(startSandboxConfig) {
                 const data = await client.sdk.startVm({
                     url: targetUrl,
                     mode: "json",
-                    resolution: config.resolution,
+                    resolution: config.resolution
                 });
                 if (!data.vncUrl) {
                     console.error(`No vncUrl in response for ${sandboxUid}:`, data);
@@ -98,6 +104,12 @@ export function useSandboxUrlLoader(startSandboxConfig) {
                 return browserUrl;
             }
             else if (startSandboxConfig) {
+                // If hasPreview is false, we don't need to start a container
+                // Just return empty string - no preview will be shown
+                if (startSandboxConfig.hasPreview === false) {
+                    setVmUrl(cacheKey, "");
+                    return "";
+                }
                 // No published_url available - fall back to calling startSandbox API with chat_uid
                 try {
                     if (!startSandboxConfig.chatUid) {
@@ -116,7 +128,7 @@ export function useSandboxUrlLoader(startSandboxConfig) {
                     const client = createApiClient({ apiKey });
                     const response = await client.sdk.startSandbox({
                         env: startSandboxConfig.env,
-                        chatUid: startSandboxConfig.chatUid,
+                        chatUid: startSandboxConfig.chatUid
                     });
                     // Use the container_url from the response as the browserUrl
                     const containerUrl = response.container_url;
@@ -161,6 +173,6 @@ export function useSandboxUrlLoader(startSandboxConfig) {
     return {
         loadSandboxUrl,
         getSandboxUrl,
-        preloadSandboxUrls,
+        preloadSandboxUrls
     };
 }

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

@@ -1,7 +1,9 @@
 export { default as GuardianPlayground } from "./guardian-playground";
 export { default as GuardianComponent } from "./guardian-component";
+export { default as Header } from "./header";
 export { VmProvider, useVmContext } from "./context/vm-context";
 export { GuardianProvider, useGuardianContext } from "./context/guardian-context";
+export { SdkThemeProvider, useSdkTheme, useThemeClass } from "./context/theme-context";
 export * from "./types";
 export { default as CodeFocusSection } from "./code-focus-section";
 export { buildGuardianConfig } from "./utils";

package/dist/components/sandbox/guardian/right-view/pill-file-selector.js

@@ -3,8 +3,8 @@ import React from "react";
 import { useGuardianContext } from "../context/guardian-context";
 import { cn } from "../../../../lib/utils";
 import { useFrameParams } from "../hooks/use-frame-params";
-import { FileCode, FileJson, FileText, Settings, Layout, Database, Image, Terminal, } from "lucide-react";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "../ui/tooltip";
+import { FileCode, FileJson, FileText, Settings, Layout, Database, Image, Terminal } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip";
 const FILE_ICONS = {
     // JavaScript/React
     js: { icon: FileCode, color: "text-yellow-600" },
@@ -42,13 +42,13 @@ const FILE_ICONS = {
     svg: { icon: Image, color: "text-green-500" },
     ico: { icon: Image, color: "text-green-500" },
     // Default
-    default: { icon: FileText, color: "text-zinc-500" },
+    default: { icon: FileText, color: "text-zinc-500" }
 };
 export default function PillFileSelector({ themeColor }) {
     const containerRef = React.useRef(null);
     const fileRefs = React.useRef({});
     const lastInitializedFilePath = React.useRef(null);
-    const { generatedCode, updateCode, setLanguage, activeFilePath: contextActiveFilePath, setActiveFileName, setActiveFilePath, setActiveDependenciesToInstall, setActiveLineRange, filesEdited, } = useGuardianContext();
+    const { generatedCode, updateCode, setLanguage, activeFilePath: contextActiveFilePath, setActiveFileName, setActiveFilePath, setActiveDependenciesToInstall, setActiveLineRange, filesEdited } = useGuardianContext();
     // Read frame params - these override context when isFrame=true
     const frameParams = useFrameParams();
     // Use frame param overrides when in frame mode
@@ -94,7 +94,7 @@ export default function PillFileSelector({ themeColor }) {
         "vite-plugin-react-instrumentation.ts",
         "instrumentation-client.ts",
         // Global styles (often not needed in code editor)
-        "globals.css",
+        "globals.css"
     ];
     const filteredFiles = fileEntries.filter(([filePath]) => {
         const fileName = filePath.split("/").pop() || filePath;
@@ -128,7 +128,7 @@ export default function PillFileSelector({ themeColor }) {
                 activeButton.scrollIntoView({
                     behavior: "instant",
                     block: "nearest",
-                    inline: "center",
+                    inline: "center"
                 });
             }
         }, 50);
@@ -156,38 +156,88 @@ export default function PillFileSelector({ themeColor }) {
         window.addEventListener("frameParamsUpdated", handleFrameParamsUpdate);
         return () => window.removeEventListener("frameParamsUpdated", handleFrameParamsUpdate);
     }, [frameParams.isFrame, scrollActivePillIntoView]);
-    // Load file from frame params when they change
+    // Load first file on mount when NOT in frame mode
     React.useEffect(() => {
-        // Skip if not in frame mode or no file path specified
-        if (!frameParams.isFrame || !frameParams.activeFilePath) {
+        // Skip if in frame mode (handled by separate effect)
+        if (frameParams.isFrame) {
             return;
         }
-        // Skip if we've already initialized this exact file path
-        if (lastInitializedFilePath.current === frameParams.activeFilePath) {
+        // Skip if generatedCode isn't loaded yet
+        if (!generatedCode || Object.keys(generatedCode).length === 0) {
+            return;
+        }
+        // Skip if already initialized
+        if (lastInitializedFilePath.current) {
             return;
         }
+        // Get filtered files (excluding certain files)
+        const fileEntries = Object.entries(generatedCode)
+            .filter(([filePath]) => {
+            const fileName = filePath.split("/").pop() || filePath;
+            return !excludedFiles.includes(fileName);
+        })
+            .sort(([a], [b]) => {
+            const aName = a.split("/").pop() || a;
+            const bName = b.split("/").pop() || b;
+            return aName.localeCompare(bName);
+        });
+        if (fileEntries.length === 0) {
+            return;
+        }
+        // Load the first file
+        const [firstFilePath, firstFileData] = fileEntries[0];
+        handleFileClick(firstFilePath, firstFileData);
+        lastInitializedFilePath.current = firstFilePath;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [frameParams.isFrame, generatedCode]);
+    // Load file from frame params when they change, or load first file if in frame mode
+    React.useEffect(() => {
         // Skip if generatedCode isn't loaded yet
         if (!generatedCode || Object.keys(generatedCode).length === 0) {
             return;
         }
+        // Get filtered files (excluding certain files)
+        const fileEntries = Object.entries(generatedCode).filter(([filePath]) => {
+            const fileName = filePath.split("/").pop() || filePath;
+            return !excludedFiles.includes(fileName);
+        });
+        // If not in frame mode, skip this effect
+        if (!frameParams.isFrame) {
+            return;
+        }
+        // Determine which file to load
+        let targetFilePath;
+        if (frameParams.activeFilePath) {
+            // Frame params specify a file - use it
+            targetFilePath = frameParams.activeFilePath;
+        }
+        else if (fileEntries.length > 0) {
+            // No file specified - load the first available file
+            const [firstFilePath] = fileEntries[0];
+            targetFilePath = firstFilePath;
+        }
+        // Skip if we've already initialized this exact file path
+        if (!targetFilePath || lastInitializedFilePath.current === targetFilePath) {
+            return;
+        }
         // Search by file_path property first (source of truth), then fallback to key lookup
         let fileData;
         let resolvedFilePath;
         // First, search through all code outputs to find one matching file_path
-        const matchingCodeOutput = Object.values(generatedCode).find((output) => output.file_path === frameParams.activeFilePath);
+        const matchingCodeOutput = Object.values(generatedCode).find((output) => output.file_path === targetFilePath);
         if (matchingCodeOutput) {
             fileData = matchingCodeOutput;
             resolvedFilePath = matchingCodeOutput.file_path;
         }
         else {
             // Fallback: try to get from generatedCode by key
-            if (generatedCode[frameParams.activeFilePath]) {
-                fileData = generatedCode[frameParams.activeFilePath];
-                resolvedFilePath = fileData.file_path || frameParams.activeFilePath;
+            if (generatedCode[targetFilePath]) {
+                fileData = generatedCode[targetFilePath];
+                resolvedFilePath = fileData.file_path || targetFilePath;
             }
         }
         if (fileData && resolvedFilePath) {
-            lastInitializedFilePath.current = frameParams.activeFilePath; // Track initialized path
+            lastInitializedFilePath.current = targetFilePath; // Track initialized path
             const fileName = fileData.code_file_name ||
                 resolvedFilePath.split("/").pop() ||
                 resolvedFilePath;
@@ -202,7 +252,7 @@ export default function PillFileSelector({ themeColor }) {
             if (frameParams.linesStart !== undefined) {
                 setActiveLineRange({
                     start: frameParams.linesStart,
-                    end: frameParams.linesEnd,
+                    end: frameParams.linesEnd
                 });
             }
             else {
@@ -232,14 +282,14 @@ export default function PillFileSelector({ themeColor }) {
                             }
                         }, onClick: () => handleFileClick(filePath, fileData), className: cn("flex items-center gap-1.5 px-2.5 py-1 rounded text-xs font-normal transition-colors whitespace-nowrap", isActive
                             ? "rounded-2xl text-zinc-100"
-                            : "text-zinc-400 hover:text-zinc-200", isEdited && "ring-1 ring-yellow-500/50"), style: isActive
+                            : " rounded-2xl text-zinc-400 hover:text-zinc-200", isEdited && "ring-1 ring-yellow-500/50"), style: Object.assign({ maxWidth: "none", flexShrink: 0 }, (isActive
                             ? {
                                 backgroundColor: `${effectiveThemeColor}33`, // ~20% opacity
                                 color: effectiveThemeColor,
                             }
-                            : undefined },
+                            : {})) },
                         React.createElement(IconComponent, { size: 12, className: cn("flex-shrink-0", !isActive && "text-zinc-500"), style: isActive ? { color: effectiveThemeColor } : undefined }),
-                        React.createElement("span", { className: "truncate max-w-[180px]" }, fileName),
+                        React.createElement("span", { style: { maxWidth: "none" } }, fileName),
                         isEdited && (React.createElement("span", { className: "h-1 w-1 rounded-full bg-yellow-400 flex-shrink-0" })))),
                 React.createElement(TooltipContent, { side: "top", className: "bg-zinc-900 text-zinc-200 text-[11px] px-2 py-1 rounded shadow border border-zinc-700 whitespace-pre font-mono" }, filePath)));
         }))));

package/dist/components/sandbox/guardian/right-view/preview-control-bar.js

@@ -4,10 +4,13 @@ import { useGuardianContext } from "../context/guardian-context";
 import { ChevronDown, RefreshCw, Maximize2, Minimize2
 // ExternalLink,
  } from "lucide-react";
-export default function PreviewControlBar({ isMinimized, onToggle, onRefresh, themeColor, externalUrl // <-- NEW PROP
+export default function PreviewControlBar({ isMinimized, onToggle, onRefresh, themeColor, externalUrl, // <-- NEW PROP
+isFrame = false, // <-- NEW PROP for frame mode awareness
  }) {
     const { isBrowserMaximized, setIsBrowserMaximized } = useGuardianContext();
     const frameParams = useFrameParams();
+    // Use prop isFrame if provided, otherwise fall back to frameParams.isFrame
+    const effectiveIsFrame = isFrame !== null && isFrame !== void 0 ? isFrame : frameParams.isFrame;
     const effectiveThemeColor = frameParams.isFrame && frameParams.theme ? frameParams.theme : themeColor;
     return (React.createElement("div", { className: "w-full flex items-center justify-between px-4 py-[0.32rem] border-b bg-black rounded-t-lg" },
         React.createElement("button", { onClick: onToggle, className: "flex items-center gap-2 transition-colors", title: isMinimized ? "Show preview" : "Hide preview" },
@@ -20,5 +23,5 @@ export default function PreviewControlBar({ isMinimized, onToggle, onRefresh, th
         React.createElement("div", { className: "flex items-center gap-2" },
             React.createElement("button", { onClick: onRefresh, className: "p-1.5 rounded transition-colors hover:bg-zinc-800", title: "Refresh preview", style: { color: effectiveThemeColor } },
                 React.createElement(RefreshCw, { className: "w-4 h-4" })),
-            React.createElement("button", { onClick: () => setIsBrowserMaximized(!isBrowserMaximized), className: "p-1.5 rounded transition-colors hover:bg-zinc-800", title: isBrowserMaximized ? "Exit fullscreen" : "Fullscreen preview", style: { color: effectiveThemeColor } }, isBrowserMaximized ? (React.createElement(Minimize2, { className: "w-4 h-4" })) : (React.createElement(Maximize2, { className: "w-4 h-4" }))))));
+            !effectiveIsFrame && (React.createElement("button", { onClick: () => setIsBrowserMaximized(!isBrowserMaximized), className: "p-1.5 rounded transition-colors hover:bg-zinc-800", title: isBrowserMaximized ? "Exit fullscreen" : "Fullscreen preview", style: { color: effectiveThemeColor } }, isBrowserMaximized ? (React.createElement(Minimize2, { className: "w-4 h-4" })) : (React.createElement(Maximize2, { className: "w-4 h-4" })))))));
 }