npm package: @runiq/renderer-schematic
Description: Electrical schematic renderer for Runiq with IEEE/IEC standard symbols
Author: Runiq Team
Latest version: 1.2.0

# @runiq/renderer-schematic

Professional electrical schematic renderer for Runiq with IEEE/IEC standard symbols.

## ✨ Features

- **IEEE Standard Symbols** - 36 professional schematic symbols
  - Passive: R, C, L
  - Sources: V (voltage), I (current)
  - Semiconductors: D (diode), LED
  - Transistors: NPN, PNP, NMOS, PMOS
  - Advanced: Op-amp, Transformer
  - **Digital Logic Gates:** AND, OR, NOT, XOR, NAND, NOR, BUFFER, XNOR
  - **3-Input Gates:** AND3, OR3, NAND3, NOR3
  - **Flip-Flops:** D, JK, T
  - **Registers:** 4-bit, 8-bit
  - **Multiplexers:** 4-to-1, 8-to-1 (NEW! 🎉)
  - **Decoders:** 2-to-4, 3-to-8 (NEW! 🎉)
- **Component Rotation** - Rotate components 0°, 90°, 180°, or 270°
- **Orthogonal Wire Routing** - Manhattan-style routing with junction dots
- **Automatic Layout** - Smart component placement with wire routing
- **Ground Normalization** - Automatic GND/VSS symbol rendering
- **Configurable Display** - Control labels, values, net names, and colors
- **SVG Output** - Scalable, embeddable in web pages and documentation
- **Comprehensive Testing** - 68/68 tests passing with full coverage (NEW! 🎉)

## 📦 Installation

```bash
pnpm add @runiq/renderer-schematic
```

## 🚀 Quick Start

```typescript
import { renderSchematic } from '@runiq/renderer-schematic';
import type { ElectricalProfile } from '@runiq/core';

const circuit: ElectricalProfile = {
  type: 'electrical',
  name: 'RC Lowpass Filter',
  nets: [{ name: 'IN' }, { name: 'OUT' }, { name: 'GND' }],
  parts: [
    {
      ref: 'V1',
      type: 'V',
      params: { source: 'SIN(0 1 1k)' },
      pins: ['IN', 'GND'],
    },
    {
      ref: 'R1',
      type: 'R',
      params: { value: '10k' },
      pins: ['IN', 'OUT'],
    },
    {
      ref: 'C1',
      type: 'C',
      params: { value: '1n' },
      pins: ['OUT', 'GND'],
    },
  ],
};

const result = renderSchematic(circuit);
console.log(result.svg); // SVG markup
```

## 🎨 Supported Components

### Passive Components

- **R** - Resistor (IEEE zigzag style)
- **C** - Capacitor (parallel plates)
- **L** - Inductor (coil)

### Sources

- **V** - Voltage Source (circle with +/-)
- **I** - Current Source (circle with arrow)

### Semiconductors

- **D** - Diode (triangle with bar)
- **LED** - Light Emitting Diode (with light rays)

### Transistors (NEW! 🎉)

- **Q_NPN** - NPN Bipolar Junction Transistor
- **Q_PNP** - PNP Bipolar Junction Transistor
- **M_NMOS** - N-Channel MOSFET (enhancement mode)
- **M_PMOS** - P-Channel MOSFET (enhancement mode)

### Advanced Components

- **OPAMP** - Operational Amplifier (triangle with +/- inputs)
- **XFMR** - Transformer (coupled inductors with core)

### Digital Logic Gates (NEW! 🎉)

**Basic 2-Input Gates:**

- **AND** - 2-input AND gate (IEEE distinctive shape: flat left, curved right)
- **OR** - 2-input OR gate (IEEE distinctive shape: curved both sides)
- **NOT** - Inverter (triangle with output bubble)
- **XOR** - 2-input XOR gate (OR shape with extra input curve)
- **NAND** - 2-input NAND gate (AND with output bubble)
- **NOR** - 2-input NOR gate (OR with output bubble)
- **BUFFER** - Non-inverting buffer (triangle without bubble)
- **XNOR** - 2-input XNOR gate (XOR with output bubble) **NEW!** 🎉

**3-Input Gates:** (NEW! 🎉)

