Interactive Coving Calculator with SVG Diagrams

[imharrisonking]

Summary

Create a standalone tool page for calculating crown molding/coving compound angles with fully interactive SVG diagrams. Users can adjust angles by dragging SVG elements directly or using shadcn UI controls, with real-time visual feedback in both 2D technical and 3D perspective views.

---

Motivation

When installing crown molding, users need to calculate compound miter and bevel angles based on:

• Spring angle (how the molding sits against the wall)
• Wall/corner angle (the angle between walls at the corner)

The Clerk currently provides mathematical formulas, but visual learners struggle to understand the relationship between these angles. An interactive calculator with visual diagrams will:

1. Reduce errors - Users see exactly what each angle represents
2. Improve comprehension - Visual feedback shows how changing one parameter affects the cut
3. Enable self-service - Users can experiment with angles without asking The Clerk
4. Support all skill levels - DIYers and tradespeople alike benefit from visual guidance

---

Goals

• Create a standalone /tools/coving-calculator route
• Implement 4 interactive SVG diagrams (Wall Angle, Spring Angle, Miter Angle, Bevel Angle)
• Support both direct SVG manipulation (drag) AND slider/input controls
• Toggle between 2D technical and 3D perspective views
• Show calculated angles prominently with expandable saw setup instructions
• Reusable calculator component that can later be embedded in Clerk chat or floor plan editor

---

Non-Goals

• Integration with floor plan editor (future enhancement)
• Clerk chat embedding (future enhancement)
• Mobile-first design (desktop-optimized for v1, functional on mobile)
• Vaulted ceiling calculations (Phase 2)
• Saving/sharing calculations (future enhancement)

---

Technical Approach

Architecture Overview

packages/web/src/
├── routes/tools/coving-calculator/           # Route folder
│   ├── page.tsx                               # Route page
│   └── _components/                           # Feature-specific components (co-located)
│       ├── CovingCalculator.tsx               # Main orchestrator component
│       ├── CalculatorControls.tsx             # Input controls (sliders, inputs, radios)
│       ├── DiagramContainer.tsx               # View toggle + SVG container
│       ├── diagrams/                          # Diagram components
│       │   ├── WallAngleDiagram.tsx           # Interactive wall corner diagram
│       │   ├── SpringAngleDiagram.tsx         # Molding cross-section diagram
│       │   ├── MiterAngleDiagram.tsx          # Saw miter setting diagram
│       │   ├── BevelAngleDiagram.tsx          # Saw bevel setting diagram
│       │   └── Corner3DView.tsx               # 3D perspective of corner
│       ├── CalculatorOutput.tsx               # Results display
│       └── SawSetupInstructions.tsx           # Expandable instructions
│
├── components/                                # Shared components (reusable across app)
│   ├── ui/                                    # shadcn components
│   └── diagrams/                              # Shared diagram components
│       ├── AngleArc.tsx                       # Reusable angle arc renderer
│       ├── DraggableHandle.tsx                # Draggable control point
│       ├── DimensionLabel.tsx                 # Measurement labels
│       └── MoldingProfile.tsx                 # Crown molding cross-section shape
│
├── hooks/                                     # Shared hooks (reusable across app)
│   └── useSvgDrag.ts                          # SVG drag handling (general purpose)
│
└── routes/tools/coving-calculator/
    └── _hooks/                                # Feature-specific hooks (co-located)
        └── useAngleCalculator.ts              # Core calculation logic

Component Breakdown

1. CovingCalculator.tsx (Main Orchestrator)

Responsibilities:

• Manages state for all angles (spring, wall, miter, bevel)
• Coordinates between controls and diagrams
• Handles bidirectional sync between drag and controls

State:

interface CalculatorState {
  // Inputs
  springAngle: number;      // 0-90°, default 38
  wallAngle: number;        // 0-180°, default 90
  
  // Calculated outputs
  miterAngle: number;       // Derived from spring + wall
  bevelAngle: number;       // Derived from spring + wall
  
  // UI state
  viewMode: '2d' | '3d';
  cornerType: 'inside' | 'outside';
  cornerSide: 'left' | 'right';
  springPreset: '38' | '45' | 'custom';
}

2. CalculatorControls.tsx (Input Controls)

Components Used:

• Slider from shadcn - For wall angle (0-180°) and custom spring angle
• Input (existing) - For precise numeric entry
• RadioGroup (to add) - For inside/outside corner, left/right piece
• Select (to add) - For spring angle preset (38°, 45°, custom)
• Label (existing) - For all control labels

