@tscircuit/fake-snippets 0.0.119 → 0.0.120

package/fake-snippets-api/lib/db/db-client.ts

@@ -1,3 +1,4 @@
+import { randomUUID } from "node:crypto"
 import type { z } from "zod"
 import { hoist } from "zustand-hoist"
 import { createStore } from "zustand/vanilla"
@@ -12,6 +13,10 @@ import {
   type Order,
   type OrderFile,
   OrderQuote,
+  type BugReport,
+  bugReportSchema,
+  type BugReportFile,
+  bugReportFileSchema,
   type Package,
   type PackageFile,
   type PackageRelease,
@@ -177,6 +182,90 @@ const initializer = combine(databaseSchema.parse({}), (set, get) => ({
     const state = get()
     return state.orderFiles.find((file) => file.order_file_id === orderFileId)
   },
+  addBugReport: ({
+    reporter_account_id,
+    text,
+    is_auto_deleted,
+    delete_at,
+  }: {
+    reporter_account_id: string
+    text?: string | null
+    is_auto_deleted?: boolean
+    delete_at?: string | null
+  }): BugReport => {
+    const normalizedIsAutoDeleted = Boolean(is_auto_deleted)
+    if (normalizedIsAutoDeleted && !delete_at) {
+      throw new Error("delete_at is required when is_auto_deleted is true")
+    }
+    const normalizedDeleteAt = normalizedIsAutoDeleted
+      ? (delete_at ?? null)
+      : null
+
+    const bugReport = bugReportSchema.parse({
+      bug_report_id: randomUUID(),
+      reporter_account_id,
+      text: text ?? null,
+      is_auto_deleted: normalizedIsAutoDeleted,
+      delete_at: normalizedDeleteAt,
+      created_at: new Date().toISOString(),
+      file_count: 0,
+    })
+
+    set((state) => ({
+      bugReports: [...state.bugReports, bugReport],
+    }))
+
+    return bugReport
+  },
+  getBugReportById: (bugReportId: string): BugReport | undefined => {
+    const state = get()
+    return state.bugReports.find(
+      (bugReport) => bugReport.bug_report_id === bugReportId,
+    )
+  },
+  addBugReportFile: ({
+    bug_report_id,
+    file_path,
+    content_mimetype,
+    is_text,
+    content_text,
+    content_bytes,
+  }: {
+    bug_report_id: string
+    file_path: string
+    content_mimetype: string
+    is_text: boolean
+    content_text: string | null
+    content_bytes: Uint8Array | null
+  }): BugReportFile => {
+    const bugReportFile = bugReportFileSchema.parse({
+      bug_report_file_id: randomUUID(),
+      bug_report_id,
+      file_path,
+      content_mimetype,
+      is_text,
+      created_at: new Date().toISOString(),
+      content_text,
+      content_bytes,
+    })
+
+    set((state) => ({
+      bugReportFiles: [...state.bugReportFiles, bugReportFile],
+      bugReports: state.bugReports.map((bugReport) =>
+        bugReport.bug_report_id === bug_report_id
+          ? { ...bugReport, file_count: bugReport.file_count + 1 }
+          : bugReport,
+      ),
+    }))
+
+    return bugReportFile
+  },
+  getBugReportFilesByBugReportId: (bugReportId: string): BugReportFile[] => {
+    const state = get()
+    return state.bugReportFiles.filter(
+      (file) => file.bug_report_id === bugReportId,
+    )
+  },
   addAccount: (
     account: Omit<Account, "account_id" | "is_tscircuit_staff"> &
       Partial<Pick<Account, "account_id" | "is_tscircuit_staff">>,

package/fake-snippets-api/lib/db/schema.ts

@@ -103,6 +103,33 @@ export const orderFileSchema = z.object({
 })
 export type OrderFile = z.infer<typeof orderFileSchema>
 
+export const bugReportSchema = z.object({
+  bug_report_id: z.string().uuid(),
+  reporter_account_id: z.string(),
+  text: z.string().nullable(),
+  is_auto_deleted: z.boolean().default(false),
+  delete_at: z.string().datetime().nullable(),
+  created_at: z.string().datetime(),
+  file_count: z.number().int(),
+})
+export type BugReport = z.infer<typeof bugReportSchema>
+
+export const bugReportFileSchema = z.object({
+  bug_report_file_id: z.string().uuid(),
+  bug_report_id: z.string().uuid(),
+  file_path: z.string(),
+  content_mimetype: z.string(),
+  is_text: z.boolean(),
+  created_at: z.string().datetime(),
+  content_text: z.string().nullable(),
+  content_bytes: z.instanceof(Uint8Array).nullable(),
+})
+export const bugReportFileResponseSchema = bugReportFileSchema.omit({
+  content_text: true,
+  content_bytes: true,
+})
+export type BugReportFile = z.infer<typeof bugReportFileSchema>
+
 const shippingOptionSchema = z.object({
   carrier: z.string(),
   service: z.string(),
@@ -469,5 +496,7 @@ export const databaseSchema = z.object({
   datasheets: z.array(datasheetSchema).default([]),
   githubInstallations: z.array(githubInstallationSchema).default([]),
   packageBuilds: z.array(packageBuildSchema).default([]),
+  bugReports: z.array(bugReportSchema).default([]),
+  bugReportFiles: z.array(bugReportFileSchema).default([]),
 })
 export type DatabaseSchema = z.infer<typeof databaseSchema>

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

@@ -0,0 +1,43 @@
+import { bugReportSchema } from "fake-snippets-api/lib/db/schema"
+import { withRouteSpec } from "fake-snippets-api/lib/middleware/with-winter-spec"
+import { z } from "zod"
+
+const requestSchema = z
+  .object({
+    text: z.string().optional(),
+    is_auto_deleted: z.boolean().optional(),
+    delete_at: z.string().datetime().optional(),
+  })
+  .superRefine((data, ctx) => {
+    if (data.is_auto_deleted && !data.delete_at) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "delete_at is required when is_auto_deleted is true",
+        path: ["delete_at"],
+      })
+    }
+  })
+
+export default withRouteSpec({
+  methods: ["POST"],
+  auth: "session",
+  jsonBody: requestSchema,
+  jsonResponse: z.object({
+    ok: z.literal(true),
+    bug_report: bugReportSchema,
+  }),
+})(async (req, ctx) => {
+  const { text, is_auto_deleted = false, delete_at } = req.jsonBody
+
+  const bugReport = ctx.db.addBugReport({
+    reporter_account_id: ctx.auth.account_id,
+    text: text ?? null,
+    is_auto_deleted,
+    delete_at: is_auto_deleted ? delete_at : null,
+  })
+
+  return ctx.json({
+    ok: true,
+    bug_report: bugReport,
+  })
+})

package/fake-snippets-api/routes/api/bug_reports/upload_file.ts

@@ -0,0 +1,113 @@
+import { Buffer } from "node:buffer"
+import { bugReportFileResponseSchema } from "fake-snippets-api/lib/db/schema"
+import { withRouteSpec } from "fake-snippets-api/lib/middleware/with-winter-spec"
+import { normalizeProjectFilePathAndValidate } from "fake-snippets-api/utils/normalizeProjectFilePath"
+import { z } from "zod"
+
+const requestSchema = z
+  .object({
+    bug_report_id: z.string().uuid(),
+    file_path: z.string(),
+    content_mimetype: z.string().optional(),
+    content_text: z.string().optional(),
+    content_base64: z.string().optional(),
+  })
+  .superRefine((data, ctx) => {
+    if (data.content_text !== undefined && data.content_base64 !== undefined) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "Provide either content_text or content_base64, not both",
+        path: ["content_text"],
+      })
+    }
+  })
+
+const inferMimetype = (filePath: string, provided?: string) => {
+  if (provided) return provided
+
+  const lowerPath = filePath.toLowerCase()
+  if (lowerPath.endsWith(".ts") || lowerPath.endsWith(".tsx")) {
+    return "text/typescript"
+  }
+  if (lowerPath.endsWith(".js")) return "application/javascript"
+  if (lowerPath.endsWith(".json")) return "application/json"
+  if (lowerPath.endsWith(".md")) return "text/markdown"
+  if (lowerPath.endsWith(".html")) return "text/html"
+  if (lowerPath.endsWith(".css")) return "text/css"
+  if (lowerPath.endsWith(".txt")) return "text/plain"
+  return "application/octet-stream"
+}
+
+export default withRouteSpec({
+  methods: ["POST"],
+  auth: "session",
+  jsonBody: requestSchema,
+  jsonResponse: z.object({
+    ok: z.literal(true),
+    bug_report_file: bugReportFileResponseSchema,
+  }),
+})(async (req, ctx) => {
+  const {
+    bug_report_id,
+    file_path,
+    content_mimetype,
+    content_text,
+    content_base64,
+  } = req.jsonBody
+
+  const bugReport = ctx.db.getBugReportById(bug_report_id)
+  if (!bugReport) {
+    return ctx.error(404, {
+      error_code: "bug_report_not_found",
+      message: "Bug report not found",
+    })
+  }
+
+  if (bugReport.reporter_account_id !== ctx.auth.account_id) {
+    return ctx.error(403, {
+      error_code: "bug_report_forbidden",
+      message: "You do not have access to modify this bug report",
+    })
+  }
+
+  let normalizedPath: string
+  try {
+    normalizedPath = normalizeProjectFilePathAndValidate(file_path)
+  } catch (error) {
+    return ctx.error(400, {
+      error_code: "invalid_file_path",
+      message: error instanceof Error ? error.message : "Invalid file path",
+    })
+  }
+
+  const mimeType = inferMimetype(normalizedPath, content_mimetype)
+  const hasBase64 = content_base64 !== undefined
+  const hasText = content_text !== undefined
+  const isTextUpload = hasText || !hasBase64
+  const storedText = isTextUpload ? (content_text ?? "") : null
+  const storedBytes =
+    isTextUpload || !hasBase64
+      ? null
+      : Buffer.from(content_base64 ?? "", "base64")
+
+  const bugReportFile = ctx.db.addBugReportFile({
+    bug_report_id,
+    file_path: normalizedPath,
+    content_mimetype: mimeType,
+    is_text: isTextUpload,
+    content_text: storedText,
+    content_bytes: storedBytes,
+  })
+
+  return ctx.json({
+    ok: true,
+    bug_report_file: {
+      bug_report_file_id: bugReportFile.bug_report_file_id,
+      bug_report_id: bugReportFile.bug_report_id,
+      file_path: bugReportFile.file_path,
+      content_mimetype: bugReportFile.content_mimetype,
+      is_text: bugReportFile.is_text,
+      created_at: bugReportFile.created_at,
+    },
+  })
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.119",
+  "version": "0.0.120",
   "type": "module",
   "repository": {
     "type": "git",
@@ -81,7 +81,7 @@
     "@tscircuit/3d-viewer": "^0.0.407",
     "@tscircuit/assembly-viewer": "^0.0.5",
     "@tscircuit/create-snippet-url": "^0.0.8",
-    "@tscircuit/eval": "^0.0.410",
+    "@tscircuit/eval": "^0.0.414",
     "@tscircuit/layout": "^0.0.29",
     "@tscircuit/mm": "^0.0.8",
     "@tscircuit/pcb-viewer": "^1.11.218",

package/src/components/Header.tsx

@@ -24,7 +24,23 @@ const HeaderButton = ({
   alsoHighlightForUrl?: string
 }) => {
   const [location] = useLocation()
+  const isExternal = /^(https?|mailto|tel):\/?\//i.test(href)
+  if (isExternal) {
+    return (
+      <a
+        className={cn("header-button", className)}
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <Button className={className} variant="ghost">
+          {children}
+        </Button>
+      </a>
+    )
+  }
 
+  // For internal links, use the Link Component
   if (location === href || location === alsoHighlightForUrl) {
     return (
       <Link className={cn("header-button", className)} href={href}>

package/src/components/PackageCard.tsx

@@ -20,12 +20,11 @@ import {
 import { SnippetType, SnippetTypeIcon } from "./SnippetTypeIcon"
 import { timeAgo } from "@/lib/utils/timeAgo"
 import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
+import { getPackagePreviewImageUrl } from "@/lib/utils/getPackagePreviewImageUrl"
 
 export interface PackageCardProps {
   /** The package data to display */
   pkg: Package
-  /** Base URL for package images */
-  baseUrl: string
   /** Whether to show the owner name (useful in starred views) */
   showOwner?: boolean
   /** Whether this is the current user's package (enables edit/delete options) */
@@ -46,7 +45,6 @@ export interface PackageCardProps {
 
 export const PackageCard: React.FC<PackageCardProps> = ({
   pkg,
-  baseUrl,
   showOwner = false,
   isCurrentUserPackage = false,
   onDeleteClick,
@@ -73,6 +71,11 @@ export const PackageCard: React.FC<PackageCardProps> = ({
 
   const availableImages = ["pcb", "schematic", "assembly", "3d"]
 
+  const previewImageUrl = getPackagePreviewImageUrl(
+    pkg,
+    pkg.default_view as "pcb" | "schematic" | "3d",
+  )
+
   const cardContent = (
     <div
       className={`border p-4 rounded-md hover:shadow-md transition-shadow flex flex-col gap-4 ${className}`}
@@ -82,7 +85,7 @@ export const PackageCard: React.FC<PackageCardProps> = ({
           className={`${imageSize} flex-shrink-0 rounded-md overflow-hidden bg-gray-50 border flex items-center justify-center`}
         >
           <img
-            src={`${baseUrl}/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/${availableImages.includes(pkg.default_view || "") ? pkg.default_view : "3d"}.png?fs_sha=${pkg.latest_package_release_fs_sha}`}
+            src={String(previewImageUrl)}
             alt={`${pkg.unscoped_name} ${availableImages.includes(pkg.default_view || "") ? pkg.default_view : "3D"} view`}
             className={`object-cover h-full w-full ${imageTransform}`}
             onError={(e) => {

package/src/components/PackageSearchResults.tsx

@@ -14,16 +14,10 @@ interface PackageSearchResultsProps {
 
 const PackageGrid = ({
   packages,
-  baseUrl,
 }: { packages: Package[]; baseUrl: string }) => (
   <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
     {packages.map((pkg) => (
-      <PackageCard
-        key={pkg.package_id}
-        pkg={pkg}
-        baseUrl={baseUrl}
-        showOwner={true}
-      />
+      <PackageCard key={pkg.package_id} pkg={pkg} showOwner={true} />
     ))}
   </div>
 )

package/src/components/SearchComponent.tsx

@@ -4,7 +4,6 @@ import { useLocation } from "wouter"
 import React, { useEffect, useRef, useState } from "react"
 import { useQuery } from "react-query"
 import { Alert } from "./ui/alert"
-import { useApiBaseUrl } from "@/hooks/use-packages-base-api-url"
 import { Link } from "wouter"
 import { CircuitBoard } from "lucide-react"
 import { cn } from "@/lib/utils"
@@ -60,7 +59,6 @@ const SearchComponent: React.FC<SearchComponentProps> = ({
   const resultsRef = useRef<HTMLDivElement>(null)
   const inputRef = useRef<HTMLInputElement>(null)
   const [location, setLocation] = useLocation()
-  const apiBaseUrl = useApiBaseUrl()
 
   const { data: searchResults, isLoading } = useQuery(
     ["packageSearch", searchQuery],
@@ -202,60 +200,73 @@ const SearchComponent: React.FC<SearchComponentProps> = ({
         >
           {searchResults.length > 0 ? (
             <ul className="divide-y divide-gray-200 no-scrollbar">
-              {searchResults.map((pkg: any, index: number) => (
-                <li
-                  key={pkg.package_id}
-                  className={cn(
-                    "p-2 hover:bg-gray-50",
-                    index === highlightedIndex && "bg-gray-100",
-                  )}
-                >
-                  <LinkWithNewTabHandling
-                    href={
-                      shouldOpenInEditor
-                        ? `/editor?package_id=${pkg.package_id}`
-                        : `/${pkg.name}`
-                    }
-                    shouldOpenInNewTab={shouldOpenInNewTab}
-                    className="flex"
-                    onClick={() => {
-                      setShowResults(false)
-                      if (closeOnClick) closeOnClick()
-                    }}
+              {searchResults.map((pkg: any, index: number) => {
+                const previewImageUrl =
+                  pkg.latest_pcb_preview_image_url ??
+                  pkg.latest_cad_preview_image_url ??
+                  pkg.latest_sch_preview_image_url ??
+                  undefined
+                const hasPreviewImage = Boolean(previewImageUrl)
+
+                return (
+                  <li
+                    key={pkg.package_id}
+                    className={cn(
+                      "p-2 hover:bg-gray-50",
+                      index === highlightedIndex && "bg-gray-100",
+                    )}
                   >
-                    <div className="w-12 h-12 overflow-hidden mr-2 flex-shrink-0 rounded-sm bg-gray-50 border flex items-center justify-center">
-                      <img
-                        src={`${apiBaseUrl}/packages/images/${pkg.name}/pcb.svg`}
-                        alt={`PCB preview for ${pkg.name}`}
-                        draggable={false}
-                        className="w-12 h-12 object-contain p-1 scale-[4] rotate-45"
-                        onError={(e) => {
-                          e.currentTarget.style.display = "none"
-                          e.currentTarget.nextElementSibling?.classList.remove(
-                            "hidden",
-                          )
-                          e.currentTarget.nextElementSibling?.classList.add(
-                            "flex",
-                          )
-                        }}
-                      />
-                      <div className="w-12 h-12 hidden items-center justify-center">
-                        <CircuitBoard className="w-6 h-6 text-gray-300" />
-                      </div>
-                    </div>
-                    <div className="flex-grow">
-                      <div className="font-medium text-blue-600 break-words text-xs">
-                        {pkg.name}
+                    <LinkWithNewTabHandling
+                      href={
+                        shouldOpenInEditor
+                          ? `/editor?package_id=${pkg.package_id}`
+                          : `/${pkg.name}`
+                      }
+                      shouldOpenInNewTab={shouldOpenInNewTab}
+                      className="flex"
+                      onClick={() => {
+                        setShowResults(false)
+                        if (closeOnClick) closeOnClick()
+                      }}
+                    >
+                      <div className="w-12 h-12 overflow-hidden mr-2 flex-shrink-0 rounded-sm bg-gray-50 border flex items-center justify-center">
+                        {hasPreviewImage ? (
+                          <img
+                            src={previewImageUrl}
+                            alt={`PCB preview for ${pkg.name}`}
+                            draggable={false}
+                            className="w-12 h-12 object-contain p-1 scale-[4] rotate-45"
+                            onError={(e) => {
+                              e.currentTarget.style.display = "none"
+                              e.currentTarget.nextElementSibling?.classList.remove(
+                                "hidden",
+                              )
+                              e.currentTarget.nextElementSibling?.classList.add(
+                                "flex",
+                              )
+                            }}
+                          />
+                        ) : null}
+                        <div
+                          className={`w-12 h-12 ${hasPreviewImage ? "hidden" : "flex"} items-center justify-center`}
+                        >
+                          <CircuitBoard className="w-6 h-6 text-gray-300" />
+                        </div>
                       </div>
-                      {pkg.description && (
-                        <div className="text-xs text-gray-500 break-words h-8 overflow-hidden">
-                          {pkg.description}
+                      <div className="flex-grow">
+                        <div className="font-medium text-blue-600 break-words text-xs">
+                          {pkg.name}
                         </div>
-                      )}
-                    </div>
-                  </LinkWithNewTabHandling>
-                </li>
-              ))}
+                        {pkg.description && (
+                          <div className="text-xs text-gray-500 break-words h-8 overflow-hidden">
+                            {pkg.description}
+                          </div>
+                        )}
+                      </div>
+                    </LinkWithNewTabHandling>
+                  </li>
+                )
+              })}
             </ul>
           ) : (
             <Alert variant="default" className="p-4 text-center">

package/src/components/TrendingPackagesCarousel.tsx

@@ -3,13 +3,14 @@ import { useAxios } from "@/hooks/use-axios"
 import { StarFilledIcon } from "@radix-ui/react-icons"
 import { Link } from "wouter"
 import { Package } from "fake-snippets-api/lib/db/schema"
-import { useRef, useState } from "react"
-import { useApiBaseUrl } from "@/hooks/use-packages-base-api-url"
+import { useRef } from "react"
+const CarouselItem = ({ pkg }: { pkg: Package }) => {
+  const previewImageUrl =
+    pkg.latest_pcb_preview_image_url ??
+    pkg.latest_cad_preview_image_url ??
+    pkg.latest_sch_preview_image_url ??
+    undefined
 
-const CarouselItem = ({
-  pkg,
-  apiBaseUrl,
-}: { pkg: Package; apiBaseUrl: string }) => {
   return (
     <Link href={`/${pkg.name}`}>
       <div className="flex-shrink-0 w-[200px] bg-white p-3 py-2 rounded-lg shadow-sm border border-gray-200 hover:border-gray-300 transition-colors">
@@ -17,11 +18,13 @@ const CarouselItem = ({
           {pkg.name}
         </div>
         <div className="mb-2 h-24 w-full bg-black rounded overflow-hidden">
-          <img
-            src={`${apiBaseUrl}/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.svg?fs_map=${pkg.latest_package_release_fs_sha}`}
-            alt="PCB preview"
-            className="w-full h-full object-contain p-2 scale-[3] rotate-45 hover:scale-[3.5] transition-transform"
-          />
+          {previewImageUrl ? (
+            <img
+              src={previewImageUrl}
+              alt="PCB preview"
+              className="w-full h-full object-contain p-2 scale-[3] rotate-45 hover:scale-[3.5] transition-transform"
+            />
+          ) : null}
         </div>
         <div className="flex items-center text-xs text-gray-500">
           <StarFilledIcon className="w-3 h-3 mr-1" />
@@ -35,8 +38,6 @@ const CarouselItem = ({
 export const TrendingPackagesCarousel = () => {
   const axios = useAxios()
   const scrollRef = useRef<HTMLDivElement>(null)
-  const [isHovered, setIsHovered] = useState(false)
-  const apiBaseUrl = useApiBaseUrl()
 
   const { data: trendingPackages } = useQuery<Package[]>(
     "trendingPackages",
@@ -59,22 +60,14 @@ export const TrendingPackagesCarousel = () => {
           <div className="container mx-auto px-4">
             <h2 className="text-2xl font-semibold mb-6">Trending Packages</h2>
           </div>
-          <div
-            className="flex gap-6 overflow-x-hidden relative"
-            onMouseEnter={() => setIsHovered(true)}
-            onMouseLeave={() => setIsHovered(false)}
-          >
+          <div className="flex gap-6 overflow-x-hidden relative">
             <div
               ref={scrollRef}
               className="flex gap-6 transition-transform duration-1000 animate-carousel-left"
             >
               {[...(trendingPackages ?? []), ...(trendingPackages ?? [])].map(
                 (pkg, i) => (
-                  <CarouselItem
-                    key={`${pkg.package_id}-${i}`}
-                    pkg={pkg}
-                    apiBaseUrl={apiBaseUrl}
-                  />
+                  <CarouselItem key={`${pkg.package_id}-${i}`} pkg={pkg} />
                 ),
               )}
             </div>

package/src/components/ViewPackagePage/components/mobile-sidebar.tsx

@@ -85,8 +85,9 @@ const MobileSidebar = ({
   })
 
   const { availableViews: pngViews } = usePreviewImages({
-    packageName: packageInfo?.name,
-    fsMapHash: packageInfo?.latest_package_release_fs_sha ?? "",
+    cadPreviewUrl: packageInfo?.latest_cad_preview_image_url,
+    pcbPreviewUrl: packageInfo?.latest_pcb_preview_image_url,
+    schematicPreviewUrl: packageInfo?.latest_sch_preview_image_url,
   })
 
   const viewsToRender =

package/src/components/ViewPackagePage/components/preview-image-squares.tsx

@@ -4,7 +4,9 @@ import type { Package } from "fake-snippets-api/lib/db/schema"
 interface ViewPlaceholdersProps {
   packageInfo?: Pick<
     Package,
-    "name" | "latest_package_release_fs_sha" | "latest_package_release_id"
+    | "latest_cad_preview_image_url"
+    | "latest_pcb_preview_image_url"
+    | "latest_sch_preview_image_url"
   >
   onViewChange?: (view: "3d" | "pcb" | "schematic") => void
 }
@@ -14,8 +16,9 @@ export default function PreviewImageSquares({
   onViewChange,
 }: ViewPlaceholdersProps) {
   const { availableViews } = usePreviewImages({
-    packageName: packageInfo?.name,
-    fsMapHash: packageInfo?.latest_package_release_fs_sha ?? "",
+    cadPreviewUrl: packageInfo?.latest_cad_preview_image_url,
+    pcbPreviewUrl: packageInfo?.latest_pcb_preview_image_url,
+    schematicPreviewUrl: packageInfo?.latest_sch_preview_image_url,
   })
   const handleViewClick = (viewId: string) => {
     onViewChange?.(viewId as "3d" | "pcb" | "schematic")