@tscircuit/fake-snippets 0.0.87 → 0.0.89

package/src/components/package-port/CodeEditor.tsx

@@ -1,7 +1,12 @@
 import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
+import { useHotkeyCombo } from "@/hooks/use-hotkey"
 import { basicSetup } from "@/lib/codemirror/basic-setup"
-import { autocompletion } from "@codemirror/autocomplete"
-import { indentWithTab } from "@codemirror/commands"
+import {
+  autocompletion,
+  acceptCompletion,
+  completionStatus,
+} from "@codemirror/autocomplete"
+import { indentWithTab, indentMore } from "@codemirror/commands"
 import { javascript } from "@codemirror/lang-javascript"
 import { json } from "@codemirror/lang-json"
 import { EditorState, Prec } from "@codemirror/state"
@@ -12,10 +17,10 @@ import { setupTypeAcquisition } from "@typescript/ata"
 import { linter } from "@codemirror/lint"
 import { TSCI_PACKAGE_PATTERN } from "@/lib/constants"
 import {
-  createDefaultMapFromCDN,
   createSystem,
   createVirtualTypeScriptEnvironment,
 } from "@typescript/vfs"
+import { loadDefaultLibMap } from "@/lib/ts-lib-cache"
 import { tsAutocomplete, tsFacet, tsSync } from "@valtown/codemirror-ts"
 import { getLints } from "@valtown/codemirror-ts"
 import { EditorView } from "codemirror"
@@ -29,12 +34,15 @@ import FileSidebar from "../FileSidebar"
 import { findTargetFile } from "@/lib/utils/findTargetFile"
 import type { PackageFile } from "./CodeAndPreview"
 import { useShikiHighlighter } from "@/hooks/use-shiki-highlighter"
+import QuickOpen from "./QuickOpen"
+import GlobalFindReplace from "./GlobalFindReplace"
 import {
   ICreateFileProps,
   ICreateFileResult,
   IDeleteFileProps,
   IDeleteFileResult,
 } from "@/hooks/useFileManagement"
