@sampleapp.ai/sdk 1.0.36 → 1.0.38

package/dist/components/sandbox/sandbox-left-panel.js

@@ -1,248 +0,0 @@
-"use client";
-import React, { useState, useCallback, useRef, useEffect } from "react";
-import { LoaderIcon, ArrowUpIcon } from "../icons";
-/**
- * Left panel with Guide and Ask AI tabs
- */
-export function SandboxLeftPanel({ mdx, GuideComponent, playgroundUid, themeColor, apiKey, apiBaseUrl = "https://api.sampleapp.ai", files, }) {
-    const [activeTab, setActiveTab] = useState("guide");
-    return (React.createElement("div", { style: {
-            display: "flex",
-            flexDirection: "column",
-            height: "100%",
-            backgroundColor: "#18181b",
-            borderRight: "1px solid rgba(255, 255, 255, 0.1)",
-        } },
-        React.createElement("div", { style: {
-                display: "flex",
-                justifyContent: "center",
-                padding: "12px 16px",
-                borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
-            } },
-            React.createElement("div", { style: {
-                    display: "flex",
-                    gap: "4px",
-                    padding: "4px",
-                    backgroundColor: "rgba(255, 255, 255, 0.05)",
-                    borderRadius: "8px",
-                } },
-                React.createElement(TabButton, { active: activeTab === "guide", onClick: () => setActiveTab("guide"), themeColor: themeColor }, "Guide"),
-                React.createElement(TabButton, { active: activeTab === "chat", onClick: () => setActiveTab("chat"), themeColor: themeColor }, "Ask AI"))),
-        React.createElement("div", { style: { flex: 1, overflow: "hidden", minHeight: 0 } },
-            activeTab === "guide" && (React.createElement(GuideTab, { mdx: mdx, GuideComponent: GuideComponent, themeColor: themeColor })),
-            activeTab === "chat" && (React.createElement(ChatTab, { playgroundUid: playgroundUid, themeColor: themeColor, apiKey: apiKey, apiBaseUrl: apiBaseUrl, files: files })))));
-}
-function TabButton({ children, active, onClick, themeColor, }) {
-    return (React.createElement("button", { onClick: onClick, style: {
-            padding: "8px 16px",
-            fontSize: "13px",
-            fontWeight: 500,
-            borderRadius: "6px",
-            border: "none",
-            cursor: "pointer",
-            transition: "all 0.15s ease",
-            backgroundColor: active ? themeColor : "transparent",
-            color: active ? "white" : "rgba(255, 255, 255, 0.6)",
-        } }, children));
-}
-function GuideTab({ mdx, GuideComponent, themeColor, }) {
-    if (GuideComponent) {
-        return (React.createElement("div", { style: { height: "100%", overflow: "auto", padding: "24px" } },
-            React.createElement(GuideComponent, null)));
-    }
-    if (mdx) {
-        return (React.createElement("div", { style: {
-                height: "100%",
-                overflow: "auto",
-                padding: "24px",
-            } },
-            React.createElement("div", { style: {
-                    fontSize: "14px",
-                    lineHeight: 1.7,
-                    color: "rgba(255, 255, 255, 0.8)",
-                }, dangerouslySetInnerHTML: { __html: mdx } })));
-    }
-    return (React.createElement("div", { style: {
-            height: "100%",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            padding: "24px",
-        } },
-        React.createElement("div", { style: { textAlign: "center" } },
-            React.createElement("p", { style: {
-                    fontSize: "14px",
-                    color: "rgba(255, 255, 255, 0.5)",
-                } }, "No guide content provided."),
-            React.createElement("p", { style: {
-                    fontSize: "12px",
-                    color: "rgba(255, 255, 255, 0.3)",
-                    marginTop: "8px",
-                } },
-                "Pass ",
-                React.createElement("code", { style: { color: themeColor } }, "mdx"),
-                " or",
-                " ",
-                React.createElement("code", { style: { color: themeColor } }, "GuideComponent"),
-                " prop to display content."))));
-}
-function ChatTab({ playgroundUid, themeColor, apiKey, apiBaseUrl, files, }) {
-    const [messages, setMessages] = useState([]);
-    const [input, setInput] = useState("");
-    const [isLoading, setIsLoading] = useState(false);
-    const messagesEndRef = useRef(null);
-    const textareaRef = useRef(null);
-    // Scroll to bottom when messages change
-    useEffect(() => {
-        var _a;
-        (_a = messagesEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
-    }, [messages]);
-    const handleSubmit = useCallback(async (e) => {
-        e.preventDefault();
-        if (!input.trim() || isLoading)
-            return;
-        const userMessage = input.trim();
-        setInput("");
-        setMessages((prev) => [...prev, { role: "user", content: userMessage }]);
-        setIsLoading(true);
-        try {
-            // Build context from files if available
-            const codeContext = files
-                ? files.map((f) => `--- ${f.path} ---\n${f.content}`).join("\n\n")
-                : "";
-            const response = await fetch(`${apiBaseUrl}/v1/chat`, {
-                method: "POST",
-                headers: Object.assign({ "Content-Type": "application/json" }, (apiKey && { Authorization: `Bearer ${apiKey}` })),
-                body: JSON.stringify({
-                    playgroundUid,
-                    messages: [
-                        ...messages,
-                        { role: "user", content: userMessage },
-                    ],
-                    context: codeContext,
-                }),
-            });
-            if (!response.ok) {
-                throw new Error(`API error: ${response.status}`);
-            }
-            const data = await response.json();
-            setMessages((prev) => [
-                ...prev,
-                { role: "assistant", content: data.message || data.content },
-            ]);
-        }
-        catch (error) {
-            console.error("Chat error:", error);
-            setMessages((prev) => [
-                ...prev,
-                {
-                    role: "assistant",
-                    content: "Sorry, I encountered an error. Please check your API key and try again.",
-                },
-            ]);
-        }
-        finally {
-            setIsLoading(false);
-        }
-    }, [input, isLoading, messages, playgroundUid, apiKey, apiBaseUrl, files]);
-    return (React.createElement("div", { style: {
-            height: "100%",
-            display: "flex",
-            flexDirection: "column",
-        } },
-        React.createElement("div", { style: {
-                flex: 1,
-                overflow: "auto",
-                padding: "16px",
-            } }, messages.length === 0 ? (React.createElement("div", { style: {
-                height: "100%",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-            } },
-            React.createElement("div", { style: { textAlign: "center", maxWidth: "280px" } },
-                React.createElement("div", { style: {
-                        width: "48px",
-                        height: "48px",
-                        borderRadius: "12px",
-                        backgroundColor: `${themeColor}20`,
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        margin: "0 auto 16px",
-                    } },
-                    React.createElement("span", { style: { fontSize: "24px" } }, "\uD83D\uDCAC")),
-                React.createElement("p", { style: {
-                        fontSize: "14px",
-                        fontWeight: 500,
-                        color: "rgba(255, 255, 255, 0.8)",
-                        marginBottom: "8px",
-                    } }, "Ask AI about this code"),
-                React.createElement("p", { style: {
-                        fontSize: "12px",
-                        color: "rgba(255, 255, 255, 0.4)",
-                    } }, "Get help understanding the code, debugging issues, or extending functionality.")))) : (React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "16px" } },
-            messages.map((msg, i) => (React.createElement("div", { key: i, style: {
-                    display: "flex",
-                    flexDirection: "column",
-                    alignItems: msg.role === "user" ? "flex-end" : "flex-start",
-                } },
-                React.createElement("div", { style: {
-                        maxWidth: "85%",
-                        padding: "12px 16px",
-                        borderRadius: "12px",
-                        backgroundColor: msg.role === "user" ? themeColor : "rgba(255, 255, 255, 0.1)",
-                        color: "rgba(255, 255, 255, 0.9)",
-                        fontSize: "13px",
-                        lineHeight: 1.5,
-                    } }, msg.content)))),
-            isLoading && (React.createElement("div", { style: { display: "flex", alignItems: "flex-start" } },
-                React.createElement("div", { style: {
-                        padding: "12px 16px",
-                        borderRadius: "12px",
-                        backgroundColor: "rgba(255, 255, 255, 0.1)",
-                    } },
-                    React.createElement(LoaderIcon, { size: 16, style: { color: themeColor } })))),
-            React.createElement("div", { ref: messagesEndRef })))),
-        React.createElement("div", { style: {
-                padding: "16px",
-                borderTop: "1px solid rgba(255, 255, 255, 0.1)",
-            } },
-            React.createElement("form", { onSubmit: handleSubmit },
-                React.createElement("div", { style: {
-                        display: "flex",
-                        gap: "8px",
-                        alignItems: "flex-end",
-                    } },
-                    React.createElement("textarea", { ref: textareaRef, value: input, onChange: (e) => setInput(e.target.value), onKeyDown: (e) => {
-                            if (e.key === "Enter" && !e.shiftKey) {
-                                e.preventDefault();
-                                handleSubmit(e);
-                            }
-                        }, placeholder: "Ask a question...", rows: 1, style: {
-                            flex: 1,
-                            padding: "12px",
-                            borderRadius: "8px",
-                            border: "1px solid rgba(255, 255, 255, 0.1)",
-                            backgroundColor: "rgba(255, 255, 255, 0.05)",
-                            color: "rgba(255, 255, 255, 0.9)",
-                            fontSize: "13px",
-                            resize: "none",
-                            outline: "none",
-                            fontFamily: "inherit",
-                        } }),
-                    React.createElement("button", { type: "submit", disabled: !input.trim() || isLoading, style: {
-                            width: "40px",
-                            height: "40px",
-                            borderRadius: "8px",
-                            border: "none",
-                            backgroundColor: input.trim() ? themeColor : "rgba(255, 255, 255, 0.1)",
-                            color: "white",
-                            cursor: input.trim() && !isLoading ? "pointer" : "not-allowed",
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            transition: "all 0.15s ease",
-                            opacity: isLoading ? 0.5 : 1,
-                        } }, isLoading ? (React.createElement(LoaderIcon, { size: 18 })) : (React.createElement(ArrowUpIcon, { size: 18 }))))))));
-}

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

