@tscircuit/runframe 0.0.699 → 0.0.701

package/dist/runner.js

@@ -37,7 +37,7 @@ import {
   useOrderDialogCli,
   useRunFrameStore,
   useRunnerStore
-} from "./chunk-77DDNVNN.js";
+} from "./chunk-IZIOLTYT.js";
 
 // lib/components/RunFrame/RunFrame.tsx
 import { createCircuitWebWorker } from "@tscircuit/eval/worker";
@@ -235,7 +235,7 @@ var RunFrame = (props) => {
   const [renderLog, setRenderLog] = useState(null);
   const [autoroutingLog, setAutoroutingLog] = useState({});
   const [activeTab, setActiveTab] = useState(
-    props.defaultActiveTab ?? "pcb"
+    props.defaultActiveTab ?? props.defaultTab ?? "pcb"
   );
   useEffect(() => {
     if (props.debug) Debug.enable("run-frame*");
@@ -472,7 +472,9 @@ var RunFrame = (props) => {
     CircuitJsonPreview,
     {
       code: fsMap.get(props.entrypoint ?? props.mainComponentPath),
-      defaultActiveTab: props.defaultActiveTab,
+      defaultActiveTab: props.defaultActiveTab ?? props.defaultTab,
+      defaultTab: props.defaultTab,
+      availableTabs: props.availableTabs,
       showToggleFullScreen: props.showToggleFullScreen,
       autoroutingGraphics,
       autoroutingLog,
@@ -1071,7 +1073,7 @@ var mapTscircuitSnippetToSearchResult = (tscircuitSnippet) => {
 };
 
 // lib/components/ImportComponentDialog/ImportComponentDialog.tsx
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var ImportComponentDialog = ({
   isOpen,
   onClose,
@@ -1159,256 +1161,303 @@ var ImportComponentDialog = ({
     }
   };
   return /* @__PURE__ */ jsxs4(Dialog, { open: isOpen, onOpenChange: () => onClose(), children: [
-    /* @__PURE__ */ jsxs4(DialogContent, { className: "rf-max-w-3xl rf-w-full rf-max-h-[90vh] rf-overflow-y-auto rf-flex rf-flex-col", children: [
-      /* @__PURE__ */ jsxs4(DialogHeader, { children: [
-        /* @__PURE__ */ jsx7(DialogTitle, { children: "Import Component" }),
-        /* @__PURE__ */ jsx7(DialogDescription, { children: "Search for components from tscircuit.com or JLCPCB parts library." })
-      ] }),
-      /* @__PURE__ */ jsxs4(
-        Tabs,
-        {
-          value: activeTab,
-          onValueChange: (value) => setActiveTab(value),
-          children: [
-            /* @__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__ */ 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)...",
-                    className: "rf-pl-8",
-                    spellCheck: false,
-                    autoComplete: "off",
-                    value: searchQuery,
-                    onChange: (e) => setSearchQuery(e.target.value),
-                    onKeyDown: handleKeyDown
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx7(
-                Button,
-                {
-                  onClick: handleSearch,
-                  disabled: isLoading || searchQuery.trim().length < 1,
-                  children: isLoading ? /* @__PURE__ */ jsx7(Loader22, { className: "rf-h-4 rf-w-4 rf-animate-spin" }) : "Search"
-                }
-              )
-            ] }),
-            /* @__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__ */ 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__ */ jsx7("div", { className: "rf-flex rf-gap-2", children: result.source === "tscircuit.com" && /* @__PURE__ */ jsx7(
-                    Button,
-                    {
-                      variant: "outline",
-                      size: "sm",
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        showDetails(result);
-                      },
-                      children: "See Details"
-                    }
-                  ) })
-                ]
-              },
-              result.id
-            )) }) : 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__ */ jsxs4(DialogFooter, { children: [
-        /* @__PURE__ */ jsx7(Button, { variant: "outline", onClick: onClose, children: "Cancel" }),
-        /* @__PURE__ */ jsx7(
-          Button,
-          {
-            onClick: () => {
-              if (selectedComponent) {
-                onImport(selectedComponent);
-                onClose();
-              }
-            },
-            disabled: !selectedComponent,
-            children: "Import Component"
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx7(Dialog, { open: detailsOpen, onOpenChange: setDetailsOpen, children: /* @__PURE__ */ jsxs4(DialogContent, { className: "rf-max-w-5xl rf-max-h-[90vh] rf-overflow-hidden rf-flex rf-flex-col rf-overflow-y-auto", children: [
-      /* @__PURE__ */ jsx7(DialogHeader, { className: "rf-pb-4 rf-border-b", children: /* @__PURE__ */ jsx7("div", { className: "rf-flex rf-items-start rf-justify-between rf-gap-4", children: /* @__PURE__ */ jsx7("div", { className: "rf-flex-1 rf-min-w-0", children: /* @__PURE__ */ jsx7(DialogTitle, { className: "rf-text-xl rf-font-semibold rf-truncate", children: /* @__PURE__ */ jsx7(
-        "a",
-        {
-          href: `https://tscircuit.com/${detailsComponent?.owner}/${detailsComponent?.name}`,
-          target: "_blank",
-          rel: "noopener noreferrer",
-          className: "rf-text-black hover:rf-underline",
-          children: detailsComponent?.name?.split("/").pop() || detailsComponent?.name
-        }
-      ) }) }) }) }),
-      /* @__PURE__ */ jsxs4("div", { className: "rf-flex-1 rf-overflow-y-auto rf-py-4 rf-space-y-6", children: [
-        /* @__PURE__ */ jsx7("div", { children: /* @__PURE__ */ jsx7("div", { className: "rf-space-y-3", children: detailsComponent?.owner && /* @__PURE__ */ jsxs4("div", { children: [
-          /* @__PURE__ */ jsx7("label", { className: "rf-text-xs rf-font-medium rf-text-gray-500 rf-uppercase rf-tracking-wide", children: "Created by" }),
-          /* @__PURE__ */ jsx7("div", { className: "rf-mt-1 rf-text-sm rf-font-medium", children: /* @__PURE__ */ jsx7(
-            "a",
-            {
-              href: `https://tscircuit.com/${detailsComponent?.owner}`,
-              target: "_blank",
-              rel: "noopener noreferrer",
-              className: "rf-text-black hover:rf-underline",
-              children: detailsComponent?.owner
-            }
-          ) })
-        ] }) }) }),
-        /* @__PURE__ */ jsxs4("div", { children: [
-          /* @__PURE__ */ jsx7("h3", { className: "rf-text-lg rf-font-semibold rf-mb-4", children: "Preview" }),
+    /* @__PURE__ */ jsxs4(
+      DialogContent,
+      {
+        style: {
+          width: "calc(100vw - 2rem)"
+        },
+        className: "rf-rounded-sm rf-max-h-[90vh] rf-overflow-y-auto rf-flex rf-flex-col",
+        children: [
+          /* @__PURE__ */ jsxs4(DialogHeader, { children: [
+            /* @__PURE__ */ jsx7(DialogTitle, { className: "rf-text-lg sm:rf-text-xl", children: "Import Component" }),
+            /* @__PURE__ */ jsx7(DialogDescription, { className: "rf-text-sm", children: "Search for components from tscircuit.com or JLCPCB parts library." })
+          ] }),
           /* @__PURE__ */ jsxs4(
             Tabs,
             {
-              value: previewActiveTab,
-              onValueChange: (value) => setPreviewActiveTab(value),
+              value: activeTab,
+              onValueChange: (value) => setActiveTab(value),
               children: [
-                /* @__PURE__ */ jsxs4(TabsList, { className: "rf-inline-flex rf-h-9 rf-items-center rf-justify-center rf-rounded-lg rf-bg-zinc-100 rf-p-1 rf-text-zinc-500 dark:rf-bg-zinc-800 dark:rf-text-zinc-400", children: [
+                /* @__PURE__ */ jsxs4(TabsList, { className: "rf-grid rf-w-full rf-grid-cols-2 rf-h-auto", children: [
                   /* @__PURE__ */ jsx7(
                     TabsTrigger,
                     {
-                      value: "pcb",
-                      className: "rf-inline-flex rf-items-center rf-justify-center rf-whitespace-nowrap rf-rounded-md rf-px-3 rf-py-1 rf-text-sm rf-font-medium rf-ring-offset-white rf-transition-all focus-visible:rf-outline-none focus-visible:rf-ring-2 focus-visible:rf-ring-zinc-950 focus-visible:rf-ring-offset-2 disabled:rf-pointer-events-none disabled:rf-opacity-50 data-[state=active]:rf-bg-white data-[state=active]:rf-text-zinc-950 data-[state=active]:rf-shadow dark:rf-ring-offset-zinc-950 dark:focus-visible:rf-ring-zinc-300 dark:data-[state=active]:rf-bg-zinc-950 dark:data-[state=active]:rf-text-zinc-50",
-                      children: "PCB"
+                      value: "tscircuit.com",
+                      className: "rf-text-xs sm:rf-text-sm",
+                      children: "tscircuit.com"
                     }
                   ),
+                  /* @__PURE__ */ jsx7(TabsTrigger, { value: "jlcpcb", className: "rf-text-xs sm:rf-text-sm", children: "JLCPCB Parts" })
+                ] }),
+                /* @__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)...",
+                        className: "rf-pl-8",
+                        spellCheck: false,
+                        autoComplete: "off",
+                        value: searchQuery,
+                        onChange: (e) => setSearchQuery(e.target.value),
+                        onKeyDown: handleKeyDown
+                      }
+                    )
+                  ] }),
                   /* @__PURE__ */ jsx7(
-                    TabsTrigger,
+                    Button,
                     {
-                      value: "schematic",
-                      className: "rf-inline-flex rf-items-center rf-justify-center rf-whitespace-nowrap rf-rounded-md rf-px-3 rf-py-1 rf-text-sm rf-font-medium rf-ring-offset-white rf-transition-all focus-visible:rf-outline-none focus-visible:rf-ring-2 focus-visible:rf-ring-zinc-950 focus-visible:rf-ring-offset-2 disabled:rf-pointer-events-none disabled:rf-opacity-50 data-[state=active]:rf-bg-white data-[state=active]:rf-text-zinc-950 data-[state=active]:rf-shadow dark:rf-ring-offset-zinc-950 dark:focus-visible:rf-ring-zinc-300 dark:data-[state=active]:rf-bg-zinc-950 dark:data-[state=active]:rf-text-zinc-50",
-                      children: "Schematic"
+                      onClick: handleSearch,
+                      disabled: isLoading || searchQuery.trim().length < 1,
+                      className: "sm:rf-px-4 rf-px-3",
+                      children: isLoading ? /* @__PURE__ */ jsx7(Loader22, { className: "rf-h-4 rf-w-4 rf-animate-spin" }) : /* @__PURE__ */ jsxs4(Fragment2, { children: [
+                        /* @__PURE__ */ jsx7(Search, { className: "rf-h-4 rf-w-4 sm:rf-hidden" }),
+                        /* @__PURE__ */ jsx7("span", { className: "rf-hidden sm:rf-inline", children: "Search" })
+                      ] })
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs4("div", { className: "rf-mt-4", children: [
-                  /* @__PURE__ */ jsx7(
-                    TabsContent,
-                    {
-                      value: "pcb",
-                      className: "rf-border rf-rounded-lg rf-overflow-hidden rf-bg-gray-50",
-                      children: detailsComponent?.code ? /* @__PURE__ */ jsx7("div", { className: "rf-w-full rf-h-[400px] rf-bg-white rf-flex rf-items-center rf-justify-center rf-p-4", children: /* @__PURE__ */ jsx7(
-                        "img",
+                /* @__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-flex-col sm:rf-flex-row rf-items-start sm:rf-items-center rf-justify-between rf-cursor-pointer hover:rf-bg-zinc-100 rf-gap-2 ${selectedComponent?.id === result.id ? "rf-bg-zinc-100" : ""}`,
+                    onClick: () => setSelectedComponent(result),
+                    children: [
+                      /* @__PURE__ */ jsxs4("div", { className: "rf-flex-1 rf-min-w-0", children: [
+                        /* @__PURE__ */ jsx7("div", { className: "rf-font-medium rf-text-sm rf-truncate", children: result.name }),
+                        /* @__PURE__ */ jsxs4("div", { className: "rf-text-xs rf-text-zinc-500 rf-break-words", children: [
+                          result.partNumber && /* @__PURE__ */ jsx7("span", { className: "rf-mr-2", children: result.partNumber }),
+                          result.description
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsx7("div", { className: "rf-flex rf-gap-2 rf-flex-shrink-0 rf-w-full sm:rf-w-auto", children: result.source === "tscircuit.com" && /* @__PURE__ */ jsx7(
+                        Button,
+                        {
+                          variant: "outline",
+                          size: "sm",
+                          className: "rf-text-xs rf-w-full sm:rf-w-auto",
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            showDetails(result);
+                          },
+                          children: "See Details"
+                        }
+                      ) })
+                    ]
+                  },
+                  result.id
+                )) }) : 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__ */ jsxs4(DialogFooter, { className: "rf-flex rf-flex-col sm:rf-flex-row rf-gap-2", children: [
+            /* @__PURE__ */ jsx7(
+              Button,
+              {
+                variant: "outline",
+                onClick: onClose,
+                className: "rf-order-2 sm:rf-order-1",
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ jsx7(
+              Button,
+              {
+                onClick: () => {
+                  if (selectedComponent) {
+                    onImport(selectedComponent);
+                    onClose();
+                  }
+                },
+                disabled: !selectedComponent,
+                children: "Import Component"
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx7(Dialog, { open: detailsOpen, onOpenChange: setDetailsOpen, children: /* @__PURE__ */ jsxs4(
+      DialogContent,
+      {
+        showOverlay: false,
+        style: {
+          width: "calc(100vw - 2rem)"
+        },
+        className: "rf-max-w-5xl !rf-overflow-y-auto rf-max-h-[90vh] rf-overflow-hidden rf-flex rf-flex-col rf-rounded-sm",
+        children: [
+          /* @__PURE__ */ jsx7(DialogHeader, { className: "rf-pb-4 rf-border-b", children: /* @__PURE__ */ jsx7("div", { className: "rf-flex rf-items-start rf-justify-between rf-gap-4", children: /* @__PURE__ */ jsx7("div", { className: "rf-flex-1 rf-min-w-0", children: /* @__PURE__ */ jsx7(DialogTitle, { className: "rf-text-xl rf-font-semibold rf-truncate", children: /* @__PURE__ */ jsx7(
+            "a",
+            {
+              href: `https://tscircuit.com/${detailsComponent?.owner}/${detailsComponent?.name}`,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "rf-text-black hover:rf-underline",
+              children: detailsComponent?.name?.split("/").pop() || detailsComponent?.name
+            }
+          ) }) }) }) }),
+          /* @__PURE__ */ jsxs4("div", { className: "rf-flex-1 rf-overflow-y-auto rf-py-4 rf-space-y-6", children: [
+            /* @__PURE__ */ jsx7("div", { children: /* @__PURE__ */ jsx7("div", { className: "rf-space-y-3", children: detailsComponent?.owner && /* @__PURE__ */ jsxs4("div", { children: [
+              /* @__PURE__ */ jsx7("label", { className: "rf-text-xs rf-font-medium rf-text-gray-500 rf-uppercase rf-tracking-wide", children: "Created by" }),
+              /* @__PURE__ */ jsx7("div", { className: "rf-mt-1 rf-text-sm rf-font-medium", children: /* @__PURE__ */ jsx7(
+                "a",
+                {
+                  href: `https://tscircuit.com/${detailsComponent?.owner}`,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  className: "rf-text-black hover:rf-underline",
+                  children: detailsComponent?.owner
+                }
+              ) })
+            ] }) }) }),
+            /* @__PURE__ */ jsxs4("div", { children: [
+              /* @__PURE__ */ jsx7("h3", { className: "rf-text-lg rf-font-semibold rf-mb-4", children: "Preview" }),
+              /* @__PURE__ */ jsxs4(
+                Tabs,
+                {
+                  value: previewActiveTab,
+                  onValueChange: (value) => setPreviewActiveTab(value),
+                  children: [
+                    /* @__PURE__ */ jsxs4(TabsList, { className: "rf-inline-flex rf-h-9 rf-items-center rf-justify-center rf-rounded-lg rf-bg-zinc-100 rf-p-1 rf-text-zinc-500 dark:rf-bg-zinc-800 dark:rf-text-zinc-400", children: [
+                      /* @__PURE__ */ jsx7(
+                        TabsTrigger,
+                        {
+                          value: "pcb",
+                          className: "rf-inline-flex rf-items-center rf-justify-center rf-whitespace-nowrap rf-rounded-md rf-px-3 rf-py-1 rf-text-sm rf-font-medium rf-ring-offset-white rf-transition-all focus-visible:rf-outline-none focus-visible:rf-ring-2 focus-visible:rf-ring-zinc-950 focus-visible:rf-ring-offset-2 disabled:rf-pointer-events-none disabled:rf-opacity-50 data-[state=active]:rf-bg-white data-[state=active]:rf-text-zinc-950 data-[state=active]:rf-shadow dark:rf-ring-offset-zinc-950 dark:focus-visible:rf-ring-zinc-300 dark:data-[state=active]:rf-bg-zinc-950 dark:data-[state=active]:rf-text-zinc-50",
+                          children: "PCB"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx7(
+                        TabsTrigger,
                         {
-                          src: `https://registry-api.tscircuit.com/packages/images/${detailsComponent.owner}/${detailsComponent.name}/pcb.png`,
-                          alt: `${detailsComponent.name} PCB preview`,
-                          className: "rf-max-w-full rf-max-h-full rf-object-contain rf-rounded",
-                          onError: (e) => {
-                            const target = e.target;
-                            target.style.display = "none";
-                            const parent = target.parentElement;
-                            if (parent) {
-                              parent.innerHTML = '<div class="rf-text-center rf-text-gray-500"><div class="rf-text-sm rf-font-medium">PCB preview not available</div><div class="rf-text-xs rf-mt-1">Image failed to load</div></div>';
+                          value: "schematic",
+                          className: "rf-inline-flex rf-items-center rf-justify-center rf-whitespace-nowrap rf-rounded-md rf-px-3 rf-py-1 rf-text-sm rf-font-medium rf-ring-offset-white rf-transition-all focus-visible:rf-outline-none focus-visible:rf-ring-2 focus-visible:rf-ring-zinc-950 focus-visible:rf-ring-offset-2 disabled:rf-pointer-events-none disabled:rf-opacity-50 data-[state=active]:rf-bg-white data-[state=active]:rf-text-zinc-950 data-[state=active]:rf-shadow dark:rf-ring-offset-zinc-950 dark:focus-visible:rf-ring-zinc-300 dark:data-[state=active]:rf-bg-zinc-950 dark:data-[state=active]:rf-text-zinc-50",
+                          children: "Schematic"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs4("div", { className: "rf-mt-4", children: [
+                      /* @__PURE__ */ jsx7(
+                        TabsContent,
+                        {
+                          value: "pcb",
+                          className: "rf-border rf-rounded-lg rf-overflow-hidden rf-bg-gray-50",
+                          children: detailsComponent?.code ? /* @__PURE__ */ jsx7("div", { className: "rf-w-full rf-h-[400px] rf-bg-white rf-flex rf-items-center rf-justify-center rf-p-4", children: /* @__PURE__ */ jsx7(
+                            "img",
+                            {
+                              src: `https://registry-api.tscircuit.com/packages/images/${detailsComponent.owner}/${detailsComponent.name}/pcb.png`,
+                              alt: `${detailsComponent.name} PCB preview`,
+                              className: "rf-max-w-full rf-max-h-full rf-object-contain rf-rounded",
+                              onError: (e) => {
+                                const target = e.target;
+                                target.style.display = "none";
+                                const parent = target.parentElement;
+                                if (parent) {
+                                  parent.innerHTML = '<div class="rf-text-center rf-text-gray-500"><div class="rf-text-sm rf-font-medium">PCB preview not available</div><div class="rf-text-xs rf-mt-1">Image failed to load</div></div>';
+                                }
+                              }
                             }
-                          }
+                          ) }) : /* @__PURE__ */ jsx7("div", { className: "rf-h-[400px] rf-flex rf-items-center rf-justify-center rf-text-gray-500", children: /* @__PURE__ */ jsxs4("div", { className: "rf-text-center", children: [
+                            /* @__PURE__ */ jsx7("div", { className: "rf-text-sm rf-font-medium", children: "No PCB preview available" }),
+                            /* @__PURE__ */ jsx7("div", { className: "rf-text-xs rf-mt-1", children: "Preview cannot be generated" })
+                          ] }) })
                         }
-                      ) }) : /* @__PURE__ */ jsx7("div", { className: "rf-h-[400px] rf-flex rf-items-center rf-justify-center rf-text-gray-500", children: /* @__PURE__ */ jsxs4("div", { className: "rf-text-center", children: [
-                        /* @__PURE__ */ jsx7("div", { className: "rf-text-sm rf-font-medium", children: "No PCB preview available" }),
-                        /* @__PURE__ */ jsx7("div", { className: "rf-text-xs rf-mt-1", children: "Preview cannot be generated" })
-                      ] }) })
-                    }
-                  ),
-                  /* @__PURE__ */ jsx7(
-                    TabsContent,
-                    {
-                      value: "schematic",
-                      className: "rf-border rf-rounded-lg rf-overflow-hidden rf-bg-gray-50",
-                      children: detailsComponent?.code ? /* @__PURE__ */ jsx7("div", { className: "rf-w-full rf-h-[400px] rf-bg-white rf-flex rf-items-center rf-justify-center rf-p-4", children: /* @__PURE__ */ jsx7(
-                        "img",
+                      ),
+                      /* @__PURE__ */ jsx7(
+                        TabsContent,
                         {
-                          src: `https://registry-api.tscircuit.com/packages/images/${detailsComponent.owner}/${detailsComponent.name}/schematic.png`,
-                          alt: `${detailsComponent.name} schematic preview`,
-                          className: "rf-max-w-full rf-max-h-full rf-object-contain rf-rounded",
-                          onError: (e) => {
-                            const target = e.target;
-                            target.style.display = "none";
-                            const parent = target.parentElement;
-                            if (parent) {
-                              parent.innerHTML = '<div class="rf-text-center rf-text-gray-500"><div class="rf-text-sm rf-font-medium">Schematic preview not available</div><div class="rf-text-xs rf-mt-1">Image failed to load</div></div>';
+                          value: "schematic",
+                          className: "rf-border rf-rounded-lg rf-overflow-hidden rf-bg-gray-50",
+                          children: detailsComponent?.code ? /* @__PURE__ */ jsx7("div", { className: "rf-w-full rf-h-[400px] rf-bg-white rf-flex rf-items-center rf-justify-center rf-p-4", children: /* @__PURE__ */ jsx7(
+                            "img",
+                            {
+                              src: `https://registry-api.tscircuit.com/packages/images/${detailsComponent.owner}/${detailsComponent.name}/schematic.png`,
+                              alt: `${detailsComponent.name} schematic preview`,
+                              className: "rf-max-w-full rf-max-h-full rf-object-contain rf-rounded",
+                              onError: (e) => {
+                                const target = e.target;
+                                target.style.display = "none";
+                                const parent = target.parentElement;
+                                if (parent) {
+                                  parent.innerHTML = '<div class="rf-text-center rf-text-gray-500"><div class="rf-text-sm rf-font-medium">Schematic preview not available</div><div class="rf-text-xs rf-mt-1">Image failed to load</div></div>';
+                                }
+                              }
                             }
-                          }
+                          ) }) : /* @__PURE__ */ jsx7("div", { className: "rf-h-[400px] rf-flex rf-items-center rf-justify-center rf-text-gray-500", children: /* @__PURE__ */ jsxs4("div", { className: "rf-text-center", children: [
+                            /* @__PURE__ */ jsx7("div", { className: "rf-text-sm rf-font-medium", children: "No schematic preview available" }),
+                            /* @__PURE__ */ jsx7("div", { className: "rf-text-xs rf-mt-1", children: "Preview cannot be generated" })
+                          ] }) })
                         }
-                      ) }) : /* @__PURE__ */ jsx7("div", { className: "rf-h-[400px] rf-flex rf-items-center rf-justify-center rf-text-gray-500", children: /* @__PURE__ */ jsxs4("div", { className: "rf-text-center", children: [
-                        /* @__PURE__ */ jsx7("div", { className: "rf-text-sm rf-font-medium", children: "No schematic preview available" }),
-                        /* @__PURE__ */ jsx7("div", { className: "rf-text-xs rf-mt-1", children: "Preview cannot be generated" })
-                      ] }) })
+                      )
+                    ] })
+                  ]
+                }
+              )
+            ] }),
+            packageDetails?.ai_description && /* @__PURE__ */ jsxs4("div", { children: [
+              /* @__PURE__ */ jsx7("h3", { className: "rf-text-lg rf-font-semibold rf-mb-3", children: "AI Description" }),
+              /* @__PURE__ */ jsx7("div", { className: "rf-bg-gray-50 rf-border rf-border-gray-200 rf-rounded-lg rf-p-4", children: /* @__PURE__ */ jsx7("p", { className: "rf-text-sm rf-text-gray-700 rf-leading-relaxed", children: packageDetails.ai_description }) })
+            ] }),
+            packageDetails?.ai_usage_instructions && /* @__PURE__ */ jsxs4("div", { children: [
+              /* @__PURE__ */ jsx7("h3", { className: "rf-text-lg rf-font-semibold rf-mb-3", children: "Usage Instructions" }),
+              /* @__PURE__ */ jsx7("div", { className: "rf-bg-gray-50 rf-border rf-border-gray-200 rf-rounded-lg rf-p-4", children: /* @__PURE__ */ jsx7("p", { className: "rf-text-sm rf-text-gray-700 rf-leading-relaxed rf-whitespace-pre-wrap", children: packageDetails.ai_usage_instructions }) })
+            ] }),
+            packageDetailsLoading && /* @__PURE__ */ jsxs4("div", { className: "rf-flex rf-justify-center rf-text-center rf-items-center rf-gap-2 rf-text-gray-500", children: [
+              /* @__PURE__ */ jsx7(Loader22, { className: "rf-h-4 rf-w-4 rf-animate-spin" }),
+              /* @__PURE__ */ jsx7("span", { className: "rf-text-sm", children: "Loading package details..." })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs4(DialogFooter, { className: "rf-pt-4 rf-border-t rf-flex rf-flex-col sm:rf-flex-row rf-justify-between rf-items-stretch sm:rf-items-center rf-gap-2", children: [
+            /* @__PURE__ */ jsx7("div", { className: "rf-flex-1 rf-order-3 sm:rf-order-1", children: /* @__PURE__ */ jsxs4(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                className: "rf-gap-2 rf-w-full sm:rf-w-auto",
+                onClick: () => {
+                  const url = `https://tscircuit.com/${detailsComponent?.owner}/${detailsComponent?.name.split("/").pop()}`;
+                  window.open(url, "_blank");
+                },
+                children: [
+                  /* @__PURE__ */ jsx7(ExternalLink, { className: "rf-h-4 rf-w-4" }),
+                  "View on tscircuit.com"
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsxs4("div", { className: "rf-flex rf-flex-col sm:rf-flex-row rf-gap-2 sm:rf-gap-3 rf-order-1 sm:rf-order-2", children: [
+              /* @__PURE__ */ jsx7(
+                Button,
+                {
+                  variant: "outline",
+                  onClick: () => setDetailsOpen(false),
+                  className: "rf-order-2 sm:rf-order-1",
+                  children: "Close"
+                }
+              ),
+              /* @__PURE__ */ jsx7(
+                Button,
+                {
+                  onClick: () => {
+                    setDetailsOpen(false);
+                    if (detailsComponent) {
+                      onImport(detailsComponent);
+                      onClose();
                     }
-                  )
-                ] })
-              ]
-            }
-          )
-        ] }),
-        packageDetails?.ai_description && /* @__PURE__ */ jsxs4("div", { children: [
-          /* @__PURE__ */ jsx7("h3", { className: "rf-text-lg rf-font-semibold rf-mb-3", children: "AI Description" }),
-          /* @__PURE__ */ jsx7("div", { className: "rf-bg-gray-50 rf-border rf-border-gray-200 rf-rounded-lg rf-p-4", children: /* @__PURE__ */ jsx7("p", { className: "rf-text-sm rf-text-gray-700 rf-leading-relaxed", children: packageDetails.ai_description }) })
-        ] }),
-        packageDetails?.ai_usage_instructions && /* @__PURE__ */ jsxs4("div", { children: [
-          /* @__PURE__ */ jsx7("h3", { className: "rf-text-lg rf-font-semibold rf-mb-3", children: "Usage Instructions" }),
-          /* @__PURE__ */ jsx7("div", { className: "rf-bg-gray-50 rf-border rf-border-gray-200 rf-rounded-lg rf-p-4", children: /* @__PURE__ */ jsx7("p", { className: "rf-text-sm rf-text-gray-700 rf-leading-relaxed rf-whitespace-pre-wrap", children: packageDetails.ai_usage_instructions }) })
-        ] }),
-        packageDetailsLoading && /* @__PURE__ */ jsxs4("div", { className: "rf-flex rf-justify-center rf-text-center rf-items-center rf-gap-2 rf-text-gray-500", children: [
-          /* @__PURE__ */ jsx7(Loader22, { className: "rf-h-4 rf-w-4 rf-animate-spin" }),
-          /* @__PURE__ */ jsx7("span", { className: "rf-text-sm", children: "Loading package details..." })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs4(DialogFooter, { className: "rf-pt-4 rf-border-t rf-flex rf-justify-between rf-items-center", children: [
-        /* @__PURE__ */ jsx7("div", { className: "rf-flex-1", children: /* @__PURE__ */ jsxs4(
-          Button,
-          {
-            variant: "outline",
-            size: "sm",
-            className: "rf-gap-2",
-            onClick: () => {
-              const url = `https://tscircuit.com/${detailsComponent?.owner}/${detailsComponent?.name.split("/").pop()}`;
-              window.open(url, "_blank");
-            },
-            children: [
-              /* @__PURE__ */ jsx7(ExternalLink, { className: "rf-h-4 rf-w-4" }),
-              "View on tscircuit.com"
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsxs4("div", { className: "rf-flex rf-gap-2", children: [
-          /* @__PURE__ */ jsx7(Button, { variant: "outline", onClick: () => setDetailsOpen(false), children: "Close" }),
-          /* @__PURE__ */ jsx7(
-            Button,
-            {
-              onClick: () => {
-                setDetailsOpen(false);
-                if (detailsComponent) {
-                  onImport(detailsComponent);
-                  onClose();
+                  },
+                  className: "rf-bg-blue-600 hover:rf-bg-blue-700 rf-order-1 sm:rf-order-2",
+                  children: "Import Component"
                 }
-              },
-              className: "rf-bg-blue-600 hover:rf-bg-blue-700",
-              children: "Import Component"
-            }
-          )
-        ] })
-      ] })
-    ] }) })
+              )
+            ] })
+          ] })
+        ]
+      }
+    ) })
   ] });
 };
 
@@ -1508,7 +1557,7 @@ import { useState as useState8 } from "react";
 
 // lib/components/AiReviewDialog/ListAiReviewsView.tsx
 import { useEffect as useEffect8, useState as useState6 } from "react";
-import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var AiReviewListView = ({
   packageName,
   onSelectReview
@@ -1554,7 +1603,7 @@ var AiReviewListView = ({
       setCreating(false);
     }
   };
-  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
     /* @__PURE__ */ jsxs5(DialogHeader, { children: [
       /* @__PURE__ */ jsx8(DialogTitle, { children: "AI Review" }),
       /* @__PURE__ */ jsx8(DialogDescription, { children: "Select an AI review or request a new one." })
@@ -1575,7 +1624,7 @@ var AiReviewListView = ({
 // lib/components/AiReviewDialog/ViewAiReviewView.tsx
 import { useEffect as useEffect9, useMemo as useMemo2, useState as useState7 } from "react";
 import { marked } from "marked";
-import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var AiReviewViewView = ({
   review,
   onBack
@@ -1613,7 +1662,7 @@ var AiReviewViewView = ({
     () => marked.parse(review.ai_review_text || ""),
     [review.ai_review_text]
   );
-  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs6(Fragment4, { children: [
     /* @__PURE__ */ jsxs6(DialogHeader, { className: "rf-flex rf-flex-row rf-items-center rf-justify-between", children: [
       /* @__PURE__ */ jsx9(Button, { variant: "ghost", size: "sm", onClick: onBack, children: "Back" }),
       /* @__PURE__ */ jsx9(DialogTitle, { children: "AI Review" })
@@ -1748,7 +1797,7 @@ var importComponentFromJlcpcb = async (jlcpcbPartNumber) => {
 };
 
 // lib/components/RunFrameForCli/LeftHeader.tsx
-import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var RunframeCliLeftHeader = (props) => {
   const lastRunEvalVersion = useRunnerStore((s) => s.lastRunEvalVersion);
   const [snippetName, setSnippetName] = useState9(null);
@@ -1840,7 +1889,7 @@ var RunframeCliLeftHeader = (props) => {
   const circuitJson = useRunFrameStore((state) => state.circuitJson);
   const [isImportDialogOpen, setIsImportDialogOpen] = useState9(false);
   const [isAiReviewDialogOpen, setIsAiReviewDialogOpen] = useState9(false);
-  return /* @__PURE__ */ jsxs8(Fragment4, { children: [
+  return /* @__PURE__ */ jsxs8(Fragment5, { children: [
     /* @__PURE__ */ jsxs8(DropdownMenu, { children: [
       /* @__PURE__ */ jsx11(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx11("div", { className: "rf-whitespace-nowrap rf-text-xs font-medium rf-p-2 rf-mx-1 rf-cursor-pointer rf-relative", children: "File" }) }),
       /* @__PURE__ */ jsxs8(DropdownMenuContent, { children: [