@schemd/core 0.3.0 → 0.3.2

package/dist/renderer.js

@@ -1,14 +1,16 @@
-import { classicalGateHeight, componentTextAnchors, distributedCoordinate, enumerateComponentPorts, PORT_HOTSPOT_RADIUS, quantumGateDimensions, routeConnections, validateDocumentGeometry } from './layout.js';
+import { classicalGateHeight, componentTextAnchors, connectionLabelPoint, distributedCoordinate, enumerateComponentPorts, formatNumber as svgNumber, isClassicalGate, isDigitalComponent, isQuantumSpecial, isUmlComponent, PORT_HOTSPOT_RADIUS, quantumGateDimensions, quantumTrackCoordinate, quantumTrackSpan, routeConnections, validateDocumentGeometry } from './layout.js';
 import { MAX_SCHEMATIC_SVG_OUTPUT_BYTES, utf8ByteLength } from './limits.js';
 import { assertParsedSchematicDocument } from './parser.js';
 import { parsedSchematicRoutes } from './route-cache.js';
-import { CLASSICAL_GATE_KINDS, DIGITAL_COMPONENT_KINDS, QUANTUM_GATE_KINDS, QUANTUM_SPECIAL_KINDS, SCHEMD_OUTPUT_MODES, SCHEMD_SEMANTIC_HOOKS, UML_COMPONENT_KINDS, SchematicSyntaxError } from './types.js';
-import { mathLabelTextWidth, renderMathLabelTspans } from './math-label.js';
+import { QUANTUM_GATE_KINDS, SCHEMD_OUTPUT_MODES, SCHEMD_SEMANTIC_HOOKS, SchematicSyntaxError } from './types.js';
+import { mathLabelText, mathLabelTextWidth, renderMathLabelTspans } from './math-label.js';
 import { escapeXml } from './xml.js';
 export const MAX_SVG_OUTPUT_BYTES = MAX_SCHEMATIC_SVG_OUTPUT_BYTES;
-const STATIC_SVG_STYLES = '.schematic-token{fill:none;stroke:var(--schematic-vector,var(--schematic-vector-fallback,currentColor));stroke-linecap:round;stroke-linejoin:round;stroke-width:var(--schematic-stroke-width,1.65);vector-effect:non-scaling-stroke}.schematic-node-fill{fill:var(--schematic-vector,var(--schematic-vector-fallback,currentColor))}.schematic-designator,.schematic-label,.schematic-gate-symbol,.schematic-quantum-detail,.schematic-pin-label,.schematic-uml-text,.schematic-connection-label{fill:currentColor}.schematic-uml-row{font-size:12px}.schematic-uml-stereotype{font-size:11px}.schematic-connection-label{font-size:11px;paint-order:stroke;stroke:var(--schematic-surface,#fff);stroke-width:4;stroke-linejoin:round}.schematic-surface{fill:var(--schematic-surface,transparent)}.schematic-grid-line{fill:none;stroke:var(--schematic-grid,currentColor);stroke-width:1;opacity:.12;vector-effect:non-scaling-stroke}';
+const STATIC_SVG_STYLES = '.schematic-token{fill:none;stroke:var(--schematic-vector,var(--schematic-vector-fallback,currentColor));stroke-linecap:round;stroke-linejoin:round;stroke-width:var(--schematic-stroke-width,1.65);vector-effect:non-scaling-stroke}.schematic-marker-carrier{stroke-width:0!important}.schematic-node-fill{fill:var(--schematic-vector,var(--schematic-vector-fallback,currentColor))}.schematic-designator,.schematic-label,.schematic-gate-symbol,.schematic-quantum-detail,.schematic-pin-label,.schematic-uml-text,.schematic-connection-label{fill:currentColor}.schematic-uml-row{font-size:12px}.schematic-uml-stereotype{font-size:11px}.schematic-connection-label{font-size:11px;paint-order:stroke;stroke:var(--schematic-surface,#fff);stroke-width:4;stroke-linejoin:round}.schematic-surface{fill:var(--schematic-surface,transparent)}.schematic-grid-line{fill:none;stroke:var(--schematic-grid,currentColor);stroke-width:1;opacity:.12;vector-effect:non-scaling-stroke}';
 const HOOK_SVG_STYLES = '.schematic-port-hotspot{fill:transparent!important;stroke:transparent!important;stroke-width:8;vector-effect:non-scaling-stroke;pointer-events:all;outline:none}.schematic-port-hotspot:focus-visible{fill:var(--schematic-vector,var(--schematic-vector-fallback,currentColor))!important;fill-opacity:.22!important;stroke:var(--schematic-vector,var(--schematic-vector-fallback,currentColor))!important;stroke-width:2}';
 const INTERACTIVE_SVG_STYLES = '.schematic-component,.schematic-wire{outline:none;transition:opacity .2s ease,filter .2s ease}.schematic-component .schematic-token,.schematic-wire .schematic-token{transition:stroke .2s ease,fill .2s ease,color .2s ease,opacity .2s ease,stroke-width .2s ease}.schematic-glow-layer{opacity:0;pointer-events:none;transition:opacity .2s ease}.schematic-component:hover>.schematic-glow-layer,.schematic-component:focus>.schematic-glow-layer,.schematic-component:focus-within>.schematic-glow-layer,.schematic-component.is-hovered>.schematic-glow-layer,.schematic-component.is-active>.schematic-glow-layer,.schematic-component.is-selected>.schematic-glow-layer,.schematic-wire:hover>.schematic-glow-layer,.schematic-wire:focus>.schematic-glow-layer,.schematic-wire.is-hovered>.schematic-glow-layer,.schematic-wire.is-active>.schematic-glow-layer,.schematic-wire.is-selected>.schematic-glow-layer{opacity:1}.schematic-component.is-degraded,.schematic-wire.is-degraded{opacity:.45}.schematic-component.is-degraded>.schematic-glow-layer,.schematic-wire.is-degraded>.schematic-glow-layer{opacity:0}.schematic-component:hover .schematic-token,.schematic-component:focus .schematic-token,.schematic-component:focus-within .schematic-token,.schematic-component.is-hovered .schematic-token,.schematic-component.is-active .schematic-token,.schematic-component.is-selected .schematic-token,.schematic-wire:hover .schematic-token,.schematic-wire:focus .schematic-token,.schematic-wire.is-hovered .schematic-token,.schematic-wire.is-active .schematic-token,.schematic-wire.is-selected .schematic-token{stroke-width:var(--schematic-interactive-stroke-width,2.25)}.schematic-port-hotspot{fill:var(--schematic-vector,var(--schematic-vector-fallback,currentColor))!important;fill-opacity:0;transition:fill-opacity .2s ease,opacity .2s ease}.schematic-port-hotspot:hover,.schematic-port-hotspot:focus,.schematic-port-hotspot.is-hovered,.schematic-port-hotspot.is-active,.schematic-port-hotspot.is-selected{fill-opacity:.2}.schematic-port-hotspot.is-degraded{opacity:.45}@media(prefers-reduced-motion:reduce){.schematic-component,.schematic-wire,.schematic-token,.schematic-glow-layer,.schematic-port-hotspot{transition:none}}';
