@tscircuit/fake-snippets 0.0.1

package/src/components/OrderPreviewContent.tsx

@@ -0,0 +1,61 @@
+import React from "react"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { PCBViewer } from "@tscircuit/pcb-viewer"
+import { CadViewer } from "@tscircuit/3d-viewer"
+import { CircuitJsonTableViewer } from "./TableViewer/CircuitJsonTableViewer"
+import { AnyCircuitElement } from "circuit-json"
+
+interface OrderPreviewContentProps {
+  circuitJson: AnyCircuitElement[] | null
+  className?: string
+}
+
+export const OrderPreviewContent: React.FC<OrderPreviewContentProps> = ({
+  circuitJson,
+  className,
+}) => {
+  return (
+    <div className={className}>
+      <Tabs defaultValue="pcb" className="w-full">
+        <TabsList>
+          <TabsTrigger value="pcb">PCB</TabsTrigger>
+          <TabsTrigger value="cad">3D</TabsTrigger>
+          <TabsTrigger value="json-table">JSON</TabsTrigger>
+        </TabsList>
+        <TabsContent value="pcb">
+          <div className="h-[500px] shadow overflow-hidden sm:rounded-lg mb-6">
+            {circuitJson ? (
+              <PCBViewer height={500} soup={circuitJson} />
+            ) : (
+              <div className="flex items-center justify-center h-full bg-gray-100">
+                No PCB data available
+              </div>
+            )}
+          </div>
+        </TabsContent>
+        <TabsContent value="cad">
+          <div className="h-[500px] shadow overflow-hidden sm:rounded-lg mb-6">
+            {circuitJson ? (
+              <CadViewer soup={circuitJson as any} />
+            ) : (
+              <div className="flex items-center justify-center h-full bg-gray-100">
+                No 3D data available
+              </div>
+            )}
+          </div>
+        </TabsContent>
+        <TabsContent value="json-table">
+          <div className="h-[500px] shadow overflow-hidden sm:rounded-lg mb-6">
+            {circuitJson ? (
+              <CircuitJsonTableViewer elements={circuitJson} />
+            ) : (
+              <div className="flex items-center justify-center h-full bg-gray-100">
+                No JSON data available
+              </div>
+            )}
+          </div>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}

package/src/components/ParametersEditor.tsx

@@ -0,0 +1,140 @@
+import { Input } from "./ui/input"
+
+interface ParametersEditorProps {
+  params: Record<string, any>
+  updateParam: (
+    key: string,
+    value: string | number | boolean | string[],
+  ) => void
+  paramNames: Record<string, string>
+}
+
+const ParametersEditor = ({
+  params,
+  updateParam,
+  paramNames,
+}: ParametersEditorProps) => {
+  const renderStringInput = (key: string, value: string) => {
+    if (key === "grid") {
+      let rows = "",
+        cols = ""
+      if (typeof value === "string") {
+        ;[rows = "", cols = ""] = value.split("x").map(String)
+      } else if (typeof value === "number") {
+        rows = cols = String(value)
+      } else if (value && typeof value === "object") {
+        const grid = value as { x: number; y: number }
+        rows = String(grid.x || "")
+        cols = String(grid.y || "")
+      }
+      return (
+        <div className="flex gap-2 flex-1">
+          <Input
+            type="number"
+            value={rows || ""}
+            onChange={(e) => {
+              const newRows = e.target.value || "0"
+              const newCols = cols || "0"
+              updateParam(key, `${newRows}x${newCols}`)
+            }}
+            placeholder="Rows"
+            className="flex-1"
+          />
+          <span className="flex items-center">×</span>
+          <Input
+            type="number"
+            value={cols || ""}
+            onChange={(e) => {
+              const newRows = rows || "0"
+              const newCols = e.target.value || "0"
+              updateParam(key, `${newRows}x${newCols}`)
+            }}
+            placeholder="Cols"
+            className="flex-1"
+          />
+        </div>
+      )
+    }
+
+    if (key === "missing") {
+      const missingArray = Array.isArray(value) ? value : []
+      return (
+        <div className="flex flex-wrap gap-2 items-center">
+          {missingArray.map((item, index) => (
+            <Input
+              key={index}
+              type="number"
+              value={item}
+              onChange={(e) => {
+                if (!e.target.value) {
+                  const newArray = missingArray.filter((_, i) => i !== index)
+                  updateParam(key, newArray)
+                  return
+                }
+                const newArray = [...missingArray]
+                newArray[index] = e.target.value
+                updateParam(key, newArray)
+              }}
+              className="w-16 h-8 text-center p-1"
+            />
+          ))}
+          <button
+            onClick={() => {
+              updateParam(key, [...missingArray, "0"])
+            }}
+            className="w-8 h-8 flex items-center justify-center rounded border border-gray-200 hover:bg-gray-50"
+          >
+            +
+          </button>
+        </div>
+      )
+    }
+
+    return (
+      <Input
+        type="text"
+        value={value}
+        onChange={(e) => updateParam(key, e.target.value)}
+        className="flex-1"
+      />
+    )
+  }
+
+  return (
+    <div className="space-y-2">
+      <label className="text-sm font-medium">Parameters</label>
+      {Object.entries(params)
+        .filter(
+          ([key]) => key !== "fn" && (key !== "num_pins" || !key.match(/\d/)),
+        )
+        .map(([key, value]) => {
+          return (
+            <div key={key} className="flex gap-2 items-center">
+              <label className="text-sm">
+                {paramNames[key] ? `${paramNames[key]} (${key})` : key}:
+              </label>
+              {typeof value === "boolean" ? (
+                <input
+                  type="checkbox"
+                  checked={value}
+                  onChange={(e) => updateParam(key, e.target.checked)}
+                  className="h-4 w-4"
+                />
+              ) : typeof value === "number" ? (
+                <Input
+                  type="number"
+                  value={value}
+                  onChange={(e) => updateParam(key, e.target.value)}
+                  className="flex-1"
+                />
+              ) : (
+                renderStringInput(key, value)
+              )}
+            </div>
+          )
+        })}
+    </div>
+  )
+}
+
+export default ParametersEditor

package/src/components/PcbViewerWithContainerHeight.tsx

@@ -0,0 +1,47 @@
+import React, { useRef, useState, useLayoutEffect } from "react"
+import { PCBViewer } from "@tscircuit/pcb-viewer"
+
+export const PcbViewerWithContainerHeight = ({
+  containerClassName,
+  ...props
+}: {
+  containerClassName?: string
+} & React.ComponentProps<typeof PCBViewer>) => {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [computedHeight, setComputedHeight] = useState(620)
+
+  useLayoutEffect(() => {
+    const updateHeight = () => {
+      if (containerRef.current) {
+        const containerHeight = containerRef.current.clientHeight
+        const screenHeight = window.innerHeight
+        setComputedHeight(
+          Math.min(Math.max(containerHeight, 620), screenHeight),
+        )
+      }
+    }
+
+    // Immediate synchronous calculation
+    updateHeight()
+
+    // Resize listener for dynamic changes
+    const resizeObserver = new ResizeObserver(updateHeight)
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current)
+    }
+
+    // Fallback for window resize
+    window.addEventListener("resize", updateHeight)
+
+    return () => {
+      resizeObserver.disconnect()
+      window.removeEventListener("resize", updateHeight)
+    }
+  }, [])
+
+  return (
+    <div ref={containerRef} className={containerClassName || "w-full h-full"}>
+      <PCBViewer {...props} height={computedHeight} />
+    </div>
+  )
+}

