@tscircuit/runframe 0.0.285 → 0.0.287

package/dist/runner.js

@@ -14,7 +14,7 @@ import {
   TabsTrigger,
   buttonVariants,
   cn
-} from "./chunk-FTA6I3F6.js";
+} from "./chunk-QBYYLV3Y.js";
 
 // lib/components/RunFrame/RunFrame.tsx
 import { createCircuitWebWorker } from "@tscircuit/eval/worker";
@@ -481,7 +481,7 @@ var RunFrame = (props) => {
       props.onCircuitJsonChange?.(circuitJson2);
       setCircuitJson(circuitJson2);
       props.onRenderFinished?.({ circuitJson: circuitJson2 });
-      setAutoroutingGraphics(null);
+      setAutoroutingGraphics({});
       if (activeTab === "render_log") {
         renderLog2.phaseTimings = getPhaseTimingsFromRenderEvents(
           renderLog2.renderEvents ?? []
@@ -763,7 +763,7 @@ function useLocalStorageState(key, initialValue) {
 }
 
 // lib/components/RunFrameForCli/LeftHeader.tsx
-import { useEffect as useEffect7, useMemo as useMemo3, useState as useState6 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo3, useState as useState8 } from "react";
 
 // lib/components/RunFrameForCli/SelectSnippetDialog.tsx
 import { useState as useState4 } from "react";
@@ -868,7 +868,7 @@ var useEventHandler = (callback) => {
 };
 
 // lib/components/RunFrameForCli/LeftHeader.tsx
-import { CheckCircle } from "lucide-react";
+import "lucide-react";
 
 // lib/components/ui/alert-dialog.tsx
 import * as React from "react";
@@ -1083,7 +1083,7 @@ var mapTscircuitSnippetToSearchResult = (tscircuitSnippet) => {
     id: `tscircuit-${tscircuitSnippet.snippet_id}`,
     name: tscircuitSnippet.unscoped_name,
     description: tscircuitSnippet.description || `Component by ${tscircuitSnippet.owner_name}`,
-    source: "tscircuit",
+    source: "tscircuit.com",
     partNumber: tscircuitSnippet.name,
     previewUrl: tscircuitSnippet.preview_url,
     // Additional tscircuit-specific properties
@@ -1108,7 +1108,7 @@ var ImportComponentDialog = ({
   const [isLoading, setIsLoading] = useState5(false);
   const [selectedComponent, setSelectedComponent] = useState5(null);
   const [activeTab, setActiveTab] = useState5(
-    "tscircuit"
+    "tscircuit.com"
   );
   const [detailsOpen, setDetailsOpen] = useState5(false);
   const [detailsComponent, setDetailsComponent] = useState5(null);
@@ -1169,7 +1169,7 @@ var ImportComponentDialog = ({
           onValueChange: (value) => setActiveTab(value),
           children: [
             /* @__PURE__ */ jsxs5(TabsList, { className: "rf-grid rf-w-full rf-grid-cols-2", children: [
-              /* @__PURE__ */ jsx7(TabsTrigger, { value: "tscircuit", children: "tscircuit.com" }),
+              /* @__PURE__ */ jsx7(TabsTrigger, { value: "tscircuit.com", children: "tscircuit.com" }),
               /* @__PURE__ */ jsx7(TabsTrigger, { value: "jlcpcb", children: "JLCPCB Parts" })
             ] }),
             /* @__PURE__ */ jsxs5("div", { className: "rf-flex rf-items-center rf-gap-2 rf-mt-4", children: [
@@ -1178,7 +1178,7 @@ var ImportComponentDialog = ({
                 /* @__PURE__ */ jsx7(
                   Input,
                   {
-                    placeholder: activeTab === "tscircuit" ? "Search components..." : "Search JLCPCB parts (e.g. C14663)...",
+                    placeholder: activeTab === "tscircuit.com" ? "Search components..." : "Search JLCPCB parts (e.g. C14663)...",
                     className: "rf-pl-8",
                     value: searchQuery,
                     onChange: (e) => setSearchQuery(e.target.value),
@@ -1201,7 +1201,7 @@ var ImportComponentDialog = ({
                       result.description
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsx7("div", { className: "rf-flex rf-gap-2", children: result.source === "tscircuit" && /* @__PURE__ */ jsx7(
+                  /* @__PURE__ */ jsx7("div", { className: "rf-flex rf-gap-2", children: result.source === "tscircuit.com" && /* @__PURE__ */ jsx7(
                     Button,
                     {
                       variant: "outline",
@@ -1265,7 +1265,7 @@ var ImportComponentDialog = ({
           ] })
         ] })
       ] }),
-      detailsComponent?.source === "tscircuit" && /* @__PURE__ */ jsxs5("div", { className: "rf-my-4 rf-border rf-rounded-md rf-p-4 !rf-max-w-[60vw] !rf-overflow-x-hidden", children: [
+      detailsComponent?.source === "tscircuit.com" && /* @__PURE__ */ jsxs5("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__ */ jsxs5("div", { className: "rf-flex rf-flex-col", children: [
           /* @__PURE__ */ jsx7("span", { className: "rf-text-xs rf-text-zinc-500", children: "Owner" }),
@@ -1281,7 +1281,7 @@ var ImportComponentDialog = ({
       ] }),
       /* @__PURE__ */ jsxs5("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" && 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(
+        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"),
@@ -1328,38 +1328,237 @@ var ImportComponentDialog = ({
   ] });
 };
 
-// lib/components/RunFrameForCli/LeftHeader.tsx
-import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+// lib/optional-features/exporting/formats/export-fabrication-files.ts
+import JSZip from "jszip";
+import {
+  stringifyGerberCommandLayers,
+  convertSoupToGerberCommands,
+  convertSoupToExcellonDrillCommands,
+  stringifyExcellonDrill
+} from "circuit-json-to-gerber";
+import {
+  convertCircuitJsonToBomRows,
+  convertBomRowsToCsv
+} from "circuit-json-to-bom-csv";
+import { convertCircuitJsonToPickAndPlaceCsv } from "circuit-json-to-pnp-csv";
+
+// lib/optional-features/exporting/open-for-download.ts
+var openForDownload = (content, opts) => {
+  const { fileName, mimeType = "text/plain" } = opts;
+  const blob = content instanceof Blob ? content : new Blob([content], { type: mimeType });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = fileName;
+  document.body.appendChild(a);
+  a.click();
+  setTimeout(() => {
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }, 0);
+};
+
+// lib/optional-features/exporting/formats/export-fabrication-files.ts
+var exportFabricationFiles = async ({
+  circuitJson,
+  projectName
+}) => {
+  const zip = new JSZip();
+  const gerberLayerCmds = convertSoupToGerberCommands(circuitJson, {
+    flip_y_axis: false
+  });
+  const gerberFileContents = stringifyGerberCommandLayers(gerberLayerCmds);
+  for (const [fileName, fileContents] of Object.entries(gerberFileContents)) {
+    zip.file(`gerber/${fileName}.gbr`, fileContents);
+  }
+  const drillCmds = convertSoupToExcellonDrillCommands({
+    circuitJson,
+    is_plated: true,
+    flip_y_axis: false
+  });
+  const drillFileContents = stringifyExcellonDrill(drillCmds);
+  zip.file("gerber/drill.drl", drillFileContents);
+  const bomRows = await convertCircuitJsonToBomRows({ circuitJson });
+  const bomCsv = await convertBomRowsToCsv(bomRows);
+  zip.file("bom.csv", bomCsv);
+  const pnpCsv = await convertCircuitJsonToPickAndPlaceCsv(circuitJson);
+  zip.file("pick_and_place.csv", pnpCsv);
+  const zipBlob = await zip.generateAsync({ type: "blob" });
+  openForDownload(zipBlob, {
+    fileName: `${projectName}_fabrication_files.zip`
+  });
+};
+
+// lib/optional-features/exporting/export-and-download.ts
 var availableExports = [
-  { extension: "json", name: "JSON" },
-  { extension: "svg", name: "SVG" },
-  { extension: "dsn", name: "Specctra DSN" },
-  { extension: "glb", name: "GLB (Binary GLTF)" },
-  { extension: "csv", name: "CSV (Comma-Separated Values)" },
-  { extension: "text", name: "Plain Text" },
-  { extension: "kicad_mod", name: "KiCad Module" },
-  { extension: "kicad_project", name: "KiCad Project" },
-  { extension: "gbr", name: "Gerbers" }
+  { extension: "json", name: "Circuit JSON" },
+  { extension: "zip", name: "Fabrication Files" }
+  // { extension: "svg", name: "SVG" },
+  // { extension: "dsn", name: "Specctra DSN" },
+  // { extension: "glb", name: "GLB (Binary GLTF)" },
+  // { extension: "kicad_mod", name: "KiCad Module" },
+  // { extension: "kicad_project", name: "KiCad Project" },
+  // { extension: "gbr", name: "Gerbers" },
 ];
+var exportAndDownload = async ({
+  exportName,
+  circuitJson,
+  projectName
+}) => {
+  if (exportName === "Fabrication Files") {
+    exportFabricationFiles({ circuitJson, projectName });
+    return;
+  }
+  if (exportName === "Circuit JSON") {
+    openForDownload(JSON.stringify(circuitJson, null, 2), {
+      fileName: `${projectName}.circuit.json`,
+      mimeType: "application/json"
+    });
+    return;
+  }
+  throw new Error(`Unsupported export type: "${exportName}"`);
+};
+
+// lib/utils/toast.ts
+import { toast } from "react-hot-toast";
+
+// lib/components/RunFrameForCli/LeftHeader.tsx
+import { Toaster } from "react-hot-toast";
+
+// lib/optional-features/importing/import-component-from-jlcpcb.ts
+import { fetchEasyEDAComponent, convertRawEasyToTsx } from "easyeda/browser";
+import ky from "ky";
+var importComponentFromJlcpcb = async (jlcpcbPartNumber) => {
+  const component = await fetchEasyEDAComponent(jlcpcbPartNumber, {
+    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 ?? ""
+        }
+      });
+    }
+  });
+  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/OrderDialog/useOrderDialog.tsx
+import { useState as useState7 } from "react";
+
+// lib/components/OrderDialog/OrderDialog.tsx
+import { useState as useState6 } from "react";
+import ky2 from "ky";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var OrderDialog = ({
+  isOpen,
+  onClose
+}) => {
+  const [order, setOrder] = useState6(null);
+  const [stage, setStage] = useState6(
+    "setup"
+  );
+  const circuitJson = useRunFrameStore((state) => state.circuitJson);
+  return /* @__PURE__ */ jsx8(AlertDialog, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsxs6(AlertDialogContent, { children: [
+    /* @__PURE__ */ jsxs6(AlertDialogHeader, { children: [
+      /* @__PURE__ */ jsx8(AlertDialogTitle, { children: "Order PCB" }),
+      /* @__PURE__ */ jsx8(AlertDialogDescription, { children: stage })
+    ] }),
+    stage === "order-progress" && /* @__PURE__ */ jsx8("div", { className: "rf-space-y-4 rf-py-4 ", children: /* @__PURE__ */ jsx8(
+      "pre",
+      {
+        style: {
+          maxHeight: "500px",
+          overflowY: "scroll",
+          fontSize: "8px"
+        },
+        children: JSON.stringify(order, null, 2)
+      }
+    ) }),
+    /* @__PURE__ */ jsxs6(AlertDialogFooter, { children: [
+      /* @__PURE__ */ jsx8(AlertDialogCancel, { onClick: onClose, children: "Cancel" }),
+      stage === "setup" && /* @__PURE__ */ jsx8(
+        Button,
+        {
+          onClick: async () => {
+            if (!circuitJson) {
+              return;
+            }
+            const { order: order2 } = await ky2.post("registry/orders/create", {
+              json: {
+                circuit_json: circuitJson
+              },
+              headers: {
+                Authorization: `Bearer account-1234`
+              }
+            }).json();
+            setOrder(order2);
+            setStage("order-progress");
+          },
+          children: "Submit Order"
+        }
+      ),
+      stage === "order-progress" && /* @__PURE__ */ jsx8(Button, { disabled: true, children: "Continue to Shipping" })
+    ] })
+  ] }) });
+};
+
+// lib/components/OrderDialog/useOrderDialog.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var useOrderDialog = () => {
+  const [isOpen, setIsOpen] = useState7(false);
+  const [isRegistryConnected, setIsRegistryConnected] = useState7(false);
+  return {
+    isOpen,
+    isRegistryConnected,
+    open: () => setIsOpen(true),
+    close: () => setIsOpen(false),
+    OrderDialog: () => {
+      return /* @__PURE__ */ jsx9(OrderDialog, { isOpen, onClose: () => setIsOpen(false) });
+    }
+  };
+};
+
+// lib/components/RunFrameForCli/LeftHeader.tsx
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var RunframeCliLeftHeader = (props) => {
   const lastRunEvalVersion = useRunnerStore((s) => s.lastRunEvalVersion);
-  const [snippetName, setSnippetName] = useState6(null);
-  const [hasUnsavedChanges, setHasUnsavedChanges] = useState6(false);
-  const [hasNeverBeenSaved, setHasNeverBeenSaved] = useState6(true);
-  const [isSaving, setIsSaving] = useState6(false);
-  const [requestToSaveSentAt, setRequestToSaveSentAt] = useState6(
+  const [snippetName, setSnippetName] = useState8(null);
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState8(false);
+  const [hasNeverBeenSaved, setHasNeverBeenSaved] = useState8(true);
+  const [isSaving, setIsSaving] = useState8(false);
+  const [requestToSaveSentAt, setRequestToSaveSentAt] = useState8(
     null
   );
-  const [availableSnippets, setAvailableSnippets] = useState6(
+  const [availableSnippets, setAvailableSnippets] = useState8(
     null
   );
-  const [isSelectSnippetDialogOpen, setIsSelectSnippetDialogOpen] = useState6(false);
-  const [notificationMessage, setNotificationMessage] = useState6(
+  const [isSelectSnippetDialogOpen, setIsSelectSnippetDialogOpen] = useState8(false);
+  const [notificationMessage, setNotificationMessage] = useState8(
     null
   );
-  const [errorMessage, setErrorMessage] = useState6(null);
-  const [isError, setIsError] = useState6(false);
-  const [isExporting, setisExporting] = useState6(false);
+  const [errorMessage, setErrorMessage] = useState8(null);
+  const [isError, setIsError] = useState8(false);
+  const [isExporting, setisExporting] = useState8(false);
+  const orderDialog = useOrderDialog();
   const pushEvent = useRunFrameStore((state) => state.pushEvent);
   const recentEvents = useRunFrameStore((state) => state.recentEvents);
   const firstRenderTime = useMemo3(() => Date.now(), []);
@@ -1387,7 +1586,7 @@ var RunframeCliLeftHeader = (props) => {
       setisExporting(false);
     }
   });
-  useEffect7(() => {
+  useEffect8(() => {
     if (!isSaving || requestToSaveSentAt === null) return;
     const eventsSinceRequestToSave = recentEvents.filter(
       (event) => new Date(event.created_at).valueOf() > requestToSaveSentAt
@@ -1428,12 +1627,13 @@ var RunframeCliLeftHeader = (props) => {
       snippet_name: snippetName
     });
   };
-  const [isImportDialogOpen, setIsImportDialogOpen] = useState6(false);
-  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-    /* @__PURE__ */ jsxs6(DropdownMenu, { children: [
-      /* @__PURE__ */ jsx8(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx8("div", { className: "rf-whitespace-nowrap rf-text-xs font-medium rf-p-2 rf-mx-1 rf-cursor-pointer rf-relative", children: "File" }) }),
-      /* @__PURE__ */ jsxs6(DropdownMenuContent, { children: [
-        /* @__PURE__ */ jsx8(
+  const circuitJson = useRunFrameStore((state) => state.circuitJson);
+  const [isImportDialogOpen, setIsImportDialogOpen] = useState8(false);
+  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+    /* @__PURE__ */ jsxs7(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx10(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx10("div", { className: "rf-whitespace-nowrap rf-text-xs font-medium rf-p-2 rf-mx-1 rf-cursor-pointer rf-relative", children: "File" }) }),
+      /* @__PURE__ */ jsxs7(DropdownMenuContent, { children: [
+        /* @__PURE__ */ jsx10(
           DropdownMenuItem,
           {
             className: "rf-text-xs",
@@ -1442,7 +1642,17 @@ var RunframeCliLeftHeader = (props) => {
             children: isSaving ? "Saving..." : "Push"
           }
         ),
-        /* @__PURE__ */ jsx8(
+        parseInt(window.location.port) > 5e3 && /* @__PURE__ */ jsx10(
+          DropdownMenuItem,
+          {
+            className: "rf-text-xs",
+            onSelect: () => {
+              orderDialog.open();
+            },
+            children: "Order"
+          }
+        ),
+        /* @__PURE__ */ jsx10(
           DropdownMenuItem,
           {
             className: "rf-text-xs",
@@ -1451,8 +1661,8 @@ var RunframeCliLeftHeader = (props) => {
             children: "Import"
           }
         ),
-        /* @__PURE__ */ jsxs6(DropdownMenuSub, { children: [
-          /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsxs7(DropdownMenuSub, { children: [
+          /* @__PURE__ */ jsx10(
             DropdownMenuSubTrigger,
             {
               className: "rf-text-xs",
@@ -1460,32 +1670,31 @@ var RunframeCliLeftHeader = (props) => {
               children: isExporting ? "Exporting..." : "Export"
             }
           ),
-          /* @__PURE__ */ jsx8(DropdownMenuPortal, { children: /* @__PURE__ */ jsx8(DropdownMenuSubContent, { children: availableExports.map((exp, i) => /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx10(DropdownMenuPortal, { children: /* @__PURE__ */ jsx10(DropdownMenuSubContent, { children: availableExports.map((exp, i) => /* @__PURE__ */ jsx10(
             DropdownMenuItem,
             {
               onSelect: () => {
-                if (!isExporting) {
-                  pushEvent({
-                    event_type: "REQUEST_EXPORT",
-                    exportType: exp.extension
-                  });
-                  setNotificationMessage(
-                    `Export requested for ${exp.name}`
-                  );
-                  setIsError(false);
+                if (!circuitJson) {
+                  toast.error("No Circuit JSON to export");
+                  return;
                 }
+                exportAndDownload({
+                  exportName: exp.name,
+                  circuitJson,
+                  projectName: snippetName ?? "Untitled"
+                });
               },
               disabled: isExporting,
-              children: /* @__PURE__ */ jsx8("span", { className: "rf-text-xs", children: exp.name })
+              children: /* @__PURE__ */ jsx10("span", { className: "rf-text-xs", children: exp.name })
             },
             i
           )) }) })
         ] }),
-        /* @__PURE__ */ jsxs6(DropdownMenuSub, { children: [
-          /* @__PURE__ */ jsx8(DropdownMenuSubTrigger, { className: "rf-text-xs", children: "Advanced" }),
-          /* @__PURE__ */ jsx8(DropdownMenuPortal, { children: /* @__PURE__ */ jsxs6(DropdownMenuSubContent, { children: [
-            /* @__PURE__ */ jsx8(DropdownMenuItem, { className: "rf-flex rf-items-center rf-gap-2", children: /* @__PURE__ */ jsxs6("div", { className: "rf-flex rf-items-center rf-gap-2", children: [
-              /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsxs7(DropdownMenuSub, { children: [
+          /* @__PURE__ */ jsx10(DropdownMenuSubTrigger, { className: "rf-text-xs", children: "Advanced" }),
+          /* @__PURE__ */ jsx10(DropdownMenuPortal, { children: /* @__PURE__ */ jsxs7(DropdownMenuSubContent, { children: [
+            /* @__PURE__ */ jsx10(DropdownMenuItem, { className: "rf-flex rf-items-center rf-gap-2", children: /* @__PURE__ */ jsxs7("div", { className: "rf-flex rf-items-center rf-gap-2", children: [
+              /* @__PURE__ */ jsx10(
                 Checkbox,
                 {
                   id: "load-latest-eval",
@@ -1495,7 +1704,7 @@ var RunframeCliLeftHeader = (props) => {
                   }
                 }
               ),
-              /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx10(
                 "label",
                 {
                   htmlFor: "load-latest-eval",
@@ -1504,53 +1713,31 @@ var RunframeCliLeftHeader = (props) => {
                 }
               )
             ] }) }),
-            lastRunEvalVersion && /* @__PURE__ */ jsx8(DropdownMenuItem, { className: "rf-flex rf-items-center rf-gap-2", children: /* @__PURE__ */ jsx8("div", { className: "rf-flex rf-items-center rf-gap-2", children: /* @__PURE__ */ jsxs6("span", { className: "rf-text-xs", children: [
+            lastRunEvalVersion && /* @__PURE__ */ jsx10(DropdownMenuItem, { className: "rf-flex rf-items-center rf-gap-2", children: /* @__PURE__ */ jsx10("div", { className: "rf-flex rf-items-center rf-gap-2", children: /* @__PURE__ */ jsxs7("span", { className: "rf-text-xs", children: [
               "@tscircuit/eval@",
               lastRunEvalVersion
             ] }) }) }),
-            /* @__PURE__ */ jsx8(
+            /* @__PURE__ */ jsx10(
               DropdownMenuItem,
               {
                 className: "rf-flex rf-items-center rf-gap-2",
                 onClick: () => {
                   window.open("/api/admin", "_blank");
                 },
-                children: /* @__PURE__ */ jsx8("div", { className: "rf-flex rf-items-center rf-gap-2", children: /* @__PURE__ */ jsx8("span", { className: "rf-text-xs", children: "CLI Admin Panel" }) })
+                children: /* @__PURE__ */ jsx10("div", { className: "rf-flex rf-items-center rf-gap-2", children: /* @__PURE__ */ jsx10("span", { className: "rf-text-xs", children: "CLI Admin Panel" }) })
               }
             )
           ] }) })
         ] })
       ] }),
-      /* @__PURE__ */ jsx8("div", { className: "!rf-h-full rf-w-fit rf-grid rf-place-items-center rf-my-auto", children: /* @__PURE__ */ jsxs6("div", { className: "rf-flex rf-gap-4", children: [
-        hasUnsavedChanges || hasNeverBeenSaved && /* @__PURE__ */ jsx8(
-          "button",
-          {
-            type: "button",
-            disabled: isSaving,
-            onClick: triggerSaveSnippet,
-            className: "transition ease-in-out hover:scale-105 pointer-cursor rf-text-xs rf-h-fit disabled:rf-bg-blue-600/60 rf-bg-blue-600/70 rf-text-white rf-p-0.5 rf-px-1.5 rf-rounded",
-            children: isSaving ? "Syncing..." : "Not Synced"
-          }
-        ),
-        notificationMessage && /* @__PURE__ */ jsx8(
-          "div",
-          {
-            className: `rf-text-xs rf-font-medium rf-mt-1 rf-flex rf-max-w-xl rf-text-blue-500 rf-break-words rf-text-center rf-h-full`,
-            children: /* @__PURE__ */ jsxs6("div", { className: "rf-flex rf-items-center", children: [
-              /* @__PURE__ */ jsx8(CheckCircle, { className: "rf-w-4 rf-h-4 rf-inline rf-mr-1" }),
-              notificationMessage
-            ] })
-          }
-        )
-      ] }) }),
-      /* @__PURE__ */ jsx8(AlertDialog, { open: isError, onOpenChange: setIsError, children: /* @__PURE__ */ jsxs6(AlertDialogContent, { children: [
-        /* @__PURE__ */ jsxs6(AlertDialogHeader, { children: [
-          /* @__PURE__ */ jsx8(AlertDialogTitle, { children: "Error Saving Snippet" }),
-          /* @__PURE__ */ jsx8(AlertDialogDescription, { children: errorMessage })
+      /* @__PURE__ */ jsx10(AlertDialog, { open: isError, onOpenChange: setIsError, children: /* @__PURE__ */ jsxs7(AlertDialogContent, { children: [
+        /* @__PURE__ */ jsxs7(AlertDialogHeader, { children: [
+          /* @__PURE__ */ jsx10(AlertDialogTitle, { children: "Error Saving Snippet" }),
+          /* @__PURE__ */ jsx10(AlertDialogDescription, { children: errorMessage })
         ] }),
-        /* @__PURE__ */ jsx8(AlertDialogFooter, { children: /* @__PURE__ */ jsx8(AlertDialogCancel, { onClick: () => setIsError(false), children: "Dismiss" }) })
+        /* @__PURE__ */ jsx10(AlertDialogFooter, { children: /* @__PURE__ */ jsx10(AlertDialogCancel, { onClick: () => setIsError(false), children: "Dismiss" }) })
       ] }) }),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx10(
         SelectSnippetDialog,
         {
           snippetNames: availableSnippets ?? [],
@@ -1569,39 +1756,55 @@ var RunframeCliLeftHeader = (props) => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx10(
       ImportComponentDialog,
       {
         isOpen: isImportDialogOpen,
         onClose: () => setIsImportDialogOpen(false),
         onImport: async (component) => {
-          console.log("Component imported:", component);
-          setIsImportDialogOpen(false);
-          await pushEvent({
-            event_type: "IMPORT_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
+                );
+                return { filePath };
+              }
+            },
+            {
+              loading: `Importing component: "${component.name}"`,
+              success: (data) => data?.filePath ? `Imported to "${data.filePath}"` : "Import Successful"
+            }
+          );
         }
       }
-    )
+    ),
+    /* @__PURE__ */ jsx10(Toaster, { position: "top-center", reverseOrder: false }),
+    /* @__PURE__ */ jsx10(orderDialog.OrderDialog, {})
   ] });
 };
 
 // lib/components/RunFrameForCli/RunFrameForCli.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var RunFrameForCli = (props) => {
   const [shouldLoadLatestEval, setLoadLatestEval] = useLocalStorageState(
     "load-latest-eval",
     true
   );
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx11(
     RunFrameWithApi,
     {
       debug: props.debug,
       forceLatestEvalVersion: shouldLoadLatestEval,
       defaultToFullScreen: true,
       showToggleFullScreen: false,
-      leftHeaderContent: /* @__PURE__ */ jsx9("div", { className: "rf-flex", children: /* @__PURE__ */ jsx9(
+      leftHeaderContent: /* @__PURE__ */ jsx11("div", { className: "rf-flex", children: /* @__PURE__ */ jsx11(
         RunframeCliLeftHeader,
         {
           shouldLoadLatestEval,