@tscircuit/fake-snippets 0.0.88 → 0.0.90

package/fake-snippets-api/routes/api/autocomplete/create_autocomplete.ts

@@ -0,0 +1,134 @@
+import "dotenv/config"
+import { withRouteSpec } from "fake-snippets-api/lib/middleware/with-winter-spec"
+import { z } from "zod"
+import OpenAI from "openai"
+
+// Lazy-loaded client instance
+let openai: OpenAI | null = null
+let cachedReadme: string | null = null
+
+function getOpenAIClient() {
+  const apiKey = process.env.VITE_OPENROUTER_API_KEY
+  if (!apiKey) {
+    throw new Error("Missing Api Key in env")
+  }
+
+  if (!openai) {
+    openai = new OpenAI({
+      apiKey,
+      baseURL: "https://openrouter.ai/api/v1",
+      defaultHeaders: {
+        "HTTP-Referer": "https://tscircuit.com",
+        "X-Title": "TSCircuit Editor",
+      },
+    })
+  }
+
+  return openai
+}
+
+// Cache README
+async function getCachedReadme(): Promise<string> {
+  if (cachedReadme !== null) return cachedReadme
+  const res = await fetch(
+    "https://raw.githubusercontent.com/tscircuit/props/main/README.md",
+  )
+  if (!res.ok) {
+    throw new Error(`Failed to fetch README: ${res.status}`)
+  }
+  cachedReadme = await res.text()
+  return cachedReadme
+}
+
+async function completion(
+  openai: OpenAI,
+  readmeContent: string,
+  prefix: string,
+  suffix: string,
+  model = "openai/gpt-4.1-mini",
+  language?: string,
+) {
+  const systemMessage = `You are an expert ${language ? language + " " : ""}programmer working in a TSX (TypeScript + React JSX) environment.
+
+Below is the README.md for the available components. You MUST use this to determine which components and props are valid. 
+Only use components explicitly documented under Available Components in the README. Never invent or guess new components. If the user partially types a component that does not exist in the README, do NOT try to complete it.
+
+===== README.md START =====
+${readmeContent}
+===== README.md END =====
+
+Special instruction for the <chip> component:
+- Do NOT add chip as a prop (e.g., <chip chip="..."> is invalid).
+- Always use this format: 
+  <chip name="U<number>" footprint="<valid footprint>" pinLabels={{}} pcbX={0} pcbY={0} schX={0} schY={0} />
+- Determine the next sequential name automatically: e.g. U1, U2, U3.
+- Only use valid footprints and pinLabels from the README.
+- Some components like <netlabel> do not have a 'name' prop — do not add it for those.
+
+STRICT rules:
+- If partial like "<capa", only append remaining "citor". Never repeat letters. 
+- If input is "<capacitor", add only props, never repeat tag. 
+- Always produce exactly one JSX component, starting with "<" if needed. 
+- If partial doesn’t match any valid component, output nothing. 
+- Never output two JSX elements. Always end with exactly one "/>". 
+- Never add duplicate closing "/>". 
+- Never output the component name as a prop. 
+- Never add whitespace before your completion.
+- If the input is exactly "<", then start with the component name directly (like "resistor ... />") without adding another "<".
+- So that the final result is "<resistor ... />", not "<<resistor ... />".
+- Never produce a double "<".
+
+Examples:
+- Input: "<FILL_ME>"
+  Output: <resistor name="R1" footprint="0603" pcbX={5} pcbY={7} schX={1} schY={2} resistance={1000} />
+- Input: "<ca<FILL_ME>"
+  Output: pacitor name="C1" footprint="0805" pcbX={10} pcbY={15} schX={3} schY={4} />
+- Input: "<chip<FILL_ME>"
+  Output: name="U1" footprint="SOIC-8" pinLabels={{}} pcbX={0} pcbY={0} schX={0} schY={0} />
+- Input: "<netl<FILL_ME>"
+  Output: abel name="N1" />
+- NEVER output: <capacitor capacitor ... /> or <netnet ... />
+- Input: "<"
+  Output: resistor name="R1" footprint="0603" pcbX={5} pcbY={7} schX={1} schY={2} resistance={1000} />
+- Input: "<ca"
+  Output: pacitor name="C1" footprint="0805" pcbX={10} pcbY={15} schX={3} schY={4} />
+- Input: "<capacitor"
+  Output:  capacitance="1000pF" footprint="0805" name="C1" pcbX={10} pcbY={15} schX={3} schY={4} />`
+
+  const chatCompletion = await openai.chat.completions.create({
+    messages: [
+      { role: "system", content: systemMessage },
+      { role: "user", content: `${prefix}<FILL_ME>${suffix}` },
+    ],
+    model,
+  })
+
+  return chatCompletion.choices[0].message?.content ?? ""
+}
+export default withRouteSpec({
+  methods: ["POST"],
+  auth: "session", // ✅ Require user to be signed in
+  jsonBody: z.object({
+    prefix: z.string(),
+    suffix: z.string(),
+    model: z.string().optional(),
+    language: z.string().optional(),
+  }),
+  jsonResponse: z.object({
+    prediction: z.string(),
+  }),
+})(async (req, ctx) => {
+  const openai = getOpenAIClient()
+  const { prefix, suffix, model, language } = req.jsonBody
+
+  const readmeContent = await getCachedReadme()
+  const predictionResult = await completion(
+    openai,
+    readmeContent,
+    prefix,
+    suffix,
+    model,
+    language,
+  )
+  return ctx.json({ prediction: predictionResult })
+})

