@vessel-dsp/core 0.5.0

package/src/preview/junctions.ts

@@ -0,0 +1,94 @@
+import type { Point, Wire } from '../model/types';
+
+export function findJunctions(
+    wires: readonly Wire[],
+    terminals: readonly Point[],
+): readonly Point[] {
+    const endpointCounts = new Map<string, number>();
+    const knownPoints = new Map<string, Point>();
+
+    for (const wire of wires) {
+        for (const endpoint of wire.endpoints) {
+            const key = pointKey(endpoint);
+            endpointCounts.set(key, (endpointCounts.get(key) ?? 0) + 1);
+            if (!knownPoints.has(key)) {
+                knownPoints.set(key, endpoint);
+            }
+        }
+    }
+
+    const junctions = new Map<string, Point>();
+
+    for (const [key, count] of endpointCounts) {
+        const point = knownPoints.get(key);
+        if (point === undefined) {
+            continue;
+        }
+
+        if (count >= 3) {
+            junctions.set(key, point);
+            continue;
+        }
+
+        if (count >= 1 && hasMidSegmentHit(point, wires)) {
+            junctions.set(key, point);
+        }
+    }
+
+    for (const terminal of terminals) {
+        const key = pointKey(terminal);
+        if (junctions.has(key)) {
+            continue;
+        }
+        if (hasMidSegmentHit(terminal, wires)) {
+            junctions.set(key, terminal);
+        }
+    }
+
+    return Array.from(junctions.values());
+}
+
+function hasMidSegmentHit(point: Point, wires: readonly Wire[]): boolean {
+    for (const wire of wires) {
+        const a = wire.endpoints[0];
+        const b = wire.endpoints[1];
+        if (pointEquals(point, a) || pointEquals(point, b)) {
+            continue;
+        }
+        if (pointOnSegment(point, a, b)) {
+            return true;
+        }
+    }
+    return false;
+}
+
+function pointOnSegment(p: Point, a: Point, b: Point): boolean {
+    const cross = (p.x - a.x) * (b.y - a.y) - (p.y - a.y) * (b.x - a.x);
+    if (cross !== 0) {
+        return false;
+    }
+    const minX = Math.min(a.x, b.x);
+    const maxX = Math.max(a.x, b.x);
+    const minY = Math.min(a.y, b.y);
+    const maxY = Math.max(a.y, b.y);
+    if (minX === maxX && minY === maxY) {
+        return false;
+    }
+    const inXRange = p.x > minX && p.x < maxX;
+    const inYRange = p.y > minY && p.y < maxY;
+    if (minX === maxX) {
+        return inYRange;
+    }
+    if (minY === maxY) {
+        return inXRange;
+    }
+    return inXRange && inYRange;
+}
+
+function pointEquals(a: Point, b: Point): boolean {
+    return a.x === b.x && a.y === b.y;
+}
+
+function pointKey(p: Point): string {
+    return `${p.x},${p.y}`;
+}

package/src/preview/label-layout.ts

