From 199367d636a61bf2e98b9a052b9b13738f890f49 Mon Sep 17 00:00:00 2001
From: Arnav K <arnavkaushal09@gmail.com>
Date: Tue, 3 Feb 2026 22:57:31 +0530
Subject: [PATCH] fix: live debug grid and port prop changes

---
 examples/example18-live-toggle.fixture.tsx | 60 ++++++++++++++++++++++
 lib/components/SchematicViewer.tsx         |  5 +-
 2 files changed, 63 insertions(+), 2 deletions(-)
 create mode 100644 examples/example18-live-toggle.fixture.tsx

diff --git a/examples/example18-live-toggle.fixture.tsx b/examples/example18-live-toggle.fixture.tsx
new file mode 100644
index 0000000..4e674d1
--- /dev/null
+++ b/examples/example18-live-toggle.fixture.tsx
@@ -0,0 +1,60 @@
+import { useState } from "react"
+import { SchematicViewer } from "lib/components/SchematicViewer"
+import { renderToCircuitJson } from "lib/dev/render-to-circuit-json"
+
+export default () => {
+  const [showDebugGrid, setShowDebugGrid] = useState(true)
+  const [showPorts, setShowPorts] = useState(false)
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+      <div style={{ padding: 10, display: "flex", gap: 10 }}>
+        <button onClick={() => setShowDebugGrid(!showDebugGrid)}>
+          Debug Grid: {String(showDebugGrid)}
+        </button>
+        <button onClick={() => setShowPorts(!showPorts)}>
+          Schematic Ports: {String(showPorts)}
+        </button>
+      </div>
+      <SchematicViewer
+        circuitJson={renderToCircuitJson(
+          <board width="10mm" height="10mm" routingDisabled>
+            <resistor name="R1" resistance={1000} schX={-2} />
+            <capacitor name="C1" capacitance="1uF" schX={2} schY={2} />
+            <capacitor
+              name="C2"
+              schRotation={90}
+              capacitance="1uF"
+              schX={0}
+              schY={-4}
+            />
+            <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}
+            />
+
+            <trace from=".R1 .pin2" to=".C1 .pin1" />
+            <trace from=".C1 .pin2" to=".U1 .pin4" />
+            <trace from=".U1 .pin8" to=".C2 .pin1" />
+            <trace from=".C2 .pin2" to=".R1 .pin1" />
+            <trace from=".U1 .pin1" to=".U1 .pin5" />
+          </board>,
+        )}
+        debugGrid={showDebugGrid}
+        showSchematicPorts={showPorts}
+      />
+    </div>
+  )
+}
diff --git a/lib/components/SchematicViewer.tsx b/lib/components/SchematicViewer.tsx
index 94cc6d0..791abf9 100644
--- a/lib/components/SchematicViewer.tsx
+++ b/lib/components/SchematicViewer.tsx
@@ -123,7 +123,8 @@ export const SchematicViewer = ({
 
   const [editModeEnabled, setEditModeEnabled] = useState(defaultEditMode)
   const [snapToGrid, setSnapToGrid] = useState(true)
-  const [showGrid, setShowGrid] = useState(debugGrid)
+  const [showGridInternal, setShowGridInternal] = useState(false)
+  const showGrid = debugGrid || showGridInternal
   const [isInteractionEnabled, setIsInteractionEnabled] = useState<boolean>(
     !clickToInteractEnabled,
   )
@@ -513,7 +514,7 @@ export const SchematicViewer = ({
             }
           }}
           showGrid={showGrid}
-          onToggleGrid={setShowGrid}
+          onToggleGrid={setShowGridInternal}
         />
         {spiceSimulationEnabled && (
           <SpiceSimulationIcon onClick={() => setShowSpiceOverlay(true)} />