@@ -1,48 +0,0 @@
-import React from "react";
-import { LoaderIcon } from "../icons";
-/**
- * Loading overlay for the sandbox iframe.
- */
-export function SandboxLoading({ themeColor }) {
-    return (React.createElement("div", { style: {
-            position: "absolute",
-            inset: 0,
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            justifyContent: "center",
-            backgroundColor: "rgba(0, 0, 0, 0.8)",
-            backdropFilter: "blur(4px)",
-            zIndex: 10,
-        } },
-        React.createElement("div", { style: {
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-                gap: "16px",
-            } },
-            React.createElement("div", { style: {
-                    width: "48px",
-                    height: "48px",
-                    borderRadius: "12px",
-                    backgroundColor: `${themeColor}20`,
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                } },
-                React.createElement(LoaderIcon, { size: 24, style: {
-                        color: themeColor,
-                        animation: "spin 1s linear infinite",
-                    } })),
-            React.createElement("span", { style: {
-                    fontSize: "14px",
-                    color: "rgba(255, 255, 255, 0.7)",
-                    fontWeight: 500,
-                } }, "Loading sandbox...")),
-        React.createElement("style", null, `
-        @keyframes spin {
-          from { transform: rotate(0deg); }
-          to { transform: rotate(360deg); }
-        }
-      `)));
-}

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

