@tscircuit/fake-snippets 0.0.108 → 0.0.110

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

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from "react"
+import React, { useState, useCallback, useMemo } from "react"
 import { Button } from "@/components/ui/button"
 import { handleManualEditsImportWithSupportForMultipleFiles } from "@/lib/handleManualEditsImportWithSupportForMultipleFiles"
 import { useImportComponentDialog } from "@/components/dialogs/import-component-dialog"
@@ -25,11 +25,14 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip"
-import { convertRawEasyToTsx, fetchEasyEDAComponent } from "easyeda/browser"
-import { ComponentSearchResult } from "@tscircuit/runframe/runner"
-import { useApiBaseUrl } from "@/hooks/use-packages-base-api-url"
+import {
+  JlcpcbComponentTsxLoadedPayload,
+  KicadStringSelectedPayload,
+  TscircuitPackageSelectedPayload,
+} from "@tscircuit/runframe/runner"
 import { ICreateFileProps, ICreateFileResult } from "@/hooks/useFileManagement"
 import { useGlobalStore } from "@/hooks/use-global-store"
+import { openJlcpcbImportIssue } from "@/hooks/use-jlcpcb-component-import"
 
 export type FileName = string
 
@@ -41,6 +44,7 @@ interface CodeEditorHeaderProps {
   handleFileChange: (filename: FileName) => void
   entrypointFileName?: string
   appendNewFile: (path: string, content: string) => void
+  isLoadingFiles: boolean
   createFile: (props: ICreateFileProps) => ICreateFileResult
   aiAutocompleteState: [boolean, React.Dispatch<React.SetStateAction<boolean>>]
 }
@@ -49,8 +53,8 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
   currentFile,
   files,
   updateFileContent,
-  appendNewFile,
   fileSidebarState,
+  isLoadingFiles = true,
   handleFileChange,
   entrypointFileName = "index.tsx",
   createFile,
@@ -58,12 +62,18 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
 }) => {
   const { Dialog: ImportComponentDialog, openDialog: openImportDialog } =
     useImportComponentDialog()
-  const { toast, toastLibrary } = useToast()
+  const { toast } = useToast()
   const [sidebarOpen, setSidebarOpen] = fileSidebarState
-  const API_BASE = useApiBaseUrl()
   const [aiAutocompleteEnabled, setAiAutocompleteEnabled] = aiAutocompleteState
   const session = useGlobalStore((s) => s.session)
 
+  const jlcpcbProxyRequestHeaders = useMemo(() => {
+    if (!session?.token) return undefined
+    return {
+      Authorization: `Bearer ${session.token}`,
+    }
+  }, [session?.token])
+
   const handleFormatFile = useCallback(() => {
     if (!window.prettier || !window.prettierPlugins) return
     if (!currentFile) return
@@ -153,54 +163,114 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
     }
   }, [currentFile, files, toast, updateFileContent])
 