- **AND3** - 3-input AND gate (80×50px, wider for 3 inputs)
- **OR3** - 3-input OR gate (80×50px, curved distinctive shape)
- **NAND3** - 3-input NAND gate (AND3 with output bubble)
- **NOR3** - 3-input NOR gate (OR3 with output bubble)

**Flip-Flops:** (NEW! 🎉)

- **DFF** - D Flip-Flop (rectangular with clock triangle, 80×60px)
- **JKFF** - JK Flip-Flop (rectangular with clock triangle, 80×70px)
- **TFF** - T Flip-Flop (rectangular with clock triangle, 80×60px)

**Registers:** (NEW! 🎉)

- **REG4** - 4-bit Register (100×80px, D0-D3 inputs, Q0-Q3 outputs, CLK, EN)
- **REG8** - 8-bit Register (120×100px, D0-D7 inputs, Q0-Q7 outputs, CLK, EN)

**Multiplexers:** (NEW! 🎉)

- **MUX41** - 4-to-1 Multiplexer (60×80px, trapezoidal, D0-D3 inputs, S0-S1 select, Y output)
- **MUX81** - 8-to-1 Multiplexer (70×120px, trapezoidal, D0-D7 inputs, S0-S2 select, Y output)

**Decoders:** (NEW! 🎉)

- **DEC24** - 2-to-4 Decoder (60×70px, inverted trapezoid, A0-A1 address, EN, Y0-Y3 outputs)
- **DEC38** - 3-to-8 Decoder (70×110px, inverted trapezoid, A0-A2 address, EN, Y0-Y7 outputs)

### Symbols

- **GND** - Ground (IEEE earth symbol)
- **JUNCTION** - Wire junction dot

## ⚙️ Options

```typescript
interface SchematicOptions {
  gridSize?: number; // Grid spacing (default: 50)
  wireColor?: string; // Wire color (default: '#000000')
  componentColor?: string; // Component color (default: '#000000')
  showNetLabels?: boolean; // Show net names (default: true)
  showValues?: boolean; // Show component values (default: true)
  showReferences?: boolean; // Show component refs (default: true)
  orientation?: 'horizontal' | 'vertical'; // Layout direction (default: 'horizontal')
  routing?: 'direct' | 'orthogonal'; // Wire routing style (default: 'direct') (NEW! 🎉)
}
```

### Component Rotation (NEW! 🎉)

Rotate components by adding a `rotation` parameter (0, 90, 180, or 270 degrees):

```typescript
const circuit: ElectricalProfile = {
  type: 'electrical',
  name: 'H-Bridge Motor Driver',
  nets: [
    { name: 'VCC' },
    { name: 'MOTOR_P' },
    { name: 'MOTOR_N' },
    { name: 'GND' },
  ],
  parts: [
    // High-side PMOS rotated 90°
    {
      ref: 'M1',
      type: 'M_PMOS',
      params: { model: 'IRF9530', rotation: 90 },
      pins: ['MOTOR_P', 'CTRL_A', 'VCC', 'VCC'],
    },
    // Low-side NMOS rotated 270°
    {
      ref: 'M3',
      type: 'M_NMOS',
      params: { model: 'IRF530', rotation: 270 },
      pins: ['MOTOR_P', 'CTRL_A', 'GND', 'GND'],
    },
    // Motor components rotated 90° for horizontal layout
    {
      ref: 'L1',
      type: 'L',
      params: { value: '10m', rotation: 90 },
      pins: ['MOTOR_P', 'MOTOR_N'],
    },
  ],
};
```

**Rotation Features:**

- Valid angles: 0°, 90°, 180°, 270° only
- Rotates entire component including symbol and labels
- Maintains terminal connectivity
- Invalid angles show warning and default to 0°

### Orthogonal Wire Routing (NEW! 🎉)

Enable Manhattan-style routing with junction dots for cleaner schematics:

```typescript
const result = renderSchematic(circuit, {
  routing: 'orthogonal', // Manhattan routing
  showNetLabels: true,
  showValues: true,
});
```

**Routing Modes:**

- `'direct'` (default): Straight-line connections between terminals
- `'orthogonal'`: Manhattan-style routing with horizontal bus lines and vertical drops

**Orthogonal Routing Features:**

- **Multi-terminal nets** (3+ connections): Common horizontal bus with vertical drops
- **Two-terminal nets**: Horizontal → vertical → horizontal through midpoint
- **Junction dots**: Automatically rendered at wire intersections (3px circles)
- **Grid-snapped**: Bus lines align to grid for clean appearance

