@tscircuit/fake-snippets 0.0.77 → 0.0.78

package/fake-snippets-api/routes/api/packages/generate_from_jlcpcb.ts

@@ -0,0 +1,111 @@
+import { withRouteSpec } from "fake-snippets-api/lib/middleware/with-winter-spec"
+import { z } from "zod"
+import { packageSchema } from "fake-snippets-api/lib/db/schema"
+import {
+  fetchEasyEDAComponent,
+  convertRawEasyEdaToTs,
+  normalizeManufacturerPartNumber,
+  EasyEdaJsonSchema,
+} from "easyeda"
+
+export default withRouteSpec({
+  methods: ["POST"],
+  auth: "session",
+  jsonBody: z.object({
+    jlcpcb_part_number: z.string().min(1, "JLCPCB part number is required"),
+  }),
+  jsonResponse: z.object({
+    ok: z.boolean(),
+    package: packageSchema,
+  }),
+})(async (req, ctx) => {
+  const { jlcpcb_part_number } = req.jsonBody
+
+  try {
+    const rawEasyJson = await fetchEasyEDAComponent(jlcpcb_part_number)
+
+    if (!rawEasyJson) {
+      return ctx.error(404, {
+        error_code: "component_not_found",
+        message: `Component with JLCPCB part number ${jlcpcb_part_number} not found`,
+      })
+    }
+
+    const betterEasy = await EasyEdaJsonSchema.parse(rawEasyJson)
+
+    const tsxComponent = await convertRawEasyEdaToTs(rawEasyJson)
+
+    const componentName = normalizeManufacturerPartNumber(
+      betterEasy.dataStr.head.c_para["Manufacturer Part"] ?? "",
+    )
+      .replace(/[^a-zA-Z0-9-_]/g, "-")
+      .replace(/--/g, "-")
+
+    const packageName = `${ctx.auth.github_username}/${componentName}`
+
+    const existingPackage = ctx.db.packages.find((p) => p.name === packageName)
+
+    if (existingPackage) {
+      return ctx.json({
+        ok: true,
+        package: existingPackage,
+      })
+    }
+
+    const newPackage = {
+      name: packageName,
+      unscoped_name: componentName,
+      owner_name: ctx.auth.github_username,
+      code: tsxComponent,
+      created_at: new Date().toISOString(),
+      updated_at: new Date().toISOString(),
+      description: `Generated from JLCPCB part number ${jlcpcb_part_number}`,
+      creator_account_id: ctx.auth.account_id,
+      owner_org_id: ctx.auth.personal_org_id,
+      owner_github_username: ctx.auth.github_username,
+      latest_package_release_id: null,
+      latest_package_release_fs_sha: null,
+      latest_version: null,
+      license: null,
+      ai_description: "placeholder ai description",
+      ai_usage_instructions: "placeholder ai usage instructions",
+    }
+
+    const createdPackage = ctx.db.addPackage(newPackage)
+
+    const createdPackageRelease = ctx.db.addPackageRelease({
+      package_id: createdPackage.package_id,
+      version: "1.0.0",
+      created_at: new Date().toISOString(),
+      is_latest: true,
+      is_locked: false,
+    })
+
+    ctx.db.updatePackage(createdPackage.package_id, {
+      latest_package_release_id: createdPackageRelease.package_release_id,
+    })
+
+    ctx.db.addPackageFile({
+      package_release_id: createdPackageRelease.package_release_id,
+      file_path: "index.tsx",
+      content_text: String(tsxComponent),
+      created_at: new Date().toISOString(),
+    })
+
+    return ctx.json({
+      ok: true,
+      package: createdPackage as any,
+    })
+  } catch (error: any) {
+    if (String(error).includes("Component not found")) {
+      return ctx.error(404, {
+        error_code: "component_not_found",
+        message: `Component with JLCPCB part number ${jlcpcb_part_number} not found`,
+      })
+    }
+    return ctx.error(500, {
+      error_code: "package_generation_failed",
+      message: `Failed to generate package from JLCPCB part: ${error.message || String(error)}`,
+    })
+  }
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.77",
+  "version": "0.0.78",
   "type": "module",
   "repository": {
     "type": "git",

package/src/App.tsx

@@ -66,7 +66,6 @@ const SearchPage = lazyImport(() => import("@/pages/search"))
 const SettingsPage = lazyImport(() => import("@/pages/settings"))
 const UserProfilePage = lazyImport(() => import("@/pages/user-profile"))
 const DevLoginPage = lazyImport(() => import("@/pages/dev-login"))
-const BetaPage = lazyImport(() => import("@/pages/beta"))
 const ViewPackagePage = lazyImport(() => import("@/pages/view-package"))
 const PackageBuildsPage = lazyImport(() => import("@/pages/package-builds"))
 const TrendingPage = lazyImport(() => import("@/pages/trending"))
@@ -106,8 +105,6 @@ function App() {
         <Suspense fallback={<FullPageLoader />}>
           <Switch>
             <Route path="/" component={LandingPage} />
-            <Route path="/beta" component={BetaPage} />
-            <Route path="/beta/:author/:packageName" component={BetaPage} />
             <Route
               path="/view-package/:author/:packageName"
               component={ViewPackagePage}

package/src/components/CircuitJsonImportDialog.tsx

@@ -174,14 +174,31 @@ export function CircuitJsonImportDialog({
   }
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (event.ctrlKey && event.key === "Enter") {
-      handleImport()
+    if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
+      event.preventDefault()
+      if (!isLoading && isLoggedIn && (circuitJson.trim() || file)) {
+        handleImport()
+      }
+    }
+  }
+
+  const handleDialogKeyDown = (event: React.KeyboardEvent) => {
+    if (
+      event.key === "Enter" &&
+      !event.ctrlKey &&
+      !event.metaKey &&
+      event.target !== document.querySelector("textarea")
+    ) {
+      event.preventDefault()
+      if (!isLoading && isLoggedIn && (circuitJson.trim() || file)) {
+        handleImport()
+      }
     }
   }
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
+      <DialogContent onKeyDown={handleDialogKeyDown}>
         <DialogHeader>
           <DialogTitle>Import Circuit JSON</DialogTitle>
           <DialogDescription>

package/src/components/JLCPCBImportDialog.tsx

@@ -50,31 +50,16 @@ export function JLCPCBImportDialog({
     setHasBeenImportedToAccountAlready(false)
 
     try {
-      const apiUrl = `/packages/get?name=${session?.github_username}/${partNumber}`
-
-      const existingPackageRes = await axios.get(apiUrl, {
-        validateStatus: (status) => true,
+      const response = await axios.post("/packages/generate_from_jlcpcb", {
+        jlcpcb_part_number: partNumber,
       })
-
-      if (existingPackageRes.status !== 404) {
-        setHasBeenImportedToAccountAlready(true)
+      if (!response.data.ok) {
+        setError("Failed to generate package from JLCPCB part")
         setIsLoading(false)
         return
       }
 
-      const response = await axios
-        .post("/snippets/generate_from_jlcpcb", {
-          jlcpcb_part_number: partNumber,
-        })
-        .catch((e) => e)
-
-      const { snippet, error } = response.data
-
-      if (error) {
-        setError(error.message)
-        setIsLoading(false)
-        return
-      }
+      const { package: generatedPackage } = response.data
 
       toast({
         title: "Import Successful",
@@ -82,13 +67,21 @@ export function JLCPCBImportDialog({
       })
 
       onOpenChange(false)
-      navigate(`/editor?package_id=${snippet.snippet_id}`)
-    } catch (error) {
-      toast({
-        title: "Import Failed",
-        description: "Failed to import the JLCPCB component. Please try again.",
-        variant: "destructive",
-      })
+      navigate(`/editor?package_id=${generatedPackage.package_id}`)
+    } catch (error: any) {
+      if (error.response?.status === 404) {
+        setError(`Component with JLCPCB part number ${partNumber} not found`)
+      } else if (error.response?.data?.message) {
+        setError(error.response.data.message)
+      } else {
+        setError("Failed to import the JLCPCB component. Please try again.")
+        toast({
+          title: "Import Failed",
+          description:
+            "Failed to import the JLCPCB component. Please try again.",
+          variant: "destructive",
+        })
+      }
     } finally {
       setIsLoading(false)
     }
@@ -116,11 +109,22 @@ export function JLCPCBImportDialog({
             className="mt-3"
             placeholder="Enter JLCPCB part number (e.g., C46749)"
             value={partNumber}
+            disabled={isLoading}
             onChange={(e) => {
               setPartNumber(e.target.value)
               setError(null)
               setHasBeenImportedToAccountAlready(false)
             }}
+            onKeyDown={(e) => {
+              if (
+                e.key === "Enter" &&
+                !isLoading &&
+                isLoggedIn &&
+                partNumber.trim()
+              ) {
+                handleImport()
+              }
+            }}
           />
           {error && !hasBeenImportedToAccountAlready && (
             <p className="bg-red-100 p-2 mt-2 pre-wrap">{error}</p>

package/src/components/PackageBuildsPage/LogContent.tsx

@@ -14,17 +14,33 @@ const getErrorText = (error: ErrorObject | string) => {
 export const LogContent = ({
   logs,
   error,
-}: { logs: any[]; error?: ErrorObject | string | null }) => {
+}: {
+  logs: Array<{
+    type: "info" | "success" | "error"
+    message: string
+    timestamp: string
+  }>
+  error?: ErrorObject | string | null
+}) => {
   return (
     <div className="whitespace-pre-wrap font-mono text-xs">
-      {logs.map((log) =>
-        log.msg || log.message ? (
-          <div>{log.msg ?? log.message}</div>
-        ) : (
-          <div>
-            <pre>{log.message}</pre>
-          </div>
-        ),
+      {logs.map(
+        (log, i) =>
+          log.timestamp &&
+          log.message && (
+            <div
+              key={i}
+              className={
+                log.type === "error"
+                  ? "text-red-600"
+                  : log.type === "success"
+                    ? "text-green-600"
+                    : "text-gray-600"
+              }
+            >
+              {new Date(log.timestamp).toLocaleTimeString()} {log.message}
+            </div>
+          ),
       )}
       {error && <div className="text-red-600">{getErrorText(error)}</div>}
     </div>

package/src/components/PackageBuildsPage/PackageBuildDetailsPage.tsx

@@ -18,7 +18,7 @@ function computeDuration(
 }
 
 export const PackageBuildDetailsPage = () => {
-  const { packageRelease } = useCurrentPackageRelease()
+  const { packageRelease } = useCurrentPackageRelease({ include_logs: true })
   const [openSections, setOpenSections] = useState<Record<string, boolean>>({})
 
   const {
@@ -79,8 +79,8 @@ export const PackageBuildDetailsPage = () => {
           >
             <LogContent
               logs={
-                packageRelease?.transpilation_logs ?? [
-                  { msg: "No transpilation logs available" },
+                transpilation_logs ?? [
+                  { message: "No transpilation logs available" },
                 ]
               }
               error={transpilation_error}
@@ -100,8 +100,8 @@ export const PackageBuildDetailsPage = () => {
           >
             <LogContent
               logs={
-                packageRelease?.circuit_json_build_logs ?? [
-                  { msg: "No Circuit JSON logs available" },
+                circuit_json_build_logs ?? [
+                  { message: "No Circuit JSON logs available" },
                 ]
               }
               error={circuit_json_build_error!}

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

@@ -1,4 +1,4 @@
-import { Globe, Clock } from "lucide-react"
+import { Globe, GitBranch, GitCommit, Clock } from "lucide-react"
 import { useCurrentPackageRelease } from "@/hooks/use-current-package-release"
 import { useParams } from "wouter"
 import { timeAgo } from "@/lib/utils/timeAgo"
@@ -66,7 +66,7 @@ export function PackageBuildDetailsPanel() {
           </div>
           <span className="text-sm">{author}</span>
           <span className="text-sm text-gray-500">
-            {timeAgo(packageRelease?.created_at, "")}
+            {timeAgo(created_at, "")}
           </span>
         </div>
       </div>

package/src/components/dialogs/rename-package-dialog.tsx

@@ -66,6 +66,11 @@ export const RenamePackageDialog = ({
           onChange={(e) => setNewName(e.target.value.replace(" ", "").trim())}
           placeholder="Enter new name"
           disabled={renamePackageMutation.isLoading}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && !renamePackageMutation.isLoading) {
+              renamePackageMutation.mutate()
+            }
+          }}
         />
         <Button
           disabled={renamePackageMutation.isLoading}

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

@@ -9,18 +9,15 @@ import { Decoration, hoverTooltip, keymap } from "@codemirror/view"
 import { getImportsFromCode } from "@tscircuit/prompt-benchmarks/code-runner-utils"
 import type { ATABootstrapConfig } from "@typescript/ata"
 import { setupTypeAcquisition } from "@typescript/ata"
+import { linter } from "@codemirror/lint"
 import { TSCI_PACKAGE_PATTERN } from "@/lib/constants"
 import {
   createDefaultMapFromCDN,
   createSystem,
   createVirtualTypeScriptEnvironment,
 } from "@typescript/vfs"
-import {
-  tsAutocomplete,
-  tsFacet,
-  tsLinter,
-  tsSync,
-} from "@valtown/codemirror-ts"
+import { tsAutocomplete, tsFacet, tsSync } from "@valtown/codemirror-ts"
+import { getLints } from "@valtown/codemirror-ts"
 import { EditorView } from "codemirror"
 import { useEffect, useMemo, useRef, useState } from "react"
 import tsModule from "typescript"
@@ -75,6 +72,7 @@ export const CodeEditor = ({
   const editorRef = useRef<HTMLDivElement>(null)
   const viewRef = useRef<EditorView | null>(null)
   const ataRef = useRef<ReturnType<typeof setupTypeAcquisition> | null>(null)
+  const lastReceivedTsFileTimeRef = useRef<number>(0)
   const apiUrl = useSnippetsBaseApiUrl()
   const codeCompletionApi = useCodeCompletionApi()
   const [cursorPosition, setCursorPosition] = useState<number | null>(null)
@@ -218,16 +216,12 @@ export const CodeEditor = ({
         receivedFile: (code: string, path: string) => {
           fsMap.set(path, code)
           env.createFile(path, code)
-          if (viewRef.current) {
-            viewRef.current.dispatch({
-              changes: {
-                from: 0,
-                to: viewRef.current.state.doc.length,
-                insert: viewRef.current.state.doc.toString(),
-              },
-              selection: viewRef.current.state.selection,
-            })
+          if (/\.tsx?$|\.d\.ts$/.test(path)) {
+            lastReceivedTsFileTimeRef.current = Date.now()
           }
+          // Avoid dispatching a view update when ATA downloads files. Dispatching
+          // here caused the editor to reset the user's selection, which made text
+          // selection impossible while dependencies were loading.
         },
       },
     }
@@ -292,7 +286,18 @@ export const CodeEditor = ({
                 : currentFile,
             }),
             tsSync(),
-            tsLinter(),
+            linter(async (view) => {
+              if (Date.now() - lastReceivedTsFileTimeRef.current < 3000) {
+                return []
+              }
+              const config = view.state.facet(tsFacet)
+              return config
+                ? getLints({
+                    ...config,
+                    diagnosticCodesToIgnore: [],
+                  })
+                : []
+            }),
             autocompletion({ override: [tsAutocomplete()] }),
             hoverTooltip((view, pos) => {
               const line = view.state.doc.lineAt(pos)
@@ -386,6 +391,13 @@ export const CodeEditor = ({
                 }
                 return false
               },
+              keydown: (event) => {
+                if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+                  event.preventDefault()
+                  return true
+                }
+                return false
+              },
             }),
             EditorView.theme({
               ".cm-tooltip-hover": {

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

@@ -3,7 +3,9 @@ import { useCurrentPackageId } from "./use-current-package-id"
 import { useUrlParams } from "./use-url-params"
 import { usePackageRelease } from "./use-package-release"
 
-export const useCurrentPackageRelease = () => {
+export const useCurrentPackageRelease = (options?: {
+  include_logs: boolean
+}) => {
   const { packageId } = useCurrentPackageId()
   const urlParams = useUrlParams()
   const { author, packageName } = useParams()
@@ -23,6 +25,8 @@ export const useCurrentPackageRelease = () => {
     query = { package_id: packageId, is_latest: true }
   }
 
-  const { data: packageRelease, ...rest } = usePackageRelease(query)
+  const { data: packageRelease, ...rest } = usePackageRelease(query, {
+    include_logs: options?.include_logs ?? false,
+  })
   return { packageRelease, ...rest }
 }

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

@@ -18,15 +18,28 @@ type PackageReleaseQuery =
       is_latest: boolean
     }
 
-export const usePackageRelease = (query: PackageReleaseQuery | null) => {
+export const usePackageRelease = (
+  query: PackageReleaseQuery | null,
+  options?: { include_logs: boolean },
+) => {
   const axios = useAxios()
 
   return useQuery<PackageRelease, Error & { status: number }>(
-    ["packageRelease", query],
+    ["packageRelease", query, options?.include_logs],
     async () => {
       if (!query) return
 
-      const { data } = await axios.post("/package_releases/get", query)
+      const { data } = await axios.post(
+        "/package_releases/get",
+        query,
+        options?.include_logs
+          ? {
+              params: {
+                include_logs: true,
+              },
+            }
+          : undefined,
+      )
 
       if (!data.package_release) {
         throw new Error("Package release not found")

package/src/pages/latest.tsx

@@ -4,17 +4,8 @@ import { useAxios } from "@/hooks/use-axios"
 import { Package } from "fake-snippets-api/lib/db/schema"
 import Header from "@/components/Header"
 import Footer from "@/components/Footer"
-import {
-  Search,
-  Tag,
-  Calendar,
-  Keyboard,
-  Cpu,
-  Layers,
-  LucideBellElectric,
-} from "lucide-react"
+import { Search, Keyboard, Cpu, Layers, LucideBellElectric } from "lucide-react"
 import { Input } from "@/components/ui/input"
-import { Badge } from "@/components/ui/badge"
 import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
 import {
   Select,
@@ -23,8 +14,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select"
-import { PackageCardSkeleton } from "@/components/PackageCardSkeleton"
-import { PackageCard } from "@/components/PackageCard"
+import PackageSearchResults from "@/components/PackageSearchResults"
 
 const LatestPage: React.FC = () => {
   const axios = useAxios()
@@ -48,22 +38,24 @@ const LatestPage: React.FC = () => {
     },
   )
 
-  const filteredPackages = packages?.filter((pkg) => {
-    if (!searchQuery) return true
+  const filteredPackages = packages
+    ?.filter((pkg) => {
+      if (!searchQuery) return true
 
-    const query = searchQuery.toLowerCase().trim()
+      const query = searchQuery.toLowerCase().trim()
 
-    const searchableFields = [
-      pkg.unscoped_name.toLowerCase(),
-      pkg.owner_github_username?.toLowerCase() ?? "",
-      (pkg.description || "").toLowerCase(),
-    ]
+      const searchableFields = [
+        pkg.unscoped_name.toLowerCase(),
+        pkg.owner_github_username?.toLowerCase() ?? "",
+        (pkg.description || "").toLowerCase(),
+      ]
 
-    return searchableFields.some((field) => {
-      const queryWords = query.split(/\s+/).filter((word) => word.length > 0)
-      return queryWords.every((word) => field.includes(word))
+      return searchableFields.some((field) => {
+        const queryWords = query.split(/\s+/).filter((word) => word.length > 0)
+        return queryWords.every((word) => field.includes(word))
+      })
     })
-  })
+    ?.sort((a, b) => b.created_at.localeCompare(a.created_at))
 
   return (
     <div className="min-h-screen flex flex-col bg-gray-50">
@@ -71,7 +63,6 @@ const LatestPage: React.FC = () => {
       <main className="flex-grow container mx-auto px-4 py-8">
         <div className="mb-8 max-w-3xl">
           <div className="flex items-center gap-2 mb-3">
-            <Calendar className="w-6 h-6 text-blue-500" />
             <h1 className="text-4xl font-bold text-gray-900">
               Latest Packages
             </h1>
@@ -81,16 +72,6 @@ const LatestPage: React.FC = () => {
             additions showcase new ideas and innovative approaches to circuit
             design.
           </p>
-          <div className="flex flex-wrap gap-3">
-            <Badge variant="secondary" className="px-3 py-1">
-              <Tag className="w-3.5 h-3.5 mr-1" />
-              <span>Latest Uploads</span>
-            </Badge>
-            <Badge variant="secondary" className="px-3 py-1">
-              <Calendar className="w-3.5 h-3.5 mr-1" />
-              <span>Most Recent First</span>
-            </Badge>
-          </div>
         </div>
 
         <div className="mb-6">
@@ -139,58 +120,19 @@ const LatestPage: React.FC = () => {
             </Select>
           </div>
         </div>
-
-        {isLoading ? (
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-            {[...Array(6)].map((_, i) => (
-              <PackageCardSkeleton key={i} />
-            ))}
-          </div>
-        ) : error ? (
-          <div className="bg-red-50 border border-red-200 text-red-700 p-6 rounded-xl shadow-sm max-w-2xl mx-auto">
-            <div className="flex items-start">
-              <div className="mr-4 bg-red-100 p-2 rounded-full">
-                <Search className="w-6 h-6 text-red-600" />
-              </div>
-              <div>
-                <h3 className="text-lg font-semibold mb-2">
-                  Error Loading Packages
-                </h3>
-                <p className="text-red-600">
-                  We couldn't load the latest packages. Please try again later.
-                </p>
-              </div>
-            </div>
-          </div>
-        ) : filteredPackages?.length === 0 ? (
-          <div className="text-center py-12 px-4">
-            <div className="bg-slate-50 inline-flex rounded-full p-4 mb-4">
-              <Search className="w-8 h-8 text-slate-400" />
-            </div>
-            <h3 className="text-xl font-medium text-slate-900 mb-2">
-              No Matching Packages
-            </h3>
-            <p className="text-slate-500 max-w-md mx-auto mb-6">
-              {searchQuery
-                ? `No packages match your search for "${searchQuery}".`
-                : category !== "all"
-                  ? `No ${category} packages found in the latest list.`
-                  : "There are no new packages at the moment."}
-            </p>
-          </div>
-        ) : (
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-            {filteredPackages
-              ?.sort((a, b) => b.created_at.localeCompare(a.created_at))
-              ?.map((pkg) => (
-                <PackageCard
-                  key={pkg.package_id}
-                  pkg={pkg}
-                  baseUrl={apiBaseUrl}
-                />
-              ))}
-          </div>
-        )}
+        <PackageSearchResults
+          isLoading={isLoading}
+          error={error}
+          filteredPackages={filteredPackages}
+          apiBaseUrl={apiBaseUrl}
+          emptyStateMessage={
+            searchQuery
+              ? `No packages match your search for "${searchQuery}".`
+              : category !== "all"
+                ? `No ${category} packages found in the latest list.`
+                : "There are no new packages at the moment."
+          }
+        />
       </main>
       <Footer />
     </div>