@sampleapp.ai/sdk 1.0.32 → 1.0.33

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

@@ -6,44 +6,116 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 import SimplifiedEditor from "./simplified-editor";
 import PillFileSelector from "./pill-file-selector";
 import { useGuardianContext } from "../context/guardian-context";
-import { useEffect, useMemo, useState } from "react";
+import { useVmContext } from "../context/vm-context";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { zipPathToFileTree } from "../zip-to-filetree";
 import { codeZipFileToCodebase } from "../zip-to-codebase";
 import { DownloadIcon, Globe } from "lucide-react";
 import { useFrameParams } from "../hooks/use-frame-params";
 import { cn } from "../../../../lib/utils";
-import { extractContainerIdFromUrl } from "../../../../lib/api-client";
-export default function RightView({ reloadCounter, overlayStage, browserUrl, useVm, codeZipFile, themeColor, completeCodeZipFile, hasPreview, isPreviewMinimized = false, isGuardian = false, isBrowserMaximized = false, }) {
+import { handleSandboxDownload } from "../utils";
+export default function RightView({ reloadCounter, overlayStage, browserUrl, useVm, codeZipFile, themeColor, completeCodeZipFile, hasPreview, isPreviewMinimized = false, isGuardian = false, isBrowserMaximized = false, isBrowserUrlReady = false, sandboxId, apiKey, sandboxError, }) {
     const { setFileTree, setGeneratedCode } = useGuardianContext();
+    const { setVmResolution } = useVmContext();
     const frameParams = useFrameParams();
     const [activeTab, setActiveTab] = useState("code");
     const [networkRequests, setNetworkRequests] = useState([]);
     const [showLoader, setShowLoader] = useState(!browserUrl);
-    // Delay hiding the loader for 5 seconds after browserUrl becomes available
+    // Ref to measure the preview container for VNC resolution
+    const previewContainerRef = useRef(null);
+    // Hide loader based on whether URL is ready or if there's an error
+    // - If sandboxError exists, hide loader immediately to show error UI
+    // - If isBrowserUrlReady (published_url), hide immediately when available
+    // - Otherwise, wait 5 seconds for sandbox to boot
     useEffect(() => {
-        if (browserUrl) {
+        if (sandboxError) {
+            // Show error UI immediately instead of loader
+            setShowLoader(false);
+        }
+        else if (browserUrl) {
+            const delay = isBrowserUrlReady ? 0 : 5000;
             const timer = setTimeout(() => {
                 setShowLoader(false);
-            }, 5000);
+            }, delay);
             return () => clearTimeout(timer);
         }
         else {
             setShowLoader(true);
         }
-    }, [browserUrl]);
+    }, [browserUrl, isBrowserUrlReady, sandboxError]);
     // Use frame param override for theme if in frame mode
     const effectiveThemeColor = frameParams.isFrame && frameParams.theme ? frameParams.theme : themeColor;
