@tscircuit/fake-snippets 0.0.97 → 0.0.99

package/fake-snippets-api/routes/api/autocomplete/create_autocomplete.ts

@@ -1,4 +1,3 @@
-import "dotenv/config"
 import { withRouteSpec } from "fake-snippets-api/lib/middleware/with-winter-spec"
 import { z } from "zod"
 import OpenAI from "openai"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.97",
+  "version": "0.0.99",
   "type": "module",
   "repository": {
     "type": "git",
@@ -75,7 +75,7 @@
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@tailwindcss/typography": "^0.5.16",
-    "@tscircuit/3d-viewer": "^0.0.279",
+    "@tscircuit/3d-viewer": "^0.0.303",
     "@tscircuit/assembly-viewer": "^0.0.1",
     "@tscircuit/create-snippet-url": "^0.0.8",
     "@tscircuit/eval": "^0.0.244",
@@ -83,7 +83,7 @@
     "@tscircuit/mm": "^0.0.8",
     "@tscircuit/pcb-viewer": "^1.11.194",
     "@tscircuit/prompt-benchmarks": "^0.0.28",
-    "@tscircuit/runframe": "^0.0.669",
+    "@tscircuit/runframe": "0.0.715",
     "@tscircuit/schematic-viewer": "^2.0.21",
     "@types/babel__standalone": "^7.1.7",
     "@types/bun": "^1.1.10",
@@ -187,6 +187,7 @@
     "wouter": "^3.3.5",
     "zod": "^3.23.8",
     "zustand": "^4.5.5",
-    "zustand-hoist": "^2.0.1"
+    "zustand-hoist": "^2.0.1",
+    "circuit-json-to-spice": "^0.0.6"
   }
 }

package/src/App.tsx

