@sampleapp.ai/sdk 1.0.36 → 1.0.38
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/sandbox/Sandbox.js +5 -0
- package/dist/components/sandbox/api.js +2 -2
- package/dist/components/sandbox/guardian/guardian-component.js +7 -38
- package/dist/components/sandbox/guardian/guardian-playground.js +2 -2
- package/dist/components/sandbox/guardian/hooks/use-sandbox-url-loader.js +12 -10
- package/dist/components/sandbox/guardian/index.js +1 -1
- package/dist/components/sandbox/guardian/right-view/right-top-down-view.js +2 -1
- package/dist/components/sandbox/guardian/ui/markdown.js +2 -2
- package/dist/components/sandbox/guardian/utils.js +4 -22
- package/dist/components/sandbox/index.js +1 -1
- package/dist/components/sandbox/sandbox-home/SandboxHome.js +5 -0
- package/dist/index.d.ts +8 -40
- package/dist/index.es.js +834 -870
- package/dist/index.js +1 -1
- package/dist/lib/api-client.js +9 -26
- package/package.json +1 -1
- package/dist/components/guardian/app-layout-no-sidebar.js +0 -8
- package/dist/components/guardian/ask-ai-view.js +0 -249
- package/dist/components/guardian/code-focus-section.d.ts +0 -41
- package/dist/components/guardian/code-focus-section.js +0 -174
- package/dist/components/guardian/context/guardian-context.js +0 -94
- package/dist/components/guardian/context/vm-context.js +0 -28
- package/dist/components/guardian/default-guide-view.js +0 -34
- package/dist/components/guardian/demo/guardian-demo.js +0 -35
- package/dist/components/guardian/demo/left-view/toggle.js +0 -28
- package/dist/components/guardian/demo/left-view.js +0 -49
- package/dist/components/guardian/guardian-component.js +0 -79
- package/dist/components/guardian/guardian-demo.js +0 -35
- package/dist/components/guardian/guardian-home.d.ts +0 -4
- package/dist/components/guardian/guardian-home.js +0 -61
- package/dist/components/guardian/guardian-playground.js +0 -45
- package/dist/components/guardian/guardian-style-wrapper.js +0 -29
- package/dist/components/guardian/guardian-upload-spec.d.ts +0 -14
- package/dist/components/guardian/guardian-upload-spec.js +0 -160
- package/dist/components/guardian/header/glassmorphic-combobox.d.ts +0 -15
- package/dist/components/guardian/header/glassmorphic-combobox.js +0 -30
- package/dist/components/guardian/header.js +0 -61
- package/dist/components/guardian/hooks/use-frame-messages.js +0 -65
- package/dist/components/guardian/hooks/use-frame-params.js +0 -44
- package/dist/components/guardian/hooks/use-sandbox-url-loader.js +0 -101
- package/dist/components/guardian/ide/browser.js +0 -538
- package/dist/components/guardian/index.js +0 -8
- package/dist/components/guardian/layout/app-layout-no-sidebar.js +0 -8
- package/dist/components/guardian/layout/header/glassmorphic-combobox.js +0 -48
- package/dist/components/guardian/layout/header.js +0 -63
- package/dist/components/guardian/right-view/code-view.js +0 -56
- package/dist/components/guardian/right-view/pill-file-selector.js +0 -233
- package/dist/components/guardian/right-view/preview-control-bar.js +0 -25
- package/dist/components/guardian/right-view/right-panel-view.js +0 -38
- package/dist/components/guardian/right-view/right-top-down-view.js +0 -289
- package/dist/components/guardian/right-view/right-view.js +0 -28
- package/dist/components/guardian/right-view/simplified-editor.js +0 -234
- package/dist/components/guardian/types/ide-types.js +0 -162
- package/dist/components/guardian/types.js +0 -3
- package/dist/components/guardian/ui/ai-loader.js +0 -48
- package/dist/components/guardian/ui/badge.js +0 -24
- package/dist/components/guardian/ui/button.js +0 -45
- package/dist/components/guardian/ui/command.js +0 -63
- package/dist/components/guardian/ui/console-with-app.js +0 -17
- package/dist/components/guardian/ui/dialog.js +0 -57
- package/dist/components/guardian/ui/dropdown-menu.js +0 -82
- package/dist/components/guardian/ui/markdown.js +0 -57
- package/dist/components/guardian/ui/popover.js +0 -25
- package/dist/components/guardian/ui/tooltip.js +0 -25
- package/dist/components/guardian/utils.js +0 -88
- package/dist/components/guardian/zip-to-codebase.js +0 -246
- package/dist/components/guardian/zip-to-filetree.js +0 -284
- package/dist/components/sandbox/SandboxHome.js +0 -141
- package/dist/components/sandbox/guardian/guardian-demo.js +0 -35
- package/dist/components/sandbox/guardian/guardian-home.d.ts +0 -4
- package/dist/components/sandbox/guardian/guardian-home.js +0 -61
- package/dist/components/sandbox/guardian/guardian-upload-spec.d.ts +0 -14
- package/dist/components/sandbox/guardian/guardian-upload-spec.js +0 -160
- package/dist/components/sandbox/guardian/ui/theme-color-context.d.ts +0 -6
- package/dist/components/sandbox/sandbox-control-bar.js +0 -91
- package/dist/components/sandbox/sandbox-header.js +0 -52
- package/dist/components/sandbox/sandbox-left-panel.js +0 -248
- package/dist/components/sandbox/sandbox-loading.js +0 -48
- package/dist/components/sandbox/sandbox-right-panel.js +0 -247
- package/dist/components/sandbox.js +0 -32
- package/dist/lib/api-client.example.js +0 -60
- package/dist/lib/ssr-safe-decode-entity.js +0 -16
|
@@ -35,6 +35,11 @@ import { Skeleton } from "../ui/skeleton";
|
|
|
35
35
|
*/
|
|
36
36
|
export default function Sandbox({ apiKey, sandboxId, env, themeColor, theme = "dark", }) {
|
|
37
37
|
var _a;
|
|
38
|
+
// Validate apiKey immediately
|
|
39
|
+
if (!apiKey || apiKey.trim() === "") {
|
|
40
|
+
return (React.createElement("div", { className: "flex items-center justify-center h-screen bg-white dark:bg-black" },
|
|
41
|
+
React.createElement("div", { className: "text-red-500" }, "Error: apiKey is required. Please provide a valid API key.")));
|
|
42
|
+
}
|
|
38
43
|
const [config, setConfig] = useState(null);
|
|
39
44
|
const [loading, setLoading] = useState(true);
|
|
40
45
|
const [error, setError] = useState(null);
|
|
@@ -54,7 +54,7 @@ export async function fetchSandboxConfig(apiKey, sandboxId) {
|
|
|
54
54
|
name: sandboxContent.uid, // Use UID as name if no name field exists
|
|
55
55
|
description: sandboxContent.markdown || "", // Use markdown as description
|
|
56
56
|
themeColor: "#3b82f6", // Default theme color
|
|
57
|
-
hasPreview:
|
|
57
|
+
hasPreview: sandboxContent.has_preview,
|
|
58
58
|
chatUid: sandboxContent.chat_uid || "", // Fallback: only used if published_url is not available
|
|
59
59
|
useCases: [
|
|
60
60
|
{
|
|
@@ -62,7 +62,7 @@ export async function fetchSandboxConfig(apiKey, sandboxId) {
|
|
|
62
62
|
name: sandboxContent.uid,
|
|
63
63
|
description: sandboxContent.markdown || "",
|
|
64
64
|
themeColor: "#3b82f6",
|
|
65
|
-
hasPreview:
|
|
65
|
+
hasPreview: sandboxContent.has_preview,
|
|
66
66
|
frameworks: [
|
|
67
67
|
{
|
|
68
68
|
key: frameworkKey,
|
|
@@ -4,54 +4,28 @@ import AppLayoutNoSidebar from "./app-layout-no-sidebar";
|
|
|
4
4
|
import GuardianDemo from "./demo/guardian-demo";
|
|
5
5
|
import React, { useEffect, useRef } from "react";
|
|
6
6
|
import { useGuardianContext } from "./context/guardian-context";
|
|
7
|
-
import { useSandboxUrlLoader
|
|
7
|
+
import { useSandboxUrlLoader } from "./hooks/use-sandbox-url-loader";
|
|
8
8
|
import { useFrameMessages } from "./hooks/use-frame-messages";
|
|
9
9
|
import { useVmContext } from "./context/vm-context";
|
|
10
10
|
import { cn } from "../../../lib/utils";
|
|
11
|
-
export default function GuardianComponent({ demoOptions, frameworkOptions, firstFrameworkByUseCase, currentFramework, currentUseCase, CustomConsole, GuideView, playgroundLogo, playgroundUid, browserUrl, useVm, sandboxUid, codeZipFile,
|
|
11
|
+
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
|
|
12
12
|
gitUrl, }) {
|
|
13
13
|
const { previewUrl, setPreviewUrl } = useGuardianContext();
|
|
14
14
|
const { vmResolution } = useVmContext();
|
|
15
15
|
const [sandboxError, setSandboxError] = React.useState(null);
|
|
16
|
-
// Build startSandboxConfig
|
|
17
|
-
//
|
|
18
|
-
//
|
|
19
|
-
|
|
20
|
-
// PRECEDENCE: published_url takes precedence over chat_uid
|
|
21
|
-
// - If browserUrl (published_url) exists, it will be used directly (no startSandbox API call needed)
|
|
22
|
-
// - If browserUrl is not available, we need startSandboxConfig with chatUid to call startSandbox API
|
|
23
|
-
// This ensures backward compatibility while prioritizing published_url when available
|
|
24
|
-
const startSandboxConfig = apiKey
|
|
25
|
-
? Object.assign({ apiKey }, (!browserUrl && chatUid ? { env, chatUid } : {})) : undefined;
|
|
16
|
+
// Build startSandboxConfig for use-sandbox-url-loader
|
|
17
|
+
// apiKey is always included (guaranteed by parent validation)
|
|
18
|
+
// Include chatUid and env when browserUrl is missing (needed for startSandbox API call)
|
|
19
|
+
const startSandboxConfig = Object.assign({ apiKey }, (!browserUrl && chatUid ? { env, chatUid } : {}));
|
|
26
20
|
// Determine if browserUrl is ready to use immediately (from published_url)
|
|
27
21
|
// If browserUrl exists, it's ready (startSandboxConfig may still exist with just apiKey for VM calls)
|
|
28
22
|
const isBrowserUrlReady = !!browserUrl;
|
|
29
|
-
const { getSandboxUrl, loadSandboxUrl
|
|
23
|
+
const { getSandboxUrl, loadSandboxUrl } = useSandboxUrlLoader(startSandboxConfig);
|
|
30
24
|
// Initialize postMessage listener for iframe communication
|
|
31
25
|
// This sends IFRAME_READY and listens for UPDATE_VIEW messages
|
|
32
26
|
useFrameMessages();
|
|
33
|
-
// Track which console configs we've preloaded to prevent duplicates
|
|
34
|
-
const preloadedConfigsRef = useRef("");
|
|
35
27
|
// Track which main sandbox we've loaded to prevent duplicates
|
|
36
28
|
const loadedSandboxRef = useRef("");
|
|
37
|
-
// Preload console URLs when component mounts
|
|
38
|
-
useEffect(() => {
|
|
39
|
-
if (consoleUrlConfigs && consoleUrlConfigs.length > 0 && apiKey) {
|
|
40
|
-
// Create a key from the configs to detect changes
|
|
41
|
-
const configKey = JSON.stringify(consoleUrlConfigs.map((c) => c.sandboxUid));
|
|
42
|
-
// Only preload if we haven't already preloaded these configs
|
|
43
|
-
if (preloadedConfigsRef.current !== configKey) {
|
|
44
|
-
preloadedConfigsRef.current = configKey;
|
|
45
|
-
// Ensure apiKey is passed to all configs
|
|
46
|
-
const configsWithApiKey = consoleUrlConfigs.map((config) => (Object.assign(Object.assign({}, config), { apiKey: config.apiKey || apiKey })));
|
|
47
|
-
preloadSandboxUrls(configsWithApiKey).catch((error) => {
|
|
48
|
-
console.error("Failed to preload console URLs:", error);
|
|
49
|
-
});
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
// Only re-run if consoleUrlConfigs or apiKey changes
|
|
53
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
54
|
-
}, [consoleUrlConfigs, apiKey]);
|
|
55
29
|
useEffect(() => {
|
|
56
30
|
// Create a key for this sandbox load
|
|
57
31
|
const sandboxKey = `${sandboxUid}-${browserUrl}-${useVm}`;
|
|
@@ -74,11 +48,6 @@ gitUrl, }) {
|
|
|
74
48
|
// The resolution will be set by Browser component via context
|
|
75
49
|
return;
|
|
76
50
|
}
|
|
77
|
-
// If useVm is true, apiKey is required
|
|
78
|
-
if (useVm && !apiKey) {
|
|
79
|
-
console.error("apiKey is required when useVm is true");
|
|
80
|
-
return;
|
|
81
|
-
}
|
|
82
51
|
// Mark as loading to prevent duplicate requests
|
|
83
52
|
loadedSandboxRef.current = sandboxKey;
|
|
84
53
|
// Load the sandbox URL (will be cached by sandboxUid + browserUrl)
|
|
@@ -10,7 +10,7 @@ import { GuardianStyleWrapper } from "./guardian-style-wrapper";
|
|
|
10
10
|
* When isFrame=true, reads framework from URL params client-side.
|
|
11
11
|
*/
|
|
12
12
|
export default function GuardianPlayground({ nestedConfig, useCase, framework: serverFramework, isFrame = false, apiKey, env, chatUid, theme = "dark", }) {
|
|
13
|
-
var _a
|
|
13
|
+
var _a;
|
|
14
14
|
// When in frame mode, allow URL params to override framework
|
|
15
15
|
const frameParams = useFrameParams();
|
|
16
16
|
const framework = isFrame && frameParams.framework ? frameParams.framework : serverFramework;
|
|
@@ -41,5 +41,5 @@ export default function GuardianPlayground({ nestedConfig, useCase, framework: s
|
|
|
41
41
|
}
|
|
42
42
|
});
|
|
43
43
|
return (React.createElement(GuardianStyleWrapper, { themeColor: frameworkConfig.themeColor, theme: theme },
|
|
44
|
-
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,
|
|
44
|
+
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: frameworkConfig.hasPreview, currentUseCase: useCase, isFrame: isFrame, apiKey: apiKey, env: env, chatUid: chatUid, gitUrl: frameworkConfig.gitUrl })));
|
|
45
45
|
}
|
|
@@ -36,12 +36,12 @@ export function useSandboxUrlLoader(startSandboxConfig) {
|
|
|
36
36
|
}
|
|
37
37
|
if (useVm) {
|
|
38
38
|
try {
|
|
39
|
-
// API key is required - use from config
|
|
40
|
-
const apiKey = config.apiKey
|
|
39
|
+
// API key is required - use directly from config
|
|
40
|
+
const apiKey = config.apiKey;
|
|
41
41
|
if (!apiKey) {
|
|
42
42
|
throw new Error("API key is required for VM sandbox creation");
|
|
43
43
|
}
|
|
44
|
-
// Fetch VM URL from API using the SDK API client
|
|
44
|
+
// Fetch VM URL from API using the SDK API client
|
|
45
45
|
const client = createApiClient({ apiKey });
|
|
46
46
|
if (config === null || config === void 0 ? void 0 : config.resolution) {
|
|
47
47
|
config.resolution[0] += 20;
|
|
@@ -107,10 +107,13 @@ export function useSandboxUrlLoader(startSandboxConfig) {
|
|
|
107
107
|
if (!startSandboxConfig.env) {
|
|
108
108
|
throw new Error("env is required when published_url is not available (needed to start sandbox)");
|
|
109
109
|
}
|
|
110
|
-
//
|
|
111
|
-
const
|
|
112
|
-
|
|
113
|
-
|
|
110
|
+
// API key is required - use directly from config
|
|
111
|
+
const apiKey = config.apiKey;
|
|
112
|
+
if (!apiKey) {
|
|
113
|
+
throw new Error("API key is required for starting sandbox");
|
|
114
|
+
}
|
|
115
|
+
// Create client with apiKey (will be sent as Bearer token)
|
|
116
|
+
const client = createApiClient({ apiKey });
|
|
114
117
|
const response = await client.sdk.startSandbox({
|
|
115
118
|
env: startSandboxConfig.env,
|
|
116
119
|
chatUid: startSandboxConfig.chatUid,
|
|
@@ -153,9 +156,8 @@ export function useSandboxUrlLoader(startSandboxConfig) {
|
|
|
153
156
|
return getVmUrl(cacheKey) === undefined && !hasError(cacheKey);
|
|
154
157
|
});
|
|
155
158
|
// Load all URLs in parallel, but catch errors individually
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
}, [getVmUrl, loadSandboxUrl, hasError, startSandboxConfig]);
|
|
159
|
+
await Promise.allSettled(configsToLoad.map((config) => loadSandboxUrl(config)));
|
|
160
|
+
}, [getVmUrl, loadSandboxUrl, hasError]);
|
|
159
161
|
return {
|
|
160
162
|
loadSandboxUrl,
|
|
161
163
|
getSandboxUrl,
|
|
@@ -4,5 +4,5 @@ export { VmProvider, useVmContext } from "./context/vm-context";
|
|
|
4
4
|
export { GuardianProvider, useGuardianContext } from "./context/guardian-context";
|
|
5
5
|
export * from "./types";
|
|
6
6
|
export { default as CodeFocusSection } from "./code-focus-section";
|
|
7
|
-
export { buildGuardianConfig
|
|
7
|
+
export { buildGuardianConfig } from "./utils";
|
|
8
8
|
export { Framework, FrameworkLabel } from "./types";
|
|
@@ -15,6 +15,7 @@ import { useFrameParams } from "../hooks/use-frame-params";
|
|
|
15
15
|
import { cn } from "../../../../lib/utils";
|
|
16
16
|
import { handleSandboxDownload } from "../utils";
|
|
17
17
|
export default function RightView({ reloadCounter, overlayStage, browserUrl, useVm, codeZipFile, themeColor, completeCodeZipFile, hasPreview, isPreviewMinimized = false, isGuardian = false, isBrowserMaximized = false, isBrowserUrlReady = false, sandboxId, apiKey, sandboxError, }) {
|
|
18
|
+
console.log('hasPreview', hasPreview);
|
|
18
19
|
const { setFileTree, setGeneratedCode } = useGuardianContext();
|
|
19
20
|
const { setVmResolution } = useVmContext();
|
|
20
21
|
const frameParams = useFrameParams();
|
|
@@ -213,7 +214,7 @@ export default function RightView({ reloadCounter, overlayStage, browserUrl, use
|
|
|
213
214
|
React.createElement("div", { className: "absolute inset-x-0 top-0 h-1/2 group-hover:bg-blue-400/20 transition-colors" }),
|
|
214
215
|
React.createElement("div", { className: "absolute inset-x-0 bottom-0 h-1/2 group-hover:bg-blue-400/20 transition-colors" }),
|
|
215
216
|
React.createElement("div", { className: "h-full w-px bg-border group-hover:bg-blue-400 transition-colors relative z-10" }))))),
|
|
216
|
-
React.createElement(Panel, { defaultSize: 32, minSize: 20, maxSize: 80, order: 2 },
|
|
217
|
+
React.createElement(Panel, { defaultSize: hasPreview ? 32 : 100, minSize: 20, maxSize: hasPreview ? 80 : 100, order: 2 },
|
|
217
218
|
React.createElement("div", { className: "h-full w-full flex flex-col" },
|
|
218
219
|
React.createElement("div", { className: "flex-1 min-h-0 flex flex-col" },
|
|
219
220
|
React.createElement(React.Fragment, null,
|
|
@@ -31,7 +31,7 @@ import { CalloutTip } from "./markdown/callout/callout-tip";
|
|
|
31
31
|
import { CalloutWarning } from "./markdown/callout/callout-warning";
|
|
32
32
|
import { CardGroup } from "./markdown/card-group";
|
|
33
33
|
import { Card } from "./markdown/card-group/card";
|
|
34
|
-
import CodeFocusSection from "
|
|
34
|
+
import CodeFocusSection from "../code-focus-section";
|
|
35
35
|
import { DownloadAndOpenButtons } from "./download-and-open-buttons";
|
|
36
36
|
// Stub components for components that don't exist in SDK
|
|
37
37
|
const ButtonFileServer = ({ title, description, filePath, feature, fileContent, color, }) => {
|
|
@@ -51,7 +51,7 @@ const createId = (text) => {
|
|
|
51
51
|
};
|
|
52
52
|
export const MemoizedReactMarkdown = memo(ReactMarkdown, (prevProps, nextProps) => prevProps.children === nextProps.children &&
|
|
53
53
|
prevProps.className === nextProps.className);
|
|
54
|
-
export const Markdown = ({ children, className, isRestricted, showToc, themeColor, browserUrl, gitUrl, sandboxId, apiKey }) => {
|
|
54
|
+
export const Markdown = ({ children, className, isRestricted, showToc, themeColor, browserUrl, gitUrl, sandboxId, apiKey, }) => {
|
|
55
55
|
const headingRenderer = (level) => {
|
|
56
56
|
return (_a) => {
|
|
57
57
|
var _b, _c;
|
|
@@ -1,22 +1,5 @@
|
|
|
1
1
|
import { FrameworkLabel } from "./types/ide-types";
|
|
2
2
|
import { createApiClient } from "../../../lib/api-client";
|
|
3
|
-
/**
|
|
4
|
-
* Creates sandbox URL configs for preloading from a framework's urlsToPreload.
|
|
5
|
-
* Only includes URLs that need VM preloading (useVm: true).
|
|
6
|
-
* Uses the same sandboxUid for all configs since caching is done by sandboxUid + browserUrl.
|
|
7
|
-
*/
|
|
8
|
-
export function createSandboxUrlConfigs(sandboxUid, urlsToPreload) {
|
|
9
|
-
if (!urlsToPreload) {
|
|
10
|
-
return [];
|
|
11
|
-
}
|
|
12
|
-
return urlsToPreload
|
|
13
|
-
.filter((config) => config.useVm)
|
|
14
|
-
.map((config) => ({
|
|
15
|
-
sandboxUid: config.suffix ? `${sandboxUid}-${config.suffix}` : sandboxUid,
|
|
16
|
-
browserUrl: config.browserUrl,
|
|
17
|
-
useVm: config.useVm,
|
|
18
|
-
}));
|
|
19
|
-
}
|
|
20
3
|
/**
|
|
21
4
|
* Builds a nested GuardianConfig from use cases with nested frameworks.
|
|
22
5
|
* Returns a structure where config[useCaseId].frameworks[frameworkKey] gives you the full config.
|
|
@@ -26,7 +9,7 @@ export function createSandboxUrlConfigs(sandboxUid, urlsToPreload) {
|
|
|
26
9
|
* // Access via: config["full-stack-auth"].frameworks["nextjs"]
|
|
27
10
|
*/
|
|
28
11
|
export function buildGuardianConfig(useCases, options) {
|
|
29
|
-
var _a;
|
|
12
|
+
var _a, _b, _c;
|
|
30
13
|
const { playgroundUid, playgroundLogo, frameworkLabels, variant } = options;
|
|
31
14
|
const result = {};
|
|
32
15
|
for (const uc of useCases) {
|
|
@@ -36,7 +19,7 @@ export function buildGuardianConfig(useCases, options) {
|
|
|
36
19
|
name: uc.name,
|
|
37
20
|
description: uc.description,
|
|
38
21
|
themeColor: uc.themeColor,
|
|
39
|
-
hasPreview: uc.hasPreview,
|
|
22
|
+
hasPreview: (_a = uc.hasPreview) !== null && _a !== void 0 ? _a : true,
|
|
40
23
|
frameworks: {},
|
|
41
24
|
};
|
|
42
25
|
// Compute frameworkOptions from ALL frameworks in this use case
|
|
@@ -66,10 +49,9 @@ export function buildGuardianConfig(useCases, options) {
|
|
|
66
49
|
sandboxUid: fw.sandboxUid,
|
|
67
50
|
codeZipFile: fw.codeZipFile,
|
|
68
51
|
completeCodeZipFile: fw.completeCodeZipFile,
|
|
69
|
-
|
|
70
|
-
themeColor: (_a = fw.themeColor) !== null && _a !== void 0 ? _a : uc.themeColor,
|
|
52
|
+
themeColor: (_b = fw.themeColor) !== null && _b !== void 0 ? _b : uc.themeColor,
|
|
71
53
|
variant,
|
|
72
|
-
hasPreview: uc.hasPreview,
|
|
54
|
+
hasPreview: (_c = uc.hasPreview) !== null && _c !== void 0 ? _c : true,
|
|
73
55
|
gitUrl: fw.gitUrl,
|
|
74
56
|
};
|
|
75
57
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { default as Sandbox } from "./Sandbox";
|
|
2
2
|
export { SandboxHome, SandboxCard } from "./sandbox-home";
|
|
3
3
|
// Re-export guardian components for advanced usage
|
|
4
|
-
export { GuardianPlayground, GuardianComponent, GuardianProvider, VmProvider, buildGuardianConfig,
|
|
4
|
+
export { GuardianPlayground, GuardianComponent, GuardianProvider, VmProvider, buildGuardianConfig, } from "./guardian";
|
|
@@ -38,6 +38,11 @@ function transformSandboxContent(content) {
|
|
|
38
38
|
};
|
|
39
39
|
}
|
|
40
40
|
export const SandboxHome = ({ apiKey, orgid, sandboxes, basePath = "/sandbox", }) => {
|
|
41
|
+
// Validate apiKey immediately
|
|
42
|
+
if (!apiKey || apiKey.trim() === "") {
|
|
43
|
+
return (React.createElement("div", { className: "flex items-center justify-center min-h-screen bg-white dark:bg-black" },
|
|
44
|
+
React.createElement("div", { className: "text-red-500" }, "Error: apiKey is required. Please provide a valid API key.")));
|
|
45
|
+
}
|
|
41
46
|
// Start loading as true if we need to fetch (no sandboxes prop provided)
|
|
42
47
|
const [loading, setLoading] = useState(!sandboxes);
|
|
43
48
|
const [error, setError] = useState(null);
|
package/dist/index.d.ts
CHANGED
|
@@ -117,13 +117,6 @@ declare interface CodeOutput {
|
|
|
117
117
|
full_code: string;
|
|
118
118
|
}
|
|
119
119
|
|
|
120
|
-
/**
|
|
121
|
-
* Creates sandbox URL configs for preloading from a framework's urlsToPreload.
|
|
122
|
-
* Only includes URLs that need VM preloading (useVm: true).
|
|
123
|
-
* Uses the same sandboxUid for all configs since caching is done by sandboxUid + browserUrl.
|
|
124
|
-
*/
|
|
125
|
-
export declare function createSandboxUrlConfigs(sandboxUid: string, urlsToPreload?: UrlToPreload[]): SandboxUrlConfig[];
|
|
126
|
-
|
|
127
120
|
export declare const DEFAULT_THEME: ThemeName;
|
|
128
121
|
|
|
129
122
|
export declare enum Framework {
|
|
@@ -138,7 +131,7 @@ export declare enum Framework {
|
|
|
138
131
|
|
|
139
132
|
export declare const getTheme: (themeName?: ThemeName) => ThemeColors;
|
|
140
133
|
|
|
141
|
-
export declare function GuardianComponent({ demoOptions, frameworkOptions, firstFrameworkByUseCase, currentFramework, currentUseCase, CustomConsole, GuideView, playgroundLogo, playgroundUid, browserUrl, useVm, sandboxUid, codeZipFile,
|
|
134
|
+
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
|
|
142
135
|
gitUrl, }: GuardianComponentProps): default_2.JSX.Element;
|
|
143
136
|
|
|
144
137
|
export declare interface GuardianComponentProps {
|
|
@@ -170,12 +163,7 @@ export declare interface GuardianComponentProps {
|
|
|
170
163
|
useVm: boolean;
|
|
171
164
|
sandboxUid: string;
|
|
172
165
|
codeZipFile: string | UpdateContainerCodebaseType;
|
|
173
|
-
/**
|
|
174
|
-
* Optional console URL configs to preload.
|
|
175
|
-
* These are URLs used in the CustomConsole component.
|
|
176
|
-
*/
|
|
177
166
|
completeCodeZipFile: string;
|
|
178
|
-
consoleUrlConfigs?: SandboxUrlConfig[];
|
|
179
167
|
variant?: "panel" | "top-down";
|
|
180
168
|
/**
|
|
181
169
|
* Hex color (e.g. "#3b82f6") used to theme Guardian UI elements.
|
|
@@ -189,8 +177,8 @@ export declare interface GuardianComponentProps {
|
|
|
189
177
|
* Whether to render in frame mode (just the right view, no console/header)
|
|
190
178
|
*/
|
|
191
179
|
isFrame?: boolean;
|
|
192
|
-
/** API key for starting sandbox */
|
|
193
|
-
apiKey
|
|
180
|
+
/** API key for starting sandbox - required */
|
|
181
|
+
apiKey: string;
|
|
194
182
|
/** Environment variables for sandbox */
|
|
195
183
|
env?: Record<string, string>;
|
|
196
184
|
/** Chat UID for starting sandbox */
|
|
@@ -223,17 +211,17 @@ export declare interface GuardianFramework {
|
|
|
223
211
|
GuideView?: GuardianComponentProps["GuideView"];
|
|
224
212
|
/** Optional theme color override for this framework */
|
|
225
213
|
themeColor?: string;
|
|
226
|
-
/** Optional URLs to preload for this specific framework */
|
|
227
|
-
urlsToPreload?: UrlToPreload[];
|
|
228
214
|
/** Optional Git URL for opening the project in VSCode */
|
|
229
215
|
gitUrl?: string;
|
|
230
216
|
}
|
|
231
217
|
|
|
232
218
|
/**
|
|
233
219
|
* Individual framework configuration within a use case
|
|
220
|
+
* Note: apiKey is optional here as it's passed separately at runtime to GuardianPlayground
|
|
234
221
|
*/
|
|
235
|
-
declare interface GuardianFrameworkConfig extends GuardianComponentProps {
|
|
222
|
+
declare interface GuardianFrameworkConfig extends Omit<GuardianComponentProps, 'apiKey'> {
|
|
236
223
|
frameworkKey: Framework;
|
|
224
|
+
apiKey?: string;
|
|
237
225
|
}
|
|
238
226
|
|
|
239
227
|
/**
|
|
@@ -257,8 +245,8 @@ export declare function GuardianPlayground({ nestedConfig, useCase, framework: s
|
|
|
257
245
|
framework: string;
|
|
258
246
|
/** Whether to render in frame mode (just the right view) */
|
|
259
247
|
isFrame?: boolean;
|
|
260
|
-
/** API key for starting sandbox */
|
|
261
|
-
apiKey
|
|
248
|
+
/** API key for starting sandbox - required */
|
|
249
|
+
apiKey: string;
|
|
262
250
|
/** Environment variables for sandbox */
|
|
263
251
|
env?: Record<string, string>;
|
|
264
252
|
/** Chat UID for starting sandbox */
|
|
@@ -392,14 +380,6 @@ export declare interface SandboxProps {
|
|
|
392
380
|
theme?: ThemeMode;
|
|
393
381
|
}
|
|
394
382
|
|
|
395
|
-
declare interface SandboxUrlConfig {
|
|
396
|
-
sandboxUid: string;
|
|
397
|
-
browserUrl: string;
|
|
398
|
-
useVm: boolean;
|
|
399
|
-
resolution?: [number, number];
|
|
400
|
-
apiKey?: string;
|
|
401
|
-
}
|
|
402
|
-
|
|
403
383
|
declare const sdk: SampleAppSDK;
|
|
404
384
|
export default sdk;
|
|
405
385
|
|
|
@@ -456,18 +436,6 @@ export declare const themes: Record<ThemeName, ThemeColors>;
|
|
|
456
436
|
|
|
457
437
|
declare type UpdateContainerCodebaseType = Record<string, CodeOutput>;
|
|
458
438
|
|
|
459
|
-
/**
|
|
460
|
-
* Configuration for a single URL to preload in the sandbox
|
|
461
|
-
*/
|
|
462
|
-
declare interface UrlToPreload {
|
|
463
|
-
/** Browser URL to load */
|
|
464
|
-
browserUrl: string;
|
|
465
|
-
/** Whether to use VM for this URL */
|
|
466
|
-
useVm: boolean;
|
|
467
|
-
/** Suffix for the sandboxUid (e.g., "main", "abc", "def") */
|
|
468
|
-
suffix?: string;
|
|
469
|
-
}
|
|
470
|
-
|
|
471
439
|
export declare const VmProvider: ({ children }: {
|
|
472
440
|
children: ReactNode;
|
|
473
441
|
}) => default_2.JSX.Element;
|