@tscircuit/fake-snippets 0.0.109 → 0.0.111

package/src/components/DownloadButtonAndMenu.tsx

@@ -25,6 +25,7 @@ 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"
+import { downloadStepFile } from "@/lib/download-fns/download-step"
 
 interface DownloadButtonAndMenuProps {
   className?: string
@@ -65,9 +66,8 @@ export function DownloadButtonAndMenu({
       return fetchedCircuitJson
     setIsFetchingCircuitJson(true)
     try {
-      const { data } = await axios.post("/package_files/get", {
-        package_id: packageId,
-        file_path: "dist/circuit.json",
+      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")
@@ -108,7 +108,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
@@ -226,7 +226,19 @@ export function DownloadButtonAndMenu({
               kicad_*.zip
             </span>
           </DropdownMenuItem>
-
+          <DropdownMenuItem
+            className="text-xs"
+            onSelect={async () => {
+              const cj = await getCircuitJson()
+              downloadStepFile(cj, unscopedName || "step_file")
+            }}
+          >
+            <Download className="mr-1 h-3 w-3" />
+            <span className="flex-grow mr-6">Step Format</span>
+            <span className="text-[0.6rem] bg-emerald-500 opacity-80 text-white font-mono rounded-md px-1 text-center py-0.5 mr-1">
+              STEP
+            </span>
+          </DropdownMenuItem>
           <DropdownMenuItem
             className="text-xs"
             onSelect={async () => {

package/src/components/FileSidebar.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React, { useMemo, useState } from "react"
 import { cn } from "@/lib/utils"
 import { PanelRightOpen, Plus, Loader2 } from "lucide-react"
 import { TreeView } from "@/components/ui/tree-view"
@@ -42,6 +42,7 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
   handleRenameFile,
   isCreatingFile,
   setIsCreatingFile,
+  pkg,
   isLoadingFiles = true,
   loadingProgress = null,
 }) => {
@@ -52,10 +53,8 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
   const [selectedFolderForCreation, setSelectedFolderForCreation] = useState<
     string | null
   >(null)
-  const [selectedItemId, setSelectedItemId] = React.useState<string>(
-    currentFile || "",
-  )
-  const canModifyFiles = true
+  const selectedItemId = useMemo(() => currentFile || "", [currentFile])
+  const canModifyFiles = Boolean(pkg) && !isLoadingFiles
 
   const onFolderSelect = (folderPath: string) => {
     setSelectedFolderForCreation(folderPath)
@@ -137,7 +136,6 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
       setNewFileName("")
       setErrorMessage("")
       onFileSelect(finalFileName)
-      setSelectedItemId(finalFileName)
       setSelectedFolderForCreation(null)
     }
   }
@@ -169,7 +167,7 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
         className,
       )}
     >
-      <div className="flex items-center justify-between px-2 pt-2">
+      <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"}`}
@@ -250,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)
@@ -34,13 +33,13 @@ export default function Footer() {
               ]
                 .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"
@@ -55,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"

package/src/components/Header2.tsx

@@ -1,7 +1,6 @@
 import { Button } from "@/components/ui/button"
-import { CircuitBoard, Search, Menu, X } from "lucide-react"
+import { Search, Menu, X } from "lucide-react"
 import { Link } from "wouter"
-import { PrefetchPageLink } from "./PrefetchPageLink"
 import { HeaderLogin } from "./HeaderLogin"
 import SearchComponent from "./SearchComponent"
 import HeaderDropdown from "./HeaderDropdown"
@@ -60,36 +59,28 @@ export const Header2 = () => {
     <>
       <header className="sticky top-0 z-50 w-full border-b bg-white md:bg-white/80 md:backdrop-blur supports-[backdrop-filter]:md:bg-white/60">
         <div className="container mx-auto flex h-16 items-center justify-between px-2 md:px-6">
-          <PrefetchPageLink
-            href="/"
-            className="flex select-none items-center gap-2"
-          >
-            <CircuitBoard className="h-6 w-6" />
-            <span className="text-lg font-bold">tscircuit</span>
-          </PrefetchPageLink>
+          <Link href="/" className="flex select-none items-center">
+            <span className="bg-blue-500 px-2 py-1 rounded-md text-white text-sm font-semibold sm:text-base">
+              tscircuit
+            </span>
+          </Link>
 
           {/* Desktop Navigation */}
           <nav className="hidden md:flex gap-6">
             {isLoggedIn && (
-              <PrefetchPageLink
+              <Link
                 className="text-sm font-medium hover:underline underline-offset-4"
                 href="/dashboard"
               >
                 Dashboard
-              </PrefetchPageLink>
+              </Link>
             )}
-            <PrefetchPageLink
+            <Link
               className="text-sm font-medium hover:underline underline-offset-4"
               href="/quickstart"
             >
               Editor
-            </PrefetchPageLink>
-            <PrefetchPageLink
-              className="text-sm font-medium hover:underline underline-offset-4"
-              href="/datasheets"
-            >
-              Datasheets
-            </PrefetchPageLink>
+            </Link>
             <a
               className="text-sm font-medium hover:underline underline-offset-4"
               href="https://docs.tscircuit.com"
@@ -131,11 +122,11 @@ export const Header2 = () => {
             {isLoggedIn ? (
               <HeaderLogin />
             ) : (
-              <PrefetchPageLink href="/quickstart">
+              <Link href="/quickstart">
                 <Button size="sm" className="text-xs px-3 py-1">
                   Get Started
                 </Button>
-              </PrefetchPageLink>
+              </Link>
             )}
             <button
               className="p-2"
@@ -154,28 +145,21 @@ export const Header2 = () => {
               <nav className="mb-4">
                 <div className="flex flex-col items-center gap-1">
                   {isLoggedIn && (
-                    <PrefetchPageLink
+                    <Link
                       className="text-sm font-medium hover:underline underline-offset-4 py-2 w-full text-center"
                       href="/dashboard"
                       onClick={() => setMobileMenuOpen(false)}
                     >
                       Dashboard
-                    </PrefetchPageLink>
+                    </Link>
                   )}
-                  <PrefetchPageLink
+                  <Link
                     className="text-sm font-medium hover:underline underline-offset-4 py-2 w-full text-center"
                     href="/quickstart"
                     onClick={() => setMobileMenuOpen(false)}
                   >
                     Editor
-                  </PrefetchPageLink>
-                  <PrefetchPageLink
-                    className="text-sm font-medium hover:underline underline-offset-4 py-2 w-full text-center"
-                    href="/datasheets"
-                    onClick={() => setMobileMenuOpen(false)}
-                  >
-                    Datasheets
-                  </PrefetchPageLink>
+                  </Link>
                   <a
                     className="text-sm font-medium hover:underline underline-offset-4 py-2 w-full text-center"
                     href="https://docs.tscircuit.com"

package/src/components/HeaderDropdown.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react"
 import { Button } from "@/components/ui/button"
 import {
   DropdownMenu,
@@ -7,9 +8,10 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { cn } from "@/lib/utils"
 import { ChevronDown, FileUp, Upload, Zap } from "lucide-react"
-import { PrefetchPageLink } from "./PrefetchPageLink"
+import { Link } from "wouter"
 
 export default function HeaderDropdown() {
+  const [open, setOpen] = useState(false)
   const blankTemplates = [
     { name: "Blank Circuit Board", type: "board", badgeColor: "bg-blue-500" },
     {
@@ -32,7 +34,7 @@ export default function HeaderDropdown() {
   ]
 
   return (
-    <DropdownMenu>
+    <DropdownMenu open={open} onOpenChange={setOpen}>
       <DropdownMenuTrigger asChild>
         <Button
           size="sm"
@@ -44,38 +46,41 @@ export default function HeaderDropdown() {
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-fit">
         <DropdownMenuItem asChild>
-          <PrefetchPageLink
+          <Link
             href="/quickstart"
             className="flex items-center cursor-pointer"
+            onClick={() => setOpen(false)}
           >
             <Zap className="mr-2 h-3 w-3" />
             Quickstart Templates
-          </PrefetchPageLink>
+          </Link>
         </DropdownMenuItem>
         {blankTemplates.map((template, index) => (
           <DropdownMenuItem key={index} asChild disabled={template.disabled}>
-            <a
+            <Link
               href={`/editor?template=${template.name.toLowerCase().replace(/ /g, "-")}`}
               className={cn(
                 "flex items-center cursor-pointer",
                 template.disabled && "opacity-50 cursor-not-allowed",
               )}
+              onClick={() => !template.disabled && setOpen(false)}
             >
               <span
                 className={`w-2 h-2 rounded-full mr-2 ${template.badgeColor}`}
               />
               {template.name}
-            </a>
+            </Link>
           </DropdownMenuItem>
         ))}
         <DropdownMenuItem asChild>
-          <PrefetchPageLink
+          <Link
             href="/quickstart"
             className="flex items-center cursor-pointer"
+            onClick={() => setOpen(false)}
           >
             <Upload className="mr-2 h-3 w-3" />
             Import Part
-          </PrefetchPageLink>
+          </Link>
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>

package/src/components/HeaderLogin.tsx

@@ -1,4 +1,3 @@
-import React from "react"
 import { Button } from "@/components/ui/button"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import {
@@ -9,15 +8,16 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { User } from "lucide-react"
 import { useGlobalStore } from "@/hooks/use-global-store"
-import { useAccountBalance } from "@/hooks/use-account-balance"
 import { useSignIn } from "@/hooks/use-sign-in"
+import { Link } from "wouter"
+import { useState } from "react"
 
 export const HeaderLogin = () => {
   const session = useGlobalStore((s) => s.session)
   const isLoggedIn = Boolean(session)
   const setSession = useGlobalStore((s) => s.setSession)
   const signIn = useSignIn()
-  const { data: accountBalance } = useAccountBalance()
+  const [isOpen, setIsOpen] = useState(false)
 
   if (!isLoggedIn) {
     return (
@@ -31,7 +31,7 @@ export const HeaderLogin = () => {
   }
 
   return (
-    <DropdownMenu>
+    <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
       <DropdownMenuTrigger asChild>
         <Avatar className="w-8 h-8 login-avatar">
           <AvatarImage
@@ -44,32 +44,60 @@ export const HeaderLogin = () => {
         </Avatar>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="ml-1 mr-1 md:ml-0 md:mr-1">
-        <DropdownMenuItem asChild className="text-gray-500 text-xs" disabled>
+        {/* <DropdownMenuItem asChild className="text-gray-500 text-xs" disabled>
           <div>
             AI Usage $
             {accountBalance?.monthly_ai_budget_used_usd.toFixed(2) ?? "0.00"} /
             $5.00
           </div>
-        </DropdownMenuItem>
+        </DropdownMenuItem> */}
         <DropdownMenuItem asChild>
-          <a href={`/${session?.github_username}`} className="cursor-pointer">
+          <Link
+            href={`/${session?.github_username}`}
+            className="cursor-pointer"
+            onClick={() => setIsOpen(false)}
+          >
             My Profile
-          </a>
+          </Link>
         </DropdownMenuItem>
         <DropdownMenuItem asChild>
-          <a href="/dashboard" className="cursor-pointer">
+          <Link
+            href="/dashboard"
+            className="cursor-pointer"
+            onClick={() => setIsOpen(false)}
+          >
             Dashboard
-          </a>
+          </Link>
         </DropdownMenuItem>
         <DropdownMenuItem asChild>
-          <a href="/settings" className="cursor-pointer">
+          <Link
+            href={`/${session?.github_username}/settings`}
+            className="cursor-pointer"
+            onClick={() => setIsOpen(false)}
+          >
             Settings
-          </a>
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuItem asChild>
+          <Link
+            href="/orgs/new"
+            className="cursor-pointer"
+            onClick={() => setIsOpen(false)}
+          >
+            Create Organization
+          </Link>
         </DropdownMenuItem>
-        <DropdownMenuItem asChild onClick={() => setSession(null)}>
-          <a href="/" className="cursor-pointer">
+        <DropdownMenuItem asChild>
+          <Link
+            href="/"
+            className="cursor-pointer"
+            onClick={() => {
+              setSession(null)
+              setIsOpen(false)
+            }}
+          >
             Sign Out
-          </a>
+          </Link>
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>

package/src/components/NotFound.tsx

@@ -1,5 +1,5 @@
 import { Button } from "@/components/ui/button"
-import { PrefetchPageLink } from "@/components/PrefetchPageLink"
+import { Link } from "wouter"
 
 export function NotFound({ heading = "Page not found" }: { heading?: string }) {
   return (
@@ -20,16 +20,16 @@ export function NotFound({ heading = "Page not found" }: { heading?: string }) {
           address.
         </p>
         <div className="flex flex-col sm:flex-row gap-4">
-          <PrefetchPageLink href="/">
+          <Link href="/">
             <Button size="lg" className="bg-blue-500 hover:bg-blue-600">
               Return Home
             </Button>
-          </PrefetchPageLink>
-          <PrefetchPageLink href="/search">
+          </Link>
+          <Link href="/search">
             <Button size="lg" variant="outline">
               Search Packages
             </Button>
-          </PrefetchPageLink>
+          </Link>
         </div>
       </div>
     </section>

package/src/components/PackageBreadcrumb.tsx

@@ -1,4 +1,4 @@
-import { PrefetchPageLink } from "@/components/PrefetchPageLink"
+import { Link } from "wouter"
 import {
   Breadcrumb,
   BreadcrumbList,
@@ -29,7 +29,7 @@ export function PackageBreadcrumb({
         {/* Author */}
         <BreadcrumbItem>
           <BreadcrumbLink asChild>
-            <PrefetchPageLink href={`/${author}`}>{author}</PrefetchPageLink>
+            <Link href={`/${author}`}>{author}</Link>
           </BreadcrumbLink>
         </BreadcrumbItem>
         <BreadcrumbSeparator>
@@ -39,9 +39,7 @@ export function PackageBreadcrumb({
         {/* Package */}
         <BreadcrumbItem>
           <BreadcrumbLink asChild>
-            <PrefetchPageLink href={`/${packageName}`}>
-              {unscopedName || packageName}
-            </PrefetchPageLink>
+            <Link href={`/${packageName}`}>{unscopedName || packageName}</Link>
           </BreadcrumbLink>
         </BreadcrumbItem>
         <BreadcrumbSeparator>
@@ -58,9 +56,7 @@ export function PackageBreadcrumb({
                 <BreadcrumbPage>releases</BreadcrumbPage>
               ) : (
                 <BreadcrumbLink asChild>
-                  <PrefetchPageLink href={`/${packageName}/releases`}>
-                    releases
-                  </PrefetchPageLink>
+                  <Link href={`/${packageName}/releases`}>releases</Link>
                 </BreadcrumbLink>
               )}
             </BreadcrumbItem>
@@ -76,11 +72,9 @@ export function PackageBreadcrumb({
             <BreadcrumbItem>
               {currentPage === "builds" ? (
                 <BreadcrumbLink asChild>
-                  <PrefetchPageLink
-                    href={`/${packageName}/releases/${releaseVersion}`}
-                  >
+                  <Link href={`/${packageName}/releases/${releaseVersion}`}>
                     {releaseVersion}
-                  </PrefetchPageLink>
+                  </Link>
                 </BreadcrumbLink>
               ) : (
                 <BreadcrumbPage>{releaseVersion}</BreadcrumbPage>

package/src/components/PackageSearchResults.tsx

@@ -28,7 +28,7 @@ const PackageGrid = ({
   </div>
 )
 
-const LoadingState = () => (
+export const LoadingState = () => (
   <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
     {[...Array(6)].map((_, i) => (
       <PackageCardSkeleton key={i} />

package/src/components/PrefetchPageLink.tsx

@@ -101,7 +101,13 @@ export const PrefetchPageLink = ({
   }, [inView, href])
 
   return (
-    <Link {...props} href={href} className={className} ref={ref}>
+    <Link
+      {...props}
+      href={href}
+      className={className}
+      draggable={false}
+      ref={ref}
+    >
       {children}
     </Link>
   )