@sampleapp.ai/sdk 1.0.34 → 1.0.36

package/dist/components/sandbox/Sandbox.js

@@ -24,9 +24,16 @@ 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;
     const [config, setConfig] = useState(null);
     const [loading, setLoading] = useState(true);
@@ -61,11 +68,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 +83,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/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/code-focus-section.js

@@ -1,5 +1,5 @@
 "use client";
-import React, { useEffect, useMemo, useRef } from "react";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import { useGuardianContext } from "./context/guardian-context";
 // Helper function to find a node in the file tree by path
 function getTargetNode(fileTree, targetPath) {
@@ -13,15 +13,159 @@ function getTargetNode(fileTree, targetPath) {
     }
     return current;
 }
+class CodeFocusSectionCoordinator {
+    constructor() {
+        this.sections = new Map();
+        this.lastActiveSectionId = null;
+        this.scrollContainers = new Set();
+        this.scrollHandler = null;
+        if (typeof window !== "undefined") {
+            this.scrollHandler = this.handleScroll.bind(this);
+        }
+    }
+    handleScroll() {
+        this.updateActiveSection();
+    }
+    /**
+     * Calculate how "centered" an element is relative to its scroll container.
+     * Returns a score from 0 to 1, where 1 means the element's top is at the ideal reading position.
+     */
+    calculateScore(element) {
+        // Find the scroll container by walking up the DOM
+        const scrollContainer = this.findScrollContainer(element);
+        if (!scrollContainer)
+            return 0;
+        const containerRect = scrollContainer.getBoundingClientRect();
+        const elementRect = element.getBoundingClientRect();
+        // Calculate position relative to the scroll container
+        const relativeTop = elementRect.top - containerRect.top;
+        const relativeBottom = elementRect.bottom - containerRect.top;
+        const containerHeight = containerRect.height;
+        // Check if element is visible in the container
+        if (relativeBottom < 0 || relativeTop > containerHeight) {
+            return 0; // Not visible
+        }
+        // Target point: 20-30% from top of container for natural reading flow
+        // This is where the user's eyes naturally focus when reading
+        const targetPoint = containerHeight * 0.25;
+        // Calculate how close the element's top is to the target point
+        const distanceFromTarget = Math.abs(relativeTop - targetPoint);
+        const maxDistance = containerHeight;
+        // Base score from distance (closer to target = higher score)
+        const distanceScore = Math.max(0, 1 - distanceFromTarget / maxDistance);
+        // Bonus for elements that are in the "reading zone" (top 50% of container)
+        const inReadingZone = relativeTop >= 0 && relativeTop < containerHeight * 0.5;
+        const readingZoneBonus = inReadingZone ? 0.3 : 0;
+        // Visibility factor - how much of the element is visible
+        const visibleTop = Math.max(0, relativeTop);
+        const visibleBottom = Math.min(containerHeight, relativeBottom);
+        const visibleHeight = Math.max(0, visibleBottom - visibleTop);
+        const elementHeight = elementRect.height;
+        const visibilityRatio = elementHeight > 0 ? visibleHeight / elementHeight : 0;
+        const visibilityFactor = visibilityRatio * 0.2;
+        return distanceScore * 0.5 + readingZoneBonus + visibilityFactor;
+    }
+    findScrollContainer(element) {
+        let current = element.parentElement;
+        while (current) {
+            const style = window.getComputedStyle(current);
+            const overflowY = style.overflowY;
+            if ((overflowY === "auto" || overflowY === "scroll") &&
+                current.scrollHeight > current.clientHeight) {
+                return current;
+            }
+            current = current.parentElement;
+        }
+        return null;
+    }
+    updateActiveSection() {
+        if (this.sections.size === 0)
+            return;
+        // Find the section with the highest score
+        let bestSection = null;
+        let bestScore = -1;
+        let bestId = null;
+        for (const [id, entry] of this.sections) {
+            const score = this.calculateScore(entry.element);
+            if (score > bestScore) {
+                bestScore = score;
+                bestSection = entry;
+                bestId = id;
+            }
+        }
+        // Only trigger if we have a valid section with a reasonable score
+        // and it's different from the last one
+        if (bestSection && bestId && bestScore > 0.1 && bestId !== this.lastActiveSectionId) {
+            this.lastActiveSectionId = bestId;
+            bestSection.focusCallback();
+        }
+    }
+    register(id, element, focusCallback) {
+        const entry = { element, focusCallback, id };
+        this.sections.set(id, entry);
+        element.setAttribute("data-code-focus-id", id);
+        // Find and attach to the scroll container
+        const scrollContainer = this.findScrollContainer(element);
+        if (scrollContainer && this.scrollHandler) {
+            if (!this.scrollContainers.has(scrollContainer)) {
+                scrollContainer.addEventListener("scroll", this.scrollHandler, { passive: true });
+                this.scrollContainers.add(scrollContainer);
+            }
+        }
+        // Trigger initial update
+        this.updateActiveSection();
+        // Return cleanup function
+        return () => {
+            this.sections.delete(id);
+            if (this.lastActiveSectionId === id) {
+                this.lastActiveSectionId = null;
+            }
+            // Clean up scroll listeners if no more sections
+            if (this.sections.size === 0) {
+                for (const container of this.scrollContainers) {
+                    if (this.scrollHandler) {
+                        container.removeEventListener("scroll", this.scrollHandler);
+                    }
+                }
+                this.scrollContainers.clear();
+            }
+        };
+    }
+    // Force focus a specific section (for click handling)
+    forceFocus(id) {
+        const section = this.sections.get(id);
+        if (section) {
+            this.lastActiveSectionId = id;
+            section.focusCallback();
+        }
+    }
+}
+// Singleton instance - created lazily to avoid SSR issues
+let coordinatorInstance = null;
+function getCoordinator() {
+    if (!coordinatorInstance && typeof window !== "undefined") {
+        coordinatorInstance = new CodeFocusSectionCoordinator();
+    }
+    return coordinatorInstance;
+}
+// Counter for generating unique IDs
+let sectionIdCounter = 0;
 /**
  * Component that focuses on a specific file and line range in the code editor
  * when it comes into view while scrolling, or when the user clicks "View Code".
+ *
+ * Uses a global coordinator pattern (similar to Stripe docs) to ensure:
+ * - Only ONE section is active at a time
+ * - The section closest to the viewport center is selected
+ * - Smooth transitions without flickering during fast scrolling
+ * - Natural reading flow with slight bias towards top of viewport
  */