@@ -1,247 +0,0 @@
-"use client";
-import React, { useState, useCallback, useEffect } from "react";
-import { SandboxLoading } from "./sandbox-loading";
-import { RefreshCwIcon, ExternalLinkIcon, LoaderIcon } from "../icons";
-/**
- * Right panel with Preview and Code Editor
- */
-export function SandboxRightPanel({ previewUrl, files = [], defaultActiveFile, themeColor, showPreview, showCode, onLoad, onError, }) {
-    var _a;
-    const [isLoading, setIsLoading] = useState(true);
-    const [reloadKey, setReloadKey] = useState(0);
-    const [activeFile, setActiveFile] = useState(defaultActiveFile || ((_a = files[0]) === null || _a === void 0 ? void 0 : _a.path) || "");
-    const [previewHeight, setPreviewHeight] = useState(60); // percentage
-    const [isDragging, setIsDragging] = useState(false);
-    const handleRefresh = useCallback(() => {
-        setIsLoading(true);
-        setReloadKey((k) => k + 1);
-    }, []);
-    const handleOpenExternal = useCallback(() => {
-        if (previewUrl) {
-            window.open(previewUrl, "_blank", "noopener,noreferrer");
-        }
-    }, [previewUrl]);
-    const handleIframeLoad = useCallback(() => {
-        setIsLoading(false);
-        onLoad === null || onLoad === void 0 ? void 0 : onLoad();
-    }, [onLoad]);
-    const handleIframeError = useCallback(() => {
-        setIsLoading(false);
-        onError === null || onError === void 0 ? void 0 : onError(new Error(`Failed to load: ${previewUrl}`));
-    }, [onError, previewUrl]);
-    // Reset loading when URL changes
-    useEffect(() => {
-        if (previewUrl) {
-            setIsLoading(true);
-        }
-    }, [previewUrl, reloadKey]);
-    // Handle resize drag
-    const handleMouseDown = useCallback(() => {
-        setIsDragging(true);
-    }, []);
-    useEffect(() => {
-        if (!isDragging)
-            return;
-        const handleMouseMove = (e) => {
-            const container = document.getElementById("sandbox-right-panel");
-            if (!container)
-                return;
-            const rect = container.getBoundingClientRect();
-            const percentage = ((e.clientY - rect.top) / rect.height) * 100;
-            setPreviewHeight(Math.min(80, Math.max(20, percentage)));
-        };
-        const handleMouseUp = () => {
-            setIsDragging(false);
-        };
-        document.addEventListener("mousemove", handleMouseMove);
-        document.addEventListener("mouseup", handleMouseUp);
-        return () => {
-            document.removeEventListener("mousemove", handleMouseMove);
-            document.removeEventListener("mouseup", handleMouseUp);
-        };
-    }, [isDragging]);
-    const activeFileContent = files.find((f) => f.path === activeFile);
-    // If only showing preview
-    if (showPreview && !showCode) {
-        return (React.createElement("div", { style: { height: "100%", display: "flex", flexDirection: "column" } },
-            React.createElement(PreviewControlBar, { previewUrl: previewUrl, themeColor: themeColor, isLoading: isLoading, onRefresh: handleRefresh, onOpenExternal: handleOpenExternal }),
-            React.createElement("div", { style: { flex: 1, position: "relative" } },
-                isLoading && React.createElement(SandboxLoading, { themeColor: themeColor }),
-                previewUrl ? (React.createElement("iframe", { key: reloadKey, src: previewUrl, onLoad: handleIframeLoad, onError: handleIframeError, sandbox: "allow-scripts allow-same-origin allow-forms allow-popups allow-modals", allow: "clipboard-read; clipboard-write", style: {
-                        width: "100%",
-                        height: "100%",
-                        border: "none",
-                        backgroundColor: "#000",
-                    }, title: "Preview" })) : (React.createElement("div", { style: {
-                        height: "100%",
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        backgroundColor: "#000",
-                    } },
-                    React.createElement("p", { style: { color: "rgba(255, 255, 255, 0.5)", fontSize: "14px" } }, "No preview URL provided"))))));
-    }
-    // If only showing code
-    if (showCode && !showPreview) {
-        return (React.createElement("div", { style: { height: "100%", display: "flex", flexDirection: "column" } },
-            React.createElement(CodePanel, { files: files, activeFile: activeFile, setActiveFile: setActiveFile, themeColor: themeColor, content: (activeFileContent === null || activeFileContent === void 0 ? void 0 : activeFileContent.content) || "", language: activeFileContent === null || activeFileContent === void 0 ? void 0 : activeFileContent.language })));
-    }
-    // Show both preview and code (default)
-    return (React.createElement("div", { id: "sandbox-right-panel", style: {
-            height: "100%",
-            display: "flex",
-            flexDirection: "column",
-            position: "relative",
-        } },
-        React.createElement("div", { style: { height: `${previewHeight}%`, display: "flex", flexDirection: "column" } },
-            React.createElement(PreviewControlBar, { previewUrl: previewUrl, themeColor: themeColor, isLoading: isLoading, onRefresh: handleRefresh, onOpenExternal: handleOpenExternal }),
-            React.createElement("div", { style: { flex: 1, position: "relative", minHeight: 0 } },
-                isLoading && React.createElement(SandboxLoading, { themeColor: themeColor }),
-                previewUrl ? (React.createElement("iframe", { key: reloadKey, src: previewUrl, onLoad: handleIframeLoad, onError: handleIframeError, sandbox: "allow-scripts allow-same-origin allow-forms allow-popups allow-modals", allow: "clipboard-read; clipboard-write", style: {
-                        width: "100%",
-                        height: "100%",
-                        border: "none",
-                        backgroundColor: "#000",
-                    }, title: "Preview" })) : (React.createElement("div", { style: {
-                        height: "100%",
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        backgroundColor: "#000",
-                    } },
-                    React.createElement(LoaderIcon, { size: 24, style: { color: themeColor } }))))),
-        React.createElement("div", { onMouseDown: handleMouseDown, style: {
-                height: "8px",
-                cursor: "row-resize",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                backgroundColor: isDragging ? `${themeColor}30` : "transparent",
-                transition: "background-color 0.15s",
-                flexShrink: 0,
-            } },
-            React.createElement("div", { style: {
-                    width: "40px",
-                    height: "4px",
-                    borderRadius: "2px",
-                    backgroundColor: isDragging
-                        ? themeColor
-                        : "rgba(255, 255, 255, 0.2)",
-                    transition: "background-color 0.15s",
-                } })),
-        React.createElement("div", { style: { flex: 1, minHeight: 0 } },
-            React.createElement(CodePanel, { files: files, activeFile: activeFile, setActiveFile: setActiveFile, themeColor: themeColor, content: (activeFileContent === null || activeFileContent === void 0 ? void 0 : activeFileContent.content) || "", language: activeFileContent === null || activeFileContent === void 0 ? void 0 : activeFileContent.language }))));
-}
-function PreviewControlBar({ previewUrl, themeColor, isLoading, onRefresh, onOpenExternal, }) {
-    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)",
-            flexShrink: 0,
-        } },
-        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",
-                } }, previewUrl || "Loading...")),
-        React.createElement("div", { style: { display: "flex", alignItems: "center", gap: "4px" } },
-            React.createElement(IconButton, { onClick: onRefresh, disabled: isLoading, themeColor: themeColor, title: "Refresh" }, isLoading ? (React.createElement(LoaderIcon, { size: 14 })) : (React.createElement(RefreshCwIcon, { size: 14 }))),
-            React.createElement(IconButton, { onClick: onOpenExternal, themeColor: themeColor, title: "Open in new tab" },
-                React.createElement(ExternalLinkIcon, { size: 14 })))));
-}
-function IconButton({ children, onClick, disabled, themeColor, title, }) {
-    const [isHovered, setIsHovered] = useState(false);
-    return (React.createElement("button", { onClick: onClick, disabled: disabled, title: title, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), style: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            width: "28px",
-            height: "28px",
-            borderRadius: "6px",
-            border: "none",
-            backgroundColor: isHovered ? "rgba(255, 255, 255, 0.1)" : "transparent",
-            color: isHovered ? themeColor : "rgba(255, 255, 255, 0.7)",
-            cursor: disabled ? "not-allowed" : "pointer",
-            opacity: disabled ? 0.5 : 1,
-            transition: "all 0.15s ease",
-        } }, children));
-}
-function CodePanel({ files, activeFile, setActiveFile, themeColor, content, language, }) {
-    return (React.createElement("div", { style: {
-            height: "100%",
-            display: "flex",
-            flexDirection: "column",
-            backgroundColor: "#0d0d0d",
-        } },
-        files.length > 0 && (React.createElement("div", { style: {
-                display: "flex",
-                alignItems: "center",
-                gap: "4px",
-                padding: "8px 12px",
-                borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
-                backgroundColor: "#18181b",
-                overflowX: "auto",
-                flexShrink: 0,
-            } }, files.map((file) => (React.createElement("button", { key: file.path, onClick: () => setActiveFile(file.path), style: {
-                padding: "6px 12px",
-                fontSize: "12px",
-                fontFamily: "monospace",
-                borderRadius: "4px",
-                border: "none",
-                cursor: "pointer",
-                whiteSpace: "nowrap",
-                transition: "all 0.15s ease",
-                backgroundColor: activeFile === file.path
-                    ? `${themeColor}20`
-                    : "transparent",
-                color: activeFile === file.path
-                    ? themeColor
-                    : "rgba(255, 255, 255, 0.6)",
-            } }, file.path.split("/").pop()))))),
-        React.createElement("div", { style: {
-                flex: 1,
-                overflow: "auto",
-                minHeight: 0,
-            } }, content ? (React.createElement("pre", { style: {
-                margin: 0,
-                padding: "16px",
-                fontSize: "13px",
-                fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
-                lineHeight: 1.6,
-                color: "rgba(255, 255, 255, 0.85)",
-                whiteSpace: "pre-wrap",
-                wordBreak: "break-word",
-            } },
-            React.createElement("code", null, content))) : (React.createElement("div", { style: {
-                height: "100%",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-            } },
-            React.createElement("p", { style: {
-                    fontSize: "13px",
-                    color: "rgba(255, 255, 255, 0.4)",
-                } }, files.length === 0
-                ? "No files provided"
-                : "Select a file to view"))))));
-}