@@ -122,6 +122,7 @@ class ErrorBoundary extends React.Component<
   cleanup = () => {
     if (this.visibilityHandler) {
       document.removeEventListener("visibilitychange", this.visibilityHandler)
+      window.removeEventListener("focus", this.visibilityHandler)
       this.visibilityHandler = undefined
     }
     if (this.reloadTimeout) {
@@ -144,12 +145,20 @@ class ErrorBoundary extends React.Component<
     this.cleanup() // Clean up any existing handlers
 
     this.visibilityHandler = () => {
-      if (!document.hidden && this.state.hasError && !this.state.reloading) {
+      if (
+        document.visibilityState === "visible" &&
+        this.state.hasError &&
+        !this.state.reloading
+      ) {
         this.performReload()
       }
     }
 
     document.addEventListener("visibilitychange", this.visibilityHandler)
+    window.addEventListener("focus", this.visibilityHandler)
+
+    // In case the tab is already visible when the error occurs
+    this.visibilityHandler()
   }
 
   render() {

package/src/components/DownloadButtonAndMenu.tsx

@@ -12,6 +12,7 @@ import { downloadDsnFile } from "@/lib/download-fns/download-dsn-file-fn"
 import { downloadFabricationFiles } from "@/lib/download-fns/download-fabrication-files"
 import { downloadSchematicSvg } from "@/lib/download-fns/download-schematic-svg"
 import { downloadReadableNetlist } from "@/lib/download-fns/download-readable-netlist"
+import { downloadSpiceFile } from "@/lib/download-fns/download-spice-file"
 import { downloadAssemblySvg } from "@/lib/download-fns/download-assembly-svg"
 import { usePcbDownloadDialog } from "@/components/dialogs/pcb-download-dialog"
 import { downloadKicadFiles } from "@/lib/download-fns/download-kicad-files"
@@ -214,6 +215,18 @@ export function DownloadButtonAndMenu({
               txt
             </span>
           </DropdownMenuItem>
+          <DropdownMenuItem
+            className="text-xs"
+            onSelect={() => {
+              downloadSpiceFile(circuitJson, unscopedName || "circuit")
+            }}
+          >
+            <Download className="mr-1 h-3 w-3" />
+            <span className="flex-grow mr-6">SPICE Netlist</span>
+            <span className="text-[0.6rem] opacity-80 bg-blue-500 text-white font-mono rounded-md px-1 text-center py-0.5 mr-1">
+              spice
+            </span>
+          </DropdownMenuItem>
           <DropdownMenuItem
             className="text-xs"
             onSelect={() => {

package/src/components/FileSidebar.tsx

@@ -1,6 +1,14 @@
 import React, { useState } from "react"
 import { cn } from "@/lib/utils"
-import { File, Folder, MoreVertical, PanelRightOpen, Plus } from "lucide-react"
+import {
+  File,
+  Folder,
+  MoreVertical,
+  PanelRightOpen,
+  Plus,
+  Trash2,
+  Pencil,
+} from "lucide-react"
 import { TreeView, TreeDataItem } from "@/components/ui/tree-view"
 import { isHiddenFile } from "./ViewPackagePage/utils/is-hidden-file"
 import { Input } from "@/components/ui/input"
@@ -16,8 +24,12 @@ import type {
   ICreateFileResult,
   IDeleteFileProps,
   IDeleteFileResult,
+  IRenameFileProps,
+  IRenameFileResult,
 } from "@/hooks/useFileManagement"
 import { useToast } from "@/hooks/use-toast"
+import { useGlobalStore } from "@/hooks/use-global-store"
+import type { Package } from "fake-snippets-api/lib/db/schema"
 type FileName = string
 
 interface FileSidebarProps {
@@ -28,6 +40,10 @@ interface FileSidebarProps {
   fileSidebarState: ReturnType<typeof useState<boolean>>
   handleCreateFile: (props: ICreateFileProps) => ICreateFileResult
   handleDeleteFile: (props: IDeleteFileProps) => IDeleteFileResult
+  handleRenameFile: (props: IRenameFileProps) => IRenameFileResult
+  isCreatingFile: boolean
+  setIsCreatingFile: React.Dispatch<React.SetStateAction<boolean>>
+  pkg?: Package
 }
 
 const FileSidebar: React.FC<FileSidebarProps> = ({
@@ -38,12 +54,18 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
   fileSidebarState,
   handleCreateFile,
   handleDeleteFile,
+  handleRenameFile,
+  isCreatingFile,
+  setIsCreatingFile,
+  pkg,
 }) => {
   const [sidebarOpen, setSidebarOpen] = fileSidebarState
   const [newFileName, setNewFileName] = useState("")
-  const [isCreatingFile, setIsCreatingFile] = useState(false)
   const [errorMessage, setErrorMessage] = useState("")
+  const [renamingFile, setRenamingFile] = useState<string | null>(null)
   const { toast } = useToast()
+  const session = useGlobalStore((s) => s.session)
+  const canModifyFiles = true
 
   const transformFilesToTreeData = (
     files: Record<FileName, string>,
@@ -79,20 +101,59 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
         ) {
           currentNode[segment] = {
             id: itemId,
-            name: isLeafNode ? segment : segment,
+            name: segment,
+            isRenaming: renamingFile === itemId,
+            onRename: (newFilename: string) => {
+              // Preserve the folder structure when renaming
+              const oldPath = itemId
+              const pathParts = oldPath.split("/").filter((part) => part !== "") // Remove empty segments
+              let newPath: string
+
+              if (pathParts.length > 1) {
+                // File is in a folder, preserve the folder structure
+                const folderPath = pathParts.slice(0, -1).join("/")
+                newPath = folderPath + "/" + newFilename
+              } else {
+                // File is in root, just use the new filename
+                newPath = newFilename
+              }
+
+              // Preserve leading slash if original path had one
+              if (oldPath.startsWith("/") && !newPath.startsWith("/")) {
+                newPath = "/" + newPath
+              }
+
+              const { fileRenamed } = handleRenameFile({
+                oldFilename: itemId,
+                newFilename: newPath,
+                onError: (error) => {
+                  toast({
+                    title: `Error renaming file`,
+                    description: error.message,
+                    variant: "destructive",
+                  })
+                },
+              })
+              if (fileRenamed) {
+                setRenamingFile(null)
+              }
+            },
+            onCancelRename: () => {
+              setRenamingFile(null)
+            },
             icon: isLeafNode ? File : Folder,
             onClick: isLeafNode ? () => onFileSelect(absolutePath) : undefined,
             draggable: false,
             droppable: !isLeafNode,
             children: isLeafNode ? undefined : {},
-            actions: (
+            actions: canModifyFiles ? (
               <>
                 <DropdownMenu key={itemId}>
                   <DropdownMenuTrigger asChild>
                     <MoreVertical className="w-4 h-4 text-gray-500 hover:text-gray-700" />
                   </DropdownMenuTrigger>
                   <DropdownMenuContent
-                    className="w-48 bg-white shadow-lg rounded-md border-4 z-[100] border-white"
+                    className="w-fit bg-white shadow-lg rounded-md border-4 z-[100] border-white"
                     style={{
                       position: "absolute",
                       top: "100%",
@@ -103,13 +164,24 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
                     }}
                   >
                     <DropdownMenuGroup>
+                      {isLeafNode && (
+                        <DropdownMenuItem
+                          onClick={() => {
+                            setRenamingFile(itemId)
+                          }}
+                          className="flex items-center px-3 py-1 text-xs text-black hover:bg-gray-100 cursor-pointer"
+                        >
+                          <Pencil className="mr-2 h-3 w-3" />
+                          Rename
+                        </DropdownMenuItem>
+                      )}
                       <DropdownMenuItem
                         onClick={() => {
                           const { fileDeleted } = handleDeleteFile({
-                            filename: relativePath,
+                            filename: itemId,
                             onError: (error) => {
                               toast({
-                                title: `Error deleting file ${relativePath}`,
+                                title: `Error deleting file ${itemId}`,
                                 description: error.message,
                               })
                             },
@@ -118,15 +190,16 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
                             setErrorMessage("")
                           }
                         }}
-                        className="flex items-center px-4 py-1 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer"
+                        className="flex items-center px-3 py-1 text-xs text-red-600 hover:bg-gray-100 cursor-pointer"
                       >
+                        <Trash2 className="mr-2 h-3 w-3" />
                         Delete
                       </DropdownMenuItem>
                     </DropdownMenuGroup>
                   </DropdownMenuContent>
                 </DropdownMenu>
               </>
-            ),
+            ) : undefined,
           }
         }
 
@@ -152,7 +225,7 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
   }
 
   const treeData = transformFilesToTreeData(files)
-  // console.log("treeData", files)
+
   const handleCreateFileInline = () => {
     const { newFileCreated } = handleCreateFile({
       newFileName,

package/src/components/PackageBuildsPage/LogContent.tsx

@@ -19,34 +19,46 @@ export const LogContent = ({
     type?: "info" | "success" | "error"
     msg?: string
     message?: string
-    timestamp?: string
+    timestamp?: string | number
+    [key: string]: unknown
   }>
   error?: ErrorObject | string | null
 }) => {
   return (
     <div className="font-mono text-xs space-y-1 min-w-0">
       {logs.map((log, i) => {
-        const text = log.msg ?? log.message
+        const { type, msg, message, timestamp, ...rest } = log
+        const text = msg ?? message
         if (!text) return null
 
         return (
           <div
             key={i}
             className={`break-words whitespace-pre-wrap ${
-              log.type === "error"
+              type === "error"
                 ? "text-red-600"
-                : log.type === "success"
+                : type === "success"
                   ? "text-green-600"
                   : "text-gray-600"
             }`}
           >
-            {log.timestamp && (
+            {timestamp !== undefined && (
               <span className="text-gray-500 whitespace-nowrap">
-                {new Date(log.timestamp).toLocaleTimeString()}
+                {new Date(Number(timestamp)).toLocaleTimeString()}
               </span>
             )}
-            {log.timestamp && " "}
+            {timestamp !== undefined && " "}
             <span className="break-all">{text}</span>
+            {Object.keys(rest).filter((k) => k !== "package_release_id")
+              .length > 0 && (
+              <span className="text-gray-500">
+                {" "}
+                {Object.entries(rest)
+                  .filter(([key]) => key !== "package_release_id")
+                  .map(([key, value]) => `${key}: ${String(value)}`)
+                  .join(" ")}
+              </span>
+            )}
           </div>
         )
       })}

package/src/components/ViewPackagePage/components/ShikiCodeViewer.tsx

@@ -1,11 +1,18 @@
 import { useShikiHighlighter } from "@/hooks/use-shiki-highlighter"
 import { useEffect, useMemo } from "react"
 import { useQuery } from "react-query"
+import { Skeleton } from "@/components/ui/skeleton"
+
+// Pre-randomized array to avoid flickering on re-renders
+const SKELETON_WIDTHS = ["w-2/3", "w-1/4", "w-5/6", "w-1/3", "w-1/2", "w-3/4"]
 
 export const ShikiCodeViewer = ({
   code,
   filePath,
-}: { code: string; filePath: string }) => {
+}: {
+  code: string
+  filePath: string
+}) => {
   const { highlighter } = useShikiHighlighter()
 
   const html = useMemo(
@@ -18,7 +25,13 @@ export const ShikiCodeViewer = ({
   )
 
   if (!html) {
-    return <div>Loading...</div>
+    return (
+      <div className="text-sm p-4">
+        {SKELETON_WIDTHS.map((w, i) => (
+          <Skeleton key={i} className={`h-4 mb-2 ${w}`} />
+        ))}
+      </div>
+    )
   }
 
   return (

package/src/components/ViewPackagePage/components/tab-views/3d-view.tsx

@@ -1,5 +1,6 @@
 import { CadViewer } from "@tscircuit/runframe"
 import { useCurrentPackageCircuitJson } from "../../hooks/use-current-package-circuit-json"
+import { Suspense } from "react"
 
 export default function ThreeDView() {
   const { circuitJson, isLoading, error } = useCurrentPackageCircuitJson()
@@ -24,7 +25,19 @@ export default function ThreeDView() {
 
   return (
     <div className="h-[620px]">
-      <CadViewer clickToInteractEnabled circuitJson={circuitJson} />
+      <Suspense
+        fallback={
+          <div className="flex justify-center items-center h-full">
+            <div className="w-48">
+              <div className="loading">
+                <div className="loading-bar"></div>
+              </div>
+            </div>
+          </div>
+        }
+      >
+        <CadViewer clickToInteractEnabled circuitJson={circuitJson} />
+      </Suspense>
     </div>
   )
 }

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

@@ -16,6 +16,7 @@ import { toastManualEditConflicts } from "@/lib/utils/toastManualEditConflicts"
 import { ManualEditEvent } from "@tscircuit/props"
 import { useFileManagement } from "@/hooks/useFileManagement"
 import { DEFAULT_CODE } from "@/lib/utils/package-utils"
+import { useGlobalStore } from "@/hooks/use-global-store"
 
 interface Props {
   pkg?: Package
@@ -38,6 +39,7 @@ export interface CodeAndPreviewState {
 
 export function CodeAndPreview({ pkg, projectUrl }: Props) {
   const { toast } = useToast()
+  const session = useGlobalStore((s) => s.session)
   const urlParams = useUrlParams()
 
   const templateFromUrl = useMemo(
@@ -75,6 +77,7 @@ export function CodeAndPreview({ pkg, projectUrl }: Props) {
     setLocalFiles,
     localFiles,
     initialFiles,
+    renameFile,
   } = useFileManagement({
     templateCode: templateFromUrl?.code,
     currentPackage: pkg,
@@ -208,6 +211,8 @@ export function CodeAndPreview({ pkg, projectUrl }: Props) {
             isSaving={isSaving}
             handleCreateFile={createFile}
             handleDeleteFile={deleteFile}
+            handleRenameFile={renameFile}
+            pkg={pkg}
             currentFile={currentFile}
             onFileSelect={onFileSelect}
             files={localFiles}

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

@@ -15,7 +15,10 @@ import { getImportsFromCode } from "@tscircuit/prompt-benchmarks/code-runner-uti
 import type { ATABootstrapConfig } from "@typescript/ata"
 import { setupTypeAcquisition } from "@typescript/ata"
 import { linter } from "@codemirror/lint"
-import { TSCI_PACKAGE_PATTERN } from "@/lib/constants"
+import {
+  TSCI_PACKAGE_PATTERN,
+  LOCAL_FILE_IMPORT_PATTERN,
+} from "@/lib/constants"
 import {
   createSystem,
   createVirtualTypeScriptEnvironment,
@@ -29,10 +32,10 @@ import tsModule from "typescript"
 import CodeEditorHeader, {
   FileName,
 } from "@/components/package-port/CodeEditorHeader"
-import { useCodeCompletionApi } from "@/hooks/use-code-completion-ai-api"
 import FileSidebar from "../FileSidebar"
 import { findTargetFile } from "@/lib/utils/findTargetFile"
 import type { PackageFile } from "@/types/package"
+import type { Package } from "fake-snippets-api/lib/db/schema"
 import { useShikiHighlighter } from "@/hooks/use-shiki-highlighter"
 import QuickOpen from "./QuickOpen"
 import GlobalFindReplace from "./GlobalFindReplace"
@@ -41,9 +44,12 @@ import {
   ICreateFileResult,
   IDeleteFileProps,
   IDeleteFileResult,
+  IRenameFileProps,
+  IRenameFileResult,
 } from "@/hooks/useFileManagement"
 import { isHiddenFile } from "../ViewPackagePage/utils/is-hidden-file"
 import { inlineCopilot } from "codemirror-copilot"
+import { resolveRelativePath } from "@/lib/utils/resolveRelativePath"
 
 const defaultImports = `
 import React from "@types/react/jsx-runtime"
@@ -62,14 +68,18 @@ export const CodeEditor = ({
   pkgFilesLoaded,
   currentFile,
   onFileSelect,
+  handleRenameFile,
   handleCreateFile,
   handleDeleteFile,
+  pkg,
 }: {
   onCodeChange: (code: string, filename?: string) => void
   files: PackageFile[]
   isSaving?: boolean
   handleCreateFile: (props: ICreateFileProps) => ICreateFileResult
   handleDeleteFile: (props: IDeleteFileProps) => IDeleteFileResult
+  handleRenameFile: (props: IRenameFileProps) => IRenameFileResult
+  pkg?: Package
   readOnly?: boolean
   isStreaming?: boolean
   pkgFilesLoaded?: boolean
@@ -105,6 +115,9 @@ export const CodeEditor = ({
     return files.find((x) => x.path === "index.tsx")?.path || "index.tsx"
   }, [files])
 
+  const [sidebarOpen, setSidebarOpen] = useState(false)
+  const [isCreatingFile, setIsCreatingFile] = useState(false)
+
   // Set current file on component mount
   useEffect(() => {
     if (files.length === 0 || !pkgFilesLoaded || currentFile) return
@@ -417,11 +430,13 @@ export const CodeEditor = ({
               const lineStart = line.from
               const lineEnd = line.to
               const lineText = view.state.sliceDoc(lineStart, lineEnd)
-              const matches = Array.from(
+
+              // Check for TSCI package imports
+              const packageMatches = Array.from(
                 lineText.matchAll(TSCI_PACKAGE_PATTERN),
               )
 
-              for (const match of matches) {
+              for (const match of packageMatches) {
                 if (match.index !== undefined) {
                   const start = lineStart + match.index
                   const end = start + match[0].length
@@ -484,10 +499,12 @@ export const CodeEditor = ({
                 const lineStart = line.from
                 const lineEnd = line.to
                 const lineText = view.state.sliceDoc(lineStart, lineEnd)
-                const matches = Array.from(
+
+                // Check for TSCI package imports first
+                const packageMatches = Array.from(
                   lineText.matchAll(TSCI_PACKAGE_PATTERN),
                 )
-                for (const match of matches) {
+                for (const match of packageMatches) {
                   if (match.index !== undefined) {
                     const start = lineStart + match.index
                     const end = start + match[0].length
@@ -502,6 +519,42 @@ export const CodeEditor = ({
                     }
                   }
                 }
+
+                // Check for local file imports
+                const localFileMatches = Array.from(
+                  lineText.matchAll(LOCAL_FILE_IMPORT_PATTERN),
+                )
+                for (const match of localFileMatches) {
+                  if (match.index !== undefined) {
+                    const start = lineStart + match.index
+                    const end = start + match[0].length
+                    if (pos >= start && pos <= end) {
+                      const relativePath = match[0]
+                      const resolvedPath = resolveRelativePath(
+                        relativePath,
+                        currentFile || "",
+                      )
+
+                      // Add common extensions if not present
+                      let targetPath = resolvedPath
+                      if (!targetPath.includes(".")) {
+                        const extensions = [".tsx", ".ts", ".js", ".jsx"]
+                        for (const ext of extensions) {
+                          if (fileMap[`${targetPath}${ext}`]) {
+                            targetPath = `${targetPath}${ext}`
+                            break
+                          }
+                        }
+                      }
+
+                      if (fileMap[targetPath]) {
+                        onFileSelect(targetPath)
+                        return true
+                      }
+                      return !!fileMap[targetPath]
+                    }
+                  }
+                }
                 return false
               },
               keydown: (event) => {
@@ -529,6 +582,12 @@ export const CodeEditor = ({
                 overflow: "auto",
                 zIndex: "9999",
               },
+              ".cm-import:hover": {
+                textDecoration: "underline",
+                textDecorationColor: "#aa1111",
+                textUnderlineOffset: "1px",
+                filter: "brightness(0.7)",
+              },
             }),
             EditorView.decorations.of((view) => {
               const decorations = []
@@ -536,14 +595,32 @@ export const CodeEditor = ({
                 for (let pos = from; pos < to; ) {
                   const line = view.state.doc.lineAt(pos)
                   const lineText = line.text
-                  const matches = lineText.matchAll(TSCI_PACKAGE_PATTERN)
-                  for (const match of matches) {
+
+                  // Add decorations for TSCI package imports
+                  const packageMatches = lineText.matchAll(TSCI_PACKAGE_PATTERN)
+                  for (const match of packageMatches) {
                     if (match.index !== undefined) {
                       const start = line.from + match.index
                       const end = start + match[0].length
                       decorations.push(
                         Decoration.mark({
-                          class: "cm-underline cursor-pointer",
+                          class: "cm-import cursor-pointer",
+                        }).range(start, end),
+                      )
+                    }
+                  }
+
+                  // Add decorations for local file imports
+                  const localFileMatches = lineText.matchAll(
+                    LOCAL_FILE_IMPORT_PATTERN,
+                  )
+                  for (const match of localFileMatches) {
+                    if (match.index !== undefined) {
+                      const start = line.from + match.index
+                      const end = start + match[0].length
+                      decorations.push(
+                        Decoration.mark({
+                          class: "cm-import cursor-pointer",
                         }).range(start, end),
                       )
                     }
@@ -719,10 +796,14 @@ export const CodeEditor = ({
     }
   })
 
+  useHotkeyCombo("cmd+m", () => {
+    setSidebarOpen(true)
+    setIsCreatingFile(true)
+  })
+
   if (isStreaming) {
     return <div className="font-mono whitespace-pre-wrap text-xs">{code}</div>
   }
-  const [sidebarOpen, setSidebarOpen] = useState(false)
   return (
     <div className="flex h-[98vh] w-full overflow-hidden">
       <FileSidebar
@@ -733,7 +814,11 @@ export const CodeEditor = ({
         }
         onFileSelect={(path) => handleFileChange(path)}
         handleCreateFile={handleCreateFile}
+        handleRenameFile={handleRenameFile}
         handleDeleteFile={handleDeleteFile}
+        isCreatingFile={isCreatingFile}
+        setIsCreatingFile={setIsCreatingFile}
+        pkg={pkg}
       />
       <div className="flex flex-col flex-1 w-full min-w-0 h-full">
         {showImportAndFormatButtons && (