@tscircuit/fake-snippets 0.0.98 → 0.0.100

package/src/components/dialogs/edit-package-details-dialog.tsx

@@ -186,6 +186,7 @@ export const EditPackageDetailsDialog = ({
         "packageFile",
         { package_release_id: packageReleaseId },
       ])
+      qc.invalidateQueries(["packageFiles", packageReleaseId])
       toast({
         title: "Package details updated",
         description: "Successfully updated package details",
@@ -376,7 +377,7 @@ export const EditPackageDetailsDialog = ({
                 className="mt-2 rounded-md"
                 onToggle={(e) => setDangerOpen(e.currentTarget.open)}
               >
-                <summary className="cursor-pointer p-2 font-medium text-sm text-black list-none flex justify-between items-center">
+                <summary className="select-none cursor-pointer p-2 font-medium text-sm text-black list-none flex justify-between items-center">
                   Danger Zone
                   <ChevronDown
                     className={`w-4 h-4 mr-1 transition-transform ${dangerOpen ? "rotate-180" : ""}`}
@@ -405,7 +406,7 @@ export const EditPackageDetailsDialog = ({
           </div>
 
           <DialogFooter className="mt-auto">
-            <div className="lg:px-2 flex flex-col sm:flex-row justify-end gap-2">
+            <div className="lg:px-2 select-none flex flex-col sm:flex-row justify-end gap-2">
               <Button
                 variant="outline"
                 onClick={() => onOpenChange(false)}

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,
@@ -169,7 +172,7 @@ export function CodeAndPreview({ pkg, projectUrl }: Props) {
 
   if (urlParams.package_id && (!pkg || isLoading)) {
     return (
-      <div className="flex items-center justify-center h-[60vh]">
+      <div className="flex items-center justify-center h-[80vh]">
         <div className="flex flex-col items-center justify-center">
           <div className="text-lg text-gray-500 mb-4">Loading</div>
           <Loader2 className="w-16 h-16 animate-spin text-gray-400" />
@@ -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

@@ -35,6 +35,7 @@ import CodeEditorHeader, {
 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"
@@ -43,6 +44,8 @@ import {
   ICreateFileResult,
   IDeleteFileProps,
   IDeleteFileResult,
+  IRenameFileProps,
+  IRenameFileResult,
 } from "@/hooks/useFileManagement"
 import { isHiddenFile } from "../ViewPackagePage/utils/is-hidden-file"
 import { inlineCopilot } from "codemirror-copilot"
@@ -65,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
@@ -108,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
@@ -195,7 +205,7 @@ export const CodeEditor = ({
       projectName: "my-project",
       typescript: tsModule,
       logger: console,
-      fetcher: async (input: RequestInfo | URL, init?: RequestInit) => {
+      fetcher: (async (input: RequestInfo | URL, init?: RequestInit) => {
         const registryPrefixes = [
           "https://data.jsdelivr.com/v1/package/resolve/npm/@tsci/",
           "https://data.jsdelivr.com/v1/package/npm/@tsci/",
@@ -221,7 +231,7 @@ export const CodeEditor = ({
           )
         }
         return fetch(input, init)
-      },
+      }) as typeof fetch,
       delegate: {
         started: () => {
           const manualEditsTypeDeclaration = `
@@ -786,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
@@ -800,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 && (

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

@@ -189,13 +189,10 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
         onError: (error) => {
           throw error
         },
-        openFile: false,
       })
       if (!createFileResult.newFileCreated) {
-        throw new Error("Failed to create file")
+        throw new Error("Failed to create component file")
       }
-      const newContent = `import ${componentName.replace(/-/g, "")} from "./${componentName}.tsx"\n${files[currentFile || ""]}`
-      updateFileContent(currentFile, newContent)
     }
   }
 
@@ -221,7 +218,15 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
                 sidebarOpen ? "-ml-2" : "-ml-1"
               }`}
             >
-              <SelectValue placeholder="Select file" />
+              <SelectValue
+                placeholder={
+                  Object.keys(files).filter(
+                    (filename) => !isHiddenFile(filename),
+                  ).length > 0
+                    ? "Select file"
+                    : "No files"
+                }
+              />
             </SelectTrigger>
             <SelectContent>
               {Object.keys(files)
@@ -307,12 +312,12 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
                   onClick={() => {
                     setAiAutocompleteEnabled((prev) => !prev)
                   }}
-                  className={`relative bg-transparent ${aiAutocompleteEnabled ? "text-gray-600 bg-gray-50" : "text-gray-400"}`}
+                  className={`relative group 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 className="w-5 h-0.5 group-hover:bg-slate-900 bg-gray-400 rotate-45 rounded-full" />
                     </div>
                   )}
                 </Button>

package/src/components/ui/tree-view.tsx

@@ -3,6 +3,7 @@ import * as AccordionPrimitive from "@radix-ui/react-accordion"
 import { ChevronRight } from "lucide-react"
 import { cva } from "class-variance-authority"
 import { cn } from "@/lib/utils"
+import { Input } from "@/components/ui/input"
 
 const treeVariants = cva(
   "group hover:before:opacity-100 before:absolute before:rounded-lg before:left-0 before:w-full before:opacity-0 before:bg-slate-100/70 before:h-[2rem] before:-z-10' dark:before:bg-slate-800/70",
@@ -18,7 +19,7 @@ const dragOverVariants = cva(
 
 interface TreeDataItem {
   id: string
-  name: string
+  name: React.ReactNode
   icon?: any
   selectedIcon?: any
   openIcon?: any
@@ -27,6 +28,9 @@ interface TreeDataItem {
   onClick?: () => void
   draggable?: boolean
   droppable?: boolean
+  isRenaming?: boolean
+  onRename?: (newName: string) => void
+  onCancelRename?: () => void
 }
 
 type TreeProps = React.HTMLAttributes<HTMLDivElement> & {
@@ -403,7 +407,52 @@ const TreeLeaf = React.forwardRef<
           isSelected={selectedItemId === item.id}
           default={defaultLeafIcon}
         />
-        <span className="flex-grow text-sm truncate">{item.name}</span>
+        {item.isRenaming ? (
+          <Input
+            style={{
+              zIndex: 50,
+            }}
+            defaultValue={item.name as string}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                e.preventDefault()
+                const value = e.currentTarget.value.trim()
+                if (value && value !== item.name) {
+                  item.onRename?.(value)
+                } else {
+                  item.onCancelRename?.()
+                }
+              } else if (e.key === "Escape") {
+                e.preventDefault()
+                item.onCancelRename?.()
+              }
+            }}
+            spellCheck={false}
+            autoComplete="off"
+            onBlur={(e) => {
+              const value = e.currentTarget.value.trim()
+              if (value && value !== item.name) {
+                item.onRename?.(value)
+              } else {
+                item.onCancelRename?.()
+              }
+            }}
+            autoFocus
+            onClick={(e) => e.stopPropagation()}
+            className="h-6 px-2 py-0 text-sm flex-1 mr-8 bg-white border border-blue-500 rounded-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 shadow-sm"
+            onFocus={(e) => {
+              e.currentTarget.select()
+              // Select filename without extension
+              const filename = e.currentTarget.value
+              const lastDotIndex = filename.lastIndexOf(".")
+              if (lastDotIndex > 0) {
+                e.currentTarget.setSelectionRange(0, lastDotIndex)
+              }
+            }}
+          />
+        ) : (
+          <span className="text-sm truncate">{item.name}</span>
+        )}
         <div className="flex items-center" onClick={(e) => e.stopPropagation()}>
           <TreeActions isSelected={true}>{item.actions}</TreeActions>
         </div>

package/src/hooks/use-create-package-mutation.ts

@@ -17,7 +17,7 @@ export const useCreatePackageMutation = ({
       is_private,
       is_unlisted,
     }: {
-      name: string
+      name?: string
       description?: string
       is_private?: boolean
       is_unlisted?: boolean

package/src/hooks/useFileManagement.ts

@@ -1,10 +1,7 @@
 import { useEffect, useMemo, useState, useCallback, useRef } from "react"
 import { isValidFileName } from "@/lib/utils/isValidFileName"
 import { PackageFile } from "@/types/package"
-import {
-  DEFAULT_CODE,
-  generateRandomPackageName,
-} from "@/lib/utils/package-utils"
+import { DEFAULT_CODE } from "@/lib/utils/package-utils"
 import { Package } from "fake-snippets-api/lib/db/schema"
 import { usePackageFiles } from "./use-package-files"
 import { decodeUrlHashToText } from "@/lib/decodeUrlHashToText"
@@ -17,6 +14,7 @@ import { useCreatePackageReleaseMutation } from "./use-create-package-release-mu
 import { useCreatePackageMutation } from "./use-create-package-mutation"
 import { findTargetFile } from "@/lib/utils/findTargetFile"
 import { encodeFsMapToUrlHash } from "@/lib/encodeFsMapToUrlHash"
+import { isHiddenFile } from "@/components/ViewPackagePage/utils/is-hidden-file"
 
 export interface ICreateFileProps {
   newFileName: string
@@ -36,6 +34,16 @@ export interface IDeleteFileProps {
   onError: (error: Error) => void
 }
 
+export interface IRenameFileProps {
+  oldFilename: string
+  newFilename: string
+  onError: (error: Error) => void
+}
+
+export interface IRenameFileResult {
+  fileRenamed: boolean
+}
+
 export function useFileManagement({
   templateCode,
   currentPackage,
@@ -234,12 +242,69 @@ export function useFileManagement({
     }
     const updatedFiles = localFiles.filter((file) => file.path !== filename)
     setLocalFiles(updatedFiles)
-    onFileSelect(updatedFiles[0]?.path || "")
+    onFileSelect(
+      updatedFiles.filter((file) => !isHiddenFile(file.path))[0]?.path || "",
+    )
     return {
       fileDeleted: true,
     }
   }
 
+  const renameFile = ({
+    oldFilename,
+    newFilename,
+    onError,
+  }: IRenameFileProps): IRenameFileResult => {
+    newFilename = newFilename.trim()
+    if (!newFilename) {
+      onError(new Error("File name cannot be empty"))
+      return {
+        fileRenamed: false,
+      }
+    }
+
+    // Extract just the filename from the path for validation
+    const fileNameOnly = newFilename.split("/").pop() || ""
+    if (!isValidFileName(fileNameOnly)) {
+      onError(new Error("Invalid file name"))
+      return {
+        fileRenamed: false,
+      }
+    }
+
+    const oldFileExists = localFiles?.some((file) => file.path === oldFilename)
+    if (!oldFileExists) {
+      onError(new Error("File does not exist"))
+      return {
+        fileRenamed: false,
+      }
+    }
+
+    const newFileExists = localFiles?.some((file) => file.path === newFilename)
+    if (newFileExists) {
+      onError(new Error("A file with this name already exists"))
+      return {
+        fileRenamed: false,
+      }
+    }
+
+    const updatedFiles = localFiles.map((file) => {
+      if (file.path === oldFilename) {
+        return { ...file, path: newFilename }
+      }
+      return file
+    })
+
+    setLocalFiles(updatedFiles)
+    if (currentFile === oldFilename) {
+      setCurrentFile(newFilename)
+    }
+
+    return {
+      fileRenamed: true,
+    }
+  }
+
   const savePackage = async (isPrivate: boolean) => {
     if (!isLoggedIn) {
       toast({
@@ -250,7 +315,6 @@ export function useFileManagement({
     }
 
     await createPackageMutation.mutateAsync({
-      name: `${loggedInUser?.github_username}/${generateRandomPackageName()}`,
       is_private: isPrivate,
     })
   }
@@ -354,6 +418,7 @@ export function useFileManagement({
     fsMap,
     createFile,
     deleteFile,
+    renameFile,
     saveFiles,
     localFiles,
     initialFiles,

package/src/lib/download-fns/download-spice-file.ts

@@ -0,0 +1,13 @@
+import { AnyCircuitElement } from "circuit-json"
+import { saveAs } from "file-saver"
+import { circuitJsonToSpice } from "circuit-json-to-spice"
+
+export const downloadSpiceFile = (
+  circuitJson: AnyCircuitElement[],
+  fileName: string,
+) => {
+  const spiceNetlist = circuitJsonToSpice(circuitJson)
+  const spiceString = spiceNetlist.toSpiceString()
+  const blob = new Blob([spiceString], { type: "text/plain" })
+  saveAs(blob, fileName + ".cir")
+}

package/src/lib/utils/package-utils.ts

@@ -5,6 +5,3 @@ export default () => (
   </board>
 )
 `.trim()
-
-export const generateRandomPackageName = () =>
-  `untitled-package-${Math.floor(Math.random() * 900) + 100}`

package/src/pages/dashboard.tsx

@@ -98,7 +98,7 @@ export const DashboardPage = () => {
         <title>Dashboard - tscircuit</title>
       </Helmet>
       <Header />
-      <div className="container mx-auto px-4 py-8">
+      <div className="container mx-auto px-4 py-8 min-h-[80vh]">
         <h1 className="text-3xl font-bold mb-6">Dashboard</h1>
         <div className="flex md:flex-row flex-col">
           <div className="md:w-3/4 p-0 md:pr-6">