npm - @tscircuit/schematic-trace-solver - Versions diffs - 0.0.148 → 0.0.150 - Mend

@tscircuit/schematic-trace-solver 0.0.148 → 0.0.150

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (164) hide show

package/tests/examples/__snapshots__/example34.snap.svg CHANGED Viewed

@@ -1,4 +1,6 @@
-<svg width="640" height="640" viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="white"/><g><polyline data-points="1.1,-0.10000000000000003 1.601,-0.10000000000000003 1.601,0.4009999999999999" data-type="line" data-label="" points="479.84291324526953,329.9964298464834 580.0071403070332,329.9964298464834 580.0071403070332,229.83220278471975" fill="none" stroke="purple" stroke-width="1px"/></g><g><polyline data-points="1.1,-0.30000000000000004 1.201,-0.30000000000000004 1.201,-0.5010000000000001" data-type="line" data-label="" points="479.84291324526953,369.982149232417 500.035701535166,369.982149232417 500.035701535166,410.1677972152803" fill="none" stroke="purple" stroke-width="1px"/></g><g><rect data-type="rect" data-label="schematic_component_0" data-x="0" data-y="0" x="40" y="210.03927168868262" width="439.84291324526953" height="199.92859692966795" fill="hsl(24, 100%, 50%, 0.8)" stroke="black" stroke-width="0.005001785714285715"/></g><g><rect data-type="rect" data-label="netId: SCL
+<svg width="2416" height="1200" viewBox="0 0 2416 1200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Solver debug visualization on the left and Circuit JSON schematic on the right">
+  <g transform="translate(0, 0) scale(1.875, 1.875) translate(0, 0)">
+    <rect width="100%" height="100%" fill="white"/><g><polyline data-points="1.1,-0.10000000000000003 1.601,-0.10000000000000003 1.601,0.4009999999999999" data-type="line" data-label="" points="479.84291324526953,329.9964298464834 580.0071403070332,329.9964298464834 580.0071403070332,229.83220278471975" fill="none" stroke="purple" stroke-width="1px"/></g><g><polyline data-points="1.1,-0.30000000000000004 1.201,-0.30000000000000004 1.201,-0.5010000000000001" data-type="line" data-label="" points="479.84291324526953,369.982149232417 500.035701535166,369.982149232417 500.035701535166,410.1677972152803" fill="none" stroke="purple" stroke-width="1px"/></g><g><rect data-type="rect" data-label="schematic_component_0" data-x="0" data-y="0" x="40" y="210.03927168868262" width="439.84291324526953" height="199.92859692966795" fill="hsl(24, 100%, 50%, 0.8)" stroke="black" stroke-width="0.005001785714285715"/></g><g><rect data-type="rect" data-label="netId: SCL
 globalConnNetId: connectivity_net0" data-x="1.326" data-y="0.30000000000000004" x="480.0428418421992" y="230.03213138164938" width="89.96786861835062" height="39.985719385933635" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.005001785714285715"/></g><g><rect data-type="rect" data-label="netId: SDA
 globalConnNetId: connectivity_net1" data-x="1.326" data-y="0.09999999999999998" x="480.0428418421992" y="270.017850767583" width="89.96786861835062" height="39.98571938593358" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.005001785714285715"/></g><g><rect data-type="rect" data-label="netId: V3_3
 globalConnNetId: connectivity_net2" data-x="1.601" data-y="0.6259999999999999" x="560.0142806140664" y="139.86433416636913" width="39.985719385933635" height="89.9678686183506" fill="#ef444466" stroke="#ef4444" stroke-width="0.005001785714285715"/></g><g><rect data-type="rect" data-label="netId: GND
@@ -20,7 +22,7 @@ orientation: y-" data-x="1.201" data-y="-0.5010000000000001" cx="500.03570153516
                 const h = svg.getElementById('crosshair-h');
                 const v = svg.getElementById('crosshair-v');
                 const coords = svg.getElementById('coordinates');
                 crosshair.style.display = 'block';
                 h.setAttribute('x1', '0');
                 h.setAttribute('x2', '640');
@@ -39,13 +41,13 @@ orientation: y-" data-x="1.201" data-y="-0.5010000000000001" cx="500.03570153516
                 // y' = (y - ty) / sy
                 const sx = matrix.a;
                 const sy = matrix.d;
-                const tx = matrix.e;
+                const tx = matrix.e;
                 const ty = matrix.f;
                 const realPoint = {
                   x: (x - tx) / sx,
                   y: (y - ty) / sy // Flip y back since we used negative scale
                 }
                 coords.textContent = `(${realPoint.x.toFixed(2)}, ${realPoint.y.toFixed(2)})`;
                 coords.setAttribute('x', (x + 5).toString());
                 coords.setAttribute('y', (y - 5).toString());
@@ -53,4 +55,48 @@ orientation: y-" data-x="1.201" data-y="-0.5010000000000001" cx="500.03570153516
               document.currentScript.parentElement.addEventListener('mouseleave', () => {
                 document.currentScript.parentElement.getElementById('crosshair').style.display = 'none';
               });