@@ -0,0 +1,90 @@
+export type LabelTextBoxLayout = Readonly<{
+    lines: readonly string[];
+    width: number;
+    height: number;
+    paddingX: number;
+    paddingY: number;
+    fontSize: number;
+    lineHeight: number;
+}>;
+
+const LABEL_TEXTBOX_MAX_CHARS = 52;
+const LABEL_TEXTBOX_MIN_WIDTH = 120;
+const LABEL_TEXTBOX_MAX_WIDTH = 320;
+const LABEL_TEXTBOX_CHAR_WIDTH = 5.8;
+const LABEL_TEXTBOX_PADDING_X = 8;
+const LABEL_TEXTBOX_PADDING_Y = 6;
+const LABEL_TEXTBOX_FONT_SIZE = 10;
+const LABEL_TEXTBOX_LINE_HEIGHT = 14;
+
+export function shouldRenderLabelTextBox(text: string, subtext: string | null): boolean {
+    return isLongOrMultiline(text) || (subtext !== null && isLongOrMultiline(subtext));
+}
+
+export function computeLabelTextBoxLayout(text: string, subtext: string | null): LabelTextBoxLayout {
+    const lines = wrapLabelText(labelTextBody(text, subtext));
+    const longestLine = Math.max(...lines.map((line) => line.length), 1);
+    const width = clamp(
+        Math.ceil(longestLine * LABEL_TEXTBOX_CHAR_WIDTH + LABEL_TEXTBOX_PADDING_X * 2),
+        LABEL_TEXTBOX_MIN_WIDTH,
+        LABEL_TEXTBOX_MAX_WIDTH,
+    );
+    const height = LABEL_TEXTBOX_PADDING_Y * 2 + lines.length * LABEL_TEXTBOX_LINE_HEIGHT;
+
+    return {
+        lines,
+        width,
+        height,
+        paddingX: LABEL_TEXTBOX_PADDING_X,
+        paddingY: LABEL_TEXTBOX_PADDING_Y,
+        fontSize: LABEL_TEXTBOX_FONT_SIZE,
+        lineHeight: LABEL_TEXTBOX_LINE_HEIGHT,
+    };
+}
+
+function isLongOrMultiline(value: string): boolean {
+    return value.includes('\n') || value.length > LABEL_TEXTBOX_MAX_CHARS;
+}
+
+function labelTextBody(text: string, subtext: string | null): string {
+    if (subtext === null) {
+        return text;
+    }
+    return `${text}\n${subtext}`;
+}
+
+function wrapLabelText(text: string): readonly string[] {
+    const lines = text.split(/\r?\n/).flatMap((line) => wrapLabelLine(line));
+    return lines.length === 0 ? [''] : lines;
+}
+
+function wrapLabelLine(line: string): readonly string[] {
+    if (line.length <= LABEL_TEXTBOX_MAX_CHARS) {
+        return [line];
+    }
+
+    const wrapped: string[] = [];
+    let rest = line.trimEnd();
+    while (rest.length > LABEL_TEXTBOX_MAX_CHARS) {
+        const breakAt = findWrapIndex(rest);
+        wrapped.push(rest.slice(0, breakAt).trimEnd());
+        rest = rest.slice(breakAt).trimStart();
+    }
+    wrapped.push(rest);
+    return wrapped;
+}
+
+function findWrapIndex(text: string): number {
+    const search = text.slice(0, LABEL_TEXTBOX_MAX_CHARS + 1);
+    const spaceIndex = search.lastIndexOf(' ');
+    if (spaceIndex > 0) {
+        return spaceIndex;
+    }
+    return LABEL_TEXTBOX_MAX_CHARS;
+}
+
+function clamp(value: number, min: number, max: number): number {
+    if (value < min) return min;
+    if (value > max) return max;
+    return value;
+}

package/src/preview/ports.ts

@@ -0,0 +1,101 @@
+import type { Component, Point, Wire } from '../model/types';
+
+export type WireBodyHit = Readonly<{
+    wireId: string;
+    position: Point;
+}>;
+
+export type Port = Readonly<{
+    componentId: string;
+    terminalName: string;
+    position: Point;
+}>;
+
+// Flatten every component's terminals into a port list. The position is the
+// raw catalog terminal position — the same coordinate space used in wire
+// endpoints, so an add-wire command built from these positions lands on
+// existing junction / connectivity logic without further mapping.
+export function collectPorts(components: readonly Component[]): readonly Port[] {
+    const ports: Port[] = [];
+    for (const component of components) {
+        for (const terminal of component.terminals) {
+            ports.push({
+                componentId: component.id,
+                terminalName: terminal.name,
+                position: terminal.position,
+            });
+        }
+    }
+    return ports;
+}
+
+// Find the port nearest to `cursor` within `radius` distance, optionally
+// excluding a particular port (used to avoid snapping back onto the wire's
+// own start terminal during a wire-create drag).
+export function findNearestPort<T extends Port>(
+    ports: readonly T[],
+    cursor: Point,
+    radius: number,
+    exclude: { componentId: string; terminalName: string } | null = null,
+): T | null {
+    let best: T | null = null;
+    let bestDistance = radius;
+    for (const port of ports) {
+        if (
+            exclude !== null &&
+            port.componentId === exclude.componentId &&
+            port.terminalName === exclude.terminalName
+        ) {
+            continue;
+        }
+        const dx = port.position.x - cursor.x;
+        const dy = port.position.y - cursor.y;
+        const distance = Math.hypot(dx, dy);
+        if (distance < bestDistance || (best === null && distance <= bestDistance)) {
+            best = port;
+            bestDistance = distance;
+        }
+    }
+    return best;
+}
+
+// Find the wire whose body is closest to `cursor`, within `radius`, and return
+// the projection of the cursor onto that wire. Used to snap a wire-create
+// gesture to a wire body so dropping there auto-forms a T-junction.
+export function findNearestWireBodyHit(
+    wires: readonly Wire[],
+    cursor: Point,
+    radius: number,
+    excludeWireId: string | null = null,
+): WireBodyHit | null {
+    let best: WireBodyHit | null = null;
+    let bestDistance = radius;
+    for (const wire of wires) {
+        if (excludeWireId !== null && wire.id === excludeWireId) {
+            continue;
+        }
+        const projection = projectOntoSegment(cursor, wire.endpoints[0], wire.endpoints[1]);
+        const dx = projection.x - cursor.x;
+        const dy = projection.y - cursor.y;
+        const distance = Math.hypot(dx, dy);
+        if (distance < bestDistance) {
+            best = { wireId: wire.id, position: projection };
+            bestDistance = distance;
+        }
+    }
+    return best;
+}
+
+function projectOntoSegment(p: Point, a: Point, b: Point): Point {
+    const dx = b.x - a.x;
+    const dy = b.y - a.y;
+    if (dx === 0 && dy === 0) {
+        return { x: a.x, y: a.y };
+    }
+    const t = ((p.x - a.x) * dx + (p.y - a.y) * dy) / (dx * dx + dy * dy);
+    const clamped = t < 0 ? 0 : t > 1 ? 1 : t;
+    return {
+        x: Math.round(a.x + clamped * dx),
+        y: Math.round(a.y + clamped * dy),
+    };
+}

