@tscircuit/runframe 0.0.1116 → 0.0.1118

package/dist/{chunk-XPVFXTHX.js → chunk-36HJBBYM.js}

@@ -1441,7 +1441,7 @@ var useErrorTelemetry = ({
 };
 
 // package.json
-var version = "0.0.1115";
+var version = "0.0.1117";
 var package_default = {
   name: "@tscircuit/runframe",
   main: "dist/preview.js",
@@ -1496,7 +1496,7 @@ var package_default = {
     "@tscircuit/file-server": "^0.0.32",
     "@tscircuit/footprinter": "^0.0.236",
     "@tscircuit/math-utils": "^0.0.25",
-    "@tscircuit/pcb-viewer": "1.11.232",
+    "@tscircuit/pcb-viewer": "1.11.233",
     "@tscircuit/props": "^0.0.365",
     "@tscircuit/schematic-trace-solver": "^0.0.40",
     "@tscircuit/schematic-viewer": "2.0.45",

package/dist/preview.js

@@ -8,7 +8,7 @@ import {
   linkify,
   useOrderDialog,
   useOrderDialogCli
-} from "./chunk-XPVFXTHX.js";
+} from "./chunk-36HJBBYM.js";
 export {
   BomTable,
   CadViewer,

package/dist/runner.js

@@ -32,7 +32,7 @@ import {
   useRunFrameStore,
   useRunnerStore,
   useStyles
-} from "./chunk-XPVFXTHX.js";
+} from "./chunk-36HJBBYM.js";
 
 // lib/components/RunFrame/RunFrame.tsx
 import { createCircuitWebWorker } from "@tscircuit/eval/worker";
@@ -742,11 +742,59 @@ var useSyncPageTitle = () => {
 };
 
 // lib/components/RunFrameWithApi/RunFrameWithApi.tsx
-import { useEffect as useEffect6, useMemo as useMemo2, useState as useState5 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect7, useMemo as useMemo2, useState as useState6 } from "react";
 import { applyEditEventsToManualEditsFile } from "@tscircuit/core";
 
 // lib/components/RunFrameWithApi/EnhancedFileSelectorCombobox/EnhancedFileSelectorCombobox.tsx
-import { useEffect as useEffect5, useState as useState4 } from "react";
+import { useEffect as useEffect6, useState as useState5 } from "react";
+
+// lib/components/RunFrameWithApi/EnhancedFileSelectorCombobox/useCurrentFolder.ts
+import { useState as useState4, useEffect as useEffect5 } from "react";
+function getDirectoryPath(filePath) {
+  const lastSlashIndex = filePath.lastIndexOf("/");
+  if (lastSlashIndex === -1) return "/";
+  return filePath.substring(0, lastSlashIndex);
+}
+function useCurrentFolder({
+  currentFile,
+  files
+}) {
+  const [hasManuallyNavigated, setHasManuallyNavigated] = useState4(false);
+  const [currentFolder, setCurrentFolder] = useState4(() => {
+    if (typeof window !== "undefined") {
+      const searchParams = new URLSearchParams(window.location.search);
+      const hashParams = new URLSearchParams(window.location.hash.slice(1));
+      const urlFile = searchParams.get("file") ?? hashParams.get("file");
+      if (urlFile && files.includes(urlFile)) {
+        const fileDir = getDirectoryPath(urlFile);
+        return fileDir === "/" ? null : fileDir;
+      }
+    }
+    if (currentFile && files.includes(currentFile)) {
+      const fileDir = getDirectoryPath(currentFile);
+      return fileDir === "/" ? null : fileDir;
+    }
+    return null;
+  });
+  useEffect5(() => {
+    if (currentFile && !hasManuallyNavigated && files.includes(currentFile)) {
+      const fileDir = getDirectoryPath(currentFile);
+      setCurrentFolder(fileDir === "/" ? null : fileDir);
+    }
+  }, [currentFile, hasManuallyNavigated, files]);
+  const navigateToFolder = (folderPath) => {
+    setCurrentFolder(folderPath);
+    setHasManuallyNavigated(true);
+  };
+  const resetManualNavigation = () => {
+    setHasManuallyNavigated(false);
+  };
+  return {
+    currentFolder,
+    navigateToFolder,
+    resetManualNavigation
+  };
+}
 
 // lib/components/ui/command.tsx
 import * as React from "react";
@@ -973,7 +1021,7 @@ var defaultFileFilter = (filename) => {
 var defaultDisplayName = (filename) => {
   return filename.split("/").pop() || "";
 };
-var getDirectoryPath = (filePath) => {
+var getDirectoryPath2 = (filePath) => {
   return filePath.substring(0, filePath.lastIndexOf("/")) || "/";
 };
 var EnhancedFileSelectorCombobox = ({
@@ -982,11 +1030,11 @@ var EnhancedFileSelectorCombobox = ({
   currentFile,
   config = {}
 }) => {
-  const [open, setOpen] = useState4(false);
-  const [file, setFile] = useState4(currentFile);
-  const [currentFolder, setCurrentFolder] = useState4("");
-  const [currentFileIndex, setCurrentFileIndex] = useState4(0);
-  const [searchValue, setSearchValue] = useState4("");
+  const [open, setOpen] = useState5(false);
+  const [file, setFile] = useState5(currentFile);
+  const { currentFolder, navigateToFolder, resetManualNavigation } = useCurrentFolder({ currentFile: file, files });
+  const [currentFileIndex, setCurrentFileIndex] = useState5(0);
+  const [searchValue, setSearchValue] = useState5("");
   const {
     fileFilter = defaultFileFilter,
     getDisplayName = defaultDisplayName,
@@ -996,12 +1044,12 @@ var EnhancedFileSelectorCombobox = ({
     pinnedFiles = [],
     onToggleFavorite
   } = config;
-  useEffect5(() => {
+  useEffect6(() => {
     setFile(currentFile);
   }, [currentFile]);
   const filteredFiles = files.filter(fileFilter);
   const fileTree = parseFilesToTree(filteredFiles);
-  const { files: currentFiles, folders: currentFolders } = getCurrentFolderContents(fileTree, currentFolder);
+  const { files: currentFiles, folders: currentFolders } = getCurrentFolderContents(fileTree, currentFolder || "");
   const getSearchResults = () => {
     if (!searchValue.trim()) return { currentDirResults: [], globalResults: [] };
     const searchTerm = searchValue.toLowerCase();
@@ -1030,17 +1078,15 @@ var EnhancedFileSelectorCombobox = ({
   };
   const searchResults = getSearchResults();
   const isSearching = searchValue.trim().length > 0;
-  const navigateToFolder = (folderPath) => {
-    setCurrentFolder(folderPath);
+  const handleNavigateToFolder = (folderPath) => {
+    navigateToFolder(folderPath);
     setCurrentFileIndex(0);
   };
   const navigateUp = () => {
     if (!currentFolder) return;
-    const parentPath = currentFolder.substring(
-      0,
-      currentFolder.lastIndexOf("/")
-    );
-    navigateToFolder(parentPath);
+    const lastSlashIndex = currentFolder.lastIndexOf("/");
+    const parentPath = lastSlashIndex === -1 ? null : currentFolder.substring(0, lastSlashIndex);
+    handleNavigateToFolder(parentPath);
   };
   const selectFile = (filePath, index, updateFolder = false) => {
     setFile(filePath);
@@ -1048,15 +1094,12 @@ var EnhancedFileSelectorCombobox = ({
     setOpen(false);
     onFileChange(filePath);
     if (updateFolder) {
-      const fileDir = getDirectoryPath(filePath);
-      if (fileDir !== "/") {
-        setCurrentFolder(fileDir);
-      } else {
-        setCurrentFolder("");
-      }
+      const lastSlashIndex = filePath.lastIndexOf("/");
+      const fileDir = lastSlashIndex === -1 ? null : filePath.substring(0, lastSlashIndex);
+      handleNavigateToFolder(fileDir);
     }
   };
-  useEffect5(() => {
+  useEffect6(() => {
     if (currentFiles.length > 0) {
       const fileInCurrentFolder = currentFiles.findIndex(
         (f) => f.path === currentFile
@@ -1066,7 +1109,7 @@ var EnhancedFileSelectorCombobox = ({
       }
     }
   }, [currentFiles, currentFile]);
-  const displayPath = currentFolder || "/";
+  const displayPath = currentFolder ?? "/";
   const shortDisplayPath = displayPath.length > 25 ? "..." + displayPath.slice(-22) : displayPath;
   const getDropdownWidth = () => {
     return "rf-w-[400px] rf-min-w-[400px] rf-max-w-[400px]";
@@ -1077,7 +1120,10 @@ var EnhancedFileSelectorCombobox = ({
       open,
       onOpenChange: (newOpen) => {
         setOpen(newOpen);
-        if (!newOpen) setSearchValue("");
+        if (!newOpen) {
+          setSearchValue("");
+          resetManualNavigation();
+        }
       },
       children: [
         /* @__PURE__ */ jsx5(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs4(
@@ -1115,12 +1161,12 @@ var EnhancedFileSelectorCombobox = ({
                   /* @__PURE__ */ jsx5(
                     "button",
                     {
-                      onClick: () => navigateToFolder(""),
+                      onClick: () => handleNavigateToFolder(null),
                       className: "rf-text-blue-600 hover:rf-text-blue-800 rf-underline rf-cursor-pointer rf-bg-transparent rf-border-none rf-p-0 rf-flex-shrink-0",
                       children: "root"
                     }
                   ),
-                  currentFolder.split("/").filter(Boolean).map((segment, index, array) => {
+                  currentFolder?.split("/").filter(Boolean).map((segment, index, array) => {
                     const pathToSegment = array.slice(0, index + 1).join("/");
                     return /* @__PURE__ */ jsxs4(
                       "span",
@@ -1138,7 +1184,7 @@ var EnhancedFileSelectorCombobox = ({
                           ) : /* @__PURE__ */ jsx5(
                             "button",
                             {
-                              onClick: () => navigateToFolder(pathToSegment),
+                              onClick: () => handleNavigateToFolder(pathToSegment),
                               className: "rf-text-blue-600 hover:rf-text-blue-800 rf-underline rf-cursor-pointer rf-bg-transparent rf-border-none rf-p-0 rf-truncate rf-max-w-[100px]",
                               title: segment,
                               children: segment
@@ -1181,7 +1227,7 @@ var EnhancedFileSelectorCombobox = ({
                         children: [
                           /* @__PURE__ */ jsx5(Star, { className: "rf-mr-2 rf-h-4 rf-w-4 rf-text-amber-500 rf-fill-amber-500" }),
                           getDisplayName(path.split("/").pop() || ""),
-                          /* @__PURE__ */ jsx5("span", { className: "rf-text-xs rf-text-muted-foreground rf-ml-2 rf-truncate rf-max-w-[120px]", children: getDirectoryPath(path) }),
+                          /* @__PURE__ */ jsx5("span", { className: "rf-text-xs rf-text-muted-foreground rf-ml-2 rf-truncate rf-max-w-[120px]", children: getDirectoryPath2(path) }),
                           /* @__PURE__ */ jsx5(
                             Check,
                             {
@@ -1260,7 +1306,7 @@ var EnhancedFileSelectorCombobox = ({
                       CommandItem,
                       {
                         value: `folder-${folderNode.path}`,
-                        onSelect: () => navigateToFolder(folderNode.path),
+                        onSelect: () => handleNavigateToFolder(folderNode.path),
                         className: "rf-text-slate-600 hover:rf-text-slate-900",
                         children: [
                           /* @__PURE__ */ jsx5(Folder, { className: "rf-mr-2 rf-h-4 rf-w-4 rf-text-blue-600" }),
@@ -1343,7 +1389,7 @@ var EnhancedFileSelectorCombobox = ({
                       /* @__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: getDirectoryPath(file2.path) }),
+                        /* @__PURE__ */ jsx5("span", { className: "rf-text-xs rf-text-muted-foreground rf-ml-2 rf-truncate rf-max-w-[120px]", children: getDirectoryPath2(file2.path) }),
                         onToggleFavorite && /* @__PURE__ */ jsx5(
                           "button",
                           {
@@ -1418,7 +1464,7 @@ var guessEntrypoint = (files) => files.find((file) => file.includes("entrypoint.
 var guessManualEditsFilePath = (files) => files.find((file) => file.includes("manual-edits.")) ?? files.find((file) => file.includes("manual-edit.")) ?? files.find((file) => file.endsWith(".json"));
 var RunFrameWithApi = (props) => {
   const { apiBaseUrl, leftHeaderContent } = props;
-  useEffect6(() => {
+  useEffect7(() => {
     if (props.debug) Debug3.enable("run-frame*");
   }, [props.debug]);
   const { startPolling, stopPolling } = useRunFrameStore((s) => ({
@@ -1437,11 +1483,14 @@ var RunFrameWithApi = (props) => {
     [allFiles, projectConfigContent]
   );
   const circuitJson = useRunFrameStore((s) => s.circuitJson);
-  const [componentPath, setComponentPath] = useState5(
-    props.initialMainComponentPath ?? ""
-  );
+  const [componentPath, setComponentPath] = useState6(() => {
+    if (typeof window === "undefined")
+      return props.initialMainComponentPath ?? "";
+    const params = new URLSearchParams(window.location.hash.slice(1));
+    return params.get("file") ?? props.initialMainComponentPath ?? "";
+  });
   const isLoadingFiles = !hasReceivedInitialFiles;
-  useEffect6(() => {
+  useEffect7(() => {
     if (componentPath && boardFiles.includes(componentPath)) {
       return;
     }
@@ -1460,10 +1509,20 @@ var RunFrameWithApi = (props) => {
       setComponentPath(firstMatch);
     }
   }, [boardFiles, props.initialMainComponentPath, componentPath]);
-  useEffect6(() => {
+  const updateFileHash = useCallback3((filePath) => {
+    if (typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.hash.slice(1));
+    if (params.get("file") === filePath) return;
+    params.set("file", filePath);
+    const newHash = params.toString();
+    const newUrl = `${window.location.pathname}${window.location.search}` + (newHash.length > 0 ? `#${newHash}` : "");
+    window.history.replaceState(null, "", newUrl);
+  }, []);
+  useEffect7(() => {
     if (!componentPath) return;
+    updateFileHash(componentPath);
     props.onMainComponentPathChange?.(componentPath);
-  }, [componentPath, props.onMainComponentPathChange]);
+  }, [componentPath, props.onMainComponentPathChange, updateFileHash]);
   useSyncPageTitle();
   const {
     editEventsForRender,
@@ -1471,12 +1530,12 @@ var RunFrameWithApi = (props) => {
     markRenderStarted,
     markRenderComplete
   } = useEditEventController();
-  useEffect6(() => {
+  useEffect7(() => {
     if (apiBaseUrl) {
       window.TSCIRCUIT_FILESERVER_API_BASE_URL = apiBaseUrl;
     }
   }, [apiBaseUrl]);
-  useEffect6(() => {
+  useEffect7(() => {
     startPolling();
     return () => stopPolling();
   }, [startPolling, stopPolling]);
@@ -1558,19 +1617,19 @@ var RunFrameWithApi = (props) => {
 };
 
 // lib/components/RunFrameForCli/RunFrameForCli.tsx
-import { useCallback as useCallback3, useState as useState6 } from "react";
+import { useCallback as useCallback4, useState as useState7 } from "react";
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var RunFrameForCli = (props) => {
   const [shouldLoadLatestEval, setLoadLatestEval] = useLocalStorageState(
     "load-latest-eval",
     true
   );
-  const [initialMainComponentPath] = useState6(() => {
+  const [initialMainComponentPath] = useState7(() => {
     if (typeof window === "undefined") return void 0;
     const params = new URLSearchParams(window.location.hash.slice(1));
     return params.get("main_component") ?? void 0;
   });
-  const updateMainComponentHash = useCallback3((mainComponentPath) => {
+  const updateMainComponentHash = useCallback4((mainComponentPath) => {
     if (typeof window === "undefined") return;
     const params = new URLSearchParams(window.location.hash.slice(1));
     if (params.get("main_component") === mainComponentPath) return;
@@ -1612,7 +1671,7 @@ var RunFrameForCli = (props) => {
 
 // lib/components/ImportComponentDialog/ImportComponentDialog.tsx
 import "react";
-import { useState as useState7, useEffect as useEffect7 } from "react";
+import { useState as useState8, useEffect as useEffect8 } from "react";
 import { Loader2 as Loader22, Search as Search2, ExternalLink } from "lucide-react";
 
 // lib/components/ImportComponentDialog/jlc-api.ts
@@ -1765,19 +1824,19 @@ var ImportComponentDialog = ({
   proxyRequestHeaders,
   onImport
 }) => {
-  const [searchQuery, setSearchQuery] = useState7("");
-  const [searchResults, setSearchResults] = useState7(
+  const [searchQuery, setSearchQuery] = useState8("");
+  const [searchResults, setSearchResults] = useState8(
     []
   );
-  const [hasSearched, setHasSearched] = useState7(false);
-  const [isLoading, setIsLoading] = useState7(false);
-  const [selectedComponent, setSelectedComponent] = useState7(null);
-  const [activeTab, setActiveTab] = useState7("tscircuit.com");
-  const [detailsOpen, setDetailsOpen] = useState7(false);
-  const [detailsComponent, setDetailsComponent] = useState7(null);
-  const [packageDetails, setPackageDetails] = useState7(null);
-  const [packageDetailsLoading, setPackageDetailsLoading] = useState7(false);
-  const [previewActiveTab, setPreviewActiveTab] = useState7(
+  const [hasSearched, setHasSearched] = useState8(false);
+  const [isLoading, setIsLoading] = useState8(false);
+  const [selectedComponent, setSelectedComponent] = useState8(null);
+  const [activeTab, setActiveTab] = useState8("tscircuit.com");
+  const [detailsOpen, setDetailsOpen] = useState8(false);
+  const [detailsComponent, setDetailsComponent] = useState8(null);
+  const [packageDetails, setPackageDetails] = useState8(null);
+  const [packageDetailsLoading, setPackageDetailsLoading] = useState8(false);
+  const [previewActiveTab, setPreviewActiveTab] = useState8(
     "pcb"
   );
   const pushEvent = useRunFrameStore((s) => s.pushEvent);
@@ -1869,7 +1928,7 @@ var ImportComponentDialog = ({
       handleSearch();
     }
   };
-  useEffect7(() => {
+  useEffect8(() => {
     setSearchResults([]);
     setSelectedComponent(null);
   }, [activeTab]);
@@ -2186,7 +2245,7 @@ var ImportComponentDialog = ({
 };
 
 // lib/components/RunFrameStaticBuildViewer/RunFrameStaticBuildViewer.tsx
-import { useCallback as useCallback4, useEffect as useEffect8, useState as useState8 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect9, useState as useState9 } from "react";
 
 // lib/components/RunFrameStaticBuildViewer/CircuitJsonFileSelectorCombobox.tsx
 import { jsx as jsx9 } from "react/jsx-runtime";
@@ -2217,19 +2276,19 @@ import { ErrorBoundary } from "react-error-boundary";
 import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 var RunFrameStaticBuildViewer = (props) => {
   useStyles();
-  const [currentCircuitJsonPath, setCurrentCircuitJsonPath] = useState8(
+  const [currentCircuitJsonPath, setCurrentCircuitJsonPath] = useState9(
     () => {
       return props.initialCircuitPath ?? "";
     }
   );
-  const [circuitJson, setCircuitJson] = useState8(null);
-  const [isLoadingCurrentFile, setIsLoadingCurrentFile] = useState8(false);
-  const [fileCache, setFileCache] = useState8({});
-  const [loadingFiles, setLoadingFiles] = useState8(/* @__PURE__ */ new Set());
-  const [failedFiles, setFailedFiles] = useState8(/* @__PURE__ */ new Set());
+  const [circuitJson, setCircuitJson] = useState9(null);
+  const [isLoadingCurrentFile, setIsLoadingCurrentFile] = useState9(false);
+  const [fileCache, setFileCache] = useState9({});
+  const [loadingFiles, setLoadingFiles] = useState9(/* @__PURE__ */ new Set());
+  const [failedFiles, setFailedFiles] = useState9(/* @__PURE__ */ new Set());
   const fileReferences = props.files;
   const availableFiles = fileReferences.map((f) => f.filePath);
-  const defaultFetchFile = useCallback4(
+  const defaultFetchFile = useCallback5(
     async (fileRef) => {
       if (!fileRef.fileStaticAssetUrl) {
         throw new Error(
@@ -2246,7 +2305,7 @@ var RunFrameStaticBuildViewer = (props) => {
     },
     []
   );
-  const loadCircuitJsonFile = useCallback4(
+  const loadCircuitJsonFile = useCallback5(
     async (filePath) => {
       if (fileCache[filePath]) {
         setCircuitJson(fileCache[filePath]);
@@ -2302,7 +2361,7 @@ var RunFrameStaticBuildViewer = (props) => {
       defaultFetchFile
     ]
   );
-  useEffect8(() => {
+  useEffect9(() => {
     if (availableFiles.length === 0) return;
     let selectedPath = currentCircuitJsonPath;
     if (!selectedPath || !availableFiles.includes(selectedPath)) {
@@ -2313,10 +2372,10 @@ var RunFrameStaticBuildViewer = (props) => {
       loadCircuitJsonFile(selectedPath);
     }
   }, [currentCircuitJsonPath]);
-  const handleFileChange = useCallback4((newPath) => {
+  const handleFileChange = useCallback5((newPath) => {
     setCurrentCircuitJsonPath(newPath);
   }, []);
-  const retryFailedFile = useCallback4(
+  const retryFailedFile = useCallback5(
     (filePath) => {
       setFailedFiles((prev) => {
         const newSet = new Set(prev);