@tscircuit/fake-snippets 0.0.72 → 0.0.73

package/src/components/PackageBuildsPage/deployment-details-panel.tsx

@@ -0,0 +1,84 @@
+import { Globe, GitBranch, GitCommit, Clock } from "lucide-react"
+import { Badge } from "@/components/ui/badge"
+
+export function DeploymentDetailsPanel() {
+  return (
+    <div className="space-y-6 bg-white p-4 border border-gray-200 rounded-lg">
+      {/* Created */}
+      <div>
+        <h3 className="text-sm font-medium text-gray-600 mb-2">Created</h3>
+        <div className="flex items-center gap-2">
+          <div className="w-6 h-6 bg-orange-500 rounded-full flex items-center justify-center text-xs font-bold">
+            I
+          </div>
+          <span className="text-sm">imrishabh18</span>
+          <span className="text-sm text-gray-500">48m ago</span>
+        </div>
+      </div>
+
+      {/* Status */}
+      <div>
+        <h3 className="text-sm font-medium text-gray-600 mb-2">Status</h3>
+        <div className="flex items-center gap-2">
+          <div className="w-2 h-2 bg-green-500 rounded-full"></div>
+          <span className="text-sm">Ready</span>
+          <Badge
+            variant="secondary"
+            className="bg-gray-200 text-gray-700 text-xs"
+          >
+            Latest
+          </Badge>
+        </div>
+      </div>
+
+      {/* Time to Ready */}
+      <div>
+        <h3 className="text-sm font-medium text-gray-600 mb-2">
+          Time to Ready
+        </h3>
+        <div className="flex items-center gap-2">
+          <Clock className="w-4 h-4 text-gray-500" />
+          <span className="text-sm">1m 3s</span>
+          <span className="text-sm text-gray-500">47m ago</span>
+        </div>
+      </div>
+
+      {/* Version */}
+      <div>
+        <h3 className="text-sm font-medium text-gray-600 mb-2">Version</h3>
+        <div className="flex items-center gap-2">
+          <Globe className="w-4 h-4 text-gray-500" />
+          <span className="text-sm">v1.0.3</span>
+          <Badge variant="default" className="bg-blue-600 text-white text-xs">
+            Current
+          </Badge>
+        </div>
+      </div>
+
+      {/* Outputs */}
+      <div>
+        <h3 className="text-sm font-medium text-gray-600 mb-2">Outputs</h3>
+        <div>
+          <span className="text-sm text-gray-400">None</span>
+        </div>
+      </div>
+
+      {/* Source */}
+      <div>
+        <h3 className="text-sm font-medium text-gray-600 mb-2">Source</h3>
+        <div className="space-y-2">
+          <div className="flex items-center gap-2">
+            <GitBranch className="w-4 h-4 text-gray-500" />
+            <span className="text-sm">main</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <GitCommit className="w-4 h-4 text-gray-500" />
+            <span className="text-sm text-gray-500">
+              edfdc67 support empty file creation (#356)
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/PackageBuildsPage/deployment-header.tsx

@@ -0,0 +1,75 @@
+import { ChevronDown, Download, Github, Link } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { useParams } from "wouter"
+
+export function DeploymentHeader() {
+  const { author, packageName } = useParams()
+
+  return (
+    <div className="border-b border-gray-200 bg-white px-6 py-4">
+      <div className="flex items-center justify-between container mx-auto">
+        <h1 className="text-2xl font-semibold">
+          Package Build
+          <a
+            className="ml-2 bg-gray-100 px-2 py-1 rounded font-mono text-blue-600"
+            href={`/${author}/${packageName}`}
+          >
+            {author}/{packageName}
+          </a>
+        </h1>
+        <div className="flex items-center gap-3">
+          <Button
+            variant="outline"
+            size="sm"
+            className="border-gray-300 bg-white hover:bg-gray-50 text-xs sm:text-sm"
+            asChild
+          >
+            <a
+              href="https://github.com/tscircuit/tscircuit.com/issues/new"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Github className="w-3 h-3 sm:w-4 sm:h-4 mr-1 sm:mr-2" />
+              Report Issue
+            </a>
+          </Button>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                size="sm"
+                className="bg-gray-900 text-white hover:bg-gray-800"
+              >
+                <Download className="w-4 h-4 mr-2" />
+                Download
+                <ChevronDown className="w-4 h-4 ml-2" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              align="end"
+              className="bg-white border-gray-200"
+            >
+              <DropdownMenuItem className="text-gray-900 hover:bg-gray-100">
+                Circuit JSON
+              </DropdownMenuItem>
+              <DropdownMenuItem className="text-gray-900 hover:bg-gray-100">
+                PCB SVG
+              </DropdownMenuItem>
+              <DropdownMenuItem className="text-gray-900 hover:bg-gray-100">
+                Schematic SVG
+              </DropdownMenuItem>
+              <DropdownMenuItem className="text-gray-900 hover:bg-gray-100">
+                3D Model (stl)
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/PackageCard.tsx

@@ -12,7 +12,6 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { SnippetType, SnippetTypeIcon } from "./SnippetTypeIcon"
 import { timeAgo } from "@/lib/utils/timeAgo"
-import { useGetFsMapHashForPackage } from "@/hooks/use-get-fsmap-hash-for-package"
 import { ImageWithFallback } from "./ImageWithFallback"
 
 export interface PackageCardProps {
@@ -57,10 +56,6 @@ export const PackageCard: React.FC<PackageCardProps> = ({
     }
   }
 
-  const fsMapHash = useGetFsMapHashForPackage(
-    pkg.latest_package_release_id ?? "",
-  )
-
   const cardContent = (
     <div
       className={`border p-4 rounded-md hover:shadow-md transition-shadow flex flex-col gap-4 ${className}`}
@@ -70,11 +65,7 @@ export const PackageCard: React.FC<PackageCardProps> = ({
           className={`${imageSize} flex-shrink-0 rounded-md overflow-hidden`}
         >
           <ImageWithFallback
-            src={`${baseUrl}/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.svg?${new URLSearchParams(
-              {
-                fs_sha: fsMapHash ?? "",
-              },
-            ).toString()}`}
+            src={`${baseUrl}/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.svg?fs_sha=${pkg.latest_package_release_fs_sha}`}
             alt={`${pkg.unscoped_name} PCB image`}
             className={`object-cover h-full w-full ${imageTransform}`}
           />

package/src/components/TrendingPackagesCarousel.tsx

@@ -5,16 +5,11 @@ import { Link } from "wouter"
 import { Package } from "fake-snippets-api/lib/db/schema"
 import { useRef, useState } from "react"
 import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
-import { useGetFsMapHashForPackage } from "@/hooks/use-get-fsmap-hash-for-package"
 
 const CarouselItem = ({
   pkg,
   apiBaseUrl,
 }: { pkg: Package; apiBaseUrl: string }) => {
-  const fsMapHash = useGetFsMapHashForPackage(
-    pkg.latest_package_release_id ?? "",
-  )
-
   return (
     <Link href={`/${pkg.owner_github_username}/${pkg.unscoped_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">
@@ -22,17 +17,11 @@ const CarouselItem = ({
           {pkg.owner_github_username}/{pkg.unscoped_name}
         </div>
         <div className="mb-2 h-24 w-full bg-black rounded overflow-hidden">
-          {fsMapHash && (
-            <img
-              src={`${apiBaseUrl}/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.svg?${new URLSearchParams(
-                {
-                  fs_sha: fsMapHash,
-                },
-              ).toString()}`}
-              alt="PCB preview"
-              className="w-full h-full object-contain p-2 scale-[3] rotate-45 hover:scale-[3.5] transition-transform"
-            />
-          )}
+          <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"
+          />
         </div>
         <div className="flex items-center text-xs text-gray-500">
           <StarFilledIcon className="w-3 h-3 mr-1" />

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

@@ -72,7 +72,7 @@ const MobileSidebar = ({
 
   const { availableViews } = usePreviewImages({
     packageName: packageInfo?.name,
-    fsMapHash: packageInfo?.latest_package_release_id ?? "",
+    fsMapHash: packageInfo?.latest_package_release_fs_sha ?? "",
   })
 
   const handleViewClick = useCallback(

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

@@ -1,11 +1,10 @@
 "use client"
 import { Skeleton } from "@/components/ui/skeleton"
-import { useGetFsMapHashForPackage } from "@/hooks/use-get-fsmap-hash-for-package"
 import { usePreviewImages } from "@/hooks/use-preview-images"
 import type { Package } from "fake-snippets-api/lib/db/schema"
 
 interface ViewPlaceholdersProps {
-  packageInfo?: Pick<Package, "name" | "latest_package_release_id">
+  packageInfo?: Pick<Package, "name" | "latest_package_release_fs_sha">
   onViewChange?: (view: "3d" | "pcb" | "schematic") => void
 }
 
@@ -13,12 +12,9 @@ export default function PreviewImageSquares({
   packageInfo,
   onViewChange,
 }: ViewPlaceholdersProps) {
-  const fsMapHash = useGetFsMapHashForPackage(
-    packageInfo?.latest_package_release_id ?? "",
-  )
   const { availableViews } = usePreviewImages({
     packageName: packageInfo?.name,
-    fsMapHash: fsMapHash ?? "",
+    fsMapHash: packageInfo?.latest_package_release_fs_sha ?? "",
   })
 
   const handleViewClick = (viewId: string) => {

package/src/components/package-port/CodeEditor.tsx

@@ -416,7 +416,7 @@ export const CodeEditor = ({
                       const end = start + match[0].length
                       decorations.push(
                         Decoration.mark({
-                          class: "cm-underline",
+                          class: "cm-underline cursor-pointer",
                         }).range(start, end),
                       )
                     }

package/src/components/package-port/EditorNav.tsx

@@ -207,19 +207,23 @@ export default function EditorNav({
         <div className="flex items-center space-x-1">
           {pkg && (
             <>
-              <Link
-                className="text-blue-500 font-semibold hover:underline"
-                href={`/${pkg.owner_github_username}`}
-              >
-                {pkg.owner_github_username}
-              </Link>
-              <span className="px-0.5 text-gray-500">/</span>
-              <Link
-                className="text-blue-500  font-semibold hover:underline"
-                href={`/${pkg.name}`}
-              >
-                {pkg.unscoped_name}
-              </Link>
+              <div className="flex items-center space-x-1 overflow-hidden">
+                <Link
+                  className="text-blue-500 font-semibold hover:underline truncate"
+                  href={`/${pkg.owner_github_username}`}
+                  title={pkg.owner_github_username || ""}
+                >
+                  {pkg.owner_github_username}
+                </Link>
+                <span className="px-0.5 text-gray-500">/</span>
+                <Link
+                  className="text-blue-500 font-semibold hover:underline truncate"
+                  href={`/${pkg.name}`}
+                  title={pkg.unscoped_name}
+                >
+                  {pkg.unscoped_name}
+                </Link>
+              </div>
               {pkg.star_count !== undefined && (
                 <span className="ml-2 text-gray-500 text-xs flex items-center">
                   <Star className="w-3 h-3 mr-1" />

package/src/hooks/use-current-package-id.ts

@@ -31,17 +31,11 @@ export const useCurrentPackageId = (): {
     error: errorPackageByName,
   } = usePackageByName(packageName)
 
-  const {
-    data: packageById,
-    isLoading: isLoadingPackageById,
-    error: errorPackageById,
-  } = usePackageById(packageIdFromUrl)
-
   const packageId = packageIdFromUrl ?? packageByName?.package_id ?? null
 
   return {
     packageId,
-    isLoading: isLoadingPackageByName || isLoadingPackageById,
-    error: errorPackageByName || errorPackageById,
+    isLoading: isLoadingPackageByName,
+    error: errorPackageByName,
   }
 }

package/src/hooks/use-preview-images.ts

@@ -22,33 +22,21 @@ export function usePreviewImages({
       id: "3d",
       label: "3D View",
       imageUrl: packageName
-        ? `https://registry-api.tscircuit.com/packages/images/${packageName}/3d.png?${new URLSearchParams(
-            {
-              fs_sha: fsMapHash ?? "",
-            },
-          ).toString()}`
+        ? `https://registry-api.tscircuit.com/packages/images/${packageName}/3d.png?fs_sha=${fsMapHash}`
         : undefined,
     },
     {
       id: "pcb",
       label: "PCB View",
       imageUrl: packageName
-        ? `https://registry-api.tscircuit.com/packages/images/${packageName}/pcb.png?${new URLSearchParams(
-            {
-              fs_sha: fsMapHash ?? "",
-            },
-          ).toString()}`
+        ? `https://registry-api.tscircuit.com/packages/images/${packageName}/pcb.png?fs_sha=${fsMapHash}`
         : undefined,
     },
     {
       id: "schematic",
       label: "Schematic View",
       imageUrl: packageName
-        ? `https://registry-api.tscircuit.com/packages/images/${packageName}/schematic.png?${new URLSearchParams(
-            {
-              fs_sha: fsMapHash ?? "",
-            },
-          ).toString()}`
+        ? `https://registry-api.tscircuit.com/packages/images/${packageName}/schematic.png?fs_sha=${fsMapHash}`
         : undefined,
     },
   ]

package/src/lib/utils/checkIfManualEditsImported.ts

@@ -1,8 +1,17 @@
+import { findTargetFile } from "./findTargetFile"
+
 export const checkIfManualEditsImported = (
   files: Record<string, string>,
   file: string = "index.tsx",
 ) => {
   if (!files[file]) return false
+  const targetFile = findTargetFile(
+    Object.keys(files).map((f) => ({ path: f, content: files[f] })),
+    null,
+  )
+  if (targetFile && file !== targetFile.path) {
+    return false
+  }
   if (!file.endsWith(".tsx") && !file.endsWith(".ts")) return false
   const importRegex =
     /import\s+(?:\*\s+as\s+)?([a-zA-Z_$][\w$]*)\s+from\s+["'](?:\.\/)?manual-edits\.json["'];?/

package/src/pages/editor.tsx

@@ -4,14 +4,10 @@ import Header from "@/components/Header"
 import { Helmet } from "react-helmet-async"
 import { useCurrentPackageId } from "@/hooks/use-current-package-id"
 import { usePackage } from "@/hooks/use-package"
-import { useGetFsMapHashForPackage } from "@/hooks/use-get-fsmap-hash-for-package"
 
 export const EditorPage = () => {
   const { packageId } = useCurrentPackageId()
   const { data: pkg, isLoading, error } = usePackage(packageId)
-  const fsMapHash = useGetFsMapHashForPackage(
-    pkg?.latest_package_release_id ?? "",
-  )
 
   return (
     <div className="overflow-x-hidden">
@@ -27,16 +23,12 @@ export const EditorPage = () => {
             />
             <meta
               property="og:image"
-              content={`https://registry-api.tscircuit.com/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.png?${new URLSearchParams(
-                {
-                  fs_sha: fsMapHash ?? "",
-                },
-              ).toString()}`}
+              content={`https://registry-api.tscircuit.com/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.png?fs_sha=${pkg.latest_package_release_fs_sha}`}
             />
             <meta name="twitter:card" content="summary_large_image" />
             <meta
               name="twitter:image"
-              content={`https://registry-api.tscircuit.com/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.png`}
+              content={`https://registry-api.tscircuit.com/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.png?fs_sha=${pkg.latest_package_release_fs_sha}`}
             />
           </>
         )}

package/src/pages/package-builds.tsx

@@ -0,0 +1,33 @@
+import { CodeAndPreview } from "@/components/package-port/CodeAndPreview"
+import Footer from "@/components/Footer"
+import Header from "@/components/Header"
+import { usePackage } from "@/hooks/use-package"
+import { Helmet } from "react-helmet-async"
+import { useCurrentPackageId } from "@/hooks/use-current-package-id"
+import { NotFound } from "@/components/NotFound"
+import { ErrorOutline } from "@/components/ErrorOutline"
+import { DeploymentDetailsPage } from "@/components/PackageBuildsPage/DeploymentDetailsPage"
+
+export const EditorPage = () => {
+  const { packageId } = useCurrentPackageId()
+  const { data: pkg, error } = usePackage(packageId)
+  const uuid4RegExp = new RegExp(
+    /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-4[0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$/,
+  )
+
+  return (
+    <div className="overflow-x-hidden">
+      <Helmet>
+        <title>{pkg ? `${pkg.name} Package Builds` : "Package Builds"}</title>
+        {pkg && (
+          <>
+            <meta property="og:title" content={`${pkg.name} Package Builds`} />
+          </>
+        )}
+      </Helmet>
+      <Header />
+      <DeploymentDetailsPage />
+      <Footer />
+    </div>
+  )
+}

package/src/pages/package-editor.tsx

@@ -6,14 +6,10 @@ import { Helmet } from "react-helmet-async"
 import { useCurrentPackageId } from "@/hooks/use-current-package-id"
 import { NotFound } from "@/components/NotFound"
 import { ErrorOutline } from "@/components/ErrorOutline"
-import { useGetFsMapHashForPackage } from "@/hooks/use-get-fsmap-hash-for-package"
 
 export const EditorPage = () => {
   const { packageId } = useCurrentPackageId()
   const { data: pkg, error } = usePackage(packageId)
-  const fsMapHash = useGetFsMapHashForPackage(
-    pkg?.latest_package_release_id ?? "",
-  )
   const uuid4RegExp = new RegExp(
     /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-4[0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$/,
   )
@@ -30,20 +26,12 @@ export const EditorPage = () => {
             />
             <meta
               property="og:image"
-              content={`https://registry-api.tscircuit.com/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.png?${new URLSearchParams(
-                {
-                  fs_sha: fsMapHash ?? "",
-                },
-              ).toString()}`}
+              content={`https://registry-api.tscircuit.com/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.png?fs_sha=${pkg.latest_package_release_fs_sha}`}
             />
             <meta name="twitter:card" content="summary_large_image" />
             <meta
               name="twitter:image"
-              content={`https://registry-api.tscircuit.com/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.png?${new URLSearchParams(
-                {
-                  fs_sha: fsMapHash ?? "",
-                },
-              ).toString()}`}
+              content={`https://registry-api.tscircuit.com/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.png?fs_sha=${pkg.latest_package_release_fs_sha}`}
             />
           </>
         )}

package/src/hooks/use-get-fsmap-hash-for-package.ts

@@ -1,19 +0,0 @@
-import { usePackageFiles } from "@/hooks/use-package-files"
-import md5 from "md5"
-
-export const useGetFsMapHashForPackage = (packageReleaseId: string) => {
-  const { data: pkgFilesList } = usePackageFiles(packageReleaseId)
-
-  if (!pkgFilesList) {
-    console.error(
-      `No package files found for package release ${packageReleaseId}`,
-    )
-    return null
-  }
-  const fsMap = new Map<string, string>()
-  for (const file of pkgFilesList) {
-    fsMap.set(file.file_path, file.content_text ?? "")
-  }
-  const fsMapHash = md5(JSON.stringify(fsMap))
-  return `md5-${fsMapHash}`
-}