package/src/preview/renderable-wires.ts

@@ -0,0 +1,113 @@
+import type { CircuitDocument, Point, Wire } from '../model/types';
+
+export function buildRenderableWires(document: CircuitDocument): readonly Wire[] {
+    const splitCandidates = collectSplitCandidates(document);
+    const result: Wire[] = [];
+
+    for (const wire of document.wires) {
+        const segments = splitWire(wire, splitCandidates);
+        result.push(...segments);
+    }
+
+    return result;
+}
+
+function collectSplitCandidates(document: CircuitDocument): readonly Point[] {
+    const byKey = new Map<string, Point>();
+
+    for (const wire of document.wires) {
+        addPoint(byKey, wire.endpoints[0]);
+        addPoint(byKey, wire.endpoints[1]);
+    }
+
+    for (const component of document.components) {
+        for (const terminal of component.terminals) {
+            addPoint(byKey, terminal.position);
+        }
+    }
+
+    return Array.from(byKey.values());
+}
+
+function splitWire(wire: Wire, candidates: readonly Point[]): readonly Wire[] {
+    const a = wire.endpoints[0];
+    const b = wire.endpoints[1];
+    const points = [a, b];
+
+    for (const candidate of candidates) {
+        if (pointEquals(candidate, a) || pointEquals(candidate, b)) {
+            continue;
+        }
+        if (pointOnSegment(candidate, a, b)) {
+            points.push(candidate);
+        }
+    }
+
+    if (points.length === 2) {
+        return [wire];
+    }
+
+    const ordered = points.slice().sort((p, q) => segmentParameter(p, a, b) - segmentParameter(q, a, b));
+    const segments: Wire[] = [];
+    for (let i = 0; i < ordered.length - 1; i += 1) {
+        const start = ordered[i];
+        const end = ordered[i + 1];
+        if (start === undefined || end === undefined || pointEquals(start, end)) {
+            continue;
+        }
+        segments.push({
+            id: `${wire.id}-${segments.length + 1}`,
+            endpoints: [start, end],
+        });
+    }
+
+    return segments;
+}
+
+function addPoint(points: Map<string, Point>, point: Point): void {
+    const key = pointKey(point);
+    if (!points.has(key)) {
+        points.set(key, point);
+    }
+}
+
+function segmentParameter(point: Point, a: Point, b: Point): number {
+    const dx = b.x - a.x;
+    const dy = b.y - a.y;
+    const lengthSq = dx * dx + dy * dy;
+    if (lengthSq === 0) {
+        return 0;
+    }
+    return ((point.x - a.x) * dx + (point.y - a.y) * dy) / lengthSq;
+}
+
+function pointOnSegment(point: Point, a: Point, b: Point): boolean {
+    const cross = (point.x - a.x) * (b.y - a.y) - (point.y - a.y) * (b.x - a.x);
+    if (cross !== 0) {
+        return false;
+    }
+    const minX = Math.min(a.x, b.x);
+    const maxX = Math.max(a.x, b.x);
+    const minY = Math.min(a.y, b.y);
+    const maxY = Math.max(a.y, b.y);
+    if (minX === maxX && minY === maxY) {
+        return false;
+    }
+    const inXRange = point.x > minX && point.x < maxX;
+    const inYRange = point.y > minY && point.y < maxY;
+    if (minX === maxX) {
+        return inYRange;
+    }
+    if (minY === maxY) {
+        return inXRange;
+    }
+    return inXRange && inYRange;
+}
+
+function pointEquals(a: Point, b: Point): boolean {
+    return a.x === b.x && a.y === b.y;
+}
+
+function pointKey(point: Point): string {
+    return `${point.x},${point.y}`;
+}

