@sampleapp.ai/sdk 1.0.29 → 1.0.31

package/dist/components/sandbox/guardian/zip-to-filetree.js

@@ -0,0 +1,284 @@
+import JSZip from "jszip";
+import { CodeLanguage, filePathToCodeLanguage, } from "./types/ide-types";
+/**
+ * Converts a zip file to a FileTreeNode structure
+ * @param zipData - The zip file as Blob, File, ArrayBuffer, or Uint8Array
+ * @returns Promise<FileTreeNode> - The root node of the file tree
+ */
+export async function zipToFileTree(zipData) {
+    try {
+        const zip = await JSZip.loadAsync(zipData);
+        // Create root node
+        const root = {
+            name: "root",
+            children: {},
+            type: "folder",
+            metadata: {
+                response_type: "CodeOutput",
+                file_path: "",
+                code_file_name: "",
+                code_language: CodeLanguage.TEXT,
+                dependencies_to_install: [],
+                framework: null,
+                full_code: "",
+            },
+        };
+        // Process all files in the zip
+        const filePromises = [];
+        for (const relativePath in zip.files) {
+            const file = zip.files[relativePath];
+            // Skip directories (they're handled by the path structure)
+            if (file.dir) {
+                continue;
+            }
+            // Get file content as text
+            const contentPromise = file
+                .async("string")
+                .then((content) => {
+                // Build the tree structure from the path
+                const pathParts = relativePath.split("/").filter(Boolean);
+                let currentNode = root;
+                // Navigate/create folder structure
+                for (let i = 0; i < pathParts.length - 1; i++) {
+                    const part = pathParts[i];
+                    if (!currentNode.children[part]) {
+                        currentNode.children[part] = {
+                            name: part,
+                            children: {},
+                            type: "folder",
+                            metadata: {
+                                response_type: "CodeOutput",
+                                file_path: pathParts.slice(0, i + 1).join("/"),
+                                code_file_name: part,
+                                code_language: CodeLanguage.TEXT,
+                                dependencies_to_install: [],
+                                framework: null,
+                                full_code: "",
+                            },
+                        };
+                    }
+                    currentNode = currentNode.children[part];
+                }
+                // Add the file
+                const fileName = pathParts[pathParts.length - 1];
+                const filePath = relativePath;
+                const codeLanguage = filePathToCodeLanguage(filePath);
+                currentNode.children[fileName] = {
+                    name: fileName,
+                    children: {},
+                    type: "file",
+                    metadata: {
+                        response_type: "CodeOutput",
+                        file_path: filePath,
+                        code_file_name: fileName,
+                        code_language: codeLanguage,
+                        dependencies_to_install: [],
+                        framework: null,
+                        full_code: content,
+                    },
+                };
+            })
+                .catch((error) => {
+                // If file can't be read as text, skip it or handle binary files
+                console.warn(`Could not read file ${relativePath} as text:`, error);
+            });
+            filePromises.push(contentPromise);
+        }
+        // Wait for all files to be processed
+        await Promise.all(filePromises);
+        return root;
+    }
+    catch (error) {
+        console.error("Error parsing zip file:", error);
+        throw new Error(`Failed to parse zip file: ${error instanceof Error ? error.message : String(error)}`);
+    }
+}
+/**
+ * Reads a zip file from a path and converts it to a FileTreeNode structure
+ * @param filePath - The path to the zip file (e.g., "/public/code/guardian/launchdarkly-guardian/code-1.zip" or "/code/guardian/launchdarkly-guardian/code-1.zip")
+ * @returns Promise<FileTreeNode> - The root node of the file tree
+ */
+export async function zipPathToFileTree(filePath) {
+    try {
+        // Normalize the path - remove /public prefix if present (Next.js serves public folder from root)
+        let normalizedPath = filePath;
+        if (normalizedPath.startsWith("/public/")) {
+            normalizedPath = normalizedPath.slice("/public".length);
+        }
+        // Ensure path starts with /
+        if (!normalizedPath.startsWith("/")) {
+            normalizedPath = "/" + normalizedPath;
+        }
+        // Build the URL - handle both client-side (relative) and server-side (absolute) cases
+        let url;
+        if (typeof window !== "undefined") {
+            // Client-side: use relative URL
+            url = normalizedPath;
+        }
+        else {
+            // Server-side: need absolute URL
+            // Try to get base URL from environment or use a default
+            const baseUrl = process.env.NEXT_PUBLIC_BASE_URL ||
+                process.env.VERCEL_URL ||
+                "http://localhost:3000";
+            url = `${baseUrl}${normalizedPath}`;
+        }
+        // Fetch the file from the public folder
+        const response = await fetch(url);
+        if (!response.ok) {
+            throw new Error(`Failed to fetch zip file from ${url}: ${response.status} ${response.statusText}`);
+        }
+        // Get the file as a blob
+        const blob = await response.blob();
+        // Convert to FileTreeNode using zipToFileTree
+        return await zipToFileTree(blob);
+    }
+    catch (error) {
+        console.error(`Error reading zip file from path ${filePath}:`, error);
+        throw new Error(`Failed to read zip file from path: ${error instanceof Error ? error.message : String(error)}`);
+    }
+}
+/**
+ * Reads a zip file from a path and converts it to a FileTreeNode structure with binary file support
+ * Binary files will have their content as base64 encoded strings
+ * @param filePath - The path to the zip file (e.g., "/public/code/guardian/launchdarkly-guardian/code-1.zip" or "/code/guardian/launchdarkly-guardian/code-1.zip")
+ * @returns Promise<FileTreeNode> - The root node of the file tree
+ */
+export async function zipPathToFileTreeWithBinary(filePath) {
+    try {
+        // Normalize the path - remove /public prefix if present (Next.js serves public folder from root)
+        let normalizedPath = filePath;
+        if (normalizedPath.startsWith("/public/")) {
+            normalizedPath = normalizedPath.slice("/public".length);
+        }
+        // Ensure path starts with /
+        if (!normalizedPath.startsWith("/")) {
+            normalizedPath = "/" + normalizedPath;
+        }
+        // Build the URL - handle both client-side (relative) and server-side (absolute) cases
+        let url;
+        if (typeof window !== "undefined") {
+            // Client-side: use relative URL
+            url = normalizedPath;
+        }
+        else {
+            // Server-side: need absolute URL
+            // Try to get base URL from environment or use a default
+            const baseUrl = process.env.NEXT_PUBLIC_BASE_URL ||
+                process.env.VERCEL_URL ||
+                "http://localhost:3000";
+            url = `${baseUrl}${normalizedPath}`;
+        }
+        // Fetch the file from the public folder
+        const response = await fetch(url);
+        if (!response.ok) {
+            throw new Error(`Failed to fetch zip file from ${url}: ${response.status} ${response.statusText}`);
+        }
+        // Get the file as a blob
+        const blob = await response.blob();
+        // Convert to FileTreeNode using zipToFileTreeWithBinary
+        return await zipToFileTreeWithBinary(blob);
+    }
+    catch (error) {
+        console.error(`Error reading zip file from path ${filePath}:`, error);
+        throw new Error(`Failed to read zip file from path: ${error instanceof Error ? error.message : String(error)}`);
+    }
+}
+/**
+ * Converts a zip file to a FileTreeNode structure with binary file support
+ * Binary files will have their content as base64 encoded strings
+ * @param zipData - The zip file as Blob, File, ArrayBuffer, or Uint8Array
+ * @returns Promise<FileTreeNode> - The root node of the file tree
+ */
+export async function zipToFileTreeWithBinary(zipData) {
+    try {
+        const zip = await JSZip.loadAsync(zipData);
+        // Create root node
+        const root = {
+            name: "root",
+            children: {},
+            type: "folder",
+            metadata: {
+                response_type: "CodeOutput",
+                file_path: "",
+                code_file_name: "",
+                code_language: CodeLanguage.TEXT,
+                dependencies_to_install: [],
+                framework: null,
+                full_code: "",
+            },
+        };
+        // Process all files in the zip
+        const filePromises = [];
+        for (const relativePath in zip.files) {
+            const file = zip.files[relativePath];
+            // Skip directories (they're handled by the path structure)
+            if (file.dir) {
+                continue;
+            }
+            // Try to read as text first, fallback to base64 for binary files
+            const contentPromise = (async () => {
+                let content;
+                try {
+                    // Try reading as text
+                    content = await file.async("string");
+                }
+                catch (_a) {
+                    // If that fails, read as base64
+                    const binary = await file.async("base64");
+                    content = binary;
+                }
+                // Build the tree structure from the path
+                const pathParts = relativePath.split("/").filter(Boolean);
+                let currentNode = root;
+                // Navigate/create folder structure
+                for (let i = 0; i < pathParts.length - 1; i++) {
+                    const part = pathParts[i];
+                    if (!currentNode.children[part]) {
+                        currentNode.children[part] = {
+                            name: part,
+                            children: {},
+                            type: "folder",
+                            metadata: {
+                                response_type: "CodeOutput",
+                                file_path: pathParts.slice(0, i + 1).join("/"),
+                                code_file_name: part,
+                                code_language: CodeLanguage.TEXT,
+                                dependencies_to_install: [],
+                                framework: null,
+                                full_code: "",
+                            },
+                        };
+                    }
+                    currentNode = currentNode.children[part];
+                }
+                // Add the file
+                const fileName = pathParts[pathParts.length - 1];
+                const filePath = relativePath;
+                const codeLanguage = filePathToCodeLanguage(filePath);
+                currentNode.children[fileName] = {
+                    name: fileName,
+                    children: {},
+                    type: "file",
+                    metadata: {
+                        response_type: "CodeOutput",
+                        file_path: filePath,
+                        code_file_name: fileName,
+                        code_language: codeLanguage,
+                        dependencies_to_install: [],
+                        framework: null,
+                        full_code: content,
+                    },
+                };
+            })();
+            filePromises.push(contentPromise);
+        }
+        // Wait for all files to be processed
+        await Promise.all(filePromises);
+        return root;
+    }
+    catch (error) {
+        console.error("Error parsing zip file:", error);
+        throw new Error(`Failed to parse zip file: ${error instanceof Error ? error.message : String(error)}`);
+    }
+}

