@tscircuit/fake-snippets 0.0.106 → 0.0.108

package/CLAUDE.md

@@ -0,0 +1,92 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+tscircuit.com is a React-based web application for creating, sharing, and managing electronic circuit designs using TypeScript and React. It features a circuit editor, package management system, AI-assisted design tools, and visualization of PCB layouts and 3D models.
+
+## Development Commands
+
+- `bun run dev` - Start development server (builds fake API and runs on localhost:5173)
+- `bun run build` - Full production build (generates images, sitemap, builds fake API, compiles TypeScript, and builds with Vite)
+- `bun run typecheck` - Run TypeScript type checking without emitting files
+- `bun run format` - Format code using Biome
+- `bun run lint` - Check code formatting with Biome
+- `bun run playwright` - Run Playwright end-to-end tests
+- `bun run playwright:update` - Update Playwright test snapshots
+- `bun run snapshot` - Interactive snapshot updating tool (prompts for specific test file)
+
+### Fake API Development
+- `bun run build:fake-api` - Build the complete fake API (TypeScript compilation, bundle generation, schema building)
+- `bun run dev:registry` - Run dev server using registry API at localhost:3100
+
+## Architecture
+
+### Frontend Structure
+- **React SPA** with Vite bundler, using Wouter for routing and lazy-loaded pages
+- **State Management**: Zustand for global state, React Query for server state
+- **UI Framework**: Tailwind CSS with Radix UI components and custom shadcn/ui components
+- **Code Editor**: CodeMirror 6 with TypeScript support and AI completion
+
+### API Architecture
+- **Fake API**: Development API built with Winterspec, providing full backend simulation
+- **Database Schema**: Zod-validated schemas for packages, builds, releases, snippets, accounts, orders
+- **Authentication**: Session-based auth with GitHub integration
+
+### Key Domains
+- **Packages**: Reusable circuit components with versioning and releases
+- **Package Builds**: Compilation artifacts with build status and logs  
+- **Package Releases**: Published versions with metadata and assets
+- **Snippets**: Legacy circuit designs (being migrated to packages)
+- **Circuit JSON**: Standard format for circuit data interchange
+
+### File Organization
+- `src/components/` - Reusable UI components
+- `src/pages/` - Route-based page components  
+- `src/hooks/` - Custom React hooks for data fetching and state
+- `src/lib/` - Utilities, constants, and helper functions
+- `fake-snippets-api/` - Mock API implementation with Winterspec
+- `playwright-tests/` - End-to-end tests with visual regression snapshots
+
+## Testing Strategy
+
+Uses Playwright for end-to-end testing with visual regression snapshots. Tests cover critical user flows including editor functionality, package management, authentication, and responsive design across viewport sizes.
+
+## Key Technical Patterns
+
+### Data Fetching
+- React Query for server state with custom hooks (use-package-*, use-snippet-*, etc.)
+- Fake API provides development backend with realistic data simulation
+- SSR support via Vercel for SEO and performance
+
+### Circuit Visualization  
+- Multiple viewers: PCB viewer, schematic viewer, 3D viewer, assembly viewer
+- SVG-based rendering with interactive controls
+- Real-time preview updates during code editing
+
+### Code Compilation
+- TypeScript compilation in browser using Monaco/TypeScript compiler API
+- Circuit JSON generation from TypeScript code
+- Error handling and display for compilation issues
+
+### Package Management
+- Package files with hierarchical structure
+- Build artifacts and release management
+- GitHub integration for repository linking
+
+## Environment Variables
+
+Development AI testing requires:
+```bash
+VITE_USE_DIRECT_AI_REQUESTS=true
+VITE_ANTHROPIC_API_KEY=<your-key-here>
+```
+
+## Build Tools
+
+- **Bundler**: Vite with React plugin and image optimization
+- **TypeScript**: Strict mode with path aliases (@/* → src/*)
+- **Styling**: Tailwind CSS with custom design tokens
+- **Code Quality**: Biome for formatting and linting
+- **Package Manager**: Bun for fast installs and script execution

package/api/generated-index.js

@@ -31,7 +31,7 @@ const PREFETCHABLE_PAGES = new Set([
   "latest",
   "settings",
   "quickstart",
-  "view-connected-repo",
+  "releases",
 ])
 
 const pageDescriptions = {
@@ -51,8 +51,7 @@ const pageDescriptions = {
     "Get started quickly with tscircuit. Create new circuit packages, import components from JLCPCB, or start from templates to begin your electronic design journey.",
   settings:
     "Manage your tscircuit account settings, shipping information, and preferences for electronic design and PCB ordering.",
-  "view-connected-repo":
-    "View and manage your connected repositories. Monitor repository status, access build information, and configure build options.",
+  releases: "View all package releases, access build information.",
 }
 
 function getPageDescription(pageName) {
@@ -90,7 +89,10 @@ function getHtmlWithModifiedSeoTags({
   `
 
   // First replace SEO tags
-  let modifiedHtml = `${htmlContent.substring(0, seoStartIndex)}${seoTags}${htmlContent.substring(seoEndIndex)}`
+  let modifiedHtml = `${htmlContent.substring(
+    0,
+    seoStartIndex,
+  )}${seoTags}${htmlContent.substring(seoEndIndex)}`
 
   // Then handle SSR data injection
   if (ssrPackageData) {
@@ -177,21 +179,25 @@ async function handleDatasheetPage(req, res) {
 
 async function handleCustomPackageHtml(req, res) {
   // Get the author and package name
-  const [_, author, unscopedPackageName] = req.url.split("?")[0].split("/")
+  const [_, author, unscopedPackageName, other] = req.url
+    .split("?")[0]
+    .split("/")
+  if (other == "releases" || other == "release") {
+    throw new Error("Release route")
+  }
   if (!author || !unscopedPackageName) {
     throw new Error("Invalid author/package URL")
   }
   if (author === "datasheets") {
     throw new Error("Datasheet route")
   }
-  if (author === "build" || unscopedPackageName === "view-connected-repo") {
-    throw new Error("Build  route - not a package")
-  }
 
   const packageNotFoundHtml = getHtmlWithModifiedSeoTags({
     title: "Package Not Found - tscircuit",
     description: `The package ${author}/${unscopedPackageName} could not be found.`,
-    canonicalUrl: `${BASE_URL}/${he.encode(author)}/${he.encode(unscopedPackageName)}`,
+    canonicalUrl: `${BASE_URL}/${he.encode(author)}/${he.encode(
+      unscopedPackageName,
+    )}`,
   })
   const packageDetails = await ky
     .get(`${REGISTRY_URL}/packages/get`, {
@@ -250,19 +256,29 @@ async function handleCustomPackageHtml(req, res) {
   }
 
   const description = he.encode(
-    `${packageInfo.description || packageInfo.ai_description || "A tscircuit component created by " + author} ${packageInfo.ai_usage_instructions ?? ""}`,
+    `${
+      packageInfo.description ||
+      packageInfo.ai_description ||
+      "A tscircuit component created by " + author
+    } ${packageInfo.ai_usage_instructions ?? ""}`,
   )
   const title = he.encode(`${packageInfo.name} - tscircuit`)
 
   const allowedViews = ["schematic", "pcb", "assembly", "3d"]
   const defaultView = packageInfo.default_view || "pcb"
   const thumbnailView = allowedViews.includes(defaultView) ? defaultView : "pcb"
-  const imageUrl = `${REGISTRY_URL}/packages/images/${he.encode(author)}/${he.encode(unscopedPackageName)}/${thumbnailView}.png?fs_sha=${packageInfo.latest_package_release_fs_sha}`
+  const imageUrl = `${REGISTRY_URL}/packages/images/${he.encode(
+    author,
+  )}/${he.encode(unscopedPackageName)}/${thumbnailView}.png?fs_sha=${
+    packageInfo.latest_package_release_fs_sha
+  }`
 
   const html = getHtmlWithModifiedSeoTags({
     title,
     description,
-    canonicalUrl: `${BASE_URL}/${he.encode(author)}/${he.encode(unscopedPackageName)}`,
+    canonicalUrl: `${BASE_URL}/${he.encode(author)}/${he.encode(
+      unscopedPackageName,
+    )}`,
     imageUrl,
     ssrPackageData: { package: packageInfo, packageRelease, packageFiles },
   })
@@ -273,7 +289,6 @@ async function handleCustomPackageHtml(req, res) {
   res.setHeader("Vary", "Accept-Encoding")
   res.status(200).send(html)
 }
-
 async function handleCustomPage(req, res) {
   const [_, page] = req.url.split("?")[0].split("/")
 
@@ -299,6 +314,57 @@ async function handleCustomPage(req, res) {
   res.status(200).send(html)
 }
 
+async function handleReleasePreview(req, res) {
+  const [_, author, unscopedPackageName, releaseId] = req.url
+    .split("?")[0]
+    .split("/")
+
+  if (!author || !unscopedPackageName || !releaseId) {
+    throw new Error("Invalid author/package/release URL")
+  }
+  const packageDetails = await ky
+    .get(`${REGISTRY_URL}/packages/get`, {
+      searchParams: {
+        name: `${author}/${unscopedPackageName}`,
+      },
+    })
+    .json()
+    .catch((e) => {
+      if (String(e).includes("404")) {
+        return null
+      }
+      throw e
+    })
+  const packageNotFoundHtml = getHtmlWithModifiedSeoTags({
+    title: "Package Not Found - tscircuit",
+    description: `Release for package ${author}/${unscopedPackageName} could not be found.`,
+    canonicalUrl: `${BASE_URL}/${he.encode(author)}/${he.encode(
+      unscopedPackageName,
+    )}`,
+  })
+  if (!packageDetails) {
+    res.setHeader("Content-Type", "text/html; charset=utf-8")
+    res.setHeader("Cache-Control", cacheControlHeader)
+    res.setHeader("Vary", "Accept-Encoding")
+    res.status(404).send(packageNotFoundHtml)
+    return
+  }
+
+  const { package: packageInfo } = packageDetails
+  const title = he.encode(`Release preview for ${packageInfo.name} - tscircuit`)
+
+  const html = getHtmlWithModifiedSeoTags({
+    title,
+    description: pageDescriptions["releases"],
+    ssrPackageData: { package: packageInfo },
+  })
+
+  res.setHeader("Content-Type", "text/html; charset=utf-8")
+  res.setHeader("Cache-Control", cacheControlHeader)
+  res.setHeader("Vary", "Accept-Encoding")
+  res.status(200).send(html)
+}
+
 export default async function handler(req, res) {
   const urlPath = req.url.split("?")[0]
   if (urlPath === "/api/generated-index") {
@@ -311,22 +377,15 @@ export default async function handler(req, res) {
 
   const pathParts = req.url.split("?")[0].split("/")
 
-  if (pathParts[1] === "build" && pathParts[2]) {
-    const pageDescription = getPageDescription("view-connected-repo")
-    const html = getHtmlWithModifiedSeoTags({
-      title: `Preview Build For ${pathParts[2]} - tscircuit`,
-      description: pageDescription,
-      canonicalUrl: `${BASE_URL}/build/${pathParts[2]}`,
-    })
-    res.setHeader("Content-Type", "text/html; charset=utf-8")
-    res.setHeader("Cache-Control", cacheControlHeader)
-    res.setHeader("Vary", "Accept-Encoding")
-    res.status(200).send(html)
+  try {
+    await handleCustomPackageHtml(req, res)
     return
+  } catch (e) {
+    console.warn(e)
   }
 
   try {
-    await handleCustomPackageHtml(req, res)
+    await handleReleasePreview(req, res)
     return
   } catch (e) {
     console.warn(e)

package/biome.json

@@ -8,7 +8,13 @@
     "indentStyle": "space"
   },
   "files": {
-    "ignore": ["cosmos-export", "dist", "package.json", ".vercel"]
+    "ignore": [
+      "cosmos-export",
+      "dist",
+      "package.json",
+      ".vercel",
+      "src/index.css"
+    ]
   },
   "javascript": {
     "formatter": {

package/bun-tests/fake-snippets-api/routes/package_builds/get.test.ts

@@ -71,9 +71,6 @@ test("GET /api/package_builds/get - returns 403 for unauthorized package build a
     build_error_last_updated_at: new Date().toISOString(),
     build_logs: null,
     preview_url: "https://preview.tscircuit.com/pb_test",
-    branch_name: "main",
-    commit_message: "Test build",
-    commit_author: "jane.doe",
   })
 
   const res = await axios.get(
@@ -126,9 +123,6 @@ test("GET /api/package_builds/get - successfully returns package build with logs
     ).toISOString(),
     build_logs: buildLogs.join(" "),
     preview_url: "https://preview.tscircuit.com/pb_1a2b3c4d",
-    branch_name: "main",
-    commit_message: "Add new LED component with improved brightness control",
-    commit_author: "john.doe",
   })
 
   const res = await axios.get(
@@ -174,9 +168,6 @@ test("GET /api/package_builds/get - returns package build without logs when incl
     build_error_last_updated_at: new Date().toISOString(),
     build_logs: "Some build logs",
     preview_url: "https://preview.tscircuit.com/pb_test",
-    branch_name: "main",
-    commit_message: "Test build",
-    commit_author: "john.doe",
   })
 
   const res = await axios.get(
@@ -222,9 +213,6 @@ test("GET /api/package_builds/get - handles build with errors", async () => {
     build_error_last_updated_at: new Date().toISOString(),
     build_logs: null,
     preview_url: null,
-    branch_name: "feature/new-component",
-    commit_message: "Add broken component",
-    commit_author: "john.doe",
   })
 
   const res = await axios.get(
@@ -274,9 +262,6 @@ test("GET /api/package_builds/get - handles build in progress", async () => {
     build_error_last_updated_at: new Date().toISOString(),
     build_logs: null,
     preview_url: null,
-    branch_name: "main",
-    commit_message: "Building in progress",
-    commit_author: "john.doe",
   })
 
   const res = await axios.get(

package/bun-tests/fake-snippets-api/routes/package_builds/list.test.ts

@@ -125,9 +125,6 @@ test("GET /api/package_builds/list - returns created builds", async () => {
     ).toISOString(),
     build_logs: null,
     preview_url: "https://preview.tscircuit.com/pb_1a2b3c4d",
-    branch_name: "main",
-    commit_message: "Add new LED component with improved brightness control",
-    commit_author: "john.doe",
   })
 
   const res = await axios.get(
@@ -175,9 +172,6 @@ test("GET /api/package_builds/list - sorts builds by created_at descending", asy
     ).toISOString(),
     build_logs: null,
     preview_url: "https://preview.tscircuit.com/pb_1",
-    branch_name: "main",
-    commit_message: "First build",
-    commit_author: "john.doe",
   })
 
   db.addPackageBuild({
@@ -210,9 +204,6 @@ test("GET /api/package_builds/list - sorts builds by created_at descending", asy
     ).toISOString(),
     build_logs: null,
     preview_url: "https://preview.tscircuit.com/pb_2",
-    branch_name: "main",
-    commit_message: "Second build",
-    commit_author: "john.doe",
   })
 
   const res = await axios.get(
@@ -286,9 +277,6 @@ test("GET /api/package_builds/list - returns created builds with logs or not", a
     ).toISOString(),
     build_logs: buildLogs.join(" "),
     preview_url: "https://preview.tscircuit.com/pb_1a2b3c4d",
-    branch_name: "main",
-    commit_message: "Add new LED component with improved brightness control",
-    commit_author: "john.doe",
   })
 
   const resWithoutLogs = await axios.get(