@tscircuit/fake-snippets 0.0.66 → 0.0.67

package/src/components/PackageSearchResults.tsx

@@ -0,0 +1,87 @@
+import React from "react"
+import { Package } from "fake-snippets-api/lib/db/schema"
+import { PackageCardSkeleton } from "./PackageCardSkeleton"
+import { Search } from "lucide-react"
+import { PackageCard } from "./PackageCard"
+
+interface PackageSearchResultsProps {
+  isLoading: boolean
+  error: unknown
+  filteredPackages: Package[] | undefined
+  apiBaseUrl: string
+  emptyStateMessage: string
+}
+
+const PackageGrid = ({
+  packages,
+  baseUrl,
+}: { packages: Package[]; baseUrl: string }) => (
+  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+    {packages.map((pkg) => (
+      <PackageCard
+        key={pkg.package_id}
+        pkg={pkg}
+        baseUrl={baseUrl}
+        showOwner={true}
+      />
+    ))}
+  </div>
+)
+
+const LoadingState = () => (
+  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+    {[...Array(6)].map((_, i) => (
+      <PackageCardSkeleton key={i} />
+    ))}
+  </div>
+)
+
+const ErrorState = () => (
+  <div className="bg-red-50 border border-red-200 text-red-700 p-6 rounded-xl shadow-sm max-w-2xl mx-auto">
+    <div className="flex items-start">
+      <div className="mr-4 bg-red-100 p-2 rounded-full">
+        <Search className="w-6 h-6 text-red-600" />
+      </div>
+      <div>
+        <h3 className="text-lg font-semibold mb-2">Error Loading packages</h3>
+        <p className="text-red-600">
+          We couldn't load the trending packages. Please try again later.
+        </p>
+      </div>
+    </div>
+  </div>
+)
+
+const EmptyState = ({
+  message,
+}: {
+  message?: string
+}) => (
+  <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 Packages
+    </h3>
+    {message && (
+      <p className="text-slate-500 max-w-md mx-auto mb-6">{message}</p>
+    )}
+  </div>
+)
+
+const PackageSearchResults: React.FC<PackageSearchResultsProps> = ({
+  isLoading,
+  error,
+  filteredPackages,
+  apiBaseUrl,
+  emptyStateMessage,
+}) => {
+  if (isLoading) return <LoadingState />
+  if (error) return <ErrorState />
+  if (!filteredPackages?.length)
+    return <EmptyState message={emptyStateMessage} />
+  return <PackageGrid packages={filteredPackages} baseUrl={apiBaseUrl} />
+}
+
+export default PackageSearchResults

package/src/components/PackagesList.tsx

@@ -3,7 +3,7 @@ import { ChevronDown, ChevronUp, Star } from "lucide-react"
 import { Link } from "wouter"
 import { Package } from "fake-snippets-api/lib/db/schema"
 
