@sampleapp.ai/sdk 1.0.29 → 1.0.30

package/dist/components/sandbox/guardian/index.js

@@ -0,0 +1,8 @@
+export { default as GuardianPlayground } from "./guardian-playground";
+export { default as GuardianComponent } from "./guardian-component";
+export { VmProvider, useVmContext } from "./context/vm-context";
+export { GuardianProvider, useGuardianContext } from "./context/guardian-context";
+export * from "./types";
+export { default as CodeFocusSection } from "./code-focus-section";
+export { buildGuardianConfig, createSandboxUrlConfigs } from "./utils";
+export { Framework, FrameworkLabel } from "./types";

package/dist/components/sandbox/guardian/right-view/code-view.js

@@ -0,0 +1,60 @@
+"use client";
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
+// FileExplorer and Editor components are not yet implemented in SDK
+// These imports are commented out until those components are added
+// import FileExplorer, {
+//   FileTreeNode,
+// } from "../ide/file-explorer";
+// import Editor from "../ide/Editor";
+import React, { useEffect } from "react";
+import { useGuardianContext } from "../context/guardian-context";
+import { zipPathToFileTree } from "../zip-to-filetree";
+import { codeZipFileToCodebase } from "../zip-to-codebase";
+// Stub components until FileExplorer and Editor are implemented
+const FileExplorer = ({ isGenerating }) => (React.createElement("div", { className: "h-full flex items-center justify-center text-muted-foreground text-sm" }, "File Explorer - Coming Soon"));
+const Editor = () => (React.createElement("div", { className: "h-full flex items-center justify-center text-muted-foreground text-sm" }, "Code Editor - Coming Soon"));
+// ORIGINAL URL: https://launchdarkly.sampleapp.ai/chat/mgl0vkr1IPwCIR
+export default function CodeView({ codeZipFile, }) {
+    const { setFileTree, setGeneratedCode } = useGuardianContext();
+    useEffect(() => {
+        let isMounted = true;
+        // Only load file tree if codeZipFile is a string path
+        if (typeof codeZipFile === "string") {
+            zipPathToFileTree(codeZipFile)
+                .then((fileTree) => {
+                if (isMounted) {
+                    setFileTree(fileTree);
+                }
+            })
+                .catch((error) => {
+                console.error("Failed to load zip file:", error);
+            });
+        }
+        // Handle both string path and object
+        codeZipFileToCodebase(codeZipFile)
+            .then((codebase) => {
+            if (isMounted) {
+                setGeneratedCode(codebase);
+            }
+        })
+            .catch((error) => {
+            console.error("Failed to load codebase:", error);
+        });
+        return () => {
+            isMounted = false;
+        };
+    }, [codeZipFile, setFileTree, setGeneratedCode]);
+    return (React.createElement("div", { className: "h-[calc(100vh-12.9rem)] w-full" },
+        React.createElement(PanelGroup, { direction: "horizontal", className: "relative h-full" },
+            React.createElement(Panel, { defaultSize: 25, minSize: 15, maxSize: 50, order: 1 },
+                React.createElement("div", { className: "h-full" },
+                    React.createElement(FileExplorer, { isGenerating: false }))),
+            React.createElement(PanelResizeHandle, { className: "w-0 relative group flex-shrink-0" },
+                React.createElement("div", { className: "absolute inset-y-0 left-1/2 -translate-x-1/2 w-2 -ml-1 transition-colors flex justify-center items-center bg-transparent" },
+                    React.createElement("div", { className: "absolute inset-y-0 left-0 w-1/2 group-hover:bg-blue-400/20 transition-colors" }),
+                    React.createElement("div", { className: "absolute inset-y-0 right-0 w-1/2 group-hover:bg-blue-400/20 transition-colors" }),
+                    React.createElement("div", { className: "h-full w-px bg-border group-hover:bg-blue-400 transition-colors relative z-10" }))),
+            React.createElement(Panel, { defaultSize: 75, order: 2 },
+                React.createElement("div", { className: "h-full" },
+                    React.createElement(Editor, null))))));
+}

package/dist/components/sandbox/guardian/right-view/pill-file-selector.js

