diff --git a/COMPONENT_ARCHITECTURE.md b/COMPONENT_ARCHITECTURE.md
new file mode 100644
index 0000000..8fba113
--- /dev/null
+++ b/COMPONENT_ARCHITECTURE.md
@@ -0,0 +1,419 @@
+# Component Architecture
+
+This document describes the component-based architecture for canvas elements and edges.
+
+## Overview
+
+The component system provides an object-oriented, inheritance-based architecture for creating and managing canvas elements and edges. It replaces the previous procedural rendering approach with reusable, testable component classes.
+
+## Architecture Diagram
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                      BaseComponent                          │
+│  - Lifecycle (mount, update, unmount)                       │
+│  - DOM helpers (createElement, createSVGElement)            │
+│  - Event management (addEventListener, cleanup)             │
+└──────────────────┬──────────────────────────────────────────┘
+                   │
+        ┌──────────┴──────────┐
+        │                     │
+┌───────▼──────────┐  ┌───────▼──────────┐
+│ BaseElement      │  │ BaseEdge         │
+│ Component        │  │ Component        │
+│ - Positioning    │  │ - Line rendering │
+│ - Handles        │  │ - Intersections  │
+│ - Selection      │  │ - Labels         │
+└───────┬──────────┘  └───────┬──────────┘
+        │                     │
+  ┌─────┴─────┐         ┌─────┴─────┐
+  │           │         │           │
+┌─▼──┐  ┌────▼───┐  ┌──▼──┐  ┌────▼──────┐
+│Text│  │Markdown│  │Image│  │StandardEdge│
+└────┘  └────────┘  └─────┘  └───────────┘
+```
+
+## Base Classes
+
+### BaseComponent
+
+The root base class for all canvas components (elements and edges).
+
+**Responsibilities:**
+- Component lifecycle management (mount, update, unmount)
+- DOM/SVG element creation helpers
+- Event listener management with automatic cleanup
+- CSS style helpers
+
+**Key Methods:**
+```typescript
+abstract mount(): HTMLElement | SVGElement;
+abstract update(newData: TData): void;
+unmount(): void;
+getRoot(): HTMLElement | SVGElement | null;
+```
+
+**Example Usage:**
+```typescript
+class MyComponent extends BaseComponent<CanvasElement> {
+  mount() {
+    this.rootElement = this.createElement('div', 'my-component');
+    return this.rootElement;
+  }
+
+  update(newData: CanvasElement) {
+    this.data = newData;
+    // Update DOM...
+  }
+}
+```
+
+### BaseElementComponent
+
+Base class for all canvas element types (text, markdown, images, etc.).
+
+**Responsibilities:**
+- Element positioning and transforms (absolute/fixed)
+- Selection state management
+- Interaction handles (resize, rotate, scale, etc.)
+- Content rendering delegation to subclasses
+
+**Key Methods:**
+```typescript
+abstract renderContent(container: HTMLElement): void;
+protected applyPositioning(): void;
+protected buildHandles(): void;
+protected shouldUpdateContent(oldData, newData): boolean;
+protected shouldUpdatePosition(oldData, newData): boolean;
+```
+
+**Example Usage:**
+```typescript
+class TextElement extends BaseElementComponent {
+  protected renderContent(container: HTMLElement): void {
+    container.innerHTML = '';
+    const p = this.createElement('p');
+    p.textContent = this.data.content;
+    container.appendChild(p);
+  }
+}
+```
+
+### BaseEdgeComponent
+
+Base class for all edge/connection types.
+
+**Responsibilities:**
+- SVG line and label rendering
+- Source/target element intersection calculation
+- Arrowhead markers
+- Edge styling (color, thickness, dash patterns)
+
+**Key Methods:**
+```typescript
+protected updateEdgePosition(): void;
+protected calculateIntersection(from, to): {x, y} | null;
+protected updateStyle(): void;
+protected hide(): void;
+protected show(): void;
+```
+
+**Example Usage:**
+```typescript
+class StandardEdge extends BaseEdgeComponent {
+  // Uses default implementation
+  // Can override calculateIntersection() for custom paths
+}
+```
+
+## Component Registry
+
+The `ComponentRegistry` manages component types and provides factory methods.
+
+### Registration
+
+```typescript
+import { componentRegistry } from './components/ComponentRegistry';
+
+// Register a custom element type
+componentRegistry.registerElementType('my-type', MyElementComponent);
+
+// Register a custom edge type
+componentRegistry.registerEdgeType('curved', CurvedEdge);
+```
+
+### Factory Methods
+
+```typescript
+// Create element component
+const elementComponent = componentRegistry.createElementComponent(
+  canvasElement,
+  { controller, eventBus }
+);
+
+// Create edge component
+const edgeComponent = componentRegistry.createEdgeComponent(
+  edge,
+  { controller, eventBus }
+);
+```
+
+## Built-in Components
+
+### Element Components
+
+#### TextElement
+Simple text paragraph with color support.
+
+**Type:** `text`
+**Data:** `content` (string), `color` (optional)
+
+#### MarkdownElement
+Markdown rendering using the `marked` library.
+
+**Type:** `markdown`
+**Data:** `content` (markdown string), `color` (optional)
+
+#### ImageElement
+Image rendering with lazy loading and placeholders.
+
+**Type:** `img`
+**Data:** `src` (image URL), `content` (alt text), `imgId` (optional)
+
+### Edge Components
+
+#### StandardEdge
+Standard straight-line edge with arrowhead.
+
+**Type:** `standard` (default)
+**Data:** `source`, `target`, `label`, `style` (color, thickness, dash)
+
+## Creating Custom Components
+
+### Custom Element Component
+
+```typescript
+import { BaseElementComponent } from './components/BaseElementComponent';
+
+export class VideoElement extends BaseElementComponent {
+  private videoEl: HTMLVideoElement | null = null;
+
+  protected renderContent(container: HTMLElement): void {
+    if (!this.videoEl) {
+      this.videoEl = this.createElement('video') as HTMLVideoElement;
+      this.videoEl.controls = true;
+
+      // Event listeners are auto-cleaned up on unmount
+      this.addEventListener(this.videoEl, 'play', () => {
+        console.log('Video started');
+      });
+    }
+
+    this.videoEl.src = this.data.src;
+    container.appendChild(this.videoEl);
+  }
+
+  unmount(): void {
+    this.videoEl = null;
+    super.unmount();
+  }
+}
+
+// Register
+componentRegistry.registerElementType('video', VideoElement);
+```
+
+### Custom Edge Component
+
+```typescript
+import { BaseEdgeComponent } from './components/BaseEdgeComponent';
+
+export class CurvedEdge extends BaseEdgeComponent {
+  protected lineElement: SVGPathElement | null = null;
+
+  mount(): SVGElement {
+    // Create custom path element instead of line
+    this.groupElement = this.createSVGElement('g') as SVGGElement;
+
+    this.lineElement = this.createSVGElement('path', {
+      stroke: this.data.style?.color || '#ccc',
+      'stroke-width': this.data.style?.thickness || '2',
+      fill: 'none'
+    }) as SVGPathElement;
+
+    this.groupElement.appendChild(this.lineElement);
+    this.updateEdgePosition();
+
+    return this.groupElement;
+  }
+
+  protected updateEdgePosition(): void {
+    // Custom curved path calculation
+    const sourceEl = this.context.controller.findElementById(this.data.source);
+    const targetEl = this.context.controller.findElementById(this.data.target);
+
+    if (sourceEl && targetEl) {
+      const sx = sourceEl.x;
+      const sy = sourceEl.y;
+      const tx = targetEl.x;
+      const ty = targetEl.y;
+
+      // Quadratic curve
+      const cx = (sx + tx) / 2;
+      const cy = Math.min(sy, ty) - 50; // Control point above
+
+      const path = `M ${sx} ${sy} Q ${cx} ${cy} ${tx} ${ty}`;
+      this.lineElement.setAttribute('d', path);
+    }
+  }
+}
+
+// Register
+componentRegistry.registerEdgeType('curved', CurvedEdge);
+```
+
+## Benefits
+
+### For Developers
+
+1. **Clear Inheritance Hierarchy**: Easy to understand where functionality comes from
+2. **Reusable Code**: Common functionality in base classes
+3. **Type Safety**: Full TypeScript support with generics
+4. **Testable**: Each component can be tested in isolation
+5. **Extensible**: Easy to add new element/edge types
+
+### For the Codebase
+
+1. **Separation of Concerns**: Rendering logic isolated from controller
+2. **Reduced Complexity**: Each component is self-contained
+3. **Better Performance**: Only update what changed
+4. **Memory Management**: Automatic cleanup of event listeners
+5. **Maintainability**: Changes to one component don't affect others
+
+## Migration Path
+
+The component system is designed to coexist with the existing rendering pipeline. Migration can happen gradually:
+
+### Phase 1: Parallel Implementation (Current)
+- Component architecture exists alongside current rendering
+- Can be tested independently
+- No breaking changes
+
+### Phase 2: Opt-in Migration
+- Update ElementRenderer to use components when available
+- Fall back to legacy rendering for unmigrated types
+- Gradual migration of element types
+
+### Phase 3: Full Migration
+- All element types use components
+- Remove legacy rendering code
+- Optimize component-based rendering
+
+## Testing
+
+### Unit Testing Components
+
+```typescript
+import { TextElement } from './components/elements/TextElement';
+
+describe('TextElement', () => {
+  it('should render text content', () => {
+    const data = {
+      id: 'el-1',
+      type: 'text',
+      content: 'Hello',
+      x: 0, y: 0, width: 100, height: 50
+    };
+    const context = { controller: mockController };
+
+    const component = new TextElement(data, context);
+    const root = component.mount();
+
+    expect(root.textContent).toBe('Hello');
+  });
+
+  it('should update when content changes', () => {
+    const component = new TextElement(data, context);
+    component.mount();
+
+    component.update({ ...data, content: 'World' });
+
+    expect(component.getRoot().textContent).toBe('World');
+  });
+
+  it('should cleanup on unmount', () => {
+    const component = new TextElement(data, context);
+    const root = component.mount();
+
+    component.unmount();
+
+    expect(component.isMounted()).toBe(false);
+    expect(component.getRoot()).toBe(null);
+  });
+});
+```
+
+### Integration Testing
+
+```typescript
+describe('ComponentRegistry', () => {
+  it('should create element components', () => {
+    const data = { id: 'el-1', type: 'text', content: 'Test', ...  };
+    const component = componentRegistry.createElementComponent(data, context);
+
+    expect(component).toBeInstanceOf(TextElement);
+    expect(component).toBeInstanceOf(BaseElementComponent);
+  });
+});
+```
+
+## Performance Considerations
+
+### Optimizations
+
+1. **Diff-based Updates**: `shouldUpdateContent()` and `shouldUpdatePosition()` prevent unnecessary DOM updates
+2. **Event Listener Cleanup**: Automatic cleanup prevents memory leaks
+3. **DOM Reuse**: Components reuse DOM elements when possible
+4. **Lazy Content**: Content only rendered when visible
+
+### Best Practices
+
+1. **Minimize DOM Operations**: Batch updates when possible
+2. **Cache Calculations**: Store computed values
+3. **Use CSS Transforms**: For positioning (faster than left/top)
+4. **Debounce Updates**: For frequently changing properties
+
+## Future Enhancements
+
+### Potential Features
+
+1. **React Integration**: Convert components to React components
+2. **Virtual Scrolling**: Only render visible components
+3. **State Management**: Component-level state with hooks
+4. **Animations**: Built-in animation support
+5. **Drag & Drop**: Drag and drop API for components
+6. **Snapshots**: Component state serialization
+
+### Component Ideas
+
+1. **CodeElement**: Syntax-highlighted code editor
+2. **ChartElement**: Data visualization
+3. **TableElement**: Editable data tables
+4. **CanvasElement**: Nested canvas containers
+5. **BezierEdge**: Curved edges with control points
+6. **AnimatedEdge**: Edges with flowing animations
+
+## Resources
+
+- [TypeScript Class Documentation](https://www.typescriptlang.org/docs/handbook/2/classes.html)
+- [DOM API Reference](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)
+- [SVG API Reference](https://developer.mozilla.org/en-US/docs/Web/SVG)
+- [Component Pattern](https://en.wikipedia.org/wiki/Component-based_software_engineering)
+
+## Questions?
+
+For questions or suggestions about the component architecture, please:
+1. Check existing components for examples
+2. Review this documentation
+3. Open an issue on GitHub
+4. Ask in team chat
diff --git a/REFACTORING_PLAN.md b/REFACTORING_PLAN.md
new file mode 100644
index 0000000..102aa8b
--- /dev/null
+++ b/REFACTORING_PLAN.md
@@ -0,0 +1,648 @@
+# CanvasController Refactoring Plan
+
+## Executive Summary
+
+This document outlines the complete refactoring strategy for the CanvasController monolith (`src/main.ts:14-1288`, 1,274 lines). The goal is to reduce complexity, improve maintainability, and enable future enhancements without altering behavior or losing features.
+
+**Original State (Before Refactoring):** Single monolithic class with 40+ properties, 60+ methods, deep coupling - 1,274 lines
+
+**Current State (After Phases 1 & 2):** Service-based architecture with rendering pipeline - 1,144 lines
+- 3 service classes: HistoryManager, ViewportManager, SelectionManager (727 lines)
+- 3 renderer classes: RenderingPipeline, ElementRenderer, EdgeRenderer (483 lines)
+- Main controller delegates to services and renderers
+- All tests passing, 73.23% coverage maintained
+
+**Target State:** Component-based architecture with clear separation of concerns, independent testability, and manageable complexity (Phase 3 - not yet implemented)
+
+**Approach:** Hybrid phased refactoring (conservative → progressive → transformative)
+
+**Timeline:**
+- Phases 1 & 2: COMPLETED (2025-10-04)
+- Phase 3: Planned for future dedicated effort (1-2 weeks estimated)
+
+---
+
+## Strategy Overview
+
+We're using a **Hybrid Approach** that combines:
+1. **Phase 1:** Service extraction (conservative, low risk)
+2. **Phase 2:** Rendering abstraction (moderate risk)
+3. **Phase 3:** Full component architecture (transformative)
+
+This allows us to:
+- Deliver value incrementally
+- Test in production between phases
+- Stop at any phase if needed
+- Learn and adapt as we progress
+
+---
+
+## Phase 1: Extract Service Classes (CURRENT)
+
+**Goal:** Extract cohesive groups of methods into dedicated service classes
+
+**Timeline:** 2-3 weeks
+
+**Risk Level:** Low
+
+**Complexity Reduction:** 40-50%
+
+### Services to Extract
+
+#### 1.1 HistoryManager
+**Location:** `src/main.ts:263-300`
+
+**Responsibilities:**
+- Undo/redo stack management
+- Snapshot creation and restoration
+- History limits (ring buffer)
+
+**Interface:**
+```typescript
+class HistoryManager {
+  undo(): void
+  redo(): void
+  snapshot(label: string): void
+  canUndo(): boolean
+  canRedo(): boolean
+}
+```
+
+**Dependencies:**
+- Needs reference to controller for state access
+- Emits events when history changes (for UI updates)
+
+**Test Coverage:**
+- Snapshot creation preserves state
+- Undo/redo operations work correctly
+- Stack limits enforced
+- Redo stack cleared on new action
+
+**Success Metrics:**
+- HistoryManager < 150 lines
+- All existing history tests pass
+- No behavior changes
+
+---
+
+#### 1.2 ViewportManager
+**Location:** `src/main.ts:454-530`
+
+**Responsibilities:**
+- View state (scale, translate)
+- Coordinate transformations (screen ↔ canvas)
+- Viewport persistence (localStorage)
+- Recenter operations
+
+**Interface:**
+```typescript
+class ViewportManager {
+  getViewState(): ViewState
+  setViewState(state: ViewState): void
+  screenToCanvas(px: number, py: number): { x: number; y: number }
+  recenterOnElement(elId: string): void
+  loadLocalViewState(): void
+  saveLocalViewState(): void
+  updateTransform(): void
+}
+```
+
+**Dependencies:**
+- Canvas DOM element (for offsets)
+- CanvasState (for element lookup during recenter)
+
+**Test Coverage:**
+- Coordinate conversion math (with/without zoom)
+- Recenter calculations
+- LocalStorage persistence
+
+**Success Metrics:**
+- ViewportManager < 200 lines
+- Pure math functions easily unit testable
+- All viewport tests pass
+
+---
+
+#### 1.3 SelectionManager
+**Location:** `src/main.ts:337-372`
+
+**Responsibilities:**
+- Selection state tracking (Set-based)
+- Group selection logic
+- Selection box rendering
+- Selection events
+
+**Interface:**
+```typescript
+class SelectionManager {
+  selectElement(id: string, additive?: boolean): void
+  clearSelection(): void
+  isElementSelected(id: string): boolean
+  getSelectedIds(): Set<string>
+  getGroupBBox(): BoundingBox | null
+  updateGroupBox(): void
+  createSelectionBox(startX: number, startY: number): void
+  updateSelectionBox(startX: number, startY: number, curX: number, curY: number): void
+  removeSelectionBox(): void
+}
+```
+
+**Dependencies:**
+- CanvasState (for group lookups)
+- CRDT adapter (for selection sync)
+- DOM (for selection box and group box)
+
+**Test Coverage:**
+- Single and multi-selection
+- Group selection (all members selected together)
+- Selection toggle behavior
+- Bounding box calculations
+
+**Success Metrics:**
+- SelectionManager < 250 lines
+- Clear event interface for selection changes
+- All selection tests pass
+
+---
+
+### Phase 1 Implementation Steps
+
+1. **Create services directory structure**
+   ```
+   src/services/
+   ├── HistoryManager.ts
+   ├── ViewportManager.ts
+   └── SelectionManager.ts
+   ```
+
+2. **Extract HistoryManager first** (least dependencies)
+   - Copy methods to new file
+   - Add controller reference parameter
+   - Update CanvasController to instantiate and delegate
+   - Run tests
+
+3. **Extract ViewportManager** (pure math, self-contained)
+   - Copy methods to new file
+   - Add necessary dependencies
+   - Update CanvasController to instantiate and delegate
+   - Run tests
+
+4. **Extract SelectionManager** (most complex due to DOM)
+   - Copy methods to new file
+   - Handle DOM element creation
+   - Update CanvasController to instantiate and delegate
+   - Run tests
+
+5. **Update tests**
+   - Ensure all existing tests pass
+   - Add new service-specific tests
+   - Verify no regressions
+
+6. **Documentation**
+   - Add JSDoc comments to service classes
+   - Update this plan with learnings
+   - Document any challenges encountered
+
+### Phase 1 Exit Criteria
+
+- [ ] All three services extracted and functional
+- [ ] Main controller < 900 lines (30% reduction)
+- [ ] All existing tests pass
+- [ ] No behavior changes observed
+- [ ] Services can be unit tested independently
+- [ ] Code review completed
+- [ ] Documentation updated
+
+---
+
+## Phase 2: Rendering Abstraction
+
+**Goal:** Create a rendering pipeline that orchestrates element, edge, and selection rendering
+
+**Timeline:** 2-3 weeks
+
+**Risk Level:** Medium
+
+**Complexity Reduction:** Additional 20-30% (cumulative 60-70%)
+
+### Architecture
+
+```
+RenderingPipeline
+├── ElementRenderer
+│   ├── DOM node management
+│   ├── Content rendering delegation
+│   └── Position/transform application
+├── EdgeRenderer
+│   ├── SVG line management
+│   ├── Arrowhead markers
+│   └── Edge label positioning
+└── SelectionRenderer
+    ├── Selection highlights
+    ├── Handles rendering
+    └── Group box rendering
+```
+
+### Key Changes
+
+1. **Introduce Observer Pattern**
+   - Model changes emit events
+   - Renderers subscribe to relevant events
+   - Automatic re-rendering on state changes
+
+2. **Separate Rendering from State**
+   - Rendering logic doesn't modify state
+   - State changes happen in services
+   - Renderers are pure functions of state
+
+3. **Batch Rendering**
+   - Collect all pending changes
+   - Single render pass per frame
+   - Minimize DOM thrashing
+
+### Implementation Steps
+
+1. Create `RenderingPipeline` class
+2. Extract `ElementRenderer` from current implementation
+3. Extract `EdgeRenderer` from current implementation
+4. Extract `SelectionRenderer` using SelectionManager
+5. Implement event-driven rendering
+6. Update controller to use pipeline
+7. Test and validate
+
+### Phase 2 Exit Criteria
+
+- [ ] Rendering pipeline implemented
+- [ ] All renderers extracted
+- [ ] Event-driven rendering working
+- [ ] Performance maintained or improved
+- [ ] All tests pass
+- [ ] Main controller < 600 lines
+
+---
+
+## Phase 3: Component Architecture
+
+**Goal:** Convert to fully component-based architecture with event bus
+
+**Timeline:** 3-4 weeks
+
+**Risk Level:** High
+
+**Complexity Reduction:** Additional 10-20% (cumulative 70-80%)
+
+### Architecture
+
+```
+CanvasController (thin coordinator)
+├── Canvas (composition root)
+│   ├── viewport: ViewportComponent
+│   ├── selection: SelectionComponent
+│   ├── history: HistoryComponent
+│   └── crdt: CrdtComponent
+├── ElementManager
+│   ├── lifecycle: ElementLifecycle
+│   ├── registry: ElementRegistry (exists)
+│   └── renderer: ElementRenderer
+└── EdgeManager
+    ├── lifecycle: EdgeLifecycle
+    └── renderer: EdgeRenderer
+```
+
+### Component Interface
+
+Each component follows this pattern:
+
+```typescript
+interface Component {
+  init(): void
+  destroy(): void
+  on(event: string, handler: Function): void
+  emit(event: string, data?: any): void
+}
+```
+
+### Event Bus
+
+Central event coordination:
+
+```typescript
+EventBus
+├── element:created
+├── element:updated
+├── element:deleted
+├── selection:changed
+├── viewport:changed
+├── history:snapshot
+└── render:requested
+```
+
+### Implementation Steps
+
+1. Design event bus architecture
+2. Define component interfaces
+3. Convert services to components
+4. Implement event-based coordination
+5. Remove direct dependencies
+6. Test integration
+7. Performance optimization
+
+### Phase 3 Exit Criteria
+
+- [ ] All components implemented
+- [ ] Event bus functional
+- [ ] No circular dependencies
+- [ ] All tests pass
+- [ ] Performance benchmarks met
+- [ ] Main controller < 300 lines
+- [ ] Full documentation
+
+---
+
+## Cross-Phase Considerations
+
+### Testing Strategy
+
+**Throughout all phases:**
+- Maintain existing test suite
+- Add new tests for extracted code
+- Integration tests for component interaction
+- Visual regression tests (if possible)
+- Performance benchmarks
+
+**Test Coverage Goals:**
+- Overall: > 70%
+- Services/Components: > 80%
+- Business logic: > 90%
+
+### Performance Monitoring
+
+**Metrics to track:**
+- Initial render time
+- Re-render time
+- Memory usage
+- Event processing overhead
+- Animation frame rate
+
+**Acceptable Thresholds:**
+- No more than 10% performance degradation
+- No memory leaks
+- 60fps maintained for animations
+
+### Backward Compatibility
+
+**Throughout refactoring:**
+- Public API remains stable
+- Existing element types continue to work
+- CRDT synchronization unaffected
+- Gesture machine integration preserved
+- Command palette integration preserved
+
+### Documentation Updates
+
+**Maintain throughout:**
+- Update README with new architecture
+- Create architecture diagrams
+- Document component interfaces
+- Update contributor guide
+- Add migration guide (if needed)
+
+---
+
+## Risk Management
+
+### Identified Risks
+
+| Risk | Likelihood | Impact | Mitigation |
+|------|------------|--------|------------|
+| Breaking existing features | Medium | High | Extensive testing, phased rollout |
+| Performance degradation | Low | High | Performance benchmarks, profiling |
+| Increased complexity | Medium | Medium | Clear interfaces, documentation |
+| Team learning curve | Medium | Low | Good documentation, pair programming |
+| Timeline overrun | Medium | Medium | Stop at any phase, adjust scope |
+
+### Rollback Strategy
+
+**Each phase should be:**
+- Deployable independently
+- Reversible via git
+- Feature-flagged (if possible)
+
+**If issues arise:**
+1. Identify failing component
+2. Roll back to previous phase
+3. Analyze root cause
+4. Address issues
+5. Re-attempt with fixes
+
+---
+
+## Success Metrics
+
+### Phase 1
+- Main controller: < 900 lines (30% reduction)
+- Services: < 200 lines each
+- Test coverage: > 70%
+- Zero regressions
+
+### Phase 2
+- Main controller: < 600 lines (50% reduction)
+- Rendering isolated
+- Test coverage: > 75%
+- Performance maintained
+
+### Phase 3
+- Main controller: < 300 lines (75% reduction)
+- Component-based architecture
+- Test coverage: > 80%
+- Performance optimized
+
+### Overall Success
+- 70-80% complexity reduction
+- All features preserved
+- Improved testability
+- Better developer experience
+- Easier to add new features
+
+---
+
+## Progress Tracking
+
+### Phase 1 Progress (COMPLETED)
+- [x] Planning complete
+- [x] HistoryManager extracted (166 lines)
+- [x] ViewportManager extracted (247 lines)
+- [x] SelectionManager extracted (314 lines)
+- [x] Tests passing
+- [x] Code review
+- [x] Documentation updated
+- [x] Main controller reduced to 1,209 lines (from 1,274 - 5% reduction)
+
+### Phase 2 Progress (COMPLETED)
+- [x] RenderingPipeline class created
+- [x] ElementRenderer extracted (213 lines)
+- [x] EdgeRenderer extracted (172 lines)
+- [x] Controller updated to use pipeline
+- [x] All tests passing (73.23% coverage maintained)
+- [x] Main controller reduced to 1,144 lines (from 1,209)
+
+### Phase 3 Progress (PARTIALLY COMPLETED)
+- [x] Planning complete
+- [x] EventBus created (178 lines, 16 tests, 87.8% coverage)
+- [x] GeometryUtils utility extracted (139 lines)
+- [x] HistoryManager integrated with EventBus
+- [x] All tests passing (482 tests, 85% coverage)
+- [x] Main controller reduced to 1,102 lines (from 1,147 - 4% additional reduction)
+- [ ] ViewportManager EventBus integration (deferred)
+- [ ] SelectionManager EventBus integration (deferred)
+- [ ] ContentRenderer utility extraction (deferred - too tightly coupled)
+- [ ] ElementManager/EdgeManager creation (deferred - future enhancement)
+
+**Phase 3 Status:** Foundation Complete, Full Implementation Deferred
+
+**What Was Completed:**
+
+1. **EventBus Architecture** ✅
+   - Full pub/sub event system with subscription management
+   - Standard event constants for all component interactions
+   - Error handling and debugging support
+   - Comprehensive test suite (16 tests)
+
+2. **GeometryUtils Utility** ✅
+   - Extracted `computeIntersection` method (45 lines)
+   - Added additional geometry helpers (bounding box, point-in-element, distance)
+   - Pure functions, easily testable
+   - Controller now uses `GeometryUtils.computeIntersection()`
+
+3. **HistoryManager EventBus Integration** ✅
+   - Emits events for undo, redo, and snapshot operations
+   - Optional EventBus parameter (backward compatible)
+   - Events: HISTORY_UNDO, HISTORY_REDO, HISTORY_SNAPSHOT
+
+**Pragmatic Decision:**
+Further Phase 3 work (ViewportManager/SelectionManager EventBus integration, ContentRenderer extraction, ElementManager/EdgeManager) was deferred because:
+1. Current architecture is stable and working well
+2. Content rendering is too tightly coupled to extract safely without extensive refactoring
+3. Risk/reward ratio favors incremental enhancement over wholesale transformation
+4. EventBus foundation is in place for future enhancements
+
+**Recommendations for Future Phase 3 Work:**
+1. Integrate EventBus with ViewportManager and SelectionManager when needed
+2. Consider ContentRenderer extraction only if adding new element types
+3. ElementManager/EdgeManager would be valuable for complex element lifecycle scenarios
+4. Current architecture supports these enhancements without breaking changes
+
+---
+
+## Lessons Learned
+
+### Phase 1
+*Completed 2025-10-04*
+
+**What went well:**
+- Clean extraction of three cohesive service classes
+- All services < 350 lines as planned
+- Backward compatibility maintained
+- Test coverage maintained at 73.23%
+
+**Challenges encountered:**
+- Some properties needed to remain on controller for backward compatibility
+- Service interdependencies required careful coordination
+
+**Adjustments made:**
+- Kept legacy properties on controller while delegating to services
+- Services reference controller for shared state access
+
+**Recommendations for Phase 2:**
+- Focus on isolating rendering logic completely
+- Consider event-driven architecture for better decoupling
+- Be mindful of performance when adding abstraction layers
+
+### Phase 2
+*Completed 2025-10-04*
+
+**What went well:**
+- Clean extraction of rendering pipeline with separate renderers
+- Property delegation pattern worked well for backward compatibility
+- Rendering logic nicely isolated from controller
+- All tests continue to pass
+
+**Challenges encountered:**
+- Still have rendering helper methods in controller (setElementContent, buildHandles, etc.)
+- These are called by renderers, creating some coupling
+- Target of < 600 lines not met yet - need Phase 3 for further reduction
+
+**Adjustments made:**
+- Created property accessors for elementNodesMap, edgeNodesMap to delegate to renderers
+- Kept helper methods in controller temporarily for renderer callbacks
+- Maintained queued rendering via requestAnimationFrame
+
+**Recommendations for Phase 3:**
+- Extract remaining rendering helpers into renderers or separate utilities
+- Consider breaking controller into smaller domain-specific managers
+- Event bus architecture may help decouple remaining dependencies
+
+### Phase 3
+*Completed 2025-10-05*
+
+**What went well:**
+- EventBus implementation is clean and well-tested (87.8% coverage, 16 tests)
+- GeometryUtils extraction removed 45 lines of duplication from controller
+- HistoryManager EventBus integration demonstrates the pattern for future services
+- Pragmatic approach avoided over-engineering and preserved stability
+- All tests passing with 85% overall coverage
+
+**Challenges encountered:**
+- ContentRenderer extraction revealed tight coupling to controller (CRDT, requestRender, etc.)
+- Element content rendering uses many controller-specific methods (executeScriptElements, findElementById, etc.)
+- Time constraints required prioritizing foundational work over complete implementation
+
+**Adjustments made:**
+- Focused on establishing EventBus infrastructure rather than complete migration
+- Extracted only clearly separable utilities (GeometryUtils)
+- Made EventBus optional in services for backward compatibility
+- Deferred complex extractions that would require extensive refactoring
+
+**Recommendations for Future:**
+- EventBus is ready for ViewportManager and SelectionManager integration
+- ContentRenderer extraction should wait for comprehensive element type refactoring
+- ElementManager/EdgeManager would benefit from event-driven lifecycle management
+- Current architecture provides solid foundation for incremental enhancements
+
+---
+
+## Appendix
+
+### Code Metrics (Before Refactoring)
+
+**CanvasController:**
+- Lines: 1,274
+- Properties: 40+
+- Methods: 60+
+- Cyclomatic complexity: High
+- Dependencies: 10+ external modules
+
+**Test Coverage:**
+- Overall: ~65%
+- CanvasController: ~60%
+- Services: N/A (don't exist yet)
+
+### References
+
+- Original refactoring analysis: Issue #36
+- Test suite: `tests/CanvasController.test.ts`
+- Type definitions: `src/types.ts`
+- Element registry: `src/lib/elements/elementRegistry.ts`
+
+### Related Issues
+
+- #30: CRDT integration
+- #33: Recent improvements
+
+---
+
+**Document Status:** Living document, updated throughout refactoring process
+
+**Last Updated:** 2025-10-04 (Phase 1 start)
+
+**Next Review:** End of Phase 1
diff --git a/package-lock.json b/package-lock.json
index 214ea9c..993dd08 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,58 +27,48 @@
         "yjs": "^13.6.27"
       }
     },
-    "node_modules/@ampproject/remapping": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
-      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
-      "dev": true,
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.5",
-        "@jridgewell/trace-mapping": "^0.3.24"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
     "node_modules/@babel/code-frame": {
-      "version": "7.26.2",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
-      "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
+      "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.27.1",
         "js-tokens": "^4.0.0",
-        "picocolors": "^1.0.0"
+        "picocolors": "^1.1.1"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.26.8",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.8.tgz",
-      "integrity": "sha512-oH5UPLMWR3L2wEFLnFJ1TZXqHufiTKAiLfqw5zkhS4dKXLJ10yVztfil/twG8EDTA4F/tvVNw9nOl4ZMslB8rQ==",
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.28.4.tgz",
+      "integrity": "sha512-YsmSKC29MJwf0gF8Rjjrg5LQCmyh+j/nD8/eP7f+BeoQTKYqs9RoWbjGOdy0+1Ekr68RJZMUOPVQaQisnIo4Rw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.26.10",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.26.10.tgz",
-      "integrity": "sha512-vMqyb7XCDMPvJFFOaT9kxtiRh42GwlZEg1/uIgtZshS5a/8OaduUfCi7kynKgc3Tw/6Uo2D+db9qBttghhmxwQ==",
-      "dev": true,
-      "dependencies": {
-        "@ampproject/remapping": "^2.2.0",
-        "@babel/code-frame": "^7.26.2",
-        "@babel/generator": "^7.26.10",
-        "@babel/helper-compilation-targets": "^7.26.5",
-        "@babel/helper-module-transforms": "^7.26.0",
-        "@babel/helpers": "^7.26.10",
-        "@babel/parser": "^7.26.10",
-        "@babel/template": "^7.26.9",
-        "@babel/traverse": "^7.26.10",
-        "@babel/types": "^7.26.10",
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.4.tgz",
+      "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.28.3",
+        "@babel/helper-compilation-targets": "^7.27.2",
+        "@babel/helper-module-transforms": "^7.28.3",
+        "@babel/helpers": "^7.28.4",
+        "@babel/parser": "^7.28.4",
+        "@babel/template": "^7.27.2",
+        "@babel/traverse": "^7.28.4",
+        "@babel/types": "^7.28.4",
+        "@jridgewell/remapping": "^2.3.5",
         "convert-source-map": "^2.0.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
@@ -94,15 +84,16 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.27.0.tgz",
-      "integrity": "sha512-VybsKvpiN1gU1sdMZIp7FcqphVVKEwcuj02x73uvcHE0PTihx1nlBcowYWhDwjpoAXRv43+gDzyggGnn1XZhVw==",
+      "version": "7.28.3",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.3.tgz",
+      "integrity": "sha512-3lSpxGgvnmZznmBkCRnVREPUFJv2wrv9iAoFDvADJc0ypmdOxdUtcLeBgBJ6zE0PMeTKnxeQzyk0xTBq4Ep7zw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.27.0",
-        "@babel/types": "^7.27.0",
-        "@jridgewell/gen-mapping": "^0.3.5",
-        "@jridgewell/trace-mapping": "^0.3.25",
+        "@babel/parser": "^7.28.3",
+        "@babel/types": "^7.28.2",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
         "jsesc": "^3.0.2"
       },
       "engines": {
@@ -110,13 +101,14 @@
       }
     },
     "node_modules/@babel/helper-compilation-targets": {
-      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.0.tgz",
-      "integrity": "sha512-LVk7fbXml0H2xH34dFzKQ7TDZ2G4/rVTOrq9V+icbbadjbVxxeFeDsNHv2SrZeWoA+6ZiTyWYWtScEIW07EAcA==",
+      "version": "7.27.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.2.tgz",
+      "integrity": "sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/compat-data": "^7.26.8",
-        "@babel/helper-validator-option": "^7.25.9",
+        "@babel/compat-data": "^7.27.2",
+        "@babel/helper-validator-option": "^7.27.1",
         "browserslist": "^4.24.0",
         "lru-cache": "^5.1.1",
         "semver": "^6.3.1"
@@ -125,28 +117,40 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
+      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/helper-module-imports": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz",
-      "integrity": "sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
+      "integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/traverse": "^7.25.9",
-        "@babel/types": "^7.25.9"
+        "@babel/traverse": "^7.27.1",
+        "@babel/types": "^7.27.1"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-module-transforms": {
-      "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz",
-      "integrity": "sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==",
+      "version": "7.28.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.3.tgz",
+      "integrity": "sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-module-imports": "^7.25.9",
-        "@babel/helper-validator-identifier": "^7.25.9",
-        "@babel/traverse": "^7.25.9"
+        "@babel/helper-module-imports": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "@babel/traverse": "^7.28.3"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -156,61 +160,67 @@
       }
     },
     "node_modules/@babel/helper-plugin-utils": {
-      "version": "7.26.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.26.5.tgz",
-      "integrity": "sha512-RS+jZcRdZdRFzMyr+wcsaqOmld1/EqTghfaBGQQd/WnRdzdlvSZ//kF7U8VQTxf1ynZ4cjUcYgjVGx13ewNPMg==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.27.1.tgz",
+      "integrity": "sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-string-parser": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
-      "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
-      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
+      "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-option": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz",
-      "integrity": "sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
+      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.27.0.tgz",
-      "integrity": "sha512-U5eyP/CTFPuNE3qk+WZMxFkp/4zUzdceQlfzf7DdGdhp+Fezd7HD+i8Y24ZuTMKX3wQBld449jijbGq6OdGNQg==",
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.4.tgz",
+      "integrity": "sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/template": "^7.27.0",
-        "@babel/types": "^7.27.0"
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.28.4"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.0.tgz",
-      "integrity": "sha512-iaepho73/2Pz7w2eMS0Q5f83+0RKI7i4xmiYeBmDzfRVbQtTOG7Ts0S4HzJVsTMGI9keU8rNfuZr8DKfSt7Yyg==",
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.4.tgz",
+      "integrity": "sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.27.0"
+        "@babel/types": "^7.28.4"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -310,12 +320,13 @@
       }
     },
     "node_modules/@babel/plugin-syntax-jsx": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.25.9.tgz",
-      "integrity": "sha512-ld6oezHQMZsZfp6pWtbjaNDF2tiiCYYDqQszHt5VV437lewP9aSi2Of99CK0D0XB21k7FLgnLcmQKyKzynfeAA==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.27.1.tgz",
+      "integrity": "sha512-y8YTNIeKoyhGd9O0Jiyzyyqk8gdjnumGTQPsz0xOZOQ2RmkVJeZ1vmmfIvFEKqucBG6axJGBZDE/7iI5suUI/w==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.25.9"
+        "@babel/helper-plugin-utils": "^7.27.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -427,12 +438,13 @@
       }
     },
     "node_modules/@babel/plugin-syntax-typescript": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.25.9.tgz",
-      "integrity": "sha512-hjMgRy5hb8uJJjUcdWunWVcoi9bGpJp8p5Ol1229PoN6aytsLwNMgmdftO23wnCLMfVmTwZDWMPNq/D1SY60JQ==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.27.1.tgz",
+      "integrity": "sha512-xfYCBMxveHrRMnAWl1ZlPXOZjzkN82THFvLhQhFXFt81Z5HnN+EtUkZhv/zcKpmT3fzmWZB0ywiBrbC3vogbwQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.25.9"
+        "@babel/helper-plugin-utils": "^7.27.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -442,54 +454,48 @@
       }
     },
     "node_modules/@babel/template": {
-      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.0.tgz",
-      "integrity": "sha512-2ncevenBqXI6qRMukPlXwHKHchC7RyMuu4xv5JBXRfOGVcTy1mXCD12qrp7Jsoxll1EV3+9sE4GugBVRjT2jFA==",
+      "version": "7.27.2",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
+      "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.26.2",
-        "@babel/parser": "^7.27.0",
-        "@babel/types": "^7.27.0"
+        "@babel/code-frame": "^7.27.1",
+        "@babel/parser": "^7.27.2",
+        "@babel/types": "^7.27.1"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.27.0.tgz",
-      "integrity": "sha512-19lYZFzYVQkkHkl4Cy4WrAVcqBkgvV2YM2TU3xG6DIwO7O3ecbDPfW3yM3bjAGcqcQHi+CCtjMR3dIEHxsd6bA==",
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.4.tgz",
+      "integrity": "sha512-YEzuboP2qvQavAcjgQNVgsvHIDv6ZpwXvcvjmyySP2DIMuByS/6ioU5G9pYrWHM6T2YDfc7xga9iNzYOs12CFQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.26.2",
-        "@babel/generator": "^7.27.0",
-        "@babel/parser": "^7.27.0",
-        "@babel/template": "^7.27.0",
-        "@babel/types": "^7.27.0",
-        "debug": "^4.3.1",
-        "globals": "^11.1.0"
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.28.3",
+        "@babel/helper-globals": "^7.28.0",
+        "@babel/parser": "^7.28.4",
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.28.4",
+        "debug": "^4.3.1"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/traverse/node_modules/globals": {
-      "version": "11.12.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/@babel/types": {
-      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.27.0.tgz",
-      "integrity": "sha512-H45s8fVLYjbhFH62dIJ3WtmJ6RSPt/3DRO0ZcT2SUiYiQyz3BLVb9ADEnLl91m74aQPS3AzzeajZHYOalWe3bg==",
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.4.tgz",
+      "integrity": "sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-string-parser": "^7.25.9",
-        "@babel/helper-validator-identifier": "^7.25.9"
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.27.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1590,17 +1596,25 @@
       }
     },
     "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.8",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
-      "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@jridgewell/set-array": "^1.2.1",
-        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
         "@jridgewell/trace-mapping": "^0.3.24"
-      },
-      "engines": {
-        "node": ">=6.0.0"
       }
     },
     "node_modules/@jridgewell/resolve-uri": {
@@ -1612,15 +1626,6 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/@jridgewell/set-array": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
-      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
@@ -1628,10 +1633,11 @@
       "dev": true
     },
     "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.25",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
-      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
@@ -2930,6 +2936,16 @@
         }
       ]
     },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.8.11",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.11.tgz",
+      "integrity": "sha512-i+sRXGhz4+QW8aACZ3+r1GAKMt0wlFpeA8M5rOQd0HEYw9zhDrlx9Wc8uQ0IdXakjJRthzglEwfB/yqIjO6iDg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.js"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -2953,9 +2969,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.24.4",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz",
-      "integrity": "sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==",
+      "version": "4.26.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.26.3.tgz",
+      "integrity": "sha512-lAUU+02RFBuCKQPj/P6NgjlbCnLBMp4UtgTx7vNHd3XSIJF87s9a5rA3aH2yw3GS9DqZAUbOtZdCCiZeVRqt0w==",
       "dev": true,
       "funding": [
         {
@@ -2971,11 +2987,13 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "dependencies": {
-        "caniuse-lite": "^1.0.30001688",
-        "electron-to-chromium": "^1.5.73",
-        "node-releases": "^2.0.19",
-        "update-browserslist-db": "^1.1.1"
+        "baseline-browser-mapping": "^2.8.9",
+        "caniuse-lite": "^1.0.30001746",
+        "electron-to-chromium": "^1.5.227",
+        "node-releases": "^2.0.21",
+        "update-browserslist-db": "^1.1.3"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -3055,9 +3073,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001710",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001710.tgz",
-      "integrity": "sha512-B5C0I0UmaGqHgo5FuqJ7hBd4L57A4dDD+Xi+XX1nXOoxGeDdY4Ko38qJYOyqznBVJEqON5p8P1x5zRR3+rsnxA==",
+      "version": "1.0.30001747",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001747.tgz",
+      "integrity": "sha512-mzFa2DGIhuc5490Nd/G31xN1pnBnYMadtkyTjefPI7wzypqgCEpeWu9bJr0OnDsyKrW75zA9ZAt7pbQFmwLsQg==",
       "dev": true,
       "funding": [
         {
@@ -3072,7 +3090,8 @@
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
-      ]
+      ],
+      "license": "CC-BY-4.0"
     },
     "node_modules/chalk": {
       "version": "4.1.2",
@@ -3389,10 +3408,11 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.132",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.132.tgz",
-      "integrity": "sha512-QgX9EBvWGmvSRa74zqfnG7+Eno0Ak0vftBll0Pt2/z5b3bEGYL6OUXLgKPtvx73dn3dvwrlyVkjPKRRlhLYTEg==",
-      "dev": true
+      "version": "1.5.230",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.230.tgz",
+      "integrity": "sha512-A6A6Fd3+gMdaed9wX83CvHYJb4UuapPD5X5SLq72VZJzxHSY0/LUweGXRWmQlh2ln7KV7iw7jnwXK7dlPoOnHQ==",
+      "dev": true,
+      "license": "ISC"
     },
     "node_modules/emittery": {
       "version": "0.13.1",
@@ -5287,6 +5307,7 @@
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
       "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "yallist": "^3.0.2"
       }
@@ -5451,10 +5472,11 @@
       "dev": true
     },
     "node_modules/node-releases": {
-      "version": "2.0.19",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
-      "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
-      "dev": true
+      "version": "2.0.23",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.23.tgz",
+      "integrity": "sha512-cCmFDMSm26S6tQSDpBCg/NR8NENrVPhAJSf+XbxBG4rPFaaonlEoE9wHQmun+cls499TQGSb7ZyPBRlzgKfpeg==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/normalize-path": {
       "version": "3.0.0",
@@ -6539,6 +6561,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "escalade": "^3.2.0",
         "picocolors": "^1.1.1"
@@ -6898,7 +6921,23 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
       "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-      "dev": true
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/yaml": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz",
+      "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==",
+      "dev": true,
+      "license": "ISC",
+      "optional": true,
+      "peer": true,
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      }
     },
     "node_modules/yargs": {
       "version": "17.7.2",
diff --git a/src/components/BaseComponent.ts b/src/components/BaseComponent.ts
new file mode 100644
index 0000000..e435736
--- /dev/null
+++ b/src/components/BaseComponent.ts
@@ -0,0 +1,162 @@
+/**
+ * BaseComponent
+ *
+ * Abstract base class for all canvas components (elements and edges).
+ * Provides common functionality for:
+ * - Lifecycle management (mount, update, unmount)
+ * - DOM manipulation helpers
+ * - Event handling
+ * - State synchronization
+ */
+
+import type { CanvasElement, Edge } from '../types.ts';
+
+export interface ComponentContext {
+  controller: any;
+  eventBus?: any;
+  requestRender?: () => void;
+}
+
+/**
+ * Base class for all canvas components
+ */
+export abstract class BaseComponent<TData = CanvasElement | Edge> {
+  protected data: TData;
+  protected context: ComponentContext;
+  protected rootElement: HTMLElement | SVGElement | null = null;
+  protected mounted: boolean = false;
+
+  constructor(data: TData, context: ComponentContext) {
+    this.data = data;
+    this.context = context;
+  }
+
+  /**
+   * Create and return the root DOM/SVG element for this component.
+   * Called once when the component is first added to the canvas.
+   */
+  abstract mount(): HTMLElement | SVGElement;
+
+  /**
+   * Update the component with new data.
+   * Called whenever the component's data changes.
+   */
+  abstract update(newData: TData): void;
+
+  /**
+   * Clean up resources when the component is removed.
+   * Override this to remove event listeners, timers, etc.
+   */
+  unmount(): void {
+    this.mounted = false;
+    this.rootElement = null;
+  }
+
+  /**
+   * Get the root DOM element
+   */
+  getRoot(): HTMLElement | SVGElement | null {
+    return this.rootElement;
+  }
+
+  /**
+   * Get the current data
+   */
+  getData(): TData {
+    return this.data;
+  }
+
+  /**
+   * Check if component is mounted
+   */
+  isMounted(): boolean {
+    return this.mounted;
+  }
+
+  /**
+   * Helper: Create an HTML element with optional class and attributes
+   */
+  protected createElement(
+    tag: string,
+    className?: string,
+    attributes?: Record<string, string>
+  ): HTMLElement {
+    const el = document.createElement(tag);
+    if (className) {
+      el.className = className;
+    }
+    if (attributes) {
+      Object.entries(attributes).forEach(([key, value]) => {
+        el.setAttribute(key, value);
+      });
+    }
+    return el;
+  }
+
+  /**
+   * Helper: Create an SVG element with optional class and attributes
+   */
+  protected createSVGElement(
+    tag: string,
+    attributes?: Record<string, string>
+  ): SVGElement {
+    const el = document.createElementNS('http://www.w3.org/2000/svg', tag);
+    if (attributes) {
+      Object.entries(attributes).forEach(([key, value]) => {
+        el.setAttribute(key, value);
+      });
+    }
+    return el;
+  }
+
+  /**
+   * Helper: Set multiple CSS properties at once
+   */
+  protected setStyles(element: HTMLElement | SVGElement, styles: Record<string, string>): void {
+    Object.entries(styles).forEach(([key, value]) => {
+      (element.style as any)[key] = value;
+    });
+  }
+
+  /**
+   * Helper: Add event listener that will be cleaned up on unmount
+   */
+  protected addEventListener<K extends keyof HTMLElementEventMap>(
+    element: HTMLElement | SVGElement,
+    type: K,
+    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
+    options?: boolean | AddEventListenerOptions
+  ): void {
+    element.addEventListener(type, listener as EventListener, options);
+    // Store for cleanup
+    if (!this.eventListeners) {
+      this.eventListeners = [];
+    }
+    this.eventListeners.push({ element, type, listener: listener as EventListener, options });
+  }
+
+  private eventListeners: Array<{
+    element: HTMLElement | SVGElement;
+    type: string;
+    listener: EventListener;
+    options?: boolean | AddEventListenerOptions;
+  }> = [];
+
+  /**
+   * Clean up all event listeners
+   */
+  protected cleanupEventListeners(): void {
+    this.eventListeners.forEach(({ element, type, listener, options }) => {
+      element.removeEventListener(type, listener, options);
+    });
+    this.eventListeners = [];
+  }
+
+  /**
+   * Override unmount to clean up event listeners
+   */
+  unmountBase(): void {
+    this.cleanupEventListeners();
+    this.unmount();
+  }
+}
diff --git a/src/components/BaseEdgeComponent.ts b/src/components/BaseEdgeComponent.ts
new file mode 100644
index 0000000..5509883
--- /dev/null
+++ b/src/components/BaseEdgeComponent.ts
@@ -0,0 +1,214 @@
+/**
+ * BaseEdgeComponent
+ *
+ * Base class for all edge/connection types.
+ * Extends BaseComponent with edge-specific functionality:
+ * - SVG line rendering
+ * - Source/target intersection calculation
+ * - Label positioning
+ * - Arrowheads and styling
+ */
+
+import type { Edge, CanvasElement } from '../types.ts';
+import { BaseComponent, ComponentContext } from './BaseComponent.ts';
+import { GeometryUtils } from '../services/utils/GeometryUtils.ts';
+
+/**
+ * Base class for canvas edges (connections between elements)
+ */
+export abstract class BaseEdgeComponent extends BaseComponent<Edge> {
+  protected lineElement: SVGLineElement | null = null;
+  protected labelElement: SVGTextElement | null = null;
+  protected groupElement: SVGGElement | null = null;
+
+  constructor(data: Edge, context: ComponentContext) {
+    super(data, context);
+  }
+
+  /**
+   * Mount the edge component
+   * Creates SVG line and label elements
+   */
+  mount(): SVGElement {
+    // Create SVG group to hold line and label
+    this.groupElement = this.createSVGElement('g', {
+      'data-edge-id': this.data.id
+    }) as SVGGElement;
+
+    // Create line element
+    this.lineElement = this.createSVGElement('line', {
+      stroke: this.data.style?.color || '#ccc',
+      'stroke-width': this.data.style?.thickness || '2',
+      'marker-end': 'url(#arrowhead)'
+    }) as SVGLineElement;
+
+    // Create label element
+    this.labelElement = this.createSVGElement('text', {
+      'text-anchor': 'middle',
+      'alignment-baseline': 'middle',
+      fill: '#000',
+      'data-id': this.data.id
+    }) as SVGTextElement;
+    this.labelElement.style.fontSize = '12px';
+
+    this.groupElement.appendChild(this.lineElement);
+    this.groupElement.appendChild(this.labelElement);
+
+    // Initial render
+    this.updateEdgePosition();
+
+    this.rootElement = this.groupElement;
+    this.mounted = true;
+
+    return this.groupElement;
+  }
+
+  /**
+   * Update the edge with new data
+   */
+  update(newData: Edge): void {
+    const needsStyleUpdate = this.shouldUpdateStyle(this.data, newData);
+    const needsPositionUpdate = this.shouldUpdatePosition(this.data, newData);
+
+    this.data = newData;
+
+    if (needsStyleUpdate && this.lineElement) {
+      this.updateStyle();
+    }
+
+    if (needsPositionUpdate) {
+      this.updateEdgePosition();
+    }
+  }
+
+  /**
+   * Check if style needs to be updated
+   */
+  protected shouldUpdateStyle(oldData: Edge, newData: Edge): boolean {
+    return (
+      oldData.style?.color !== newData.style?.color ||
+      oldData.style?.thickness !== newData.style?.thickness ||
+      oldData.style?.dash !== newData.style?.dash
+    );
+  }
+
+  /**
+   * Check if position needs to be updated
+   */
+  protected shouldUpdatePosition(oldData: Edge, newData: Edge): boolean {
+    return (
+      oldData.source !== newData.source ||
+      oldData.target !== newData.target ||
+      oldData.label !== newData.label
+    );
+  }
+
+  /**
+   * Update line and label styling
+   */
+  protected updateStyle(): void {
+    if (!this.lineElement) return;
+
+    this.lineElement.setAttribute('stroke', this.data.style?.color || '#ccc');
+    this.lineElement.setAttribute('stroke-width', this.data.style?.thickness || '2');
+    this.lineElement.setAttribute(
+      'stroke-dasharray',
+      this.data.data?.meta ? '5,5' : this.data.style?.dash || ''
+    );
+  }
+
+  /**
+   * Update edge position based on source and target elements
+   */
+  protected updateEdgePosition(): void {
+    if (!this.lineElement || !this.labelElement) return;
+
+    const controller = this.context.controller;
+    const sourceEl = controller.findElementById(this.data.source);
+    const targetEl = controller.findElementById(this.data.target);
+
+    if (!sourceEl || !targetEl) {
+      // Hide edge if source or target is missing
+      this.hide();
+      return;
+    }
+
+    // Show edge
+    this.show();
+
+    // Calculate intersection points
+    const sourcePoint = this.calculateIntersection(sourceEl, targetEl);
+    const targetPoint = this.calculateIntersection(targetEl, sourceEl);
+
+    if (sourcePoint && targetPoint) {
+      // Update line position
+      this.lineElement.setAttribute('x1', String(sourcePoint.x));
+      this.lineElement.setAttribute('y1', String(sourcePoint.y));
+      this.lineElement.setAttribute('x2', String(targetPoint.x));
+      this.lineElement.setAttribute('y2', String(targetPoint.y));
+
+      // Update label position (midpoint)
+      const midX = (sourcePoint.x + targetPoint.x) / 2;
+      const midY = (sourcePoint.y + targetPoint.y) / 2;
+      this.labelElement.setAttribute('x', String(midX));
+      this.labelElement.setAttribute('y', String(midY));
+      this.labelElement.textContent = this.data.label || 'Edge';
+
+      // Update style
+      this.updateStyle();
+    }
+  }
+
+  /**
+   * Calculate intersection point on element boundary
+   * Can be overridden for custom intersection logic
+   */
+  protected calculateIntersection(
+    fromElement: CanvasElement,
+    toElement: CanvasElement
+  ): { x: number; y: number } | null {
+    return GeometryUtils.computeIntersection(fromElement, toElement);
+  }
+
+  /**
+   * Hide the edge
+   */
+  protected hide(): void {
+    if (this.groupElement) {
+      this.groupElement.style.display = 'none';
+    }
+  }
+
+  /**
+   * Show the edge
+   */
+  protected show(): void {
+    if (this.groupElement) {
+      this.groupElement.style.display = '';
+    }
+  }
+
+  /**
+   * Get the line element
+   */
+  getLineElement(): SVGLineElement | null {
+    return this.lineElement;
+  }
+
+  /**
+   * Get the label element
+   */
+  getLabelElement(): SVGTextElement | null {
+    return this.labelElement;
+  }
+
+  /**
+   * Cleanup on unmount
+   */
+  unmount(): void {
+    this.lineElement = null;
+    this.labelElement = null;
+    this.groupElement = null;
+    super.unmount();
+  }
+}
diff --git a/src/components/BaseElementComponent.ts b/src/components/BaseElementComponent.ts
new file mode 100644
index 0000000..e6f1009
--- /dev/null
+++ b/src/components/BaseElementComponent.ts
@@ -0,0 +1,226 @@
+/**
+ * BaseElementComponent
+ *
+ * Base class for all canvas element types.
+ * Extends BaseComponent with element-specific functionality:
+ * - Positioning and transforms
+ * - Selection handling
+ * - Handles (resize, rotate, etc.)
+ * - Static vs dynamic positioning
+ */
+
+import type { CanvasElement } from '../types.ts';
+import { BaseComponent, ComponentContext } from './BaseComponent.ts';
+
+/**
+ * Base class for canvas elements (text, markdown, image, etc.)
+ */
+export abstract class BaseElementComponent extends BaseComponent<CanvasElement> {
+  protected containerElement: HTMLElement | null = null;
+  protected contentElement: HTMLElement | null = null;
+  protected handles: HTMLElement[] = [];
+
+  constructor(data: CanvasElement, context: ComponentContext) {
+    super(data, context);
+  }
+
+  /**
+   * Mount the element component
+   * Creates the wrapper structure and delegates content rendering to subclass
+   */
+  mount(): HTMLElement {
+    // Create wrapper div
+    this.containerElement = this.createElement('div', 'canvas-element', {
+      'data-el-id': this.data.id,
+      'data-type': this.data.type
+    });
+
+    // Create content container
+    this.contentElement = this.createElement('div', 'content');
+    this.containerElement.appendChild(this.contentElement);
+
+    // Render content (implemented by subclass)
+    this.renderContent(this.contentElement);
+
+    // Apply positioning
+    this.applyPositioning();
+
+    this.rootElement = this.containerElement;
+    this.mounted = true;
+
+    return this.containerElement;
+  }
+
+  /**
+   * Update the element with new data
+   */
+  update(newData: CanvasElement): void {
+    const needsContentUpdate = this.shouldUpdateContent(this.data, newData);
+    const needsPositionUpdate = this.shouldUpdatePosition(this.data, newData);
+
+    this.data = newData;
+
+    if (needsContentUpdate && this.contentElement) {
+      this.renderContent(this.contentElement);
+    }
+
+    if (needsPositionUpdate && this.containerElement) {
+      this.applyPositioning();
+    }
+
+    // Update handles if selection state changed
+    this.updateHandles();
+  }
+
+  /**
+   * Abstract method: Render the element's content
+   * Subclasses must implement this to render their specific content type
+   */
+  protected abstract renderContent(container: HTMLElement): void;
+
+  /**
+   * Check if content needs to be re-rendered
+   * Override this for custom content update logic
+   */
+  protected shouldUpdateContent(oldData: CanvasElement, newData: CanvasElement): boolean {
+    return (
+      oldData.content !== newData.content ||
+      oldData.type !== newData.type ||
+      oldData.src !== newData.src
+    );
+  }
+
+  /**
+   * Check if positioning needs to be updated
+   */
+  protected shouldUpdatePosition(oldData: CanvasElement, newData: CanvasElement): boolean {
+    return (
+      oldData.x !== newData.x ||
+      oldData.y !== newData.y ||
+      oldData.width !== newData.width ||
+      oldData.height !== newData.height ||
+      oldData.rotation !== newData.rotation ||
+      oldData.scale !== newData.scale ||
+      oldData.static !== newData.static ||
+      oldData.zIndex !== newData.zIndex
+    );
+  }
+
+  /**
+   * Apply CSS positioning and transforms
+   */
+  protected applyPositioning(): void {
+    if (!this.containerElement) return;
+
+    const el = this.data;
+    const scale = el.scale || 1;
+    const rotation = el.rotation || 0;
+    const zIndex = Math.floor(el.zIndex) || 1;
+    const blendMode = el.blendMode || 'normal';
+
+    this.containerElement.style.setProperty('--blend-mode', blendMode);
+
+    if (el.static) {
+      // Fixed positioning (HUD elements)
+      this.setStyles(this.containerElement, {
+        position: 'fixed',
+        left: (el.fixedLeft || 0) + '%',
+        top: (el.fixedTop || 0) + '%',
+        zIndex: String(zIndex),
+        transform: `rotate(${rotation}deg) translate(calc(0px - var(--padding)), calc(0px - var(--padding)))`
+      });
+
+      const viewState = this.context.controller.viewState;
+      this.containerElement.style.setProperty('--translateX', String(viewState.translateX));
+      this.containerElement.style.setProperty('--translateY', String(viewState.translateY));
+      this.containerElement.style.setProperty('--zoom', String(viewState.scale));
+    } else {
+      // Absolute positioning (canvas elements)
+      this.setStyles(this.containerElement, {
+        position: 'absolute',
+        left: (el.x - (el.width * scale) / 2) + 'px',
+        top: (el.y - (el.height * scale) / 2) + 'px',
+        zIndex: String(zIndex),
+        transform: `rotate(${rotation}deg) translate(calc(0px - var(--padding)), calc(0px - var(--padding)))`
+      });
+    }
+
+    // Set size CSS variables
+    this.containerElement.style.setProperty('--width', (el.width * scale) + 'px');
+    this.containerElement.style.setProperty('--height', (el.height * scale) + 'px');
+    this.containerElement.style.setProperty('--scale', String(scale));
+
+    // Trigger edge update
+    this.context.controller.requestEdgeUpdate?.();
+  }
+
+  /**
+   * Update selection handles
+   */
+  protected updateHandles(): void {
+    if (!this.containerElement) return;
+
+    // Remove old handles
+    this.handles.forEach(h => h.remove());
+    this.handles = [];
+
+    // Check if element is selected
+    const isSelected = this.context.controller.selectedElementIds?.has(this.data.id);
+    if (isSelected) {
+      this.buildHandles();
+    }
+
+    // Update selection class
+    this.containerElement.classList.toggle('selected', isSelected);
+  }
+
+  /**
+   * Build interaction handles for selected elements
+   */
+  protected buildHandles(): void {
+    if (!this.containerElement) return;
+
+    const createHandle = (className: string, icon: string): HTMLElement => {
+      const wrap = this.createElement('div', `${className} element-handle`);
+      const i = this.createElement('i');
+      i.className = icon;
+      wrap.appendChild(i);
+      this.containerElement!.appendChild(wrap);
+      this.handles.push(wrap);
+      return wrap;
+    };
+
+    createHandle('type-handle', 'fa-solid fa-font');
+    createHandle('scale-handle', 'fa-solid fa-up-down-left-right');
+    createHandle('reorder-handle', 'fa-solid fa-layer-group');
+    createHandle('resize-handle', 'fa-solid fa-up-right-and-down-left-from-center');
+    createHandle('rotate-handle rotate-handle-position', 'fa-solid fa-rotate');
+    createHandle('edge-handle', 'fa-solid fa-link');
+    createHandle('create-handle', 'fa-solid fa-plus');
+  }
+
+  /**
+   * Get the container element
+   */
+  getContainer(): HTMLElement | null {
+    return this.containerElement;
+  }
+
+  /**
+   * Get the content element
+   */
+  getContentElement(): HTMLElement | null {
+    return this.contentElement;
+  }
+
+  /**
+   * Cleanup on unmount
+   */
+  unmount(): void {
+    this.handles.forEach(h => h.remove());
+    this.handles = [];
+    this.containerElement = null;
+    this.contentElement = null;
+    super.unmount();
+  }
+}
diff --git a/src/components/ComponentRegistry.ts b/src/components/ComponentRegistry.ts
new file mode 100644
index 0000000..03cf80c
--- /dev/null
+++ b/src/components/ComponentRegistry.ts
@@ -0,0 +1,116 @@
+/**
+ * ComponentRegistry
+ *
+ * Registry for managing component types and their lifecycle.
+ * Provides factory methods for creating element and edge components.
+ */
+
+import type { CanvasElement, Edge } from '../types.ts';
+import { BaseElementComponent } from './BaseElementComponent.ts';
+import { BaseEdgeComponent } from './BaseEdgeComponent.ts';
+import type { ComponentContext } from './BaseComponent.ts';
+
+// Import concrete implementations
+import { TextElement } from './elements/TextElement.ts';
+import { MarkdownElement } from './elements/MarkdownElement.ts';
+import { ImageElement } from './elements/ImageElement.ts';
+import { HtmlElement } from './elements/HtmlElement.ts';
+import { JsonElement } from './elements/JsonElement.ts';
+import { StandardEdge } from './edges/StandardEdge.ts';
+
+type ElementComponentConstructor = new (data: CanvasElement, context: ComponentContext) => BaseElementComponent;
+type EdgeComponentConstructor = new (data: Edge, context: ComponentContext) => BaseEdgeComponent;
+
+/**
+ * Component registry for creating and managing canvas components
+ */
+export class ComponentRegistry {
+  private elementTypes: Map<string, ElementComponentConstructor> = new Map();
+  private edgeTypes: Map<string, EdgeComponentConstructor> = new Map();
+
+  constructor() {
+    // Register built-in element types
+    this.registerElementType('text', TextElement);
+    this.registerElementType('markdown', MarkdownElement);
+    this.registerElementType('img', ImageElement);
+    this.registerElementType('html', HtmlElement);
+    this.registerElementType('json', JsonElement);
+
+    // Register built-in edge types
+    this.registerEdgeType('standard', StandardEdge);
+  }
+
+  /**
+   * Register a new element component type
+   */
+  registerElementType(type: string, constructor: ElementComponentConstructor): void {
+    this.elementTypes.set(type, constructor);
+  }
+
+  /**
+   * Register a new edge component type
+   */
+  registerEdgeType(type: string, constructor: EdgeComponentConstructor): void {
+    this.edgeTypes.set(type, constructor);
+  }
+
+  /**
+   * Create an element component instance
+   */
+  createElementComponent(data: CanvasElement, context: ComponentContext): BaseElementComponent | null {
+    const ComponentClass = this.elementTypes.get(data.type);
+    if (ComponentClass) {
+      return new ComponentClass(data, context);
+    }
+    return null;
+  }
+
+  /**
+   * Create an edge component instance
+   */
+  createEdgeComponent(data: Edge, context: ComponentContext): BaseEdgeComponent | null {
+    // For now, all edges use StandardEdge
+    // In the future, could support different edge types based on data.type
+    const ComponentClass = this.edgeTypes.get('standard');
+    if (ComponentClass) {
+      return new ComponentClass(data, context);
+    }
+    return null;
+  }
+
+  /**
+   * Check if an element type is registered
+   */
+  hasElementType(type: string): boolean {
+    return this.elementTypes.has(type);
+  }
+
+  /**
+   * Check if an edge type is registered
+   */
+  hasEdgeType(type: string): boolean {
+    return this.edgeTypes.has(type);
+  }
+
+  /**
+   * Get all registered element types
+   */
+  getElementTypes(): string[] {
+    return Array.from(this.elementTypes.keys());
+  }
+
+  /**
+   * Get all registered edge types
+   */
+  getEdgeTypes(): string[] {
+    return Array.from(this.edgeTypes.keys());
+  }
+}
+
+// Singleton instance
+export const componentRegistry = new ComponentRegistry();
+
+// Make it available globally for dynamic registration
+if (typeof window !== 'undefined') {
+  (window as any).componentRegistry = componentRegistry;
+}
diff --git a/src/components/edges/StandardEdge.ts b/src/components/edges/StandardEdge.ts
new file mode 100644
index 0000000..fc72efa
--- /dev/null
+++ b/src/components/edges/StandardEdge.ts
@@ -0,0 +1,18 @@
+/**
+ * StandardEdge
+ *
+ * Standard edge implementation with straight lines and arrowheads
+ */
+
+import { BaseEdgeComponent } from '../BaseEdgeComponent.ts';
+import type { Edge } from '../../types.ts';
+import type { ComponentContext } from '../BaseComponent.ts';
+
+export class StandardEdge extends BaseEdgeComponent {
+  constructor(data: Edge, context: ComponentContext) {
+    super(data, context);
+  }
+
+  // Uses default intersection calculation from BaseEdgeComponent
+  // Can override calculateIntersection() for custom behavior
+}
diff --git a/src/components/elements/HtmlElement.ts b/src/components/elements/HtmlElement.ts
new file mode 100644
index 0000000..19db60c
--- /dev/null
+++ b/src/components/elements/HtmlElement.ts
@@ -0,0 +1,79 @@
+/**
+ * HtmlElement
+ *
+ * HTML element implementation with script execution support
+ */
+
+import { BaseElementComponent } from '../BaseElementComponent.ts';
+import type { CanvasElement } from '../../types.ts';
+import type { ComponentContext } from '../BaseComponent.ts';
+
+export class HtmlElement extends BaseElementComponent {
+  private scriptsExecuted = false;
+
+  constructor(data: CanvasElement, context: ComponentContext) {
+    super(data, context);
+  }
+
+  protected renderContent(container: HTMLElement): void {
+    // Clear existing content
+    container.innerHTML = '';
+
+    // Create wrapper div
+    const div = this.createElement('div');
+    div.innerHTML = this.data.content;
+    div.style.color = this.data.color || '#000000';
+
+    container.appendChild(div);
+
+    // Execute scripts if present and not already executed
+    if (!this.scriptsExecuted) {
+      this.executeScripts(div);
+      this.scriptsExecuted = true;
+    }
+  }
+
+  /**
+   * Execute scripts in the HTML content
+   * Replicates the script execution behavior from the original implementation
+   */
+  private executeScripts(container: HTMLElement): void {
+    const scripts = container.querySelectorAll('script');
+    scripts.forEach((oldScript) => {
+      const newScript = document.createElement('script');
+
+      // Copy attributes
+      Array.from(oldScript.attributes).forEach((attr) => {
+        newScript.setAttribute(attr.name, attr.value);
+      });
+
+      // Copy script content
+      newScript.textContent = oldScript.textContent;
+
+      // Replace old script with new executable script
+      oldScript.parentNode?.replaceChild(newScript, oldScript);
+    });
+  }
+
+  /**
+   * Override update to handle script re-execution when content changes
+   */
+  update(newData: CanvasElement): void {
+    const contentChanged = this.data.content !== newData.content;
+
+    // Reset script execution flag if content changed
+    if (contentChanged) {
+      this.scriptsExecuted = false;
+    }
+
+    super.update(newData);
+  }
+
+  /**
+   * Cleanup when unmounting
+   */
+  unmount(): void {
+    this.scriptsExecuted = false;
+    super.unmount();
+  }
+}
diff --git a/src/components/elements/ImageElement.ts b/src/components/elements/ImageElement.ts
new file mode 100644
index 0000000..e972bb1
--- /dev/null
+++ b/src/components/elements/ImageElement.ts
@@ -0,0 +1,61 @@
+/**
+ * ImageElement
+ *
+ * Image element implementation with lazy loading and placeholder support
+ */
+
+import { BaseElementComponent } from '../BaseElementComponent.ts';
+import type { CanvasElement } from '../../types.ts';
+import type { ComponentContext } from '../BaseComponent.ts';
+
+export class ImageElement extends BaseElementComponent {
+  private imageElement: HTMLImageElement | null = null;
+
+  constructor(data: CanvasElement, context: ComponentContext) {
+    super(data, context);
+  }
+
+  protected renderContent(container: HTMLElement): void {
+    // Clear existing content
+    container.innerHTML = '';
+
+    // Create or reuse image element
+    if (!this.imageElement) {
+      this.imageElement = this.createElement('img') as HTMLImageElement;
+      this.imageElement.className = 'content';
+      this.imageElement.dataset.image_id = this.data.imgId || '';
+      this.imageElement.title = this.data.content;
+
+      // Error handler
+      this.addEventListener(this.imageElement, 'error', (err) => {
+        console.warn('Image failed to load', err);
+      });
+    }
+
+    // Update image source
+    if (this.data.src) {
+      this.imageElement.src = this.data.src;
+    } else {
+      // Placeholder
+      const width = Math.round(this.data.width);
+      const height = Math.round(this.data.height);
+      this.imageElement.src = `https://placehold.co/${width}x${height}?text=${encodeURIComponent(this.data.content)}&font=lora`;
+    }
+
+    container.appendChild(this.imageElement);
+  }
+
+  protected shouldUpdateContent(oldData: CanvasElement, newData: CanvasElement): boolean {
+    return (
+      oldData.content !== newData.content ||
+      oldData.src !== newData.src ||
+      oldData.width !== newData.width ||
+      oldData.height !== newData.height
+    );
+  }
+
+  unmount(): void {
+    this.imageElement = null;
+    super.unmount();
+  }
+}
diff --git a/src/components/elements/JsonElement.ts b/src/components/elements/JsonElement.ts
new file mode 100644
index 0000000..91e5301
--- /dev/null
+++ b/src/components/elements/JsonElement.ts
@@ -0,0 +1,52 @@
+/**
+ * JsonElement
+ *
+ * JSON element implementation with syntax highlighting
+ */
+
+import { BaseElementComponent } from '../BaseElementComponent.ts';
+import type { CanvasElement } from '../../types.ts';
+import type { ComponentContext } from '../BaseComponent.ts';
+
+export class JsonElement extends BaseElementComponent {
+  constructor(data: CanvasElement, context: ComponentContext) {
+    super(data, context);
+  }
+
+  protected renderContent(container: HTMLElement): void {
+    // Clear existing content
+    container.innerHTML = '';
+
+    // Create pre element for JSON display
+    const pre = this.createElement('pre');
+    pre.style.margin = '0';
+    pre.style.padding = '8px';
+    pre.style.backgroundColor = '#f5f5f5';
+    pre.style.borderRadius = '4px';
+    pre.style.overflow = 'auto';
+    pre.style.fontSize = '12px';
+    pre.style.fontFamily = 'monospace';
+    pre.style.color = this.data.color || '#000000';
+
+    try {
+      // Try to parse and pretty-print the JSON
+      const parsed = JSON.parse(this.data.content);
+      pre.textContent = JSON.stringify(parsed, null, 2);
+    } catch (e) {
+      // If parsing fails, display as-is with error indicator
+      pre.textContent = this.data.content;
+      pre.style.borderLeft = '3px solid #ff0000';
+      pre.title = 'Invalid JSON';
+    }
+
+    container.appendChild(pre);
+  }
+
+  /**
+   * Check if content needs update
+   * JSON elements should update if content or color changes
+   */
+  protected shouldUpdateContent(oldData: CanvasElement, newData: CanvasElement): boolean {
+    return oldData.content !== newData.content || oldData.color !== newData.color;
+  }
+}
diff --git a/src/components/elements/MarkdownElement.ts b/src/components/elements/MarkdownElement.ts
new file mode 100644
index 0000000..3654d45
--- /dev/null
+++ b/src/components/elements/MarkdownElement.ts
@@ -0,0 +1,36 @@
+/**
+ * MarkdownElement
+ *
+ * Markdown element implementation with rendering via marked library
+ */
+
+import { BaseElementComponent } from '../BaseElementComponent.ts';
+import type { CanvasElement } from '../../types.ts';
+import type { ComponentContext } from '../BaseComponent.ts';
+
+// Use existing window.marked declaration from types.ts
+
+export class MarkdownElement extends BaseElementComponent {
+  constructor(data: CanvasElement, context: ComponentContext) {
+    super(data, context);
+  }
+
+  protected renderContent(container: HTMLElement): void {
+    // Clear existing content
+    container.innerHTML = '';
+
+    // Parse and render markdown
+    const div = this.createElement('div');
+
+    if (window.marked) {
+      div.innerHTML = window.marked.parse(this.data.content);
+    } else {
+      // Fallback if marked is not loaded
+      div.textContent = this.data.content;
+    }
+
+    div.style.color = this.data.color || '#000000';
+
+    container.appendChild(div);
+  }
+}
diff --git a/src/components/elements/TextElement.ts b/src/components/elements/TextElement.ts
new file mode 100644
index 0000000..f6d7c63
--- /dev/null
+++ b/src/components/elements/TextElement.ts
@@ -0,0 +1,27 @@
+/**
+ * TextElement
+ *
+ * Simple text element implementation extending BaseElementComponent
+ */
+
+import { BaseElementComponent } from '../BaseElementComponent.ts';
+import type { CanvasElement } from '../../types.ts';
+import type { ComponentContext } from '../BaseComponent.ts';
+
+export class TextElement extends BaseElementComponent {
+  constructor(data: CanvasElement, context: ComponentContext) {
+    super(data, context);
+  }
+
+  protected renderContent(container: HTMLElement): void {
+    // Clear existing content
+    container.innerHTML = '';
+
+    // Create paragraph element
+    const p = this.createElement('p');
+    p.textContent = this.data.content;
+    p.style.color = this.data.color || '#000000';
+
+    container.appendChild(p);
+  }
+}
diff --git a/src/components/index.ts b/src/components/index.ts
new file mode 100644
index 0000000..993cd9f
--- /dev/null
+++ b/src/components/index.ts
@@ -0,0 +1,26 @@
+/**
+ * Component System
+ *
+ * Export all component base classes, implementations, and registry
+ */
+
+// Base classes
+export { BaseComponent } from './BaseComponent.ts';
+export { BaseElementComponent } from './BaseElementComponent.ts';
+export { BaseEdgeComponent } from './BaseEdgeComponent.ts';
+
+// Element implementations
+export { TextElement } from './elements/TextElement.ts';
+export { MarkdownElement } from './elements/MarkdownElement.ts';
+export { ImageElement } from './elements/ImageElement.ts';
+export { HtmlElement } from './elements/HtmlElement.ts';
+export { JsonElement } from './elements/JsonElement.ts';
+
+// Edge implementations
+export { StandardEdge } from './edges/StandardEdge.ts';
+
+// Registry
+export { ComponentRegistry, componentRegistry } from './ComponentRegistry.ts';
+
+// Types
+export type { ComponentContext } from './BaseComponent.ts';
diff --git a/src/main.ts b/src/main.ts
index 302497f..3cc6d2a 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,15 +10,37 @@ import { showModal } from './lib/modal.ts';
 import { elementRegistry } from './lib/elements/elementRegistry.ts';
 import { CrdtAdapter } from './lib/network/crdt.ts';
 import type { CanvasState, CanvasElement, ViewState, Edge } from './types.ts';
