Initial commit — wiring diagram maker with full feature set

- FastAPI + SQLite backend with routers for diagrams, devices, wires,
  bundles, connectors, export, and Octopart/Nexar search
- Konva.js canvas: ortho/direct/curved routing, wire crossings, harness
  mode, snap-to-grid, multi-select, drag, resize, undo
- Wire features: color/stripe, twisted pair helix, shielded glow,
  gauge size label, multi-core bundle grouping, length/unit tracking
- Device library: connector, terminal block, cable, splice, label, group,
  relay, fuse, switch, component with custom connector support
- Exports: BOM CSV, assembly TXT, JSON, formboard layout, PNG image
- Auto-migration for schema changes via ALTER TABLE at startup

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.gitignore

@@ -0,0 +1,25 @@
+# Python
+__pycache__/
+*.pyc
+*.pyo
+*.pyd
+.Python
+*.egg-info/
+dist/
+build/
+.venv/
+venv/
+env/
+
+# Database (contains user data — don't version control)
+*.db
+*.sqlite
+*.sqlite3
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Editor
+.vscode/
+*.swp

ROADMAP.md

@@ -0,0 +1,57 @@
+# WireDraw Feature Roadmap
+
+## Backlog (work top-to-bottom)
+
+### Routing & Canvas
+- [x] 11. **Curved / arc routing** — third route mode (∿ Curved) that draws smooth bezier curves instead of right-angle or straight; toggle alongside Ortho/Direct
+- [x] 12. **Grid snap** — optional snap-to-grid (10px); toggle button in toolbar + G shortcut
+- [x] 13. **Straighten wire** — right-click a wire → "Straighten" clears all saved waypoints and re-routes from scratch
+- [x] 14. **Zoom to selection** — right-click multi-select → "Zoom to selection"; Shift+F shortcut
+- [x] 15. **Wire labels on canvas** — wire label + length rendered mid-wire as a small tag
+
+### Right-Click Menu Additions
+- [ ] 16. **Align & distribute** — right-click multi-select → Align Left / Align Right / Align Top / Align Bottom / Distribute Horizontally / Distribute Vertically
+- [ ] 17. **Send to back / Bring to front** — right-click any device → layer order shortcuts (especially useful for Section Boxes)
+- [ ] 18. **Copy wire properties** — right-click a wire → "Copy style"; then right-click another wire → "Paste style" to apply color/gauge/stripe
+- [ ] 19. **Select all wires on net** — right-click a wire → "Select all on net" highlights every wire sharing the same wire label/net name
+- [ ] 20. **Lock device** — right-click → "Lock position" prevents accidental moves; locked devices show a padlock badge
+
+### Productivity
+- [ ] 21. **Find / search** — toolbar search box filters devices by reference/label and highlights matches on canvas; Ctrl+F shortcut
+- [ ] 22. **Import JSON** — drag-and-drop or File→Import a previously exported JSON to restore a diagram
+- [ ] 23. **Duplicate diagram** — diagram list context menu → "Duplicate" clones all devices and wires under a new name
+- [ ] 24. **DRC / design-rule check** — one-click check that flags: unconnected pins, duplicate references, wires with no length set, missing part numbers; results shown in a panel
+- [ ] 25. **Pin part numbers** — each pin row in the properties panel has a "Contact P/N" field; shows up correctly in BOM export as a separate line item
+
+- [x] 1. **Right-click context menu** — quick actions on devices (duplicate, delete, add pin, save to library) and wires (delete, clear waypoints)
+- [x] 2. **Multiple sheets per project** — each diagram can have named pages/sheets; off-page connector stubs link nets across sheets
+- [x] 3. **Grouping / section box** — draw a labeled rectangle around any area of the canvas for visual organization
+- [ ] 4. **Pin part numbers** — each pin on a device has its own contact/terminal part number; shows up correctly in BOM export
+- [ ] 5. **Signal names** — net-level labels independent of wire labels; a signal name can span multiple wires; clicking a signal highlights all wires on that net
+- [x] 6. **Shielded cable marker** — flag on a wire/cable indicating shielding; renders as a dashed outer outline; shows in BOM and cutlist
+- [x] 7. **Twisted pair marker** — flag + twist pitch field for CAN-bus and differential signal pairs; renders as a helical decoration; shows in cutlist
+- [x] 8. **Multi-conductor cables** — a cable object that groups N wires under one jacket; single cable part number in BOM; conductors shown as child wires
+- [x] 9. **1:1 formboard view** — a separate view/export where wire routing lengths are true scale so the diagram can be printed and used as a build board
+- [x] 10. **Octopart API integration** — part number lookup & validation against live catalog; auto-fill manufacturer, description, and datasheet link
+
+## Completed
+- [x] Octopart/Nexar integration (🔍 button on Part Number; auto-fills manufacturer, description, datasheet; BOM export includes description+datasheet columns)
+- [x] Multi-conductor cables (cable device type; jacket + conductor row rendering; conductor color/name editor; cable section in BOM & assembly)
+- [x] Twisted pair marker (checkbox + pitch field; white helix overlay on wire; stored in DB)
+- [x] Multiple sheets per project (tab bar, add/rename/delete, per-sheet devices & wires)
+- [x] Connector / device library with drag-to-canvas
+- [x] Custom connector CRUD (modal + backend)
+- [x] Wire drawing with ortho/direct routing and waypoints
+- [x] Wire jump arcs at crossings
+- [x] Multi-select + rubber-band selection
+- [x] Multi-device drag (wires follow)
+- [x] Resize handles on devices
+- [x] Text wrapping + font size per device
+- [x] Copy / paste / duplicate
+- [x] Undo (Ctrl+Z / button)
+- [x] BOM CSV export
+- [x] Assembly TXT export
+- [x] JSON export
+- [x] PNG export
+- [x] Wire properties: color, stripe, gauge, length, notes
+- [x] Pin side switching + add/remove pins

backend/app/database.py

@@ -0,0 +1,21 @@
+from sqlalchemy import create_engine
+from sqlalchemy.orm import sessionmaker, DeclarativeBase
+import os
+
+DB_PATH = os.path.join(os.path.dirname(__file__), "..", "wiring.db")
+DATABASE_URL = f"sqlite:///{os.path.normpath(DB_PATH)}"
+
+engine = create_engine(DATABASE_URL, connect_args={"check_same_thread": False})
+SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
+
+
+class Base(DeclarativeBase):
+    pass
+
+
+def get_db():
+    db = SessionLocal()
+    try:
+        yield db
+    finally:
+        db.close()

backend/app/main.py

@@ -0,0 +1,90 @@
+import os
+
+from fastapi import FastAPI, Request
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import FileResponse, JSONResponse
+from fastapi.staticfiles import StaticFiles
+from sqlalchemy import text, inspect as sa_inspect
+
+from .database import Base, engine, SessionLocal
+from .routers import bundles, connectors, diagrams, devices, export, octopart, wires
+
+Base.metadata.create_all(bind=engine)
+
+# Lightweight column migrations (SQLite ALTER TABLE IF NOT EXISTS unsupported)
+def _migrate():
+    import sys
+
+    # ── Column additions ────────────────────────────────────────────────────────
+    try:
+        with engine.connect() as conn:
+            def _cols(table):
+                return {c["name"] for c in sa_inspect(engine).get_columns(table)}
+
+            if "waypoints" not in _cols("wires"):
+                conn.execute(text("ALTER TABLE wires ADD COLUMN waypoints TEXT DEFAULT '[]'"))
+                conn.commit()
+            if "sheet_id" not in _cols("devices"):
+                conn.execute(text("ALTER TABLE devices ADD COLUMN sheet_id INTEGER REFERENCES sheets(id)"))
+                conn.commit()
+            if "sheet_id" not in _cols("wires"):
+                conn.execute(text("ALTER TABLE wires ADD COLUMN sheet_id INTEGER REFERENCES sheets(id)"))
+                conn.commit()
+            if "twisted_pair" not in _cols("wires"):
+                conn.execute(text("ALTER TABLE wires ADD COLUMN twisted_pair INTEGER DEFAULT 0"))
+                conn.commit()
+            if "twist_pitch" not in _cols("wires"):
+                conn.execute(text("ALTER TABLE wires ADD COLUMN twist_pitch REAL DEFAULT 16.0"))
+                conn.commit()
+            if "shielded" not in _cols("wires"):
+                conn.execute(text("ALTER TABLE wires ADD COLUMN shielded INTEGER DEFAULT 0"))
+                conn.commit()
+            if "bundle_id" not in _cols("wires"):
+                conn.execute(text("ALTER TABLE wires ADD COLUMN bundle_id INTEGER REFERENCES wire_bundles(id)"))
+                conn.commit()
+            if "show_size_label" not in _cols("wires"):
+                conn.execute(text("ALTER TABLE wires ADD COLUMN show_size_label INTEGER DEFAULT 0"))
+                conn.commit()
+    except Exception as e:
+        print(f"[migrate] column error: {e}", file=sys.stderr)
+
+_migrate()
+
+app = FastAPI(title="Wiring Diagram Maker", version="1.0.0")
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+app.include_router(bundles.router,  prefix="/api/bundles")
+app.include_router(diagrams.router, prefix="/api/diagrams")
+app.include_router(devices.router,  prefix="/api/devices")
+app.include_router(wires.router,    prefix="/api/wires")
+app.include_router(octopart.router, prefix="/api/octopart")
+app.include_router(export.router,   prefix="/api/export")
+app.include_router(connectors.router, prefix="/api/connectors")
+
+FRONTEND_DIR = os.path.normpath(
+    os.path.join(os.path.dirname(__file__), "..", "..", "frontend")
+)
+
+if os.path.isdir(FRONTEND_DIR):
+    for _sub in ("css", "js"):
+        _d = os.path.join(FRONTEND_DIR, _sub)
+        if os.path.isdir(_d):
+            app.mount(f"/{_sub}", StaticFiles(directory=_d), name=_sub)
+
+    _index = os.path.join(FRONTEND_DIR, "index.html")
+
+    @app.get("/")
+    async def _root():
+        return FileResponse(_index)
+
+    @app.exception_handler(404)
+    async def _spa_fallback(request: Request, exc):
+        if request.url.path.startswith("/api"):
+            return JSONResponse(status_code=404, content={"detail": "Not Found"})
+        return FileResponse(_index)

backend/app/models.py

@@ -0,0 +1,103 @@
+from sqlalchemy import Column, Integer, String, Float, JSON, ForeignKey, DateTime, Text, Boolean
+from sqlalchemy.orm import relationship
+from .database import Base
+import datetime
+
+
+class Diagram(Base):
+    __tablename__ = "diagrams"
+    id = Column(Integer, primary_key=True, index=True)
+    name = Column(String, nullable=False, default="Untitled Diagram")
+    description = Column(Text, default="")
+    created_at = Column(DateTime, default=datetime.datetime.utcnow)
+    updated_at = Column(DateTime, default=datetime.datetime.utcnow)
+
+    sheets       = relationship("Sheet",       back_populates="diagram", cascade="all, delete-orphan", order_by="Sheet.position")
+    devices      = relationship("Device",      back_populates="diagram", cascade="all, delete-orphan")
+    wires        = relationship("Wire",        back_populates="diagram", cascade="all, delete-orphan")
+    wire_bundles = relationship("WireBundle",  back_populates="diagram", cascade="all, delete-orphan")
+
+
+class WireBundle(Base):
+    __tablename__ = "wire_bundles"
+    id           = Column(Integer, primary_key=True, index=True)
+    diagram_id   = Column(Integer, ForeignKey("diagrams.id"), nullable=False)
+    label        = Column(String, default="")
+    jacket_color = Column(String, default="#2a2a2a")
+
+    diagram = relationship("Diagram", back_populates="wire_bundles")
+    wires   = relationship("Wire", back_populates="bundle")
+
+
+class Sheet(Base):
+    __tablename__ = "sheets"
+    id         = Column(Integer, primary_key=True, index=True)
+    diagram_id = Column(Integer, ForeignKey("diagrams.id", ondelete="CASCADE"), nullable=False)
+    name       = Column(String, nullable=False, default="Sheet 1")
+    position   = Column(Integer, default=0)
+
+    diagram = relationship("Diagram", back_populates="sheets")
+    devices = relationship("Device", back_populates="sheet", cascade="all, delete-orphan")
+    wires   = relationship("Wire",   back_populates="sheet", cascade="all, delete-orphan")
+
+
+class Device(Base):
+    __tablename__ = "devices"
+    id         = Column(Integer, primary_key=True, index=True)
+    diagram_id = Column(Integer, ForeignKey("diagrams.id"), nullable=False)
+    sheet_id   = Column(Integer, ForeignKey("sheets.id",   ondelete="CASCADE"), nullable=True)
+    device_type = Column(String, nullable=False)
+    label      = Column(String, default="")
+    reference  = Column(String, default="")
+    x          = Column(Float,  default=100)
+    y          = Column(Float,  default=100)
+    width      = Column(Float,  default=120)
+    height     = Column(Float,  default=60)
+    properties = Column(JSON,   default={})
+    pins       = Column(JSON,   default=[])
+
+    diagram = relationship("Diagram", back_populates="devices")
+    sheet   = relationship("Sheet",   back_populates="devices")
+
+
+class Wire(Base):
+    __tablename__ = "wires"
+    id             = Column(Integer, primary_key=True, index=True)
+    diagram_id     = Column(Integer, ForeignKey("diagrams.id"), nullable=False)
+    sheet_id       = Column(Integer, ForeignKey("sheets.id", ondelete="CASCADE"), nullable=True)
+    label          = Column(String,  default="")
+    from_device_id = Column(Integer, ForeignKey("devices.id"), nullable=True)
+    from_pin       = Column(String,  default="")
+    to_device_id   = Column(Integer, ForeignKey("devices.id"), nullable=True)
+    to_pin         = Column(String,  default="")
+    color_primary  = Column(String,  default="#FF0000")
+    color_stripe   = Column(String,  nullable=True)
+    gauge          = Column(String,  default="18 AWG")
+    length         = Column(Float,   nullable=True)
+    length_unit    = Column(String,  default="in")
+    notes          = Column(Text,    default="")
+    waypoints      = Column(JSON,    default=[])
+    twisted_pair   = Column(Boolean, default=False)
+    twist_pitch    = Column(Float,   default=16.0)
+    shielded       = Column(Boolean, default=False)
+
+    bundle_id       = Column(Integer, ForeignKey("wire_bundles.id"), nullable=True)
+    show_size_label = Column(Boolean, default=False)
+
+    diagram = relationship("Diagram",    back_populates="wires")
+    sheet   = relationship("Sheet",      back_populates="wires")
+    bundle  = relationship("WireBundle", back_populates="wires", foreign_keys=[bundle_id])
+
+
+class CustomConnector(Base):
+    __tablename__ = "custom_connectors"
+    id          = Column(Integer, primary_key=True, index=True)
+    name        = Column(String,  nullable=False)
+    manufacturer = Column(String, default="")
+    part_number = Column(String,  default="")
+    category    = Column(String,  default="Custom")
+    description = Column(String,  default="")
+    pin_count   = Column(Integer, nullable=False, default=2)
+    pin_labels  = Column(JSON,    default=[])
+    created_at  = Column(DateTime, default=datetime.datetime.utcnow)
+    updated_at  = Column(DateTime, default=datetime.datetime.utcnow)

