@tscircuit/fake-snippets 0.0.96 → 0.0.98

package/fake-snippets-api/routes/api/package_releases/rebuild.ts

@@ -1,20 +1,26 @@
 import { withRouteSpec } from "fake-snippets-api/lib/middleware/with-winter-spec"
-import { packageReleaseSchema } from "fake-snippets-api/lib/db/schema"
 import { z } from "zod"
+import Debug from "debug"
+
+const debug = Debug("fake-snippets-api:rebuild-package")
 
 export default withRouteSpec({
   methods: ["POST"],
   auth: "session",
   jsonBody: z.object({
     package_release_id: z.string(),
+    rebuild_transpilation: z.boolean().default(true),
+    rebuild_circuit_json: z.boolean().default(true),
   }),
   jsonResponse: z.object({
     ok: z.boolean(),
-    package_release: packageReleaseSchema,
   }),
 })(async (req, ctx) => {
-  const { package_release_id } = req.jsonBody
+  const { package_release_id, rebuild_transpilation, rebuild_circuit_json } =
+    req.jsonBody
 
+  debug("jsonBody", req.jsonBody)
+  // Get the package release info for logging
   const release = ctx.db.getPackageReleaseById(package_release_id)
 
   if (!release) {
@@ -24,9 +30,37 @@ export default withRouteSpec({
     })
   }
 
-  // In a real API this would trigger a rebuild. Here we simply return the release.
+  const packageInfo = ctx.db.getPackageById(release.package_id)
+
+  if (!packageInfo) {
+    return ctx.error(404, {
+      error_code: "package_not_found",
+      message: "Package not found",
+    })
+  }
+
+  if (packageInfo.owner_org_id !== ctx.auth.personal_org_id) {
+    return ctx.error(403, {
+      error_code: "forbidden",
+      message: "You do not have permission to rebuild this package release",
+    })
+  }
+
+  debug(
+    `Rebuilding package release ${package_release_id} for ${packageInfo.name}@${release.version}`,
+  )
+
+  // Trigger transpilation if requested
+  if (rebuild_transpilation) {
+    debug("Resetting transpilation state")
+  }
+
+  // Set circuit JSON build state to pending for worker pickup if requested
+  if (rebuild_circuit_json) {
+    debug("Resetting circuit JSON build state")
+  }
+
   return ctx.json({
     ok: true,
-    package_release: release,
   })
 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.96",
+  "version": "0.0.98",
   "type": "module",
   "repository": {
     "type": "git",
@@ -109,7 +109,7 @@
     "circuit-json-to-pnp-csv": "^0.0.7",
     "circuit-json-to-readable-netlist": "^0.0.13",
     "circuit-json-to-tscircuit": "^0.0.4",
-    "circuit-to-svg": "^0.0.163",
+    "circuit-to-svg": "^0.0.167",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.4",
@@ -162,7 +162,7 @@
     "redaxios": "^0.5.1",
     "remark-gfm": "^4.0.1",
     "rollup-plugin-visualizer": "^5.12.0",
-    "schematic-symbols": "^0.0.155",
+    "schematic-symbols": "^0.0.171",
     "sharp": "^0.33.5",
     "shiki": "^3.2.1",
     "sitemap": "^8.0.0",
@@ -174,7 +174,7 @@
     "terser": "^5.27.0",
     "three": "^0.177.0",
     "three-stdlib": "^2.36.0",
-    "tscircuit": "^0.0.522",
+    "tscircuit": "^0.0.538",
     "tsup": "^8.5.0",
     "typescript": "^5.6.3",
     "use-async-memo": "^1.2.5",

package/src/App.tsx

@@ -122,6 +122,7 @@ class ErrorBoundary extends React.Component<
   cleanup = () => {
     if (this.visibilityHandler) {
       document.removeEventListener("visibilitychange", this.visibilityHandler)
+      window.removeEventListener("focus", this.visibilityHandler)
       this.visibilityHandler = undefined
     }
     if (this.reloadTimeout) {
@@ -144,12 +145,20 @@ class ErrorBoundary extends React.Component<
     this.cleanup() // Clean up any existing handlers
 
     this.visibilityHandler = () => {
-      if (!document.hidden && this.state.hasError && !this.state.reloading) {
+      if (
+        document.visibilityState === "visible" &&
+        this.state.hasError &&
+        !this.state.reloading
+      ) {
         this.performReload()
       }
     }
 
     document.addEventListener("visibilitychange", this.visibilityHandler)
+    window.addEventListener("focus", this.visibilityHandler)
+
+    // In case the tab is already visible when the error occurs
+    this.visibilityHandler()
   }
 
   render() {

package/src/components/DownloadButtonAndMenu.tsx

@@ -49,11 +49,11 @@ export function DownloadButtonAndMenu({
         <Button
           disabled
           size="sm"
-          className="h-9 bg-muted text-muted-foreground border border-input cursor-not-allowed"
+          className="shadow-none bg-muted text-muted-foreground border border-input cursor-not-allowed"
         >
-          <Download className="h-4 w-4 mr-1.5" />
+          <Download className="h-4 w-4 mr-2" />
           Download
-          <ChevronDown className="h-4 w-4 ml-0.5" />
+          <ChevronDown className="h-4 w-4 ml-1" />
         </Button>
       </div>
     )
@@ -65,11 +65,11 @@ export function DownloadButtonAndMenu({
         <DropdownMenuTrigger asChild>
           <Button
             size="sm"
-            className="bg-transparent shadow-inner hover:bg-gray-100 text-gray-700 outline-none"
+            className="bg-white shadow-none text-gray-900 hover:bg-gray-100 border border-gray-300 px-1 pl-2"
           >
-            <Download className="h-4 w-4 mr-1.5" />
+            <Download className="w-4 h-4 mr-2" />
             Download
-            <ChevronDown className="h-4 w-4 ml-0.5" />
+            <ChevronDown className="w-4 h-4 ml-1" />
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent className="!z-[101]">

package/src/components/PackageCard.tsx

@@ -20,7 +20,7 @@ import {
 import { SnippetType, SnippetTypeIcon } from "./SnippetTypeIcon"
 import { timeAgo } from "@/lib/utils/timeAgo"
 import { ImageWithFallback } from "./ImageWithFallback"
-import { useToast } from "@/hooks/use-toast"
+import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
 
 export interface PackageCardProps {
   /** The package data to display */
@@ -57,7 +57,6 @@ export const PackageCard: React.FC<PackageCardProps> = ({
   withLink = true,
   renderActions,
 }) => {
-  const { toast } = useToast()
   const handleDeleteClick = (e: React.MouseEvent) => {
     e.preventDefault() // Prevent navigation
     if (onDeleteClick) {
@@ -65,39 +64,12 @@ export const PackageCard: React.FC<PackageCardProps> = ({
     }
   }
 
-  const handleShareClick = async (e: React.MouseEvent) => {
-    e.preventDefault()
+  const { copyToClipboard } = useCopyToClipboard()
 
+  const handleShareClick = (e: React.MouseEvent) => {
+    e.preventDefault()
     const shareUrl = `${window.location.origin}/${pkg.owner_github_username}/${pkg.unscoped_name}`
-    const shareText =
-      `Explore this tscircuit package: ${pkg.unscoped_name} by ${pkg.owner_github_username}${pkg.description ? ` - ${pkg.description}` : ""}`.trim()
-    if (navigator.share) {
-      await navigator
-        .share({
-          title: shareText,
-          text: shareText,
-          url: shareUrl,
-        })
-        .catch(() => fallbackShare(shareText, shareUrl))
-    } else {
-      fallbackShare(shareText, shareUrl)
-    }
-  }
-
-  const fallbackShare = (text: string, url: string) => {
-    const shareContent = `${text}\n${url}`
-    navigator.clipboard
-      .writeText(shareContent)
-      .then(() => {
-        toast({
-          title: "Share content copied to clipboard",
-        })
-      })
-      .catch(() => {
-        toast({
-          title: "Unable to share or copy to clipboard",
-        })
-      })
+    copyToClipboard(shareUrl)
   }
 
   const availableImages = ["pcb", "schematic", "assembly", "3d"]

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

@@ -1,11 +1,18 @@
 import { useShikiHighlighter } from "@/hooks/use-shiki-highlighter"
 import { useEffect, useMemo } from "react"
 import { useQuery } from "react-query"
+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 ShikiCodeViewer = ({
   code,
   filePath,
-}: { code: string; filePath: string }) => {
+}: {
+  code: string
+  filePath: string
+}) => {
   const { highlighter } = useShikiHighlighter()
 
   const html = useMemo(
@@ -18,7 +25,13 @@ export const ShikiCodeViewer = ({
   )
 
   if (!html) {
-    return <div>Loading...</div>
+    return (
+      <div className="text-sm p-4">
+        {SKELETON_WIDTHS.map((w, i) => (
+          <Skeleton key={i} className={`h-4 mb-2 ${w}`} />
+        ))}
+      </div>
+    )
   }
 
   return (

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

@@ -94,7 +94,7 @@ export default function MainContentHeader({
           <DropdownMenuTrigger asChild>
             <Button
               size="sm"
-              className="bg-green-600 shadow-none hover:bg-green-700 dark:bg-[#238636] dark:hover:bg-[#2ea043] text-white"
+              className="bg-green-600 hover:bg-green-700 dark:bg-[#238636] dark:hover:bg-[#2ea043] text-white"
             >
               <CodeIcon className="h-4 w-4 mr-1.5" />
               Code

package/src/components/ViewPackagePage/components/tab-views/3d-view.tsx

@@ -1,5 +1,6 @@
 import { CadViewer } from "@tscircuit/runframe"
 import { useCurrentPackageCircuitJson } from "../../hooks/use-current-package-circuit-json"
+import { Suspense } from "react"
 
 export default function ThreeDView() {
   const { circuitJson, isLoading, error } = useCurrentPackageCircuitJson()
@@ -24,7 +25,19 @@ export default function ThreeDView() {
 
   return (
     <div className="h-[620px]">
-      <CadViewer clickToInteractEnabled circuitJson={circuitJson} />
+      <Suspense
+        fallback={
+          <div className="flex justify-center items-center h-full">
+            <div className="w-48">
+              <div className="loading">
+                <div className="loading-bar"></div>
+              </div>
+            </div>
+          </div>
+        }
+      >
+        <CadViewer clickToInteractEnabled circuitJson={circuitJson} />
+      </Suspense>
     </div>
   )
 }

package/src/components/dialogs/confirm-delete-package-dialog.tsx

@@ -1,4 +1,10 @@
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "../ui/dialog"
 import { Button } from "../ui/button"
 import { createUseDialog } from "./create-use-dialog"
 import { useDeletePackage } from "@/hooks/use-delete-package"
@@ -33,13 +39,20 @@ export const ConfirmDeletePackageDialog = ({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="w-[90vw]">
+      <DialogContent className="w-[90vw] p-6 rounded-2xl shadow-lg">
         <DialogHeader>
-          <DialogTitle>Confirm Delete Package</DialogTitle>
+          <DialogTitle className="text-left">
+            Confirm Delete Package
+          </DialogTitle>
+          <DialogDescription className="text-left">
+            Are you sure you want to delete the package{" "}
+            <span className="font-bold">{packageName}</span>?
+          </DialogDescription>
         </DialogHeader>
-        <p>Are you sure you want to delete the package "{packageName}"?</p>
-        <p>This action cannot be undone.</p>
-        <div className="flex justify-end space-x-2 mt-4">
+        <p className="text-red-600 font-medium">
+          This action cannot be undone.
+        </p>
+        <div className="flex justify-end gap-4 mt-6">
           <Button variant="outline" onClick={() => onOpenChange(false)}>
             Cancel
           </Button>

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

@@ -15,7 +15,10 @@ import { getImportsFromCode } from "@tscircuit/prompt-benchmarks/code-runner-uti
 import type { ATABootstrapConfig } from "@typescript/ata"
 import { setupTypeAcquisition } from "@typescript/ata"
 import { linter } from "@codemirror/lint"
-import { TSCI_PACKAGE_PATTERN } from "@/lib/constants"
+import {
+  TSCI_PACKAGE_PATTERN,
+  LOCAL_FILE_IMPORT_PATTERN,
+} from "@/lib/constants"
 import {
   createSystem,
   createVirtualTypeScriptEnvironment,
@@ -29,7 +32,6 @@ import tsModule from "typescript"
 import CodeEditorHeader, {
   FileName,
 } from "@/components/package-port/CodeEditorHeader"
-import { useCodeCompletionApi } from "@/hooks/use-code-completion-ai-api"
 import FileSidebar from "../FileSidebar"
 import { findTargetFile } from "@/lib/utils/findTargetFile"
 import type { PackageFile } from "@/types/package"
@@ -44,6 +46,7 @@ import {
 } from "@/hooks/useFileManagement"
 import { isHiddenFile } from "../ViewPackagePage/utils/is-hidden-file"
 import { inlineCopilot } from "codemirror-copilot"
+import { resolveRelativePath } from "@/lib/utils/resolveRelativePath"
 
 const defaultImports = `
 import React from "@types/react/jsx-runtime"
@@ -417,11 +420,13 @@ export const CodeEditor = ({
               const lineStart = line.from
               const lineEnd = line.to
               const lineText = view.state.sliceDoc(lineStart, lineEnd)
-              const matches = Array.from(
+
+              // Check for TSCI package imports
+              const packageMatches = Array.from(
                 lineText.matchAll(TSCI_PACKAGE_PATTERN),
               )
 
-              for (const match of matches) {
+              for (const match of packageMatches) {
                 if (match.index !== undefined) {
                   const start = lineStart + match.index
                   const end = start + match[0].length
@@ -484,10 +489,12 @@ export const CodeEditor = ({
                 const lineStart = line.from
                 const lineEnd = line.to
                 const lineText = view.state.sliceDoc(lineStart, lineEnd)
-                const matches = Array.from(
+
+                // Check for TSCI package imports first
+                const packageMatches = Array.from(
                   lineText.matchAll(TSCI_PACKAGE_PATTERN),
                 )
-                for (const match of matches) {
+                for (const match of packageMatches) {
                   if (match.index !== undefined) {
                     const start = lineStart + match.index
                     const end = start + match[0].length
@@ -502,6 +509,42 @@ export const CodeEditor = ({
                     }
                   }
                 }
+
+                // Check for local file imports
+                const localFileMatches = Array.from(
+                  lineText.matchAll(LOCAL_FILE_IMPORT_PATTERN),
+                )
+                for (const match of localFileMatches) {
+                  if (match.index !== undefined) {
+                    const start = lineStart + match.index
+                    const end = start + match[0].length
+                    if (pos >= start && pos <= end) {
+                      const relativePath = match[0]
+                      const resolvedPath = resolveRelativePath(
+                        relativePath,
+                        currentFile || "",
+                      )
+
+                      // Add common extensions if not present
+                      let targetPath = resolvedPath
+                      if (!targetPath.includes(".")) {
+                        const extensions = [".tsx", ".ts", ".js", ".jsx"]
+                        for (const ext of extensions) {
+                          if (fileMap[`${targetPath}${ext}`]) {
+                            targetPath = `${targetPath}${ext}`
+                            break
+                          }
+                        }
+                      }
+
+                      if (fileMap[targetPath]) {
+                        onFileSelect(targetPath)
+                        return true
+                      }
+                      return !!fileMap[targetPath]
+                    }
+                  }
+                }
                 return false
               },
               keydown: (event) => {
@@ -529,6 +572,12 @@ export const CodeEditor = ({
                 overflow: "auto",
                 zIndex: "9999",
               },
+              ".cm-import:hover": {
+                textDecoration: "underline",
+                textDecorationColor: "#aa1111",
+                textUnderlineOffset: "1px",
+                filter: "brightness(0.7)",
+              },
             }),
             EditorView.decorations.of((view) => {
               const decorations = []
@@ -536,14 +585,32 @@ export const CodeEditor = ({
                 for (let pos = from; pos < to; ) {
                   const line = view.state.doc.lineAt(pos)
                   const lineText = line.text
-                  const matches = lineText.matchAll(TSCI_PACKAGE_PATTERN)
-                  for (const match of matches) {
+
+                  // Add decorations for TSCI package imports
+                  const packageMatches = lineText.matchAll(TSCI_PACKAGE_PATTERN)
+                  for (const match of packageMatches) {
+                    if (match.index !== undefined) {
+                      const start = line.from + match.index
+                      const end = start + match[0].length
+                      decorations.push(
+                        Decoration.mark({
+                          class: "cm-import cursor-pointer",
+                        }).range(start, end),
+                      )
+                    }
+                  }
+
+                  // Add decorations for local file imports
+                  const localFileMatches = lineText.matchAll(
+                    LOCAL_FILE_IMPORT_PATTERN,
+                  )
+                  for (const match of localFileMatches) {
                     if (match.index !== undefined) {
                       const start = line.from + match.index
                       const end = start + match[0].length
                       decorations.push(
                         Decoration.mark({
-                          class: "cm-underline cursor-pointer",
+                          class: "cm-import cursor-pointer",
                         }).range(start, end),
                       )
                     }

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

@@ -29,6 +29,7 @@ import { convertRawEasyToTsx, fetchEasyEDAComponent } from "easyeda/browser"
 import { ComponentSearchResult } from "@tscircuit/runframe/runner"
 import { usePackagesBaseApiUrl } from "@/hooks/use-packages-base-api-url"
 import { ICreateFileProps, ICreateFileResult } from "@/hooks/useFileManagement"
+import { useGlobalStore } from "@/hooks/use-global-store"
 
 export type FileName = string
 
@@ -61,6 +62,7 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
   const [sidebarOpen, setSidebarOpen] = fileSidebarState
   const API_BASE = usePackagesBaseApiUrl()
   const [aiAutocompleteEnabled, setAiAutocompleteEnabled] = aiAutocompleteState
+  const session = useGlobalStore((s) => s.session)
 
   const handleFormatFile = useCallback(() => {
     if (!window.prettier || !window.prettierPlugins) return
@@ -157,18 +159,21 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
       updateFileContent(currentFile, newContent)
     }
     if (component.source == "jlcpcb") {
+      if (!session?.token) {
+        throw new Error("You need to be logged in to import jlcpcb component")
+      }
       const jlcpcbComponent = await fetchEasyEDAComponent("C1", {
         fetch: ((url, options: any) => {
           return fetch(`${API_BASE}/proxy`, {
-            ...options,
+            body: options.body,
+            method: options.method,
             headers: {
-              ...options?.headers,
+              authority: options.headers.authority,
+              Authorization: `Bearer ${session?.token}`,
               "X-Target-Url": url.toString(),
-              "X-Sender-Origin": options?.headers?.origin ?? "",
-              "X-Sender-Host": options?.headers?.host ?? "https://easyeda.com",
-              "X-Sender-Referer": options?.headers?.referer ?? "",
-              "X-Sender-User-Agent": options?.headers?.userAgent ?? "",
-              "X-Sender-Cookie": options?.headers?.cookie ?? "",
+              "X-Sender-Host": options.headers.origin,
+              "X-Sender-Origin": options.headers.origin,
+              "content-type": options.headers["content-type"],
             },
           })
         }) as typeof fetch,

package/src/hooks/use-create-package-release-mutation.ts

@@ -42,9 +42,9 @@ export const useCreatePackageReleaseMutation = ({
         resolvedPkgName = pkgName
       }
 
-      // Default version to 1.0.0 when it contains no digits
+      // Default version to 0.0.1 when it contains no digits
       if (!resolvedVersion || !/[0-9]/.test(resolvedVersion)) {
-        resolvedVersion = "1.0.0"
+        resolvedVersion = "0.0.1"
       }
 
       const normalizedPackageNameWithVersion =

package/src/hooks/use-rebuild-package-release-mutation.ts

@@ -30,8 +30,8 @@ export const useRebuildPackageReleaseMutation = ({
         toast({
           title: "Error",
           description:
-            error?.response?.data?.message ||
-            error?.data?.message ||
+            error?.response?.data?.error?.message ||
+            error?.data?.error?.message ||
             "Failed to rebuild package.",
           variant: "destructive",
         })

package/src/lib/constants.ts

@@ -10,3 +10,14 @@
  */
 export const TSCI_PACKAGE_PATTERN =
   /@tsci\/[a-zA-Z][a-zA-Z0-9]*(?:--?[a-zA-Z0-9]+)*(?:\.[a-zA-Z][a-zA-Z0-9_]*(?:--?[a-zA-Z0-9_]+)*)*/g
+
+/**
+ * Regular expression pattern for matching local file imports
+ * Rules:
+ * - Must start with ./ or ../
+ * - Can contain letters, numbers, dots, dashes, underscores, and forward slashes
+ * - Can optionally end with file extensions like .ts, .tsx, .js, .jsx, .json
+ * - Captures the full relative path
+ */
+export const LOCAL_FILE_IMPORT_PATTERN =
+  /(?:\.\.?\/[a-zA-Z0-9._\-\/]*(?:\.(?:ts|tsx|js|jsx|json))?)/g

package/src/lib/utils/resolveRelativePath.ts

@@ -0,0 +1,40 @@
+/**
+ * Resolves a relative file path to an absolute path based on the current file
+ */
+export const resolveRelativePath = (
+  relativePath: string,
+  currentFilePath: string,
+): string => {
+  if (!currentFilePath) return relativePath
+
+  const currentDir = currentFilePath.includes("/")
+    ? currentFilePath.substring(0, currentFilePath.lastIndexOf("/"))
+    : ""
+
+  if (relativePath.startsWith("./")) {
+    return currentDir
+      ? `${currentDir}/${relativePath.slice(2)}`
+      : relativePath.slice(2)
+  }
+
+  if (relativePath.startsWith("../")) {
+    const parts = currentDir.split("/").filter((p) => p !== "")
+    const relativeParts = relativePath.split("/").filter((p) => p !== "")
+
+    let upCount = 0
+    for (const part of relativeParts) {
+      if (part === "..") {
+        upCount++
+      } else {
+        break
+      }
+    }
+
+    const resultParts = parts.slice(0, Math.max(0, parts.length - upCount))
+    const remainingParts = relativeParts.slice(upCount)
+
+    return [...resultParts, ...remainingParts].join("/")
+  }
+
+  return relativePath
+}

package/src/pages/datasheets.tsx

@@ -1,11 +1,12 @@
 import React, { useState } from "react"
 import { useQuery } from "react-query"
 import { useAxios } from "@/hooks/use-axios"
+import { useCreateDatasheet } from "@/hooks/use-create-datasheet"
 import Header from "@/components/Header"
 import Footer from "@/components/Footer"
 import { Input } from "@/components/ui/input"
 import { Search } from "lucide-react"
-import { Link } from "wouter"
+import { Link, useLocation } from "wouter"
 
 interface DatasheetSummary {
   datasheet_id: string
@@ -14,6 +15,10 @@ interface DatasheetSummary {
 
 export const DatasheetsPage: React.FC = () => {
   const axios = useAxios()
+  const [, navigate] = useLocation()
+  const createDatasheet = useCreateDatasheet({
+    onSuccess: (datasheet) => navigate(`/datasheets/${datasheet.chip_name}`),
+  })
   const [searchQuery, setSearchQuery] = useState("")
 
   const {
@@ -119,6 +124,19 @@ export const DatasheetsPage: React.FC = () => {
                 ? `No datasheets match your search for "${searchQuery}".`
                 : "There are no popular datasheets at the moment."}
             </p>
+            {searchQuery && (
+              <button
+                className="mt-2 px-4 py-2 bg-blue-500 text-white rounded"
+                onClick={() =>
+                  createDatasheet.mutate({ chip_name: searchQuery })
+                }
+                disabled={createDatasheet.isLoading}
+              >
+                {createDatasheet.isLoading
+                  ? "Creating..."
+                  : `Create Datasheet for ${searchQuery}`}
+              </button>
+            )}
           </div>
         )}
       </main>