@sampleapp.ai/sdk 1.0.30 → 1.0.31

package/dist/components/sandbox/guardian/ui/download-and-open-buttons.js

@@ -0,0 +1,117 @@
+"use client";
+import React from "react";
+import { DownloadIcon, Check, Copy } from "lucide-react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, } from "./dialog";
+import vscodeLogo from "../../../../assets/vscode.png";
+import { extractContainerIdFromUrl } from "../../../../lib/api-client";
+// VSCode logo component using imported asset
+function VSCodeLogo({ className }) {
+    return (React.createElement("img", { src: vscodeLogo, alt: "VSCode", width: 20, height: 20, className: className }));
+}
+export const DownloadAndOpenButtons = ({ downloadUrl, themeColor, gitUrl, browserUrl, }) => {
+    const [isModalOpen, setIsModalOpen] = React.useState(false);
+    const [hasCopied, setHasCopied] = React.useState(false);
+    // Extract container ID from browserUrl and build download URL (same as Download Code button)
+    const containerDownloadUrl = React.useMemo(() => {
+        if (!browserUrl)
+            return null;
+        const containerId = extractContainerIdFromUrl(browserUrl);
+        if (!containerId)
+            return null;
+        const baseUrl = process.env.BASE_API_URL || "https://api.sampleapp.ai";
+        return `${baseUrl}/api/v1/sdk/download-code?container_id=${encodeURIComponent(containerId)}`;
+    }, [browserUrl]);
+    // Normalize the download path to work with public directory (fallback for static files)
+    const normalizedDownloadUrl = React.useMemo(() => {
+        let normalizedPath = downloadUrl;
+        if (normalizedPath.startsWith("/public/")) {
+            normalizedPath = normalizedPath.slice("/public".length);
+        }
+        if (!normalizedPath.startsWith("/")) {
+            normalizedPath = "/" + normalizedPath;
+        }
+        return normalizedPath;
+    }, [downloadUrl]);
+    // Use container-based download URL if available, otherwise fall back to static file
+    const finalDownloadUrl = containerDownloadUrl || normalizedDownloadUrl;
+    // Build the npx command using the static API route
+    // Use default MAIN_APP_URL for SDK (can be overridden via env)
+    const MAIN_APP_URL = typeof window !== "undefined" && window.SAMPLEAPP_MAIN_URL
+        ? window.SAMPLEAPP_MAIN_URL
+        : "https://sampleapp.ai";
+    const npxCommand = React.useMemo(() => {
+        // If using container-based download, we can't generate a static npx command
+        // Use the container download URL instead
+        if (containerDownloadUrl) {
+            return `npx sampleappai add "${containerDownloadUrl}"`;
+        }
+        // Remove .zip extension and leading slash for the API path
+        let apiPath = normalizedDownloadUrl;
+        if (apiPath.startsWith("/")) {
+            apiPath = apiPath.slice(1);
+        }
+        if (apiPath.endsWith(".zip")) {
+            apiPath = apiPath.slice(0, -4);
+        }
+        return `npx sampleappai add "${MAIN_APP_URL}/api/code/static/${apiPath}"`;
+    }, [containerDownloadUrl, normalizedDownloadUrl, MAIN_APP_URL]);
+    const handleDownload = () => {
+        window.open(finalDownloadUrl, "_blank");
+    };
+    const handleOpenInVSCode = () => {
+        if (gitUrl) {
+            try {
+                window.location.href = `vscode://vscode.git/clone?url=${gitUrl}`;
+            }
+            catch (_a) {
+                // Silently fail if vscode:// protocol isn't registered
+            }
+        }
+        else {
+            setIsModalOpen(true);
+        }
+    };
+    const handleCopyCommand = async () => {
+        await navigator.clipboard.writeText(npxCommand);
+        setHasCopied(true);
+        setTimeout(() => setHasCopied(false), 2000);
+    };
+    const handleOpenVSCode = () => {
+        try {
+            window.location.href = "vscode://";
+        }
+        catch (_a) {
+            // Silently fail if vscode:// protocol isn't registered
+        }
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "flex items-center gap-2" },
+            React.createElement("button", { type: "button", className: "inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md !text-white transition-all hover:opacity-90 active:scale-[0.98]", style: { backgroundColor: themeColor }, onClick: handleDownload },
+                React.createElement(DownloadIcon, { className: "w-3.5 h-3.5 !text-white" }),
+                "Download example"),
+            React.createElement("button", { type: "button", className: "inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md border transition-all hover:opacity-90 active:scale-[0.98] bg-zinc-900 dark:bg-zinc-800 border-zinc-700 dark:border-zinc-700 !text-white", onClick: handleOpenInVSCode },
+                React.createElement(VSCodeLogo, { className: "w-3.5 h-3.5" }),
+                "Integrate in VS Code")),
+        React.createElement(Dialog, { open: isModalOpen, onOpenChange: setIsModalOpen },
+            React.createElement(DialogContent, { className: "max-w-[90vw] sm:max-w-md w-full" },
+                React.createElement(DialogHeader, null,
+                    React.createElement(DialogTitle, { className: "flex items-center gap-2" },
+                        React.createElement(VSCodeLogo, { className: "w-5 h-5" }),
+                        "Add to VS Code"),
+                    React.createElement(DialogDescription, null, "Copy the command and paste it in VSCode terminal")),
+                React.createElement("div", { className: "flex flex-col gap-4 py-2 overflow-hidden" },
+                    React.createElement("div", { className: "flex flex-col gap-2 overflow-hidden" },
+                        React.createElement("div", { className: "flex items-center gap-2" },
+                            React.createElement("div", { className: "flex-shrink-0 w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-bold text-white", style: { backgroundColor: themeColor } }, "1"),
+                            React.createElement("p", { className: "text-sm font-medium" }, "Copy this command")),
+                        React.createElement("div", { className: "flex items-center gap-2 overflow-hidden" },
+                            React.createElement("code", { className: "flex-1 bg-zinc-100 dark:bg-zinc-800 px-3 py-2.5 rounded-md text-xs font-mono truncate block max-w-[calc(100%-3rem)]" }, npxCommand.replace("http://localhost:3000", "https://sampleapp.ai")),
+                            React.createElement("button", { type: "button", onClick: handleCopyCommand, className: "flex-shrink-0 p-2 rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-700 transition-colors border border-zinc-200 dark:border-zinc-700" }, hasCopied ? (React.createElement(Check, { className: "w-4 h-4 text-green-500" })) : (React.createElement(Copy, { className: "w-4 h-4 text-muted-foreground" }))))),
+                    React.createElement("div", { className: "flex flex-col gap-2" },
+                        React.createElement("div", { className: "flex items-center gap-2" },
+                            React.createElement("div", { className: "flex-shrink-0 w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-bold text-white", style: { backgroundColor: themeColor } }, "2"),
+                            React.createElement("p", { className: "text-sm font-medium" }, "Open VSCode and paste in terminal")),
+                        React.createElement("button", { type: "button", onClick: handleOpenVSCode, className: "w-full inline-flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-medium rounded-md text-white transition-all hover:opacity-90 active:scale-[0.99]", style: { backgroundColor: themeColor } },
+                            React.createElement(VSCodeLogo, { className: "w-4 h-4" }),
+                            "Open VSCode")))))));
+};