### Example with All New Options

```typescript
const result = renderSchematic(circuit, {
  routing: 'orthogonal', // Manhattan routing (NEW!)
  gridSize: 100, // Larger spacing
  wireColor: '#0066cc', // Blue wires
  componentColor: '#cc0000', // Red components
  showNetLabels: true, // Show net names
  showValues: true, // Show "10k", "1n", etc.
  showReferences: true, // Show "R1", "C1", etc.
  orientation: 'vertical', // Vertical layout
});
```

## 📊 Usage Examples

### Voltage Divider

```typescript
const divider: ElectricalProfile = {
  type: 'electrical',
  name: 'Voltage Divider',
  nets: [{ name: 'VIN' }, { name: 'VOUT' }, { name: 'GND' }],
  parts: [
    { ref: 'V1', type: 'V', params: { value: '12' }, pins: ['VIN', 'GND'] },
    { ref: 'R1', type: 'R', params: { value: '10k' }, pins: ['VIN', 'VOUT'] },
    { ref: 'R2', type: 'R', params: { value: '10k' }, pins: ['VOUT', 'GND'] },
  ],
};

const svg = renderSchematic(divider);
```

### RLC Resonant Circuit

```typescript
const rlc: ElectricalProfile = {
  type: 'electrical',
  name: 'RLC Resonant',
  nets: [{ name: 'VIN' }, { name: 'N1' }, { name: 'GND' }],
  parts: [
    {
      ref: 'V1',
      type: 'V',
      params: { source: 'AC 1 1k' },
      pins: ['VIN', 'GND'],
    },
    { ref: 'R1', type: 'R', params: { value: '100' }, pins: ['VIN', 'N1'] },
    { ref: 'L1', type: 'L', params: { value: '10m' }, pins: ['N1', 'GND'] },
    { ref: 'C1', type: 'C', params: { value: '1u' }, pins: ['N1', 'GND'] },
  ],
};
```

### LED Circuit

```typescript
const led: ElectricalProfile = {
  type: 'electrical',
  name: 'LED with Current Limiting',
  nets: [{ name: 'VCC' }, { name: 'LED_ANODE' }, { name: 'GND' }],
  parts: [
    { ref: 'V1', type: 'V', params: { value: '5' }, pins: ['VCC', 'GND'] },
    {
      ref: 'R1',
      type: 'R',
      params: { value: '220' },
      pins: ['VCC', 'LED_ANODE'],
    },
    {
      ref: 'D1',
      type: 'LED',
      params: { value: '2V' },
      pins: ['LED_ANODE', 'GND'],
    },
  ],
};
```

### Common-Emitter Amplifier (NEW!)

```typescript
const amplifier: ElectricalProfile = {
  type: 'electrical',
  name: 'Common Emitter Amplifier',
  nets: [
    { name: 'VCC' },
    { name: 'VIN' },
    { name: 'VOUT' },
    { name: 'VBIAS' },
    { name: 'GND' },
  ],
  parts: [
    { ref: 'V1', type: 'V', params: { value: '12' }, pins: ['VCC', 'GND'] },
    {
      ref: 'V2',
      type: 'V',
      params: { source: 'SIN(0 0.01 1k)' },
      pins: ['VIN', 'GND'],
    },
    { ref: 'C1', type: 'C', params: { value: '10u' }, pins: ['VIN', 'VBIAS'] },
    { ref: 'R1', type: 'R', params: { value: '100k' }, pins: ['VCC', 'VBIAS'] },
    { ref: 'R2', type: 'R', params: { value: '22k' }, pins: ['VBIAS', 'GND'] },
    {
      ref: 'Q1',
      type: 'Q_NPN',
      params: { model: '2N2222' },
      pins: ['VOUT', 'VBIAS', 'GND'],
    },
    { ref: 'R3', type: 'R', params: { value: '4.7k' }, pins: ['VCC', 'VOUT'] },
    { ref: 'C2', type: 'C', params: { value: '10u' }, pins: ['VOUT', 'GND'] },
  ],
};
```

### CMOS Inverter (NEW!)