backend/app/routers/bundles.py

@@ -0,0 +1,45 @@
+from typing import List
+from fastapi import APIRouter, Depends, HTTPException
+from sqlalchemy.orm import Session
+from .. import models, schemas
+from ..database import get_db
+
+router = APIRouter(tags=["bundles"])
+
+
+@router.get("/diagram/{diagram_id}", response_model=List[schemas.WireBundleOut])
+def list_bundles(diagram_id: int, db: Session = Depends(get_db)):
+    return db.query(models.WireBundle).filter(models.WireBundle.diagram_id == diagram_id).all()
+
+
+@router.post("/", response_model=schemas.WireBundleOut, status_code=201)
+def create_bundle(payload: schemas.WireBundleCreate, db: Session = Depends(get_db)):
+    bundle = models.WireBundle(**payload.model_dump())
+    db.add(bundle)
+    db.commit()
+    db.refresh(bundle)
+    return bundle
+
+
+@router.patch("/{bundle_id}", response_model=schemas.WireBundleOut)
+def update_bundle(bundle_id: int, payload: schemas.WireBundleUpdate, db: Session = Depends(get_db)):
+    bundle = db.get(models.WireBundle, bundle_id)
+    if not bundle:
+        raise HTTPException(404, "Bundle not found")
+    for k, v in payload.model_dump(exclude_unset=True).items():
+        setattr(bundle, k, v)
+    db.commit()
+    db.refresh(bundle)
+    return bundle
+
+
+@router.delete("/{bundle_id}", status_code=204)
+def delete_bundle(bundle_id: int, db: Session = Depends(get_db)):
+    bundle = db.get(models.WireBundle, bundle_id)
+    if not bundle:
+        raise HTTPException(404, "Bundle not found")
+    # Detach wires before deleting
+    for wire in bundle.wires:
+        wire.bundle_id = None
+    db.delete(bundle)
+    db.commit()

backend/app/routers/connectors.py

@@ -0,0 +1,47 @@
+import datetime
+from typing import List
+
+from fastapi import APIRouter, Depends, HTTPException
+from sqlalchemy.orm import Session
+
+from .. import models, schemas
+from ..database import get_db
+
+router = APIRouter(tags=["connectors"])
+
+
+@router.get("/", response_model=List[schemas.CustomConnector])
+def list_connectors(db: Session = Depends(get_db)):
+    return db.query(models.CustomConnector).order_by(models.CustomConnector.category, models.CustomConnector.name).all()
+
+
+@router.post("/", response_model=schemas.CustomConnector)
+def create_connector(connector: schemas.CustomConnectorCreate, db: Session = Depends(get_db)):
+    db_conn = models.CustomConnector(**connector.model_dump())
+    db.add(db_conn)
+    db.commit()
+    db.refresh(db_conn)
+    return db_conn
+
+
+@router.patch("/{connector_id}", response_model=schemas.CustomConnector)
+def update_connector(connector_id: int, update: schemas.CustomConnectorUpdate, db: Session = Depends(get_db)):
+    conn = db.query(models.CustomConnector).filter(models.CustomConnector.id == connector_id).first()
+    if not conn:
+        raise HTTPException(status_code=404, detail="Connector not found")
+    for key, value in update.model_dump(exclude_none=True).items():
+        setattr(conn, key, value)
+    conn.updated_at = datetime.datetime.utcnow()
+    db.commit()
+    db.refresh(conn)
+    return conn
+
+
+@router.delete("/{connector_id}")
+def delete_connector(connector_id: int, db: Session = Depends(get_db)):
+    conn = db.query(models.CustomConnector).filter(models.CustomConnector.id == connector_id).first()
+    if not conn:
+        raise HTTPException(status_code=404, detail="Connector not found")
+    db.delete(conn)
+    db.commit()
+    return {"ok": True}

backend/app/routers/devices.py

@@ -0,0 +1,45 @@
+from fastapi import APIRouter, Depends, HTTPException
+from sqlalchemy.orm import Session
+from .. import models, schemas
+from ..database import get_db
+import datetime
+
+router = APIRouter(tags=["devices"])
+
+
+@router.post("/", response_model=schemas.Device)
+def create_device(device: schemas.DeviceCreate, db: Session = Depends(get_db)):
+    diagram = db.query(models.Diagram).filter(models.Diagram.id == device.diagram_id).first()
+    if not diagram:
+        raise HTTPException(status_code=404, detail="Diagram not found")
+    db_device = models.Device(**device.model_dump())
+    db.add(db_device)
+    diagram.updated_at = datetime.datetime.utcnow()
+    db.commit()
+    db.refresh(db_device)
+    return db_device
+
+
+@router.patch("/{device_id}", response_model=schemas.Device)
+def update_device(device_id: int, update: schemas.DeviceUpdate, db: Session = Depends(get_db)):
+    device = db.query(models.Device).filter(models.Device.id == device_id).first()
+    if not device:
+        raise HTTPException(status_code=404, detail="Device not found")
+    for key, value in update.model_dump(exclude_none=True).items():
+        setattr(device, key, value)
+    diagram = db.query(models.Diagram).filter(models.Diagram.id == device.diagram_id).first()
+    if diagram:
+        diagram.updated_at = datetime.datetime.utcnow()
+    db.commit()
+    db.refresh(device)
+    return device
+
+
+@router.delete("/{device_id}")
+def delete_device(device_id: int, db: Session = Depends(get_db)):
+    device = db.query(models.Device).filter(models.Device.id == device_id).first()
+    if not device:
+        raise HTTPException(status_code=404, detail="Device not found")
+    db.delete(device)
+    db.commit()
+    return {"ok": True}

backend/app/routers/diagrams.py

@@ -0,0 +1,53 @@
+from fastapi import APIRouter, Depends, HTTPException
+from sqlalchemy.orm import Session
+from typing import List
+from .. import models, schemas
+from ..database import get_db
+import datetime
+
+router = APIRouter(tags=["diagrams"])
+
+
+@router.get("/", response_model=List[schemas.DiagramSummary])
+def list_diagrams(db: Session = Depends(get_db)):
+    return db.query(models.Diagram).order_by(models.Diagram.updated_at.desc()).all()
+
+
+@router.post("/", response_model=schemas.DiagramSummary)
+def create_diagram(diagram: schemas.DiagramCreate, db: Session = Depends(get_db)):
+    db_diagram = models.Diagram(**diagram.model_dump())
+    db.add(db_diagram)
+    db.commit()
+    db.refresh(db_diagram)
+    return db_diagram
+
+
+@router.get("/{diagram_id}", response_model=schemas.DiagramFull)
+def get_diagram(diagram_id: int, db: Session = Depends(get_db)):
+    diagram = db.query(models.Diagram).filter(models.Diagram.id == diagram_id).first()
+    if not diagram:
+        raise HTTPException(status_code=404, detail="Diagram not found")
+    return diagram
+
+
+@router.patch("/{diagram_id}", response_model=schemas.DiagramSummary)
+def update_diagram(diagram_id: int, update: schemas.DiagramUpdate, db: Session = Depends(get_db)):
+    diagram = db.query(models.Diagram).filter(models.Diagram.id == diagram_id).first()
+    if not diagram:
+        raise HTTPException(status_code=404, detail="Diagram not found")
+    for key, value in update.model_dump(exclude_none=True).items():
+        setattr(diagram, key, value)
+    diagram.updated_at = datetime.datetime.utcnow()
+    db.commit()
+    db.refresh(diagram)
+    return diagram
+
+
+@router.delete("/{diagram_id}")
+def delete_diagram(diagram_id: int, db: Session = Depends(get_db)):
+    diagram = db.query(models.Diagram).filter(models.Diagram.id == diagram_id).first()
+    if not diagram:
+        raise HTTPException(status_code=404, detail="Diagram not found")
+    db.delete(diagram)
+    db.commit()
+    return {"ok": True}

backend/app/routers/export.py

@@ -0,0 +1,316 @@
+import csv
+import io
+import json
+
+from fastapi import APIRouter, Depends, HTTPException
+from fastapi.responses import HTMLResponse, StreamingResponse
+from sqlalchemy.orm import Session
+
+from .. import models
+from ..database import get_db
+
+router = APIRouter(tags=["export"])
+
+
+@router.get("/{diagram_id}/bom/csv")
+def export_bom_csv(diagram_id: int, db: Session = Depends(get_db)):
+    diagram = db.query(models.Diagram).filter(models.Diagram.id == diagram_id).first()
+    if not diagram:
+        raise HTTPException(status_code=404, detail="Diagram not found")
+
+    output = io.StringIO()
+    writer = csv.writer(output)
+
+    writer.writerow(["=== DEVICES ==="])
+    writer.writerow(["Reference", "Type", "Label", "Part Number", "Manufacturer", "Description", "Datasheet"])
+    for device in diagram.devices:
+        props = device.properties or {}
+        desc = props.get("description", "")
+        if device.device_type == "cable" and not desc:
+            desc = f"{props.get('conductorCount', len(props.get('conductors', [])))} conductors"
+        writer.writerow([
+            device.reference, device.device_type, device.label,
+            props.get("partNumber", ""), props.get("manufacturer", ""),
+            desc, props.get("datasheetUrl", ""),
+        ])
+
+    writer.writerow([])
+
+    writer.writerow(["=== WIRES ==="])
+    writer.writerow(["ID", "Label", "From Device", "From Pin", "To Device", "To Pin",
+                     "Primary Color", "Stripe Color", "Gauge", "Length", "Unit", "Shielded", "Notes"])
+    device_map = {d.id: d for d in diagram.devices}
+    for wire in diagram.wires:
+        fd = device_map.get(wire.from_device_id)
+        td = device_map.get(wire.to_device_id)
+        writer.writerow([
+            wire.id, wire.label,
+            f"{fd.reference} ({fd.label})" if fd else "",
+            wire.from_pin,
+            f"{td.reference} ({td.label})" if td else "",
+            wire.to_pin,
+            wire.color_primary, wire.color_stripe or "",
+            wire.gauge, wire.length or "", wire.length_unit if wire.length else "",
+            "YES" if wire.shielded else "", wire.notes,
+        ])
+
+    output.seek(0)
+    filename = f"{diagram.name.replace(' ', '_')}_BOM.csv"
+    return StreamingResponse(
+        io.BytesIO(output.getvalue().encode()),
+        media_type="text/csv",
+        headers={"Content-Disposition": f"attachment; filename={filename}"},
+    )
+
+
+@router.get("/{diagram_id}/assembly/txt")
+def export_assembly_txt(diagram_id: int, db: Session = Depends(get_db)):
+    diagram = db.query(models.Diagram).filter(models.Diagram.id == diagram_id).first()
+    if not diagram:
+        raise HTTPException(status_code=404, detail="Diagram not found")
+
+    device_map = {d.id: d for d in diagram.devices}
+    lines = [
+        f"ASSEMBLY INSTRUCTIONS: {diagram.name}",
+        "=" * 60, "",
+    ]
+    if diagram.description:
+        lines += [f"Description: {diagram.description}", ""]
+
+    lines += ["STEP 1: PREPARE DEVICES", "-" * 40]
+    for i, d in enumerate(diagram.devices, 1):
+        props = d.properties or {}
+        lines.append(f"  {i}. {d.reference or '?'} — {d.label}  "
+                     f"(Type: {d.device_type}, P/N: {props.get('partNumber', 'N/A')})")
+    lines.append("")
+
+    # Group wires by which cable device (if any) they pass through
+    cable_devices = {d.id: d for d in diagram.devices if d.device_type == "cable"}
+    wire_cable_map = {}  # wire_id -> cable_device_id
+    for wire in diagram.wires:
+        if wire.from_device_id in cable_devices or wire.to_device_id in cable_devices:
+            cable_id = wire.from_device_id if wire.from_device_id in cable_devices else wire.to_device_id
+            wire_cable_map[wire.id] = cable_id
+
+    lines += ["STEP 2: WIRE CONNECTIONS", "-" * 40]
+    step = 1
+    for wire in diagram.wires:
+        if wire.id in wire_cable_map:
+            continue  # handled in cables step
+        fd = device_map.get(wire.from_device_id)
+        td = device_map.get(wire.to_device_id)
+        from_str = f"{fd.reference or fd.label} Pin {wire.from_pin}" if fd else "unconnected"
+        to_str = f"{td.reference or td.label} Pin {wire.to_pin}" if td else "unconnected"
+        color_str = wire.color_primary
+        if wire.color_stripe:
+            color_str += f" / {wire.color_stripe} stripe"
+        length_str = f"{wire.length} {wire.length_unit}" if wire.length else "TBD"
+        twisted = "  [TWISTED PAIR]" if wire.twisted_pair else ""
+        shielded = "  [SHIELDED]" if wire.shielded else ""
+        lines += [
+            f"  {step}. {color_str}  {wire.gauge}  {length_str}{twisted}{shielded}",
+            f"     From: {from_str}",
+            f"     To:   {to_str}",
+        ]
+        if wire.label:
+            lines.append(f"     Label: {wire.label}")
+        if wire.notes:
+            lines.append(f"     Notes: {wire.notes}")
+        lines.append("")
+        step += 1
+
+    if cable_devices:
+        lines += ["", "STEP 3: CABLE ASSEMBLIES", "-" * 40]
+        for cable_dev in cable_devices.values():
+            props = cable_dev.properties or {}
+            conductors = props.get("conductors", [])
+            pn = props.get("partNumber", "N/A")
+            lines += [
+                f"  Cable: {cable_dev.reference or '?'} — {cable_dev.label}  (P/N: {pn}, {len(conductors)} conductors)",
+            ]
+            cable_wires = [w for w in diagram.wires if wire_cable_map.get(w.id) == cable_dev.id]
+            for wire in cable_wires:
+                fd = device_map.get(wire.from_device_id)
+                td = device_map.get(wire.to_device_id)
+                other_dev = td if wire.from_device_id == cable_dev.id else fd
+                other_pin = wire.to_pin if wire.from_device_id == cable_dev.id else wire.from_pin
+                cable_pin = wire.from_pin if wire.from_device_id == cable_dev.id else wire.to_pin
+                length_str = f"{wire.length} {wire.length_unit}" if wire.length else "TBD"
+                lines.append(
+                    f"    Pin {cable_pin} ({wire.color_primary}) → "
+                    f"{other_dev.reference or other_dev.label if other_dev else '?'} Pin {other_pin}  {length_str}"
+                )
+            lines.append("")
+
+    content = "\n".join(lines)
+    filename = f"{diagram.name.replace(' ', '_')}_Assembly.txt"
+    return StreamingResponse(
+        io.BytesIO(content.encode()),
+        media_type="text/plain",
+        headers={"Content-Disposition": f"attachment; filename={filename}"},
+    )
+
+
+@router.get("/{diagram_id}/formboard", response_class=HTMLResponse)
+def export_formboard(diagram_id: int, db: Session = Depends(get_db)):
+    diagram = db.query(models.Diagram).filter(models.Diagram.id == diagram_id).first()
+    if not diagram:
+        raise HTTPException(status_code=404, detail="Diagram not found")
+
+    device_map = {d.id: d for d in diagram.devices}
+
+    def to_mm(length, unit):
+        factors = {"mm": 1.0, "cm": 10.0, "in": 25.4, "ft": 304.8}
+        return length * factors.get(unit or "in", 25.4)
+
+    wires_with_length = []
+    wires_no_length = []
+    for wire in diagram.wires:
+        if wire.length and wire.length > 0:
+            mm = to_mm(wire.length, wire.length_unit)
+            wires_with_length.append((wire, mm))
+        else:
+            wires_no_length.append(wire)
+
+    wires_with_length.sort(key=lambda t: t[1], reverse=True)
+
+    def wire_label(wire):
+        fd = device_map.get(wire.from_device_id)
+        td = device_map.get(wire.to_device_id)
+        frm = f"{fd.reference or fd.label}/{wire.from_pin}" if fd else "?"
+        to  = f"{td.reference or td.label}/{wire.to_pin}"  if td else "?"
+        return f"{frm} → {to}" + (f" [{wire.label}]" if wire.label else "")
+
+    def stripe_style(wire):
+        if wire.color_stripe:
+            c1, c2 = wire.color_primary or "#cc0000", wire.color_stripe
+            return f"background: repeating-linear-gradient(45deg, {c1}, {c1} 4mm, {c2} 4mm, {c2} 8mm);"
+        return f"background: {wire.color_primary or '#cc0000'};"
+
+    rows_html = ""
+    for wire, mm in wires_with_length:
+        badges = ""
+        if wire.twisted_pair:
+            badges += '<span class="badge tw">TWISTED</span>'
+        if wire.shielded:
+            badges += '<span class="badge sh">SHIELDED</span>'
+        txt_color = "#000" if (wire.color_primary or "#000") in ("#FFD700","#DDDDDD","#FF8C00","#dddddd") else "#fff"
+        rows_html += f"""
+        <tr>
+          <td class="lbl">{wire_label(wire)}</td>
+          <td class="gauge">{wire.gauge or ""}</td>
+          <td class="len-val">{wire.length:.1f} {wire.length_unit or "in"} ({mm:.0f} mm)</td>
+          <td class="bar-cell">
+            <div class="wire-bar" style="width:{mm:.1f}mm;{stripe_style(wire)}color:{txt_color}">
+              <span class="bar-text">{mm:.0f} mm</span>
+            </div>
+          </td>
+          <td>{badges}</td>
+        </tr>"""
+
+    no_len_rows = ""
+    for wire in wires_no_length:
+        no_len_rows += f"<li>{wire_label(wire)} — {wire.gauge or 'gauge?'}</li>"
+
+    no_len_section = ""
+    if wires_no_length:
+        no_len_section = f"""
+        <h2>Wires without length</h2>
+        <ul class="no-len">{no_len_rows}</ul>"""
+
+    html = f"""<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Formboard — {diagram.name}</title>
+<style>
+  * {{ box-sizing: border-box; margin: 0; padding: 0; }}
+  body {{ font-family: sans-serif; font-size: 11pt; padding: 10mm; background: #fff; color: #111; }}
+  h1 {{ font-size: 16pt; margin-bottom: 4mm; }}
+  .meta {{ font-size: 9pt; color: #555; margin-bottom: 6mm; }}
+  .scale-bar-wrap {{ margin-bottom: 8mm; }}
+  .scale-bar {{ display: inline-block; width: 100mm; height: 5mm; background: #333; }}
+  .scale-bar-lbl {{ font-size: 9pt; color: #555; margin-left: 3mm; }}
+  table {{ border-collapse: collapse; width: 100%; margin-bottom: 8mm; }}
+  th {{ text-align: left; font-size: 9pt; color: #555; border-bottom: 0.5mm solid #ccc; padding: 1mm 2mm; }}
+  td {{ padding: 1.5mm 2mm; vertical-align: middle; border-bottom: 0.2mm solid #e8e8e8; }}
+  .lbl  {{ font-size: 9pt; max-width: 60mm; word-break: break-all; }}
+  .gauge {{ font-size: 9pt; white-space: nowrap; }}
+  .len-val {{ font-size: 9pt; white-space: nowrap; }}
+  .bar-cell {{ width: 99%; }}
+  .wire-bar {{
+    height: 5mm; min-width: 5mm; border-radius: 1mm;
+    display: flex; align-items: center; padding: 0 2mm;
+    print-color-adjust: exact; -webkit-print-color-adjust: exact;
+  }}
+  .bar-text {{ font-size: 7pt; white-space: nowrap; }}
+  .badge {{ font-size: 7pt; padding: 0.5mm 1.5mm; border-radius: 1mm; margin-left: 1mm; white-space: nowrap; }}
+  .tw {{ background: #d0e8ff; color: #003; }}
+  .sh {{ background: #e8e8e8; color: #333; }}
+  .no-len {{ font-size: 9pt; padding-left: 5mm; margin-bottom: 6mm; }}
+  .no-len li {{ margin-bottom: 1mm; }}
+  h2 {{ font-size: 12pt; margin: 6mm 0 3mm; }}
+  @media print {{
+    body {{ padding: 5mm; }}
+    .no-print {{ display: none; }}
+  }}
+</style>
+</head>
+<body>
+<h1>📐 Formboard — {diagram.name}</h1>
+<p class="meta">Wire bars are printed at true 1:1 scale. Print at 100% (no scaling) for accurate lengths.</p>
+<div class="scale-bar-wrap no-print">
+  <strong>100 mm scale reference:</strong><br>
+  <div class="scale-bar"></div><span class="scale-bar-lbl">← this bar is exactly 100 mm when printed at 100%</span>
+</div>
+<table>
+  <thead><tr>
+    <th>Wire</th><th>Gauge</th><th>Length</th><th>Scale (1:1)</th><th>Flags</th>
+  </tr></thead>
+  <tbody>{rows_html}</tbody>
+</table>
+{no_len_section}
+<p class="meta no-print" style="margin-top:8mm">Print → More settings → Scale: 100% → No headers/footers</p>
+</body>
+</html>"""
+
+    return HTMLResponse(content=html)
+
+
+@router.get("/{diagram_id}/json")
+def export_json(diagram_id: int, db: Session = Depends(get_db)):
+    diagram = db.query(models.Diagram).filter(models.Diagram.id == diagram_id).first()
+    if not diagram:
+        raise HTTPException(status_code=404, detail="Diagram not found")
+
+    data = {
+        "id": diagram.id,
+        "name": diagram.name,
+        "description": diagram.description,
+        "devices": [
+            {
+                "id": d.id, "device_type": d.device_type, "label": d.label,
+                "reference": d.reference, "x": d.x, "y": d.y,
+                "width": d.width, "height": d.height,
+                "properties": d.properties, "pins": d.pins,
+            }
+            for d in diagram.devices
+        ],
+        "wires": [
+            {
+                "id": w.id, "label": w.label,
+                "from_device_id": w.from_device_id, "from_pin": w.from_pin,
+                "to_device_id": w.to_device_id, "to_pin": w.to_pin,
+                "color_primary": w.color_primary, "color_stripe": w.color_stripe,
+                "gauge": w.gauge, "length": w.length, "length_unit": w.length_unit,
+                "notes": w.notes,
+            }
+            for w in diagram.wires
+        ],
+    }
+    filename = f"{diagram.name.replace(' ', '_')}.json"
+    return StreamingResponse(
+        io.BytesIO(json.dumps(data, indent=2).encode()),
+        media_type="application/json",
+        headers={"Content-Disposition": f"attachment; filename={filename}"},
+    )

