@tscircuit/runframe 0.0.274 → 0.0.276

package/dist/runner.js

@@ -9,9 +9,12 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
+  Tabs,
+  TabsList,
+  TabsTrigger,
   buttonVariants,
   cn
-} from "./chunk-XJXAIAEQ.js";
+} from "./chunk-TPHHXIJB.js";
 
 // lib/components/RunFrame/RunFrame.tsx
 import { createCircuitWebWorker } from "@tscircuit/eval/worker";
@@ -745,7 +748,7 @@ function useLocalStorageState(key, initialValue) {
 }
 
 // lib/components/RunFrameForCli/LeftHeader.tsx
-import { useEffect as useEffect6, useMemo as useMemo4, useState as useState6 } from "react";
+import { useEffect as useEffect7, useMemo as useMemo4, useState as useState7 } from "react";
 
 // lib/components/RunFrameForCli/SelectSnippetDialog.tsx
 import { useState as useState5 } from "react";
@@ -984,8 +987,334 @@ var Checkbox = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__
 ));
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
+// lib/components/ImportComponentDialog/ImportComponentDialog.tsx
+import "react";
+import { useState as useState6, useEffect as useEffect6 } from "react";
+import { Loader2 as Loader22, Search, ExternalLink } from "lucide-react";
+
+// lib/components/ui/input.tsx
+import * as React3 from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Input = React3.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ jsx6(
+      "input",
+      {
+        type,
+        className: cn(
+          "rf-flex rf-h-9 rf-w-full rf-rounded-md rf-border rf-border-zinc-200 rf-bg-white rf-px-3 rf-py-1 rf-text-sm rf-shadow-sm rf-transition-colors file:rf-border-0 file:rf-bg-transparent file:rf-text-sm file:rf-font-medium placeholder:rf-text-zinc-500 focus-visible:rf-outline-none focus-visible:rf-ring-1 focus-visible:rf-ring-zinc-950 disabled:rf-cursor-not-allowed disabled:rf-opacity-50 dark:rf-border-zinc-800 dark:rf-bg-zinc-950 dark:rf-placeholder-zinc-400 dark:focus-visible:rf-ring-zinc-300",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+// 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/tscircuit-registry-api.ts
+var searchTscircuitComponents = async (query, limit = 10) => {
+  try {
+    const encodedQuery = encodeURIComponent(query);
+    const response = await fetch(
+      `https://registry-api.tscircuit.com/snippets/search?q=${encodedQuery}&limit=${limit}`
+    );
+    if (!response.ok) {
+      throw new Error(
+        `tscircuit Registry API error: ${response.status} ${response.statusText}`
+      );
+    }
+    const data = await response.json();
+    return data.snippets || [];
+  } catch (error) {
+    console.error("Error searching tscircuit components:", error);
+    throw error;
+  }
+};
+var mapTscircuitSnippetToSearchResult = (tscircuitSnippet) => {
+  return {
+    id: `tscircuit-${tscircuitSnippet.snippet_id}`,
+    name: tscircuitSnippet.unscoped_name,
+    description: tscircuitSnippet.description || `Component by ${tscircuitSnippet.owner_name}`,
+    source: "tscircuit",
+    partNumber: tscircuitSnippet.name,
+    previewUrl: tscircuitSnippet.preview_url,
+    // Additional tscircuit-specific properties
+    code: tscircuitSnippet.code,
+    owner: tscircuitSnippet.owner_name
+  };
+};
+
+// lib/components/ImportComponentDialog/ImportComponentDialog.tsx
+import { createSvgUrl as createPngUrl } from "@tscircuit/create-snippet-url";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var ImportComponentDialog = ({
+  isOpen,
+  onClose,
+  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"
+  );
+  const [detailsOpen, setDetailsOpen] = useState6(false);
+  const [detailsComponent, setDetailsComponent] = useState6(null);
+  const handleSearch = async () => {
+    if (!searchQuery.trim()) return;
+    setIsLoading(true);
+    const isJlcPartNumber = /^C\d+/.test(searchQuery);
+    if (isJlcPartNumber) {
+      setActiveTab("jlcpcb");
+    }
+    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 {
+        const tscircuitComponents = await searchTscircuitComponents(
+          searchQuery,
+          10
+        );
+        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);
+  };
+  return /* @__PURE__ */ jsxs5(AlertDialog, { open: isOpen, onOpenChange: () => onClose(), children: [
+    /* @__PURE__ */ jsxs5(AlertDialogContent, { className: "rf-max-w-3xl rf-w-full rf-max-h-[90vh] rf-overflow-y-auto rf-flex rf-flex-col", children: [
+      /* @__PURE__ */ jsxs5(AlertDialogHeader, { children: [
+        /* @__PURE__ */ jsx7(AlertDialogTitle, { children: "Import Component" }),
+        /* @__PURE__ */ jsx7(AlertDialogDescription, { children: "Search for components from tscircuit.com or JLCPCB parts library." })
+      ] }),
+      /* @__PURE__ */ jsxs5(
+        Tabs,
+        {
+          value: activeTab,
+          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: "jlcpcb", children: "JLCPCB Parts" })
+            ] }),
+            /* @__PURE__ */ jsxs5("div", { className: "rf-flex rf-items-center rf-gap-2 rf-mt-4", children: [
+              /* @__PURE__ */ jsxs5("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" ? "Search components..." : "Search JLCPCB parts (e.g. C14663)...",
+                    className: "rf-pl-8",
+                    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("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__ */ jsxs5(
+              "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__ */ jsxs5("div", { children: [
+                    /* @__PURE__ */ jsx7("div", { className: "rf-font-medium", children: result.name }),
+                    /* @__PURE__ */ jsxs5("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" && /* @__PURE__ */ jsx7(
+                    Button,
+                    {
+                      variant: "outline",
+                      size: "sm",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        showDetails(result);
+                      },
+                      children: "See Details"
+                    }
+                  ) })
+                ]
+              },
+              result.id
+            )) }) : isLoading ? /* @__PURE__ */ jsxs5("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__ */ jsxs5(AlertDialogFooter, { children: [
+        /* @__PURE__ */ jsx7(AlertDialogCancel, { onClick: onClose, children: "Cancel" }),
+        /* @__PURE__ */ jsx7(
+          Button,
+          {
+            onClick: () => {
+              if (selectedComponent) {
+                onImport(selectedComponent);
+                onClose();
+              }
+            },
+            disabled: !selectedComponent,
+            children: "Import Component"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx7(AlertDialog, { open: detailsOpen, onOpenChange: setDetailsOpen, children: /* @__PURE__ */ jsxs5(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__ */ jsxs5(AlertDialogHeader, { children: [
+        /* @__PURE__ */ jsx7(AlertDialogTitle, { children: detailsComponent?.name }),
+        /* @__PURE__ */ jsx7(AlertDialogDescription, { children: "Detailed information about the selected component" }),
+        /* @__PURE__ */ jsxs5("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__ */ 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: "JLCPCB Details" }),
+        /* @__PURE__ */ jsxs5("div", { className: "rf-grid rf-grid-cols-2 rf-gap-2", children: [
+          detailsComponent.package && /* @__PURE__ */ jsxs5("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__ */ jsxs5("div", { className: "rf-flex rf-flex-col", children: [
+            /* @__PURE__ */ jsx7("span", { className: "rf-text-xs rf-text-zinc-500", children: "Price" }),
+            /* @__PURE__ */ jsxs5("span", { className: "rf-font-medium", children: [
+              "$",
+              detailsComponent.price.toFixed(4)
+            ] })
+          ] })
+        ] })
+      ] }),
+      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: [
+        /* @__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" }),
+          /* @__PURE__ */ jsx7("span", { className: "rf-font-medium", children: detailsComponent.owner })
+        ] }) }),
+        detailsComponent.code && /* @__PURE__ */ jsxs5("div", { className: "rf-mt-2", children: [
+          /* @__PURE__ */ jsx7("div", { className: "rf-text-xs rf-text-zinc-500 rf-mb-1", children: "Code Preview" }),
+          /* @__PURE__ */ jsxs5("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__ */ 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(
+          "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__ */ jsxs5("div", { className: "rf-flex rf-justify-between", children: [
+        /* @__PURE__ */ jsxs5(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            className: "rf-gap-1",
+            onClick: () => {
+              const url = detailsComponent?.source === "jlcpcb" ? `https://jlcpcb.com/partdetail/${detailsComponent.partNumber}` : `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(
+          Button,
+          {
+            onClick: () => {
+              setDetailsOpen(false);
+              if (detailsComponent) {
+                onImport(detailsComponent);
+                onClose();
+              }
+            },
+            children: "Import Component"
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+};
+
 // lib/components/RunFrameForCli/LeftHeader.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var availableExports = [
   { extension: "json", name: "JSON" },
   { extension: "svg", name: "SVG" },
@@ -999,23 +1328,23 @@ var availableExports = [
 ];
 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] = useState7(null);
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState7(false);
+  const [hasNeverBeenSaved, setHasNeverBeenSaved] = useState7(true);
+  const [isSaving, setIsSaving] = useState7(false);
+  const [requestToSaveSentAt, setRequestToSaveSentAt] = useState7(
     null
   );
-  const [availableSnippets, setAvailableSnippets] = useState6(
+  const [availableSnippets, setAvailableSnippets] = useState7(
     null
   );
-  const [isSelectSnippetDialogOpen, setIsSelectSnippetDialogOpen] = useState6(false);
-  const [notificationMessage, setNotificationMessage] = useState6(
+  const [isSelectSnippetDialogOpen, setIsSelectSnippetDialogOpen] = useState7(false);
+  const [notificationMessage, setNotificationMessage] = useState7(
     null
   );
-  const [errorMessage, setErrorMessage] = useState6(null);
-  const [isError, setIsError] = useState6(false);
-  const [isExporting, setisExporting] = useState6(false);
+  const [errorMessage, setErrorMessage] = useState7(null);
+  const [isError, setIsError] = useState7(false);
+  const [isExporting, setisExporting] = useState7(false);
   const pushEvent = useRunFrameStore((state) => state.pushEvent);
   const recentEvents = useRunFrameStore((state) => state.recentEvents);
   const firstRenderTime = useMemo4(() => Date.now(), []);
@@ -1043,7 +1372,7 @@ var RunframeCliLeftHeader = (props) => {
       setisExporting(false);
     }
   });
-  useEffect6(() => {
+  useEffect7(() => {
     if (!isSaving || requestToSaveSentAt === null) return;
     const eventsSinceRequestToSave = recentEvents.filter(
       (event) => new Date(event.created_at).valueOf() > requestToSaveSentAt
@@ -1084,144 +1413,180 @@ var RunframeCliLeftHeader = (props) => {
       snippet_name: snippetName
     });
   };
-  return /* @__PURE__ */ jsxs5(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx6(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx6("div", { className: "rf-whitespace-nowrap rf-text-xs font-medium rf-p-2 rf-mx-1 rf-cursor-pointer rf-relative", children: "File" }) }),
-    /* @__PURE__ */ jsxs5(DropdownMenuContent, { children: [
-      /* @__PURE__ */ jsx6(
-        DropdownMenuItem,
-        {
-          className: "rf-text-xs",
-          onSelect: triggerSaveSnippet,
-          disabled: isSaving,
-          children: isSaving ? "Saving..." : "Push"
-        }
-      ),
-      /* @__PURE__ */ jsxs5(DropdownMenuSub, { children: [
-        /* @__PURE__ */ jsx6(DropdownMenuSubTrigger, { className: "rf-text-xs", disabled: isExporting, children: isExporting ? "Exporting..." : "Export" }),
-        /* @__PURE__ */ jsx6(DropdownMenuPortal, { children: /* @__PURE__ */ jsx6(DropdownMenuSubContent, { children: availableExports.map((exp, i) => /* @__PURE__ */ jsx6(
+  const [isImportDialogOpen, setIsImportDialogOpen] = useState7(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(
           DropdownMenuItem,
           {
-            onSelect: () => {
-              if (!isExporting) {
-                pushEvent({
-                  event_type: "REQUEST_EXPORT",
-                  exportType: exp.extension
-                });
-                setNotificationMessage(`Export requested for ${exp.name}`);
-                setIsError(false);
-              }
+            className: "rf-text-xs",
+            onSelect: triggerSaveSnippet,
+            disabled: isSaving,
+            children: isSaving ? "Saving..." : "Push"
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          DropdownMenuItem,
+          {
+            className: "rf-text-xs",
+            onSelect: () => setIsImportDialogOpen(true),
+            disabled: isSaving,
+            children: "Import"
+          }
+        ),
+        /* @__PURE__ */ jsxs6(DropdownMenuSub, { children: [
+          /* @__PURE__ */ jsx8(
+            DropdownMenuSubTrigger,
+            {
+              className: "rf-text-xs",
+              disabled: isExporting,
+              children: isExporting ? "Exporting..." : "Export"
+            }
+          ),
+          /* @__PURE__ */ jsx8(DropdownMenuPortal, { children: /* @__PURE__ */ jsx8(DropdownMenuSubContent, { children: availableExports.map((exp, i) => /* @__PURE__ */ jsx8(
+            DropdownMenuItem,
+            {
+              onSelect: () => {
+                if (!isExporting) {
+                  pushEvent({
+                    event_type: "REQUEST_EXPORT",
+                    exportType: exp.extension
+                  });
+                  setNotificationMessage(
+                    `Export requested for ${exp.name}`
+                  );
+                  setIsError(false);
+                }
+              },
+              disabled: isExporting,
+              children: /* @__PURE__ */ jsx8("span", { className: "rf-text-xs", children: exp.name })
             },
-            disabled: isExporting,
-            children: /* @__PURE__ */ jsx6("span", { className: "rf-text-xs", children: exp.name })
-          },
-          i
-        )) }) })
-      ] }),
-      /* @__PURE__ */ jsxs5(DropdownMenuSub, { children: [
-        /* @__PURE__ */ jsx6(DropdownMenuSubTrigger, { className: "rf-text-xs", children: "Advanced" }),
-        /* @__PURE__ */ jsx6(DropdownMenuPortal, { children: /* @__PURE__ */ jsxs5(DropdownMenuSubContent, { children: [
-          /* @__PURE__ */ jsx6(DropdownMenuItem, { className: "rf-flex rf-items-center rf-gap-2", children: /* @__PURE__ */ jsxs5("div", { className: "rf-flex rf-items-center rf-gap-2", children: [
-            /* @__PURE__ */ jsx6(
-              Checkbox,
-              {
-                id: "load-latest-eval",
-                checked: props.shouldLoadLatestEval,
-                onCheckedChange: (checked) => {
-                  props.onChangeShouldLoadLatestEval(checked === true);
+            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(
+                Checkbox,
+                {
+                  id: "load-latest-eval",
+                  checked: props.shouldLoadLatestEval,
+                  onCheckedChange: (checked) => {
+                    props.onChangeShouldLoadLatestEval(checked === true);
+                  }
                 }
-              }
-            ),
-            /* @__PURE__ */ jsx6(
-              "label",
+              ),
+              /* @__PURE__ */ jsx8(
+                "label",
+                {
+                  htmlFor: "load-latest-eval",
+                  className: "rf-text-xs rf-cursor-pointer",
+                  children: "Force Latest @tscircuit/eval"
+                }
+              )
+            ] }) }),
+            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: [
+              "@tscircuit/eval@",
+              lastRunEvalVersion
+            ] }) }) }),
+            /* @__PURE__ */ jsx8(
+              DropdownMenuItem,
               {
-                htmlFor: "load-latest-eval",
-                className: "rf-text-xs rf-cursor-pointer",
-                children: "Force Latest @tscircuit/eval"
+                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" }) })
               }
             )
-          ] }) }),
-          lastRunEvalVersion && /* @__PURE__ */ jsx6(DropdownMenuItem, { className: "rf-flex rf-items-center rf-gap-2", children: /* @__PURE__ */ jsx6("div", { className: "rf-flex rf-items-center rf-gap-2", children: /* @__PURE__ */ jsxs5("span", { className: "rf-text-xs", children: [
-            "@tscircuit/eval@",
-            lastRunEvalVersion
-          ] }) }) }),
-          /* @__PURE__ */ jsx6(
-            DropdownMenuItem,
-            {
-              className: "rf-flex rf-items-center rf-gap-2",
-              onClick: () => {
-                window.open("/api/admin", "_blank");
-              },
-              children: /* @__PURE__ */ jsx6("div", { className: "rf-flex rf-items-center rf-gap-2", children: /* @__PURE__ */ jsx6("span", { className: "rf-text-xs", children: "CLI Admin Panel" }) })
-            }
-          )
-        ] }) })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx6("div", { className: "!rf-h-full rf-w-fit rf-grid rf-place-items-center rf-my-auto", children: /* @__PURE__ */ jsxs5("div", { className: "rf-flex rf-gap-4", children: [
-      hasUnsavedChanges || hasNeverBeenSaved && /* @__PURE__ */ jsx6(
-        "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__ */ jsx6(
-        "div",
+          ] }) })
+        ] })
+      ] }),
+      /* @__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__ */ jsx8(AlertDialogFooter, { children: /* @__PURE__ */ jsx8(AlertDialogCancel, { onClick: () => setIsError(false), children: "Dismiss" }) })
+      ] }) }),
+      /* @__PURE__ */ jsx8(
+        SelectSnippetDialog,
         {
-          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__ */ jsxs5("div", { className: "rf-flex rf-items-center", children: [
-            /* @__PURE__ */ jsx6(CheckCircle, { className: "rf-w-4 rf-h-4 rf-inline rf-mr-1" }),
-            notificationMessage
-          ] })
+          snippetNames: availableSnippets ?? [],
+          onSelect: async (name) => {
+            setIsSaving(true);
+            setRequestToSaveSentAt(Date.now());
+            setSnippetName(name);
+            await pushEvent({
+              event_type: "REQUEST_TO_SAVE_SNIPPET",
+              snippet_name: name
+            });
+            setIsSelectSnippetDialogOpen(false);
+          },
+          onCancel: () => setIsSelectSnippetDialogOpen(false),
+          isOpen: isSelectSnippetDialogOpen
         }
       )
-    ] }) }),
-    /* @__PURE__ */ jsx6(AlertDialog, { open: isError, onOpenChange: setIsError, children: /* @__PURE__ */ jsxs5(AlertDialogContent, { children: [
-      /* @__PURE__ */ jsxs5(AlertDialogHeader, { children: [
-        /* @__PURE__ */ jsx6(AlertDialogTitle, { children: "Error Saving Snippet" }),
-        /* @__PURE__ */ jsx6(AlertDialogDescription, { children: errorMessage })
-      ] }),
-      /* @__PURE__ */ jsx6(AlertDialogFooter, { children: /* @__PURE__ */ jsx6(AlertDialogCancel, { onClick: () => setIsError(false), children: "Dismiss" }) })
-    ] }) }),
-    /* @__PURE__ */ jsx6(
-      SelectSnippetDialog,
+    ] }),
+    /* @__PURE__ */ jsx8(
+      ImportComponentDialog,
       {
-        snippetNames: availableSnippets ?? [],
-        onSelect: async (name) => {
-          setIsSaving(true);
-          setRequestToSaveSentAt(Date.now());
-          setSnippetName(name);
+        isOpen: isImportDialogOpen,
+        onClose: () => setIsImportDialogOpen(false),
+        onImport: async (component) => {
+          console.log("Component imported:", component);
+          setIsImportDialogOpen(false);
           await pushEvent({
-            event_type: "REQUEST_TO_SAVE_SNIPPET",
-            snippet_name: name
+            event_type: "IMPORT_COMPONENT",
+            component
           });
-          setIsSelectSnippetDialogOpen(false);
-        },
-        onCancel: () => setIsSelectSnippetDialogOpen(false),
-        isOpen: isSelectSnippetDialogOpen
+        }
       }
     )
   ] });
 };
 
 // lib/components/RunFrameForCli/RunFrameForCli.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var RunFrameForCli = (props) => {
   const [shouldLoadLatestEval, setLoadLatestEval] = useLocalStorageState(
     "load-latest-eval",
     true
   );
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx9(
     RunFrameWithApi,
     {
       debug: props.debug,
       forceLatestEvalVersion: shouldLoadLatestEval,
       defaultToFullScreen: true,
       showToggleFullScreen: false,
-      leftHeaderContent: /* @__PURE__ */ jsx7("div", { className: "rf-flex", children: /* @__PURE__ */ jsx7(
+      leftHeaderContent: /* @__PURE__ */ jsx9("div", { className: "rf-flex", children: /* @__PURE__ */ jsx9(
         RunframeCliLeftHeader,
         {
           shouldLoadLatestEval,