+import { isHiddenFile } from "../ViewPackagePage/utils/is-hidden-file"
 
 const defaultImports = `
 import React from "@types/react/jsx-runtime"
@@ -77,6 +85,9 @@ export const CodeEditor = ({
   const codeCompletionApi = useCodeCompletionApi()
   const [cursorPosition, setCursorPosition] = useState<number | null>(null)
   const [code, setCode] = useState(files[0]?.content || "")
+  const [fontSize, setFontSize] = useState(14)
+  const [showQuickOpen, setShowQuickOpen] = useState(false)
+  const [showGlobalFindReplace, setShowGlobalFindReplace] = useState(false)
 
   const { highlighter } = useShikiHighlighter()
 
@@ -132,6 +143,14 @@ export const CodeEditor = ({
     }
   }, [isStreaming])
 
+  useHotkeyCombo(
+    "cmd+b",
+    () => {
+      setSidebarOpen((prev) => !prev)
+    },
+    { target: window },
+  )
+
   useEffect(() => {
     if (!editorRef.current) return
 
@@ -141,12 +160,7 @@ export const CodeEditor = ({
     })
     ;(window as any).__DEBUG_CODE_EDITOR_FS_MAP = fsMap
 
-    createDefaultMapFromCDN(
-      { target: tsModule.ScriptTarget.ES2022 },
-      "5.6.3",
-      true,
-      tsModule,
-    ).then((defaultFsMap) => {
+    loadDefaultLibMap().then((defaultFsMap) => {
       defaultFsMap.forEach((content, filename) => {
         fsMap.set(filename, content)
       })
@@ -243,6 +257,29 @@ export const CodeEditor = ({
             key: "Mod-Enter",
             run: () => true,
           },
+          {
+            key: "Tab",
+            run: (view) => {
+              if (completionStatus(view.state) === "active") {
+                return acceptCompletion(view)
+              }
+              return indentMore(view)
+            },
+          },
+          {
+            key: "Mod-p",
+            run: () => {
+              setShowQuickOpen(true)
+              return true
+            },
+          },
+          {
+            key: "Mod-Shift-f",
+            run: () => {
+              setShowGlobalFindReplace(true)
+              return true
+            },
+          },
         ]),
       ),
       keymap.of([indentWithTab]),
@@ -263,6 +300,29 @@ export const CodeEditor = ({
           setCursorPosition(pos)
         }
       }),
+      EditorView.theme({
+        ".cm-editor": {
+          fontSize: `${fontSize}px`,
+        },
+        ".cm-content": {
+          fontSize: `${fontSize}px`,
+        },
+      }),
+      EditorView.domEventHandlers({
+        wheel: (event) => {
+          if (event.ctrlKey || event.metaKey) {
+            event.preventDefault()
+            const delta = event.deltaY
+            setFontSize((prev) => {
+              const newSize =
+                delta > 0 ? Math.max(8, prev - 1) : Math.min(32, prev + 1)
+              return newSize
+            })
+            return true
+          }
+          return false
+        },
+      }),
     ]
     if (codeCompletionApi?.apiKey) {
       baseExtensions.push(
@@ -470,7 +530,14 @@ export const CodeEditor = ({
     return () => {
       view.destroy()
     }
-  }, [!isStreaming, currentFile, code !== "", Boolean(highlighter), isSaving])
+  }, [
+    !isStreaming,
+    currentFile,
+    code !== "",
+    Boolean(highlighter),
+    isSaving,
+    fontSize,
+  ])
 
   const updateCurrentEditorContent = (newContent: string) => {
     if (viewRef.current) {
@@ -541,12 +608,30 @@ export const CodeEditor = ({
     updateEditorToMatchCurrentFile()
   }, [currentFile])
 
+  // Global keyboard listeners
+  useHotkeyCombo("cmd+p", () => {
+    setShowQuickOpen(true)
+  })
+
+  useHotkeyCombo("cmd+shift+f", () => {
+    setShowGlobalFindReplace(true)
+  })
+
+  useHotkeyCombo("Escape", () => {
+    if (showQuickOpen) {
+      setShowQuickOpen(false)
+    }
+    if (showGlobalFindReplace) {
+      setShowGlobalFindReplace(false)
+    }
+  })
+
   if (isStreaming) {
     return <div className="font-mono whitespace-pre-wrap text-xs">{code}</div>
   }
   const [sidebarOpen, setSidebarOpen] = useState(false)
   return (
-    <div className="flex h-screen w-full overflow-hidden">
+    <div className="flex h-[98vh] w-full overflow-hidden">
       <FileSidebar
         files={Object.fromEntries(files.map((f) => [f.path, f.content]))}
         currentFile={currentFile}
@@ -579,6 +664,23 @@ export const CodeEditor = ({
           }
         />
       </div>
+      {showQuickOpen && (
+        <QuickOpen
+          files={files.filter((f) => !isHiddenFile(f.path))}
+          currentFile={currentFile}
+          onFileSelect={handleFileChange}
+          onClose={() => setShowQuickOpen(false)}
+        />
+      )}
+      {showGlobalFindReplace && (
+        <GlobalFindReplace
+          files={files.filter((f) => !isHiddenFile(f.path))}
+          currentFile={currentFile}
+          onFileSelect={handleFileChange}
+          onFileContentChanged={onCodeChange}
+          onClose={() => setShowGlobalFindReplace(false)}
+        />
+      )}
     </div>
   )
 }

package/src/components/package-port/CodeEditorHeader.tsx

@@ -9,7 +9,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
-import { AlertTriangle, PanelRightClose } from "lucide-react"
+import { AlertTriangle, PanelRightClose, Bot } from "lucide-react"
 import { checkIfManualEditsImported } from "@/lib/utils/checkIfManualEditsImported"
 import {
   Select,
@@ -20,6 +20,12 @@ import {
 } from "../ui/select"
 import { isHiddenFile } from "../ViewPackagePage/utils/is-hidden-file"
 import { Package } from "fake-snippets-api/lib/db/schema"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
 
 export type FileName = string
 
@@ -44,6 +50,7 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
     useImportPackageDialog()
   const { toast } = useToast()
   const [sidebarOpen, setSidebarOpen] = fileSidebarState
+  const [aiAutocompleteEnabled, setAiAutocompleteEnabled] = useState(false)
 
   const handleFormatFile = useCallback(() => {
     if (!window.prettier || !window.prettierPlugins) return
@@ -152,7 +159,7 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
         <div>
           <Select value={currentFile || ""} onValueChange={handleFileChange}>
             <SelectTrigger
-              className={`h-7 w-24 px-3 bg-white select-none transition-[margin] duration-300 ease-in-out ${
+              className={`h-7 w-32 sm:w-48 px-3 bg-white select-none transition-[margin] duration-300 ease-in-out ${
                 sidebarOpen ? "-ml-2" : "-ml-1"
               }`}
             >
@@ -170,7 +177,9 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
                   <SelectItem className="py-1" key={filename} value={filename}>
                     <span
                       className={`text-xs pr-1 block truncate ${
-                        sidebarOpen ? "max-w-[5rem]" : "max-w-[10rem]"
+                        sidebarOpen
+                          ? "max-w-[8rem] sm:max-w-[12rem]"
+                          : "max-w-[12rem] sm:max-w-[16rem]"
                       }`}
                     >
                       {filename}
@@ -187,7 +196,9 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
                   <SelectItem className="select-none py-1" value={currentFile}>
                     <span
                       className={`text-xs pr-1 block truncate ${
-                        sidebarOpen ? "max-w-[5rem]" : "max-w-[10rem]"
+                        sidebarOpen
+                          ? "max-w-[8rem] sm:max-w-[12rem]"
+                          : "max-w-[12rem] sm:max-w-[16rem]"
                       }`}
                     >
                       {currentFile}
@@ -228,6 +239,30 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
               </DropdownMenuContent>
             </DropdownMenu>
           )}
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={() =>
+                    setAiAutocompleteEnabled(!aiAutocompleteEnabled)
+                  }
+                  className={`relative bg-transparent ${aiAutocompleteEnabled ? "text-gray-600 bg-gray-50" : "text-gray-400"}`}
+                >
+                  <Bot className="h-4 w-4" />
+                  {!aiAutocompleteEnabled && (
+                    <div className="absolute inset-0 flex items-center justify-center">
+                      <div className="w-5 h-0.5 bg-gray-400 rotate-45 rounded-full" />
+                    </div>
+                  )}
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Toggle AI autocomplete for code suggestions</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
           <Button size="sm" variant="ghost" onClick={() => openImportDialog()}>
             Import
           </Button>

