@tscircuit/fake-snippets 0.0.65 → 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/ShippingInformationForm.tsx

@@ -154,7 +154,7 @@ const ShippingInformationForm: React.FC = () => {
             <AlertDescription>
               Currently, only shipping to the US is supported.{" "}
               <a
-                href={`https://github.com/tscircuit/snippets/issues/new?title=${encodeURIComponent("Shipping to " + form.country)}&body=${encodeURIComponent("Please add support for shipping to " + form.country + ".")}`}
+                href={`https://github.com/tscircuit/tscircuit.com/issues/new?title=${encodeURIComponent("Shipping to " + form.country)}&body=${encodeURIComponent("Please add support for shipping to " + form.country + ".")}`}
                 target="_blank"
                 rel="noopener noreferrer"
                 className="font-medium underline"

package/src/components/TrendingPackagesCarousel.tsx

@@ -2,10 +2,46 @@ import { useQuery } from "react-query"
 import { useAxios } from "@/hooks/use-axios"
 import { StarFilledIcon } from "@radix-ui/react-icons"
 import { Link } from "wouter"
-import { Package, Snippet } from "fake-snippets-api/lib/db/schema"
-import { useEffect, useRef, useState } from "react"
+import { Package } from "fake-snippets-api/lib/db/schema"
+import { useRef, useState } from "react"
 import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
-import { OptimizedImage } from "./OptimizedImage"
+import { useGetFsMapHashForPackage } from "@/hooks/use-get-fsmap-hash-for-package"
+
+const CarouselItem = ({
+  pkg,
+  apiBaseUrl,
+}: { pkg: Package; apiBaseUrl: string }) => {
+  const fsMapHash = useGetFsMapHashForPackage(
+    pkg.latest_package_release_id ?? "",
+  )
+
+  return (
+    <Link href={`/${pkg.owner_github_username}/${pkg.unscoped_name}`}>
+      <div className="flex-shrink-0 w-[200px] bg-white p-3 py-2 rounded-lg shadow-sm border border-gray-200 hover:border-gray-300 transition-colors">
+        <div className="font-medium text-blue-600 mb-1 truncate text-sm">
+          {pkg.owner_github_username}/{pkg.unscoped_name}
+        </div>
+        <div className="mb-2 h-24 w-full bg-black rounded overflow-hidden">
+          {fsMapHash && (
+            <img
+              src={`${apiBaseUrl}/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.svg?${new URLSearchParams(
+                {
+                  fs_sha: fsMapHash,
+                },
+              ).toString()}`}
+              alt="PCB preview"
+              className="w-full h-full object-contain p-2 scale-[3] rotate-45 hover:scale-[3.5] transition-transform"
+            />
+          )}
+        </div>
+        <div className="flex items-center text-xs text-gray-500">
+          <StarFilledIcon className="w-3 h-3 mr-1" />
+          {pkg.star_count || 0} stars
+        </div>
+      </div>
+    </Link>
+  )
+}
 
 export const TrendingPackagesCarousel = () => {
   const axios = useAxios()
@@ -45,27 +81,11 @@ export const TrendingPackagesCarousel = () => {
             >
               {[...(trendingPackages ?? []), ...(trendingPackages ?? [])].map(
                 (pkg, i) => (
-                  <Link
+                  <CarouselItem
                     key={`${pkg.package_id}-${i}`}
-                    href={`/${pkg.owner_github_username}/${pkg.unscoped_name}`}
-                  >
-                    <div className="flex-shrink-0 w-[200px] bg-white p-3 py-2 rounded-lg shadow-sm border border-gray-200 hover:border-gray-300 transition-colors">
-                      <div className="font-medium text-blue-600 mb-1 truncate text-sm">
-                        {pkg.owner_github_username}/{pkg.unscoped_name}
-                      </div>
-                      <div className="mb-2 h-24 w-full bg-black rounded overflow-hidden">
-                        <OptimizedImage
-                          src={`${apiBaseUrl}/snippets/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.svg`}
-                          alt="PCB preview"
-                          className="w-full h-full object-contain p-2 scale-[3] rotate-45 hover:scale-[3.5] transition-transform"
-                        />
-                      </div>
-                      <div className="flex items-center text-xs text-gray-500">
-                        <StarFilledIcon className="w-3 h-3 mr-1" />
-                        {pkg.star_count || 0} stars
-                      </div>
-                    </div>
-                  </Link>
+                    pkg={pkg}
+                    apiBaseUrl={apiBaseUrl}
+                  />
                 ),
               )}
             </div>

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

@@ -24,24 +24,12 @@ import {
 import { DownloadButtonAndMenu } from "@/components/DownloadButtonAndMenu"
 import { useCurrentPackageCircuitJson } from "../hooks/use-current-package-circuit-json"
 import { useLocation } from "wouter"
-
-interface PackageInfo {
-  package_id: string
-  name: string
-  unscoped_name: string
-  owner_github_username: string
-  star_count: string
-  description: string
-  ai_description: string
-  creator_account_id?: string
-  owner_org_id?: string
-}
-
+import { Package } from "fake-snippets-api/lib/db/schema"
 interface MainContentHeaderProps {
   activeView: string
   onViewChange: (view: string) => void
   onExportClicked?: (exportType: string) => void
-  packageInfo?: PackageInfo
+  packageInfo?: Package
 }
 
 export default function MainContentHeader({
@@ -99,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,19 +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 (
@@ -208,6 +217,8 @@ export default function MobileSidebar({
   )
 }
 
+export default React.memo(MobileSidebar)
+
 function PreviewButton({
   view,
   onClick,

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

@@ -20,10 +20,11 @@ import {
 } from "@/hooks/use-package-stars"
 import { useOrderDialog } from "@tscircuit/runframe"
 import { useGlobalStore } from "@/hooks/use-global-store"
-import { PackageInfo } from "@/lib/types"
+import { Package as PackageType } from "fake-snippets-api/lib/db/schema"
+import { useSignIn } from "@/hooks/use-sign-in"
 
 interface PackageHeaderProps {
-  packageInfo?: PackageInfo
+  packageInfo?: PackageType
   isPrivate?: boolean
   isCurrentUserAuthor?: boolean
 }
@@ -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(
@@ -254,7 +259,7 @@ export default function PackageHeader({
         onClose={close}
         stage={stage}
         setStage={setStage}
-        packageReleaseId={packageInfo?.latest_package_release_id}
+        packageReleaseId={packageInfo?.latest_package_release_id ?? ""}
       />
     </header>
   )

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

@@ -1,10 +1,11 @@
 "use client"
 import { Skeleton } from "@/components/ui/skeleton"
+import { useGetFsMapHashForPackage } from "@/hooks/use-get-fsmap-hash-for-package"
 import { usePreviewImages } from "@/hooks/use-preview-images"
 import type { Package } from "fake-snippets-api/lib/db/schema"
 
 interface ViewPlaceholdersProps {
-  packageInfo?: Pick<Package, "name">
+  packageInfo?: Pick<Package, "name" | "latest_package_release_id">
   onViewChange?: (view: "3d" | "pcb" | "schematic") => void
 }
 
@@ -12,8 +13,12 @@ export default function PreviewImageSquares({
   packageInfo,
   onViewChange,
 }: ViewPlaceholdersProps) {
+  const fsMapHash = useGetFsMapHashForPackage(
+    packageInfo?.latest_package_release_id ?? "",
+  )
   const { availableViews } = usePreviewImages({
     packageName: packageInfo?.name,
+    fsMapHash: fsMapHash ?? "",
   })
 
   const handleViewClick = (viewId: string) => {

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

@@ -18,7 +18,7 @@ import Footer from "@/components/Footer"
 import PackageHeader from "./package-header"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { useLocation } from "wouter"
-import { PackageInfo } from "@/lib/types"
+import { Package } from "fake-snippets-api/lib/db/schema"
 
 interface PackageFile {
   package_file_id: string
@@ -32,7 +32,7 @@ interface PackageFile {
 interface RepoPageContentProps {
   packageFiles?: PackageFile[]
   importantFilePaths?: string[]
-  packageInfo?: PackageInfo
+  packageInfo?: Package
   onFileClicked?: (file: PackageFile) => void
   onEditClicked?: () => void
 }
@@ -179,8 +179,8 @@ export default function RepoPageContent({
               importantFiles={importantFiles}
               isLoading={!packageFiles}
               onEditClicked={onEditClicked}
-              aiDescription={packageInfo?.ai_description}
-              aiUsageInstructions={packageInfo?.ai_usage_instructions}
+              aiDescription={packageInfo?.ai_description ?? ""}
+              aiUsageInstructions={packageInfo?.ai_usage_instructions ?? ""}
             />
           </div>
 

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

@@ -1,24 +1,12 @@
 "use client"
 
-import { useState } from "react"
+import { Package } from "fake-snippets-api/lib/db/schema"
 import SidebarAboutSection from "./sidebar-about-section"
 import SidebarReleasesSection from "./sidebar-releases-section"
 import PreviewImageSquares from "./preview-image-squares"
-import { PackageFile } from "fake-snippets-api/lib/db/schema"
-
-interface PackageInfo {
-  name: string
-  unscoped_name: string
-  owner_github_username: string
-  star_count: string
-  description: string
-  ai_description: string
-  creator_account_id?: string
-  owner_org_id?: string
-}
 
 interface SidebarProps {
-  packageInfo?: PackageInfo
+  packageInfo?: Package
   isLoading?: boolean
   onViewChange?: (view: "3d" | "pcb" | "schematic") => void
 }

package/src/components/ViewSnippetSidebar.tsx

@@ -87,7 +87,7 @@ export default function ViewSnippetSidebar({
                               Help us out!{" "}
                               <a
                                 className="text-blue-500 hover:underline font-semibold"
-                                href="https://github.com/tscircuit/snippets"
+                                href="https://github.com/tscircuit/tscircuit.com"
                               >
                                 Check out our Github
                               </a>

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}