@sampleapp.ai/sdk 1.0.35 → 1.0.37

package/dist/components/sandbox/Sandbox.js

@@ -24,10 +24,22 @@ import { Skeleton } from "../ui/skeleton";
  *   apiKey={process.env.NEXT_PUBLIC_SAMPLEAPP_API_KEY!}
  *   sandboxId="launchdarkly-feature-flags"
  * />
+ *
+ * // Light mode
+ * <Sandbox
+ *   apiKey={process.env.NEXT_PUBLIC_SAMPLEAPP_API_KEY!}
+ *   sandboxId="launchdarkly-feature-flags"
+ *   theme="light"
+ * />
  * ```
  */
-export default function Sandbox({ apiKey, sandboxId, env, themeColor, }) {
+export default function Sandbox({ apiKey, sandboxId, env, themeColor, theme = "dark", }) {
     var _a;
+    // 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 [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
@@ -61,11 +73,11 @@ export default function Sandbox({ apiKey, sandboxId, env, themeColor, }) {
         };
     }, [apiKey, sandboxId, themeColor]);
     if (loading) {
-        return (React.createElement("div", { className: "h-screen w-screen bg-black" },
-            React.createElement(Skeleton, { className: "w-full h-full bg-zinc-900" })));
+        return (React.createElement("div", { className: "h-screen w-screen bg-white dark:bg-black" },
+            React.createElement(Skeleton, { className: "w-full h-full bg-zinc-100 dark:bg-zinc-900" })));
     }
     if (error) {
-        return (React.createElement("div", { className: "flex items-center justify-center h-screen bg-black" },
+        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: ",
                 error)));
@@ -76,19 +88,19 @@ export default function Sandbox({ apiKey, sandboxId, env, themeColor, }) {
     // Build the nested config from use cases
     const nestedConfig = buildGuardianConfig(config.useCases, {
         playgroundUid: sandboxId,
-        playgroundLogo: config.playgroundLogo || (React.createElement("div", { className: "text-white font-bold text-xl" }, config.name)),
+        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-black" },
+        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-black" },
-                React.createElement(GuardianPlayground, { nestedConfig: nestedConfig, useCase: firstUseCase.id, framework: firstFramework, isFrame: false, apiKey: apiKey, env: env, chatUid: config.chatUid })))));
+            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 })))));
 }

package/dist/components/sandbox/api.js

@@ -21,6 +21,7 @@ function createDownloadLink(downloadEndpoint) {
  * @returns Sandbox configuration
  */
 export async function fetchSandboxConfig(apiKey, sandboxId) {
+    var _a, _b;
     const client = createApiClient({
         apiKey,
     });
@@ -54,7 +55,7 @@ export async function fetchSandboxConfig(apiKey, sandboxId) {
         name: sandboxContent.uid, // Use UID as name if no name field exists
         description: sandboxContent.markdown || "", // Use markdown as description
         themeColor: "#3b82f6", // Default theme color
-        hasPreview: true,
+        hasPreview: (_a = sandboxContent.has_preview) !== null && _a !== void 0 ? _a : false,
         chatUid: sandboxContent.chat_uid || "", // Fallback: only used if published_url is not available
         useCases: [
             {
@@ -62,7 +63,7 @@ export async function fetchSandboxConfig(apiKey, sandboxId) {
                 name: sandboxContent.uid,
                 description: sandboxContent.markdown || "",
                 themeColor: "#3b82f6",
-                hasPreview: true,
+                hasPreview: (_b = sandboxContent.has_preview) !== null && _b !== void 0 ? _b : false,
                 frameworks: [
                     {
                         key: frameworkKey,

package/dist/components/sandbox/guardian/ask-ai-view.js

@@ -181,12 +181,12 @@ export default function AskAiView({ codeZipFile, playgroundUid, themeColor, }) {
                         React.createElement("span", { className: "text-muted-foreground text-sm" }, "Thinking...")))))) : (React.createElement("div", { className: "flex h-full items-center justify-center" },
                 React.createElement("div", { className: "flex flex-col items-start space-y-4 px-4 max-w-4xl" },
                     React.createElement("div", { className: "text-start" },
-                        React.createElement("h2", { className: "mb-2 text-2xl font-semibold tracking-tight text-gray-200" }, "Hi! Ask me anything"),
+                        React.createElement("h2", { className: "mb-2 text-2xl font-semibold tracking-tight text-zinc-800 dark:text-gray-200" }, "Hi! Ask me anything"),
                         React.createElement("p", { className: "text-muted-foreground text-base" }, "Try: \u201CHow does this sample app work?\u201D"))))),
             React.createElement("div", { ref: messagesEndRef })),
-        React.createElement("div", { className: "shrink-0 border-t border-gray-800/50 bg-[#0a0b0f]/95 backdrop-blur-sm" },
+        React.createElement("div", { className: "shrink-0 border-t border-zinc-200 dark:border-gray-800/50 bg-zinc-50/95 dark:bg-[#0a0b0f]/95 backdrop-blur-sm" },
             React.createElement("div", { className: "max-w-4xl mx-auto px-4 py-4" },
-                React.createElement("div", { className: "flex items-end gap-3 bg-[#1a1b23] rounded-2xl border border-gray-800/50 px-4 py-3 transition-all", style: {
+                React.createElement("div", { className: "flex items-end gap-3 bg-white dark:bg-[#1a1b23] rounded-2xl border border-zinc-200 dark:border-gray-800/50 px-4 py-3 transition-all", style: {
                         boxShadow: `0 0 0 1px transparent`,
                     } },
                     React.createElement("div", { className: "flex-1 min-w-0" },
@@ -195,7 +195,7 @@ export default function AskAiView({ codeZipFile, playgroundUid, themeColor, }) {
                                     e.preventDefault();
                                     handleSend();
                                 }
-                            }, placeholder: "Type your message...", disabled: isLoading, rows: 1, className: "w-full bg-transparent border-0 resize-none text-base text-gray-200 placeholder:text-gray-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed max-h-40 overflow-y-auto leading-relaxed", style: {
+                            }, placeholder: "Type your message...", disabled: isLoading, rows: 1, className: "w-full bg-transparent border-0 resize-none text-base text-zinc-800 dark:text-gray-200 placeholder:text-zinc-400 dark:placeholder:text-gray-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed max-h-40 overflow-y-auto leading-relaxed", style: {
                                 height: "auto",
                                 minHeight: "32px",
                             }, onInput: (e) => {

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

@@ -4,7 +4,7 @@ import { Markdown } from "./ui/markdown";
 export default function DefaultGuideView({ themeColor, }) {
     return (React.createElement("div", { className: "h-full flex flex-col" },
         React.createElement("div", { className: "flex-1 px-8 py-6" },
-            React.createElement(Markdown, { className: "text-gray-100", themeColor: themeColor }, `# Guardian Guide
+            React.createElement(Markdown, { className: "text-zinc-900 dark:text-gray-100", themeColor: themeColor }, `# Guardian Guide
 
 Learn how to use Guardian to build and deploy your application with confidence.
 

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

@@ -20,7 +20,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 py-6" },
-                    React.createElement(Markdown, { className: "text-gray-100", themeColor: themeColor, browserUrl: browserUrl, gitUrl: gitUrl, sandboxId: sandboxId, apiKey: apiKey }, CustomConsole))));
+                    React.createElement(Markdown, { className: "text-zinc-900 dark:text-gray-100", 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 }));
@@ -64,7 +64,7 @@ export default function ConsoleWithGuide({ CustomConsole, GuideView, playgroundU
             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-gray-300" }, "Powered by"),
+                    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" })))))));
 }

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

@@ -4,54 +4,28 @@ import AppLayoutNoSidebar from "./app-layout-no-sidebar";
 import GuardianDemo from "./demo/guardian-demo";
 import React, { useEffect, useRef } from "react";
 import { useGuardianContext } from "./context/guardian-context";
-import { useSandboxUrlLoader, } from "./hooks/use-sandbox-url-loader";
+import { 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, consoleUrlConfigs, completeCodeZipFile, variant, themeColor, hasPreview = true, isFrame = false, apiKey, env, chatUid, hideHeader = true, // Hardcoded to true by default, not exposed in Sandbox.tsx
+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 = true, // Hardcoded to true by default, not exposed in Sandbox.tsx
 gitUrl, }) {
     const { previewUrl, setPreviewUrl } = useGuardianContext();
     const { vmResolution } = useVmContext();
     const [sandboxError, setSandboxError] = React.useState(null);
-    // Build startSandboxConfig:
-    // - Always include apiKey when available (needed for VM calls even when browserUrl exists)
-    // - Include chatUid when browserUrl is missing (needed for startSandbox API call)
-    // - Include env if provided (will be validated later if required)
-    // PRECEDENCE: published_url takes precedence over chat_uid
-    // - If browserUrl (published_url) exists, it will be used directly (no startSandbox API call needed)
-    // - If browserUrl is not available, we need startSandboxConfig with chatUid to call startSandbox API
-    // This ensures backward compatibility while prioritizing published_url when available
-    const startSandboxConfig = apiKey
-        ? Object.assign({ apiKey }, (!browserUrl && chatUid ? { env, chatUid } : {})) : undefined;
+    // 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 } : {}));
     // 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;
-    const { getSandboxUrl, loadSandboxUrl, preloadSandboxUrls } = useSandboxUrlLoader(startSandboxConfig);
+    const { getSandboxUrl, loadSandboxUrl } = useSandboxUrlLoader(startSandboxConfig);
     // Initialize postMessage listener for iframe communication
     // This sends IFRAME_READY and listens for UPDATE_VIEW messages
     useFrameMessages();
-    // Track which console configs we've preloaded to prevent duplicates
-    const preloadedConfigsRef = useRef("");
     // Track which main sandbox we've loaded to prevent duplicates
     const loadedSandboxRef = useRef("");
-    // Preload console URLs when component mounts
-    useEffect(() => {
-        if (consoleUrlConfigs && consoleUrlConfigs.length > 0 && apiKey) {
-            // Create a key from the configs to detect changes
-            const configKey = JSON.stringify(consoleUrlConfigs.map((c) => c.sandboxUid));
-            // Only preload if we haven't already preloaded these configs
-            if (preloadedConfigsRef.current !== configKey) {
-                preloadedConfigsRef.current = configKey;
-                // Ensure apiKey is passed to all configs
-                const configsWithApiKey = consoleUrlConfigs.map((config) => (Object.assign(Object.assign({}, config), { apiKey: config.apiKey || apiKey })));
-                preloadSandboxUrls(configsWithApiKey).catch((error) => {
-                    console.error("Failed to preload console URLs:", error);
-                });
-            }
-        }
-        // Only re-run if consoleUrlConfigs or apiKey changes
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [consoleUrlConfigs, apiKey]);
     useEffect(() => {
         // Create a key for this sandbox load
         const sandboxKey = `${sandboxUid}-${browserUrl}-${useVm}`;
@@ -74,11 +48,6 @@ gitUrl, }) {
             // The resolution will be set by Browser component via context
             return;
         }
-        // If useVm is true, apiKey is required
-        if (useVm && !apiKey) {
-            console.error("apiKey is required when useVm is true");
-            return;
-        }
         // Mark as loading to prevent duplicate requests
         loadedSandboxRef.current = sandboxKey;
         // Load the sandbox URL (will be cached by sandboxUid + browserUrl)

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

@@ -9,7 +9,7 @@ import { GuardianStyleWrapper } from "./guardian-style-wrapper";
  *
  * When isFrame=true, reads framework from URL params client-side.
  */
-export default function GuardianPlayground({ nestedConfig, useCase, framework: serverFramework, isFrame = false, apiKey, env, chatUid, }) {
+export default function GuardianPlayground({ nestedConfig, useCase, framework: serverFramework, isFrame = false, apiKey, env, chatUid, theme = "dark", }) {
     var _a, _b;
     // When in frame mode, allow URL params to override framework
     const frameParams = useFrameParams();
@@ -40,6 +40,6 @@ export default function GuardianPlayground({ nestedConfig, useCase, framework: s
             firstFrameworkByUseCase[useCaseId] = firstFrameworkKey;
         }
     });
-    return (React.createElement(GuardianStyleWrapper, { themeColor: frameworkConfig.themeColor },
-        React.createElement(GuardianComponent, { demoOptions: frameworkConfig.demoOptions, frameworkOptions: frameworkConfig.frameworkOptions, firstFrameworkByUseCase: firstFrameworkByUseCase, currentFramework: frameworkConfig.currentFramework, CustomConsole: frameworkConfig.CustomConsole, GuideView: frameworkConfig.GuideView, playgroundUid: frameworkConfig.playgroundUid, browserUrl: (_a = frameParams.iframeUrl) !== null && _a !== void 0 ? _a : frameworkConfig.browserUrl, useVm: frameworkConfig.useVm, playgroundLogo: frameworkConfig.playgroundLogo, sandboxUid: frameworkConfig.sandboxUid, name: frameworkConfig.name, description: frameworkConfig.description, codeZipFile: frameworkConfig.codeZipFile, completeCodeZipFile: frameworkConfig.completeCodeZipFile, consoleUrlConfigs: frameworkConfig.consoleUrlConfigs, variant: frameworkConfig.variant, themeColor: frameworkConfig.themeColor, hasPreview: (_b = frameworkConfig.hasPreview) !== null && _b !== void 0 ? _b : true, currentUseCase: useCase, isFrame: isFrame, apiKey: apiKey, env: env, chatUid: chatUid, gitUrl: frameworkConfig.gitUrl })));
+    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: (_b = frameworkConfig.hasPreview) !== null && _b !== void 0 ? _b : true, currentUseCase: useCase, isFrame: isFrame, apiKey: apiKey, env: env, chatUid: chatUid, gitUrl: frameworkConfig.gitUrl })));
 }

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

@@ -5,9 +5,28 @@ import { TAILWIND_CSS } from "../../../lib/generated-css";
  * Style wrapper for Guardian components that injects Tailwind CSS
  * into the document without using Shadow DOM (preserves React context)
  */
-export const GuardianStyleWrapper = ({ children, themeColor = "#3b82f6", }) => {
+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);
+    // 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]);
     useEffect(() => {
         // Only run on client side
         if (typeof window === "undefined" || typeof document === "undefined") {
@@ -39,7 +58,7 @@ export const GuardianStyleWrapper = ({ children, themeColor = "#3b82f6", }) => {
             rootRef.current.style.setProperty("--colors-secondary", secondaryColor);
         }
     }, [themeColor]);
-    return (React.createElement("div", { ref: rootRef, className: "guardian-sdk-root dark bg-background text-foreground", style: {
+    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"',

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

@@ -36,12 +36,12 @@ export function useSandboxUrlLoader(startSandboxConfig) {
         }
         if (useVm) {
             try {
-                // API key is required - use from config or fallback to startSandboxConfig
-                const apiKey = config.apiKey || (startSandboxConfig === null || startSandboxConfig === void 0 ? void 0 : startSandboxConfig.apiKey);
+                // API key is required - use directly from config
+                const apiKey = config.apiKey;
                 if (!apiKey) {
                     throw new Error("API key is required for VM sandbox creation");
                 }
-                // Fetch VM URL from API using the SDK API client with apiKey in config
+                // Fetch VM URL from API using the SDK API client
                 const client = createApiClient({ apiKey });
                 if (config === null || config === void 0 ? void 0 : config.resolution) {
                     config.resolution[0] += 20;
@@ -107,10 +107,13 @@ export function useSandboxUrlLoader(startSandboxConfig) {
                     if (!startSandboxConfig.env) {
                         throw new Error("env is required when published_url is not available (needed to start sandbox)");
                     }
-                    // Create client with apiKey in config (will be sent as Bearer token)
-                    const client = createApiClient({
-                        apiKey: startSandboxConfig.apiKey,
-                    });
+                    // API key is required - use directly from config
+                    const apiKey = config.apiKey;
+                    if (!apiKey) {
+                        throw new Error("API key is required for starting sandbox");
+                    }
+                    // Create client with apiKey (will be sent as Bearer token)
+                    const client = createApiClient({ apiKey });
                     const response = await client.sdk.startSandbox({
                         env: startSandboxConfig.env,
                         chatUid: startSandboxConfig.chatUid,
@@ -153,9 +156,8 @@ export function useSandboxUrlLoader(startSandboxConfig) {
             return getVmUrl(cacheKey) === undefined && !hasError(cacheKey);
         });
         // Load all URLs in parallel, but catch errors individually
-        // Use API key from startSandboxConfig as fallback if not provided in config
-        await Promise.allSettled(configsToLoad.map((config) => loadSandboxUrl(Object.assign(Object.assign({}, config), { apiKey: config.apiKey || (startSandboxConfig === null || startSandboxConfig === void 0 ? void 0 : startSandboxConfig.apiKey) }))));
-    }, [getVmUrl, loadSandboxUrl, hasError, startSandboxConfig]);
+        await Promise.allSettled(configsToLoad.map((config) => loadSandboxUrl(config)));
+    }, [getVmUrl, loadSandboxUrl, hasError]);
     return {
         loadSandboxUrl,
         getSandboxUrl,

package/dist/components/sandbox/guardian/ide/browser.js

@@ -494,57 +494,57 @@ export default function Browser({ previewUrl, setPreviewUrl, containerEndpoint,
             } }));
     };
     return (React.createElement("div", { className: "flex h-full w-full flex-col" },
-        !useVm && !isGuardian && (React.createElement("div", { className: "bg-white dark:bg-black border-b border-zinc-200 dark:border-zinc-800 flex-shrink-0" },
+        !useVm && !isGuardian && (React.createElement("div", { className: "bg-black border-b border-zinc-800 flex-shrink-0" },
             React.createElement("div", { className: "flex items-center gap-1.5 px-2 py-1.5 h-[2.38rem]" },
                 React.createElement("div", { className: "flex gap-0.5" },
-                    React.createElement("button", { onClick: handleBack, disabled: historyIndex === 0, className: "p-1 hover:bg-zinc-100 dark:hover:bg-zinc-900 rounded disabled:opacity-30 disabled:hover:bg-transparent transition-colors", title: "Back" },
-                        React.createElement(ChevronLeft, { size: 14, className: "text-zinc-600 dark:text-zinc-400" })),
-                    React.createElement("button", { onClick: handleForward, disabled: historyIndex === historyLength - 1, className: "p-1 hover:bg-zinc-100 dark:hover:bg-zinc-900 rounded disabled:opacity-30 disabled:hover:bg-transparent transition-colors", title: "Forward" },
-                        React.createElement(ChevronRight, { size: 14, className: "text-zinc-600 dark:text-zinc-400" })),
-                    React.createElement("button", { onClick: handleRefresh, className: "p-1 hover:bg-zinc-100 dark:hover:bg-zinc-900 rounded transition-colors", title: "Refresh" },
-                        React.createElement(RefreshCw, { size: 14, className: `text-zinc-600 dark:text-zinc-400 ${isLoading ? "animate-spin" : ""}` }))),
-                React.createElement("div", { className: "flex-1 flex items-center gap-1.5 px-2 py-1 bg-zinc-50 dark:bg-zinc-950 rounded text-zinc-600 dark:text-zinc-400 focus-within:bg-white dark:focus-within:bg-zinc-900 transition-colors" },
-                    error ? (React.createElement(AlertTriangle, { size: 12, className: "text-red-500 flex-shrink-0" })) : (React.createElement(Lock, { size: 12, className: "text-zinc-400 dark:text-zinc-600 flex-shrink-0" })),
+                    React.createElement("button", { onClick: handleBack, disabled: historyIndex === 0, className: "p-1 hover:bg-zinc-900 rounded disabled:opacity-30 disabled:hover:bg-transparent transition-colors", title: "Back" },
+                        React.createElement(ChevronLeft, { size: 14, className: "text-zinc-400" })),
+                    React.createElement("button", { onClick: handleForward, disabled: historyIndex === historyLength - 1, className: "p-1 hover:bg-zinc-900 rounded disabled:opacity-30 disabled:hover:bg-transparent transition-colors", title: "Forward" },
+                        React.createElement(ChevronRight, { size: 14, className: "text-zinc-400" })),
+                    React.createElement("button", { onClick: handleRefresh, className: "p-1 hover:bg-zinc-900 rounded transition-colors", title: "Refresh" },
+                        React.createElement(RefreshCw, { size: 14, className: `text-zinc-400 ${isLoading ? "animate-spin" : ""}` }))),
+                React.createElement("div", { className: "flex-1 flex items-center gap-1.5 px-2 py-1 bg-zinc-950 rounded text-zinc-400 focus-within:bg-zinc-900 transition-colors" },
+                    error ? (React.createElement(AlertTriangle, { size: 12, className: "text-red-500 flex-shrink-0" })) : (React.createElement(Lock, { size: 12, className: "text-zinc-600 flex-shrink-0" })),
                     React.createElement("input", { type: "text", 
                         // value={urlInput}
-                        value: "/", onChange: (e) => setUrlInput(e.target.value), onKeyDown: handleUrlChange, className: "flex-1 text-xs border-none outline-none bg-transparent text-zinc-700 dark:text-zinc-300 placeholder:text-zinc-400 dark:placeholder:text-zinc-600", placeholder: "Enter URL" }),
-                    isGuardian && (React.createElement("button", { onClick: () => setIsBrowserMaximized(!isBrowserMaximized), className: "p-1 hover:bg-zinc-100 dark:hover:bg-zinc-900 rounded transition-colors", title: isBrowserMaximized
+                        value: "/", onChange: (e) => setUrlInput(e.target.value), onKeyDown: handleUrlChange, className: "flex-1 text-xs border-none outline-none bg-transparent text-zinc-300 placeholder:text-zinc-600", placeholder: "Enter URL" }),
+                    isGuardian && (React.createElement("button", { onClick: () => setIsBrowserMaximized(!isBrowserMaximized), className: "p-1 hover:bg-zinc-900 rounded transition-colors", title: isBrowserMaximized
                             ? "Exit fullscreen"
-                            : "Fullscreen preview" }, isBrowserMaximized ? (React.createElement(Minimize2, { size: 14, className: "text-zinc-600 dark:text-zinc-400" })) : (React.createElement(Maximize2, { size: 14, className: "text-zinc-600 dark:text-zinc-400" })))),
+                            : "Fullscreen preview" }, isBrowserMaximized ? (React.createElement(Minimize2, { size: 14, className: "text-zinc-400" })) : (React.createElement(Maximize2, { size: 14, className: "text-zinc-400" })))),
                     React.createElement("button", { onClick: () => {
                             window.open(previewUrl, "_blank", "noopener,noreferrer");
-                        }, className: "ml-1 p-1 hover:bg-zinc-100 dark:hover:bg-zinc-900 rounded transition-colors", title: "Open in new tab", disabled: !urlInput || !!error, tabIndex: -1, type: "button" },
-                        React.createElement(ExternalLink, { size: 14, className: "text-zinc-600 dark:text-zinc-400" })),
+                        }, className: "ml-1 p-1 hover:bg-zinc-900 rounded transition-colors", title: "Open in new tab", disabled: !urlInput || !!error, tabIndex: -1, type: "button" },
+                        React.createElement(ExternalLink, { size: 14, className: "text-zinc-400" })),
                     React.createElement(DropdownMenu, null,
                         React.createElement(DropdownMenuTrigger, { asChild: true },
-                            React.createElement("button", { className: "ml-1 p-1 hover:bg-zinc-100 dark:hover:bg-zinc-900 rounded transition-colors", title: "More options", type: "button" },
-                                React.createElement(MoreVertical, { size: 14, className: "text-zinc-600 dark:text-zinc-400" }))),
-                        React.createElement(DropdownMenuContent, { align: "end", className: "bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800" },
+                            React.createElement("button", { className: "ml-1 p-1 hover:bg-zinc-900 rounded transition-colors", title: "More options", type: "button" },
+                                React.createElement(MoreVertical, { size: 14, className: "text-zinc-400" }))),
+                        React.createElement(DropdownMenuContent, { align: "end", className: "bg-zinc-900 border border-zinc-800" },
                             React.createElement(DropdownMenuItem, { onClick: () => {
                                     // Restart functionality - can be implemented if needed
-                                }, className: "cursor-pointer text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800" }, "Restart App"))))))),
-        error && (React.createElement("div", { className: "p-4 bg-red-50 border-b border-red-100 text-red-700 text-sm dark:bg-red-950 dark:border-red-800 dark:text-red-200" },
+                                }, className: "cursor-pointer text-zinc-300 hover:bg-zinc-800" }, "Restart App"))))))),
+        error && (React.createElement("div", { className: "p-4 bg-red-950 border-b border-red-800 text-red-200 text-sm" },
             React.createElement("div", { className: "flex items-center gap-2" },
                 React.createElement(AlertTriangle, { size: 16 }),
                 React.createElement("span", null, error)))),
-        React.createElement("div", { ref: containerRef, className: "flex-1 min-h-0 relative" }, sandboxError && sandboxError.includes("env is required") ? (React.createElement("div", { className: "h-full w-full flex items-center justify-center bg-zinc-50 dark:bg-zinc-900" },
+        React.createElement("div", { ref: containerRef, className: "flex-1 min-h-0 relative" }, sandboxError && sandboxError.includes("env is required") ? (React.createElement("div", { className: "h-full w-full flex items-center justify-center bg-zinc-900" },
             React.createElement("div", { className: "max-w-md mx-auto p-8 text-center" },
                 React.createElement("div", { className: "mb-4 flex justify-center" },
-                    React.createElement(AlertTriangle, { size: 48, className: "text-amber-500 dark:text-amber-400" })),
-                React.createElement("h2", { className: "text-xl font-semibold text-zinc-900 dark:text-zinc-100 mb-2" }, "Environment Variables Required"),
-                React.createElement("p", { className: "text-sm text-zinc-600 dark:text-zinc-400 mb-4" },
+                    React.createElement(AlertTriangle, { size: 48, className: "text-amber-400" })),
+                React.createElement("h2", { className: "text-xl font-semibold text-zinc-100 mb-2" }, "Environment Variables Required"),
+                React.createElement("p", { className: "text-sm text-zinc-400 mb-4" },
                     "This sandbox doesn't have a published URL and needs to be started dynamically. Please provide the",
                     " ",
-                    React.createElement("code", { className: "px-1.5 py-0.5 bg-zinc-200 dark:bg-zinc-800 rounded text-xs font-mono" }, "env"),
+                    React.createElement("code", { className: "px-1.5 py-0.5 bg-zinc-800 rounded text-xs font-mono" }, "env"),
                     " ",
                     "prop to the",
                     " ",
-                    React.createElement("code", { className: "px-1.5 py-0.5 bg-zinc-200 dark:bg-zinc-800 rounded text-xs font-mono" }, "<Sandbox>"),
+                    React.createElement("code", { className: "px-1.5 py-0.5 bg-zinc-800 rounded text-xs font-mono" }, "<Sandbox>"),
                     " ",
                     "component."),
-                React.createElement("div", { className: "mt-6 p-4 bg-zinc-100 dark:bg-zinc-800 rounded-lg text-left" },
-                    React.createElement("p", { className: "text-xs font-mono text-zinc-700 dark:text-zinc-300 mb-2" }, "Example:"),
-                    React.createElement("pre", { className: "text-xs text-zinc-600 dark:text-zinc-400 overflow-x-auto" }, `<Sandbox
+                React.createElement("div", { className: "mt-6 p-4 bg-zinc-800 rounded-lg text-left" },
+                    React.createElement("p", { className: "text-xs font-mono text-zinc-300 mb-2" }, "Example:"),
+                    React.createElement("pre", { className: "text-xs text-zinc-400 overflow-x-auto" }, `<Sandbox
   apiKey="your-api-key"
   sandboxId="sandbox-id"
   env={{
@@ -553,8 +553,8 @@ export default function Browser({ previewUrl, setPreviewUrl, containerEndpoint,
   }}
 />`))))) : (React.createElement(React.Fragment, null,
             renderIframe(),
-            isLoading && (React.createElement("div", { className: "absolute inset-0 bg-zinc-100 dark:bg-zinc-800 bg-opacity-50 flex items-center justify-center z-10" },
-                React.createElement("div", { className: "text-sm text-zinc-600 bg-white dark:bg-black p-3 rounded-lg shadow-md" },
+            isLoading && (React.createElement("div", { className: "absolute inset-0 bg-zinc-800 bg-opacity-50 flex items-center justify-center z-10" },
+                React.createElement("div", { className: "text-sm text-zinc-400 bg-black p-3 rounded-lg shadow-md" },
                     "Loading ",
                     urlInput,
                     "..."))),

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

@@ -4,5 +4,5 @@ export { VmProvider, useVmContext } from "./context/vm-context";
 export { GuardianProvider, useGuardianContext } from "./context/guardian-context";
 export * from "./types";
 export { default as CodeFocusSection } from "./code-focus-section";
-export { buildGuardianConfig, createSandboxUrlConfigs } from "./utils";
+export { buildGuardianConfig } from "./utils";
 export { Framework, FrameworkLabel } from "./types";

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

@@ -16,10 +16,10 @@ export default function PreviewControlBar({ isMinimized, onToggle, onRefresh, th
                 React.createElement(ChevronDown, { className: "w-4 h-4" })),
             React.createElement("span", { className: "text-sm font-medium", style: { color: effectiveThemeColor } }, "Preview")),
         React.createElement("div", { className: "flex items-center gap-2" },
-            externalUrl && (React.createElement("a", { href: externalUrl, target: "_blank", rel: "noopener noreferrer", title: "Open in new tab", style: { color: effectiveThemeColor }, className: "p-1.5 rounded transition-colors hover:bg-zinc-800 dark:hover:bg-zinc-800" },
+            externalUrl && (React.createElement("a", { href: externalUrl, target: "_blank", rel: "noopener noreferrer", title: "Open in new tab", style: { color: effectiveThemeColor }, className: "p-1.5 rounded transition-colors hover:bg-zinc-800" },
                 React.createElement(ExternalLink, { className: "w-4 h-4" }),
                 React.createElement("span", { className: "sr-only" }, "Open external link"))),
-            React.createElement("button", { onClick: onRefresh, className: "p-1.5 rounded transition-colors hover:bg-zinc-800 dark:hover:bg-zinc-800", title: "Refresh preview", style: { color: effectiveThemeColor } },
+            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 dark: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" }))))));
+            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" }))))));
 }

package/dist/components/sandbox/guardian/right-view/right-top-down-view.js

@@ -213,11 +213,11 @@ export default function RightView({ reloadCounter, overlayStage, browserUrl, use
                         React.createElement("div", { className: "absolute inset-x-0 top-0 h-1/2 group-hover:bg-blue-400/20 transition-colors" }),
                         React.createElement("div", { className: "absolute inset-x-0 bottom-0 h-1/2 group-hover:bg-blue-400/20 transition-colors" }),
                         React.createElement("div", { className: "h-full w-px bg-border group-hover:bg-blue-400 transition-colors relative z-10" }))))),
-            React.createElement(Panel, { defaultSize: 32, minSize: 20, maxSize: 80, order: 2 },
+            React.createElement(Panel, { defaultSize: hasPreview ? 32 : 100, minSize: 20, maxSize: hasPreview ? 80 : 100, order: 2 },
                 React.createElement("div", { className: "h-full w-full flex flex-col" },
                     React.createElement("div", { className: "flex-1 min-h-0 flex flex-col" },
                         React.createElement(React.Fragment, null,
-                            React.createElement("div", { className: "flex items-center justify-between border-b border-zinc-800 dark:border-zinc-700 bg-zinc-900 dark:bg-zinc-950" },
+                            React.createElement("div", { className: "flex items-center justify-between border-b border-zinc-800 bg-zinc-900" },
                                 React.createElement(PillFileSelector, { themeColor: effectiveThemeColor }),
                                 React.createElement("div", { className: "px-2 flex-shrink-0" },
                                     React.createElement("button", { type: "button", className: "inline-flex items-center gap-1 text-[10px] font-medium transition-colors hover:opacity-80", style: { color: effectiveThemeColor }, onClick: handleDownloadAsZip },

package/dist/components/sandbox/guardian/ui/download-and-open-buttons.js

@@ -59,7 +59,7 @@ export const DownloadAndOpenButtons = ({ downloadUrl, themeColor, gitUrl, browse
             React.createElement("button", { type: "button", className: "inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md !text-white transition-all hover:opacity-90 active:scale-[0.98]", style: { backgroundColor: themeColor }, onClick: handleDownload },
                 React.createElement(DownloadIcon, { className: "w-3.5 h-3.5 !text-white" }),
                 "Download example"),
-            React.createElement("button", { type: "button", className: "inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md border transition-all hover:opacity-90 active:scale-[0.98] bg-zinc-900 dark:bg-zinc-800 border-zinc-700 dark:border-zinc-700 !text-white", onClick: handleOpenInVSCode },
+            React.createElement("button", { type: "button", className: "inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md border transition-all hover:opacity-90 active:scale-[0.98] bg-zinc-100 dark:bg-zinc-800 border-zinc-300 dark:border-zinc-700 text-zinc-900 dark:text-white", onClick: handleOpenInVSCode },
                 React.createElement(VSCodeLogo, { className: "w-3.5 h-3.5" }),
                 "Integrate in VS Code")),
         React.createElement(Dialog, { open: isModalOpen, onOpenChange: setIsModalOpen },

package/dist/components/sandbox/guardian/ui/markdown/code-group/code-block.js

@@ -1,10 +1,39 @@
-import React, { memo, useState } from "react";
+import React, { memo, useState, useEffect } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { oneLight } from "react-syntax-highlighter/dist/esm/styles/prism";
 import { cn } from "../../../../../../lib/utils";
 import { Copy, CheckCircle2 } from "lucide-react";
 export const CodeBlock = memo(({ language, value, title, className, children, isInsideCodeGroup = false, maxH, }) => {
     const [copied, setCopied] = useState(false);
+    const [isDark, setIsDark] = useState(true);
+    // Detect if we're in dark mode by checking for .dark class on ancestor
+    useEffect(() => {
+        const checkTheme = () => {
+            var _a;
+            if (typeof document === "undefined")
+                return;
+            // Check if guardian-sdk-root has dark class
+            const root = document.querySelector(".guardian-sdk-root");
+            setIsDark((_a = root === null || root === void 0 ? void 0 : root.classList.contains("dark")) !== null && _a !== void 0 ? _a : true);
+        };
+        checkTheme();
+        // Also check on mount with a slight delay to ensure DOM is ready
+        const timer = setTimeout(checkTheme, 100);
+        // Watch for changes using MutationObserver
+        const observer = new MutationObserver(checkTheme);
+        const root = document.querySelector(".guardian-sdk-root");
+        if (root) {
+            observer.observe(root, {
+                attributes: true,
+                attributeFilter: ["class"],
+            });
+        }
+        return () => {
+            clearTimeout(timer);
+            observer.disconnect();
+        };
+    }, []);
     let code = value;
     if (typeof children === "string") {
         code = children;
@@ -22,33 +51,41 @@ export const CodeBlock = memo(({ language, value, title, className, children, is
     // If inside CodeGroup, render just the code content
     if (isInsideCodeGroup) {
         return (React.createElement("div", { className: "group relative overflow-x-auto" },
-            React.createElement("div", { className: `${maxH || "max-h-[40vh]"} rounded-b-md bg-zinc-900 px-5 py-3 overflow-y-auto [&>pre]:overflow-x-auto` },
-                React.createElement("div", { className: "min-w-0 text-[13px]" },
-                    React.createElement(SyntaxHighlighter, { language: language || "javascript", style: vscDarkPlus, PreTag: "div", customStyle: {
+            React.createElement("div", { className: `${maxH || "max-h-[40vh]"} rounded-b-md bg-zinc-100 dark:bg-zinc-900 px-5 py-3 overflow-y-auto [&>pre]:overflow-x-auto` },
+                React.createElement("div", { className: "min-w-0 text-[13px] [&_*]:!bg-transparent" },
+                    React.createElement(SyntaxHighlighter, { language: language || "javascript", style: isDark ? vscDarkPlus : oneLight, PreTag: "div", customStyle: {
                             margin: 0,
                             padding: 0,
-                            background: "transparent",
+                            background: "transparent !important",
                             fontSize: "13px",
                             width: "100%",
                             minWidth: 0,
                             maxWidth: "100%",
+                        }, codeTagProps: {
+                            style: {
+                                background: "transparent !important",
+                            },
                         }, wrapLongLines: false }, code || "")))));
     }
     // Standalone code block with title
     return (React.createElement("div", { className: cn("relative w-full border rounded-lg mb-4", className) },
-        React.createElement("div", { className: "flex items-center justify-between px-4 py-2 bg-zinc-900 text-primary border-b rounded-t-md" },
+        React.createElement("div", { className: "flex items-center justify-between px-4 py-2 bg-zinc-100 dark:bg-zinc-900 text-primary border-b rounded-t-md" },
             React.createElement("span", { className: "text-xs text-primary font-mono" }, language || title || ""),
-            React.createElement("button", { type: "button", className: "h-5 w-5 flex items-center justify-center hover:bg-transparent text-zinc-200 hover:text-zinc-300 border-none", onClick: handleCopy }, copied ? (React.createElement(CheckCircle2, { className: "h-3 w-3 text-green-500" })) : (React.createElement(Copy, { className: "h-3 w-3" })))),
-        React.createElement("div", { className: `${maxH || "max-h-[40vh]"} rounded-b-md bg-zinc-900 px-5 py-3 overflow-y-auto [&>pre]:overflow-x-auto` },
-            React.createElement("div", { className: "min-w-0 text-[13px]" },
-                React.createElement(SyntaxHighlighter, { language: language || "javascript", style: vscDarkPlus, PreTag: "div", customStyle: {
+            React.createElement("button", { type: "button", className: "h-5 w-5 flex items-center justify-center hover:bg-transparent text-zinc-700 dark:text-zinc-200 hover:text-zinc-900 dark:hover:text-zinc-300 border-none", onClick: handleCopy }, copied ? (React.createElement(CheckCircle2, { className: "h-3 w-3 text-green-500" })) : (React.createElement(Copy, { className: "h-3 w-3" })))),
+        React.createElement("div", { className: `${maxH || "max-h-[40vh]"} rounded-b-md bg-zinc-100 dark:bg-zinc-900 px-5 py-3 overflow-y-auto [&>pre]:overflow-x-auto` },
+            React.createElement("div", { className: "min-w-0 text-[13px] [&_*]:!bg-transparent" },
+                React.createElement(SyntaxHighlighter, { language: language || "javascript", style: isDark ? vscDarkPlus : oneLight, PreTag: "div", customStyle: {
                         margin: 0,
                         padding: 0,
-                        background: "transparent",
+                        background: "transparent !important",
                         fontSize: "13px",
                         width: "100%",
                         minWidth: 0,
                         maxWidth: "100%",
+                    }, codeTagProps: {
+                        style: {
+                            background: "transparent !important",
+                        },
                     }, wrapLongLines: false }, code || "")))));
 });
 CodeBlock.displayName = "CodeBlock";