package/src/components/package-port/EditorNav.tsx

@@ -10,7 +10,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import { useGlobalStore } from "@/hooks/use-global-store"
-import { encodeTextToUrlHash } from "@/lib/encodeTextToUrlHash"
+import { encodeFsMapToUrlHash } from "@/lib/encodeFsMapToUrlHash"
 import { cn } from "@/lib/utils"
 import { OpenInNewWindowIcon, LockClosedIcon } from "@radix-ui/react-icons"
 import { AnyCircuitElement } from "circuit-json"
@@ -32,11 +32,13 @@ import {
   Sidebar,
   Sparkles,
   Trash2,
+  Undo2,
 } from "lucide-react"
 import { useEffect, useMemo, useState } from "react"
 import { useQueryClient } from "react-query"
 import { Link, useLocation } from "wouter"
 import { useAxios } from "@/hooks/use-axios"
+import { useHotkeyCombo } from "@/hooks/use-hotkey"
 import { useToast } from "@/hooks/use-toast"
 import { useConfirmDeletePackageDialog } from "@/components/dialogs/confirm-delete-package-dialog"
 import { useFilesDialog } from "@/components/dialogs/files-dialog"
@@ -52,22 +54,26 @@ export default function EditorNav({
   circuitJson,
   pkg,
   code,
+  fsMap,
   hasUnsavedChanges,
   onTogglePreview,
   previewOpen,
   onSave,
+  onDiscard,
   packageType,
   isSaving,
 }: {
   pkg?: Package | null
   circuitJson?: AnyCircuitElement[] | null
   code: string
+  fsMap: Record<string, string>
   packageType?: string
   hasUnsavedChanges: boolean
   previewOpen: boolean
   onTogglePreview: () => void
   isSaving: boolean
   onSave: () => void
+  onDiscard?: () => void
 }) {
   const [, navigate] = useLocation()
   const isLoggedIn = useGlobalStore((s) => Boolean(s.session))
@@ -190,17 +196,14 @@ export default function EditorNav({
     [isLoggedIn, pkg, session?.github_username],
   )
 
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if ((e.ctrlKey || e.metaKey) && e.key === "s") {
-        e.preventDefault()
-        if (!hasUnsavedChanges || !canSavePackage) return
-        onSave()
-      }
-    }
-    window.addEventListener("keydown", handleKeyDown)
-    return () => window.removeEventListener("keydown", handleKeyDown)
-  }, [onSave, hasUnsavedChanges, canSavePackage])
+  useHotkeyCombo(
+    "cmd+s",
+    () => {
+      if (!hasUnsavedChanges || !canSavePackage) return
+      onSave()
+    },
+    { target: window },
+  )
   return (
     <nav className="lg:flex w-screen items-center justify-between px-2 py-3 border-b border-gray-200 bg-white text-sm border-t">
       <div className="lg:flex items-center my-2 ">
@@ -311,6 +314,17 @@ export default function EditorNav({
               {pkg ? "unsaved changes" : "unsaved"}
             </div>
           )}
+          {hasUnsavedChanges && onDiscard && Boolean(pkg?.package_id) && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-6 px-2 text-xs text-red-600 hover:text-red-700 hover:bg-red-50"
+              onClick={onDiscard}
+              title="Discard all unsaved changes (Cmd+Shift+Z)"
+            >
+              <Undo2 className="mr-1 h-3 w-3" />
+            </Button>
+          )}
         </div>
       </div>
       <div className="flex items-center justify-end -space-x-1">
