@sampleapp.ai/sdk 1.0.36 → 1.0.38

package/dist/components/sandbox/SandboxHome.js

@@ -1,141 +0,0 @@
-"use client";
-import React, { useState } from "react";
-// Default sandboxes array - will be replaced with API call in the future
-const DEFAULT_SANDBOXES = [
-    {
-        id: "1",
-        title: "Next.js AI Chatbot",
-        description: "A full-featured, hackable Next.js AI chatbot built by Vercel",
-        sandboxId: "nextjs-ai-chatbot",
-    },
-    {
-        id: "2",
-        title: "Hume AI - Empathic Voice Interface",
-        description: "This template creates a voice chat using Hume AI's Empathic Voice Interface.",
-        sandboxId: "hume-ai-voice",
-    },
-    {
-        id: "3",
-        title: "Lead Agent",
-        description: "An inbound lead qualification and research agent built with Next.js, AI SDK, Workflow...",
-        sandboxId: "lead-agent",
-    },
-    {
-        id: "4",
-        title: "Slack Agent Template",
-        description: "This is a Slack Agent template built with Bolt for JavaScript (TypeScript) and the Nitro server...",
-        sandboxId: "slack-agent",
-    },
-    {
-        id: "5",
-        title: "Customer Reviews AI Summary",
-        description: "Use a Large Language Model to summarize customer feedback.",
-        sandboxId: "customer-reviews-ai",
-    },
-    {
-        id: "6",
-        title: "Nuxt AI Chatbot",
-        description: "An AI chatbot template to build your own chatbot powered by Nuxt MDC and Vercel AI...",
-        sandboxId: "nuxt-ai-chatbot",
-    },
-    {
-        id: "7",
-        title: "Morphic: AI-powered answer engine",
-        description: "AI answer engine with Generative UI.",
-        sandboxId: "morphic-ai",
-    },
-    {
-        id: "8",
-        title: "Pinecone - Vercel AI SDK Starter",
-        description: "A Next.js starter chatbot using Vercel's AI SDK and implements the Retrieval-Augmented...",
-        sandboxId: "pinecone-ai-sdk",
-    },
-    {
-        id: "9",
-        title: "qrGPT - AI QR Code Generator",
-        description: "QrGPT is an AI tool for you to generate beautiful QR codes using AI with one click. Powered by...",
-        sandboxId: "qrgpt-ai",
-    },
-];
-// Generate a deterministic gradient based on the title
-function getGradientColors(title) {
-    // Defensive check - ensure we have a valid string
-    if (title === undefined || title === null || typeof title !== "string") {
-        return "from-slate-700 to-slate-900";
-    }
-    const safeTitle = String(title); // Convert to string as final safety
-    if (safeTitle.length === 0) {
-        return "from-slate-700 to-slate-900";
-    }
-    try {
-        const hash = safeTitle
-            .split("")
-            .reduce((acc, char) => char.charCodeAt(0) + acc, 0);
-        const gradients = [
-            "from-slate-700 to-slate-900",
-            "from-zinc-700 to-zinc-900",
-            "from-gray-700 to-gray-900",
-            "from-neutral-700 to-neutral-900",
-            "from-stone-700 to-stone-900",
-            "from-slate-600 to-slate-800",
-            "from-zinc-600 to-zinc-800",
-            "from-gray-600 to-gray-800",
-        ];
-        return gradients[Math.abs(hash) % gradients.length];
-    }
-    catch (e) {
-        return "from-slate-700 to-slate-900";
-    }
-}
-// Individual Sandbox Card Component
-function SandboxCard({ title, description, sandboxId, }) {
-    // Ensure title is always a string
-    const safeTitle = title || "";
-    const safeDescription = description || "";
-    const gradient = getGradientColors(safeTitle);
-    return (React.createElement("div", { className: "group relative block min-w-[240px] w-full h-[200px] border border-[#333] bg-[#0a0a0a] rounded-lg overflow-hidden transition-all duration-100 ease-out hover:border-[#444] focus-visible:outline-none" },
-        React.createElement("div", { className: "flex flex-col gap-1 px-6 py-5" },
-            React.createElement("div", { className: "flex items-center max-w-max pr-2.5" },
-                React.createElement("h3", { className: "text-[16px] font-medium m-0 w-max whitespace-nowrap overflow-hidden text-ellipsis flex-1 mr-0 text-white" }, safeTitle),
-                React.createElement("svg", { className: "rotate-[-45deg] translate-x-[-2px] opacity-0 transition-all duration-100 ease-out origin-center group-hover:opacity-100 group-hover:translate-x-[4px] ml-1", height: "16", strokeLinejoin: "round", style: { width: 12, height: 12, color: "currentColor" }, viewBox: "0 0 16 16", width: "16" },
-                    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.53033 2.21968L9 1.68935L7.93934 2.75001L8.46967 3.28034L12.4393 7.25001H1.75H1V8.75001H1.75H12.4393L8.46967 12.7197L7.93934 13.25L9 14.3107L9.53033 13.7803L14.6036 8.70711C14.9941 8.31659 14.9941 7.68342 14.6036 7.2929L9.53033 2.21968Z", fill: "currentColor" }))),
-            React.createElement("p", { className: "text-[14px] text-gray-400 m-0 line-clamp-2" }, safeDescription)),
-        React.createElement("div", { className: "absolute top-[110px] -right-10 w-[300px] h-[100px] rounded-lg border border-[#333] overflow-hidden shadow-lg transition-transform duration-100 ease-out rotate-[-5deg] group-hover:rotate-[-3deg] group-hover:-translate-y-1 group-hover:-translate-x-0.5" },
-            React.createElement("div", { className: `w-full h-full bg-gradient-to-br ${gradient} flex items-center justify-center` },
-                React.createElement("div", { className: "w-full px-6 space-y-2" },
-                    React.createElement("div", { className: "h-2 bg-white/20 rounded w-1/2 mx-auto" }),
-                    React.createElement("div", { className: "h-1.5 bg-white/10 rounded w-3/4 mx-auto" }),
-                    React.createElement("div", { className: "h-1.5 bg-white/10 rounded w-2/3 mx-auto" }))))));
-}
-/**
- * SandboxHome component - displays a grid of template cards for sandbox applications
- *
- * @example
- * ```tsx
- * <SandboxHome
- *   apiKey={process.env.NEXT_PUBLIC_SAMPLEAPP_API_KEY!}
- *   orgid="org-123"
- *   sandboxes={[
- *     {
- *       id: "1",
- *       title: "Next.js AI Chatbot",
- *       description: "A full-featured, hackable Next.js AI chatbot built by Vercel",
- *       sandboxId: "nextjs-ai-chatbot"
- *     }
- *   ]}
- * />
- * ```
- */
-export const SandboxHome = ({ apiKey, orgid, sandboxes, }) => {
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState(null);
-    // Use provided sandboxes or default array
-    // TODO: Replace DEFAULT_SANDBOXES with API call using apiKey and orgid
-    // const displaySandboxes = await fetchSandboxes(apiKey, orgid);
-    const displaySandboxes = sandboxes || DEFAULT_SANDBOXES;
-    return (React.createElement("div", { className: "min-h-screen bg-black" },
-        React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4" }, displaySandboxes && displaySandboxes.length > 0 ? (displaySandboxes
-            .filter((sandbox) => sandbox && sandbox.title && sandbox.description)
-            .map((sandbox) => (React.createElement(SandboxCard, { key: sandbox.id, title: sandbox.title || "", description: sandbox.description || "", sandboxId: sandbox.sandboxId })))) : (React.createElement("div", { className: "col-span-full text-center py-16" },
-            React.createElement("p", { className: "text-gray-500 text-lg" }, "No sandboxes available. Provide sandboxes prop to display cards."))))));
-};

