@tscircuit/runframe 0.0.370 → 0.0.372

package/dist/runner.js

@@ -1,12 +1,5 @@
 import {
   API_BASE,
-  AlertDialog,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
   BomTable,
   Button,
   CadViewer,
@@ -25,6 +18,7 @@ import {
   Tabs,
   TabsList,
   TabsTrigger,
+  buttonVariants,
   cn,
   debug_default,
   linkify,
@@ -32,7 +26,7 @@ import {
   useOrderDialog,
   useOrderDialogCli,
   useRunFrameStore
-} from "./chunk-MAIBX4W6.js";
+} from "./chunk-ZHZYFWBK.js";
 
 // lib/components/RunFrame/RunFrame.tsx
 import { createCircuitWebWorker } from "@tscircuit/eval/worker";
@@ -720,12 +714,117 @@ var useEventHandler = (callback) => {
 // lib/components/RunFrameForCli/LeftHeader.tsx
 import "lucide-react";
 
-// lib/components/ui/checkbox.tsx
+// lib/components/ui/alert-dialog.tsx
 import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var AlertDialog = AlertDialogPrimitive.Root;
+var AlertDialogPortal = AlertDialogPrimitive.Portal;
+var AlertDialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
+  AlertDialogPrimitive.Overlay,
+  {
+    className: cn(
+      "rf-fixed rf-inset-0 rf-z-50 rf-bg-black/80 data-[state=open]:rf-animate-in data-[state=closed]:rf-animate-out data-[state=closed]:rf-fade-out-0 data-[state=open]:rf-fade-in-0",
+      className
+    ),
+    ...props,
+    ref
+  }
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+var AlertDialogContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs3(AlertDialogPortal, { children: [
+  /* @__PURE__ */ jsx4(AlertDialogOverlay, {}),
+  /* @__PURE__ */ jsx4(
+    AlertDialogPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "rf-fixed rf-left-[50%] rf-top-[50%] rf-z-50 rf-grid rf-w-full rf-max-w-lg rf-translate-x-[-50%] rf-translate-y-[-50%] rf-gap-4 rf-border rf-border-zinc-200 rf-bg-white rf-p-6 rf-shadow-lg rf-duration-200 data-[state=open]:rf-animate-in data-[state=closed]:rf-animate-out data-[state=closed]:rf-fade-out-0 data-[state=open]:rf-fade-in-0 data-[state=closed]:rf-zoom-out-95 data-[state=open]:rf-zoom-in-95 data-[state=closed]:rf-slide-out-to-left-1/2 data-[state=closed]:rf-slide-out-to-top-[48%] data-[state=open]:rf-slide-in-from-left-1/2 data-[state=open]:rf-slide-in-from-top-[48%] sm:rf-rounded-lg dark:rf-border-zinc-800 dark:rf-bg-zinc-950",
+        className
+      ),
+      ...props
+    }
+  )
+] }));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+var AlertDialogHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx4(
+  "div",
+  {
+    className: cn(
+      "rf-flex rf-flex-col rf-space-y-2 rf-text-center sm:rf-text-left",
+      className
+    ),
+    ...props
+  }
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+var AlertDialogFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx4(
+  "div",
+  {
+    className: cn(
+      "rf-flex rf-flex-col-reverse sm:rf-flex-row sm:rf-justify-end sm:rf-space-x-2",
+      className
+    ),
+    ...props
+  }
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+var AlertDialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
+  AlertDialogPrimitive.Title,
+  {
+    ref,
+    className: cn("rf-text-lg rf-font-semibold", className),
+    ...props
+  }
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+var AlertDialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
+  AlertDialogPrimitive.Description,
+  {
+    ref,
+    className: cn(
+      "rf-text-sm rf-text-zinc-500 dark:rf-text-zinc-400",
+      className
+    ),
+    ...props
+  }
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+var AlertDialogAction = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
+  AlertDialogPrimitive.Action,
+  {
+    ref,
+    className: cn(buttonVariants(), className),
+    ...props
+  }
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+var AlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
+  AlertDialogPrimitive.Cancel,
+  {
+    ref,
+    className: cn(
+      buttonVariants({ variant: "outline" }),
+      "rf-mt-2 sm:rf-mt-0",
+      className
+    ),
+    ...props
+  }
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+// lib/components/ui/checkbox.tsx
+import * as React2 from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Check } from "lucide-react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var Checkbox = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Checkbox = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
   CheckboxPrimitive.Root,
   {
     ref,
@@ -734,13 +833,13 @@ var Checkbox = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx4(
+    children: /* @__PURE__ */ jsx5(
       CheckboxPrimitive.Indicator,
       {
         className: cn(
           "rf-flex rf-items-center rf-justify-center rf-text-current"
         ),
-        children: /* @__PURE__ */ jsx4(Check, { className: "rf-h-4 rf-w-4" })
+        children: /* @__PURE__ */ jsx5(Check, { className: "rf-h-4 rf-w-4" })
       }
     )
   }
@@ -753,11 +852,11 @@ import { useState as useState5, useEffect as useEffect7 } from "react";
 import { Loader2 as Loader22, Search, ExternalLink } from "lucide-react";
 
 // lib/components/ui/input.tsx
-import * as React2 from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var Input = React2.forwardRef(
+import * as React3 from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Input = React3.forwardRef(
   ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx6(
       "input",
       {
         type,
@@ -839,7 +938,7 @@ var mapTscircuitSnippetToSearchResult = (tscircuitSnippet) => {
 
 // lib/components/ImportComponentDialog/ImportComponentDialog.tsx
 import { createSvgUrl as createPngUrl } from "@tscircuit/create-snippet-url";
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var ImportComponentDialog = ({
   isOpen,
   onClose,
@@ -901,26 +1000,26 @@ var ImportComponentDialog = ({
     setDetailsComponent(component);
     setDetailsOpen(true);
   };
-  return /* @__PURE__ */ jsxs3(AlertDialog, { open: isOpen, onOpenChange: () => onClose(), children: [
-    /* @__PURE__ */ jsxs3(AlertDialogContent, { className: "rf-max-w-3xl rf-w-full rf-max-h-[90vh] rf-overflow-y-auto rf-flex rf-flex-col", children: [
-      /* @__PURE__ */ jsxs3(AlertDialogHeader, { children: [
-        /* @__PURE__ */ jsx6(AlertDialogTitle, { children: "Import Component" }),
-        /* @__PURE__ */ jsx6(AlertDialogDescription, { children: "Search for components from tscircuit.com or JLCPCB parts library." })
+  return /* @__PURE__ */ jsxs4(AlertDialog, { open: isOpen, onOpenChange: () => onClose(), children: [
+    /* @__PURE__ */ jsxs4(AlertDialogContent, { className: "rf-max-w-3xl rf-w-full rf-max-h-[90vh] rf-overflow-y-auto rf-flex rf-flex-col", children: [
+      /* @__PURE__ */ jsxs4(AlertDialogHeader, { children: [
+        /* @__PURE__ */ jsx7(AlertDialogTitle, { children: "Import Component" }),
+        /* @__PURE__ */ jsx7(AlertDialogDescription, { children: "Search for components from tscircuit.com or JLCPCB parts library." })
       ] }),
-      /* @__PURE__ */ jsxs3(
+      /* @__PURE__ */ jsxs4(
         Tabs,
         {
           value: activeTab,
           onValueChange: (value) => setActiveTab(value),
           children: [
-            /* @__PURE__ */ jsxs3(TabsList, { className: "rf-grid rf-w-full rf-grid-cols-2", children: [
-              /* @__PURE__ */ jsx6(TabsTrigger, { value: "tscircuit.com", children: "tscircuit.com" }),
-              /* @__PURE__ */ jsx6(TabsTrigger, { value: "jlcpcb", children: "JLCPCB Parts" })
+            /* @__PURE__ */ jsxs4(TabsList, { className: "rf-grid rf-w-full rf-grid-cols-2", children: [
+              /* @__PURE__ */ jsx7(TabsTrigger, { value: "tscircuit.com", children: "tscircuit.com" }),
+              /* @__PURE__ */ jsx7(TabsTrigger, { value: "jlcpcb", children: "JLCPCB Parts" })
             ] }),
-            /* @__PURE__ */ jsxs3("div", { className: "rf-flex rf-items-center rf-gap-2 rf-mt-4", children: [
-              /* @__PURE__ */ jsxs3("div", { className: "rf-relative rf-flex-grow", children: [
-                /* @__PURE__ */ jsx6(Search, { className: "rf-absolute rf-left-2 rf-top-2.5 rf-h-4 rf-w-4 rf-text-muted-foreground" }),
-                /* @__PURE__ */ jsx6(
+            /* @__PURE__ */ jsxs4("div", { className: "rf-flex rf-items-center rf-gap-2 rf-mt-4", children: [
+              /* @__PURE__ */ jsxs4("div", { className: "rf-relative rf-flex-grow", children: [
+                /* @__PURE__ */ jsx7(Search, { className: "rf-absolute rf-left-2 rf-top-2.5 rf-h-4 rf-w-4 rf-text-muted-foreground" }),
+                /* @__PURE__ */ jsx7(
                   Input,
                   {
                     placeholder: activeTab === "tscircuit.com" ? "Search components..." : "Search JLCPCB parts (e.g. C14663)...",
@@ -931,22 +1030,22 @@ var ImportComponentDialog = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx6(Button, { onClick: handleSearch, disabled: isLoading, children: isLoading ? /* @__PURE__ */ jsx6(Loader22, { className: "rf-h-4 rf-w-4 rf-animate-spin" }) : "Search" })
+              /* @__PURE__ */ jsx7(Button, { onClick: handleSearch, disabled: isLoading, children: isLoading ? /* @__PURE__ */ jsx7(Loader22, { className: "rf-h-4 rf-w-4 rf-animate-spin" }) : "Search" })
             ] }),
-            /* @__PURE__ */ jsx6("div", { className: "rf-mt-4 rf-flex-1 rf-min-h-[200px] !rf-max-h-[40vh] !rf-overflow-y-auto rf-border rf-rounded-md", children: searchResults.length > 0 ? /* @__PURE__ */ jsx6("div", { className: "rf-divide-y", children: searchResults.map((result) => /* @__PURE__ */ jsxs3(
+            /* @__PURE__ */ jsx7("div", { className: "rf-mt-4 rf-flex-1 rf-min-h-[200px] !rf-max-h-[40vh] !rf-overflow-y-auto rf-border rf-rounded-md", children: searchResults.length > 0 ? /* @__PURE__ */ jsx7("div", { className: "rf-divide-y", children: searchResults.map((result) => /* @__PURE__ */ jsxs4(
               "div",
               {
                 className: `rf-p-3 rf-flex rf-items-center rf-justify-between rf-cursor-pointer hover:rf-bg-zinc-100 ${selectedComponent?.id === result.id ? "rf-bg-zinc-100" : ""}`,
                 onClick: () => setSelectedComponent(result),
                 children: [
-                  /* @__PURE__ */ jsxs3("div", { children: [
-                    /* @__PURE__ */ jsx6("div", { className: "rf-font-medium", children: result.name }),
-                    /* @__PURE__ */ jsxs3("div", { className: "rf-text-sm rf-text-zinc-500", children: [
-                      result.partNumber && /* @__PURE__ */ jsx6("span", { className: "rf-mr-2", children: result.partNumber }),
+                  /* @__PURE__ */ jsxs4("div", { children: [
+                    /* @__PURE__ */ jsx7("div", { className: "rf-font-medium", children: result.name }),
+                    /* @__PURE__ */ jsxs4("div", { className: "rf-text-sm rf-text-zinc-500", children: [
+                      result.partNumber && /* @__PURE__ */ jsx7("span", { className: "rf-mr-2", children: result.partNumber }),
                       result.description
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsx6("div", { className: "rf-flex rf-gap-2", children: result.source === "tscircuit.com" && /* @__PURE__ */ jsx6(
+                  /* @__PURE__ */ jsx7("div", { className: "rf-flex rf-gap-2", children: result.source === "tscircuit.com" && /* @__PURE__ */ jsx7(
                     Button,
                     {
                       variant: "outline",
@@ -961,16 +1060,16 @@ var ImportComponentDialog = ({
                 ]
               },
               result.id
-            )) }) : isLoading ? /* @__PURE__ */ jsxs3("div", { className: "rf-p-8 rf-text-center rf-text-zinc-500", children: [
-              /* @__PURE__ */ jsx6(Loader22, { className: "rf-h-8 rf-w-8 rf-animate-spin rf-mx-auto rf-mb-2" }),
-              /* @__PURE__ */ jsx6("p", { children: "Searching..." })
-            ] }) : /* @__PURE__ */ jsx6("div", { className: "rf-p-8 rf-text-center rf-text-zinc-500", children: hasSearched ? "No results found" : "Enter a search term to find components" }) })
+            )) }) : isLoading ? /* @__PURE__ */ jsxs4("div", { className: "rf-p-8 rf-text-center rf-text-zinc-500", children: [
+              /* @__PURE__ */ jsx7(Loader22, { className: "rf-h-8 rf-w-8 rf-animate-spin rf-mx-auto rf-mb-2" }),
+              /* @__PURE__ */ jsx7("p", { children: "Searching..." })
+            ] }) : /* @__PURE__ */ jsx7("div", { className: "rf-p-8 rf-text-center rf-text-zinc-500", children: hasSearched ? "No results found" : "Enter a search term to find components" }) })
           ]
         }
       ),
-      /* @__PURE__ */ jsxs3(AlertDialogFooter, { children: [
-        /* @__PURE__ */ jsx6(AlertDialogCancel, { onClick: onClose, children: "Cancel" }),
-        /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsxs4(AlertDialogFooter, { children: [
+        /* @__PURE__ */ jsx7(AlertDialogCancel, { onClick: onClose, children: "Cancel" }),
+        /* @__PURE__ */ jsx7(
           Button,
           {
             onClick: () => {
@@ -985,58 +1084,58 @@ var ImportComponentDialog = ({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx6(AlertDialog, { open: detailsOpen, onOpenChange: setDetailsOpen, children: /* @__PURE__ */ jsxs3(AlertDialogContent, { className: "!rf-max-h-[70%] !rf-overflow-y-auto rf-flex rf-flex-col !rf-max-w-[60vw] !rf-overflow-x-hidden", children: [
-      /* @__PURE__ */ jsxs3(AlertDialogHeader, { children: [
-        /* @__PURE__ */ jsx6(AlertDialogTitle, { children: detailsComponent?.name }),
-        /* @__PURE__ */ jsx6(AlertDialogDescription, { children: "Detailed information about the selected component" }),
-        /* @__PURE__ */ jsxs3("div", { className: "rf-text-sm rf-text-muted-foreground", children: [
-          detailsComponent?.partNumber && /* @__PURE__ */ jsx6("div", { className: "rf-font-mono rf-text-sm rf-mb-2", children: detailsComponent.partNumber }),
+    /* @__PURE__ */ jsx7(AlertDialog, { open: detailsOpen, onOpenChange: setDetailsOpen, children: /* @__PURE__ */ jsxs4(AlertDialogContent, { className: "!rf-max-h-[70%] !rf-overflow-y-auto rf-flex rf-flex-col !rf-max-w-[60vw] !rf-overflow-x-hidden", children: [
+      /* @__PURE__ */ jsxs4(AlertDialogHeader, { children: [
+        /* @__PURE__ */ jsx7(AlertDialogTitle, { children: detailsComponent?.name }),
+        /* @__PURE__ */ jsx7(AlertDialogDescription, { children: "Detailed information about the selected component" }),
+        /* @__PURE__ */ jsxs4("div", { className: "rf-text-sm rf-text-muted-foreground", children: [
+          detailsComponent?.partNumber && /* @__PURE__ */ jsx7("div", { className: "rf-font-mono rf-text-sm rf-mb-2", children: detailsComponent.partNumber }),
           detailsComponent?.description
         ] })
       ] }),
-      detailsComponent?.source === "jlcpcb" && /* @__PURE__ */ jsxs3("div", { className: "rf-my-4 rf-border rf-rounded-md rf-p-4", children: [
-        /* @__PURE__ */ jsx6("div", { className: "rf-text-sm rf-font-medium rf-mb-2", children: "JLCPCB Details" }),
-        /* @__PURE__ */ jsxs3("div", { className: "rf-grid rf-grid-cols-2 rf-gap-2", children: [
-          detailsComponent.package && /* @__PURE__ */ jsxs3("div", { className: "rf-flex rf-flex-col", children: [
-            /* @__PURE__ */ jsx6("span", { className: "rf-text-xs rf-text-zinc-500", children: "Package" }),
-            /* @__PURE__ */ jsx6("span", { className: "rf-font-medium", children: detailsComponent.package })
+      detailsComponent?.source === "jlcpcb" && /* @__PURE__ */ jsxs4("div", { className: "rf-my-4 rf-border rf-rounded-md rf-p-4", children: [
+        /* @__PURE__ */ jsx7("div", { className: "rf-text-sm rf-font-medium rf-mb-2", children: "JLCPCB Details" }),
+        /* @__PURE__ */ jsxs4("div", { className: "rf-grid rf-grid-cols-2 rf-gap-2", children: [
+          detailsComponent.package && /* @__PURE__ */ jsxs4("div", { className: "rf-flex rf-flex-col", children: [
+            /* @__PURE__ */ jsx7("span", { className: "rf-text-xs rf-text-zinc-500", children: "Package" }),
+            /* @__PURE__ */ jsx7("span", { className: "rf-font-medium", children: detailsComponent.package })
           ] }),
-          detailsComponent.price !== void 0 && /* @__PURE__ */ jsxs3("div", { className: "rf-flex rf-flex-col", children: [
-            /* @__PURE__ */ jsx6("span", { className: "rf-text-xs rf-text-zinc-500", children: "Price" }),
-            /* @__PURE__ */ jsxs3("span", { className: "rf-font-medium", children: [
+          detailsComponent.price !== void 0 && /* @__PURE__ */ jsxs4("div", { className: "rf-flex rf-flex-col", children: [
+            /* @__PURE__ */ jsx7("span", { className: "rf-text-xs rf-text-zinc-500", children: "Price" }),
+            /* @__PURE__ */ jsxs4("span", { className: "rf-font-medium", children: [
               "$",
               detailsComponent.price.toFixed(4)
             ] })
           ] })
         ] })
       ] }),
-      detailsComponent?.source === "tscircuit.com" && /* @__PURE__ */ jsxs3("div", { className: "rf-my-4 rf-border rf-rounded-md rf-p-4 !rf-max-w-[60vw] !rf-overflow-x-hidden", children: [
-        /* @__PURE__ */ jsx6("div", { className: "rf-text-sm rf-font-medium rf-mb-2", children: "tscircuit Details" }),
-        /* @__PURE__ */ jsx6("div", { className: "rf-grid rf-grid-cols-2 rf-gap-2", children: detailsComponent.owner && /* @__PURE__ */ jsxs3("div", { className: "rf-flex rf-flex-col", children: [
-          /* @__PURE__ */ jsx6("span", { className: "rf-text-xs rf-text-zinc-500", children: "Owner" }),
-          /* @__PURE__ */ jsx6("span", { className: "rf-font-medium", children: detailsComponent.owner })
+      detailsComponent?.source === "tscircuit.com" && /* @__PURE__ */ jsxs4("div", { className: "rf-my-4 rf-border rf-rounded-md rf-p-4 !rf-max-w-[60vw] !rf-overflow-x-hidden", children: [
+        /* @__PURE__ */ jsx7("div", { className: "rf-text-sm rf-font-medium rf-mb-2", children: "tscircuit Details" }),
+        /* @__PURE__ */ jsx7("div", { className: "rf-grid rf-grid-cols-2 rf-gap-2", children: detailsComponent.owner && /* @__PURE__ */ jsxs4("div", { className: "rf-flex rf-flex-col", children: [
+          /* @__PURE__ */ jsx7("span", { className: "rf-text-xs rf-text-zinc-500", children: "Owner" }),
+          /* @__PURE__ */ jsx7("span", { className: "rf-font-medium", children: detailsComponent.owner })
         ] }) }),
-        detailsComponent.code && /* @__PURE__ */ jsxs3("div", { className: "rf-mt-2", children: [
-          /* @__PURE__ */ jsx6("div", { className: "rf-text-xs rf-text-zinc-500 rf-mb-1", children: "Code Preview" }),
-          /* @__PURE__ */ jsxs3("pre", { className: "rf-bg-zinc-50 rf-p-2 rf-rounded rf-text-xs rf-font-mono rf-max-h-32 rf-overflow-y-auto", children: [
+        detailsComponent.code && /* @__PURE__ */ jsxs4("div", { className: "rf-mt-2", children: [
+          /* @__PURE__ */ jsx7("div", { className: "rf-text-xs rf-text-zinc-500 rf-mb-1", children: "Code Preview" }),
+          /* @__PURE__ */ jsxs4("pre", { className: "rf-bg-zinc-50 rf-p-2 rf-rounded rf-text-xs rf-font-mono rf-max-h-32 rf-overflow-y-auto", children: [
             detailsComponent.code.substring(0, 500),
             detailsComponent.code.length > 500 && "..."
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs3("div", { className: "rf-my-4 rf-border rf-rounded-md rf-p-4", children: [
-        /* @__PURE__ */ jsx6("div", { className: "rf-text-sm rf-font-medium rf-mb-2", children: "Preview" }),
-        detailsComponent?.source === "tscircuit.com" && detailsComponent.code ? /* @__PURE__ */ jsx6("div", { className: "rf-flex rf-justify-center", children: /* @__PURE__ */ jsx6("div", { className: "rf-border rf-rounded rf-p-4 rf-bg-zinc-50", children: /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsxs4("div", { className: "rf-my-4 rf-border rf-rounded-md rf-p-4", children: [
+        /* @__PURE__ */ jsx7("div", { className: "rf-text-sm rf-font-medium rf-mb-2", children: "Preview" }),
+        detailsComponent?.source === "tscircuit.com" && detailsComponent.code ? /* @__PURE__ */ jsx7("div", { className: "rf-flex rf-justify-center", children: /* @__PURE__ */ jsx7("div", { className: "rf-border rf-rounded rf-p-4 rf-bg-zinc-50", children: /* @__PURE__ */ jsx7(
           "img",
           {
             src: createPngUrl(detailsComponent.code, "pcb"),
             alt: detailsComponent.name,
             className: "rf-w-full rf-aspect-video rf-object-contain"
           }
-        ) }) }) : /* @__PURE__ */ jsx6("div", { className: "rf-text-center rf-text-zinc-500 rf-p-4", children: "No preview available" })
+        ) }) }) : /* @__PURE__ */ jsx7("div", { className: "rf-text-center rf-text-zinc-500 rf-p-4", children: "No preview available" })
       ] }),
-      /* @__PURE__ */ jsxs3("div", { className: "rf-flex rf-justify-between", children: [
-        /* @__PURE__ */ jsxs3(
+      /* @__PURE__ */ jsxs4("div", { className: "rf-flex rf-justify-between", children: [
+        /* @__PURE__ */ jsxs4(
           Button,
           {
             variant: "outline",
@@ -1051,11 +1150,11 @@ var ImportComponentDialog = ({
               " ",
               detailsComponent?.source === "jlcpcb" ? "JLCPCB" : "tscircuit.com",
               " ",
-              /* @__PURE__ */ jsx6(ExternalLink, { className: "rf-h-3 rf-w-3" })
+              /* @__PURE__ */ jsx7(ExternalLink, { className: "rf-h-3 rf-w-3" })
             ]
           }
         ),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           Button,
           {
             onClick: () => {
@@ -1205,7 +1304,7 @@ var importComponentFromJlcpcb = async (jlcpcbPartNumber) => {
 };
 
 // lib/components/RunFrameForCli/LeftHeader.tsx
-import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var RunframeCliLeftHeader = (props) => {
   const lastRunEvalVersion = useRunnerStore((s) => s.lastRunEvalVersion);
   const [snippetName, setSnippetName] = useState6(null);
@@ -1296,11 +1395,11 @@ var RunframeCliLeftHeader = (props) => {
   };
   const circuitJson = useRunFrameStore((state) => state.circuitJson);
   const [isImportDialogOpen, setIsImportDialogOpen] = useState6(false);
-  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    /* @__PURE__ */ jsxs4(DropdownMenu, { children: [
-      /* @__PURE__ */ jsx7(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx7("div", { className: "rf-whitespace-nowrap rf-text-xs font-medium rf-p-2 rf-mx-1 rf-cursor-pointer rf-relative", children: "File" }) }),
-      /* @__PURE__ */ jsxs4(DropdownMenuContent, { children: [
-        /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsxs5(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx8(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx8("div", { className: "rf-whitespace-nowrap rf-text-xs font-medium rf-p-2 rf-mx-1 rf-cursor-pointer rf-relative", children: "File" }) }),
+      /* @__PURE__ */ jsxs5(DropdownMenuContent, { children: [
+        /* @__PURE__ */ jsx8(
           DropdownMenuItem,
           {
             className: "rf-text-xs",
@@ -1309,7 +1408,7 @@ var RunframeCliLeftHeader = (props) => {
             children: isSaving ? "Saving..." : "Push"
           }
         ),
-        parseInt(window.location.port) > 5e3 && /* @__PURE__ */ jsx7(
+        parseInt(window.location.port) > 5e3 && /* @__PURE__ */ jsx8(
           DropdownMenuItem,
           {
             className: "rf-text-xs",
@@ -1319,7 +1418,7 @@ var RunframeCliLeftHeader = (props) => {
             children: "Order"
           }
         ),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           DropdownMenuItem,
           {
             className: "rf-text-xs",
@@ -1328,8 +1427,8 @@ var RunframeCliLeftHeader = (props) => {
             children: "Import"
           }
         ),
-        /* @__PURE__ */ jsxs4(DropdownMenuSub, { children: [
-          /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsxs5(DropdownMenuSub, { children: [
+          /* @__PURE__ */ jsx8(
             DropdownMenuSubTrigger,
             {
               className: "rf-text-xs",
@@ -1337,7 +1436,7 @@ var RunframeCliLeftHeader = (props) => {
               children: isExporting ? "Exporting..." : "Export"
             }
           ),
-          /* @__PURE__ */ jsx7(DropdownMenuPortal, { children: /* @__PURE__ */ jsx7(DropdownMenuSubContent, { children: availableExports.map((exp, i) => /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8(DropdownMenuPortal, { children: /* @__PURE__ */ jsx8(DropdownMenuSubContent, { children: availableExports.map((exp, i) => /* @__PURE__ */ jsx8(
             DropdownMenuItem,
             {
               onSelect: () => {
@@ -1352,16 +1451,16 @@ var RunframeCliLeftHeader = (props) => {
                 });
               },
               disabled: isExporting,
-              children: /* @__PURE__ */ jsx7("span", { className: "rf-text-xs", children: exp.name })
+              children: /* @__PURE__ */ jsx8("span", { className: "rf-text-xs", children: exp.name })
             },
             i
           )) }) })
         ] }),
-        /* @__PURE__ */ jsxs4(DropdownMenuSub, { children: [
-          /* @__PURE__ */ jsx7(DropdownMenuSubTrigger, { className: "rf-text-xs", children: "Advanced" }),
-          /* @__PURE__ */ jsx7(DropdownMenuPortal, { children: /* @__PURE__ */ jsxs4(DropdownMenuSubContent, { children: [
-            /* @__PURE__ */ jsx7(DropdownMenuItem, { className: "rf-flex rf-items-center rf-gap-2", children: /* @__PURE__ */ jsxs4("div", { className: "rf-flex rf-items-center rf-gap-2", children: [
-              /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsxs5(DropdownMenuSub, { children: [
+          /* @__PURE__ */ jsx8(DropdownMenuSubTrigger, { className: "rf-text-xs", children: "Advanced" }),
+          /* @__PURE__ */ jsx8(DropdownMenuPortal, { children: /* @__PURE__ */ jsxs5(DropdownMenuSubContent, { children: [
+            /* @__PURE__ */ jsx8(DropdownMenuItem, { className: "rf-flex rf-items-center rf-gap-2", children: /* @__PURE__ */ jsxs5("div", { className: "rf-flex rf-items-center rf-gap-2", children: [
+              /* @__PURE__ */ jsx8(
                 Checkbox,
                 {
                   id: "load-latest-eval",
@@ -1371,7 +1470,7 @@ var RunframeCliLeftHeader = (props) => {
                   }
                 }
               ),
-              /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx8(
                 "label",
                 {
                   htmlFor: "load-latest-eval",
@@ -1380,31 +1479,31 @@ var RunframeCliLeftHeader = (props) => {
                 }
               )
             ] }) }),
-            lastRunEvalVersion && /* @__PURE__ */ jsx7(DropdownMenuItem, { className: "rf-flex rf-items-center rf-gap-2", children: /* @__PURE__ */ jsx7("div", { className: "rf-flex rf-items-center rf-gap-2", children: /* @__PURE__ */ jsxs4("span", { className: "rf-text-xs", children: [
+            lastRunEvalVersion && /* @__PURE__ */ jsx8(DropdownMenuItem, { className: "rf-flex rf-items-center rf-gap-2", children: /* @__PURE__ */ jsx8("div", { className: "rf-flex rf-items-center rf-gap-2", children: /* @__PURE__ */ jsxs5("span", { className: "rf-text-xs", children: [
               "@tscircuit/eval@",
               lastRunEvalVersion
             ] }) }) }),
-            /* @__PURE__ */ jsx7(
+            /* @__PURE__ */ jsx8(
               DropdownMenuItem,
               {
                 className: "rf-flex rf-items-center rf-gap-2",
                 onClick: () => {
                   window.open("/api/admin", "_blank");
                 },
-                children: /* @__PURE__ */ jsx7("div", { className: "rf-flex rf-items-center rf-gap-2", children: /* @__PURE__ */ jsx7("span", { className: "rf-text-xs", children: "CLI Admin Panel" }) })
+                children: /* @__PURE__ */ jsx8("div", { className: "rf-flex rf-items-center rf-gap-2", children: /* @__PURE__ */ jsx8("span", { className: "rf-text-xs", children: "CLI Admin Panel" }) })
               }
             )
           ] }) })
         ] })
       ] }),
-      /* @__PURE__ */ jsx7(AlertDialog, { open: isError, onOpenChange: setIsError, children: /* @__PURE__ */ jsxs4(AlertDialogContent, { children: [
-        /* @__PURE__ */ jsxs4(AlertDialogHeader, { children: [
-          /* @__PURE__ */ jsx7(AlertDialogTitle, { children: "Error Saving Snippet" }),
-          /* @__PURE__ */ jsx7(AlertDialogDescription, { children: errorMessage })
+      /* @__PURE__ */ jsx8(AlertDialog, { open: isError, onOpenChange: setIsError, children: /* @__PURE__ */ jsxs5(AlertDialogContent, { children: [
+        /* @__PURE__ */ jsxs5(AlertDialogHeader, { children: [
+          /* @__PURE__ */ jsx8(AlertDialogTitle, { children: "Error Saving Snippet" }),
+          /* @__PURE__ */ jsx8(AlertDialogDescription, { children: errorMessage })
         ] }),
-        /* @__PURE__ */ jsx7(AlertDialogFooter, { children: /* @__PURE__ */ jsx7(AlertDialogCancel, { onClick: () => setIsError(false), children: "Dismiss" }) })
+        /* @__PURE__ */ jsx8(AlertDialogFooter, { children: /* @__PURE__ */ jsx8(AlertDialogCancel, { onClick: () => setIsError(false), children: "Dismiss" }) })
       ] }) }),
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8(
         SelectSnippetDialog,
         {
           snippetNames: availableSnippets ?? [],
@@ -1423,7 +1522,7 @@ var RunframeCliLeftHeader = (props) => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       ImportComponentDialog,
       {
         isOpen: isImportDialogOpen,
@@ -1456,8 +1555,8 @@ var RunframeCliLeftHeader = (props) => {
         }
       }
     ),
-    /* @__PURE__ */ jsx7(Toaster, { position: "top-center", reverseOrder: false }),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(Toaster, { position: "top-center", reverseOrder: false }),
+    /* @__PURE__ */ jsx8(
       orderDialog.OrderDialog,
       {
         isOpen: orderDialog.isOpen,
@@ -1470,21 +1569,21 @@ var RunframeCliLeftHeader = (props) => {
 };
 
 // lib/components/RunFrameForCli/RunFrameForCli.tsx
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var RunFrameForCli = (props) => {
   const [shouldLoadLatestEval, setLoadLatestEval] = useLocalStorageState(
     "load-latest-eval",
     true
   );
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     RunFrameWithApi,
     {
       debug: props.debug,
       forceLatestEvalVersion: shouldLoadLatestEval,
       defaultToFullScreen: true,
       showToggleFullScreen: false,
-      leftHeaderContent: /* @__PURE__ */ jsxs5("div", { className: "rf-flex rf-items-center rf-justify-between", children: [
-        /* @__PURE__ */ jsx8(
+      leftHeaderContent: /* @__PURE__ */ jsxs6("div", { className: "rf-flex rf-items-center rf-justify-between", children: [
+        /* @__PURE__ */ jsx9(
           RunframeCliLeftHeader,
           {
             shouldLoadLatestEval,