@tscircuit/fake-snippets 0.0.87 → 0.0.88

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

@@ -28,7 +28,7 @@ export default withRouteSpec({
     package_name_with_version,
   } = req.jsonBody
 
-  if (package_name_with_version && !version && !package_id) {
+  if (package_name_with_version && !package_id) {
     const [packageName, parsedVersion] = package_name_with_version.split("@")
     const pkg = ctx.db.packages.find((p) => p.name === packageName)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.87",
+  "version": "0.0.88",
   "type": "module",
   "repository": {
     "type": "git",
@@ -32,7 +32,7 @@
     "generate-images": "bun run scripts/generate-image-sizes.ts",
     "generate-sitemap": "bun run scripts/generate-sitemap.ts"
   },
-  "dependencies": {
+  "devDependencies": {
     "@babel/preset-react": "^7.25.9",
     "@babel/preset-typescript": "^7.26.0",
     "@codemirror/autocomplete": "^6.18.1",
@@ -136,9 +136,7 @@
     "use-mouse-matrix-transform": "^1.3.0",
     "vaul": "^0.9.9",
     "vite-plugin-vercel": "^9.0.4",
-    "wouter": "^3.3.5"
-  },
-  "devDependencies": {
+    "wouter": "^3.3.5",
     "@anthropic-ai/sdk": "^0.27.3",
     "@babel/standalone": "^7.26.2",
     "@biomejs/biome": "^1.9.2",
@@ -147,7 +145,7 @@
     "@tscircuit/core": "^0.0.433",
     "@tscircuit/eval": "^0.0.227",
     "@tscircuit/prompt-benchmarks": "^0.0.28",
-    "@tscircuit/runframe": "^0.0.578",
+    "@tscircuit/runframe": "^0.0.582",
     "@types/babel__standalone": "^7.1.7",
     "@types/bun": "^1.1.10",
     "@types/country-list": "^2.1.4",

package/src/components/Header.tsx

@@ -168,10 +168,14 @@ export default function Header() {
                   Docs
                 </HeaderButton>
               </li>
+              <li>
+                <HeaderButton className="w-full justify-start" href="/search">
+                  Search
+                </HeaderButton>
+              </li>
             </ul>
           </nav>
           <div className="flex flex-col gap-4">
-            <SearchComponent />
             <HeaderDropdown />
             <HeaderLogin />
           </div>

package/src/components/HeaderLogin.tsx

@@ -43,7 +43,7 @@ export const HeaderLogin = () => {
           </AvatarFallback>
         </Avatar>
       </DropdownMenuTrigger>
-      <DropdownMenuContent>
+      <DropdownMenuContent className="ml-1 md:ml-0 md:mr-1">
         <DropdownMenuItem asChild className="text-gray-500 text-xs" disabled>
           <div>
             AI Usage $

package/src/components/PrefetchPageLink.tsx

@@ -1,18 +1,34 @@
 import { Link } from "wouter"
 import { useEffect } from "react"
 import { useInView } from "react-intersection-observer"
+import { useQueryClient } from "react-query"
+import { useAxios } from "@/hooks/use-axios"
 
-export /**
- * PrefetchPageLink component that loads page components when links become visible.
- * Routes are automatically mapped to their corresponding page components under @/pages.
- * The href path is used to determine which page to load:
- *
- * Example:
- * - href="/editor" -> loads "@/pages/editor.tsx"
- * - href="/" -> loads "@/pages/landing.tsx"
- * - href="/my-orders" -> loads "@/pages/my-orders.tsx"
- */
-const PrefetchPageLink = ({
+// Whitelist of known pages that can be safely prefetched
+const PREFETCHABLE_PAGES = new Set([
+  "landing",
+  "editor",
+  "search",
+  "trending",
+  "dashboard",
+  "latest",
+  "settings",
+  "quickstart",
+])
+
+// Helper to check if a path is a package path (e.g. /username/package-name)
+const isPackagePath = (path: string) => {
+  const parts = path.split("/").filter(Boolean)
+  return parts.length === 2
+}
+
+// Helper to check if a path is a user profile path
+const isUserProfilePath = (path: string) => {
+  const parts = path.split("/").filter(Boolean)
+  return parts.length === 1 && !PREFETCHABLE_PAGES.has(parts[0])
+}
+
+export const PrefetchPageLink = ({
   href,
   children,
   className,
@@ -27,13 +43,48 @@ const PrefetchPageLink = ({
     triggerOnce: true,
     threshold: 0,
   })
+  const queryClient = useQueryClient()
+  const axios = useAxios()
 
   useEffect(() => {
-    if (inView) {
-      const link = href === "/" ? "landing" : href.slice(1)
-      if (!link) return
-      const pageName = link.split("?")[0]
+    if (!inView) return
+
+    const path = href === "/" ? "landing" : href.slice(1)
+    if (!path) return
+
+    // Handle user profile paths
+    if (isUserProfilePath(path)) {
+      const username = path.split("/")[0]
+      // Prefetch user profile data
+      queryClient.prefetchQuery(["account", username], async () => {
+        const { data } = await axios.post("/accounts/get", {
+          github_username: username,
+        })
+        return data.account
+      })
+      return
+    }
+
+    // Handle package paths
+    if (isPackagePath(path)) {
+      const [owner, name] = path.split("/")
+      const packageName = name.split("#")[0]
+      // Prefetch package data
+      queryClient.prefetchQuery(
+        ["package", `${owner}/${packageName}`],
+        async () => {
+          const { data } = await axios.get("/packages/get", {
+            params: { name: `${owner}/${packageName}` },
+          })
+          return data.package
+        },
+      )
+      return
+    }
 
+    // Handle regular pages
+    const pageName = path.split("?")[0]
+    if (PREFETCHABLE_PAGES.has(pageName)) {
       import(`@/pages/${pageName}.tsx`).catch((error) => {
         console.error(`Failed to prefetch page module ${pageName}:`, error)
       })

package/src/components/ViewPackagePage/components/important-files-view.tsx

@@ -213,11 +213,11 @@ export default function ImportantFilesView({
   return (
     <div className="mt-4 border border-gray-200 dark:border-[#30363d] rounded-md overflow-hidden">
       <div className="flex items-center pl-2 pr-4 py-2 bg-gray-100 dark:bg-[#161b22] border-b border-gray-200 dark:border-[#30363d]">
-        <div className="flex items-center space-x-2 overflow-x-auto no-scrollbar">
+        <div className="flex items-center space-x-2 overflow-x-auto no-scrollbar flex-1 min-w-0">
           {/* AI Description Tab */}
           {hasAiContent && (
             <button
-              className={`flex items-center px-3 py-1.5 rounded-md text-xs ${
+              className={`flex items-center px-3 py-1.5 rounded-md text-xs flex-shrink-0 whitespace-nowrap ${
                 activeTab === "ai"
                   ? "bg-gray-200 dark:bg-[#30363d] font-medium"
                   : "text-gray-500 dark:text-[#8b949e] hover:bg-gray-200 dark:hover:bg-[#30363d]"
@@ -234,7 +234,7 @@ export default function ImportantFilesView({
 
           {/* AI Review Tab */}
           <button
-            className={`flex items-center px-3 py-1.5 rounded-md text-xs ${
+            className={`flex items-center px-3 py-1.5 rounded-md text-xs flex-shrink-0 whitespace-nowrap ${
               activeTab === "ai-review"
                 ? "bg-gray-200 dark:bg-[#30363d] font-medium"
                 : "text-gray-500 dark:text-[#8b949e] hover:bg-gray-200 dark:hover:bg-[#30363d]"
@@ -252,7 +252,7 @@ export default function ImportantFilesView({
           {importantFiles.map((file) => (
             <button
               key={file.package_file_id}
-              className={`flex items-center px-3 py-1.5 rounded-md text-xs ${
+              className={`flex items-center px-3 py-1.5 rounded-md text-xs flex-shrink-0 whitespace-nowrap ${
                 activeTab === "file" && activeFilePath === file.file_path
                   ? "bg-gray-200 dark:bg-[#30363d] font-medium"
                   : "text-gray-500 dark:text-[#8b949e] hover:bg-gray-200 dark:hover:bg-[#30363d]"
@@ -295,7 +295,9 @@ export default function ImportantFilesView({
           renderAiContent()
         ) : activeTab === "ai-review" ? (
           renderAiReviewContent()
-        ) : activeFilePath && activeFilePath.endsWith(".md") ? (
+        ) : activeFilePath &&
+          (activeFilePath.endsWith(".md") ||
+            activeFilePath?.toLowerCase().endsWith("readme")) ? (
           <MarkdownViewer markdownContent={activeFileContent} />
         ) : activeFilePath &&
           (activeFilePath.endsWith(".js") ||

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

@@ -87,7 +87,7 @@ export default function MainContentHeader({
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end" className="w-72">
-            <DropdownMenuItem asChild>
+            <DropdownMenuItem disabled={!Boolean(packageInfo)} asChild>
               <a
                 href={`/editor?package_id=${packageInfo?.package_id}`}
                 className="cursor-pointer p-2 py-4"

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

@@ -12,7 +12,10 @@ import ThreeDView from "./tab-views/3d-view"
 import PCBView from "./tab-views/pcb-view"
 import SchematicView from "./tab-views/schematic-view"
 import BOMView from "./tab-views/bom-view"
-import { isPackageFileImportant } from "../utils/is-package-file-important"
+import {
+  isPackageFileImportant,
+  scorePackageFileImportance,
+} from "../utils/is-package-file-important"
 import Header from "@/components/Header"
 import Footer from "@/components/Footer"
 import PackageHeader from "./package-header"
@@ -90,9 +93,16 @@ export default function RepoPageContent({
   const importantFiles = useMemo(() => {
     if (!packageFiles || !importantFilePaths) return []
 
-    return packageFiles.filter((file) =>
-      importantFilePaths.some((path) => file.file_path.endsWith(path)),
-    )
+    return packageFiles
+      .filter((file) =>
+        importantFilePaths.some((path) => file.file_path.endsWith(path)),
+      )
+      .sort((a, b) => {
+        const aImportance = scorePackageFileImportance(a.file_path)
+        const bImportance = scorePackageFileImportance(b.file_path)
+        return aImportance - bImportance
+      })
+      .reverse()
   }, [packageFiles, importantFilePaths])
 
   // Generate package name with version for file lookups

package/src/components/ViewPackagePage/utils/is-package-file-important.ts

@@ -1,5 +1,6 @@
 const importanceMap = {
   "readme.md": 200,
+  readme: 200,
   license: 100,
   "license.md": 100,
   "index.ts": 90,
@@ -7,7 +8,23 @@ const importanceMap = {
   "circuit.tsx": 90,
 }
 
-export const scorePackageFileImportance = (filePath: string) => {
+/**
+ * Determines if a file is considered "important" for display in the
+ * `ImportantFilesView` component.
+ *
+ * A file is deemed important if it resides in the root directory of the package
+ * and has a positive importance score. Nested paths are not considered important.
+ */
+export const isPackageFileImportant = (filePath: string): boolean => {
+  const normalized = filePath.replace(/^\.\/?/, "").toLowerCase()
+  if (normalized.split("/").length > 1) {
+    return false
+  }
+  return scorePackageFileImportance(filePath) > 0
+}
+
+// Kept for backward compatibility with older imports
+export const scorePackageFileImportance = (filePath: string): number => {
   const lowerCaseFilePath = filePath.toLowerCase()
   for (const [key, value] of Object.entries(importanceMap)) {
     if (lowerCaseFilePath.endsWith(key)) {
@@ -16,7 +33,3 @@ export const scorePackageFileImportance = (filePath: string) => {
   }
   return 0
 }
-
-export const isPackageFileImportant = (filePath: string) => {
-  return scorePackageFileImportance(filePath) > 0
-}

package/src/lib/populate-query-cache-with-ssr-data.ts

@@ -7,46 +7,40 @@ import type { QueryClient } from "react-query"
 export function populateQueryCacheWithSSRData(queryClient: QueryClient) {
   if (typeof window === "undefined") return
 
-  const ssrPackage = (window as any).SSR_PACKAGE
-  const ssrPackageRelease = (window as any).SSR_PACKAGE_RELEASE
-  const ssrPackageFiles = (window as any).SSR_PACKAGE_FILES
+  const windowAny = window as any
+  const ssrPackage = windowAny.SSR_PACKAGE
+  const ssrPackageRelease = windowAny.SSR_PACKAGE_RELEASE
+  const ssrPackageFiles = windowAny.SSR_PACKAGE_FILES
 
-  if (ssrPackage) {
-    // Cache package data with all possible query keys
-    queryClient.setQueryData(["package", ssrPackage.package_id], ssrPackage)
-    queryClient.setQueryData(["package", ssrPackage.name], ssrPackage)
-    queryClient.setQueryData(["packages", ssrPackage.package_id], ssrPackage)
-  }
+  if (!ssrPackage || !ssrPackageRelease) return
 
-  if (ssrPackageRelease && ssrPackage) {
-    // Cache package release with various query patterns
-    queryClient.setQueryData(
-      [
-        "packageRelease",
-        { package_id: ssrPackage.package_id, is_latest: true },
-      ],
-      ssrPackageRelease,
-    )
+  queryClient.setQueryData(["package", ssrPackage.name], ssrPackage)
+  queryClient.setQueryData(["packages", ssrPackage.package_id], ssrPackage)
+
+  queryClient.setQueryData(
+    [
+      "packageRelease",
+      {
+        is_latest: true,
+        package_name: ssrPackage.name,
+        include_ai_review: true,
+      },
+    ],
+    ssrPackageRelease,
+  )
+
+  queryClient.setQueryData(
+    [
+      "packageRelease",
+      { package_release_id: ssrPackageRelease.package_release_id },
+    ],
+    ssrPackageRelease,
+  )
+
+  if (ssrPackageFiles && ssrPackageRelease.package_release_id) {
     queryClient.setQueryData(
-      ["packageRelease", { package_name: ssrPackage.name, is_latest: true }],
-      ssrPackageRelease,
+      ["packageFiles", ssrPackageRelease.package_release_id],
+      ssrPackageFiles,
     )
-    if (ssrPackageRelease.package_release_id) {
-      queryClient.setQueryData(
-        [
-          "packageRelease",
-          { package_release_id: ssrPackageRelease.package_release_id },
-        ],
-        ssrPackageRelease,
-      )
-    }
-
-    // Cache package files if available
-    if (ssrPackageFiles && ssrPackageRelease.package_release_id) {
-      queryClient.setQueryData(
-        ["packageFiles", ssrPackageRelease.package_release_id],
-        ssrPackageFiles,
-      )
-    }
   }
 }

package/src/pages/user-profile.tsx

@@ -55,7 +55,7 @@ export const UserProfilePage = () => {
   )
 
   // use the username stored in the database so the correct case is displayed
-  const githubUsername = account?.account.github_username || username
+  const githubUsername = account?.account?.github_username || username
   const isCurrentUserProfile = githubUsername === session?.github_username
 
   const { Dialog: DeleteDialog, openDialog: openDeleteDialog } =