@tscircuit/fake-snippets 0.0.109 → 0.0.110

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>
   )

package/src/components/preview/PackageReleasesDashboard.tsx

@@ -8,18 +8,20 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { MoreHorizontal, Clock, GitBranch, Eye } from "lucide-react"
 import { GitHubLogoIcon } from "@radix-ui/react-icons"
-import { useLocation } from "wouter"
 import { BuildsList } from "./BuildsList"
 import Header from "../Header"
 import { formatTimeAgo } from "@/lib/utils/formatTimeAgo"
 import { getBuildStatus } from "."
-import { PrefetchPageLink } from "../PrefetchPageLink"
+import { Link } from "wouter"
 import { PackageBreadcrumb } from "../PackageBreadcrumb"
 import {
   Package,
   PackageBuild,
   PackageRelease,
 } from "fake-snippets-api/lib/db/schema"
+import { useDownloadZip } from "@/hooks/use-download-zip"
+import { useToast } from "@/hooks/use-toast"
+import { usePackageFiles } from "@/hooks/use-package-files"
 
 export const PackageReleasesDashboard = ({
   latestRelease,
@@ -30,9 +32,21 @@ export const PackageReleasesDashboard = ({
   latestBuild: PackageBuild | null
   pkg: Package
 }) => {
-  const [, setLocation] = useLocation()
   const { status, label } = getBuildStatus(latestBuild)
-
+  const { toastLibrary } = useToast()
+  const { downloadZip } = useDownloadZip()
+  const { data: packageFiles } = usePackageFiles(
+    latestRelease.package_release_id,
+  )
+  const handleDownloadZip = () => {
+    if (pkg && packageFiles) {
+      toastLibrary.promise(downloadZip(pkg, packageFiles ?? []), {
+        loading: "Downloading ZIP...",
+        success: "ZIP downloaded successfully!",
+        error: "Failed to download ZIP",
+      })
+    }
+  }
   return (
     <>
       <Header />
@@ -59,12 +73,12 @@ export const PackageReleasesDashboard = ({
                 </div>
                 <div className="min-w-0 flex-1">
                   <div className="flex flex-col sm:flex-row sm:items-center gap-3">
-                    <PrefetchPageLink
+                    <Link
                       href={"/" + pkg.name}
                       className="text-2xl font-bold text-gray-900 truncate"
                     >
                       {pkg.name}
-                    </PrefetchPageLink>
+                    </Link>
                     <Badge
                       variant={
                         status === "success"
@@ -139,7 +153,7 @@ export const PackageReleasesDashboard = ({
                     <span className="sm:hidden">Repository</span>
                   </Button>
                 )}
-                {latestBuild && (
+                {latestBuild && status !== "error" && (
                   <Button
                     variant="outline"
                     size="sm"
@@ -178,10 +192,8 @@ export const PackageReleasesDashboard = ({
                         </a>
                       </DropdownMenuItem>
                     )}
-                    <DropdownMenuItem asChild>
-                      <a href="#" download>
-                        Download Build
-                      </a>
+                    <DropdownMenuItem asChild onClick={handleDownloadZip}>
+                      <span>Download Zip</span>
                     </DropdownMenuItem>
                     <DropdownMenuItem
                       onClick={() => {

package/src/components/ui/tree-view.tsx

@@ -317,9 +317,12 @@ const TreeNode = ({
             default={defaultNodeIcon}
           />
           <span className="text-sm truncate">{item.name}</span>
-          <TreeActions isSelected={selectedItemId === item.id}>
-            {item.actions}
-          </TreeActions>
+          <div
+            className="flex items-center"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <TreeActions isSelected={true}>{item.actions}</TreeActions>
+          </div>
         </AccordionTrigger>
         <AccordionContent className="ml-4 pl-1 border-l">
           <TreeItem

package/src/hooks/use-add-org-member-mutation.ts

@@ -0,0 +1,51 @@
+import { useMutation, useQueryClient } from "react-query"
+import { useAxios } from "@/hooks/use-axios"
+import { useGlobalStore } from "@/hooks/use-global-store"
+
+export const useAddOrgMemberMutation = ({
+  onSuccess,
+  onError,
+}: { onSuccess?: () => void; onError?: (error: any) => void } = {}) => {
+  const axios = useAxios()
+  const session = useGlobalStore((s) => s.session)
+  const queryClient = useQueryClient()
+
+  return useMutation(
+    ["addOrgMember"],
+    async ({
+      orgId,
+      accountId,
+      githubUsername,
+    }: {
+      orgId: string
+      accountId?: string
+      githubUsername?: string
+    }) => {
+      if (!session) throw new Error("No session")
+
+      const payload: any = {
+        org_id: orgId,
+      }
+
+      if (accountId) {
+        payload.account_id = accountId
+      }
+
+      if (githubUsername) {
+        payload.github_username = githubUsername
+      }
+
+      await axios.post("/orgs/add_member", payload)
+    },
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries(["orgs", "members"])
+        onSuccess?.()
+      },
+      onError: (error: any) => {
+        console.error("Error adding organization member:", error)
+        onError?.(error)
+      },
+    },
+  )
+}

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

@@ -0,0 +1,38 @@
+import { useMutation } from "react-query"
+import { useAxios } from "./use-axios"
+import { useGlobalStore } from "./use-global-store"
+import type { PublicOrgSchema } from "fake-snippets-api/lib/db/schema"
+
+export const useCreateOrgMutation = ({
+  onSuccess,
+}: { onSuccess?: (org: PublicOrgSchema) => void } = {}) => {
+  const axios = useAxios()
+  const session = useGlobalStore((s) => s.session)
+
+  return useMutation(
+    ["createOrg"],
+    async ({ name }: { name: string }) => {
+      if (!session) throw new Error("No session")
+
+      const {
+        data: { org: newOrg },
+      } = await axios.post("/orgs/create", {
+        name,
+      })
+
+      if (!newOrg) {
+        throw new Error("Failed to create organization")
+      }
+
+      return newOrg
+    },
+    {
+      onSuccess: (org: PublicOrgSchema) => {
+        onSuccess?.(org)
+      },
+      onError: (error: any) => {
+        console.error("Error creating organization:", error)
+      },
+    },
+  )
+}

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

@@ -16,11 +16,13 @@ export const useCreatePackageMutation = ({
       description,
       is_private,
       is_unlisted,
+      org_id,
     }: {
       name?: string
       description?: string
       is_private?: boolean
       is_unlisted?: boolean
+      org_id?: string
     }) => {
       if (!session) throw new Error("No session")
 
@@ -31,6 +33,7 @@ export const useCreatePackageMutation = ({
         description,
         is_private,
         is_unlisted,
+        org_id,
       })
 
       if (!newPackage) {

package/src/hooks/use-current-package-release.ts

@@ -21,12 +21,13 @@ export const useCurrentPackageRelease = (options?: {
 
   let query: Parameters<typeof usePackageRelease>[0] | null = null
 
-  if (releaseId) {
+  // Prioritize package_name + is_latest for better caching consistency
+  if (author && packageName && !version && !releaseId) {
+    query = { package_name: `${author}/${packageName}`, is_latest: true }
+  } else if (releaseId) {
     query = { package_release_id: releaseId }
   } else if (version && author && packageName) {
     query = { package_name_with_version: `${author}/${packageName}@${version}` }
-  } else if (author && packageName) {
-    query = { package_name: `${author}/${packageName}`, is_latest: true }
   } else if (packageId) {
     query = { package_id: packageId, is_latest: true }
   }

package/src/hooks/use-download-zip.ts

@@ -20,8 +20,8 @@ export const useDownloadZip = () => {
 
       for (const file of visibleFiles) {
         try {
-          const response = await axios.post("/package_files/get", {
-            package_file_id: file.package_file_id,
+          const response = await axios.get("/package_files/get", {
+            params: { package_file_id: file.package_file_id },
           })
 
           const content = response.data.package_file?.content_text || ""

package/src/hooks/use-global-store.ts

@@ -28,7 +28,9 @@ export const useGlobalStore = create<Store>()(
   ),
 )
 
-useGlobalStore.subscribe((state) => {
-  ;(window as any).globalStore = state
-  window.TSCIRCUIT_REGISTRY_TOKEN = state.session?.token ?? null
-})
+if (typeof window !== "undefined") {
+  useGlobalStore.subscribe((state) => {
+    ;(window as any).globalStore = state
+    window.TSCIRCUIT_REGISTRY_TOKEN = state.session?.token ?? null
+  })
+}

package/src/hooks/use-jlcpcb-component-import.tsx

@@ -0,0 +1,164 @@
+import React, { useCallback } from "react"
+import { useToast } from "@/hooks/use-toast"
+import { useGlobalStore } from "@/hooks/use-global-store"
+import { useLocation } from "wouter"
+import { useCreatePackageMutation } from "@/hooks/use-create-package-mutation"
+import { useCreatePackageReleaseMutation } from "@/hooks/use-create-package-release-mutation"
+import { useCreatePackageFilesMutation } from "@/hooks/use-create-package-files-mutation"
+import { useAxios } from "@/hooks/use-axios"
+import { JlcpcbComponentTsxLoadedPayload } from "@tscircuit/runframe/runner"
+
+export const useJlcpcbComponentImport = () => {
+  const { toastLibrary } = useToast()
+  const session = useGlobalStore((s) => s.session)
+  const [, navigate] = useLocation()
+  const axios = useAxios()
+  const createPackageMutation = useCreatePackageMutation()
+  const createReleaseMutation = useCreatePackageReleaseMutation()
+  const createFilesMutation = useCreatePackageFilesMutation()
+
+  const runImport = useCallback(
+    async ({ result, tsx }: JlcpcbComponentTsxLoadedPayload) => {
+      if (!session) {
+        throw new Error("You must be logged in to import from JLCPCB")
+      }
+
+      const partNumber = result.component.partNumber || "component"
+
+      const normalizePartNumber = (input: string) =>
+        input
+          .replace(/^@/, "")
+          .trim()
+          .replace(/\s+/g, "-")
+          .replace(/[^a-zA-Z0-9-_/]/g, "-")
+          .replace(/--+/g, "-")
+          .replace(/-+$/g, "")
+          .replace(/^-+/g, "") || "component"
+
+      const componentSlug = normalizePartNumber(partNumber)
+      const packageName = `${session.github_username}/${componentSlug}`
+
+      const fetchExistingPackage = async () => {
+        try {
+          const { data } = await axios.post("/packages/get", {
+            name: packageName,
+          })
+          return data.package
+        } catch (error: any) {
+          const status = error?.response?.status || error?.status
+          if (status === 404) return null
+          throw error
+        }
+      }
+
+      const existingPackage = await fetchExistingPackage()
+      if (existingPackage) {
+        navigate(`/editor?package_id=${existingPackage.package_id}`)
+        return {
+          partNumber,
+          packageId: existingPackage.package_id,
+          existing: true,
+        }
+      }
+
+      const description =
+        result.component.description ||
+        `Generated from JLCPCB part number ${partNumber}`
+
+      let newPackage
+      try {
+        newPackage = await createPackageMutation.mutateAsync({
+          name: packageName,
+          description,
+        })
+      } catch (error) {
+        const fallbackPackage = await fetchExistingPackage()
+        if (fallbackPackage) {
+          navigate(`/editor?package_id=${fallbackPackage.package_id}`)
+          return {
+            partNumber,
+            packageId: fallbackPackage.package_id,
+            existing: true,
+          }
+        }
+        throw error
+      }
+
+      const release = await createReleaseMutation.mutateAsync({
+        package_id: newPackage.package_id,
+        version: "0.1.0",
+        is_latest: true,
+      })
+
+      await createFilesMutation.mutateAsync({
+        file_path: "index.tsx",
+        content_text: tsx,
+        package_release_id: release.package_release_id,
+      })
+
+      navigate(`/editor?package_id=${newPackage.package_id}`)
+      return {
+        partNumber,
+        packageId: newPackage.package_id,
+        existing: false,
+      }
+    },
+    [
+      createFilesMutation,
+      createPackageMutation,
+      createReleaseMutation,
+      axios,
+      navigate,
+      session,
+    ],
+  )
+
+  const importComponent = useCallback(
+    async (payload: JlcpcbComponentTsxLoadedPayload) => {
+      const importPromise = runImport(payload)
+
+      toastLibrary.promise(importPromise, {
+        loading: "Importing component...",
+        success: ({ partNumber, existing }) => (
+          <p>
+            {existing
+              ? `Component ${partNumber} already exists. Opening package in the editor.`
+              : `Component ${partNumber} imported successfully. Opening package in the editor.`}
+          </p>
+        ),
+        error: (error) => (
+          <p>
+            {error instanceof Error
+              ? error.message
+              : "Failed to import component"}
+          </p>
+        ),
+      })
+
+      await importPromise
+    },
+    [runImport, toastLibrary],
+  )
+
+  return {
+    importComponent,
+  }
+}
+
+export const openJlcpcbImportIssue = (
+  partNumber: string,
+  errorMessage: string,
+) => {
+  const url = getJlcpcbImportIssueUrl(partNumber, errorMessage)
+  window.open(url, "_blank")
+}
+
+const getJlcpcbImportIssueUrl = (partNumber: string, errorMessage: string) => {
+  const issueTitle = `[${partNumber}] Failed to import from JLCPCB`
+  const issueBody = `I tried to import the part number ${partNumber} from JLCPCB, but it failed. Here's the error I got:\n\`\`\`\n${errorMessage}\n\`\`\`\n\nCould be an issue in \`fetchEasyEDAComponent\` or \`convertRawEasyEdaToTs\``
+  const issueLabels = "snippets,good first issue"
+  const url = `https://github.com/tscircuit/easyeda-converter/issues/new?title=${encodeURIComponent(
+    issueTitle,
+  )}&body=${encodeURIComponent(issueBody)}&labels=${encodeURIComponent(issueLabels)}`
+  return url
+}

package/src/hooks/use-list-org-members.ts

@@ -0,0 +1,27 @@
+import { useQuery } from "react-query"
+import { useAxios } from "@/hooks/use-axios"
+import type { Account } from "fake-snippets-api/lib/db/schema"
+
+export const useListOrgMembers = ({
+  orgId,
+  orgName,
+}: { orgId?: string; orgName?: string }) => {
+  const axios = useAxios()
+  return useQuery<Account[], Error & { status: number }>(
+    ["orgs", "members", orgId || orgName],
+    async () => {
+      if (!orgId && !orgName) {
+        throw new Error("Organization ID or name is required")
+      }
+      const params = orgId ? { org_id: orgId } : { name: orgName }
+      const { data } = await axios.get("/orgs/list_members", { params })
+      return data.members
+    },
+    {
+      enabled: Boolean(orgId || orgName),
+      retry: false,
+      refetchOnWindowFocus: false,
+      keepPreviousData: true,
+    },
+  )
+}

package/src/hooks/use-list-user-orgs.ts

@@ -0,0 +1,25 @@
+import { useQuery } from "react-query"
+import { useAxios } from "@/hooks/use-axios"
+import type { PublicOrgSchema } from "fake-snippets-api/lib/db/schema"
+import { useGlobalStore } from "./use-global-store"
+
+export const useListUserOrgs = (githubHandle?: string) => {
+  const axios = useAxios()
+  const session = useGlobalStore((s) => s.session)
+  const github_handle = githubHandle || session?.github_username
+
+  return useQuery<PublicOrgSchema[], Error & { status: number }>(
+    ["orgs", "list", github_handle],
+    async () => {
+      const { data } = await axios.get("/orgs/list", {
+        ...(github_handle && { params: { github_handle } }),
+      })
+      return data.orgs
+    },
+    {
+      retry: false,
+      refetchOnWindowFocus: false,
+      enabled: Boolean(github_handle),
+    },
+  )
+}