package/dist/components/sandbox/guardian/guardian-demo.js

@@ -1,35 +0,0 @@
-"use client";
-import React, { useEffect, useState, useCallback } from "react";
-import ConsoleWithApp from "./ui/console-with-app";
-import { useGuardianContext } from "./context/guardian-context";
-import ConsoleWithGuide from "./demo/left-view";
-import RightView from "./right-view/right-view";
-export default function GuardianDemo({ CustomConsole, GuideView, browserUrl, playgroundUid, useVm, codeZipFile, completeCodeZipFile, variant, themeColor, hasPreview, isFrame = false, isGuardian = false, }) {
-    const { isBrowserMaximized } = useGuardianContext();
-    const { setCurrentView } = useGuardianContext();
-    const [reloadCounter, setReloadCounter] = useState(0);
-    const [overlayStage, setOverlayStage] = useState("hidden");
-    const handleReloadPreview = useCallback(() => {
-        setReloadCounter((c) => c + 1);
-    }, []);
-    const handleStageChange = useCallback((stage) => {
-        setOverlayStage(stage);
-        if (stage === "rebuilding") {
-            // Simulate a 3-second rebuild then hide
-            setTimeout(() => setOverlayStage("hidden"), 3000);
-        }
-    }, []);
-    useEffect(() => {
-        setCurrentView("preview");
-    }, [setCurrentView]);
-    // If isFrame, just return RightView directly
-    if (isFrame) {
-        return (React.createElement(RightView, { reloadCounter: reloadCounter, overlayStage: overlayStage, browserUrl: browserUrl, useVm: useVm, codeZipFile: codeZipFile, hasPreview: hasPreview, variant: variant, themeColor: themeColor, completeCodeZipFile: completeCodeZipFile, isGuardian: isGuardian }));
-    }
-    // If browser is maximized, render RightView at full size without the console
-    if (isBrowserMaximized && isGuardian) {
-        return (React.createElement("div", { className: "w-full h-full rounded-2xl border overflow-hidden" },
-            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 })));
-    }
-    return (React.createElement(ConsoleWithApp, { containerClassName: "rounded-2xl border", console: React.createElement(ConsoleWithGuide, { CustomConsole: CustomConsole, GuideView: GuideView, playgroundUid: playgroundUid, onReloadPreview: handleReloadPreview, onStageChange: handleStageChange, codeZipFile: codeZipFile, themeColor: themeColor }), app: React.createElement(RightView, { reloadCounter: reloadCounter, overlayStage: overlayStage, browserUrl: browserUrl, useVm: useVm, codeZipFile: codeZipFile, hasPreview: hasPreview, variant: variant, themeColor: themeColor, completeCodeZipFile: completeCodeZipFile, isGuardian: isGuardian }) }));
-}