+import { HistoryManager } from './services/HistoryManager.ts';
+import { ViewportManager } from './services/ViewportManager.ts';
+import { SelectionManager } from './services/SelectionManager.ts';
+import { RenderingPipeline } from './services/renderers/RenderingPipeline.ts';
+import { ElementRenderer } from './services/renderers/ElementRenderer.ts';
+import { EdgeRenderer } from './services/renderers/EdgeRenderer.ts';
+import { GeometryUtils } from './services/utils/GeometryUtils.ts';
 
 class CanvasController {
     canvasState: CanvasState;
     crdt: CrdtAdapter;
+
+    // Service managers
+    historyManager: HistoryManager;
+    viewportManager: ViewportManager;
+    selectionManager: SelectionManager;
+    renderingPipeline: RenderingPipeline;
+
+    // Legacy properties (delegated to services)
     selectedElementIds: Set<string>;
     selectedElementId: string | null;
     selectionBox: HTMLElement | null;
-    activeEditTab: string;
     viewState: ViewState;
+    groupBox: HTMLElement;
+    MAX_SCALE: number;
+    MIN_SCALE: number;
+    _undo: any[];
+    _redo: any[];
+    _maxHistory: number;
+
+    activeEditTab: string;
     elementRegistry: any;
     elementNodesMap: Record<string, HTMLElement>;
     edgeNodesMap: Record<string, SVGLineElement>;
@@ -30,17 +52,11 @@ class CanvasController {
     modeBtn: HTMLElement;
     drillUpBtn: HTMLElement;
     edgesLayer: SVGSVGElement;
-    groupBox: HTMLElement;
-    MAX_SCALE: number;
-    MIN_SCALE: number;
     codeMirrorContent: any;
     codeMirrorSrc: any;
     tokenKey: string;
     modes: string[];
     mode: string;
-    _undo: any[];
-    _redo: any[];
-    _maxHistory: number;
     fsmService: any;
     uninstallAdapter: () => void;
     uninstallCommandPalette: () => void;
@@ -84,25 +100,10 @@ class CanvasController {
             this.canvasState.edges = [];
         }
 
-        this.selectedElementIds = new Set();   // multiselect aware
-        Object.defineProperty(this, 'selectedElementId', {  // legacy shim
-            get: () => (this.selectedElementIds.size === 1 ? [...this.selectedElementIds][0] : null),
-            set: (v) => { this.selectedElementIds.clear(); if (v) this.selectedElementIds.add(v); }
-        });
-
-        this.selectionBox = null;              // DOM element for the rubber‑band rectangle
         this.activeEditTab = "content"; // "content" or "src"
-
-        this.viewState = {
-            scale: 1,
-            translateX: 0,
-            translateY: 0
-        };
-
         this.elementRegistry = elementRegistry;
-        this.elementNodesMap = {};
-        this.edgeNodesMap = {};
 
+        // Get DOM elements
         this.canvas = document.getElementById("canvas");
         this.container = document.getElementById("canvas-container");
         this.staticContainer = document.getElementById("static-container");
@@ -110,37 +111,146 @@ class CanvasController {
         this.modeBtn = document.getElementById("mode");
         this.drillUpBtn = document.getElementById("drillUp");
         this.edgesLayer = document.getElementById("edges-layer") as any as SVGSVGElement;
-        this.groupBox = document.createElement('div');
-        this.groupBox.id = 'group-box';
-        this.groupBox.innerHTML = `
-  <div class="box"></div>
-  <div class="element-handle resize-handle"><i class="fa-solid fa-up-right-and-down-left-from-center"></i></div>
-  <div class="element-handle rotate-handle"><i class="fa-solid fa-rotate"></i></div>
-  <div class="element-handle scale-handle"><i class="fa-solid fa-up-down-left-right"></i></div>`;
-        this.container.appendChild(this.groupBox);
-        this.groupBox.style.display = 'none';
-
-        this.MAX_SCALE = 10;
-        this.MIN_SCALE = 0.1;
 
         this.codeMirrorContent = null;
         this.codeMirrorSrc = null;
-
         this.tokenKey = "PARC.LAND/BKPK_TOKEN";
-
         this.modes = ['direct', 'navigate'];
         this.mode = 'direct';
-        this.switchMode('navigate');
 
-        /* ── UNDO / REDO stacks ─────────────────────────────────── */
-        this._undo = [];          // stack of past states
-        this._redo = [];          // stack of undone states
-        this._maxHistory = 100;   // ring-buffer size
+        // Initialize service managers
+        // IMPORTANT: ViewportManager must be initialized before HistoryManager
+        // because HistoryManager immediately takes a snapshot that includes viewState
+
+        // Create initial viewState for ViewportManager
+        const initialViewState: ViewState = {
+            scale: 1,
+            translateX: 0,
+            translateY: 0
+        };
+
+        this.viewportManager = new ViewportManager(
+            this.canvas,
+            this.container,
+            this.edgesLayer,
+            canvasState.canvasId || "default",
+            (id) => this.findElementById(id),
+            initialViewState,
+            () => {
+                this.crdt.updateView(this.viewState);
+                this.selectionManager.updateGroupBox();
+            }
+        );
 
-        // First entry = pristine state so the user can always go “Back to start”
-        this._pushHistorySnapshot('Init');
+        this.historyManager = new HistoryManager(
+            () => ({ canvasState: this.canvasState, viewState: this.viewState }),
+            ({ canvasState, viewState }) => {
+                this.canvasState = canvasState;
+                this.viewState = viewState;
+                this.selectionManager.clearSelection();
+                this.requestRender();
+            }
+        );
 
-        this.loadLocalViewState();
+        this.selectionManager = new SelectionManager(
+            this.canvas,
+            this.container,
+            (id) => this.findElementById(id),
+            () => this.canvasState.elements,
+            (selectedIds) => {
+                this.crdt.updateSelection(selectedIds);
+                this.requestRender();
+            }
+        );
+
+        // Initialize rendering pipeline with renderers
+        const elementRenderer = new ElementRenderer(
+            this.elementRegistry,
+            this.container,
+            this.staticContainer,
+            this
+        );
+        const edgeRenderer = new EdgeRenderer(
+            this.edgesLayer,
+            this
+        );
+        this.renderingPipeline = new RenderingPipeline(
+            elementRenderer,
+            edgeRenderer,
+            this
+        );
+
+        // Set up legacy property accessors that delegate to services
+        Object.defineProperty(this, 'selectedElementIds', {
+            get: () => this.selectionManager.getSelectedIds(),
+            set: (v: Set<string>) => this.selectionManager.setSelectedIds(v)
+        });
+
+        Object.defineProperty(this, 'selectedElementId', {
+            get: () => this.selectionManager.getSingleSelectedId(),
+            set: (v: string | null) => {
+                if (v) {
+                    this.selectionManager.selectElement(v, false);
+                } else {
+                    this.selectionManager.clearSelection();
+                }
+            }
+        });
+
+        Object.defineProperty(this, 'selectionBox', {
+            get: () => null, // Managed internally by SelectionManager
+            set: (_v) => { /* no-op */ }
+        });
+
+        Object.defineProperty(this, 'viewState', {
+            get: () => this.viewportManager.getViewState(),
+            set: (v: ViewState) => this.viewportManager.setViewState(v)
+        });
+
+        Object.defineProperty(this, 'groupBox', {
+            get: () => this.selectionManager.getGroupBoxElement()
+        });
+
+        Object.defineProperty(this, 'MAX_SCALE', {
+            get: () => this.viewportManager.MAX_SCALE
+        });
+
+        Object.defineProperty(this, 'MIN_SCALE', {
+            get: () => this.viewportManager.MIN_SCALE
+        });
+
+        // Legacy history properties (delegate to historyManager)
+        Object.defineProperty(this, '_undo', {
+            get: () => [], // Internal to HistoryManager
+            set: (_v) => { /* no-op */ }
+        });
+
+        Object.defineProperty(this, '_redo', {
+            get: () => [], // Internal to HistoryManager
+            set: (_v) => { /* no-op */ }
+        });
+
+        Object.defineProperty(this, '_maxHistory', {
+            get: () => 100 // Internal to HistoryManager
+        });
+
+        // Delegate element/edge node maps to renderers
+        Object.defineProperty(this, 'elementNodesMap', {
+            get: () => this.renderingPipeline.getElementRenderer().getElementNodesMap(),
+            set: (_v) => { /* no-op - managed by renderer */ }
+        });
+
+        Object.defineProperty(this, 'edgeNodesMap', {
+            get: () => this.renderingPipeline.getEdgeRenderer().getEdgeNodesMap(),
+            set: (_v) => { /* no-op - managed by renderer */ }
+        });
+
+        Object.defineProperty(this, 'edgeLabelNodesMap', {
+            get: () => this.renderingPipeline.getEdgeRenderer().getEdgeLabelNodesMap(),
+            set: (_v) => { /* no-op - managed by renderer */ }
+        });
+
+        this.switchMode('navigate');
         const helperActions = createGestureHelpers(this);
         let safeActions: any = {};
         Object.entries(helperActions).forEach(([key, fn]: [string, any]) => {
@@ -186,34 +296,23 @@ class CanvasController {
         this._renderQueued = false;
         this._edgesQueued = false;
 
-        this.requestRender = () => {
-            if (this._renderQueued) return;
-            this._renderQueued = true;
-            requestAnimationFrame(() => {
-                this._renderQueued = false;
-                this.renderElementsImmediately();
-            });
-        };
-        this.requestEdgeUpdate = () => {
-            if (this._edgesQueued) return;
-            this._edgesQueued = true;
-            requestAnimationFrame(() => {
-                this._edgesQueued = false;
-                this.renderEdgesImmediately();
-            });
-        };
+        // Delegate rendering to pipeline
+        this.requestRender = () => this.renderingPipeline.requestRender();
+        this.requestEdgeUpdate = () => this.renderingPipeline.requestEdgeUpdate();
 
         this.requestRender();
         this.uninstallCommandPalette = installCommandPalette(this);
     }
 
     detach() {
-
         // Remove context menu event listener
         if (this.contextMenuPointerDownHandler) {
             this.contextMenu.removeEventListener("pointerdown", this.contextMenuPointerDownHandler);
         }
 
+        // Clean up services
+        this.selectionManager.destroy();
+
         // Clean up DOM nodes
         Object.values(this.elementNodesMap).forEach(node => node.remove());
         this.elementNodesMap = {};
@@ -260,9 +359,20 @@ class CanvasController {
         this.drillUpBtn.onclick = this.handleDrillUp.bind(this);
     }
 
-    undo() { this._stepHistory(this._undo, this._redo, 'undo'); }
-    redo() { this._stepHistory(this._redo, this._undo, 'redo'); }
+    // History methods - delegate to HistoryManager
+    undo() {
+        this.historyManager.undo();
+    }
+
+    redo() {
+        this.historyManager.redo();
+    }
 
+    _pushHistorySnapshot(label: string) {
+        this.historyManager.snapshot(label);
+    }
+
+    // Legacy methods for compatibility
     _snapshot(label = '') {
         return {
             label,
@@ -273,170 +383,53 @@ class CanvasController {
         };
     }
 
-    _pushHistorySnapshot(label) {
-        const snap = this._snapshot(label);
-        this._undo.push(snap);
-        if (this._undo.length > this._maxHistory) this._undo.shift();
-        this._redo.length = 0;            // clear redo chain
-    }
-
-    _stepHistory(fromStack, toStack, direction) {
-        if (fromStack.length === 0) return;
-        const cur = this._snapshot();     // current → opposite stack
-        toStack.push(cur);
-        const { data } = fromStack.pop(); // restore previous
-        this._restoreSnapshot(data);
+    _stepHistory(fromStack: any[], toStack: any[], direction: string) {
+        // Delegated to HistoryManager
+        if (direction === 'undo') {
+            this.historyManager.undo();
+        } else {
+            this.historyManager.redo();
+        }
     }
 
-    _restoreSnapshot({ canvasState, viewState }) {
-        
+    _restoreSnapshot({ canvasState, viewState }: { canvasState: CanvasState; viewState: ViewState }) {
         this.canvasState = structuredClone(canvasState);
-        //this.viewState   = structuredClone(viewState);
-
-        // clear selection, keep mode
-        this.selectedElementIds.clear();
+        this.selectionManager.clearSelection();
         this.requestRender();
-        //this.updateCanvasTransform();
     }
 
 
-    createSelectionBox(startX, startY) {
-        this.selectionBox = document.createElement('div');
-        this.selectionBox.id = 'lasso-box';
-        Object.assign(this.selectionBox.style, {
-            position: 'absolute',
-            border: '1px dashed #00aaff',
-            background: 'rgba(0,170,255,0.05)',
-            left: `${startX}px`,
-            top: `${startY}px`,
-            width: '0px',
-            height: '0px',
-            zIndex: 10000,
-            pointerEvents: 'none'
-        });
-        this.canvas.appendChild(this.selectionBox);
+    // Selection methods - delegate to SelectionManager
+    createSelectionBox(startX: number, startY: number) {
+        this.selectionManager.createSelectionBox(startX, startY);
     }
 
-    updateSelectionBox(startX, startY, curX, curY) {
-        if (!this.selectionBox) this.createSelectionBox(startX, startY)
-        const x = Math.min(startX, curX);
-        const y = Math.min(startY, curY);
-        const w = Math.abs(curX - startX);
-        const h = Math.abs(curY - startY);
-        Object.assign(this.selectionBox.style, {
-            left: `${x}px`, top: `${y}px`,
-            width: `${w}px`, height: `${h}px`
-        });
+    updateSelectionBox(startX: number, startY: number, curX: number, curY: number) {
+        this.selectionManager.updateSelectionBox(startX, startY, curX, curY);
     }
 
     removeSelectionBox() {
-        if (this.selectionBox) { this.selectionBox.remove(); this.selectionBox = null; }
+        this.selectionManager.removeSelectionBox();
     }
 
-
     selectElement(id: string, additive = false) {
-        if (!additive) this.selectedElementIds.clear();
-        console.log("[Controller] selectElement", id, { additive })
-        const el = this.findElementById(id);
-        if (el?.group) {
-            // pull in every element with the same group ID
-            const gid = el.group;
-            this.canvasState.elements
-                .filter(e => e.group === gid)
-                .forEach(e => this.selectedElementIds.add(e.id));
-        } else {
-            // fall back to single‐element toggle
-            if (this.selectedElementIds.has(id) && additive) {
-                this.selectedElementIds.delete(id);
-            } else {
-                this.selectedElementIds.add(id);
-            }
-        }
-        this.crdt.updateSelection(this.selectedElementIds);
-        this.updateGroupBox()
-        this.requestRender();
+        this.selectionManager.selectElement(id, additive);
     }
 
     clearSelection() {
-        if (this.selectedElementIds.size) {
-            this.selectedElementIds.clear();
-            this.crdt.updateSelection(this.selectedElementIds);
-            this.updateGroupBox()
-            this.requestRender();
-        }
+        this.selectionManager.clearSelection();
     }
 
     isElementSelected(id: string) {
-        return this.selectedElementIds.has(id);
+        return this.selectionManager.isElementSelected(id);
     }
 
-    getGroupBBox(): { x1: number; y1: number; x2: number; y2: number; cx: number; cy: number } | null {
-        if (this.selectedElementIds.size === 0) return null;
-        const els = [...this.selectedElementIds].map(id => this.findElementById(id));
-        
-        // Calculate corners for each element considering rotation
-        const allCorners = [];
-        
-        els.forEach(el => {
-            const scaleFactor = el.scale || 1;
-            const halfW = (el.width * scaleFactor) / 2;
-            const halfH = (el.height * scaleFactor) / 2;
-            const cx = el.x;
-            const cy = el.y;
-            const theta = ((el.rotation || 0) * Math.PI) / 180;
-            const cosθ = Math.cos(theta);
-            const sinθ = Math.sin(theta);
-            
-            // Calculate the four corners of the rotated rectangle
-            const corners = [
-                { x: -halfW, y: -halfH }, // top-left
-                { x: halfW, y: -halfH },  // top-right
-                { x: halfW, y: halfH },   // bottom-right
-                { x: -halfW, y: halfH }   // bottom-left
-            ].map(pt => {
-                // Rotate point
-                const rx = pt.x * cosθ - pt.y * sinθ;
-                const ry = pt.x * sinθ + pt.y * cosθ;
-                // Translate to element position
-                return { x: cx + rx, y: cy + ry };
-            });
-            
-            allCorners.push(...corners);
-        });
-        
-        // Find min/max coordinates from all corners
-        const xs = allCorners.map(pt => pt.x);
-        const ys = allCorners.map(pt => pt.y);
-        
-        return {
-            x1: Math.min(...xs), y1: Math.min(...ys),
-            x2: Math.max(...xs), y2: Math.max(...ys),
-            cx: (Math.min(...xs) + Math.max(...xs)) / 2,
-            cy: (Math.min(...ys) + Math.max(...ys)) / 2
-        };
+    getGroupBBox() {
+        return this.selectionManager.getGroupBBox();
     }
 
     updateGroupBox() {
-        if (this.selectedElementIds.size < 2) {
-            this.groupBox.style.display = 'none';
-            this.canvas.classList.remove('group-selected')
-            return;
-        }
-
-        const bb = this.getGroupBBox();
-        if (!bb) {
-            this.groupBox.style.display = 'none';
-            this.canvas.classList.remove('group-selected')
-            return;
-        }
-
-        this.canvas.classList.add('group-selected')
-
-        this.groupBox.style.display = 'block';
-        this.groupBox.style.left = bb.x1 + 'px';           // canvas-space
-        this.groupBox.style.top = bb.y1 + 'px';
-        this.groupBox.style.width = (bb.x2 - bb.x1) + 'px';
-        this.groupBox.style.height = (bb.y2 - bb.y1) + 'px';
+        this.selectionManager.updateGroupBox();
     }
 
     switchMode(m?: string) {
@@ -451,177 +444,34 @@ class CanvasController {
         this.modeBtn.innerHTML = `<i class="fa-solid fa-${this.mode === 'direct' ? 'arrow-pointer' : 'hand'}"></i> ${this.mode === 'direct' ? 'Editing' : 'Viewing'}`;
     }
 
+    // Viewport methods - delegate to ViewportManager
     loadLocalViewState() {
-        try {
-            const key = "canvasViewState_" + (this.canvasState.canvasId || "default");
-            const saved = localStorage.getItem(key);
-            if (saved) {
-                const vs = JSON.parse(saved);
-                this.viewState.scale = vs.scale || 1;
-                this.viewState.translateX = vs.translateX || 0;
-                this.viewState.translateY = vs.translateY || 0;
-            }
-        } catch (e) {
-            console.warn("No local viewState found", e);
-        }
+        this.viewportManager.loadLocalViewState();
     }
 
     saveLocalViewState() {
-        try {
-            const key = "canvasViewState_" + (this.canvasState.canvasId || "default");
-            localStorage.setItem(key, JSON.stringify(this.viewState));
-        } catch (e) {
-            console.warn("Could not store local viewState", e);
-        }
+        this.viewportManager.saveLocalViewState();
     }
 
     updateCanvasTransform() {
         if ((this.canvas as any).controller !== this) return;
-
-        this.container.style.transform = `translate(${this.viewState.translateX}px, ${this.viewState.translateY}px) scale(${this.viewState.scale})`;
-        this.container.style.setProperty('--translateX', String(this.viewState.translateX));
-        this.container.style.setProperty('--translateY', String(this.viewState.translateY));
-        this.container.style.setProperty('--zoom', String(this.viewState.scale));
-
-        // Get the canvas (visible) size
-        const canvasRect = this.canvas.getBoundingClientRect();
-        const W = canvasRect.width;
-        const H = canvasRect.height;
-
-        this.crdt.updateView(this.viewState);
-
-        // Compute the visible region in canvas coordinates:
-        const visibleX = -this.viewState.translateX / this.viewState.scale;
-        const visibleY = -this.viewState.translateY / this.viewState.scale;
-        const visibleWidth = W / this.viewState.scale;
-        const visibleHeight = H / this.viewState.scale;
-
-        // Set the viewBox attribute on the SVG layer so that its coordinate system
-        // matches the visible region.
-        this.edgesLayer.setAttribute("viewBox", `${String(visibleX)} ${String(visibleY)} ${String(visibleWidth)} ${String(visibleHeight)}`);
-        // console.log("[DEBUG] SVG viewBox updated to:", visibleX, visibleY, visibleWidth, visibleHeight);
-
-        this.updateGroupBox()
+        this.viewportManager.updateCanvasTransform();
     }
 
     recenterOnElement(elId: string) {
-        const el = this.findElementById(elId);
-        if (!el) {
-            console.warn(`Element with ID "${elId}" not found.`);
-            return;
-        }
-
-        // Compute the center of the element in canvas coordinates
-        const scale = this.viewState.scale || 1;
-        const elCenterX = el.x;
-        const elCenterY = el.y;
-
-        // Get canvas size in pixels
-        const canvasRect = this.canvas.getBoundingClientRect();
-        const canvasCenterX = canvasRect.width / 2;
-        const canvasCenterY = canvasRect.height / 2;
-
-        // Compute new translation to center the element
-        this.viewState.translateX = canvasCenterX - (elCenterX * scale);
-        this.viewState.translateY = canvasCenterY - (elCenterY * scale);
+        this.viewportManager.recenterOnElement(elId);
+    }
 
-        this.updateCanvasTransform();
-        this.saveLocalViewState();
+    screenToCanvas(px: number, py: number): { x: number; y: number } {
+        return this.viewportManager.screenToCanvas(px, py);
     }
 
     renderElementsImmediately() {
-        if ((this.canvas as any).controller !== this) return;
-        console.log(`requestRender()`);
-        const existingIds = new Set(Object.keys(this.elementNodesMap));
-        const usedIds = new Set();
-
-        this.canvasState.elements.forEach(el => {
-            usedIds.add(el.id);
-            let node = this.elementNodesMap[el.id];
-            if (!node) {
-                node = this._ensureDomFor(el);
-                (el.static ? this.staticContainer : this.container).appendChild(node);
-                this.elementNodesMap[el.id] = node;
-            }
-            const isSel = this.selectedElementIds.has(el.id);
-            this.updateElementNode(node, el, isSel);
-        });
-
-        existingIds.forEach(id => {
-            if (!usedIds.has(id)) {
-                const node = this.elementNodesMap[id];
-                const view = elementRegistry.viewFor(node?.dataset.type);
-                view?.unmount?.(node.firstChild as HTMLElement);
-                node.remove();
-
-                delete this.elementNodesMap[id];
-            }
-        });
-        this.updateGroupBox()
-        this.requestEdgeUpdate();
+        this.renderingPipeline.renderElementsImmediately();
     }
 
     renderEdgesImmediately() {
-        // console.log("requestEdgeUpdate()");
-
-        // Ensure an SVG marker for arrowheads exists.
-        let defs = this.edgesLayer.querySelector("defs");
-        if (!defs) {
-            defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
-            this.edgesLayer.prepend(defs);
-        }
-        if (!defs.querySelector("#arrowhead")) {
-            const marker = document.createElementNS("http://www.w3.org/2000/svg", "marker");
-            marker.setAttribute("id", "arrowhead");
-            marker.setAttribute("markerWidth", "10");
-            marker.setAttribute("markerHeight", "7");
-            marker.setAttribute("refX", "10");
-            marker.setAttribute("refY", "3.5");
-            marker.setAttribute("orient", "auto");
-            const arrowPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
-            arrowPath.setAttribute("d", "M0,0 L0,7 L10,3.5 Z");
-            arrowPath.setAttribute("fill", "#ccc");
-            marker.appendChild(arrowPath);
-            defs.appendChild(marker);
-        }
-
-        // Iterate over each edge in the canvas state.
-        this.canvasState.edges.forEach(edge => {
-            let line = this.edgeNodesMap[edge.id];
-            if (!line) {
-                // console.log("line node does not exists", edge, line)
-                line = document.createElementNS("http://www.w3.org/2000/svg", "line");
-                line.setAttribute("stroke", edge.style?.color || "#ccc");
-                line.setAttribute("stroke-width", edge.style?.thickness || "2");
-                // Set arrow marker at the target end.
-                line.setAttribute("marker-end", "url(#arrowhead)");
-                this.edgeNodesMap[edge.id] = line;
-                this.edgesLayer.appendChild(line);
-            } else {
-                // console.log("line node exists", edge, line)
-            }
-
-            this.updateEdgePosition(edge, line)
-        });
-
-        // Remove any orphaned SVG lines.
-        Object.keys(this.edgeNodesMap).forEach(edgeId => {
-            if (!this.canvasState.edges.find(e => e.id === edgeId)) {
-                console.log(`[DEBUG] Deleting orphaned edge node`, edgeId, this.edgeNodesMap[edgeId])
-                this.edgeNodesMap[edgeId].remove();
-                delete this.edgeNodesMap[edgeId];
-            }
-        });
-        // Remove orphaned labels.
-        if (this.edgeLabelNodesMap) {
-            Object.keys(this.edgeLabelNodesMap).forEach(edgeId => {
-                if (!this.canvasState.edges.find(e => e.id === edgeId)) {
-                    console.log(`[DEBUG] Deleting orphaned edge label`, edgeId, this.edgeLabelNodesMap[edgeId])
-                    this.edgeLabelNodesMap[edgeId].remove();
-                    delete this.edgeLabelNodesMap[edgeId];
-                }
-            });
-        }
+        this.renderingPipeline.renderEdgesImmediately();
     }
 
     updateEdgePosition(edge: Edge, line: SVGLineElement) {
@@ -633,14 +483,14 @@ class CanvasController {
 
         let sourcePoint, targetPoint;
         if ((sourceEl || sourceEdge) && (targetEl || targetEdge)) {
-            sourcePoint = this.computeIntersection(sourceEl || {
+            sourcePoint = GeometryUtils.computeIntersection(sourceEl || {
                 x: parseFloat(this.edgeLabelNodesMap[edge.source].getAttribute("x")),
                 y: parseFloat(this.edgeLabelNodesMap[edge.source].getAttribute("y"))
             }, targetEl || {
                 x: parseFloat(this.edgeLabelNodesMap[edge.target].getAttribute("x")),
                 y: parseFloat(this.edgeLabelNodesMap[edge.target].getAttribute("y"))
             });
-            targetPoint = this.computeIntersection(targetEl || {
+            targetPoint = GeometryUtils.computeIntersection(targetEl || {
                 x: parseFloat(this.edgeLabelNodesMap[edge.target].getAttribute("x")),
                 y: parseFloat(this.edgeLabelNodesMap[edge.target].getAttribute("y"))
             }, sourceEl || {
@@ -902,15 +752,6 @@ ${script.getAttribute('src')}`);
         }
     }
 
-    screenToCanvas(px: number, py: number): { x: number; y: number } {
-        const dx = px - this.canvas.offsetLeft;
-        const dy = py - this.canvas.offsetTop;
-        return {
-            x: (dx - this.viewState.translateX) / this.viewState.scale,
-            y: (dy - this.viewState.translateY) / this.viewState.scale
-        };
-    }
-
     setElementContent(node: HTMLElement, el: CanvasElement) {
         const currentType = node.dataset.type || "";
         const currentContent = node.dataset.content || "";
@@ -1194,52 +1035,6 @@ ${script.getAttribute('src')}`);
         return node;
     }
 
-    computeIntersection(el: CanvasElement | { x: number; y: number }, otherEl: CanvasElement | { x: number; y: number }): { x: number; y: number } {
-        // 1) Center and scale as before
-        const cx = el.x;
-        const cy = el.y;
-        const scaleFactor = ('scale' in el) ? (el.scale || 1) : 1;
-        const w = (('width' in el) ? (el.width || 10) : 10) * scaleFactor;
-        const h = (('height' in el) ? (el.height || 10) : 10) * scaleFactor;
-        const halfW = w / 2;
-        const halfH = h / 2;
-
-        // 2) Vector from el center to otherEl
-        let dx = otherEl.x - cx;
-        let dy = otherEl.y - cy;
-
-        // If same point, return center
-        if (dx === 0 && dy === 0) {
-            return { x: cx, y: cy };
-        }
-
-        // 3) Un-rotate the direction vector into the rectangle's local axes
-        const theta = ((('rotation' in el) ? (el.rotation || 0) : 0) * Math.PI) / 180;
-        const cosθ = Math.cos(-theta);
-        const sinθ = Math.sin(-theta);
-        const localDX = dx * cosθ - dy * sinθ;
-        const localDY = dx * sinθ + dy * cosθ;
-
-        // 4) Compute intersection on an axis-aligned box in local space
-        const scaleX = localDX !== 0 ? halfW / Math.abs(localDX) : Infinity;
-        const scaleY = localDY !== 0 ? halfH / Math.abs(localDY) : Infinity;
-        const scale = Math.min(scaleX, scaleY);
-
-        const localIX = localDX * scale;
-        const localIY = localDY * scale;
-
-        // 5) Rotate the intersection point back into world axes
-        const cosθf = Math.cos(theta);
-        const sinθf = Math.sin(theta);
-        const worldIX = localIX * cosθf - localIY * sinθf;
-        const worldIY = localIX * sinθf + localIY * cosθf;
-
-        // 6) Translate back to world coordinates
-        return {
-            x: cx + worldIX,
-            y: cy + worldIY
-        };
-    }
 
 
     buildContextMenu(elId?: string) {
diff --git a/src/services/EventBus.ts b/src/services/EventBus.ts
new file mode 100644
index 0000000..5f2ea19
--- /dev/null
+++ b/src/services/EventBus.ts
@@ -0,0 +1,174 @@
+/**
+ * EventBus - Simple pub/sub event system for decoupling components
+ *
+ * Enables loose coupling between services and components by allowing them
+ * to communicate via events rather than direct method calls.
+ */
+
+export type EventHandler = (data?: any) => void;
+
+export interface EventSubscription {
+  unsubscribe: () => void;
+}
+
+export class EventBus {
+  private listeners: Map<string, Set<EventHandler>> = new Map();
+  private debug: boolean = false;
+
+  constructor(debug: boolean = false) {
+    this.debug = debug;
+  }
+
+  /**
+   * Subscribe to an event
+   * @param event Event name
+   * @param handler Callback function
+   * @returns Subscription object with unsubscribe method
+   */
+  on(event: string, handler: EventHandler): EventSubscription {
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, new Set());
+    }
+    this.listeners.get(event)!.add(handler);
+
+    if (this.debug) {
+      console.log(`[EventBus] Subscribed to "${event}"`);
+    }
+
+    return {
+      unsubscribe: () => this.off(event, handler)
+    };
+  }
+
+  /**
+   * Unsubscribe from an event
+   * @param event Event name
+   * @param handler Callback function to remove
+   */
+  off(event: string, handler: EventHandler): void {
+    const handlers = this.listeners.get(event);
+    if (handlers) {
+      handlers.delete(handler);
+      if (handlers.size === 0) {
+        this.listeners.delete(event);
+      }
+
+      if (this.debug) {
+        console.log(`[EventBus] Unsubscribed from "${event}"`);
+      }
+    }
+  }
+
+  /**
+   * Emit an event to all subscribers
+   * @param event Event name
+   * @param data Optional data to pass to handlers
+   */
+  emit(event: string, data?: any): void {
+    const handlers = this.listeners.get(event);
+
+    if (this.debug && handlers && handlers.size > 0) {
+      console.log(`[EventBus] Emitting "${event}" to ${handlers.size} listener(s)`, data);
+    }
+
+    if (handlers) {
+      handlers.forEach(handler => {
+        try {
+          handler(data);
+        } catch (error) {
+          console.error(`[EventBus] Error in handler for "${event}":`, error);
+        }
+      });
+    }
+  }
+
+  /**
+   * Subscribe to an event for a single emission, then auto-unsubscribe
+   * @param event Event name
+   * @param handler Callback function
+   * @returns Subscription object
+   */
+  once(event: string, handler: EventHandler): EventSubscription {
+    const wrappedHandler = (data?: any) => {
+      handler(data);
+      this.off(event, wrappedHandler);
+    };
+    return this.on(event, wrappedHandler);
+  }
+
+  /**
+   * Remove all listeners for a specific event, or all events if no event specified
+   * @param event Optional event name
+   */
+  clear(event?: string): void {
+    if (event) {
+      this.listeners.delete(event);
+      if (this.debug) {
+        console.log(`[EventBus] Cleared all listeners for "${event}"`);
+      }
+    } else {
+      this.listeners.clear();
+      if (this.debug) {
+        console.log(`[EventBus] Cleared all listeners`);
+      }
+    }
+  }
+
+  /**
+   * Get count of listeners for an event
+   * @param event Event name
+   * @returns Number of listeners
+   */
+  listenerCount(event: string): number {
+    return this.listeners.get(event)?.size || 0;
+  }
+
+  /**
+   * Get all registered event names
+   * @returns Array of event names
+   */
+  eventNames(): string[] {
+    return Array.from(this.listeners.keys());
+  }
+}
+
+/**
+ * Standard event names used throughout the application
+ */
+export const Events = {
+  // Element lifecycle events
+  ELEMENT_CREATED: 'element:created',
+  ELEMENT_UPDATED: 'element:updated',
+  ELEMENT_DELETED: 'element:deleted',
+  ELEMENT_SELECTED: 'element:selected',
+
+  // Edge lifecycle events
+  EDGE_CREATED: 'edge:created',
+  EDGE_UPDATED: 'edge:updated',
+  EDGE_DELETED: 'edge:deleted',
+
+  // Selection events
+  SELECTION_CHANGED: 'selection:changed',
+  SELECTION_CLEARED: 'selection:cleared',
+
+  // Viewport events
+  VIEWPORT_CHANGED: 'viewport:changed',
+  VIEWPORT_PAN: 'viewport:pan',
+  VIEWPORT_ZOOM: 'viewport:zoom',
+  VIEWPORT_RECENTER: 'viewport:recenter',
+
+  // History events
+  HISTORY_SNAPSHOT: 'history:snapshot',
+  HISTORY_UNDO: 'history:undo',
+  HISTORY_REDO: 'history:redo',
+
+  // Rendering events
+  RENDER_REQUESTED: 'render:requested',
+  RENDER_COMPLETE: 'render:complete',
+
+  // Canvas state events
+  CANVAS_LOADED: 'canvas:loaded',
+  CANVAS_SAVED: 'canvas:saved',
+} as const;
+
+export type EventName = typeof Events[keyof typeof Events];
diff --git a/src/services/HistoryManager.ts b/src/services/HistoryManager.ts
new file mode 100644
index 0000000..4224792
--- /dev/null
+++ b/src/services/HistoryManager.ts
@@ -0,0 +1,204 @@
+import type { CanvasState, ViewState } from "../types";
+import type { EventBus } from "./EventBus";
+import { Events } from "./EventBus";
+
+/**
+ * Snapshot of canvas state for undo/redo operations
+ */
+interface HistorySnapshot {
+  label: string;
+  data: {
+    canvasState: CanvasState;
+    viewState: ViewState;
+  };
+}
+
+/**
+ * Manages undo/redo history for the canvas.
+ *
+ * Provides:
+ * - Snapshot creation and restoration
+ * - Undo/redo stack management
+ * - Ring buffer with configurable max size
+ * - Deep cloning to prevent mutation issues
+ * - Event-driven notifications for history changes
+ */
+export class HistoryManager {
+  private _undo: HistorySnapshot[] = [];
+  private _redo: HistorySnapshot[] = [];
+  private _maxHistory: number = 100;
+  private getState: () => { canvasState: CanvasState; viewState: ViewState };
+  private setState: (state: {
+    canvasState: CanvasState;
+    viewState: ViewState;
+  }) => void;
+  private eventBus?: EventBus;
+
+  /**
+   * Creates a new HistoryManager
+   *
+   * @param getState - Function that returns current canvas and view state
+   * @param setState - Function that restores canvas and view state
+   * @param maxHistory - Maximum number of history entries to keep (default: 100)
+   * @param eventBus - Optional EventBus for emitting history events
+   */
+  constructor(
+    getState: () => { canvasState: CanvasState; viewState: ViewState },
+    setState: (state: {
+      canvasState: CanvasState;
+      viewState: ViewState;
+    }) => void,
+    maxHistory: number = 100,
+    eventBus?: EventBus,
+  ) {
+    this.getState = getState;
+    this.setState = setState;
+    this._maxHistory = maxHistory;
+    this.eventBus = eventBus;
+
+    // First entry = pristine state so the user can always go "Back to start"
+    this.snapshot("Init");
+  }
+
+  /**
+   * Undo the last action
+   */
+  undo(): void {
+    this._stepHistory(this._undo, this._redo, "undo");
+    this.eventBus?.emit(Events.HISTORY_UNDO);
+  }
+
+  /**
+   * Redo the last undone action
+   */
+  redo(): void {
+    this._stepHistory(this._redo, this._undo, "redo");
+    this.eventBus?.emit(Events.HISTORY_REDO);
+  }
+
+  /**
+   * Check if undo is available
+   */
+  canUndo(): boolean {
+    return this._undo.length > 0;
+  }
+
+  /**
+   * Check if redo is available
+   */
+  canRedo(): boolean {
+    return this._redo.length > 0;
+  }
+
+  /**
+   * Create a new snapshot of the current state
+   *
+   * @param label - Descriptive label for this snapshot
+   */
+  snapshot(label: string): void {
+    const snap = this._createSnapshot(label);
+    this._undo.push(snap);
+
+    // Enforce ring buffer size limit
+    if (this._undo.length > this._maxHistory) {
+      this._undo.shift();
+    }
+
+    // Clear redo chain when new action is taken
+    this._redo.length = 0;
+
+    // Emit snapshot event
+    this.eventBus?.emit(Events.HISTORY_SNAPSHOT, { label });
+  }
+
+  /**
+   * Get the number of undo steps available
+   */
+  getUndoCount(): number {
+    return this._undo.length;
+  }
+
+  /**
+   * Get the number of redo steps available
+   */
+  getRedoCount(): number {
+    return this._redo.length;
+  }
+
+  /**
+   * Clear all history
+   */
+  clear(): void {
+    this._undo.length = 0;
+    this._redo.length = 0;
+  }
+
+  /**
+   * Create a snapshot from current state
+   */
+  private _createSnapshot(label: string = ""): HistorySnapshot {
+    const state = this.getState();
+    return {
+      label,
+      data: structuredClone({
+        canvasState: state.canvasState,
+        viewState: state.viewState,
+      }),
+    };
+  }
+
+  /**
+   * Move through history by swapping stacks
+   *
+   * The undo stack contains snapshots taken via snapshot() calls.
+   * When undoing, we restore the previous snapshot (second from top).
+   * When redoing, we restore a snapshot from the redo stack.
+   */
+  private _stepHistory(
+    fromStack: HistorySnapshot[],
+    toStack: HistorySnapshot[],
+    direction: "undo" | "redo",
+  ): void {
+    if (fromStack.length === 0) return;
+
+    if (direction === "undo") {
+      // Need at least 2 snapshots to undo (current + previous)
+      if (fromStack.length < 2) {
+        return;
+      }
+
+      // Move current snapshot to redo stack
+      const currentSnapshot = fromStack.pop()!;
+      toStack.push(currentSnapshot);
+
+      // Restore the previous snapshot (now at top of undo stack)
+      const previousSnapshot = fromStack[fromStack.length - 1];
+      this._restoreSnapshot(previousSnapshot.data);
+    } else {
+      // Redo: pop from redo stack and restore it
+      const snapshotToRestore = fromStack.pop()!;
+
+      // Push it back to undo stack
+      toStack.push(snapshotToRestore);
+
+      // Restore the snapshot
+      this._restoreSnapshot(snapshotToRestore.data);
+    }
+  }
+
+  /**
+   * Restore a snapshot
+   */
+  private _restoreSnapshot(data: {
+    canvasState: CanvasState;
+    viewState: ViewState;
+  }): void {
+    // Deep clone to prevent mutation issues
+    const restoredState = {
+      canvasState: structuredClone(data.canvasState),
+      viewState: data.viewState, // ViewState can be shallow copied
+    };
+
+    this.setState(restoredState);
+  }
+}
diff --git a/src/services/SelectionManager.ts b/src/services/SelectionManager.ts
new file mode 100644
index 0000000..d43fb44
--- /dev/null
+++ b/src/services/SelectionManager.ts
@@ -0,0 +1,326 @@
+import type { CanvasElement } from '../types';
+
+/**
+ * Bounding box with center point
+ */
+export interface BoundingBox {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    cx: number;
+    cy: number;
+}
+
+/**
+ * Manages element selection state and UI.
+ *
+ * Provides:
+ * - Single and multi-selection tracking
+ * - Group selection (all members selected together)
+ * - Selection box (lasso) rendering
+ * - Group bounding box calculations
+ * - Selection change events
+ */
+export class SelectionManager {
+    private selectedElementIds: Set<string> = new Set();
+    private selectionBox: HTMLElement | null = null;
+    private groupBox: HTMLElement;
+    private canvas: HTMLElement;
+    private container: HTMLElement;
+    private findElementById: (id: string) => CanvasElement | undefined;
+    private getElements: () => CanvasElement[];
+    private onSelectionChange?: (selectedIds: Set<string>) => void;
+
+    /**
+     * Creates a new SelectionManager
+     *
+     * @param canvas - The canvas DOM element
+     * @param container - The container DOM element
+     * @param findElementById - Function to find elements by ID
+     * @param getElements - Function to get all elements
+     * @param onSelectionChange - Optional callback when selection changes
+     */
+    constructor(
+        canvas: HTMLElement,
+        container: HTMLElement,
+        findElementById: (id: string) => CanvasElement | undefined,
+        getElements: () => CanvasElement[],
+        onSelectionChange?: (selectedIds: Set<string>) => void
+    ) {
+        this.canvas = canvas;
+        this.container = container;
+        this.findElementById = findElementById;
+        this.getElements = getElements;
+        this.onSelectionChange = onSelectionChange;
+
+        // Create group box element
+        this.groupBox = document.createElement('div');
+        this.groupBox.id = 'group-box';
+        this.groupBox.innerHTML = `
+  <div class="box"></div>
+  <div class="element-handle resize-handle"><i class="fa-solid fa-up-right-and-down-left-from-center"></i></div>
+  <div class="element-handle rotate-handle"><i class="fa-solid fa-rotate"></i></div>
+  <div class="element-handle scale-handle"><i class="fa-solid fa-up-down-left-right"></i></div>`;
+        this.container.appendChild(this.groupBox);
+        this.groupBox.style.display = 'none';
+    }
+
+    /**
+     * Select an element (or group of elements)
+     *
+     * @param id - Element ID to select
+     * @param additive - If true, adds to current selection; if false, replaces selection
+     */
+    selectElement(id: string, additive: boolean = false): void {
+        if (!additive) {
+            this.selectedElementIds.clear();
+        }
+
+        console.log("[SelectionManager] selectElement", id, { additive });
+
+        const el = this.findElementById(id);
+        if (el?.group) {
+            // Pull in every element with the same group ID
+            const gid = el.group;
+            this.getElements()
+                .filter(e => e.group === gid)
+                .forEach(e => this.selectedElementIds.add(e.id));
+        } else {
+            // Fall back to single-element toggle
+            if (this.selectedElementIds.has(id) && additive) {
+                this.selectedElementIds.delete(id);
+            } else {
+                this.selectedElementIds.add(id);
+            }
+        }
+
+        this.updateGroupBox();
+        this._notifyChange();
+    }
+
+    /**
+     * Clear all selections
+     */
+    clearSelection(): void {
+        if (this.selectedElementIds.size > 0) {
+            this.selectedElementIds.clear();
+            this.updateGroupBox();
+            this._notifyChange();
+        }
+    }
+
+    /**
+     * Check if an element is selected
+     *
+     * @param id - Element ID to check
+     * @returns True if element is selected
+     */
+    isElementSelected(id: string): boolean {
+        return this.selectedElementIds.has(id);
+    }
+
+    /**
+     * Get all selected element IDs
+     * IMPORTANT: Returns the actual mutable Set for backward compatibility.
+     * External code may call .add()/.delete()/.clear() directly.
+     * After mutating, call notifySelectionChanged() to update UI.
+     */
+    getSelectedIds(): Set<string> {
+        return this.selectedElementIds;
+    }
+
+    /**
+     * Notify that selectedElementIds was mutated externally.
+     * Call this after directly mutating the Set.
+     */
+    notifySelectionChanged(): void {
+        this.updateGroupBox();
+        this._notifyChange();
+    }
+
+    /**
+     * Get the single selected element ID (legacy compatibility)
+     */
+    getSingleSelectedId(): string | null {
+        return this.selectedElementIds.size === 1 ? [...this.selectedElementIds][0] : null;
+    }
+
+    /**
+     * Set selected element IDs directly
+     *
+     * @param ids - Set of element IDs to select
+     */
+    setSelectedIds(ids: Set<string>): void {
+        this.selectedElementIds = new Set(ids);
+        this.updateGroupBox();
+        this._notifyChange();
+    }
+
+    /**
+     * Calculate bounding box for all selected elements
+     *
+     * @returns Bounding box or null if no elements selected
+     */
+    getGroupBBox(): BoundingBox | null {
+        if (this.selectedElementIds.size === 0) return null;
+
+        const els = [...this.selectedElementIds]
+            .map(id => this.findElementById(id))
+            .filter(el => el !== undefined) as CanvasElement[];
+
+        if (els.length === 0) return null;
+
+        // Calculate corners for each element considering rotation
+        const allCorners: { x: number; y: number }[] = [];
+
+        els.forEach(el => {
+            const scaleFactor = el.scale || 1;
+            const halfW = (el.width * scaleFactor) / 2;
+            const halfH = (el.height * scaleFactor) / 2;
+            const cx = el.x;
+            const cy = el.y;
+            const theta = ((el.rotation || 0) * Math.PI) / 180;
+            const cosθ = Math.cos(theta);
+            const sinθ = Math.sin(theta);
+
+            // Calculate the four corners of the rotated rectangle
+            const corners = [
+                { x: -halfW, y: -halfH }, // top-left
+                { x: halfW, y: -halfH },  // top-right
+                { x: halfW, y: halfH },   // bottom-right
+                { x: -halfW, y: halfH }   // bottom-left
+            ].map(pt => {
+                // Rotate point
+                const rx = pt.x * cosθ - pt.y * sinθ;
+                const ry = pt.x * sinθ + pt.y * cosθ;
+                // Translate to element position
+                return { x: cx + rx, y: cy + ry };
+            });
+
+            allCorners.push(...corners);
+        });
+
+        // Find min/max coordinates from all corners
+        const xs = allCorners.map(pt => pt.x);
+        const ys = allCorners.map(pt => pt.y);
+
+        return {
+            x1: Math.min(...xs),
+            y1: Math.min(...ys),
+            x2: Math.max(...xs),
+            y2: Math.max(...ys),
+            cx: (Math.min(...xs) + Math.max(...xs)) / 2,
+            cy: (Math.min(...ys) + Math.max(...ys)) / 2
+        };
+    }
+
+    /**
+     * Update the group box visual representation
+     */
+    updateGroupBox(): void {
+        if (this.selectedElementIds.size < 2) {
+            this.groupBox.style.display = 'none';
+            this.canvas.classList.remove('group-selected');
+            return;
+        }
+
+        const bb = this.getGroupBBox();
+        if (!bb) {
+            this.groupBox.style.display = 'none';
+            this.canvas.classList.remove('group-selected');
+            return;
+        }
+
+        this.canvas.classList.add('group-selected');
+
+        this.groupBox.style.display = 'block';
+        this.groupBox.style.left = bb.x1 + 'px';
+        this.groupBox.style.top = bb.y1 + 'px';
+        this.groupBox.style.width = (bb.x2 - bb.x1) + 'px';
+        this.groupBox.style.height = (bb.y2 - bb.y1) + 'px';
+    }
+
+    /**
+     * Create a selection box (lasso) at the starting coordinates
+     *
+     * @param startX - Starting X coordinate (canvas space)
+     * @param startY - Starting Y coordinate (canvas space)
+     */
+    createSelectionBox(startX: number, startY: number): void {
+        this.selectionBox = document.createElement('div');
+        this.selectionBox.id = 'lasso-box';
+        Object.assign(this.selectionBox.style, {
+            position: 'absolute',
+            border: '1px dashed #00aaff',
+            background: 'rgba(0,170,255,0.05)',
+            left: `${startX}px`,
+            top: `${startY}px`,
+            width: '0px',
+            height: '0px',
+            zIndex: '10000',
+            pointerEvents: 'none'
+        });
+        this.canvas.appendChild(this.selectionBox);
+    }
+
+    /**
+     * Update the selection box dimensions
+     *
+     * @param startX - Starting X coordinate
+     * @param startY - Starting Y coordinate
+     * @param curX - Current X coordinate
+     * @param curY - Current Y coordinate
+     */
+    updateSelectionBox(startX: number, startY: number, curX: number, curY: number): void {
+        if (!this.selectionBox) {
+            this.createSelectionBox(startX, startY);
+        }
+
+        const x = Math.min(startX, curX);
+        const y = Math.min(startY, curY);
+        const w = Math.abs(curX - startX);
+        const h = Math.abs(curY - startY);
+
+        Object.assign(this.selectionBox!.style, {
+            left: `${x}px`,
+            top: `${y}px`,
+            width: `${w}px`,
+            height: `${h}px`
+        });
+    }
+
+    /**
+     * Remove the selection box
+     */
+    removeSelectionBox(): void {
+        if (this.selectionBox) {
+            this.selectionBox.remove();
+            this.selectionBox = null;
+        }
+    }
+
+    /**
+     * Get the group box element for handle attachment
+     */
+    getGroupBoxElement(): HTMLElement {
+        return this.groupBox;
+    }
+
+    /**
+     * Cleanup when destroying the manager
+     */
+    destroy(): void {
+        this.removeSelectionBox();
+        this.groupBox.remove();
+    }
+
+    /**
+     * Notify listeners of selection change
+     */
+    private _notifyChange(): void {
+        if (this.onSelectionChange) {
+            this.onSelectionChange(this.getSelectedIds());
+        }
+    }
+}
diff --git a/src/services/ViewportManager.ts b/src/services/ViewportManager.ts
new file mode 100644
index 0000000..0006419
--- /dev/null
+++ b/src/services/ViewportManager.ts
@@ -0,0 +1,270 @@
+import type { ViewState, CanvasElement } from "../types";
+
+/**
+ * Manages viewport state and transformations.
+ *
+ * Provides:
+ * - View state (scale, translate) management
+ * - Coordinate transformations (screen ↔ canvas)
+ * - Viewport persistence via localStorage
+ * - Element recentering operations
+ */
+export class ViewportManager {
+  private viewState: ViewState;
+  private canvas: HTMLElement;
+  private container: HTMLElement;
+  private edgesLayer: SVGSVGElement;
+  private canvasId: string;
+  private findElementById: (id: string) => CanvasElement | undefined;
+  private onTransformChange?: () => void;
+
+  readonly MAX_SCALE: number = 10;
+  readonly MIN_SCALE: number = 0.1;
+
+  /**
+   * Creates a new ViewportManager
+   *
+   * @param canvas - The canvas DOM element
+   * @param container - The container DOM element for transforms
+   * @param edgesLayer - The SVG layer for edges
+   * @param canvasId - Canvas identifier for localStorage key
+   * @param findElementById - Function to find elements by ID
+   * @param initialViewState - Optional initial view state
+   * @param onTransformChange - Optional callback when transform changes
+   */
+  constructor(
+    canvas: HTMLElement,
+    container: HTMLElement,
+    edgesLayer: SVGSVGElement,
+    canvasId: string,
+    findElementById: (id: string) => CanvasElement | undefined,
+    initialViewState?: ViewState,
+    onTransformChange?: () => void,
+  ) {
+    this.canvas = canvas;
+    this.container = container;
+    this.edgesLayer = edgesLayer;
+    this.canvasId = canvasId;
+    this.findElementById = findElementById;
+    this.onTransformChange = onTransformChange;
+
+    this.viewState = initialViewState || {
+      scale: 1,
+      translateX: 0,
+      translateY: 0,
+    };
+
+    // Load saved view state if available
+    this.loadLocalViewState();
+  }
+
+  /**
+   * Get current view state
+   * IMPORTANT: Returns the actual mutable reference for backward compatibility.
+   * External code may mutate viewState.translateX/Y/scale directly.
+   * After mutating, call notifyViewStateChanged() to update the canvas.
+   */
+  getViewState(): ViewState {
+    return this.viewState;
+  }
+
+  /**
+   * Set view state
+   * IMPORTANT: Mutates the existing viewState object to maintain reference equality.
+   */
+  setViewState(state: Partial<ViewState>): void {
+    // Mutate in place to maintain reference equality
+    Object.assign(this.viewState, state);
+    this.updateCanvasTransform();
+    this.saveLocalViewState();
+  }
+
+  /**
+   * Notify that viewState was mutated externally.
+   * Call this after directly mutating viewState properties.
+   */
+  notifyViewStateChanged(): void {
+    this.updateCanvasTransform();
+    this.saveLocalViewState();
+  }
+
+  /**
+   * Convert screen coordinates to canvas coordinates
+   *
+   * @param px - Screen X coordinate
+   * @param py - Screen Y coordinate
+   * @returns Canvas coordinates
+   */
+  screenToCanvas(px: number, py: number): { x: number; y: number } {
+    const dx = px - this.canvas.offsetLeft;
+    const dy = py - this.canvas.offsetTop;
+    return {
+      x: (dx - this.viewState.translateX) / this.viewState.scale,
+      y: (dy - this.viewState.translateY) / this.viewState.scale,
+    };
+  }
+
+  /**
+   * Recenter the viewport on a specific element
+   *
+   * @param elId - Element ID to center on
+   */
+  recenterOnElement(elId: string): void {
+    const el = this.findElementById(elId);
+    if (!el) {
+      console.warn(`Element with ID "${elId}" not found.`);
+      return;
+    }
+
+    // Compute the center of the element in canvas coordinates
+    const scale = this.viewState.scale || 1;
+    const elCenterX = el.x;
+    const elCenterY = el.y;
+
+    // Get canvas size in pixels
+    const canvasRect = this.canvas.getBoundingClientRect();
+    const canvasCenterX = canvasRect.width / 2;
+    const canvasCenterY = canvasRect.height / 2;
+
+    // Compute new translation to center the element
+    this.viewState.translateX = canvasCenterX - elCenterX * scale;
+    this.viewState.translateY = canvasCenterY - elCenterY * scale;
+
+    this.updateCanvasTransform();
+    this.saveLocalViewState();
+  }
+
+  /**
+   * Load view state from localStorage
+   */
+  loadLocalViewState(): void {
+    try {
+      const key = "canvasViewState_" + this.canvasId;
+      const saved = localStorage.getItem(key);
+      if (saved) {
+        const vs = JSON.parse(saved);
+        this.viewState.scale = vs.scale || 1;
+        this.viewState.translateX = vs.translateX || 0;
+        this.viewState.translateY = vs.translateY || 0;
+      }
+    } catch (e) {
+      console.warn("No local viewState found", e);
+    }
+  }
+
+  /**
+   * Save view state to localStorage
+   */
+  saveLocalViewState(): void {
+    try {
+      const key = "canvasViewState_" + this.canvasId;
+      localStorage.setItem(key, JSON.stringify(this.viewState));
+    } catch (e) {
+      console.warn("Could not store local viewState", e);
+    }
+  }
+
+  /**
+   * Update the canvas transform based on current view state
+   */
+  updateCanvasTransform(): void {
+    // Apply transform to container
+    this.container.style.transform = `translate(${this.viewState.translateX}px, ${this.viewState.translateY}px) scale(${this.viewState.scale})`;
+    this.container.style.setProperty(
+      "--translateX",
+      String(this.viewState.translateX),
+    );
+    this.container.style.setProperty(
+      "--translateY",
+      String(this.viewState.translateY),
+    );
+    this.container.style.setProperty("--zoom", String(this.viewState.scale));
+
+    // Get the canvas (visible) size
+    const canvasRect = this.canvas.getBoundingClientRect();
+    const W = canvasRect.width;
+    const H = canvasRect.height;
+
+    // Compute the visible region in canvas coordinates
+    const visibleX = -this.viewState.translateX / this.viewState.scale;
+    const visibleY = -this.viewState.translateY / this.viewState.scale;
+    const visibleWidth = W / this.viewState.scale;
+    const visibleHeight = H / this.viewState.scale;
+
+    // Set the viewBox attribute on the SVG layer so that its coordinate system
+    // matches the visible region
+    this.edgesLayer.setAttribute(
+      "viewBox",
+      `${String(visibleX)} ${String(visibleY)} ${String(visibleWidth)} ${String(visibleHeight)}`,
+    );
+
+    // Notify listeners of transform change
+    if (this.onTransformChange) {
+      this.onTransformChange();
+    }
+  }
+
+  /**
+   * Pan the viewport by delta amounts
+   *
+   * @param dx - Delta X in screen pixels
+   * @param dy - Delta Y in screen pixels
+   */
+  pan(dx: number, dy: number): void {
+    this.viewState.translateX += dx;
+    this.viewState.translateY += dy;
+    this.updateCanvasTransform();
+    this.saveLocalViewState();
+  }
+
+  /**
+   * Zoom the viewport
+   *
+   * @param scaleDelta - Amount to scale by (multiplier)
+   * @param centerX - Optional X coordinate to zoom towards (screen coords)
+   * @param centerY - Optional Y coordinate to zoom towards (screen coords)
+   */
+  zoom(scaleDelta: number, centerX?: number, centerY?: number): void {
+    const newScale = Math.max(
+      this.MIN_SCALE,
+      Math.min(this.MAX_SCALE, this.viewState.scale * scaleDelta),
+    );
+
+    if (centerX !== undefined && centerY !== undefined) {
+      // Zoom towards a specific point
+      const canvasPt = this.screenToCanvas(centerX, centerY);
+      this.viewState.scale = newScale;
+      const newScreenPt = {
+        x:
+          canvasPt.x * newScale +
+          this.viewState.translateX +
+          this.canvas.offsetLeft,
+        y:
+          canvasPt.y * newScale +
+          this.viewState.translateY +
+          this.canvas.offsetTop,
+      };
+      this.viewState.translateX += centerX - newScreenPt.x;
+      this.viewState.translateY += centerY - newScreenPt.y;
+    } else {
+      // Simple zoom
+      this.viewState.scale = newScale;
+    }
+
+    this.updateCanvasTransform();
+    this.saveLocalViewState();
+  }
+
+  /**
+   * Reset viewport to default state
+   */
+  reset(): void {
+    this.viewState = {
+      scale: 1,
+      translateX: 0,
+      translateY: 0,
+    };
+    this.updateCanvasTransform();
+    this.saveLocalViewState();
+  }
+}
diff --git a/src/services/renderers/EdgeRenderer.ts b/src/services/renderers/EdgeRenderer.ts
new file mode 100644
index 0000000..2e8d946
--- /dev/null
+++ b/src/services/renderers/EdgeRenderer.ts
@@ -0,0 +1,176 @@
+import type { Edge, CanvasElement } from '../../types.ts';
+import { GeometryUtils } from '../utils/GeometryUtils.ts';
+
+/**
+ * EdgeRenderer
+ *
+ * Handles rendering of edges (connections between elements) to SVG.
+ * Responsible for:
+ * - SVG line management
+ * - Arrowhead markers
+ * - Edge label positioning
+ * - Edge intersection calculations
+ */
+export class EdgeRenderer {
+    private edgeNodesMap: Record<string, SVGLineElement>;
+    private edgeLabelNodesMap: Record<string, SVGTextElement>;
+    private edgesLayer: SVGSVGElement;
+    private controller: any; // Reference to CanvasController for state access
+
+    constructor(edgesLayer: SVGSVGElement, controller: any) {
+        this.edgeNodesMap = {};
+        this.edgeLabelNodesMap = {};
+        this.edgesLayer = edgesLayer;
+        this.controller = controller;
+    }
+
+    /**
+     * Render all edges in the canvas state
+     */
+    renderEdges(edges: Edge[]): void {
+        // Ensure SVG marker for arrowheads exists
+        this.ensureArrowheadMarker();
+
+        // Render each edge
+        edges.forEach(edge => {
+            let line = this.edgeNodesMap[edge.id];
+            if (!line) {
+                line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+                line.setAttribute("stroke", edge.style?.color || "#ccc");
+                line.setAttribute("stroke-width", edge.style?.thickness || "2");
+                line.setAttribute("marker-end", "url(#arrowhead)");
+                this.edgeNodesMap[edge.id] = line;
+                this.edgesLayer.appendChild(line);
+            }
+            this.updateEdgePosition(edge, line);
+        });
+
+        // Remove orphaned edge lines
+        Object.keys(this.edgeNodesMap).forEach(edgeId => {
+            if (!edges.find(e => e.id === edgeId)) {
+                console.log(`[DEBUG] Deleting orphaned edge node`, edgeId, this.edgeNodesMap[edgeId]);
+                this.edgeNodesMap[edgeId].remove();
+                delete this.edgeNodesMap[edgeId];
+            }
+        });
+
+        // Remove orphaned edge labels
+        Object.keys(this.edgeLabelNodesMap).forEach(edgeId => {
+            if (!edges.find(e => e.id === edgeId)) {
+                console.log(`[DEBUG] Deleting orphaned edge label`, edgeId, this.edgeLabelNodesMap[edgeId]);
+                this.edgeLabelNodesMap[edgeId].remove();
+                delete this.edgeLabelNodesMap[edgeId];
+            }
+        });
+    }
+
+    /**
+     * Ensure the SVG arrowhead marker exists
+     */
+    private ensureArrowheadMarker(): void {
+        let defs = this.edgesLayer.querySelector("defs");
+        if (!defs) {
+            defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+            this.edgesLayer.prepend(defs);
+        }
+        if (!defs.querySelector("#arrowhead")) {
+            const marker = document.createElementNS("http://www.w3.org/2000/svg", "marker");
+            marker.setAttribute("id", "arrowhead");
+            marker.setAttribute("markerWidth", "10");
+            marker.setAttribute("markerHeight", "7");
+            marker.setAttribute("refX", "10");
+            marker.setAttribute("refY", "3.5");
+            marker.setAttribute("orient", "auto");
+            const arrowPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
+            arrowPath.setAttribute("d", "M0,0 L0,7 L10,3.5 Z");
+            arrowPath.setAttribute("fill", "#ccc");
+            marker.appendChild(arrowPath);
+            defs.appendChild(marker);
+        }
+    }
+
+    /**
+     * Update the position of an edge line and label
+     */
+    private updateEdgePosition(edge: Edge, line: SVGLineElement): void {
+        if (!line) return;
+
+        const sourceEl = this.controller.findElementById(edge.source);
+        const targetEl = this.controller.findElementById(edge.target);
+        const sourceEdge = sourceEl ? null : this.controller.findEdgeElementById(edge.source);
+        const targetEdge = targetEl ? null : this.controller.findEdgeElementById(edge.target);
+
+        let sourcePoint, targetPoint;
+        if ((sourceEl || sourceEdge) && (targetEl || targetEdge)) {
+            sourcePoint = GeometryUtils.computeIntersection(
+                sourceEl || {
+                    x: parseFloat(this.edgeLabelNodesMap[edge.source]?.getAttribute("x") || "0"),
+                    y: parseFloat(this.edgeLabelNodesMap[edge.source]?.getAttribute("y") || "0")
+                },
+                targetEl || {
+                    x: parseFloat(this.edgeLabelNodesMap[edge.target]?.getAttribute("x") || "0"),
+                    y: parseFloat(this.edgeLabelNodesMap[edge.target]?.getAttribute("y") || "0")
+                }
+            );
+            targetPoint = GeometryUtils.computeIntersection(
+                targetEl || {
+                    x: parseFloat(this.edgeLabelNodesMap[edge.target]?.getAttribute("x") || "0"),
+                    y: parseFloat(this.edgeLabelNodesMap[edge.target]?.getAttribute("y") || "0")
+                },
+                sourceEl || {
+                    x: parseFloat(this.edgeLabelNodesMap[edge.source]?.getAttribute("x") || "0"),
+                    y: parseFloat(this.edgeLabelNodesMap[edge.source]?.getAttribute("y") || "0")
+                }
+            );
+        }
+
+        if (sourcePoint && targetPoint) {
+            line.setAttribute("x1", String(sourcePoint.x));
+            line.setAttribute("y1", String(sourcePoint.y));
+            line.setAttribute("x2", String(targetPoint.x));
+            line.setAttribute("y2", String(targetPoint.y));
+            line.setAttribute("stroke-dasharray", edge.data?.meta ? "5,5" : edge.style?.dash || "");
+
+            // Handle edge label
+            const labelText = edge.label ? edge.label : "Edge";
+            let textEl = this.edgeLabelNodesMap[edge.id];
+            if (!textEl) {
+                textEl = document.createElementNS("http://www.w3.org/2000/svg", "text");
+                textEl.setAttribute("text-anchor", "middle");
+                textEl.setAttribute("data-id", edge.id);
+                textEl.setAttribute("alignment-baseline", "middle");
+                textEl.setAttribute("fill", "#000");
+                textEl.style.fontSize = "12px";
+                if (this.controller.selectedElementId === edge.id) {
+                    textEl.style.fill = "red";
+                }
+                this.edgeLabelNodesMap[edge.id] = textEl;
+                this.edgesLayer.appendChild(textEl);
+            }
+            // Calculate midpoint of the line
+            const midX = (sourcePoint.x + targetPoint.x) / 2;
+            const midY = (sourcePoint.y + targetPoint.y) / 2;
+            textEl.setAttribute("x", String(midX));
+            textEl.setAttribute("y", String(midY));
+            textEl.textContent = labelText;
+        } else {
+            // If source or target missing, remove the edge
+            this.controller.canvasState.edges = this.controller.canvasState.edges.filter(ed => ed.id !== edge.id);
+            line.remove();
+        }
+    }
+
+    /**
+     * Get the edge nodes map (for external access)
+     */
+    getEdgeNodesMap(): Record<string, SVGLineElement> {
+        return this.edgeNodesMap;
+    }
+
+    /**
+     * Get the edge label nodes map (for external access)
+     */
+    getEdgeLabelNodesMap(): Record<string, SVGTextElement> {
+        return this.edgeLabelNodesMap;
+    }
+}
diff --git a/src/services/renderers/ElementRenderer.ts b/src/services/renderers/ElementRenderer.ts
new file mode 100644
index 0000000..a231eeb
--- /dev/null
+++ b/src/services/renderers/ElementRenderer.ts
@@ -0,0 +1,244 @@
+import type { CanvasElement } from '../../types.ts';
+import { componentRegistry, type BaseElementComponent } from '../../components/index.ts';
+
+/**
+ * ElementRenderer
+ *
+ * Handles rendering of canvas elements to DOM nodes.
+ * Uses new component system when available, falls back to legacy for compatibility.
+ * Responsible for:
+ * - DOM node creation and lifecycle
+ * - Content rendering delegation
+ * - Position/transform application
+ * - Handle rendering (resize, rotate, etc.)
+ */
+export class ElementRenderer {
+    private elementRegistry: any;
+    private elementNodesMap: Record<string, HTMLElement>;
+    private componentInstances: Map<string, BaseElementComponent>; // Track component instances
+    private container: HTMLElement;
+    private staticContainer: HTMLElement;
+    private controller: any; // Reference to CanvasController for callbacks
+
+    constructor(
+        elementRegistry: any,
+        container: HTMLElement,
+        staticContainer: HTMLElement,
+        controller: any
+    ) {
+        this.elementRegistry = elementRegistry;
+        this.elementNodesMap = {};
+        this.componentInstances = new Map();
+        this.container = container;
+        this.staticContainer = staticContainer;
+        this.controller = controller;
+    }
+
+    /**
+     * Render all elements in the canvas state
+     */
+    renderElements(elements: CanvasElement[], selectedIds: Set<string>): void {
+        const existingIds = new Set(Object.keys(this.elementNodesMap));
+        const usedIds = new Set();
+
+        elements.forEach(el => {
+            usedIds.add(el.id);
+            let node = this.elementNodesMap[el.id];
+            if (!node) {
+                node = this.ensureDomFor(el);
+                (el.static ? this.staticContainer : this.container).appendChild(node);
+                this.elementNodesMap[el.id] = node;
+            }
+            const isSel = selectedIds.has(el.id);
+            this.updateElementNode(node, el, isSel);
+        });
+
+        // Remove orphaned nodes
+        existingIds.forEach(id => {
+            if (!usedIds.has(id)) {
+                const node = this.elementNodesMap[id];
+
+                // Unmount component if using new system
+                const component = this.componentInstances.get(id);
+                if (component) {
+                    component.unmount();
+                    this.componentInstances.delete(id);
+                } else {
+                    // Fallback to legacy view unmount
+                    const view = this.elementRegistry.viewFor(node?.dataset.type);
+                    view?.unmount?.(node.firstChild as HTMLElement);
+                }
+
+                node.remove();
+                delete this.elementNodesMap[id];
+            }
+        });
+    }
+
+    /**
+     * Ensure a DOM node exists for an element
+     */
+    private ensureDomFor(el: CanvasElement): HTMLElement {
+        let node = this.elementNodesMap[el.id];
+        if (node) return node;
+
+        node = document.createElement('div');
+        node.classList.add('canvas-element');
+        node.dataset.elId = el.id;
+        node.dataset.type = el.type;
+
+        // Try new component system first
+        const component = componentRegistry.createElementComponent(el, {
+            controller: this.controller,
+            requestRender: () => this.controller.requestRender()
+        });
+
+        if (component) {
+            // Use new component system
+            const inner = component.mount();
+            inner && node.appendChild(inner);
+            this.componentInstances.set(el.id, component);
+        } else {
+            // Fallback to legacy view system
+            const view = this.elementRegistry.viewFor(el.type);
+            if (view) {
+                const inner = view.mount(el, this.controller);
+                inner && node.appendChild(inner);
+            } else {
+                // Final fallback to controller's legacy content rendering
+                this.controller.setElementContent(node, el);
+            }
+        }
+
+        this.elementNodesMap[el.id] = node;
+        return node;
+    }
+
+    /**
+     * Update an element's DOM node
+     */
+    private updateElementNode(node: HTMLElement, el: CanvasElement, isSelected: boolean, skipHandles?: boolean): void {
+        // Update CRDT
+        this.controller.crdt.updateElement(el.id, el);
+
+        // Update content: try component system first, then legacy
+        const component = this.componentInstances.get(el.id);
+        if (component) {
+            // Use new component system
+            component.update(el);
+        } else {
+            // Fallback to legacy view system
+            const view = this.elementRegistry.viewFor(el.type);
+            if (view && typeof view.update === 'function') {
+                view.update(el, node.firstChild, this.controller);
+            } else {
+                this.controller.setElementContent(node, el);
+            }
+        }
+
+        // Apply positioning
+        this.applyPositionStyles(node, el);
+        node.setAttribute("type", el.type);
+
+        // Handle selection state
+        node.classList.remove("selected");
+        if (isSelected) {
+            node.classList.add("selected");
+        }
+
+        // Handle peer selection state
+        const peerSelected = Array.from((this.controller.crdt as any).provider?.awareness?.getStates?.()?.values?.() || [])
+            .filter((p: any) => p.client?.clientId !== (this.controller.crdt as any).provider?.awareness?.clientID)
+            .flatMap((p: any) => p.client?.selection || []);
+
+        if (peerSelected.indexOf(el.id) >= 0) {
+            node.classList.add("peer-selected");
+        } else {
+            node.classList.remove("peer-selected");
+        }
+
+        // Build handles if selected
+        if (!skipHandles) {
+            const oldHandles = Array.from(node.querySelectorAll('.element-handle'));
+            oldHandles.forEach(h => h.remove());
+            if (isSelected) {
+                this.buildHandles(node, el);
+            }
+        }
+    }
+
+    /**
+     * Apply CSS positioning and transforms to an element node
+     */
+    private applyPositionStyles(node: HTMLElement, el: CanvasElement): void {
+        const scale = el.scale || 1;
+        const rotation = el.rotation || 0;
+        const zIndex = Math.floor(el.zIndex) || 1;
+        const blendMode = el.blendMode || 'normal';
+
+        node.style.setProperty('--blend-mode', blendMode);
+
+        if (el.static) {
+            node.style.position = 'fixed';
+            node.style.left = (el.fixedLeft || 0) + '%';
+            node.style.top = (el.fixedTop || 0) + '%';
+            node.style.setProperty('--translateX', String(this.controller.viewState.translateX));
+            node.style.setProperty('--translateY', String(this.controller.viewState.translateY));
+            node.style.setProperty('--zoom', String(this.controller.viewState.scale));
+            node.style.setProperty('--width', (el.width * scale) + 'px');
+            node.style.setProperty('--height', (el.height * scale) + 'px');
+            node.style.setProperty('--scale', String(scale));
+            node.style.zIndex = String(zIndex);
+            node.style.transform = `rotate(${rotation}deg) translate(calc(0px - var(--padding)), calc(0px - var(--padding)))`;
+        } else {
+            node.style.position = 'absolute';
+            node.style.left = (el.x - (el.width * scale) / 2) + "px";
+            node.style.top = (el.y - (el.height * scale) / 2) + "px";
+            node.style.setProperty('--width', (el.width * scale) + 'px');
+            node.style.setProperty('--height', (el.height * scale) + 'px');
+            node.style.setProperty('--scale', String(scale));
+            node.style.zIndex = String(zIndex);
+            node.style.transform = `rotate(${rotation}deg) translate(calc(0px - var(--padding)), calc(0px - var(--padding)))`;
+        }
+
+        // Trigger edge update when positioning changes
+        this.controller.requestEdgeUpdate();
+    }
+
+    /**
+     * Build interaction handles for selected elements
+     */
+    private buildHandles(node: HTMLElement, _el: CanvasElement): void {
+        const h = (className: string, icon: string, click?: (event: Event) => void) => {
+            const wrap = document.createElement('div');
+            wrap.className = className + ' element-handle';
+            const i = document.createElement('i');
+            i.className = icon;
+            wrap.appendChild(i);
+            if (click) wrap.addEventListener('click', click);
+            node.appendChild(wrap);
+        };
+
+        h('type-handle', 'fa-solid fa-font');
+        h('scale-handle', 'fa-solid fa-up-down-left-right');
+        h('reorder-handle', 'fa-solid fa-layer-group');
+        h('resize-handle', 'fa-solid fa-up-right-and-down-left-from-center');
+        h('rotate-handle rotate-handle-position', 'fa-solid fa-rotate');
+        h('edge-handle', 'fa-solid fa-link');
+        h('create-handle', 'fa-solid fa-plus');
+    }
+
+    /**
+     * Get the element nodes map (for external access)
+     */
+    getElementNodesMap(): Record<string, HTMLElement> {
+        return this.elementNodesMap;
+    }
+
+    /**
+     * Get a specific element node by ID
+     */
+    getElementNode(id: string): HTMLElement | undefined {
+        return this.elementNodesMap[id];
+    }
+}
diff --git a/src/services/renderers/RenderingPipeline.ts b/src/services/renderers/RenderingPipeline.ts
new file mode 100644
index 0000000..32d3e0c
--- /dev/null
+++ b/src/services/renderers/RenderingPipeline.ts
@@ -0,0 +1,100 @@
+import type { CanvasState } from '../../types.ts';
+import { ElementRenderer } from './ElementRenderer.ts';
+import { EdgeRenderer } from './EdgeRenderer.ts';
+
+/**
+ * RenderingPipeline
+ *
+ * Orchestrates the rendering of all canvas elements, edges, and selection UI.
+ * Provides a unified interface for triggering renders and manages the rendering lifecycle.
+ *
+ * Features:
+ * - Batched rendering (queued renders execute on next frame)
+ * - Separate renderers for elements and edges
+ * - Clear separation between rendering and state management
+ */
+export class RenderingPipeline {
+    private elementRenderer: ElementRenderer;
+    private edgeRenderer: EdgeRenderer;
+    private controller: any; // Reference to CanvasController
+    private _renderQueued: boolean = false;
+    private _edgesQueued: boolean = false;
+
+    constructor(
+        elementRenderer: ElementRenderer,
+        edgeRenderer: EdgeRenderer,
+        controller: any
+    ) {
+        this.elementRenderer = elementRenderer;
+        this.edgeRenderer = edgeRenderer;
+        this.controller = controller;
+    }
+
+    /**
+     * Request a full render of elements (batched via requestAnimationFrame)
+     */
+    requestRender(): void {
+        if (this._renderQueued) return;
+        this._renderQueued = true;
+        requestAnimationFrame(() => {
+            this._renderQueued = false;
+            this.renderElementsImmediately();
+        });
+    }
+
+    /**
+     * Request an edge update (batched via requestAnimationFrame)
+     */
+    requestEdgeUpdate(): void {
+        if (this._edgesQueued) return;
+        this._edgesQueued = true;
+        requestAnimationFrame(() => {
+            this._edgesQueued = false;
+            this.renderEdgesImmediately();
+        });
+    }
+
+    /**
+     * Render elements immediately (synchronous)
+     */
+    renderElementsImmediately(): void {
+        if ((this.controller.canvas as any).controller !== this.controller) return;
+        console.log(`requestRender()`);
+
+        const canvasState: CanvasState = this.controller.canvasState;
+        const selectedIds: Set<string> = this.controller.selectedElementIds;
+
+        // Delegate to ElementRenderer
+        this.elementRenderer.renderElements(canvasState.elements, selectedIds);
+
+        // Update selection group box
+        this.controller.selectionManager.updateGroupBox();
+
+        // Trigger edge update after elements render
+        this.requestEdgeUpdate();
+    }
+
+    /**
+     * Render edges immediately (synchronous)
+     */
+    renderEdgesImmediately(): void {
+        const canvasState: CanvasState = this.controller.canvasState;
+
+        // Delegate to EdgeRenderer
+        this.edgeRenderer.renderEdges(canvasState.edges);
+    }
+
+    /**
+     * Get the element renderer instance
+     */
+    getElementRenderer(): ElementRenderer {
+        return this.elementRenderer;
+    }
+
+    /**
+     * Get the edge renderer instance
+     */
+    getEdgeRenderer(): EdgeRenderer {
+        return this.edgeRenderer;
+    }
+}
diff --git a/src/services/utils/GeometryUtils.ts b/src/services/utils/GeometryUtils.ts
new file mode 100644
index 0000000..52e1227
--- /dev/null
+++ b/src/services/utils/GeometryUtils.ts
@@ -0,0 +1,134 @@
+/**
+ * GeometryUtils - Geometric calculations for canvas elements
+ *
+ * Provides pure functions for geometric calculations including
+ * edge intersection points and bounding box operations.
+ */
+
+import type { CanvasElement } from '../../types';
+
+export class GeometryUtils {
+  /**
+   * Compute intersection point on the edge of a rotated rectangle
+   *
+   * Given a rectangle (with rotation) and a direction vector to another point,
+   * this computes where the vector intersects the rectangle's edge.
+   *
+   * @param el Element or point with x, y coordinates
+   * @param otherEl Target element or point
+   * @returns Intersection point {x, y}
+   */
+  static computeIntersection(
+    el: CanvasElement | { x: number; y: number },
+    otherEl: CanvasElement | { x: number; y: number }
+  ): { x: number; y: number } {
+    // 1) Center and scale
+    const cx = el.x;
+    const cy = el.y;
+    const scaleFactor = ('scale' in el) ? (el.scale || 1) : 1;
+    const w = (('width' in el) ? (el.width || 10) : 10) * scaleFactor;
+    const h = (('height' in el) ? (el.height || 10) : 10) * scaleFactor;
+    const halfW = w / 2;
+    const halfH = h / 2;
+
+    // 2) Vector from el center to otherEl
+    let dx = otherEl.x - cx;
+    let dy = otherEl.y - cy;
+
+    // If same point, return center
+    if (dx === 0 && dy === 0) {
+      return { x: cx, y: cy };
+    }
+
+    // 3) Un-rotate the direction vector into the rectangle's local axes
+    const theta = ((('rotation' in el) ? (el.rotation || 0) : 0) * Math.PI) / 180;
+    const cosθ = Math.cos(-theta);
+    const sinθ = Math.sin(-theta);
+    const localDX = dx * cosθ - dy * sinθ;
+    const localDY = dx * sinθ + dy * cosθ;
+
+    // 4) Compute intersection on an axis-aligned box in local space
+    const scaleX = localDX !== 0 ? halfW / Math.abs(localDX) : Infinity;
+    const scaleY = localDY !== 0 ? halfH / Math.abs(localDY) : Infinity;
+    const scale = Math.min(scaleX, scaleY);
+
+    const localIX = localDX * scale;
+    const localIY = localDY * scale;
+
+    // 5) Rotate the intersection point back into world axes
+    const cosθf = Math.cos(theta);
+    const sinθf = Math.sin(theta);
+    const worldIX = localIX * cosθf - localIY * sinθf;
+    const worldIY = localIX * sinθf + localIY * cosθf;
+
+    // 6) Translate back to world coordinates
+    return {
+      x: cx + worldIX,
+      y: cy + worldIY
+    };
+  }
+
+  /**
+   * Calculate bounding box for a set of elements
+   *
+   * @param elements Array of canvas elements
+   * @returns Bounding box {x, y, width, height} or null if no elements
+   */
+  static calculateBoundingBox(elements: CanvasElement[]): { x: number; y: number; width: number; height: number } | null {
+    if (elements.length === 0) return null;
+
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+
+    for (const el of elements) {
+      const halfW = (el.width || 10) / 2;
+      const halfH = (el.height || 10) / 2;
+
+      minX = Math.min(minX, el.x - halfW);
+      minY = Math.min(minY, el.y - halfH);
+      maxX = Math.max(maxX, el.x + halfW);
+      maxY = Math.max(maxY, el.y + halfH);
+    }
+
+    return {
+      x: minX,
+      y: minY,
+      width: maxX - minX,
+      height: maxY - minY
+    };
+  }
+
+  /**
+   * Check if a point is within an element's bounds
+   *
+   * @param point Point {x, y}
+   * @param el Canvas element
+   * @returns True if point is inside element bounds
+   */
+  static pointInElement(point: { x: number; y: number }, el: CanvasElement): boolean {
+    const halfW = (el.width || 10) / 2;
+    const halfH = (el.height || 10) / 2;
+
+    return (
+      point.x >= el.x - halfW &&
+      point.x <= el.x + halfW &&
+      point.y >= el.y - halfH &&
+      point.y <= el.y + halfH
+    );
+  }
+
+  /**
+   * Calculate distance between two points
+   *
+   * @param p1 First point
+   * @param p2 Second point
+   * @returns Distance
+   */
+  static distance(p1: { x: number; y: number }, p2: { x: number; y: number }): number {
+    const dx = p2.x - p1.x;
+    const dy = p2.y - p1.y;
+    return Math.sqrt(dx * dx + dy * dy);
+  }
+}
diff --git a/tests/ComponentArchitecture.test.ts b/tests/ComponentArchitecture.test.ts
new file mode 100644
index 0000000..9cab2ac
--- /dev/null
+++ b/tests/ComponentArchitecture.test.ts
@@ -0,0 +1,316 @@
+/**
+ * Tests for Component Architecture
+ *
+ * Validates the new component-based element rendering system
+ */
+
+import {
+  componentRegistry,
+  TextElement,
+  MarkdownElement,
+  ImageElement,
+  HtmlElement,
+  JsonElement,
+} from '../src/components/index';
+import type { CanvasElement } from '../src/types';
+
+describe('ComponentRegistry', () => {
+  it('should have built-in element types registered', () => {
+    expect(componentRegistry.hasElementType('text')).toBe(true);
+    expect(componentRegistry.hasElementType('markdown')).toBe(true);
+    expect(componentRegistry.hasElementType('img')).toBe(true);
+    expect(componentRegistry.hasElementType('html')).toBe(true);
+    expect(componentRegistry.hasElementType('json')).toBe(true);
+  });
+
+  it('should create component instances for registered types', () => {
+    const mockElement: CanvasElement = {
+      id: 'test-1',
+      type: 'text',
+      x: 100,
+      y: 100,
+      width: 200,
+      height: 100,
+      content: 'Test content',
+      color: '#000000',
+      zIndex: 1,
+    };
+
+    const context = {
+      controller: {},
+      requestRender: jest.fn(),
+    };
+
+    const component = componentRegistry.createElementComponent(mockElement, context);
+    expect(component).toBeInstanceOf(TextElement);
+  });
+
+  it('should return null for unregistered element types', () => {
+    const mockElement: CanvasElement = {
+      id: 'test-1',
+      type: 'unknown-type',
+      x: 100,
+      y: 100,
+      width: 200,
+      height: 100,
+      content: 'Test',
+      color: '#000000',
+      zIndex: 1,
+    };
+
+    const context = {
+      controller: {},
+      requestRender: jest.fn(),
+    };
+
+    const component = componentRegistry.createElementComponent(mockElement, context);
+    expect(component).toBeNull();
+  });
+
+  it('should allow registration of custom element types', () => {
+    class CustomElement extends TextElement {}
+
+    componentRegistry.registerElementType('custom', CustomElement);
+    expect(componentRegistry.hasElementType('custom')).toBe(true);
+
+    const mockElement: CanvasElement = {
+      id: 'test-1',
+      type: 'custom',
+      x: 100,
+      y: 100,
+      width: 200,
+      height: 100,
+      content: 'Test',
+      color: '#000000',
+      zIndex: 1,
+    };
+
+    const context = {
+      controller: {},
+      requestRender: jest.fn(),
+    };
+
+    const component = componentRegistry.createElementComponent(mockElement, context);
+    expect(component).toBeInstanceOf(CustomElement);
+  });
+});
+
+describe('TextElement Component', () => {
+  let mockElement: CanvasElement;
+  let context: any;
+
+  beforeEach(() => {
+    mockElement = {
+      id: 'test-text',
+      type: 'text',
+      x: 100,
+      y: 100,
+      width: 200,
+      height: 100,
+      content: 'Hello World',
+      color: '#FF0000',
+      zIndex: 1,
+    };
+
+    context = {
+      controller: {},
+      requestRender: jest.fn(),
+    };
+  });
+
+  it('should mount and render text content', () => {
+    const component = new TextElement(mockElement, context);
+    const element = component.mount();
+
+    expect(element).toBeInstanceOf(HTMLElement);
+    expect(element.textContent).toBe('Hello World');
+  });
+
+  it('should apply color style', () => {
+    const component = new TextElement(mockElement, context);
+    const element = component.mount();
+
+    const paragraph = element.querySelector('p');
+    expect(paragraph?.style.color).toBe('rgb(255, 0, 0)');
+  });
+
+  it('should update content when data changes', () => {
+    const component = new TextElement(mockElement, context);
+    const element = component.mount();
+
+    const updatedElement = { ...mockElement, content: 'Updated Content' };
+    component.update(updatedElement);
+
+    expect(element.textContent).toBe('Updated Content');
+  });
+});
+
+describe('JsonElement Component', () => {
+  let mockElement: CanvasElement;
+  let context: any;
+
+  beforeEach(() => {
+    mockElement = {
+      id: 'test-json',
+      type: 'json',
+      x: 100,
+      y: 100,
+      width: 200,
+      height: 100,
+      content: '{"key": "value"}',
+      color: '#000000',
+      zIndex: 1,
+    };
+
+    context = {
+      controller: {},
+      requestRender: jest.fn(),
+    };
+  });
+
+  it('should mount and render JSON content', () => {
+    const component = new JsonElement(mockElement, context);
+    const element = component.mount();
+
+    expect(element).toBeInstanceOf(HTMLElement);
+    expect(element.querySelector('pre')).toBeTruthy();
+  });
+
+  it('should pretty-print valid JSON', () => {
+    const component = new JsonElement(mockElement, context);
+    const element = component.mount();
+
+    const pre = element.querySelector('pre');
+    expect(pre?.textContent).toContain('"key"');
+    expect(pre?.textContent).toContain('"value"');
+  });
+
+  it('should handle invalid JSON gracefully', () => {
+    const invalidElement = { ...mockElement, content: '{invalid json}' };
+    const component = new JsonElement(invalidElement, context);
+    const element = component.mount();
+
+    const pre = element.querySelector('pre');
+    expect(pre?.textContent).toBe('{invalid json}');
+    expect(pre?.style.borderLeft).toBeTruthy();
+  });
+});
+
+describe('HtmlElement Component', () => {
+  let mockElement: CanvasElement;
+  let context: any;
+
+  beforeEach(() => {
+    mockElement = {
+      id: 'test-html',
+      type: 'html',
+      x: 100,
+      y: 100,
+      width: 200,
+      height: 100,
+      content: '<div>Hello <strong>World</strong></div>',
+      color: '#000000',
+      zIndex: 1,
+    };
+
+    context = {
+      controller: {},
+      requestRender: jest.fn(),
+    };
+  });
+
+  it('should mount and render HTML content', () => {
+    const component = new HtmlElement(mockElement, context);
+    const element = component.mount();
+
+    expect(element).toBeInstanceOf(HTMLElement);
+    expect(element.querySelector('strong')?.textContent).toBe('World');
+  });
+
+  it('should execute scripts in HTML content', () => {
+    const scriptElement = {
+      ...mockElement,
+      content: '<div>Test</div><script>window.testScriptExecuted = true;</script>',
+    };
+
+    const component = new HtmlElement(scriptElement, context);
+    const element = component.mount();
+
+    // Script tags should be present in the DOM (execution happens when added to real document)
+    const scripts = element.querySelectorAll('script');
+    expect(scripts.length).toBeGreaterThan(0);
+
+    // Note: Scripts only execute when added to the actual document body
+    // In JSDOM test environment, we just verify the script tag is present
+  });
+
+  it('should reset script execution flag on content change', () => {
+    const component = new HtmlElement(mockElement, context);
+    const element = component.mount();
+
+    const updatedElement = { ...mockElement, content: '<div>New content</div><script>console.log("test");</script>' };
+    component.update(updatedElement);
+
+    // After update, scripts should be re-processed
+    const scripts = element.querySelectorAll('script');
+    expect(scripts.length).toBeGreaterThan(0);
+
+    // Verify content was actually updated
+    expect(element.textContent).toContain('New content');
+  });
+});
+
+describe('ImageElement Component', () => {
+  let mockElement: CanvasElement;
+  let context: any;
+
+  beforeEach(() => {
+    mockElement = {
+      id: 'test-img',
+      type: 'img',
+      x: 100,
+      y: 100,
+      width: 200,
+      height: 150,
+      content: 'https://example.com/image.jpg',
+      color: '#000000',
+      zIndex: 1,
+    };
+
+    context = {
+      controller: {},
+      requestRender: jest.fn(),
+    };
+  });
+
+  it('should mount and render image', () => {
+    const component = new ImageElement(mockElement, context);
+    const element = component.mount();
+
+    expect(element).toBeInstanceOf(HTMLElement);
+    const img = element.querySelector('img');
+    expect(img).toBeTruthy();
+  });
+
+  it('should use placeholder when no src provided', () => {
+    const noSrcElement = { ...mockElement, src: undefined };
+    const component = new ImageElement(noSrcElement, context);
+    const element = component.mount();
+
+    // Should use placeholder image service
+    const img = element.querySelector('img');
+    expect(img?.src).toContain('placehold.co');
+  });
+
+  it('should update src when data changes', () => {
+    const elementWithSrc = { ...mockElement, src: 'https://example.com/image.jpg' };
+    const component = new ImageElement(elementWithSrc, context);
+    const element = component.mount();
+
+    const updatedElement = { ...elementWithSrc, src: 'https://example.com/new-image.jpg' };
+    component.update(updatedElement);
+
+    const img = element.querySelector('img');
+    expect(img?.src).toBe('https://example.com/new-image.jpg');
+  });
+});
diff --git a/tests/EventBus.test.ts b/tests/EventBus.test.ts
new file mode 100644
index 0000000..ff76a8f
--- /dev/null
+++ b/tests/EventBus.test.ts
@@ -0,0 +1,225 @@
+import { EventBus, Events } from '../src/services/EventBus';
+
+describe('EventBus', () => {
+  let eventBus: EventBus;
+
+  beforeEach(() => {
+    eventBus = new EventBus();
+  });
+
+  afterEach(() => {
+    eventBus.clear();
+  });
+
+  describe('Basic Pub/Sub', () => {
+    it('should emit events to subscribed handlers', () => {
+      const handler = jest.fn();
+      eventBus.on('test:event', handler);
+
+      eventBus.emit('test:event', { data: 'test' });
+
+      expect(handler).toHaveBeenCalledWith({ data: 'test' });
+      expect(handler).toHaveBeenCalledTimes(1);
+    });
+
+    it('should support multiple handlers for same event', () => {
+      const handler1 = jest.fn();
+      const handler2 = jest.fn();
+
+      eventBus.on('test:event', handler1);
+      eventBus.on('test:event', handler2);
+
+      eventBus.emit('test:event', 'data');
+
+      expect(handler1).toHaveBeenCalledWith('data');
+      expect(handler2).toHaveBeenCalledWith('data');
+    });
+
+    it('should not call handlers for different events', () => {
+      const handler1 = jest.fn();
+      const handler2 = jest.fn();
+
+      eventBus.on('event:one', handler1);
+      eventBus.on('event:two', handler2);
+
+      eventBus.emit('event:one', 'data');
+
+      expect(handler1).toHaveBeenCalled();
+      expect(handler2).not.toHaveBeenCalled();
+    });
+
+    it('should emit events with no data', () => {
+      const handler = jest.fn();
+      eventBus.on('test:event', handler);
+
+      eventBus.emit('test:event');
+
+      expect(handler).toHaveBeenCalledWith(undefined);
+    });
+  });
+
+  describe('Unsubscribe', () => {
+    it('should unsubscribe via off method', () => {
+      const handler = jest.fn();
+      eventBus.on('test:event', handler);
+
+      eventBus.off('test:event', handler);
+      eventBus.emit('test:event');
+
+      expect(handler).not.toHaveBeenCalled();
+    });
+
+    it('should unsubscribe via subscription object', () => {
+      const handler = jest.fn();
+      const subscription = eventBus.on('test:event', handler);
+
+      subscription.unsubscribe();
+      eventBus.emit('test:event');
+
+      expect(handler).not.toHaveBeenCalled();
+    });
+
+    it('should only remove specific handler when multiple exist', () => {
+      const handler1 = jest.fn();
+      const handler2 = jest.fn();
+
+      eventBus.on('test:event', handler1);
+      eventBus.on('test:event', handler2);
+
+      eventBus.off('test:event', handler1);
+      eventBus.emit('test:event');
+
+      expect(handler1).not.toHaveBeenCalled();
+      expect(handler2).toHaveBeenCalled();
+    });
+  });
+
+  describe('Once', () => {
+    it('should only fire handler once', () => {
+      const handler = jest.fn();
+      eventBus.once('test:event', handler);
+
+      eventBus.emit('test:event', 'data1');
+      eventBus.emit('test:event', 'data2');
+
+      expect(handler).toHaveBeenCalledTimes(1);
+      expect(handler).toHaveBeenCalledWith('data1');
+    });
+
+    it('should allow manual unsubscribe before firing', () => {
+      const handler = jest.fn();
+      const subscription = eventBus.once('test:event', handler);
+
+      subscription.unsubscribe();
+      eventBus.emit('test:event');
+
+      expect(handler).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Clear', () => {
+    it('should clear all listeners for specific event', () => {
+      const handler1 = jest.fn();
+      const handler2 = jest.fn();
+
+      eventBus.on('event:one', handler1);
+      eventBus.on('event:two', handler2);
+
+      eventBus.clear('event:one');
+
+      eventBus.emit('event:one');
+      eventBus.emit('event:two');
+
+      expect(handler1).not.toHaveBeenCalled();
+      expect(handler2).toHaveBeenCalled();
+    });
+
+    it('should clear all listeners when no event specified', () => {
+      const handler1 = jest.fn();
+      const handler2 = jest.fn();
+
+      eventBus.on('event:one', handler1);
+      eventBus.on('event:two', handler2);
+
+      eventBus.clear();
+
+      eventBus.emit('event:one');
+      eventBus.emit('event:two');
+
+      expect(handler1).not.toHaveBeenCalled();
+      expect(handler2).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Utility Methods', () => {
+    it('should return listener count', () => {
+      const handler1 = jest.fn();
+      const handler2 = jest.fn();
+
+      expect(eventBus.listenerCount('test:event')).toBe(0);
+
+      eventBus.on('test:event', handler1);
+      expect(eventBus.listenerCount('test:event')).toBe(1);
+
+      eventBus.on('test:event', handler2);
+      expect(eventBus.listenerCount('test:event')).toBe(2);
+
+      eventBus.off('test:event', handler1);
+      expect(eventBus.listenerCount('test:event')).toBe(1);
+    });
+
+    it('should return all event names', () => {
+      eventBus.on('event:one', jest.fn());
+      eventBus.on('event:two', jest.fn());
+      eventBus.on('event:three', jest.fn());
+
+      const names = eventBus.eventNames();
+
+      expect(names).toContain('event:one');
+      expect(names).toContain('event:two');
+      expect(names).toContain('event:three');
+      expect(names.length).toBe(3);
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('should catch and log errors in handlers without stopping other handlers', () => {
+      const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
+      const handler1 = jest.fn(() => {
+        throw new Error('Test error');
+      });
+      const handler2 = jest.fn();
+
+      eventBus.on('test:event', handler1);
+      eventBus.on('test:event', handler2);
+
+      eventBus.emit('test:event');
+
+      expect(handler1).toHaveBeenCalled();
+      expect(handler2).toHaveBeenCalled();
+      expect(consoleSpy).toHaveBeenCalled();
+
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('Standard Events', () => {
+    it('should define standard event constants', () => {
+      expect(Events.ELEMENT_CREATED).toBe('element:created');
+      expect(Events.ELEMENT_UPDATED).toBe('element:updated');
+      expect(Events.SELECTION_CHANGED).toBe('selection:changed');
+      expect(Events.VIEWPORT_CHANGED).toBe('viewport:changed');
+      expect(Events.HISTORY_SNAPSHOT).toBe('history:snapshot');
+      expect(Events.RENDER_REQUESTED).toBe('render:requested');
+    });
+
+    it('should work with standard event constants', () => {
+      const handler = jest.fn();
+      eventBus.on(Events.ELEMENT_CREATED, handler);
+
+      eventBus.emit(Events.ELEMENT_CREATED, { id: 'test-123' });
+
+      expect(handler).toHaveBeenCalledWith({ id: 'test-123' });
+    });
+  });
+});