```typescript
const inverter: ElectricalProfile = {
  type: 'electrical',
  name: 'CMOS Inverter',
  nets: [{ name: 'VDD' }, { name: 'VIN' }, { name: 'VOUT' }, { name: 'GND' }],
  parts: [
    { ref: 'V1', type: 'V', params: { value: '5' }, pins: ['VDD', 'GND'] },
    {
      ref: 'V2',
      type: 'V',
      params: { source: 'PULSE(0 5 0 1n 1n 50n 100n)' },
      pins: ['VIN', 'GND'],
    },
    // PMOS pull-up: Drain, Gate, Source, Bulk
    {
      ref: 'M1',
      type: 'M_PMOS',
      params: { model: 'PMOS', w: '20u', l: '1u' },
      pins: ['VOUT', 'VIN', 'VDD', 'VDD'],
    },
    // NMOS pull-down: Drain, Gate, Source, Bulk
    {
      ref: 'M2',
      type: 'M_NMOS',
      params: { model: 'NMOS', w: '10u', l: '1u' },
      pins: ['VOUT', 'VIN', 'GND', 'GND'],
    },
    { ref: 'C1', type: 'C', params: { value: '1p' }, pins: ['VOUT', 'GND'] },
  ],
};
```

### H-Bridge Motor Driver with Rotation and Orthogonal Routing (NEW! 🎉)

This example demonstrates both component rotation and orthogonal wire routing:

```typescript
const hBridge: ElectricalProfile = {
  type: 'electrical',
  name: 'H-Bridge Motor Driver',
  nets: [
    { name: 'VCC' },
    { name: 'CTRL_A' },
    { name: 'CTRL_B' },
    { name: 'MOTOR_P' },
    { name: 'MOTOR_N' },
    { name: 'GND' },
  ],
  parts: [
    // Power supply
    { ref: 'V1', type: 'V', params: { value: '12' }, pins: ['VCC', 'GND'] },

    // Control signals
    {
      ref: 'V2',
      type: 'V',
      params: { source: 'PULSE(0 5 0 1n 1n 100u 200u)' },
      pins: ['CTRL_A', 'GND'],
    },
    {
      ref: 'V3',
      type: 'V',
      params: { source: 'PULSE(0 5 100u 1n 1n 100u 200u)' },
      pins: ['CTRL_B', 'GND'],
    },

    // H-Bridge: High-side MOSFETs (PMOS) - rotated 90°
    {
      ref: 'M1',
      type: 'M_PMOS',
      params: { model: 'IRF9530', w: '50u', l: '2u', rotation: 90 },
      pins: ['MOTOR_P', 'CTRL_A', 'VCC', 'VCC'],
    },
    {
      ref: 'M2',
      type: 'M_PMOS',
      params: { model: 'IRF9530', w: '50u', l: '2u', rotation: 90 },
      pins: ['MOTOR_N', 'CTRL_B', 'VCC', 'VCC'],
    },

    // H-Bridge: Low-side MOSFETs (NMOS) - rotated 270°
    {
      ref: 'M3',
      type: 'M_NMOS',
      params: { model: 'IRF530', w: '100u', l: '2u', rotation: 270 },
      pins: ['MOTOR_P', 'CTRL_A', 'GND', 'GND'],
    },
    {
      ref: 'M4',
      type: 'M_NMOS',
      params: { model: 'IRF530', w: '100u', l: '2u', rotation: 270 },
      pins: ['MOTOR_N', 'CTRL_B', 'GND', 'GND'],
    },

    // Motor (inductor + resistor) - rotated 90° for horizontal layout
    {
      ref: 'L1',
      type: 'L',
      params: { value: '10m', rotation: 90 },
      pins: ['MOTOR_P', 'MOTOR_N'],
    },
    {
      ref: 'R1',
      type: 'R',
      params: { value: '5', rotation: 90 },
      pins: ['MOTOR_P', 'MOTOR_N'],
    },
  ],
};

// Render with orthogonal routing for clean wire layout
const result = renderSchematic(hBridge, {
  routing: 'orthogonal', // Manhattan-style routing with junction dots
  showValues: true,
  showReferences: true,
  showNetLabels: true,
});

// Output includes:
// - 6 rotated components (4 MOSFETs + L + R)
// - 11 junction dots at wire intersections
// - Clean horizontal bus lines with vertical drops
// - Professional H-Bridge topology layout
```

### Digital Logic Circuits (NEW! 🎉)