package/fake-snippets-api/routes/api/proxy.ts

@@ -0,0 +1,128 @@
+import { withRouteSpec } from "fake-snippets-api/lib/middleware/with-winter-spec"
+import { z } from "zod"
+
+const PROXY_HEADERS = [
+  "X-Target-Url",
+  "X-Sender-Origin",
+  "X-Sender-Host",
+  "X-Sender-Referer",
+  "X-Sender-User-Agent",
+  "X-Sender-Cookie",
+]
+
+const ALLOWED_DOMAINS: Array<{ domain: string; routes?: string[] }> = [
+  { domain: "easyeda.com" },
+]
+
+function isAllowedDomain(url: string) {
+  try {
+    const { hostname, pathname, port } = new URL(url)
+    const allowedDomain = ALLOWED_DOMAINS.find(
+      (domain) => domain.domain === hostname,
+    )
+
+    if (allowedDomain) {
+      if (
+        !allowedDomain.routes ||
+        allowedDomain.routes.some((route) => pathname.startsWith(route))
+      ) {
+        return true
+      }
+    }
+
+    return hostname === "localhost" || (hostname === "127.0.0.1" && port)
+  } catch {
+    return false
+  }
+}
+
+export default withRouteSpec({
+  methods: ["GET", "POST", "PUT", "DELETE", "PATCH", "HEAD", "OPTIONS"],
+  jsonResponse: z.any(),
+  auth: "session",
+})(async (req, ctx) => {
+  if (req.headers.get("X-proxied")) {
+    return ctx.json(
+      { error: "Recursive proxy calls are not allowed" },
+      { status: 403 },
+    )
+  }
+
+  const targetUrl = req.headers.get("X-Target-Url")
+
+  if (!targetUrl) {
+    return ctx.json(
+      { error: "X-Target-Url header is required" },
+      { status: 400 },
+    )
+  }
+
+  if (!isAllowedDomain(targetUrl)) {
+    return ctx.json({ error: "Domain not allowed" }, { status: 403 })
+  }
+
+  let body: string | undefined
+  if (["POST", "PUT", "PATCH"].includes(req.method)) {
+    body = await req.clone().text()
+  }
+
+  const headers = new Headers(req.headers)
+
+  const senderOrigin = req.headers.get("X-Sender-Origin")
+  if (senderOrigin) {
+    headers.set("Origin", senderOrigin)
+  }
+
+  const senderHost = req.headers.get("X-Sender-Host")
+  if (senderHost) {
+    const hostValue = senderHost.replace(/^https?:\/\//, "")
+    headers.set("Host", hostValue)
+    headers.set("authority", hostValue)
+  }
+
+  const senderReferer = req.headers.get("X-Sender-Referer")
+  if (senderReferer) {
+    headers.set("Referer", senderReferer)
+  }
+
+  const senderUserAgent = req.headers.get("X-Sender-User-Agent")
+  if (senderUserAgent) {
+    headers.set("User-Agent", senderUserAgent)
+  }
+
+  const senderCookie = req.headers.get("X-Sender-Cookie")
+  if (senderCookie) {
+    headers.set("Cookie", senderCookie)
+  }
+
+  for (const header of PROXY_HEADERS) {
+    headers.delete(header)
+  }
+
+  headers.delete("content-encoding")
+  headers.delete("accept-encoding")
+  headers.set("X-proxied", "true")
+
+  try {
+    const response = await fetch(targetUrl, {
+      method: req.method,
+      headers: headers,
+      body: ["GET", "HEAD"].includes(req.method) ? undefined : body,
+    })
+
+    const responseHeaders = new Headers(response.headers)
+    responseHeaders.delete("content-encoding")
+
+    return new Response(response.body, {
+      status: response.status,
+      statusText: response.statusText,
+      headers: responseHeaders,
+    })
+  } catch (error) {
+    console.error("Proxy error:", error)
+    return ctx.json(
+      { error: { message: "Failed to proxy request" } },
+      { status: 502 },
+    )
+  }
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.88",
+  "version": "0.0.90",
   "type": "module",
   "repository": {
     "type": "git",
@@ -33,8 +33,11 @@
     "generate-sitemap": "bun run scripts/generate-sitemap.ts"
   },
   "devDependencies": {
+    "@anthropic-ai/sdk": "^0.27.3",
     "@babel/preset-react": "^7.25.9",
     "@babel/preset-typescript": "^7.26.0",
+    "@babel/standalone": "^7.26.2",
+    "@biomejs/biome": "^1.9.2",
     "@codemirror/autocomplete": "^6.18.1",
     "@codemirror/lang-javascript": "^6.2.2",
     "@codemirror/lang-json": "^6.0.1",
@@ -42,6 +45,7 @@
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.34.1",
     "@hookform/resolvers": "^3.9.0",
+    "@playwright/test": "^1.48.0",
     "@radix-ui/react-accordion": "^1.2.4",
     "@radix-ui/react-alert-dialog": "^1.1.1",
     "@radix-ui/react-aspect-ratio": "^1.1.0",
@@ -70,36 +74,65 @@
     "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
-    "@tscircuit/footprinter": "^0.0.176",
+    "@tailwindcss/typography": "^0.5.16",
+    "@tscircuit/3d-viewer": "^0.0.279",
+    "@tscircuit/assembly-viewer": "^0.0.1",
+    "@tscircuit/core": "^0.0.536",
+    "@tscircuit/create-snippet-url": "^0.0.8",
+    "@tscircuit/eval": "^0.0.244",
+    "@tscircuit/footprinter": "^0.0.186",
     "@tscircuit/layout": "^0.0.29",
     "@tscircuit/math-utils": "^0.0.10",
     "@tscircuit/mm": "^0.0.8",
-    "@tscircuit/props": "^0.0.194",
+    "@tscircuit/pcb-viewer": "^1.11.194",
+    "@tscircuit/prompt-benchmarks": "^0.0.28",
+    "@tscircuit/props": "^0.0.246",
+    "@tscircuit/runframe": "^0.0.669",
+    "@tscircuit/schematic-viewer": "^2.0.21",
+    "@types/babel__standalone": "^7.1.7",
+    "@types/bun": "^1.1.10",
+    "@types/country-list": "^2.1.4",
     "@types/file-saver": "^2.0.7",
+    "@types/md5": "^2.3.5",
     "@types/ms": "^0.7.34",
+    "@types/node": "^22.13.0",
+    "@types/prismjs": "^1.26.4",
+    "@types/react": "^18.3.9",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-helmet": "^6.1.11",
+    "@types/sharp": "^0.32.0",
     "@typescript/ata": "^0.9.7",
-    "@valtown/codemirror-codeium": "^1.1.1",
+    "@typescript/vfs": "^1.6.0",
     "@valtown/codemirror-ts": "^2.2.0",
     "@vercel/analytics": "^1.4.1",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.20",
     "change-case": "^5.4.4",
     "circuit-json": "^0.0.190",
-    "circuit-json-to-bom-csv": "^0.0.6",
-    "circuit-json-to-gerber": "^0.0.21",
-    "circuit-json-to-pnp-csv": "^0.0.6",
+    "circuit-json-to-bom-csv": "^0.0.7",
+    "circuit-json-to-gerber": "^0.0.25",
+    "circuit-json-to-pnp-csv": "^0.0.7",
     "circuit-json-to-readable-netlist": "^0.0.13",
     "circuit-json-to-tscircuit": "^0.0.4",
+    "circuit-to-svg": "^0.0.163",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.4",
     "codemirror": "^6.0.1",
+    "codemirror-copilot": "^0.0.7",
     "country-list": "^2.3.0",
     "date-fns": "^4.1.0",
+    "dotenv": "^16.5.0",
     "dsn-converter": "^0.0.60",
-    "easyeda": "^0.0.129",
+    "easyeda": "^0.0.195",
     "embla-carousel-react": "^8.3.0",
     "extract-codefence": "^0.0.4",
     "fflate": "^0.8.2",
     "file-saver": "^2.0.5",
+    "get-port": "^7.1.0",
+    "globals": "^15.9.0",
+    "he": "^1.2.0",
+    "idb-keyval": "^6.2.2",
     "immer": "^10.1.1",
     "input-otp": "^1.2.4",
     "javascript-time-ago": "^2.5.11",
@@ -107,11 +140,18 @@
     "jscad-electronics": "^0.0.25",
     "jszip": "^3.10.1",
     "kicad-converter": "^0.0.16",
+    "ky": "^1.7.5",
     "lucide-react": "^0.488.0",
+    "lz-string": "^1.5.0",
     "md5": "^2.3.0",
     "ms": "^2.1.3",
     "next-themes": "^0.3.0",
+    "openai": "^5.6.0",
+    "postcss": "^8.4.47",
     "posthog-js": "^1.203.2",
+    "prismjs": "^1.29.0",
+    "prompts": "^2.4.2",
+    "react": "^18.3.1",
     "react-cookie-consent": "^9.0.0",
     "react-day-picker": "8.10.1",
     "react-dom": "^18.3.1",
@@ -124,60 +164,31 @@
     "react-query": "^3.39.3",
     "react-resizable-panels": "^2.1.3",
     "recharts": "^2.12.7",
+    "redaxios": "^0.5.1",
     "remark-gfm": "^4.0.1",
     "rollup-plugin-visualizer": "^5.12.0",
     "schematic-symbols": "^0.0.155",
+    "sharp": "^0.33.5",
+    "shiki": "^3.2.1",
     "sitemap": "^8.0.0",
     "sonner": "^1.5.0",
     "states-us": "^1.1.1",
     "tailwind-merge": "^2.5.2",
-    "tailwindcss-animate": "^1.0.7",
-    "use-async-memo": "^1.2.5",
-    "use-mouse-matrix-transform": "^1.3.0",
-    "vaul": "^0.9.9",
-    "vite-plugin-vercel": "^9.0.4",
-    "wouter": "^3.3.5",
-    "@anthropic-ai/sdk": "^0.27.3",
-    "@babel/standalone": "^7.26.2",
-    "@biomejs/biome": "^1.9.2",
-    "@playwright/test": "^1.48.0",
-    "@tailwindcss/typography": "^0.5.16",
-    "@tscircuit/core": "^0.0.433",
-    "@tscircuit/eval": "^0.0.227",
-    "@tscircuit/prompt-benchmarks": "^0.0.28",
-    "@tscircuit/runframe": "^0.0.582",
-    "@types/babel__standalone": "^7.1.7",
-    "@types/bun": "^1.1.10",
-    "@types/country-list": "^2.1.4",
-    "@types/md5": "^2.3.5",
-    "@types/node": "^22.13.0",
-    "@types/prismjs": "^1.26.4",
-    "@types/react": "^18.3.9",
-    "@types/react-dom": "^18.3.0",
-    "@types/react-helmet": "^6.1.11",
-    "@types/sharp": "^0.32.0",
-    "@typescript/vfs": "^1.6.0",
-    "@vitejs/plugin-react": "^4.3.1",
-    "autoprefixer": "^10.4.20",
-    "circuit-to-svg": "^0.0.152",
-    "get-port": "^7.1.0",
-    "globals": "^15.9.0",
-    "he": "^1.2.0",
-    "ky": "^1.7.5",
-    "postcss": "^8.4.47",
-    "prismjs": "^1.29.0",
-    "prompts": "^2.4.2",
-    "react": "^18.3.1",
-    "redaxios": "^0.5.1",
-    "sharp": "^0.33.5",
-    "shiki": "^3.2.1",
     "tailwindcss": "^3.4.13",
+    "tailwindcss-animate": "^1.0.7",
     "terser": "^5.27.0",
+    "three": "^0.177.0",
+    "three-stdlib": "^2.36.0",
     "tsup": "^8.5.0",
     "typescript": "^5.6.3",
+    "use-async-memo": "^1.2.5",
+    "use-mouse-matrix-transform": "^1.3.0",
+    "vaul": "^0.9.9",
     "vite": "^6.3.4",
     "vite-plugin-image-optimizer": "^1.1.8",
+    "vite-plugin-vercel": "^9.0.4",
     "winterspec": "^0.0.107",
+    "wouter": "^3.3.5",
     "zod": "^3.23.8",
     "zustand": "^4.5.5",
     "zustand-hoist": "^2.0.1"

package/renovate.json

@@ -10,7 +10,8 @@
         "jscad-electronics",
         "circuit-json",
         "dsn-converter",
-        "circuit-json-to-readable-netlist"
+        "circuit-json-to-readable-netlist",
+        "circuit-*"
       ],
       "enabled": false
     },

package/src/App.tsx

@@ -78,18 +78,82 @@ const PackageEditorPage = lazyImport(async () => {
 
 class ErrorBoundary extends React.Component<
   { children: React.ReactNode },
-  { hasError: boolean }
+  { hasError: boolean; reloading: boolean }
 > {
+  private visibilityHandler?: () => void
+  private reloadTimeout?: number
+
   constructor(props: { children: React.ReactNode }) {
     super(props)
-    this.state = { hasError: false }
+    this.state = { hasError: false, reloading: false }
   }
 
   static getDerivedStateFromError() {
-    return { hasError: true }
+    return { hasError: true, reloading: false }
+  }
+
+  componentDidCatch(error: Error) {
+    console.error("ErrorBoundary caught", error)
+    const message = error.message || ""
+    if (
+      /(Loading chunk|ChunkLoadError|dynamically imported module)/i.test(
+        message,
+      )
+    ) {
+      const loadedAt = window.__APP_LOADED_AT || Date.now()
+      if (Date.now() - loadedAt >= 10_000) {
+        this.performReload()
+      }
+    }
+  }
+
+  componentDidUpdate(_prevProps: any, prevState: any) {
+    if (!prevState.hasError && this.state.hasError && !this.state.reloading) {
+      this.setupIdleReload()
+    }
+  }
+
+  componentWillUnmount() {
+    this.cleanup()
+  }
+
+  cleanup = () => {
+    if (this.visibilityHandler) {
+      document.removeEventListener("visibilitychange", this.visibilityHandler)
+      this.visibilityHandler = undefined
+    }
+    if (this.reloadTimeout) {
+      clearTimeout(this.reloadTimeout)
+      this.reloadTimeout = undefined
+    }
+  }
+
+  performReload = () => {
+    if (this.state.reloading) return // Prevent multiple reloads
+
+    this.cleanup() // Clean up listeners before reload
+    this.setState({ reloading: true })
+    this.reloadTimeout = window.setTimeout(() => {
+      window.location.reload()
+    }, 500)
+  }
+
+  setupIdleReload = () => {
+    this.cleanup() // Clean up any existing handlers
+
+    this.visibilityHandler = () => {
+      if (!document.hidden && this.state.hasError && !this.state.reloading) {
+        this.performReload()
+      }
+    }
+
+    document.addEventListener("visibilitychange", this.visibilityHandler)
   }
 
   render() {
+    if (this.state.reloading) {
+      return <div>There was a problem loading this page. Reloading…</div>
+    }
     if (this.state.hasError) {
       return <div>Something went wrong loading the page.</div>
     }

package/src/ContextProviders.tsx

@@ -4,6 +4,7 @@ import { useEffect } from "react"
 import { useGlobalStore } from "./hooks/use-global-store"
 import { posthog } from "./lib/posthog"
 import { Toaster } from "react-hot-toast"
+import { Toaster as SonnerToaster } from "@/components/ui/sonner"
 import { populateQueryCacheWithSSRData } from "./lib/populate-query-cache-with-ssr-data"
 
 const staffGithubUsernames = [
@@ -65,6 +66,7 @@ export const ContextProviders = ({ children }: any) => {
         <PostHogIdentifier />
         {children}
         <Toaster position="bottom-right" />
+        <SonnerToaster position="bottom-left" />
       </HelmetProvider>
     </QueryClientProvider>
   )

package/src/build-watcher.ts

@@ -0,0 +1,52 @@
+import { toast } from "sonner"
+
+export function setupBuildWatcher() {
+  const meta = document.querySelector<HTMLMetaElement>(
+    'meta[name="tscircuit-build"]',
+  )
+  const currentId = meta?.content || ""
+  ;(window as any).TSC_BUILD_ID = currentId
+
+  async function fetchBuildId(): Promise<string | null> {
+    try {
+      const res = await fetch("/api/generated-index", { cache: "no-store" })
+      const text = await res.text()
+      const match = text.match(
+        /<meta name="tscircuit-build" content="([^"]+)"/i,
+      )
+      return match ? match[1] : null
+    } catch (err) {
+      console.error("Failed to fetch build identifier", err)
+      return null
+    }
+  }
+
+  let updateToastShown = false
+
+  async function checkForUpdate() {
+    const serverId = await fetchBuildId()
+    if (
+      serverId &&
+      serverId !== (window as any).TSC_BUILD_ID &&
+      !updateToastShown
+    ) {
+      updateToastShown = true
+      toast("A new version of tscircuit.com is available.", {
+        action: {
+          label: "Reload",
+          onClick: () => window.location.reload(),
+        },
+        duration: Infinity,
+        position: "bottom-left",
+      })
+    }
+  }
+
+  document.addEventListener("visibilitychange", () => {
+    if (document.visibilityState === "visible") {
+      checkForUpdate()
+    }
+  })
+
+  setInterval(checkForUpdate, 5 * 60 * 1000)
+}

package/src/components/CircuitJsonImportDialog.tsx

@@ -15,7 +15,7 @@ import { useLocation } from "wouter"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { convertCircuitJsonToTscircuit } from "circuit-json-to-tscircuit"
 import { useCreatePackageMutation } from "@/hooks/use-create-package-mutation"
-import { generateRandomPackageName } from "./package-port/CodeAndPreview"
+import { generateRandomPackageName } from "@/lib/utils/package-utils"
 import { useCreatePackageReleaseMutation } from "@/hooks/use-create-package-release-mutation"
 import { useCreatePackageFilesMutation } from "@/hooks/use-create-package-files-mutation"