package/src/preview/routing.ts

@@ -0,0 +1,15 @@
+import type { Point } from '../model/types';
+
+export function orthogonalPath(a: Point, b: Point): readonly Point[] {
+    if (a.x === b.x || a.y === b.y) {
+        return [a, b];
+    }
+    const dx = Math.abs(b.x - a.x);
+    const dy = Math.abs(b.y - a.y);
+    const corner: Point = dx >= dy ? { x: b.x, y: a.y } : { x: a.x, y: b.y };
+    return [a, corner, b];
+}
+
+export function pointsToSvg(points: readonly Point[]): string {
+    return points.map((p) => `${p.x},${p.y}`).join(' ');
+}

package/src/preview/snap.ts

@@ -0,0 +1,104 @@
+import type { Component, Point, Wire } from '../model/types';
+
+export const DEFAULT_SNAP_RADIUS = 12;
+
+export type SnapResult = Readonly<{
+    origin: Point;
+    snappedTo: Point | null;
+    distance: number;
+}>;
+
+export function findSnap(
+    draggedComponent: Component,
+    candidateOrigin: Point,
+    others: readonly Component[],
+    radius: number = DEFAULT_SNAP_RADIUS,
+    wires: readonly Wire[] = [],
+): SnapResult {
+    const dx = candidateOrigin.x - draggedComponent.origin.x;
+    const dy = candidateOrigin.y - draggedComponent.origin.y;
+    const draggedTerminalKeys = new Set(draggedComponent.terminals.map((t) => pointKey(t.position)));
+
+    let bestDelta: Point | null = null;
+    let bestDistance = Number.POSITIVE_INFINITY;
+    let bestTarget: Point | null = null;
+
+    for (const draggedTerminal of draggedComponent.terminals) {
+        const projected: Point = {
+            x: draggedTerminal.position.x + dx,
+            y: draggedTerminal.position.y + dy,
+        };
+        for (const other of others) {
+            if (other.id === draggedComponent.id) {
+                continue;
+            }
+            for (const terminal of other.terminals) {
+                const ddx = terminal.position.x - projected.x;
+                const ddy = terminal.position.y - projected.y;
+                const distance = Math.hypot(ddx, ddy);
+                if (distance <= radius && distance < bestDistance) {
+                    bestDistance = distance;
+                    bestDelta = { x: ddx, y: ddy };
+                    bestTarget = terminal.position;
+                }
+            }
+        }
+    }
+
+    for (const draggedTerminal of draggedComponent.terminals) {
+        const projected: Point = {
+            x: draggedTerminal.position.x + dx,
+            y: draggedTerminal.position.y + dy,
+        };
+        for (const wire of wires) {
+            if (wireTouchesDraggedTerminal(wire, draggedTerminalKeys)) {
+                continue;
+            }
+            const target = nearestInteriorPointOnSegment(projected, wire.endpoints[0], wire.endpoints[1]);
+            if (target === null) {
+                continue;
+            }
+            const distance = Math.hypot(target.x - projected.x, target.y - projected.y);
+            if (distance <= radius && distance < bestDistance) {
+                bestDistance = distance;
+                bestDelta = { x: target.x - projected.x, y: target.y - projected.y };
+                bestTarget = target;
+            }
+        }
+    }
+
+    if (bestDelta === null || bestTarget === null) {
+        return { origin: candidateOrigin, snappedTo: null, distance: Number.POSITIVE_INFINITY };
+    }
+
+    return {
+        origin: { x: candidateOrigin.x + bestDelta.x, y: candidateOrigin.y + bestDelta.y },
+        snappedTo: bestTarget,
+        distance: bestDistance,
+    };
+}
+
+function wireTouchesDraggedTerminal(wire: Wire, terminalKeys: ReadonlySet<string>): boolean {
+    return terminalKeys.has(pointKey(wire.endpoints[0])) || terminalKeys.has(pointKey(wire.endpoints[1]));
+}
+
+function nearestInteriorPointOnSegment(point: Point, a: Point, b: Point): Point | null {
+    const dx = b.x - a.x;
+    const dy = b.y - a.y;
+    const lengthSq = dx * dx + dy * dy;
+    if (lengthSq === 0) {
+        return null;
+    }
+    const t = ((point.x - a.x) * dx + (point.y - a.y) * dy) / lengthSq;
+    if (t <= 0 || t >= 1) {
+        return null;
+    }
+    return {
+        x: a.x + dx * t,
+        y: a.y + dy * t,
+    };
+}
+
+function pointKey(point: Point): string {
+    return `${point.x},${point.y}`;
+}