package/dist/components/sandbox.js

@@ -1,32 +0,0 @@
-"use client";
-import React from "react";
-/**
- * Sandbox component for displaying code files
- */
-export const Sandbox = ({ files, defaultFile, height = "400px", theme = "dark", }) => {
-    var _a;
-    const [activeFile, setActiveFile] = React.useState(defaultFile || ((_a = files[0]) === null || _a === void 0 ? void 0 : _a.name));
-    const currentFile = files.find((f) => f.name === activeFile) || files[0];
-    return (React.createElement("div", { className: "rounded-lg border overflow-hidden", style: {
-            height: typeof height === "number" ? `${height}px` : height,
-            backgroundColor: theme === "dark" ? "#1e1e1e" : "#ffffff",
-        } },
-        React.createElement("div", { className: "flex border-b", style: {
-                backgroundColor: theme === "dark" ? "#252526" : "#f3f3f3",
-            } }, files.map((file) => (React.createElement("button", { key: file.name, onClick: () => setActiveFile(file.name), className: "px-4 py-2 text-sm", style: {
-                backgroundColor: activeFile === file.name
-                    ? theme === "dark"
-                        ? "#1e1e1e"
-                        : "#ffffff"
-                    : "transparent",
-                color: theme === "dark" ? "#cccccc" : "#333333",
-                borderRight: `1px solid ${theme === "dark" ? "#3c3c3c" : "#e0e0e0"}`,
-            } }, file.name)))),
-        React.createElement("pre", { className: "p-4 overflow-auto h-full", style: {
-                color: theme === "dark" ? "#d4d4d4" : "#333333",
-                fontSize: "14px",
-                fontFamily: "monospace",
-                margin: 0,
-            } },
-            React.createElement("code", null, currentFile === null || currentFile === void 0 ? void 0 : currentFile.content))));
-};

