@sampleapp.ai/sdk 1.0.28 → 1.0.30

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" })))))));
+};