@tscircuit/fake-snippets 0.0.3 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "type": "module",
   "repository": {
     "type": "git",
@@ -61,13 +61,13 @@
     "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
-    "@tscircuit/3d-viewer": "^0.0.96",
-    "@tscircuit/footprinter": "^0.0.99",
+    "@tscircuit/3d-viewer": "^0.0.113",
+    "@tscircuit/footprinter": "^0.0.102",
     "@tscircuit/layout": "^0.0.29",
     "@tscircuit/math-utils": "^0.0.10",
     "@tscircuit/mm": "^0.0.8",
     "@tscircuit/pcb-viewer": "^1.11.12",
-    "@tscircuit/props": "^0.0.129",
+    "@tscircuit/props": "^0.0.138",
     "@tscircuit/schematic-viewer": "^1.4.3",
     "@types/file-saver": "^2.0.7",
     "@types/ms": "^0.7.34",
@@ -76,18 +76,18 @@
     "@valtown/codemirror-ts": "^2.2.0",
     "@vercel/analytics": "^1.4.1",
     "change-case": "^5.4.4",
-    "circuit-json": "^0.0.130",
+    "circuit-json": "^0.0.135",
     "circuit-json-to-bom-csv": "^0.0.6",
     "circuit-json-to-gerber": "^0.0.16",
     "circuit-json-to-pnp-csv": "^0.0.6",
-    "circuit-json-to-readable-netlist": "^0.0.5",
+    "circuit-json-to-readable-netlist": "^0.0.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.4",
     "codemirror": "^6.0.1",
     "country-list": "^2.3.0",
     "date-fns": "^4.1.0",
-    "dsn-converter": "^0.0.57",
+    "dsn-converter": "^0.0.60",
     "easyeda": "^0.0.62",
     "embla-carousel-react": "^8.3.0",
     "extract-codefence": "^0.0.4",
@@ -129,8 +129,9 @@
     "@babel/standalone": "^7.26.2",
     "@biomejs/biome": "^1.9.2",
     "@playwright/test": "^1.48.0",
-    "@tscircuit/core": "^0.0.269",
-    "@tscircuit/prompt-benchmarks": "^0.0.20",
+    "@tscircuit/core": "^0.0.296",
+    "@tscircuit/prompt-benchmarks": "^0.0.28",
+    "@tscircuit/runframe": "^0.0.139",
     "@types/babel__standalone": "^7.1.7",
     "@types/bun": "^1.1.10",
     "@types/country-list": "^2.1.4",

package/playwright-tests/cmd-click.spec.ts

@@ -3,7 +3,7 @@ import { test, expect } from "@playwright/test"
 test("Editor handles imports with underlining and cmd+click", async ({
   page,
 }) => {
-  await page.goto("http://127.0.0.1:5177/editor?snippet_id=snippet_5")
+  await page.goto("http://127.0.0.1:5177/editor?snippet_id=snippet_3")
 
   await page.waitForLoadState("networkidle")
 

package/playwright-tests/editor-page.spec.ts

@@ -8,7 +8,7 @@ test("Editor loads snippet correctly", async ({ page }) => {
   await page.waitForLoadState("networkidle")
 
   // Check for specific text that should be present
-  await expect(page.getByText("SquareWaveModule")).toBeVisible()
+  await expect(page.getByText("A555Timer", { exact: true })).toBeVisible()
 
   // Take a snapshot
   await expect(page).toHaveScreenshot("editor-with-snippet.png")

package/playwright-tests/preview-page.spec.ts

@@ -1,14 +1,7 @@
 import { expect, test } from "@playwright/test"
 
 test(`preview-snippet Page`, async ({ page }) => {
-  await page.goto("http://127.0.0.1:5177/preview?snippet_id=snippet_5&view=pcb")
-  await page.waitForTimeout(5000)
+  await page.goto("http://127.0.0.1:5177/preview?snippet_id=snippet_5")
+  await page.waitForTimeout(20000)
   await expect(page).toHaveScreenshot(`preview-snippet-pcb.png`)
-
-  await page.goto(
-    "http://127.0.0.1:5177/preview?snippet_id=snippet_5&view=schematic",
-  )
-  // Wait for schematic viewer to load
-  await page.waitForTimeout(5000)
-  await expect(page).toHaveScreenshot(`preview-snippet-schematic.png`)
 })

package/src/components/CodeAndPreview.tsx

@@ -15,8 +15,9 @@ import { Loader2 } from "lucide-react"
 import { useEffect, useMemo, useState } from "react"
 import { useMutation, useQueryClient } from "react-query"
 import EditorNav from "./EditorNav"
-import { PreviewContent } from "./PreviewContent"
 import { parseJsonOrNull } from "@/lib/utils/parseJsonOrNull"
+import { PreviewContent } from "./PreviewContent"
+import { SuspenseRunFrame } from "./SuspenseRunFrame"
 
 interface Props {
   snippet?: Snippet | null
@@ -50,6 +51,9 @@ export function CodeAndPreview({ snippet }: Props) {
   const [showPreview, setShowPreview] = useState(true)
   const [lastRunCode, setLastRunCode] = useState(defaultCode ?? "")
   const [fullScreen, setFullScreen] = useState(false)
+  const shouldUseWebworkerForRun = useGlobalStore(
+    (s) => s.should_use_webworker_for_run,
+  )
 
   const snippetType: "board" | "package" | "model" | "footprint" =
     snippet?.snippet_type ??
@@ -187,6 +191,41 @@ export function CodeAndPreview({ snippet }: Props) {
 
   useWarnUserOnPageChange({ hasUnsavedChanges })
 
+  const fsMap = useMemo(() => {
+    const possibleExportNames = [
+      ...(code.match(/export function (\w+)/)?.slice(1) ?? []),
+      ...(code.match(/export const (\w+) ?=/)?.slice(1) ?? []),
+    ]
+
+    console.log(possibleExportNames)
+
+    const exportName = possibleExportNames[0]
+
+    let entrypointContent: string
+    if (snippetType === "board") {
+      entrypointContent = `
+        import ${exportName ? `{ ${exportName} as Snippet }` : "Snippet"} from "./index.tsx"
+        circuit.add(<Snippet />)
+      `.trim()
+    } else {
+      entrypointContent = `
+        import ${exportName ? `{ ${exportName} as Snippet }` : "Snippet"} from "./index.tsx"
+        circuit.add(
+          <board width="10mm" height="10mm">
+            <Snippet name="U1" />
+          </board>
+        )
+      `.trim()
+    }
+
+    return {
+      "index.tsx": code,
+      "manual-edits.json": manualEditsFileContent ?? "{}",
+      "main.tsx": entrypointContent,
+    }
+  }, [code, manualEditsFileContent])
+  console.log(fsMap)
+
   if (!snippet && (urlParams.snippet_id || urlParams.should_create_snippet)) {
     return (
       <div className="flex items-center justify-center h-64">
@@ -231,7 +270,7 @@ export function CodeAndPreview({ snippet }: Props) {
             onDtsChange={(newDts) => setDts(newDts)}
           />
         </div>
-        {showPreview && (
+        {showPreview && !shouldUseWebworkerForRun && (
           <PreviewContent
             className={cn(
               "flex p-2 flex-col min-h-[640px]",
@@ -252,6 +291,25 @@ export function CodeAndPreview({ snippet }: Props) {
             isFullScreen={fullScreen}
           />
         )}
+        {showPreview && shouldUseWebworkerForRun && (
+          <div
+            className={cn(
+              "flex p-0 flex-col min-h-[640px]",
+              fullScreen
+                ? "fixed inset-0 z-50 bg-white p-4 overflow-hidden"
+                : "w-full md:w-1/2",
+            )}
+          >
+            <SuspenseRunFrame
+              showRunButton
+              onEditEvent={() => {
+                // TODO
+              }}
+              fsMap={fsMap}
+              entrypoint="main.tsx"
+            />
+          </div>
+        )}
       </div>
     </div>
   )

package/src/components/EditorNav.tsx

@@ -1,5 +1,5 @@
 import { Button } from "@/components/ui/button"
-import { GitFork } from "lucide-react"
+import { Check, CircleCheckBig, Cpu, GitFork, Square } from "lucide-react"
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -75,6 +75,12 @@ export default function EditorNav({
   const [, navigate] = useLocation()
   const isLoggedIn = useGlobalStore((s) => Boolean(s.session))
   const session = useGlobalStore((s) => s.session)
+  const shouldUseWebworkerForRun = useGlobalStore(
+    (s) => s.should_use_webworker_for_run,
+  )
+  const setShouldUseWebworkerForRun = useGlobalStore(
+    (s) => s.setShouldUseWebworkerForRun,
+  )
   const { Dialog: RenameDialog, openDialog: openRenameDialog } =
     useRenameSnippetDialog()
   const {
@@ -275,10 +281,25 @@ export default function EditorNav({
             variant="ghost"
             size="sm"
             className="hidden md:flex px-2 text-xs"
+            onClick={() =>
+              setShouldUseWebworkerForRun(!shouldUseWebworkerForRun)
+            }
+          >
+            {shouldUseWebworkerForRun ? (
+              <CircleCheckBig className="mr-1 h-3 w-3" />
+            ) : (
+              <Square className="mr-1 h-3 w-3" />
+            )}
+            Webworker (Beta)
+          </Button>
+          {/* <Button
+            variant="ghost"
+            size="sm"
+            className="hidden md:flex px-2 text-xs"
           >
             <Eye className="mr-1 h-3 w-3" />
             Public
-          </Button>
+          </Button> */}
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button variant="ghost" size="icon" className="hidden md:flex">

package/src/components/FootprintDialog.tsx

@@ -3,7 +3,7 @@ import { useEffect, useMemo, useState } from "react"
 import { parseFootprintParams } from "../lib/utils/parseFootprintParams"
 import ParametersEditor from "./ParametersEditor"
 import { convertCircuitJsonToPcbSvg } from "circuit-to-svg"
-import { fp } from "@tscircuit/footprinter"
+import { fp, getFootprintNamesByType } from "@tscircuit/footprinter"
 import { useToast } from "../hooks/use-toast"
 import { Button } from "./ui/button"
 import { FileName } from "./CodeEditorHeader"
@@ -53,10 +53,7 @@ export const FootprintDialog = ({
   const [error, setError] = useState<string | null>(null)
   const { toast } = useToast()
 
-  const PASSIVE_COMPONENTS = ["diode", "led", "resistor", "cap", "res"]
-  const footprintNames = fp
-    .getFootprintNames()
-    .filter((footprintName) => !PASSIVE_COMPONENTS.includes(footprintName))
+  const { normalFootprintNames } = getFootprintNamesByType()
 
   useEffect(() => {
     if (copied) {
@@ -266,7 +263,7 @@ export const FootprintDialog = ({
                     handleFootprintPreview(value)
                   }
                 }}
-                options={footprintNames}
+                options={normalFootprintNames}
                 placeholder="Select footprint..."
                 searchPlaceholder="Search footprints..."
                 emptyText="No footprints found."

package/src/components/Header2.tsx

@@ -64,6 +64,13 @@ export const Header2 = () => {
   const isLoggedIn = useGlobalStore((state) => Boolean(state.session))
   return (
     <>
+      {/* <div className="absolute left-0 top-0 z-[9999999]">
+        <div className="hidden xl:block">xl</div>
+        <div className="hidden lg:block xl:hidden">lg</div>
+        <div className="hidden md:block lg:hidden">md</div>
+        <div className="hidden sm:block md:hidden">sm</div>
+        <div className="hidden xs:block sm:hidden">xs</div>
+      </div> */}
       <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
         <div className="container mx-auto flex h-16 items-center justify-between px-2 md:px-6">
           <div className="flex items-center gap-2">

package/src/components/PrefetchPageLink.tsx

@@ -30,7 +30,10 @@ const PrefetchPageLink = ({
 
   useEffect(() => {
     if (inView) {
-      const pageName = href === "/" ? "landing" : href.slice(1)
+      const link = href === "/" ? "landing" : href.slice(1)
+      if (!link) return
+      const pageName = link.split("?")[0]
+
       import(`@/pages/${pageName}.tsx`).catch((error) => {
         console.error(`Failed to prefetch page module ${pageName}:`, error)
       })

package/src/components/SuspenseRunFrame.tsx

@@ -0,0 +1,16 @@
+import { lazy, Suspense } from "react"
+
+const RunFrame = lazy(async () => {
+  const { RunFrame } = await import("@tscircuit/runframe/runner")
+  return { default: RunFrame }
+})
+
+export const SuspenseRunFrame = (
+  props: React.ComponentProps<typeof RunFrame>,
+) => {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <RunFrame {...props} />
+    </Suspense>
+  )
+}

package/src/components/dialogs/import-snippet-dialog.tsx

@@ -1,10 +1,11 @@
-import { Snippet } from "fake-snippets-api/lib/db/schema"
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog"
-import { Input } from "../ui/input"
-import { Button } from "../ui/button"
+import { useAxios } from "@/hooks/use-axios"
+import { useDebounce } from "@/hooks/use-debounce"
+import type { Snippet } from "fake-snippets-api/lib/db/schema"
 import { useState } from "react"
 import { useQuery } from "react-query"
-import { useAxios } from "@/hooks/use-axios"
+import { Button } from "../ui/button"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog"
+import { Input } from "../ui/input"
 import { createUseDialog } from "./create-use-dialog"
 
 export const ImportSnippetDialog = ({
@@ -17,15 +18,18 @@ export const ImportSnippetDialog = ({
   onSnippetSelected: (snippet: Snippet) => any
 }) => {
   const [searchText, setSearchText] = useState("")
+  const debouncedSearch = useDebounce(searchText, 300)
   const axios = useAxios()
   const { data: snippets, isLoading } = useQuery(
-    ["snippetSearch", searchText],
+    ["snippetSearch", debouncedSearch],
     async () => {
-      const response = await axios.get(`/snippets/search?q=${searchText}`)
+      const response = await axios.get(
+        `/snippets/search?q=${encodeURIComponent(debouncedSearch)}`,
+      )
       return response.data.snippets.slice(0, 12)
     },
     {
-      enabled: searchText.length > 0,
+      enabled: debouncedSearch.length > 0,
     },
   )
 

package/src/hooks/use-debounce.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from "react"
+
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value)
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value)
+    }, delay)
+
+    return () => {
+      clearTimeout(handler)
+    }
+  }, [value, delay])
+
+  return debouncedValue
+}

package/src/hooks/use-global-store.ts

@@ -10,6 +10,8 @@ export type Store = {
   } | null
   setSession: (session: Store["session"]) => any
   should_onboarding_tips_be_closed: boolean
+  should_use_webworker_for_run?: boolean
+  setShouldUseWebworkerForRun: (should_use_webworker_for_run: boolean) => any
   setOnboardingTipsClosed: (closed: boolean) => any
 }
 
@@ -17,6 +19,9 @@ export const useGlobalStore = create<Store>()(
   persist(
     (set) => ({
       session: null,
+      should_use_webworker_for_run: false,
+      setShouldUseWebworkerForRun: (should_use_webworker_for_run: boolean) =>
+        set({ should_use_webworker_for_run }),
       setSession: (session) => set({ session }),
       should_onboarding_tips_be_closed: false,
       setOnboardingTipsClosed: (closed) =>

package/src/hooks/use-run-tsx/index.tsx

@@ -108,6 +108,7 @@ export const useRunTsx = ({
       }
       ;(globalThis as any).__tscircuit_require = __tscircuit_require
       preSuppliedImports["@tscircuit/core"] = tscircuitCore
+      preSuppliedImports["tscircuit"] = tscircuitCore
       preSuppliedImports["@tscircuit/math-utils"] = tscircuitMathUtils
       preSuppliedImports["react"] = React
       preSuppliedImports["jscad-fiber"] = jscadFiber

package/src/pages/landing.tsx

@@ -41,7 +41,7 @@ export function LandingPage() {
       </Helmet>
       <Header2 />
       <main className="flex-1">
-        <section className="w-full py-12 md:py-24 lg:py-32 xl:py-48">
+        <section className="w-full py-8 md:py-12 lg:py-20 xl:py-36">
           <div className="container px-4 md:px-6 mx-auto">
             <div className="container mx-auto max-w-7xl">
               <div className="grid gap-6 lg:grid-cols-[1fr_400px] lg:gap-12 xl:grid-cols-[1fr_600px]">
@@ -116,7 +116,7 @@ export function LandingPage() {
                 <div className="w-full aspect-video relative">
                   <OptimizedImage
                     alt="Product preview"
-                    className="mx-auto overflow-hidden rounded-xl object-cover object-center absolute inset-0 w-full h-full"
+                    className="mx-auto overflow-hidden rounded-xl object-cover object-center absolute inset-0 w-full h-full mt-8 lg:mt-0"
                     src="/assets/editor_example_1_more_square.webp"
                     priority={true}
                   />

package/src/pages/preview.tsx

@@ -1,14 +1,11 @@
-import { CircuitToSvgWithMouseControl } from "@/components/CircuitToSvgWithMouseControl"
 import { useSnippet } from "@/hooks/use-snippet"
 import { useUrlParams } from "@/hooks/use-url-params"
-import { CadViewer } from "@tscircuit/3d-viewer"
-import { PCBViewer } from "@tscircuit/pcb-viewer"
+import { CircuitJsonPreview } from "@tscircuit/runframe"
 import { Loader2 } from "lucide-react"
 
 export const PreviewPage = () => {
   const urlParams = useUrlParams()
   const snippetId = urlParams.snippet_id
-  const view = urlParams.view || "pcb"
   const { data: snippet, isLoading, error } = useSnippet(snippetId)
 
   if (isLoading) {
@@ -43,28 +40,5 @@ export const PreviewPage = () => {
     )
   }
 
-  const validViews = ["pcb", "3d", "schematic"]
-  if (!validViews.includes(view)) {
-    return (
-      <div className="w-full h-screen">
-        {view === "pcb" && (
-          <PCBViewer soup={snippet.circuit_json} height={window.innerHeight} />
-        )}
-      </div>
-    )
-  }
-
-  return (
-    <div className="w-full h-screen">
-      {view === "pcb" && (
-        <PCBViewer soup={snippet.circuit_json} height={window.innerHeight} />
-      )}
-      {view === "3d" && <CadViewer soup={snippet.circuit_json as any} />}
-      {view === "schematic" && (
-        <CircuitToSvgWithMouseControl
-          circuitJson={snippet.circuit_json as any}
-        />
-      )}
-    </div>
-  )
+  return <CircuitJsonPreview circuitJson={snippet.circuit_json as any} />
 }

package/vite.config.ts

@@ -113,8 +113,8 @@ export default defineConfig(async (): Promise<UserConfig> => {
     },
     base: "/",
     build: {
-      minify: "terser",
       copyPublicDir: true,
+      minify: "terser",
       terserOptions: {
         compress: {
           drop_console: true,