backend/app/routers/octopart.py

@@ -0,0 +1,109 @@
+import os
+import time
+from typing import Tuple
+
+import httpx
+from fastapi import APIRouter, HTTPException, Query
+
+router = APIRouter(tags=["octopart"])
+
+NEXAR_TOKEN_URL = "https://identity.nexar.com/connect/token"
+NEXAR_API_URL   = "https://api.nexar.com/graphql"
+
+_token_cache: dict = {"token": None, "expires_at": 0.0}
+
+_SEARCH_GQL = """
+query PartSearch($q: String!, $limit: Int!) {
+  supSearchMpn(q: $q, limit: $limit) {
+    results {
+      part {
+        mpn
+        manufacturer { name }
+        shortDescription
+        bestDatasheet { url }
+      }
+    }
+  }
+}
+"""
+
+
+def _credentials() -> Tuple[str, str]:
+    return (
+        os.getenv("NEXAR_CLIENT_ID", ""),
+        os.getenv("NEXAR_CLIENT_SECRET", ""),
+    )
+
+
+async def _get_token() -> str:
+    client_id, client_secret = _credentials()
+    if not client_id or not client_secret:
+        raise HTTPException(
+            status_code=503,
+            detail="Nexar/Octopart credentials not configured — set NEXAR_CLIENT_ID and NEXAR_CLIENT_SECRET environment variables",
+        )
+
+    now = time.time()
+    if _token_cache["token"] and now < _token_cache["expires_at"] - 60:
+        return _token_cache["token"]  # type: ignore[return-value]
+
+    async with httpx.AsyncClient() as client:
+        resp = await client.post(
+            NEXAR_TOKEN_URL,
+            data={
+                "grant_type": "client_credentials",
+                "client_id": client_id,
+                "client_secret": client_secret,
+            },
+            timeout=10,
+        )
+    if resp.status_code != 200:
+        raise HTTPException(status_code=502, detail=f"Nexar auth failed: {resp.text[:200]}")
+
+    body = resp.json()
+    _token_cache["token"] = body["access_token"]
+    _token_cache["expires_at"] = now + body.get("expires_in", 3600)
+    return _token_cache["token"]  # type: ignore[return-value]
+
+
+@router.get("/status")
+async def octopart_status():
+    client_id, client_secret = _credentials()
+    return {"configured": bool(client_id and client_secret)}
+
+
+@router.get("/search")
+async def octopart_search(
+    q: str = Query(..., min_length=1),
+    limit: int = Query(8, ge=1, le=20),
+):
+    token = await _get_token()
+
+    async with httpx.AsyncClient() as client:
+        resp = await client.post(
+            NEXAR_API_URL,
+            headers={"Authorization": f"Bearer {token}", "Content-Type": "application/json"},
+            json={"query": _SEARCH_GQL, "variables": {"q": q, "limit": limit}},
+            timeout=12,
+        )
+
+    if resp.status_code != 200:
+        raise HTTPException(status_code=502, detail=f"Nexar API error {resp.status_code}")
+
+    body = resp.json()
+    if "errors" in body:
+        raise HTTPException(status_code=502, detail=str(body["errors"])[:300])
+
+    results = body.get("data", {}).get("supSearchMpn", {}).get("results", [])
+    out = []
+    for r in results:
+        part = r.get("part")
+        if not part:
+            continue
+        out.append({
+            "mpn":          part.get("mpn", ""),
+            "manufacturer": (part.get("manufacturer") or {}).get("name", ""),
+            "description":  part.get("shortDescription") or "",
+            "datasheet_url": (part.get("bestDatasheet") or {}).get("url"),
+        })
+    return out

backend/app/routers/sheets.py

@@ -0,0 +1,51 @@
+from fastapi import APIRouter, Depends, HTTPException
+from sqlalchemy.orm import Session
+from .. import models, schemas
+from ..database import get_db
+
+router = APIRouter(tags=["sheets"])
+
+
+@router.post("/", response_model=schemas.SheetOut)
+def create_sheet(sheet: schemas.SheetCreate, db: Session = Depends(get_db)):
+    diagram = db.query(models.Diagram).filter(models.Diagram.id == sheet.diagram_id).first()
+    if not diagram:
+        raise HTTPException(status_code=404, detail="Diagram not found")
+    db_sheet = models.Sheet(**sheet.model_dump())
+    db.add(db_sheet)
+    db.commit()
+    db.refresh(db_sheet)
+    return db_sheet
+
+
+@router.get("/{sheet_id}", response_model=schemas.SheetOut)
+def get_sheet(sheet_id: int, db: Session = Depends(get_db)):
+    sheet = db.query(models.Sheet).filter(models.Sheet.id == sheet_id).first()
+    if not sheet:
+        raise HTTPException(status_code=404, detail="Sheet not found")
+    return sheet
+
+
+@router.patch("/{sheet_id}", response_model=schemas.SheetOut)
+def update_sheet(sheet_id: int, update: schemas.SheetUpdate, db: Session = Depends(get_db)):
+    sheet = db.query(models.Sheet).filter(models.Sheet.id == sheet_id).first()
+    if not sheet:
+        raise HTTPException(status_code=404, detail="Sheet not found")
+    for key, value in update.model_dump(exclude_none=True).items():
+        setattr(sheet, key, value)
+    db.commit()
+    db.refresh(sheet)
+    return sheet
+
+
+@router.delete("/{sheet_id}")
+def delete_sheet(sheet_id: int, db: Session = Depends(get_db)):
+    sheet = db.query(models.Sheet).filter(models.Sheet.id == sheet_id).first()
+    if not sheet:
+        raise HTTPException(status_code=404, detail="Sheet not found")
+    sheet_count = db.query(models.Sheet).filter(models.Sheet.diagram_id == sheet.diagram_id).count()
+    if sheet_count <= 1:
+        raise HTTPException(status_code=400, detail="Cannot delete the last sheet")
+    db.delete(sheet)
+    db.commit()
+    return {"ok": True}

backend/app/routers/wires.py

@@ -0,0 +1,45 @@
+from fastapi import APIRouter, Depends, HTTPException
+from sqlalchemy.orm import Session
+from .. import models, schemas
+from ..database import get_db
+import datetime
+
+router = APIRouter(tags=["wires"])
+
+
+@router.post("/", response_model=schemas.Wire)
+def create_wire(wire: schemas.WireCreate, db: Session = Depends(get_db)):
+    diagram = db.query(models.Diagram).filter(models.Diagram.id == wire.diagram_id).first()
+    if not diagram:
+        raise HTTPException(status_code=404, detail="Diagram not found")
+    db_wire = models.Wire(**wire.model_dump())
+    db.add(db_wire)
+    diagram.updated_at = datetime.datetime.utcnow()
+    db.commit()
+    db.refresh(db_wire)
+    return db_wire
+
+
+@router.patch("/{wire_id}", response_model=schemas.Wire)
+def update_wire(wire_id: int, update: schemas.WireUpdate, db: Session = Depends(get_db)):
+    wire = db.query(models.Wire).filter(models.Wire.id == wire_id).first()
+    if not wire:
+        raise HTTPException(status_code=404, detail="Wire not found")
+    for key, value in update.model_dump(exclude_unset=True).items():
+        setattr(wire, key, value)
+    diagram = db.query(models.Diagram).filter(models.Diagram.id == wire.diagram_id).first()
+    if diagram:
+        diagram.updated_at = datetime.datetime.utcnow()
+    db.commit()
+    db.refresh(wire)
+    return wire
+
+
+@router.delete("/{wire_id}")
+def delete_wire(wire_id: int, db: Session = Depends(get_db)):
+    wire = db.query(models.Wire).filter(models.Wire.id == wire_id).first()
+    if not wire:
+        raise HTTPException(status_code=404, detail="Wire not found")
+    db.delete(wire)
+    db.commit()
+    return {"ok": True}

backend/app/schemas.py

