@tscircuit/fake-snippets 0.0.66 → 0.0.68

package/fake-snippets-api/routes/api/order_quotes/create.ts

@@ -4,29 +4,10 @@ import { z } from "zod"
 export default withRouteSpec({
   methods: ["POST"],
   auth: "session",
-  jsonBody: z
-    .object({
-      package_release_id: z.string().optional(),
-      circuit_json: z.any().optional(),
-      vendor_name: z.string(),
-    })
-    .superRefine((data, ctx) => {
-      if (data.circuit_json && data.package_release_id) {
-        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
-          message:
-            "You must provide either circuit_json or package_release_id, but not both.",
-        })
-      }
-      if (!data.circuit_json && !data.package_release_id) {
-        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
-          message:
-            "You must provide either circuit_json or package_release_id.",
-        })
-      }
-    }),
-
+  jsonBody: z.object({
+    package_release_id: z.string(),
+    vendor_name: z.literal("jlcpcb"),
+  }),
   jsonResponse: z.object({
     order_quote_id: z.string().optional(),
     error: z
@@ -37,22 +18,34 @@ export default withRouteSpec({
       .optional(),
   }),
 })(async (req, ctx) => {
-  const { package_release_id, vendor_name, circuit_json } = req.jsonBody
+  const { package_release_id, vendor_name } = req.jsonBody
+
+  // check package release exists
+  const packageRelease = ctx.db.getPackageReleaseById(package_release_id)
+  if (!packageRelease) {
+    return ctx.json(
+      {
+        error: {
+          error_code: "package_release_not_found",
+          message: "Package release not found",
+        },
+      },
+      { status: 404 },
+    )
+  }
 
-  if (package_release_id) {
-    // check package release exists
-    const packageRelease = ctx.db.getPackageReleaseById(package_release_id)
-    if (!packageRelease) {
-      return ctx.json(
-        {
-          error: {
-            error_code: "package_release_not_found",
-            message: "Package release not found",
-          },
+  const packageReleaseFiles =
+    ctx.db.getPackageFilesByReleaseId(package_release_id)
+  if (packageReleaseFiles.length === 0) {
+    return ctx.json(
+      {
+        error: {
+          error_code: "package_release_files_not_found",
+          message: "Package release files not found",
         },
-        { status: 404 },
-      )
-    }
+      },
+      { status: 404 },
+    )
   }
 
   const orderQuoteId = ctx.db.addOrderQuote({

package/fake-snippets-api/routes/api/order_quotes/get.ts

@@ -9,8 +9,7 @@ export default withRouteSpec({
     order_quote_id: z.string(),
   }),
   jsonResponse: z.object({
-    order_quote: orderQuoteSchema.optional(),
-    error: z.string().optional(),
+    order_quote: orderQuoteSchema,
   }),
 })(async (req, ctx) => {
   const { order_quote_id } = req.commonParams
@@ -18,12 +17,10 @@ export default withRouteSpec({
   const orderQuote = ctx.db.getOrderQuoteById(order_quote_id)
 
   if (!orderQuote) {
-    return ctx.json(
-      {
-        error: "Order quote not found",
-      },
-      { status: 404 },
-    )
+    return ctx.error(404, {
+      error_code: "order_quote_not_found",
+      message: "Order quote not found",
+    })
   }
 
   return ctx.json({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.66",
+  "version": "0.0.68",
   "type": "module",
   "repository": {
     "type": "git",
@@ -24,6 +24,7 @@
     "preview": "vite preview",
     "format": "biome format --write .",
     "lint": "biome format .",
+    "build:vite:analyze": "VITE_BUNDLE_ANALYZE=true vite build",
     "build:fake-api:tsup": "tsup-node ./fake-snippets-api/lib/index.ts --format esm --dts",
     "build:fake-api:bundle": "winterspec bundle -o dist/bundle.js",
     "build:fake-api": "bun run build:fake-api:tsup && bun run build:fake-api:bundle && bun run build:fake-api:schema",
@@ -69,8 +70,7 @@
     "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
-    "@tscircuit/3d-viewer": "^0.0.142",
-    "@tscircuit/eval": "^0.0.170",
+    "@tscircuit/eval": "^0.0.198",
     "@tscircuit/footprinter": "^0.0.124",
     "@tscircuit/layout": "^0.0.29",
     "@tscircuit/math-utils": "^0.0.10",
@@ -147,7 +147,7 @@
     "@tailwindcss/typography": "^0.5.16",
     "@tscircuit/core": "^0.0.384",
     "@tscircuit/prompt-benchmarks": "^0.0.28",
-    "@tscircuit/runframe": "^0.0.439",
+    "@tscircuit/runframe": "^0.0.485",
     "@types/babel__standalone": "^7.1.7",
     "@types/bun": "^1.1.10",
     "@types/country-list": "^2.1.4",

package/src/App.tsx

@@ -49,7 +49,6 @@ const lazyImport = (importFn: () => Promise<any>) =>
     }
   })
 
-const AiPage = lazyImport(() => import("@/pages/ai"))
 const AuthenticatePage = lazyImport(() => import("@/pages/authorize"))
 const DashboardPage = lazyImport(() => import("@/pages/dashboard"))
 const EditorPage = lazyImport(async () => {
@@ -62,13 +61,10 @@ const EditorPage = lazyImport(async () => {
 const LandingPage = lazyImport(() => import("@/pages/landing"))
 const MyOrdersPage = lazyImport(() => import("@/pages/my-orders"))
 const LatestPage = lazyImport(() => import("@/pages/latest"))
-const PreviewPage = lazyImport(() => import("@/pages/preview"))
 const QuickstartPage = lazyImport(() => import("@/pages/quickstart"))
 const SearchPage = lazyImport(() => import("@/pages/search"))
 const SettingsPage = lazyImport(() => import("@/pages/settings"))
 const UserProfilePage = lazyImport(() => import("@/pages/user-profile"))
-const ViewOrderPage = lazyImport(() => import("@/pages/view-order"))
-const ViewSnippetPage = lazyImport(() => import("@/pages/view-snippet"))
 const DevLoginPage = lazyImport(() => import("@/pages/dev-login"))
 const BetaPage = lazyImport(() => import("@/pages/beta"))
 const ViewPackagePage = lazyImport(() => import("@/pages/view-package"))
@@ -119,22 +115,15 @@ function App() {
             <Route path="/legacy-editor" component={EditorPage} />
             <Route path="/quickstart" component={QuickstartPage} />
             <Route path="/dashboard" component={DashboardPage} />
-            <Route path="/ai" component={AiPage} />
             <Route path="/latest" component={LatestPage} />
             <Route path="/settings" component={SettingsPage} />
             <Route path="/search" component={SearchPage} />
             <Route path="/trending" component={TrendingPage} />
             <Route path="/authorize" component={AuthenticatePage} />
             <Route path="/my-orders" component={MyOrdersPage} />
-            <Route path="/orders/:orderId" component={ViewOrderPage} />
-            <Route path="/preview" component={PreviewPage} />
             <Route path="/dev-login" component={DevLoginPage} />
             <Route path="/:username" component={UserProfilePage} />
             <Route path="/:author/:packageName" component={ViewPackagePage} />
-            <Route
-              path="/snippets/:author/:snippetName"
-              component={ViewSnippetPage}
-            />
             <Route component={lazyImport(() => import("@/pages/404"))} />
           </Switch>
         </Suspense>

package/src/ContextProviders.tsx

@@ -3,6 +3,7 @@ import { HelmetProvider } from "react-helmet-async"
 import { useEffect } from "react"
 import { useGlobalStore } from "./hooks/use-global-store"
 import { posthog } from "./lib/posthog"
+import { Toaster } from "react-hot-toast"
 
 const staffGithubUsernames = [
   "imrishabh18",
@@ -61,6 +62,7 @@ export const ContextProviders = ({ children }: any) => {
       <HelmetProvider>
         <PostHogIdentifier />
         {children}
+        <Toaster />
       </HelmetProvider>
     </QueryClientProvider>
   )

package/src/components/CmdKMenu.tsx

@@ -7,7 +7,7 @@ import { Package, Snippet } from "fake-snippets-api/lib/db/schema"
 import React from "react"
 import { useQuery } from "react-query"
 
-type SnippetType = "board" | "package" | "model" | "footprint" | "snippet"
+type SnippetType = "board" | "package" | "model" | "footprint"
 
 interface Template {
   name: string
@@ -31,13 +31,13 @@ const CmdKMenu = () => {
 
   // Search results query
   const { data: searchResults = [], isLoading: isSearching } = useQuery(
-    ["snippetSearch", searchQuery],
+    ["packageSearch", searchQuery],
     async () => {
       if (!searchQuery) return []
-      const { data } = await axios.get("/snippets/search", {
-        params: { q: searchQuery },
+      const { data } = await axios.post("/packages/search", {
+        query: searchQuery,
       })
-      return data.snippets || []
+      return data.packages || []
     },
     {
       enabled: Boolean(searchQuery),
@@ -114,7 +114,7 @@ const CmdKMenu = () => {
             />
           </svg>
           <Command.Input
-            placeholder="Search snippets and commands..."
+            placeholder="Search packages and commands..."
             value={searchQuery}
             onValueChange={setSearchQuery}
             className="w-full h-12 bg-transparent border-none outline-none text-gray-900 dark:text-gray-100 placeholder-gray-500"
@@ -133,27 +133,27 @@ const CmdKMenu = () => {
                   heading="Search Results"
                   className="px-2 py-1.5 text-xs font-medium text-gray-500 dark:text-gray-400"
                 >
-                  {searchResults.map((snippet: Snippet) => (
+                  {searchResults.map((pkg: Package) => (
                     <Command.Item
-                      key={snippet.snippet_id}
-                      value={snippet.name || snippet.unscoped_name}
+                      key={pkg.package_id}
+                      value={pkg.name}
                       onSelect={() => {
-                        window.location.href = `/editor?snippet_id=${snippet.snippet_id}`
+                        window.location.href = `/editor?package_id=${pkg.package_id}`
                         setOpen(false)
                       }}
                       className="flex items-center justify-between px-2 py-1.5 rounded-sm text-sm hover:bg-gray-100 dark:hover:bg-gray-700 cursor-default aria-selected:bg-gray-100 dark:aria-selected:bg-gray-700"
                     >
                       <div className="flex flex-col">
                         <span className="text-gray-900 dark:text-gray-100">
-                          {snippet.name || snippet.unscoped_name}
+                          {pkg.name}
                         </span>
-                        {snippet.description && (
+                        {pkg.description && (
                           <span className="text-sm text-gray-500">
-                            {snippet.description}
+                            {pkg.description}
                           </span>
                         )}
                       </div>
-                      <span className="text-sm text-gray-500">snippet</span>
+                      <span className="text-sm text-gray-500">package</span>
                     </Command.Item>
                   ))}
                 </Command.Group>
@@ -161,7 +161,7 @@ const CmdKMenu = () => {
 
               {!searchQuery && recentPackages.length > 0 && (
                 <Command.Group
-                  heading="Recent Snippets"
+                  heading="Recent Packages"
                   className="px-2 py-1.5 text-xs font-medium text-gray-500 dark:text-gray-400"
                 >
                   {recentPackages.slice(0, 6).map((pkg) => (
@@ -169,28 +169,28 @@ const CmdKMenu = () => {
                       key={pkg.package_id}
                       value={pkg.unscoped_name}
                       onSelect={() => {
-                        window.location.href = `/editor?snippet_id=${pkg.package_id}`
+                        window.location.href = `/editor?package_id=${pkg.package_id}`
                         setOpen(false)
                       }}
                       className="flex items-center justify-between px-2 py-1.5 rounded-sm text-sm hover:bg-gray-100 dark:hover:bg-gray-700 cursor-default aria-selected:bg-gray-100 dark:aria-selected:bg-gray-700"
                     >
                       <div className="flex flex-col">
                         <span className="text-gray-900 dark:text-gray-100">
-                          {pkg.unscoped_name}
+                          {pkg.name}
                         </span>
                         <span className="text-sm text-gray-500">
                           Last edited:{" "}
                           {new Date(pkg.updated_at).toLocaleDateString()}
                         </span>
                       </div>
-                      <span className="text-sm text-gray-500">snippet</span>
+                      <span className="text-sm text-gray-500">package</span>
                     </Command.Item>
                   ))}
                 </Command.Group>
               )}
 
               <Command.Group
-                heading="Start Blank Snippet"
+                heading="Start Blank Package"
                 className="px-2 py-1.5 text-xs font-medium text-gray-500 dark:text-gray-400"
               >
                 {blankTemplates.map((template) => (

package/src/components/DownloadButtonAndMenu.tsx

@@ -83,10 +83,7 @@ export function DownloadButtonAndMenu({
             className="text-xs"
             onClick={async () => {
               try {
-                await downloadGltf(
-                  circuitJson,
-                  snippetUnscopedName || "circuit",
-                )
+                await downloadGltf(snippetUnscopedName || "circuit")
               } catch (error: any) {
                 toast({
                   title: "Error Downloading 3D Model",

package/src/components/FAQ.tsx

@@ -176,7 +176,9 @@ export const FAQ = () => (
         <Accordion type="single" collapsible>
           {QUESTIONS.map((q, i) => (
             <AccordionItem key={i} value={`item-${i + 1}`}>
-              <AccordionTrigger>{q.question}</AccordionTrigger>
+              <AccordionTrigger className="text-left">
+                {q.question}
+              </AccordionTrigger>{" "}
               <AccordionContent>{q.answer}</AccordionContent>
             </AccordionItem>
           ))}

package/src/components/FileSidebar.tsx

@@ -1,8 +1,10 @@
 import React, { useState } from "react"
 import { cn } from "@/lib/utils"
-import { File, Folder, PanelRightOpen } from "lucide-react"
+import { File, Folder, PanelRightOpen, Plus } 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"
+import { CreateFileProps } from "./package-port/CodeAndPreview"
 
 type FileName = string
 
@@ -12,6 +14,7 @@ interface FileSidebarProps {
   onFileSelect: (filename: FileName) => void
   className?: string
   fileSidebarState: ReturnType<typeof useState<boolean>>
+  handleCreateFile: (props: CreateFileProps) => void
 }
 
 const FileSidebar: React.FC<FileSidebarProps> = ({
@@ -20,8 +23,13 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
   onFileSelect,
   className,
   fileSidebarState,
+  handleCreateFile,
 }) => {
   const [sidebarOpen, setSidebarOpen] = fileSidebarState
+  const [newFileName, setNewFileName] = useState("")
+  const [isCreatingFile, setIsCreatingFile] = useState(false)
+  const [errorMessage, setErrorMessage] = useState("")
+
   const transformFilesToTreeData = (
     files: Record<FileName, string>,
   ): TreeDataItem[] => {
@@ -82,6 +90,17 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
   }
 
   const treeData = transformFilesToTreeData(files)
+
+  const handleCreateFileInline = () => {
+    handleCreateFile({
+      newFileName,
+      setErrorMessage,
+      onFileSelect,
+      setNewFileName,
+      setIsCreatingFile,
+    })
+  }
+
   return (
     <div
       className={cn(
@@ -98,6 +117,36 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
       >
         <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>
+      {isCreatingFile && (
+        <div className="p-2">
+          <Input
+            autoFocus
+            value={newFileName}
+            onChange={(e) => setNewFileName(e.target.value)}
+            onBlur={handleCreateFileInline}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                handleCreateFileInline()
+              } else if (e.key === "Escape") {
+                setIsCreatingFile(false)
+                setNewFileName("")
+                setErrorMessage("")
+              }
+            }}
+            placeholder="Enter file name"
+          />
+          {errorMessage && (
+            <div className="text-red-500 mt-1">{errorMessage}</div>
+          )}
+        </div>
+      )}
       <TreeView
         data={treeData}
         initialSelectedItemId={currentFile}

package/src/components/Footer.tsx

@@ -57,10 +57,13 @@ export default function Footer() {
             <h3 className="font-semibold uppercase">Explore</h3>
             <footer className="flex flex-col space-y-2">
               <PrefetchPageLink href="/latest" className="hover:underline">
-                Latest Snippets
+                Latest Packages
               </PrefetchPageLink>
               <PrefetchPageLink href="/trending" className="hover:underline">
-                Trending Snippets
+                Trending Packages
+              </PrefetchPageLink>
+              <PrefetchPageLink href="/search" className="hover:underline">
+                Search Packages
               </PrefetchPageLink>
               <a href="https://docs.tscircuit.com" className="hover:underline">
                 Docs

package/src/components/Header2.tsx

@@ -29,15 +29,26 @@ const SearchButtonComponent = () => {
           </Button> */}
         </div>
       ) : (
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={() => setIsExpanded(true)}
-          className="h-8 w-8"
-          aria-label="Open search"
-        >
-          <Search className="h-4 w-4" />
-        </Button>
+        <>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => setIsExpanded(true)}
+            className="h-8 w-8 hidden sm:flex"
+            aria-label="Open search"
+          >
+            <Search className="size-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => (window.location.href = "/search")}
+            className="h-8 w-8 flex sm:hidden"
+            aria-label="Go to search"
+          >
+            <Search className="size-4" />
+          </Button>
+        </>
       )}
     </div>
   )

package/src/components/HeaderLogin.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React from "react"
 import { Button } from "@/components/ui/button"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import {
@@ -7,39 +7,19 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
-import { Link, useLocation, useRouter } from "wouter"
 import { User } from "lucide-react"
-import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { useAccountBalance } from "@/hooks/use-account-balance"
-import { useIsUsingFakeApi } from "@/hooks/use-is-using-fake-api"
 import { useSignIn } from "@/hooks/use-sign-in"
 
-interface HeaderLoginProps {}
-
-export const HeaderLogin: React.FC<HeaderLoginProps> = () => {
-  const [, setLocation] = useLocation()
+export const HeaderLogin = () => {
   const session = useGlobalStore((s) => s.session)
   const isLoggedIn = Boolean(session)
   const setSession = useGlobalStore((s) => s.setSession)
-  const snippetsBaseApiUrl = useSnippetsBaseApiUrl()
-  const isUsingFakeApi = useIsUsingFakeApi()
   const signIn = useSignIn()
   const { data: accountBalance } = useAccountBalance()
 
   if (!isLoggedIn) {
-    const handleLogin = () => {
-      if (isUsingFakeApi) {
-        setSession({
-          account_id: "account-1234",
-          github_username: "testuser",
-          token: "1234",
-          session_id: "session-1234",
-        })
-      } else {
-        signIn()
-      }
-    }
     return (
       <div className="flex items-center md:space-x-2 justify-end">
         <Button onClick={() => signIn()} variant="ghost">
@@ -51,44 +31,47 @@ export const HeaderLogin: React.FC<HeaderLoginProps> = () => {
   }
 
   return (
-    <div className="flex justify-end items-center">
-      <DropdownMenu>
-        <DropdownMenuTrigger>
-          <Avatar className="w-8 h-8 login-avatar">
-            <AvatarImage
-              src={`https://github.com/${session?.github_username}.png`}
-              alt={`${session?.github_username}'s profile picture`}
-            />
-            <AvatarFallback aria-label="User avatar fallback">
-              <User size={16} aria-hidden="true" />
-            </AvatarFallback>
-          </Avatar>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent>
-          <DropdownMenuItem className="text-gray-500 text-xs" disabled>
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Avatar className="w-8 h-8 login-avatar">
+          <AvatarImage
+            src={`https://github.com/${session?.github_username}.png`}
+            alt={`${session?.github_username}'s profile picture`}
+          />
+          <AvatarFallback aria-label="User avatar fallback">
+            <User size={16} aria-hidden="true" />
+          </AvatarFallback>
+        </Avatar>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuItem asChild className="text-gray-500 text-xs" disabled>
+          <div>
             AI Usage $
             {accountBalance?.monthly_ai_budget_used_usd.toFixed(2) ?? "0.00"} /
             $5.00
-          </DropdownMenuItem>
-          <DropdownMenuItem
-            onClick={() => setLocation(`/${session?.github_username}`)}
-          >
+          </div>
+        </DropdownMenuItem>
+        <DropdownMenuItem asChild>
+          <a href={`/${session?.github_username}`} className="cursor-pointer">
             My Profile
-          </DropdownMenuItem>
-          <DropdownMenuItem onClick={() => setLocation("/dashboard")}>
+          </a>
+        </DropdownMenuItem>
+        <DropdownMenuItem asChild>
+          <a href="/dashboard" className="cursor-pointer">
             Dashboard
-          </DropdownMenuItem>
-          <DropdownMenuItem onClick={() => setLocation("/my-orders")}>
-            My Orders
-          </DropdownMenuItem>
-          <DropdownMenuItem onClick={() => setLocation("/settings")}>
+          </a>
+        </DropdownMenuItem>
+        <DropdownMenuItem asChild>
+          <a href="/settings" className="cursor-pointer">
             Settings
-          </DropdownMenuItem>
-          <DropdownMenuItem onClick={() => setSession(null)}>
+          </a>
+        </DropdownMenuItem>
+        <DropdownMenuItem asChild onClick={() => setSession(null)}>
+          <a href="/sign-out" className="cursor-pointer">
             Sign out
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
+          </a>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }

package/src/components/ImageWithFallback.tsx

@@ -0,0 +1,37 @@
+import { useState } from "react"
+
+interface ImageWithFallbackProps
+  extends React.ImgHTMLAttributes<HTMLImageElement> {
+  src: string
+  alt: string
+  className?: string
+  fallbackSrc?: string
+}
+
+export function ImageWithFallback({
+  src,
+  alt,
+  className = "",
+  fallbackSrc = "/assets/fallback-image.svg",
+  ...props
+}: ImageWithFallbackProps) {
+  const [loading, setLoading] = useState(true)
+  const [currentSrc, setCurrentSrc] = useState(src)
+
+  return (
+    <img
+      src={currentSrc}
+      alt={alt}
+      className={`object-contain h-full w-full ${
+        loading ? "animate-pulse bg-gray-200" : ""
+      } ${className}`}
+      onLoad={() => setLoading(false)}
+      onError={() => {
+        console.error("PCB image failed to load:", src)
+        setCurrentSrc(fallbackSrc)
+        setLoading(false)
+      }}
+      {...props}
+    />
+  )
+}