@tscircuit/runframe 0.0.970 → 0.0.971

package/dist/runner.js

@@ -23,7 +23,7 @@ import {
   useRunFrameStore,
   useRunnerStore,
   useStyles
-} from "./chunk-GEXWDQ4P.js";
+} from "./chunk-7PCGNX3W.js";
 
 // lib/components/RunFrame/RunFrame.tsx
 import { createCircuitWebWorker } from "@tscircuit/eval/worker";
@@ -125,8 +125,28 @@ function useMutex() {
   return { runWithMutex, isLocked, cancel };
 }
 
+// lib/components/ui/LoadingSkeleton.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var LoadingSkeleton = ({
+  message = "Loading files..."
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: "rf-flex rf-flex-col rf-w-full rf-h-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: "rf-flex rf-items-center rf-gap-4 rf-p-2 rf-border-b", children: [
+      /* @__PURE__ */ jsx("div", { className: "rf-w-20 rf-h-9 rf-bg-gray-200 dark:rf-bg-gray-700 rf-rounded-md rf-animate-pulse" }),
+      /* @__PURE__ */ jsx("div", { className: "rf-flex rf-gap-6 rf-ml-auto", children: ["PCB", "Schematic", "3D"].map((_, i) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "rf-h-6 rf-w-20 rf-bg-gray-200 dark:rf-bg-gray-700 rf-rounded rf-animate-pulse"
+        },
+        i
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "rf-flex-1 rf-p-4", children: /* @__PURE__ */ jsx("div", { className: "rf-w-full rf-h-full rf-rounded-lg rf-bg-gray-100 dark:rf-bg-gray-800 rf-animate-pulse rf-flex rf-items-center rf-justify-center", children: /* @__PURE__ */ jsx("div", { className: "rf-flex rf-flex-col rf-items-center rf-gap-4", children: /* @__PURE__ */ jsx("div", { className: "rf-text-sm rf-text-gray-400 dark:rf-text-gray-500", children: message }) }) }) })
+  ] });
+};
+
 // lib/components/RunFrame/RunFrame.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var numRenderPhases = 26;
 var debug = Debug("run-frame:RunFrame");
 var fetchLatestEvalVersion = async () => {
@@ -499,21 +519,9 @@ var RunFrame = (props) => {
     });
   };
   if (props.isLoadingFiles) {
-    return /* @__PURE__ */ jsxs("div", { className: "rf-flex rf-flex-col rf-w-full rf-h-full", children: [
-      /* @__PURE__ */ jsxs("div", { className: "rf-flex rf-items-center rf-gap-4 rf-p-2 rf-border-b", children: [
-        /* @__PURE__ */ jsx("div", { className: "rf-w-20 rf-h-9 rf-bg-gray-200 dark:rf-bg-gray-700 rf-rounded-md rf-animate-pulse" }),
-        /* @__PURE__ */ jsx("div", { className: "rf-flex rf-gap-6 rf-ml-auto", children: ["PCB", "Schematic", "3D"].map((_, i) => /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "rf-h-6 rf-w-20 rf-bg-gray-200 dark:rf-bg-gray-700 rf-rounded rf-animate-pulse"
-          },
-          i
-        )) })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "rf-flex-1 rf-p-4", children: /* @__PURE__ */ jsx("div", { className: "rf-w-full rf-h-full rf-rounded-lg rf-bg-gray-100 dark:rf-bg-gray-800 rf-animate-pulse rf-flex rf-items-center rf-justify-center", children: /* @__PURE__ */ jsx("div", { className: "rf-flex rf-flex-col rf-items-center rf-gap-4", children: /* @__PURE__ */ jsx("div", { className: "rf-text-sm rf-text-gray-400 dark:rf-text-gray-500", children: "Loading files..." }) }) }) })
-    ] });
+    return /* @__PURE__ */ jsx2(LoadingSkeleton, {});
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     CircuitJsonPreview,
     {
       code: fsMap.get(props.entrypoint ?? props.mainComponentPath),
@@ -525,9 +533,9 @@ var RunFrame = (props) => {
       autoroutingGraphics,
       autoroutingLog,
       onReportAutoroutingLog: props.onReportAutoroutingLog || handleReportAutoroutingLog,
-      leftHeaderContent: /* @__PURE__ */ jsxs(Fragment, { children: [
-        props.showRunButton && /* @__PURE__ */ jsxs("div", { className: "rf-relative rf-inline-flex", children: [
-          /* @__PURE__ */ jsxs(
+      leftHeaderContent: /* @__PURE__ */ jsxs2(Fragment, { children: [
+        props.showRunButton && /* @__PURE__ */ jsxs2("div", { className: "rf-relative rf-inline-flex", children: [
+          /* @__PURE__ */ jsxs2(
             "button",
             {
               type: "button",
@@ -539,11 +547,11 @@ var RunFrame = (props) => {
               children: [
                 "Run",
                 " ",
-                isRunning || !dependenciesLoaded ? /* @__PURE__ */ jsx(Loader2, { className: "rf-w-3 rf-h-3 rf-animate-spin" }) : /* @__PURE__ */ jsx(Play, { className: "rf-w-3 rf-h-3" })
+                isRunning || !dependenciesLoaded ? /* @__PURE__ */ jsx2(Loader2, { className: "rf-w-3 rf-h-3 rf-animate-spin" }) : /* @__PURE__ */ jsx2(Play, { className: "rf-w-3 rf-h-3" })
               ]
             }
           ),
-          isRunning && /* @__PURE__ */ jsx("div", { className: "rf-flex rf-items-center rf-ml-1", children: /* @__PURE__ */ jsx(
+          isRunning && /* @__PURE__ */ jsx2("div", { className: "rf-flex rf-items-center rf-ml-1", children: /* @__PURE__ */ jsx2(
             Button,
             {
               onClick: (e) => {
@@ -565,7 +573,7 @@ var RunFrame = (props) => {
               variant: "ghost",
               size: "icon",
               className: "rf-text-red-300 hover:rf-text-red-400 hover:!rf-bg-transparent [&>svg]:rf-text-red-300 [&>svg]:hover:rf-text-red-400 rf-flex rf-items-center rf-justify-center",
-              children: /* @__PURE__ */ jsx(
+              children: /* @__PURE__ */ jsx2(
                 Square,
                 {
                   className: "!rf-h-2.5 !rf-w-2.5",
@@ -576,7 +584,7 @@ var RunFrame = (props) => {
             }
           ) })
         ] }),
-        props.showFileMenu !== false && /* @__PURE__ */ jsx(FileMenuLeftHeader, { isWebEmbedded: props.isWebEmbedded }),
+        props.showFileMenu !== false && /* @__PURE__ */ jsx2(FileMenuLeftHeader, { isWebEmbedded: props.isWebEmbedded }),
         props.leftHeaderContent
       ] }),
       onActiveTabChange: setActiveTab,
@@ -694,8 +702,8 @@ import * as React from "react";
 import "@radix-ui/react-dialog";
 import { Command as CommandPrimitive } from "cmdk";
 import { Search } from "lucide-react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var Command = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var Command = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
   CommandPrimitive,
   {
     ref,
@@ -707,14 +715,14 @@ var Command = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Command.displayName = CommandPrimitive.displayName;
-var CommandInput = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs2(
+var CommandInput = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs3(
   "div",
   {
     className: "rf-flex rf-items-center rf-border-b rf-px-3",
     "cmdk-input-wrapper": "",
     children: [
-      /* @__PURE__ */ jsx2(Search, { className: "rf-mr-2 rf-h-4 rf-w-4 rf-shrink-0 rf-opacity-50" }),
-      /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx3(Search, { className: "rf-mr-2 rf-h-4 rf-w-4 rf-shrink-0 rf-opacity-50" }),
+      /* @__PURE__ */ jsx3(
         CommandPrimitive.Input,
         {
           ref,
@@ -729,7 +737,7 @@ var CommandInput = React.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 CommandInput.displayName = CommandPrimitive.Input.displayName;
-var CommandList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+var CommandList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
   CommandPrimitive.List,
   {
     ref,
@@ -741,7 +749,7 @@ var CommandList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 CommandList.displayName = CommandPrimitive.List.displayName;
-var CommandEmpty = React.forwardRef((props, ref) => /* @__PURE__ */ jsx2(
+var CommandEmpty = React.forwardRef((props, ref) => /* @__PURE__ */ jsx3(
   CommandPrimitive.Empty,
   {
     ref,
@@ -750,7 +758,7 @@ var CommandEmpty = React.forwardRef((props, ref) => /* @__PURE__ */ jsx2(
   }
 ));
 CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
-var CommandGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+var CommandGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
   CommandPrimitive.Group,
   {
     ref,
@@ -762,7 +770,7 @@ var CommandGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 CommandGroup.displayName = CommandPrimitive.Group.displayName;
-var CommandSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+var CommandSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
   CommandPrimitive.Separator,
   {
     ref,
@@ -774,7 +782,7 @@ var CommandSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
-var CommandItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+var CommandItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
   CommandPrimitive.Item,
   {
     ref,
@@ -790,7 +798,7 @@ var CommandShortcut = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "span",
     {
       className: cn(
@@ -806,10 +814,10 @@ CommandShortcut.displayName = "CommandShortcut";
 // lib/components/ui/popover.tsx
 import * as React2 from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = React2.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx3(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx3(
+var PopoverContent = React2.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx4(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx4(
   PopoverPrimitive.Content,
   {
     ref,
@@ -893,42 +901,47 @@ function getCurrentFolderContents(tree, currentFolder) {
 }
 
 // lib/components/RunFrameWithApi/EnhancedFileSelectorCombobox/EnhancedFileSelectorCombobox.tsx
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-function getFileIcon(fileName) {
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var defaultFileIcon = (fileName) => {
   if (fileName.endsWith(".tsx") || fileName.endsWith(".jsx")) {
-    return /* @__PURE__ */ jsx4(Code, { className: "rf-h-4 rf-w-4 rf-text-blue-500" });
+    return /* @__PURE__ */ jsx5(Code, { className: "rf-h-4 rf-w-4 rf-text-blue-500" });
   }
   if (fileName.endsWith(".ts") || fileName.endsWith(".js")) {
-    return /* @__PURE__ */ jsx4(Code, { className: "rf-h-4 rf-w-4 rf-text-yellow-600" });
+    return /* @__PURE__ */ jsx5(Code, { className: "rf-h-4 rf-w-4 rf-text-yellow-600" });
   }
   if (fileName.endsWith(".md") || fileName.endsWith(".txt")) {
-    return /* @__PURE__ */ jsx4(FileText, { className: "rf-h-4 rf-w-4 rf-text-gray-600" });
+    return /* @__PURE__ */ jsx5(FileText, { className: "rf-h-4 rf-w-4 rf-text-gray-600" });
   }
-  return /* @__PURE__ */ jsx4(File, { className: "rf-h-4 rf-w-4 rf-text-gray-500" });
-}
+  return /* @__PURE__ */ jsx5(File, { className: "rf-h-4 rf-w-4 rf-text-gray-500" });
+};
+var defaultFileFilter = (filename) => {
+  return (filename.endsWith(".tsx") || filename.endsWith(".ts") || filename.endsWith(".jsx") || filename.endsWith(".js")) && !filename.endsWith(".d.ts");
+};
+var defaultDisplayName = (filename) => {
+  return filename.split("/").pop() || "";
+};
 var EnhancedFileSelectorCombobox = ({
   files,
   onFileChange,
-  currentFile
+  currentFile,
+  config = {}
 }) => {
   const [open, setOpen] = useState3(false);
   const [file, setFile] = useState3(currentFile);
   const [currentFolder, setCurrentFolder] = useState3("");
   const [currentFileIndex, setCurrentFileIndex] = useState3(0);
   const [searchValue, setSearchValue] = useState3("");
+  const {
+    fileFilter = defaultFileFilter,
+    getDisplayName = defaultDisplayName,
+    placeholder = "Select file",
+    searchPlaceholder = "Search for file",
+    emptyMessage = "No files found in this directory."
+  } = config;
   useEffect4(() => {
     setFile(currentFile);
   }, [currentFile]);
-  const filteredFiles = files.filter((file2) => {
-    const fileName = file2.split("/").pop() ?? "";
-    const lowerCaseFileName = fileName.toLowerCase();
-    const isScriptFile = file2.endsWith(".tsx") || file2.endsWith(".ts") || file2.endsWith(".jsx") || file2.endsWith(".js");
-    if (!isScriptFile || file2.endsWith(".d.ts")) return false;
-    if (lowerCaseFileName.startsWith("test.tsx")) {
-      return false;
-    }
-    return true;
-  });
+  const filteredFiles = files.filter(fileFilter);
   const fileTree = parseFilesToTree(filteredFiles);
   const { files: currentFiles, folders: currentFolders } = getCurrentFolderContents(fileTree, currentFolder);
   const getSearchResults = () => {
@@ -959,38 +972,10 @@ var EnhancedFileSelectorCombobox = ({
   };
   const searchResults = getSearchResults();
   const isSearching = searchValue.trim().length > 0;
-  const canGoBack = currentFolder !== "";
-  const canGoLeft = currentFiles.length > 0 && currentFileIndex > 0;
-  const canGoRight = currentFiles.length > 0 && currentFileIndex < currentFiles.length - 1;
   const navigateToFolder = (folderPath) => {
     setCurrentFolder(folderPath);
     setCurrentFileIndex(0);
   };
-  const goBack = () => {
-    if (currentFolder) {
-      const parentPath = currentFolder.includes("/") ? currentFolder.substring(0, currentFolder.lastIndexOf("/")) : "";
-      setCurrentFolder(parentPath);
-      setCurrentFileIndex(0);
-    }
-  };
-  const goLeft = () => {
-    if (canGoLeft) {
-      const newIndex = currentFileIndex - 1;
-      setCurrentFileIndex(newIndex);
-      const selectedFile = currentFiles[newIndex];
-      setFile(selectedFile.path);
-      onFileChange(selectedFile.path);
-    }
-  };
-  const goRight = () => {
-    if (canGoRight) {
-      const newIndex = currentFileIndex + 1;
-      setCurrentFileIndex(newIndex);
-      const selectedFile = currentFiles[newIndex];
-      setFile(selectedFile.path);
-      onFileChange(selectedFile.path);
-    }
-  };
   const selectFile = (filePath, index) => {
     setFile(filePath);
     setCurrentFileIndex(index);
@@ -1012,7 +997,7 @@ var EnhancedFileSelectorCombobox = ({
   const getDropdownWidth = () => {
     return "rf-w-[400px] rf-min-w-[400px] rf-max-w-[400px]";
   };
-  return /* @__PURE__ */ jsx4("div", { className: "rf-flex rf-items-center rf-gap-1", children: /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsx5("div", { className: "rf-flex rf-items-center rf-gap-1", children: /* @__PURE__ */ jsxs4(
     Popover,
     {
       open,
@@ -1021,38 +1006,38 @@ var EnhancedFileSelectorCombobox = ({
         if (!newOpen) setSearchValue("");
       },
       children: [
-        /* @__PURE__ */ jsx4(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs3(
+        /* @__PURE__ */ jsx5(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs4(
           Button,
           {
             variant: "outline",
             role: "combobox",
             "aria-expanded": open,
-            className: "rf-w-fit rf-min-w-32 rf-max-w-64 rf-justify-center rf-items-center rf-gap-1 !rf-font-normal rf-min-w-0",
+            className: "rf-w-fit rf-min-w-32 rf-max-w-64 rf-justify-center rf-items-center rf-gap-1 !rf-font-normal",
             children: [
-              /* @__PURE__ */ jsx4("span", { className: "rf-truncate rf-text-left", children: file ? file.split("/").pop() : "Select file" }),
-              /* @__PURE__ */ jsx4(ChevronsUpDown, { className: "rf-opacity-50 rf-flex-shrink-0" })
+              /* @__PURE__ */ jsx5("span", { className: "rf-truncate rf-text-left", children: file ? getDisplayName(file) : placeholder }),
+              /* @__PURE__ */ jsx5(ChevronsUpDown, { className: "rf-opacity-50 rf-flex-shrink-0" })
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           PopoverContent,
           {
             className: cn(
               "!rf-p-0 !rf-overflow-x-auto !rf-z-[200]",
               getDropdownWidth()
             ),
-            children: /* @__PURE__ */ jsxs3(Command, { shouldFilter: false, children: [
-              /* @__PURE__ */ jsx4(
+            children: /* @__PURE__ */ jsxs4(Command, { shouldFilter: false, children: [
+              /* @__PURE__ */ jsx5(
                 CommandInput,
                 {
-                  placeholder: "Search for file",
+                  placeholder: searchPlaceholder,
                   className: "rf-h-9 rf-w-full",
                   value: searchValue,
                   onValueChange: setSearchValue
                 }
               ),
-              /* @__PURE__ */ jsx4("div", { className: "rf-px-3 rf-py-2 rf-border-t rf-border-b rf-border-gray-200 rf-bg-slate-50", children: /* @__PURE__ */ jsxs3("div", { className: "rf-flex rf-items-center rf-text-xs rf-text-slate-600 rf-min-w-0 rf-overflow-hidden", children: [
-                /* @__PURE__ */ jsx4(
+              /* @__PURE__ */ jsx5("div", { className: "rf-px-3 rf-py-2 rf-border-t rf-border-b rf-border-gray-200 rf-bg-slate-50", children: /* @__PURE__ */ jsxs4("div", { className: "rf-flex rf-items-center rf-text-xs rf-text-slate-600 rf-min-w-0 rf-overflow-hidden", children: [
+                /* @__PURE__ */ jsx5(
                   "button",
                   {
                     onClick: () => navigateToFolder(""),
@@ -1062,20 +1047,20 @@ var EnhancedFileSelectorCombobox = ({
                 ),
                 currentFolder.split("/").filter(Boolean).map((segment, index, array) => {
                   const pathToSegment = array.slice(0, index + 1).join("/");
-                  return /* @__PURE__ */ jsxs3(
+                  return /* @__PURE__ */ jsxs4(
                     "span",
                     {
                       className: "rf-flex rf-items-center rf-min-w-0",
                       children: [
-                        /* @__PURE__ */ jsx4("span", { className: "rf-mx-1 rf-flex-shrink-0", children: "/" }),
-                        index === array.length - 1 ? /* @__PURE__ */ jsx4(
+                        /* @__PURE__ */ jsx5("span", { className: "rf-mx-1 rf-flex-shrink-0", children: "/" }),
+                        index === array.length - 1 ? /* @__PURE__ */ jsx5(
                           "span",
                           {
                             className: "rf-text-slate-800 rf-truncate rf-max-w-[150px]",
                             title: segment,
                             children: segment
                           }
-                        ) : /* @__PURE__ */ jsx4(
+                        ) : /* @__PURE__ */ jsx5(
                           "button",
                           {
                             onClick: () => navigateToFolder(pathToSegment),
@@ -1090,13 +1075,13 @@ var EnhancedFileSelectorCombobox = ({
                   );
                 })
               ] }) }),
-              /* @__PURE__ */ jsx4(CommandList, { className: "rf-max-h-[70vh] rf-overflow-y-auto", children: !isSearching ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
-                /* @__PURE__ */ jsx4(CommandEmpty, { children: "No files found in this directory." }),
-                currentFiles.length > 0 && /* @__PURE__ */ jsx4(
+              /* @__PURE__ */ jsx5(CommandList, { className: "rf-max-h-[70vh] rf-overflow-y-auto", children: !isSearching ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
+                /* @__PURE__ */ jsx5(CommandEmpty, { children: emptyMessage }),
+                currentFiles.length > 0 && /* @__PURE__ */ jsx5(
                   CommandGroup,
                   {
                     className: `rf-border-b rf-border-gray-200 rf-pb-1`,
-                    children: currentFiles.map((fileNode, index) => /* @__PURE__ */ jsxs3(
+                    children: currentFiles.map((fileNode, index) => /* @__PURE__ */ jsxs4(
                       CommandItem,
                       {
                         value: fileNode.path,
@@ -1105,9 +1090,9 @@ var EnhancedFileSelectorCombobox = ({
                           fileNode.path === currentFile && "rf-font-medium"
                         ),
                         children: [
-                          /* @__PURE__ */ jsx4("span", { className: "rf-mr-2", children: getFileIcon(fileNode.name) }),
-                          fileNode.name,
-                          /* @__PURE__ */ jsx4(
+                          /* @__PURE__ */ jsx5("span", { className: "rf-mr-2", children: defaultFileIcon(fileNode.name) }),
+                          getDisplayName(fileNode.name),
+                          /* @__PURE__ */ jsx5(
                             Check,
                             {
                               className: cn(
@@ -1122,34 +1107,34 @@ var EnhancedFileSelectorCombobox = ({
                     ))
                   }
                 ),
-                currentFolders.length > 0 && /* @__PURE__ */ jsx4(
+                currentFolders.length > 0 && /* @__PURE__ */ jsx5(
                   CommandGroup,
                   {
                     className: `rf-border-b rf-border-gray-200 rf-pb-1`,
-                    children: currentFolders.map((folderNode) => /* @__PURE__ */ jsxs3(
+                    children: currentFolders.map((folderNode) => /* @__PURE__ */ jsxs4(
                       CommandItem,
                       {
                         value: `folder-${folderNode.path}`,
                         onSelect: () => navigateToFolder(folderNode.path),
                         className: "rf-text-slate-600 hover:rf-text-slate-900",
                         children: [
-                          /* @__PURE__ */ jsx4(Folder, { className: "rf-mr-2 rf-h-4 rf-w-4 rf-text-blue-600" }),
+                          /* @__PURE__ */ jsx5(Folder, { className: "rf-mr-2 rf-h-4 rf-w-4 rf-text-blue-600" }),
                           folderNode.name,
-                          /* @__PURE__ */ jsx4(ChevronRight, { className: "rf-ml-auto rf-h-4 rf-w-4" })
+                          /* @__PURE__ */ jsx5(ChevronRight, { className: "rf-ml-auto rf-h-4 rf-w-4" })
                         ]
                       },
                       folderNode.path
                     ))
                   }
                 ),
-                currentFiles.length === 0 && currentFolders.length === 0 && /* @__PURE__ */ jsx4("div", { className: "rf-p-4 rf-text-center rf-text-slate-500 rf-text-sm", children: "No files or folders in this directory" })
-              ] }) : /* @__PURE__ */ jsx4(Fragment2, { children: searchResults.currentDirResults.length === 0 && searchResults.globalResults.length === 0 ? /* @__PURE__ */ jsxs3(CommandEmpty, { children: [
+                currentFiles.length === 0 && currentFolders.length === 0 && /* @__PURE__ */ jsx5("div", { className: "rf-p-4 rf-text-center rf-text-slate-500 rf-text-sm", children: "No files or folders in this directory" })
+              ] }) : /* @__PURE__ */ jsx5(Fragment2, { children: searchResults.currentDirResults.length === 0 && searchResults.globalResults.length === 0 ? /* @__PURE__ */ jsxs4(CommandEmpty, { children: [
                 'No files found matching "',
                 searchValue,
                 '".'
-              ] }) : /* @__PURE__ */ jsxs3(Fragment2, { children: [
-                searchResults.currentDirResults.length > 0 && /* @__PURE__ */ jsx4(CommandGroup, { className: "rf-border-b rf-border-gray-200 rf-pb-1", children: searchResults.currentDirResults.map(
-                  (file2, index) => /* @__PURE__ */ jsxs3(
+              ] }) : /* @__PURE__ */ jsxs4(Fragment2, { children: [
+                searchResults.currentDirResults.length > 0 && /* @__PURE__ */ jsx5(CommandGroup, { className: "rf-border-b rf-border-gray-200 rf-pb-1", children: searchResults.currentDirResults.map(
+                  (file2, index) => /* @__PURE__ */ jsxs4(
                     CommandItem,
                     {
                       value: file2.path,
@@ -1162,18 +1147,18 @@ var EnhancedFileSelectorCombobox = ({
                         file2.path === currentFile && "rf-font-medium"
                       ),
                       children: [
-                        /* @__PURE__ */ jsx4("span", { className: "rf-mr-2", children: getFileIcon(file2.fileName) }),
-                        /* @__PURE__ */ jsxs3("div", { className: "rf-flex rf-items-center rf-w-full rf-min-w-0", children: [
-                          /* @__PURE__ */ jsx4("span", { className: "rf-truncate rf-flex-1", children: file2.fileName }),
-                          /* @__PURE__ */ jsx4("span", { className: "rf-text-xs rf-text-muted-foreground rf-ml-2 rf-truncate rf-max-w-[120px]", children: currentFolder || "/" }),
-                          file2.path === currentFile && /* @__PURE__ */ jsx4(Check, { className: "rf-ml-2 rf-h-4 rf-w-4 rf-flex-shrink-0" })
+                        /* @__PURE__ */ jsx5("span", { className: "rf-mr-2", children: defaultFileIcon(file2.fileName) }),
+                        /* @__PURE__ */ jsxs4("div", { className: "rf-flex rf-items-center rf-w-full rf-min-w-0", children: [
+                          /* @__PURE__ */ jsx5("span", { className: "rf-truncate rf-flex-1", children: getDisplayName(file2.fileName) }),
+                          /* @__PURE__ */ jsx5("span", { className: "rf-text-xs rf-text-muted-foreground rf-ml-2 rf-truncate rf-max-w-[120px]", children: currentFolder || "/" }),
+                          file2.path === currentFile && /* @__PURE__ */ jsx5(Check, { className: "rf-ml-2 rf-h-4 rf-w-4 rf-flex-shrink-0" })
                         ] })
                       ]
                     },
                     file2.path
                   )
                 ) }),
-                searchResults.globalResults.length > 0 && /* @__PURE__ */ jsx4(CommandGroup, { className: "rf-pb-1", children: searchResults.globalResults.map((file2) => /* @__PURE__ */ jsxs3(
+                searchResults.globalResults.length > 0 && /* @__PURE__ */ jsx5(CommandGroup, { className: "rf-pb-1", children: searchResults.globalResults.map((file2) => /* @__PURE__ */ jsxs4(
                   CommandItem,
                   {
                     value: file2.path,
@@ -1186,14 +1171,14 @@ var EnhancedFileSelectorCombobox = ({
                       file2.path === currentFile && "rf-font-medium"
                     ),
                     children: [
-                      /* @__PURE__ */ jsx4("span", { className: "rf-mr-2", children: getFileIcon(file2.fileName) }),
-                      /* @__PURE__ */ jsxs3("div", { className: "rf-flex rf-items-center rf-w-full rf-min-w-0", children: [
-                        /* @__PURE__ */ jsx4("span", { className: "rf-truncate rf-flex-1", children: file2.fileName }),
-                        /* @__PURE__ */ jsx4("span", { className: "rf-text-xs rf-text-muted-foreground rf-ml-2 rf-truncate rf-max-w-[120px]", children: file2.path.substring(
+                      /* @__PURE__ */ jsx5("span", { className: "rf-mr-2", children: defaultFileIcon(file2.fileName) }),
+                      /* @__PURE__ */ jsxs4("div", { className: "rf-flex rf-items-center rf-w-full rf-min-w-0", children: [
+                        /* @__PURE__ */ jsx5("span", { className: "rf-truncate rf-flex-1", children: getDisplayName(file2.fileName) }),
+                        /* @__PURE__ */ jsx5("span", { className: "rf-text-xs rf-text-muted-foreground rf-ml-2 rf-truncate rf-max-w-[120px]", children: file2.path.substring(
                           0,
                           file2.path.lastIndexOf("/")
                         ) || "/" }),
-                        file2.path === currentFile && /* @__PURE__ */ jsx4(Check, { className: "rf-ml-2 rf-h-4 rf-w-4 rf-flex-shrink-0" })
+                        file2.path === currentFile && /* @__PURE__ */ jsx5(Check, { className: "rf-ml-2 rf-h-4 rf-w-4 rf-flex-shrink-0" })
                       ] })
                     ]
                   },
@@ -1209,7 +1194,7 @@ var EnhancedFileSelectorCombobox = ({
 };
 
 // lib/components/RunFrameWithApi/RunFrameWithApi.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var debug3 = Debug2("run-frame:RunFrameWithApi");
 var guessEntrypoint = (files) => files.find((file) => file.includes("entrypoint.")) ?? files.find((file) => file.includes("index.")) ?? files.find((file) => file.includes("main.")) ?? files.find((file) => file.endsWith(".tsx"));
 var guessManualEditsFilePath = (files) => files.find((file) => file.includes("manual-edits.")) ?? files.find((file) => file.includes("manual-edit.")) ?? files.find((file) => file.endsWith(".json"));
@@ -1283,7 +1268,7 @@ var RunFrameWithApi = (props) => {
     } : {},
     [componentPath]
   );
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     RunFrame,
     {
       fsMap,
@@ -1293,9 +1278,9 @@ var RunFrameWithApi = (props) => {
       forceLatestEvalVersion: props.forceLatestEvalVersion,
       evalWebWorkerBlobUrl: props.evalWebWorkerBlobUrl ?? props.workerBlobUrl,
       enableFetchProxy: props.enableFetchProxy,
-      leftHeaderContent: /* @__PURE__ */ jsxs4("div", { className: "rf-flex rf-items-center rf-justify-between rf-w-full", children: [
+      leftHeaderContent: /* @__PURE__ */ jsxs5("div", { className: "rf-flex rf-items-center rf-justify-between rf-w-full", children: [
         props.leftHeaderContent,
-        props.showFilesSwitch && /* @__PURE__ */ jsx5("div", { className: "rf-absolute rf-left-1/2 rf-transform rf--translate-x-1/2", children: /* @__PURE__ */ jsx5(
+        props.showFilesSwitch && /* @__PURE__ */ jsx6("div", { className: "rf-absolute rf-left-1/2 rf-transform rf--translate-x-1/2", children: /* @__PURE__ */ jsx6(
           EnhancedFileSelectorCombobox,
           {
             currentFile: componentPath,
@@ -1356,7 +1341,7 @@ var RunFrameWithApi = (props) => {
 
 // lib/components/RunFrameForCli/RunFrameForCli.tsx
 import { useCallback as useCallback3, useState as useState5 } from "react";
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var RunFrameForCli = (props) => {
   const [shouldLoadLatestEval, setLoadLatestEval] = useLocalStorageState(
     "load-latest-eval",
@@ -1376,7 +1361,7 @@ var RunFrameForCli = (props) => {
     const newUrl = `${window.location.pathname}${window.location.search}` + (newHash.length > 0 ? `#${newHash}` : "");
     window.history.replaceState(null, "", newUrl);
   }, []);
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     RunFrameWithApi,
     {
       debug: props.debug,
@@ -1389,8 +1374,8 @@ var RunFrameForCli = (props) => {
       enableFetchProxy: props.enableFetchProxy,
       initialMainComponentPath,
       onMainComponentPathChange: updateMainComponentHash,
-      leftHeaderContent: /* @__PURE__ */ jsxs5("div", { className: "rf-flex rf-items-center rf-justify-between", children: [
-        /* @__PURE__ */ jsx6(
+      leftHeaderContent: /* @__PURE__ */ jsxs6("div", { className: "rf-flex rf-items-center rf-justify-between", children: [
+        /* @__PURE__ */ jsx7(
           FileMenuLeftHeader,
           {
             isWebEmbedded: false,
@@ -1406,15 +1391,249 @@ var RunFrameForCli = (props) => {
     }
   );
 };
+
+// lib/components/RunFrameStaticBuildViewer/RunFrameStaticBuildViewer.tsx
+import { useCallback as useCallback4, useEffect as useEffect6, useState as useState6 } from "react";
+
+// lib/components/RunFrameStaticBuildViewer/CircuitJsonFileSelectorCombobox.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var circuitJsonConfig = {
+  fileFilter: () => true,
+  placeholder: "Select circuit",
+  searchPlaceholder: "Search for circuit file",
+  emptyMessage: "No circuit files found in this directory."
+};
+var CircuitJsonFileSelectorCombobox = ({
+  files,
+  onFileChange,
+  currentFile
+}) => {
+  return /* @__PURE__ */ jsx8(
+    EnhancedFileSelectorCombobox,
+    {
+      files,
+      onFileChange,
+      currentFile,
+      config: circuitJsonConfig
+    }
+  );
+};
+
+// lib/components/RunFrameStaticBuildViewer/RunFrameStaticBuildViewer.tsx
+import { ErrorBoundary } from "react-error-boundary";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var RunFrameStaticBuildViewer = (props) => {
+  useStyles();
+  const [currentCircuitJsonPath, setCurrentCircuitJsonPath] = useState6(
+    () => {
+      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 fileReferences = props.files;
+  const availableFiles = fileReferences.map((f) => f.filePath);
+  const defaultFetchFile = useCallback4(
+    async (fileRef) => {
+      if (!fileRef.fileStaticAssetUrl) {
+        throw new Error(
+          `No fileStaticAssetUrl provided for ${fileRef.filePath}`
+        );
+      }
+      const response = await fetch(fileRef.fileStaticAssetUrl);
+      if (!response.ok) {
+        throw new Error(
+          `Failed to fetch ${fileRef.filePath}: ${response.statusText}`
+        );
+      }
+      return await response.json();
+    },
+    []
+  );
+  const loadCircuitJsonFile = useCallback4(
+    async (filePath) => {
+      if (fileCache[filePath]) {
+        setCircuitJson(fileCache[filePath]);
+        props.onCircuitJsonPathChange?.(filePath);
+        return;
+      }
+      if (failedFiles.has(filePath)) {
+        console.warn(`Skipping failed file: ${filePath}`);
+        setCircuitJson(null);
+        return;
+      }
+      if (loadingFiles.has(filePath)) {
+        return;
+      }
+      setLoadingFiles((prev) => new Set(prev).add(filePath));
+      setIsLoadingCurrentFile(true);
+      setCircuitJson(null);
+      try {
+        const fileRef = fileReferences.find((f) => f.filePath === filePath);
+        if (!fileRef) {
+          throw new Error(`File reference not found for ${filePath}`);
+        }
+        const fetchFn = props.onFetchFile || defaultFetchFile;
+        const circuitJsonData = await fetchFn(fileRef);
+        setFileCache((prev) => ({ ...prev, [filePath]: circuitJsonData }));
+        setCircuitJson(circuitJsonData);
+        props.onCircuitJsonPathChange?.(filePath);
+        setFailedFiles((prev) => {
+          const newSet = new Set(prev);
+          newSet.delete(filePath);
+          return newSet;
+        });
+      } catch (error) {
+        console.error(`Failed to load circuit JSON file ${filePath}:`, error);
+        setFailedFiles((prev) => new Set(prev).add(filePath));
+        setCircuitJson(null);
+      } finally {
+        setLoadingFiles((prev) => {
+          const newSet = new Set(prev);
+          newSet.delete(filePath);
+          return newSet;
+        });
+        setIsLoadingCurrentFile(false);
+      }
+    },
+    [
+      fileReferences,
+      fileCache,
+      loadingFiles,
+      failedFiles,
+      props.onFetchFile,
+      props.onCircuitJsonPathChange,
+      defaultFetchFile
+    ]
+  );
+  useEffect6(() => {
+    if (availableFiles.length === 0) return;
+    let selectedPath = currentCircuitJsonPath;
+    if (!selectedPath || !availableFiles.includes(selectedPath)) {
+      selectedPath = guessEntrypoint(availableFiles) ?? availableFiles[0];
+      setCurrentCircuitJsonPath(selectedPath);
+    }
+    if (selectedPath && availableFiles.includes(selectedPath)) {
+      loadCircuitJsonFile(selectedPath);
+    }
+  }, [currentCircuitJsonPath]);
+  const handleFileChange = useCallback4((newPath) => {
+    setCurrentCircuitJsonPath(newPath);
+  }, []);
+  const retryFailedFile = useCallback4(
+    (filePath) => {
+      setFailedFiles((prev) => {
+        const newSet = new Set(prev);
+        newSet.delete(filePath);
+        return newSet;
+      });
+      loadCircuitJsonFile(filePath);
+    },
+    [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." })
+    ] }) });
+  }
+  const currentFileFailed = failedFiles.has(currentCircuitJsonPath);
+  return /* @__PURE__ */ jsx9(
+    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 })
+      ] }) }),
+      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(
+            FileMenuLeftHeader,
+            {
+              isWebEmbedded: false,
+              circuitJson: null,
+              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(
+            CircuitJsonFileSelectorCombobox,
+            {
+              currentFile: currentCircuitJsonPath,
+              files: availableFiles,
+              onFileChange: handleFileChange
+            }
+          ) })
+        ] }),
+        /* @__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: [
+            "Could not load: ",
+            currentCircuitJsonPath
+          ] }),
+          /* @__PURE__ */ jsxs7("div", { className: "rf-flex rf-flex-col rf-items-center rf-gap-2", children: [
+            /* @__PURE__ */ jsx9(
+              "button",
+              {
+                onClick: () => retryFailedFile(currentCircuitJsonPath),
+                className: "rf-px-4 rf-py-2 rf-bg-blue-500 rf-text-white rf-rounded rf-hover:bg-blue-600",
+                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" })
+          ] })
+        ] }) })
+      ] }) : /* @__PURE__ */ jsx9(
+        CircuitJsonPreview,
+        {
+          circuitJson,
+          defaultToFullScreen: props.defaultToFullScreen,
+          showToggleFullScreen: props.showToggleFullScreen,
+          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(
+              FileMenuLeftHeader,
+              {
+                isWebEmbedded: false,
+                circuitJson,
+                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 ${isLoadingCurrentFile ? "rf-opacity-50" : ""}`,
+                children: /* @__PURE__ */ jsx9(
+                  CircuitJsonFileSelectorCombobox,
+                  {
+                    currentFile: currentCircuitJsonPath,
+                    files: availableFiles,
+                    onFileChange: handleFileChange
+                  }
+                )
+              }
+            )
+          ] })
+        }
+      )
+    }
+  );
+};
 export {
   BomTable,
   CadViewer,
+  CircuitJsonFileSelectorCombobox,
   CircuitJsonPreview,
   ImportComponentDialog,
   PCBViewer as PcbViewer,
   PcbViewerWithContainerHeight,
   RunFrame,
   RunFrameForCli,
+  RunFrameStaticBuildViewer,
   RunFrameWithApi,
   SchematicViewer,
   guessEntrypoint,