@tscircuit/fake-snippets 0.0.98 → 0.0.100

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/fake-snippets-api/routes/api/packages/create.ts

@@ -13,7 +13,8 @@ export default withRouteSpec({
         /^[@a-zA-Z0-9-_\/]+$/,
         "Package name can only contain letters, numbers, hyphens, underscores, and forward slashes",
       )
-      .transform((name) => name.replace(/^@/, "")),
+      .transform((name) => name.replace(/^@/, ""))
+      .optional(),
     description: z.string().optional(),
     is_private: z.boolean().optional().default(false),
     is_unlisted: z.boolean().optional().default(false),
@@ -33,10 +34,20 @@ export default withRouteSpec({
     })
   }
 
-  const unscoped_name = name.split("/")[1]
+  let unscoped_name = name?.includes("/") ? name?.split("/")[1] : name
+  if (!unscoped_name) {
+    const state = ctx.db.getState()
+    const count = state.packages.filter(
+      (pkg) => pkg.creator_account_id === ctx.auth.account_id,
+    ).length
+
+    unscoped_name = `untitled-package-${count}`
+  }
 
   const newPackage = ctx.db.addPackage({
-    name,
+    name: name?.includes("/")
+      ? name
+      : `${ctx.auth.github_username}/${String(unscoped_name)}`,
     description: description ?? null,
     creator_account_id: ctx.auth.account_id,
     owner_org_id: ctx.auth.personal_org_id,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.98",
+  "version": "0.0.100",
   "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.725",
     "@tscircuit/schematic-viewer": "^2.0.21",
     "@types/babel__standalone": "^7.1.7",
     "@types/bun": "^1.1.10",
@@ -105,9 +105,10 @@
     "autoprefixer": "^10.4.20",
     "change-case": "^5.4.4",
     "circuit-json-to-bom-csv": "^0.0.7",
-    "circuit-json-to-gerber": "^0.0.25",
+    "circuit-json-to-gerber": "^0.0.29",
     "circuit-json-to-pnp-csv": "^0.0.7",
     "circuit-json-to-readable-netlist": "^0.0.13",
+    "circuit-json-to-spice": "^0.0.6",
     "circuit-json-to-tscircuit": "^0.0.4",
     "circuit-to-svg": "^0.0.167",
     "class-variance-authority": "^0.7.1",
@@ -138,6 +139,7 @@
     "ky": "^1.7.5",
     "lucide-react": "^0.488.0",
     "lz-string": "^1.5.0",
+    "marked": "^16.1.1",
     "md5": "^2.3.0",
     "ms": "^2.1.3",
     "next-themes": "^0.3.0",
@@ -150,6 +152,7 @@
     "react-cookie-consent": "^9.0.0",
     "react-day-picker": "8.10.1",
     "react-dom": "^18.3.1",
+    "react-error-boundary": "^6.0.0",
     "react-helmet": "^6.1.0",
     "react-helmet-async": "^2.0.5",
     "react-hook-form": "^7.53.0",

package/src/App.tsx

@@ -3,6 +3,8 @@ import { Route, Switch } from "wouter"
 import "./components/CmdKMenu"
 import { ContextProviders } from "./ContextProviders"
 import React from "react"
+import { ReloadIcon } from "@radix-ui/react-icons"
+import { Loader2 } from "lucide-react"
 
 const FullPageLoader = () => (
   <div className="fixed inset-0 flex items-center justify-center bg-white z-50">
@@ -163,10 +165,64 @@ class ErrorBoundary extends React.Component<
 
   render() {
     if (this.state.reloading) {
-      return <div>There was a problem loading this page. Reloading…</div>
+      return (
+        <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 px-4">
+          <div className="max-w-md w-full text-center">
+            <div className="mb-6">
+              <div className="inline-flex items-center justify-center w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full mb-4">
+                <Loader2 className="w-8 h-8 text-blue-600 dark:text-blue-400 animate-spin" />
+              </div>
+              <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
+                Reloading Page
+              </h2>
+              <p className="text-gray-600 dark:text-gray-400">
+                We encountered an issue and are refreshing the page for you.
+              </p>
+            </div>
+          </div>
+        </div>
+      )
     }
     if (this.state.hasError) {
-      return <div>Something went wrong loading the page.</div>
+      return (
+        <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 px-4">
+          <div className="max-w-lg w-full text-center">
+            <div className="mb-8">
+              <div className="inline-flex items-center justify-center w-20 h-20 bg-red-100 dark:bg-red-900 rounded-full mb-6">
+                <svg
+                  className="w-10 h-10 text-red-600 dark:text-red-400"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
+                  />
+                </svg>
+              </div>
+              <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-3">
+                Oops! Something went wrong
+              </h1>
+              <p className="text-gray-600 dark:text-gray-400 mb-6">
+                We're experiencing technical difficulties. The page will
+                automatically reload when you return to this tab.
+              </p>
+            </div>
+            <div className="space-y-3">
+              <button
+                onClick={this.performReload}
+                className="w-full sm:w-auto inline-flex items-center justify-center px-6 py-2 border border-transparent text-base font-medium rounded-lg text-white bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-200"
+              >
+                <ReloadIcon className="w-4 h-4 mr-2" />
+                Reload Now
+              </button>
+            </div>
+          </div>
+        </div>
+      )
     }
     return this.props.children
   }

package/src/components/CircuitJsonImportDialog.tsx

@@ -15,7 +15,6 @@ import { useLocation } from "wouter"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { convertCircuitJsonToTscircuit } from "circuit-json-to-tscircuit"
 import { useCreatePackageMutation } from "@/hooks/use-create-package-mutation"
-import { generateRandomPackageName } from "@/lib/utils/package-utils"
 import { useCreatePackageReleaseMutation } from "@/hooks/use-create-package-release-mutation"
 import { useCreatePackageFilesMutation } from "@/hooks/use-create-package-files-mutation"
 
@@ -67,10 +66,17 @@ export function CircuitJsonImportDialog({
 
   const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const selectedFile = e.target.files?.[0]
-    if (selectedFile && selectedFile.type === "application/json") {
-      setFile(selectedFile)
+    if (selectedFile) {
+      try {
+        const fileText = await selectedFile.text()
+        JSON.parse(fileText)
+        setFile(selectedFile)
+        setError(null)
+      } catch (e) {
+        setError("Please select a valid JSON file that can be parsed.")
+      }
     } else {
-      setError("Please select a valid JSON file.")
+      setError("Please select a file.")
     }
   }
 
@@ -124,7 +130,6 @@ export function CircuitJsonImportDialog({
 
       await createPackageMutation.mutateAsync(
         {
-          name: `${loggedInUser?.github_username}/${generateRandomPackageName()}`,
           description: "Imported from Circuit JSON",
         },
         {

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>
         )
       })}