package/dist/components/sandbox/index.js

@@ -0,0 +1,4 @@
+export { default as Sandbox } from "./Sandbox";
+export { SandboxHome, SandboxCard } from "./sandbox-home";
+// Re-export guardian components for advanced usage
+export { GuardianPlayground, GuardianComponent, GuardianProvider, VmProvider, buildGuardianConfig, createSandboxUrlConfigs, } from "./guardian";

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

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

@@ -0,0 +1,52 @@
+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"))));
+}

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

@@ -0,0 +1,65 @@
+"use client";
+import React from "react";
+// 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";
+    }
+}
+/**
+ * SandboxCard component - displays an individual template card
+ */
+export const SandboxCard = ({ title, description, sandboxId, basePath = "/sandbox", imageUrl, }) => {
+    // Ensure title is always a string
+    const safeTitle = title || "";
+    const safeDescription = description || "";
+    const gradient = getGradientColors(safeTitle);
+    const handleClick = () => {
+        if (sandboxId) {
+            // Ensure basePath starts with / and doesn't end with /
+            const normalizedBasePath = basePath.startsWith("/")
+                ? basePath
+                : `/${basePath}`;
+            const cleanBasePath = normalizedBasePath.endsWith("/")
+                ? normalizedBasePath.slice(0, -1)
+                : normalizedBasePath;
+            window.location.href = `${cleanBasePath}/${sandboxId}`;
+        }
+    };
+    return (React.createElement("div", { onClick: handleClick, 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 cursor-pointer" },
+        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" }, imageUrl ? (React.createElement("img", { src: imageUrl, alt: safeTitle, className: "w-full h-full object-cover", style: { transform: "rotate(0deg)" } })) : (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" })))))));
+};

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

