@sampleapp.ai/sdk 1.0.35 → 1.0.37

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;
@@ -229,7 +229,7 @@ export const Markdown = ({ children, className, isRestricted, showToc, themeColo
             // If it's an inline code block, render it as a small block by default
             // so it visually separates from the surrounding text instead of sitting inline.
             if (isInline) {
-                return (React.createElement("code", Object.assign({ className: cn("inline-block text-[var(--colors-primary)] text-sm bg-[var(--colors-secondary)] px-2 py-1 rounded-lg mt-2", className) }, props), children));
+                return (React.createElement("code", Object.assign({ className: cn("inline-block text-zinc-900 dark:text-zinc-100 text-sm bg-zinc-100 dark:bg-zinc-800 px-2 py-1 rounded-lg mt-2 font-mono", className) }, props), children));
             }
             // Extract language and title
             const language = (match === null || match === void 0 ? void 0 : match[1]) || "";

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/SandboxCard.js

@@ -50,14 +50,14 @@ export const SandboxCard = ({ title, description, sandboxId, basePath = "/sandbo
             window.location.href = `${cleanBasePath}/${sandboxId}`;
         }
     };
-    return (React.createElement("div", { onClick: handleClick, className: "group relative block min-w-[240px] w-full h-[200px] border border-[#333] bg-[#0a0a0a] rounded-lg overflow-hidden transition-all duration-100 ease-out hover:border-[#444] focus-visible:outline-none cursor-pointer" },
+    return (React.createElement("div", { onClick: handleClick, className: "group relative block min-w-[240px] w-full h-[200px] border border-zinc-200 dark:border-[#333] bg-zinc-50 dark:bg-[#0a0a0a] rounded-lg overflow-hidden transition-all duration-100 ease-out hover:border-zinc-300 dark:hover:border-[#444] focus-visible:outline-none cursor-pointer" },
         React.createElement("div", { className: "flex flex-col gap-1 px-6 py-5" },
             React.createElement("div", { className: "flex items-center max-w-max pr-2.5" },
-                React.createElement("h3", { className: "text-[16px] font-medium m-0 w-max whitespace-nowrap overflow-hidden text-ellipsis flex-1 mr-0 text-white" }, safeTitle),
+                React.createElement("h3", { className: "text-[16px] font-medium m-0 w-max whitespace-nowrap overflow-hidden text-ellipsis flex-1 mr-0 text-zinc-900 dark:text-white" }, safeTitle),
                 React.createElement("svg", { className: "rotate-[-45deg] translate-x-[-2px] opacity-0 transition-all duration-100 ease-out origin-center group-hover:opacity-100 group-hover:translate-x-[4px] ml-1", height: "16", strokeLinejoin: "round", style: { width: 12, height: 12, color: "currentColor" }, viewBox: "0 0 16 16", width: "16" },
                     React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.53033 2.21968L9 1.68935L7.93934 2.75001L8.46967 3.28034L12.4393 7.25001H1.75H1V8.75001H1.75H12.4393L8.46967 12.7197L7.93934 13.25L9 14.3107L9.53033 13.7803L14.6036 8.70711C14.9941 8.31659 14.9941 7.68342 14.6036 7.2929L9.53033 2.21968Z", fill: "currentColor" }))),
-            React.createElement("p", { className: "text-[14px] text-gray-400 m-0 line-clamp-2" }, safeDescription)),
-        React.createElement("div", { className: "absolute top-[110px] -right-10 w-[300px] h-[100px] rounded-lg border border-[#333] overflow-hidden shadow-lg transition-transform duration-100 ease-out rotate-[-5deg] group-hover:rotate-[-3deg] group-hover:-translate-y-1 group-hover:-translate-x-0.5" }, imageUrl ? (React.createElement("img", { src: imageUrl, alt: safeTitle, className: "w-full h-full object-cover", style: { transform: "rotate(0deg)" } })) : (React.createElement("div", { className: `w-full h-full bg-gradient-to-br ${gradient} flex items-center justify-center` },
+            React.createElement("p", { className: "text-[14px] text-zinc-500 dark:text-gray-400 m-0 line-clamp-2" }, safeDescription)),
+        React.createElement("div", { className: "absolute top-[110px] -right-10 w-[300px] h-[100px] rounded-lg border border-zinc-200 dark:border-[#333] overflow-hidden shadow-lg transition-transform duration-100 ease-out rotate-[-5deg] group-hover:rotate-[-3deg] group-hover:-translate-y-1 group-hover:-translate-x-0.5" }, imageUrl ? (React.createElement("img", { src: imageUrl, alt: safeTitle, className: "w-full h-full object-cover", style: { transform: "rotate(0deg)" } })) : (React.createElement("div", { className: `w-full h-full bg-gradient-to-br ${gradient} flex items-center justify-center` },
             React.createElement("div", { className: "w-full px-6 space-y-2" },
                 React.createElement("div", { className: "h-2 bg-white/20 rounded w-1/2 mx-auto" }),
                 React.createElement("div", { className: "h-1.5 bg-white/10 rounded w-3/4 mx-auto" }),

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);
@@ -90,26 +95,26 @@ export const SandboxHome = ({ apiKey, orgid, sandboxes, basePath = "/sandbox", }
             return matchesTitle || matchesDescription;
         });
     }, [allSandboxes, searchQuery]);
-    return (React.createElement("div", { className: "min-h-screen bg-black" },
+    return (React.createElement("div", { className: "min-h-screen bg-white dark:bg-black" },
         React.createElement("div", { className: "pt-16 pb-12 px-4 md:px-6" },
             React.createElement("div", { className: "max-w-[1400px] mx-auto" },
                 React.createElement(SearchBar, { value: searchQuery, onChange: setSearchQuery }))),
         React.createElement("div", { className: "px-4 md:px-6 pb-16" },
-            React.createElement("div", { className: "max-w-[1400px] mx-auto" }, loading ? (React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4" }, [...Array(6)].map((_, i) => (React.createElement("div", { key: i, className: "relative block min-w-[240px] w-full h-[200px] border border-[#333] bg-[#0a0a0a] rounded-lg overflow-hidden" },
+            React.createElement("div", { className: "max-w-[1400px] mx-auto" }, loading ? (React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4" }, [...Array(6)].map((_, i) => (React.createElement("div", { key: i, className: "relative block min-w-[240px] w-full h-[200px] border border-zinc-200 dark:border-[#333] bg-zinc-50 dark:bg-[#0a0a0a] rounded-lg overflow-hidden" },
                 React.createElement("div", { className: "flex flex-col gap-1 px-6 py-5" },
                     React.createElement("div", { className: "flex items-center max-w-max pr-2.5" },
-                        React.createElement(Skeleton, { className: "h-5 w-32 bg-zinc-800" })),
-                    React.createElement(Skeleton, { className: "h-4 w-full bg-zinc-800 mt-1" }),
-                    React.createElement(Skeleton, { className: "h-4 w-3/4 bg-zinc-800 mt-1" })),
-                React.createElement("div", { className: "absolute top-[110px] -right-10 w-[300px] h-[100px] rounded-lg border border-[#333] overflow-hidden shadow-lg rotate-[-5deg]" },
-                    React.createElement(Skeleton, { className: "w-full h-full bg-zinc-800" }))))))) : error && !sandboxes ? (React.createElement("div", { className: "col-span-full text-center py-16" },
+                        React.createElement(Skeleton, { className: "h-5 w-32 bg-zinc-200 dark:bg-zinc-800" })),
+                    React.createElement(Skeleton, { className: "h-4 w-full bg-zinc-200 dark:bg-zinc-800 mt-1" }),
+                    React.createElement(Skeleton, { className: "h-4 w-3/4 bg-zinc-200 dark:bg-zinc-800 mt-1" })),
+                React.createElement("div", { className: "absolute top-[110px] -right-10 w-[300px] h-[100px] rounded-lg border border-zinc-200 dark:border-[#333] overflow-hidden shadow-lg rotate-[-5deg]" },
+                    React.createElement(Skeleton, { className: "w-full h-full bg-zinc-200 dark:bg-zinc-800" }))))))) : error && !sandboxes ? (React.createElement("div", { className: "col-span-full text-center py-16" },
                 React.createElement("p", { className: "text-red-500 text-lg" },
                     "Error: ",
                     error),
-                React.createElement("p", { className: "text-gray-500 text-sm mt-2" }, "Please check your API key and try again."))) : (React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4" }, filteredSandboxes && filteredSandboxes.length > 0 ? (filteredSandboxes
+                React.createElement("p", { className: "text-zinc-500 dark:text-gray-500 text-sm mt-2" }, "Please check your API key and try again."))) : (React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4" }, filteredSandboxes && filteredSandboxes.length > 0 ? (filteredSandboxes
                 .filter((sandbox) => sandbox && sandbox.title && sandbox.description)
                 .map((sandbox) => (React.createElement(SandboxCard, { key: sandbox.id, title: sandbox.title || "", description: sandbox.description || "", sandboxId: sandbox.sandboxId, basePath: basePath, imageUrl: `https://sampleappassets.blob.core.windows.net/assets/${orgid}/${sandbox.id}.png` })))) : (React.createElement("div", { className: "col-span-full text-center py-16" },
-                React.createElement("p", { className: "text-gray-500 text-lg" }, searchQuery
+                React.createElement("p", { className: "text-zinc-500 dark:text-gray-500 text-lg" }, searchQuery
                     ? `No sandboxes found matching "${searchQuery}".`
                     : "No sandboxes available. Provide sandboxes prop to display cards.")))))))));
 };

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

@@ -6,7 +6,7 @@ import React from "react";
 export const SearchBar = ({ value, onChange, placeholder = "Search sample apps...", }) => {
     return (React.createElement("div", { className: "relative max-w-md mx-auto" },
         React.createElement("div", { className: "absolute inset-y-0 left-4 flex items-center pointer-events-none" },
-            React.createElement("svg", { className: "w-4 h-4 text-gray-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("svg", { className: "w-4 h-4 text-zinc-400 dark:text-gray-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
                 React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }))),
-        React.createElement("input", { type: "text", placeholder: placeholder, value: value, onChange: (e) => onChange(e.target.value), className: "w-full bg-[#0a0a0a] border border-[#222] rounded-lg py-3 pl-11 pr-4 text-sm text-white placeholder:text-gray-500 focus:outline-none focus:border-gray-600 transition-colors" })));
+        React.createElement("input", { type: "text", placeholder: placeholder, value: value, onChange: (e) => onChange(e.target.value), className: "w-full bg-white dark:bg-[#0a0a0a] border border-zinc-200 dark:border-[#222] rounded-lg py-3 pl-11 pr-4 text-sm text-zinc-900 dark:text-white placeholder:text-zinc-400 dark:placeholder:text-gray-500 focus:outline-none focus:border-zinc-400 dark:focus:border-gray-600 transition-colors" })));
 };

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;
 }
 
 /**
@@ -248,7 +236,7 @@ export declare type GuardianNestedConfig = Record<string, GuardianUseCaseConfig>
  *
  * When isFrame=true, reads framework from URL params client-side.
  */