The schematic renderer now supports IEEE/ANSI standard logic gate symbols for digital circuit design:

#### Half Adder

```typescript
const halfAdder: ElectricalProfile = {
  type: 'electrical',
  name: 'Half Adder',
  nets: [{ name: 'A' }, { name: 'B' }, { name: 'SUM' }, { name: 'CARRY' }],
  parts: [
    { ref: 'U1', type: 'XOR', params: {}, pins: ['A', 'B', 'SUM'] },
    { ref: 'U2', type: 'AND', params: {}, pins: ['A', 'B', 'CARRY'] },
  ],
};

const svg = renderSchematic(halfAdder, {
  routing: 'orthogonal',
  showReferences: true,
  showNetLabels: true,
});
```

#### Full Adder

```typescript
const fullAdder: ElectricalProfile = {
  type: 'electrical',
  name: 'Full Adder',
  nets: [
    { name: 'A' },
    { name: 'B' },
    { name: 'CIN' },
    { name: 'SUM' },
    { name: 'COUT' },
    { name: 'XOR1_OUT' },
    { name: 'AND1_OUT' },
    { name: 'AND2_OUT' },
  ],
  parts: [
    // First half adder
    { ref: 'U1', type: 'XOR', params: {}, pins: ['A', 'B', 'XOR1_OUT'] },
    { ref: 'U2', type: 'XOR', params: {}, pins: ['XOR1_OUT', 'CIN', 'SUM'] },

    // Carry logic
    { ref: 'U3', type: 'AND', params: {}, pins: ['A', 'B', 'AND1_OUT'] },
    {
      ref: 'U4',
      type: 'AND',
      params: {},
      pins: ['XOR1_OUT', 'CIN', 'AND2_OUT'],
    },
    {
      ref: 'U5',
      type: 'OR',
      params: {},
      pins: ['AND1_OUT', 'AND2_OUT', 'COUT'],
    },
  ],
};
```

#### 2-to-4 Decoder

```typescript
const decoder: ElectricalProfile = {
  type: 'electrical',
  name: '2-to-4 Decoder',
  nets: [
    { name: 'A0' },
    { name: 'A1' },
    { name: 'A0_N' },
    { name: 'A1_N' },
    { name: 'Y0' },
    { name: 'Y1' },
    { name: 'Y2' },
    { name: 'Y3' },
  ],
  parts: [
    // Inverters
    { ref: 'U1', type: 'NOT', params: {}, pins: ['A0', 'A0_N'] },
    { ref: 'U2', type: 'NOT', params: {}, pins: ['A1', 'A1_N'] },

    // Output gates
    { ref: 'U3', type: 'AND', params: {}, pins: ['A0_N', 'A1_N', 'Y0'] },
    { ref: 'U4', type: 'AND', params: {}, pins: ['A0', 'A1_N', 'Y1'] },
    { ref: 'U5', type: 'AND', params: {}, pins: ['A0_N', 'A1', 'Y2'] },
    { ref: 'U6', type: 'AND', params: {}, pins: ['A0', 'A1', 'Y3'] },
  ],
};
```

#### SR Latch

```typescript
const srLatch: ElectricalProfile = {
  type: 'electrical',
  name: 'SR Latch (NAND)',
  nets: [{ name: 'S' }, { name: 'R' }, { name: 'Q' }, { name: 'Q_N' }],
  parts: [
    // Cross-coupled NAND gates
    { ref: 'U1', type: 'NAND', params: {}, pins: ['S', 'Q_N', 'Q'] },
    { ref: 'U2', type: 'NAND', params: {}, pins: ['R', 'Q', 'Q_N'] },
  ],
};
```

**Digital Gate Features:**

- **IEEE/ANSI Distinctive Shapes**: Authentic gate symbols (curved OR, flat AND, etc.)
- **Inverter Bubbles**: 3px circles on NOT, NAND, NOR outputs
- **Proper Terminal Naming**: A, B for inputs; Y for output
- **Scalable SVG**: Perfect for documentation and web display
- **All 7 Gate Types**: AND, OR, NOT, XOR, NAND, NOR, BUFFER

## 🔧 Complete Workflow

### 1. Write Runiq Circuit

```runiq
electrical "RC Filter" {
  net IN, OUT, GND

  part V1 type:V source:"SIN(0 1 1k)" pins:(IN,GND)
  part R1 type:R value:"10k" pins:(IN,OUT)
  part C1 type:C value:"1n" pins:(OUT,GND)

  analysis tran "0 5m"
}
```