@@ -0,0 +1,180 @@
+from pydantic import BaseModel, field_validator
+from typing import Optional, List, Any, Dict
+from datetime import datetime
+
+
+class DeviceBase(BaseModel):
+    device_type: str
+    label: str = ""
+    reference: str = ""
+    x: float = 100
+    y: float = 100
+    width: float = 120
+    height: float = 60
+    properties: Dict[str, Any] = {}
+    pins: List[Dict[str, Any]] = []
+
+
+class DeviceCreate(DeviceBase):
+    diagram_id: int
+
+
+class DeviceUpdate(BaseModel):
+    label: Optional[str] = None
+    reference: Optional[str] = None
+    x: Optional[float] = None
+    y: Optional[float] = None
+    width: Optional[float] = None
+    height: Optional[float] = None
+    properties: Optional[Dict[str, Any]] = None
+    pins: Optional[List[Dict[str, Any]]] = None
+
+
+class Device(DeviceBase):
+    id: int
+    diagram_id: int
+
+    model_config = {"from_attributes": True}
+
+
+class WireBase(BaseModel):
+    label: str = ""
+    from_device_id: Optional[int] = None
+    from_pin: str = ""
+    to_device_id: Optional[int] = None
+    to_pin: str = ""
+    color_primary: str = "#FF0000"
+    color_stripe: Optional[str] = None
+    gauge: str = "18 AWG"
+    length: Optional[float] = None
+    length_unit: str = "in"
+    notes: str = ""
+    waypoints: List[Dict[str, Any]] = []
+    twisted_pair: bool = False
+    twist_pitch: float = 16.0
+    shielded: bool = False
+    bundle_id: Optional[int] = None
+    show_size_label: bool = False
+
+    @field_validator("waypoints", mode="before")
+    @classmethod
+    def _coerce_waypoints(cls, v):
+        return v if v is not None else []
+
+
+class WireCreate(WireBase):
+    diagram_id: int
+
+
+class WireUpdate(BaseModel):
+    label: Optional[str] = None
+    from_device_id: Optional[int] = None
+    from_pin: Optional[str] = None
+    to_device_id: Optional[int] = None
+    to_pin: Optional[str] = None
+    color_primary: Optional[str] = None
+    color_stripe: Optional[str] = None
+    gauge: Optional[str] = None
+    length: Optional[float] = None
+    length_unit: Optional[str] = None
+    notes: Optional[str] = None
+    waypoints: Optional[List[Dict[str, Any]]] = None
+    twisted_pair: Optional[bool] = None
+    twist_pitch: Optional[float] = None
+    shielded: Optional[bool] = None
+    bundle_id: Optional[int] = None
+    show_size_label: Optional[bool] = None
+
+
+class Wire(WireBase):
+    id: int
+    diagram_id: int
+
+    model_config = {"from_attributes": True}
+
+
+# ── WireBundle ────────────────────────────────────────────────────────────────
+
+class WireBundleBase(BaseModel):
+    label: str = ""
+    jacket_color: str = "#2a2a2a"
+
+
+class WireBundleCreate(WireBundleBase):
+    diagram_id: int
+
+
+class WireBundleUpdate(BaseModel):
+    label: Optional[str] = None
+    jacket_color: Optional[str] = None
+
+
+class WireBundleOut(WireBundleBase):
+    id: int
+    diagram_id: int
+
+    model_config = {"from_attributes": True}
+
+
+# ── Diagram ───────────────────────────────────────────────────────────────────
+
+class DiagramBase(BaseModel):
+    name: str = "Untitled Diagram"
+    description: str = ""
+
+
+class DiagramCreate(DiagramBase):
+    pass
+
+
+class DiagramUpdate(BaseModel):
+    name: Optional[str] = None
+    description: Optional[str] = None
+
+
+class DiagramSummary(DiagramBase):
+    id: int
+    created_at: datetime
+    updated_at: datetime
+
+    model_config = {"from_attributes": True}
+
+
+class DiagramFull(DiagramSummary):
+    devices: List[Device] = []
+    wires: List[Wire] = []
+    wire_bundles: List[WireBundleOut] = []
+
+
+# ── CustomConnector ───────────────────────────────────────────────────────────
+
+class CustomConnectorBase(BaseModel):
+    name: str
+    manufacturer: str = ""
+    part_number: str = ""
+    category: str = "Custom"
+    description: str = ""
+    pin_count: int
+    pin_labels: List[str] = []
+
+
+class CustomConnectorCreate(CustomConnectorBase):
+    pass
+
+
+class CustomConnectorUpdate(BaseModel):
+    name: Optional[str] = None
+    manufacturer: Optional[str] = None
+    part_number: Optional[str] = None
+    category: Optional[str] = None
+    description: Optional[str] = None
+    pin_count: Optional[int] = None
+    pin_labels: Optional[List[str]] = None
+
+
+class CustomConnector(CustomConnectorBase):
+    id: int
+    created_at: datetime
+    updated_at: datetime
+
+    model_config = {"from_attributes": True}

backend/requirements.txt

@@ -0,0 +1,7 @@
+fastapi>=0.104.0
+uvicorn[standard]>=0.24.0
+sqlalchemy>=2.0.0
+pydantic>=2.0.0
+aiofiles>=23.0.0
+openpyxl>=3.1.0
+httpx>=0.27.0

backend/run.py

@@ -0,0 +1,4 @@
+import uvicorn
+
+if __name__ == "__main__":
+    uvicorn.run("app.main:app", host="127.0.0.1", port=8000, reload=False)

frontend/css/main.css

