@tscircuit/schematic-trace-solver 0.0.24 → 0.0.26

package/lib/solvers/NetLabelPlacementSolver/NetLabelPlacementSolver.ts

@@ -306,7 +306,6 @@ export class NetLabelPlacementSolver extends BaseSolver {
       graphics.lines!.push({
         points: trace.tracePath,
         strokeColor: "purple",
-        strokeWidth: 0.005,
       })
     }
 

package/lib/solvers/NetLabelPlacementSolver/SingleNetLabelPlacementSolver/SingleNetLabelPlacementSolver_visualize.ts

@@ -26,7 +26,6 @@ export function visualizeSingleNetLabelPlacementSolver(
     graphics.lines!.push({
       points: trace.tracePath,
       strokeColor: isHost ? groupStroke : groupFill,
-      strokeWidth: isHost ? 0.006 : 0.003,
       strokeDash: isHost ? undefined : "4 2",
     } as any)
   }

package/lib/solvers/NetLabelPlacementSolver/SingleNetLabelPlacementSolver/geometry.ts

@@ -1,6 +1,6 @@
 import type { FacingDirection } from "lib/utils/dir"
 
-export const NET_LABEL_HORIZONTAL_WIDTH = 0.5
+export const NET_LABEL_HORIZONTAL_WIDTH = 0.45
 export const NET_LABEL_HORIZONTAL_HEIGHT = 0.2
 
 export function getDimsForOrientation(orientation: FacingDirection) {

package/lib/solvers/SchematicTraceLinesSolver/SchematicTraceLinesSolver.ts

@@ -132,7 +132,6 @@ export class SchematicTraceLinesSolver extends BaseSolver {
     for (const { mspPairId, tracePath } of this.solvedTracePaths) {
       graphics.lines!.push({
         points: tracePath,
-        strokeWidth: 0.005,
         strokeColor: "green",
       })
     }
@@ -146,7 +145,6 @@ export class SchematicTraceLinesSolver extends BaseSolver {
         ],
         strokeColor: "red",
         strokeDash: "4 2",
-        strokeWidth: 0.004,
       })
     }
 

package/lib/solvers/SchematicTraceLinesSolver/SchematicTraceSingleLineSolver/SchematicTraceSingleLineSolver.ts

@@ -241,7 +241,6 @@ export class SchematicTraceSingleLineSolver extends BaseSolver {
         graphics.lines!.push({
           points: this.queuedCandidatePaths[0],
           strokeColor: "orange",
-          strokeWidth: boundsWidth * 0.005,
         })
       }
 

package/lib/solvers/TraceOverlapShiftSolver/TraceOverlapIssueSolver/TraceOverlapIssueSolver.ts

@@ -162,7 +162,6 @@ export class TraceOverlapIssueSolver extends BaseSolver {
         graphics.lines!.push({
           points: [segStart, segEnd],
           strokeColor: "red",
-          strokeWidth: 0.006,
         })
       }
     }
@@ -173,7 +172,6 @@ export class TraceOverlapIssueSolver extends BaseSolver {
         points: trace.tracePath,
         strokeColor: "blue",
         strokeDash: "4 2",
-        strokeWidth: 0.004,
       })
     }
 

package/lib/solvers/TraceOverlapShiftSolver/TraceOverlapShiftSolver.ts

@@ -255,7 +255,6 @@ export class TraceOverlapShiftSolver extends BaseSolver {
       graphics.lines!.push({
         points: trace.tracePath,
         strokeColor: "purple",
-        strokeWidth: 0.005,
       })
     }
 

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@tscircuit/schematic-trace-solver",
   "main": "dist/index.js",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "type": "module",
   "scripts": {
     "start": "cosmos",
-    "build": "tsup lib/index.ts --format esm --dts",
+    "build": "tsup-node lib/index.ts --format esm --dts",
     "format": "biome format --write .",
     "format:check": "biome format ."
   },