### 2. Parse and Render

```typescript
import { parse } from '@runiq/parser-dsl';
import { renderSchematic } from '@runiq/renderer-schematic';

const content = await fs.readFile('rc-filter.runiq', 'utf-8');
const parseResult = parse(content);

const ElectricalProfile = parseResult.document.profiles.find(
  (p) => p.type === 'electrical'
);

const schematic = renderSchematic(ElectricalProfile);

await fs.writeFile('rc-filter.svg', schematic.svg);
```

### 3. View in Browser

```html
<!DOCTYPE html>
<html>
  <body>
    <h1>RC Lowpass Filter</h1>
    <img src="rc-filter.svg" alt="RC Filter Schematic" />
  </body>
</html>
```

## 🎓 Symbol Details

### Resistor (IEEE Style)

```
    ┌─┐  ┌─┐  ┌─┐  ┌─┐
────┤ └──┘ └──┘ └──┘ └──────
```

### Capacitor (Parallel Plates)

```
────┤  ├────
    │  │
```

### Inductor (Coil)

```
    ╭──╮╭──╮╭──╮
────╯  ╰╯  ╰╯  ╰────
```

### Voltage Source

```
     ┌───┐
     │ + │
─────┤   ├─────
     │ - │
     └───┘
```

### Ground (IEEE)

```
    │
    ├───
     ──
      ─
```

## 📈 Advanced Features

### Custom Component Placement

```typescript
// Components are automatically placed on a grid
// Use gridSize to control spacing

const tight = renderSchematic(circuit, { gridSize: 30 }); // Compact
const normal = renderSchematic(circuit, { gridSize: 50 }); // Default
const spacious = renderSchematic(circuit, { gridSize: 100 }); // Roomy
```

### Vertical Layouts

```typescript
// Good for power supply schematics flowing top-to-bottom
const vertical = renderSchematic(circuit, { orientation: 'vertical' });
```

### Minimal Schematics

```typescript
// Show only essential information
const minimal = renderSchematic(circuit, {
  showNetLabels: false,
  showReferences: false,
  showValues: true, // Keep values for component identification
});
```

### Presentation Mode

```typescript
// High contrast for slides
const presentation = renderSchematic(circuit, {
  wireColor: '#000000',
  componentColor: '#000000',
  showNetLabels: false, // Reduce clutter
  gridSize: 80, // Larger spacing
});
```

## 🧪 Testing

Run the comprehensive test suite:

```bash
cd packages/renderer-schematic
pnpm test
```

Test coverage:

- ✅ Basic component rendering (4 tests)
- ✅ Ground symbol handling (2 tests)
- ✅ Wire routing and labels (3 tests)
- ✅ Component labels and values (4 tests)
- ✅ Customization options (3 tests)
- ✅ Error handling (3 tests)
- ✅ Complex circuits (2 tests)
- ✅ Transistor symbols (4 tests)
- ✅ Advanced symbols (2 tests)
- ✅ Component rotation (5 tests)
- ✅ Orthogonal routing (3 tests)
- ✅ Logic gate symbols (9 tests)
- ✅ **Advanced digital components (14 tests)**
  - XNOR gates
  - 3-input gates (AND3, OR3, NAND3, NOR3)
  - Flip-flops (D, JK, T)
  - Registers (4-bit, 8-bit)
  - Complex circuits (counter, comparator, etc.)
- ✅ **Multiplexers and Decoders (8 tests)** **NEW!** 🎉
  - 4-to-1 and 8-to-1 multiplexers
  - 2-to-4 and 3-to-8 decoders
  - ALU data path with MUX
  - Memory address decoder
  - Data selectors and demultiplexers

**Total: 68/68 tests passing** ✅

## 📝 Rendering Examples

Generate SVG schematics from example circuits:

```bash
pnpm render:examples
```

Output:

```
⚡ Runiq → Schematic SVG Rendering Test

✅ led-circuit.svg (3 components)
✅ rc-filter.svg (3 components)
✅ rl-high-pass.svg (3 components)
✅ rlc-resonant.svg (4 components)
✅ voltage-divider.svg (3 components)
```

## 🔬 Integration with SPICE Workflow

