@sampleapp.ai/sdk 1.0.29 → 1.0.31

package/dist/components/sandbox/guardian/types/ide-types.js

@@ -0,0 +1,162 @@
+// Types for IDE context compatibility
+export var Framework;
+(function (Framework) {
+    // DJANGO = "django",
+    Framework["FLASK"] = "flask";
+    Framework["EXPRESS"] = "express";
+    Framework["NEXTJS_YARN"] = "nextjsy";
+    Framework["VITE"] = "vite";
+    Framework["NEXTJS"] = "nextjs";
+    Framework["FASTAPI"] = "fastapi";
+    Framework["FASTMCP"] = "fastmcp";
+})(Framework || (Framework = {}));
+export const FrameworkLabel = {
+    [Framework.FLASK]: "Flask",
+    [Framework.VITE]: "Vite",
+    [Framework.NEXTJS]: "Next.js",
+    [Framework.NEXTJS_YARN]: "Next.js (Yarn)",
+    [Framework.EXPRESS]: "Express",
+    [Framework.FASTAPI]: "FastAPI",
+    [Framework.FASTMCP]: "FastMCP",
+};
+export var CodeLanguage;
+(function (CodeLanguage) {
+    // Web/Frontend Languages
+    CodeLanguage["JAVASCRIPT"] = "javascript";
+    CodeLanguage["TYPESCRIPT"] = "typescript";
+    CodeLanguage["HTML"] = "html";
+    CodeLanguage["CSS"] = "css";
+    CodeLanguage["SCSS"] = "scss";
+    CodeLanguage["MARKDOWN"] = "markdown";
+    CodeLanguage["TOML"] = "toml";
+    CodeLanguage["C"] = "c";
+    CodeLanguage["DOCKERFILE"] = "dockerfile";
+    // Backend Languages
+    CodeLanguage["PYTHON"] = "python";
+    CodeLanguage["JAVA"] = "java";
+    CodeLanguage["CSHARP"] = "csharp";
+    CodeLanguage["CPP"] = "cpp";
+    CodeLanguage["RUBY"] = "ruby";
+    CodeLanguage["GO"] = "go";
+    CodeLanguage["RUST"] = "rust";
+    CodeLanguage["SWIFT"] = "swift";
+    CodeLanguage["KOTLIN"] = "kotlin";
+    CodeLanguage["PHP"] = "php";
+    // System/Shell Languages
+    CodeLanguage["BASH"] = "bash";
+    CodeLanguage["POWERSHELL"] = "powershell";
+    // Database Languages
+    CodeLanguage["SQL"] = "sql";
+    CodeLanguage["PLSQL"] = "plsql";
+    // Markup/Config Languages
+    CodeLanguage["XML"] = "xml";
+    CodeLanguage["YAML"] = "yaml";
+    // Other Languages
+    CodeLanguage["R"] = "r";
+    CodeLanguage["SCALA"] = "scala";
+    CodeLanguage["PERL"] = "perl";
+    CodeLanguage["HASKELL"] = "haskell";
+    CodeLanguage["MATLAB"] = "matlab";
+    CodeLanguage["ASSEMBLY"] = "assembly";
+    CodeLanguage["DART"] = "dart";
+    CodeLanguage["ELIXIR"] = "elixir";
+    CodeLanguage["LUA"] = "lua";
+    CodeLanguage["OBJECTIVEC"] = "objectivec";
+    CodeLanguage["TEXT"] = "text";
+    CodeLanguage["JSON"] = "json";
+})(CodeLanguage || (CodeLanguage = {}));
+// Map file extensions to CodeLanguage enum
+export function filePathToCodeLanguage(filePath) {
+    var _a;
+    const ext = (_a = filePath.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+    if (!ext) {
+        return CodeLanguage.TEXT;
+    }
+    switch (ext.replace(/^\./, "").toLowerCase()) {
+        case "js":
+        case "jsx":
+            return CodeLanguage.JAVASCRIPT;
+        case "ts":
+        case "tsx":
+            return CodeLanguage.TYPESCRIPT;
+        case "html":
+            return CodeLanguage.HTML;
+        case "css":
+            return CodeLanguage.CSS;
+        case "scss":
+        case "sass":
+            return CodeLanguage.SCSS;
+        case "py":
+            return CodeLanguage.PYTHON;
+        case "java":
+            return CodeLanguage.JAVA;
+        case "cs":
+            return CodeLanguage.CSHARP;
+        case "cpp":
+        case "cc":
+        case "cxx":
+            return CodeLanguage.CPP;
+        case "c":
+            return CodeLanguage.C;
+        case "rb":
+            return CodeLanguage.RUBY;
+        case "go":
+            return CodeLanguage.GO;
+        case "rs":
+            return CodeLanguage.RUST;
+        case "swift":
+            return CodeLanguage.SWIFT;
+        case "kt":
+            return CodeLanguage.KOTLIN;
+        case "php":
+            return CodeLanguage.PHP;
+        case "sh":
+        case "bash":
+            return CodeLanguage.BASH;
+        case "ps1":
+            return CodeLanguage.POWERSHELL;
+        case "sql":
+            return CodeLanguage.SQL;
+        case "plsql":
+            return CodeLanguage.PLSQL;
+        case "xml":
+            return CodeLanguage.XML;
+        case "yaml":
+        case "yml":
+            return CodeLanguage.YAML;
+        case "r":
+            return CodeLanguage.R;
+        case "scala":
+            return CodeLanguage.SCALA;
+        case "pl":
+            return CodeLanguage.PERL;
+        case "hs":
+            return CodeLanguage.HASKELL;
+        case "m":
+            return CodeLanguage.MATLAB;
+        case "s":
+        case "asm":
+            return CodeLanguage.ASSEMBLY;
+        case "dart":
+            return CodeLanguage.DART;
+        case "ex":
+        case "exs":
+            return CodeLanguage.ELIXIR;
+        case "lua":
+            return CodeLanguage.LUA;
+        case "m":
+        case "mm":
+            return CodeLanguage.OBJECTIVEC;
+        case "md":
+        case "markdown":
+            return CodeLanguage.MARKDOWN;
+        case "json":
+            return CodeLanguage.JSON;
+        case "toml":
+            return CodeLanguage.TOML;
+        case "dockerfile":
+            return CodeLanguage.DOCKERFILE;
+        default:
+            return CodeLanguage.TEXT;
+    }
+}

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

@@ -0,0 +1,3 @@
+import { Framework, FrameworkLabel, } from "./types/ide-types";
+// Re-export Framework and FrameworkLabel for convenience
+export { Framework, FrameworkLabel };

package/dist/components/sandbox/guardian/ui/ai-loader.js

@@ -0,0 +1,91 @@
+import * as React from "react";
+// Helper to convert hex to RGB
+function hexToRgb(hex) {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result
+        ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16),
+        }
+        : null;
+}
+// Helper to darken a color
+function darkenColor(hex, percent) {
+    const rgb = hexToRgb(hex);
+    if (!rgb)
+        return hex;
+    const factor = 1 - percent / 100;
+    const r = Math.round(rgb.r * factor);
+    const g = Math.round(rgb.g * factor);
+    const b = Math.round(rgb.b * factor);
+    return `rgb(${r}, ${g}, ${b})`;
+}
+export const Component = ({ size = 180, text = "Generating", fullScreen = true, themeColor = "#3b82f6", // Default blue
+ }) => {
+    const letters = text.split("");
+    // Generate color variants from themeColor
+    const rgb = hexToRgb(themeColor);
+    const colorDark = darkenColor(themeColor, 60);
+    const colorMid = darkenColor(themeColor, 40);
+    const colorLight = darkenColor(themeColor, 20);
+    const rgbaGlow = rgb
+        ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.3)`
+        : "rgba(59, 130, 246, 0.3)";
+    // Generate gradient colors for dark mode
+    const gradientFrom = darkenColor(themeColor, 30);
+    return (React.createElement("div", { className: [
+            "flex items-center justify-center",
+            fullScreen ? "fixed inset-0 z-50" : "w-full h-full",
+        ].join(" "), style: {
+            background: `linear-gradient(to bottom, ${gradientFrom}, #0f172a, black)`,
+        } },
+        React.createElement("div", { className: "relative flex items-center justify-center font-inter select-none", style: { width: size, height: size } },
+            letters.map((letter, index) => {
+                // Preserve visual spacing for spaces by using a non‑breaking space
+                const displayChar = letter === " " ? "\u00A0" : letter;
+                return (React.createElement("span", { key: `${letter}-${index}`, className: "inline-block text-white opacity-40 animate-loaderLetter", style: { animationDelay: `${index * 0.1}s` } }, displayChar));
+            }),
+            React.createElement("div", { className: "absolute inset-0 rounded-full animate-loaderCircle", style: {
+                    // @ts-ignore - CSS custom property
+                    "--loader-color-dark": colorDark,
+                    "--loader-color-mid": colorMid,
+                    "--loader-color-light": colorLight,
+                    "--loader-color-glow": rgbaGlow,
+                } })),
+        React.createElement("style", null, `
+        @keyframes loaderCircle {
+          0% {
+            transform: rotate(90deg);
+            box-shadow: 0 6px 12px 0 var(--loader-color-dark) inset, 
+              0 12px 18px 0 var(--loader-color-mid) inset,
+              0 36px 36px 0 var(--loader-color-light) inset,
+              0 0 3px 1.2px var(--loader-color-glow),
+              0 0 0 0 var(--loader-color-glow);
+          }
+          100% {
+            transform: rotate(450deg);
+            box-shadow: 0 6px 12px 0 var(--loader-color-dark) inset, 
+              0 12px 18px 0 var(--loader-color-mid) inset,
+              0 36px 36px 0 var(--loader-color-light) inset,
+              0 0 3px 1.2px var(--loader-color-glow),
+              0 0 0 0 var(--loader-color-glow);
+          }
+        }
+        @keyframes loaderLetter {
+          0%,
+          100% {
+            opacity: 0.4;
+          }
+          50% {
+            opacity: 1;
+          }
+        }
+        .animate-loaderCircle {
+          animation: loaderCircle 2s linear infinite;
+        }
+        .animate-loaderLetter {
+          animation: loaderLetter 1.5s ease-in-out infinite;
+        }
+      `)));
+};

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