@@ -13,21 +13,20 @@
     "@biomejs/biome": "^2.2.2",
     "@react-hook/resize-observer": "^2.0.2",
     "@tscircuit/math-utils": "^0.0.19",
-    "@types/bun": "latest",
+    "@types/bun": "^1.2.21",
+    "bun-match-svg": "^0.0.13",
     "calculate-elbow": "^0.0.11",
     "connectivity-map": "^1.0.0",
     "flatbush": "^4.5.0",
     "graphics-debug": "^0.0.62",
+    "react": "^19.1.1",
     "react-cosmos": "^7.0.0",
     "react-cosmos-plugin-vite": "^7.0.0",
+    "react-dom": "^19.1.1",
     "tsup": "^8.5.0",
     "vite": "^7.1.3"
   },
   "peerDependencies": {
     "typescript": "^5"
-  },
-  "dependencies": {
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1"
   }
 }

package/site/components/DownloadDropdown.tsx

@@ -98,11 +98,11 @@ export default () => <PipelineDebugger inputProblem={inputProblem} />
 import { GenericSolverDebugger } from "../components/GenericSolverDebugger"
 import { ${solverName} } from "lib/solvers/${solverName}/${solverName}"
 
-const input = ${JSON.stringify(params, null, 2)}
+export const inputProblem = ${JSON.stringify(params, null, 2)}
 
 export default () => {
   const solver = useMemo(() => {
-    return new ${solverName}(input as any)
+    return new ${solverName}(inputProblem as any)
   }, [])
   return <GenericSolverDebugger solver={solver} />
 }
