@sampleapp.ai/sdk 1.0.47 → 1.0.48

package/dist/components/sandbox/Sandbox.js

@@ -1,23 +1,26 @@
 "use client";
 import React, { useEffect, useState, useCallback, useRef } from "react";
-import { fetchSandboxConfigWithContent, buildConfigFromContent } from "./api";
+import { fetchSandboxConfigWithContent, buildConfigFromContent, } from "./api";
 import GuardianPlayground from "./guardian/guardian-playground";
 import { GuardianProvider } from "./guardian/context/guardian-context";
 import { VmProvider } from "./guardian/context/vm-context";
 import { Skeleton } from "../ui/skeleton";
 import { useTreeSelector } from "../../hooks/use-tree-selector";
-import { SELECTABLE_NODE_TYPES } from "../../lib/types/tree-config";
-import { useFrameParams } from "./guardian/hooks/use-frame-params";
+import { SELECTABLE_NODE_TYPES, } from "../../lib/types/tree-config";
+import { useFrameParams, } from "./guardian/hooks/use-frame-params";
 /**
  * Inner component that uses the tree selector hook
  * Separated to ensure hooks are called after data is loaded
  */
-function SandboxInner({ configWithContent, apiKey, env, themeColor, theme, config }) {
+function SandboxInner({ configWithContent, apiKey, env, themeColor, theme, config, }) {
     var _a;
     const [currentConfig, setCurrentConfig] = useState(configWithContent.legacyConfig);
     // Get frame params for syncing external selection changes
     const frameParams = useFrameParams();
     const isFrame = (config === null || config === void 0 ? void 0 : config.isFrame) || frameParams.isFrame;
+    const containerClass = isFrame
+        ? "h-full w-full bg-white dark:bg-black"
+        : "h-screen w-full bg-white dark:bg-black";
     // Track previous nodeTypes to detect changes
     const prevNodeTypesRef = useRef({});
     // Handle selection changes - update the config when user selects different options
@@ -37,7 +40,7 @@ function SandboxInner({ configWithContent, apiKey, env, themeColor, theme, confi
         config: configWithContent.techStackConfig,
         allContent: configWithContent.allContent,
         initialPath: configWithContent.initialSelectionPath,
-        onSelectionChange: handleSelectionChange
+        onSelectionChange: handleSelectionChange,
     });
     // Sync frame params with tree selector when in frame mode
     // This effect listens for changes in URL params (via postMessage or direct URL changes)
@@ -73,12 +76,12 @@ function SandboxInner({ configWithContent, apiKey, env, themeColor, theme, confi
     const firstUseCase = currentConfig.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-white dark:bg-black" },
+        return (React.createElement("div", { className: `flex items-center justify-center ${containerClass}` },
             React.createElement("div", { className: "text-red-500" }, "No use cases or frameworks found")));
     }
     return (React.createElement(GuardianProvider, null,
         React.createElement(VmProvider, null,
-            React.createElement("div", { className: "h-screen w-screen bg-white dark:bg-black" },
+            React.createElement("div", { className: containerClass },
                 React.createElement(GuardianPlayground, { sandboxConfig: currentConfig, sections: sections, onSelect: selectOption, useCase: firstUseCase.id, framework: firstFramework, isFrame: isFrame, apiKey: apiKey, env: env, chatUid: currentConfig.chatUid, theme: theme, hasNetworkView: config === null || config === void 0 ? void 0 : config.hasNetworkView })))));
 }
 /**
@@ -108,10 +111,14 @@ function SandboxInner({ configWithContent, apiKey, env, themeColor, theme, confi
  * />
  * ```
  */
-export default function Sandbox({ apiKey, sandboxId, env, themeColor, theme = "dark", config }) {
+export default function Sandbox({ apiKey, sandboxId, env, themeColor, theme = "dark", config, }) {
     // Validate apiKey immediately
+    const isFrame = config === null || config === void 0 ? void 0 : config.isFrame;
+    const containerClass = isFrame
+        ? "h-full w-full bg-white dark:bg-black"
+        : "h-screen w-full bg-white dark:bg-black";
     if (!apiKey || apiKey.trim() === "") {
-        return (React.createElement("div", { className: "flex items-center justify-center h-screen bg-white dark:bg-black" },
+        return (React.createElement("div", { className: `flex items-center justify-center ${containerClass}` },
             React.createElement("div", { className: "text-red-500" }, "Error: apiKey is required. Please provide a valid API key.")));
     }
     const [configWithContent, setConfigWithContent] = useState(null);
@@ -148,11 +155,11 @@ export default function Sandbox({ apiKey, sandboxId, env, themeColor, theme = "d
         };
     }, [apiKey, sandboxId, themeColor]);
     if (loading) {
-        return (React.createElement("div", { className: "h-screen w-screen bg-white dark:bg-black" },
+        return (React.createElement("div", { className: containerClass },
             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-white dark:bg-black" },
+        return (React.createElement("div", { className: `flex items-center justify-center ${containerClass}` },
             React.createElement("div", { className: "text-red-500" },
                 "Error: ",
                 error)));

package/dist/index.d.ts

@@ -670,7 +670,7 @@ declare class SampleAppSDK {
  * />
  * ```
  */
-export declare function Sandbox({ apiKey, sandboxId, env, themeColor, theme, config }: SandboxProps): default_2.JSX.Element | null;
+export declare function Sandbox({ apiKey, sandboxId, env, themeColor, theme, config, }: SandboxProps): default_2.JSX.Element | null;
 
 /**
  * Configuration fetched from the API for a sandbox