@tscircuit/fake-snippets 0.0.77 → 0.0.79

package/fake-snippets-api/lib/db/autoload-packages.json

@@ -1,36 +1,8 @@
 {
   "packages": [
-    {
-      "owner": "Abse2001",
-      "name": "Arduino-Nano-Servo-Breakout"
-    },
-    {
-      "owner": "ShiboSoftwareDev",
-      "name": "Wifi-Camera-Module"
-    },
-    {
-      "owner": "imrishabh18",
-      "name": "Arduino-nano"
-    },
     {
       "owner": "seveibar",
       "name": "usb-c-flashlight"
-    },
-    {
-      "owner": "seveibar",
-      "name": "nine-key-keyboard"
-    },
-    {
-      "owner": "AnasSarkiz",
-      "name": "grid-of-LEDs-with-an-ESP32"
-    },
-    {
-      "owner": "seveibar",
-      "name": "keyboard-default60"
-    },
-    {
-      "owner": "imrishabh18",
-      "name": "motor-driver-breakout"
     }
   ]
 }

package/fake-snippets-api/routes/api/accounts/get.ts

@@ -17,7 +17,8 @@ export default withRouteSpec({
   if (req.method === "POST") {
     const { github_username } = req.jsonBody
     account = ctx.db.accounts.find(
-      (acc: Account) => acc.github_username === github_username,
+      (acc: Account) =>
+        acc.github_username.toLowerCase() === github_username.toLowerCase(),
     )
   } else {
     account = ctx.db.getAccount(ctx.auth.account_id)

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.79",
   "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/PackageBuildsPage/package-build-header.tsx

@@ -1,18 +1,10 @@
-import { ChevronDown, Download, Github, Link, RefreshCw } from "lucide-react"
+import { Github, RefreshCw } from "lucide-react"
 import { Button } from "@/components/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
 import { useParams } from "wouter"
-import { useCurrentPackageRelease } from "@/hooks/use-current-package-release"
 import { DownloadButtonAndMenu } from "../DownloadButtonAndMenu"
 
 export function PackageBuildHeader() {
   const { author, packageName } = useParams()
-  const { packageRelease } = useCurrentPackageRelease()
 
   return (
     <div className="border-b border-gray-200 bg-white px-6 py-4">

package/src/components/ViewPackagePage/components/mobile-sidebar.tsx

@@ -211,6 +211,7 @@ const MobileSidebar = ({
           packageAuthor={packageInfo.owner_github_username}
           onUpdate={handlePackageUpdate}
           packageName={packageInfo.name}
+          unscopedPackageName={packageInfo.unscoped_name}
           currentDefaultView={packageInfo.default_view}
         />
       )}

package/src/components/ViewPackagePage/components/sidebar-about-section.tsx

@@ -161,6 +161,7 @@ export default function SidebarAboutSection() {
 
       {packageInfo && (
         <EditPackageDetailsDialog
+          unscopedPackageName={packageInfo.unscoped_name}
           packageReleaseId={packageInfo.latest_package_release_id}
           packageId={packageInfo.package_id}
           currentDescription={

package/src/components/dialogs/edit-package-details-dialog.tsx

@@ -38,6 +38,7 @@ interface EditPackageDetailsDialogProps {
   currentDefaultView?: string
   isPrivate?: boolean
   packageName: string
+  unscopedPackageName: string
   packageReleaseId: string | null
   packageAuthor?: string | null
   onUpdate?: (
@@ -57,7 +58,7 @@ export const EditPackageDetailsDialog = ({
   currentLicense,
   currentDefaultView = "files",
   isPrivate = false,
-  packageName,
+  unscopedPackageName,
   packageReleaseId,
   packageAuthor,
   onUpdate,
@@ -65,13 +66,11 @@ export const EditPackageDetailsDialog = ({
   const axios = useAxios()
   const { toast } = useToast()
   const qc = useQueryClient()
-
   const {
     formData,
     setFormData,
     websiteError,
     hasLicenseChanged,
-    hasDefaultViewChanged,
     hasChanges,
     isFormValid,
   } = usePackageDetailsForm({
@@ -79,6 +78,7 @@ export const EditPackageDetailsDialog = ({
     initialWebsite: currentWebsite,
     initialLicense: currentLicense || null,
     initialDefaultView: currentDefaultView,
+    initialUnscopedPackageName: unscopedPackageName,
     isDialogOpen: open,
     initialVisibility: isPrivate ? "private" : "public",
   })
@@ -114,16 +114,15 @@ export const EditPackageDetailsDialog = ({
         website: formData.website,
         is_private: formData.visibility == "private",
         default_view: formData.defaultView,
-      })
-      const privacyUpdateResponse = await axios.post("/snippets/update", {
-        snippet_id: packageId,
-        is_private: formData.visibility === "private",
+        ...(formData.unscopedPackageName !== unscopedPackageName && {
+          name: formData.unscopedPackageName,
+        }),
       })
       if (response.status !== 200)
         throw new Error("Failed to update package details")
 
       const filesRes = await axios.post("/package_files/list", {
-        package_name_with_version: packageName,
+        package_name_with_version: `${packageAuthor}/${formData.unscopedPackageName}`,
       })
       const packageFiles: string[] =
         filesRes.status === 200
@@ -137,18 +136,32 @@ export const EditPackageDetailsDialog = ({
       if (hasLicenseChanged) {
         if (packageFiles.includes("LICENSE") && !licenseContent) {
           await axios.post("/package_files/delete", {
-            package_name_with_version: packageName,
+            package_name_with_version: `${packageAuthor}/${formData.unscopedPackageName}`,
             file_path: "LICENSE",
           })
         }
         if (licenseContent) {
           await axios.post("/package_files/create_or_update", {
-            package_name_with_version: packageName,
+            package_name_with_version: `${packageAuthor}/${formData.unscopedPackageName}`,
             file_path: "LICENSE",
             content_text: licenseContent,
           })
         }
       }
+      console.log(
+        "formData.unscopedPackageName",
+        formData.unscopedPackageName,
+        "unscopedPackageName",
+        unscopedPackageName,
+      )
+      if (formData.unscopedPackageName !== unscopedPackageName) {
+        // Use router for client-side navigation
+        window.history.replaceState(
+          {},
+          "",
+          `/${packageAuthor}/${formData.unscopedPackageName}`,
+        )
+      }
 
       return {
         description: formData.description,
@@ -187,7 +200,9 @@ export const EditPackageDetailsDialog = ({
       qc.setQueryData(["packages", packageId], context?.previous)
       toast({
         title: "Error",
-        description: "Failed to update package details. Please try again.",
+        description:
+          (error as any)?.data?.error?.message ||
+          "Failed to update package details. Please try again.",
         variant: "destructive",
       })
     },
@@ -237,11 +252,29 @@ export const EditPackageDetailsDialog = ({
             </DialogHeader>
             <div className="">
               <div className="grid gap-2">
+                <div className="space-y-1">
+                  <Label htmlFor="packageName">Package Name</Label>
+                  <Input
+                    id="packageName"
+                    value={formData.unscopedPackageName}
+                    onChange={(e) =>
+                      setFormData((prev) => ({
+                        ...prev,
+                        unscopedPackageName: e.target.value,
+                      }))
+                    }
+                    placeholder="Enter package name"
+                    disabled={updatePackageDetailsMutation.isLoading}
+                    className="w-full"
+                    autoComplete="off"
+                  />
+                </div>
                 <div className="space-y-1">
                   <Label htmlFor="website">Website</Label>
                   <Input
                     id="website"
                     value={formData.website}
+                    autoComplete="off"
                     onChange={(e) =>
                       setFormData((prev) => ({
                         ...prev,
@@ -282,6 +315,7 @@ export const EditPackageDetailsDialog = ({
                   <Label htmlFor="description">Description</Label>
                   <Textarea
                     id="description"
+                    spellCheck={false}
                     value={formData.description}
                     onChange={(e) =>
                       setFormData((prev) => ({

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}