package/src/components/PrefetchPageLink.tsx

@@ -0,0 +1,45 @@
+import { Link } from "wouter"
+import { useEffect } from "react"
+import { useInView } from "react-intersection-observer"
+
+export /**
+ * PrefetchPageLink component that loads page components when links become visible.
+ * Routes are automatically mapped to their corresponding page components under @/pages.
+ * The href path is used to determine which page to load:
+ *
+ * Example:
+ * - href="/editor" -> loads "@/pages/editor.tsx"
+ * - href="/" -> loads "@/pages/landing.tsx"
+ * - href="/my-orders" -> loads "@/pages/my-orders.tsx"
+ */
+const PrefetchPageLink = ({
+  href,
+  children,
+  className,
+  ...props
+}: {
+  href: string
+  children: React.ReactNode
+  className?: string
+  [key: string]: any
+}) => {
+  const { ref, inView } = useInView({
+    triggerOnce: true,
+    threshold: 0,
+  })
+
+  useEffect(() => {
+    if (inView) {
+      const pageName = href === "/" ? "landing" : href.slice(1)
+      import(`@/pages/${pageName}.tsx`).catch((error) => {
+        console.error(`Failed to prefetch page module ${pageName}:`, error)
+      })
+    }
+  }, [inView, href])
+
+  return (
+    <Link {...props} href={href} className={className} ref={ref}>
+      {children}
+    </Link>
+  )
+}

package/src/components/PreviewContent.tsx

