@tscircuit/runframe 0.0.1180 → 0.0.1182

package/dist/runner.js

@@ -32,7 +32,7 @@ import {
   useRunFrameStore,
   useRunnerStore,
   useStyles
-} from "./chunk-N7PLNL6W.js";
+} from "./chunk-UVCBFE3G.js";
 
 // lib/components/RunFrame/RunFrame.tsx
 import { createCircuitWebWorker } from "@tscircuit/eval/worker";
@@ -748,11 +748,11 @@ var useSyncPageTitle = () => {
 };
 
 // lib/components/RunFrameWithApi/RunFrameWithApi.tsx
-import { useCallback as useCallback3, useEffect as useEffect7, useMemo as useMemo2, useState as useState6 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect7, useMemo as useMemo3, useState as useState6 } from "react";
 import { applyEditEventsToManualEditsFile } from "@tscircuit/core";
 
 // lib/components/RunFrameWithApi/EnhancedFileSelectorCombobox/EnhancedFileSelectorCombobox.tsx
-import { useEffect as useEffect6, useState as useState5 } from "react";
+import { useEffect as useEffect6, useState as useState5, useRef as useRef3, useMemo as useMemo2, useCallback as useCallback3 } from "react";
 
 // lib/components/RunFrameWithApi/EnhancedFileSelectorCombobox/useCurrentFolder.ts
 import { useState as useState4, useEffect as useEffect5 } from "react";
@@ -947,7 +947,10 @@ import {
   Code,
   Folder,
   ArrowUp,
-  Star
+  Star,
+  Eye,
+  EyeOff,
+  Clock
 } from "lucide-react";
 
 // lib/components/RunFrameWithApi/EnhancedFileSelectorCombobox/parseFilesToTree.ts