package/dist/components/sandbox/guardian/guardian-home.d.ts

@@ -1,4 +0,0 @@
-import { GuardianNestedConfig } from "./types";
-export default function GuardianHome({ nestedConfig, }: {
-    nestedConfig: GuardianNestedConfig;
-}): import("react").JSX.Element;

package/dist/components/sandbox/guardian/guardian-home.js

@@ -1,61 +0,0 @@
-"use client";
-import Link from "next/link";
-import AppLayoutNoSidebar from "./app-layout-no-sidebar";
-import { useSandboxUrlLoader } from "./hooks/use-sandbox-url-loader";
-import { useEffect, useRef } from "react";
-export default function GuardianHome({ nestedConfig, }) {
-    var _a, _b, _c;
-    const { preloadSandboxUrls } = useSandboxUrlLoader();
-    const hasPreloadedRef = useRef(false);
-    // Preload all sandbox URLs when the home page loads (only once)
-    useEffect(() => {
-        // Prevent multiple preload attempts
-        if (hasPreloadedRef.current) {
-            return;
-        }
-        hasPreloadedRef.current = true;
-        // Extract all framework configs from nested structure
-        const configs = Object.values(nestedConfig).flatMap((uc) => Object.values(uc.frameworks).flatMap((fw) => {
-            // Include the main framework config
-            const mainConfig = {
-                sandboxUid: fw.sandboxUid,
-                browserUrl: fw.browserUrl,
-                useVm: fw.useVm,
-            };
-            // Include additional URLs from consoleUrlConfigs (urlsToPreload)
-            const additionalConfigs = fw.consoleUrlConfigs || [];
-            return [mainConfig, ...additionalConfigs];
-        }));
-        // Preload all URLs in the background
-        preloadSandboxUrls(configs).catch((error) => {
-            console.error("Failed to preload some sandbox URLs:", error);
-        });
-    }, [nestedConfig, preloadSandboxUrls]);
-    // Build unique use cases list with first framework for each
-    const uniqueUseCases = Object.entries(nestedConfig).map(([id, uc]) => {
-        const firstFramework = Object.keys(uc.frameworks)[0];
-        return {
-            id,
-            name: uc.name,
-            description: uc.description,
-            firstFramework,
-        };
-    });
-    // Get playground logo from the first framework of the first use case
-    const playgroundLogo = (_c = (_a = Object.values(nestedConfig)[0]) === null || _a === void 0 ? void 0 : _a.frameworks[Object.keys(((_b = Object.values(nestedConfig)[0]) === null || _b === void 0 ? void 0 : _b.frameworks) || {})[0]]) === null || _c === void 0 ? void 0 : _c.playgroundLogo;
-    return (React.createElement(AppLayoutNoSidebar, { header: React.createElement("div", { className: "flex items-center gap-3 ml-6" }, playgroundLogo) },
-        React.createElement("div", { className: "h-full flex flex-col" },
-            React.createElement("div", { className: "flex-1 px-6 py-6 space-y-8" },
-                React.createElement("div", { className: "space-y-3" },
-                    React.createElement("div", { className: "text-xs font-medium text-gray-400 tracking-wider uppercase" }, "Examples"),
-                    React.createElement("h1", { className: "text-2xl font-semibold text-gray-100" }, "Sample apps"),
-                    React.createElement("p", { className: "text-sm text-gray-400" }, "Select a sample app to explore and interact with")),
-                React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6" }, uniqueUseCases.map((useCase) => (React.createElement(Link, { href: `/${useCase.id}?framework=${useCase.firstFramework}`, key: useCase.id },
-                    React.createElement("div", { className: "bg-[#1a1b23] rounded-lg border border-gray-800 p-6 flex flex-col justify-between min-h-[180px] hover:border-gray-700 transition-colors cursor-pointer" },
-                        React.createElement("div", null,
-                            React.createElement("div", { className: "flex items-center gap-3 mb-2" },
-                                React.createElement("h2", { className: "font-semibold text-base text-gray-100" }, useCase.name)),
-                            React.createElement("div", { className: "text-gray-400 text-sm mb-6" }, useCase.description)),
-                        React.createElement("div", { className: "flex items-center gap-2" },
-                            React.createElement("span", { className: "text-xs text-gray-500" }, "View app \u2192")))))))))));
-}