Layout:

┌─────────────────────────────────────────┐
│ Spring Angle                             │
│ ○ 38° (38/52 Crown)  ○ 45° (45/45 Crown) │
│ ○ Custom: [____]° [===|====] 0-90       │
├─────────────────────────────────────────┤
│ Wall / Corner Angle                      │
│ [____]° [=====|=========] 0-180          │
├─────────────────────────────────────────┤
│ Corner Type                              │
│ ○ Inside Corner   ○ Outside Corner       │
├─────────────────────────────────────────┤
│ Piece Side                               │
│ ○ Left Piece   ○ Right Piece             │
└─────────────────────────────────────────┘

3. Interactive SVG Diagrams

WallAngleDiagram.tsx (2D Technical)

• Top-down view of corner with two walls
• Angle arc showing wall angle
• Draggable handle to adjust angle
• Updates in real-time

SpringAngleDiagram.tsx (2D Technical)

• Cross-section of wall and ceiling
• Crown molding profile at spring angle
• Draggable molding to adjust spring angle

MiterAngleDiagram.tsx & BevelAngleDiagram.tsx

• Read-only diagrams showing saw settings
• Calculated from spring + wall angles
• Highlights on hover

Corner3DView.tsx (3D Perspective)

• Isometric view of corner
• Two molding pieces meeting
• Syncs with angle changes

---

shadcn Components Required

Already Installed

• Input ✅, Label ✅, Button ✅, Card ✅, Tabs ✅

Need to Install

cd packages/web
npx shadcn@latest add slider radio-group select switch

Check Community Registries First

Need	Registry to Check
SVG Animations	@magicui, @motion-primitives, @animate-ui
Interactive Diagrams	Search "diagram" in directory
Drag Interactions	@dnd-kit or similar

---

Hooks

useAngleCalculator.ts (Feature-Specific)

Location: packages/web/src/routes/tools/coving-calculator/_hooks/

Core calculation logic using formulas from docs/maths/COVING_CALCULATIONS.md:

miter = arctan(cos(spring) × tan(wall/2))
bevel = arcsin(sin(spring) × sin(wall/2))

useSvgDrag.ts (Shared Hook)

Location: packages/web/src/hooks/

General-purpose SVG drag handling with coordinate conversion. Reusable by floor plan editor and other features.

---

Implementation Phases

Phase 1: Core Calculator (3-4 days)

• Create route packages/web/src/routes/tools/coving-calculator/page.tsx
• Install shadcn components: cd packages/web && npx shadcn@latest add slider radio-group select
• Build CovingCalculator.tsx with state management
• Build CalculatorControls.tsx with all inputs
• Implement useAngleCalculator.ts hook
• Build CalculatorOutput.tsx with angle display

Phase 2: 2D Diagrams (4-5 days)

• Create packages/web/src/components/diagrams/ folder
• Build shared SVG components (AngleArc, DimensionLabel, MoldingProfile)
• Build all 4 diagram components (static first)
• Connect diagrams to state

Phase 3: Drag Interactions (2-3 days)

• Implement useSvgDrag.ts hook in shared hooks folder
• Build DraggableHandle.tsx component
• Add drag to WallAngleDiagram and SpringAngleDiagram
• Implement bidirectional sync (drag ↔ slider)

Phase 4: 3D View (2-3 days)

• Build Corner3DView.tsx with isometric projection
• Add view toggle (2D/3D)
• Sync 3D view with angle changes

Phase 5: Polish (2 days)

• Build SawSetupInstructions.tsx
• Add tooltips and keyboard accessibility
• Responsive layout

---

Acceptance Criteria

Must Have (MVP)

• User can input wall angle (0-180°) via slider and numeric input
• User can select spring angle preset (38°, 45°) or enter custom value
• User can select corner type (inside/outside) and piece side (left/right)
• Calculated miter and bevel angles display correctly
• All diagrams update in real-time as inputs change
• Formulas accurate to ±0.1°

Should Have

• User can drag wall/molding in diagrams to adjust angles
• Draggable controls sync with slider/input values
• 3D perspective view available
• Expandable saw setup instructions
• Tooltips on hover

Nice to Have

• Rotate 3D view
• Copy-to-clipboard for angles
• URL params for sharing calculations

---

Related Documents

• Coving Calculations Math Reference
• UI Components Guide
• blocklayer.com Calculator - Inspiration
• svg.guide - Interactive SVG patterns
• shadcn Registry Directory

---

Labels

enhancement frontend tools interactive-diagrams svg calculator