@tscircuit/fake-snippets 0.0.92 → 0.0.94

package/dist/index.d.ts

@@ -1069,7 +1069,7 @@ declare const createDatabase: ({ seed }?: {
         }[] | null;
         datasheet_pdf_urls: string[] | null;
     }[];
-}, "addOrder" | "getOrderById" | "getOrderFilesByOrderId" | "addOrderQuote" | "getOrderQuoteById" | "getJlcpcbOrderStatesByOrderId" | "getJlcpcbOrderStepRunsByJlcpcbOrderStateId" | "updateOrder" | "addJlcpcbOrderState" | "updateJlcpcbOrderState" | "addOrderFile" | "getOrderFileById" | "addAccount" | "addAccountPackage" | "getAccountPackageById" | "updateAccountPackage" | "deleteAccountPackage" | "addSnippet" | "getLatestSnippets" | "getTrendingSnippets" | "getPackagesByAuthor" | "getSnippetByAuthorAndName" | "updateSnippet" | "getSnippetById" | "searchSnippets" | "searchPackages" | "deleteSnippet" | "addSession" | "getSessions" | "createLoginPage" | "getLoginPage" | "updateLoginPage" | "getAccount" | "updateAccount" | "createSession" | "addStar" | "removeStar" | "hasStarred" | "addPackage" | "updatePackage" | "getPackageById" | "getPackageReleaseById" | "addPackageRelease" | "updatePackageRelease" | "deletePackageFile" | "addPackageFile" | "updatePackageFile" | "getStarCount" | "getPackageFilesByReleaseId" | "updatePackageReleaseFsSha" | "addAiReview" | "updateAiReview" | "getAiReviewById" | "listAiReviews" | "addDatasheet" | "getDatasheetById" | "updateDatasheet"> & {
+}, "addOrder" | "getOrderById" | "getOrderFilesByOrderId" | "addOrderQuote" | "getOrderQuoteById" | "getJlcpcbOrderStatesByOrderId" | "getJlcpcbOrderStepRunsByJlcpcbOrderStateId" | "updateOrder" | "addJlcpcbOrderState" | "updateJlcpcbOrderState" | "addOrderFile" | "getOrderFileById" | "addAccount" | "addAccountPackage" | "getAccountPackageById" | "updateAccountPackage" | "deleteAccountPackage" | "addSnippet" | "getLatestSnippets" | "getTrendingSnippets" | "getPackagesByAuthor" | "getSnippetByAuthorAndName" | "updateSnippet" | "getSnippetById" | "searchSnippets" | "searchPackages" | "deleteSnippet" | "addSession" | "getSessions" | "createLoginPage" | "getLoginPage" | "updateLoginPage" | "getAccount" | "updateAccount" | "createSession" | "addStar" | "removeStar" | "hasStarred" | "addPackage" | "updatePackage" | "getPackageById" | "getPackageReleaseById" | "addPackageRelease" | "updatePackageRelease" | "deletePackageFile" | "addPackageFile" | "updatePackageFile" | "getStarCount" | "getPackageFilesByReleaseId" | "updatePackageReleaseFsSha" | "addAiReview" | "updateAiReview" | "getAiReviewById" | "listAiReviews" | "addDatasheet" | "getDatasheetById" | "getDatasheetByChipName" | "listDatasheets" | "updateDatasheet"> & {
     addOrder: (order: Omit<Order, "order_id">) => Order;
     getOrderById: (orderId: string) => Order | undefined;
     getOrderFilesByOrderId: (orderId: string) => OrderFile[];
@@ -1155,6 +1155,11 @@ declare const createDatabase: ({ seed }?: {
         chip_name: string;
     }) => Datasheet;
     getDatasheetById: (datasheetId: string) => Datasheet | undefined;
+    getDatasheetByChipName: (chipName: string) => Datasheet | undefined;
+    listDatasheets: ({ chip_name, is_popular, }?: {
+        chip_name?: string;
+        is_popular?: boolean;
+    }) => Datasheet[];
     updateDatasheet: (datasheetId: string, updates: Partial<Datasheet>) => Datasheet | undefined;
 }> & Omit<{
     idCounter: number;
@@ -1416,7 +1421,7 @@ declare const createDatabase: ({ seed }?: {
         }[] | null;
         datasheet_pdf_urls: string[] | null;
     }[];
-}, "addOrder" | "getOrderById" | "getOrderFilesByOrderId" | "addOrderQuote" | "getOrderQuoteById" | "getJlcpcbOrderStatesByOrderId" | "getJlcpcbOrderStepRunsByJlcpcbOrderStateId" | "updateOrder" | "addJlcpcbOrderState" | "updateJlcpcbOrderState" | "addOrderFile" | "getOrderFileById" | "addAccount" | "addAccountPackage" | "getAccountPackageById" | "updateAccountPackage" | "deleteAccountPackage" | "addSnippet" | "getLatestSnippets" | "getTrendingSnippets" | "getPackagesByAuthor" | "getSnippetByAuthorAndName" | "updateSnippet" | "getSnippetById" | "searchSnippets" | "searchPackages" | "deleteSnippet" | "addSession" | "getSessions" | "createLoginPage" | "getLoginPage" | "updateLoginPage" | "getAccount" | "updateAccount" | "createSession" | "addStar" | "removeStar" | "hasStarred" | "addPackage" | "updatePackage" | "getPackageById" | "getPackageReleaseById" | "addPackageRelease" | "updatePackageRelease" | "deletePackageFile" | "addPackageFile" | "updatePackageFile" | "getStarCount" | "getPackageFilesByReleaseId" | "updatePackageReleaseFsSha" | "addAiReview" | "updateAiReview" | "getAiReviewById" | "listAiReviews" | "addDatasheet" | "getDatasheetById" | "updateDatasheet"> & {
+}, "addOrder" | "getOrderById" | "getOrderFilesByOrderId" | "addOrderQuote" | "getOrderQuoteById" | "getJlcpcbOrderStatesByOrderId" | "getJlcpcbOrderStepRunsByJlcpcbOrderStateId" | "updateOrder" | "addJlcpcbOrderState" | "updateJlcpcbOrderState" | "addOrderFile" | "getOrderFileById" | "addAccount" | "addAccountPackage" | "getAccountPackageById" | "updateAccountPackage" | "deleteAccountPackage" | "addSnippet" | "getLatestSnippets" | "getTrendingSnippets" | "getPackagesByAuthor" | "getSnippetByAuthorAndName" | "updateSnippet" | "getSnippetById" | "searchSnippets" | "searchPackages" | "deleteSnippet" | "addSession" | "getSessions" | "createLoginPage" | "getLoginPage" | "updateLoginPage" | "getAccount" | "updateAccount" | "createSession" | "addStar" | "removeStar" | "hasStarred" | "addPackage" | "updatePackage" | "getPackageById" | "getPackageReleaseById" | "addPackageRelease" | "updatePackageRelease" | "deletePackageFile" | "addPackageFile" | "updatePackageFile" | "getStarCount" | "getPackageFilesByReleaseId" | "updatePackageReleaseFsSha" | "addAiReview" | "updateAiReview" | "getAiReviewById" | "listAiReviews" | "addDatasheet" | "getDatasheetById" | "getDatasheetByChipName" | "listDatasheets" | "updateDatasheet"> & {
     addOrder: (order: Omit<Order, "order_id">) => Order;
     getOrderById: (orderId: string) => Order | undefined;
     getOrderFilesByOrderId: (orderId: string) => OrderFile[];
@@ -1502,6 +1507,11 @@ declare const createDatabase: ({ seed }?: {
         chip_name: string;
     }) => Datasheet;
     getDatasheetById: (datasheetId: string) => Datasheet | undefined;
+    getDatasheetByChipName: (chipName: string) => Datasheet | undefined;
+    listDatasheets: ({ chip_name, is_popular, }?: {
+        chip_name?: string;
+        is_popular?: boolean;
+    }) => Datasheet[];
     updateDatasheet: (datasheetId: string, updates: Partial<Datasheet>) => Datasheet | undefined;
 };
 type DbClient = ReturnType<typeof createDatabase>;