-export default function CodeFocusSection({ filePath, lineRange, title, description, children, threshold = 0, themeColor, }) {
+export default function CodeFocusSection({ filePath, lineRange, title, description, children, themeColor, }) {
     const sectionRef = useRef(null);
+    const sectionIdRef = useRef(`code-focus-${++sectionIdCounter}`);
     const { generatedCode, fileTree, setActiveFilePath, setActiveFileName, setActiveLineNumber, setActiveLineRange, updateCode, setLanguage, filesEdited, activeFilePath, activeLineRange, } = useGuardianContext();
-    // Moves the editor's focus to this file/lines
-    const focusCode = () => {
+    // Memoize the focus code function to prevent unnecessary recreations
+    const focusCode = useCallback(() => {
         // Get the file code from generatedCode or fileTree
         // Always search by file_path property first, as that's the source of truth
         let code = "";
@@ -94,41 +238,35 @@ export default function CodeFocusSection({ filePath, lineRange, title, descripti
                 setActiveLineNumber(undefined);
             }
         }
-    };
-    useEffect(() => {
-        const element = sectionRef.current;
-        if (!element)
-            return;
-        const observer = new IntersectionObserver((entries) => {
-            entries.forEach((entry) => {
-                // Trigger when the element enters the middle of the viewport
-                if (entry.isIntersecting) {
-                    focusCode();
-                }
-            });
-        }, {
-            threshold,
-            rootMargin: "-40% 0px -40% 0px", // Trigger when element enters the middle 20% of viewport
-        });
-        observer.observe(element);
-        return () => {
-            observer.disconnect();
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         filePath,
         lineRange,
         generatedCode,
         fileTree,
+        filesEdited,
         setActiveFilePath,
         setActiveFileName,
         setActiveLineNumber,
         setActiveLineRange,
         updateCode,
         setLanguage,
-        filesEdited,
-        threshold,
     ]);
+    // Register with the global coordinator
+    useEffect(() => {
+        const element = sectionRef.current;
+        if (!element || typeof window === "undefined")
+            return;
+        const coordinator = getCoordinator();
+        const cleanup = coordinator.register(sectionIdRef.current, element, focusCode);
+        return cleanup;
+    }, [focusCode]);
+    // Handle click to force focus
+    const handleClick = useCallback(() => {
+        if (typeof window !== "undefined") {
+            const coordinator = getCoordinator();
+            coordinator.forceFocus(sectionIdRef.current);
+        }
+    }, []);
     // Get the resolved file path for comparison
     // This ensures we compare against the actual file_path from the code structure
     const resolvedFilePathForComparison = useMemo(() => {
@@ -154,7 +292,7 @@ export default function CodeFocusSection({ filePath, lineRange, title, descripti
         }
         return filePath;
     }, [filePath, generatedCode, fileTree]);
-    return (React.createElement("div", { ref: sectionRef, className: `relative transition-colors py-6 cursor-pointer`, onClick: focusCode },
+    return (React.createElement("div", { ref: sectionRef, className: `relative transition-colors py-6 cursor-pointer`, onClick: handleClick },
         React.createElement("div", { className: "pointer-events-none absolute inset-x-[-2rem] top-0 border-t border-border" }),
         React.createElement("div", { className: "pointer-events-none absolute inset-x-[-2rem] bottom-0 border-b border-border" }),
         (activeFilePath === resolvedFilePathForComparison ||

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

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/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/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

@@ -217,7 +217,7 @@ export default function RightView({ reloadCounter, overlayStage, browserUrl, use
                 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/right-view/simplified-editor.js

@@ -207,27 +207,27 @@ export default function SimplifiedEditor({ themeColor }) {
                     colorDecorators: true,
                 })), { domReadOnly: isGenerating, readOnly: isGenerating }) })),
         React.createElement("style", null, `
-        :global(.search-highlight-line) {
+        .search-highlight-line {
           background-color: ${highlightBackground} !important;
         }
-        :global(.search-highlight-glyph) {
+        .search-highlight-glyph {
           background-color: ${glyphBackground};
         }
-        :global(.muted-code-text) {
+        .muted-code-text {
           opacity: 0.5;
           filter: grayscale(0.4);
         }
         /* Remove blue focus outline from Monaco Editor */
-        :global(.monaco-editor .inputarea.ime-input) {
+        .monaco-editor .inputarea.ime-input {
           outline: none !important;
         }
-        :global(.monaco-editor) {
+        .monaco-editor {
           outline: none !important;
         }
-        :global(.monaco-editor .monaco-editor-background) {
+        .monaco-editor .monaco-editor-background {
           outline: none !important;
         }
-        :global(.monaco-editor .view-overlays) {
+        .monaco-editor .view-overlays {
           outline: none !important;
         }
       `)));

package/dist/components/sandbox/guardian/types/ide-types.js

@@ -144,7 +144,6 @@ export function filePathToCodeLanguage(filePath) {
             return CodeLanguage.ELIXIR;
         case "lua":
             return CodeLanguage.LUA;
-        case "m":
         case "mm":
             return CodeLanguage.OBJECTIVEC;
         case "md":

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 },