@@ -0,0 +1,233 @@
+"use client";
+import React from "react";
+import { useGuardianContext } from "../context/guardian-context";
+import { cn } from "../../../../lib/utils";
+import { useFrameParams } from "../hooks/use-frame-params";
+import { FileCode, FileJson, FileText, Settings, Layout, Database, Image, Terminal, } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "../ui/tooltip";
+const FILE_ICONS = {
+    // JavaScript/React
+    js: { icon: FileCode, color: "text-yellow-600" },
+    jsx: { icon: FileCode, color: "text-blue-500" },
+    ts: { icon: FileCode, color: "text-blue-600" },
+    tsx: { icon: FileCode, color: "text-blue-500" },
+    json: { icon: FileJson, color: "text-yellow-500" },
+    html: { icon: Layout, color: "text-orange-500" },
+    css: { icon: FileText, color: "text-blue-400" },
+    scss: { icon: FileText, color: "text-pink-500" },
+    less: { icon: FileText, color: "text-indigo-500" },
+    // Python
+    py: { icon: FileCode, color: "text-green-500" },
+    pyc: { icon: FileCode, color: "text-green-400" },
+    pyw: { icon: FileCode, color: "text-green-500" },
+    ipynb: { icon: Terminal, color: "text-red-500" },
+    // Config files
+    env: { icon: Settings, color: "text-zinc-500" },
+    gitignore: { icon: Settings, color: "text-zinc-500" },
+    yml: { icon: Settings, color: "text-purple-500" },
+    yaml: { icon: Settings, color: "text-purple-500" },
+    toml: { icon: Settings, color: "text-purple-500" },
+    ini: { icon: Settings, color: "text-zinc-500" },
+    cfg: { icon: Settings, color: "text-zinc-500" },
+    config: { icon: Settings, color: "text-zinc-500" },
+    // Database
+    sql: { icon: Database, color: "text-blue-500" },
+    sqlite: { icon: Database, color: "text-blue-500" },
+    sqlite3: { icon: Database, color: "text-blue-500" },
+    // Images
+    png: { icon: Image, color: "text-green-500" },
+    jpg: { icon: Image, color: "text-green-500" },
+    jpeg: { icon: Image, color: "text-green-500" },
+    gif: { icon: Image, color: "text-green-500" },
+    svg: { icon: Image, color: "text-green-500" },
+    ico: { icon: Image, color: "text-green-500" },
+    // Default
+    default: { icon: FileText, color: "text-zinc-500" },
+};
+export default function PillFileSelector({ themeColor }) {
+    const containerRef = React.useRef(null);
+    const fileRefs = React.useRef({});
+    const lastInitializedFilePath = React.useRef(null);
+    const { generatedCode, updateCode, setLanguage, activeFilePath: contextActiveFilePath, setActiveFileName, setActiveFilePath, setActiveDependenciesToInstall, setActiveLineRange, filesEdited, } = useGuardianContext();
+    // Read frame params - these override context when isFrame=true
+    const frameParams = useFrameParams();
+    // Use frame param overrides when in frame mode
+    const activeFilePath = frameParams.isFrame && frameParams.activeFilePath
+        ? frameParams.activeFilePath
+        : contextActiveFilePath;
+    const effectiveThemeColor = frameParams.isFrame && frameParams.theme ? frameParams.theme : themeColor;
+    // Get file entries and sort them
+    const fileEntries = Object.entries(generatedCode).sort(([a], [b]) => {
+        const aName = a.split("/").pop() || a;
+        const bName = b.split("/").pop() || b;
+        return aName.localeCompare(bName);
+    });
+    const handleFileClick = (filePath, fileData) => {
+        // In frame mode, replace all frame params with activeFilePath and isFrame only
+        if (frameParams.isFrame) {
+            const url = new URL(window.location.href);
+            url.search = "";
+            url.searchParams.set("activeFilePath", filePath);
+            url.searchParams.set("isFrame", "true");
+            url.searchParams.set("theme", effectiveThemeColor);
+            window.history.replaceState({}, "", url.toString());
+        }
+        const fileName = filePath.split("/").pop() || filePath;
+        setActiveFileName(fileName);
+        setActiveFilePath(filePath);
+        setLanguage(fileData.code_language);
+        updateCode(filePath in filesEdited
+            ? filesEdited[filePath].full_code
+            : fileData.full_code);
+        setActiveDependenciesToInstall(fileData.dependencies_to_install);
+    };
+    const getFileIcon = (fileName) => {
+        var _a;
+        const ext = ((_a = fileName.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || "";
+        return FILE_ICONS[ext] || FILE_ICONS.default;
+    };
+    // Exclude certain files from display
+    const excludedFiles = [
+        ".env",
+        "vite-plugin-react-instrumentation.ts",
+        "instrumentation-client.ts",
+    ];
+    const filteredFiles = fileEntries.filter(([filePath]) => {
+        const fileName = filePath.split("/").pop() || filePath;
+        return !excludedFiles.includes(fileName);
+    });
+    // Scroll a pill into view whenever the active file changes
+    const scrollActivePillIntoView = React.useCallback((filePath) => {
+        const targetPath = filePath !== null && filePath !== void 0 ? filePath : activeFilePath;
+        if (!targetPath)
+            return;
+        const container = containerRef.current;
+        const activeButton = fileRefs.current[targetPath];
+        if (!container || !activeButton)
+            return;
+        // Small delay to ensure DOM has updated
+        setTimeout(() => {
+            const containerRect = container.getBoundingClientRect();
+            const activeRect = activeButton.getBoundingClientRect();
+            const isOutOfView = activeRect.left < containerRect.left ||
+                activeRect.right > containerRect.right;
+            if (isOutOfView) {
+                activeButton.scrollIntoView({
+                    behavior: "instant",
+                    block: "nearest",
+                    inline: "center",
+                });
+            }
+        }, 50);
+    }, [activeFilePath]);
+    // Ensure the active file pill is always visible in the scroll area
+    React.useEffect(() => {
+        scrollActivePillIntoView();
+    }, [scrollActivePillIntoView, filteredFiles.length]);
+    // Listen for frame param updates from postMessage
+    React.useEffect(() => {
+        if (!frameParams.isFrame)
+            return;
+        const handleFrameParamsUpdate = (event) => {
+            var _a;
+            try {
+                const customEvent = event;
+                const nextPath = (_a = customEvent.detail) === null || _a === void 0 ? void 0 : _a.activeFilePath;
+                scrollActivePillIntoView(nextPath);
+            }
+            catch (_b) {
+                // Fallback to current activeFilePath if parsing fails
+                scrollActivePillIntoView();
+            }
+        };
+        window.addEventListener("frameParamsUpdated", handleFrameParamsUpdate);
+        return () => window.removeEventListener("frameParamsUpdated", handleFrameParamsUpdate);
+    }, [frameParams.isFrame, scrollActivePillIntoView]);
+    // Load file from frame params when they change
+    React.useEffect(() => {
+        // Skip if not in frame mode or no file path specified
+        if (!frameParams.isFrame || !frameParams.activeFilePath) {
+            return;
+        }
+        // Skip if we've already initialized this exact file path
+        if (lastInitializedFilePath.current === frameParams.activeFilePath) {
+            return;
+        }
+        // Skip if generatedCode isn't loaded yet
+        if (!generatedCode || Object.keys(generatedCode).length === 0) {
+            return;
+        }
+        // Search by file_path property first (source of truth), then fallback to key lookup
+        let fileData;
+        let resolvedFilePath;
+        // First, search through all code outputs to find one matching file_path
+        const matchingCodeOutput = Object.values(generatedCode).find((output) => output.file_path === frameParams.activeFilePath);
+        if (matchingCodeOutput) {
+            fileData = matchingCodeOutput;
+            resolvedFilePath = matchingCodeOutput.file_path;
+        }
+        else {
+            // Fallback: try to get from generatedCode by key
+            if (generatedCode[frameParams.activeFilePath]) {
+                fileData = generatedCode[frameParams.activeFilePath];
+                resolvedFilePath = fileData.file_path || frameParams.activeFilePath;
+            }
+        }
+        if (fileData && resolvedFilePath) {
+            lastInitializedFilePath.current = frameParams.activeFilePath; // Track initialized path
+            const fileName = fileData.code_file_name ||
+                resolvedFilePath.split("/").pop() ||
+                resolvedFilePath;
+            setActiveFileName(fileName);
+            setActiveFilePath(resolvedFilePath);
+            setLanguage(fileData.code_language);
+            updateCode(resolvedFilePath in filesEdited
+                ? filesEdited[resolvedFilePath].full_code
+                : fileData.full_code);
+            setActiveDependenciesToInstall(fileData.dependencies_to_install);
+            // Set line range if provided in frame params
+            if (frameParams.linesStart !== undefined) {
+                setActiveLineRange({
+                    start: frameParams.linesStart,
+                    end: frameParams.linesEnd,
+                });
+            }
+            else {
+                setActiveLineRange(undefined);
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [frameParams.isFrame, frameParams.activeFilePath, generatedCode]);
+    if (filteredFiles.length === 0) {
+        return null;
+    }
+    return (React.createElement(TooltipProvider, null,
+        React.createElement("div", { ref: containerRef, className: "flex items-center gap-1 px-2 py-1.5 overflow-x-auto no-scrollbar [-ms-overflow-style:none] [scrollbar-width:none] flex-1" }, filteredFiles.map(([filePath, fileData]) => {
+            const fileName = filePath.split("/").pop() || filePath;
+            const isActive = filePath === activeFilePath;
+            const isEdited = filePath in filesEdited;
+            const fileIcon = getFileIcon(fileName);
+            const IconComponent = fileIcon.icon;
+            return (React.createElement(Tooltip, { key: filePath },
+                React.createElement(TooltipTrigger, { asChild: true },
+                    React.createElement("button", { ref: (el) => {
+                            if (el) {
+                                fileRefs.current[filePath] = el;
+                            }
+                            else {
+                                delete fileRefs.current[filePath];
+                            }
+                        }, onClick: () => handleFileClick(filePath, fileData), className: cn("flex items-center gap-1.5 px-2.5 py-1 rounded text-xs font-normal transition-colors whitespace-nowrap", isActive
+                            ? "rounded-2xl text-zinc-100"
+                            : "text-zinc-400 hover:text-zinc-200", isEdited && "ring-1 ring-yellow-500/50"), style: isActive
+                            ? {
+                                backgroundColor: `${effectiveThemeColor}33`, // ~20% opacity
+                                color: effectiveThemeColor,
+                            }
+                            : undefined },
+                        React.createElement(IconComponent, { size: 12, className: cn("flex-shrink-0", !isActive && "text-zinc-500"), style: isActive ? { color: effectiveThemeColor } : undefined }),
+                        React.createElement("span", { className: "truncate max-w-[180px]" }, fileName),
+                        isEdited && (React.createElement("span", { className: "h-1 w-1 rounded-full bg-yellow-400 flex-shrink-0" })))),
+                React.createElement(TooltipContent, { side: "top", className: "bg-zinc-900 text-zinc-200 text-[11px] px-2 py-1 rounded shadow border border-zinc-700 whitespace-pre font-mono" }, filePath)));
+        }))));
+}

package/dist/components/sandbox/guardian/right-view/preview-control-bar.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { useFrameParams } from "../hooks/use-frame-params";
+import { useGuardianContext } from "../context/guardian-context";
+import { ChevronDown, RefreshCw, Maximize2, Minimize2, ExternalLink, } from "lucide-react";
+export default function PreviewControlBar({ isMinimized, onToggle, onRefresh, themeColor, externalUrl, // <-- NEW PROP
+ }) {
+    const { isBrowserMaximized, setIsBrowserMaximized } = useGuardianContext();
+    const frameParams = useFrameParams();
+    const effectiveThemeColor = frameParams.isFrame && frameParams.theme ? frameParams.theme : themeColor;
+    return (React.createElement("div", { className: "w-full flex items-center justify-between px-4 py-[0.32rem] border-b" },
+        React.createElement("button", { onClick: onToggle, className: "flex items-center gap-2 transition-colors", title: isMinimized ? "Show preview" : "Hide preview" },
+            React.createElement("div", { className: "transition-transform duration-300 ease-in-out", style: {
+                    transform: isMinimized ? "rotate(0deg)" : "rotate(180deg)",
+                    color: effectiveThemeColor,
+                } },
+                React.createElement(ChevronDown, { className: "w-4 h-4" })),
+            React.createElement("span", { className: "text-sm font-medium", style: { color: effectiveThemeColor } }, "Preview")),
+        React.createElement("div", { className: "flex items-center gap-2" },
+            externalUrl && (React.createElement("a", { href: externalUrl, target: "_blank", rel: "noopener noreferrer", title: "Open in new tab", style: { color: effectiveThemeColor }, className: "p-1.5 rounded transition-colors hover:bg-zinc-800 dark:hover:bg-zinc-800" },
+                React.createElement(ExternalLink, { className: "w-4 h-4" }),
+                React.createElement("span", { className: "sr-only" }, "Open external link"))),
+            React.createElement("button", { onClick: onRefresh, className: "p-1.5 rounded transition-colors hover:bg-zinc-800 dark:hover:bg-zinc-800", title: "Refresh preview", style: { color: effectiveThemeColor } },
+                React.createElement(RefreshCw, { className: "w-4 h-4" })),
+            React.createElement("button", { onClick: () => setIsBrowserMaximized(!isBrowserMaximized), className: "p-1.5 rounded transition-colors hover:bg-zinc-800 dark:hover:bg-zinc-800", title: isBrowserMaximized ? "Exit fullscreen" : "Fullscreen preview", style: { color: effectiveThemeColor } }, isBrowserMaximized ? (React.createElement(Minimize2, { className: "w-4 h-4" })) : (React.createElement(Maximize2, { className: "w-4 h-4" }))))));
+}

package/dist/components/sandbox/guardian/right-view/right-panel-view.js

@@ -0,0 +1,38 @@
+"use client";
+import React from "react";
+import SlidingEditPreviewToggle from "../demo/left-view/toggle";
+import Browser from "../ide/browser";
+import CodeView from "./code-view";
+import { useGuardianContext } from "../context/guardian-context";
+import { Component as AiLoader } from "../ui/ai-loader";
+export default function RightPanelView({ reloadCounter, overlayStage, browserUrl, useVm, codeZipFile, }) {
+    const { setCurrentView, currentView } = useGuardianContext();
+    return (React.createElement("div", null,
+        React.createElement("div", { className: "flex justify-center border-b" },
+            React.createElement(SlidingEditPreviewToggle, { playgroundUid: "guardian", currentView: currentView, setCurrentView: (view) => setCurrentView(view), variant: "pill", buttonClassName: "text-sm px-4 py-1 h-auto", tabs: [
+                    { id: "editor", label: "Code" },
+                    { id: "preview", label: "Preview" },
+                ] })),
+        React.createElement("div", { style: {
+                display: currentView === "preview" ? "block" : "none",
+            } }, !browserUrl ? (React.createElement("div", { className: "h-[calc(100vh-12.2rem)] w-full relative overflow-hidden rounded-b-none" },
+            React.createElement(AiLoader, { text: "Booting up...", fullScreen: false }))) : (React.createElement(Browser, { previewUrl: browserUrl, setPreviewUrl: () => { }, containerEndpoint: browserUrl, outerContainerClassName: useVm
+                ? "h-[calc(100vh-9.6rem)] w-full border-none rounded-b-none"
+                : "h-[calc(100vh-12.2rem)] w-full border-none rounded-b-none", reloadSignal: reloadCounter, useVm: useVm }, overlayStage !== "hidden" && (React.createElement("div", { className: "absolute inset-0 z-20 flex items-center justify-center" },
+            overlayStage === "error" && (React.createElement("div", { className: "w-full h-full bg-red-950 text-red-200 flex items-center justify-center" },
+                React.createElement("div", { className: "text-center" },
+                    React.createElement("div", { className: "text-2xl font-semibold" }, "Service Unavailable"),
+                    React.createElement("div", { className: "text-sm mt-2 opacity-80" }, "Elevated error rates detected. Initiating rollback...")))),
+            overlayStage === "rebuilding" && (React.createElement("div", { className: "w-full h-full bg-amber-900 text-amber-100 flex items-center justify-center" },
+                React.createElement("div", { className: "text-center" },
+                    React.createElement("div", { className: "text-2xl font-semibold" }, "Rebuilding preview\u2026"),
+                    React.createElement("div", { className: "text-sm mt-2 opacity-80" }, "Applying safe configuration"),
+                    React.createElement("div", { className: "mt-4 inline-flex items-center gap-2" },
+                        React.createElement("span", { className: "h-2 w-2 rounded-full bg-amber-300 animate-pulse" }),
+                        React.createElement("span", { className: "h-2 w-2 rounded-full bg-amber-300 animate-pulse [animation-delay:150ms]" }),
+                        React.createElement("span", { className: "h-2 w-2 rounded-full bg-amber-300 animate-pulse [animation-delay:300ms]" })))))))))),
+        React.createElement("div", { style: {
+                display: currentView === "editor" ? "block" : "none",
+            } },
+            React.createElement(CodeView, { codeZipFile: codeZipFile }))));
+}