package/dist/components/sandbox/guardian/ui/markdown/code-group/code-block.js

@@ -1,48 +1,10 @@
-import React from "react";
+import React, { memo, useState } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";
 import { cn } from "../../../../../../lib/utils";
-import { Copy } from "lucide-react";
-export const CodeBlock = ({ language, value, title, className, children, isInsideCodeGroup = false, }) => {
-    // const {theme} = useTheme();
-    // const isDark = theme === "dark";
-    const isDark = true;
-    const [copied, setCopied] = React.useState(false);
-    const lightTheme = {
-        'code[class*="language-"]': {
-            color: "#1F2937",
-            background: "transparent",
-        },
-        'pre[class*="language-"]': {
-            background: "transparent",
-        },
-        keyword: {
-            color: "#D92D20",
-        },
-        string: {
-            color: "#027A48",
-        },
-        constant: {
-            color: "#1F2937",
-        },
-    };
-    const darkTheme = {
-        'code[class*="language-"]': {
-            color: "#E5E7EB",
-            background: "transparent",
-        },
-        'pre[class*="language-"]': {
-            background: "transparent",
-        },
-        keyword: {
-            color: "#FF6B6B",
-        },
-        string: {
-            color: "#34D399",
-        },
-        constant: {
-            color: "#E5E7EB",
-        },
-    };
+import { Copy, CheckCircle2 } from "lucide-react";
+export const CodeBlock = memo(({ language, value, title, className, children, isInsideCodeGroup = false, maxH, }) => {
+    const [copied, setCopied] = useState(false);
     let code = value;
     if (typeof children === "string") {
         code = children;
@@ -60,28 +22,33 @@ export const CodeBlock = ({ language, value, title, className, children, isInsid
     // If inside CodeGroup, render just the code content
     if (isInsideCodeGroup) {
         return (React.createElement("div", { className: "group relative overflow-x-auto" },
-            React.createElement(SyntaxHighlighter, { language: language || "javascript", style: isDark ? darkTheme : lightTheme, customStyle: {
-                    margin: 0,
-                    padding: "1rem 1.25rem",
-                    background: "transparent",
-                    fontSize: "0.875rem",
-                    lineHeight: "1.5rem",
-                }, showLineNumbers: false, wrapLines: true }, code || "")));
+            React.createElement("div", { className: `${maxH || "max-h-[40vh]"} rounded-b-md bg-zinc-900 px-5 py-3 overflow-y-auto [&>pre]:overflow-x-auto` },
+                React.createElement("div", { className: "min-w-0 text-[13px]" },
+                    React.createElement(SyntaxHighlighter, { language: language || "javascript", style: vscDarkPlus, PreTag: "div", customStyle: {
+                            margin: 0,
+                            padding: 0,
+                            background: "transparent",
+                            fontSize: "13px",
+                            width: "100%",
+                            minWidth: 0,
+                            maxWidth: "100%",
+                        }, wrapLongLines: false }, code || "")))));
     }
     // Standalone code block with title
-    return (React.createElement("div", { className: cn("relative rounded-lg border border-zinc-200 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-950", className) },
-        title && (React.createElement("div", { className: "flex items-center justify-between px-4 py-2 border-b border-zinc-200 dark:border-zinc-800 bg-zinc-50/80 dark:bg-zinc-900/80" },
-            React.createElement("span", { className: "text-sm text-[var(--colors-primary)] font-medium" }, language || title),
-            React.createElement("button", { onClick: handleCopy, className: cn("p-1 transition-colors", copied
-                    ? "text-green-500 dark:text-green-400"
-                    : "text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-200"), "aria-label": "Copy code" },
-                React.createElement(Copy, { className: "h-4 w-4" })))),
-        React.createElement("div", { className: "px-4 py-3 overflow-x-auto" },
-            React.createElement(SyntaxHighlighter, { language: language || "javascript", style: isDark ? darkTheme : lightTheme, customStyle: {
-                    margin: 0,
-                    padding: 0,
-                    background: "transparent",
-                    fontSize: "0.875rem",
-                    lineHeight: "1.5rem",
-                }, showLineNumbers: false, wrapLines: true }, code || ""))));
-};
+    return (React.createElement("div", { className: cn("relative w-full border rounded-lg mb-4", className) },
+        React.createElement("div", { className: "flex items-center justify-between px-4 py-2 bg-zinc-900 text-primary border-b rounded-t-md" },
+            React.createElement("span", { className: "text-xs text-primary font-mono" }, language || title || ""),
+            React.createElement("button", { type: "button", className: "h-5 w-5 flex items-center justify-center hover:bg-transparent text-zinc-200 hover:text-zinc-300 border-none", onClick: handleCopy }, copied ? (React.createElement(CheckCircle2, { className: "h-3 w-3 text-green-500" })) : (React.createElement(Copy, { className: "h-3 w-3" })))),
+        React.createElement("div", { className: `${maxH || "max-h-[40vh]"} rounded-b-md bg-zinc-900 px-5 py-3 overflow-y-auto [&>pre]:overflow-x-auto` },
+            React.createElement("div", { className: "min-w-0 text-[13px]" },
+                React.createElement(SyntaxHighlighter, { language: language || "javascript", style: vscDarkPlus, PreTag: "div", customStyle: {
+                        margin: 0,
+                        padding: 0,
+                        background: "transparent",
+                        fontSize: "13px",
+                        width: "100%",
+                        minWidth: 0,
+                        maxWidth: "100%",
+                    }, wrapLongLines: false }, code || "")))));
+});
+CodeBlock.displayName = "CodeBlock";

package/dist/components/sandbox/guardian/ui/markdown.js

@@ -32,6 +32,7 @@ import { CalloutWarning } from "./markdown/callout/callout-warning";
 import { CardGroup } from "./markdown/card-group";
 import { Card } from "./markdown/card-group/card";
 import CodeFocusSection from "@/components/sandbox/guardian/code-focus-section";
+import { DownloadAndOpenButtons } from "./download-and-open-buttons";
 // Stub components for components that don't exist in SDK
 const ButtonFileServer = ({ title, description, filePath, feature, fileContent, color, }) => {
     return null; // Stub - not implemented in SDK
@@ -42,9 +43,6 @@ const ToggleFileServer = ({ title, description, filePath, feature, fileContent,
 const ToggleIframeUrl = ({ title, description, newUrl, feature, color, useVm, groupId, preloadedVmUrl, }) => {
     return null; // Stub - not implemented in SDK
 };
-const DownloadAndOpenButtons = ({ downloadUrl, themeColor, gitUrl }) => {
-    return null; // Stub - not implemented in SDK
-};
 const createId = (text) => {
     return text
         .toLowerCase()
@@ -53,7 +51,7 @@ const createId = (text) => {
 };
 export const MemoizedReactMarkdown = memo(ReactMarkdown, (prevProps, nextProps) => prevProps.children === nextProps.children &&
     prevProps.className === nextProps.className);
-export const Markdown = ({ children, className, isRestricted, showToc, themeColor }) => {
+export const Markdown = ({ children, className, isRestricted, showToc, themeColor, browserUrl, gitUrl }) => {
     const headingRenderer = (level) => {
         return (_a) => {
             var _b, _c;
@@ -74,7 +72,7 @@ export const Markdown = ({ children, className, isRestricted, showToc, themeColo
     };
     // Wrapper for CodeFocusSection to handle HTML attributes from react-markdown
     const CodeFocusSectionWrapper = (_a) => {
-        var { children, filepath, filerange, title, description, themecolor, className } = _a, props = __rest(_a, ["children", "filepath", "filerange", "title", "description", "themecolor", "className"]);
+        var { children, filepath, filerange, title, description, className } = _a, props = __rest(_a, ["children", "filepath", "filerange", "title", "description", "className"]);
         // Parse lineRange from string format like "10-30" or "10"
         let lineRange;
         if (filerange) {
@@ -94,8 +92,9 @@ export const Markdown = ({ children, className, isRestricted, showToc, themeColo
         if (!filepath || !title) {
             return React.createElement("div", { className: className }, children);
         }
-        // Use provided themecolor from HTML attribute, or fall back to component's themeColor prop, or default to blue
-        const color = themecolor || themeColor || "#3b82f6";
+        // Use themeColor from Markdown component props (from guardian-playground)
+        // Don't accept themecolor from HTML attributes
+        const color = themeColor || "#3b82f6";
         return (React.createElement("div", { className: className },
             React.createElement(CodeFocusSection, { filePath: filepath, lineRange: lineRange, title: title, description: description, themeColor: color }, children)));
     };
@@ -143,12 +142,18 @@ export const Markdown = ({ children, className, isRestricted, showToc, themeColo
     };
     // Wrapper for DownloadAndOpenButtons to handle HTML attributes from react-markdown
     const DownloadAndOpenButtonsWrapper = (_a) => {
-        var { children, downloadurl, themecolor, giturl, className } = _a, props = __rest(_a, ["children", "downloadurl", "themecolor", "giturl", "className"]);
-        if (!downloadurl || !themecolor) {
+        var { children, downloadurl, giturl, className } = _a, props = __rest(_a, ["children", "downloadurl", "giturl", "className"]);
+        // Use themeColor from Markdown component props (from guardian-playground)
+        // Don't accept themecolor from HTML attributes
+        const effectiveThemeColor = themeColor || "#3b82f6";
+        // Use gitUrl from Markdown component props (from guardian-playground) as priority,
+        // fall back to HTML attribute if not provided
+        const effectiveGitUrl = gitUrl || giturl;
+        if (!downloadurl || !effectiveThemeColor) {
             return React.createElement("div", { className: className }, children);
         }
         return (React.createElement("div", { className: cn("my-6", className) },
-            React.createElement(DownloadAndOpenButtons, { downloadUrl: downloadurl, themeColor: themecolor, gitUrl: giturl }),
+            React.createElement(DownloadAndOpenButtons, { downloadUrl: downloadurl, themeColor: effectiveThemeColor, gitUrl: effectiveGitUrl, browserUrl: browserUrl }),
             children));
     };
     const sharedComponents = {

package/dist/components/sandbox/guardian/utils.js

@@ -69,6 +69,7 @@ export function buildGuardianConfig(useCases, options) {
                 themeColor: (_a = fw.themeColor) !== null && _a !== void 0 ? _a : uc.themeColor,
                 variant,
                 hasPreview: uc.hasPreview,
+                gitUrl: fw.gitUrl,
             };
         }
         result[uc.id] = useCaseConfig;

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

@@ -33,14 +33,21 @@ function getGradientColors(title) {
 /**
  * SandboxCard component - displays an individual template card
  */
-export const SandboxCard = ({ title, description, sandboxId, }) => {
+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) {
-            window.location.href = `/sample/${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" },
@@ -50,10 +57,9 @@ export const SandboxCard = ({ title, description, sandboxId, }) => {
                 React.createElement("svg", { className: "rotate-[-45deg] translate-x-[-2px] opacity-0 transition-all duration-100 ease-out origin-center group-hover:opacity-100 group-hover:translate-x-[4px] ml-1", height: "16", strokeLinejoin: "round", style: { width: 12, height: 12, color: "currentColor" }, viewBox: "0 0 16 16", width: "16" },
                     React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.53033 2.21968L9 1.68935L7.93934 2.75001L8.46967 3.28034L12.4393 7.25001H1.75H1V8.75001H1.75H12.4393L8.46967 12.7197L7.93934 13.25L9 14.3107L9.53033 13.7803L14.6036 8.70711C14.9941 8.31659 14.9941 7.68342 14.6036 7.2929L9.53033 2.21968Z", fill: "currentColor" }))),
             React.createElement("p", { className: "text-[14px] text-gray-400 m-0 line-clamp-2" }, safeDescription)),
-        React.createElement("div", { className: "absolute top-[110px] -right-10 w-[300px] h-[100px] rounded-lg border border-[#333] overflow-hidden shadow-lg transition-transform duration-100 ease-out rotate-[-5deg] group-hover:rotate-[-3deg] group-hover:-translate-y-1 group-hover:-translate-x-0.5" },
-            React.createElement("div", { className: `w-full h-full bg-gradient-to-br ${gradient} flex items-center justify-center` },
-                React.createElement("div", { className: "w-full px-6 space-y-2" },
-                    React.createElement("div", { className: "h-2 bg-white/20 rounded w-1/2 mx-auto" }),
-                    React.createElement("div", { className: "h-1.5 bg-white/10 rounded w-3/4 mx-auto" }),
-                    React.createElement("div", { className: "h-1.5 bg-white/10 rounded w-2/3 mx-auto" }))))));
+        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

@@ -3,74 +3,9 @@ import React, { useState, useMemo, useEffect } from "react";
 import { SandboxCard } from "./SandboxCard";
 import { SearchBar } from "./SearchBar";
 import { createApiClient } from "../../../lib/api-client";
-// Default sandboxes array - will be replaced with API call in the future
-const DEFAULT_SANDBOXES = [
-    {
-        id: "1",
-        title: "Next.js AI Chatbot",
-        description: "A full-featured, hackable Next.js AI chatbot built by Vercel",
-        sandboxId: "nextjs-ai-chatbot",
-    },
-    {
-        id: "2",
-        title: "Hume AI - Empathic Voice Interface",
-        description: "This template creates a voice chat using Hume AI's Empathic Voice Interface.",
-        sandboxId: "hume-ai-voice",
-    },
-    {
-        id: "3",
-        title: "Lead Agent",
-        description: "An inbound lead qualification and research agent built with Next.js, AI SDK, Workflow...",
-        sandboxId: "lead-agent",
-    },
-    {
-        id: "4",
-        title: "Slack Agent Template",
-        description: "This is a Slack Agent template built with Bolt for JavaScript (TypeScript) and the Nitro server...",
-        sandboxId: "slack-agent",
-    },
-    {
-        id: "5",
-        title: "Customer Reviews AI Summary",
-        description: "Use a Large Language Model to summarize customer feedback.",
-        sandboxId: "customer-reviews-ai",
-    },
-    {
-        id: "6",
-        title: "Nuxt AI Chatbot",
-        description: "An AI chatbot template to build your own chatbot powered by Nuxt MDC and Vercel AI...",
-        sandboxId: "nuxt-ai-chatbot",
-    },
-    {
-        id: "7",
-        title: "Morphic: AI-powered answer engine",
-        description: "AI answer engine with Generative UI.",
-        sandboxId: "morphic-ai",
-    },
-    {
-        id: "8",
-        title: "Pinecone - Vercel AI SDK Starter",
-        description: "A Next.js starter chatbot using Vercel's AI SDK and implements the Retrieval-Augmented...",
-        sandboxId: "pinecone-ai-sdk",
-    },
-    {
-        id: "9",
-        title: "qrGPT - AI QR Code Generator",
-        description: "QrGPT is an AI tool for you to generate beautiful QR codes using AI with one click. Powered by...",
-        sandboxId: "qrgpt-ai",
-    },
-];
+import { Skeleton } from "../../ui/skeleton";
 /**
- * Get the base URL for API requests
- */
-function getBaseUrl(customBaseUrl) {
-    if (customBaseUrl) {
-        return customBaseUrl;
-    }
-    return "http://127.0.0.1:8000";
-}
-/**
- * Transform SandboxContent to SandboxItem
+ * Transform SandboxContentPublic to SandboxItem
  */
 function transformSandboxContent(content) {
     // Extract title from markdown (first heading) or use uid as fallback
@@ -96,14 +31,15 @@ function transformSandboxContent(content) {
         }
     }
     return {
-        id: content.uid || content.id.toString(),
+        id: content.uid,
         title,
         description,
         sandboxId: content.uid,
     };
 }
-export const SandboxHome = ({ apiKey, orgid, baseUrl, sandboxes, }) => {
-    const [loading, setLoading] = useState(false);
+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([]);
@@ -112,6 +48,7 @@ export const SandboxHome = ({ apiKey, orgid, baseUrl, sandboxes, }) => {
         if (sandboxes) {
             // If sandboxes are provided as prop, use them
             setFetchedSandboxes([]);
+            setLoading(false);
             return;
         }
         const fetchSandboxes = async () => {
@@ -119,7 +56,6 @@ export const SandboxHome = ({ apiKey, orgid, baseUrl, sandboxes, }) => {
             setError(null);
             try {
                 const client = createApiClient({
-                    baseUrl: getBaseUrl(baseUrl),
                     apiKey,
                 });
                 const sandboxContents = await client.sandboxContent.getByPlayground(orgid);
@@ -130,18 +66,17 @@ export const SandboxHome = ({ apiKey, orgid, baseUrl, sandboxes, }) => {
                 const errorMessage = err instanceof Error ? err.message : "Failed to fetch sandboxes";
                 setError(errorMessage);
                 console.error("Error fetching sandboxes:", err);
-                // Fall back to default sandboxes on error
-                setFetchedSandboxes(DEFAULT_SANDBOXES);
+                // Don't fall back to default sandboxes - show error state instead
+                setFetchedSandboxes([]);
             }
             finally {
                 setLoading(false);
             }
         };
         fetchSandboxes();
-    }, [apiKey, orgid, baseUrl, sandboxes]);
-    // Use provided sandboxes, fetched sandboxes, or default array
-    const allSandboxes = sandboxes ||
-        (fetchedSandboxes.length > 0 ? fetchedSandboxes : DEFAULT_SANDBOXES);
+    }, [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()) {
@@ -160,14 +95,20 @@ export const SandboxHome = ({ apiKey, orgid, baseUrl, sandboxes, }) => {
             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: "col-span-full text-center py-16" },
-                React.createElement("p", { className: "text-gray-500 text-lg" }, "Loading sandboxes..."))) : error && !sandboxes ? (React.createElement("div", { className: "col-span-full text-center py-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" }, "Falling back to default sandboxes."))) : (React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4" }, filteredSandboxes && filteredSandboxes.length > 0 ? (filteredSandboxes
+                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 })))) : (React.createElement("div", { className: "col-span-full text-center py-16" },
+                .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

@@ -3,7 +3,7 @@ import React from "react";
 /**
  * SearchBar component - provides search input for filtering sandboxes
  */
-export const SearchBar = ({ value, onChange, placeholder = "Search templates...", }) => {
+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" },

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 };