@sampleapp.ai/sdk 1.0.38 → 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/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 +1 -1
- 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 +4 -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/index.es.js +68998 -70761
- 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
|
@@ -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
|
}
|
|
@@ -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: frameworkConfig.hasPreview, currentUseCase: useCase, isFrame: isFrame, apiKey: apiKey, env: env, chatUid: chatUid, gitUrl: frameworkConfig.gitUrl })));
|
|
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)",
|
|
@@ -196,7 +196,7 @@ export default function RightView({ reloadCounter, overlayStage, browserUrl, use
|
|
|
196
196
|
hasPreview && !isPreviewMinimized && (React.createElement(React.Fragment, null,
|
|
197
197
|
React.createElement(Panel, { defaultSize: 68, minSize: 20, maxSize: 80, order: 1 },
|
|
198
198
|
React.createElement("div", { ref: previewContainerRef, className: "h-full w-full relative" }, showLoader ? (React.createElement("div", { className: "h-full w-full relative overflow-hidden" },
|
|
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
|
|
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" },
|
|
200
200
|
overlayStage === "error" && (React.createElement("div", { className: "w-full h-full bg-red-950 text-red-200 flex items-center justify-center" },
|
|
201
201
|
React.createElement("div", { className: "text-center" },
|
|
202
202
|
React.createElement("div", { className: "text-2xl font-semibold" }, "Service Unavailable"),
|
|
@@ -209,11 +209,9 @@ export default function RightView({ reloadCounter, overlayStage, browserUrl, use
|
|
|
209
209
|
React.createElement("span", { className: "h-2 w-2 rounded-full bg-amber-300 animate-pulse" }),
|
|
210
210
|
React.createElement("span", { className: "h-2 w-2 rounded-full bg-amber-300 animate-pulse [animation-delay:150ms]" }),
|
|
211
211
|
React.createElement("span", { className: "h-2 w-2 rounded-full bg-amber-300 animate-pulse [animation-delay:300ms]" }))))))))))),
|
|
212
|
-
React.createElement(PanelResizeHandle, { className: "h-
|
|
213
|
-
React.createElement("div", { className: "absolute inset-x-0 top-1/2 -translate-y-1/2 h-2 transition-colors flex justify-center items-center
|
|
214
|
-
React.createElement("div", { className: "
|
|
215
|
-
React.createElement("div", { className: "absolute inset-x-0 bottom-0 h-1/2 group-hover:bg-blue-400/20 transition-colors" }),
|
|
216
|
-
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" }))))),
|
|
217
215
|
React.createElement(Panel, { defaultSize: hasPreview ? 32 : 100, minSize: 20, maxSize: hasPreview ? 80 : 100, order: 2 },
|
|
218
216
|
React.createElement("div", { className: "h-full w-full flex flex-col" },
|
|
219
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))))));
|