-            ]]></script></svg>
+            ]]></script>
+  </g>
+  <g transform="translate(1216, 200)">
+    <style>
+              .boundary { fill: rgb(245, 241, 237); }
+              .schematic-boundary { fill: none; stroke: #fff; }
+              .component { fill: none; stroke: rgb(132, 0, 0); }
+              .chip { fill: rgb(255, 255, 194); stroke: rgb(132, 0, 0); }
+              .component-pin { fill: none; stroke: rgb(132, 0, 0); }
+              .text { font-family: sans-serif; fill: rgb(0, 150, 0); }
+              .pin-number { fill: rgb(169, 0, 0); }
+              .port-label { fill: rgb(0, 100, 100); }
+              .component-name { fill: rgb(0, 100, 100); }
+            </style><rect class="boundary" x="0" y="0" width="1200" height="800"/><g class="trace sch-trace" data-layer="base" data-circuit-json-type="schematic_trace" data-schematic-trace-id="schematic_trace_0__stack1"><path d="M 777.90197339146 414.83752905686 L 926.5740145408965 414.83752905686 L 926.5740145408965 266.1654879074234" class="trace-invisible-hover-outline sch-trace-hitbox" stroke="rgb(0, 150, 0)" fill="none" stroke-width="47.480092981856px" stroke-linecap="round" opacity="0" stroke-linejoin="round"/><path class="sch-trace-path" d="M 777.90197339146 414.83752905686 L 926.5740145408965 414.83752905686 L 926.5740145408965 266.1654879074234" stroke="rgb(0, 150, 0)" fill="none" stroke-width="5.935011622732px" stroke-linecap="round" stroke-linejoin="round"/></g><g class="trace sch-trace" data-layer="base" data-circuit-json-type="schematic_trace" data-schematic-trace-id="schematic_trace_1__stack1"><path d="M 777.90197339146 474.18764528418 L 807.8737820862566 474.18764528418 L 807.8737820862566 533.8345120926366" class="trace-invisible-hover-outline sch-trace-hitbox" stroke="rgb(0, 150, 0)" fill="none" stroke-width="47.480092981856px" stroke-linecap="round" opacity="0" stroke-linejoin="round"/><path class="sch-trace-path" d="M 777.90197339146 474.18764528418 L 807.8737820862566 474.18764528418 L 807.8737820862566 533.8345120926366" stroke="rgb(0, 150, 0)" fill="none" stroke-width="5.935011622732px" stroke-linecap="round" stroke-linejoin="round"/></g><g class="trace-overlays sch-trace-overlays" data-layer="overlay" data-circuit-json-type="schematic_trace" data-schematic-trace-id="schematic_trace_0__stack1"/><g class="trace-overlays sch-trace-overlays" data-layer="overlay" data-circuit-json-type="schematic_trace" data-schematic-trace-id="schematic_trace_1__stack1"/><g class="sch-component" data-circuit-json-type="schematic_component" data-schematic-component-id="schematic_component_0__stack1"><rect class="component chip sch-component-body" x="243.75092734558004" y="236.7871803749" width="415.4508135912399" height="296.7505811366" stroke-width="5.935011622732px" fill="rgb(255, 255, 194)" stroke="rgb(132, 0, 0)"/><rect class="component-overlay sch-component-overlay" x="243.75092734558004" y="236.7871803749" width="415.4508135912399" height="296.7505811366" fill="transparent"/><text class="sch-text" x="451.4763341412" y="385.1624709432" fill="#0f172a" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif" font-size="53.415104604587995px" transform="rotate(0, 451.4763341412, 385.1624709432)">U1</text><line class="component-pin sch-component-pin sch-port-line" x1="659.20174093682" y1="296.13729660222" x2="771.966961768728" y2="296.13729660222" stroke-width="5.935011622732px"/><g class="sch-port" data-schematic-port-id="source_port_0_0__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="777.90197339146" cy="296.13729660222" r="5.935011622732" stroke-width="5.935011622732px"/><rect x="771.9669617687281" y="290.20228497948796" width="11.870023245464" height="11.870023245464" opacity="0"/></g><text class="pin-number sch-pin-number" x="718.5518571641401" y="290.202284979488" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="44.512587170489994px" transform="">1</text><line class="component-pin sch-component-pin sch-port-line" x1="659.20174093682" y1="355.48741282954" x2="771.966961768728" y2="355.48741282954" stroke-width="5.935011622732px"/><g class="sch-port" data-schematic-port-id="source_port_0_1__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="777.90197339146" cy="355.48741282954" r="5.935011622732" stroke-width="5.935011622732px"/><rect x="771.9669617687281" y="349.552401206808" width="11.870023245464" height="11.870023245464" opacity="0"/></g><text class="pin-number sch-pin-number" x="718.5518571641401" y="349.552401206808" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="44.512587170489994px" transform="">2</text><line class="component-pin sch-component-pin sch-port-line" x1="659.20174093682" y1="414.83752905686" x2="777.90197339146" y2="414.83752905686" stroke-width="5.935011622732px"/><g class="sch-port" data-schematic-port-id="source_port_0_2__stack1"><rect x="771.9669617687281" y="408.90251743412796" width="11.870023245464" height="11.870023245464" opacity="0"/></g><text class="pin-number sch-pin-number" x="718.5518571641401" y="408.902517434128" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="44.512587170489994px" transform="">3</text><line class="component-pin sch-component-pin sch-port-line" x1="659.20174093682" y1="474.18764528418" x2="777.90197339146" y2="474.18764528418" stroke-width="5.935011622732px"/><g class="sch-port" data-schematic-port-id="source_port_0_3__stack1"><rect x="771.9669617687281" y="468.252633661448" width="11.870023245464" height="11.870023245464" opacity="0"/></g><text class="pin-number sch-pin-number" x="718.5518571641401" y="468.252633661448" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="44.512587170489994px" transform="">4</text></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_0_0__stack1"><circle cx="777.90197339146" cy="296.13729660222" r="11.870023245464" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_0_1__stack1"><circle cx="777.90197339146" cy="355.48741282954" r="11.870023245464" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_0_2__stack1"><circle cx="777.90197339146" cy="414.83752905686" r="11.870023245464" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_0_3__stack1"><circle cx="777.90197339146" cy="474.18764528418" r="11.870023245464" fill="red" opacity="0"/></g><path class="net-label sch-net-label" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_0__stack1" d="
+    M 777.90197339146,296.13729660222
+    L 793.9265047728364,266.46223848856
+    L 895.6921707306144,266.46223848856
+    L 895.6921707306144,325.81235471587996
+    L 793.9265047728364,325.81235471587996
+    Z
+  " fill="rgba(255, 255, 255, 0.6)" stroke="rgb(132, 0, 0)" stroke-width="5.935011622732px"/><text class="net-label-text sch-net-label-text" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_0__stack1" x="804.609525693754" y="296.13729660222" fill="rgb(132, 0, 0)" text-anchor="start" dominant-baseline="central" font-family="sans-serif" font-variant-numeric="tabular-nums" font-size="53.415104604587995px" transform="">XX</text><path class="net-label sch-net-label" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_1__stack1" d="
+    M 777.90197339146,355.48741282954
+    L 793.9265047728364,325.81235471588
+    L 895.6921707306144,325.81235471588
+    L 895.6921707306144,385.1624709432
+    L 793.9265047728364,385.1624709432
+    Z
+  " fill="rgba(255, 255, 255, 0.6)" stroke="rgb(132, 0, 0)" stroke-width="5.935011622732px"/><text class="net-label-text sch-net-label-text" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_1__stack1" x="804.609525693754" y="355.48741282954" fill="rgb(132, 0, 0)" text-anchor="start" dominant-baseline="central" font-family="sans-serif" font-variant-numeric="tabular-nums" font-size="53.415104604587995px" transform="">XX</text><path class="net-label sch-net-label" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_2__stack1" d="
+    M 926.5740145408965,266.1654879074234
+    L 896.8989564272365,250.14095652604703
+    L 896.8989564272365,148.375290568269
+    L 956.2490726545566,148.375290568269
+    L 956.2490726545566,250.14095652604703
+    Z
+  " fill="rgba(255, 255, 255, 0.6)" stroke="rgb(132, 0, 0)" stroke-width="5.935011622732px"/><text class="net-label-text sch-net-label-text" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_2__stack1" x="926.5740145408965" y="239.45793560512942" fill="rgb(132, 0, 0)" text-anchor="start" dominant-baseline="central" font-family="sans-serif" font-variant-numeric="tabular-nums" font-size="53.415104604587995px" transform="rotate(-90 926.5740145408965 239.45793560512942)">XX</text><path class="net-label sch-net-label" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_3__stack1" d="
+    M 807.8737820862566,533.8345120926366
+    L 837.5488401999166,549.859043474013
+    L 837.5488401999166,651.624709431791
+    L 778.1987239725966,651.624709431791
+    L 778.1987239725966,549.859043474013
+    Z
+  " fill="rgba(255, 255, 255, 0.6)" stroke="rgb(132, 0, 0)" stroke-width="5.935011622732px"/><text class="net-label-text sch-net-label-text" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_3__stack1" x="807.8737820862566" y="560.5420643949305" fill="rgb(132, 0, 0)" text-anchor="start" dominant-baseline="central" font-family="sans-serif" font-variant-numeric="tabular-nums" font-size="53.415104604587995px" transform="rotate(90 807.8737820862566 560.5420643949305)">XX</text>
+  </g>
+</svg>

package/tests/examples/__snapshots__/example35.snap.svg CHANGED Viewed

@@ -1,4 +1,6 @@
-<svg width="640" height="640" viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="white"/><g><polyline data-points="1.05,0.09999999999999998 3.05,2.1" data-type="line" data-label="" points="298.40474620962425,430.74489123269615 544.5045045045044,184.6451329378159" fill="none" stroke="hsl(312, 100%, 50%, 0.8)" stroke-width="1px"/></g><g><polyline data-points="1.05,-0.10000000000000003 3.05,2.3" data-type="line" data-label="" points="298.40474620962425,455.35486706218416 544.5045045045044,160.0351571083279" fill="none" stroke="hsl(88, 100%, 50%, 0.8)" stroke-width="1px"/></g><g><polyline data-points="1.05,-0.30000000000000004 1.05,0.30000000000000004" data-type="line" data-label="" points="298.40474620962425,479.9648428916722 298.40474620962425,406.1349154032081" fill="none" stroke="hsl(190, 100%, 50%, 0.8)" stroke-width="1px" stroke-dasharray="4 2"/></g><g><polyline data-points="1.05,-0.30000000000000004 1.6010000000000002,-0.30000000000000004 1.6010000000000002,0.3 1.05,0.30000000000000004" data-type="line" data-label="" points="298.40474620962425,479.9648428916722 366.20522961986376,479.9648428916722 366.20522961986376,406.13491540320814 298.40474620962425,406.1349154032081" fill="none" stroke="purple" stroke-width="1px"/></g><g><rect data-type="rect" data-label="schematic_component_0" data-x="0" data-y="0" x="40" y="381.5249395737201" width="258.40474620962425" height="123.04987914744015" fill="hsl(24, 100%, 50%, 0.8)" stroke="black" stroke-width="0.008126785714285715"/></g><g><rect data-type="rect" data-label="schematic_component_1" data-x="2" data-y="2" x="286.0997582948803" y="135.42518127883983" width="258.4047462096242" height="123.04987914744015" fill="hsl(24, 100%, 50%, 0.8)" stroke="black" stroke-width="0.008126785714285715"/></g><g><rect data-type="rect" data-label="netId: VCC
+<svg width="2416" height="1200" viewBox="0 0 2416 1200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Solver debug visualization on the left and Circuit JSON schematic on the right">
+  <g transform="translate(0, 0) scale(1.875, 1.875) translate(0, 0)">
+    <rect width="100%" height="100%" fill="white"/><g><polyline data-points="1.05,0.09999999999999998 3.05,2.1" data-type="line" data-label="" points="298.40474620962425,430.74489123269615 544.5045045045044,184.6451329378159" fill="none" stroke="hsl(312, 100%, 50%, 0.8)" stroke-width="1px"/></g><g><polyline data-points="1.05,-0.10000000000000003 3.05,2.3" data-type="line" data-label="" points="298.40474620962425,455.35486706218416 544.5045045045044,160.0351571083279" fill="none" stroke="hsl(88, 100%, 50%, 0.8)" stroke-width="1px"/></g><g><polyline data-points="1.05,-0.30000000000000004 1.05,0.30000000000000004" data-type="line" data-label="" points="298.40474620962425,479.9648428916722 298.40474620962425,406.1349154032081" fill="none" stroke="hsl(190, 100%, 50%, 0.8)" stroke-width="1px" stroke-dasharray="4 2"/></g><g><polyline data-points="1.05,-0.30000000000000004 1.6010000000000002,-0.30000000000000004 1.6010000000000002,0.3 1.05,0.30000000000000004" data-type="line" data-label="" points="298.40474620962425,479.9648428916722 366.20522961986376,479.9648428916722 366.20522961986376,406.13491540320814 298.40474620962425,406.1349154032081" fill="none" stroke="purple" stroke-width="1px"/></g><g><rect data-type="rect" data-label="schematic_component_0" data-x="0" data-y="0" x="40" y="381.5249395737201" width="258.40474620962425" height="123.04987914744015" fill="hsl(24, 100%, 50%, 0.8)" stroke="black" stroke-width="0.008126785714285715"/></g><g><rect data-type="rect" data-label="schematic_component_1" data-x="2" data-y="2" x="286.0997582948803" y="135.42518127883983" width="258.4047462096242" height="123.04987914744015" fill="hsl(24, 100%, 50%, 0.8)" stroke="black" stroke-width="0.008126785714285715"/></g><g><rect data-type="rect" data-label="netId: VCC
 globalConnNetId: connectivity_net2" data-x="1.6010000000000002" data-y="0.54" x="353.9002417051197" y="347.07097341243684" width="24.609975829488064" height="59.06394199077124" fill="#ef444466" stroke="#ef4444" stroke-width="0.008126785714285715"/></g><g><rect data-type="rect" data-label="netId: U1.CLK to U2.VCC
 globalConnNetId: connectivity_net1" data-x="1.276" data-y="-0.10000000000000003" x="298.52779608877165" y="443.04987914744015" width="55.3724456163481" height="24.609975829488008" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.008126785714285715"/></g><g><rect data-type="rect" data-label="netId: U1.CLK to U2.VCC
 globalConnNetId: connectivity_net1" data-x="3.276" data-y="2.3" x="544.6275543836518" y="147.7301691935839" width="55.37244561634816" height="24.609975829488008" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.008126785714285715"/></g><g><rect data-type="rect" data-label="netId: U1.IO3 to U2.IO3
@@ -34,7 +36,7 @@ orientation: x+" data-x="3.05" data-y="2.1" cx="544.5045045045044" cy="184.64513
                 const h = svg.getElementById('crosshair-h');
                 const v = svg.getElementById('crosshair-v');
                 const coords = svg.getElementById('coordinates');
                 crosshair.style.display = 'block';
                 h.setAttribute('x1', '0');
                 h.setAttribute('x2', '640');
@@ -53,13 +55,13 @@ orientation: x+" data-x="3.05" data-y="2.1" cx="544.5045045045044" cy="184.64513
                 // y' = (y - ty) / sy
                 const sx = matrix.a;
                 const sy = matrix.d;
-                const tx = matrix.e;
+                const tx = matrix.e;
                 const ty = matrix.f;
                 const realPoint = {
                   x: (x - tx) / sx,
                   y: (y - ty) / sy // Flip y back since we used negative scale
                 }
                 coords.textContent = `(${realPoint.x.toFixed(2)}, ${realPoint.y.toFixed(2)})`;
                 coords.setAttribute('x', (x + 5).toString());
                 coords.setAttribute('y', (y - 5).toString());
@@ -67,4 +69,55 @@ orientation: x+" data-x="3.05" data-y="2.1" cx="544.5045045045044" cy="184.64513
               document.currentScript.parentElement.addEventListener('mouseleave', () => {
                 document.currentScript.parentElement.getElementById('crosshair').style.display = 'none';
               });
-            ]]></script></svg>
+            ]]></script>
+  </g>
+  <g transform="translate(1216, 200)">
+    <style>
+              .boundary { fill: rgb(245, 241, 237); }
+              .schematic-boundary { fill: none; stroke: #fff; }
+              .component { fill: none; stroke: rgb(132, 0, 0); }
+              .chip { fill: rgb(255, 255, 194); stroke: rgb(132, 0, 0); }
+              .component-pin { fill: none; stroke: rgb(132, 0, 0); }
+              .text { font-family: sans-serif; fill: rgb(0, 150, 0); }
+              .pin-number { fill: rgb(169, 0, 0); }
+              .port-label { fill: rgb(0, 100, 100); }
+              .component-name { fill: rgb(0, 100, 100); }
+            </style><rect class="boundary" x="0" y="0" width="1200" height="800"/><g class="trace sch-trace" data-layer="base" data-circuit-json-type="schematic_trace" data-schematic-trace-id="schematic_trace_0__stack1"><path d="M 580.3066666667 660 L 690.5066666667001 660 L 690.5066666667001 540 L 580.3066666667 540" class="trace-invisible-hover-outline sch-trace-hitbox" stroke="rgb(0, 150, 0)" fill="none" stroke-width="32px" stroke-linecap="round" opacity="0" stroke-linejoin="round"/><path class="sch-trace-path" d="M 580.3066666667 660 L 690.5066666667001 660 L 690.5066666667001 540 L 580.3066666667 540" stroke="rgb(0, 150, 0)" fill="none" stroke-width="4px" stroke-linecap="round" stroke-linejoin="round"/></g><g class="trace-overlays sch-trace-overlays" data-layer="overlay" data-circuit-json-type="schematic_trace" data-schematic-trace-id="schematic_trace_0__stack1"/><g class="sch-component" data-circuit-json-type="schematic_component" data-schematic-component-id="schematic_component_0__stack1"><rect class="component chip sch-component-body" x="240.30666666669998" y="500" width="260" height="200" stroke-width="4px" fill="rgb(255, 255, 194)" stroke="rgb(132, 0, 0)"/><rect class="component-overlay sch-component-overlay" x="240.30666666669998" y="500" width="260" height="200" fill="transparent"/><text class="sch-text" x="370.3066666667" y="600" fill="#0f172a" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif" font-size="36px" transform="rotate(0, 370.3066666667, 600)">U1</text><line class="component-pin sch-component-pin sch-port-line" x1="240.30666666669998" y1="540" x2="164.30666666669998" y2="540" stroke-width="4px"/><g class="sch-port" data-schematic-port-id="source_port_0_0__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="160.30666666669998" cy="540" r="4" stroke-width="4px"/><rect x="156.30666666669998" y="536" width="8" height="8" opacity="0"/></g><text class="pin-number sch-pin-number" x="200.30666666669995" y="536" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="30px" transform="">1</text><line class="component-pin sch-component-pin sch-port-line" x1="240.30666666669998" y1="580" x2="164.30666666669998" y2="580" stroke-width="4px"/><g class="sch-port" data-schematic-port-id="source_port_0_1__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="160.30666666669998" cy="580" r="4" stroke-width="4px"/><rect x="156.30666666669998" y="576" width="8" height="8" opacity="0"/></g><text class="pin-number sch-pin-number" x="200.30666666669995" y="576" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="30px" transform="">2</text><line class="component-pin sch-component-pin sch-port-line" x1="240.30666666669998" y1="620" x2="164.30666666669998" y2="620" stroke-width="4px"/><g class="sch-port" data-schematic-port-id="source_port_0_2__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="160.30666666669998" cy="620" r="4" stroke-width="4px"/><rect x="156.30666666669998" y="616" width="8" height="8" opacity="0"/></g><text class="pin-number sch-pin-number" x="200.30666666669995" y="616" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="30px" transform="">3</text><line class="component-pin sch-component-pin sch-port-line" x1="240.30666666669998" y1="660" x2="164.30666666669998" y2="660" stroke-width="4px"/><g class="sch-port" data-schematic-port-id="source_port_0_3__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="160.30666666669998" cy="660" r="4" stroke-width="4px"/><rect x="156.30666666669998" y="656" width="8" height="8" opacity="0"/></g><text class="pin-number sch-pin-number" x="200.30666666669995" y="656" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="30px" transform="">4</text><line class="component-pin sch-component-pin sch-port-line" x1="500.3066666667" y1="660" x2="580.3066666667" y2="660" stroke-width="4px"/><g class="sch-port" data-schematic-port-id="source_port_0_4__stack1"><rect x="576.3066666667" y="656" width="8" height="8" opacity="0"/></g><text class="pin-number sch-pin-number" x="540.3066666667" y="656" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="30px" transform="">5</text><line class="component-pin sch-component-pin sch-port-line" x1="500.3066666667" y1="620" x2="576.3066666667" y2="620" stroke-width="4px"/><g class="sch-port" data-schematic-port-id="source_port_0_5__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="580.3066666667" cy="620" r="4" stroke-width="4px"/><rect x="576.3066666667" y="616" width="8" height="8" opacity="0"/></g><text class="pin-number sch-pin-number" x="540.3066666667" y="616" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="30px" transform="">6</text><line class="component-pin sch-component-pin sch-port-line" x1="500.3066666667" y1="580" x2="576.3066666667" y2="580" stroke-width="4px"/><g class="sch-port" data-schematic-port-id="source_port_0_6__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="580.3066666667" cy="580" r="4" stroke-width="4px"/><rect x="576.3066666667" y="576" width="8" height="8" opacity="0"/></g><text class="pin-number sch-pin-number" x="540.3066666667" y="576" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="30px" transform="">7</text><line class="component-pin sch-component-pin sch-port-line" x1="500.3066666667" y1="540" x2="580.3066666667" y2="540" stroke-width="4px"/><g class="sch-port" data-schematic-port-id="source_port_0_7__stack1"><rect x="576.3066666667" y="536" width="8" height="8" opacity="0"/></g><text class="pin-number sch-pin-number" x="540.3066666667" y="536" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="30px" transform="">8</text></g><g class="sch-component" data-circuit-json-type="schematic_component" data-schematic-component-id="schematic_component_1__stack1"><rect class="component chip sch-component-body" x="640.3066666667" y="100" width="260" height="200" stroke-width="4px" fill="rgb(255, 255, 194)" stroke="rgb(132, 0, 0)"/><rect class="component-overlay sch-component-overlay" x="640.3066666667" y="100" width="260" height="200" fill="transparent"/><text class="sch-text" x="770.3066666667" y="200" fill="#0f172a" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif" font-size="36px" transform="rotate(0, 770.3066666667, 200)">U2</text><line class="component-pin sch-component-pin sch-port-line" x1="640.3066666667" y1="140.00000000000006" x2="564.3066666667" y2="140.00000000000006" stroke-width="4px"/><g class="sch-port" data-schematic-port-id="source_port_1_0__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="560.3066666667" cy="140.00000000000006" r="4" stroke-width="4px"/><rect x="556.3066666667" y="136.00000000000006" width="8" height="8" opacity="0"/></g><text class="pin-number sch-pin-number" x="600.3066666666999" y="136.00000000000006" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="30px" transform="">1</text><line class="component-pin sch-component-pin sch-port-line" x1="640.3066666667" y1="180" x2="564.3066666667" y2="180" stroke-width="4px"/><g class="sch-port" data-schematic-port-id="source_port_1_1__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="560.3066666667" cy="180" r="4" stroke-width="4px"/><rect x="556.3066666667" y="176" width="8" height="8" opacity="0"/></g><text class="pin-number sch-pin-number" x="600.3066666666999" y="176" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="30px" transform="">2</text><line class="component-pin sch-component-pin sch-port-line" x1="640.3066666667" y1="220" x2="564.3066666667" y2="220" stroke-width="4px"/><g class="sch-port" data-schematic-port-id="source_port_1_2__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="560.3066666667" cy="220" r="4" stroke-width="4px"/><rect x="556.3066666667" y="216" width="8" height="8" opacity="0"/></g><text class="pin-number sch-pin-number" x="600.3066666666999" y="216" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="30px" transform="">3</text><line class="component-pin sch-component-pin sch-port-line" x1="640.3066666667" y1="260" x2="564.3066666667" y2="260" stroke-width="4px"/><g class="sch-port" data-schematic-port-id="source_port_1_3__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="560.3066666667" cy="260" r="4" stroke-width="4px"/><rect x="556.3066666667" y="256" width="8" height="8" opacity="0"/></g><text class="pin-number sch-pin-number" x="600.3066666666999" y="256" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="30px" transform="">4</text><line class="component-pin sch-component-pin sch-port-line" x1="900.3066666667" y1="260" x2="976.3066666667" y2="260" stroke-width="4px"/><g class="sch-port" data-schematic-port-id="source_port_1_4__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="980.3066666667" cy="260" r="4" stroke-width="4px"/><rect x="976.3066666667" y="256" width="8" height="8" opacity="0"/></g><text class="pin-number sch-pin-number" x="940.3066666667" y="256" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="30px" transform="">5</text><line class="component-pin sch-component-pin sch-port-line" x1="900.3066666667" y1="220" x2="976.3066666667" y2="220" stroke-width="4px"/><g class="sch-port" data-schematic-port-id="source_port_1_5__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="980.3066666667" cy="220" r="4" stroke-width="4px"/><rect x="976.3066666667" y="216" width="8" height="8" opacity="0"/></g><text class="pin-number sch-pin-number" x="940.3066666667" y="216" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="30px" transform="">6</text><line class="component-pin sch-component-pin sch-port-line" x1="900.3066666667" y1="180" x2="976.3066666667" y2="180" stroke-width="4px"/><g class="sch-port" data-schematic-port-id="source_port_1_6__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="980.3066666667" cy="180" r="4" stroke-width="4px"/><rect x="976.3066666667" y="176" width="8" height="8" opacity="0"/></g><text class="pin-number sch-pin-number" x="940.3066666667" y="176" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="30px" transform="">7</text><line class="component-pin sch-component-pin sch-port-line" x1="900.3066666667" y1="140.00000000000006" x2="976.3066666667" y2="140.00000000000006" stroke-width="4px"/><g class="sch-port" data-schematic-port-id="source_port_1_7__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="980.3066666667" cy="140.00000000000006" r="4" stroke-width="4px"/><rect x="976.3066666667" y="136.00000000000006" width="8" height="8" opacity="0"/></g><text class="pin-number sch-pin-number" x="940.3066666667" y="136.00000000000006" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="30px" transform="">8</text></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_0_0__stack1"><circle cx="160.30666666669998" cy="540" r="8" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_0_1__stack1"><circle cx="160.30666666669998" cy="580" r="8" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_0_2__stack1"><circle cx="160.30666666669998" cy="620" r="8" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_0_3__stack1"><circle cx="160.30666666669998" cy="660" r="8" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_0_4__stack1"><circle cx="580.3066666667" cy="660" r="8" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_0_5__stack1"><circle cx="580.3066666667" cy="620" r="8" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_0_6__stack1"><circle cx="580.3066666667" cy="580" r="8" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_0_7__stack1"><circle cx="580.3066666667" cy="540" r="8" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_1_0__stack1"><circle cx="560.3066666667" cy="140.00000000000006" r="8" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_1_1__stack1"><circle cx="560.3066666667" cy="180" r="8" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_1_2__stack1"><circle cx="560.3066666667" cy="220" r="8" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_1_3__stack1"><circle cx="560.3066666667" cy="260" r="8" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_1_4__stack1"><circle cx="980.3066666667" cy="260" r="8" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_1_5__stack1"><circle cx="980.3066666667" cy="220" r="8" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_1_6__stack1"><circle cx="980.3066666667" cy="180" r="8" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_1_7__stack1"><circle cx="980.3066666667" cy="140.00000000000006" r="8" fill="red" opacity="0"/></g><path class="net-label sch-net-label" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_0__stack1" d="
+    M 690.5066666667001,540
+    L 670.5066666667001,529.2
+    L 670.5066666667001,437.12
+    L 710.5066666667001,437.12
+    L 710.5066666667001,529.2
+    Z
+  " fill="rgba(255, 255, 255, 0.6)" stroke="rgb(132, 0, 0)" stroke-width="4px"/><text class="net-label-text sch-net-label-text" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_0__stack1" x="690.5066666667001" y="522" fill="rgb(132, 0, 0)" text-anchor="start" dominant-baseline="central" font-family="sans-serif" font-variant-numeric="tabular-nums" font-size="36px" transform="rotate(-90 690.5066666667001 522)">XXX</text><path class="net-label sch-net-label" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_1__stack1" d="
+    M 580.3066666667,620
+    L 591.1066666667,600
+    L 659.6933333333667,600
+    L 659.6933333333667,640
+    L 591.1066666667,640
+    Z
+  " fill="rgba(255, 255, 255, 0.6)" stroke="rgb(132, 0, 0)" stroke-width="4px"/><text class="net-label-text sch-net-label-text" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_1__stack1" x="598.3066666667" y="620" fill="rgb(132, 0, 0)" text-anchor="start" dominant-baseline="central" font-family="sans-serif" font-variant-numeric="tabular-nums" font-size="36px" transform="">XX</text><path class="net-label sch-net-label" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_2__stack1" d="
+    M 980.3066666667,140.00000000000006
+    L 991.1066666667,120.00000000000006
+    L 1059.6933333333668,120.00000000000006
+    L 1059.6933333333668,160.00000000000006
+    L 991.1066666667,160.00000000000006
+    Z
+  " fill="rgba(255, 255, 255, 0.6)" stroke="rgb(132, 0, 0)" stroke-width="4px"/><text class="net-label-text sch-net-label-text" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_2__stack1" x="998.3066666667" y="140.00000000000006" fill="rgb(132, 0, 0)" text-anchor="start" dominant-baseline="central" font-family="sans-serif" font-variant-numeric="tabular-nums" font-size="36px" transform="">XX</text><path class="net-label sch-net-label" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_3__stack1" d="
+    M 580.3066666667,580
+    L 591.1066666667,560
+    L 659.6933333333667,560
+    L 659.6933333333667,600
+    L 591.1066666667,600
+    Z
+  " fill="rgba(255, 255, 255, 0.6)" stroke="rgb(132, 0, 0)" stroke-width="4px"/><text class="net-label-text sch-net-label-text" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_3__stack1" x="598.3066666667" y="580" fill="rgb(132, 0, 0)" text-anchor="start" dominant-baseline="central" font-family="sans-serif" font-variant-numeric="tabular-nums" font-size="36px" transform="">XX</text><path class="net-label sch-net-label" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_4__stack1" d="
+    M 980.3066666667,180
+    L 991.1066666667,160
+    L 1059.6933333333668,160
+    L 1059.6933333333668,200
+    L 991.1066666667,200
+    Z
+  " fill="rgba(255, 255, 255, 0.6)" stroke="rgb(132, 0, 0)" stroke-width="4px"/><text class="net-label-text sch-net-label-text" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_4__stack1" x="998.3066666667" y="180" fill="rgb(132, 0, 0)" text-anchor="start" dominant-baseline="central" font-family="sans-serif" font-variant-numeric="tabular-nums" font-size="36px" transform="">XX</text>
+  </g>
+</svg>

package/tests/examples/__snapshots__/example36.snap.svg CHANGED Viewed

@@ -1,4 +1,6 @@
-<svg width="640" height="640" viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="white"/><g><polyline data-points="1.05,-0.10000000000000003 3.05,2.3" data-type="line" data-label="" points="270.54303077827876,440.7606351695746 490.1078219956871,177.28288570868457" fill="none" stroke="hsl(88, 100%, 50%, 0.8)" stroke-width="1px"/></g><g><polyline data-points="1.05,-0.30000000000000004 1.05,0.30000000000000004" data-type="line" data-label="" points="270.54303077827876,462.71711429131545 270.54303077827876,396.8476769260929" fill="none" stroke="hsl(190, 100%, 50%, 0.8)" stroke-width="1px" stroke-dasharray="4 2"/></g><g><polyline data-points="1.05,-0.30000000000000004 2.1510000000000002,-0.30000000000000004 2.1510000000000002,0.30000000000000004 1.05,0.30000000000000004" data-type="line" data-label="" points="270.54303077827876,462.71711429131545 391.4134483434621,462.71711429131545 391.4134483434621,396.8476769260929 270.54303077827876,396.8476769260929" fill="none" stroke="purple" stroke-width="1px"/></g><g><rect data-type="rect" data-label="schematic_component_0" data-x="0" data-y="0" x="40" y="374.8911978043521" width="230.54303077827876" height="109.78239560870418" fill="hsl(24, 100%, 50%, 0.8)" stroke="black" stroke-width="0.009108928571428572"/></g><g><rect data-type="rect" data-label="schematic_component_1" data-x="2" data-y="2" x="259.56479121740836" y="155.32640658694373" width="230.54303077827876" height="109.78239560870418" fill="hsl(24, 100%, 50%, 0.8)" stroke="black" stroke-width="0.009108928571428572"/></g><g><rect data-type="rect" data-label="netId: VCC
+<svg width="2416" height="1200" viewBox="0 0 2416 1200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Solver debug visualization on the left and Circuit JSON schematic on the right">
+  <g transform="translate(0, 0) scale(1.875, 1.875) translate(0, 0)">
+    <rect width="100%" height="100%" fill="white"/><g><polyline data-points="1.05,-0.10000000000000003 3.05,2.3" data-type="line" data-label="" points="270.54303077827876,440.7606351695746 490.1078219956871,177.28288570868457" fill="none" stroke="hsl(88, 100%, 50%, 0.8)" stroke-width="1px"/></g><g><polyline data-points="1.05,-0.30000000000000004 1.05,0.30000000000000004" data-type="line" data-label="" points="270.54303077827876,462.71711429131545 270.54303077827876,396.8476769260929" fill="none" stroke="hsl(190, 100%, 50%, 0.8)" stroke-width="1px" stroke-dasharray="4 2"/></g><g><polyline data-points="1.05,-0.30000000000000004 2.1510000000000002,-0.30000000000000004 2.1510000000000002,0.30000000000000004 1.05,0.30000000000000004" data-type="line" data-label="" points="270.54303077827876,462.71711429131545 391.4134483434621,462.71711429131545 391.4134483434621,396.8476769260929 270.54303077827876,396.8476769260929" fill="none" stroke="purple" stroke-width="1px"/></g><g><rect data-type="rect" data-label="schematic_component_0" data-x="0" data-y="0" x="40" y="374.8911978043521" width="230.54303077827876" height="109.78239560870418" fill="hsl(24, 100%, 50%, 0.8)" stroke="black" stroke-width="0.009108928571428572"/></g><g><rect data-type="rect" data-label="schematic_component_1" data-x="2" data-y="2" x="259.56479121740836" y="155.32640658694373" width="230.54303077827876" height="109.78239560870418" fill="hsl(24, 100%, 50%, 0.8)" stroke="black" stroke-width="0.009108928571428572"/></g><g><rect data-type="rect" data-label="netId: VCC
 globalConnNetId: connectivity_net1" data-x="2.1510000000000002" data-y="0.54" x="380.43520878259164" y="344.1521270339149" width="21.95647912174087" height="52.69554989217801" fill="#ef444466" stroke="#ef4444" stroke-width="0.009108928571428572"/></g><g><rect data-type="rect" data-label="netId: U1.CLK to U2.VCC
 globalConnNetId: connectivity_net0" data-x="1.551" data-y="-0.10000000000000003" x="270.65281317388747" y="429.7823956087042" width="109.78239560870418" height="21.956479121740813" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.009108928571428572"/></g><g><rect data-type="rect" data-label="netId: U1.CLK to U2.VCC
 globalConnNetId: connectivity_net0" data-x="3.5509999999999997" data-y="2.3" x="490.2176043912959" y="166.30464614781414" width="109.78239560870418" height="21.95647912174087" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.009108928571428572"/></g><g><circle data-type="point" data-label="U1.1
@@ -30,7 +32,7 @@ orientation: x+" data-x="3.05" data-y="2.3" cx="490.1078219956871" cy="177.28288
                 const h = svg.getElementById('crosshair-h');
                 const v = svg.getElementById('crosshair-v');
                 const coords = svg.getElementById('coordinates');
                 crosshair.style.display = 'block';
                 h.setAttribute('x1', '0');
                 h.setAttribute('x2', '640');
@@ -49,13 +51,13 @@ orientation: x+" data-x="3.05" data-y="2.3" cx="490.1078219956871" cy="177.28288
                 // y' = (y - ty) / sy
                 const sx = matrix.a;
                 const sy = matrix.d;
-                const tx = matrix.e;
+                const tx = matrix.e;
                 const ty = matrix.f;
                 const realPoint = {
                   x: (x - tx) / sx,
                   y: (y - ty) / sy // Flip y back since we used negative scale
                 }
                 coords.textContent = `(${realPoint.x.toFixed(2)}, ${realPoint.y.toFixed(2)})`;
                 coords.setAttribute('x', (x + 5).toString());
                 coords.setAttribute('y', (y - 5).toString());
@@ -63,4 +65,41 @@ orientation: x+" data-x="3.05" data-y="2.3" cx="490.1078219956871" cy="177.28288
               document.currentScript.parentElement.addEventListener('mouseleave', () => {
                 document.currentScript.parentElement.getElementById('crosshair').style.display = 'none';
               });
-            ]]></script></svg>
+            ]]></script>
+  </g>
+  <g transform="translate(1216, 200)">
+    <style>
+              .boundary { fill: rgb(245, 241, 237); }
+              .schematic-boundary { fill: none; stroke: #fff; }
+              .component { fill: none; stroke: rgb(132, 0, 0); }
+              .chip { fill: rgb(255, 255, 194); stroke: rgb(132, 0, 0); }
+              .component-pin { fill: none; stroke: rgb(132, 0, 0); }
+              .text { font-family: sans-serif; fill: rgb(0, 150, 0); }
+              .pin-number { fill: rgb(169, 0, 0); }
+              .port-label { fill: rgb(0, 100, 100); }
+              .component-name { fill: rgb(0, 100, 100); }
+            </style><rect class="boundary" x="0" y="0" width="1200" height="800"/><g class="trace sch-trace" data-layer="base" data-circuit-json-type="schematic_trace" data-schematic-trace-id="schematic_trace_0__stack1"><path d="M 523.91013755332 652.25302919232 L 737.5490492000465 652.25302919232 L 737.5490492000465 535.82855418048 L 523.91013755332 535.82855418048" class="trace-invisible-hover-outline sch-trace-hitbox" stroke="rgb(0, 150, 0)" fill="none" stroke-width="31.046526669824004px" stroke-linecap="round" opacity="0" stroke-linejoin="round"/><path class="sch-trace-path" d="M 523.91013755332 652.25302919232 L 737.5490492000465 652.25302919232 L 737.5490492000465 535.82855418048 L 523.91013755332 535.82855418048" stroke="rgb(0, 150, 0)" fill="none" stroke-width="3.8808158337280005px" stroke-linecap="round" stroke-linejoin="round"/></g><g class="trace-overlays sch-trace-overlays" data-layer="overlay" data-circuit-json-type="schematic_trace" data-schematic-trace-id="schematic_trace_0__stack1"/><g class="sch-component" data-circuit-json-type="schematic_component" data-schematic-component-id="schematic_component_0__stack1"><rect class="component chip sch-component-body" x="194.04079168644" y="497.0203958432" width="252.25302919232" height="194.04079168640004" stroke-width="3.8808158337280005px" fill="rgb(255, 255, 194)" stroke="rgb(132, 0, 0)"/><rect class="component-overlay sch-component-overlay" x="194.04079168644" y="497.0203958432" width="252.25302919232" height="194.04079168640004" fill="transparent"/><text class="sch-text" x="320.1673062826" y="594.0407916864" fill="#0f172a" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif" font-size="34.927342503552px" transform="rotate(0, 320.1673062826, 594.0407916864)">U1</text><line class="component-pin sch-component-pin sch-port-line" x1="194.04079168644" y1="535.82855418048" x2="120.305290845608" y2="535.82855418048" stroke-width="3.8808158337280005px"/><g class="sch-port" data-schematic-port-id="source_port_0_0__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="116.42447501187999" cy="535.82855418048" r="3.8808158337280005" stroke-width="3.8808158337280005px"/><rect x="112.54365917815198" y="531.947738346752" width="7.761631667456001" height="7.761631667456001" opacity="0"/></g><text class="pin-number sch-pin-number" x="155.23263334915998" y="531.947738346752" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="29.10611875296px" transform="">1</text><line class="component-pin sch-component-pin sch-port-line" x1="194.04079168644" y1="574.63671251776" x2="120.305290845608" y2="574.63671251776" stroke-width="3.8808158337280005px"/><g class="sch-port" data-schematic-port-id="source_port_0_1__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="116.42447501187999" cy="574.63671251776" r="3.8808158337280005" stroke-width="3.8808158337280005px"/><rect x="112.54365917815198" y="570.755896684032" width="7.761631667456001" height="7.761631667456001" opacity="0"/></g><text class="pin-number sch-pin-number" x="155.23263334915998" y="570.755896684032" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="29.10611875296px" transform="">2</text><line class="component-pin sch-component-pin sch-port-line" x1="194.04079168644" y1="613.44487085504" x2="120.305290845608" y2="613.44487085504" stroke-width="3.8808158337280005px"/><g class="sch-port" data-schematic-port-id="source_port_0_2__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="116.42447501187999" cy="613.44487085504" r="3.8808158337280005" stroke-width="3.8808158337280005px"/><rect x="112.54365917815198" y="609.564055021312" width="7.761631667456001" height="7.761631667456001" opacity="0"/></g><text class="pin-number sch-pin-number" x="155.23263334915998" y="609.564055021312" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="29.10611875296px" transform="">3</text><line class="component-pin sch-component-pin sch-port-line" x1="194.04079168644" y1="652.25302919232" x2="120.305290845608" y2="652.25302919232" stroke-width="3.8808158337280005px"/><g class="sch-port" data-schematic-port-id="source_port_0_3__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="116.42447501187999" cy="652.25302919232" r="3.8808158337280005" stroke-width="3.8808158337280005px"/><rect x="112.54365917815198" y="648.372213358592" width="7.761631667456001" height="7.761631667456001" opacity="0"/></g><text class="pin-number sch-pin-number" x="155.23263334915998" y="648.372213358592" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="29.10611875296px" transform="">4</text><line class="component-pin sch-component-pin sch-port-line" x1="446.29382087876" y1="652.25302919232" x2="523.91013755332" y2="652.25302919232" stroke-width="3.8808158337280005px"/><g class="sch-port" data-schematic-port-id="source_port_0_4__stack1"><rect x="520.0293217195921" y="648.372213358592" width="7.761631667456001" height="7.761631667456001" opacity="0"/></g><text class="pin-number sch-pin-number" x="485.10197921604004" y="648.372213358592" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="29.10611875296px" transform="">5</text><line class="component-pin sch-component-pin sch-port-line" x1="446.29382087876" y1="613.44487085504" x2="520.029321719592" y2="613.44487085504" stroke-width="3.8808158337280005px"/><g class="sch-port" data-schematic-port-id="source_port_0_5__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="523.91013755332" cy="613.44487085504" r="3.8808158337280005" stroke-width="3.8808158337280005px"/><rect x="520.0293217195921" y="609.564055021312" width="7.761631667456001" height="7.761631667456001" opacity="0"/></g><text class="pin-number sch-pin-number" x="485.10197921604004" y="609.564055021312" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="29.10611875296px" transform="">6</text><line class="component-pin sch-component-pin sch-port-line" x1="446.29382087876" y1="574.63671251776" x2="520.029321719592" y2="574.63671251776" stroke-width="3.8808158337280005px"/><g class="sch-port" data-schematic-port-id="source_port_0_6__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="523.91013755332" cy="574.63671251776" r="3.8808158337280005" stroke-width="3.8808158337280005px"/><rect x="520.0293217195921" y="570.755896684032" width="7.761631667456001" height="7.761631667456001" opacity="0"/></g><text class="pin-number sch-pin-number" x="485.10197921604004" y="570.755896684032" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="29.10611875296px" transform="">7</text><line class="component-pin sch-component-pin sch-port-line" x1="446.29382087876" y1="535.82855418048" x2="523.91013755332" y2="535.82855418048" stroke-width="3.8808158337280005px"/><g class="sch-port" data-schematic-port-id="source_port_0_7__stack1"><rect x="520.0293217195921" y="531.947738346752" width="7.761631667456001" height="7.761631667456001" opacity="0"/></g><text class="pin-number sch-pin-number" x="485.10197921604004" y="531.947738346752" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="29.10611875296px" transform="">8</text></g><g class="sch-component" data-circuit-json-type="schematic_component" data-schematic-component-id="schematic_component_1__stack1"><rect class="component chip sch-component-body" x="582.1223750592401" y="108.93881247039997" width="252.2530291923199" height="194.04079168639998" stroke-width="3.8808158337280005px" fill="rgb(255, 255, 194)" stroke="rgb(132, 0, 0)"/><rect class="component-overlay sch-component-overlay" x="582.1223750592401" y="108.93881247039997" width="252.2530291923199" height="194.04079168639998" fill="transparent"/><text class="sch-text" x="708.2488896554" y="205.95920831359996" fill="#0f172a" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif" font-size="34.927342503552px" transform="rotate(0, 708.2488896554, 205.95920831359996)">U2</text><line class="component-pin sch-component-pin sch-port-line" x1="582.1223750592401" y1="147.74697080768" x2="508.386874218408" y2="147.74697080768" stroke-width="3.8808158337280005px"/><g class="sch-port" data-schematic-port-id="source_port_1_0__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="504.50605838468005" cy="147.74697080768" r="3.8808158337280005" stroke-width="3.8808158337280005px"/><rect x="500.62524255095207" y="143.86615497395198" width="7.761631667456001" height="7.761631667456001" opacity="0"/></g><text class="pin-number sch-pin-number" x="543.3142167219601" y="143.866154973952" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="29.10611875296px" transform="">1</text><line class="component-pin sch-component-pin sch-port-line" x1="582.1223750592401" y1="186.55512914495995" x2="508.386874218408" y2="186.55512914495995" stroke-width="3.8808158337280005px"/><g class="sch-port" data-schematic-port-id="source_port_1_1__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="504.50605838468005" cy="186.55512914495995" r="3.8808158337280005" stroke-width="3.8808158337280005px"/><rect x="500.62524255095207" y="182.67431331123194" width="7.761631667456001" height="7.761631667456001" opacity="0"/></g><text class="pin-number sch-pin-number" x="543.3142167219601" y="182.6743133112319" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="29.10611875296px" transform="">2</text><line class="component-pin sch-component-pin sch-port-line" x1="582.1223750592401" y1="225.36328748223997" x2="508.386874218408" y2="225.36328748223997" stroke-width="3.8808158337280005px"/><g class="sch-port" data-schematic-port-id="source_port_1_2__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="504.50605838468005" cy="225.36328748223997" r="3.8808158337280005" stroke-width="3.8808158337280005px"/><rect x="500.62524255095207" y="221.48247164851196" width="7.761631667456001" height="7.761631667456001" opacity="0"/></g><text class="pin-number sch-pin-number" x="543.3142167219601" y="221.482471648512" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="29.10611875296px" transform="">3</text><line class="component-pin sch-component-pin sch-port-line" x1="582.1223750592401" y1="264.17144581952" x2="508.386874218408" y2="264.17144581952" stroke-width="3.8808158337280005px"/><g class="sch-port" data-schematic-port-id="source_port_1_3__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="504.50605838468005" cy="264.17144581952" r="3.8808158337280005" stroke-width="3.8808158337280005px"/><rect x="500.62524255095207" y="260.290629985792" width="7.761631667456001" height="7.761631667456001" opacity="0"/></g><text class="pin-number sch-pin-number" x="543.3142167219601" y="260.29062998579195" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="29.10611875296px" transform="">4</text><line class="component-pin sch-component-pin sch-port-line" x1="834.37540425156" y1="264.17144581952" x2="908.1109050923919" y2="264.17144581952" stroke-width="3.8808158337280005px"/><g class="sch-port" data-schematic-port-id="source_port_1_4__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="911.99172092612" cy="264.17144581952" r="3.8808158337280005" stroke-width="3.8808158337280005px"/><rect x="908.110905092392" y="260.290629985792" width="7.761631667456001" height="7.761631667456001" opacity="0"/></g><text class="pin-number sch-pin-number" x="873.18356258884" y="260.29062998579195" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="29.10611875296px" transform="">5</text><line class="component-pin sch-component-pin sch-port-line" x1="834.37540425156" y1="225.36328748223997" x2="908.1109050923919" y2="225.36328748223997" stroke-width="3.8808158337280005px"/><g class="sch-port" data-schematic-port-id="source_port_1_5__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="911.99172092612" cy="225.36328748223997" r="3.8808158337280005" stroke-width="3.8808158337280005px"/><rect x="908.110905092392" y="221.48247164851196" width="7.761631667456001" height="7.761631667456001" opacity="0"/></g><text class="pin-number sch-pin-number" x="873.18356258884" y="221.482471648512" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="29.10611875296px" transform="">6</text><line class="component-pin sch-component-pin sch-port-line" x1="834.37540425156" y1="186.55512914495995" x2="908.1109050923919" y2="186.55512914495995" stroke-width="3.8808158337280005px"/><g class="sch-port" data-schematic-port-id="source_port_1_6__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="911.99172092612" cy="186.55512914495995" r="3.8808158337280005" stroke-width="3.8808158337280005px"/><rect x="908.110905092392" y="182.67431331123194" width="7.761631667456001" height="7.761631667456001" opacity="0"/></g><text class="pin-number sch-pin-number" x="873.18356258884" y="182.6743133112319" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="29.10611875296px" transform="">7</text><line class="component-pin sch-component-pin sch-port-line" x1="834.37540425156" y1="147.74697080768" x2="908.1109050923919" y2="147.74697080768" stroke-width="3.8808158337280005px"/><g class="sch-port" data-schematic-port-id="source_port_1_7__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="911.99172092612" cy="147.74697080768" r="3.8808158337280005" stroke-width="3.8808158337280005px"/><rect x="908.110905092392" y="143.86615497395198" width="7.761631667456001" height="7.761631667456001" opacity="0"/></g><text class="pin-number sch-pin-number" x="873.18356258884" y="143.866154973952" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="29.10611875296px" transform="">8</text></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_0_0__stack1"><circle cx="116.42447501187999" cy="535.82855418048" r="7.761631667456001" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_0_1__stack1"><circle cx="116.42447501187999" cy="574.63671251776" r="7.761631667456001" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_0_2__stack1"><circle cx="116.42447501187999" cy="613.44487085504" r="7.761631667456001" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_0_3__stack1"><circle cx="116.42447501187999" cy="652.25302919232" r="7.761631667456001" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_0_4__stack1"><circle cx="523.91013755332" cy="652.25302919232" r="7.761631667456001" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_0_5__stack1"><circle cx="523.91013755332" cy="613.44487085504" r="7.761631667456001" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_0_6__stack1"><circle cx="523.91013755332" cy="574.63671251776" r="7.761631667456001" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_0_7__stack1"><circle cx="523.91013755332" cy="535.82855418048" r="7.761631667456001" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_1_0__stack1"><circle cx="504.50605838468005" cy="147.74697080768" r="7.761631667456001" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_1_1__stack1"><circle cx="504.50605838468005" cy="186.55512914495995" r="7.761631667456001" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_1_2__stack1"><circle cx="504.50605838468005" cy="225.36328748223997" r="7.761631667456001" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_1_3__stack1"><circle cx="504.50605838468005" cy="264.17144581952" r="7.761631667456001" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_1_4__stack1"><circle cx="911.99172092612" cy="264.17144581952" r="7.761631667456001" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_1_5__stack1"><circle cx="911.99172092612" cy="225.36328748223997" r="7.761631667456001" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_1_6__stack1"><circle cx="911.99172092612" cy="186.55512914495995" r="7.761631667456001" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_1_7__stack1"><circle cx="911.99172092612" cy="147.74697080768" r="7.761631667456001" fill="red" opacity="0"/></g><path class="net-label sch-net-label" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_0__stack1" d="
+    M 737.5490492000465,535.82855418048
+    L 718.1449700314065,525.3503514294143
+    L 718.1449700314065,436.0139709369958
+    L 756.9531283686865,436.0139709369958
+    L 756.9531283686865,525.3503514294143
+    Z
+  " fill="rgba(255, 255, 255, 0.6)" stroke="rgb(132, 0, 0)" stroke-width="3.8808158337280005px"/><text class="net-label-text sch-net-label-text" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_0__stack1" x="737.5490492000465" y="518.364882928704" fill="rgb(132, 0, 0)" text-anchor="start" dominant-baseline="central" font-family="sans-serif" font-variant-numeric="tabular-nums" font-size="34.927342503552px" transform="rotate(-90 737.5490492000465 518.364882928704)">XXX</text><path class="net-label sch-net-label" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_1__stack1" d="
+    M 523.91013755332,613.44487085504
+    L 534.3883403043857,594.0407916864
+    L 714.898020783854,594.0407916864
+    L 714.898020783854,632.84895002368
+    L 534.3883403043857,632.84895002368
+    Z
+  " fill="rgba(255, 255, 255, 0.6)" stroke="rgb(132, 0, 0)" stroke-width="3.8808158337280005px"/><text class="net-label-text sch-net-label-text" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_1__stack1" x="541.373808805096" y="613.44487085504" fill="rgb(132, 0, 0)" text-anchor="start" dominant-baseline="central" font-family="sans-serif" font-variant-numeric="tabular-nums" font-size="34.927342503552px" transform="">XXXXXXX</text><path class="net-label sch-net-label" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_2__stack1" d="
+    M 911.99172092612,147.74697080768
+    L 922.4699236771856,128.34289163903998
+    L 1102.979604156654,128.34289163903998
+    L 1102.979604156654,167.15104997632
+    L 922.4699236771856,167.15104997632
+    Z
+  " fill="rgba(255, 255, 255, 0.6)" stroke="rgb(132, 0, 0)" stroke-width="3.8808158337280005px"/><text class="net-label-text sch-net-label-text" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_2__stack1" x="929.455392177896" y="147.74697080768" fill="rgb(132, 0, 0)" text-anchor="start" dominant-baseline="central" font-family="sans-serif" font-variant-numeric="tabular-nums" font-size="34.927342503552px" transform="">XXXXXXX</text>
+  </g>
+</svg>