@@ -0,0 +1,323 @@
+/* ── Reset & base ─────────────────────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html, body, #app { height: 100%; overflow: hidden; font-family: "Segoe UI", system-ui, sans-serif; font-size: 13px; }
+body { background: #12121c; color: #c8ccee; }
+
+/* ── Layout ───────────────────────────────────────────────────────────────── */
+#app { display: flex; flex-direction: column; }
+
+#toolbar {
+  display: flex; align-items: center; gap: 8px; padding: 0 12px;
+  height: 48px; background: #0e0e1a; border-bottom: 1px solid #2a2a44;
+  flex-shrink: 0; z-index: 10;
+}
+.toolbar-left  { display: flex; align-items: center; gap: 10px; min-width: 220px; }
+.toolbar-center { display: flex; align-items: center; gap: 5px; flex: 1; justify-content: center; flex-wrap: wrap; }
+.toolbar-right  { display: flex; align-items: center; gap: 8px; min-width: 180px; justify-content: flex-end; }
+.toolbar-label  { font-size: 11px; color: #555577; white-space: nowrap; }
+
+#mode-indicator {
+  text-align: center; font-size: 11px; color: #00cc88; background: #0a1a14;
+  border-bottom: 1px solid #1a3a2a; height: 22px; flex-shrink: 0;
+  display: flex; align-items: center; justify-content: center;
+}
+
+#main { display: flex; flex: 1; overflow: hidden; }
+
+/* ── Sidebars ─────────────────────────────────────────────────────────────── */
+#left-sidebar {
+  width: 240px; flex-shrink: 0; background: #14142a;
+  border-right: 1px solid #2a2a44; display: flex; flex-direction: column; overflow: hidden;
+}
+#right-sidebar {
+  width: 248px; flex-shrink: 0; background: #14142a;
+  border-left: 1px solid #2a2a44; overflow-y: auto;
+}
+
+.sidebar-section { display: flex; flex-direction: column; flex-shrink: 0; }
+.section-header {
+  padding: 7px 10px; font-size: 11px; font-weight: 600; letter-spacing: .05em;
+  text-transform: uppercase; color: #6666aa; background: #10101e;
+  border-bottom: 1px solid #222238; display: flex; align-items: center; justify-content: space-between;
+  flex-shrink: 0;
+}
+
+/* ── Sidebar tabs ─────────────────────────────────────────────────────────── */
+.tab-bar {
+  display: flex; border-bottom: 1px solid #222238; background: #10101e; flex-shrink: 0;
+}
+.sidebar-tab {
+  flex: 1; padding: 6px 4px; font-size: 11px; font-weight: 500; text-align: center;
+  background: transparent; border: none; border-radius: 0; color: #555577;
+  border-bottom: 2px solid transparent; cursor: pointer; transition: color .15s;
+}
+.sidebar-tab:hover { color: #9999cc; background: #18182e; }
+.sidebar-tab.active { color: #88aaff; border-bottom-color: #5577dd; }
+
+.tab-panel { display: flex; flex-direction: column; }
+
+/* ── Diagram list ─────────────────────────────────────────────────────────── */
+#diagram-list { padding: 4px; }
+.diagram-item {
+  padding: 6px 8px; border-radius: 5px; cursor: pointer;
+  display: flex; justify-content: space-between; align-items: baseline;
+  border: 1px solid transparent; margin-bottom: 2px;
+}
+.diagram-item:hover { background: #1e1e3a; border-color: #3a3a5a; }
+.diagram-item.active { background: #1a2a4a; border-color: #4466aa; }
+.di-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; font-size: 12px; cursor: pointer; }
+.di-date { font-size: 10px; color: #555577; margin-left: 6px; white-space: nowrap; cursor: pointer; }
+.di-del-btn {
+  flex-shrink: 0; opacity: 0; padding: 1px 5px; font-size: 13px; line-height: 1;
+  background: transparent; border-color: transparent; color: #ff6666;
+  transition: opacity .15s; margin-left: 4px;
+}
+.diagram-item:hover .di-del-btn { opacity: 1; }
+.di-del-btn:hover { background: #3a1414; border-color: #aa3333; }
+
+/* ── Device library ───────────────────────────────────────────────────────── */
+#device-library { padding: 6px; display: flex; flex-direction: column; gap: 3px; }
+.lib-item {
+  display: flex; align-items: center; gap: 8px; padding: 7px 8px;
+  border: 1px solid #2a2a44; border-radius: 5px; cursor: grab; user-select: none;
+  background: #18182e; transition: background .1s, border-color .1s;
+}
+.lib-item:hover { background: #22224a; border-color: #5555aa; }
+.lib-item:active { cursor: grabbing; }
+.lib-icon  { font-size: 16px; width: 22px; text-align: center; }
+.lib-label { font-size: 12px; }
+
+/* ── Connector library ────────────────────────────────────────────────────── */
+.lib-conn-item {
+  padding: 7px 8px; border: 1px solid #1e1e38; border-radius: 5px; cursor: grab;
+  background: #141428; margin-bottom: 3px; user-select: none; transition: background .1s, border-color .1s;
+}
+.lib-conn-item:hover { background: #1e1e40; border-color: #4444aa; }
+.lib-conn-item:active { cursor: grabbing; }
+.conn-name { font-size: 12px; font-weight: 500; color: #bbc0ee; }
+.conn-meta { font-size: 10px; color: #556688; margin-top: 1px; }
+
+/* ── Canvas area ──────────────────────────────────────────────────────────── */
+#canvas-area { flex: 1; position: relative; overflow: hidden; }
+#canvas-container {
+  width: 100%; height: 100%;
+  background-color: #131320;
+  background-image: radial-gradient(circle, #2e2e50 1px, transparent 1px);
+  background-size: 20px 20px;
+}
+#canvas-container.wire-mode { cursor: crosshair; }
+
+#canvas-placeholder {
+  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
+  pointer-events: none; z-index: 5;
+}
+.placeholder-content { text-align: center; color: #44446a; pointer-events: all; }
+.placeholder-content h2 { font-size: 28px; margin-bottom: 10px; }
+.placeholder-content p  { margin-bottom: 16px; }
+
+/* ── Buttons ──────────────────────────────────────────────────────────────── */
+button {
+  background: #22223a; border: 1px solid #3a3a5a; color: #c0c4e8;
+  padding: 5px 11px; border-radius: 5px; cursor: pointer; font-size: 12px;
+  transition: background .12s, border-color .12s; white-space: nowrap;
+}
+button:hover  { background: #2e2e54; border-color: #5555aa; }
+button:active { background: #1a1a3a; }
+
+.mode-btn          { padding: 5px 12px; }
+.mode-btn.active   { background: #1e3a6a; border-color: #4488dd; color: #88bbff; }
+
+.route-btn         { padding: 4px 10px; font-size: 11px; }
+.route-btn.active  { background: #1a2a4a; border-color: #336699; color: #77aaee; }
+
+#btn-harness.active { background: #1a2a1a; border-color: #336633; color: #88ee88; }
+
+.danger-btn        { color: #ff6666; border-color: #662222; }
+.danger-btn:hover  { background: #3a1414; border-color: #aa3333; }
+
+.app-title { font-weight: 700; font-size: 15px; color: #88aaff; white-space: nowrap; }
+
+.diagram-name-input {
+  background: #1a1a2e; border: 1px solid #2a2a44; color: #c8ccee;
+  padding: 4px 8px; border-radius: 4px; font-size: 13px; width: 180px;
+}
+.diagram-name-input:focus { outline: none; border-color: #5566aa; }
+
+/* Export dropdown */
+.export-wrap { position: relative; }
+#export-menu {
+  display: none; position: absolute; right: 0; top: calc(100% + 4px);
+  background: #1a1a2e; border: 1px solid #3a3a5a; border-radius: 6px;
+  min-width: 170px; z-index: 100; overflow: hidden; flex-direction: column;
+}
+#export-menu.open { display: flex; }
+#export-menu button { border: none; border-radius: 0; text-align: left; padding: 8px 14px; border-bottom: 1px solid #222238; }
+#export-menu button:last-child { border-bottom: none; }
+
+/* Saved indicator */
+#saved-indicator {
+  font-size: 11px; color: #4caa77; background: #0f2a1a;
+  border: 1px solid #1e4a2a; padding: 4px 10px; border-radius: 4px;
+  opacity: 0; transition: opacity 0.3s; pointer-events: none; white-space: nowrap;
+}
+#saved-indicator.show { opacity: 1; }
+
+/* ── Octopart search results ──────────────────────────────────────────────── */
+#octopart-results {
+  margin-top: 5px; border: 1px solid #2a2a44; border-radius: 4px;
+  background: #0e0e1e; max-height: 220px; overflow-y: auto;
+}
+.op-result {
+  padding: 7px 9px; cursor: pointer; border-bottom: 1px solid #1a1a30;
+  transition: background 0.1s;
+}
+.op-result:last-child { border-bottom: none; }
+.op-result:hover { background: #1a1a38; }
+.op-mpn  { font-size: 11px; font-weight: 600; color: #c8ccee; }
+.op-mfr  { font-size: 10px; color: #7788aa; margin-top: 1px; }
+.op-desc { font-size: 10px; color: #4a5566; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.op-ds   { font-size: 10px; color: #4466aa; margin-top: 1px; }
+.op-no-results { padding: 10px; font-size: 11px; color: #444466; text-align: center; }
+#btn-octopart-search.searching { opacity: 0.5; pointer-events: none; }
+
+/* ── Properties panel ─────────────────────────────────────────────────────── */
+.prop-row { padding: 7px 10px; border-bottom: 1px solid #1e1e36; }
+.prop-row label {
+  display: block; font-size: 10px; font-weight: 600; text-transform: uppercase;
+  letter-spacing: .06em; color: #555577; margin-bottom: 4px;
+}
+.prop-row input[type="text"], .prop-row input[type="number"],
+.prop-row select, .prop-row textarea {
+  width: 100%; background: #0e0e1e; border: 1px solid #2a2a44;
+  color: #c0c4e8; padding: 5px 7px; border-radius: 4px; font-size: 12px; font-family: inherit;
+}
+.prop-row input:focus, .prop-row select:focus, .prop-row textarea:focus { outline: none; border-color: #5566aa; }
+.prop-value { font-size: 12px; color: #99aacc; }
+.prop-value.mono { font-family: monospace; }
+
+.color-swatch { width: 36px; height: 28px; padding: 2px; cursor: pointer; border-radius: 4px; flex-shrink: 0; border: 1px solid #3a3a5a; }
+
+/* Pin table */
+.pin-table { width: 100%; border-collapse: collapse; font-size: 11px; }
+.pin-table th { text-align: left; padding: 3px 4px; color: #555577; font-weight: 600; border-bottom: 1px solid #222238; }
+.pin-table td { padding: 2px 4px; border-bottom: 1px solid #1a1a30; vertical-align: middle; }
+.pin-table .pin-side { color: #444466; font-size: 10px; }
+.pin-input { width: 100%; background: #0e0e1e; border: 1px solid #2a2a44; color: #c0c4e8; padding: 2px 4px; border-radius: 3px; font-family: monospace; font-size: 11px; }
+.pin-side-select { width: 100%; background: #0e0e1e; border: 1px solid #2a2a44; color: #c0c4e8; padding: 2px 3px; border-radius: 3px; font-size: 11px; cursor: pointer; }
+
+/* ── Connector library extras ─────────────────────────────────────────────── */
+.lib-section-header {
+  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
+  color: #555577; padding: 8px 8px 3px; border-top: 1px solid #1a1a30; margin-top: 4px;
+}
+.lib-section-header:first-child { border-top: none; margin-top: 0; }
+
+.conn-item-body { flex: 1; min-width: 0; }
+.conn-custom-badge {
+  display: inline-block; font-size: 9px; font-weight: 600; letter-spacing: .06em;
+  text-transform: uppercase; background: #2a1a4a; color: #9966ee;
+  border: 1px solid #4422aa; border-radius: 3px; padding: 0 4px; vertical-align: middle;
+  margin-left: 4px;
+}
+.lib-conn-item { display: flex; align-items: center; gap: 6px; }
+.conn-edit-btn {
+  flex-shrink: 0; opacity: 0; padding: 3px 6px; font-size: 12px;
+  background: #1e1e3a; border-color: #3a3a5a; transition: opacity .15s;
+}
+.lib-conn-item:hover .conn-edit-btn { opacity: 1; }
+.conn-edit-btn:hover { background: #2a2a5a; border-color: #6666aa; }
+
+/* ── Modal ───────────────────────────────────────────────────────────────── */
+#connector-modal {
+  position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 1000;
+  align-items: center; justify-content: center;
+}
+.modal-box {
+  background: #16162a; border: 1px solid #3a3a5a; border-radius: 8px;
+  width: 480px; max-width: 94vw; max-height: 86vh;
+  display: flex; flex-direction: column; box-shadow: 0 8px 40px rgba(0,0,0,0.7);
+}
+.modal-header {
+  padding: 14px 18px 12px; border-bottom: 1px solid #222238; flex-shrink: 0;
+}
+.modal-header h3 { font-size: 15px; font-weight: 600; color: #c8ccee; }
+.modal-body {
+  padding: 14px 18px; overflow-y: auto; flex: 1;
+  display: flex; flex-direction: column; gap: 10px;
+}
+.modal-footer {
+  padding: 10px 18px; border-top: 1px solid #222238;
+  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
+}
+
+.cm-label {
+  display: block; font-size: 10px; font-weight: 600; text-transform: uppercase;
+  letter-spacing: .06em; color: #555577; margin-bottom: 4px;
+}
+.cm-input {
+  width: 100%; background: #0e0e1e; border: 1px solid #2a2a44;
+  color: #c0c4e8; padding: 6px 8px; border-radius: 4px; font-size: 12px; font-family: inherit;
+}
+.cm-input:focus { outline: none; border-color: #5566aa; }
+.cm-row { display: flex; flex-direction: column; }
+.cm-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+
+#cm-pin-labels {
+  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
+  max-height: 220px; overflow-y: auto; padding: 4px 0;
+}
+.pin-label-row { display: flex; align-items: center; gap: 5px; }
+.pin-idx {
+  width: 22px; text-align: right; flex-shrink: 0;
+  font-size: 10px; font-weight: 600; color: #555577; font-family: monospace;
+}
+.pin-label-input {
+  flex: 1; background: #0e0e1e; border: 1px solid #222238;
+  color: #c0c4e8; padding: 4px 6px; border-radius: 3px; font-size: 11px; font-family: monospace;
+}
+.pin-label-input:focus { outline: none; border-color: #5566aa; }
+
+.btn-primary {
+  background: #1e3a6a; border-color: #4488dd; color: #88bbff; font-weight: 600;
+}
+.btn-primary:hover { background: #264a8a; border-color: #66aaff; }
+.btn-primary:disabled { opacity: 0.5; cursor: default; }
+
+/* Pin remove button */
+.pin-del-btn {
+  padding: 0 4px; font-size: 12px; line-height: 1.4;
+  background: transparent; border-color: transparent; color: #ff6666;
+  opacity: 0; transition: opacity .15s;
+}
+.pin-table tr:hover .pin-del-btn { opacity: 1; }
+.pin-del-btn:hover { background: #3a1414; border-color: #aa3333; }
+
+/* Wire drag cursor hint */
+#canvas-container.wire-drag { cursor: grabbing; }
+
+/* ── Context menu ─────────────────────────────────────────────────────────── */
+#ctx-menu {
+  position: fixed; z-index: 9000; display: none;
+  background: #1a1a2e; border: 1px solid #3a3a66; border-radius: 6px;
+  box-shadow: 0 6px 24px rgba(0,0,0,.55); padding: 4px 0; min-width: 170px;
+  user-select: none;
+}
+#ctx-menu.open { display: block; }
+.ctx-item {
+  padding: 7px 14px; font-size: 12px; color: #c0c4e8; cursor: pointer;
+  display: flex; align-items: center; gap: 8px; white-space: nowrap;
+}
+.ctx-item:hover { background: #2a2a50; color: #fff; }
+.ctx-item.danger { color: #dd6666; }
+.ctx-item.danger:hover { background: #3a1414; color: #ff8888; }
+.ctx-sep { height: 1px; background: #2a2a44; margin: 4px 0; }
+
+/* Misc */
+input[type="checkbox"] { accent-color: #5588dd; width: 14px; height: 14px; cursor: pointer; }
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: #2a2a44; border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: #3a3a66; }
+.muted { color: #444466; }
+.small { font-size: 11px; }
+.sep   { width: 1px; height: 22px; background: #2a2a44; margin: 0 3px; }

frontend/index.html

@@ -0,0 +1,405 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>WireDraw — Wiring Diagram Maker</title>
+  <link rel="stylesheet" href="/css/main.css">
+</head>
+<body>
+<div id="app">
+
+  <!-- ── Toolbar ──────────────────────────────────────────────────────────── -->
+  <header id="toolbar">
+    <div class="toolbar-left">
+      <span class="app-title">⚡ WireDraw</span>
+      <input id="diagram-name" type="text" class="diagram-name-input" placeholder="Diagram name…">
+    </div>
+
+    <div class="toolbar-center">
+      <!-- Mode -->
+      <button id="btn-select" class="mode-btn active" title="Select mode (S)">▸ Select</button>
+      <button id="btn-wire"   class="mode-btn"        title="Draw wire: drag from pin to pin (W)">∿ Wire</button>
+      <div class="sep"></div>
+      <!-- Routing -->
+      <span class="toolbar-label">Route:</span>
+      <button id="btn-route-ortho"  class="route-btn active" title="Orthogonal (right-angle) routing">⌐ Ortho</button>
+      <button id="btn-route-direct" class="route-btn"        title="Direct (straight line) routing">⤢ Direct</button>
+      <button id="btn-route-curved" class="route-btn"        title="Curved (smooth bezier) routing">∿ Curved</button>
+      <div class="sep"></div>
+      <!-- Actions -->
+      <button id="btn-snap"      title="Toggle grid snap (G)" class="snap-btn">⊹ Snap</button>
+      <button id="btn-harness"   title="Toggle harness view (H)">⌇ Harness</button>
+      <button id="btn-fit"       title="Fit canvas to devices (F)">⊞ Fit</button>
+      <button id="btn-duplicate" title="Duplicate selected (Ctrl+D)">⊕ Dupe</button>
+      <button id="btn-undo"      title="Undo (Ctrl+Z)">↩ Undo</button>
+      <button id="btn-delete"    class="danger-btn" title="Delete selected (Del)">✕ Delete</button>
+    </div>
+
+    <div class="toolbar-right">
+      <div id="saved-indicator">✓ Saved</div>
+      <div class="export-wrap">
+        <button id="export-toggle">Export ▾</button>
+        <div id="export-menu">
+          <button id="btn-bom">📋 BOM (CSV)</button>
+          <button id="btn-assembly">📄 Assembly (TXT)</button>
+          <button id="btn-json">{ } JSON</button>
+          <button id="btn-img">🖼 Image (PNG)</button>
+          <button id="btn-formboard">📐 Formboard (1:1)</button>
+        </div>
+      </div>
+    </div>
+  </header>
+
+  <!-- ── Mode bar ─────────────────────────────────────────────────────────── -->
+  <div id="mode-indicator"></div>
+
+  <!-- ── Main ─────────────────────────────────────────────────────────────── -->
+  <div id="main">
+
+    <!-- Left sidebar -->
+    <aside id="left-sidebar">
+      <!-- Diagram list -->
+      <div class="sidebar-section" style="flex-shrink:0">
+        <div class="section-header">
+          Diagrams
+          <button id="btn-new" title="New diagram" style="padding:2px 8px;font-size:16px;line-height:1">+</button>
+        </div>
+        <div id="diagram-list" style="overflow-y:auto;max-height:180px"></div>
+      </div>
+
+      <!-- Tabs: Devices / Connectors -->
+      <div class="tab-bar">
+        <button class="sidebar-tab active" data-tab="devices">Devices</button>
+        <button class="sidebar-tab" data-tab="connectors">Connector Library</button>
+      </div>
+
+      <!-- Devices panel -->
+      <div class="tab-panel" data-panel="devices" style="overflow-y:auto;flex:1">
+        <p class="muted small" style="padding:5px 10px">Drag to canvas or double-click to add</p>
+        <div id="device-library"></div>
+      </div>
+
+      <!-- Connector library panel -->
+      <div class="tab-panel" data-panel="connectors" style="display:none;flex-direction:column;overflow:hidden;flex:1">
+        <div style="padding:6px 8px;display:flex;flex-direction:column;gap:4px;flex-shrink:0">
+          <div style="display:flex;gap:4px;align-items:center">
+            <input id="lib-search" type="text" placeholder="Search connectors…" style="flex:1;background:#0e0e1e;border:1px solid #2a2a44;color:#c0c4e8;padding:5px 8px;border-radius:4px;font-size:12px">
+            <button id="btn-new-connector" title="Create custom connector" style="padding:4px 8px;font-size:13px;flex-shrink:0">+</button>
+          </div>
+          <select id="lib-category" style="background:#0e0e1e;border:1px solid #2a2a44;color:#c0c4e8;padding:4px 6px;border-radius:4px;font-size:11px"></select>
+        </div>
+        <p class="muted small" style="padding:0 10px 4px">Drag to canvas or double-click to add</p>
+        <div id="lib-list" style="overflow-y:auto;flex:1;padding:4px"></div>
+      </div>
+    </aside>
+
+    <!-- Canvas -->
+    <main id="canvas-area">
+      <div id="canvas-container"></div>
+      <div id="canvas-placeholder">
+        <div class="placeholder-content">
+          <h2>⚡ WireDraw</h2>
+          <p>Create or open a diagram to begin</p>
+          <button onclick="app.newDiagram()">+ New Diagram</button>
+        </div>
+      </div>
+    </main>
+
+    <!-- Right sidebar — Properties -->
+    <aside id="right-sidebar">
+      <div class="section-header">Properties</div>
+
+      <!-- Empty state -->
+      <div id="props-empty" style="padding:20px 12px;color:#444466;font-size:12px;text-align:center">
+        Select a device or wire to edit its properties.
+      </div>
+
+      <!-- Multi-select state -->
+      <div id="props-multi" style="display:none;padding:24px 12px;text-align:center">
+        <div id="props-multi-count" style="font-size:13px;color:#c8ccee"></div>
+        <div style="margin-top:6px;font-size:11px;color:#444466">Drag any to move all · Ctrl+D to duplicate · Del to delete</div>
+      </div>
+
+      <!-- Device properties -->
+      <div id="props-device" style="display:none">
+        <div class="prop-row">
+          <label>Type</label>
+          <span id="prop-type" class="prop-value"></span>
+        </div>
+        <div class="prop-row">
+          <label>Reference</label>
+          <input id="prop-reference" type="text" placeholder="J1, TB1, U1…">
+        </div>
+        <div class="prop-row">
+          <label>Label</label>
+          <input id="prop-label" type="text" placeholder="Friendly name">
+        </div>
+        <div class="prop-row">
+          <label>Part Number</label>
+          <div style="display:flex;gap:4px">
+            <input id="prop-partnumber" type="text" placeholder="Mfr part number" style="flex:1;min-width:0">
+            <button id="btn-octopart-search" title="Search Octopart / Nexar" style="padding:4px 7px;font-size:13px;flex-shrink:0">🔍</button>
+          </div>
+          <div id="octopart-results" style="display:none"></div>
+          <div id="octopart-status-msg" style="display:none;font-size:10px;color:#666688;margin-top:3px"></div>
+        </div>
+        <div class="prop-row">
+          <label>Manufacturer</label>
+          <input id="prop-manufacturer" type="text" placeholder="Manufacturer">
+        </div>
+        <div class="prop-row" id="prop-datasheet-row" style="display:none">
+          <label>Datasheet</label>
+          <a id="prop-datasheet-link" href="#" target="_blank" rel="noopener noreferrer"
+             style="font-size:11px;color:#7788ff;word-break:break-all;display:block">📄 Open datasheet</a>
+        </div>
+        <div class="prop-row">
+          <label>Font Size</label>
+          <input id="prop-fontsize" type="number" min="6" max="72" step="1" placeholder="12" style="width:64px">
+        </div>
+        <!-- Group-specific section (shown only for section box) -->
+        <div id="group-section" style="display:none">
+          <div class="prop-row">
+            <label>Fill Color</label>
+            <input id="group-fill-color" type="color" value="#2828a0" class="color-swatch">
+          </div>
+          <div class="prop-row">
+            <label>Opacity</label>
+            <div style="display:flex;gap:6px;align-items:center">
+              <input id="group-fill-opacity" type="range" min="0.02" max="0.6" step="0.01" value="0.15" style="flex:1">
+              <span id="group-fill-opacity-val" style="font-size:10px;color:#778;width:28px;text-align:right">15%</span>
+            </div>
+          </div>
+        </div>
+        <!-- Cable-specific section (shown only for cable devices) -->
+        <div id="cable-section" style="display:none">
+          <div class="prop-row">
+            <label>Jacket Color</label>
+            <input id="cable-jacket-color" type="color" value="#2a2a2a" class="color-swatch">
+          </div>
+          <div class="prop-row">
+            <label>Sleeve Length</label>
+            <div style="display:flex;gap:6px;align-items:center">
+              <input id="cable-sleeve-length" type="range" min="0" max="200" step="5" value="60" style="flex:1">
+              <span id="cable-sleeve-length-val" style="font-size:10px;color:#778;width:32px;text-align:right">60 px</span>
+            </div>
+          </div>
+          <div class="prop-row">
+            <label>Conductors</label>
+            <table class="pin-table">
+              <thead><tr><th>#</th><th>Name</th><th>Color</th><th></th></tr></thead>
+              <tbody id="conductor-table-body"></tbody>
+            </table>
+            <button id="prop-add-conductor" style="margin-top:5px;width:100%;font-size:11px;padding:3px 6px">+ Add Conductor</button>
+          </div>
+        </div>
+
+        <div class="prop-row">
+          <label>Pins <span class="muted small">(rename inline)</span></label>
+          <table class="pin-table">
+            <thead><tr><th>ID</th><th>Name</th><th title="L=left R=right T=top B=bottom">Side</th><th></th></tr></thead>
+            <tbody id="pin-table-body"></tbody>
+          </table>
+          <div style="margin-top:5px;display:flex;gap:4px">
+            <button id="prop-add-pin" style="flex:1;font-size:11px;padding:3px 6px">+ Add Pin</button>
+            <button id="prop-save-connector" class="btn-primary" style="flex:1;font-size:11px;padding:3px 6px">⬆ Save to Library</button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Wire properties -->
+      <div id="props-wire" style="display:none">
+        <div class="prop-row">
+          <label>From</label>
+          <span id="wire-from" class="prop-value mono"></span>
+        </div>
+        <div class="prop-row">
+          <label>To</label>
+          <span id="wire-to" class="prop-value mono"></span>
+        </div>
+        <div class="prop-row">
+          <label>Label</label>
+          <input id="wire-label" type="text" placeholder="Wire label / ID">
+        </div>
+        <div class="prop-row">
+          <label>Primary Color</label>
+          <div style="display:flex;gap:6px;align-items:center">
+            <input id="wire-color" type="color" value="#CC0000" class="color-swatch">
+            <select id="wire-color-preset" style="flex:1;background:#0e0e1e;border:1px solid #2a2a44;color:#c0c4e8;padding:4px 6px;border-radius:4px;font-size:11px">
+              <option value="">— Preset colors —</option>
+            </select>
+          </div>
+        </div>
+        <div class="prop-row">
+          <label id="wire-stripe-lbl">Stripe Color</label>
+          <div style="display:flex;gap:6px;align-items:center">
+            <label id="wire-stripe-toggle-lbl" style="display:flex;align-items:center;gap:4px;cursor:pointer;font-size:11px;color:#778">
+              <input id="wire-stripe-enabled" type="checkbox"> stripe
+            </label>
+            <input id="wire-stripe" type="color" value="#ffffff" disabled class="color-swatch" style="opacity:0.3">
+          </div>
+        </div>
+        <div class="prop-row">
+          <label>Wire Gauge</label>
+          <select id="wire-gauge">
+            <optgroup label="AWG">
+              <option>4 AWG</option>
+              <option>6 AWG</option>
+              <option>8 AWG</option>
+              <option>10 AWG</option>
+              <option>12 AWG</option>
+              <option>14 AWG</option>
+              <option>16 AWG</option>
+              <option selected>18 AWG</option>
+              <option>20 AWG</option>
+              <option>22 AWG</option>
+              <option>24 AWG</option>
+              <option>26 AWG</option>
+            </optgroup>
+            <optgroup label="Metric (mm²)">
+              <option>0.5 mm²</option>
+              <option>0.75 mm²</option>
+              <option>1.0 mm²</option>
+              <option>1.5 mm²</option>
+              <option>2.0 mm²</option>
+              <option>2.5 mm²</option>
+              <option>4.0 mm²</option>
+              <option>6.0 mm²</option>
+              <option>10 mm²</option>
+              <option>16 mm²</option>
+              <option>25 mm²</option>
+              <option>35 mm²</option>
+              <option>50 mm²</option>
+              <option>70 mm²</option>
+              <option>95 mm²</option>
+            </optgroup>
+          </select>
+        </div>
+        <div class="prop-row" style="display:flex;gap:6px">
+          <div style="flex:1">
+            <label>Length</label>
+            <input id="wire-length" type="number" min="0" step="0.5" placeholder="0.0">
+          </div>
+          <div style="width:64px">
+            <label>Unit</label>
+            <select id="wire-unit">
+              <option>in</option><option>cm</option><option>mm</option><option>ft</option>
+            </select>
+          </div>
+        </div>
+        <div class="prop-row">
+          <label>Twisted Pair</label>
+          <div style="display:flex;gap:8px;align-items:center">
+            <label style="display:flex;align-items:center;gap:4px;cursor:pointer;font-size:11px;color:#778">
+              <input id="wire-twisted" type="checkbox"> twisted pair
+            </label>
+            <input id="wire-twist-pitch" type="number" min="8" max="64" step="2" value="16" disabled
+              style="width:48px;opacity:0.3">
+            <span id="wire-twist-pitch-label" style="font-size:10px;color:#444466">px pitch</span>
+          </div>
+        </div>
+        <div class="prop-row">
+          <label>Shielded</label>
+          <label style="display:flex;align-items:center;gap:4px;cursor:pointer;font-size:11px;color:#778">
+            <input id="wire-shielded" type="checkbox"> shielded cable
+          </label>
+        </div>
+        <div class="prop-row">
+          <label>Size Label</label>
+          <label style="display:flex;align-items:center;gap:4px;cursor:pointer;font-size:11px;color:#778">
+            <input id="wire-show-size-label" type="checkbox"> show gauge on canvas
+          </label>
+        </div>
+        <div class="prop-row">
+          <label>Notes</label>
+          <textarea id="wire-notes" rows="3" placeholder="Notes…" style="resize:vertical"></textarea>
+        </div>
+        <div class="prop-section-header" style="margin-top:10px;margin-bottom:4px;font-size:10px;color:#556;text-transform:uppercase;letter-spacing:.05em">Multi-Core Bundle</div>
+        <div class="prop-row">
+          <label>Bundle</label>
+          <div style="display:flex;gap:4px;flex:1">
+            <select id="wire-bundle-select" style="flex:1">
+              <option value="">— none —</option>
+            </select>
+            <button id="wire-bundle-new" title="New bundle" style="padding:2px 7px;font-size:13px">+</button>
+          </div>
+        </div>
+        <div id="wire-bundle-edit" style="display:none">
+          <div class="prop-row">
+            <label>Label</label>
+            <input id="wire-bundle-label" type="text" placeholder="e.g. CAN Bus" style="flex:1">
+          </div>
+          <div class="prop-row">
+            <label>Jacket</label>
+            <input id="wire-bundle-color" type="color" value="#2a2a2a" style="width:50px">
+            <button id="wire-bundle-delete" style="margin-left:auto;padding:2px 7px;font-size:11px;color:#c66;background:none;border:1px solid #c66;border-radius:3px;cursor:pointer">Delete</button>
+          </div>
+        </div>
+      </div>
+    </aside>
+
+  </div><!-- #main -->
+</div><!-- #app -->
+
+<!-- ── Custom Connector Modal ──────────────────────────────────────────────── -->
+<div id="connector-modal" style="display:none">
+  <div class="modal-box">
+    <div class="modal-header">
+      <h3 id="cm-modal-title">New Custom Connector</h3>
+    </div>
+    <div class="modal-body">
+      <div class="cm-row">
+        <label class="cm-label" for="cm-name">Name <span style="color:#ff6666">*</span></label>
+        <input id="cm-name" type="text" class="cm-input" placeholder="e.g. AMP Superseal 6P">
+      </div>
+      <div class="cm-row cm-row-2col">
+        <div>
+          <label class="cm-label" for="cm-category">Category</label>
+          <input id="cm-category" type="text" class="cm-input" placeholder="Custom">
+        </div>
+        <div>
+          <label class="cm-label" for="cm-pincount">Pin Count <span style="color:#ff6666">*</span></label>
+          <input id="cm-pincount" type="number" class="cm-input" min="1" max="64" value="4">
+        </div>
+      </div>
+      <div class="cm-row cm-row-2col">
+        <div>
+          <label class="cm-label" for="cm-manufacturer">Manufacturer</label>
+          <input id="cm-manufacturer" type="text" class="cm-input" placeholder="e.g. TE Connectivity">
+        </div>
+        <div>
+          <label class="cm-label" for="cm-partnumber">Part Number</label>
+          <input id="cm-partnumber" type="text" class="cm-input" placeholder="e.g. 1-1703630-1">
+        </div>
+      </div>
+      <div class="cm-row">
+        <label class="cm-label" for="cm-description">Description</label>
+        <input id="cm-description" type="text" class="cm-input" placeholder="Optional description">
+      </div>
+      <div class="cm-row">
+        <label class="cm-label">Pin Labels <span class="muted small">(optional)</span></label>
+        <div id="cm-pin-labels"></div>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button id="cm-delete" class="danger-btn" style="display:none">Delete</button>
+      <div style="flex:1"></div>
+      <button id="cm-cancel">Cancel</button>
+      <button id="cm-save" class="btn-primary">Save</button>
+    </div>
+  </div>
+</div>
+
+<!-- ── Context Menu ──────────────────────────────────────────────────────────── -->
+<div id="ctx-menu">
+  <!-- populated dynamically by app.js -->
+</div>
+
+<script src="https://unpkg.com/konva@9/konva.min.js"></script>
+<script src="/js/api.js"></script>
+<script src="/js/deviceTypes.js"></script>
+<script src="/js/connectorLibrary.js"></script>
+<script src="/js/canvas.js"></script>
+<script src="/js/app.js"></script>
+</body>
+</html>

frontend/js/api.js

@@ -0,0 +1,52 @@
+const API_BASE = "/api";
+
+async function apiFetch(path, options = {}) {
+  const res = await fetch(`${API_BASE}${path}`, options);
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(`API ${res.status}: ${text}`);
+  }
+  return res.json();
+}
+
+const api = {
+  diagrams: {
+    list: () => apiFetch("/diagrams/"),
+    create: (data) => apiFetch("/diagrams/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }),
+    get: (id) => apiFetch(`/diagrams/${id}`),
+    update: (id, data) => apiFetch(`/diagrams/${id}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }),
+    delete: (id) => apiFetch(`/diagrams/${id}`, { method: "DELETE" }),
+  },
+  devices: {
+    create: (data) => apiFetch("/devices/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }),
+    update: (id, data) => apiFetch(`/devices/${id}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }),
+    delete: (id) => apiFetch(`/devices/${id}`, { method: "DELETE" }),
+  },
+  wires: {
+    create: (data) => apiFetch("/wires/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }),
+    update: (id, data) => apiFetch(`/wires/${id}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }),
+    delete: (id) => apiFetch(`/wires/${id}`, { method: "DELETE" }),
+  },
+  bundles: {
+    listForDiagram: (diagramId) => apiFetch(`/bundles/diagram/${diagramId}`),
+    create: (data)     => apiFetch("/bundles/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }),
+    update: (id, data) => apiFetch(`/bundles/${id}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }),
+    delete: (id)       => apiFetch(`/bundles/${id}`, { method: "DELETE" }),
+  },
+  connectors: {
+    list:   ()         => apiFetch("/connectors/"),
+    create: (data)     => apiFetch("/connectors/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }),
+    update: (id, data) => apiFetch(`/connectors/${id}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }),
+    delete: (id)       => apiFetch(`/connectors/${id}`, { method: "DELETE" }),
+  },
+  octopart: {
+    status: ()      => apiFetch("/octopart/status"),
+    search: (q, n)  => apiFetch(`/octopart/search?q=${encodeURIComponent(q)}&limit=${n || 8}`),
+  },
+  export: {
+    bomUrl: (id) => `${API_BASE}/export/${id}/bom/csv`,
+    assemblyUrl: (id) => `${API_BASE}/export/${id}/assembly/txt`,
+    jsonUrl: (id) => `${API_BASE}/export/${id}/json`,
+    formboardUrl: (id) => `${API_BASE}/export/${id}/formboard`,
+  },
+};

frontend/js/connectorLibrary.js

@@ -0,0 +1,184 @@
+// Automotive / EV connector library
+// Each entry: { id, name, manufacturer, partNumber, pinCount, pinLabels?, description }
+
+const CONNECTOR_LIBRARY = {
+  "Deutsch DT": [
+    { id: "dt-2p",  name: "DT04-2P",  manufacturer: "TE Connectivity", partNumber: "DT04-2P-P012",  pinCount: 2,  description: "2-pin weatherproof plug, 20–14 AWG" },
+    { id: "dt-3p",  name: "DT04-3P",  manufacturer: "TE Connectivity", partNumber: "DT04-3P-P012",  pinCount: 3,  description: "3-pin weatherproof plug, 20–14 AWG" },
+    { id: "dt-4p",  name: "DT04-4P",  manufacturer: "TE Connectivity", partNumber: "DT04-4P-P012",  pinCount: 4,  description: "4-pin weatherproof plug, 20–14 AWG" },
+    { id: "dt-6p",  name: "DT04-6P",  manufacturer: "TE Connectivity", partNumber: "DT04-6P-P012",  pinCount: 6,  description: "6-pin weatherproof plug, 20–14 AWG" },
+    { id: "dt-8p",  name: "DT04-8P",  manufacturer: "TE Connectivity", partNumber: "DT04-8P-P012",  pinCount: 8,  description: "8-pin weatherproof plug, 20–14 AWG" },
+    { id: "dt-12p", name: "DT04-12P", manufacturer: "TE Connectivity", partNumber: "DT04-12P-P014", pinCount: 12, description: "12-pin weatherproof plug, 20–14 AWG" },
+    { id: "dt-2s",  name: "DT06-2S",  manufacturer: "TE Connectivity", partNumber: "DT06-2S",       pinCount: 2,  description: "2-pin weatherproof socket (receptacle)" },
+    { id: "dt-4s",  name: "DT06-4S",  manufacturer: "TE Connectivity", partNumber: "DT06-4S",       pinCount: 4,  description: "4-pin weatherproof socket (receptacle)" },
+    { id: "dt-6s",  name: "DT06-6S",  manufacturer: "TE Connectivity", partNumber: "DT06-6S",       pinCount: 6,  description: "6-pin weatherproof socket (receptacle)" },
+    { id: "dt-8s",  name: "DT06-8S",  manufacturer: "TE Connectivity", partNumber: "DT06-8S",       pinCount: 8,  description: "8-pin weatherproof socket (receptacle)" },
+  ],
+  "Deutsch DTM (Miniature)": [
+    { id: "dtm-2p", name: "DTM04-2P", manufacturer: "TE Connectivity", partNumber: "DTM04-2P", pinCount: 2, description: "2-pin miniature weatherproof, 24–20 AWG" },
+    { id: "dtm-3p", name: "DTM04-3P", manufacturer: "TE Connectivity", partNumber: "DTM04-3P", pinCount: 3, description: "3-pin miniature weatherproof" },
+    { id: "dtm-4p", name: "DTM04-4P", manufacturer: "TE Connectivity", partNumber: "DTM04-4P", pinCount: 4, description: "4-pin miniature weatherproof" },
+    { id: "dtm-6p", name: "DTM04-6P", manufacturer: "TE Connectivity", partNumber: "DTM04-6P", pinCount: 6, description: "6-pin miniature weatherproof" },
+    { id: "dtm-8p", name: "DTM04-8P", manufacturer: "TE Connectivity", partNumber: "DTM04-8P", pinCount: 8, description: "8-pin miniature weatherproof" },
+    { id: "dtm-2s", name: "DTM06-2S", manufacturer: "TE Connectivity", partNumber: "DTM06-2S", pinCount: 2, description: "2-pin miniature socket" },
+    { id: "dtm-4s", name: "DTM06-4S", manufacturer: "TE Connectivity", partNumber: "DTM06-4S", pinCount: 4, description: "4-pin miniature socket" },
+  ],
+  "Deutsch DTP (High Current)": [
+    { id: "dtp-2p", name: "DTP04-2P", manufacturer: "TE Connectivity", partNumber: "DTP04-2P-E003", pinCount: 2, description: "2-pin high current plug, up to 40A per pin, 12–10 AWG", pinLabels: ["+", "−"] },
+    { id: "dtp-4p", name: "DTP04-4P", manufacturer: "TE Connectivity", partNumber: "DTP04-4P-E003", pinCount: 4, description: "4-pin high current plug, up to 40A per pin" },
+    { id: "dtp-2s", name: "DTP06-2S", manufacturer: "TE Connectivity", partNumber: "DTP06-2S-E003", pinCount: 2, description: "2-pin high current socket" },
+    { id: "dtp-4s", name: "DTP06-4S", manufacturer: "TE Connectivity", partNumber: "DTP06-4S-E003", pinCount: 4, description: "4-pin high current socket" },
+  ],
+  "Deutsch HD (Heavy Duty)": [
+    { id: "hd-9",  name: "HD30-9",  manufacturer: "TE Connectivity", partNumber: "HD30-9-1939P", pinCount: 9,  description: "9-pin heavy duty, SAE J1939 CAN" },
+    { id: "hd-18", name: "HD30-18", manufacturer: "TE Connectivity", partNumber: "HD30-18-14P",  pinCount: 18, description: "18-pin heavy duty" },
+    { id: "hd-24", name: "HD30-24", manufacturer: "TE Connectivity", partNumber: "HD30-24-14P",  pinCount: 24, description: "24-pin heavy duty" },
+  ],
+  "Anderson Powerpole": [
+    { id: "ap-pp15",  name: "PP15/30",  manufacturer: "Anderson Power", partNumber: "1327G6",  pinCount: 2, description: "15/30 A Powerpole, 15–12 AWG",  pinLabels: ["+", "−"] },
+    { id: "ap-pp45",  name: "PP45",     manufacturer: "Anderson Power", partNumber: "1338G6",  pinCount: 2, description: "45 A Powerpole, 12–10 AWG",     pinLabels: ["+", "−"] },
+    { id: "ap-pp75",  name: "PP75",     manufacturer: "Anderson Power", partNumber: "5913G2",  pinCount: 2, description: "75 A Powerpole, 8–4 AWG",       pinLabels: ["+", "−"] },
+    { id: "ap-sb50",  name: "SB 50",    manufacturer: "Anderson Power", partNumber: "6319G1",  pinCount: 2, description: "50 A SB connector, 6–2 AWG",    pinLabels: ["+", "−"] },
+    { id: "ap-sb120", name: "SB 120",   manufacturer: "Anderson Power", partNumber: "6352G1",  pinCount: 2, description: "120 A SB connector, 2–4/0 AWG", pinLabels: ["+", "−"] },
+    { id: "ap-sb175", name: "SB 175",   manufacturer: "Anderson Power", partNumber: "6321G1",  pinCount: 2, description: "175 A SB connector, 2–4/0 AWG", pinLabels: ["+", "−"] },
+    { id: "ap-sb350", name: "SB 350",   manufacturer: "Anderson Power", partNumber: "6348G1",  pinCount: 2, description: "350 A SB connector, 4/0 AWG",   pinLabels: ["+", "−"] },
+  ],
+  "Molex Micro-Fit 3.0": [
+    { id: "mf-2",  name: "Micro-Fit 2-pin",  manufacturer: "Molex", partNumber: "43045-0200", pinCount: 2,  description: "600 V, 5 A, 3.0 mm pitch" },
+    { id: "mf-4",  name: "Micro-Fit 4-pin",  manufacturer: "Molex", partNumber: "43045-0400", pinCount: 4,  description: "600 V, 5 A" },
+    { id: "mf-6",  name: "Micro-Fit 6-pin",  manufacturer: "Molex", partNumber: "43045-0600", pinCount: 6,  description: "600 V, 5 A" },
+    { id: "mf-8",  name: "Micro-Fit 8-pin",  manufacturer: "Molex", partNumber: "43045-0800", pinCount: 8,  description: "600 V, 5 A" },
+    { id: "mf-10", name: "Micro-Fit 10-pin", manufacturer: "Molex", partNumber: "43045-1000", pinCount: 10, description: "600 V, 5 A" },
+    { id: "mf-12", name: "Micro-Fit 12-pin", manufacturer: "Molex", partNumber: "43045-1200", pinCount: 12, description: "600 V, 5 A" },
+  ],
+  "Molex Mini-Fit Jr.": [
+    { id: "mfj-2",  name: "Mini-Fit Jr. 2-pin",  manufacturer: "Molex", partNumber: "39012020", pinCount: 2,  description: "600 V, 9 A, 4.20 mm pitch" },
+    { id: "mfj-4",  name: "Mini-Fit Jr. 4-pin",  manufacturer: "Molex", partNumber: "39012040", pinCount: 4,  description: "600 V, 9 A" },
+    { id: "mfj-6",  name: "Mini-Fit Jr. 6-pin",  manufacturer: "Molex", partNumber: "39012060", pinCount: 6,  description: "600 V, 9 A" },
+    { id: "mfj-8",  name: "Mini-Fit Jr. 8-pin",  manufacturer: "Molex", partNumber: "39012080", pinCount: 8,  description: "600 V, 9 A" },
+    { id: "mfj-12", name: "Mini-Fit Jr. 12-pin", manufacturer: "Molex", partNumber: "39012120", pinCount: 12, description: "600 V, 9 A" },
+  ],
+  "Molex MX150 (Automotive)": [
+    { id: "mx-2", name: "MX150 2-pin", manufacturer: "Molex", partNumber: "33472-0201", pinCount: 2, description: "Sealed automotive, 600 V, 13 A" },
+    { id: "mx-4", name: "MX150 4-pin", manufacturer: "Molex", partNumber: "33472-0401", pinCount: 4, description: "Sealed automotive" },
+    { id: "mx-6", name: "MX150 6-pin", manufacturer: "Molex", partNumber: "33472-0601", pinCount: 6, description: "Sealed automotive" },
+    { id: "mx-8", name: "MX150 8-pin", manufacturer: "Molex", partNumber: "33472-0801", pinCount: 8, description: "Sealed automotive" },
+  ],
+  "TE Superseal 1.5 mm (IP67)": [
+    { id: "ss-1", name: "Superseal 1-pin", manufacturer: "TE Connectivity", partNumber: "1-967616-1", pinCount: 1, description: "IP67, 0.5–1.0 mm², 8.5 A" },
+    { id: "ss-2", name: "Superseal 2-pin", manufacturer: "TE Connectivity", partNumber: "1-967616-2", pinCount: 2, description: "IP67, 0.5–1.0 mm²" },
+    { id: "ss-3", name: "Superseal 3-pin", manufacturer: "TE Connectivity", partNumber: "1-967616-3", pinCount: 3, description: "IP67, 0.5–1.0 mm²" },
+    { id: "ss-4", name: "Superseal 4-pin", manufacturer: "TE Connectivity", partNumber: "1-967616-4", pinCount: 4, description: "IP67, 0.5–1.0 mm²" },
+    { id: "ss-6", name: "Superseal 6-pin", manufacturer: "TE Connectivity", partNumber: "1-967616-6", pinCount: 6, description: "IP67, 0.5–1.0 mm²" },
+  ],
+  "Delphi / Aptiv Weatherpack": [
+    { id: "wp-1", name: "Weatherpack 1-pin", manufacturer: "Aptiv (Delphi)", partNumber: "12015793", pinCount: 1, description: "GT series, 100 °C rated, 20–18 AWG" },
+    { id: "wp-2", name: "Weatherpack 2-pin", manufacturer: "Aptiv (Delphi)", partNumber: "12010299", pinCount: 2, description: "GT series, 100 °C rated" },
+    { id: "wp-3", name: "Weatherpack 3-pin", manufacturer: "Aptiv (Delphi)", partNumber: "12010325", pinCount: 3, description: "GT series" },
+    { id: "wp-4", name: "Weatherpack 4-pin", manufacturer: "Aptiv (Delphi)", partNumber: "12010298", pinCount: 4, description: "GT series" },
+    { id: "wp-6", name: "Weatherpack 6-pin", manufacturer: "Aptiv (Delphi)", partNumber: "12010973", pinCount: 6, description: "GT series" },
+  ],
+  "Delphi Metripack": [
+    { id: "mp150-2", name: "Metripack 150 2-pin", manufacturer: "Aptiv (Delphi)", partNumber: "12162825", pinCount: 2, description: "Metripack 150, sealed" },
+    { id: "mp150-3", name: "Metripack 150 3-pin", manufacturer: "Aptiv (Delphi)", partNumber: "12162193", pinCount: 3, description: "Metripack 150, sealed" },
+    { id: "mp280-2", name: "Metripack 280 2-pin", manufacturer: "Aptiv (Delphi)", partNumber: "12010973", pinCount: 2, description: "Metripack 280 (larger terminal, higher current)" },
+    { id: "mp630-1", name: "Metripack 630 1-pin", manufacturer: "Aptiv (Delphi)", partNumber: "12110293", pinCount: 1, description: "Metripack 630, high current single contact" },
+  ],
+  "Tesla (Proprietary / Approximate)": [
+    {
+      id: "tesla-hv23", name: "HV Battery 23-pin", manufacturer: "Tesla", partNumber: "Tesla OEM",
+      pinCount: 23, description: "Model S/X HV battery main connector (proprietary pinout — verify with service manual)",
+      pinLabels: ["HV+","HV+","HV−","HV−","SH","SH","HVIL+","HVIL−","CAN H","CAN L","CANH2","CANL2","12V","GND","GND","TP","TP","TP","TP","TP","TP","TP","TP"],
+    },
+    {
+      id: "tesla-hvil2", name: "HV Interlock 2-pin", manufacturer: "Tesla", partNumber: "Tesla OEM",
+      pinCount: 2, description: "High voltage interlock loop", pinLabels: ["HVIL+", "HVIL−"],
+    },
+    {
+      id: "tesla-charge-m3", name: "Charge Port (Model 3/Y)", manufacturer: "Tesla", partNumber: "Tesla OEM",
+      pinCount: 5, description: "AC charge port, Model 3 / Y (proprietary, similar to J1772)", pinLabels: ["L1","L2/N","GND","PP","CP"],
+    },
+    {
+      id: "tesla-can4", name: "CAN Bus 4-pin", manufacturer: "Tesla", partNumber: "Tesla OEM",
+      pinCount: 4, description: "Typical CAN bus connector (varies by model/year)", pinLabels: ["CAN H","CAN L","GND","12V"],
+    },
+    {
+      id: "tesla-hv2", name: "HV 2-pin (Phase)", manufacturer: "Tesla", partNumber: "Tesla OEM",
+      pinCount: 2, description: "HV 2-pin power connector (motor/inverter phase, approximate)", pinLabels: ["+","−"],
+    },
+  ],
+  "EV Charging Standards": [
+    {
+      id: "ev-j1772", name: "SAE J1772 Type 1", manufacturer: "Standard", partNumber: "SAE J1772",
+      pinCount: 5, description: "AC Level 1/2 charging — North America", pinLabels: ["L1","N","GND","PP","CP"],
+    },
+    {
+      id: "ev-type2", name: "IEC 62196 Type 2", manufacturer: "Standard", partNumber: "IEC 62196-2",
+      pinCount: 7, description: "AC charging — Europe / international", pinLabels: ["L1","L2","L3","N","GND","PP","CP"],
+    },
+    {
+      id: "ev-chademo", name: "CHAdeMO DC Fast", manufacturer: "Standard", partNumber: "CHAdeMO",
+      pinCount: 10, description: "DC fast charge (up to 400 A / 500 V)", pinLabels: ["DC+","DC−","GND","CAN H","CAN L","Charge enable","Car ready","Charge stop","FG","Shield"],
+    },
+    {
+      id: "ev-ccs1", name: "CCS Combo 1 (DC)", manufacturer: "Standard", partNumber: "SAE J1772 CCS",
+      pinCount: 2, description: "CCS DC fast charge pins (2 large pins below J1772)", pinLabels: ["DC+","DC−"],
+    },
+  ],
+  "CAN / Network": [
+    { id: "can-dt2",    name: "CAN Deutsch 2-pin",    manufacturer: "TE Connectivity", partNumber: "DT04-2P", pinCount: 2, description: "Deutsch DT 2-pin for CAN bus",       pinLabels: ["CAN H","CAN L"] },
+    { id: "can-j1939",  name: "SAE J1939 9-pin",      manufacturer: "Amphenol",        partNumber: "HD10-9-1939P", pinCount: 9, description: "J1939 CAN heavy-vehicle datalink", pinLabels: ["−Battery","+Battery","GND","CAN H","Shield","GND","CAN L","NC","NC"] },
+    { id: "can-obd2",   name: "OBD-II 16-pin",        manufacturer: "Standard",        partNumber: "SAE J1962", pinCount: 16, description: "On-board diagnostics port", pinLabels: ["Mfr","Mfr","GND","Mfr","Sig GND","CAN H","K-Line","Mfr","Bat+","Mfr","Mfr","Mfr","Mfr","CAN L","L-Line","OBD+"] },
+  ],
+  "General Automotive / EV": [
+    { id: "ga-motor3", name: "Motor Phase 3-pin",       manufacturer: "varies", partNumber: "varies", pinCount: 3, description: "3-phase motor connections",           pinLabels: ["U","V","W"] },
+    { id: "ga-res2",   name: "Resolver 2-pin",          manufacturer: "varies", partNumber: "varies", pinCount: 2, description: "Motor resolver position sensor",      pinLabels: ["SIN","COS"] },
+    { id: "ga-therm2", name: "Temperature Sensor 2-pin",manufacturer: "varies", partNumber: "varies", pinCount: 2, description: "NTC/PTC thermistor",                  pinLabels: ["SIG","GND"] },
+    { id: "ga-hall3",  name: "Hall Sensor 3-pin",       manufacturer: "varies", partNumber: "varies", pinCount: 3, description: "Hall effect position sensor",         pinLabels: ["VCC","GND","SIG"] },
+    { id: "ga-batt2",  name: "12 V Battery 2-pin",      manufacturer: "varies", partNumber: "varies", pinCount: 2, description: "12 V battery / accessory supply",    pinLabels: ["+12V","GND"] },
+    { id: "ga-ctrlr4", name: "Controller 4-pin",        manufacturer: "varies", partNumber: "varies", pinCount: 4, description: "Generic 4-pin controller interface",  pinLabels: ["VCC","GND","SIG","EN"] },
+    { id: "ga-fuse2",  name: "Fuse Holder 2-pin",       manufacturer: "varies", partNumber: "varies", pinCount: 2, description: "Inline fuse holder connections",      pinLabels: ["IN","OUT"] },
+    { id: "ga-relay5", name: "Relay 5-pin (SPDT)",      manufacturer: "varies", partNumber: "varies", pinCount: 5, description: "SPDT automotive relay",               pinLabels: ["85","86","30","87","87a"] },
+  ],
+};
+
+// Build a flat lookup map for quick access by id
+const _CONN_BY_ID = {};
+for (const conns of Object.values(CONNECTOR_LIBRARY)) {
+  for (const c of conns) { _CONN_BY_ID[c.id] = c; }
+}
+
+function getConnectorById(id) { return _CONN_BY_ID[id] || null; }
+
+function connectorToDevice(connId, diagramId) {
+  const conn = getConnectorById(connId);
+  if (!conn) return null;
+
+  const pinCount = conn.pinCount || 2;
+  const w = 120;
+  const h = Math.max(60, pinCount * 18 + 20);
+  const pins = Array.from({ length: pinCount }, (_, i) => ({
+    id: `pin_${i + 1}`,
+    name: conn.pinLabels ? (conn.pinLabels[i] || String(i + 1)) : String(i + 1),
+    side: "right",
+    x_offset: w,
+    y_offset: ((i + 1) / (pinCount + 1)) * h,
+  }));
+
+  return {
+    diagram_id: diagramId,
+    device_type: "connector",
+    label: conn.name,
+    reference: "",
+    x: 200, y: 200,
+    width: w, height: h,
+    properties: {
+      pinCount,
+      orientation: "right",
+      partNumber: conn.partNumber || "",
+      manufacturer: conn.manufacturer || "",
+      connectorLibraryId: connId,
+    },
+    pins,
+  };
+}

frontend/js/deviceTypes.js

@@ -0,0 +1,272 @@
+const WIRE_COLORS = [
+  { name: "Black",  hex: "#000000" },
+  { name: "Brown",  hex: "#8B4513" },
+  { name: "Red",    hex: "#CC0000" },
+  { name: "Orange", hex: "#FF8C00" },
+  { name: "Yellow", hex: "#FFD700" },
+  { name: "Green",  hex: "#007700" },
+  { name: "Blue",   hex: "#0000CC" },
+  { name: "Violet", hex: "#7B00CC" },
+  { name: "Grey",   hex: "#808080" },
+  { name: "White",  hex: "#DDDDDD" },
+  { name: "Pink",   hex: "#FF69B4" },
+  { name: "Tan",    hex: "#D2B48C" },
+];
+
+const SIDE = { LEFT: "left", RIGHT: "right", TOP: "top", BOTTOM: "bottom" };
+
+function makePins(side, count, w, h, prefix = "") {
+  return Array.from({ length: count }, (_, i) => {
+    const t = (i + 1) / (count + 1);
+    const x = side === SIDE.LEFT ? 0 : side === SIDE.RIGHT ? w : t * w;
+    const y = side === SIDE.TOP ? 0 : side === SIDE.BOTTOM ? h : t * h;
+    return { id: `${prefix}pin_${i + 1}`, name: String(i + 1), side, x_offset: x, y_offset: y };
+  });
+}
+
+const DEVICE_TYPES = {
+  connector: {
+    label: "Connector",
+    description: "Multi-pin connector (inline/header)",
+    icon: "🔌",
+    defaultProps: { pinCount: 4, orientation: "right", partNumber: "", manufacturer: "" },
+    defaultSize: (p) => ({ w: 100, h: Math.max(60, (p.pinCount || 4) * 20 + 20) }),
+    getPins: (p, w, h) => makePins(p.orientation || SIDE.RIGHT, p.pinCount || 4, w, h),
+  },
+  terminal_block: {
+    label: "Terminal Block",
+    description: "Screw terminal block",
+    icon: "⬛",
+    defaultProps: { terminalCount: 4, partNumber: "", manufacturer: "" },
+    defaultSize: (p) => ({ w: Math.max(60, (p.terminalCount || 4) * 24), h: 60 }),
+    getPins: (p, w, h) => {
+      const count = p.terminalCount || 4;
+      const pins = [];
+      for (let i = 0; i < count; i++) {
+        const x = ((i + 0.5) / count) * w;
+        pins.push({ id: `t${i + 1}`, name: String(i + 1), side: SIDE.TOP, x_offset: x, y_offset: 0 });
+        pins.push({ id: `b${i + 1}`, name: String(i + 1), side: SIDE.BOTTOM, x_offset: x, y_offset: h });
+      }
+      return pins;
+    },
+  },
+  component: {
+    label: "Component",
+    description: "Generic component / IC",
+    icon: "⬜",
+    defaultProps: { leftPins: 2, rightPins: 2, partNumber: "", manufacturer: "" },
+    defaultSize: () => ({ w: 120, h: 80 }),
+    getPins: (p, w, h) => {
+      const left = makePins(SIDE.LEFT, p.leftPins || 2, w, h, "L");
+      const right = makePins(SIDE.RIGHT, p.rightPins || 2, w, h, "R");
+      left.forEach((pin, i) => (pin.name = `L${i + 1}`));
+      right.forEach((pin, i) => (pin.name = `R${i + 1}`));
+      return [...left, ...right];
+    },
+  },
+  splice: {
+    label: "Splice / Junction",
+    description: "Wire splice or junction point",
+    icon: "✕",
+    defaultProps: {},
+    defaultSize: () => ({ w: 32, h: 32 }),
+    getPins: (p, w, h) => [
+      { id: "left",   name: "L", side: SIDE.LEFT,   x_offset: 0,     y_offset: h / 2 },
+      { id: "right",  name: "R", side: SIDE.RIGHT,  x_offset: w,     y_offset: h / 2 },
+      { id: "top",    name: "T", side: SIDE.TOP,    x_offset: w / 2, y_offset: 0     },
+      { id: "bottom", name: "B", side: SIDE.BOTTOM, x_offset: w / 2, y_offset: h     },
+    ],
+  },
+  label: {
+    label: "Note / Label",
+    description: "Text annotation on the diagram",
+    icon: "📝",
+    defaultProps: { text: "Note" },
+    defaultSize: () => ({ w: 160, h: 40 }),
+    getPins: () => [],
+  },
+  group: {
+    label: "Section Box",
+    description: "Labeled section rectangle for visual grouping",
+    icon: "⬚",
+    defaultProps: { fillColor: "#2828a0", fillOpacity: 0.15 },
+    defaultSize: () => ({ w: 320, h: 220 }),
+    getPins: () => [],
+  },
+
+  // ── Electrical components ───────────────────────────────────────────────────
+  fuse: {
+    label: "Fuse",
+    description: "In-line fuse or fusible link",
+    icon: "⚡",
+    defaultProps: { ampRating: "10A", fuseType: "blade", partNumber: "", manufacturer: "" },
+    defaultSize: () => ({ w: 80, h: 44 }),
+    getPins: (p, w, h) => [
+      { id: "A", name: "A", side: SIDE.LEFT,  x_offset: 0, y_offset: h / 2 },
+      { id: "B", name: "B", side: SIDE.RIGHT, x_offset: w, y_offset: h / 2 },
+    ],
+  },
+  relay: {
+    label: "Relay",
+    description: "Electromagnetic relay — SPDT 5-pin (85/86/30/87/87a)",
+    icon: "🔁",
+    defaultProps: { coilVoltage: "12V", ampRating: "30A", partNumber: "", manufacturer: "" },
+    defaultSize: () => ({ w: 110, h: 100 }),
+    getPins: (p, w, h) => [
+      { id: "85",  name: "85",  side: SIDE.LEFT,  x_offset: 0, y_offset: h * 0.30 },
+      { id: "86",  name: "86",  side: SIDE.LEFT,  x_offset: 0, y_offset: h * 0.70 },
+      { id: "87a", name: "87a", side: SIDE.RIGHT, x_offset: w, y_offset: h * 0.20 },
+      { id: "30",  name: "30",  side: SIDE.RIGHT, x_offset: w, y_offset: h * 0.50 },
+      { id: "87",  name: "87",  side: SIDE.RIGHT, x_offset: w, y_offset: h * 0.80 },
+    ],
+  },
+  switch: {
+    label: "Switch",
+    description: "SPDT switch — common, normally-open, normally-closed",
+    icon: "⎘",
+    defaultProps: { switchType: "SPDT", partNumber: "", manufacturer: "" },
+    defaultSize: () => ({ w: 90, h: 70 }),
+    getPins: (p, w, h) => [
+      { id: "C",  name: "C",  side: SIDE.LEFT,  x_offset: 0, y_offset: h / 2 },
+      { id: "NO", name: "NO", side: SIDE.RIGHT, x_offset: w, y_offset: h * 0.30 },
+      { id: "NC", name: "NC", side: SIDE.RIGHT, x_offset: w, y_offset: h * 0.70 },
+    ],
+  },
+  bulb: {
+    label: "Bulb / Light",
+    description: "Indicator lamp or lighting load",
+    icon: "💡",
+    defaultProps: { voltage: "12V", wattage: "", partNumber: "", manufacturer: "" },
+    defaultSize: () => ({ w: 80, h: 50 }),
+    getPins: (p, w, h) => [
+      { id: "+", name: "+", side: SIDE.LEFT,  x_offset: 0, y_offset: h / 2 },
+      { id: "-", name: "−", side: SIDE.RIGHT, x_offset: w, y_offset: h / 2 },
+    ],
+  },
+  motor: {
+    label: "Motor",
+    description: "DC motor or actuator",
+    icon: "⚙",
+    defaultProps: { voltage: "12V", ampRating: "", partNumber: "", manufacturer: "" },
+    defaultSize: () => ({ w: 90, h: 60 }),
+    getPins: (p, w, h) => [
+      { id: "+", name: "+", side: SIDE.LEFT,  x_offset: 0, y_offset: h / 2 },
+      { id: "-", name: "−", side: SIDE.RIGHT, x_offset: w, y_offset: h / 2 },
+    ],
+  },
+  diode: {
+    label: "Diode",
+    description: "Diode, Schottky, or TVS — anode / cathode",
+    icon: "⊳",
+    defaultProps: { diodeType: "rectifier", voltage: "", current: "", partNumber: "", manufacturer: "" },
+    defaultSize: () => ({ w: 80, h: 44 }),
+    getPins: (p, w, h) => [
+      { id: "A", name: "A", side: SIDE.LEFT,  x_offset: 0, y_offset: h / 2 },
+      { id: "K", name: "K", side: SIDE.RIGHT, x_offset: w, y_offset: h / 2 },
+    ],
+  },
+  resistor: {
+    label: "Resistor",
+    description: "Fixed resistor or load",
+    icon: "Ω",
+    defaultProps: { resistance: "", wattage: "", partNumber: "", manufacturer: "" },
+    defaultSize: () => ({ w: 80, h: 44 }),
+    getPins: (p, w, h) => [
+      { id: "1", name: "1", side: SIDE.LEFT,  x_offset: 0, y_offset: h / 2 },
+      { id: "2", name: "2", side: SIDE.RIGHT, x_offset: w, y_offset: h / 2 },
+    ],
+  },
+  capacitor: {
+    label: "Capacitor",
+    description: "Electrolytic or film capacitor",
+    icon: "⊏",
+    defaultProps: { capacitance: "", voltage: "", partNumber: "", manufacturer: "" },
+    defaultSize: () => ({ w: 80, h: 44 }),
+    getPins: (p, w, h) => [
+      { id: "+", name: "+", side: SIDE.LEFT,  x_offset: 0, y_offset: h / 2 },
+      { id: "-", name: "−", side: SIDE.RIGHT, x_offset: w, y_offset: h / 2 },
+    ],
+  },
+  ground: {
+    label: "Ground",
+    description: "Chassis or signal ground reference",
+    icon: "⏚",
+    defaultProps: { groundType: "chassis", reference: "" },
+    defaultSize: () => ({ w: 60, h: 50 }),
+    getPins: (p, w, h) => [
+      { id: "GND", name: "GND", side: SIDE.TOP, x_offset: w / 2, y_offset: 0 },
+    ],
+  },
+  power: {
+    label: "Power Rail",
+    description: "Battery positive, ignition, or supply rail",
+    icon: "⊕",
+    defaultProps: { voltage: "12V", sourceType: "battery", reference: "" },
+    defaultSize: () => ({ w: 70, h: 50 }),
+    getPins: (p, w, h) => [
+      { id: "PWR", name: "+", side: SIDE.BOTTOM, x_offset: w / 2, y_offset: h },
+    ],
+  },
+};
+
+const CABLE_DEFAULT_COLORS = [
+  "#dddddd", "#cc0000", "#111111", "#007700",
+  "#0000cc", "#ff8c00", "#8b4513", "#7b00cc",
+];
+
+const DEVICE_TYPES_EXTRA = {
+  cable: {
+    label: "Cable",
+    description: "Multi-conductor cable under one jacket",
+    icon: "🔗",
+    defaultProps: {
+      conductorCount: 4,
+      partNumber: "",
+      manufacturer: "",
+      jacketColor: "#2a2a2a",
+      sleeveLength: 60,
+      conductors: [
+        { name: "1", color: "#dddddd" },
+        { name: "2", color: "#cc0000" },
+        { name: "3", color: "#111111" },
+        { name: "4", color: "#007700" },
+      ],
+    },
+    defaultSize: (p) => {
+      const n = p.conductorCount || p.conductors?.length || 4;
+      return { w: 200, h: n * 24 + 40 };
+    },
+    getPins: (p, w, h) => {
+      const conductors = p.conductors || Array.from({ length: p.conductorCount || 4 }, (_, i) => ({ name: String(i + 1) }));
+      return conductors.flatMap((c, i) => {
+        const yOff = 26 + i * 24 + 12;
+        return [
+          { id: `L${i + 1}`, name: c.name || String(i + 1), side: "left",  x_offset: 0, y_offset: yOff },
+          { id: `R${i + 1}`, name: c.name || String(i + 1), side: "right", x_offset: w, y_offset: yOff },
+        ];
+      });
+    },
+  },
+};
+
+Object.assign(DEVICE_TYPES, DEVICE_TYPES_EXTRA);
+
+function buildDefaultDevice(typeKey, diagramId) {
+  const type = DEVICE_TYPES[typeKey];
+  if (!type) return null;
+  const props = { ...type.defaultProps };
+  const { w, h } = type.defaultSize(props);
+  const pins = type.getPins(props, w, h);
+  return {
+    diagram_id: diagramId,
+    device_type: typeKey,
+    label: type.label,
+    reference: "",
+    x: 200,
+    y: 200,
+    width: w,
+    height: h,
+    properties: props,
+    pins,
+  };
+}

start.bat

@@ -0,0 +1,11 @@
+@echo off
+echo Installing dependencies...
+cd /d "%~dp0backend"
+py -m pip install -r requirements.txt --quiet
+
+echo.
+echo Starting WireDraw at http://localhost:8000
+echo Press Ctrl+C to stop.
+echo.
+py run.py
+pause