@@ -0,0 +1,375 @@
+import { CodeEditor } from "@/components/CodeEditor"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { cn } from "@/lib/utils"
+import { applyPcbEditEvents } from "@/lib/utils/pcbManualEditEventHandler"
+import { CadViewer } from "@tscircuit/3d-viewer"
+import { PCBViewer } from "@tscircuit/pcb-viewer"
+import { Schematic } from "@tscircuit/schematic-viewer"
+import { useEffect, useRef, useState } from "react"
+import { ErrorFallback } from "./ErrorFallback"
+import { ErrorBoundary } from "react-error-boundary"
+import { ErrorTabContent } from "./ErrorTabContent"
+import PreviewEmptyState from "./PreviewEmptyState"
+import { RunButton } from "./RunButton"
+import { CircuitJsonTableViewer } from "./TableViewer/CircuitJsonTableViewer"
+import { CircuitToSvgWithMouseControl } from "./CircuitToSvgWithMouseControl"
+import { BomTable } from "./BomTable"
+import {
+  CheckIcon,
+  EllipsisIcon,
+  EllipsisVerticalIcon,
+  FullscreenIcon,
+  MinimizeIcon,
+} from "lucide-react"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "./ui/dropdown-menu"
+import { Button } from "./ui/button"
+import { PcbViewerWithContainerHeight } from "./PcbViewerWithContainerHeight"
+import { useGlobalStore } from "@/hooks/use-global-store"
+
+export interface PreviewContentProps {
+  code: string
+  readOnly?: boolean
+  triggerRunTsx: () => void
+  tsxRunTriggerCount: number
+  errorMessage: string | null
+  circuitJson: any
+  circuitJsonKey?: string
+  className?: string
+  showCodeTab?: boolean
+  showJsonTab?: boolean
+  showImportAndFormatButtons?: boolean
+  headerClassName?: string
+  leftHeaderContent?: React.ReactNode
+  isRunningCode?: boolean
+  isStreaming?: boolean
+  onToggleFullScreen?: () => void
+  isFullScreen?: boolean
+  onCodeChange?: (code: string) => void
+  onDtsChange?: (dts: string) => void
+  manualEditsFileContent?: string
+  onManualEditsFileContentChange?: (newmanualEditsFileContent: string) => void
+}
+
+declare global {
+  interface Window {
+    TSCIRCUIT_3D_OBJECT_REF: any
+  }
+}
+
+export const PreviewContent = ({
+  code,
+  triggerRunTsx,
+  tsxRunTriggerCount,
+  errorMessage,
+  circuitJsonKey = "",
+  circuitJson,
+  showCodeTab = false,
+  showJsonTab = true,
+  showImportAndFormatButtons = true,
+  className,
+  headerClassName,
+  leftHeaderContent,
+  readOnly,
+  isStreaming,
+  onToggleFullScreen,
+  isFullScreen,
+  isRunningCode,
+  onCodeChange,
+  onDtsChange,
+  manualEditsFileContent,
+  onManualEditsFileContentChange,
+}: PreviewContentProps) => {
+  const [activeTab, setActiveTab] = useState(showCodeTab ? "code" : "pcb")
+  const [lastRunHash, setLastRunHash] = useState("")
+  const threeJsObjectRef = useRef<any>(null)
+
+  useEffect(() => {
+    window.TSCIRCUIT_3D_OBJECT_REF = threeJsObjectRef
+  }, [])
+
+  const currentCodeHash = code + "\n" + manualEditsFileContent
+  const hasCodeChangedSinceLastRun = lastRunHash !== currentCodeHash
+
+  useEffect(() => {
+    if (tsxRunTriggerCount === 0) return
+    setLastRunHash(currentCodeHash)
+  }, [tsxRunTriggerCount])
+
+  useEffect(() => {
+    if (errorMessage) {
+      setActiveTab("error")
+    }
+  }, [errorMessage])
+
+  useEffect(() => {
+    if (activeTab === "code" && circuitJson && !errorMessage) {
+      setActiveTab("pcb")
+    }
+  }, [circuitJson])
+
+  return (
+    <div className={cn("flex flex-col relative", className)}>
+      <div className="md:sticky md:top-2">
+        <Tabs
+          value={activeTab}
+          onValueChange={setActiveTab}
+          className="flex-grow flex flex-col"
+        >
+          <div className={cn("flex items-center gap-2", headerClassName)}>
+            {leftHeaderContent}
+            {leftHeaderContent && <div className="flex-grow" />}
+            <RunButton
+              onClick={() => triggerRunTsx()}
+              disabled={!hasCodeChangedSinceLastRun && tsxRunTriggerCount !== 0}
+              isRunningCode={isRunningCode}
+            />
+            {!leftHeaderContent && <div className="flex-grow" />}
+            <TabsList>
+              {showCodeTab && <TabsTrigger value="code">Code</TabsTrigger>}
+              <TabsTrigger value="pcb" className="whitespace-nowrap">
+                {circuitJson && (
+                  <span
+                    className={cn(
+                      "inline-flex items-center justify-center w-2 h-2 mr-1 text-xs font-bold text-white rounded-full",
+                      !hasCodeChangedSinceLastRun
+                        ? "bg-blue-500"
+                        : "bg-gray-500",
+                    )}
+                  />
+                )}
+                PCB
+              </TabsTrigger>
+              <TabsTrigger value="schematic" className="whitespace-nowrap">
+                {circuitJson && (
+                  <span
+                    className={cn(
+                      "inline-flex items-center justify-center w-2 h-2 mr-1 text-xs font-bold text-white rounded-full",
+                      !hasCodeChangedSinceLastRun
+                        ? "bg-blue-500"
+                        : "bg-gray-500",
+                    )}
+                  />
+                )}
+                Schematic
+              </TabsTrigger>
+              <TabsTrigger value="cad">
+                {circuitJson && (
+                  <span
+                    className={cn(
+                      "inline-flex items-center justify-center w-2 h-2 mr-1 text-xs font-bold text-white rounded-full",
+                      !hasCodeChangedSinceLastRun
+                        ? "bg-blue-500"
+                        : "bg-gray-500",
+                    )}
+                  />
+                )}
+                3D
+              </TabsTrigger>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <div className="whitespace-nowrap p-2 mr-1 cursor-pointer relative">
+                    <EllipsisIcon className="w-4 h-4" />
+                    {errorMessage && (
+                      <span className="inline-flex absolute top-[6px] right-[4px] items-center justify-center w-1 h-1 ml-2 text-[8px] font-bold text-white bg-red-500 rounded-full" />
+                    )}
+                  </div>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent className="*:text-xs">
+                  <DropdownMenuItem
+                    onSelect={() => setActiveTab("error")}
+                    className="flex"
+                  >
+                    <CheckIcon
+                      className={cn(
+                        "w-3 h-3 mr-2",
+                        activeTab !== "error" && "invisible",
+                      )}
+                    />
+                    <div className="flex-grow">Errors</div>
+                    {errorMessage && (
+                      <span className="inline-flex items-center justify-center w-3 h-3 ml-2 text-[8px] font-bold text-white bg-red-500 rounded-full">
+                        1
+                      </span>
+                    )}
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onSelect={() => setActiveTab("bom")}>
+                    <CheckIcon
+                      className={cn(
+                        "w-3 h-3 mr-2",
+                        activeTab !== "bom" && "invisible",
+                      )}
+                    />
+                    Bill of Materials
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onSelect={() => setActiveTab("circuitjson")}
+                  >
+                    <CheckIcon
+                      className={cn(
+                        "w-3 h-3 mr-2",
+                        activeTab !== "circuitjson" && "invisible",
+                      )}
+                    />
+                    JSON
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </TabsList>
+            {onToggleFullScreen && (
+              <Button onClick={onToggleFullScreen} variant="ghost">
+                {isFullScreen ? (
+                  <MinimizeIcon size={16} />
+                ) : (
+                  <FullscreenIcon size={16} />
+                )}
+              </Button>
+            )}
+          </div>
+          {showCodeTab && (
+            <TabsContent value="code" className="flex-grow overflow-hidden">
+              <div className="h-full">
+                <CodeEditor
+                  initialCode={code}
+                  manualEditsFileContent={manualEditsFileContent ?? ""}
+                  isStreaming={isStreaming}
+                  onCodeChange={onCodeChange!}
+                  onDtsChange={onDtsChange!}
+                  readOnly={readOnly}
+                  showImportAndFormatButtons={showImportAndFormatButtons}
+                />
+              </div>
+            </TabsContent>
+          )}
+
+          <TabsContent value="pcb">
+            <div
+              className={cn(
+                "mt-4 overflow-hidden",
+                isFullScreen ? "h-[calc(100vh-96px)]" : "h-[620px]",
+              )}
+            >
+              <ErrorBoundary fallback={<div>Error loading PCB viewer</div>}>
+                {circuitJson ? (
+                  <PcbViewerWithContainerHeight
+                    key={circuitJsonKey}
+                    soup={circuitJson}
+                    containerClassName={cn(
+                      "h-full w-full",
+                      isFullScreen
+                        ? "min-h-[calc(100vh-240px)]"
+                        : "min-h-[620px]",
+                    )}
+                    onEditEventsChanged={(editEvents) => {
+                      if (editEvents.some((editEvent) => editEvent.in_progress))
+                        return
+                      // Update state with new edit events
+                      const newManualEditsFileContent = applyPcbEditEvents({
+                        editEvents,
+                        circuitJson,
+                        manualEditsFileContent,
+                      })
+                      onManualEditsFileContentChange?.(
+                        JSON.stringify(newManualEditsFileContent, null, 2),
+                      )
+                    }}
+                  />
+                ) : (
+                  <PreviewEmptyState triggerRunTsx={triggerRunTsx} />
+                )}
+              </ErrorBoundary>
+            </div>
+          </TabsContent>
+
+          <TabsContent value="schematic">
+            <div
+              className={cn(
+                "mt-4 overflow-auto",
+                isFullScreen ? "h-[calc(100vh-96px)]" : "h-[620px]",
+              )}
+            >
+              <ErrorBoundary fallback={<div>Error loading Schematic</div>}>
+                {circuitJson ? (
+                  <CircuitToSvgWithMouseControl
+                    key={tsxRunTriggerCount}
+                    circuitJson={circuitJson}
+                  />
+                  // Waiting for Schematic Viewer to stablize
+                  // <Schematic
+                  //   style={{ height: "500px" }}
+                  //   key={tsxRunTriggerCount}
+                  //   soup={circuitJson}
+                  // />
+                ) : (
+                  <PreviewEmptyState triggerRunTsx={triggerRunTsx} />
+                )}
+              </ErrorBoundary>
+            </div>
+          </TabsContent>
+
+          <TabsContent value="cad">
+            <div
+              className={cn(
+                "mt-4 overflow-auto",
+                isFullScreen ? "h-[calc(100vh-96px)]" : "h-[620px]",
+              )}
+            >
+              <ErrorBoundary FallbackComponent={ErrorFallback}>
+                {circuitJson ? (
+                  <CadViewer soup={circuitJson as any} ref={threeJsObjectRef} />
+                ) : (
+                  <PreviewEmptyState triggerRunTsx={triggerRunTsx} />
+                )}
+              </ErrorBoundary>
+            </div>
+          </TabsContent>
+
+          <TabsContent value="bom">
+            <div
+              className={cn(
+                "mt-4 overflow-auto",
+                isFullScreen ? "h-[calc(100vh-96px)]" : "h-[620px]",
+              )}
+            >
+              <ErrorBoundary fallback={<div>Error loading BOM</div>}>
+                {circuitJson ? (
+                  <BomTable circuitJson={circuitJson} />
+                ) : (
+                  <PreviewEmptyState triggerRunTsx={triggerRunTsx} />
+                )}
+              </ErrorBoundary>
+            </div>
+          </TabsContent>
+
+          <TabsContent value="circuitjson">
+            <div
+              className={cn(
+                "mt-4 overflow-auto",
+                isFullScreen ? "h-[calc(100vh-96px)]" : "h-[620px]",
+              )}
+            >
+              <ErrorBoundary fallback={<div>Error loading JSON viewer</div>}>
+                {circuitJson ? (
+                  <CircuitJsonTableViewer elements={circuitJson as any} />
+                ) : (
+                  <PreviewEmptyState triggerRunTsx={triggerRunTsx} />
+                )}
+              </ErrorBoundary>
+            </div>
+          </TabsContent>
+          <TabsContent value="error">
+            {circuitJson || errorMessage ? (
+              <ErrorTabContent code={code} errorMessage={errorMessage} />
+            ) : (
+              <PreviewEmptyState triggerRunTsx={triggerRunTsx} />
+            )}
+          </TabsContent>
+        </Tabs>
+      </div>
+    </div>
+  )
+}

package/src/components/PreviewEmptyState.tsx

@@ -0,0 +1,16 @@
+import { Button } from "@/components/ui/button"
+import { PlayIcon } from "lucide-react"
+
+const PreviewEmptyState = ({
+  triggerRunTsx,
+}: { triggerRunTsx: () => void }) => (
+  <div className="flex items-center gap-3 bg-gray-100 text-center justify-center py-10">
+    No circuit json loaded
+    <Button className="bg-blue-600 hover:bg-blue-500" onClick={triggerRunTsx}>
+      Run Code
+      <PlayIcon className="w-3 h-3 ml-2" />
+    </Button>
+  </div>
+)
+
+export default PreviewEmptyState