package/dist/components/sandbox/guardian/guardian-upload-spec.d.ts

@@ -1,14 +0,0 @@
-import React from "react";
-type UploadedFile = {
-    name: string;
-    size: number;
-    type: string;
-    content?: string;
-};
-type GuardianUploadSpecProps = {
-    onBack: () => void;
-    onContinue: (file: UploadedFile) => void;
-    isLoading?: boolean;
-};
-export default function GuardianUploadSpec({ onBack, onContinue, isLoading, }: GuardianUploadSpecProps): React.JSX.Element;
-export {};

package/dist/components/sandbox/guardian/guardian-upload-spec.js

@@ -1,160 +0,0 @@
-"use client";
-import React from "react";
-"use client";
-import { useState, useCallback } from "react";
-import { Upload, FileText, X, Check, AlertCircle } from "lucide-react";
-import { cn } from "../../../lib/utils";
-export default function GuardianUploadSpec({ onBack, onContinue, isLoading = false, }) {
-    const [uploadedFile, setUploadedFile] = useState(null);
-    const [isDragging, setIsDragging] = useState(false);
-    const [error, setError] = useState(null);
-    const [isValidating, setIsValidating] = useState(false);
-    const validateFile = (file) => {
-        // Check file size (max 10MB)
-        if (file.size > 10 * 1024 * 1024) {
-            return "File size must be less than 10MB";
-        }
-        // Check file type
-        const validTypes = [
-            "application/json",
-            "application/x-yaml",
-            "application/yaml",
-            "text/yaml",
-            "text/x-yaml",
-            "text/plain",
-        ];
-        const validExtensions = [".json", ".yaml", ".yml"];
-        const hasValidType = validTypes.includes(file.type);
-        const hasValidExtension = validExtensions.some((ext) => file.name.toLowerCase().endsWith(ext));
-        if (!hasValidType && !hasValidExtension) {
-            return "Please upload a JSON or YAML file";
-        }
-        return null;
-    };
-    const handleFile = useCallback((file) => {
-        setError(null);
-        setIsValidating(true);
-        const validationError = validateFile(file);
-        if (validationError) {
-            setError(validationError);
-            setIsValidating(false);
-            return;
-        }
-        const reader = new FileReader();
-        reader.onload = (e) => {
-            var _a;
-            const content = (_a = e.target) === null || _a === void 0 ? void 0 : _a.result;
-            // Basic validation that it's valid JSON or YAML
-            try {
-                if (file.name.toLowerCase().endsWith(".json")) {
-                    JSON.parse(content);
-                }
-            }
-            catch (_b) {
-                setError("Invalid JSON file");
-                setIsValidating(false);
-                return;
-            }
-            setUploadedFile({
-                name: file.name,
-                size: file.size,
-                type: file.type,
-                content,
-            });
-            setIsValidating(false);
-        };
-        reader.onerror = () => {
-            setError("Failed to read file");
-            setIsValidating(false);
-        };
-        reader.readAsText(file);
-    }, []);
-    const handleDrop = useCallback((e) => {
-        e.preventDefault();
-        setIsDragging(false);
-        const files = Array.from(e.dataTransfer.files);
-        if (files.length > 0) {
-            handleFile(files[0]);
-        }
-    }, [handleFile]);
-    const handleDragOver = useCallback((e) => {
-        e.preventDefault();
-        setIsDragging(true);
-    }, []);
-    const handleDragLeave = useCallback((e) => {
-        e.preventDefault();
-        setIsDragging(false);
-    }, []);
-    const handleFileInput = useCallback((e) => {
-        const files = e.target.files;
-        if (files && files.length > 0) {
-            handleFile(files[0]);
-        }
-    }, [handleFile]);
-    const handleRemoveFile = () => {
-        setUploadedFile(null);
-        setError(null);
-    };
-    const formatFileSize = (bytes) => {
-        if (bytes < 1024)
-            return bytes + " B";
-        if (bytes < 1024 * 1024)
-            return (bytes / 1024).toFixed(1) + " KB";
-        return (bytes / (1024 * 1024)).toFixed(1) + " MB";
-    };
-    return (React.createElement("div", { className: "min-h-screen bg-white flex flex-col items-center justify-center p-8" },
-        React.createElement("div", { className: "w-full max-w-xl" },
-            React.createElement("div", { className: "mb-8" },
-                React.createElement("button", { type: "button", onClick: onBack, disabled: isLoading, className: "text-sm text-gray-500 hover:text-gray-700 font-medium mb-4 flex items-center gap-1 disabled:opacity-50 disabled:cursor-not-allowed" }, isLoading ? (React.createElement(React.Fragment, null,
-                    React.createElement("div", { className: "h-3 w-3 animate-spin rounded-full border-2 border-gray-300 border-t-gray-700" }),
-                    React.createElement("span", null, "Back"))) : (React.createElement(React.Fragment, null, "\u2190 Back"))),
-                React.createElement("h1", { className: "text-3xl font-semibold text-black mb-3" }, "Upload OpenAPI spec"),
-                React.createElement("p", { className: "text-sm text-gray-600" }, "Upload your OpenAPI specification file (JSON or YAML format) to generate sample apps.")),
-            !uploadedFile ? (React.createElement("div", { onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, className: cn("relative rounded-xl border-2 border-dashed transition-all", isDragging
-                    ? "border-blue-500 bg-blue-50"
-                    : "border-gray-200 bg-gray-50", error && "border-red-300 bg-red-50") },
-                React.createElement("label", { className: "flex flex-col items-center justify-center px-8 py-12 cursor-pointer" },
-                    React.createElement("input", { type: "file", className: "hidden", accept: ".json,.yaml,.yml", onChange: handleFileInput, disabled: isValidating }),
-                    isValidating ? (React.createElement(React.Fragment, null,
-                        React.createElement("div", { className: "h-12 w-12 mb-4 animate-spin rounded-full border-4 border-gray-200 border-t-blue-600" }),
-                        React.createElement("p", { className: "text-sm font-medium text-gray-900 mb-1" }, "Validating file..."))) : (React.createElement(React.Fragment, null,
-                        React.createElement("div", { className: cn("flex h-14 w-14 items-center justify-center rounded-full mb-4 transition-colors", isDragging ? "bg-blue-100" : "bg-white", error && "bg-red-100") }, error ? (React.createElement(AlertCircle, { className: "h-7 w-7 text-red-600" })) : (React.createElement(Upload, { className: cn("h-7 w-7", isDragging ? "text-blue-600" : "text-gray-400") }))),
-                        React.createElement("p", { className: "text-sm font-medium text-gray-900 mb-1" }, isDragging ? ("Drop your file here") : (React.createElement(React.Fragment, null,
-                            React.createElement("span", { className: "text-blue-600" }, "Click to upload"),
-                            " ",
-                            "or drag and drop"))),
-                        React.createElement("p", { className: "text-xs text-gray-500 mb-2" }, "JSON or YAML (max 10MB)"))),
-                    error && (React.createElement("div", { className: "mt-3 text-xs text-red-600 font-medium flex items-center gap-1.5" },
-                        React.createElement(AlertCircle, { className: "h-3.5 w-3.5" }),
-                        error))))) : (React.createElement("div", { className: "space-y-4" },
-                React.createElement("div", { className: "rounded-xl border border-gray-200 bg-white p-4 transition hover:bg-gray-50" },
-                    React.createElement("div", { className: "flex items-start justify-between gap-3" },
-                        React.createElement("div", { className: "flex items-start gap-3 flex-1" },
-                            React.createElement("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-green-50" },
-                                React.createElement(FileText, { className: "h-5 w-5 text-green-600" })),
-                            React.createElement("div", { className: "flex-1 min-w-0" },
-                                React.createElement("div", { className: "flex items-center gap-2 mb-1" },
-                                    React.createElement("p", { className: "text-sm font-medium text-gray-900 truncate" }, uploadedFile.name),
-                                    React.createElement("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-green-500 flex-shrink-0" },
-                                        React.createElement(Check, { className: "h-3 w-3 text-white" }))),
-                                React.createElement("p", { className: "text-xs text-gray-500" }, formatFileSize(uploadedFile.size)))),
-                        React.createElement("button", { type: "button", onClick: handleRemoveFile, className: "flex h-8 w-8 items-center justify-center rounded-full hover:bg-gray-100 transition-colors text-gray-400 hover:text-gray-600" },
-                            React.createElement(X, { className: "h-4 w-4" })))),
-                React.createElement("div", { className: "rounded-xl bg-blue-50 border border-blue-100 p-4" },
-                    React.createElement("p", { className: "text-xs text-blue-900 font-medium mb-2" }, "What happens next?"),
-                    React.createElement("ul", { className: "space-y-1.5 text-xs text-blue-800" },
-                        React.createElement("li", { className: "flex items-start gap-2" },
-                            React.createElement("span", null, "\u2022"),
-                            React.createElement("span", null, "We'll parse your OpenAPI spec and extract all endpoints")),
-                        React.createElement("li", { className: "flex items-start gap-2" },
-                            React.createElement("span", null, "\u2022"),
-                            React.createElement("span", null, "You'll choose frameworks for which to generate sample apps")),
-                        React.createElement("li", { className: "flex items-start gap-2" },
-                            React.createElement("span", null, "\u2022"),
-                            React.createElement("span", null, "Each app will be pre-configured with auth and example calls")))),
-                React.createElement("div", { className: "flex items-center justify-end gap-3 pt-2" },
-                    React.createElement("button", { type: "button", onClick: handleRemoveFile, disabled: isLoading, className: "rounded-full border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed" }, "Choose different file"),
-                    React.createElement("button", { type: "button", onClick: () => onContinue(uploadedFile), disabled: isLoading, className: "inline-flex items-center gap-2 rounded-full bg-[#2563EB] px-6 py-2.5 text-sm font-medium text-white hover:bg-[#1d4ed8] transition-colors disabled:opacity-50 disabled:cursor-not-allowed" }, isLoading ? (React.createElement(React.Fragment, null,
-                        React.createElement("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" }),
-                        React.createElement("span", null, "Processing..."))) : (React.createElement("span", null, "Continue")))))))));
-}

