@schemd/core 0.1.1 → 0.1.2

package/dist/renderer.js

@@ -1,10 +1,10 @@
 import { classicalGateHeight, componentTextAnchors, distributedCoordinate, enumerateComponentPorts, positionIcPin, PORT_HOTSPOT_RADIUS, routeConnections, validateDocumentGeometry } from './layout.js';
 import { MAX_SCHEMATIC_SVG_OUTPUT_BYTES, utf8ByteLength } from './limits.js';
 import { assertParsedSchematicDocument } from './parser.js';
-import { CLASSICAL_GATE_KINDS, SCHEMD_OUTPUT_MODES, SchematicSyntaxError } from './types.js';
-import { renderMathLabelTspans } from './math-label.js';
+import { CLASSICAL_GATE_KINDS, SCHEMD_OUTPUT_MODES, UML_COMPONENT_KINDS, SchematicSyntaxError } from './types.js';
+import { mathLabelTextWidth, renderMathLabelTspans } from './math-label.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{fill:currentColor}.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-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}}';
 function validXmlCodePoint(codePoint) {
@@ -90,7 +90,7 @@ function svgNumber(value) {
     return String(Number(value.toFixed(3)));
 }
 function fittedTextLength(value, maximum, advance) {
-    return Math.max(1, Math.min(Array.from(value).length * advance, maximum));
+    return Math.max(1, Math.min(Math.ceil(mathLabelTextWidth(value, advance)), maximum));
 }
 function stableHash(value) {
     let hash = 2166136261;
@@ -103,6 +103,9 @@ function stableHash(value) {
 function isClassicalGate(component) {
     return CLASSICAL_GATE_KINDS.includes(component.kind);
 }
+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"' : '';
@@ -183,7 +186,7 @@ function iecGate(component, paint) {
         xor: '=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">${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" fill="currentColor" stroke="none" 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);
@@ -205,9 +208,9 @@ function ieeeGate(component, paint) {
 function quantumText(component) {
     const details = [component.parameter, component.phase, component.matrix].filter((value) => value !== undefined && value !== '');
     const rows = [component.label, ...details];
-    const start = -((rows.length - 1) * 10) / 2 + 3;
+    const start = -((rows.length - 1) * 12) / 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 * 10}" textLength="${fittedTextLength(value, 56, index === 0 ? 7 : 5)}" lengthAdjust="spacingAndGlyphs">${renderMathLabelTspans(value)}</text>`)
+        .map((value, index) => `<text class="${index === 0 ? 'schematic-gate-symbol' : 'schematic-quantum-detail'}" fill="currentColor" stroke="none" x="0" y="${start + index * 12}" text-anchor="middle" font-size="${index === 0 ? 14 : 10}" textLength="${fittedTextLength(value, 56, index === 0 ? 7 : 5)}" lengthAdjust="spacingAndGlyphs">${renderMathLabelTspans(value)}</text>`)
         .join('');
 }
 function diodeShape(component, paint) {
@@ -261,29 +264,94 @@ 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" textLength="${horizontalTextLength}" lengthAdjust="spacingAndGlyphs">${escapeXml(pin)}</text>`;
+            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>`;
         }
         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" textLength="${horizontalTextLength}" lengthAdjust="spacingAndGlyphs">${escapeXml(pin)}</text>`;
+            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>`;
         }
         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" 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" 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>`;
         }
         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" 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" 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>`;
     })
         .join('');
 }
 function integratedCircuitShape(component, paint) {
     const left = -component.bodyWidth / 2;
     const top = -component.bodyHeight / 2;
-    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)}<text class="schematic-gate-symbol" fill="currentColor" stroke="none" x="0" y="4" textLength="${fittedTextLength(component.label, component.bodyWidth - 12, 7)}" lengthAdjust="spacingAndGlyphs">${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)}<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>`;
+}
+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">${escapeXml(value)}</text>`;
+}
+function umlClassShape(component, paint) {
+    const left = -component.bodyWidth / 2;
+    const top = -component.bodyHeight / 2;
+    const headerHeight = 36 + (component.stereotype === undefined ? 0 : 14);
+    const attributeHeight = Math.max(24, component.attributes.length * 16 + 8);
+    const attributeSeparator = top + headerHeight;
+    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">«${escapeXml(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))
+        .join('');
+    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}`;
+}
+function umlStateShape(component, paint) {
+    const left = -component.bodyWidth / 2;
+    const top = -component.bodyHeight / 2;
+    const separator = top + 32;
+    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}`;
+}
+function umlComponentShape(component, paint, nodePaint) {
+    if (component.kind === 'class')
+        return umlClassShape(component, paint);
+    if (component.kind === 'state')
+        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>`;
+        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>`;
+        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)}" />`;
+        }
+        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>`;
+        }
+        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>`;
+        }
+        case 'initial':
+            return `<circle ${nodePaint} cx="0" cy="0" r="10" />`;
+        case 'final':
+            return `<circle ${paint} cx="0" cy="0" r="11" /><circle ${nodePaint} cx="0" cy="0" r="6" />`;
+    }
 }
 function componentShape(component, paint = colorAttributes(component.color), nodePaint = colorAttributes(component.color, 'schematic-node-fill')) {
     if (isClassicalGate(component)) {
         return component.standard === 'iec' ? iecGate(component, paint) : ieeeGate(component, paint);
     }
+    if (isUmlComponent(component))
+        return umlComponentShape(component, paint, nodePaint);
     switch (component.kind) {
         case 'resistor':
             return `<path ${paint} d="M -42 0 H -26 L -20 -12 L -10 12 L 0 -12 L 10 12 L 20 -12 L 26 0 H 42" />`;
@@ -310,7 +378,10 @@ function componentShape(component, paint = colorAttributes(component.color), nod
     }
 }
 function reusableSymbolKey(component) {
-    if (isClassicalGate(component) || component.kind === 'qgate' || component.kind === 'ic') {
+    if (isClassicalGate(component) ||
+        isUmlComponent(component) ||
+        component.kind === 'qgate' ||
+        component.kind === 'ic') {
         return undefined;
     }
     if (component.kind === 'diode')
@@ -332,16 +403,56 @@ function connectionMarkup(connection, routed, index, idPrefix, glowId) {
     const target = escapeXml(`${connection.to.componentId}.${connection.to.port}`);
     const traceId = `${idPrefix}-wire-${index}-vector`;
     const dataAttributes = ` data-wire-source="${source}" data-wire-target="${target}"`;
-    const accessibility = ` tabindex="0" role="group" aria-label="Signal from ${source} to ${target}"`;
+    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 glow = `<use class="schematic-glow-layer" href="#${traceId}" filter="url(#${glowId})" aria-hidden="true" pointer-events="none" />`;
-    return `<g class="schematic-wire"${dataAttributes}${accessibility}><path${vectorId} ${colorAttributes(connection.color, 'schematic-trace')} d="${routed.d}"${markerAttributes} />${glow}<circle ${colorAttributes(connection.color, 'schematic-node-fill')} cx="${svgNumber(end.x)}" cy="${svgNumber(end.y)}" r="3" /></g>`;
+    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"${dataAttributes}${accessibility}><path${vectorId} ${colorAttributes(connection.color, 'schematic-trace')} 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})"`}`;
+    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);
+}
+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>`;
 }
 function colorKey(color) {
     return `${color.kind}:${color.value}`;
@@ -353,23 +464,29 @@ function compactConnectionMarkup(connections, routes, idPrefix, embedVisuals, gl
         const key = `${colorKey(connection.color)}|${markerAttributes}`;
         let batch = batches.get(key);
         if (batch === undefined) {
-            batch = { color: connection.color, markerAttributes, traces: [], endpoints: [] };
+            batch = { color: connection.color, markerAttributes, traces: [], endpoints: [], labels: [] };
             batches.set(key, batch);
         }
         const routed = routes[index];
         const end = routed.points.at(-1);
         batch.traces.push(routed.d);
-        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`);
+        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`);
+        }
+        const label = connectionLabelMarkup(connection, routed);
+        if (label !== '')
+            batch.labels.push(label);
     }
     return Array.from(batches.values(), (batch, index) => {
         const tracePaint = colorAttributes(batch.color, 'schematic-trace');
         const nodePaint = colorAttributes(batch.color, 'schematic-node-fill');
         const traceId = `${idPrefix}-wire-batch-${index}-vector`;
         const trace = `<path${embedVisuals ? ` id="${traceId}"` : ''} ${tracePaint} d="${batch.traces.join(' ')}"${batch.markerAttributes} />`;
-        const endpoints = `<path ${nodePaint} d="${batch.endpoints.join(' ')}" />`;
+        const endpoints = batch.endpoints.length === 0 ? '' : `<path ${nodePaint} d="${batch.endpoints.join(' ')}" />`;
+        const labels = batch.labels.join('');
         if (!embedVisuals)
-            return trace + endpoints;
-        return `<g class="schematic-wire" tabindex="0" role="group" aria-label="${batch.traces.length} grouped signal trace${batch.traces.length === 1 ? '' : 's'}">${trace}<use class="schematic-glow-layer" href="#${traceId}" filter="url(#${glowId})" aria-hidden="true" pointer-events="none" />${endpoints}</g>`;
+            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>`;
     }).join('');
 }
 function componentMetadata(component) {
@@ -424,12 +541,17 @@ function componentMarkup(component, index, idPrefix, glowId, mode, symbolId) {
     const vector = symbolId === undefined
         ? `<g${vectorIdAttribute} class="schematic-component-vector">${componentShape(component)}</g>`
         : `<use${vectorIdAttribute} ${colorAttributes(component.color, 'schematic-component-vector')} href="#${symbolId}" />`;
-    return `<g class="schematic-component"${dataAttributes} transform="translate(${svgNumber(component.x)} ${svgNumber(component.y)})"${accessibility}>${vector}${glow}<text class="schematic-designator" fill="currentColor" stroke="none" x="0" y="${anchors.designatorY}" text-anchor="middle" textLength="${anchors.designatorWidth}" lengthAdjust="spacingAndGlyphs">${id}</text><text class="schematic-label" fill="currentColor" stroke="none" x="0" y="${anchors.labelY}" text-anchor="middle" textLength="${anchors.labelWidth}" lengthAdjust="spacingAndGlyphs">${renderedLabel}</text>${hotspots}</g>`;
+    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>`;
+    return `<g class="schematic-component"${dataAttributes} transform="translate(${svgNumber(component.x)} ${svgNumber(component.y)})"${accessibility}>${vector}${glow}${externalLabels}${hotspots}</g>`;
 }
 export function renderSchematic(document, options) {
     assertParsedSchematicDocument(document);
     const normalized = normalizeCompileOptions(options);
-    validateDocumentGeometry(document, normalized);
+    const components = new Map(document.components.map((component) => [component.id, component]));
+    const routedConnections = 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, '-');
     const safePrefix = /[A-Za-z0-9]/.test(candidatePrefix)
@@ -441,8 +563,6 @@ export function renderSchematic(document, options) {
     const glowId = `${safePrefix}-schematic-glow-filter`;
     const styles = normalized.mode === 'embedded-css' || normalized.mode === 'full';
     const hooks = normalized.mode === 'full';
-    const components = new Map(document.components.map((component) => [component.id, component]));
-    const routedConnections = routeConnections(document.connections, components);
     const reusableSymbols = new Map();
     for (const component of document.components) {
         const key = reusableSymbolKey(component);
@@ -452,7 +572,7 @@ export function renderSchematic(document, options) {
     }
     const title = escapeXml(normalized.title);
     const componentCount = document.components.length;
-    const description = `${componentCount} component${componentCount === 1 ? '' : 's'} and ${document.connections.length} signal connection${document.connections.length === 1 ? '' : 's'}.`;
+    const description = `${componentCount} component${componentCount === 1 ? '' : 's'} and ${document.connections.length} connection${document.connections.length === 1 ? '' : 's'}.`;
     const writer = new BoundedSvgWriter();
     const hookStyles = hooks ? HOOK_SVG_STYLES : '';
     const interactionStyles = styles ? INTERACTIVE_SVG_STYLES : '';
@@ -461,7 +581,7 @@ 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="7" refY="4" markerWidth="6" markerHeight="6" orient="auto-start-reverse"><path d="M0 0 8 4 0 8Z" fill="context-stroke" /></marker>` : ''}${usedMarkers.has('dot') ? `<marker id="${safePrefix}-marker-dot" viewBox="0 0 8 8" refX="4" refY="4" markerWidth="5" markerHeight="5"><circle cx="4" cy="4" r="3" fill="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="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 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}`
         : '';

package/dist/types.d.ts

@@ -35,8 +35,12 @@ export type ClassicalGateKind = (typeof CLASSICAL_GATE_KINDS)[number];
 export declare const QUANTUM_GATE_KINDS: readonly ["hadamard", "cnot", "qgate"];
 /** A supported native or polymorphic quantum gate keyword. */
 export type QuantumGateKind = (typeof QUANTUM_GATE_KINDS)[number];
+/** First-class UML node keywords spanning structural and behavioral diagrams. */
+export declare const UML_COMPONENT_KINDS: readonly ["class", "actor", "usecase", "state", "lifeline", "note", "package", "initial", "final"];
+/** A supported UML node keyword. */
+export type UmlComponentKind = (typeof UML_COMPONENT_KINDS)[number];
 /** Complete, collision-free component keyword registry. */
-export declare const COMPONENT_KINDS: readonly ["resistor", "capacitor", "inductor", "diode", "transistor", "port", "ground", "nand", "nor", "xor", "and", "or", "not", "hadamard", "cnot", "qgate", "ic"];
+export declare const COMPONENT_KINDS: readonly ["resistor", "capacitor", "inductor", "diode", "transistor", "port", "ground", "nand", "nor", "xor", "and", "or", "not", "hadamard", "cnot", "qgate", "class", "actor", "usecase", "state", "lifeline", "note", "package", "initial", "final", "ic"];
 /** Any component keyword that can begin a declaration. */
 export type ComponentKind = (typeof COMPONENT_KINDS)[number];
 /** Built-in semantic color tokens that hosts can theme through CSS. */
@@ -169,8 +173,53 @@ export interface IcComponent extends ComponentBase {
 }
 /** Descriptive alias for a parsed integrated-circuit block. */
 export type IntegratedCircuitComponent = IcComponent;
+/** Parsed UML class with independently sized attribute and operation compartments. */
+export interface UmlClassComponent extends ComponentBase {
+    /** UML class node discriminant. */
+    kind: 'class';
+    /** Optional stereotype displayed above the class name. */
+    stereotype?: string;
+    /** Attribute declarations in source order. */
+    attributes: readonly string[];
+    /** Operation declarations in source order. */
+    operations: readonly string[];
+    /** Deterministic box width derived from all visible rows. */
+    bodyWidth: number;
+    /** Deterministic three-compartment box height. */
+    bodyHeight: number;
+}
+/** Parsed UML state with optional behavior rows. */
+export interface UmlStateComponent extends ComponentBase {
+    kind: 'state';
+    /** Entry, do, exit, or author-defined behavior rows. */
+    details: readonly string[];
+    bodyWidth: number;
+    bodyHeight: number;
+}
+/** Parsed UML ellipse, note, package, or sequence lifeline. */
+export interface UmlSizedComponent extends ComponentBase {
+    kind: 'usecase' | 'lifeline' | 'note' | 'package';
+    bodyWidth: number;
+    bodyHeight: number;
+}
+/** Parsed UML actor figure. */
+export interface UmlActorComponent extends ComponentBase {
+    kind: 'actor';
+}
+/** Parsed UML initial or final pseudostate. */
+export interface UmlPseudostateComponent extends ComponentBase {
+    kind: 'initial' | 'final';
+}
+/** Every UML component accepted by the compiler. */
+export type UmlComponent = UmlClassComponent | UmlStateComponent | UmlSizedComponent | UmlActorComponent | UmlPseudostateComponent;
 /** Discriminated union of every component node accepted by the renderer. */
-export type SchematicComponent = PassiveComponent | DiodeComponent | TransistorComponent | PortComponent | GroundComponent | ClassicalGateComponent | QuantumGateComponent | IcComponent;
+export type SchematicComponent = PassiveComponent | DiodeComponent | TransistorComponent | PortComponent | GroundComponent | ClassicalGateComponent | QuantumGateComponent | IcComponent | UmlComponent;
+/** UML relationship semantics used to derive line style and endpoint markers. */
+export declare const UML_RELATION_KINDS: readonly ["association", "dependency", "generalization", "realization", "aggregation", "composition", "message", "transition", "include", "extend"];
+/** A supported UML relationship. */
+export type UmlRelationKind = (typeof UML_RELATION_KINDS)[number];
+/** Electrical signal or a first-class UML relationship. */
+export type SchematicRelationKind = 'signal' | UmlRelationKind;
 /** Address of one component terminal in a connection declaration. */
 export interface SchematicEndpoint {
     /** Document-local component identifier. */
@@ -192,6 +241,12 @@ export interface SchematicConnection {
     markerStart: SchematicSignalMarker;
     /** Optional marker drawn at the destination terminal. */
     markerEnd: SchematicSignalMarker;
+    /** Electrical or UML relationship semantics. */
+    relation?: SchematicRelationKind;
+    /** Optional text centered beside the routed connector. */
+    label?: string;
+    /** Whether the trace uses the UML dependency dash pattern. */
+    dashed?: boolean;
     /** One-based source line used for routing diagnostics. */
     line: number;
 }
@@ -207,7 +262,7 @@ export declare const SCHEMD_OUTPUT_MODES: readonly ["default", "embedded-css", "
 /** Static, CSS-enhanced, or fully attributed SVG output mode. */
 export type SchemdOutputMode = (typeof SCHEMD_OUTPUT_MODES)[number];
 /** Marker primitives that can terminate or originate a signal trace. */
-export declare const SCHEMATIC_SIGNAL_MARKERS: readonly ["none", "arrow", "dot"];
+export declare const SCHEMATIC_SIGNAL_MARKERS: readonly ["none", "arrow", "open-arrow", "dot", "triangle", "diamond", "diamond-filled"];
 /** A validated connection marker selection. */
 export type SchematicSignalMarker = (typeof SCHEMATIC_SIGNAL_MARKERS)[number];
 /** Per-render options extending the fence's intrinsic layout contract. */

package/dist/types.js

@@ -5,16 +5,48 @@ export const TRANSISTOR_TYPES = ['npn', 'pnp', 'nmos', 'pmos'];
 export const GROUND_STYLES = ['chassis', 'earth', 'signal'];
 export const CLASSICAL_GATE_KINDS = ['nand', 'nor', 'xor', 'and', 'or', 'not'];
 export const QUANTUM_GATE_KINDS = ['hadamard', 'cnot', 'qgate'];
+export const UML_COMPONENT_KINDS = [
+    'class',
+    'actor',
+    'usecase',
+    'state',
+    'lifeline',
+    'note',
+    'package',
+    'initial',
+    'final'
+];
 export const COMPONENT_KINDS = [
     ...PASSIVE_KINDS,
     ...ANALOG_KINDS,
     ...CLASSICAL_GATE_KINDS,
     ...QUANTUM_GATE_KINDS,
+    ...UML_COMPONENT_KINDS,
     'ic'
 ];
 export const SEMANTIC_COLORS = ['amber', 'blue', 'cyan', 'purple', 'slate', 'emerald'];
+export const UML_RELATION_KINDS = [
+    'association',
+    'dependency',
+    'generalization',
+    'realization',
+    'aggregation',
+    'composition',
+    'message',
+    'transition',
+    'include',
+    'extend'
+];
 export const SCHEMD_OUTPUT_MODES = ['default', 'embedded-css', 'full'];
-export const SCHEMATIC_SIGNAL_MARKERS = ['none', 'arrow', 'dot'];
+export const SCHEMATIC_SIGNAL_MARKERS = [
+    'none',
+    'arrow',
+    'open-arrow',
+    'dot',
+    'triangle',
+    'diamond',
+    'diamond-filled'
+];
 export class SchematicSyntaxError extends Error {
     line;
     constructor(message, line) {

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@schemd/core",
-	"version": "0.1.1",
-	"description": "Strict, bounded, server-side engineering schematic DSL compiler for Marked.",
+	"version": "0.1.2",
+	"description": "Zero-dependency text-to-SVG compiler for schematics and UML.",
 	"homepage": "https://johnowolabiidogun.dev/tools/schemd/docs/overview",
 	"bugs": {
 		"url": "https://github.com/Sirneij/schemd/issues"
@@ -23,6 +23,30 @@
 		".": {
 			"types": "./dist/index.d.ts",
 			"import": "./dist/index.js"
+		},
+		"./parser": {
+			"types": "./dist/parser.d.ts",
+			"import": "./dist/parser.js"
+		},
+		"./renderer": {
+			"types": "./dist/renderer.d.ts",
+			"import": "./dist/renderer.js"
+		},
+		"./layout": {
+			"types": "./dist/layout.d.ts",
+			"import": "./dist/layout.js"
+		},
+		"./math-label": {
+			"types": "./dist/math-label.d.ts",
+			"import": "./dist/math-label.js"
+		},
+		"./marked": {
+			"types": "./dist/marked-extension.d.ts",
+			"import": "./dist/marked-extension.js"
+		},
+		"./types": {
+			"types": "./dist/types.d.ts",
+			"import": "./dist/types.js"
 		}
 	},
 	"scripts": {
@@ -35,6 +59,11 @@
 	"peerDependencies": {
 		"marked": ">=17 <19"
 	},
+	"peerDependenciesMeta": {
+		"marked": {
+			"optional": true
+		}
+	},
 	"devDependencies": {
 		"@vitest/coverage-v8": "^4.1.10",
 		"marked": "^18.0.6",
@@ -50,7 +79,8 @@
 		"schematic",
 		"svg",
 		"compiler",
-		"engineering"
+		"engineering",
+		"uml"
 	],
 	"license": "MIT"
 }