@tscircuit/fake-snippets 0.0.108 → 0.0.110

package/src/components/Header2.tsx

@@ -1,7 +1,6 @@
 import { Button } from "@/components/ui/button"
-import { CircuitBoard, Search, Menu, X } from "lucide-react"
+import { Search, Menu, X } from "lucide-react"
 import { Link } from "wouter"
-import { PrefetchPageLink } from "./PrefetchPageLink"
 import { HeaderLogin } from "./HeaderLogin"
 import SearchComponent from "./SearchComponent"
 import HeaderDropdown from "./HeaderDropdown"
@@ -60,36 +59,28 @@ export const Header2 = () => {
     <>
       <header className="sticky top-0 z-50 w-full border-b bg-white md:bg-white/80 md:backdrop-blur supports-[backdrop-filter]:md:bg-white/60">
         <div className="container mx-auto flex h-16 items-center justify-between px-2 md:px-6">
-          <PrefetchPageLink
-            href="/"
-            className="flex select-none items-center gap-2"
-          >
-            <CircuitBoard className="h-6 w-6" />
-            <span className="text-lg font-bold">tscircuit</span>
-          </PrefetchPageLink>
+          <Link href="/" className="flex select-none items-center">
+            <span className="bg-blue-500 px-2 py-1 rounded-md text-white text-sm font-semibold sm:text-base">
+              tscircuit
+            </span>
+          </Link>
 
           {/* Desktop Navigation */}
           <nav className="hidden md:flex gap-6">
             {isLoggedIn && (
-              <PrefetchPageLink
+              <Link
                 className="text-sm font-medium hover:underline underline-offset-4"
                 href="/dashboard"
               >
                 Dashboard
-              </PrefetchPageLink>
+              </Link>
             )}
-            <PrefetchPageLink
+            <Link
               className="text-sm font-medium hover:underline underline-offset-4"
               href="/quickstart"
             >
               Editor
-            </PrefetchPageLink>
-            <PrefetchPageLink
-              className="text-sm font-medium hover:underline underline-offset-4"
-              href="/datasheets"
-            >
-              Datasheets
-            </PrefetchPageLink>
+            </Link>
             <a
               className="text-sm font-medium hover:underline underline-offset-4"
               href="https://docs.tscircuit.com"
@@ -131,11 +122,11 @@ export const Header2 = () => {
             {isLoggedIn ? (
               <HeaderLogin />
             ) : (
-              <PrefetchPageLink href="/quickstart">
+              <Link href="/quickstart">
                 <Button size="sm" className="text-xs px-3 py-1">
                   Get Started
                 </Button>
-              </PrefetchPageLink>
+              </Link>
             )}
             <button
               className="p-2"
@@ -154,28 +145,21 @@ export const Header2 = () => {
               <nav className="mb-4">
                 <div className="flex flex-col items-center gap-1">
                   {isLoggedIn && (
-                    <PrefetchPageLink
+                    <Link
                       className="text-sm font-medium hover:underline underline-offset-4 py-2 w-full text-center"
                       href="/dashboard"
                       onClick={() => setMobileMenuOpen(false)}
                     >
                       Dashboard
-                    </PrefetchPageLink>
+                    </Link>
                   )}
-                  <PrefetchPageLink
+                  <Link
                     className="text-sm font-medium hover:underline underline-offset-4 py-2 w-full text-center"
                     href="/quickstart"
                     onClick={() => setMobileMenuOpen(false)}
                   >
                     Editor
-                  </PrefetchPageLink>
-                  <PrefetchPageLink
-                    className="text-sm font-medium hover:underline underline-offset-4 py-2 w-full text-center"
-                    href="/datasheets"
-                    onClick={() => setMobileMenuOpen(false)}
-                  >
-                    Datasheets
-                  </PrefetchPageLink>
+                  </Link>
                   <a
                     className="text-sm font-medium hover:underline underline-offset-4 py-2 w-full text-center"
                     href="https://docs.tscircuit.com"

package/src/components/HeaderDropdown.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react"
 import { Button } from "@/components/ui/button"
 import {
   DropdownMenu,
@@ -7,9 +8,10 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { cn } from "@/lib/utils"
 import { ChevronDown, FileUp, Upload, Zap } from "lucide-react"
-import { PrefetchPageLink } from "./PrefetchPageLink"
+import { Link } from "wouter"
 
 export default function HeaderDropdown() {
+  const [open, setOpen] = useState(false)
   const blankTemplates = [
     { name: "Blank Circuit Board", type: "board", badgeColor: "bg-blue-500" },
     {
@@ -32,7 +34,7 @@ export default function HeaderDropdown() {
   ]
 
   return (
-    <DropdownMenu>
+    <DropdownMenu open={open} onOpenChange={setOpen}>
       <DropdownMenuTrigger asChild>
         <Button
           size="sm"
@@ -44,38 +46,41 @@ export default function HeaderDropdown() {
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-fit">
         <DropdownMenuItem asChild>
-          <PrefetchPageLink
+          <Link
             href="/quickstart"
             className="flex items-center cursor-pointer"
+            onClick={() => setOpen(false)}
           >
             <Zap className="mr-2 h-3 w-3" />
             Quickstart Templates
-          </PrefetchPageLink>
+          </Link>
         </DropdownMenuItem>
         {blankTemplates.map((template, index) => (
           <DropdownMenuItem key={index} asChild disabled={template.disabled}>
-            <a
+            <Link
               href={`/editor?template=${template.name.toLowerCase().replace(/ /g, "-")}`}
               className={cn(
                 "flex items-center cursor-pointer",
                 template.disabled && "opacity-50 cursor-not-allowed",
               )}
+              onClick={() => !template.disabled && setOpen(false)}
             >
               <span
                 className={`w-2 h-2 rounded-full mr-2 ${template.badgeColor}`}
               />
               {template.name}
-            </a>
+            </Link>
           </DropdownMenuItem>
         ))}
         <DropdownMenuItem asChild>
-          <PrefetchPageLink
+          <Link
             href="/quickstart"
             className="flex items-center cursor-pointer"
+            onClick={() => setOpen(false)}
           >
             <Upload className="mr-2 h-3 w-3" />
             Import Part
-          </PrefetchPageLink>
+          </Link>
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>

package/src/components/HeaderLogin.tsx

@@ -1,4 +1,3 @@
-import React from "react"
 import { Button } from "@/components/ui/button"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import {
@@ -9,15 +8,16 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { User } from "lucide-react"
 import { useGlobalStore } from "@/hooks/use-global-store"
-import { useAccountBalance } from "@/hooks/use-account-balance"
 import { useSignIn } from "@/hooks/use-sign-in"
+import { Link } from "wouter"
+import { useState } from "react"
 
 export const HeaderLogin = () => {
   const session = useGlobalStore((s) => s.session)
   const isLoggedIn = Boolean(session)
   const setSession = useGlobalStore((s) => s.setSession)
   const signIn = useSignIn()
-  const { data: accountBalance } = useAccountBalance()
+  const [isOpen, setIsOpen] = useState(false)
 
   if (!isLoggedIn) {
     return (
@@ -31,7 +31,7 @@ export const HeaderLogin = () => {
   }
 
   return (
-    <DropdownMenu>
+    <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
       <DropdownMenuTrigger asChild>
         <Avatar className="w-8 h-8 login-avatar">
           <AvatarImage
@@ -43,33 +43,61 @@ export const HeaderLogin = () => {
           </AvatarFallback>
         </Avatar>
       </DropdownMenuTrigger>
-      <DropdownMenuContent className="ml-1 md:ml-0 md:mr-1">
-        <DropdownMenuItem asChild className="text-gray-500 text-xs" disabled>
+      <DropdownMenuContent className="ml-1 mr-1 md:ml-0 md:mr-1">
+        {/* <DropdownMenuItem asChild className="text-gray-500 text-xs" disabled>
           <div>
             AI Usage $
             {accountBalance?.monthly_ai_budget_used_usd.toFixed(2) ?? "0.00"} /
             $5.00
           </div>
-        </DropdownMenuItem>
+        </DropdownMenuItem> */}
         <DropdownMenuItem asChild>
-          <a href={`/${session?.github_username}`} className="cursor-pointer">
+          <Link
+            href={`/${session?.github_username}`}
+            className="cursor-pointer"
+            onClick={() => setIsOpen(false)}
+          >
             My Profile
-          </a>
+          </Link>
         </DropdownMenuItem>
         <DropdownMenuItem asChild>
-          <a href="/dashboard" className="cursor-pointer">
+          <Link
+            href="/dashboard"
+            className="cursor-pointer"
+            onClick={() => setIsOpen(false)}
+          >
             Dashboard
-          </a>
+          </Link>
         </DropdownMenuItem>
         <DropdownMenuItem asChild>
-          <a href="/settings" className="cursor-pointer">
+          <Link
+            href={`/${session?.github_username}/settings`}
+            className="cursor-pointer"
+            onClick={() => setIsOpen(false)}
+          >
             Settings
-          </a>
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuItem asChild>
+          <Link
+            href="/orgs/new"
+            className="cursor-pointer"
+            onClick={() => setIsOpen(false)}
+          >
+            Create Organization
+          </Link>
         </DropdownMenuItem>
-        <DropdownMenuItem asChild onClick={() => setSession(null)}>
-          <a href="/" className="cursor-pointer">
+        <DropdownMenuItem asChild>
+          <Link
+            href="/"
+            className="cursor-pointer"
+            onClick={() => {
+              setSession(null)
+              setIsOpen(false)
+            }}
+          >
             Sign Out
-          </a>
+          </Link>
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>

package/src/components/HiddenFilesDropdown.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import {
   DropdownMenu,
   DropdownMenuContent,

package/src/components/NotFound.tsx

@@ -1,5 +1,5 @@
 import { Button } from "@/components/ui/button"
-import { PrefetchPageLink } from "@/components/PrefetchPageLink"
+import { Link } from "wouter"
 
 export function NotFound({ heading = "Page not found" }: { heading?: string }) {
   return (
@@ -20,16 +20,16 @@ export function NotFound({ heading = "Page not found" }: { heading?: string }) {
           address.
         </p>
         <div className="flex flex-col sm:flex-row gap-4">
-          <PrefetchPageLink href="/">
+          <Link href="/">
             <Button size="lg" className="bg-blue-500 hover:bg-blue-600">
               Return Home
             </Button>
-          </PrefetchPageLink>
-          <PrefetchPageLink href="/search">
+          </Link>
+          <Link href="/search">
             <Button size="lg" variant="outline">
               Search Packages
             </Button>
-          </PrefetchPageLink>
+          </Link>
         </div>
       </div>
     </section>

package/src/components/PackageBreadcrumb.tsx

@@ -1,4 +1,4 @@
-import { PrefetchPageLink } from "@/components/PrefetchPageLink"
+import { Link } from "wouter"
 import {
   Breadcrumb,
   BreadcrumbList,
@@ -29,7 +29,7 @@ export function PackageBreadcrumb({
         {/* Author */}
         <BreadcrumbItem>
           <BreadcrumbLink asChild>
-            <PrefetchPageLink href={`/${author}`}>{author}</PrefetchPageLink>
+            <Link href={`/${author}`}>{author}</Link>
           </BreadcrumbLink>
         </BreadcrumbItem>
         <BreadcrumbSeparator>
@@ -39,9 +39,7 @@ export function PackageBreadcrumb({
         {/* Package */}
         <BreadcrumbItem>
           <BreadcrumbLink asChild>
-            <PrefetchPageLink href={`/${packageName}`}>
-              {unscopedName || packageName}
-            </PrefetchPageLink>
+            <Link href={`/${packageName}`}>{unscopedName || packageName}</Link>
           </BreadcrumbLink>
         </BreadcrumbItem>
         <BreadcrumbSeparator>
@@ -58,9 +56,7 @@ export function PackageBreadcrumb({
                 <BreadcrumbPage>releases</BreadcrumbPage>
               ) : (
                 <BreadcrumbLink asChild>
-                  <PrefetchPageLink href={`/${packageName}/releases`}>
-                    releases
-                  </PrefetchPageLink>
+                  <Link href={`/${packageName}/releases`}>releases</Link>
                 </BreadcrumbLink>
               )}
             </BreadcrumbItem>
@@ -76,11 +72,9 @@ export function PackageBreadcrumb({
             <BreadcrumbItem>
               {currentPage === "builds" ? (
                 <BreadcrumbLink asChild>
-                  <PrefetchPageLink
-                    href={`/${packageName}/releases/${releaseVersion}`}
-                  >
+                  <Link href={`/${packageName}/releases/${releaseVersion}`}>
                     {releaseVersion}
-                  </PrefetchPageLink>
+                  </Link>
                 </BreadcrumbLink>
               ) : (
                 <BreadcrumbPage>{releaseVersion}</BreadcrumbPage>

package/src/components/PackageCard.tsx

@@ -19,7 +19,6 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { SnippetType, SnippetTypeIcon } from "./SnippetTypeIcon"
 import { timeAgo } from "@/lib/utils/timeAgo"
-import { ImageWithFallback } from "./ImageWithFallback"
 import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
 
 export interface PackageCardProps {

package/src/components/PackageSearchResults.tsx

@@ -28,7 +28,7 @@ const PackageGrid = ({
   </div>
 )
 
-const LoadingState = () => (
+export 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} />

package/src/components/PrefetchPageLink.tsx

@@ -101,7 +101,13 @@ export const PrefetchPageLink = ({
   }, [inView, href])
 
   return (
-    <Link {...props} href={href} className={className} ref={ref}>
+    <Link
+      {...props}
+      href={href}
+      className={className}
+      draggable={false}
+      ref={ref}
+    >
       {children}
     </Link>
   )

package/src/components/ProfileRouter.tsx

@@ -0,0 +1,32 @@
+import React from "react"
+import { useParams } from "wouter"
+import { useOrgByGithubHandle } from "@/hooks/use-org-by-github-handle"
+import { OrganizationProfilePageContent } from "@/pages/organization-profile"
+import { UserProfilePage } from "@/pages/user-profile"
+import NotFoundPage from "@/pages/404"
+import { FullPageLoader } from "@/App"
+
+const ProfileRouter: React.FC = () => {
+  const { username } = useParams()
+  const {
+    data: organization,
+    isLoading,
+    error,
+  } = useOrgByGithubHandle(username || null)
+
+  if (!username) {
+    return <NotFoundPage heading="Username Not Provided" />
+  }
+
+  if (isLoading) {
+    return <FullPageLoader />
+  }
+
+  if (organization && !organization.is_personal_org && !error) {
+    return <OrganizationProfilePageContent org={organization} />
+  }
+
+  return <UserProfilePage />
+}
+
+export default ProfileRouter

package/src/components/SearchComponent.tsx

@@ -5,7 +5,7 @@ import React, { useEffect, useRef, useState } from "react"
 import { useQuery } from "react-query"
 import { Alert } from "./ui/alert"
 import { useApiBaseUrl } from "@/hooks/use-packages-base-api-url"
-import { PrefetchPageLink } from "./PrefetchPageLink"
+import { Link } from "wouter"
 import { CircuitBoard } from "lucide-react"
 import { cn } from "@/lib/utils"
 
@@ -42,9 +42,9 @@ const LinkWithNewTabHandling = ({
     )
   }
   return (
-    <PrefetchPageLink onClick={onClick} className={className} href={href}>
+    <Link onClick={onClick} className={className} href={href}>
       {children}
-    </PrefetchPageLink>
+    </Link>
   )
 }
 
@@ -60,7 +60,7 @@ const SearchComponent: React.FC<SearchComponentProps> = ({
   const resultsRef = useRef<HTMLDivElement>(null)
   const inputRef = useRef<HTMLInputElement>(null)
   const [location, setLocation] = useLocation()
-  const snippetsBaseApiUrl = useApiBaseUrl()
+  const apiBaseUrl = useApiBaseUrl()
 
   const { data: searchResults, isLoading } = useQuery(
     ["packageSearch", searchQuery],
@@ -137,10 +137,13 @@ const SearchComponent: React.FC<SearchComponentProps> = ({
       <Input
         autoComplete="off"
         spellCheck={false}
+        autoCorrect="off"
+        autoCapitalize="off"
         ref={inputRef}
         type="search"
+        aria-autocomplete="none"
         placeholder="Search"
-        className="pl-4 focus:border-blue-500 placeholder-gray-400 text-sm"
+        className="pl-4 focus:border-blue-500 placeholder-gray-400 text-sm select-none"
         value={searchQuery}
         onChange={(e) => {
           setSearchQuery(e.target.value)
@@ -195,10 +198,10 @@ 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-50 w-80 max-h-screen overflow-y-auto overflow-x-visible"
+          className="absolute top-full md:left-0 right-0 no-scrollbar 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">
+            <ul className="divide-y divide-gray-200 no-scrollbar">
               {searchResults.map((pkg: any, index: number) => (
                 <li
                   key={pkg.package_id}
@@ -222,8 +225,9 @@ const SearchComponent: React.FC<SearchComponentProps> = ({
                   >
                     <div className="w-12 h-12 overflow-hidden mr-2 flex-shrink-0 rounded-sm bg-gray-50 border flex items-center justify-center">
                       <img
-                        src={`${snippetsBaseApiUrl}/snippets/images/${pkg.name}/pcb.svg`}
+                        src={`${apiBaseUrl}/packages/images/${pkg.name}/pcb.svg`}
                         alt={`PCB preview for ${pkg.name}`}
+                        draggable={false}
                         className="w-12 h-12 object-contain p-1 scale-[4] rotate-45"
                         onError={(e) => {
                           e.currentTarget.style.display = "none"

package/src/components/UserCard.tsx

@@ -0,0 +1,80 @@
+import React from "react"
+import { Link } from "wouter"
+import { Account } from "fake-snippets-api/lib/db/schema"
+import { User } from "lucide-react"
+
+export interface UserCardProps {
+  /** The account data to display */
+  account: Account | Omit<Account, "account_id">
+  /** Whether to render the card with a link to the user profile page */
+  withLink?: boolean
+  /** Custom class name for the card container */
+  className?: string
+  /** Custom onClick handler */
+  onClick?: (account: Account | Omit<Account, "account_id">) => void
+}
+
+export const UserCard: React.FC<UserCardProps> = ({
+  account,
+  withLink = true,
+  className = "",
+  onClick,
+}) => {
+  const handleClick = () => {
+    if (onClick) {
+      onClick(account)
+    } else if (!withLink) {
+      window.location.href = `/${account.github_username}`
+    }
+  }
+
+  const cardContent = (
+    <div
+      className={`border p-4 rounded-md hover:shadow-md transition-shadow flex flex-col gap-4 cursor-pointer ${className}`}
+      onClick={!withLink ? handleClick : undefined}
+    >
+      <div className="flex items-start gap-4">
+        <div className="w-16 h-16 flex-shrink-0 rounded-md overflow-hidden bg-gray-50 border flex items-center justify-center">
+          <img
+            src={`https://github.com/${account.github_username}.png`}
+            alt={`${account.github_username} avatar`}
+            className="object-cover h-full w-full transition-transform duration-300 hover:scale-110"
+            onError={(e) => {
+              const target = e.target as HTMLImageElement
+              target.style.display = "none"
+              target.nextElementSibling?.classList.remove("hidden")
+              target.nextElementSibling?.classList.add("flex")
+            }}
+          />
+          <div className="hidden items-center justify-center h-full w-full">
+            <User className="w-6 h-6 text-gray-300" />
+          </div>
+        </div>
+        <div className="flex-1 min-w-0 flex flex-col justify-center my-auto">
+          <div className="flex justify-between items-start">
+            <h2 className="text-md font-semibold truncate pr-[30px]">
+              <span className="text-gray-900">{account.github_username}</span>
+            </h2>
+          </div>
+          <p className="text-sm text-gray-500 truncate max-w-xs">
+            @{account.github_username}
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+
+  if (withLink) {
+    return (
+      <Link
+        key={account.github_username}
+        href={`/${account.github_username}`}
+        onClick={onClick ? () => onClick(account) : undefined}
+      >
+        {cardContent}
+      </Link>
+    )
+  }
+
+  return cardContent
+}

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

@@ -1,11 +1,17 @@
 import { useShikiHighlighter } from "@/hooks/use-shiki-highlighter"
-import { useEffect, useMemo } from "react"
-import { useQuery } from "react-query"
+import { useMemo } from "react"
 import { Skeleton } from "@/components/ui/skeleton"
 
 // Pre-randomized array to avoid flickering on re-renders
-const SKELETON_WIDTHS = ["w-2/3", "w-1/4", "w-5/6", "w-1/3", "w-1/2", "w-3/4"]
-
+export const SKELETON_WIDTHS = [
+  "w-2/3",
+  "w-1/4",
+  "w-5/6",
+  "w-1/3",
+  "w-1/2",
+  "w-3/4",
+]
+const PLACEHOLDER_SHIKI_HTML = `<pre class="shiki vitesse-light" style="background-color:#ffffff;color:#393a34" tabindex="0"><code><span class="line"></span></code></pre>`
 export const ShikiCodeViewer = ({
   code,
   filePath,
@@ -24,17 +30,20 @@ export const ShikiCodeViewer = ({
     [filePath, code, highlighter],
   )
 
-  if (!html) {
+  if (html && html?.trim() !== PLACEHOLDER_SHIKI_HTML) {
     return (
-      <div className="text-sm p-4">
-        {SKELETON_WIDTHS.map((w, i) => (
-          <Skeleton key={i} className={`h-4 mb-2 ${w}`} />
-        ))}
-      </div>
+      <div
+        className="text-sm shiki"
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
     )
   }
 
   return (
-    <div className="text-sm shiki" dangerouslySetInnerHTML={{ __html: html }} />
+    <div className="text-sm p-4">
+      {SKELETON_WIDTHS.map((w, i) => (
+        <Skeleton key={i} className={`h-4 mb-2 ${w}`} />
+      ))}
+    </div>
   )
 }

package/src/components/ViewPackagePage/components/build-status.tsx

@@ -14,7 +14,7 @@ export interface BuildStatusProps {
 
 export const BuildStatus = ({ step, packageReleaseId }: BuildStatusProps) => {
   const { author, packageName } = useParams()
-  const href = `/${author}/${packageName}/builds?package_release_id=${packageReleaseId}`
+  const href = `/${author}/${packageName}/releases/${packageReleaseId}`
 
   return (
     <Link href={href} className="flex items-center gap-2">