Add schematicSvgOptions to Runframe for custom css style classes override (#3671)

Author: imrishabh18

bun.lock

@@ -0,0 +1,36 @@
+import { CircuitJsonPreview } from "lib/components/CircuitJsonPreview/CircuitJsonPreview"
+import { renderToCircuitJson } from "lib/dev/render-to-circuit-json"
+
+export default () => (
+  <CircuitJsonPreview
+    circuitJson={renderToCircuitJson(
+      <board width="10mm" height="10mm">
+        <chip
+          name="U1"
+          pinLabels={{
+            pin1: "D0",
+            pin2: "D1",
+            pin3: "D2",
+            pin4: "GND",
+            pin5: "D3",
+            pin6: "EN",
+            pin7: "D4",
+            pin8: "VCC",
+          }}
+          footprint="soic8"
+          schX={0}
+          schY={-1.5}
+        />
+      </board>,
+    )}
+    schematicSvgOptions={{
+      css: `
+        .custom-theme .sch-component-body {
+          fill: #c7d2fe !important;
+          stroke: #4338ca !important;
+        }
+      `,
+      className: "custom-theme",
+    }}
+  />
+)

examples/example55-custom-css-style-schematic.fixture.tsx

@@ -6,7 +6,13 @@ import {
 } from "lib/components/ui/tabs"
 import { cn } from "lib/utils"
 import { CadViewer } from "@tscircuit/3d-viewer"
-import { useCallback, useEffect, useState, useMemo } from "react"
+import {
+  useCallback,
+  useEffect,
+  useState,
+  useMemo,
+  type ComponentProps,
+} from "react"
 import { ErrorFallback } from "../ErrorFallback"
 import { ErrorBoundary, type FallbackProps } from "react-error-boundary"
 import { ErrorTabContent } from "../ErrorTabContent/ErrorTabContent"
@@ -122,6 +128,7 @@ export const CircuitJsonPreview = ({
   showFileMenu = false,
   isWebEmbedded = false,
   projectName,
+  schematicSvgOptions,
   onRerunWithDebug,
   solverEvents,
   onPcbBoundsSelected,
@@ -685,6 +692,8 @@ export const CircuitJsonPreview = ({
                       }}
                       debugGrid={showSchematicDebugGrid}
                       showSchematicPorts={showSchematicPorts}
+                      css={schematicSvgOptions?.css}
+                      className={schematicSvgOptions?.className}
                     />
                   ) : (
                     <PreviewEmptyState onRunClicked={onRunClicked} />

lib/components/CircuitJsonPreview/CircuitJsonPreview.tsx

@@ -35,6 +35,10 @@ export interface PreviewContentProps {
   autoroutingGraphics?: any
   circuitJson: CircuitJson | null
   className?: string
+  schematicSvgOptions?: {
+    css?: string
+    className?: string
+  }
   showCodeTab?: boolean
   showRenderLogTab?: boolean
   codeTabContent?: React.ReactNode

lib/components/CircuitJsonPreview/PreviewContentProps.ts

@@ -628,6 +628,7 @@ export const RunFrame = (props: RunFrameProps) => {
         defaultActiveTab={props.defaultActiveTab ?? props.defaultTab}
         defaultTab={props.defaultTab}
         availableTabs={props.availableTabs}
+        schematicSvgOptions={props.schematicSvgOptions}
         showToggleFullScreen={props.showToggleFullScreen}
         autoroutingGraphics={autoroutingGraphics}
         autoroutingLog={autoroutingLog}

lib/components/RunFrame/RunFrame.tsx

@@ -126,6 +126,11 @@ export interface RunFrameProps {
    */
   availableTabs?: TabId[]
 
+  schematicSvgOptions?: {
+    css?: string
+    className?: string
+  }
+
   evalWebWorkerBlobUrl?: string
 
   evalVersion?: string

lib/components/RunFrame/RunFrameProps.tsx

@@ -7,6 +7,7 @@ import { useLocalStorageState } from "lib/hooks/use-local-storage-state"
 import { useSyncPageTitle } from "lib/hooks/use-sync-page-title"
 import { useCallback, useEffect, useMemo, useState } from "react"
 import { RunFrame } from "../RunFrame/RunFrame"
+import type { RunFrameProps } from "../RunFrame/RunFrameProps"
 import { cn } from "lib/utils"
 import type { RunCompletedPayload } from "../RunFrame/run-completion"
 import { API_BASE } from "./api-base"
@@ -84,6 +85,7 @@ export interface RunFrameWithApiProps {
   workerBlobUrl?: string
   evalWebWorkerBlobUrl?: string
   showFileMenu?: boolean
+  schematicSvgOptions?: RunFrameProps["schematicSvgOptions"]
 
   /**
    * Enable fetch proxy for the web worker (useful for standalone bundles)
@@ -294,6 +296,7 @@ export const RunFrameWithApi = (props: RunFrameWithApiProps) => {
     <RunFrame
       fsMap={fsMap}
       showFileMenu={props.showFileMenu}
+      schematicSvgOptions={props.schematicSvgOptions}
       isLoadingFiles={isLoadingFiles}
       evalVersion={props.evalVersion}
       forceLatestEvalVersion={props.forceLatestEvalVersion}

lib/components/RunFrameWithApi/RunFrameWithApi.tsx

@@ -47,7 +47,7 @@
     "@react-hook/resize-observer": "^2.0.2",
     "@resvg/resvg-wasm": "^2.6.2",
     "@tscircuit/3d-viewer": "^0.0.565",
-    "@tscircuit/assembly-viewer": "^0.0.5",
+    "@tscircuit/assembly-viewer": "^0.0.6",
     "@tscircuit/create-snippet-url": "^0.0.9",
     "@tscircuit/fake-snippets": "^0.0.163",
     "@tscircuit/file-server": "^0.0.32",
@@ -67,7 +67,7 @@
     "circuit-json-to-kicad": "^0.0.150",
     "circuit-json-to-lbrn": "^0.0.74",
     "circuit-json-to-pnp-csv": "^0.0.7",
-    "circuit-json-to-step": "^0.0.28",
+    "circuit-json-to-step": "^0.0.34",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -107,7 +107,7 @@
     "tailwind-merge": "^2.6.0",
     "tailwindcss": "^3.4.17",
     "tailwindcss-animate": "^1.0.7",
-    "tscircuit": "^0.0.1774",
+    "tscircuit": "^0.0.1869",
     "tsup": "^8.3.5",
     "vite": "^7.1.2",
     "yargs": "^17.7.2"