@@ -0,0 +1,24 @@
+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 * as React from "react";
+import { cn } from "../../../../lib/utils";
+function Badge(_a) {
+    var { className, variant = "default" } = _a, props = __rest(_a, ["className", "variant"]);
+    const variantStyles = {
+        default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+    };
+    return (React.createElement("div", Object.assign({ className: cn("inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", variantStyles[variant], className) }, props)));
+}
+export { Badge };

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

@@ -0,0 +1,45 @@
+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 * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "../../../../lib/utils";
+const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-5 [&_svg]:shrink-0", {
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+            destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+            outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+            secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/70",
+            ghost: "hover:bg-accent hover:text-accent-foreground",
+            link: "text-primary underline-offset-4 hover:underline",
+            ghostOutline: "border border-secondary shadow-sm hover:bg-accent hover:text-accent-foreground text-muted-foreground hover:text-foreground",
+        },
+        size: {
+            default: "h-9 px-4 py-2",
+            sm: "h-8 rounded-md px-3 text-xs",
+            lg: "h-10 rounded-md px-8",
+            icon: "h-8 w-8",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+const Button = React.forwardRef((_a, ref) => {
+    var { className, variant, size, asChild = false } = _a, props = __rest(_a, ["className", "variant", "size", "asChild"]);
+    const Comp = asChild ? Slot : "button";
+    return (React.createElement(Comp, Object.assign({ className: cn(buttonVariants({ variant, size, className })), ref: ref }, props)));
+});
+Button.displayName = "Button";
+export { Button, buttonVariants };

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

@@ -0,0 +1,63 @@
+"use client";
+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 * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
+import { cn } from "../../../../lib/utils";
+import { Dialog, DialogContent } from "./dialog";
+const Command = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(CommandPrimitive, Object.assign({ ref: ref, className: cn("flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground", className) }, props)));
+});
+Command.displayName = CommandPrimitive.displayName;
+const CommandDialog = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return (React.createElement(Dialog, Object.assign({}, props),
+        React.createElement(DialogContent, { className: "overflow-hidden p-0" },
+            React.createElement(Command, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5" }, children))));
+};
+const CommandInput = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "" },
+        React.createElement(Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+        React.createElement(CommandPrimitive.Input, Object.assign({ ref: ref, className: cn("flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50", className) }, props))));
+});
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+const CommandList = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(CommandPrimitive.List, Object.assign({ ref: ref, className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className) }, props)));
+});
+CommandList.displayName = CommandPrimitive.List.displayName;
+const CommandEmpty = React.forwardRef((props, ref) => (React.createElement(CommandPrimitive.Empty, Object.assign({ ref: ref, className: "py-6 text-center text-sm" }, props))));
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+const CommandGroup = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(CommandPrimitive.Group, Object.assign({ ref: ref, className: cn("overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground", className) }, props)));
+});
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+const CommandSeparator = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(CommandPrimitive.Separator, Object.assign({ ref: ref, className: cn("-mx-1 h-px bg-border", className) }, props)));
+});
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+const CommandItem = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(CommandPrimitive.Item, Object.assign({ ref: ref, className: cn("relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", className) }, props)));
+});
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+const CommandShortcut = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement("span", Object.assign({ className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className) }, props)));
+};
+CommandShortcut.displayName = "CommandShortcut";
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };

package/dist/components/sandbox/guardian/ui/console-with-app.js

@@ -0,0 +1,17 @@
+"use client";
+import React from "react";
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
+import { cn } from "../../../../lib/utils";
+export default function ConsoleWithApp({ containerClassName, console, app, }) {
+    return (React.createElement("div", { className: cn("w-full h-full max-w-full max-h-full min-h-0 min-w-0 overflow-hidden", containerClassName) },
+        React.createElement(PanelGroup, { direction: "horizontal", className: "w-full h-full" },
+            React.createElement(Panel, { defaultSize: 37, minSize: 20, order: 1 },
+                React.createElement("div", { className: "h-full w-full" },
+                    React.createElement("div", { className: "flex-1 flex flex-col min-h-0 h-full" }, console))),
+            React.createElement(PanelResizeHandle, { className: "w-0 relative group flex-shrink-0" },
+                React.createElement("div", { className: "absolute inset-y-0 left-1/2 -translate-x-1/2 w-2 -ml-0.5 group-hover:bg-blue-400/20 transition-colors flex justify-center items-center" },
+                    React.createElement("div", { className: "h-full w-px bg-border group-hover:bg-blue-400 transition-colors" }))),
+            React.createElement(Panel, { defaultSize: 63, minSize: 40, order: 2 },
+                React.createElement("div", { className: "h-full w-full" },
+                    React.createElement("div", { className: "flex-1 flex flex-col min-h-0 h-full" }, app))))));
+}

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