package/dist/index.js

@@ -3112,7 +3112,7 @@ var initializer = combine(databaseSchema.parse({}), (set, get) => ({
   },
   addDatasheet: ({ chip_name }) => {
     const newDatasheet = datasheetSchema.parse({
-      datasheet_id: `datasheet_${Date.now()}`,
+      datasheet_id: crypto.randomUUID(),
       chip_name,
       created_at: (/* @__PURE__ */ new Date()).toISOString(),
       pin_information: null,
@@ -3127,6 +3127,25 @@ var initializer = combine(databaseSchema.parse({}), (set, get) => ({
     const state = get();
     return state.datasheets.find((d) => d.datasheet_id === datasheetId);
   },
+  getDatasheetByChipName: (chipName) => {
+    const state = get();
+    return state.datasheets.find((d) => d.chip_name === chipName);
+  },
+  listDatasheets: ({
+    chip_name,
+    is_popular
+  } = {}) => {
+    const state = get();
+    if (is_popular) {
+      return state.datasheets;
+    }
+    if (chip_name) {
+      return state.datasheets.filter(
+        (d) => d.chip_name.toLowerCase() === chip_name.toLowerCase()
+      );
+    }
+    return state.datasheets;
+  },
   updateDatasheet: (datasheetId, updates) => {
     let updated;
     set((state) => {

package/fake-snippets-api/lib/db/db-client.ts

@@ -1382,7 +1382,7 @@ const initializer = combine(databaseSchema.parse({}), (set, get) => ({
   },
   addDatasheet: ({ chip_name }: { chip_name: string }): Datasheet => {
     const newDatasheet = datasheetSchema.parse({
-      datasheet_id: `datasheet_${Date.now()}`,
+      datasheet_id: crypto.randomUUID(),
       chip_name,
       created_at: new Date().toISOString(),
       pin_information: null,
@@ -1397,6 +1397,27 @@ const initializer = combine(databaseSchema.parse({}), (set, get) => ({
     const state = get()
     return state.datasheets.find((d) => d.datasheet_id === datasheetId)
   },
+  getDatasheetByChipName: (chipName: string): Datasheet | undefined => {
+    const state = get()
+    return state.datasheets.find((d) => d.chip_name === chipName)
+  },
+  listDatasheets: ({
+    chip_name,
+    is_popular,
+  }: { chip_name?: string; is_popular?: boolean } = {}): Datasheet[] => {
+    const state = get()
+    if (is_popular) {
+      return state.datasheets
+    }
+
+    if (chip_name) {
+      return state.datasheets.filter(
+        (d) => d.chip_name.toLowerCase() === chip_name.toLowerCase(),
+      )
+    }
+
+    return state.datasheets
+  },
   updateDatasheet: (
     datasheetId: string,
     updates: Partial<Datasheet>,

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

@@ -5,16 +5,26 @@ import { z } from "zod"
 export default withRouteSpec({
   methods: ["GET", "POST"],
   auth: "session",
-  queryParams: z.object({
-    datasheet_id: z.string(),
-  }),
+  queryParams: z
+    .object({
+      datasheet_id: z.string().optional(),
+      chip_name: z.string().optional(),
+    })
+    .refine((val) => val.datasheet_id || val.chip_name, {
+      message: "datasheet_id or chip_name required",
+    }),
   jsonBody: z.any().optional(),
   jsonResponse: z.object({
     datasheet: datasheetSchema,
   }),
 })(async (req, ctx) => {
-  const { datasheet_id } = req.query
-  const datasheet = ctx.db.getDatasheetById(datasheet_id)
+  const { datasheet_id, chip_name } = req.query
+  let datasheet
+  if (datasheet_id) {
+    datasheet = ctx.db.getDatasheetById(datasheet_id)
+  } else if (chip_name) {
+    datasheet = ctx.db.getDatasheetByChipName(chip_name)
+  }
   if (!datasheet) {
     return ctx.error(404, {
       error_code: "datasheet_not_found",

package/fake-snippets-api/routes/api/datasheets/list.ts

@@ -0,0 +1,29 @@
+import { withRouteSpec } from "fake-snippets-api/lib/middleware/with-winter-spec"
+import { z } from "zod"
+
+export default withRouteSpec({
+  methods: ["GET", "POST"],
+  auth: "none",
+  commonParams: z.object({
+    chip_name: z.string().optional(),
+    is_popular: z.boolean().optional(),
+  }),
+  jsonResponse: z.object({
+    datasheets: z.array(
+      z.object({
+        datasheet_id: z.string().uuid(),
+        chip_name: z.string(),
+      }),
+    ),
+  }),
+})(async (req, ctx) => {
+  const { chip_name, is_popular } = req.commonParams
+  const datasheets = ctx.db
+    .listDatasheets({ chip_name, is_popular })
+    .map((ds) => ({
+      datasheet_id: ds.datasheet_id,
+      chip_name: ds.chip_name,
+    }))
+
+  return ctx.json({ datasheets })
+})

package/package.json

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

package/src/App.tsx

@@ -68,6 +68,7 @@ const DevLoginPage = lazyImport(() => import("@/pages/dev-login"))
 const ViewPackagePage = lazyImport(() => import("@/pages/view-package"))
 const PackageBuildsPage = lazyImport(() => import("@/pages/package-builds"))
 const TrendingPage = lazyImport(() => import("@/pages/trending"))
+const DatasheetPage = lazyImport(() => import("@/pages/datasheet"))
 const PackageEditorPage = lazyImport(async () => {
   const [editorModule] = await Promise.all([
     import("@/pages/package-editor"),
@@ -180,6 +181,7 @@ function App() {
             <Route path="/settings" component={SettingsPage} />
             <Route path="/search" component={SearchPage} />
             <Route path="/trending" component={TrendingPage} />
+            <Route path="/datasheets/:chipName" component={DatasheetPage} />
             <Route path="/authorize" component={AuthenticatePage} />
             <Route path="/my-orders" component={MyOrdersPage} />
             <Route path="/dev-login" component={DevLoginPage} />

package/src/components/CmdKMenu.tsx

@@ -282,7 +282,7 @@ const CmdKMenu = () => {
       switch (type) {
         case "package":
         case "recent":
-          window.location.href = `/editor?package_id=${item.package_id}`
+          window.location.href = `/${item.owner_github_username}/${item.unscoped_name}`
           setOpen(false)
           break
         case "blank":

package/src/components/PackageBuildsPage/LogContent.tsx

@@ -18,6 +18,7 @@ export const LogContent = ({
   logs: Array<{
     type?: "info" | "success" | "error"
     msg?: string
+    message?: string
     timestamp?: string
   }>
   error?: ErrorObject | string | null
@@ -25,7 +26,8 @@ export const LogContent = ({
   return (
     <div className="font-mono text-xs space-y-1 min-w-0">
       {logs.map((log, i) => {
-        if (!log.msg) return null
+        const text = log.msg ?? log.message
+        if (!text) return null
 
         return (
           <div
@@ -44,7 +46,7 @@ export const LogContent = ({
               </span>
             )}
             {log.timestamp && " "}
-            <span className="break-all">{log.msg}</span>
+            <span className="break-all">{text}</span>
           </div>
         )
       })}

package/src/components/PackageCard.tsx

@@ -99,6 +99,8 @@ export const PackageCard: React.FC<PackageCardProps> = ({
       })
   }
 
+  const availableImages = ["pcb", "schematic", "assembly", "3d"]
+
   const cardContent = (
     <div
       className={`border p-4 rounded-md hover:shadow-md transition-shadow flex flex-col gap-4 ${className}`}
@@ -108,8 +110,8 @@ export const PackageCard: React.FC<PackageCardProps> = ({
           className={`${imageSize} flex-shrink-0 rounded-md overflow-hidden`}
         >
           <ImageWithFallback
-            src={`${baseUrl}/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.svg?fs_sha=${pkg.latest_package_release_fs_sha}`}
-            alt={`${pkg.unscoped_name} PCB image`}
+            src={`${baseUrl}/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/${availableImages.includes(pkg.default_view || "") ? pkg.default_view : "3d"}.png?fs_sha=${pkg.latest_package_release_fs_sha}`}
+            alt={`${pkg.unscoped_name} ${availableImages.includes(pkg.default_view || "") ? pkg.default_view : "3D"} view`}
             className={`object-cover h-full w-full ${imageTransform}`}
           />
         </div>

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

@@ -224,34 +224,33 @@ export function CodeAndPreview({ pkg, projectUrl }: Props) {
             pkgFilesLoaded={!isLoading}
           />
         </div>
-        {state.showPreview && (
-          <div
-            className={cn(
-              "flex p-0 flex-col min-h-[640px]",
-              state.fullScreen
-                ? "fixed inset-0 z-50 bg-white p-4 overflow-hidden"
-                : "w-full md:w-1/2",
-            )}
-          >
-            <SuspenseRunFrame
-              showRunButton
-              forceLatestEvalVersion
-              onRenderStarted={() =>
-                setState((prev) => ({ ...prev, lastRunCode: currentFileCode }))
-              }
-              onRenderFinished={({ circuitJson }) => {
-                setState((prev) => ({ ...prev, circuitJson }))
-                toastManualEditConflicts(circuitJson, toast)
-              }}
-              mainComponentPath={mainComponentPath}
-              onEditEvent={(event) => {
-                handleEditEvent(event)
-              }}
-              fsMap={fsMap ?? {}}
-              projectUrl={projectUrl}
-            />
-          </div>
-        )}
+        <div
+          className={cn(
+            "flex p-0 flex-col min-h-[640px]",
+            state.fullScreen
+              ? "fixed inset-0 z-50 bg-white p-4 overflow-hidden"
+              : "w-full md:w-1/2",
+            !state.showPreview && "hidden",
+          )}
+        >
+          <SuspenseRunFrame
+            showRunButton
+            forceLatestEvalVersion
+            onRenderStarted={() =>
+              setState((prev) => ({ ...prev, lastRunCode: currentFileCode }))
+            }
+            onRenderFinished={({ circuitJson }) => {
+              setState((prev) => ({ ...prev, circuitJson }))
+              toastManualEditConflicts(circuitJson, toast)
+            }}
+            mainComponentPath={mainComponentPath}
+            onEditEvent={(event) => {
+              handleEditEvent(event)
+            }}
+            fsMap={fsMap ?? {}}
+            projectUrl={projectUrl}
+          />
+        </div>
       </div>
       <NewPackageSaveDialog initialIsPrivate={false} onSave={savePackage} />
       <DiscardChangesDialog onConfirm={handleDiscardChanges} />

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

@@ -0,0 +1,30 @@
+import { useMutation, useQueryClient } from "react-query"
+import { useAxios } from "@/hooks/use-axios"
+import type { Datasheet } from "fake-snippets-api/lib/db/schema"
+
+export const useCreateDatasheet = ({
+  onSuccess,
+}: { onSuccess?: (datasheet: Datasheet) => void } = {}) => {
+  const axios = useAxios()
+  const queryClient = useQueryClient()
+
+  return useMutation(
+    ["createDatasheet"],
+    async ({ chip_name }: { chip_name: string }) => {
+      const { data } = await axios.post("/datasheets/create", { chip_name })
+      await axios.get("/_fake/run_async_tasks")
+      return data.datasheet as Datasheet
+    },
+    {
+      onSuccess: (datasheet, variables) => {
+        if (variables?.chip_name) {
+          queryClient.invalidateQueries(["datasheet", variables.chip_name])
+        }
+        onSuccess?.(datasheet)
+      },
+      onError: (error: any) => {
+        console.error("Error creating datasheet:", error)
+      },
+    },
+  )
+}

package/src/hooks/use-datasheet.ts

@@ -0,0 +1,18 @@
+import { useQuery } from "react-query"
+import { useAxios } from "@/hooks/use-axios"
+import type { Datasheet } from "fake-snippets-api/lib/db/schema"
+
+export const useDatasheet = (chipName: string | null) => {
+  const axios = useAxios()
+  return useQuery<Datasheet, Error & { status: number }>(
+    ["datasheet", chipName],
+    async () => {
+      if (!chipName) throw new Error("chip name required")
+      const { data } = await axios.get("/datasheets/get", {
+        params: { chip_name: chipName },
+      })
+      return data.datasheet as Datasheet
+    },
+    { enabled: Boolean(chipName), retry: false, refetchOnWindowFocus: false },
+  )
+}

package/src/pages/dashboard.tsx

@@ -71,7 +71,11 @@ export const DashboardPage = () => {
   const { data: latestPackages } = useQuery<Package[]>(
     "latestPackages",
     async () => {
-      const response = await axios.get("/packages/list_latest")
+      const response = await axios.get("/packages/list_latest", {
+        params: {
+          limit: 10,
+        },
+      })
       return response.data.packages
     },
     {

package/src/pages/datasheet.tsx

@@ -0,0 +1,87 @@
+import { useParams } from "wouter"
+import { useDatasheet } from "@/hooks/use-datasheet"
+import { useCreateDatasheet } from "@/hooks/use-create-datasheet"
+import Header from "@/components/Header"
+import Footer from "@/components/Footer"
+import type { Datasheet } from "fake-snippets-api/lib/db/schema"
+
+export const DatasheetPage = () => {
+  const { chipName } = useParams<{ chipName: string }>()
+  const datasheetQuery = useDatasheet(chipName)
+  const createDatasheet = useCreateDatasheet()
+
+  const handleCreate = () => {
+    if (!chipName) return
+    createDatasheet.mutate({ chip_name: chipName })
+  }
+
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+      <main className="container mx-auto flex-1 px-4 py-8">
+        <h1 className="text-3xl font-bold mb-6">{chipName} Datasheet</h1>
+        {datasheetQuery.isLoading ? (
+          <p>Loading...</p>
+        ) : datasheetQuery.data ? (
+          <div>
+            <h2 className="text-xl font-semibold mb-2">Pin Information</h2>
+            {datasheetQuery.data.pin_information ? (
+              <table className="table-auto border-collapse mb-6">
+                <thead>
+                  <tr>
+                    <th className="border px-2 py-1">Pin</th>
+                    <th className="border px-2 py-1">Name</th>
+                    <th className="border px-2 py-1">Description</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {datasheetQuery.data.pin_information.map((pin) => (
+                    <tr key={pin.pin_number}>
+                      <td className="border px-2 py-1">{pin.pin_number}</td>
+                      <td className="border px-2 py-1">{pin.name}</td>
+                      <td className="border px-2 py-1">{pin.description}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            ) : (
+              <p>No pin information available.</p>
+            )}
+
+            <h2 className="text-xl font-semibold mb-2">PDFs</h2>
+            {datasheetQuery.data.datasheet_pdf_urls ? (
+              <ul className="list-disc pl-5">
+                {datasheetQuery.data.datasheet_pdf_urls.map((url) => (
+                  <li key={url}>
+                    <a href={url} className="text-blue-600 underline">
+                      {url}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            ) : (
+              <p>No datasheet PDFs available.</p>
+            )}
+          </div>
+        ) : datasheetQuery.error &&
+          (datasheetQuery.error as any).status === 404 ? (
+          <div>
+            <p>No datasheet found.</p>
+            <button
+              className="mt-2 px-4 py-2 bg-blue-500 text-white rounded"
+              onClick={handleCreate}
+              disabled={createDatasheet.isLoading}
+            >
+              {createDatasheet.isLoading ? "Creating..." : "Create Datasheet"}
+            </button>
+          </div>
+        ) : (
+          <p>Error loading datasheet.</p>
+        )}
+      </main>
+      <Footer />
+    </div>
+  )
+}
+
+export default DatasheetPage