@tscircuit/fake-snippets 0.0.66 → 0.0.68

package/src/hooks/use-shiki-highlighter.ts

@@ -1,18 +1,25 @@
 import { useState, useEffect } from "react"
-import { getSingletonHighlighter, Highlighter } from "shiki"
+import { createHighlighterCore, type HighlighterCore } from "shiki/core"
+import { createOnigurumaEngine } from "shiki/engine/oniguruma"
 
-let cachedHighlighter: Highlighter | null = null
+let cachedHighlighter: HighlighterCore | null = null
 
 export const useShikiHighlighter = () => {
-  const [highlighter, setHighlighter] = useState<Highlighter | null>(null)
+  const [highlighter, setHighlighter] = useState<HighlighterCore | null>(null)
   const [isLoading, setIsLoading] = useState(true)
 
   useEffect(() => {
     const fetchHighlighter = async () => {
       if (!cachedHighlighter) {
-        cachedHighlighter = await getSingletonHighlighter({
-          themes: ["github-dark", "github-light"],
-          langs: ["typescript", "tsx"],
+        cachedHighlighter = await createHighlighterCore({
+          themes: [
+            import("@shikijs/themes/github-dark"),
+            import("@shikijs/themes/github-light"),
+            import("@shikijs/themes/vitesse-light"),
+          ],
+          langs: [import("@shikijs/langs/tsx")],
+          // `shiki/wasm` contains the wasm binary inlined as base64 string.
+          engine: createOnigurumaEngine(import("shiki/wasm")),
         })
       }
       setHighlighter(cachedHighlighter)

package/src/hooks/useFileManagement.ts

@@ -0,0 +1,59 @@
+import { Dispatch, SetStateAction } from "react"
+import { isValidFileName } from "@/lib/utils/isValidFileName"
+import {
+  CodeAndPreviewState,
+  CreateFileProps,
+} from "../components/package-port/CodeAndPreview"
+
+export function useFileManagement(
+  state: CodeAndPreviewState,
+  setState: Dispatch<SetStateAction<CodeAndPreviewState>>,
+) {
+  const handleCreateFile = async ({
+    newFileName,
+    setErrorMessage,
+    onFileSelect,
+    setNewFileName,
+    setIsCreatingFile,
+  }: CreateFileProps) => {
+    newFileName = newFileName.trim()
+    if (!newFileName) {
+      setErrorMessage("File name cannot be empty")
+      return
+    }
+    if (!isValidFileName(newFileName)) {
+      setErrorMessage(
+        'Invalid file name. Avoid using special characters like <>:"/\\|?*',
+      )
+      return
+    }
+    setErrorMessage("")
+
+    const fileExists = state.pkgFilesWithContent.some(
+      (file) => file.path === newFileName,
+    )
+
+    if (fileExists) {
+      setErrorMessage("A file with this name already exists")
+      return
+    }
+
+    setState((prev) => {
+      const updatedFiles = [
+        ...prev.pkgFilesWithContent,
+        { path: newFileName, content: "" },
+      ]
+      return {
+        ...prev,
+        pkgFilesWithContent: updatedFiles,
+      } as CodeAndPreviewState
+    })
+    onFileSelect(newFileName)
+    setIsCreatingFile(false)
+    setNewFileName("")
+  }
+
+  return {
+    handleCreateFile,
+  }
+}

package/src/lib/download-fns/download-gltf.ts

@@ -1,19 +1,12 @@
-import { AnyCircuitElement } from "circuit-json"
-import { convertCircuitJsonToAssemblySvg } from "circuit-to-svg"
 import { GLTFExporter, type GLTFExporterOptions } from "three-stdlib"
 import { saveAs } from "file-saver"
 import * as THREE from "three"
 
-export const downloadGltf = async (
-  circuitJson: AnyCircuitElement[],
-  fileName: string,
-) => {
-  const threeJsObject = window.TSCIRCUIT_3D_OBJECT_REF
-    ?.current as THREE.Object3D
-
+export const downloadGltf = async (fileName: string) => {
+  const threeJsObject = window.TSCIRCUIT_3D_OBJECT_REF as THREE.Object3D
   if (!threeJsObject) {
     throw new Error(
-      "To download the 3D model, please open the 3D view first and run the snippet",
+      "To download the 3D model, please open the 3D view first and run the package",
     )
   }
 

package/src/lib/handleManualEditsImport.tsx

@@ -1,4 +1,4 @@
-import { FileName } from "@/components/CodeEditorHeader"
+import { FileName } from "@/components/package-port/CodeEditorHeader"
 
 export const handleManualEditsImport = (
   files: Record<string, string>,

package/src/lib/types.ts

@@ -1,9 +1,11 @@
+import { Object3D, Object3DEventMap } from "three"
+
 declare global {
   interface Window {
     TSCIRCUIT_REGISTRY_API_BASE_URL: string
-    TSCIRCUIT_REGISTRY_TOKEN: string
+    TSCIRCUIT_REGISTRY_TOKEN: string | null
     TSCIRCUIT_STRIPE_CHECKOUT_BASE_URL: string
-    TSCIRCUIT_3D_OBJECT_REF: any
+    TSCIRCUIT_3D_OBJECT_REF: Object3D<Object3DEventMap> | undefined
     __DEBUG_CODE_EDITOR_FS_MAP: Map<string, string>
     prettier: {
       format: (code: string, options: any) => string

package/src/lib/utils/isValidFileName.ts

@@ -0,0 +1,5 @@
+export const isValidFileName = (name: string) => {
+  // Basic checks for file naming conventions
+  const invalidChars = /[<>:"/\\|?*]/
+  return name.length > 0 && !invalidChars.test(name)
+}

package/src/pages/dashboard.tsx

@@ -9,8 +9,7 @@ import { Edit2, KeyRound } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { PrefetchPageLink } from "@/components/PrefetchPageLink"
-import { PackageList } from "@/components/PackagesList"
-import { SnippetList } from "@/components/SnippetList"
+import { PackagesList } from "@/components/PackagesList"
 import { Helmet } from "react-helmet-async"
 import { useSignIn } from "@/hooks/use-sign-in"
 import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
@@ -175,14 +174,14 @@ export const DashboardPage = () => {
             )}
           </div>
           <div className="md:w-1/4">
-            <PackageList
+            <PackagesList
               title="Trending Packages"
               packages={trendingPackages}
               showAll={showAllTrending}
               onToggleShowAll={() => setShowAllTrending(!showAllTrending)}
             />
             <div className="mt-8">
-              <PackageList
+              <PackagesList
                 title="Latest Packages"
                 packages={latestPackages}
                 showAll={showAllLatest}
@@ -195,6 +194,7 @@ export const DashboardPage = () => {
           <DeleteDialog
             packageId={packageToDelete.package_id}
             packageName={packageToDelete.unscoped_name}
+            packageOwner={packageToDelete.owner_github_username ?? ""}
           />
         )}
       </div>

package/src/pages/editor.tsx

@@ -1,45 +1,51 @@
-import { CodeAndPreview } from "@/components/CodeAndPreview"
+import { CodeAndPreview } from "@/components/package-port/CodeAndPreview"
 import Footer from "@/components/Footer"
 import Header from "@/components/Header"
-import { useCurrentSnippetId } from "@/hooks/use-current-snippet-id"
-import { useSnippet } from "@/hooks/use-snippet"
 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 { snippetId } = useCurrentSnippetId()
-  const { data: snippet, isLoading, error } = useSnippet(snippetId)
+  const { packageId } = useCurrentPackageId()
+  const { data: pkg, isLoading, error } = usePackage(packageId)
+  const fsMapHash = useGetFsMapHashForPackage(
+    pkg?.latest_package_release_id ?? "",
+  )
 
   return (
     <div className="overflow-x-hidden">
       <Helmet>
         <title>
-          {snippet
-            ? `${snippet.unscoped_name} - tscircuit`
-            : "tscircuit editor"}
+          {pkg ? `${pkg.unscoped_name} - tscircuit` : "tscircuit editor"}
         </title>
-        {snippet && (
+        {pkg && (
           <>
             <meta
               property="og:title"
-              content={`${snippet.unscoped_name} - tscircuit`}
+              content={`${pkg.unscoped_name} - tscircuit`}
             />
             <meta
               property="og:image"
-              content={`https://registry-api.tscircuit.com/snippets/images/${snippet.owner_name}/${snippet.unscoped_name}/pcb.png`}
+              content={`https://registry-api.tscircuit.com/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.png?${new URLSearchParams(
+                {
+                  fs_sha: fsMapHash ?? "",
+                },
+              ).toString()}`}
             />
             <meta name="twitter:card" content="summary_large_image" />
             <meta
               name="twitter:image"
-              content={`https://registry-api.tscircuit.com/snippets/images/${snippet.owner_name}/${snippet.unscoped_name}/pcb.png`}
+              content={`https://registry-api.tscircuit.com/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.png`}
             />
           </>
         )}
       </Helmet>
       <Header />
-      {!error && <CodeAndPreview snippet={snippet} />}
+      {!error && <CodeAndPreview pkg={pkg} />}
       {error && error.status === 404 && (
         <div className="w-full h-[calc(100vh-20rem)] text-xl text-center flex justify-center items-center">
-          Snippet not found
+          Package not found
         </div>
       )}
       {error && error.status !== 404 && (

package/src/pages/latest.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react"
 import { useQuery } from "react-query"
 import { useAxios } from "@/hooks/use-axios"
-import { Snippet } from "fake-snippets-api/lib/db/schema"
+import { Package } from "fake-snippets-api/lib/db/schema"
 import Header from "@/components/Header"
 import Footer from "@/components/Footer"
 import {
@@ -23,8 +23,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select"
-import { SnippetCard } from "@/components/SnippetCard"
 import { PackageCardSkeleton } from "@/components/PackageCardSkeleton"
+import { PackageCard } from "@/components/PackageCard"
 
 const LatestPage: React.FC = () => {
   const axios = useAxios()
@@ -33,30 +33,30 @@ const LatestPage: React.FC = () => {
   const [category, setCategory] = useState("all")
 
   const {
-    data: snippets,
+    data: packages,
     isLoading,
     error,
-  } = useQuery<Snippet[]>(
-    ["latestSnippets", category],
+  } = useQuery<Package[]>(
+    ["latestPackages", category],
     async () => {
       const params = category !== "all" ? { tag: category } : {}
-      const response = await axios.get("/snippets/list_latest", { params })
-      return response.data.snippets
+      const response = await axios.get("/packages/list_latest", { params })
+      return response.data.packages
     },
     {
       keepPreviousData: true,
     },
   )
 
-  const filteredSnippets = snippets?.filter((snippet) => {
+  const filteredPackages = packages?.filter((pkg) => {
     if (!searchQuery) return true
 
     const query = searchQuery.toLowerCase().trim()
 
     const searchableFields = [
-      snippet.unscoped_name.toLowerCase(),
-      snippet.owner_name.toLowerCase(),
-      (snippet.description || "").toLowerCase(),
+      pkg.unscoped_name.toLowerCase(),
+      pkg.owner_github_username?.toLowerCase() ?? "",
+      (pkg.description || "").toLowerCase(),
     ]
 
     return searchableFields.some((field) => {
@@ -73,7 +73,7 @@ const LatestPage: React.FC = () => {
           <div className="flex items-center gap-2 mb-3">
             <Calendar className="w-6 h-6 text-blue-500" />
             <h1 className="text-4xl font-bold text-gray-900">
-              Latest Snippets
+              Latest Packages
             </h1>
           </div>
           <p className="text-lg text-gray-600 mb-4">
@@ -99,7 +99,7 @@ const LatestPage: React.FC = () => {
               <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
               <Input
                 type="text"
-                placeholder="Search latest snippets..."
+                placeholder="Search latest packages..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
                 className="pl-10"
@@ -154,40 +154,39 @@ const LatestPage: React.FC = () => {
               </div>
               <div>
                 <h3 className="text-lg font-semibold mb-2">
-                  Error Loading Snippets
+                  Error Loading Packages
                 </h3>
                 <p className="text-red-600">
-                  We couldn't load the latest snippets. Please try again later.
+                  We couldn't load the latest packages. Please try again later.
                 </p>
               </div>
             </div>
           </div>
-        ) : filteredSnippets?.length === 0 ? (
+        ) : filteredPackages?.length === 0 ? (
           <div className="text-center py-12 px-4">
             <div className="bg-slate-50 inline-flex rounded-full p-4 mb-4">
               <Search className="w-8 h-8 text-slate-400" />
             </div>
             <h3 className="text-xl font-medium text-slate-900 mb-2">
-              No Matching Snippets
+              No Matching Packages
             </h3>
             <p className="text-slate-500 max-w-md mx-auto mb-6">
               {searchQuery
-                ? `No snippets match your search for "${searchQuery}".`
+                ? `No packages match your search for "${searchQuery}".`
                 : category !== "all"
-                  ? `No ${category} snippets found in the latest list.`
-                  : "There are no new snippets at the moment."}
+                  ? `No ${category} packages found in the latest list.`
+                  : "There are no new packages at the moment."}
             </p>
           </div>
         ) : (
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-            {filteredSnippets
+            {filteredPackages
               ?.sort((a, b) => b.created_at.localeCompare(a.created_at))
-              ?.map((snippet) => (
-                <SnippetCard
-                  key={snippet.snippet_id}
-                  snippet={snippet}
+              ?.map((pkg) => (
+                <PackageCard
+                  key={pkg.package_id}
+                  pkg={pkg}
                   baseUrl={apiBaseUrl}
-                  showOwner={true}
                 />
               ))}
           </div>

package/src/pages/quickstart.tsx

@@ -3,7 +3,7 @@ import { useQuery } from "react-query"
 import { useAxios } from "@/hooks/use-axios"
 import Header from "@/components/Header"
 import Footer from "@/components/Footer"
-import { Package, Snippet } from "fake-snippets-api/lib/db/schema"
+import { Package } from "fake-snippets-api/lib/db/schema"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { TypeBadge } from "@/components/TypeBadge"
@@ -48,7 +48,7 @@ export const QuickstartPage = () => {
       <Header />
       <div className="container mx-auto px-4 py-8">
         <div className="mb-8 hidden md:block">
-          <h2 className="text-xl font-semibold mb-4">Recent Snippets</h2>
+          <h2 className="text-xl font-semibold mb-4">Recent Packages</h2>
           {isLoading ? (
             <div>Loading...</div>
           ) : (
@@ -63,7 +63,7 @@ export const QuickstartPage = () => {
                 .map((pkg) => (
                   <PrefetchPageLink
                     key={pkg.package_id}
-                    href={`/editor?snippet_id=${pkg.package_id}`}
+                    href={`/editor?package_id=${pkg.package_id}`}
                   >
                     <Card className="hover:shadow-md transition-shadow rounded-md flex flex-col h-full">
                       <CardHeader className="pb-0 p-4">
@@ -85,7 +85,7 @@ export const QuickstartPage = () => {
         </div>
 
         <div className="mb-8">
-          <h2 className="text-xl font-semibold mb-4">Start Blank Snippet</h2>
+          <h2 className="text-xl font-semibold mb-4">Start Blank Packages</h2>
           <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
             {blankTemplates.map((template, index) => (
               <PrefetchPageLink
@@ -117,7 +117,7 @@ export const QuickstartPage = () => {
         </div>
 
         <div className="mt-12">
-          <h2 className="text-xl font-semibold mb-4">Import as Snippet</h2>
+          <h2 className="text-xl font-semibold mb-4">Import as Package</h2>
           <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
             {[
               { name: "KiCad Footprint", type: "footprint" },

package/src/pages/search.tsx

@@ -1,13 +1,92 @@
+import React, { useState, useEffect } from "react"
+import { useQuery } from "react-query"
+import { useAxios } from "@/hooks/use-axios"
+import { useSearchParams } from "wouter"
 import Header from "@/components/Header"
 import Footer from "@/components/Footer"
-import PageSearchComponent from "@/components/PageSearchComponent"
-import { useState } from "react"
-import { Search, Tag, Filter } from "lucide-react"
-import { Badge } from "@/components/ui/badge"
-import { PrefetchPageLink } from "@/components/PrefetchPageLink"
+import { Input } from "@/components/ui/input"
+import { Search } from "lucide-react"
+import PackageSearchResults from "@/components/PackageSearchResults"
+import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Package } from "fake-snippets-api/lib/db/schema"
 
 export const SearchPage = () => {
-  const [searchResults, setSearchResults] = useState<any[]>([])
+  const axios = useAxios()
+  const apiBaseUrl = useSnippetsBaseApiUrl()
+  const [searchParams, setSearchParams] = useSearchParams()
+
+  const [searchQuery, setSearchQuery] = useState(searchParams.get("q") || "")
+  const [category, setCategory] = useState(
+    searchParams.get("category") || "all",
+  )
+  const [sortBy, setSortBy] = useState(searchParams.get("sort") || "stars")
+
+  useEffect(() => {
+    const params = new URLSearchParams()
+    if (searchQuery) params.set("q", searchQuery)
+    if (category !== "all") params.set("category", category)
+    if (sortBy !== "stars") params.set("sort", sortBy)
+    setSearchParams(params)
+  }, [searchQuery, category, sortBy, setSearchParams])
+
+  const {
+    data: packages,
+    isLoading,
+    error,
+  } = useQuery(
+    ["packageSearch", searchQuery, category],
+    async () => {
+      const params = new URLSearchParams()
+      if (searchQuery) params.append("q", searchQuery)
+      if (category !== "all") params.append("category", category)
+
+      const response = await axios.post(`/packages/search`, {
+        query: searchQuery,
+      })
+      return response.data.packages
+    },
+    { enabled: Boolean(searchQuery), keepPreviousData: true },
+  )
+
+  const filteredPackages = packages
+    ?.filter((pkg: Package) => {
+      if (!searchQuery) return true
+
+      const query = searchQuery.toLowerCase().trim()
+      const searchableFields = [
+        pkg.unscoped_name.toLowerCase(),
+        (pkg.owner_github_username || "").toLowerCase(),
+        (pkg.description || "").toLowerCase(),
+        pkg.description?.toLowerCase(),
+      ]
+
+      return searchableFields.some((field) => {
+        const queryWords = query.split(/\s+/).filter((word) => word.length > 0)
+        if (!field) return false
+        return queryWords.every((word) => field.includes(word))
+      })
+    })
+    ?.sort((a: Package, b: Package) => {
+      if (sortBy === "stars") {
+        return (b.star_count || 0) - (a.star_count || 0)
+      } else if (sortBy === "newest") {
+        return (
+          new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime()
+        )
+      } else if (sortBy === "oldest") {
+        return (
+          new Date(a.updated_at).getTime() - new Date(b.updated_at).getTime()
+        )
+      }
+      return 0
+    })
 
   return (
     <div className="min-h-screen flex flex-col">
@@ -17,26 +96,46 @@ export const SearchPage = () => {
           <div className="max-w-8xl mx-auto">
             <div className="mb-6">
               <div className="flex items-center gap-2 mb-3">
-                <Search className="w-6 h-6 text-blue-500" />
                 <h1 className="text-3xl font-bold text-gray-900">
-                  Search tscircuit Packages
+                  Search Packages
                 </h1>
               </div>
-              <div className="flex flex-wrap gap-3">
-                <PrefetchPageLink href="/trending">
-                  <Badge
-                    variant="secondary"
-                    className="px-3 py-1 cursor-pointer hover:bg-gray-200"
-                  >
-                    <Tag className="w-3.5 h-3.5 mr-1" />
-                    <span>Browse Packages</span>
-                  </Badge>
-                </PrefetchPageLink>
+              <div className="flex flex-col sm:flex-row gap-4 mb-4">
+                <div className="relative flex-grow">
+                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
+                  <Input
+                    type="search"
+                    placeholder="Search packages..."
+                    className="pl-10"
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    aria-label="Search packages"
+                    role="searchbox"
+                  />
+                </div>
+                <Select value={sortBy} onValueChange={setSortBy}>
+                  <SelectTrigger className="w-[140px]">
+                    <SelectValue placeholder="Sort By" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="stars">Most Starred</SelectItem>
+                    <SelectItem value="newest">Newest</SelectItem>
+                    <SelectItem value="oldest">Oldest</SelectItem>
+                  </SelectContent>
+                </Select>
               </div>
             </div>
 
-            <PageSearchComponent
-              onResultsFetched={(results) => setSearchResults(results)}
+            <PackageSearchResults
+              isLoading={isLoading}
+              error={error}
+              filteredPackages={filteredPackages}
+              apiBaseUrl={apiBaseUrl}
+              emptyStateMessage={
+                searchQuery
+                  ? `No packages match your search for "${searchQuery}".`
+                  : "Please enter a search query to find packages."
+              }
             />
           </div>
         </div>
@@ -45,3 +144,5 @@ export const SearchPage = () => {
     </div>
   )
 }
+
+export default SearchPage