package/dist/components/sandbox/guardian/ui/theme-color-context.d.ts

@@ -1,6 +0,0 @@
-import { default as React } from 'react';
-export declare const ThemeColorProvider: React.FC<{
-    themeColor?: string;
-    children: React.ReactNode;
-}>;
-export declare const useThemeColor: () => string;

package/dist/components/sandbox/sandbox-control-bar.js

@@ -1,91 +0,0 @@
-import React from "react";
-import { ExternalLinkIcon, RefreshCwIcon, LoaderIcon } from "../icons";
-/**
- * Control bar for the sandbox with refresh and external link buttons.
- */
-export function SandboxControlBar({ src, themeColor, onRefresh, onOpenExternal, isLoading, }) {
-    return (React.createElement("div", { style: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            padding: "8px 12px",
-            borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
-            backgroundColor: "rgba(0, 0, 0, 0.3)",
-            backdropFilter: "blur(8px)",
-        } },
-        React.createElement("div", { style: {
-                display: "flex",
-                alignItems: "center",
-                gap: "8px",
-                flex: 1,
-                minWidth: 0,
-            } },
-            React.createElement("div", { style: {
-                    width: "8px",
-                    height: "8px",
-                    borderRadius: "50%",
-                    backgroundColor: isLoading ? "#f59e0b" : "#22c55e",
-                    flexShrink: 0,
-                } }),
-            React.createElement("span", { style: {
-                    fontSize: "12px",
-                    color: "rgba(255, 255, 255, 0.6)",
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    whiteSpace: "nowrap",
-                    fontFamily: "monospace",
-                } }, src)),
-        React.createElement("div", { style: {
-                display: "flex",
-                alignItems: "center",
-                gap: "4px",
-            } },
-            React.createElement("button", { onClick: onRefresh, disabled: isLoading, style: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    width: "28px",
-                    height: "28px",
-                    borderRadius: "6px",
-                    border: "none",
-                    backgroundColor: "transparent",
-                    color: "rgba(255, 255, 255, 0.7)",
-                    cursor: isLoading ? "not-allowed" : "pointer",
-                    opacity: isLoading ? 0.5 : 1,
-                    transition: "all 0.15s ease",
-                }, onMouseEnter: (e) => {
-                    if (!isLoading) {
-                        e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.1)";
-                        e.currentTarget.style.color = themeColor;
-                    }
-                }, onMouseLeave: (e) => {
-                    e.currentTarget.style.backgroundColor = "transparent";
-                    e.currentTarget.style.color = "rgba(255, 255, 255, 0.7)";
-                }, title: "Refresh" }, isLoading ? (React.createElement(LoaderIcon, { size: 14, style: { animation: "spin 1s linear infinite" } })) : (React.createElement(RefreshCwIcon, { size: 14 }))),
-            React.createElement("button", { onClick: onOpenExternal, style: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    width: "28px",
-                    height: "28px",
-                    borderRadius: "6px",
-                    border: "none",
-                    backgroundColor: "transparent",
-                    color: "rgba(255, 255, 255, 0.7)",
-                    cursor: "pointer",
-                    transition: "all 0.15s ease",
-                }, onMouseEnter: (e) => {
-                    e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.1)";
-                    e.currentTarget.style.color = themeColor;
-                }, onMouseLeave: (e) => {
-                    e.currentTarget.style.backgroundColor = "transparent";
-                    e.currentTarget.style.color = "rgba(255, 255, 255, 0.7)";
-                }, title: "Open in new tab" },
-                React.createElement(ExternalLinkIcon, { size: 14 }))),
-        React.createElement("style", null, `
-        @keyframes spin {
-          from { transform: rotate(0deg); }
-          to { transform: rotate(360deg); }
-        }
-      `)));
-}