@@ -0,0 +1,115 @@
+"use client";
+import React, { useState, useMemo, useEffect } from "react";
+import { SandboxCard } from "./SandboxCard";
+import { SearchBar } from "./SearchBar";
+import { createApiClient } from "../../../lib/api-client";
+import { Skeleton } from "../../ui/skeleton";
+/**
+ * Transform SandboxContentPublic to SandboxItem
+ */
+function transformSandboxContent(content) {
+    // Extract title from markdown (first heading) or use uid as fallback
+    let title = content.uid;
+    let description = "No description available";
+    if (content.markdown) {
+        // Try to extract title from markdown (first # heading or first line)
+        const lines = content.markdown.split("\n");
+        const titleMatch = lines.find((line) => line.trim().startsWith("#"));
+        if (titleMatch) {
+            title = titleMatch.replace(/^#+\s*/, "").trim();
+        }
+        else if (lines[0]) {
+            title = lines[0].trim();
+        }
+        // Extract description (first paragraph or first few lines after title)
+        const descriptionLines = lines
+            .slice(titleMatch ? lines.indexOf(titleMatch) + 1 : 1)
+            .filter((line) => line.trim() && !line.trim().startsWith("#"))
+            .slice(0, 3);
+        if (descriptionLines.length > 0) {
+            description = descriptionLines.join(" ").trim().substring(0, 200);
+        }
+    }
+    return {
+        id: content.uid,
+        title,
+        description,
+        sandboxId: content.uid,
+    };
+}
+export const SandboxHome = ({ apiKey, orgid, sandboxes, basePath = "/sandbox", }) => {
+    // Start loading as true if we need to fetch (no sandboxes prop provided)
+    const [loading, setLoading] = useState(!sandboxes);
+    const [error, setError] = useState(null);
+    const [searchQuery, setSearchQuery] = useState("");
+    const [fetchedSandboxes, setFetchedSandboxes] = useState([]);
+    // Fetch sandboxes from API if not provided
+    useEffect(() => {
+        if (sandboxes) {
+            // If sandboxes are provided as prop, use them
+            setFetchedSandboxes([]);
+            setLoading(false);
+            return;
+        }
+        const fetchSandboxes = async () => {
+            setLoading(true);
+            setError(null);
+            try {
+                const client = createApiClient({
+                    apiKey,
+                });
+                const sandboxContents = await client.sandboxContent.getByPlayground(orgid);
+                const transformed = sandboxContents.map(transformSandboxContent);
+                setFetchedSandboxes(transformed);
+            }
+            catch (err) {
+                const errorMessage = err instanceof Error ? err.message : "Failed to fetch sandboxes";
+                setError(errorMessage);
+                console.error("Error fetching sandboxes:", err);
+                // Don't fall back to default sandboxes - show error state instead
+                setFetchedSandboxes([]);
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        fetchSandboxes();
+    }, [apiKey, orgid, sandboxes]);
+    // Use provided sandboxes or fetched sandboxes (no default fallback to prevent flickering)
+    const allSandboxes = sandboxes || fetchedSandboxes;
+    // Filter sandboxes based on search query
+    const filteredSandboxes = useMemo(() => {
+        if (!searchQuery.trim()) {
+            return allSandboxes;
+        }
+        const query = searchQuery.toLowerCase();
+        return allSandboxes.filter((sandbox) => {
+            var _a, _b;
+            const matchesTitle = ((_a = sandbox.title) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(query)) || false;
+            const matchesDescription = ((_b = sandbox.description) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(query)) || false;
+            return matchesTitle || matchesDescription;
+        });
+    }, [allSandboxes, searchQuery]);
+    return (React.createElement("div", { className: "min-h-screen bg-black" },
+        React.createElement("div", { className: "pt-16 pb-12 px-4 md:px-6" },
+            React.createElement("div", { className: "max-w-[1400px] mx-auto" },
+                React.createElement(SearchBar, { value: searchQuery, onChange: setSearchQuery }))),
+        React.createElement("div", { className: "px-4 md:px-6 pb-16" },
+            React.createElement("div", { className: "max-w-[1400px] mx-auto" }, loading ? (React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4" }, [...Array(6)].map((_, i) => (React.createElement("div", { key: i, className: "relative block min-w-[240px] w-full h-[200px] border border-[#333] bg-[#0a0a0a] rounded-lg overflow-hidden" },
+                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(Skeleton, { className: "h-5 w-32 bg-zinc-800" })),
+                    React.createElement(Skeleton, { className: "h-4 w-full bg-zinc-800 mt-1" }),
+                    React.createElement(Skeleton, { className: "h-4 w-3/4 bg-zinc-800 mt-1" })),
+                React.createElement("div", { className: "absolute top-[110px] -right-10 w-[300px] h-[100px] rounded-lg border border-[#333] overflow-hidden shadow-lg rotate-[-5deg]" },
+                    React.createElement(Skeleton, { className: "w-full h-full bg-zinc-800" }))))))) : error && !sandboxes ? (React.createElement("div", { className: "col-span-full text-center py-16" },
+                React.createElement("p", { className: "text-red-500 text-lg" },
+                    "Error: ",
+                    error),
+                React.createElement("p", { className: "text-gray-500 text-sm mt-2" }, "Please check your API key and try again."))) : (React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4" }, filteredSandboxes && filteredSandboxes.length > 0 ? (filteredSandboxes
+                .filter((sandbox) => sandbox && sandbox.title && sandbox.description)
+                .map((sandbox) => (React.createElement(SandboxCard, { key: sandbox.id, title: sandbox.title || "", description: sandbox.description || "", sandboxId: sandbox.sandboxId, basePath: basePath, imageUrl: `https://sampleappassets.blob.core.windows.net/assets/${orgid}/${sandbox.id}.png` })))) : (React.createElement("div", { className: "col-span-full text-center py-16" },
+                React.createElement("p", { className: "text-gray-500 text-lg" }, searchQuery
+                    ? `No sandboxes found matching "${searchQuery}".`
+                    : "No sandboxes available. Provide sandboxes prop to display cards.")))))))));
+};

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

@@ -0,0 +1,12 @@
+"use client";
+import React from "react";
+/**
+ * SearchBar component - provides search input for filtering sandboxes
+ */
+export const SearchBar = ({ value, onChange, placeholder = "Search sample apps...", }) => {
+    return (React.createElement("div", { className: "relative max-w-md mx-auto" },
+        React.createElement("div", { className: "absolute inset-y-0 left-4 flex items-center pointer-events-none" },
+            React.createElement("svg", { className: "w-4 h-4 text-gray-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
+                React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }))),
+        React.createElement("input", { type: "text", placeholder: placeholder, value: value, onChange: (e) => onChange(e.target.value), className: "w-full bg-[#0a0a0a] border border-[#222] rounded-lg py-3 pl-11 pr-4 text-sm text-white placeholder:text-gray-500 focus:outline-none focus:border-gray-600 transition-colors" })));
+};

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

@@ -0,0 +1,3 @@
+export { SandboxHome } from "./SandboxHome";
+export { SandboxCard } from "./SandboxCard";
+export { SearchBar } from "./SearchBar";