-export declare function GuardianPlayground({ nestedConfig, useCase, framework: serverFramework, isFrame, apiKey, env, chatUid, }: {
+export declare function GuardianPlayground({ nestedConfig, useCase, framework: serverFramework, isFrame, apiKey, env, chatUid, theme, }: {
     /** Nested config structure (use case → framework → config) */
     nestedConfig: GuardianNestedConfig;
     /** Current use case ID */
@@ -257,12 +245,14 @@ 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 */
     chatUid?: string;
+    /** Theme mode - "light", "dark", or "system". Defaults to "dark" */
+    theme?: ThemeMode;
 }): default_2.JSX.Element;
 
 export declare function GuardianProvider({ children }: {
@@ -343,9 +333,16 @@ declare class SampleAppSDK {
  *   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 declare function Sandbox({ apiKey, sandboxId, env, themeColor, }: SandboxProps): default_2.JSX.Element | null;
+export declare function Sandbox({ apiKey, sandboxId, env, themeColor, theme, }: SandboxProps): default_2.JSX.Element | null;
 
 export declare const SandboxHome: React_2.FC<SandboxHomeProps>;
 
@@ -379,14 +376,8 @@ export declare interface SandboxProps {
     env?: Record<string, string>;
     /** Optional theme color override */
     themeColor?: string;
-}
-
-declare interface SandboxUrlConfig {
-    sandboxUid: string;
-    browserUrl: string;
-    useVm: boolean;
-    resolution?: [number, number];
-    apiKey?: string;
+    /** Theme mode - "light", "dark", or "system". Defaults to "dark" */
+    theme?: ThemeMode;
 }
 
 declare const sdk: SampleAppSDK;
@@ -431,24 +422,20 @@ export declare interface ThemeColors {
     };
 }
 
+/**
+ * Theme mode for the SDK
+ * - "light": Light mode
+ * - "dark": Dark mode
+ * - "system": Follows system preference
+ */
+export declare type ThemeMode = "light" | "dark" | "system";
+
 export declare type ThemeName = "ocean" | "autumn" | "mint" | "sunset" | "lavender" | "forest" | "coral";
 
 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;