package/src/preview/symbols/analog-switch.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-25 -25 50 50" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <!--
+    kind: analog-switch (one element of a CD4066-style bilateral switch)
+    terminals: a (SVG -20,-10), b (SVG 20,-10), ctrl (SVG 0,20)
+    Two contacts with a control input on the bottom — like an SPST but with electronic control.
+  -->
+  <g stroke-width="0.95">
+    <line x1="-20" y1="-10" x2="-7" y2="-10"/>
+    <line x1="7" y1="-10" x2="20" y2="-10"/>
+    <line x1="0" y1="6" x2="0" y2="20"/>
+  </g>
+  <circle cx="-5" cy="-10" r="1.5"/>
+  <circle cx="5" cy="-10" r="1.5"/>
+  <line x1="-5" y1="-10" x2="5" y2="-10" stroke-dasharray="2 2"/>
+  <rect x="-6" y="0" width="12" height="6" rx="1"/>
+  <text x="0" y="-13" font-size="3.5" font-family="ui-sans-serif, system-ui, sans-serif" fill="currentColor" stroke="none" text-anchor="middle">SW</text>
+</svg>

package/src/preview/symbols/battery.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-25 -25 50 50" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <!--
+    kind: battery / DC supply
+    terminals: + (SVG 0,-20), - (SVG 0,20)
+    Long plate = +, short plate = -. Top lead is the + terminal.
+  -->
+  <g stroke-width="0.95">
+    <line x1="0" y1="-20" x2="0" y2="-5"/>
+    <line x1="0" y1="5" x2="0" y2="20"/>
+  </g>
+  <line x1="-7" y1="-5" x2="7" y2="-5"/>
+  <line x1="-3" y1="-2" x2="3" y2="-2"/>
+  <line x1="-7" y1="2" x2="7" y2="2"/>
+  <line x1="-3" y1="5" x2="3" y2="5"/>
+  <text x="-12" y="-4" font-size="6" font-family="ui-sans-serif, system-ui, sans-serif" fill="currentColor" stroke="none">+</text>
+</svg>

package/src/preview/symbols/bbd.svg

@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-35 -25 70 50" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <!--
+    kind: bbd (bucket-brigade delay — MN3007 / MN3008 / MN3205 family)
+    terminals: vdd (-30,-20), vgg (-30,0), vss (-30,20), cp1 (0,-20), cp2 (0,20), in (-30,10), out1 (30,-10), out2 (30,10)
+    DIP-8 style rectangle, "BBD" label and small bucket icon on the face.
+  -->
+  <g stroke-width="0.95">
+    <line x1="-30" y1="-20" x2="-20" y2="-20"/>
+    <line x1="-30" y1="0" x2="-20" y2="0"/>
+    <line x1="-30" y1="20" x2="-20" y2="20"/>
+    <line x1="-30" y1="10" x2="-20" y2="10"/>
+    <line x1="0" y1="-20" x2="0" y2="-15"/>
+    <line x1="0" y1="15" x2="0" y2="20"/>
+    <line x1="20" y1="-10" x2="30" y2="-10"/>
+    <line x1="20" y1="10" x2="30" y2="10"/>
+  </g>
+  <rect x="-20" y="-15" width="40" height="30" rx="2"/>
+  <circle cx="-17" cy="-12" r="1.2" fill="currentColor" stroke="none"/>
+  <text x="0" y="-3" font-size="6" font-family="ui-sans-serif, system-ui, sans-serif" fill="currentColor" stroke="none" text-anchor="middle">BBD</text>
+  <text x="0" y="8" font-size="3.5" font-family="ui-sans-serif, system-ui, sans-serif" fill="currentColor" stroke="none" text-anchor="middle">MN3007</text>
+</svg>