-    // Extract container ID from browserUrl and build download URL
-    const downloadCodeUrl = useMemo(() => {
-        if (!browserUrl)
-            return null;
-        const containerId = extractContainerIdFromUrl(browserUrl);
-        if (!containerId)
-            return null;
-        // Use the API base URL for the download endpoint
-        const baseUrl = process.env.BASE_API_URL || "https://api.sampleapp.ai";
-        return `${baseUrl}/api/v1/sdk/download-code?container_id=${encodeURIComponent(containerId)}`;
-    }, [browserUrl]);
+    // Measure the preview container for VNC resolution when useVm is true
+    // IMPORTANT: Re-run when isBrowserMaximized changes because the ref points to different elements
+    useEffect(() => {
+        if (!useVm)
+            return;
+        let mounted = true;
+        let resizeObserver = null;
+        let lastReportedResolution = null;
+        const updateResolution = () => {
+            if (!mounted)
+                return;
+            const container = previewContainerRef.current;
+            if (!container) {
+                return;
+            }
+            // Get the exact inner dimensions - clientWidth/Height excludes borders and scrollbars
+            let widthPx = container.clientWidth;
+            let heightPx = container.clientHeight;
+            // Fallback to offsetWidth/Height if client dimensions are 0
+            if (widthPx === 0 || heightPx === 0) {
+                widthPx = container.offsetWidth;
+                heightPx = container.offsetHeight;
+            }
+            // Final fallback to getBoundingClientRect
+            if (widthPx === 0 || heightPx === 0) {
+                const rect = container.getBoundingClientRect();
+                widthPx = Math.floor(rect.width);
+                heightPx = Math.floor(rect.height);
+            }
+            widthPx = Math.floor(widthPx);
+            heightPx = Math.floor(heightPx);
+            if (widthPx > 0 && heightPx > 0) {
+                if (!lastReportedResolution ||
+                    lastReportedResolution[0] !== widthPx ||
+                    lastReportedResolution[1] !== heightPx) {
+                    lastReportedResolution = [widthPx, heightPx];
+                    setVmResolution([widthPx, heightPx]);
+                }
+            }
+        };
+        const setupObserver = () => {
+            if (previewContainerRef.current) {
+                resizeObserver = new ResizeObserver(() => {
+                    updateResolution();
+                });
+                resizeObserver.observe(previewContainerRef.current);
+                // Initial measurement
+                setTimeout(updateResolution, 10);
+            }
+            else {
+                setTimeout(setupObserver, 50);
+            }
+        };
+        setupObserver();
+        // Additional delayed measurements as fallback
+        const t1 = setTimeout(updateResolution, 100);
+        const t2 = setTimeout(updateResolution, 300);
+        const t3 = setTimeout(updateResolution, 500);
+        return () => {
+            mounted = false;
+            clearTimeout(t1);
+            clearTimeout(t2);
+            clearTimeout(t3);
+            if (resizeObserver) {
+                resizeObserver.disconnect();
+            }
+        };
+    }, [useVm, setVmResolution, isBrowserMaximized]);
+    const handleDownloadAsZip = async () => {
+        await handleSandboxDownload(sandboxId, apiKey);
+    };
     // Extract only the nested children (actual API calls to external services)
     const childrenRequests = useMemo(() => {
         const children = [];
@@ -56,15 +128,18 @@ export default function RightView({ reloadCounter, overlayStage, browserUrl, use
     }, [networkRequests]);
     useEffect(() => {
         let isMounted = true;
-        zipPathToFileTree(completeCodeZipFile)
-            .then((fileTree) => {
-            if (isMounted) {
-                setFileTree(fileTree);
-            }
-        })
-            .catch((error) => {
-            console.error("Failed to load zip file:", error);
-        });
+        // Only load zip file if completeCodeZipFile is provided
+        if (completeCodeZipFile) {
+            zipPathToFileTree(completeCodeZipFile)
+                .then((fileTree) => {
+                if (isMounted) {
+                    setFileTree(fileTree);
+                }
+            })
+                .catch((error) => {
+                console.error("Failed to load zip file:", error);
+            });
+        }
         codeZipFileToCodebase(codeZipFile)
             .then((codebase) => {
             if (isMounted) {
@@ -100,8 +175,8 @@ export default function RightView({ reloadCounter, overlayStage, browserUrl, use
     }, []);
     // When browser is maximized, render only the browser at full size
     if (isBrowserMaximized) {
-        return (React.createElement("div", { className: "h-full w-full" }, showLoader ? (React.createElement("div", { className: "h-full w-full relative overflow-hidden" },
-            React.createElement(AiLoader, { text: "Booting up...", fullScreen: false, themeColor: effectiveThemeColor }))) : (React.createElement(Browser, { previewUrl: browserUrl, setPreviewUrl: () => { }, containerEndpoint: browserUrl, outerContainerClassName: "h-full w-full border-none", reloadSignal: reloadCounter, useVm: useVm, isGuardian: isGuardian }, overlayStage !== "hidden" && (React.createElement("div", { className: "absolute inset-0 z-20 flex items-center justify-center" },
+        return (React.createElement("div", { ref: previewContainerRef, className: "h-full w-full relative" }, showLoader ? (React.createElement("div", { className: "h-full w-full relative overflow-hidden" },
+            React.createElement(AiLoader, { text: "Booting up...", fullScreen: false, themeColor: effectiveThemeColor }))) : (React.createElement(Browser, { previewUrl: browserUrl || "", setPreviewUrl: () => { }, containerEndpoint: browserUrl, outerContainerClassName: "h-full w-full border-none", reloadSignal: reloadCounter, useVm: useVm, isGuardian: isGuardian, sandboxError: sandboxError }, overlayStage !== "hidden" && (React.createElement("div", { className: "absolute inset-0 z-20 flex items-center justify-center" },
             overlayStage === "error" && (React.createElement("div", { className: "w-full h-full bg-red-950 text-red-200 flex items-center justify-center" },
                 React.createElement("div", { className: "text-center" },
                     React.createElement("div", { className: "text-2xl font-semibold" }, "Service Unavailable"),
@@ -118,9 +193,9 @@ export default function RightView({ reloadCounter, overlayStage, browserUrl, use
     return (React.createElement("div", { className: "h-full w-full flex flex-col" },
         React.createElement(PanelGroup, { direction: "vertical", className: "relative h-full" },
             hasPreview && !isPreviewMinimized && (React.createElement(React.Fragment, null,
-                React.createElement(Panel, { defaultSize: 58, minSize: 20, maxSize: 80, order: 1 },
-                    React.createElement("div", { className: "h-full w-full" }, showLoader ? (React.createElement("div", { className: "h-full w-full relative overflow-hidden" },
-                        React.createElement(AiLoader, { text: "Booting up...", fullScreen: false, themeColor: effectiveThemeColor }))) : (React.createElement(Browser, { previewUrl: browserUrl, setPreviewUrl: () => { }, containerEndpoint: browserUrl, outerContainerClassName: "h-full w-full border-none", reloadSignal: reloadCounter, useVm: useVm, isGuardian: isGuardian }, overlayStage !== "hidden" && (React.createElement("div", { className: "absolute inset-0 z-20 flex items-center justify-center" },
+                React.createElement(Panel, { defaultSize: 68, minSize: 20, maxSize: 80, order: 1 },
+                    React.createElement("div", { ref: previewContainerRef, className: "h-full w-full relative" }, showLoader ? (React.createElement("div", { className: "h-full w-full relative overflow-hidden" },
+                        React.createElement(AiLoader, { text: "Booting up...", fullScreen: false, themeColor: effectiveThemeColor }))) : (React.createElement(Browser, { previewUrl: browserUrl || "", setPreviewUrl: () => { }, containerEndpoint: browserUrl, outerContainerClassName: "h-full w-full border-none", reloadSignal: reloadCounter, useVm: useVm, isGuardian: isGuardian, sandboxError: sandboxError }, overlayStage !== "hidden" && (React.createElement("div", { className: "absolute inset-0 z-20 flex items-center justify-center" },
                         overlayStage === "error" && (React.createElement("div", { className: "w-full h-full bg-red-950 text-red-200 flex items-center justify-center" },
                             React.createElement("div", { className: "text-center" },
                                 React.createElement("div", { className: "text-2xl font-semibold" }, "Service Unavailable"),
@@ -138,18 +213,16 @@ 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: 42, minSize: 20, maxSize: 80, order: 2 },
+            React.createElement(Panel, { defaultSize: 32, minSize: 20, maxSize: 80, 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(PillFileSelector, { themeColor: effectiveThemeColor }),
-                                downloadCodeUrl && (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: () => {
-                                            window.open(downloadCodeUrl, "_blank");
-                                        } },
+                                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 },
                                         React.createElement(DownloadIcon, { className: "w-4 h-4" }),
-                                        "Download Code")))),
+                                        "Download Code"))),
                             React.createElement("div", { className: "flex-1 min-h-0" },
                                 React.createElement(SimplifiedEditor, { themeColor: effectiveThemeColor })))))))));
 }

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

@@ -3,7 +3,7 @@ import React, { useState, useEffect } from "react";
 import RightPanelView from "./right-panel-view";
 import RightTopDownView from "./right-top-down-view";
 import PreviewControlBar from "./preview-control-bar";
-export default function RightView({ reloadCounter, overlayStage, browserUrl, useVm, codeZipFile, completeCodeZipFile, variant = "top-down", themeColor, hasPreview, isGuardian = false, isBrowserMaximized = false, }) {
+export default function RightView({ reloadCounter, overlayStage, browserUrl, useVm, codeZipFile, completeCodeZipFile, variant = "top-down", themeColor, hasPreview, isGuardian = false, isBrowserMaximized = false, isBrowserUrlReady = false, sandboxId, apiKey, sandboxError, }) {
     const [isPreviewMinimized, setIsPreviewMinimized] = useState(false);
     const [reloadCounterState, setReloadCounterState] = useState(reloadCounter);
     // Sync with external reloadCounter changes
@@ -14,13 +14,13 @@ export default function RightView({ reloadCounter, overlayStage, browserUrl, use
         setReloadCounterState((c) => c + 1);
     };
     if (variant === "panel") {
-        return (React.createElement(RightPanelView, { reloadCounter: reloadCounterState, overlayStage: overlayStage, browserUrl: browserUrl, useVm: useVm, codeZipFile: codeZipFile }));
+        return (React.createElement(RightPanelView, { reloadCounter: reloadCounterState, overlayStage: overlayStage, browserUrl: browserUrl, useVm: useVm, codeZipFile: codeZipFile, sandboxError: sandboxError }));
     }
     else if (variant === "top-down") {
         return (React.createElement("div", { className: "h-full w-full flex flex-col" },
             hasPreview && (React.createElement(PreviewControlBar, { isMinimized: isPreviewMinimized, onToggle: () => setIsPreviewMinimized(!isPreviewMinimized), onRefresh: handleRefresh, themeColor: themeColor, externalUrl: browserUrl })),
             React.createElement("div", { className: "flex-1 min-h-0" },
-                React.createElement(RightTopDownView, { reloadCounter: reloadCounterState, overlayStage: overlayStage, browserUrl: browserUrl, useVm: useVm, codeZipFile: codeZipFile, themeColor: themeColor, completeCodeZipFile: completeCodeZipFile, hasPreview: hasPreview, isPreviewMinimized: isPreviewMinimized, isGuardian: isGuardian, isBrowserMaximized: isBrowserMaximized }))));
+                React.createElement(RightTopDownView, { reloadCounter: reloadCounterState, overlayStage: overlayStage, browserUrl: browserUrl, useVm: useVm, codeZipFile: codeZipFile, themeColor: themeColor, completeCodeZipFile: completeCodeZipFile, hasPreview: hasPreview, isPreviewMinimized: isPreviewMinimized, isGuardian: isGuardian, isBrowserMaximized: isBrowserMaximized, isBrowserUrlReady: isBrowserUrlReady, sandboxId: sandboxId, apiKey: apiKey, sandboxError: sandboxError }))));
     }
     else {
         return null;

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

@@ -3,60 +3,30 @@ import React from "react";
 import { DownloadIcon, Check, Copy } from "lucide-react";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, } from "./dialog";
 import vscodeLogo from "../../../../assets/vscode.png";
-import { extractContainerIdFromUrl } from "../../../../lib/api-client";
+import { handleSandboxDownload } from "../utils";
 // VSCode logo component using imported asset
 function VSCodeLogo({ className }) {
     return (React.createElement("img", { src: vscodeLogo, alt: "VSCode", width: 20, height: 20, className: className }));
 }
-export const DownloadAndOpenButtons = ({ downloadUrl, themeColor, gitUrl, browserUrl, }) => {
+export const DownloadAndOpenButtons = ({ downloadUrl, themeColor, gitUrl, browserUrl, sandboxId, apiKey, }) => {
     const [isModalOpen, setIsModalOpen] = React.useState(false);
     const [hasCopied, setHasCopied] = React.useState(false);
-    // Extract container ID from browserUrl and build download URL (same as Download Code button)
-    const containerDownloadUrl = React.useMemo(() => {
-        if (!browserUrl)
-            return null;
-        const containerId = extractContainerIdFromUrl(browserUrl);
-        if (!containerId)
-            return null;
-        const baseUrl = process.env.BASE_API_URL || "https://api.sampleapp.ai";
-        return `${baseUrl}/api/v1/sdk/download-code?container_id=${encodeURIComponent(containerId)}`;
-    }, [browserUrl]);
-    // Normalize the download path to work with public directory (fallback for static files)
-    const normalizedDownloadUrl = React.useMemo(() => {
-        let normalizedPath = downloadUrl;
-        if (normalizedPath.startsWith("/public/")) {
-            normalizedPath = normalizedPath.slice("/public".length);
-        }
-        if (!normalizedPath.startsWith("/")) {
-            normalizedPath = "/" + normalizedPath;
-        }
-        return normalizedPath;
-    }, [downloadUrl]);
-    // Use container-based download URL if available, otherwise fall back to static file
-    const finalDownloadUrl = containerDownloadUrl || normalizedDownloadUrl;
-    // Build the npx command using the static API route
+    // Build the npx command using the SDK download endpoint
     // Use default MAIN_APP_URL for SDK (can be overridden via env)
     const MAIN_APP_URL = typeof window !== "undefined" && window.SAMPLEAPP_MAIN_URL
         ? window.SAMPLEAPP_MAIN_URL
         : "https://sampleapp.ai";
     const npxCommand = React.useMemo(() => {
-        // If using container-based download, we can't generate a static npx command
-        // Use the container download URL instead
-        if (containerDownloadUrl) {
-            return `npx sampleappai add "${containerDownloadUrl}"`;
-        }
-        // Remove .zip extension and leading slash for the API path
-        let apiPath = normalizedDownloadUrl;
-        if (apiPath.startsWith("/")) {
-            apiPath = apiPath.slice(1);
-        }
-        if (apiPath.endsWith(".zip")) {
-            apiPath = apiPath.slice(0, -4);
+        if (!sandboxId) {
+            return "";
         }
-        return `npx sampleappai add "${MAIN_APP_URL}/api/code/static/${apiPath}"`;
-    }, [containerDownloadUrl, normalizedDownloadUrl, MAIN_APP_URL]);
-    const handleDownload = () => {
-        window.open(finalDownloadUrl, "_blank");
+        const apiBaseUrl = typeof window !== "undefined" && window.SAMPLEAPP_API_URL
+            ? window.SAMPLEAPP_API_URL
+            : MAIN_APP_URL.replace("sampleapp.ai", "api.sampleapp.ai");
+        return `npx sampleappai add "${apiBaseUrl}/api/v1/sdk/download-code?sandbox_id=${sandboxId}"`;
+    }, [sandboxId, MAIN_APP_URL]);
+    const handleDownload = async () => {
+        await handleSandboxDownload(sandboxId, apiKey, () => setIsModalOpen(true));
     };
     const handleOpenInVSCode = () => {
         if (gitUrl) {
@@ -105,7 +75,7 @@ export const DownloadAndOpenButtons = ({ downloadUrl, themeColor, gitUrl, browse
                             React.createElement("div", { className: "flex-shrink-0 w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-bold text-white", style: { backgroundColor: themeColor } }, "1"),
                             React.createElement("p", { className: "text-sm font-medium" }, "Copy this command")),
                         React.createElement("div", { className: "flex items-center gap-2 overflow-hidden" },
-                            React.createElement("code", { className: "flex-1 bg-zinc-100 dark:bg-zinc-800 px-3 py-2.5 rounded-md text-xs font-mono truncate block max-w-[calc(100%-3rem)]" }, npxCommand.replace("http://localhost:3000", "https://sampleapp.ai")),
+                            React.createElement("code", { className: "flex-1 bg-zinc-100 dark:bg-zinc-800 px-3 py-2.5 rounded-md text-xs font-mono truncate block max-w-[calc(100%-3rem)]" }, npxCommand || "npx sampleappai add <download-url>"),
                             React.createElement("button", { type: "button", onClick: handleCopyCommand, className: "flex-shrink-0 p-2 rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-700 transition-colors border border-zinc-200 dark:border-zinc-700" }, hasCopied ? (React.createElement(Check, { className: "w-4 h-4 text-green-500" })) : (React.createElement(Copy, { className: "w-4 h-4 text-muted-foreground" }))))),
                     React.createElement("div", { className: "flex flex-col gap-2" },
                         React.createElement("div", { className: "flex items-center gap-2" },

package/dist/components/sandbox/guardian/ui/markdown.js

@@ -51,7 +51,7 @@ const createId = (text) => {
 };
 export const MemoizedReactMarkdown = memo(ReactMarkdown, (prevProps, nextProps) => prevProps.children === nextProps.children &&
     prevProps.className === nextProps.className);
-export const Markdown = ({ children, className, isRestricted, showToc, themeColor, browserUrl, gitUrl }) => {
+export const Markdown = ({ children, className, isRestricted, showToc, themeColor, browserUrl, gitUrl, sandboxId, apiKey }) => {
     const headingRenderer = (level) => {
         return (_a) => {
             var _b, _c;
@@ -149,11 +149,13 @@ export const Markdown = ({ children, className, isRestricted, showToc, themeColo
         // Use gitUrl from Markdown component props (from guardian-playground) as priority,
         // fall back to HTML attribute if not provided
         const effectiveGitUrl = gitUrl || giturl;
+        // Use sandboxId from Markdown component props
+        const effectiveSandboxId = sandboxId;
         if (!downloadurl || !effectiveThemeColor) {
             return React.createElement("div", { className: className }, children);
         }
         return (React.createElement("div", { className: cn("my-6", className) },
-            React.createElement(DownloadAndOpenButtons, { downloadUrl: downloadurl, themeColor: effectiveThemeColor, gitUrl: effectiveGitUrl, browserUrl: browserUrl }),
+            React.createElement(DownloadAndOpenButtons, { downloadUrl: downloadurl, themeColor: effectiveThemeColor, gitUrl: effectiveGitUrl, browserUrl: browserUrl, sandboxId: effectiveSandboxId, apiKey: apiKey }),
             children));
     };
     const sharedComponents = {

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

@@ -1,4 +1,5 @@
-import { FrameworkLabel, } from "./types/ide-types";
+import { FrameworkLabel } from "./types/ide-types";
+import { createApiClient } from "../../../lib/api-client";
 /**
  * Creates sandbox URL configs for preloading from a framework's urlsToPreload.
  * Only includes URLs that need VM preloading (useVm: true).
@@ -87,3 +88,31 @@ export function buildGuardianConfig(useCases, options) {
     }
     return result;
 }
+/**
+ * Shared download handler for sandbox code
+ * Uses the backend API endpoint to download code as zip file
+ * @param sandboxId - The sandbox content UID
+ * @param apiKey - API key for authentication (required)
+ * @param onError - Optional callback when download fails (e.g., to show modal)
+ * @returns Promise that resolves when download is initiated
+ */
+export async function handleSandboxDownload(sandboxId, apiKey, onError) {
+    // Always use the backend endpoint when sandboxId is available
+    if (!sandboxId) {
+        onError === null || onError === void 0 ? void 0 : onError();
+        return;
+    }
+    if (!apiKey) {
+        console.error("API key is required for downloading code");
+        onError === null || onError === void 0 ? void 0 : onError();
+        return;
+    }
+    try {
+        const apiClient = createApiClient({ apiKey });
+        await apiClient.sdk.downloadCode(sandboxId);
+    }
+    catch (error) {
+        console.error("Failed to download code:", error);
+        onError === null || onError === void 0 ? void 0 : onError();
+    }
+}

package/dist/index.d.ts

@@ -337,6 +337,12 @@ declare class SampleAppSDK {
  *     LAUNCHDARKLY_SDK_KEY: "sdk-xxx",
  *   }}
  * />
+ *
+ * // env is optional if published_url is available
+ * <Sandbox
+ *   apiKey={process.env.NEXT_PUBLIC_SAMPLEAPP_API_KEY!}
+ *   sandboxId="launchdarkly-feature-flags"
+ * />
  * ```
  */
 export declare function Sandbox({ apiKey, sandboxId, env, themeColor, }: SandboxProps): default_2.JSX.Element | null;
@@ -365,8 +371,12 @@ export declare interface SandboxProps {
     apiKey: string;
     /** Sandbox ID to fetch configuration - required */
     sandboxId: string;
-    /** Environment variables to pass to the sandbox - required */
-    env: Record<string, string>;
+    /**
+     * Environment variables to pass to the sandbox.
+     * Optional - only required when published_url is not available (when starting a new sandbox).
+     * If published_url exists, env is not needed.
+     */
+    env?: Record<string, string>;
     /** Optional theme color override */
     themeColor?: string;
 }
@@ -375,6 +385,8 @@ declare interface SandboxUrlConfig {
     sandboxUid: string;
     browserUrl: string;
     useVm: boolean;
+    resolution?: [number, number];
+    apiKey?: string;
 }
 
 declare const sdk: SampleAppSDK;