@tscircuit/fake-snippets 0.0.88 → 0.0.90

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"
@@ -27,14 +32,18 @@ import CodeEditorHeader, {
 import { useCodeCompletionApi } from "@/hooks/use-code-completion-ai-api"
 import FileSidebar from "../FileSidebar"
 import { findTargetFile } from "@/lib/utils/findTargetFile"
-import type { PackageFile } from "./CodeAndPreview"
+import type { PackageFile } from "@/types/package"
 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"
+import { inlineCopilot } from "codemirror-copilot"
 
 const defaultImports = `
 import React from "@types/react/jsx-runtime"
@@ -77,12 +86,16 @@ 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()
 
   // Get URL search params for file_path
   const urlParams = new URLSearchParams(window.location.search)
   const filePathFromUrl = urlParams.get("file_path")
+  const [aiAutocompleteEnabled, setAiAutocompleteEnabled] = useState(false)
 
   const entryPointFileName = useMemo(() => {
     const entryPointFile = findTargetFile(files, null)
@@ -132,6 +145,14 @@ export const CodeEditor = ({
     }
   }, [isStreaming])
 
+  useHotkeyCombo(
+    "cmd+b",
+    () => {
+      setSidebarOpen((prev) => !prev)
+    },
+    { target: window },
+  )
+
   useEffect(() => {
     if (!editorRef.current) return
 
@@ -141,12 +162,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 +259,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,13 +302,48 @@ 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) {
+    if (aiAutocompleteEnabled) {
       baseExtensions.push(
-        // copilotPlugin({
-        //   apiKey: codeCompletionApi.apiKey,
-        //   language: Language.TYPESCRIPT,
-        // }),
+        inlineCopilot(async (prefix, suffix) => {
+          const res = await fetch("/api/autocomplete/create_autocomplete", {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              prefix,
+              suffix,
+              language: "typescript",
+            }),
+          })
+
+          const { prediction } = await res.json()
+          return prediction
+        }),
         EditorView.theme({
           ".cm-ghostText, .cm-ghostText *": {
             opacity: "0.6",
@@ -470,7 +544,15 @@ export const CodeEditor = ({
     return () => {
       view.destroy()
     }
-  }, [!isStreaming, currentFile, code !== "", Boolean(highlighter), isSaving])
+  }, [
+    !isStreaming,
+    currentFile,
+    code !== "",
+    Boolean(highlighter),
+    isSaving,
+    fontSize,
+    aiAutocompleteEnabled,
+  ])
 
   const updateCurrentEditorContent = (newContent: string) => {
     if (viewRef.current) {
@@ -541,12 +623,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}
@@ -570,6 +670,10 @@ export const CodeEditor = ({
             files={Object.fromEntries(files.map((f) => [f.path, f.content]))}
             updateFileContent={updateFileContent}
             handleFileChange={handleFileChange}
+            aiAutocompleteState={[
+              aiAutocompleteEnabled,
+              setAiAutocompleteEnabled,
+            ]}
           />
         )}
         <div
@@ -579,6 +683,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,13 @@ 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"
+import ai from "fake-snippets-api/routes/api/ai"
 
 export type FileName = string
 
@@ -30,6 +37,7 @@ interface CodeEditorHeaderProps {
   fileSidebarState: ReturnType<typeof useState<boolean>>
   handleFileChange: (filename: FileName) => void
   entrypointFileName?: string
+  aiAutocompleteState: [boolean, React.Dispatch<React.SetStateAction<boolean>>]
 }
 
 export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
@@ -39,11 +47,13 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
   fileSidebarState,
   handleFileChange,
   entrypointFileName = "index.tsx",
+  aiAutocompleteState,
 }) => {
   const { Dialog: ImportPackageDialog, openDialog: openImportDialog } =
     useImportPackageDialog()
   const { toast } = useToast()
   const [sidebarOpen, setSidebarOpen] = fileSidebarState
+  const [aiAutocompleteEnabled, setAiAutocompleteEnabled] = aiAutocompleteState
 
   const handleFormatFile = useCallback(() => {
     if (!window.prettier || !window.prettierPlugins) return
@@ -152,7 +162,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 +180,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 +199,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 +242,32 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
               </DropdownMenuContent>
             </DropdownMenu>
           )}
+
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={() => {
+                    setAiAutocompleteEnabled((prev) => !prev)
+                  }}
+                  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"
@@ -18,28 +18,26 @@ import { Package } from "fake-snippets-api/lib/db/schema"
 import {
   ChevronDown,
   CodeIcon,
-  Download,
   Edit2,
   Eye,
   EyeIcon,
   File,
   FilePenLine,
   MoreVertical,
-  Package as PackageIcon,
   Pencil,
   Save,
   Share,
   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"
 import { useViewTsFilesDialog } from "@/components/dialogs/view-ts-files-dialog"
 import { DownloadButtonAndMenu } from "@/components/DownloadButtonAndMenu"
 import { TypeBadge } from "@/components/TypeBadge"
@@ -52,22 +50,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))
@@ -80,7 +82,6 @@ export default function EditorNav({
   } = useUpdatePackageDescriptionDialog()
   const { Dialog: DeleteDialog, openDialog: openDeleteDialog } =
     useConfirmDeletePackageDialog()
-  const { Dialog: FilesDialog, openDialog: openFilesDialog } = useFilesDialog()
   const { Dialog: ViewTsFilesDialog, openDialog: openViewTsFilesDialog } =
     useViewTsFilesDialog()
 
@@ -190,17 +191,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 +309,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 +335,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!")
             }}
@@ -359,13 +371,6 @@ export default function EditorNav({
                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent>
-                <DropdownMenuItem
-                  className="text-xs"
-                  onClick={() => openFilesDialog()}
-                >
-                  <File className="mr-2 h-3 w-3" />
-                  View Files
-                </DropdownMenuItem>
                 <DropdownMenuItem
                   className="text-xs"
                   onClick={() => openupdateDescriptionDialog()}
@@ -378,7 +383,7 @@ export default function EditorNav({
                   onClick={() => openViewTsFilesDialog()}
                 >
                   <File className="mr-2 h-3 w-3" />
-                  [Debug] View TS Files
+                  View Files
                 </DropdownMenuItem>
                 <DropdownMenuSub>
                   <DropdownMenuSubTrigger
@@ -432,7 +437,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 +473,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={() => {
@@ -540,7 +554,6 @@ export default function EditorNav({
         packageName={pkg?.unscoped_name ?? ""}
         packageOwner={pkg?.owner_github_username ?? ""}
       />
-      <FilesDialog snippetId={pkg?.package_id ?? ""} />
       <ViewTsFilesDialog />
     </nav>
   )