@tscircuit/fake-snippets 0.0.87 → 0.0.89

package/src/components/PackageCard.tsx

@@ -2,7 +2,13 @@ import React from "react"
 import { Link } from "wouter"
 import { Package } from "fake-snippets-api/lib/db/schema"
 import { StarIcon, LockClosedIcon } from "@radix-ui/react-icons"
-import { GlobeIcon, MoreVertical, PencilIcon, Trash2 } from "lucide-react"
+import {
+  GlobeIcon,
+  MoreVertical,
+  PencilIcon,
+  Share2,
+  Trash2,
+} from "lucide-react"
 import { Button } from "@/components/ui/button"
 import {
   DropdownMenu,
@@ -13,6 +19,7 @@ import {
 import { SnippetType, SnippetTypeIcon } from "./SnippetTypeIcon"
 import { timeAgo } from "@/lib/utils/timeAgo"
 import { ImageWithFallback } from "./ImageWithFallback"
+import { useToast } from "@/hooks/use-toast"
 
 export interface PackageCardProps {
   /** The package data to display */
@@ -49,6 +56,7 @@ export const PackageCard: React.FC<PackageCardProps> = ({
   withLink = true,
   renderActions,
 }) => {
+  const { toast } = useToast()
   const handleDeleteClick = (e: React.MouseEvent) => {
     e.preventDefault() // Prevent navigation
     if (onDeleteClick) {
@@ -56,6 +64,41 @@ export const PackageCard: React.FC<PackageCardProps> = ({
     }
   }
 
+  const handleShareClick = async (e: React.MouseEvent) => {
+    e.preventDefault()
+
+    const shareUrl = `${window.location.origin}/${pkg.owner_github_username}/${pkg.unscoped_name}`
+    const shareText =
+      `Explore this tscircuit package: ${pkg.unscoped_name} by ${pkg.owner_github_username}${pkg.description ? ` - ${pkg.description}` : ""}`.trim()
+    if (navigator.share) {
+      await navigator
+        .share({
+          title: shareText,
+          text: shareText,
+          url: shareUrl,
+        })
+        .catch(() => fallbackShare(shareText, shareUrl))
+    } else {
+      fallbackShare(shareText, shareUrl)
+    }
+  }
+
+  const fallbackShare = (text: string, url: string) => {
+    const shareContent = `${text}\n${url}`
+    navigator.clipboard
+      .writeText(shareContent)
+      .then(() => {
+        toast({
+          title: "Share content copied to clipboard",
+        })
+      })
+      .catch(() => {
+        toast({
+          title: "Unable to share or copy to clipboard",
+        })
+      })
+  }
+
   const cardContent = (
     <div
       className={`border p-4 rounded-md hover:shadow-md transition-shadow flex flex-col gap-4 ${className}`}
@@ -92,18 +135,25 @@ export const PackageCard: React.FC<PackageCardProps> = ({
                 <StarIcon className="w-4 h-4 pt-[2.5px]" />
                 <span className="text-[16px]">{pkg.star_count || 0}</span>
               </div>
-              {isCurrentUserPackage && onDeleteClick && (
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="h-[1.5rem] w-[1.5rem]"
-                    >
-                      <MoreVertical className="h-4 w-4" />
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-[1.5rem] w-[1.5rem]"
+                  >
+                    <MoreVertical className="h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent>
+                  <DropdownMenuItem
+                    className="text-xs cursor-pointer"
+                    onClick={handleShareClick}
+                  >
+                    <Share2 className="mr-2 h-3 w-3" />
+                    Share Package
+                  </DropdownMenuItem>{" "}
+                  {isCurrentUserPackage && onDeleteClick && (
                     <DropdownMenuItem
                       className="text-xs text-red-600"
                       onClick={handleDeleteClick}
@@ -111,9 +161,9 @@ export const PackageCard: React.FC<PackageCardProps> = ({
                       <Trash2 className="mr-2 h-3 w-3" />
                       Delete Package
                     </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              )}
+                  )}
+                </DropdownMenuContent>
+              </DropdownMenu>
               {renderActions && renderActions(pkg)}
             </div>
           </div>

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/SearchComponent.tsx

@@ -184,7 +184,7 @@ const SearchComponent: React.FC<SearchComponentProps> = ({
         role="searchbox"
       />
       {isLoading && (
-        <div className="absolute top-full w-lg left-0 right-0 mt-1 bg-white shadow-lg rounded-lg border w-80 grid place-items-center py-4 z-10 p-3">
+        <div className="absolute top-full w-lg left-0 right-0 mt-1 bg-white shadow-lg rounded-lg border w-80 grid place-items-center py-4 z-50 p-3">
           <div className="flex items-center space-x-2">
             <div className="w-4 h-4 border-2 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
             <span className="text-gray-600 text-sm">Searching...</span>
@@ -195,7 +195,7 @@ const SearchComponent: React.FC<SearchComponentProps> = ({
       {showResults && searchResults && (
         <div
           ref={resultsRef}
-          className="absolute top-full md:left-0 right-0 mt-2 bg-white shadow-lg rounded-md z-10 w-80 max-h-screen overflow-y-auto overflow-x-visible"
+          className="absolute top-full md:left-0 right-0 mt-2 bg-white shadow-lg rounded-md z-50 w-80 max-h-screen overflow-y-auto overflow-x-visible"
         >
           {searchResults.length > 0 ? (
             <ul className="divide-y divide-gray-200">

package/src/components/SuspenseRunFrame.tsx

@@ -9,8 +9,20 @@ export const SuspenseRunFrame = (
   props: React.ComponentProps<typeof RunFrame>,
 ) => {
   return (
-    <Suspense fallback={<div>Loading...</div>}>
-      <RunFrame {...props} />
+    <Suspense
+      fallback={
+        <div className="flex justify-center items-center h-full">
+          <div className="w-48">
+            <div className="loading">
+              <div className="loading-bar"></div>
+            </div>
+          </div>
+        </div>
+      }
+    >
+      <div className="h-[98vh]">
+        <RunFrame {...props} />
+      </div>
     </Suspense>
   )
 }

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

@@ -1,12 +1,22 @@
 "use client"
 
 import { useState, useEffect } from "react"
-import { Edit, FileText, Code, Copy, CopyCheck } from "lucide-react"
+import {
+  Edit,
+  FileText,
+  Code,
+  Copy,
+  CopyCheck,
+  Loader2,
+  RefreshCcwIcon,
+} from "lucide-react"
 import { Skeleton } from "@/components/ui/skeleton"
+import { Button } from "@/components/ui/button"
 import { usePackageFile, usePackageFileByPath } from "@/hooks/use-package-files"
 import { ShikiCodeViewer } from "./ShikiCodeViewer"
 import { SparklesIcon } from "lucide-react"
 import MarkdownViewer from "./markdown-viewer"
+import { useGlobalStore } from "@/hooks/use-global-store"
 
 interface PackageFile {
   package_file_id: string
@@ -20,7 +30,7 @@ interface ImportantFilesViewProps {
   importantFiles?: PackageFile[]
   isLoading?: boolean
   onEditClicked?: (file_path?: string | null) => void
-
+  packageAuthorOwner?: string | null
   aiDescription?: string
   aiUsageInstructions?: string
   aiReviewText?: string | null
@@ -37,12 +47,20 @@ export default function ImportantFilesView({
   onRequestAiReview,
   isLoading = false,
   onEditClicked,
+  packageAuthorOwner,
 }: ImportantFilesViewProps) {
   const [activeFilePath, setActiveFilePath] = useState<string | null>(null)
   const [activeTab, setActiveTab] = useState<string | null>(null)
   const [copyState, setCopyState] = useState<"copy" | "copied">("copy")
+  const { session: user } = useGlobalStore()
 
   const handleCopy = () => {
+    if (activeTab === "ai-review" && aiReviewText) {
+      navigator.clipboard.writeText(aiReviewText || "")
+      setCopyState("copied")
+      setTimeout(() => setCopyState("copy"), 500)
+      return
+    }
     navigator.clipboard.writeText(activeFileContent)
     setCopyState("copied")
     setTimeout(() => setCopyState("copy"), 500)
@@ -131,20 +149,59 @@ export default function ImportantFilesView({
   }
 
   const renderAiReviewContent = () => {
+    const isOwner = user?.github_username === packageAuthorOwner
+
     if (!aiReviewText && !aiReviewRequested) {
       return (
-        <button
-          className="text-sm text-blue-600 dark:text-[#58a6ff] underline"
-          onClick={onRequestAiReview}
-        >
-          Request AI Review
-        </button>
+        <div className="flex flex-col items-center justify-center py-8 px-4">
+          <div className="text-center space-y-4 max-w-md">
+            <div className="flex justify-center">
+              <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
+                <SparklesIcon className="h-6 w-6 text-blue-600" />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <p className="text-sm text-gray-600">
+                Get detailed feedback and suggestions for improving your package
+                from our AI assistant.
+              </p>
+            </div>
+            {isOwner ? (
+              <Button
+                onClick={onRequestAiReview}
+                size="sm"
+                className="bg-blue-600 hover:bg-blue-700 text-white shadow-sm transition-all duration-200 hover:shadow-md"
+              >
+                <SparklesIcon className="h-4 w-4 mr-2" />
+                Request AI Review
+              </Button>
+            ) : (
+              <p className="text-sm text-gray-500">
+                Only the package owner can generate an AI review
+              </p>
+            )}
+          </div>
+        </div>
       )
     }
 
     if (!aiReviewText && aiReviewRequested) {
       return (
-        <p className="text-sm">AI review requested. Please check back later.</p>
+        <div className="flex flex-col items-center justify-center py-8 px-4">
+          <div className="text-center space-y-4 max-w-md">
+            <div className="flex justify-center">
+              <div className="w-12 h-12 bg-gray-200 rounded-full flex items-center justify-center">
+                <Loader2 className="h-6 w-6 text-gray-600 animate-spin" />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <p className="text-sm text-gray-600">
+                Our AI is analyzing your package. This usually takes a few
+                minutes. Please check back shortly.
+              </p>
+            </div>
+          </div>
+        </div>
       )
     }
 
@@ -162,6 +219,7 @@ export default function ImportantFilesView({
           package_release_id: partialActiveFile.package_release_id,
         }
       : null,
+    { keepPreviousData: true },
   )
   const activeFileContent = activeFileFull?.content_text || ""
 
@@ -210,14 +268,16 @@ export default function ImportantFilesView({
     )
   }
 
+  const isOwner = user?.github_username === packageAuthorOwner
+
   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 +294,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 +312,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]"
@@ -268,7 +328,8 @@ export default function ImportantFilesView({
           ))}
         </div>
         <div className="ml-auto flex items-center">
-          {activeFileContent && (
+          {((activeTab === "file" && activeFileContent) ||
+            (activeTab === "ai-review" && aiReviewText)) && (
             <button
               className="hover:bg-gray-200 dark:hover:bg-[#30363d] p-1 rounded-md transition-all duration-300"
               onClick={handleCopy}
@@ -281,13 +342,25 @@ export default function ImportantFilesView({
               <span className="sr-only">Copy</span>
             </button>
           )}
-          <button
-            className="hover:bg-gray-200 dark:hover:bg-[#30363d] p-1 rounded-md"
-            onClick={() => onEditClicked?.(activeFilePath)}
-          >
-            <Edit className="h-4 w-4" />
-            <span className="sr-only">Edit</span>
-          </button>
+          {activeTab === "ai-review" && aiReviewText && isOwner && (
+            <button
+              className="hover:bg-gray-200 dark:hover:bg-[#30363d] p-1 rounded-md ml-1"
+              onClick={onRequestAiReview}
+              title="Re-request AI Review"
+            >
+              <RefreshCcwIcon className="h-4 w-4" />
+              <span className="sr-only">Re-request AI Review</span>
+            </button>
+          )}
+          {activeTab === "file" && (
+            <button
+              className="hover:bg-gray-200 dark:hover:bg-[#30363d] p-1 rounded-md"
+              onClick={() => onEditClicked?.(activeFilePath)}
+            >
+              <Edit className="h-4 w-4" />
+              <span className="sr-only">Edit</span>
+            </button>
+          )}
         </div>
       </div>
       <div className="p-4 bg-white dark:bg-[#0d1117]">
@@ -295,7 +368,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

@@ -12,6 +12,7 @@ import {
   Pencil,
   GitForkIcon,
   DownloadIcon,
+  Package2,
 } from "lucide-react"
 import MainContentViewSelector from "./main-content-view-selector"
 import {
@@ -24,8 +25,11 @@ import {
 import { DownloadButtonAndMenu } from "@/components/DownloadButtonAndMenu"
 import { useCurrentPackageCircuitJson } from "../hooks/use-current-package-circuit-json"
 import { useLocation } from "wouter"
-import { Package } from "fake-snippets-api/lib/db/schema"
+import { Package, PackageFile } from "fake-snippets-api/lib/db/schema"
+import { usePackageFiles } from "@/hooks/use-package-files"
+import { useDownloadZip } from "@/hooks/use-download-zip"
 interface MainContentHeaderProps {
+  packageFiles: PackageFile[]
   activeView: string
   onViewChange: (view: string) => void
   onExportClicked?: (exportType: string) => void
@@ -33,6 +37,7 @@ interface MainContentHeaderProps {
 }
 
 export default function MainContentHeader({
+  packageFiles,
   activeView,
   onViewChange,
   packageInfo,
@@ -59,6 +64,14 @@ export default function MainContentHeader({
     setTimeout(() => setCopyCloneState("copy"), 2000)
   }
 
+  const { downloadZip } = useDownloadZip()
+
+  const handleDownloadZip = () => {
+    if (packageInfo && packageFiles) {
+      downloadZip(packageInfo, packageFiles)
+    }
+  }
+
   const { circuitJson } = useCurrentPackageCircuitJson()
 
   return (
@@ -70,7 +83,9 @@ export default function MainContentHeader({
 
       <div className="flex space-x-2">
         <DownloadButtonAndMenu
-          snippetUnscopedName={packageInfo?.unscoped_name}
+          unscopedName={packageInfo?.unscoped_name}
+          desiredImageType={activeView}
+          author={packageInfo?.owner_github_username ?? undefined}
           circuitJson={circuitJson}
         />
 
@@ -87,7 +102,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"
@@ -96,6 +111,15 @@ export default function MainContentHeader({
                 Edit Online
               </a>
             </DropdownMenuItem>
+
+            <DropdownMenuItem
+              disabled={!Boolean(packageInfo)}
+              onClick={handleDownloadZip}
+              className="cursor-pointer p-2 py-4"
+            >
+              <Package2 className="h-4 w-4 mx-3" />
+              Download ZIP
+            </DropdownMenuItem>
             <DropdownMenuSeparator />
 
             {/* Install Option */}

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

@@ -41,8 +41,8 @@ const MobileSidebar = ({
   const isLoggedIn = useGlobalStore((s) => Boolean(s.session))
   const isOwner =
     isLoggedIn &&
-    packageInfo?.creator_account_id ===
-      useGlobalStore((s) => s.session?.account_id)
+    packageInfo?.owner_github_username ===
+      useGlobalStore((s) => s.session?.github_username)
 
   const {
     Dialog: EditPackageDetailsDialog,