@sampleapp.ai/sdk 1.0.29 → 1.0.31

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

@@ -0,0 +1,248 @@
+"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

@@ -0,0 +1,48 @@
+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

@@ -0,0 +1,247 @@
+"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/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/sandbox.js

@@ -0,0 +1,32 @@
+"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/components/tailwind-example.js

@@ -0,0 +1,46 @@
+import React, { useState } from "react";
+/**
+ * Example component demonstrating Tailwind CSS with Shadow DOM isolation.
+ * All styling uses pure Tailwind CSS classes.
+ */
+export const TailwindExample = ({ title = "SDK Tailwind Component", description = "Fully isolated with Shadow DOM - host styles can't affect this!", }) => {
+    const [count, setCount] = useState(0);
+    const [isHovered, setIsHovered] = useState(false);
+    return (React.createElement("div", { className: "flex flex-col items-center p-4" },
+        React.createElement("div", { className: "relative rounded-[2.5rem] p-2 bg-gradient-to-br from-zinc-700 to-zinc-900 shadow-2xl shadow-black/50" },
+            React.createElement("div", { className: "rounded-[2rem] p-1 bg-black" },
+                React.createElement("div", { className: "rounded-[1.75rem] w-[280px] h-[560px] bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 overflow-hidden flex flex-col relative" },
+                    React.createElement("div", { className: "absolute top-0 left-1/2 -translate-x-1/2 w-32 h-6 bg-black rounded-b-xl z-10" }),
+                    React.createElement("div", { className: "pt-8 px-6 pb-2 flex justify-between items-center text-white text-xs font-semibold" },
+                        React.createElement("span", null, "9:41"),
+                        React.createElement("div", { className: "flex items-center gap-1" },
+                            React.createElement("div", { className: "w-4 h-2 border border-white rounded-sm relative" },
+                                React.createElement("div", { className: "absolute inset-0.5 bg-white rounded-sm" })),
+                            React.createElement("div", { className: "flex gap-0.5" }, [1, 2, 3, 4].map((i) => (React.createElement("div", { key: i, className: "w-0.5 h-2 bg-white rounded-full" })))))),
+                    React.createElement("div", { className: "flex-1 px-6 py-4 overflow-y-auto" },
+                        React.createElement("div", { className: "mb-6" },
+                            React.createElement("h2", { className: "text-2xl font-bold text-white mb-2" }, title),
+                            React.createElement("p", { className: "text-sm text-slate-400" }, description)),
+                        React.createElement("div", { className: "bg-white/10 backdrop-blur-sm rounded-2xl p-6 mb-6 border border-white/20" },
+                            React.createElement("div", { className: "flex flex-col items-center" },
+                                React.createElement("span", { className: "text-slate-400 text-sm font-medium mb-2" }, "Counter"),
+                                React.createElement("span", { className: "text-6xl font-bold text-white" }, count))),
+                        React.createElement("div", { className: "flex flex-col gap-3 mb-6" },
+                            React.createElement("button", { onClick: () => setCount((c) => c + 1), onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), className: "w-full px-6 py-4 bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white rounded-xl font-semibold text-lg transition-colors shadow-lg shadow-blue-500/30" }, "Increment"),
+                            React.createElement("button", { onClick: () => setCount(0), className: "w-full px-6 py-4 bg-white/10 hover:bg-white/20 active:bg-white/30 backdrop-blur-sm text-white rounded-xl font-semibold text-lg transition-colors border border-white/20" }, "Reset")),
+                        React.createElement("div", { className: "flex items-center justify-center gap-2 mb-6" },
+                            React.createElement("div", { className: `w-3 h-3 rounded-full transition-colors ${isHovered ? "bg-green-400" : "bg-slate-500"}` }),
+                            React.createElement("span", { className: "text-xs text-slate-400" }, isHovered ? "Button hovered" : "Idle")),
+                        React.createElement("div", { className: "bg-white/5 backdrop-blur-sm rounded-xl p-4 border border-white/10" },
+                            React.createElement("p", { className: "text-xs font-semibold text-slate-300 mb-3 uppercase tracking-wide" }, "Features"),
+                            React.createElement("ul", { className: "space-y-2" }, [
+                                "Tailwind utility classes",
+                                "CSS variable theming",
+                                "Hover/active states",
+                                "Shadow DOM isolation",
+                            ].map((feature, index) => (React.createElement("li", { key: index, className: "flex items-center gap-3 text-sm text-slate-300" },
+                                React.createElement("div", { className: "w-1.5 h-1.5 bg-blue-400 rounded-full" }),
+                                feature)))))),
+                    React.createElement("div", { className: "pb-2 flex justify-center" },
+                        React.createElement("div", { className: "w-32 h-1 bg-white/30 rounded-full" })))))));
+};

package/dist/components/ui/skeleton.js

@@ -0,0 +1,18 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { cn } from "@/lib/utils";
+function Skeleton(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement("div", Object.assign({ className: cn("animate-pulse rounded-md bg-zinc-100 dark:bg-zinc-900", className) }, props)));
+}
+export { Skeleton };