package/dist/lib/api-client.example.js

@@ -1,60 +0,0 @@
-/**
- * Example usage of the API client
- *
- * This file demonstrates how to use the API client to interact with
- * the SampleApp backend API.
- *
- * The apiKey will be passed in from SandboxProps.apiKey (from types.ts)
- */
-import { createApiClient } from "./api-client";
-// Example: How to use the API client with apiKey from SandboxProps
-function createClientFromSandboxProps(props, baseUrl = "http://127.0.0.1:8000") {
-    return createApiClient({
-        baseUrl,
-        apiKey: props.apiKey, // apiKey comes from SandboxProps
-    });
-}
-// Initialize the API client (example)
-const client = createApiClient({
-    baseUrl: "http://127.0.0.1:8000", // or your production URL
-    apiKey: "your-api-key-here", // This will come from SandboxProps.apiKey
-});
-// Example 1: Get public sandbox content
-// Note: sandboxId from SandboxProps maps to sandbox_content_uid
-async function getSandboxContentExample(apiKey, sandboxId, baseUrl = "http://127.0.0.1:8000") {
-    try {
-        const client = createApiClient({
-            baseUrl,
-            apiKey, // apiKey from SandboxProps.apiKey
-        });
-        // sandboxId from SandboxProps maps to sandbox_content_uid
-        const sandboxContent = await client.sandboxContent.getPublic(sandboxId);
-        console.log("Sandbox content:", sandboxContent);
-        return sandboxContent;
-    }
-    catch (error) {
-        console.error("Error fetching sandbox content:", error);
-        throw error;
-    }
-}
-// Example 2: Start a sandbox
-async function startSandboxExample() {
-    try {
-        const response = await client.sdk.startSandbox({
-            env: {
-                API_KEY: "your-api-key",
-                ENVIRONMENT: "production",
-            },
-            apiKey: "your-sdk-api-key",
-            chatUid: "your-chat-uid",
-        });
-        console.log("Container URL:", response.container_url);
-        return response;
-    }
-    catch (error) {
-        console.error("Error starting sandbox:", error);
-        throw error;
-    }
-}
-// Export examples for use in other files
-export { getSandboxContentExample, startSandboxExample, createClientFromSandboxProps, };

package/dist/lib/ssr-safe-decode-entity.js

@@ -1,16 +0,0 @@
-/**
- * SSR-safe replacement for parse-entities/decode-entity.browser.js
- *
- * The original package uses document.createElement("i") to decode HTML entities,
- * which breaks SSR. This replacement uses a pure JS implementation.
- */
-// Import the SSR-safe decode function
-import { decodeNamedCharacterReference } from "./ssr-safe-decode-named-character-reference";
-/**
- * Decode an HTML entity.
- * @param characters - The entity name (without & and ;)
- * @returns The decoded character, or false if not found
- */
-export default function decodeEntity(characters) {
-    return decodeNamedCharacterReference(characters);
-}