@@ -326,16 +340,19 @@ export default function EditorNav({
             Edit with AI
           </Button> */}
           <DownloadButtonAndMenu
-            snippetUnscopedName={pkg?.unscoped_name}
+            offerMultipleImageFormats
+            unscopedName={pkg?.unscoped_name}
             circuitJson={circuitJson}
             className="flex"
+            desiredImageType={pkg?.default_view ?? "pcb"}
+            author={pkg?.owner_github_username ?? undefined}
           />
           <Button
             variant="ghost"
             size="sm"
             className="hidden md:flex px-2 text-xs"
             onClick={() => {
-              const url = encodeTextToUrlHash(code, packageType)
+              const url = encodeFsMapToUrlHash(fsMap, packageType)
               navigator.clipboard.writeText(url)
               alert("URL copied to clipboard!")
             }}
@@ -432,7 +449,7 @@ export default function EditorNav({
                   onClick={() => openDeleteDialog()}
                 >
                   <Trash2 className="mr-2 h-3 w-3" />
-                  Delete Snippet
+                  Delete Package
                 </DropdownMenuItem>
                 <DropdownMenuItem className="text-xs text-gray-500" disabled>
                   @tscircuit/core@{tscircuitCorePkg.version}
@@ -468,6 +485,15 @@ export default function EditorNav({
               </div>
             </DropdownMenuTrigger>
             <DropdownMenuContent>
+              {hasUnsavedChanges && onDiscard && (
+                <DropdownMenuItem
+                  className="text-xs text-red-600"
+                  onClick={onDiscard}
+                >
+                  <Undo2 className="mr-1 h-3 w-3" />
+                  Discard Changes
+                </DropdownMenuItem>
+              )}
               <DropdownMenuItem
                 className="text-xs"
                 onClick={() => {