package/dist/components/sandbox/sandbox-header.js

@@ -1,52 +0,0 @@
-import React from "react";
-/**
- * Header component for the Sandbox
- */
-export function SandboxHeader({ title, description, logo, themeColor, }) {
-    return (React.createElement("header", { style: {
-            display: "flex",
-            height: "64px",
-            alignItems: "center",
-            justifyContent: "space-between",
-            padding: "0 24px",
-            borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
-            backgroundColor: "rgba(0, 0, 0, 0.3)",
-            backdropFilter: "blur(8px)",
-            flexShrink: 0,
-        } },
-        React.createElement("div", { style: { display: "flex", alignItems: "center", gap: "12px" } }, logo),
-        title && (React.createElement("div", { style: { textAlign: "center" } },
-            React.createElement("h1", { style: {
-                    fontSize: "14px",
-                    fontWeight: 600,
-                    color: "rgba(255, 255, 255, 0.9)",
-                    margin: 0,
-                } }, title),
-            description && (React.createElement("p", { style: {
-                    fontSize: "12px",
-                    color: "rgba(255, 255, 255, 0.5)",
-                    margin: 0,
-                    marginTop: "2px",
-                } }, description)))),
-        React.createElement("div", { style: {
-                display: "flex",
-                alignItems: "center",
-                gap: "8px",
-                padding: "6px 12px",
-                borderRadius: "9999px",
-                border: `1px solid ${themeColor}30`,
-                backgroundColor: `${themeColor}10`,
-            } },
-            React.createElement("span", { style: {
-                    width: "8px",
-                    height: "8px",
-                    borderRadius: "50%",
-                    backgroundColor: themeColor,
-                    boxShadow: `0 0 0 3px ${themeColor}25`,
-                } }),
-            React.createElement("span", { style: {
-                    fontSize: "12px",
-                    fontWeight: 500,
-                    color: themeColor,
-                } }, "Sandbox"))));
-}