@tscircuit/runframe 0.0.567 → 0.0.569

package/dist/runner.js

@@ -16,6 +16,7 @@ import {
   PcbViewerWithContainerHeight,
   SchematicViewer,
   Tabs,
+  TabsContent,
   TabsList,
   TabsTrigger,
   buttonVariants,
@@ -27,7 +28,7 @@ import {
   useOrderDialog,
   useOrderDialogCli,
   useRunFrameStore
-} from "./chunk-63RKCLSH.js";
+} from "./chunk-KMUV32CG.js";
 
 // lib/components/RunFrame/RunFrame.tsx
 import { createCircuitWebWorker } from "@tscircuit/eval/worker";
@@ -1053,7 +1054,6 @@ var mapTscircuitSnippetToSearchResult = (tscircuitSnippet) => {
 };
 
 // lib/components/ImportComponentDialog/ImportComponentDialog.tsx
-import { createSvgUrl as createPngUrl } from "@tscircuit/create-snippet-url";
 import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var ImportComponentDialog = ({
   isOpen,
@@ -1072,6 +1072,28 @@ var ImportComponentDialog = ({
   );
   const [detailsOpen, setDetailsOpen] = useState5(false);
   const [detailsComponent, setDetailsComponent] = useState5(null);
+  const [packageDetails, setPackageDetails] = useState5(null);
+  const [packageDetailsLoading, setPackageDetailsLoading] = useState5(false);
+  const [previewActiveTab, setPreviewActiveTab] = useState5(
+    "pcb"
+  );
+  const fetchPackageDetails = async (owner, name) => {
+    setPackageDetailsLoading(true);
+    try {
+      const response = await fetch(
+        `https://registry-api.tscircuit.com/packages/get?name=${encodeURIComponent(`${owner}/${name}`)}`
+      );
+      if (response.ok) {
+        const data = await response.json();
+        setPackageDetails(data.package || null);
+      }
+    } catch (error) {
+      console.error("Error fetching package details:", error);
+      setPackageDetails(null);
+    } finally {
+      setPackageDetailsLoading(false);
+    }
+  };
   const handleSearch = async () => {
     if (!searchQuery.trim()) return;
     setIsLoading(true);
@@ -1115,6 +1137,12 @@ var ImportComponentDialog = ({
   const showDetails = (component) => {
     setDetailsComponent(component);
     setDetailsOpen(true);
+    setPackageDetails(null);
+    setPreviewActiveTab("pcb");
+    if (component.source === "tscircuit.com" && component.owner) {
+      const packageName = component.name.split("/").pop() || component.name;
+      fetchPackageDetails(component.owner, packageName);
+    }
   };
   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: [
@@ -1140,13 +1168,22 @@ var ImportComponentDialog = ({
                   {
                     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, children: isLoading ? /* @__PURE__ */ jsx7(Loader22, { className: "rf-h-4 rf-w-4 rf-animate-spin" }) : "Search" })
+              /* @__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",
@@ -1200,89 +1237,162 @@ var ImportComponentDialog = ({
         )
       ] })
     ] }),
-    /* @__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__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsx7(AlertDialog, { open: detailsOpen, onOpenChange: setDetailsOpen, children: /* @__PURE__ */ jsxs4(AlertDialogContent, { className: "rf-max-w-5xl rf-max-h-[90vh] rf-overflow-hidden rf-flex rf-flex-col rf-overflow-y-auto", children: [
+      /* @__PURE__ */ jsx7(AlertDialogHeader, { 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(AlertDialogTitle, { 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,
+                    {
+                      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(
+                    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",
+                        {
+                          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" })
+                      ] }) })
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        ] }),
+        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("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__ */ jsx7("div", { className: "rf-text-center rf-text-zinc-500 rf-p-4", children: "No preview available" })
-      ] }),
-      /* @__PURE__ */ jsxs4("div", { className: "rf-flex rf-justify-between", children: [
-        /* @__PURE__ */ jsxs4(
+      /* @__PURE__ */ jsxs4(AlertDialogFooter, { 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-1",
+            className: "rf-gap-2",
             onClick: () => {
-              const url = detailsComponent?.source === "jlcpcb" ? `https://jlcpcb.com/partdetail/${detailsComponent.partNumber}` : `https://tscircuit.com/${detailsComponent.owner}/${detailsComponent?.name.split("/").pop()}`;
+              const url = `https://tscircuit.com/${detailsComponent?.owner}/${detailsComponent?.name.split("/").pop()}`;
               window.open(url, "_blank");
             },
             children: [
-              "View on",
-              " ",
-              detailsComponent?.source === "jlcpcb" ? "JLCPCB" : "tscircuit.com",
-              " ",
-              /* @__PURE__ */ jsx7(ExternalLink, { className: "rf-h-3 rf-w-3" })
+              /* @__PURE__ */ jsx7(ExternalLink, { className: "rf-h-4 rf-w-4" }),
+              "View on tscircuit.com"
             ]
           }
-        ),
-        /* @__PURE__ */ jsx7(
-          Button,
-          {
-            onClick: () => {
-              setDetailsOpen(false);
-              if (detailsComponent) {
-                onImport(detailsComponent);
-                onClose();
-              }
-            },
-            children: "Import Component"
-          }
-        )
+        ) }),
+        /* @__PURE__ */ jsxs4("div", { className: "rf-flex rf-gap-2", children: [
+          /* @__PURE__ */ jsx7(AlertDialogCancel, { 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",
+              children: "Import Component"
+            }
+          )
+        ] })
       ] })
     ] }) })
   ] });