-  const handleComponentImport = async (component: ComponentSearchResult) => {
-    if (component.source == "tscircuit.com") {
-      const newContent = `import {} from "@tsci/${component.owner}.${component.name}"\n${files[currentFile || ""]}`
-      updateFileContent(currentFile, newContent)
-    }
-    if (component.source == "jlcpcb") {
-      if (!session?.token) {
-        throw new Error("You need to be logged in to import jlcpcb component")
+  const handleTscircuitPackageSelected = useCallback(
+    async ({ fullPackageName }: TscircuitPackageSelectedPayload) => {
+      if (!currentFile) {
+        const message = "Select a file before importing a component."
+        toast({
+          title: "No file selected",
+          description: message,
+          variant: "destructive",
+        })
+        throw new Error(message)
       }
 
-      const jlcpcbComponent = await fetchEasyEDAComponent(
-        component.partNumber ?? component.name,
-        {
-          fetch: ((url, options: any) => {
-            return fetch(`${API_BASE}/proxy`, {
-              body: options.body,
-              method: options.method,
-              headers: {
-                authority: options.headers.authority,
-                Authorization: `Bearer ${session?.token}`,
-                "X-Target-Url": url.toString(),
-                "X-Sender-Host": options.headers.origin,
-                "X-Sender-Origin": options.headers.origin,
-                "content-type": options.headers["content-type"],
-              },
-            })
-          }) as typeof fetch,
-        },
-      )
-      const tsxComponent = await convertRawEasyToTsx(jlcpcbComponent)
-      let componentName = component.name.replace(/ /g, "-")
-      let componentPath = `imports/${componentName}.tsx`
-      if (files[componentPath] || files[`./${componentPath}`]) {
-        componentName = `${componentName}-1`
-        componentPath = `imports/${componentName}.tsx`
-      }
-      const createFileResult = createFile({
-        newFileName: componentPath,
-        content: tsxComponent,
-        onError: (error) => {
-          throw error
-        },
+      const existingContent = files[currentFile] ?? ""
+      const newContent = `import {} from "${fullPackageName}"\n${existingContent}`
+      updateFileContent(currentFile, newContent)
+      toast({
+        title: "Component imported",
+        description: `Added ${fullPackageName} to ${currentFile}.`,
       })
-      if (!createFileResult.newFileCreated) {
-        throw new Error("Failed to create component file")
+    },
+    [currentFile, files, toast, updateFileContent],
+  )
+
+  const handleJlcpcbComponentTsxLoaded = useCallback(
+    async ({ result, tsx }: JlcpcbComponentTsxLoadedPayload) => {
+      const partNumber = result.component.partNumber || "component"
+
+      try {
+        const sanitizedBaseName = partNumber
+          .toLowerCase()
+          .replace(/[^a-z0-9_-]/gi, "-")
+        let componentPath = `imports/${sanitizedBaseName}.tsx`
+        let suffix = 1
+        while (files[componentPath] || files[`./${componentPath}`]) {
+          componentPath = `imports/${sanitizedBaseName}-${suffix}.tsx`
+          suffix += 1
+        }
+
+        const createFileResult = createFile({
+          newFileName: componentPath,
+          content: tsx,
+          onError: (error) => {
+            throw error
+          },
+        })
+
+        if (!createFileResult.newFileCreated) {
+          throw new Error("Failed to create component file")
+        }
+
+        toast({
+          title: "Component imported",
+          description: `${partNumber} saved to ${componentPath}.`,
+        })
+      } catch (error) {
+        const message =
+          error instanceof Error
+            ? error.message
+            : "Failed to import component from JLCPCB"
+
+        toast({
+          title: "JLCPCB import failed",
+          description: (
+            <div className="space-y-2">
+              <p>{message}</p>
+              <button
+                className="text-sm text-blue-500 hover:underline"
+                onClick={(event) => {
+                  event.preventDefault()
+                  openJlcpcbImportIssue(partNumber, message)
+                }}
+              >
+                File issue on GitHub
+              </button>
+            </div>
+          ),
+          variant: "destructive",
+        })
+
+        throw new Error(message)
       }
-    }
-  }
+    },
+    [createFile, files, toast],
+  )
+
+  const handleKicadStringSelected = useCallback(
+    async ({ footprint, result }: KicadStringSelectedPayload) => {
+      try {
+        await navigator.clipboard.writeText(footprint)
+        toast({
+          title: "KiCad footprint copied",
+          description: `${result.footprint.qualifiedName} copied to clipboard.`,
+        })
+      } catch (error) {
+        const message =
+          error instanceof Error
+            ? error.message
+            : "Failed to copy KiCad footprint to clipboard"
+        toast({
+          title: "KiCad import failed",
+          description: message,
+          variant: "destructive",
+        })
+        throw new Error(message)
+      }
+    },
+    [toast],
+  )
 
   return (
     <>
@@ -230,7 +300,9 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
                     (filename) => !isHiddenFile(filename),
                   ).length > 0
                     ? "Select file"
-                    : "No files"
+                    : isLoadingFiles
+                      ? "Loading files..."
+                      : "No files"
                 }
               />
             </SelectTrigger>
@@ -342,17 +414,10 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
           </Button>
         </div>
         <ImportComponentDialog
-          onComponentSelected={async (component) => {
-            toastLibrary.promise(handleComponentImport(component), {
-              loading: "Importing component...",
-              success: <p>Component imported successfully!</p>,
-              error: (error) => (
-                <p>
-                  Error importing component: {error.message || String(error)}
-                </p>
-              ),
-            })
-          }}
+          onTscircuitPackageSelected={handleTscircuitPackageSelected}
+          onJlcpcbComponentTsxLoaded={handleJlcpcbComponentTsxLoaded}
+          onKicadStringSelected={handleKicadStringSelected}
+          jlcpcbProxyRequestHeaders={jlcpcbProxyRequestHeaders}
         />
       </div>
     </>

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

@@ -1,5 +1,5 @@
 import { Button } from "@/components/ui/button"
-import { GitFork, Star } from "lucide-react"
+import { GitFork, Loader2, Star } from "lucide-react"
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -42,7 +42,6 @@ import { useViewTsFilesDialog } from "@/components/dialogs/view-ts-files-dialog"
 import { DownloadButtonAndMenu } from "@/components/DownloadButtonAndMenu"
 import { TypeBadge } from "@/components/TypeBadge"
 import { useForkPackageMutation } from "@/hooks/useForkPackageMutation"
-import tscircuitCorePkg from "@tscircuit/core/package.json"
 import { useRenamePackageDialog } from "../dialogs/rename-package-dialog"
 import { useUpdatePackageDescriptionDialog } from "../dialogs/update-package-description-dialog"
 import { useCreateReleaseDialog } from "@/hooks/use-create-release-dialog"
@@ -295,52 +294,37 @@ export default function EditorNav({
               Not logged in, can't save
             </div>
           )}
-          <Button
-            variant="outline"
-            size="sm"
-            className={"ml-1 h-6 px-2 text-xs save-button"}
-            disabled={canSavePackage && pkg ? !hasUnsavedChanges : !isLoggedIn}
-            onClick={canSavePackage ? onSave : () => forkSnippet()}
-          >
-            {canSavePackage ? (
-              <>
-                <Save className="mr-1 h-3 w-3" />
-                Save
-              </>
-            ) : (
-              <>
-                <GitFork className="mr-1 h-3 w-3" />
-                Fork
-              </>
-            )}
-          </Button>
+          {(canSavePackage || (isLoggedIn && pkg)) && (
+            <Button
+              variant="outline"
+              size="sm"
+              className={"ml-1 h-6 px-2 text-xs save-button"}
+              disabled={
+                canSavePackage && pkg ? !hasUnsavedChanges : !isLoggedIn
+              }
+              onClick={canSavePackage ? onSave : () => forkSnippet()}
+            >
+              {canSavePackage ? (
+                <>
+                  <Save className="mr-1 h-3 w-3" />
+                  Save
+                </>
+              ) : (
+                <>
+                  <GitFork className="mr-1 h-3 w-3" />
+                  Fork
+                </>
+              )}
+            </Button>
+          )}
           {isSaving && (
-            <div className="animate-fadeIn bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-              <svg
-                className="animate-spin h-3 w-3 mr-2 text-blue-600"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-              >
-                <circle
-                  className="opacity-25"
-                  cx="12"
-                  cy="12"
-                  r="10"
-                  stroke="currentColor"
-                  strokeWidth="4"
-                ></circle>
-                <path
-                  className="opacity-75"
-                  fill="currentColor"
-                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                ></path>
-              </svg>
+            <div className="animate-fadeIn bg-blue-100 select-none text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
+              <Loader2 className="animate-spin h-3 w-3 mr-2 text-blue-600" />
               Saving...
             </div>
           )}
           {hasUnsavedChanges && !isSaving && isLoggedIn && (
-            <div className="animate-fadeIn bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded">
+            <div className="animate-fadeIn bg-yellow-100 select-none text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded">
               {pkg ? "unsaved changes" : "unsaved"}
             </div>
           )}
@@ -359,7 +343,6 @@ export default function EditorNav({
       </div>
       <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
             variant="ghost"
             size="sm"
@@ -481,9 +464,6 @@ export default function EditorNav({
                     </DropdownMenuItem>
                   </>
                 )}
-              <DropdownMenuItem className="text-xs text-gray-500" disabled>
-                @tscircuit/core@{tscircuitCorePkg.version}
-              </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
 
@@ -505,7 +485,7 @@ export default function EditorNav({
             )}
           </Button>
         </div>
-        <div className="flex items-center ">
+        <div className="flex items-center">
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <div className="md:hidden rounded-full p-1 hover:bg-gray-100 cursor-pointer">
@@ -514,7 +494,7 @@ export default function EditorNav({
                 </Button>
               </div>
             </DropdownMenuTrigger>
-            <DropdownMenuContent>
+            <DropdownMenuContent className="z-[101]">
               {hasUnsavedChanges && onDiscard && (
                 <DropdownMenuItem
                   className="text-xs text-red-600"
@@ -601,6 +581,9 @@ export default function EditorNav({
       <RenameDialog
         packageId={pkg?.package_id ?? ""}
         currentName={pkg?.unscoped_name ?? ""}
+        onRename={() => {
+          qc.invalidateQueries({ queryKey: ["package", pkg?.package_id] })
+        }}
       />
       <DeleteDialog
         packageId={pkg?.package_id ?? ""}

package/src/components/preview/ConnectedPackagesList.tsx

@@ -3,7 +3,7 @@ import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { GitBranch, Rocket, Github } from "lucide-react"
 import { cn } from "@/lib/utils"
-import { PrefetchPageLink } from "../PrefetchPageLink"
+import { Link } from "wouter"
 import { formatTimeAgo } from "@/lib/utils/formatTimeAgo"
 import { getBuildStatus, StatusIcon } from "."
 import { Package } from "fake-snippets-api/lib/db/schema"
@@ -116,12 +116,12 @@ export const ConnectedPackageCard = ({
     >
       <div className="flex items-start justify-between mb-4">
         <div className="flex items-center gap-3">
-          <a
-            href="#"
+          <Link
+            href={`/${pkg.owner_github_username}/${pkg.unscoped_name}`}
             className="text-lg font-semibold text-gray-900 hover:text-blue-600 transition-colors"
           >
             {pkg.unscoped_name}
-          </a>
+          </Link>
         </div>
 
         <div className="flex items-center justify-center gap-2">
@@ -174,25 +174,25 @@ export const ConnectedPackageCard = ({
       </div>
 
       <div className="flex gap-2 w-full mt-auto">
-        <PrefetchPageLink className="w-full" href={`/${pkg.name}/releases`}>
+        <Link className="w-full" href={`/${pkg.name}/releases`}>
           <Button
             size="sm"
             className="bg-blue-600 w-full hover:bg-blue-700 text-white px-4 py-2"
           >
             View
           </Button>
-        </PrefetchPageLink>
+        </Link>
         {latestBuildInfo?.preview_url &&
           latestBuildInfo?.package_build_id &&
           status === "success" && (
-            <PrefetchPageLink
+            <Link
               className="w-full"
               href={`/${pkg.name}/releases/${latestBuildInfo.package_release_id}/preview`}
             >
               <Button size="sm" variant="outline" className="px-4 py-2 w-full">
                 Preview
               </Button>
-            </PrefetchPageLink>
+            </Link>
           )}
       </div>
     </Card>

package/src/components/preview/ConnectedRepoOverview.tsx

@@ -41,6 +41,7 @@ export const ConnectedRepoOverview = ({
   const [openSections, setOpenSections] = useState({
     transpilation: false,
     circuitJson: false,
+    imageGeneration: false,
   })
 
   // Gracefully handle when there is no build yet
@@ -120,15 +121,25 @@ export const ConnectedRepoOverview = ({
             1000,
         )
       : 0
+    const imageGenerationDuration = packageBuild?.image_generation_started_at
+      ? Math.floor(
+          (new Date(
+            packageBuild.image_generation_completed_at || new Date(),
+          ).getTime() -
+            new Date(packageBuild.image_generation_started_at).getTime()) /
+            1000,
+        )
+      : 0
 
     if (
       !packageBuild?.transpilation_started_at &&
-      !packageBuild?.circuit_json_build_started_at
+      !packageBuild?.circuit_json_build_started_at &&
+      !packageBuild?.image_generation_started_at
     ) {
       return null
     }
 
-    return transpilationDuration + circuitJsonDuration
+    return transpilationDuration + circuitJsonDuration + imageGenerationDuration
   })()
   const toggleSection = (section: keyof typeof openSections) => {
     setOpenSections((prev) => ({ ...prev, [section]: !prev[section] }))
@@ -482,6 +493,95 @@ export const ConnectedRepoOverview = ({
             </div>
           </CollapsibleContent>
         </Collapsible>
+
+        <Collapsible
+          open={openSections.imageGeneration}
+          onOpenChange={() => toggleSection("imageGeneration")}
+        >
+          <CollapsibleTrigger asChild>
+            <div className="flex items-center justify-between p-4 bg-white border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50">
+              <div className="flex items-center gap-3">
+                <ChevronRight
+                  className={`w-4 h-4 transition-transform ${openSections.imageGeneration ? "rotate-90" : ""}`}
+                />
+                {packageBuild.image_generation_error ? (
+                  <AlertCircle className="w-5 h-5 text-red-500" />
+                ) : packageBuild.image_generation_completed_at ? (
+                  <CheckCircle className="w-5 h-5 text-green-500" />
+                ) : packageBuild.image_generation_in_progress ? (
+                  <Loader2 className="w-5 h-5 text-blue-500 animate-spin" />
+                ) : (
+                  <Clock className="w-5 h-5 text-gray-400" />
+                )}
+                <span className="font-medium">Image Generation</span>
+              </div>
+              <div className="flex items-center gap-2">
+                {getStepDuration(
+                  packageBuild.image_generation_started_at,
+                  packageBuild.image_generation_completed_at,
+                ) && (
+                  <span className="text-sm text-gray-600">
+                    {getStepDuration(
+                      packageBuild.image_generation_started_at,
+                      packageBuild.image_generation_completed_at,
+                    )}
+                  </span>
+                )}
+                <Badge
+                  variant={
+                    getStepStatus(
+                      packageBuild.image_generation_error,
+                      packageBuild.image_generation_completed_at,
+                      packageBuild.image_generation_in_progress,
+                    ) === "success"
+                      ? "default"
+                      : getStepStatus(
+                            packageBuild.image_generation_error,
+                            packageBuild.image_generation_completed_at,
+                            packageBuild.image_generation_in_progress,
+                          ) === "error"
+                        ? "destructive"
+                        : "secondary"
+                  }
+                  className="text-xs"
+                >
+                  {packageBuild.image_generation_error
+                    ? "Failed"
+                    : packageBuild.image_generation_completed_at
+                      ? "Completed"
+                      : packageBuild.image_generation_in_progress
+                        ? "Running"
+                        : "Queued"}
+                </Badge>
+              </div>
+            </div>
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <div className="bg-white border-x border-b border-gray-200 rounded-b-lg p-4">
+              <div className="font-mono text-xs space-y-1">
+                {packageBuild.image_generation_error ? (
+                  <div className="text-red-600 whitespace-pre-wrap">
+                    {packageBuild.image_generation_error}
+                  </div>
+                ) : packageBuild.image_generation_logs &&
+                  packageBuild.image_generation_logs.length > 0 ? (
+                  packageBuild.image_generation_logs.map(
+                    (log: any, i: number) => (
+                      <div
+                        key={i}
+                        className="text-gray-600 whitespace-pre-wrap"
+                      >
+                        {log.msg || log.message || JSON.stringify(log)}
+                      </div>
+                    ),
+                  )
+                ) : (
+                  <div className="text-gray-500">No logs available</div>
+                )}
+              </div>
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
       </div>
     </div>
   )