Add interaction without changing the SVG compiler

01 / EventsListen once at the SVG host

full mode is where the SVG stops being a picture and becomes a surface you can query. It carries stable attributes — data-node-id, data-node-kind, data-port-id, data-wire-source, and data-wire-target — and the right way to use them is the boring, correct way: one listener at the host, delegation for everything below it.

const host = document.querySelector('[data-schemd-host]');

function handleClick(event: Event) {
	const element = event.target instanceof Element ? event.target : null;
	const node = element?.closest<SVGGElement>('[data-node-id]');
	if (node) node.classList.toggle('is-selected');
}

host?.addEventListener('click', handleClick);
// Later: host?.removeEventListener('click', handleClick);

Keep application state outside the SVG. Recompiling the same source is deterministic, so the drawing is safe to treat as disposable — your state is the source of truth, and the DOM is only its most recent shadow.

port:A "A" at (60, 90) #blue
port:B "B" at (60, 230) #blue
xor:G1 "Parity" at (380, 160) #cyan [inputs=2 outputs=1]
port:Y "Y" at (700, 160) #emerald

A.out -> G1.in1 #blue [bezier]
B.out -> G1.in2 #blue [bezier]
G1.out -> Y.in #emerald [line marker-end=arrow]