@@ -138,6 +138,8 @@ test("${solverName} should solve problem correctly", () => {
   
   const solver = new ${solverName}(input as any)
   solver.solve()
+
+  expect(solver).toMatchSolverSnapshot(import.meta.path)
   
   // Add more specific assertions based on expected output
   // expect(solver.netLabelPlacementSolver!.netLabelPlacements).toMatchInlineSnapshot()

package/site/examples/example01-basic.page.tsx

@@ -1,7 +1,7 @@
 import type { InputProblem } from "lib/types/InputProblem"
 import { PipelineDebugger } from "site/components/PipelineDebugger"
 
-const inputProblem: InputProblem = {
+export const inputProblem: InputProblem = {
   chips: [
     {
       chipId: "U1",

package/site/examples/example02.page.tsx

@@ -1,6 +1,6 @@
 import { PipelineDebugger } from "site/components/PipelineDebugger"
 import type { InputProblem } from "lib/types/InputProblem"
-const inputProblem: InputProblem = {
+export const inputProblem: InputProblem = {
   chips: [
     {
       chipId: "schematic_component_0",

package/site/examples/example03.page.tsx

@@ -1,7 +1,7 @@
 import type { InputProblem } from "lib/index"
 import { PipelineDebugger } from "site/components/PipelineDebugger"
 
-const inputProblem: InputProblem = {
+export const inputProblem: InputProblem = {
   chips: [
     {
       chipId: "schematic_component_0",

package/site/examples/example04-single-symbol.page.tsx

@@ -1,7 +1,7 @@
 import { PipelineDebugger } from "../components/PipelineDebugger"
 import type { InputProblem } from "lib/types/InputProblem"
 
-const inputProblem: InputProblem = {
+export const inputProblem: InputProblem = {
   chips: [
     {
       chipId: "schematic_component_0",

package/site/examples/example05.page.tsx

@@ -1,7 +1,7 @@
 import type { InputProblem } from "lib/index"
 import { PipelineDebugger } from "site/components/PipelineDebugger"
 
-const inputProblem: InputProblem = {
+export const inputProblem: InputProblem = {
   chips: [
     {
       chipId: "schematic_component_0",

package/site/examples/example06.page.tsx

@@ -1,7 +1,7 @@
 import { PipelineDebugger } from "site/components/PipelineDebugger"
 import type { InputProblem } from "lib/types/InputProblem"
 
-const inputProblem: InputProblem = {
+export const inputProblem: InputProblem = {
   chips: [
     {
       chipId: "schematic_component_0",

package/site/examples/example07.page.tsx

@@ -1,7 +1,7 @@
 import { PipelineDebugger } from "site/components/PipelineDebugger"
 import type { InputProblem } from "lib/types/InputProblem"
 
-const inputProblem: InputProblem = {
+export const inputProblem: InputProblem = {
   chips: [
     {
       chipId: "schematic_component_0",

package/site/examples/example08.page.tsx

@@ -1,7 +1,7 @@
 import { PipelineDebugger } from "site/components/PipelineDebugger"
 import type { InputProblem } from "lib/types/InputProblem"
 
-const inputProblem: InputProblem = {
+export const inputProblem: InputProblem = {
   chips: [
     {
       chipId: "schematic_component_0",

package/site/examples/example09.page.tsx

@@ -1,7 +1,7 @@
 import { PipelineDebugger } from "site/components/PipelineDebugger"
 import type { InputProblem } from "lib/types/InputProblem"
 
-const inputProblem: InputProblem = {
+export const inputProblem: InputProblem = {
   chips: [
     {
       chipId: "schematic_component_0",

package/site/examples/example10.page.tsx

@@ -1,7 +1,7 @@
 import { PipelineDebugger } from "site/components/PipelineDebugger"
 import type { InputProblem } from "lib/types/InputProblem"
 
-const inputProblem: InputProblem = {
+export const inputProblem: InputProblem = {
   chips: [
     {
       chipId: "schematic_component_0",

package/site/examples/example11.page.tsx

@@ -0,0 +1,119 @@
+import { PipelineDebugger } from "site/components/PipelineDebugger"
+import type { InputProblem } from "lib/types/InputProblem"
+
+const inputProblem: InputProblem = {
+  chips: [
+    {
+      chipId: "schematic_component_0",
+      center: {
+        x: -1.03,
+        y: 0.765,
+      },
+      width: 1.06,
+      height: 0.388910699999999,
+      pins: [
+        {
+          pinId: "R1.1",
+          x: -1.58,
+          y: 0.765,
+        },
+        {
+          pinId: "R1.2",
+          x: -0.48,
+          y: 0.765,
+        },
+      ],
+    },
+    {
+      chipId: "schematic_component_1",
+      center: {
+        x: 1.03,
+        y: 0.765,
+      },
+      width: 1.06,
+      height: 0.388910699999999,
+      pins: [
+        {
+          pinId: "R2.1",
+          x: 0.48,
+          y: 0.765,
+        },
+        {
+          pinId: "R2.2",
+          x: 1.58,
+          y: 0.765,
+        },
+      ],
+    },
+    {
+      chipId: "schematic_component_2",
+      center: {
+        x: -1.03,
+        y: -0.765,
+      },
+      width: 1.06,
+      height: 0.388910699999999,
+      pins: [
+        {
+          pinId: "R3.1",
+          x: -1.58,
+          y: -0.765,
+        },
+        {
+          pinId: "R3.2",
+          x: -0.48,
+          y: -0.765,
+        },
+      ],
+    },
+    {
+      chipId: "schematic_component_3",
+      center: {
+        x: 1.03,
+        y: -0.765,
+      },
+      width: 0.88,
+      height: 0.53,
+      pins: [
+        {
+          pinId: "J1.1",
+          x: 0.5800000000000001,
+          y: -0.665,
+        },
+        {
+          pinId: "J1.2",
+          x: 1.03,
+          y: -1.0150000000000001,
+        },
+        {
+          pinId: "J1.3",
+          x: 1.48,
+          y: -0.665,
+        },
+      ],
+    },
+  ],
+  directConnections: [
+    {
+      pinIds: ["R2.1", "R3.2"],
+      netId: ".R2 > .pin1 to .R3 > .pin2",
+    },
+    {
+      pinIds: ["R2.2", "R3.1"],
+      netId: ".R2 > .pin2 to .R3 > .pin1",
+    },
+    {
+      pinIds: ["J1.1", "R1.1"],
+      netId: ".J1 > .pin1 to .R1 > .pin1",
+    },
+    {
+      pinIds: ["J1.3", "R1.2"],
+      netId: ".J1 > .pin3 to .R1 > .pin2",
+    },
+  ],
+  netConnections: [],
+  availableNetLabelOrientations: {},
+  maxMspPairDistance: 5,
+}
+
+export default () => <PipelineDebugger inputProblem={inputProblem} />

package/site/examples/example12.page.tsx

@@ -0,0 +1,97 @@
+import { PipelineDebugger } from "site/components/PipelineDebugger"
+import type { InputProblem } from "lib/types/InputProblem"
+
+const inputProblem: InputProblem = {
+  chips: [
+    {
+      chipId: "schematic_component_0",
+      center: {
+        x: 0,
+        y: 0,
+      },
+      width: 1.4000000000000001,
+      height: 0.8,
+      pins: [
+        {
+          pinId: "J1.1",
+          x: 1.1,
+          y: 0.2,
+        },
+        {
+          pinId: "J1.2",
+          x: 1.1,
+          y: 0,
+        },
+        {
+          pinId: "J1.3",
+          x: 1.1,
+          y: -0.2,
+        },
+      ],
+    },
+    {
+      chipId: "schematic_component_1",
+      center: {
+        x: 1.0999999999999996,
+        y: -1.7944553499999996,
+      },
+      width: 1.06,
+      height: 0.388910699999999,
+      pins: [
+        {
+          pinId: "R1.1",
+          x: 0.5499999999999996,
+          y: -1.7944553499999996,
+        },
+        {
+          pinId: "R1.2",
+          x: 1.6499999999999997,
+          y: -1.7944553499999996,
+        },
+      ],
+    },
+    {
+      chipId: "schematic_component_2",
+      center: {
+        x: 2.86,
+        y: 0.01999999999999985,
+      },
+      width: 1.06,
+      height: 0.84,
+      pins: [
+        {
+          pinId: "C1.1",
+          x: 2.3099999999999996,
+          y: 0.01999999999999985,
+        },
+        {
+          pinId: "C1.2",
+          x: 3.41,
+          y: 0.01999999999999985,
+        },
+      ],
+    },
+  ],
+  directConnections: [],
+  netConnections: [
+    {
+      netId: "VCC",
+      pinIds: ["J1.1", "C1.1"],
+    },
+    {
+      netId: "OUT",
+      pinIds: ["J1.2", "R1.1"],
+    },
+    {
+      netId: "GND",
+      pinIds: ["J1.3", "R1.2", "C1.2"],
+    },
+  ],
+  availableNetLabelOrientations: {
+    VCC: ["y+"],
+    GND: ["y-"],
+  },
+  maxMspPairDistance: 5,
+}
+
+export default () => <PipelineDebugger inputProblem={inputProblem} />

package/tests/__snapshots__/svg.snap.svg

@@ -0,0 +1,3 @@
+<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">                                       
+   <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />                                            
+ </svg>

package/tests/examples/__snapshots__/example01.snap.svg

@@ -0,0 +1,157 @@
+<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>
+    <circle data-type="point" data-label="U1.1
+x-" data-x="-0.8" data-y="0.2" cx="422.5742574257426" cy="297.8217821782178" r="3" fill="hsl(319, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="U1.2
+x-" data-x="-0.8" data-y="0" cx="422.5742574257426" cy="320" r="3" fill="hsl(320, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="U1.3
+x-" data-x="-0.8" data-y="-0.2" cx="422.5742574257426" cy="342.1782178217822" r="3" fill="hsl(321, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="U1.4
+x+" data-x="0.8" data-y="-0.2" cx="600" cy="342.1782178217822" r="3" fill="hsl(322, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="U1.5
+x+" data-x="0.8" data-y="0" cx="600" cy="320" r="3" fill="hsl(323, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="U1.6
+x+" data-x="0.8" data-y="0.2" cx="600" cy="297.8217821782178" r="3" fill="hsl(324, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="C1.1
+y+" data-x="-2" data-y="0.5" cx="289.50495049504957" cy="264.55445544554453" r="3" fill="hsl(121, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="C1.2
+y-" data-x="-2" data-y="-0.5" cx="289.50495049504957" cy="375.44554455445547" r="3" fill="hsl(122, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="C2.1
+y+" data-x="-4" data-y="0.5" cx="67.72277227722776" cy="264.55445544554453" r="3" fill="hsl(2, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="C2.2
+y-" data-x="-4" data-y="-0.5" cx="67.72277227722776" cy="375.44554455445547" r="3" fill="hsl(3, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="" data-x="-1.4" data-y="0.7" cx="356.0396039603961" cy="242.3762376237624" r="3" fill="hsl(40, 100%, 50%, 0.9)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="" data-x="-0.8" data-y="0" cx="422.5742574257426" cy="320" r="3" fill="hsl(40, 100%, 50%, 0.9)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="" data-x="-4" data-y="0.5" cx="67.72277227722776" cy="264.55445544554453" r="3" fill="hsl(40, 100%, 50%, 0.9)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="" data-x="-1.4" data-y="-0.7" cx="356.0396039603961" cy="397.6237623762376" r="3" fill="hsl(40, 100%, 50%, 0.9)" />
+  </g>
+  <g>
+    <polyline data-points="-0.8,0.2 -2,0.5" data-type="line" data-label="" points="422.5742574257426,297.8217821782178 289.50495049504957,264.55445544554453" fill="none" stroke="hsl(190, 100%, 50%, 0.8)" stroke-width="1" />
+  </g>
+  <g>
+    <polyline data-points="-0.8,0 -4,0.5" data-type="line" data-label="" points="422.5742574257426,320 67.72277227722776,264.55445544554453" fill="none" stroke="hsl(57, 100%, 50%, 0.8)" stroke-width="1" />
+  </g>
+  <g>
+    <polyline data-points="-0.8,-0.2 -4,-0.5" data-type="line" data-label="" points="422.5742574257426,342.1782178217822 67.72277227722776,375.44554455445547" fill="none" stroke="hsl(157, 100%, 50%, 0.8)" stroke-width="1" stroke-dasharray="4 2" />
+  </g>
+  <g>
+    <polyline data-points="-0.8,-0.2 -2,-0.5" data-type="line" data-label="" points="422.5742574257426,342.1782178217822 289.50495049504957,375.44554455445547" fill="none" stroke="hsl(157, 100%, 50%, 0.8)" stroke-width="1" stroke-dasharray="4 2" />
+  </g>
+  <g>
+    <polyline data-points="-4,-0.5 -2,-0.5" data-type="line" data-label="" points="67.72277227722776,375.44554455445547 289.50495049504957,375.44554455445547" fill="none" stroke="hsl(157, 100%, 50%, 0.8)" stroke-width="1" stroke-dasharray="4 2" />
+  </g>
+  <g>
+    <polyline data-points="-0.8,0.20000000000000018 -1.4,0.20000000000000018 -1.4,0.7 -2,0.7 -2,0.5" data-type="line" data-label="" points="422.5742574257426,297.8217821782178 356.0396039603961,297.8217821782178 356.0396039603961,242.3762376237624 289.50495049504957,242.3762376237624 289.50495049504957,264.55445544554453" fill="none" stroke="purple" stroke-width="1" />
+  </g>
+  <g>
+    <polyline data-points="-0.8,-0.20000000000000018 -1.4,-0.20000000000000018 -1.4,-0.7 -2,-0.7 -2,-0.5" data-type="line" data-label="" points="422.5742574257426,342.1782178217822 356.0396039603961,342.1782178217822 356.0396039603961,397.6237623762376 289.50495049504957,397.6237623762376 289.50495049504957,375.44554455445547" fill="none" stroke="purple" stroke-width="1" />
+  </g>
+  <g>
+    <polyline data-points="-4,-0.5 -4,-0.7000000000000002 -2,-0.7000000000000002 -2,-0.5" data-type="line" data-label="" points="67.72277227722776,375.44554455445547 67.72277227722776,397.62376237623766 289.50495049504957,397.62376237623766 289.50495049504957,375.44554455445547" fill="none" stroke="purple" stroke-width="1" />
+  </g>
+  <g>
+    <rect data-type="rect" data-label="U1" data-x="0" data-y="0" x="422.5742574257426" y="286.73267326732673" width="177.4257425742574" height="66.53465346534654" fill="hsl(164, 100%, 50%, 0.8)" stroke="black" stroke-width="0.009017857142857143" />
+  </g>
+  <g>
+    <rect data-type="rect" data-label="C1" data-x="-2" data-y="0" x="261.7821782178218" y="264.55445544554453" width="55.445544554455466" height="110.89108910891093" fill="hsl(326, 100%, 50%, 0.8)" stroke="black" stroke-width="0.009017857142857143" />
+  </g>
+  <g>
+    <rect data-type="rect" data-label="C2" data-x="-4" data-y="0" x="40.00000000000006" y="264.55445544554453" width="55.44554455445541" height="110.89108910891093" fill="hsl(327, 100%, 50%, 0.8)" stroke="black" stroke-width="0.009017857142857143" />
+  </g>
+  <g>
+    <rect data-type="rect" data-label="" data-x="-1.4" data-y="0.8999999999999999" x="344.950495049505" y="198.01980198019805" width="22.178217821782198" height="44.35643564356434" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.009017857142857143" />
+  </g>
+  <g>
+    <rect data-type="rect" data-label="" data-x="-1.001" data-y="0" x="378.10693069306933" y="308.91089108910893" width="44.356435643564396" height="22.17821782178214" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.009017857142857143" />
+  </g>
+  <g>
+    <rect data-type="rect" data-label="" data-x="-4" data-y="0.701" x="56.63366336633669" y="220.08712871287128" width="22.17821782178214" height="44.356435643564396" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.009017857142857143" />
+  </g>
+  <g>
+    <rect data-type="rect" data-label="" data-x="-1.4" data-y="-0.8999999999999999" x="344.950495049505" y="397.6237623762376" width="22.178217821782198" height="44.35643564356434" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.009017857142857143" />
+  </g>
+  <g id="crosshair" style="display: none">
+    <line id="crosshair-h" y1="0" y2="640" stroke="#666" stroke-width="0.5" />
+    <line id="crosshair-v" x1="0" x2="640" stroke="#666" stroke-width="0.5" /><text id="coordinates" font-family="monospace" font-size="12" fill="#666"></text>
+  </g>
+  <script>
+    <![CDATA[
+    document.currentScript.parentElement.addEventListener('mousemove', (e) => {
+      const svg = e.currentTarget;
+      const rect = svg.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      const crosshair = svg.getElementById('crosshair');
+      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');
+      h.setAttribute('y1', y);
+      h.setAttribute('y2', y);
+      v.setAttribute('x1', x);
+      v.setAttribute('x2', x);
+      v.setAttribute('y1', '0');
+      v.setAttribute('y2', '640');
+
+      // Calculate real coordinates using inverse transformation
+      const matrix = {
+        "a": 110.89108910891089,
+        "c": 0,
+        "e": 511.2871287128713,
+        "b": 0,
+        "d": -110.89108910891089,
+        "f": 320
+      };
+      // Manually invert and apply the affine transform
+      // Since we only use translate and scale, we can directly compute:
+      // x' = (x - tx) / sx
+      // y' = (y - ty) / sy
+      const sx = matrix.a;
+      const sy = matrix.d;
+      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());
+    });
+    document.currentScript.parentElement.addEventListener('mouseleave', () => {
+      document.currentScript.parentElement.getElementById('crosshair').style.display = 'none';
+    });
+    ]]>
+  </script>
+</svg>