@tscircuit/runframe 0.0.995 → 0.0.996

package/dist/runner.js

@@ -4,26 +4,35 @@ import {
   Button,
   CadViewer,
   CircuitJsonPreview,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
   FileMenuLeftHeader,
-  ImportComponentDialog,
+  ImportComponentDialog2,
+  ImportComponentDialogForCli,
+  Input,
   PCBViewer,
   PcbViewerWithContainerHeight,
   SchematicViewer,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
   cn,
   debug_default,
   linkify,
-  mapJLCComponentToSearchResult,
-  mapTscircuitSnippetToSearchResult,
   registryKy,
-  searchJLCComponents,
-  searchTscircuitComponents,
+  toast,
   useLocalStorageState,
   useOrderDialog,
   useOrderDialogCli,
   useRunFrameStore,
   useRunnerStore,
   useStyles
-} from "./chunk-Z3QYGCIG.js";
+} from "./chunk-X3W75RUU.js";
 
 // lib/components/RunFrame/RunFrame.tsx
 import { createCircuitWebWorker } from "@tscircuit/eval/worker";
@@ -1392,11 +1401,586 @@ var RunFrameForCli = (props) => {
   );
 };
 
+// lib/components/ImportComponentDialog/ImportComponentDialog.tsx
+import "react";
+import { useState as useState6, useEffect as useEffect6 } from "react";
+import { Loader2 as Loader22, Search as Search2, ExternalLink } from "lucide-react";
+
+// lib/components/ImportComponentDialog/jlc-api.ts
+var searchJLCComponents = async (query, limit = 10) => {
+  try {
+    const encodedQuery = encodeURIComponent(query);
+    const response = await fetch(
+      `https://jlcsearch.tscircuit.com/api/search?limit=${limit}&q=${encodedQuery}`
+    );
+    if (!response.ok) {
+      throw new Error(
+        `JLC API error: ${response.status} ${response.statusText}`
+      );
+    }
+    const data = await response.json();
+    return data.components || [];
+  } catch (error) {
+    console.error("Error searching JLC components:", error);
+    throw error;
+  }
+};
+var mapJLCComponentToSearchResult = (jlcComponent) => {
+  return {
+    id: `jlc-${jlcComponent.lcsc}`,
+    name: jlcComponent.mfr,
+    description: jlcComponent.description,
+    source: "jlcpcb",
+    partNumber: `C${jlcComponent.lcsc}`,
+    package: jlcComponent.package,
+    price: jlcComponent.price
+  };
+};
+
+// lib/components/ImportComponentDialog/kicad-api.ts
+import Fuse from "fuse.js";
+var KICAD_FOOTPRINTS = null;
+var KICAD_FOOTPRINTS_PROMISE = null;
+var getKicadFootprints = async () => {
+  if (KICAD_FOOTPRINTS) return KICAD_FOOTPRINTS;
+  if (KICAD_FOOTPRINTS_PROMISE) return KICAD_FOOTPRINTS_PROMISE;
+  KICAD_FOOTPRINTS_PROMISE = fetch(
+    "https://kicad-mod-cache.tscircuit.com/kicad_files.json"
+  ).then((r) => r.json()).then((footprints) => {
+    KICAD_FOOTPRINTS = footprints;
+    KICAD_FOOTPRINTS_PROMISE = null;
+    return footprints;
+  });
+  return KICAD_FOOTPRINTS_PROMISE;
+};
+var fuse = null;
+var searchKicadFootprints = async (query, limit = 20) => {
+  const footprints = await getKicadFootprints();
+  if (!fuse) {
+    fuse = new Fuse(footprints);
+  }
+  return fuse.search(query).slice(0, limit).map((r) => r.item);
+};
+var mapKicadFootprintToSearchResult = (footprintPath) => {
+  const cleanedFootprint = footprintPath.replace(".pretty/", ":").replace(".kicad_mod", "");
+  const footprintString = `kicad:${cleanedFootprint}`;
+  return {
+    id: `kicad-${footprintPath}`,
+    name: footprintString,
+    description: cleanedFootprint,
+    source: "kicad"
+  };
+};
+
+// lib/components/ImportComponentDialog/tscircuit-registry-api.ts
+var searchTscircuitComponents = async (query) => {
+  try {
+    const response = await fetch(
+      "https://registry-api.tscircuit.com/packages/search",
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({ query })
+      }
+    );
+    if (!response.ok) {
+      throw new Error(
+        `tscircuit Registry API error: ${response.status} ${response.statusText}`
+      );
+    }
+    const data = await response.json();
+    return data.packages || [];
+  } catch (error) {
+    console.error("Error searching tscircuit components:", error);
+    throw error;
+  }
+};
+var mapTscircuitSnippetToSearchResult = (tscircuitSnippet) => {
+  return {
+    id: `tscircuit-${tscircuitSnippet.package_id}`,
+    name: tscircuitSnippet.unscoped_name,
+    description: tscircuitSnippet.description || `Component by ${tscircuitSnippet.owner_github_username}`,
+    source: "tscircuit.com",
+    partNumber: tscircuitSnippet.name,
+    owner: String(tscircuitSnippet.owner_github_username)
+  };
+};
+
+// lib/optional-features/importing/import-component-from-jlcpcb.ts
+import { fetchEasyEDAComponent, convertRawEasyToTsx } from "easyeda/browser";
+import ky from "ky";
+var importComponentFromJlcpcb = async (jlcpcbPartNumber, opts) => {
+  const component = await fetchEasyEDAComponent(jlcpcbPartNumber, {
+    // @ts-ignore
+    fetch: (url, options) => {
+      return fetch(`${API_BASE}/proxy`, {
+        ...options,
+        headers: {
+          ...options?.headers,
+          "X-Target-Url": url.toString(),
+          "X-Sender-Origin": options?.headers?.origin ?? "",
+          "X-Sender-Host": options?.headers?.host ?? "https://easyeda.com",
+          "X-Sender-Referer": options?.headers?.referer ?? "",
+          "X-Sender-User-Agent": options?.headers?.userAgent ?? "",
+          "X-Sender-Cookie": options?.headers?.cookie ?? "",
+          ...opts?.headers
+        }
+      });
+    }
+  });
+  const tsx = await convertRawEasyToTsx(component);
+  const fileName = tsx.match(/export const (\w+) = .*/)?.[1];
+  if (!fileName) {
+    console.error("COULD NOT DETERMINE FILE NAME OF CONVERTED COMPONENT:", tsx);
+    throw new Error(`Could not determine file name of converted component`);
+  }
+  const filePath = `imports/${fileName}.tsx`;
+  await ky.post(`${API_BASE}/files/upsert`, {
+    json: {
+      file_path: filePath,
+      text_content: tsx
+    }
+  });
+  return { filePath };
+};
+
+// lib/components/ImportComponentDialog/ImportComponentDialog.tsx
+import Debug3 from "debug";
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var debug4 = Debug3("run-frame:ImportComponentDialog");
+var ImportComponentDialog = ({
+  isOpen,
+  onClose,
+  proxyRequestHeaders,
+  onImport
+}) => {
+  const [searchQuery, setSearchQuery] = useState6("");
+  const [searchResults, setSearchResults] = useState6(
+    []
+  );
+  const [hasSearched, setHasSearched] = useState6(false);
+  const [isLoading, setIsLoading] = useState6(false);
+  const [selectedComponent, setSelectedComponent] = useState6(null);
+  const [activeTab, setActiveTab] = useState6("tscircuit.com");
+  const [detailsOpen, setDetailsOpen] = useState6(false);
+  const [detailsComponent, setDetailsComponent] = useState6(null);
+  const [packageDetails, setPackageDetails] = useState6(null);
+  const [packageDetailsLoading, setPackageDetailsLoading] = useState6(false);
+  const [previewActiveTab, setPreviewActiveTab] = useState6(
+    "pcb"
+  );
+  const pushEvent = useRunFrameStore((s) => s.pushEvent);
+  const handleImport = onImport ? (component) => onImport(component) : (component) => {
+    toast.promise(
+      async () => {
+        if (component.source === "tscircuit.com") {
+          await pushEvent({
+            event_type: "INSTALL_PACKAGE",
+            full_package_name: `@tsci/${component.owner}.${component.name}`
+          });
+          throw new Error("Not implemented");
+        } else if (component.source === "jlcpcb") {
+          const { filePath } = await importComponentFromJlcpcb(
+            component.partNumber,
+            { headers: proxyRequestHeaders }
+          );
+          return { filePath };
+        } else if (component.source === "kicad") {
+          await navigator.clipboard.writeText(component.name);
+          return { footprint: component.name };
+        }
+      },
+      {
+        loading: `Importing component: "${component.name}"`,
+        error: (error) => {
+          console.error("IMPORT ERROR", error);
+          return `Error importing component: "${component.name}": ${error.toString()}`;
+        },
+        success: (data) => {
+          if (data?.footprint) {
+            return `Copied "${data.footprint}" to clipboard`;
+          }
+          return data?.filePath ? `Imported to "${data.filePath}"` : "Import Successful";
+        }
+      }
+    );
+  };
+  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);
+    const isJlcPartNumber = /^C\d+/.test(searchQuery);
+    try {
+      if (activeTab === "jlcpcb") {
+        const query = isJlcPartNumber ? searchQuery.substring(1) : searchQuery;
+        const jlcComponents = await searchJLCComponents(query, 10);
+        const mappedResults = jlcComponents.map(mapJLCComponentToSearchResult);
+        setSearchResults(mappedResults);
+      } else if (activeTab === "kicad") {
+        const kicadFootprints = await searchKicadFootprints(searchQuery, 20);
+        const mappedResults = kicadFootprints.map(
+          mapKicadFootprintToSearchResult
+        );
+        setSearchResults(mappedResults);
+      } else {
+        const tscircuitComponents = await searchTscircuitComponents(searchQuery);
+        const mappedResults = tscircuitComponents.map(
+          mapTscircuitSnippetToSearchResult
+        );
+        setSearchResults(mappedResults);
+      }
+    } catch (error) {
+      console.error("Error searching components:", error);
+      setSearchResults([]);
+    } finally {
+      setIsLoading(false);
+      setHasSearched(true);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      handleSearch();
+    }
+  };
+  useEffect6(() => {
+    setSearchResults([]);
+    setSelectedComponent(null);
+  }, [activeTab]);
+  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__ */ jsxs7(Dialog, { open: isOpen, onOpenChange: () => onClose(), children: [
+    /* @__PURE__ */ jsxs7(
+      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__ */ jsxs7(DialogHeader, { children: [
+            /* @__PURE__ */ jsx8(DialogTitle, { className: "rf-text-lg sm:rf-text-xl", children: "Import Component" }),
+            /* @__PURE__ */ jsx8(DialogDescription, { className: "rf-text-sm", children: "Search for components from tscircuit.com or JLCPCB parts library." })
+          ] }),
+          /* @__PURE__ */ jsxs7(
+            Tabs,
+            {
+              value: activeTab,
+              onValueChange: (value) => setActiveTab(value),
+              children: [
+                /* @__PURE__ */ jsxs7(TabsList, { className: "rf-grid rf-w-full rf-grid-cols-1 sm:rf-grid-cols-3 rf-h-auto", children: [
+                  /* @__PURE__ */ jsx8(
+                    TabsTrigger,
+                    {
+                      value: "tscircuit.com",
+                      className: "rf-text-xs sm:rf-text-sm",
+                      children: "tscircuit.com"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx8(TabsTrigger, { value: "jlcpcb", className: "rf-text-xs sm:rf-text-sm", children: "JLCPCB Parts" }),
+                  /* @__PURE__ */ jsx8(TabsTrigger, { value: "kicad", className: "rf-text-xs sm:rf-text-sm", children: "KiCad" })
+                ] }),
+                /* @__PURE__ */ jsxs7("div", { className: "rf-flex rf-items-center rf-gap-2 rf-mt-4", children: [
+                  /* @__PURE__ */ jsxs7("div", { className: "rf-relative rf-flex-grow", children: [
+                    /* @__PURE__ */ jsx8(Search2, { className: "rf-absolute rf-left-2 rf-top-2.5 rf-h-4 rf-w-4 rf-text-muted-foreground" }),
+                    /* @__PURE__ */ jsx8(
+                      Input,
+                      {
+                        placeholder: activeTab === "tscircuit.com" ? "Search components..." : activeTab === "kicad" ? "Search KiCad footprints..." : "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__ */ jsx8(
+                    Button,
+                    {
+                      onClick: handleSearch,
+                      disabled: isLoading || searchQuery.trim().length < 1,
+                      className: "sm:rf-px-4 rf-px-3",
+                      children: isLoading ? /* @__PURE__ */ jsx8(Loader22, { className: "rf-h-4 rf-w-4 rf-animate-spin" }) : /* @__PURE__ */ jsxs7(Fragment3, { children: [
+                        /* @__PURE__ */ jsx8(Search2, { className: "rf-h-4 rf-w-4 sm:rf-hidden" }),
+                        /* @__PURE__ */ jsx8("span", { className: "rf-hidden sm:rf-inline", children: "Search" })
+                      ] })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx8("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__ */ jsx8("div", { className: "rf-divide-y", children: searchResults.map((result) => /* @__PURE__ */ jsxs7(
+                  "div",
+                  {
+                    className: `rf-p-3 rf-flex rf-flex-col sm:rf-grid sm:rf-grid-cols-[1fr_auto] rf-items-start sm:rf-items-center rf-cursor-pointer hover:rf-bg-zinc-100 rf-gap-2 ${selectedComponent?.id === result.id ? "rf-bg-zinc-100" : ""}`,
+                    onClick: () => setSelectedComponent(result),
+                    children: [
+                      /* @__PURE__ */ jsxs7("div", { className: "rf-min-w-0 rf-overflow-hidden", children: [
+                        /* @__PURE__ */ jsx8("div", { className: "rf-font-medium rf-text-sm rf-truncate", children: result.name }),
+                        /* @__PURE__ */ jsxs7("div", { className: "rf-text-xs rf-text-zinc-500 rf-truncate", children: [
+                          result.partNumber && /* @__PURE__ */ jsx8("span", { className: "rf-mr-2", children: result.partNumber }),
+                          result.description
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsx8("div", { className: "rf-flex rf-gap-2 rf-flex-shrink-0 rf-w-full sm:rf-w-auto", children: result.source === "tscircuit.com" && /* @__PURE__ */ jsx8(
+                        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__ */ jsxs7("div", { className: "rf-p-8 rf-text-center rf-text-zinc-500", children: [
+                  /* @__PURE__ */ jsx8(Loader22, { className: "rf-h-8 rf-w-8 rf-animate-spin rf-mx-auto rf-mb-2" }),
+                  /* @__PURE__ */ jsx8("p", { children: "Searching..." })
+                ] }) : /* @__PURE__ */ jsx8("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__ */ jsxs7(DialogFooter, { className: "rf-flex rf-flex-col sm:rf-flex-row rf-gap-2", children: [
+            /* @__PURE__ */ jsx8(
+              Button,
+              {
+                variant: "outline",
+                onClick: onClose,
+                className: "rf-order-2 sm:rf-order-1",
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ jsx8(
+              Button,
+              {
+                onClick: () => {
+                  if (selectedComponent) {
+                    handleImport(selectedComponent);
+                    onClose();
+                  }
+                },
+                disabled: !selectedComponent,
+                children: selectedComponent?.source === "kicad" ? "Copy Footprint" : "Import Component"
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx8(Dialog, { open: detailsOpen, onOpenChange: setDetailsOpen, children: /* @__PURE__ */ jsxs7(
+      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__ */ jsx8(DialogHeader, { className: "rf-pb-4 rf-border-b", children: /* @__PURE__ */ jsx8("div", { className: "rf-flex rf-items-start rf-justify-between rf-gap-4", children: /* @__PURE__ */ jsx8("div", { className: "rf-flex-1 rf-min-w-0", children: /* @__PURE__ */ jsx8(DialogTitle, { className: "rf-text-xl rf-font-semibold rf-truncate", children: detailsComponent?.source === "kicad" ? detailsComponent?.name : /* @__PURE__ */ jsx8(
+            "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__ */ jsx8("div", { className: "rf-flex-1 rf-overflow-y-auto rf-py-4 rf-space-y-6", children: detailsComponent?.source === "tscircuit.com" ? /* @__PURE__ */ jsxs7(Fragment3, { children: [
+            /* @__PURE__ */ jsx8("div", { children: /* @__PURE__ */ jsx8("div", { className: "rf-space-y-3", children: detailsComponent?.owner && /* @__PURE__ */ jsxs7("div", { children: [
+              /* @__PURE__ */ jsx8("label", { className: "rf-text-xs rf-font-medium rf-text-gray-500 rf-uppercase rf-tracking-wide", children: "Created by" }),
+              /* @__PURE__ */ jsx8("div", { className: "rf-mt-1 rf-text-sm rf-font-medium", children: /* @__PURE__ */ jsx8(
+                "a",
+                {
+                  href: `https://tscircuit.com/${detailsComponent?.owner}`,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  className: "rf-text-black hover:rf-underline",
+                  children: detailsComponent?.owner
+                }
+              ) })
+            ] }) }) }),
+            /* @__PURE__ */ jsxs7("div", { children: [
+              /* @__PURE__ */ jsx8("h3", { className: "rf-text-lg rf-font-semibold rf-mb-4", children: "Preview" }),
+              /* @__PURE__ */ jsxs7(
+                Tabs,
+                {
+                  value: previewActiveTab,
+                  onValueChange: (value) => setPreviewActiveTab(value),
+                  children: [
+                    /* @__PURE__ */ jsxs7(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__ */ jsx8(
+                        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__ */ jsx8(
+                        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__ */ jsxs7("div", { className: "rf-mt-4", children: [
+                      /* @__PURE__ */ jsx8(
+                        TabsContent,
+                        {
+                          value: "pcb",
+                          className: "rf-border rf-rounded-lg rf-overflow-hidden rf-bg-gray-50",
+                          children: detailsComponent?.owner && detailsComponent?.name ? /* @__PURE__ */ jsx8("div", { className: "rf-w-full rf-h-fit rf-min-h-[300px] rf-bg-white rf-flex rf-items-center rf-justify-center rf-p-4", children: /* @__PURE__ */ jsx8(
+                            "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">Preview cannot be generated</div></div>';
+                                }
+                              }
+                            }
+                          ) }) : /* @__PURE__ */ jsx8("div", { className: "rf-h-[400px] rf-flex rf-items-center rf-justify-center rf-text-gray-500", children: /* @__PURE__ */ jsxs7("div", { className: "rf-text-center", children: [
+                            /* @__PURE__ */ jsx8("div", { className: "rf-text-sm rf-font-medium", children: "No PCB preview available" }),
+                            /* @__PURE__ */ jsx8("div", { className: "rf-text-xs rf-mt-1", children: "Preview cannot be generated" })
+                          ] }) })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx8(
+                        TabsContent,
+                        {
+                          value: "schematic",
+                          className: "rf-border rf-rounded-lg rf-overflow-hidden rf-bg-gray-50",
+                          children: detailsComponent?.owner && detailsComponent?.name ? /* @__PURE__ */ jsx8("div", { className: "rf-w-full rf-h-fit rf-min-h-[300px] rf-bg-white rf-flex rf-items-center rf-justify-center rf-p-4", children: /* @__PURE__ */ jsx8(
+                            "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">Preview cannot be generated</div></div>';
+                                }
+                              }
+                            }
+                          ) }) : /* @__PURE__ */ jsx8("div", { className: "rf-h-[400px] rf-flex rf-items-center rf-justify-center rf-text-gray-500", children: /* @__PURE__ */ jsxs7("div", { className: "rf-text-center", children: [
+                            /* @__PURE__ */ jsx8("div", { className: "rf-text-sm rf-font-medium", children: "No schematic preview available" }),
+                            /* @__PURE__ */ jsx8("div", { className: "rf-text-xs rf-mt-1", children: "Preview cannot be generated" })
+                          ] }) })
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              )
+            ] }),
+            packageDetails?.ai_description && /* @__PURE__ */ jsxs7("div", { children: [
+              /* @__PURE__ */ jsx8("h3", { className: "rf-text-lg rf-font-semibold rf-mb-3", children: "AI Description" }),
+              /* @__PURE__ */ jsx8("div", { className: "rf-bg-gray-50 rf-border rf-border-gray-200 rf-rounded-lg rf-p-4", children: /* @__PURE__ */ jsx8("p", { className: "rf-text-sm rf-text-gray-700 rf-leading-relaxed", children: packageDetails.ai_description }) })
+            ] }),
+            packageDetails?.ai_usage_instructions && /* @__PURE__ */ jsxs7("div", { children: [
+              /* @__PURE__ */ jsx8("h3", { className: "rf-text-lg rf-font-semibold rf-mb-3", children: "Usage Instructions" }),
+              /* @__PURE__ */ jsx8("div", { className: "rf-bg-gray-50 rf-border rf-border-gray-200 rf-rounded-lg rf-p-4", children: /* @__PURE__ */ jsx8("p", { className: "rf-text-sm rf-text-gray-700 rf-leading-relaxed rf-whitespace-pre-wrap", children: packageDetails.ai_usage_instructions }) })
+            ] }),
+            packageDetailsLoading && /* @__PURE__ */ jsxs7("div", { className: "rf-flex rf-justify-center rf-text-center rf-items-center rf-gap-2 rf-text-gray-500", children: [
+              /* @__PURE__ */ jsx8(Loader22, { className: "rf-h-4 rf-w-4 rf-animate-spin" }),
+              /* @__PURE__ */ jsx8("span", { className: "rf-text-sm", children: "Loading package details..." })
+            ] })
+          ] }) : null }),
+          /* @__PURE__ */ jsxs7(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__ */ jsx8("div", { className: "rf-flex-1 rf-order-3 sm:rf-order-1", children: detailsComponent?.source === "tscircuit.com" && /* @__PURE__ */ jsxs7(
+              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__ */ jsx8(ExternalLink, { className: "rf-h-4 rf-w-4" }),
+                  "View on tscircuit.com"
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsxs7("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__ */ jsx8(
+                Button,
+                {
+                  variant: "outline",
+                  onClick: () => setDetailsOpen(false),
+                  className: "rf-order-2 sm:rf-order-1",
+                  children: "Close"
+                }
+              ),
+              /* @__PURE__ */ jsx8(
+                Button,
+                {
+                  onClick: () => {
+                    setDetailsOpen(false);
+                    if (detailsComponent) {
+                      handleImport(detailsComponent);
+                      onClose();
+                    }
+                  },
+                  className: "rf-bg-blue-600 hover:rf-bg-blue-700 rf-order-1 sm:rf-order-2",
+                  children: detailsComponent?.source === "kicad" ? "Copy Footprint" : "Import Component"
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ) })
+  ] });
+};
+
 // lib/components/RunFrameStaticBuildViewer/RunFrameStaticBuildViewer.tsx
-import { useCallback as useCallback4, useEffect as useEffect6, useState as useState6 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect7, useState as useState7 } from "react";
 
 // lib/components/RunFrameStaticBuildViewer/CircuitJsonFileSelectorCombobox.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var circuitJsonConfig = {
   fileFilter: () => true,
   placeholder: "Select circuit",
@@ -1408,7 +1992,7 @@ var CircuitJsonFileSelectorCombobox = ({
   onFileChange,
   currentFile
 }) => {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     EnhancedFileSelectorCombobox,
     {
       files,
@@ -1421,19 +2005,19 @@ var CircuitJsonFileSelectorCombobox = ({
 
 // lib/components/RunFrameStaticBuildViewer/RunFrameStaticBuildViewer.tsx
 import { ErrorBoundary } from "react-error-boundary";
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 var RunFrameStaticBuildViewer = (props) => {
   useStyles();
-  const [currentCircuitJsonPath, setCurrentCircuitJsonPath] = useState6(
+  const [currentCircuitJsonPath, setCurrentCircuitJsonPath] = useState7(
     () => {
       return props.initialCircuitPath ?? "";
     }
   );
-  const [circuitJson, setCircuitJson] = useState6(null);
-  const [isLoadingCurrentFile, setIsLoadingCurrentFile] = useState6(false);
-  const [fileCache, setFileCache] = useState6({});
-  const [loadingFiles, setLoadingFiles] = useState6(/* @__PURE__ */ new Set());
-  const [failedFiles, setFailedFiles] = useState6(/* @__PURE__ */ new Set());
+  const [circuitJson, setCircuitJson] = useState7(null);
+  const [isLoadingCurrentFile, setIsLoadingCurrentFile] = useState7(false);
+  const [fileCache, setFileCache] = useState7({});
+  const [loadingFiles, setLoadingFiles] = useState7(/* @__PURE__ */ new Set());
+  const [failedFiles, setFailedFiles] = useState7(/* @__PURE__ */ new Set());
   const fileReferences = props.files;
   const availableFiles = fileReferences.map((f) => f.filePath);
   const defaultFetchFile = useCallback4(
@@ -1509,7 +2093,7 @@ var RunFrameStaticBuildViewer = (props) => {
       defaultFetchFile
     ]
   );
-  useEffect6(() => {
+  useEffect7(() => {
     if (availableFiles.length === 0) return;
     let selectedPath = currentCircuitJsonPath;
     if (!selectedPath || !availableFiles.includes(selectedPath)) {
@@ -1535,22 +2119,22 @@ var RunFrameStaticBuildViewer = (props) => {
     [loadCircuitJsonFile]
   );
   if (availableFiles.length === 0) {
-    return /* @__PURE__ */ jsx9("div", { className: "rf-flex rf-flex-col rf-w-full rf-h-full rf-items-center rf-justify-center", children: /* @__PURE__ */ jsxs7("div", { className: "rf-text-center rf-p-8", children: [
-      /* @__PURE__ */ jsx9("h3", { className: "rf-text-lg rf-font-semibold rf-text-gray-800 rf-mb-2", children: "No Circuit JSON Files Found" }),
-      /* @__PURE__ */ jsx9("p", { className: "rf-text-sm rf-text-gray-600", children: "Please provide circuit JSON files to view." })
+    return /* @__PURE__ */ jsx10("div", { className: "rf-flex rf-flex-col rf-w-full rf-h-full rf-items-center rf-justify-center", children: /* @__PURE__ */ jsxs8("div", { className: "rf-text-center rf-p-8", children: [
+      /* @__PURE__ */ jsx10("h3", { className: "rf-text-lg rf-font-semibold rf-text-gray-800 rf-mb-2", children: "No Circuit JSON Files Found" }),
+      /* @__PURE__ */ jsx10("p", { className: "rf-text-sm rf-text-gray-600", children: "Please provide circuit JSON files to view." })
     ] }) });
   }
   const currentFileFailed = failedFiles.has(currentCircuitJsonPath);
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     ErrorBoundary,
     {
-      fallbackRender: ({ error }) => /* @__PURE__ */ jsx9("div", { className: "rf-mt-4 rf-mx-4 rf-bg-red-50 rf-rounded-md rf-border rf-border-red-200", children: /* @__PURE__ */ jsxs7("div", { className: "rf-p-4", children: [
-        /* @__PURE__ */ jsx9("h3", { className: "rf-text-lg rf-font-semibold rf-text-red-800 rf-mb-3", children: "Error loading Circuit JSON Preview" }),
-        /* @__PURE__ */ jsx9("p", { className: "rf-text-xs rf-font-mono rf-whitespace-pre-wrap rf-text-red-600 rf-mt-2", children: error.message })
+      fallbackRender: ({ error }) => /* @__PURE__ */ jsx10("div", { className: "rf-mt-4 rf-mx-4 rf-bg-red-50 rf-rounded-md rf-border rf-border-red-200", children: /* @__PURE__ */ jsxs8("div", { className: "rf-p-4", children: [
+        /* @__PURE__ */ jsx10("h3", { className: "rf-text-lg rf-font-semibold rf-text-red-800 rf-mb-3", children: "Error loading Circuit JSON Preview" }),
+        /* @__PURE__ */ jsx10("p", { className: "rf-text-xs rf-font-mono rf-whitespace-pre-wrap rf-text-red-600 rf-mt-2", children: error.message })
       ] }) }),
-      children: currentFileFailed ? /* @__PURE__ */ jsxs7("div", { className: "rf-w-full rf-h-full rf-flex rf-flex-col", children: [
-        /* @__PURE__ */ jsxs7("div", { className: "rf-flex rf-items-center rf-justify-between rf-w-full rf-p-4 rf-border-b rf-border-gray-200", children: [
-          (props.showFileMenu ?? true) && /* @__PURE__ */ jsx9(
+      children: currentFileFailed ? /* @__PURE__ */ jsxs8("div", { className: "rf-w-full rf-h-full rf-flex rf-flex-col", children: [
+        /* @__PURE__ */ jsxs8("div", { className: "rf-flex rf-items-center rf-justify-between rf-w-full rf-p-4 rf-border-b rf-border-gray-200", children: [
+          (props.showFileMenu ?? true) && /* @__PURE__ */ jsx10(
             FileMenuLeftHeader,
             {
               isWebEmbedded: true,
@@ -1558,7 +2142,7 @@ var RunFrameStaticBuildViewer = (props) => {
               projectName: props.projectName
             }
           ),
-          availableFiles.length > 1 && /* @__PURE__ */ jsx9("div", { className: "rf-absolute rf-left-1/2 rf-transform rf--translate-x-1/2 rf-flex rf-items-center rf-gap-2", children: /* @__PURE__ */ jsx9(
+          availableFiles.length > 1 && /* @__PURE__ */ jsx10("div", { className: "rf-absolute rf-left-1/2 rf-transform rf--translate-x-1/2 rf-flex rf-items-center rf-gap-2", children: /* @__PURE__ */ jsx10(
             CircuitJsonFileSelectorCombobox,
             {
               currentFile: currentCircuitJsonPath,
@@ -1567,14 +2151,14 @@ var RunFrameStaticBuildViewer = (props) => {
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsx9("div", { className: "rf-flex-1 rf-flex rf-items-center rf-justify-center", children: /* @__PURE__ */ jsxs7("div", { className: "rf-text-center rf-p-8", children: [
-          /* @__PURE__ */ jsx9("h3", { className: "rf-text-lg rf-font-semibold rf-text-red-600 rf-mb-2", children: "Failed to Load Circuit File" }),
-          /* @__PURE__ */ jsxs7("p", { className: "rf-text-sm rf-text-gray-600 rf-mb-4", children: [
+        /* @__PURE__ */ jsx10("div", { className: "rf-flex-1 rf-flex rf-items-center rf-justify-center", children: /* @__PURE__ */ jsxs8("div", { className: "rf-text-center rf-p-8", children: [
+          /* @__PURE__ */ jsx10("h3", { className: "rf-text-lg rf-font-semibold rf-text-red-600 rf-mb-2", children: "Failed to Load Circuit File" }),
+          /* @__PURE__ */ jsxs8("p", { className: "rf-text-sm rf-text-gray-600 rf-mb-4", children: [
             "Could not load: ",
             currentCircuitJsonPath
           ] }),
-          /* @__PURE__ */ jsxs7("div", { className: "rf-flex rf-flex-col rf-items-center rf-gap-2", children: [
-            /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsxs8("div", { className: "rf-flex rf-flex-col rf-items-center rf-gap-2", children: [
+            /* @__PURE__ */ jsx10(
               "button",
               {
                 onClick: () => retryFailedFile(currentCircuitJsonPath),
@@ -1582,10 +2166,10 @@ var RunFrameStaticBuildViewer = (props) => {
                 children: "Retry"
               }
             ),
-            availableFiles.length > 1 && /* @__PURE__ */ jsx9("p", { className: "rf-text-xs rf-text-gray-500", children: "Or select a different file from the dropdown above" })
+            availableFiles.length > 1 && /* @__PURE__ */ jsx10("p", { className: "rf-text-xs rf-text-gray-500", children: "Or select a different file from the dropdown above" })
           ] })
         ] }) })
-      ] }) : /* @__PURE__ */ jsx9(
+      ] }) : /* @__PURE__ */ jsx10(
         CircuitJsonPreview,
         {
           circuitJson,
@@ -1594,8 +2178,8 @@ var RunFrameStaticBuildViewer = (props) => {
           showFileMenu: false,
           isWebEmbedded: false,
           projectName: props.projectName,
-          leftHeaderContent: /* @__PURE__ */ jsxs7("div", { className: "rf-flex rf-items-center rf-justify-between rf-w-full", children: [
-            (props.showFileMenu ?? true) && /* @__PURE__ */ jsx9(
+          leftHeaderContent: /* @__PURE__ */ jsxs8("div", { className: "rf-flex rf-items-center rf-justify-between rf-w-full", children: [
+            (props.showFileMenu ?? true) && /* @__PURE__ */ jsx10(
               FileMenuLeftHeader,
               {
                 isWebEmbedded: true,
@@ -1603,11 +2187,11 @@ var RunFrameStaticBuildViewer = (props) => {
                 projectName: props.projectName
               }
             ),
-            availableFiles.length > 1 && /* @__PURE__ */ jsx9(
+            availableFiles.length > 1 && /* @__PURE__ */ jsx10(
               "div",
               {
                 className: `rf-absolute rf-left-1/2 rf-transform rf--translate-x-1/2 rf-flex rf-items-center rf-gap-2 ${isLoadingCurrentFile ? "rf-opacity-50" : ""}`,
-                children: /* @__PURE__ */ jsx9(
+                children: /* @__PURE__ */ jsx10(
                   CircuitJsonFileSelectorCombobox,
                   {
                     currentFile: currentCircuitJsonPath,
@@ -1629,6 +2213,8 @@ export {
   CircuitJsonFileSelectorCombobox,
   CircuitJsonPreview,
   ImportComponentDialog,
+  ImportComponentDialog2,
+  ImportComponentDialogForCli,
   PCBViewer as PcbViewer,
   PcbViewerWithContainerHeight,
   RunFrame,