@sampleapp.ai/sdk 1.0.37 → 1.0.40
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/api.js +2 -3
- package/dist/components/sandbox/guardian/app-layout-no-sidebar.js +3 -3
- package/dist/components/sandbox/guardian/demo/guardian-demo.js +2 -2
- package/dist/components/sandbox/guardian/demo/left-view.js +2 -8
- package/dist/components/sandbox/guardian/guardian-component.js +3 -3
- package/dist/components/sandbox/guardian/guardian-playground.js +2 -2
- package/dist/components/sandbox/guardian/header.js +46 -53
- package/dist/components/sandbox/guardian/ide/browser.js +1 -1
- package/dist/components/sandbox/guardian/right-view/preview-control-bar.js +1 -1
- package/dist/components/sandbox/guardian/right-view/right-top-down-view.js +5 -6
- package/dist/components/sandbox/guardian/right-view/simplified-editor.js +22 -2
- package/dist/components/sandbox/guardian/ui/console-with-app.js +1 -1
- package/dist/components/sandbox/guardian/utils.js +4 -4
- package/dist/index.es.js +69004 -70766
- package/dist/index.standalone.umd.js +2 -1
- package/dist/lib/generated-css.js +1 -1
- package/dist/sdk.css +1 -1
- package/dist/tailwind.css +2 -1
- package/package.json +1 -1
|
@@ -21,7 +21,6 @@ function createDownloadLink(downloadEndpoint) {
|
|
|
21
21
|
* @returns Sandbox configuration
|
|
22
22
|
*/
|
|
23
23
|
export async function fetchSandboxConfig(apiKey, sandboxId) {
|
|
24
|
-
var _a, _b;
|
|
25
24
|
const client = createApiClient({
|
|
26
25
|
apiKey,
|
|
27
26
|
});
|
|
@@ -55,7 +54,7 @@ export async function fetchSandboxConfig(apiKey, sandboxId) {
|
|
|
55
54
|
name: sandboxContent.uid, // Use UID as name if no name field exists
|
|
56
55
|
description: sandboxContent.markdown || "", // Use markdown as description
|
|
57
56
|
themeColor: "#3b82f6", // Default theme color
|
|
58
|
-
hasPreview:
|
|
57
|
+
hasPreview: sandboxContent.has_preview,
|
|
59
58
|
chatUid: sandboxContent.chat_uid || "", // Fallback: only used if published_url is not available
|
|
60
59
|
useCases: [
|
|
61
60
|
{
|
|
@@ -63,7 +62,7 @@ export async function fetchSandboxConfig(apiKey, sandboxId) {
|
|
|
63
62
|
name: sandboxContent.uid,
|
|
64
63
|
description: sandboxContent.markdown || "",
|
|
65
64
|
themeColor: "#3b82f6",
|
|
66
|
-
hasPreview:
|
|
65
|
+
hasPreview: sandboxContent.has_preview,
|
|
67
66
|
frameworks: [
|
|
68
67
|
{
|
|
69
68
|
key: frameworkKey,
|
|
@@ -2,9 +2,9 @@ import React from "react";
|
|
|
2
2
|
import { cn } from "../../../lib/utils";
|
|
3
3
|
export default function AppLayoutNoSidebar({ header, hasBodyPadding = true, children, textColorStyle, }) {
|
|
4
4
|
return (React.createElement("div", { className: "flex flex-col h-full" },
|
|
5
|
-
header && (React.createElement("header", { className: "flex h-
|
|
6
|
-
React.createElement("div", { className: "flex items-center
|
|
7
|
-
React.createElement("div", { className: cn("flex flex-1 flex-col pt-0 min-h-0", hasBodyPadding && "gap-4 p-4",
|
|
5
|
+
header && (React.createElement("header", { className: "flex h-20 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 w-full" },
|
|
6
|
+
React.createElement("div", { className: "flex items-center w-full" }, header))),
|
|
7
|
+
React.createElement("div", { className: cn("flex flex-1 flex-col pt-0 min-h-0 pr-6 pb-6", hasBodyPadding && "gap-4 p-4",
|
|
8
8
|
// Use CSS variable with Tailwind arbitrary value
|
|
9
9
|
textColorStyle &&
|
|
10
10
|
"text-[var(--guardian-text-color)] dark:text-[var(--guardian-text-color-dark)]"), style: textColorStyle }, children)));
|
|
@@ -28,8 +28,8 @@ export default function GuardianDemo({ CustomConsole, GuideView, browserUrl, pla
|
|
|
28
28
|
}
|
|
29
29
|
// If browser is maximized, render RightView at full size without the console
|
|
30
30
|
if (isBrowserMaximized && isGuardian) {
|
|
31
|
-
return (React.createElement("div", { className: "w-full h-full rounded-2xl
|
|
31
|
+
return (React.createElement("div", { className: "w-full h-full rounded-2xl overflow-hidden" },
|
|
32
32
|
React.createElement(RightView, { reloadCounter: reloadCounter, overlayStage: overlayStage, browserUrl: browserUrl, useVm: useVm, codeZipFile: codeZipFile, hasPreview: hasPreview, variant: variant, themeColor: themeColor, completeCodeZipFile: completeCodeZipFile, isGuardian: isGuardian, isBrowserMaximized: true, isBrowserUrlReady: isBrowserUrlReady, sandboxId: sandboxId, apiKey: apiKey, sandboxError: sandboxError })));
|
|
33
33
|
}
|
|
34
|
-
return (React.createElement(ConsoleWithApp, { containerClassName: "
|
|
34
|
+
return (React.createElement(ConsoleWithApp, { containerClassName: "", console: React.createElement(ConsoleWithGuide, { CustomConsole: CustomConsole, GuideView: GuideView, playgroundUid: playgroundUid, onReloadPreview: handleReloadPreview, onStageChange: handleStageChange, codeZipFile: codeZipFile, themeColor: themeColor, browserUrl: browserUrl, gitUrl: gitUrl, sandboxId: sandboxId, apiKey: apiKey }), app: React.createElement(RightView, { reloadCounter: reloadCounter, overlayStage: overlayStage, browserUrl: browserUrl, useVm: useVm, codeZipFile: codeZipFile, hasPreview: hasPreview, variant: variant, themeColor: themeColor, completeCodeZipFile: completeCodeZipFile, isGuardian: isGuardian, isBrowserMaximized: isBrowserMaximized, isBrowserUrlReady: isBrowserUrlReady, sandboxId: sandboxId, apiKey: apiKey, sandboxError: sandboxError }) }));
|
|
35
35
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import React, { useMemo, useState } from "react";
|
|
3
|
-
import SlidingConsoleGuideToggle from "./left-view/toggle";
|
|
3
|
+
// import SlidingConsoleGuideToggle from "./left-view/toggle";
|
|
4
4
|
// import AskAiView from "../ask-ai-view";
|
|
5
5
|
// import DefaultGuideView from "../default-guide-view";
|
|
6
6
|
import { Markdown } from "../ui/markdown";
|
|
@@ -19,7 +19,7 @@ export default function ConsoleWithGuide({ CustomConsole, GuideView, playgroundU
|
|
|
19
19
|
const renderCustomConsole = () => {
|
|
20
20
|
if (typeof CustomConsole === "string") {
|
|
21
21
|
return (React.createElement("div", { className: "h-full flex flex-col" },
|
|
22
|
-
React.createElement("div", { className: "flex-1 px-8
|
|
22
|
+
React.createElement("div", { className: "flex-1 px-8 " },
|
|
23
23
|
React.createElement(Markdown, { className: "text-zinc-900 dark:text-gray-100", themeColor: themeColor, browserUrl: browserUrl, gitUrl: gitUrl, sandboxId: sandboxId, apiKey: apiKey }, CustomConsole))));
|
|
24
24
|
}
|
|
25
25
|
const CustomConsoleComponent = CustomConsole;
|
|
@@ -54,12 +54,6 @@ export default function ConsoleWithGuide({ CustomConsole, GuideView, playgroundU
|
|
|
54
54
|
// return <GuideComponent />;
|
|
55
55
|
// };
|
|
56
56
|
return (React.createElement("div", { className: "flex-1 min-h-0 relative flex flex-col" },
|
|
57
|
-
React.createElement("div", { className: "flex justify-center border-b border-border" },
|
|
58
|
-
React.createElement(SlidingConsoleGuideToggle, { playgroundUid: playgroundUid, variant: "pill", buttonClassName: "text-sm px-4 py-1", currentView: currentView, setCurrentView: setCurrentView, tabs: [
|
|
59
|
-
{ id: "console", label: "Guide" },
|
|
60
|
-
// ...(GuideView ? [{id: "guide-og", label: "Guide OG"}] : []),
|
|
61
|
-
// {id: "chat", label: "Ask AI"},
|
|
62
|
-
] })),
|
|
63
57
|
React.createElement("div", { className: "h-[calc(100vh-9.5rem)] min-h-0 overflow-hidden flex-1 flex flex-col" },
|
|
64
58
|
React.createElement("div", { className: "flex-1 min-h-0 overflow-y-auto" }, isConsoleView && renderCustomConsole()),
|
|
65
59
|
React.createElement("div", { className: "relative" },
|
|
@@ -8,7 +8,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, completeCodeZipFile, variant, themeColor, hasPreview = true, isFrame = false, apiKey, env, chatUid, hideHeader =
|
|
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 = false, // Hardcoded to true by default, not exposed in Sandbox.tsx
|
|
12
12
|
gitUrl, }) {
|
|
13
13
|
const { previewUrl, setPreviewUrl } = useGuardianContext();
|
|
14
14
|
const { vmResolution } = useVmContext();
|
|
@@ -80,7 +80,7 @@ gitUrl, }) {
|
|
|
80
80
|
return (React.createElement("div", { className: "h-[100vh]" },
|
|
81
81
|
React.createElement(GuardianDemo, { CustomConsole: CustomConsole, GuideView: GuideView, browserUrl: previewUrl, playgroundUid: playgroundUid, useVm: useVm, codeZipFile: codeZipFile, completeCodeZipFile: completeCodeZipFile, variant: variant, themeColor: themeColor, hasPreview: hasPreview, isFrame: isFrame, isGuardian: true, gitUrl: gitUrl, isBrowserUrlReady: isBrowserUrlReady, sandboxId: sandboxUid, apiKey: apiKey, sandboxError: sandboxError })));
|
|
82
82
|
}
|
|
83
|
-
return (React.createElement(AppLayoutNoSidebar, { header: !hideHeader ? (React.createElement(Header, { demoOptions: demoOptions, frameworkOptions: frameworkOptions, currentFramework: currentFramework, currentUseCase: currentUseCase, playgroundLogo: playgroundLogo, firstFrameworkByUseCase: firstFrameworkByUseCase })) : undefined, hasBodyPadding: false },
|
|
84
|
-
React.createElement("div", { className: cn("flex-1 min-h-0 flex flex-col
|
|
83
|
+
return (React.createElement(AppLayoutNoSidebar, { header: !hideHeader ? (React.createElement(Header, { demoOptions: demoOptions, frameworkOptions: frameworkOptions, currentFramework: currentFramework, currentUseCase: currentUseCase, playgroundLogo: playgroundLogo, firstFrameworkByUseCase: firstFrameworkByUseCase, themecolor: themeColor })) : undefined, hasBodyPadding: false },
|
|
84
|
+
React.createElement("div", { className: cn("flex-1 min-h-0 flex flex-col", hideHeader && "pt-4") },
|
|
85
85
|
React.createElement(GuardianDemo, { CustomConsole: CustomConsole, GuideView: GuideView, browserUrl: previewUrl, playgroundUid: playgroundUid, useVm: useVm, codeZipFile: codeZipFile, completeCodeZipFile: completeCodeZipFile, variant: variant, themeColor: themeColor, hasPreview: hasPreview, isFrame: isFrame, isGuardian: true, gitUrl: gitUrl, isBrowserUrlReady: isBrowserUrlReady, sandboxId: sandboxUid, apiKey: apiKey, sandboxError: sandboxError }))));
|
|
86
86
|
}
|
|
@@ -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, variant: frameworkConfig.variant, themeColor: frameworkConfig.themeColor, hasPreview:
|
|
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, hideHeader: false })));
|
|
45
45
|
}
|
|
@@ -1,61 +1,54 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import React from "react";
|
|
3
|
-
|
|
4
|
-
import GlassmorphicCombobox from "./header/glassmorphic-combobox";
|
|
5
|
-
export default function Header({ demoOptions, frameworkOptions, firstFrameworkByUseCase, currentFramework, playgroundLogo, currentUseCase, }) {
|
|
3
|
+
export default function Header({ demoOptions, frameworkOptions, firstFrameworkByUseCase, currentFramework, playgroundLogo, currentUseCase, themecolor, }) {
|
|
6
4
|
var _a, _b;
|
|
7
5
|
// Derive values directly from props (which come from the URL)
|
|
8
|
-
// No internal state - the URL is the source of truth
|
|
9
6
|
const selectedUseCase = currentUseCase || ((_a = demoOptions[0]) === null || _a === void 0 ? void 0 : _a.value);
|
|
10
7
|
const selectedFramework = currentFramework || ((_b = frameworkOptions[0]) === null || _b === void 0 ? void 0 : _b.value);
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
label: "Production",
|
|
26
|
-
badgeClass: "border-emerald-500/30 bg-emerald-500/10 text-emerald-200",
|
|
27
|
-
dotClass: "bg-emerald-400 shadow-[0_0_0_3px_rgba(16,185,129,0.25)]",
|
|
8
|
+
const sections = [
|
|
9
|
+
// {
|
|
10
|
+
// id: "useCase",
|
|
11
|
+
// label: "Use Case:",
|
|
12
|
+
// options: demoOptions.map((opt) => ({
|
|
13
|
+
// ...opt,
|
|
14
|
+
// href: `/${opt.value}?framework=${firstFrameworkByUseCase?.[opt.value] || frameworkOptions[0]?.value
|
|
15
|
+
// }`,
|
|
16
|
+
// })),
|
|
17
|
+
// },
|
|
18
|
+
{
|
|
19
|
+
id: "framework",
|
|
20
|
+
label: "Framework:",
|
|
21
|
+
options: frameworkOptions.map((opt) => (Object.assign(Object.assign({}, opt), { href: `/${selectedUseCase}?framework=${opt.value}` }))),
|
|
28
22
|
},
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
meta.label))));
|
|
23
|
+
];
|
|
24
|
+
return (React.createElement("div", { className: "w-full sticky top-0 z-50 px-4 lg:px-8 backdrop-blur-md" },
|
|
25
|
+
React.createElement("div", { className: "flex flex-wrap items-center justify-between" },
|
|
26
|
+
React.createElement("div", { className: "flex flex-wrap items-center gap-6" }, sections.map((section) => {
|
|
27
|
+
const currentValue = section.id === "useCase" ? selectedUseCase : selectedFramework;
|
|
28
|
+
return (React.createElement("div", { key: section.id, className: "flex items-center flex-wrap gap-3" },
|
|
29
|
+
React.createElement("span", { className: "text-sm font-semibold text-gray-600 dark:text-gray-400 whitespace-nowrap" }, section.label),
|
|
30
|
+
React.createElement("div", { className: "hidden md:block" },
|
|
31
|
+
React.createElement("div", { className: "flex items-center gap-2" }, section.options.map((option) => {
|
|
32
|
+
const isSelected = currentValue === option.value;
|
|
33
|
+
return (React.createElement("button", { key: option.value, onClick: () => {
|
|
34
|
+
if (typeof window !== "undefined") {
|
|
35
|
+
window.location.href = option.href;
|
|
36
|
+
}
|
|
37
|
+
}, className: `inline-flex items-center px-3 py-1.5 text-xs font-medium rounded-md border transition-all cursor-pointer active:scale-[0.98] ${isSelected
|
|
38
|
+
? "bg-white dark:bg-zinc-900 hover:bg-zinc-100 dark:hover:bg-zinc-800"
|
|
39
|
+
: "bg-white dark:bg-zinc-900 border-zinc-300 dark:border-zinc-700 text-zinc-900 dark:text-zinc-100 hover:bg-zinc-100 dark:hover:bg-zinc-800"}`, style: isSelected && themecolor ? {
|
|
40
|
+
borderColor: themecolor,
|
|
41
|
+
color: themecolor,
|
|
42
|
+
} : undefined }, option.label));
|
|
43
|
+
}))),
|
|
44
|
+
React.createElement("div", { className: "block md:hidden relative" },
|
|
45
|
+
React.createElement("select", { value: currentValue, onChange: (e) => {
|
|
46
|
+
const selectedOption = section.options.find((opt) => opt.value === e.target.value);
|
|
47
|
+
if (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.href) {
|
|
48
|
+
window.location.href = selectedOption.href;
|
|
49
|
+
}
|
|
50
|
+
}, className: "appearance-none bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-md px-3 py-1.5 pr-8 text-xs font-medium text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-primary dark:focus:ring-primary-light focus:border-transparent transition-all hover:bg-zinc-100 dark:hover:bg-zinc-800" }, section.options.map((option) => (React.createElement("option", { key: option.value, value: option.value }, option.label)))),
|
|
51
|
+
React.createElement("svg", { "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", className: "absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none text-zinc-400" },
|
|
52
|
+
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.35 9.915a.875.875 0 0 1 1.235-.065L8 13.823l4.415-3.973a.875.875 0 0 1 1.17 1.3l-5 4.5a.873.873 0 0 1-1.17 0l-5-4.5a.875.875 0 0 1-.065-1.235ZM7.415.35a.873.873 0 0 1 1.17 0l5 4.5a.875.875 0 1 1-1.17 1.3L8 2.177 3.585 6.15a.875.875 0 0 1-1.17-1.3l5-4.5Z", fill: "currentColor" })))));
|
|
53
|
+
})))));
|
|
61
54
|
}
|
|
@@ -482,7 +482,7 @@ export default function Browser({ previewUrl, setPreviewUrl, containerEndpoint,
|
|
|
482
482
|
const renderIframe = () => {
|
|
483
483
|
if (!previewUrl && !iframeSrc)
|
|
484
484
|
return null;
|
|
485
|
-
return (React.createElement("iframe", { ref: iframeRef, src: iframeSrc || previewUrl, className: cn("h-full w-full border
|
|
485
|
+
return (React.createElement("iframe", { ref: iframeRef, src: iframeSrc || previewUrl, className: cn("h-full w-full border", outerContainerClassName), sandbox: "allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-modals allow-downloads allow-top-navigation", allow: "fullscreen; payment; geolocation; microphone; camera", onLoad: () => {
|
|
486
486
|
setIsLoading(false);
|
|
487
487
|
setError(null);
|
|
488
488
|
attachIframeNavigationSync();
|
|
@@ -7,7 +7,7 @@ export default function PreviewControlBar({ isMinimized, onToggle, onRefresh, th
|
|
|
7
7
|
const { isBrowserMaximized, setIsBrowserMaximized } = useGuardianContext();
|
|
8
8
|
const frameParams = useFrameParams();
|
|
9
9
|
const effectiveThemeColor = frameParams.isFrame && frameParams.theme ? frameParams.theme : themeColor;
|
|
10
|
-
return (React.createElement("div", { className: "w-full flex items-center justify-between px-4 py-[0.32rem] border-b" },
|
|
10
|
+
return (React.createElement("div", { className: "w-full flex items-center justify-between px-4 py-[0.32rem] border-b bg-black rounded-t-lg" },
|
|
11
11
|
React.createElement("button", { onClick: onToggle, className: "flex items-center gap-2 transition-colors", title: isMinimized ? "Show preview" : "Hide preview" },
|
|
12
12
|
React.createElement("div", { className: "transition-transform duration-300 ease-in-out", style: {
|
|
13
13
|
transform: isMinimized ? "rotate(0deg)" : "rotate(180deg)",
|
|
@@ -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();
|
|
@@ -195,7 +196,7 @@ export default function RightView({ reloadCounter, overlayStage, browserUrl, use
|
|
|
195
196
|
hasPreview && !isPreviewMinimized && (React.createElement(React.Fragment, null,
|
|
196
197
|
React.createElement(Panel, { defaultSize: 68, minSize: 20, maxSize: 80, order: 1 },
|
|
197
198
|
React.createElement("div", { ref: previewContainerRef, className: "h-full w-full relative" }, showLoader ? (React.createElement("div", { className: "h-full w-full relative overflow-hidden" },
|
|
198
|
-
React.createElement(AiLoader, { text: "Booting up...", fullScreen: false, themeColor: effectiveThemeColor }))) : (React.createElement(Browser, { previewUrl: browserUrl || "", setPreviewUrl: () => { }, containerEndpoint: browserUrl, outerContainerClassName: "h-full w-full border
|
|
199
|
+
React.createElement(AiLoader, { text: "Booting up...", fullScreen: false, themeColor: effectiveThemeColor }))) : (React.createElement(Browser, { previewUrl: browserUrl || "", setPreviewUrl: () => { }, containerEndpoint: browserUrl, outerContainerClassName: "h-full w-full border", reloadSignal: reloadCounter, useVm: useVm, isGuardian: isGuardian, sandboxError: sandboxError }, overlayStage !== "hidden" && (React.createElement("div", { className: "absolute inset-0 z-20 flex items-center justify-center" },
|
|
199
200
|
overlayStage === "error" && (React.createElement("div", { className: "w-full h-full bg-red-950 text-red-200 flex items-center justify-center" },
|
|
200
201
|
React.createElement("div", { className: "text-center" },
|
|
201
202
|
React.createElement("div", { className: "text-2xl font-semibold" }, "Service Unavailable"),
|
|
@@ -208,11 +209,9 @@ export default function RightView({ reloadCounter, overlayStage, browserUrl, use
|
|
|
208
209
|
React.createElement("span", { className: "h-2 w-2 rounded-full bg-amber-300 animate-pulse" }),
|
|
209
210
|
React.createElement("span", { className: "h-2 w-2 rounded-full bg-amber-300 animate-pulse [animation-delay:150ms]" }),
|
|
210
211
|
React.createElement("span", { className: "h-2 w-2 rounded-full bg-amber-300 animate-pulse [animation-delay:300ms]" }))))))))))),
|
|
211
|
-
React.createElement(PanelResizeHandle, { className: "h-
|
|
212
|
-
React.createElement("div", { className: "absolute inset-x-0 top-1/2 -translate-y-1/2 h-2 transition-colors flex justify-center items-center
|
|
213
|
-
React.createElement("div", { className: "
|
|
214
|
-
React.createElement("div", { className: "absolute inset-x-0 bottom-0 h-1/2 group-hover:bg-blue-400/20 transition-colors" }),
|
|
215
|
-
React.createElement("div", { className: "h-full w-px bg-border group-hover:bg-blue-400 transition-colors relative z-10" }))))),
|
|
212
|
+
React.createElement(PanelResizeHandle, { className: "h-0 relative group flex-shrink-0" },
|
|
213
|
+
React.createElement("div", { className: "absolute inset-x-0 top-1/2 -translate-y-1/2 h-2 -mt-0.5 group-hover:bg-blue-400/20 transition-colors flex justify-center items-center" },
|
|
214
|
+
React.createElement("div", { className: "h-full w-px group-hover:bg-blue-400 transition-colors" }))))),
|
|
216
215
|
React.createElement(Panel, { defaultSize: hasPreview ? 32 : 100, minSize: 20, maxSize: hasPreview ? 80 : 100, order: 2 },
|
|
217
216
|
React.createElement("div", { className: "h-full w-full flex flex-col" },
|
|
218
217
|
React.createElement("div", { className: "flex-1 min-h-0 flex flex-col" },
|
|
@@ -75,6 +75,26 @@ export default function SimplifiedEditor({ themeColor }) {
|
|
|
75
75
|
const handleEditorDidMount = (editor, monaco) => {
|
|
76
76
|
editorRef.current = editor;
|
|
77
77
|
configureEditorTheme(monaco);
|
|
78
|
+
// Apply rounded corners to Monaco Editor DOM elements
|
|
79
|
+
const editorDom = editor.getDomNode();
|
|
80
|
+
if (editorDom) {
|
|
81
|
+
editorDom.style.borderBottomLeftRadius = '0.5rem';
|
|
82
|
+
editorDom.style.borderBottomRightRadius = '0.5rem';
|
|
83
|
+
editorDom.style.overflow = 'hidden';
|
|
84
|
+
// Target overflow guard
|
|
85
|
+
const overflowGuard = editorDom.querySelector('.overflow-guard');
|
|
86
|
+
if (overflowGuard) {
|
|
87
|
+
overflowGuard.style.borderBottomLeftRadius = '0.5rem';
|
|
88
|
+
overflowGuard.style.borderBottomRightRadius = '0.5rem';
|
|
89
|
+
overflowGuard.style.overflow = 'hidden';
|
|
90
|
+
}
|
|
91
|
+
// Target monaco editor background
|
|
92
|
+
const background = editorDom.querySelector('.monaco-editor-background');
|
|
93
|
+
if (background) {
|
|
94
|
+
background.style.borderBottomLeftRadius = '0.5rem';
|
|
95
|
+
background.style.borderBottomRightRadius = '0.5rem';
|
|
96
|
+
}
|
|
97
|
+
}
|
|
78
98
|
};
|
|
79
99
|
// Helper function to clear all decorations
|
|
80
100
|
const clearAllDecorations = () => {
|
|
@@ -187,8 +207,8 @@ export default function SimplifiedEditor({ themeColor }) {
|
|
|
187
207
|
}, [theme]);
|
|
188
208
|
const highlightBackground = hexToRgba(effectiveThemeColor, 0.2);
|
|
189
209
|
const glyphBackground = hexToRgba(effectiveThemeColor, 0.3);
|
|
190
|
-
return (React.createElement("div", { className: "flex-1 flex flex-col min-h-0 h-full" },
|
|
191
|
-
React.createElement("div", { className: "flex-1 min-h-0 relative" },
|
|
210
|
+
return (React.createElement("div", { className: "flex-1 flex flex-col min-h-0 h-full rounded-b-lg overflow-hidden" },
|
|
211
|
+
React.createElement("div", { className: "flex-1 min-h-0 relative rounded-b-lg overflow-hidden" },
|
|
192
212
|
React.createElement(MonacoEditor, { height: "100%", language: language
|
|
193
213
|
? language === CodeLanguage.TYPESCRIPT ||
|
|
194
214
|
language === "tsx"
|
|
@@ -10,7 +10,7 @@ export default function ConsoleWithApp({ containerClassName, console, app, }) {
|
|
|
10
10
|
React.createElement("div", { className: "flex-1 flex flex-col min-h-0 h-full" }, console))),
|
|
11
11
|
React.createElement(PanelResizeHandle, { className: "w-0 relative group flex-shrink-0" },
|
|
12
12
|
React.createElement("div", { className: "absolute inset-y-0 left-1/2 -translate-x-1/2 w-2 -ml-0.5 group-hover:bg-blue-400/20 transition-colors flex justify-center items-center" },
|
|
13
|
-
React.createElement("div", { className: "h-full w-px
|
|
13
|
+
React.createElement("div", { className: "h-full w-px group-hover:bg-blue-400 transition-colors" }))),
|
|
14
14
|
React.createElement(Panel, { defaultSize: 63, minSize: 40, order: 2 },
|
|
15
15
|
React.createElement("div", { className: "h-full w-full" },
|
|
16
16
|
React.createElement("div", { className: "flex-1 flex flex-col min-h-0 h-full" }, app))))));
|
|
@@ -9,7 +9,7 @@ import { createApiClient } from "../../../lib/api-client";
|
|
|
9
9
|
* // Access via: config["full-stack-auth"].frameworks["nextjs"]
|
|
10
10
|
*/
|
|
11
11
|
export function buildGuardianConfig(useCases, options) {
|
|
12
|
-
var _a;
|
|
12
|
+
var _a, _b, _c;
|
|
13
13
|
const { playgroundUid, playgroundLogo, frameworkLabels, variant } = options;
|
|
14
14
|
const result = {};
|
|
15
15
|
for (const uc of useCases) {
|
|
@@ -19,7 +19,7 @@ export function buildGuardianConfig(useCases, options) {
|
|
|
19
19
|
name: uc.name,
|
|
20
20
|
description: uc.description,
|
|
21
21
|
themeColor: uc.themeColor,
|
|
22
|
-
hasPreview: uc.hasPreview,
|
|
22
|
+
hasPreview: (_a = uc.hasPreview) !== null && _a !== void 0 ? _a : true,
|
|
23
23
|
frameworks: {},
|
|
24
24
|
};
|
|
25
25
|
// Compute frameworkOptions from ALL frameworks in this use case
|
|
@@ -49,9 +49,9 @@ export function buildGuardianConfig(useCases, options) {
|
|
|
49
49
|
sandboxUid: fw.sandboxUid,
|
|
50
50
|
codeZipFile: fw.codeZipFile,
|
|
51
51
|
completeCodeZipFile: fw.completeCodeZipFile,
|
|
52
|
-
themeColor: (
|
|
52
|
+
themeColor: (_b = fw.themeColor) !== null && _b !== void 0 ? _b : uc.themeColor,
|
|
53
53
|
variant,
|
|
54
|
-
hasPreview: uc.hasPreview,
|
|
54
|
+
hasPreview: (_c = uc.hasPreview) !== null && _c !== void 0 ? _c : true,
|
|
55
55
|
gitUrl: fw.gitUrl,
|
|
56
56
|
};
|
|
57
57
|
}
|