+const TEXT_PAINT = 'fill="currentColor" stroke="none"';
+const LENGTH_FIT = 'lengthAdjust="spacingAndGlyphs"';
 const NODE_HOOK = 1;
 const PORT_HOOK = 2;
 const WIRE_HOOK = 4;
@@ -23,10 +25,11 @@ export class BoundedSvgWriter {
     #chunks = [];
     #bytes = 0;
     append(chunk) {
-        this.#bytes += utf8ByteLength(chunk);
-        if (this.#bytes > MAX_SCHEMATIC_SVG_OUTPUT_BYTES) {
+        const nextBytes = this.#bytes + utf8ByteLength(chunk);
+        if (nextBytes > MAX_SCHEMATIC_SVG_OUTPUT_BYTES) {
             throw new SchematicSyntaxError(`Compiled SVG exceeds the ${MAX_SCHEMATIC_SVG_OUTPUT_BYTES.toLocaleString('en-US')} byte output limit.`);
         }
+        this.#bytes = nextBytes;
         this.#chunks.push(chunk);
     }
     finish() {
@@ -88,9 +91,6 @@ function normalizeCompileOptions(value) {
         ? { bounds: { width, height }, title, mode: normalizedMode, semanticHookMask }
         : { bounds: { width, height }, title, idPrefix, mode: normalizedMode, semanticHookMask };
 }
-function svgNumber(value) {
-    return String(Number(value.toFixed(3)));
-}
 function fittedTextLength(value, maximum, advance) {
     return Math.max(1, Math.min(Math.ceil(mathLabelTextWidth(value, advance)), maximum));
 }
@@ -102,15 +102,6 @@ function stableHash(value) {
     }
     return (hash >>> 0).toString(36);
 }
-function isClassicalGate(component) {
-    return CLASSICAL_GATE_KINDS.includes(component.kind);
-}
-function isDigitalComponent(component) {
-    return DIGITAL_COMPONENT_KINDS.includes(component.kind);
-}
-function isQuantumSpecial(component) {
-    return QUANTUM_SPECIAL_KINDS.includes(component.kind);
-}
 function isQuantumGate(component) {
     return QUANTUM_GATE_KINDS.includes(component.kind);
 }
@@ -128,9 +119,6 @@ function componentRotation(component) {
             return 0;
     }
 }
-function isUmlComponent(component) {
-    return UML_COMPONENT_KINDS.includes(component.kind);
-}
 function colorAttributes(color, extraClass = '') {
     const suffix = extraClass === '' ? '' : ` ${extraClass}`;
     const fill = extraClass.split(' ').includes('schematic-node-fill') ? ' fill="currentColor"' : '';
@@ -212,7 +200,7 @@ function iecGate(component, paint) {
         xnor: '=1',
         not: '1'
     };
-    return `<rect ${paint} x="-32" y="${-height / 2}" width="64" height="${height}" rx="2" /><text class="schematic-gate-symbol" fill="currentColor" stroke="none" x="0" y="4" text-anchor="middle" font-size="14">${symbol[component.kind]}</text>${inversionBubbles(component, paint)}${gateStubs(component, paint)}`;
+    return `<rect ${paint} x="-32" y="${-height / 2}" width="64" height="${height}" rx="2" /><text class="schematic-gate-symbol" ${TEXT_PAINT} x="0" y="4" text-anchor="middle" font-size="14">${symbol[component.kind]}</text>${inversionBubbles(component, paint)}${gateStubs(component, paint)}`;
 }
 function ieeeGate(component, paint) {
     const height = classicalGateHeight(component);
@@ -242,7 +230,7 @@ function quantumText(component) {
     const { bodyWidth } = quantumGateDimensions(component);
     const start = -((rows.length - 1) * 15) / 2 + 4;
     return rows
-        .map((value, index) => `<text class="${index === 0 ? 'schematic-gate-symbol' : 'schematic-quantum-detail'}" fill="currentColor" stroke="none" x="0" y="${start + index * 15}" text-anchor="middle" font-size="${index === 0 ? 14 : 10}" textLength="${fittedTextLength(value, bodyWidth - 12, index === 0 ? 7 : 5)}" lengthAdjust="spacingAndGlyphs">${renderMathLabelTspans(value)}</text>`)
+        .map((value, index) => `<text class="${index === 0 ? 'schematic-gate-symbol' : 'schematic-quantum-detail'}" ${TEXT_PAINT} x="0" y="${start + index * 15}" text-anchor="middle" font-size="${index === 0 ? 14 : 10}" textLength="${fittedTextLength(value, bodyWidth - 12, index === 0 ? 7 : 5)}" ${LENGTH_FIT}>${renderMathLabelTspans(value)}</text>`)
         .join('');
 }
 function quantumGateShell(component, paint) {
@@ -319,17 +307,17 @@ function icPinMarkup(component, side, paint) {
         const horizontalTextLength = fittedTextLength(pin, Math.max(8, component.bodyWidth / 2 - 10), 4);
         const verticalTextLength = fittedTextLength(pin, Math.max(8, component.bodyHeight / 2 - 10), 4);
         if (side === 'left') {
-            return `<path ${paint} d="M ${x} ${y} H ${-component.bodyWidth / 2}" /><text class="schematic-pin-label" fill="currentColor" stroke="none" x="${-component.bodyWidth / 2 + 5}" y="${y + 3}" text-anchor="start" font-size="10" textLength="${horizontalTextLength}" lengthAdjust="spacingAndGlyphs">${escapeXml(pin)}</text>`;
+            return `<path ${paint} d="M ${x} ${y} H ${-component.bodyWidth / 2}" /><text class="schematic-pin-label" ${TEXT_PAINT} x="${-component.bodyWidth / 2 + 5}" y="${y + 3}" text-anchor="start" font-size="10" textLength="${horizontalTextLength}" ${LENGTH_FIT}>${escapeXml(pin)}</text>`;
         }
         if (side === 'right') {
-            return `<path ${paint} d="M ${component.bodyWidth / 2} ${y} H ${x}" /><text class="schematic-pin-label" fill="currentColor" stroke="none" x="${component.bodyWidth / 2 - 5}" y="${y + 3}" text-anchor="end" font-size="10" textLength="${horizontalTextLength}" lengthAdjust="spacingAndGlyphs">${escapeXml(pin)}</text>`;
+            return `<path ${paint} d="M ${component.bodyWidth / 2} ${y} H ${x}" /><text class="schematic-pin-label" ${TEXT_PAINT} x="${component.bodyWidth / 2 - 5}" y="${y + 3}" text-anchor="end" font-size="10" textLength="${horizontalTextLength}" ${LENGTH_FIT}>${escapeXml(pin)}</text>`;
         }
         if (side === 'top') {
             const labelY = -component.bodyHeight / 2 + 5;
-            return `<path ${paint} d="M ${x} ${y} V ${-component.bodyHeight / 2}" /><text class="schematic-pin-label" fill="currentColor" stroke="none" x="${x}" y="${labelY}" text-anchor="start" font-size="10" textLength="${verticalTextLength}" lengthAdjust="spacingAndGlyphs" transform="rotate(90 ${x} ${labelY})">${escapeXml(pin)}</text>`;
+            return `<path ${paint} d="M ${x} ${y} V ${-component.bodyHeight / 2}" /><text class="schematic-pin-label" ${TEXT_PAINT} x="${x}" y="${labelY}" text-anchor="start" font-size="10" textLength="${verticalTextLength}" ${LENGTH_FIT} transform="rotate(90 ${x} ${labelY})">${escapeXml(pin)}</text>`;
         }
         const labelY = component.bodyHeight / 2 - 5;
-        return `<path ${paint} d="M ${x} ${component.bodyHeight / 2} V ${y}" /><text class="schematic-pin-label" fill="currentColor" stroke="none" x="${x}" y="${labelY}" text-anchor="start" font-size="10" textLength="${verticalTextLength}" lengthAdjust="spacingAndGlyphs" transform="rotate(-90 ${x} ${labelY})">${escapeXml(pin)}</text>`;
+        return `<path ${paint} d="M ${x} ${component.bodyHeight / 2} V ${y}" /><text class="schematic-pin-label" ${TEXT_PAINT} x="${x}" y="${labelY}" text-anchor="start" font-size="10" textLength="${verticalTextLength}" ${LENGTH_FIT} transform="rotate(-90 ${x} ${labelY})">${escapeXml(pin)}</text>`;
     })
         .join('');
 }
@@ -337,11 +325,11 @@ function integratedCircuitShape(component, paint) {
     const left = -component.bodyWidth / 2;
     const top = -component.bodyHeight / 2;
     const rotation = componentRotation(component);
-    const label = `<text class="schematic-gate-symbol" fill="currentColor" stroke="none" x="0" y="4" text-anchor="middle" font-size="12" textLength="${fittedTextLength(component.label, component.bodyWidth - 12, 7)}" lengthAdjust="spacingAndGlyphs">${renderMathLabelTspans(component.label)}</text>`;
+    const label = `<text class="schematic-gate-symbol" ${TEXT_PAINT} x="0" y="4" text-anchor="middle" font-size="12" textLength="${fittedTextLength(component.label, component.bodyWidth - 12, 7)}" ${LENGTH_FIT}>${renderMathLabelTspans(component.label)}</text>`;
     return `<rect ${paint} x="${left}" y="${top}" width="${component.bodyWidth}" height="${component.bodyHeight}" rx="3" />${icPinMarkup(component, 'left', paint)}${icPinMarkup(component, 'right', paint)}${icPinMarkup(component, 'top', paint)}${icPinMarkup(component, 'bottom', paint)}${rotation === 0 ? label : `<g transform="rotate(${-rotation})">${label}</g>`}`;
 }
 function umlRow(value, x, y) {
-    return `<text class="schematic-uml-text schematic-uml-row" fill="currentColor" stroke="none" x="${svgNumber(x)}" y="${svgNumber(y)}" font-size="12">${renderMathLabelTspans(value)}</text>`;
+    return `<text class="schematic-uml-text schematic-uml-row" ${TEXT_PAINT} x="${svgNumber(x)}" y="${svgNumber(y)}" font-size="12">${renderMathLabelTspans(value)}</text>`;
 }
 function umlClassShape(component, paint) {
     const left = -component.bodyWidth / 2;
@@ -352,7 +340,7 @@ function umlClassShape(component, paint) {
     const operationSeparator = attributeSeparator + attributeHeight;
     const stereotype = component.stereotype === undefined
         ? ''
-        : `<text class="schematic-uml-text schematic-uml-stereotype" fill="currentColor" stroke="none" x="0" y="${svgNumber(top + 13)}" text-anchor="middle" font-size="11">«${renderMathLabelTspans(component.stereotype)}»</text>`;
+        : `<text class="schematic-uml-text schematic-uml-stereotype" ${TEXT_PAINT} x="0" y="${svgNumber(top + 13)}" text-anchor="middle" font-size="11">«${renderMathLabelTspans(component.stereotype)}»</text>`;
     const nameY = top + (component.stereotype === undefined ? 23 : 32);
     const attributes = component.attributes
         .map((row, index) => umlRow(row, left + 8, attributeSeparator + 17 + index * 16))
@@ -360,7 +348,7 @@ function umlClassShape(component, paint) {
     const operations = component.operations
         .map((row, index) => umlRow(row, left + 8, operationSeparator + 17 + index * 16))
         .join('');
-    return `<rect ${paint} x="${svgNumber(left)}" y="${svgNumber(top)}" width="${svgNumber(component.bodyWidth)}" height="${svgNumber(component.bodyHeight)}" rx="2" /><path ${paint} d="M ${svgNumber(left)} ${svgNumber(attributeSeparator)} H ${svgNumber(-left)} M ${svgNumber(left)} ${svgNumber(operationSeparator)} H ${svgNumber(-left)}" />${stereotype}<text class="schematic-uml-text" fill="currentColor" stroke="none" x="0" y="${svgNumber(nameY)}" text-anchor="middle" font-size="13" font-weight="600">${renderMathLabelTspans(component.label)}</text>${attributes}${operations}`;
+    return `<rect ${paint} x="${svgNumber(left)}" y="${svgNumber(top)}" width="${svgNumber(component.bodyWidth)}" height="${svgNumber(component.bodyHeight)}" rx="2" /><path ${paint} d="M ${svgNumber(left)} ${svgNumber(attributeSeparator)} H ${svgNumber(-left)} M ${svgNumber(left)} ${svgNumber(operationSeparator)} H ${svgNumber(-left)}" />${stereotype}<text class="schematic-uml-text" ${TEXT_PAINT} x="0" y="${svgNumber(nameY)}" text-anchor="middle" font-size="13" font-weight="600">${renderMathLabelTspans(component.label)}</text>${attributes}${operations}`;
 }
 function umlStateShape(component, paint) {
     const left = -component.bodyWidth / 2;
@@ -369,7 +357,7 @@ function umlStateShape(component, paint) {
     const rows = component.details
         .map((row, index) => umlRow(row, left + 8, separator + 17 + index * 16))
         .join('');
-    return `<rect ${paint} x="${svgNumber(left)}" y="${svgNumber(top)}" width="${svgNumber(component.bodyWidth)}" height="${svgNumber(component.bodyHeight)}" rx="10" />${component.details.length === 0 ? '' : `<path ${paint} d="M ${svgNumber(left)} ${svgNumber(separator)} H ${svgNumber(-left)}" />`}<text class="schematic-uml-text" fill="currentColor" stroke="none" x="0" y="${svgNumber(top + 21)}" text-anchor="middle" font-size="13" font-weight="600">${renderMathLabelTspans(component.label)}</text>${rows}`;
+    return `<rect ${paint} x="${svgNumber(left)}" y="${svgNumber(top)}" width="${svgNumber(component.bodyWidth)}" height="${svgNumber(component.bodyHeight)}" rx="10" />${component.details.length === 0 ? '' : `<path ${paint} d="M ${svgNumber(left)} ${svgNumber(separator)} H ${svgNumber(-left)}" />`}<text class="schematic-uml-text" ${TEXT_PAINT} x="0" y="${svgNumber(top + 21)}" text-anchor="middle" font-size="13" font-weight="600">${renderMathLabelTspans(component.label)}</text>${rows}`;
 }
 function umlComponentShape(component, paint, nodePaint) {
     if (component.kind === 'class' || component.kind === 'interface' ||
@@ -379,24 +367,24 @@ function umlComponentShape(component, paint, nodePaint) {
         return umlStateShape(component, paint);
     switch (component.kind) {
         case 'actor':
-            return `<circle ${paint} cx="0" cy="-28" r="9" /><path ${paint} d="M 0 -19 V 12 M -20 -5 H 20 M 0 12 L -17 37 M 0 12 L 17 37" /><text class="schematic-uml-text" fill="currentColor" stroke="none" x="0" y="49" text-anchor="middle" font-size="12">${renderMathLabelTspans(component.label)}</text>`;
+            return `<circle ${paint} cx="0" cy="-28" r="9" /><path ${paint} d="M 0 -19 V 12 M -20 -5 H 20 M 0 12 L -17 37 M 0 12 L 17 37" /><text class="schematic-uml-text" ${TEXT_PAINT} x="0" y="49" text-anchor="middle" font-size="12">${renderMathLabelTspans(component.label)}</text>`;
         case 'usecase':
-            return `<ellipse ${paint} cx="0" cy="0" rx="${svgNumber(component.bodyWidth / 2)}" ry="${svgNumber(component.bodyHeight / 2)}" /><text class="schematic-uml-text" fill="currentColor" stroke="none" x="0" y="4" text-anchor="middle" font-size="13">${renderMathLabelTspans(component.label)}</text>`;
+            return `<ellipse ${paint} cx="0" cy="0" rx="${svgNumber(component.bodyWidth / 2)}" ry="${svgNumber(component.bodyHeight / 2)}" /><text class="schematic-uml-text" ${TEXT_PAINT} x="0" y="4" text-anchor="middle" font-size="13">${renderMathLabelTspans(component.label)}</text>`;
         case 'lifeline': {
             const top = -component.bodyHeight / 2;
             const left = -component.bodyWidth / 2;
-            return `<rect ${paint} x="${svgNumber(left)}" y="${svgNumber(top)}" width="${svgNumber(component.bodyWidth)}" height="32" rx="2" /><text class="schematic-uml-text" fill="currentColor" stroke="none" x="0" y="${svgNumber(top + 21)}" text-anchor="middle" font-size="12">${renderMathLabelTspans(component.label)}</text><path ${paint} stroke-dasharray="6 5" d="M 0 ${svgNumber(top + 32)} V ${svgNumber(component.bodyHeight / 2)}" />`;
+            return `<rect ${paint} x="${svgNumber(left)}" y="${svgNumber(top)}" width="${svgNumber(component.bodyWidth)}" height="32" rx="2" /><text class="schematic-uml-text" ${TEXT_PAINT} x="0" y="${svgNumber(top + 21)}" text-anchor="middle" font-size="12">${renderMathLabelTspans(component.label)}</text><path ${paint} stroke-dasharray="6 5" d="M 0 ${svgNumber(top + 32)} V ${svgNumber(component.bodyHeight / 2)}" />`;
         }
         case 'note': {
             const left = -component.bodyWidth / 2;
             const top = -component.bodyHeight / 2;
             const right = component.bodyWidth / 2;
-            return `<path ${paint} d="M ${svgNumber(left)} ${svgNumber(top)} H ${svgNumber(right - 14)} L ${svgNumber(right)} ${svgNumber(top + 14)} V ${svgNumber(-top)} H ${svgNumber(left)} Z M ${svgNumber(right - 14)} ${svgNumber(top)} V ${svgNumber(top + 14)} H ${svgNumber(right)}" /><text class="schematic-uml-text" fill="currentColor" stroke="none" x="0" y="4" text-anchor="middle" font-size="12">${renderMathLabelTspans(component.label)}</text>`;
+            return `<path ${paint} d="M ${svgNumber(left)} ${svgNumber(top)} H ${svgNumber(right - 14)} L ${svgNumber(right)} ${svgNumber(top + 14)} V ${svgNumber(-top)} H ${svgNumber(left)} Z M ${svgNumber(right - 14)} ${svgNumber(top)} V ${svgNumber(top + 14)} H ${svgNumber(right)}" /><text class="schematic-uml-text" ${TEXT_PAINT} x="0" y="4" text-anchor="middle" font-size="12">${renderMathLabelTspans(component.label)}</text>`;
         }
         case 'package': {
             const left = -component.bodyWidth / 2;
             const top = -component.bodyHeight / 2;
-            return `<path ${paint} d="M ${svgNumber(left)} ${svgNumber(top + 12)} V ${svgNumber(-top)} H ${svgNumber(-left)} V ${svgNumber(top)} H ${svgNumber(left + Math.min(54, component.bodyWidth / 2))} L ${svgNumber(left + Math.min(64, component.bodyWidth / 2 + 10))} ${svgNumber(top + 12)} Z" /><text class="schematic-uml-text" fill="currentColor" stroke="none" x="0" y="4" text-anchor="middle" font-size="13">${renderMathLabelTspans(component.label)}</text>`;
+            return `<path ${paint} d="M ${svgNumber(left)} ${svgNumber(top + 12)} V ${svgNumber(-top)} H ${svgNumber(-left)} V ${svgNumber(top)} H ${svgNumber(left + Math.min(54, component.bodyWidth / 2))} L ${svgNumber(left + Math.min(64, component.bodyWidth / 2 + 10))} ${svgNumber(top + 12)} Z" /><text class="schematic-uml-text" ${TEXT_PAINT} x="0" y="4" text-anchor="middle" font-size="13">${renderMathLabelTspans(component.label)}</text>`;
         }
         case 'component':
         case 'artifact':
@@ -418,7 +406,7 @@ function umlComponentShape(component, paint, nodePaint) {
             if (component.kind === 'activation')
                 return `<rect ${paint} x="${svgNumber(left)}" y="${svgNumber(top)}" width="${svgNumber(component.bodyWidth)}" height="${svgNumber(component.bodyHeight)}" />`;
             if (component.kind === 'fragment' || component.kind === 'interaction') {
-                return `<rect ${paint} x="${svgNumber(left)}" y="${svgNumber(top)}" width="${svgNumber(component.bodyWidth)}" height="${svgNumber(component.bodyHeight)}" /><path ${paint} d="M ${svgNumber(left)} ${svgNumber(top + 20)} H ${svgNumber(left + 58)} L ${svgNumber(left + 68)} ${svgNumber(top + 10)} V ${svgNumber(top)}" /><text class="schematic-uml-text" fill="currentColor" stroke="none" x="${svgNumber(left + 6)}" y="${svgNumber(top + 14)}" font-size="11">${component.kind === 'interaction' ? 'ref' : 'alt'}</text><text class="schematic-uml-text" fill="currentColor" stroke="none" x="0" y="4" text-anchor="middle" font-size="12">${renderMathLabelTspans(component.label)}</text>`;
+                return `<rect ${paint} x="${svgNumber(left)}" y="${svgNumber(top)}" width="${svgNumber(component.bodyWidth)}" height="${svgNumber(component.bodyHeight)}" /><path ${paint} d="M ${svgNumber(left)} ${svgNumber(top + 20)} H ${svgNumber(left + 58)} L ${svgNumber(left + 68)} ${svgNumber(top + 10)} V ${svgNumber(top)}" /><text class="schematic-uml-text" ${TEXT_PAINT} x="${svgNumber(left + 6)}" y="${svgNumber(top + 14)}" font-size="11">${component.kind === 'interaction' ? 'ref' : 'alt'}</text><text class="schematic-uml-text" ${TEXT_PAINT} x="0" y="4" text-anchor="middle" font-size="12">${renderMathLabelTspans(component.label)}</text>`;
             }
             const rx = component.kind === 'action' ? 10 : 1;
             const dash = component.kind === 'region' ? ' stroke-dasharray="6 4"' : '';
@@ -429,7 +417,7 @@ function umlComponentShape(component, paint, nodePaint) {
                     : component.kind === 'node' || component.kind === 'device' || component.kind === 'execution'
                         ? `<path ${paint} d="M ${svgNumber(left)} ${svgNumber(top + 10)} l 12 -10 h ${svgNumber(component.bodyWidth)} l -12 10 M ${svgNumber(right)} ${svgNumber(top)} v ${svgNumber(component.bodyHeight - 10)} l -12 10" />`
                         : component.kind === 'partition' ? `<path ${paint} d="M ${svgNumber(left + 28)} ${svgNumber(top)} V ${svgNumber(bottom)}" />` : '';
-            return `<rect ${paint}${dash} x="${svgNumber(left)}" y="${svgNumber(top)}" width="${svgNumber(component.bodyWidth)}" height="${svgNumber(component.bodyHeight)}" rx="${rx}" />${icon}<text class="schematic-uml-text" fill="currentColor" stroke="none" x="0" y="4" text-anchor="middle" font-size="12">${renderMathLabelTspans(component.label)}</text>`;
+            return `<rect ${paint}${dash} x="${svgNumber(left)}" y="${svgNumber(top)}" width="${svgNumber(component.bodyWidth)}" height="${svgNumber(component.bodyHeight)}" rx="${rx}" />${icon}<text class="schematic-uml-text" ${TEXT_PAINT} x="0" y="4" text-anchor="middle" font-size="12">${renderMathLabelTspans(component.label)}</text>`;
         }
         case 'provided-interface':
             return `<circle ${paint} cx="0" cy="0" r="10" />`;
@@ -461,7 +449,7 @@ function umlComponentShape(component, paint, nodePaint) {
         case 'state-junction':
             return `<circle ${nodePaint} cx="0" cy="0" r="7" />`;
         case 'history':
-            return `<circle ${paint} cx="0" cy="0" r="11" /><text class="schematic-uml-text" fill="currentColor" stroke="none" x="0" y="4" text-anchor="middle" font-size="11">H${component.variant === 'deep' ? '*' : ''}</text>`;
+            return `<circle ${paint} cx="0" cy="0" r="11" /><text class="schematic-uml-text" ${TEXT_PAINT} x="0" y="4" text-anchor="middle" font-size="11">H${component.variant === 'deep' ? '*' : ''}</text>`;
         case 'entry':
         case 'exit':
             return `<circle ${paint} cx="0" cy="0" r="10" />${component.kind === 'exit' ? `<path ${paint} d="M -6 -6 L 6 6 M 6 -6 L -6 6" />` : ''}`;
@@ -560,14 +548,14 @@ function quantumSpecialShape(component, paint, nodePaint) {
     if (component.kind === 'classical-bit' || component.kind === 'classical-register')
         return `<path ${paint} d="M -40 -2 H 40 M -40 2 H 40" />`;
     const tracks = Math.max(component.wires, component.controls + component.targets);
-    const span = Math.max(16, (tracks - 1) * 18);
-    const lines = Array.from({ length: tracks }, (_, index) => `<path ${paint} d="M -42 ${svgNumber(distributedCoordinate(index, tracks, span))} H 42" />`).join('');
+    const span = quantumTrackSpan(tracks);
+    const lines = Array.from({ length: tracks }, (_, index) => `<path ${paint} d="M -42 ${svgNumber(quantumTrackCoordinate(index, tracks))} H 42" />`).join('');
     if (component.kind === 'barrier')
         return `${lines}<path ${paint} stroke-dasharray="4 3" d="M 0 ${svgNumber(-span / 2 - 8)} V ${svgNumber(span / 2 + 8)}" />`;
     if (component.kind === 'delay')
         return `${lines}<rect ${paint} x="-12" y="${svgNumber(-span / 2 - 7)}" width="24" height="${svgNumber(span + 14)}" rx="2" />`;
     const marks = Array.from({ length: tracks }, (_, index) => {
-        const y = distributedCoordinate(index, tracks, span);
+        const y = quantumTrackCoordinate(index, tracks);
         if (component.kind === 'swap')
             return `<path ${paint} d="M -6 ${svgNumber(y - 6)} L 6 ${svgNumber(y + 6)} M 6 ${svgNumber(y - 6)} L -6 ${svgNumber(y + 6)}" />`;
         if (component.kind === 'cz')
@@ -695,7 +683,7 @@ function reusableSymbolKey(component) {
 }
 function reusableSymbolDefinition(component, symbolId) {
     const vectorPaint = 'class="schematic-token" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="stroke:var(--schematic-vector,currentColor)"';
-    const nodePaint = 'class="schematic-token schematic-node-fill" fill="currentColor" stroke="none" style="fill:var(--schematic-vector,currentColor)"';
+    const nodePaint = `class="schematic-token schematic-node-fill" ${TEXT_PAINT} style="fill:var(--schematic-vector,currentColor)"`;
     return `<g id="${symbolId}">${componentShape(component, vectorPaint, nodePaint)}</g>`;
 }
 function connectionMarkup(connection, routed, index, idPrefix, glowId) {
@@ -705,57 +693,73 @@ function connectionMarkup(connection, routed, index, idPrefix, glowId) {
     const traceId = `${idPrefix}-wire-${index}-vector`;
     const signalKind = connection.signalKind ?? 'electrical';
     const signalClass = connection.signalKind === undefined ? '' : ` schematic-signal--${signalKind}`;
-    const dataAttributes = ` data-wire-source="${source}" data-wire-target="${target}" data-source-line="${connection.line}"${connection.signalKind === undefined ? '' : ` data-signal-kind="${signalKind}"`}${connection.width === undefined ? '' : ` data-bus-width="${connection.width}"`}`;
+    const dataAttributes = ` data-wire-source="${source}" data-wire-target="${target}" data-source-line="${connection.line}"${connection.netId === undefined ? '' : ` data-net-id="${escapeXml(connection.netId)}"`}${connection.signalKind === undefined ? '' : ` data-signal-kind="${signalKind}"`}${connection.width === undefined ? '' : ` data-bus-width="${connection.width}"`}`;
     const relation = connection.relation ?? 'signal';
     const accessibility = ` tabindex="0" role="group" aria-label="${escapeXml(relation)} from ${source} to ${target}"`;
     const vectorId = ` id="${traceId}"`;
-    const markerAttributes = connectionMarkerAttributes(connection, idPrefix);
+    const markerAttributes = connectionMarkerAttributes(connection, idPrefix, false);
+    const markerCarrier = openMarkerCarrier(connection, routed, idPrefix);
     const glow = `<use class="schematic-glow-layer" href="#${traceId}" filter="url(#${glowId})" aria-hidden="true" pointer-events="none" />`;
     const endpoint = relation === 'signal' && connection.markerEnd === 'none'
         ? `<circle ${colorAttributes(connection.color, 'schematic-node-fill')} cx="${svgNumber(end.x)}" cy="${svgNumber(end.y)}" r="3" />`
         : '';
-    return `<g class="schematic-wire${signalClass}"${dataAttributes}${accessibility}><path${vectorId} ${colorAttributes(connection.color, `schematic-trace${signalClass}`)} d="${routed.d}"${markerAttributes} />${glow}${endpoint}${connectionLabelMarkup(connection, routed)}</g>`;
-}
-function connectionMarkerAttributes(connection, idPrefix) {
-    const start = connection.markerStart;
-    const end = connection.markerEnd;
-    return `${start === 'none' ? '' : ` marker-start="url(#${idPrefix}-marker-${start})"`}${end === 'none' ? '' : ` marker-end="url(#${idPrefix}-marker-${end})"`}${connection.dashed === true ? ' stroke-dasharray="7 5"' : ''}`;
-}
-function connectionLabelPoint(route) {
-    if (route.curve === 'bezier' && route.points.length >= 4) {
-        const a = route.points[0];
-        const b = route.points[1];
-        const c = route.points[2];
-        const d = route.points[3];
-        return {
-            x: (a.x + 3 * b.x + 3 * c.x + d.x) / 8,
-            y: (a.y + 3 * b.y + 3 * c.y + d.y) / 8
-        };
-    }
-    let total = 0;
-    for (let index = 1; index < route.points.length; index += 1) {
-        total +=
-            Math.abs(route.points[index].x - route.points[index - 1].x) +
-                Math.abs(route.points[index].y - route.points[index - 1].y);
-    }
-    let remaining = total / 2;
-    for (let index = 1; index < route.points.length; index += 1) {
-        const start = route.points[index - 1];
-        const end = route.points[index];
-        const length = Math.abs(end.x - start.x) + Math.abs(end.y - start.y);
-        if (remaining <= length) {
-            const ratio = length === 0 ? 0 : remaining / length;
-            return { x: start.x + (end.x - start.x) * ratio, y: start.y + (end.y - start.y) * ratio };
-        }
-        remaining -= length;
-    }
-    return route.points.at(-1);
+    return `<g class="schematic-wire${signalClass}"${dataAttributes}${accessibility}>${markerCarrier}<path${vectorId} ${colorAttributes(connection.color, `schematic-trace${signalClass}`)} d="${visibleConnectionPath(connection, routed)}"${markerAttributes} />${glow}${endpoint}${connectionLabelMarkup(connection, routed)}</g>`;
+}
+function isOpenMarker(marker) {
+    return marker === 'open-arrow' || marker === 'triangle' || marker === 'diamond';
+}
+function connectionMarkerAttributes(connection, idPrefix, open) {
+    const start = isOpenMarker(connection.markerStart) === open ? connection.markerStart : 'none';
+    const end = isOpenMarker(connection.markerEnd) === open ? connection.markerEnd : 'none';
+    return `${start === 'none' ? '' : ` marker-start="url(#${idPrefix}-marker-${start})"`}${end === 'none' ? '' : ` marker-end="url(#${idPrefix}-marker-${end})"`}${!open && connection.dashed === true ? ' stroke-dasharray="7 5"' : ''}`;
+}
+function visibleConnectionPath(connection, route) {
+    const startTrim = isOpenMarker(connection.markerStart)
+        ? connection.markerStart === 'open-arrow'
+            ? 9
+            : 12
+        : 0;
+    const endTrim = isOpenMarker(connection.markerEnd)
+        ? connection.markerEnd === 'open-arrow'
+            ? 9
+            : 12
+        : 0;
+    if (startTrim === 0 && endTrim === 0)
+        return route.d;
+    const inset = (endpoint, adjacent, distance) => {
+        const dx = adjacent.x - endpoint.x;
+        const dy = adjacent.y - endpoint.y;
+        const magnitude = Math.hypot(dx, dy);
+        const scale = Math.min(1, distance / magnitude);
+        return { x: endpoint.x + dx * scale, y: endpoint.y + dy * scale };
+    };
+    let path = route.d;
+    if (startTrim > 0) {
+        const start = inset(route.points[0], route.points[1], startTrim);
+        path = path.replace(/^M -?[\d.]+ -?[\d.]+/, `M ${svgNumber(start.x)} ${svgNumber(start.y)}`);
+    }
+    if (endTrim > 0) {
+        const end = inset(route.points.at(-1), route.points.at(-2), endTrim);
+        if (/ H -?[\d.]+$/.test(path))
+            path = path.replace(/-?[\d.]+$/, svgNumber(end.x));
+        else if (/ V -?[\d.]+$/.test(path))
+            path = path.replace(/-?[\d.]+$/, svgNumber(end.y));
+        else
+            path = path.replace(/-?[\d.]+ -?[\d.]+$/, `${svgNumber(end.x)} ${svgNumber(end.y)}`);
+    }
+    return path;
+}
+function openMarkerCarrier(connection, route, idPrefix) {
+    const markers = connectionMarkerAttributes(connection, idPrefix, true);
+    return markers === ''
+        ? ''
+        : `<path ${colorAttributes(connection.color, 'schematic-marker-carrier')} d="${route.d}" stroke-width="0"${markers} />`;
 }
 function connectionLabelMarkup(connection, route) {
     if (connection.label === undefined)
         return '';
     const point = connectionLabelPoint(route);
-    return `<text class="schematic-connection-label" fill="currentColor" stroke="none" x="${svgNumber(point.x)}" y="${svgNumber(point.y - 7)}" text-anchor="middle" font-size="11">${renderMathLabelTspans(connection.label)}</text>`;
+    return `<text class="schematic-connection-label" ${TEXT_PAINT} x="${svgNumber(point.x)}" y="${svgNumber(point.y - 7)}" text-anchor="middle" font-size="11">${renderMathLabelTspans(connection.label)}</text>`;
 }
 function colorKey(color) {
     return `${color.kind}:${color.value}`;
@@ -763,17 +767,20 @@ function colorKey(color) {
 function compactConnectionMarkup(connections, routes, idPrefix, embedVisuals, glowId) {
     const batches = new Map();
     for (const [index, connection] of connections.entries()) {
-        const markerAttributes = connectionMarkerAttributes(connection, idPrefix);
+        const markerAttributes = connectionMarkerAttributes(connection, idPrefix, false);
         const signalKind = connection.signalKind ?? 'electrical';
         const key = `${colorKey(connection.color)}|${markerAttributes}|${signalKind}|${connection.width ?? 1}`;
         let batch = batches.get(key);
         if (batch === undefined) {
-            batch = { color: connection.color, markerAttributes, signalKind, traces: [], endpoints: [], labels: [] };
+            batch = { color: connection.color, markerAttributes, signalKind, traces: [], endpoints: [], labels: [], carriers: [] };
             batches.set(key, batch);
         }
         const routed = routes[index];
         const end = routed.points.at(-1);
-        batch.traces.push(routed.d);
+        batch.traces.push(visibleConnectionPath(connection, routed));
+        const carrier = openMarkerCarrier(connection, routed, idPrefix);
+        if (carrier !== '')
+            batch.carriers.push(carrier);
         if ((connection.relation ?? 'signal') === 'signal' && connection.markerEnd === 'none') {
             batch.endpoints.push(`M ${svgNumber(end.x - 3)} ${svgNumber(end.y)} a 3 3 0 1 0 6 0 a 3 3 0 1 0 -6 0`);
         }
@@ -788,9 +795,10 @@ function compactConnectionMarkup(connections, routes, idPrefix, embedVisuals, gl
         const trace = `<path${embedVisuals ? ` id="${traceId}"` : ''} ${tracePaint} d="${batch.traces.join(' ')}"${batch.markerAttributes} />`;
         const endpoints = batch.endpoints.length === 0 ? '' : `<path ${nodePaint} d="${batch.endpoints.join(' ')}" />`;
         const labels = batch.labels.join('');
+        const carriers = batch.carriers.join('');
         if (!embedVisuals)
-            return trace + endpoints + labels;
-        return `<g class="schematic-wire" tabindex="0" role="group" aria-label="${batch.traces.length} grouped connection${batch.traces.length === 1 ? '' : 's'}">${trace}<use class="schematic-glow-layer" href="#${traceId}" filter="url(#${glowId})" aria-hidden="true" pointer-events="none" />${endpoints}${labels}</g>`;
+            return carriers + trace + endpoints + labels;
+        return `<g class="schematic-wire">${carriers}${trace}<use class="schematic-glow-layer" href="#${traceId}" filter="url(#${glowId})" aria-hidden="true" pointer-events="none" />${endpoints}${labels}</g>`;
     }).join('');
 }
 function componentMetadata(component) {
@@ -861,9 +869,9 @@ function componentMarkup(component, index, idPrefix, glowId, mode, nodeHooks, po
         ? ` data-node-id="${id}" data-node-kind="${component.kind}" data-node-label="${label}" data-component="${id}" data-kind="${component.kind}" data-source-line="${component.line}"${'orientation' in component && component.orientation !== undefined ? ` data-orientation="${component.orientation}"` : ''}`
         : '';
     let accessibility = '';
-    if (styles) {
+    if (mode === 'full') {
         const metadata = componentMetadata(component);
-        const ariaLabel = escapeXml(`${component.id}, ${component.kind}, ${component.label}${metadata === '' ? '' : `, ${metadata}`}`);
+        const ariaLabel = escapeXml(`${component.id}, ${component.kind}, ${mathLabelText(component.label)}${metadata === '' ? '' : `, ${metadata}`}`);
         accessibility = `${portHooks ? '' : ' tabindex="0"'} role="group" aria-label="${ariaLabel}"`;
     }
     const vectorIdAttribute = styles ? ` id="${vectorId}"` : '';
@@ -877,21 +885,19 @@ function componentMarkup(component, index, idPrefix, glowId, mode, nodeHooks, po
     const innerText = componentInnerText(component);
     const externalLabels = isUmlComponent(component)
         ? ''
-        : `<text class="schematic-designator" fill="currentColor" stroke="none" x="0" y="${anchors.designatorY}" text-anchor="middle" font-size="12" textLength="${anchors.designatorWidth}" lengthAdjust="spacingAndGlyphs">${id}</text><text class="schematic-label" fill="currentColor" stroke="none" x="0" y="${anchors.labelY}" text-anchor="middle" font-size="12" textLength="${anchors.labelWidth}" lengthAdjust="spacingAndGlyphs">${renderedLabel}</text>`;
+        : `<text class="schematic-designator" ${TEXT_PAINT} x="0" y="${anchors.designatorY}" text-anchor="middle" font-size="12" textLength="${anchors.designatorWidth}" ${LENGTH_FIT}>${id}</text><text class="schematic-label" ${TEXT_PAINT} x="0" y="${anchors.labelY}" text-anchor="middle" font-size="12" textLength="${anchors.labelWidth}" ${LENGTH_FIT}>${renderedLabel}</text>`;
     return `<g class="schematic-component"${dataAttributes} transform="translate(${svgNumber(component.x)} ${svgNumber(component.y)})"${accessibility}>${vector}${glow}${innerText}${externalLabels}${hotspots}</g>`;
 }
 export function renderSchematic(document, options) {
     assertParsedSchematicDocument(document);
     const normalized = normalizeCompileOptions(options);
-    const components = new Map(document.components.map((component) => [component.id, component]));
     const routedConnections = parsedSchematicRoutes(document, normalized.bounds) ??
-        routeConnections(document.connections, components, normalized.bounds);
-    validateDocumentGeometry(document, normalized, routedConnections);
-    const signature = `${normalized.bounds.width}x${normalized.bounds.height}:${normalized.title}:${JSON.stringify(document)}`;
-    const candidatePrefix = (normalized.idPrefix ?? `schematic-${stableHash(signature)}`).replace(/[^A-Za-z0-9_-]/g, '-');
+        validateDocumentGeometry(document, normalized, routeConnections(document.connections, new Map(document.components.map((component) => [component.id, component])), normalized.bounds));
+    const signatureHash = () => stableHash(`${normalized.bounds.width}x${normalized.bounds.height}:${normalized.title}:${JSON.stringify(document)}`);
+    const candidatePrefix = (normalized.idPrefix ?? `schematic-${signatureHash()}`).replace(/[^A-Za-z0-9_-]/g, '-');
     const safePrefix = /[A-Za-z0-9]/.test(candidatePrefix)
         ? candidatePrefix
-        : `schematic-${stableHash(signature)}`;
+        : `schematic-${signatureHash()}`;
     const titleId = `${safePrefix}-title`;
     const descriptionId = `${safePrefix}-description`;
     const gridId = `${safePrefix}-grid`;
@@ -919,12 +925,12 @@ export function renderSchematic(document, options) {
         : '';
     const symbolDefinitions = Array.from(reusableSymbols.values(), ({ id, component }) => reusableSymbolDefinition(component, id)).join('');
     const usedMarkers = new Set(document.connections.flatMap((connection) => [connection.markerStart, connection.markerEnd]));
-    const markerDefinitions = `${usedMarkers.has('arrow') ? `<marker id="${safePrefix}-marker-arrow" viewBox="0 0 8 8" refX="8" refY="4" markerWidth="8" markerHeight="8" markerUnits="userSpaceOnUse" orient="auto-start-reverse" overflow="visible"><path d="M0 0 8 4 0 8Z" fill="context-stroke" /></marker>` : ''}${usedMarkers.has('open-arrow') ? `<marker id="${safePrefix}-marker-open-arrow" viewBox="0 0 9 10" refX="9" refY="5" markerWidth="9" markerHeight="10" markerUnits="userSpaceOnUse" orient="auto-start-reverse" overflow="visible"><path d="M0 0 9 5 0 10" fill="none" stroke="context-stroke" stroke-width="1.5" /></marker>` : ''}${usedMarkers.has('dot') ? `<marker id="${safePrefix}-marker-dot" viewBox="0 0 8 8" refX="4" refY="4" markerWidth="8" markerHeight="8" markerUnits="userSpaceOnUse"><circle cx="4" cy="4" r="3" fill="context-stroke" /></marker>` : ''}${usedMarkers.has('triangle') ? `<marker id="${safePrefix}-marker-triangle" viewBox="0 0 12 12" refX="11" refY="6" markerWidth="12" markerHeight="12" markerUnits="userSpaceOnUse" orient="auto-start-reverse" overflow="visible"><path d="M0 1 11 6 0 11Z" fill="var(--schematic-surface,#fff)" stroke="context-stroke" stroke-width="1.5" /></marker>` : ''}${usedMarkers.has('diamond') ? `<marker id="${safePrefix}-marker-diamond" viewBox="0 0 13 12" refX="12" refY="6" markerWidth="13" markerHeight="12" markerUnits="userSpaceOnUse" orient="auto-start-reverse" overflow="visible"><path d="M0 6 6 1 12 6 6 11Z" fill="var(--schematic-surface,#fff)" stroke="context-stroke" stroke-width="1.5" /></marker>` : ''}${usedMarkers.has('diamond-filled') ? `<marker id="${safePrefix}-marker-diamond-filled" viewBox="0 0 13 12" refX="12" refY="6" markerWidth="13" markerHeight="12" markerUnits="userSpaceOnUse" orient="auto-start-reverse" overflow="visible"><path d="M0 6 6 1 12 6 6 11Z" fill="context-stroke" stroke="context-stroke" /></marker>` : ''}`;
+    const markerDefinitions = `${usedMarkers.has('arrow') ? `<marker id="${safePrefix}-marker-arrow" viewBox="0 0 8 8" refX="8" refY="4" markerWidth="8" markerHeight="8" markerUnits="userSpaceOnUse" orient="auto-start-reverse" overflow="visible"><path d="M0 0 8 4 0 8Z" fill="context-stroke" /></marker>` : ''}${usedMarkers.has('open-arrow') ? `<marker id="${safePrefix}-marker-open-arrow" viewBox="0 0 9 10" refX="9" refY="5" markerWidth="9" markerHeight="10" markerUnits="userSpaceOnUse" orient="auto-start-reverse" overflow="visible"><path d="M0 0 9 5 0 10" fill="none" stroke="context-stroke" stroke-width="1.5" /></marker>` : ''}${usedMarkers.has('dot') ? `<marker id="${safePrefix}-marker-dot" viewBox="0 0 8 8" refX="4" refY="4" markerWidth="8" markerHeight="8" markerUnits="userSpaceOnUse"><circle cx="4" cy="4" r="3" fill="context-stroke" /></marker>` : ''}${usedMarkers.has('triangle') ? `<marker id="${safePrefix}-marker-triangle" viewBox="0 0 12 12" refX="11" refY="6" markerWidth="12" markerHeight="12" markerUnits="userSpaceOnUse" orient="auto-start-reverse" overflow="visible"><path d="M0 1 11 6 0 11Z" fill="none" stroke="context-stroke" stroke-width="1.5" /></marker>` : ''}${usedMarkers.has('diamond') ? `<marker id="${safePrefix}-marker-diamond" viewBox="0 0 13 12" refX="12" refY="6" markerWidth="13" markerHeight="12" markerUnits="userSpaceOnUse" orient="auto-start-reverse" overflow="visible"><path d="M0 6 6 1 12 6 6 11Z" fill="none" stroke="context-stroke" stroke-width="1.5" /></marker>` : ''}${usedMarkers.has('diamond-filled') ? `<marker id="${safePrefix}-marker-diamond-filled" viewBox="0 0 13 12" refX="12" refY="6" markerWidth="13" markerHeight="12" markerUnits="userSpaceOnUse" orient="auto-start-reverse" overflow="visible"><path d="M0 6 6 1 12 6 6 11Z" fill="context-stroke" stroke="context-stroke" /></marker>` : ''}`;
     const embeddedDefinitions = styles
         ? `<style>${STATIC_SVG_STYLES}${hookStyles}${interactionStyles}</style><pattern id="${gridId}" width="20" height="20" patternUnits="userSpaceOnUse"><path class="schematic-grid-line" d="M20 0H0V20" /></pattern>${glowFilter}`
         : '';
     const definitions = `${embeddedDefinitions}${markerDefinitions}${symbolDefinitions}`;
-    const svgRole = portHooks ? 'group' : 'img';
+    const svgRole = hooks ? 'group' : 'img';
     writer.append(`<figure class="schematic-frame"${hooks ? ' data-schematic' : ''}><svg class="schematic-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${normalized.bounds.width} ${normalized.bounds.height}" width="${normalized.bounds.width}" height="${normalized.bounds.height}" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" role="${svgRole}" aria-labelledby="${titleId} ${descriptionId}" preserveAspectRatio="xMidYMid meet"><title id="${titleId}">${title}</title><desc id="${descriptionId}">${description}</desc>${definitions === '' ? '' : `<defs>${definitions}</defs>`}${styles ? `<rect class="schematic-surface" width="100%" height="100%" /><rect class="schematic-grid" width="100%" height="100%" fill="url(#${gridId})" />` : ''}<g class="schematic-vectors">`);
     if (wireHooks) {
         for (const [index, connection] of document.connections.entries()) {

package/dist/types.d.ts

@@ -346,6 +346,10 @@ export interface SchematicConnection {
     relation?: SchematicRelationKind;
     /** Non-default signal domain; absence preserves legacy electrical behavior. */
     signalKind?: SchematicSignalKind;
+    /** Author-supplied net name joining otherwise disconnected signal segments. */
+    net?: string;
+    /** Parser-resolved topology identity; unnamed nets use a stable `$N` identifier. */
+    netId?: string;
     /** Validated bus/register width; absence denotes a scalar connection. */
     width?: number;
     /** Optional text centered beside the routed connector. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schemd/core",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "Zero-dependency text-to-SVG compiler for schematics and UML.",
   "homepage": "https://schemd.johnowolabiidogun.dev",
   "bugs": {
@@ -60,11 +60,17 @@
     "benchmark": "bun run build && node scripts/benchmark.mjs",
     "check": "tsc -p tsconfig.json --noEmit",
     "prepack": "bun run build",
+    "release:check": "bun run check && bun run test:coverage && bun run test:mutation && bun run test:visual && bun run build && bun run size && node scripts/benchmark.mjs",
     "size": "node scripts/check-bundle-size.mjs",
     "test": "vitest run",
-    "test:coverage": "vitest run --coverage"
+    "test:coverage": "vitest run --coverage",
+    "test:fuzz": "vitest run tests/fuzz.test.ts",
+    "test:mutation": "node scripts/mutation.mjs",
+    "test:visual": "playwright test --config=playwright.config.ts",
+    "test:visual:install": "playwright install chromium"
   },
   "devDependencies": {
+    "@playwright/test": "^1.61.1",
     "@vitest/coverage-v8": "^4.1.10",
     "typescript": "^6.0.3",
     "vite": "^8.1.4",