@tscircuit/fake-snippets 0.0.88 → 0.0.90

package/src/components/DownloadButtonAndMenu.tsx

@@ -13,24 +13,31 @@ import { downloadFabricationFiles } from "@/lib/download-fns/download-fabricatio
 import { downloadSchematicSvg } from "@/lib/download-fns/download-schematic-svg"
 import { downloadReadableNetlist } from "@/lib/download-fns/download-readable-netlist"
 import { downloadAssemblySvg } from "@/lib/download-fns/download-assembly-svg"
-import { downloadPcbSvg } from "@/lib/download-fns/download-pcb-svg"
 import { usePcbDownloadDialog } from "@/components/dialogs/pcb-download-dialog"
 import { downloadKicadFiles } from "@/lib/download-fns/download-kicad-files"
 import { AnyCircuitElement } from "circuit-json"
 import { ChevronDown, Download, Hammer } from "lucide-react"
 import { downloadGltf } from "@/lib/download-fns/download-gltf"
+import { downloadPngImage } from "@/lib/download-fns/download-png-utils"
+import { ImageFormat } from "@/lib/download-fns/download-circuit-png"
 import { CubeIcon } from "@radix-ui/react-icons"
 
 interface DownloadButtonAndMenuProps {
   className?: string
-  snippetUnscopedName: string | undefined
+  unscopedName?: string
+  author?: string
   circuitJson?: AnyCircuitElement[] | null
+  desiredImageType?: string
+  offerMultipleImageFormats?: boolean
 }
 
 export function DownloadButtonAndMenu({
   className,
-  snippetUnscopedName,
+  unscopedName,
+  author,
+  desiredImageType = "pcb",
   circuitJson,
+  offerMultipleImageFormats = false,
 }: DownloadButtonAndMenuProps) {
   const notImplemented = useNotImplementedToast()
   const { Dialog: PcbDownloadDialog, openDialog: openPcbDownloadDialog } =
@@ -65,13 +72,13 @@ export function DownloadButtonAndMenu({
             <ChevronDown className="w-4 h-4 ml-1" />
           </Button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent>
+        <DropdownMenuContent className="!z-[101]">
           <DropdownMenuItem
             className="text-xs"
             onSelect={() => {
               downloadCircuitJson(
                 circuitJson,
-                snippetUnscopedName || "circuit" + ".json",
+                unscopedName || "circuit" + ".json",
               )
             }}
           >
@@ -85,7 +92,7 @@ export function DownloadButtonAndMenu({
             className="text-xs"
             onClick={async () => {
               try {
-                await downloadGltf(snippetUnscopedName || "circuit")
+                await downloadGltf(unscopedName || "circuit")
               } catch (error: any) {
                 toast({
                   title: "Error Downloading 3D Model",
@@ -106,7 +113,7 @@ export function DownloadButtonAndMenu({
             onClick={async () => {
               await downloadFabricationFiles({
                 circuitJson,
-                snippetUnscopedName: snippetUnscopedName || "snippet",
+                snippetUnscopedName: unscopedName || "snippet",
               }).catch((error) => {
                 console.error(error)
                 console.log(error, error.stack)
@@ -137,10 +144,7 @@ export function DownloadButtonAndMenu({
           <DropdownMenuItem
             className="text-xs"
             onSelect={() => {
-              downloadKicadFiles(
-                circuitJson,
-                snippetUnscopedName || "kicad_project",
-              )
+              downloadKicadFiles(circuitJson, unscopedName || "kicad_project")
             }}
           >
             <Download className="mr-1 h-3 w-3" />
@@ -153,10 +157,7 @@ export function DownloadButtonAndMenu({
           <DropdownMenuItem
             className="text-xs"
             onSelect={() => {
-              downloadSchematicSvg(
-                circuitJson,
-                snippetUnscopedName || "circuit",
-              )
+              downloadSchematicSvg(circuitJson, unscopedName || "circuit")
             }}
           >
             <Download className="mr-1 h-3 w-3" />
@@ -168,7 +169,7 @@ export function DownloadButtonAndMenu({
           <DropdownMenuItem
             className="text-xs"
             onSelect={() => {
-              downloadAssemblySvg(circuitJson, snippetUnscopedName || "circuit")
+              downloadAssemblySvg(circuitJson, unscopedName || "circuit")
             }}
           >
             <Download className="mr-1 h-3 w-3" />
@@ -192,7 +193,7 @@ export function DownloadButtonAndMenu({
           <DropdownMenuItem
             className="text-xs"
             onSelect={() => {
-              downloadDsnFile(circuitJson, snippetUnscopedName || "circuit")
+              downloadDsnFile(circuitJson, unscopedName || "circuit")
             }}
           >
             <Download className="mr-1 h-3 w-3" />
@@ -204,10 +205,7 @@ export function DownloadButtonAndMenu({
           <DropdownMenuItem
             className="text-xs"
             onClick={() => {
-              downloadReadableNetlist(
-                circuitJson,
-                snippetUnscopedName || "circuit",
-              )
+              downloadReadableNetlist(circuitJson, unscopedName || "circuit")
             }}
           >
             <Download className="mr-1 h-3 w-3" />
@@ -219,10 +217,7 @@ export function DownloadButtonAndMenu({
           <DropdownMenuItem
             className="text-xs"
             onSelect={() => {
-              downloadSimpleRouteJson(
-                circuitJson,
-                snippetUnscopedName || "circuit",
-              )
+              downloadSimpleRouteJson(circuitJson, unscopedName || "circuit")
             }}
           >
             <Download className="mr-1 h-3 w-3" />
@@ -231,11 +226,94 @@ export function DownloadButtonAndMenu({
               json
             </span>
           </DropdownMenuItem>
+
+          {!offerMultipleImageFormats && (
+            <DropdownMenuItem
+              className="text-xs"
+              onClick={() => {
+                const desiredImageFormat = [
+                  "pcb",
+                  "schematic",
+                  "assembly",
+                  "3d",
+                ].includes(desiredImageType)
+                  ? desiredImageType
+                  : "pcb"
+                downloadPngImage({
+                  circuitJson,
+                  unscopedName,
+                  author,
+                  format: desiredImageFormat as ImageFormat,
+                })
+              }}
+            >
+              <Download className="mr-1 h-3 w-3" />
+              <span className="flex-grow mr-6">Image PNG</span>
+              <span className="text-[0.6rem] opacity-80 bg-teal-600 text-white font-mono rounded-md px-1 text-center py-0.5 mr-1">
+                png
+              </span>
+            </DropdownMenuItem>
+          )}
+          {offerMultipleImageFormats && (
+            <>
+              <DropdownMenuItem
+                className="text-xs"
+                onClick={() =>
+                  downloadPngImage({
+                    circuitJson,
+                    unscopedName,
+                    author,
+                    format: "schematic",
+                  })
+                }
+              >
+                <Download className="mr-1 h-3 w-3" />
+                <span className="flex-grow mr-6">Schematic PNG</span>
+                <span className="text-[0.6rem] opacity-80 bg-teal-600 text-white font-mono rounded-md px-1 text-center py-0.5 mr-1">
+                  png
+                </span>
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                className="text-xs"
+                onClick={() =>
+                  downloadPngImage({
+                    circuitJson,
+                    unscopedName,
+                    author,
+                    format: "pcb",
+                  })
+                }
+              >
+                <Download className="mr-1 h-3 w-3" />
+                <span className="flex-grow mr-6">PCB PNG</span>
+                <span className="text-[0.6rem] opacity-80 bg-teal-600 text-white font-mono rounded-md px-1 text-center py-0.5 mr-1">
+                  png
+                </span>
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                className="text-xs"
+                onClick={() =>
+                  downloadPngImage({
+                    circuitJson,
+                    unscopedName,
+                    author,
+                    format: "assembly",
+                  })
+                }
+              >
+                <Download className="mr-1 h-3 w-3" />
+                <span className="flex-grow mr-6">Assembly PNG</span>
+                <span className="text-[0.6rem] opacity-80 bg-teal-600 text-white font-mono rounded-md px-1 text-center py-0.5 mr-1">
+                  png
+                </span>
+              </DropdownMenuItem>
+            </>
+          )}
         </DropdownMenuContent>
       </DropdownMenu>
       <PcbDownloadDialog
         circuitJson={circuitJson}
-        fileName={snippetUnscopedName || "circuit"}
+        fileName={unscopedName || "circuit"}
       />
     </div>
   )

package/src/components/FileSidebar.tsx

@@ -167,6 +167,16 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
     }
   }
 
+  const handleCreateFileBlur = () => {
+    if (newFileName.trim() === "") {
+      setIsCreatingFile(false)
+      setNewFileName("")
+      setErrorMessage("")
+      return
+    }
+    handleCreateFileInline()
+  }
+
   const toggleSidebar = () => {
     setSidebarOpen(!sidebarOpen)
     setErrorMessage("")
@@ -204,7 +214,7 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
             value={newFileName}
             spellCheck={false}
             onChange={(e) => setNewFileName(e.target.value)}
-            onBlur={handleCreateFileInline}
+            onBlur={handleCreateFileBlur}
             onKeyDown={(e) => {
               if (e.key === "Enter") {
                 handleCreateFileInline()

package/src/components/Header2.tsx

@@ -8,6 +8,7 @@ import HeaderDropdown from "./HeaderDropdown"
 import { useState } from "react"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { Analytics } from "./Analytics"
+import CmdKMenu from "./CmdKMenu"
 
 const SearchButtonComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false)
@@ -57,10 +58,13 @@ export const Header2 = () => {
     <>
       <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
         <div className="container mx-auto flex h-16 items-center justify-between px-2 md:px-6">
-          <div className="flex items-center gap-2">
+          <PrefetchPageLink
+            href="/"
+            className="flex select-none items-center gap-2"
+          >
             <CircuitBoard className="h-6 w-6" />
             <span className="text-lg font-bold">tscircuit</span>
-          </div>
+          </PrefetchPageLink>
           <nav className="flex md:hidden">
             {isLoggedIn && (
               <Link
@@ -120,6 +124,7 @@ export const Header2 = () => {
           </div>
         </div>
       </header>
+      <CmdKMenu />
       <Analytics />
     </>
   )

package/src/components/PackageBuildsPage/LogContent.tsx

@@ -16,35 +16,38 @@ export const LogContent = ({
   error,
 }: {
   logs: Array<{
-    type: "info" | "success" | "error"
-    message: string
-    timestamp: string
+    type?: "info" | "success" | "error"
+    msg?: string
+    timestamp?: string
   }>
   error?: ErrorObject | string | null
 }) => {
   return (
     <div className="font-mono text-xs space-y-1 min-w-0">
-      {logs.map(
-        (log, i) =>
-          log.timestamp &&
-          log.message && (
-            <div
-              key={i}
-              className={`break-words whitespace-pre-wrap ${
-                log.type === "error"
-                  ? "text-red-600"
-                  : log.type === "success"
-                    ? "text-green-600"
-                    : "text-gray-600"
-              }`}
-            >
+      {logs.map((log, i) => {
+        if (!log.msg) return null
+
+        return (
+          <div
+            key={i}
+            className={`break-words whitespace-pre-wrap ${
+              log.type === "error"
+                ? "text-red-600"
+                : log.type === "success"
+                  ? "text-green-600"
+                  : "text-gray-600"
+            }`}
+          >
+            {log.timestamp && (
               <span className="text-gray-500 whitespace-nowrap">
                 {new Date(log.timestamp).toLocaleTimeString()}
-              </span>{" "}
-              <span className="break-all">{log.message}</span>
-            </div>
-          ),
-      )}
+              </span>
+            )}
+            {log.timestamp && " "}
+            <span className="break-all">{log.msg}</span>
+          </div>
+        )
+      })}
       {error && (
         <div className="text-red-600 break-words whitespace-pre-wrap">
           {getErrorText(error)}

package/src/components/PackageBuildsPage/PackageBuildDetailsPage.tsx

@@ -53,12 +53,12 @@ export const PackageBuildDetailsPage = () => {
     <div className="min-h-screen bg-gray-50 text-gray-900">
       <PackageBuildHeader />
 
-      <div className="px-6 py-6 container mx-auto">
+      <div className="px-4 sm:px-6 py-4 sm:py-6 container mx-auto max-w-7xl">
         {/* Main Content */}
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8 items-start">
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6 mb-6 sm:mb-8 items-start">
           {/* Preview Section */}
           <div className="lg:col-span-2">
-            <div className="bg-white border border-gray-200 rounded-lg p-4 flex items-center justify-center max-h-[420px]">
+            <div className="bg-white border border-gray-200 rounded-lg p-4 flex items-center justify-center min-h-[280px] sm:min-h-[340px] lg:max-h-[420px]">
               <BuildPreviewContent />
             </div>
           </div>
@@ -68,7 +68,7 @@ export const PackageBuildDetailsPage = () => {
         </div>
 
         {/* Collapsible Sections */}
-        <div className="space-y-4 mb-8">
+        <div className="space-y-4 mb-6 sm:mb-8">
           <CollapsibleSection
             title="Transpilation Logs"
             duration={computeDuration(
@@ -82,7 +82,7 @@ export const PackageBuildDetailsPage = () => {
             <LogContent
               logs={
                 transpilation_logs ?? [
-                  { message: "No transpilation logs available" },
+                  { msg: "No transpilation logs available" },
                 ]
               }
               error={transpilation_error}
@@ -102,7 +102,7 @@ export const PackageBuildDetailsPage = () => {
             <LogContent
               logs={
                 circuit_json_build_logs ?? [
-                  { message: "No Circuit JSON logs available" },
+                  { msg: "No Circuit JSON logs available" },
                 ]
               }
               error={circuit_json_build_error!}

package/src/components/PackageBuildsPage/build-preview-content.tsx

@@ -7,19 +7,19 @@ export function BuildPreviewContent() {
 
   if (!packageRelease) {
     return (
-      <div className="flex items-center justify-center">
-        <div className="w-48 h-48 bg-gray-200 rounded animate-pulse-slow"></div>
+      <div className="flex items-center justify-center w-full h-full">
+        <div className="w-32 h-32 sm:w-48 sm:h-48 bg-gray-200 rounded animate-pulse-slow"></div>
       </div>
     )
   }
 
   return (
-    <div className="flex items-center justify-center">
-      <div className="rounded overflow-hidden">
+    <div className="flex items-center justify-center w-full h-full">
+      <div className="rounded overflow-hidden w-full max-w-full">
         <img
           src={`https://api.tscircuit.com/packages/images/${packageInfo?.name}/pcb.png`}
           alt="Package build preview"
-          className="object-contain rounded max-h-[360px]"
+          className="object-contain rounded w-full h-auto max-h-[240px] sm:max-h-[300px] lg:max-h-[360px]"
         />
       </div>
     </div>

package/src/components/PackageBuildsPage/package-build-details-panel.tsx

@@ -76,16 +76,16 @@ export function PackageBuildDetailsPanel() {
     : null
 
   return (
-    <div className="space-y-6 bg-white p-4 border border-gray-200 rounded-lg">
+    <div className="space-y-4 sm:space-y-6 bg-white p-3 sm:p-4 border border-gray-200 rounded-lg">
       {/* Created */}
       <div>
         <h3 className="text-sm font-medium text-gray-600 mb-2">Created</h3>
-        <div className="flex items-center gap-2">
-          <div className="w-6 h-6 bg-orange-500 rounded-full flex items-center justify-center text-xs font-bold">
+        <div className="flex items-center gap-2 min-w-0">
+          <div className="w-6 h-6 bg-orange-500 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">
             I
           </div>
-          <span className="text-sm">{author}</span>
-          <span className="text-sm text-gray-500">
+          <span className="text-sm truncate">{author}</span>
+          <span className="text-sm text-gray-500 flex-shrink-0">
             {timeAgo(created_at, "")}
           </span>
         </div>
@@ -96,7 +96,7 @@ export function PackageBuildDetailsPanel() {
         <h3 className="text-sm font-medium text-gray-600 mb-2">Status</h3>
         <div className="flex items-center gap-2">
           <div
-            className={`w-2 h-2 ${getColorFromDisplayStatus(display_status)} rounded-full`}
+            className={`w-2 h-2 ${getColorFromDisplayStatus(display_status)} rounded-full flex-shrink-0`}
           ></div>
           <span className="text-sm">{capitalCase(display_status)}</span>
           {/* <Badge
@@ -110,12 +110,14 @@ export function PackageBuildDetailsPanel() {
 
       <div>
         <h3 className="text-sm font-medium text-gray-600 mb-2">Build Time</h3>
-        <div className="flex items-center gap-2">
-          <Clock className="w-4 h-4 text-gray-500" />
+        <div className="flex items-center gap-2 min-w-0">
+          <Clock className="w-4 h-4 text-gray-500 flex-shrink-0" />
           {elapsedMs !== null && (
-            <span className="text-sm">{Math.floor(elapsedMs / 1000)}s</span>
+            <span className="text-sm flex-shrink-0">
+              {Math.floor(elapsedMs / 1000)}s
+            </span>
           )}
-          <span className="text-sm text-gray-500">
+          <span className="text-sm text-gray-500 truncate">
             {buildStartedAt
               ? `Started ${timeAgo(buildStartedAt)}`
               : "waiting..."}
@@ -126,9 +128,9 @@ export function PackageBuildDetailsPanel() {
       {/* Version */}
       <div>
         <h3 className="text-sm font-medium text-gray-600 mb-2">Version</h3>
-        <div className="flex items-center gap-2">
-          <Globe className="w-4 h-4 text-gray-500" />
-          <span className="text-sm">{packageRelease.version}</span>
+        <div className="flex items-center gap-2 min-w-0">
+          <Globe className="w-4 h-4 text-gray-500 flex-shrink-0" />
+          <span className="text-sm break-all">{packageRelease.version}</span>
           {/* <Badge variant="default" className="bg-blue-600 text-white text-xs">
             Current
           </Badge> */}

package/src/components/PackageBuildsPage/package-build-header.tsx

@@ -1,31 +1,33 @@
 import { Button } from "@/components/ui/button"
 import { useCurrentPackageRelease } from "@/hooks/use-current-package-release"
 import { useRebuildPackageReleaseMutation } from "@/hooks/use-rebuild-package-release-mutation"
-import { Github, RefreshCw, RotateCcw } from "lucide-react"
+import { Github, RefreshCw } from "lucide-react"
 import { useParams } from "wouter"
 import { DownloadButtonAndMenu } from "../DownloadButtonAndMenu"
 
 export function PackageBuildHeader() {
   const { author, packageName } = useParams()
-  const { packageRelease, refetch, isFetching } = useCurrentPackageRelease({
+  const { packageRelease } = useCurrentPackageRelease({
     include_logs: true,
   })
   const { mutate: rebuildPackage, isLoading } =
     useRebuildPackageReleaseMutation()
 
   return (
-    <div className="border-b border-gray-200 bg-white px-6 py-4">
-      <div className="flex items-center justify-between container mx-auto">
-        <h1 className="text-2xl font-semibold">
-          Package Build
-          <a
-            className="ml-2 bg-gray-100 px-2 py-1 rounded font-mono text-blue-600"
-            href={`/${author}/${packageName}`}
-          >
-            {author}/{packageName}
-          </a>
-        </h1>
-        <div className="flex items-center gap-3">
+    <div className="border-b border-gray-200 bg-white px-4 sm:px-6 py-4">
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4 container mx-auto max-w-7xl">
+        <div className="min-w-0 flex-1">
+          <h1 className="text-xl sm:text-2xl font-semibold flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2">
+            <span className="whitespace-nowrap">Package Build</span>
+            <a
+              className="bg-gray-100 px-2 py-1 rounded font-mono text-blue-600 text-sm sm:text-base truncate w-fit"
+              href={`/${author}/${packageName}`}
+            >
+              {author}/{packageName}
+            </a>
+          </h1>
+        </div>
+        <div className="flex items-center gap-2 sm:gap-3 flex-shrink-0">
           <Button
             variant="outline"
             size="sm"
@@ -38,7 +40,8 @@ export function PackageBuildHeader() {
               rel="noopener noreferrer"
             >
               <Github className="w-3 h-3 sm:w-4 sm:h-4 mr-1 sm:mr-2" />
-              Report Issue
+              <span className="hidden xs:inline">Report Issue</span>
+              <span className="xs:hidden">Report</span>
             </a>
           </Button>
           <Button
@@ -56,19 +59,7 @@ export function PackageBuildHeader() {
             <RefreshCw className="w-3 h-3 sm:w-4 sm:h-4 mr-1 sm:mr-2" />
             {isLoading ? "Rebuilding..." : "Rebuild"}
           </Button>
-          <Button
-            variant="outline"
-            size="icon"
-            aria-label="Reload logs"
-            className="border-gray-300 bg-white hover:bg-gray-50"
-            onClick={() => refetch()}
-            disabled={isFetching}
-          >
-            <RotateCcw className="w-3 h-3 sm:w-4 sm:h-4" />
-          </Button>
-          <DownloadButtonAndMenu
-            snippetUnscopedName={`${author}/${packageName}`}
-          />
+          <DownloadButtonAndMenu unscopedName={packageName} author={author} />
         </div>
       </div>
     </div>