-interface PackageListProps {
+interface PackagesListProps {
   title: string
   packages?: Package[]
   showAll?: boolean
@@ -11,13 +11,13 @@ interface PackageListProps {
   maxItems?: number
 }
 
-export const PackageList = ({
+export const PackagesList = ({
   title,
   packages = [],
   showAll = false,
   onToggleShowAll,
   maxItems = 5,
-}: PackageListProps) => {
+}: PackagesListProps) => {
   const displayedPackages = showAll ? packages : packages.slice(0, maxItems)
 
   return (

package/src/components/PageSearchComponent.tsx

@@ -5,9 +5,9 @@ import React, { useState } from "react"
 import { useQuery } from "react-query"
 import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
 import { Search } from "lucide-react"
-import { SnippetCard } from "./SnippetCard"
 import { Button } from "./ui/button"
 import { PackageCardSkeleton } from "./PackageCardSkeleton"
+import { PackageCard } from "./PackageCard"
 
 interface PageSearchComponentProps {
   onResultsFetched?: (results: any[]) => void
@@ -28,16 +28,16 @@ const PageSearchComponent: React.FC<PageSearchComponentProps> = ({
   )
 
   const { data: searchResults, isLoading: isLoadingSearchResults } = useQuery(
-    ["snippetSearch", searchQuery],
+    ["packageSearch", searchQuery],
     async () => {
       if (!searchQuery) return []
-      const { data } = await axios.get("/snippets/search", {
+      const { data } = await axios.get("/packages/search", {
         params: { q: searchQuery },
       })
       if (onResultsFetched) {
-        onResultsFetched(data.snippets)
+        onResultsFetched(data.packages)
       }
-      return data.snippets
+      return data.packages
     },
     { enabled: Boolean(searchQuery) },
   )
@@ -94,10 +94,10 @@ const PageSearchComponent: React.FC<PageSearchComponentProps> = ({
         </div>
       ) : searchResults && searchResults.length > 0 ? (
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-          {searchResults.map((snippet: any) => (
-            <SnippetCard
-              key={snippet.snippet_id}
-              snippet={snippet}
+          {searchResults.map((pkg: any) => (
+            <PackageCard
+              key={pkg.package_id}
+              pkg={pkg}
               baseUrl={snippetsBaseApiUrl}
               showOwner={true}
               withLink={true}

package/src/components/ViewPackagePage/components/ShikiCodeViewer.tsx

@@ -1,43 +1,20 @@
+import { useShikiHighlighter } from "@/hooks/use-shiki-highlighter"
 import { useEffect, useMemo } from "react"
 import { useQuery } from "react-query"
-import { createHighlighter, Highlighter } from "shiki"
-
-let globalHighlighter$: any
-let globalHighlighter: Highlighter
-
-const fileExtensionsToLanguages = {
-  ts: "typescript",
-  tsx: "typescript",
-  js: "javascript",
-  jsx: "javascript",
-}
 
 export const ShikiCodeViewer = ({
   code,
   filePath,
 }: { code: string; filePath: string }) => {
-  useEffect(() => {
-    async function setupHighlighter() {
-      if (globalHighlighter$) return
-      globalHighlighter$ = await createHighlighter({
-        langs: ["typescript"],
-        themes: ["vitesse-light"],
-      })
-      globalHighlighter = await globalHighlighter$
-    }
-    setupHighlighter()
-  }, [])
+  const { highlighter } = useShikiHighlighter()
 
   const html = useMemo(
     () =>
-      globalHighlighter?.codeToHtml(code, {
-        lang:
-          fileExtensionsToLanguages[
-            filePath.split(".").pop() as keyof typeof fileExtensionsToLanguages
-          ] || "typescript",
+      highlighter?.codeToHtml(code, {
+        lang: "tsx",
         theme: "vitesse-light",
       }),
-    [filePath, code, globalHighlighter],
+    [filePath, code, highlighter],
   )
 
   if (!html) {

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

@@ -87,14 +87,14 @@ export default function MainContentHeader({
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end" className="w-72">
-            <DropdownMenuItem
-              onClick={() => {
-                setLocation(`/editor?package_id=${packageInfo?.package_id}`)
-              }}
-              className="cursor-pointer p-2 py-4"
-            >
-              <Pencil className="h-4 w-4 mx-3" />
-              Edit Online
+            <DropdownMenuItem asChild>
+              <a
+                href={`/editor?package_id=${packageInfo?.package_id}`}
+                className="cursor-pointer p-2 py-4"
+              >
+                <Pencil className="h-4 w-4 mx-3" />
+                Edit Online
+              </a>
             </DropdownMenuItem>
             <DropdownMenuSeparator />
 

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

@@ -6,21 +6,20 @@ 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 { useState, useEffect, useMemo } from "react"
+import React, { useState, useEffect, useMemo, useCallback } from "react"
 import { useCurrentPackageInfo } from "@/hooks/use-current-package-info"
 import { usePackageFile } from "@/hooks/use-package-files"
 import { getLicenseFromLicenseContent } from "@/lib/getLicenseFromLicenseContent"
-import { PackageInfo } from "@/lib/types"
 
 interface MobileSidebarProps {
   isLoading?: boolean
   onViewChange: (view: "schematic" | "pcb" | "3d") => void
 }
 
-export default function MobileSidebar({
+const MobileSidebar = ({
   isLoading = false,
   onViewChange,
-}: MobileSidebarProps) {
+}: MobileSidebarProps) => {
   const { packageInfo, refetch: refetchPackageInfo } = useCurrentPackageInfo()
   const { data: licenseFileMeta } = usePackageFile({
     package_release_id: packageInfo?.latest_package_release_id ?? "",
@@ -34,8 +33,11 @@ export default function MobileSidebar({
       return getLicenseFromLicenseContent(licenseFileMeta?.content_text)
     }
     return undefined
-  }, [licenseFileMeta?.content_text])
-  const topics = packageInfo?.is_package ? ["Package"] : ["Board"]
+  }, [licenseFileMeta?.content_text, packageInfo?.latest_license])
+  const topics = useMemo(
+    () => (packageInfo?.is_package ? ["Package"] : ["Board"]),
+    [packageInfo?.is_package],
+  )
   const isLoggedIn = useGlobalStore((s) => Boolean(s.session))
   const isOwner =
     isLoggedIn &&
@@ -59,20 +61,26 @@ export default function MobileSidebar({
     }
   }, [packageInfo])
 
-  const handlePackageUpdate = (newDescription: string, newWebsite: string) => {
-    setLocalDescription(newDescription)
-    setLocalWebsite(newWebsite)
-    refetchPackageInfo()
-  }
+  const handlePackageUpdate = useCallback(
+    (newDescription: string, newWebsite: string) => {
+      setLocalDescription(newDescription)
+      setLocalWebsite(newWebsite)
+      refetchPackageInfo()
+    },
+    [refetchPackageInfo],
+  )
 
   const { availableViews } = usePreviewImages({
     packageName: packageInfo?.name,
     fsMapHash: packageInfo?.latest_package_release_id ?? "",
   })
 
-  const handleViewClick = (viewId: string) => {
-    onViewChange?.(viewId as "3d" | "pcb" | "schematic")
-  }
+  const handleViewClick = useCallback(
+    (viewId: string) => {
+      onViewChange?.(viewId as "3d" | "pcb" | "schematic")
+    },
+    [onViewChange],
+  )
 
   if (isLoading) {
     return (
@@ -209,6 +217,8 @@ export default function MobileSidebar({
   )
 }
 
+export default React.memo(MobileSidebar)
+
 function PreviewButton({
   view,
   onClick,

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

@@ -21,6 +21,7 @@ import {
 import { useOrderDialog } from "@tscircuit/runframe"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { Package as PackageType } from "fake-snippets-api/lib/db/schema"
+import { useSignIn } from "@/hooks/use-sign-in"
 
 interface PackageHeaderProps {
   packageInfo?: PackageType
@@ -40,7 +41,11 @@ export default function PackageHeader({
     packageInfo?.owner_github_username ===
     useGlobalStore((s) => s.session?.github_username)
   const isLoggedIn = useGlobalStore((s) => s.session != null)
-  const { OrderDialog, isOpen, open, close, stage, setStage } = useOrderDialog()
+  const signIn = useSignIn()
+  const { OrderDialog, isOpen, open, close, stage, setStage } = useOrderDialog({
+    onSignIn: signIn,
+    isLoggedIn,
+  })
   const { data: starData, isLoading: isStarDataLoading } =
     usePackageStarsByName(packageInfo?.name ?? null)
   const { addStar, removeStar } = usePackageStarMutationByName(

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

@@ -23,7 +23,7 @@ import {
 } from "@valtown/codemirror-ts"
 import { EditorView } from "codemirror"
 import { useEffect, useMemo, useRef, useState } from "react"
-import ts from "typescript"
+import tsModule from "typescript"
 import CodeEditorHeader from "@/components/package-port/CodeEditorHeader"
 import { useCodeCompletionApi } from "@/hooks/use-code-completion-ai-api"
 import FileSidebar from "../FileSidebar"
@@ -134,10 +134,10 @@ export const CodeEditor = ({
     ;(window as any).__DEBUG_CODE_EDITOR_FS_MAP = fsMap
 
     createDefaultMapFromCDN(
-      { target: ts.ScriptTarget.ES2022 },
+      { target: tsModule.ScriptTarget.ES2022 },
       "5.6.3",
       true,
-      ts,
+      tsModule,
     ).then((defaultFsMap) => {
       defaultFsMap.forEach((content, filename) => {
         fsMap.set(filename, content)
@@ -145,11 +145,12 @@ export const CodeEditor = ({
     })
 
     const system = createSystem(fsMap)
-    const env = createVirtualTypeScriptEnvironment(system, [], ts, {
-      jsx: ts.JsxEmit.ReactJSX,
+
+    const env = createVirtualTypeScriptEnvironment(system, [], tsModule, {
+      jsx: tsModule.JsxEmit.ReactJSX,
       declaration: true,
       allowJs: true,
-      target: ts.ScriptTarget.ES2022,
+      target: tsModule.ScriptTarget.ES2022,
       resolveJsonModule: true,
     })
 
@@ -160,7 +161,7 @@ export const CodeEditor = ({
     // Initialize ATA
     const ataConfig: ATABootstrapConfig = {
       projectName: "my-project",
-      typescript: ts,
+      typescript: tsModule,
       logger: console,
       fetcher: async (input: RequestInfo | URL, init?: RequestInit) => {
         const registryPrefixes = [
@@ -336,12 +337,14 @@ export const CodeEditor = ({
 
               const start = info.textSpan.start
               const end = start + info.textSpan.length
-              const content = ts.displayPartsToString(info.displayParts || [])
+              const content = tsModule?.displayPartsToString(
+                info.displayParts || [],
+              )
 
               const dom = document.createElement("div")
               if (highlighter) {
                 dom.innerHTML = highlighter.codeToHtml(content, {
-                  lang: "typescript",
+                  lang: "tsx",
                   themes: {
                     light: "github-light",
                     dark: "github-dark",
@@ -456,7 +459,7 @@ export const CodeEditor = ({
     return () => {
       view.destroy()
     }
-  }, [!isStreaming, currentFile, code !== ""])
+  }, [!isStreaming, currentFile, code !== "", Boolean(highlighter)])
 
   const updateCurrentEditorContent = (newContent: string) => {
     if (viewRef.current) {

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

@@ -101,7 +101,7 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
         markdown: "markdown",
       }
 
-      const parser = parserMap[fileExtension] || "typescript"
+      const parser = parserMap[fileExtension] || "tsx"
       const formattedCode = window.prettier.format(currentContent, {
         semi: false,
         parser: parser,

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

@@ -315,7 +315,7 @@ export default function EditorNav({
       <div className="flex items-center justify-end -space-x-1">
         <div className="flex mx-2 items-center space-x-1">
           {pkg && <TypeBadge type={`${packageType ?? pkg.snippet_type}`} />}
-          <Button
+          {/* <Button
             variant="ghost"
             size="sm"
             disabled={hasUnsavedChanges || isSaving || !pkg}
@@ -323,7 +323,7 @@ export default function EditorNav({
           >
             <Sparkles className="mr-1 h-3 w-3" />
             Edit with AI
-          </Button>
+          </Button> */}
           <DownloadButtonAndMenu
             snippetUnscopedName={pkg?.unscoped_name}
             circuitJson={circuitJson}

package/src/hooks/use-global-store.ts

@@ -30,4 +30,5 @@ export const useGlobalStore = create<Store>()(
 
 useGlobalStore.subscribe((state, prevState) => {
   ;(window as any).globalStore = state
+  window.TSCIRCUIT_REGISTRY_TOKEN = state.session?.token ?? null
 })

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/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/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}

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 && (