@sampleapp.ai/sdk 1.0.36 → 1.0.37

package/dist/components/sandbox/Sandbox.js

@@ -35,6 +35,11 @@ import { Skeleton } from "../ui/skeleton";
  */
 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);

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

@@ -41,5 +41,5 @@ export default function GuardianPlayground({ nestedConfig, useCase, framework: s
         }
     });
     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 })));
+        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/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/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/right-top-down-view.js

@@ -213,7 +213,7 @@ 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,

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

@@ -31,7 +31,7 @@ import { CalloutTip } from "./markdown/callout/callout-tip";
 import { CalloutWarning } from "./markdown/callout/callout-warning";
 import { CardGroup } from "./markdown/card-group";
 import { Card } from "./markdown/card-group/card";
-import CodeFocusSection from "@/components/sandbox/guardian/code-focus-section";
+import CodeFocusSection from "../code-focus-section";
 import { DownloadAndOpenButtons } from "./download-and-open-buttons";
 // Stub components for components that don't exist in SDK
 const ButtonFileServer = ({ title, description, filePath, feature, fileContent, color, }) => {
@@ -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, sandboxId, apiKey }) => {
+export const Markdown = ({ children, className, isRestricted, showToc, themeColor, browserUrl, gitUrl, sandboxId, apiKey, }) => {
     const headingRenderer = (level) => {
         return (_a) => {
             var _b, _c;

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

@@ -1,22 +1,5 @@
 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).
- * Uses the same sandboxUid for all configs since caching is done by sandboxUid + browserUrl.
- */
-export function createSandboxUrlConfigs(sandboxUid, urlsToPreload) {
-    if (!urlsToPreload) {
-        return [];
-    }
-    return urlsToPreload
-        .filter((config) => config.useVm)
-        .map((config) => ({
-        sandboxUid: config.suffix ? `${sandboxUid}-${config.suffix}` : sandboxUid,
-        browserUrl: config.browserUrl,
-        useVm: config.useVm,
-    }));
-}
 /**
  * Builds a nested GuardianConfig from use cases with nested frameworks.
  * Returns a structure where config[useCaseId].frameworks[frameworkKey] gives you the full config.
@@ -66,7 +49,6 @@ export function buildGuardianConfig(useCases, options) {
                 sandboxUid: fw.sandboxUid,
                 codeZipFile: fw.codeZipFile,
                 completeCodeZipFile: fw.completeCodeZipFile,
-                consoleUrlConfigs: createSandboxUrlConfigs(fw.sandboxUid, fw.urlsToPreload),
                 themeColor: (_a = fw.themeColor) !== null && _a !== void 0 ? _a : uc.themeColor,
                 variant,
                 hasPreview: uc.hasPreview,

package/dist/components/sandbox/index.js

@@ -1,4 +1,4 @@
 export { default as Sandbox } from "./Sandbox";
 export { SandboxHome, SandboxCard } from "./sandbox-home";
 // Re-export guardian components for advanced usage
-export { GuardianPlayground, GuardianComponent, GuardianProvider, VmProvider, buildGuardianConfig, createSandboxUrlConfigs, } from "./guardian";
+export { GuardianPlayground, GuardianComponent, GuardianProvider, VmProvider, buildGuardianConfig, } from "./guardian";

package/dist/components/sandbox/sandbox-home/SandboxHome.js

@@ -38,6 +38,11 @@ function transformSandboxContent(content) {
     };
 }
 export const SandboxHome = ({ apiKey, orgid, sandboxes, basePath = "/sandbox", }) => {
+    // Validate apiKey immediately
+    if (!apiKey || apiKey.trim() === "") {
+        return (React.createElement("div", { className: "flex items-center justify-center min-h-screen bg-white dark:bg-black" },
+            React.createElement("div", { className: "text-red-500" }, "Error: apiKey is required. Please provide a valid API key.")));
+    }
     // Start loading as true if we need to fetch (no sandboxes prop provided)
     const [loading, setLoading] = useState(!sandboxes);
     const [error, setError] = useState(null);

package/dist/index.d.ts

@@ -117,13 +117,6 @@ declare interface CodeOutput {
     full_code: string;
 }
 
-/**
- * Creates sandbox URL configs for preloading from a framework's urlsToPreload.
- * Only includes URLs that need VM preloading (useVm: true).
- * Uses the same sandboxUid for all configs since caching is done by sandboxUid + browserUrl.
- */
-export declare function createSandboxUrlConfigs(sandboxUid: string, urlsToPreload?: UrlToPreload[]): SandboxUrlConfig[];
-
 export declare const DEFAULT_THEME: ThemeName;
 
 export declare enum Framework {
@@ -138,7 +131,7 @@ export declare enum Framework {
 
 export declare const getTheme: (themeName?: ThemeName) => ThemeColors;
 
-export declare function GuardianComponent({ demoOptions, frameworkOptions, firstFrameworkByUseCase, currentFramework, currentUseCase, CustomConsole, GuideView, playgroundLogo, playgroundUid, browserUrl, useVm, sandboxUid, codeZipFile, consoleUrlConfigs, completeCodeZipFile, variant, themeColor, hasPreview, isFrame, apiKey, env, chatUid, hideHeader, // Hardcoded to true by default, not exposed in Sandbox.tsx
+export declare function GuardianComponent({ demoOptions, frameworkOptions, firstFrameworkByUseCase, currentFramework, currentUseCase, CustomConsole, GuideView, playgroundLogo, playgroundUid, browserUrl, useVm, sandboxUid, codeZipFile, completeCodeZipFile, variant, themeColor, hasPreview, isFrame, apiKey, env, chatUid, hideHeader, // Hardcoded to true by default, not exposed in Sandbox.tsx
     gitUrl, }: GuardianComponentProps): default_2.JSX.Element;
 
 export declare interface GuardianComponentProps {
@@ -170,12 +163,7 @@ export declare interface GuardianComponentProps {
     useVm: boolean;
     sandboxUid: string;
     codeZipFile: string | UpdateContainerCodebaseType;
-    /**
-     * Optional console URL configs to preload.
-     * These are URLs used in the CustomConsole component.
-     */
     completeCodeZipFile: string;
-    consoleUrlConfigs?: SandboxUrlConfig[];
     variant?: "panel" | "top-down";
     /**
      * Hex color (e.g. "#3b82f6") used to theme Guardian UI elements.
@@ -189,8 +177,8 @@ export declare interface GuardianComponentProps {
      * Whether to render in frame mode (just the right view, no console/header)
      */
     isFrame?: boolean;
-    /** API key for starting sandbox */
-    apiKey?: string;
+    /** API key for starting sandbox - required */
+    apiKey: string;
     /** Environment variables for sandbox */
     env?: Record<string, string>;
     /** Chat UID for starting sandbox */
@@ -223,17 +211,17 @@ export declare interface GuardianFramework {
     GuideView?: GuardianComponentProps["GuideView"];
     /** Optional theme color override for this framework */
     themeColor?: string;
-    /** Optional URLs to preload for this specific framework */
-    urlsToPreload?: UrlToPreload[];
     /** Optional Git URL for opening the project in VSCode */
     gitUrl?: string;
 }
 
 /**
  * Individual framework configuration within a use case
+ * Note: apiKey is optional here as it's passed separately at runtime to GuardianPlayground
  */
-declare interface GuardianFrameworkConfig extends GuardianComponentProps {
+declare interface GuardianFrameworkConfig extends Omit<GuardianComponentProps, 'apiKey'> {
     frameworkKey: Framework;
+    apiKey?: string;
 }
 
 /**
@@ -257,8 +245,8 @@ export declare function GuardianPlayground({ nestedConfig, useCase, framework: s
     framework: string;
     /** Whether to render in frame mode (just the right view) */
     isFrame?: boolean;
-    /** API key for starting sandbox */
-    apiKey?: string;
+    /** API key for starting sandbox - required */
+    apiKey: string;
     /** Environment variables for sandbox */
     env?: Record<string, string>;
     /** Chat UID for starting sandbox */
@@ -392,14 +380,6 @@ export declare interface SandboxProps {
     theme?: ThemeMode;
 }
 
-declare interface SandboxUrlConfig {
-    sandboxUid: string;
-    browserUrl: string;
-    useVm: boolean;
-    resolution?: [number, number];
-    apiKey?: string;
-}
-
 declare const sdk: SampleAppSDK;
 export default sdk;
 
@@ -456,18 +436,6 @@ export declare const themes: Record<ThemeName, ThemeColors>;
 
 declare type UpdateContainerCodebaseType = Record<string, CodeOutput>;
 
-/**
- * Configuration for a single URL to preload in the sandbox
- */
-declare interface UrlToPreload {
-    /** Browser URL to load */
-    browserUrl: string;
-    /** Whether to use VM for this URL */
-    useVm: boolean;
-    /** Suffix for the sandboxUid (e.g., "main", "abc", "def") */
-    suffix?: string;
-}
-
 export declare const VmProvider: ({ children }: {
     children: ReactNode;
 }) => default_2.JSX.Element;