```typescript
import { parse } from '@runiq/parser-dsl';
import { toSpice } from '@runiq/export-spice';
import { renderSchematic } from '@runiq/renderer-schematic';

// Parse circuit
const result = parse(circuitDsl);
const profile = result.document.profiles[0];

// Generate schematic diagram
const schematic = renderSchematic(profile);
await fs.writeFile('circuit.svg', schematic.svg);

// Generate SPICE netlist
const spice = toSpice(profile);
await fs.writeFile('circuit.cir', spice);

// Now you have both visual and simulation-ready outputs!
```

## 🎨 Styling

The generated SVG includes CSS classes for customization:

```css
.schematic-wire {
  stroke: #000000;
  stroke-width: 2;
  fill: none;
}

.schematic-component {
  color: #000000;
}

.schematic-label {
  font-family: sans-serif;
  font-size: 12px;
  fill: #000000;
}

.schematic-value {
  font-family: sans-serif;
  font-size: 10px;
  fill: #000000;
}

.schematic-net-label {
  font-family: sans-serif;
  font-size: 10px;
  fill: #0066cc;
}
```

## ⚠️ Current Limitations

- **Layout:** Simple linear placement (horizontal or vertical)
- **Routing:** ~~Direct connections~~ Now supports orthogonal routing! ✅
- **Components:** ~~Basic set~~ Now includes 22 symbols (electrical + digital)! ✅
- **Orientation:** ~~Fixed~~ Now supports 0°/90°/180°/270° rotation! ✅

## 🚀 Future Enhancements

- [x] ~~Smart auto-routing (orthogonal lines)~~ **DONE!** ✅
- [x] ~~Component rotation (0°, 90°, 180°, 270°)~~ **DONE!** ✅
- [x] ~~More components (transistors, MOSFETs, op-amps)~~ **DONE!** ✅
- [x] ~~Digital logic gates~~ **DONE!** ✅
- [ ] Grid-based manual placement
- [ ] Multi-net junctions (enhanced)
- [ ] Hierarchical subcircuits
- [ ] Export to PNG/PDF
- [ ] 3+ input logic gates
- [ ] Flip-flops and registers

## 🤝 Comparison with Other Tools

| Feature                  | Runiq | KiCad   | Fritzing | LTspice |
| ------------------------ | ----- | ------- | -------- | ------- |
| Text-based               | ✅    | ❌      | ❌       | ❌      |
| Auto-layout              | ✅    | ❌      | Limited  | ❌      |
| Version control friendly | ✅    | Limited | Limited  | Limited |
| SVG output               | ✅    | ✅      | ✅       | ❌      |
| SPICE export             | ✅    | ✅      | ❌       | ✅      |
| Web rendering            | ✅    | ❌      | ❌       | ❌      |
| IEEE symbols             | ✅    | ✅      | ❌       | ✅      |

## 📚 Resources

- [IEEE Standard 315](https://standards.ieee.org/standard/315-1975.html) - Graphic Symbols for Electrical and Electronics Diagrams
- [IEC 60617](https://en.wikipedia.org/wiki/IEC_60617) - Graphical symbols for diagrams
- [SPICE Quick Reference](http://www.seas.upenn.edu/~jan/spice/spice.quick.html)

## 📄 License

Part of the Runiq project. See main repository for license details.

## 🎉 Status

**Current Version: 0.4.0**

- ✅ Core schematic rendering
- ✅ **IEEE-standard symbols (36 total!)** **NEW TOTAL!** 🎉
- ✅ Digital logic gates (8 basic gates)
- ✅ 3-input logic gates (AND3, OR3, NAND3, NOR3)
- ✅ Flip-flops (D, JK, T)
- ✅ Registers (4-bit, 8-bit)
- ✅ **Multiplexers (4-to-1, 8-to-1)** **NEW!** 🎉
- ✅ **Decoders (2-to-4, 3-to-8)** **NEW!** 🎉
- ✅ Component rotation (0°/90°/180°/270°)
- ✅ Orthogonal wire routing with junction dots
- ✅ Automatic layout
- ✅ Wire routing
- ✅ Ground symbols
- ✅ Component/net labels
- ✅ **68/68 tests passing** **NEW!** 🎉
- ✅ **19+ example schematics rendered** **NEW!** 🎉

**Complete digital component library!** 🚀
**Ready for production use!** ✅