@tscircuit/fake-snippets 0.0.108 → 0.0.110

package/src/components/DownloadButtonAndMenu.tsx

@@ -18,18 +18,22 @@ import { usePcbDownloadDialog } from "@/components/dialogs/pcb-download-dialog"
 import { downloadKicadFiles } from "@/lib/download-fns/download-kicad-files"
 import { AnyCircuitElement } from "circuit-json"
 import { ChevronDown, Download, Hammer } from "lucide-react"
-import { downloadGltf } from "@/lib/download-fns/download-gltf"
+import { downloadGltfFromCircuitJson } from "@/lib/download-fns/download-gltf-from-circuit-json"
 import { downloadPngImage } from "@/lib/download-fns/download-png-utils"
 import { ImageFormat } from "@/lib/download-fns/download-circuit-png"
 import { CubeIcon } from "@radix-ui/react-icons"
+import { useState } from "react"
+import { useAxios } from "@/hooks/use-axios"
+import { useCurrentPackageId } from "@/hooks/use-current-package-id"
 
 interface DownloadButtonAndMenuProps {
   className?: string
   unscopedName?: string
   author?: string
-  circuitJson?: AnyCircuitElement[] | null
+  hasCircuitJson?: boolean
   desiredImageType?: string
   offerMultipleImageFormats?: boolean
+  circuitJson?: AnyCircuitElement[] | null
 }
 
 export function DownloadButtonAndMenu({
@@ -37,14 +41,51 @@ export function DownloadButtonAndMenu({
   unscopedName,
   author,
   desiredImageType = "pcb",
-  circuitJson,
+  hasCircuitJson,
   offerMultipleImageFormats = false,
+  circuitJson,
 }: DownloadButtonAndMenuProps) {
   const notImplemented = useNotImplementedToast()
   const { Dialog: PcbDownloadDialog, openDialog: openPcbDownloadDialog } =
     usePcbDownloadDialog()
+  const axios = useAxios()
+  const { packageId } = useCurrentPackageId()
+  const [fetchedCircuitJson, setFetchedCircuitJson] = useState<
+    AnyCircuitElement[] | null
+  >(null)
+  const [isFetchingCircuitJson, setIsFetchingCircuitJson] = useState(false)
+
+  const canDownload = Boolean(
+    hasCircuitJson || (circuitJson && circuitJson.length),
+  )
+
+  const getCircuitJson = async (): Promise<AnyCircuitElement[]> => {
+    if (circuitJson && circuitJson.length) return circuitJson
+    if (fetchedCircuitJson && fetchedCircuitJson.length)
+      return fetchedCircuitJson
+    setIsFetchingCircuitJson(true)
+    try {
+      const { data } = await axios.get("/package_files/get", {
+        params: { package_id: packageId, file_path: "dist/circuit.json" },
+      })
+      const content = data?.package_file?.content_text
+      if (!content) throw new Error("Circuit JSON not found")
+      const parsed = JSON.parse(content)
+      setFetchedCircuitJson(parsed)
+      return parsed
+    } catch (error: any) {
+      toast({
+        title: "Failed to fetch Circuit JSON",
+        description: error?.message || error?.toString?.() || "Unknown error",
+        variant: "destructive",
+      })
+      throw error
+    } finally {
+      setIsFetchingCircuitJson(false)
+    }
+  }
 
-  if (!circuitJson) {
+  if (!canDownload) {
     return (
       <div className={className}>
         <Button
@@ -66,7 +107,7 @@ export function DownloadButtonAndMenu({
         <DropdownMenuTrigger asChild>
           <Button
             size="sm"
-            className="bg-white shadow-none text-gray-900 hover:bg-gray-100 border border-gray-300 px-1 pl-2"
+            className="bg-white shadow-none text-gray-900 hover:bg-gray-100 border border-gray-300 px-1 pl-2 select-none"
           >
             <Download className="w-4 h-4 mr-2" />
             Download
@@ -76,11 +117,9 @@ export function DownloadButtonAndMenu({
         <DropdownMenuContent className="!z-[101]">
           <DropdownMenuItem
             className="text-xs"
-            onSelect={() => {
-              downloadCircuitJson(
-                circuitJson,
-                unscopedName || "circuit" + ".json",
-              )
+            onSelect={async () => {
+              const cj = await getCircuitJson()
+              downloadCircuitJson(cj, unscopedName || "circuit" + ".json")
             }}
           >
             <Download className="mr-1 h-3 w-3" />
@@ -93,7 +132,12 @@ export function DownloadButtonAndMenu({
             className="text-xs"
             onClick={async () => {
               try {
-                await downloadGltf(unscopedName || "circuit")
+                const cj = await getCircuitJson()
+                await downloadGltfFromCircuitJson(
+                  cj,
+                  unscopedName || "circuit",
+                  { format: "glb", boardTextureResolution: 2048 },
+                )
               } catch (error: any) {
                 toast({
                   title: "Error Downloading 3D Model",
@@ -112,8 +156,34 @@ export function DownloadButtonAndMenu({
           <DropdownMenuItem
             className="text-xs"
             onClick={async () => {
+              try {
+                const cj = await getCircuitJson()
+                await downloadGltfFromCircuitJson(
+                  cj,
+                  unscopedName || "circuit",
+                  { format: "gltf", boardTextureResolution: 2048 },
+                )
+              } catch (error: any) {
+                toast({
+                  title: "Error Downloading 3D Model (GLTF)",
+                  description: error.toString(),
+                  variant: "destructive",
+                })
+              }
+            }}
+          >
+            <CubeIcon className="mr-1 h-3 w-3" />
+            <span className="flex-grow  mr-6">3D Model</span>
+            <span className="text-[0.6rem] bg-green-500 opacity-80 text-white font-mono rounded-md px-1 text-center py-0.5 mr-1">
+              gltf
+            </span>
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            className="text-xs"
+            onClick={async () => {
+              const cj = await getCircuitJson()
               await downloadFabricationFiles({
-                circuitJson,
+                circuitJson: cj,
                 snippetUnscopedName: unscopedName || "snippet",
               }).catch((error) => {
                 console.error(error)
@@ -144,8 +214,9 @@ export function DownloadButtonAndMenu({
           </DropdownMenuItem>
           <DropdownMenuItem
             className="text-xs"
-            onSelect={() => {
-              downloadKicadFiles(circuitJson, unscopedName || "kicad_project")
+            onSelect={async () => {
+              const cj = await getCircuitJson()
+              downloadKicadFiles(cj, unscopedName || "kicad_project")
             }}
           >
             <Download className="mr-1 h-3 w-3" />
@@ -157,8 +228,9 @@ export function DownloadButtonAndMenu({
 
           <DropdownMenuItem
             className="text-xs"
-            onSelect={() => {
-              downloadSchematicSvg(circuitJson, unscopedName || "circuit")
+            onSelect={async () => {
+              const cj = await getCircuitJson()
+              downloadSchematicSvg(cj, unscopedName || "circuit")
             }}
           >
             <Download className="mr-1 h-3 w-3" />
@@ -169,8 +241,9 @@ export function DownloadButtonAndMenu({
           </DropdownMenuItem>
           <DropdownMenuItem
             className="text-xs"
-            onSelect={() => {
-              downloadAssemblySvg(circuitJson, unscopedName || "circuit")
+            onSelect={async () => {
+              const cj = await getCircuitJson()
+              downloadAssemblySvg(cj, unscopedName || "circuit")
             }}
           >
             <Download className="mr-1 h-3 w-3" />
@@ -181,7 +254,9 @@ export function DownloadButtonAndMenu({
           </DropdownMenuItem>
           <DropdownMenuItem
             className="text-xs"
-            onSelect={() => {
+            onSelect={async () => {
+              const cj = await getCircuitJson()
+              setFetchedCircuitJson(cj)
               openPcbDownloadDialog()
             }}
           >
@@ -193,8 +268,9 @@ export function DownloadButtonAndMenu({
           </DropdownMenuItem>
           <DropdownMenuItem
             className="text-xs"
-            onSelect={() => {
-              downloadDsnFile(circuitJson, unscopedName || "circuit")
+            onSelect={async () => {
+              const cj = await getCircuitJson()
+              downloadDsnFile(cj, unscopedName || "circuit")
             }}
           >
             <Download className="mr-1 h-3 w-3" />
@@ -205,8 +281,9 @@ export function DownloadButtonAndMenu({
           </DropdownMenuItem>
           <DropdownMenuItem
             className="text-xs"
-            onClick={() => {
-              downloadReadableNetlist(circuitJson, unscopedName || "circuit")
+            onClick={async () => {
+              const cj = await getCircuitJson()
+              downloadReadableNetlist(cj, unscopedName || "circuit")
             }}
           >
             <Download className="mr-1 h-3 w-3" />
@@ -217,8 +294,9 @@ export function DownloadButtonAndMenu({
           </DropdownMenuItem>
           <DropdownMenuItem
             className="text-xs"
-            onSelect={() => {
-              downloadSpiceFile(circuitJson, unscopedName || "circuit")
+            onSelect={async () => {
+              const cj = await getCircuitJson()
+              downloadSpiceFile(cj, unscopedName || "circuit")
             }}
           >
             <Download className="mr-1 h-3 w-3" />
@@ -229,8 +307,9 @@ export function DownloadButtonAndMenu({
           </DropdownMenuItem>
           <DropdownMenuItem
             className="text-xs"
-            onSelect={() => {
-              downloadSimpleRouteJson(circuitJson, unscopedName || "circuit")
+            onSelect={async () => {
+              const cj = await getCircuitJson()
+              downloadSimpleRouteJson(cj, unscopedName || "circuit")
             }}
           >
             <Download className="mr-1 h-3 w-3" />
@@ -243,7 +322,7 @@ export function DownloadButtonAndMenu({
           {!offerMultipleImageFormats && (
             <DropdownMenuItem
               className="text-xs"
-              onClick={() => {
+              onClick={async () => {
                 const desiredImageFormat = [
                   "pcb",
                   "schematic",
@@ -252,8 +331,9 @@ export function DownloadButtonAndMenu({
                 ].includes(desiredImageType)
                   ? desiredImageType
                   : "pcb"
+                const cj = await getCircuitJson()
                 downloadPngImage({
-                  circuitJson,
+                  circuitJson: cj,
                   unscopedName,
                   author,
                   format: desiredImageFormat as ImageFormat,
@@ -271,9 +351,9 @@ export function DownloadButtonAndMenu({
             <>
               <DropdownMenuItem
                 className="text-xs"
-                onClick={() =>
+                onClick={async () =>
                   downloadPngImage({
-                    circuitJson,
+                    circuitJson: await getCircuitJson(),
                     unscopedName,
                     author,
                     format: "schematic",
@@ -288,9 +368,9 @@ export function DownloadButtonAndMenu({
               </DropdownMenuItem>
               <DropdownMenuItem
                 className="text-xs"
-                onClick={() =>
+                onClick={async () =>
                   downloadPngImage({
-                    circuitJson,
+                    circuitJson: await getCircuitJson(),
                     unscopedName,
                     author,
                     format: "pcb",
@@ -305,9 +385,9 @@ export function DownloadButtonAndMenu({
               </DropdownMenuItem>
               <DropdownMenuItem
                 className="text-xs"
-                onClick={() =>
+                onClick={async () =>
                   downloadPngImage({
-                    circuitJson,
+                    circuitJson: await getCircuitJson(),
                     unscopedName,
                     author,
                     format: "assembly",
@@ -320,12 +400,29 @@ export function DownloadButtonAndMenu({
                   png
                 </span>
               </DropdownMenuItem>
+              <DropdownMenuItem
+                className="text-xs"
+                onClick={async () =>
+                  downloadPngImage({
+                    circuitJson: await getCircuitJson(),
+                    unscopedName,
+                    author,
+                    format: "3d",
+                  })
+                }
+              >
+                <Download className="mr-1 h-3 w-3" />
+                <span className="flex-grow mr-6">3D PNG</span>
+                <span className="text-[0.6rem] opacity-80 bg-teal-600 text-white font-mono rounded-md px-1 text-center py-0.5 mr-1">
+                  png
+                </span>
+              </DropdownMenuItem>
             </>
           )}
         </DropdownMenuContent>
       </DropdownMenu>
       <PcbDownloadDialog
-        circuitJson={circuitJson}
+        circuitJson={fetchedCircuitJson || circuitJson || []}
         fileName={unscopedName || "circuit"}
       />
     </div>

package/src/components/FileSidebar.tsx

@@ -1,25 +1,9 @@
-import React, { useState } from "react"
+import React, { useMemo, useState } from "react"
 import { cn } from "@/lib/utils"
-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 { PanelRightOpen, Plus, Loader2 } from "lucide-react"
+import { TreeView } from "@/components/ui/tree-view"
 import { Input } from "@/components/ui/input"
 import { transformFilesToTreeData } from "@/lib/utils/transformFilesToTreeData"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "./ui/dropdown-menu"
 import type {
   ICreateFileProps,
   ICreateFileResult,
@@ -28,8 +12,6 @@ import type {
   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
 
@@ -45,6 +27,8 @@ interface FileSidebarProps {
   isCreatingFile: boolean
   setIsCreatingFile: React.Dispatch<React.SetStateAction<boolean>>
   pkg?: Package
+  isLoadingFiles?: boolean
+  loadingProgress?: string | null
 }
 
 const FileSidebar: React.FC<FileSidebarProps> = ({
@@ -58,6 +42,9 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
   handleRenameFile,
   isCreatingFile,
   setIsCreatingFile,
+  pkg,
+  isLoadingFiles = true,
+  loadingProgress = null,
 }) => {
   const [sidebarOpen, setSidebarOpen] = fileSidebarState
   const [newFileName, setNewFileName] = useState("")
@@ -66,11 +53,8 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
   const [selectedFolderForCreation, setSelectedFolderForCreation] = useState<
     string | null
   >(null)
-  const [selectedItemId, setSelectedItemId] = React.useState<string>(
-    currentFile || "",
-  )
-  const { toast } = useToast()
-  const canModifyFiles = true
+  const selectedItemId = useMemo(() => currentFile || "", [currentFile])
+  const canModifyFiles = Boolean(pkg) && !isLoadingFiles
 
   const onFolderSelect = (folderPath: string) => {
     setSelectedFolderForCreation(folderPath)
@@ -152,7 +136,6 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
       setNewFileName("")
       setErrorMessage("")
       onFileSelect(finalFileName)
-      setSelectedItemId(finalFileName)
       setSelectedFolderForCreation(null)
     }
   }
@@ -184,19 +167,31 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
         className,
       )}
     >
-      <button
-        onClick={toggleSidebar}
-        className={`z-[99] mt-2 ml-2 text-gray-400 scale-90 transition-opacity duration-200 ${!sidebarOpen ? "opacity-0 pointer-events-none" : "opacity-100"}`}
-      >
-        <PanelRightOpen />
-      </button>
-      <button
-        onClick={() => setIsCreatingFile(true)}
-        className="absolute top-2 right-2 text-gray-400 hover:text-gray-600"
-        aria-label="Create new file"
-      >
-        <Plus className="w-5 h-5" />
-      </button>
+      <div className="flex items-center justify-between px-2 py-2">
+        <button
+          onClick={toggleSidebar}
+          className={`text-gray-400 scale-90 transition-opacity duration-200 ${!sidebarOpen ? "opacity-0 pointer-events-none" : "opacity-100"}`}
+        >
+          <PanelRightOpen />
+        </button>
+        <div className="flex items-center gap-2">
+          {isLoadingFiles && (
+            <div className="flex items-center gap-1">
+              <Loader2 className="w-3 h-3 animate-spin text-gray-400" />
+              {loadingProgress && (
+                <span className="text-xs text-gray-400">{loadingProgress}</span>
+              )}
+            </div>
+          )}
+          <button
+            onClick={() => setIsCreatingFile(true)}
+            className="text-gray-400 hover:text-gray-600"
+            aria-label="Create new file"
+          >
+            <Plus className="w-5 h-5" />
+          </button>
+        </div>
+      </div>
       {isCreatingFile && (
         <div className="p-2">
           <Input
@@ -253,18 +248,14 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
           </div>
         </div>
       )}
-      <div
-        onClick={(e) => {
-          if (e.target === e.currentTarget) {
-            setSelectedFolderForCreation(null)
-            setSelectedItemId("")
-          }
-        }}
-        className="flex-1 border-2 h-full"
-      >
+      <div className="flex-1 border-t h-full">
         <TreeView
           data={treeData}
-          setSelectedItemId={(value) => setSelectedItemId(value || "")}
+          setSelectedItemId={(value) => {
+            if (value && files[value]) {
+              onFileSelect(value)
+            }
+          }}
           selectedItemId={selectedItemId}
           onSelectChange={(item) => {
             if (item?.onClick) {

package/src/components/Footer.tsx

@@ -1,7 +1,6 @@
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { CircuitBoard } from "lucide-react"
 import { Link } from "wouter"
-import { PrefetchPageLink } from "./PrefetchPageLink"
 
 export default function Footer() {
   const session = useGlobalStore((s) => s.session)
@@ -31,17 +30,16 @@ export default function Footer() {
                   href: `/${session?.github_username}`,
                   hidden: !isLoggedIn,
                 },
-                { name: "Settings", href: "/settings" },
               ]
                 .filter((item) => !item.hidden)
                 .map((item) => (
-                  <PrefetchPageLink
+                  <Link
                     key={item.name}
                     href={item.href}
                     className="hover:underline"
                   >
                     {item.name}
-                  </PrefetchPageLink>
+                  </Link>
                 ))}
               <a
                 href="https://chat.tscircuit.com"
@@ -56,15 +54,15 @@ export default function Footer() {
           <div className="space-y-4">
             <h3 className="font-semibold uppercase">Explore</h3>
             <footer className="flex flex-col space-y-2">
-              <PrefetchPageLink href="/latest" className="hover:underline">
+              <Link href="/latest" className="hover:underline">
                 Latest Packages
-              </PrefetchPageLink>
-              <PrefetchPageLink href="/trending" className="hover:underline">
+              </Link>
+              <Link href="/trending" className="hover:underline">
                 Trending Packages
-              </PrefetchPageLink>
-              <PrefetchPageLink href="/search" className="hover:underline">
+              </Link>
+              <Link href="/search" className="hover:underline">
                 Search Packages
-              </PrefetchPageLink>
+              </Link>
               <a href="https://docs.tscircuit.com" className="hover:underline">
                 Docs
               </a>

package/src/components/Header.tsx

@@ -6,7 +6,7 @@ import { GitHubLogoIcon, DiscordLogoIcon } from "@radix-ui/react-icons"
 import { Menu, X } from "lucide-react"
 import React, { useEffect, useState } from "react"
 import { useLocation } from "wouter"
-import { PrefetchPageLink } from "./PrefetchPageLink"
+import { Link } from "wouter"
 import CmdKMenu from "./CmdKMenu"
 import HeaderDropdown from "./HeaderDropdown"
 import SearchComponent from "./SearchComponent"
@@ -27,23 +27,23 @@ const HeaderButton = ({
 
   if (location === href || location === alsoHighlightForUrl) {
     return (
-      <PrefetchPageLink className={cn("header-button", className)} href={href}>
+      <Link className={cn("header-button", className)} href={href}>
         <Button
           variant="ghost"
           className={`border-b-2 rounded-none border-blue-600 header-button ${className}`}
         >
           {children}
         </Button>
-      </PrefetchPageLink>
+      </Link>
     )
   }
 
   return (
-    <PrefetchPageLink className={cn("header-button", className)} href={href}>
+    <Link className={cn("header-button", className)} href={href}>
       <Button className={className} variant="ghost">
         {children}
       </Button>
-    </PrefetchPageLink>
+    </Link>
   )
 }
 
@@ -59,14 +59,14 @@ export default function Header() {
   return (
     <header className="px-4 py-3">
       <div className="flex items-center">
-        <PrefetchPageLink
+        <Link
           href="/"
-          className="text-lg font-semibold whitespace-nowrap"
+          className="text-lg font-semibold whitespace-nowrap select-none"
         >
           <span className="bg-blue-500 px-2 py-1 rounded-md text-white">
             tscircuit
           </span>
-        </PrefetchPageLink>
+        </Link>
         <div className="hidden md:flex items-center space-x-4">
           <nav>
             <ul className="flex items-center gap-2 ml-2">
@@ -80,9 +80,6 @@ export default function Header() {
                   Editor
                 </HeaderButton>
               </li>
-              <li>
-                <HeaderButton href="/datasheets">Datasheets</HeaderButton>
-              </li>
               <li>
                 <a href="https://chat.tscircuit.com">
                   <Button variant="ghost">AI</Button>
@@ -93,28 +90,26 @@ export default function Header() {
                   <Button variant="ghost">Docs</Button>
                 </a>
               </li>
-              <li>
-                <a
-                  href="https://tscircuit.com/join"
-                  target="_blank"
-                  className="mr-2"
-                >
-                  <Button variant="ghost">
-                    <DiscordLogoIcon className="text-gray-400 hover:text-gray-600 transition-colors w-4 h-4" />
-                  </Button>
-                </a>
-              </li>
             </ul>
           </nav>
         </div>
         <div className="flex-grow"></div>
+        <a
+          href="https://tscircuit.com/join"
+          target="_blank"
+          className="lg:mr-2"
+        >
+          <Button variant="ghost">
+            <DiscordLogoIcon className="text-gray-400 hidden lg:block hover:text-gray-600 transition-colors w-4 h-4" />
+          </Button>
+        </a>
         <a
           href="https://github.com/tscircuit/tscircuit"
           target="_blank"
-          className="mr-4"
+          className="lg:mr-4"
           aria-label="View TSCircuit on GitHub"
         >
-          <GitHubLogoIcon className="text-gray-400 hover:text-gray-600 transition-colors" />
+          <GitHubLogoIcon className="hidden lg:block text-gray-400 hover:text-gray-600 transition-colors" />
         </a>
         {/* <a href="https://tscircuit.com/join" target="_blank" className="mr-2">
           <DiscordLogoIcon className="text-gray-400 hover:text-gray-600 transition-colors" />
@@ -155,14 +150,6 @@ export default function Header() {
                   Editor
                 </HeaderButton>
               </li>
-              <li>
-                <HeaderButton
-                  className="w-full justify-start"
-                  href="/datasheets"
-                >
-                  Datasheets
-                </HeaderButton>
-              </li>
               <li>
                 <HeaderButton
                   className="w-full justify-start"