@tscircuit/fake-snippets 0.0.109 → 0.0.111

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

@@ -1,13 +1,18 @@
 import { GitFork, Star, Tag, Settings, LinkIcon } from "lucide-react"
 import { Badge } from "@/components/ui/badge"
 import { Skeleton } from "@/components/ui/skeleton"
+import { usePackageReleaseImages } from "@/hooks/use-package-release-images"
 import { usePreviewImages } from "@/hooks/use-preview-images"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { Button } from "@/components/ui/button"
 import { useEditPackageDetailsDialog } from "@/components/dialogs/edit-package-details-dialog"
 import React, { useState, useEffect, useMemo, useCallback } from "react"
+import {
+  normalizeSvgForSquareTile,
+  svgToDataUrl,
+} from "@/lib/normalize-svg-for-tile"
 import { useCurrentPackageInfo } from "@/hooks/use-current-package-info"
-import { usePackageFile } from "@/hooks/use-package-files"
+import { usePackageFileById, usePackageFiles } from "@/hooks/use-package-files"
 import { getLicenseFromLicenseContent } from "@/lib/getLicenseFromLicenseContent"
 
 interface MobileSidebarProps {
@@ -20,19 +25,25 @@ const MobileSidebar = ({
   onViewChange,
 }: MobileSidebarProps) => {
   const { packageInfo, refetch: refetchPackageInfo } = useCurrentPackageInfo()
-  const { data: licenseFileMeta } = usePackageFile({
-    package_release_id: packageInfo?.latest_package_release_id ?? "",
-    file_path: "LICENSE",
-  })
+  const { data: releaseFiles } = usePackageFiles(
+    packageInfo?.latest_package_release_id,
+  )
+  const licenseFileId = useMemo(() => {
+    return (
+      releaseFiles?.find((f) => f.file_path === "LICENSE")?.package_file_id ||
+      null
+    )
+  }, [releaseFiles])
+  const { data: licenseFileMeta } = usePackageFileById(licenseFileId)
   const currentLicense = useMemo(() => {
     if (packageInfo?.latest_license) {
       return packageInfo?.latest_license
     }
     if (licenseFileMeta?.content_text) {
-      return getLicenseFromLicenseContent(licenseFileMeta?.content_text)
+      return getLicenseFromLicenseContent(licenseFileMeta.content_text)
     }
     return undefined
-  }, [licenseFileMeta?.content_text, packageInfo?.latest_license])
+  }, [licenseFileMeta, packageInfo?.latest_license])
   const topics = useMemo(
     () => (packageInfo?.is_package ? ["Package"] : ["Board"]),
     [packageInfo?.is_package],
@@ -69,11 +80,21 @@ const MobileSidebar = ({
     [refetchPackageInfo],
   )
 
-  const { availableViews } = usePreviewImages({
+  const { availableViews: imageViews } = usePackageReleaseImages({
+    packageReleaseId: packageInfo?.latest_package_release_id,
+  })
+
+  const { availableViews: pngViews } = usePreviewImages({
     packageName: packageInfo?.name,
     fsMapHash: packageInfo?.latest_package_release_fs_sha ?? "",
   })
 
+  const viewsToRender =
+    imageViews.length === 0 ||
+    imageViews.every((v) => !v.isLoading && !v.imageUrl)
+      ? (pngViews as any)
+      : imageViews
+
   const handleViewClick = useCallback(
     (viewId: string) => {
       onViewChange?.(viewId as "3d" | "pcb" | "schematic")
@@ -185,11 +206,14 @@ const MobileSidebar = ({
       </div>
 
       <div className="grid grid-cols-3 gap-2">
-        {availableViews.map((view) => (
+        {viewsToRender.map((view: any) => (
           <PreviewButton
             key={view.id}
             view={view.label}
             onClick={() => handleViewClick(view.id)}
+            backgroundClass={view.backgroundClass}
+            svg={view.svg}
+            isLoading={view.isLoading}
             imageUrl={view.imageUrl}
             status={view.status}
             onLoad={view.onLoad}
@@ -225,6 +249,9 @@ export default React.memo(MobileSidebar)
 function PreviewButton({
   view,
   onClick,
+  backgroundClass,
+  svg,
+  isLoading,
   imageUrl,
   status,
   onLoad,
@@ -232,30 +259,38 @@ function PreviewButton({
 }: {
   view: string
   onClick: () => void
+  backgroundClass?: string
+  svg?: string | null
+  isLoading?: boolean
   imageUrl?: string
-  status: "loading" | "loaded" | "error"
-  onLoad: () => void
-  onError: () => void
+  status?: "loading" | "loaded" | "error"
+  onLoad?: () => void
+  onError?: () => void
 }) {
-  if (status === "error") {
+  if (!svg && !isLoading && !imageUrl) {
     return null
   }
 
   return (
     <button
       onClick={onClick}
-      className="aspect-square bg-gray-100 dark:bg-[#161b22] rounded-lg border border-gray-200 dark:border-[#30363d] hover:bg-gray-200 dark:hover:bg-[#21262d] flex items-center justify-center transition-colors mt-4"
+      className={`aspect-square ${backgroundClass ?? "bg-gray-100"} rounded-lg border border-gray-200 dark:border-[#30363d] flex items-center justify-center transition-colors mt-4 overflow-hidden`}
     >
-      {status === "loading" && (
+      {(isLoading || status === "loading") && (
         <Skeleton className="w-full h-full rounded-lg" />
       )}
-      {imageUrl && (
+      {!isLoading && !status && svg && (
+        <img
+          src={svgToDataUrl(normalizeSvgForSquareTile(svg))}
+          alt={view}
+          className="w-full h-full object-contain"
+        />
+      )}
+      {imageUrl && !isLoading && (
         <img
           src={imageUrl}
           alt={view}
-          className={`w-full h-full object-cover rounded-lg ${
-            status === "loaded" ? "block" : "hidden"
-          }`}
+          className="w-full h-full object-cover rounded-lg"
           onLoad={onLoad}
           onError={onError}
         />

package/src/components/ViewPackagePage/components/package-header.tsx

@@ -12,7 +12,7 @@ import { Lock, Globe } from "lucide-react"
 import { GitFork, Package, Star } from "lucide-react"
 
 import { useForkPackageMutation } from "@/hooks/use-fork-package-mutation"
-import { usePackageStarMutationByName } from "@/hooks/use-package-stars"
+import { usePackageStarringByName } from "@/hooks/use-package-stars"
 import { useOrderDialog } from "@tscircuit/runframe"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { Package as PackageType } from "fake-snippets-api/lib/db/schema"
@@ -29,7 +29,7 @@ export default function PackageHeader({
   isPrivate = false,
   isCurrentUserAuthor = false,
 }: PackageHeaderProps) {
-  const author = packageInfo?.owner_github_username
+  const accountName = packageInfo?.owner_github_username
   const packageName = packageInfo?.unscoped_name
   const sessionToken = useGlobalStore((s) => s.session?.token)
   const isOwner =
@@ -43,8 +43,8 @@ export default function PackageHeader({
     packageReleaseId: packageInfo?.latest_package_release_id ?? "",
   })
 
-  const { addStar, removeStar } = usePackageStarMutationByName(
-    packageInfo?.name ?? "",
+  const { isStarred, starCount, toggleStar } = usePackageStarringByName(
+    packageInfo?.name ?? null,
   )
 
   const { mutateAsync: forkPackage, isLoading: isForkLoading } =
@@ -52,12 +52,7 @@ export default function PackageHeader({
 
   const handleStarClick = async () => {
     if (!packageInfo?.name || !isLoggedIn) return
-
-    if (packageInfo?.is_starred) {
-      await removeStar.mutateAsync()
-    } else {
-      await addStar.mutateAsync()
-    }
+    await toggleStar()
   }
 
   const handleForkClick = async () => {
@@ -65,8 +60,6 @@ export default function PackageHeader({
     await forkPackage(packageInfo.package_id)
   }
 
-  const isStarLoading = addStar.isLoading || removeStar.isLoading
-
   useEffect(() => {
     window.TSCIRCUIT_REGISTRY_API_BASE_URL =
       import.meta.env.VITE_TSCIRCUIT_REGISTRY_API_URL ??
@@ -81,18 +74,18 @@ export default function PackageHeader({
       <div className="max-w-[1200px] mx-auto px-4">
         <div className="flex items-center justify-between flex-wrap gap-y-2">
           <div className="flex items-center min-w-0 flex-wrap">
-            {author && packageName ? (
+            {accountName && packageName ? (
               <>
                 <h1 className="text-lg md:text-xl font-bold mr-2 break-words">
                   <Link
-                    href={`/${author}`}
+                    href={`/${accountName}`}
                     className="text-blue-600 hover:underline"
                   >
-                    {author}
+                    {accountName}
                   </Link>
                   <span className="px-1 text-gray-500">/</span>
                   <Link
-                    href={`/${author}/${packageName}`}
+                    href={`/${accountName}/${packageName}`}
                     className="text-blue-600 hover:underline"
                   >
                     {packageName}
@@ -126,7 +119,12 @@ export default function PackageHeader({
           </div>
 
           <div className="hidden md:flex items-center space-x-2">
-            <Button variant="outline" size="sm" onClick={open}>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={open}
+              disabled={!packageInfo?.latest_package_release_id}
+            >
               <Package className="w-4 h-4 mr-2" />
               Order
             </Button>
@@ -144,21 +142,17 @@ export default function PackageHeader({
                           : ""
                       }
                       onClick={handleStarClick}
-                      disabled={
-                        isStarLoading || !packageInfo?.name || !isLoggedIn
-                      }
+                      disabled={!packageInfo?.name || !isLoggedIn}
                     >
                       <Star
                         className={`w-4 h-4 mr-2 ${
-                          packageInfo?.is_starred
-                            ? "fill-yellow-500 text-yellow-500"
-                            : ""
+                          isStarred ? "fill-yellow-500 text-yellow-500" : ""
                         }`}
                       />
-                      {packageInfo?.is_starred ? "Starred" : "Star"}
-                      {(packageInfo?.star_count ?? 0) > 0 && (
+                      {isStarred ? "Starred" : "Star"}
+                      {(starCount ?? 0) > 0 && (
                         <span className="ml-1.5 bg-gray-100 text-gray-700 rounded-full px-1.5 py-0.5 text-xs font-medium">
-                          {packageInfo?.star_count}
+                          {starCount}
                         </span>
                       )}
                     </Button>
@@ -220,19 +214,17 @@ export default function PackageHeader({
                   : ""
               }
               onClick={handleStarClick}
-              disabled={isStarLoading || !packageInfo?.name}
+              disabled={!packageInfo?.name || !isLoggedIn}
             >
               <Star
                 className={`w-4 h-4 mr-2 ${
-                  packageInfo?.is_starred
-                    ? "fill-yellow-500 text-yellow-500"
-                    : ""
+                  isStarred ? "fill-yellow-500 text-yellow-500" : ""
                 }`}
               />
-              {packageInfo?.is_starred ? "Starred" : "Star"}
-              {(packageInfo?.star_count ?? 0) > 0 && (
+              {isStarred ? "Starred" : "Star"}
+              {(starCount ?? 0) > 0 && (
                 <span className="ml-1.5 bg-gray-100 text-gray-700 rounded-full px-1.5 py-0.5 text-xs font-medium">
-                  {packageInfo?.star_count}
+                  {starCount}
                 </span>
               )}
             </Button>

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

@@ -1,9 +1,11 @@
-import { Skeleton } from "@/components/ui/skeleton"
 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_fs_sha">
+  packageInfo?: Pick<
+    Package,
+    "name" | "latest_package_release_fs_sha" | "latest_package_release_id"
+  >
   onViewChange?: (view: "3d" | "pcb" | "schematic") => void
 }
 
@@ -15,7 +17,6 @@ export default function PreviewImageSquares({
     packageName: packageInfo?.name,
     fsMapHash: packageInfo?.latest_package_release_fs_sha ?? "",
   })
-
   const handleViewClick = (viewId: string) => {
     onViewChange?.(viewId as "3d" | "pcb" | "schematic")
   }
@@ -25,24 +26,16 @@ export default function PreviewImageSquares({
       {availableViews.map((view) => (
         <button
           key={view.id}
-          className={`aspect-square bg-gray-100 dark:bg-[#161b22] rounded-lg border border-gray-200 dark:border-[#30363d] hover:bg-gray-200 dark:hover:bg-[#21262d] flex items-center justify-center transition-colors overflow-hidden mb-6`}
+          className={`aspect-square ${view.status == "loading" ? "bg-slate-900/10 animate-pulse" : (view.backgroundClass ?? "bg-gray-100")} rounded-lg border border-gray-200 dark:border-[#30363d] flex items-center justify-center transition-colors overflow-hidden mb-6`}
           onClick={() => handleViewClick(view.id)}
         >
           {view.imageUrl && (
-            <>
-              {view.status === "loading" && (
-                <Skeleton className="w-full h-full rounded-lg" />
-              )}
-              <img
-                src={view.imageUrl}
-                alt={view.label}
-                className={`w-full h-full object-cover rounded-lg ${
-                  view.status === "loaded" ? "block" : "hidden"
-                }`}
-                onLoad={view.onLoad}
-                onError={view.onError}
-              />
-            </>
+            <img
+              src={view.imageUrl}
+              className="w-full h-full object-cover rounded-lg"
+              onLoad={view.onLoad}
+              onError={view.onError}
+            />
           )}
         </button>
       ))}

package/src/components/ViewPackagePage/components/repo-page-content.tsx

@@ -18,12 +18,12 @@ import Header from "@/components/Header"
 import Footer from "@/components/Footer"
 import PackageHeader from "./package-header"
 import { useGlobalStore } from "@/hooks/use-global-store"
-import { useLocation } from "wouter"
 import type {
   Package,
   PackageFile as ApiPackageFile,
 } from "fake-snippets-api/lib/db/schema"
 import { useRequestAiReviewMutation } from "@/hooks/use-request-ai-review-mutation"
+import { useUpdateAiDescriptionMutation } from "@/hooks/use-update-ai-description-mutation"
 import { useAiReview } from "@/hooks/use-ai-review"
 import { useQueryClient } from "react-query"
 import SidebarReleasesSection from "./sidebar-releases-section"
@@ -81,6 +81,9 @@ export default function RepoPageContent({
       },
     })
 
+  const { mutate: updateAiDescription, isLoading: isUpdatingAiDescription } =
+    useUpdateAiDescriptionMutation()
+
   const aiReviewRequested =
     Boolean(packageRelease?.ai_review_requested) ||
     Boolean(pendingAiReviewId) ||
@@ -212,15 +215,12 @@ export default function RepoPageContent({
 
             {/* Dynamic Content based on active view */}
             {renderContent()}
-
             {/* Important Files View - Always shown */}
             <ImportantFilesView
               importantFiles={importantFiles}
               isFetched={arePackageFilesFetched}
+              pkg={packageInfo}
               onEditClicked={onEditClicked}
-              packageAuthorOwner={packageInfo?.owner_github_username}
-              aiDescription={packageInfo?.ai_description ?? ""}
-              aiUsageInstructions={packageInfo?.ai_usage_instructions ?? ""}
               aiReviewText={packageRelease?.ai_review_text ?? null}
               aiReviewRequested={aiReviewRequested}
               onRequestAiReview={() => {
@@ -230,6 +230,13 @@ export default function RepoPageContent({
                   })
                 }
               }}
+              onRequestAiDescriptionUpdate={() => {
+                if (packageInfo) {
+                  updateAiDescription({
+                    package_id: packageInfo.package_id,
+                  })
+                }
+              }}
               onLicenseFileRequested={licenseFileRequested}
             />
           </div>

package/src/components/ViewPackagePage/components/sidebar-about-section.tsx

@@ -2,12 +2,12 @@ import { Badge } from "@/components/ui/badge"
 import { GitFork, Star, Settings, LinkIcon, Github, Plus } from "lucide-react"
 import { Skeleton } from "@/components/ui/skeleton"
 import { useCurrentPackageInfo } from "@/hooks/use-current-package-info"
-import { usePackageReleaseById } from "@/hooks/use-package-release"
+import { useCurrentPackageRelease } from "@/hooks/use-current-package-release"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { Button } from "@/components/ui/button"
 import { useEditPackageDetailsDialog } from "@/components/dialogs/edit-package-details-dialog"
 import { useState, useEffect, useMemo } from "react"
-import { usePackageFile } from "@/hooks/use-package-files"
+import { usePackageFileById, usePackageFiles } from "@/hooks/use-package-files"
 import { getLicenseFromLicenseContent } from "@/lib/getLicenseFromLicenseContent"
 import { PackageInfo } from "@/lib/types"
 
@@ -21,23 +21,29 @@ export default function SidebarAboutSection({
   onLicenseClick,
 }: SidebarAboutSectionProps = {}) {
   const { packageInfo, refetch: refetchPackageInfo } = useCurrentPackageInfo()
-  const { data: packageRelease } = usePackageReleaseById(
+  const { packageRelease } = useCurrentPackageRelease({
+    include_ai_review: true,
+  })
+
+  const { data: releaseFiles } = usePackageFiles(
     packageInfo?.latest_package_release_id,
   )
-
-  const { data: licenseFileMeta, refetch: refetchLicense } = usePackageFile({
-    package_release_id: packageInfo?.latest_package_release_id ?? "",
-    file_path: "LICENSE",
-  })
+  const licenseFileId = useMemo(() => {
+    return (
+      releaseFiles?.find((f) => f.file_path === "LICENSE")?.package_file_id ||
+      null
+    )
+  }, [releaseFiles])
+  const { data: licenseFileMeta } = usePackageFileById(licenseFileId)
   const currentLicense = useMemo(() => {
     if (packageInfo?.latest_license) {
       return packageInfo?.latest_license
     }
     if (licenseFileMeta?.content_text) {
-      return getLicenseFromLicenseContent(licenseFileMeta?.content_text)
+      return getLicenseFromLicenseContent(licenseFileMeta.content_text)
     }
     return null
-  }, [licenseFileMeta])
+  }, [licenseFileMeta, packageInfo?.latest_license])
   const topics = packageInfo?.is_package ? ["Package"] : ["Board"]
   const isLoading = !packageInfo || !packageRelease
   const isLoggedIn = useGlobalStore((s) => Boolean(s.session))

package/src/components/ViewPackagePage/components/sidebar-releases-section.tsx

@@ -1,12 +1,12 @@
 import { Tag, Clock } from "lucide-react"
 import { Skeleton } from "@/components/ui/skeleton"
 import { useCurrentPackageInfo } from "@/hooks/use-current-package-info"
-import { usePackageReleaseById } from "@/hooks/use-package-release"
+import { useCurrentPackageRelease } from "@/hooks/use-current-package-release"
 import { timeAgo } from "@/lib/utils/timeAgo"
 import { BuildStatus, BuildStep } from "./build-status"
 import type { PackageRelease } from "fake-snippets-api/lib/db/schema"
 import { getBuildStatus, StatusIcon } from "@/components/preview"
-import { PrefetchPageLink } from "@/components/PrefetchPageLink"
+import { Link } from "wouter"
 import { usePackageBuild } from "@/hooks/use-package-builds"
 
 function getTranspilationStatus(
@@ -39,9 +39,9 @@ function getCircuitJsonStatus(pr?: PackageRelease | null): BuildStep["status"] {
 
 export default function SidebarReleasesSection() {
   const { packageInfo } = useCurrentPackageInfo()
-  const { data: packageRelease } = usePackageReleaseById(
-    packageInfo?.latest_package_release_id,
-  )
+  const { packageRelease } = useCurrentPackageRelease({
+    include_ai_review: true,
+  })
   const { data: latestBuild } = usePackageBuild(
     packageRelease?.latest_package_build_id ?? null,
   )
@@ -80,21 +80,21 @@ export default function SidebarReleasesSection() {
   return (
     <div className="mb-6">
       <h2 className="text-lg font-semibold mb-2">
-        <PrefetchPageLink
+        <Link
           href={`/${packageInfo?.owner_github_username}/${packageInfo?.unscoped_name}/releases`}
           className="hover:underline"
         >
           Releases
-        </PrefetchPageLink>
+        </Link>
       </h2>
       <div className="flex flex-col space-y-2">
-        <PrefetchPageLink
+        <Link
           href={`/${packageInfo?.owner_github_username}/${packageInfo?.unscoped_name}/releases`}
           className="flex items-center hover:underline"
         >
           <Tag className="h-4 w-4 mr-2 text-gray-500 dark:text-[#8b949e]" />
           <span className="text-sm font-medium">v{packageRelease.version}</span>
-        </PrefetchPageLink>
+        </Link>
         <div className="flex items-center">
           <Clock className="h-4 w-4 mr-2 text-gray-500 dark:text-[#8b949e]" />
           <span className="text-sm text-gray-500 dark:text-[#8b949e]">
@@ -109,13 +109,13 @@ export default function SidebarReleasesSection() {
           />
         ))}
         {latestBuild && (
-          <PrefetchPageLink
+          <Link
             href={`/${packageInfo?.name}/releases`}
             className="flex items-center gap-2 text-sm text-gray-500 dark:text-[#8b949e]"
           >
             <StatusIcon status={status} />
             <span>Package Preview {label}</span>
-          </PrefetchPageLink>
+          </Link>
         )}
       </div>
       {/* <a href="#" className="text-blue-600 dark:text-[#58a6ff] hover:underline text-sm">

package/src/components/ViewPackagePage/components/tab-views/pcb-view.tsx

@@ -1,6 +1,4 @@
-import { usePackageFile, usePackageFileByPath } from "@/hooks/use-package-files"
 import { PcbViewerWithContainerHeight } from "@/components/PcbViewerWithContainerHeight"
-import { useEffect, useState } from "react"
 import { useCurrentPackageCircuitJson } from "../../hooks/use-current-package-circuit-json"
 
 export default function PCBView() {
@@ -27,6 +25,7 @@ export default function PCBView() {
   return (
     <div className="border border-gray-200 dark:border-[#30363d] rounded-md p-4 mb-4 bg-white dark:bg-[#0d1117]">
       <PcbViewerWithContainerHeight
+        disablePcbGroups
         clickToInteractEnabled
         circuitJson={circuitJson}
         containerClassName="w-full h-[620px]"

package/src/components/ViewPackagePage/components/tab-views/schematic-view.tsx

@@ -1,5 +1,5 @@
 import { useCurrentPackageCircuitJson } from "../../hooks/use-current-package-circuit-json"
-import { SchematicViewer } from "@tscircuit/runframe"
+import { SchematicViewer } from "@tscircuit/schematic-viewer"
 
 export default function SchematicView() {
   const { circuitJson, isLoading, error } = useCurrentPackageCircuitJson()
@@ -26,6 +26,7 @@ export default function SchematicView() {
   return (
     <div className="h-[620px]">
       <SchematicViewer
+        disableGroups
         clickToInteractEnabled
         circuitJson={circuitJson}
         containerStyle={{