@@ -1047,10 +1050,43 @@ var EnhancedFileSelectorCombobox = ({
   const { currentFolder, navigateToFolder, resetManualNavigation } = useCurrentFolder({ currentFile: file, files });
   const [currentFileIndex, setCurrentFileIndex] = useState5(0);
   const [searchValue, setSearchValue] = useState5("");
+  const [recentlyViewedFiles, setRecentlyViewedFiles] = useLocalStorageState("runframe:recentlyViewed", []);
+  const [showRecents, setShowRecents] = useLocalStorageState(
+    "runframe:showRecents",
+    true
+  );
   useEffect6(() => {
-    setFile(currentFile);
-  }, [currentFile]);
+    const handleKeyDown = (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault();
+        setOpen((prev) => !prev);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
   const filteredFiles = files.filter(fileFilter);
+  const debounceTimerRef = useRef3(null);
+  useEffect6(() => {
+    const clearDebounceTimer = () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+        debounceTimerRef.current = null;
+      }
+    };
+    setFile(currentFile);
+    if (currentFile && filteredFiles.includes(currentFile)) {
+      clearDebounceTimer();
+      debounceTimerRef.current = setTimeout(() => {
+        setRecentlyViewedFiles((prev) => {
+          if (prev[0] === currentFile) return prev;
+          const filtered = prev.filter((f) => f !== currentFile);
+          return [currentFile, ...filtered].slice(0, 10);
+        });
+      }, 500);
+    }
+    return clearDebounceTimer;
+  }, [currentFile, filteredFiles, setRecentlyViewedFiles]);
   const fileTree = parseFilesToTree(filteredFiles);
   const { files: currentFiles, folders: currentFolders } = getCurrentFolderContents(fileTree, currentFolder || "");
   const getSearchResults = () => {
@@ -1085,12 +1121,23 @@ var EnhancedFileSelectorCombobox = ({
     navigateToFolder(folderPath);
     setCurrentFileIndex(0);
   };
-  const navigateUp = () => {
+  const navigateUp = useCallback3(() => {
     if (!currentFolder) return;
     const lastSlashIndex = currentFolder.lastIndexOf("/");
     const parentPath = lastSlashIndex === -1 ? null : currentFolder.substring(0, lastSlashIndex);
     handleNavigateToFolder(parentPath);
-  };
+  }, [currentFolder, handleNavigateToFolder]);
+  useEffect6(() => {
+    if (!open) return;
+    const handleKeyDown = (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "ArrowUp") {
+        e.preventDefault();
+        navigateUp();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [open, navigateUp]);
   const selectFile = (filePath, index, updateFolder = false) => {
     setFile(filePath);
     setCurrentFileIndex(index);
@@ -1112,6 +1159,10 @@ var EnhancedFileSelectorCombobox = ({
       }
     }
   }, [currentFiles, currentFile]);
+  const recentFiles = useMemo2(() => {
+    if (!showRecents) return [];
+    return recentlyViewedFiles.filter((file2) => filteredFiles.includes(file2)).slice(0, 3);
+  }, [showRecents, recentlyViewedFiles, filteredFiles]);
   const displayPath = currentFolder ?? "/";
   const shortDisplayPath = displayPath.length > 25 ? "..." + displayPath.slice(-22) : displayPath;
   const getDropdownWidth = () => {
@@ -1160,8 +1211,8 @@ var EnhancedFileSelectorCombobox = ({
                   onValueChange: setSearchValue
                 }
               ),
-              /* @__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-justify-between rf-text-xs rf-text-slate-600 rf-min-w-0 rf-overflow-hidden", children: [
-                /* @__PURE__ */ jsxs4("div", { className: "rf-flex rf-items-center rf-min-w-0 rf-flex-1", children: [
+              /* @__PURE__ */ jsxs4("div", { className: "rf-px-3 rf-py-2 rf-border-t rf-border-b rf-border-gray-200 rf-bg-slate-50 rf-flex rf-items-center rf-justify-between rf-gap-2", children: [
+                /* @__PURE__ */ jsx5("div", { className: "rf-flex rf-items-center rf-text-xs rf-text-slate-600 rf-min-w-0 rf-flex-1", children: /* @__PURE__ */ jsxs4("div", { className: "rf-flex rf-items-center rf-min-w-0", children: [
                   /* @__PURE__ */ jsx5(
                     "button",
                     {
@@ -1199,22 +1250,65 @@ var EnhancedFileSelectorCombobox = ({
                       pathToSegment
                     );
                   })
-                ] }),
-                currentFolder && /* @__PURE__ */ jsxs4(
-                  "button",
-                  {
-                    onClick: navigateUp,
-                    className: "rf-ml-2 rf-flex rf-items-center rf-gap-1 rf-text-blue-600 hover:rf-text-blue-800 rf-bg-transparent rf-border rf-border-blue-300 hover:rf-border-blue-500 rf-rounded rf-px-2 rf-py-1 rf-flex-shrink-0",
-                    title: "Go up one level",
-                    children: [
-                      /* @__PURE__ */ jsx5(ArrowUp, { className: "rf-h-3 rf-w-3" }),
-                      /* @__PURE__ */ jsx5("span", { children: "Up" })
-                    ]
-                  }
-                )
-              ] }) }),
+                ] }) }),
+                /* @__PURE__ */ jsxs4("div", { className: "rf-flex rf-items-center rf-gap-2 rf-flex-shrink-0", children: [
+                  /* @__PURE__ */ jsx5(
+                    "button",
+                    {
+                      onClick: () => setShowRecents(!showRecents),
+                      className: "rf-flex rf-items-center rf-gap-1 rf-text-slate-600 hover:rf-text-slate-800 rf-bg-transparent rf-border-none rf-p-0",
+                      title: showRecents ? "Hide recent files" : "Show recent files",
+                      children: showRecents ? /* @__PURE__ */ jsx5(Eye, { className: "rf-h-3.5 rf-w-3.5" }) : /* @__PURE__ */ jsx5(EyeOff, { className: "rf-h-3.5 rf-w-3.5" })
+                    }
+                  ),
+                  currentFolder && /* @__PURE__ */ jsxs4(
+                    "button",
+                    {
+                      onClick: navigateUp,
+                      className: "rf-flex rf-items-center rf-gap-1 rf-text-blue-600 hover:rf-text-blue-800 rf-bg-transparent rf-border rf-border-blue-300 hover:rf-border-blue-500 rf-rounded rf-px-2 rf-py-1",
+                      title: "Go up one level",
+                      children: [
+                        /* @__PURE__ */ jsx5(ArrowUp, { className: "rf-h-3 rf-w-3" }),
+                        /* @__PURE__ */ jsx5("span", { children: "Up" })
+                      ]
+                    }
+                  )
+                ] })
+              ] }),
               /* @__PURE__ */ jsx5(CommandList, { className: "rf-max-h-[70vh] rf-overflow-y-auto", children: !isSearching ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
                 /* @__PURE__ */ jsx5(CommandEmpty, { children: emptyMessage }),
+                recentFiles.length > 0 && /* @__PURE__ */ jsx5(
+                  CommandGroup,
+                  {
+                    heading: "Recent",
+                    className: "rf-border-b rf-border-gray-200 rf-pb-1 rf-bg-blue-50/30",
+                    children: recentFiles.map((path, index) => /* @__PURE__ */ jsxs4(
+                      CommandItem,
+                      {
+                        value: path,
+                        onSelect: () => selectFile(path, index, true),
+                        className: cn(
+                          path === currentFile && "rf-font-medium"
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsx5(Clock, { className: "rf-mr-2 rf-h-4 rf-w-4 rf-text-blue-500" }),
+                          getDisplayName(path.split("/").pop() || ""),
+                          /* @__PURE__ */ jsx5("span", { className: "rf-text-xs rf-text-muted-foreground rf-ml-2 rf-truncate rf-max-w-[40%]", children: getDirectoryPath2(path) }),
+                          /* @__PURE__ */ jsx5(
+                            Check,
+                            {
+                              className: cn(
+                                "rf-ml-auto rf-h-4 rf-w-4",
+                                path === currentFile ? "rf-opacity-100" : "rf-opacity-0"
+                              )
+                            }
+                          )
+                        ]
+                      },
+                      path
+                    ))
+                  }
+                ),
                 pinnedFiles.length > 0 && /* @__PURE__ */ jsx5(
                   CommandGroup,
                   {
@@ -1226,10 +1320,24 @@ var EnhancedFileSelectorCombobox = ({
                         value: path,
                         onSelect: () => selectFile(path, index, true),
                         className: cn(
-                          path === currentFile && "rf-font-medium"
+                          path === currentFile && "rf-font-medium",
+                          "rf-group"
                         ),
                         children: [
-                          /* @__PURE__ */ jsx5(Star, { className: "rf-mr-2 rf-h-4 rf-w-4 rf-text-amber-500 rf-fill-amber-500" }),
+                          onToggleFavorite && /* @__PURE__ */ jsx5(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                onToggleFavorite(path);
+                              },
+                              className: "rf-mr-2 rf-p-0 rf-bg-transparent rf-border-none",
+                              "aria-label": "Remove from favorites",
+                              title: "Remove from favorites",
+                              children: /* @__PURE__ */ jsx5(Star, { className: "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-[40%]", children: getDirectoryPath2(path) }),
                           /* @__PURE__ */ jsx5(
@@ -1490,12 +1598,12 @@ var RunFrameWithApi = (props) => {
   }));
   const hasReceivedInitialFiles = useHasReceivedInitialFilesLoaded();
   const fsMap = useRunFrameStore((s) => s.fsMap);
-  const allFiles = useMemo2(() => Array.from(fsMap.keys()), [fsMap]);
-  const projectConfigContent = useMemo2(() => {
+  const allFiles = useMemo3(() => Array.from(fsMap.keys()), [fsMap]);
+  const projectConfigContent = useMemo3(() => {
     const rawConfig = fsMap.get("tscircuit.config.json");
     return typeof rawConfig === "string" ? rawConfig : void 0;
   }, [fsMap]);
-  const boardFiles = useMemo2(
+  const boardFiles = useMemo3(
     () => getBoardFilesFromConfig(allFiles, projectConfigContent),
     [allFiles, projectConfigContent]
   );
@@ -1511,7 +1619,7 @@ var RunFrameWithApi = (props) => {
     []
   );
   const isLoadingFiles = !hasReceivedInitialFiles;
-  const handleToggleFavorite = useCallback3(
+  const handleToggleFavorite = useCallback4(
     (filePath) => {
       setFavorites(
         (prev) => prev.includes(filePath) ? prev.filter((f) => f !== filePath) : [...prev, filePath]
@@ -1549,7 +1657,7 @@ var RunFrameWithApi = (props) => {
       setComponentPath(firstMatch);
     }
   }, [boardFiles, props.initialMainComponentPath, componentPath]);
-  const updateFileHash = useCallback3((filePath) => {
+  const updateFileHash = useCallback4((filePath) => {
     if (typeof window === "undefined") return;
     const params = new URLSearchParams(window.location.hash.slice(1));
     if (params.get("file") === filePath) return;
@@ -1585,7 +1693,7 @@ var RunFrameWithApi = (props) => {
     startPolling();
     return () => stopPolling();
   }, [startPolling, stopPolling]);
-  const componentProp = useMemo2(
+  const componentProp = useMemo3(
     () => String(componentPath).length > 0 ? {
       mainComponentPath: componentPath
     } : {},
@@ -1665,7 +1773,7 @@ var RunFrameWithApi = (props) => {
 };
 
 // lib/components/RunFrameForCli/RunFrameForCli.tsx
-import { useCallback as useCallback4, useState as useState7 } from "react";
+import { useCallback as useCallback5, useState as useState7 } from "react";
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var RunFrameForCli = (props) => {
   const [shouldLoadLatestEval, setLoadLatestEval] = useLocalStorageState(
@@ -1677,7 +1785,7 @@ var RunFrameForCli = (props) => {
     const params = new URLSearchParams(window.location.hash.slice(1));
     return params.get("main_component") ?? void 0;
   });
-  const updateMainComponentHash = useCallback4((mainComponentPath) => {
+  const updateMainComponentHash = useCallback5((mainComponentPath) => {
     if (typeof window === "undefined") return;
     const params = new URLSearchParams(window.location.hash.slice(1));
     if (params.get("main_component") === mainComponentPath) return;
@@ -2293,7 +2401,7 @@ var ImportComponentDialog = ({
 };
 
 // lib/components/RunFrameStaticBuildViewer/RunFrameStaticBuildViewer.tsx
-import { useCallback as useCallback5, useEffect as useEffect9, useState as useState9 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect9, useState as useState9 } from "react";
 
 // lib/components/RunFrameStaticBuildViewer/CircuitJsonFileSelectorCombobox.tsx
 import { jsx as jsx9 } from "react/jsx-runtime";
@@ -2333,7 +2441,7 @@ var RunFrameStaticBuildViewer = (props) => {
   const [failedFiles, setFailedFiles] = useState9(/* @__PURE__ */ new Set());
   const fileReferences = props.files;
   const availableFiles = fileReferences.map((f) => f.filePath);
-  const defaultFetchFile = useCallback5(
+  const defaultFetchFile = useCallback6(
     async (fileRef) => {
       if (!fileRef.fileStaticAssetUrl) {
         throw new Error(
@@ -2350,7 +2458,7 @@ var RunFrameStaticBuildViewer = (props) => {
     },
     []
   );
-  const loadCircuitJsonFile = useCallback5(
+  const loadCircuitJsonFile = useCallback6(
     async (filePath) => {
       if (fileCache[filePath]) {
         setCircuitJson(fileCache[filePath]);
@@ -2417,10 +2525,10 @@ var RunFrameStaticBuildViewer = (props) => {
       loadCircuitJsonFile(selectedPath);
     }
   }, [currentCircuitJsonPath]);
-  const handleFileChange = useCallback5((newPath) => {
+  const handleFileChange = useCallback6((newPath) => {
     setCurrentCircuitJsonPath(newPath);
   }, []);
-  const retryFailedFile = useCallback5(
+  const retryFailedFile = useCallback6(
     (filePath) => {
       setFailedFiles((prev) => {
         const newSet = new Set(prev);