package/src/preview/symbols/bjt-npn.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-25 -25 50 50" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <!--
+    kind: bjt (NPN variant)
+    terminals: collector (SVG 0,-20), base (SVG -20,0), emitter (SVG 10,20)
+  -->
+  <g stroke-width="0.95">
+    <line x1="-20" y1="0" x2="-6" y2="0"/>
+    <line x1="4" y1="-7" x2="0" y2="-20"/>
+    <line x1="4" y1="7" x2="10" y2="20"/>
+  </g>
+  <circle cx="0" cy="0" r="11"/>
+  <line x1="-6" y1="-5" x2="-6" y2="5"/>
+  <line x1="-6" y1="-3" x2="4" y2="-7"/>
+  <line x1="-6" y1="3" x2="4" y2="7"/>
+  <path d="M 4 7 L -0.3 6.9 L 1.2 4.1 Z" fill="currentColor" stroke="none"/>
+</svg>

package/src/preview/symbols/bjt-pnp.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-25 -25 50 50" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <!--
+    kind: bjt (PNP variant)
+    terminals: collector (SVG 0,-20), base (SVG -20,0), emitter (SVG 10,20)
+    Arrow points INWARD (emitter -> base) to distinguish PNP from NPN.
+  -->
+  <g stroke-width="0.95">
+    <line x1="-20" y1="0" x2="-6" y2="0"/>
+    <line x1="4" y1="-7" x2="0" y2="-20"/>
+    <line x1="4" y1="7" x2="10" y2="20"/>
+  </g>
+  <circle cx="0" cy="0" r="11"/>
+  <line x1="-6" y1="-5" x2="-6" y2="5"/>
+  <line x1="-6" y1="-3" x2="4" y2="-7"/>
+  <line x1="-6" y1="3" x2="4" y2="7"/>
+  <path d="M -6 3 L -1.7 3.1 L -3.2 5.9 Z" fill="currentColor" stroke="none"/>
+</svg>

package/src/preview/symbols/capacitor-electrolytic.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-25 -25 50 50" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <!--
+    kind: capacitor (electrolytic variant)
+    terminals: a/+ (SVG 0,-20), b/- (SVG 0,20)
+  -->
+  <g stroke-width="0.95">
+    <line x1="0" y1="-20" x2="0" y2="-3"/>
+    <line x1="0" y1="5" x2="0" y2="20"/>
+  </g>
+  <line x1="-8" y1="-3" x2="8" y2="-3"/>
+  <path d="M -8 3 Q 0 7 8 3"/>
+  <text x="-9" y="-6" font-size="7" font-family="ui-sans-serif, system-ui, sans-serif" fill="currentColor" stroke="none">+</text>
+</svg>

package/src/preview/symbols/capacitor.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-25 -25 50 50" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <!--
+    kind: capacitor
+    terminals: a (SVG 0,-20), b (SVG 0,20)
+  -->
+  <g stroke-width="0.95">
+    <line x1="0" y1="-20" x2="0" y2="-3"/>
+    <line x1="0" y1="3" x2="0" y2="20"/>
+  </g>
+  <line x1="-8" y1="-3" x2="8" y2="-3"/>
+  <line x1="-8" y1="3" x2="8" y2="3"/>
+</svg>

package/src/preview/symbols/current-source.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-25 -25 50 50" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <!--
+    kind: current-source
+    terminals: + (SVG 0,-20), - (SVG 0,20)
+    Arrow points toward + terminal (top) — direction of conventional current flow.
+  -->
+  <g stroke-width="0.95">
+    <line x1="0" y1="-20" x2="0" y2="-9"/>
+    <line x1="0" y1="9" x2="0" y2="20"/>
+  </g>
+  <circle cx="0" cy="0" r="9"/>
+  <line x1="0" y1="5" x2="0" y2="-2"/>
+  <path d="M 0 -5 L -3 0 L 3 0 Z" fill="currentColor" stroke="none"/>
+</svg>