@@ -0,0 +1,57 @@
+"use client";
+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 * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { cn } from "../../../../lib/utils";
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+const DialogOverlay = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(DialogPrimitive.Overlay, Object.assign({ ref: ref, className: cn("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className) }, props)));
+});
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+const DialogContent = React.forwardRef((_a, ref) => {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    return (React.createElement(DialogPortal, null,
+        React.createElement(DialogOverlay, null),
+        React.createElement(DialogPrimitive.Content, Object.assign({ ref: ref, className: cn("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", className) }, props),
+            children,
+            React.createElement(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground" },
+                React.createElement(X, { className: "h-4 w-4" }),
+                React.createElement("span", { className: "sr-only" }, "Close")))));
+});
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+const DialogHeader = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement("div", Object.assign({ className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className) }, props)));
+};
+DialogHeader.displayName = "DialogHeader";
+const DialogFooter = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement("div", Object.assign({ className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className) }, props)));
+};
+DialogFooter.displayName = "DialogFooter";
+const DialogTitle = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(DialogPrimitive.Title, Object.assign({ ref: ref, className: cn("text-lg font-semibold leading-none tracking-tight", className) }, props)));
+});
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+const DialogDescription = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(DialogPrimitive.Description, Object.assign({ ref: ref, className: cn("text-sm text-muted-foreground", className) }, props)));
+});
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };

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