feat(web): implement complete workspace with themes, tabs, sidebar, and mobile

Transform CalcText from a single-document calculator into a full workspace
application with multi-document support, theming, and responsive mobile experience.

- Theme system: 5 presets (Light, Dark, Matrix, Midnight, Warm) + accent colors
- Document model with localStorage persistence and auto-save
- Tab bar with keyboard shortcuts (Ctrl+N/W/Tab/1-9), rename, close
- Sidebar with search, recent, favorites, folders, templates, drag-and-drop
- 5 templates: Budget, Invoice, Unit Converter, Trip Planner, Loan Calculator
- Status bar with cursor position, engine status, dedication to Igor Cassel
- Results panel: type-specific colors, click-to-copy, error hints
- Format toolbar: H, B, I, //, color labels with live preview toggle
- Syntax highlighting using theme CSS variables
- Error hover tooltips
- Mobile: bottom results tray, sidebar drawer, touch targets, safe areas
- Docker multi-stage build (Rust WASM + Vite + Nginx)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

_bmad-output/C-UX-Scenarios/01-workspace-shell/1.2-status-bar/1.2-status-bar.md

@@ -0,0 +1,124 @@
+# 1.2 — Status Bar
+
+**Previous Step:** ← [App Shell](../1.1-app-shell/1.1-app-shell.md)
+
+---
+
+## Page Metadata
+
+| Property | Value |
+|----------|-------|
+| **Scenario** | 01 — Workspace Shell |
+| **Page Number** | 1.2 |
+| **Platform** | Web (PWA), portable to macOS/Windows |
+| **Page Type** | Persistent UI Strip (embedded in App Shell) |
+| **Viewport** | All breakpoints |
+
+---
+
+## Overview
+
+**Page Purpose:** Provide at-a-glance contextual information about the current document, engine status, and workspace state. Acts as a persistent information bar at the bottom of the workspace.
+
+**User Situation:** User is working in the editor and glances down for context — current line/column, whether the engine is ready, what theme is active, and document stats.
+
+**Success Criteria:**
+- Information readable at a glance without interrupting flow
+- No interactive elements that accidentally trigger (info-only, with 2 clickable shortcuts)
+- Consistent across all themes
+
+---
+
+## Layout Structure
+
+```
+┌──────────────────────────────────────────────────────────────┐
+│  [Ln 12, Col 8]  [42 lines]  │  [Engine ● Ready]  [Dark 🎨] │
+│  ← left-aligned info          │         right-aligned info →  │
+└──────────────────────────────────────────────────────────────┘
+```
+
+Height: 24px. Full width. Background: var(--bg-secondary). Border-top: 1px solid var(--border).
+
+---
+
+## Spacing
+
+| Property | Token | Pixels |
+|----------|-------|--------|
+| Height | — | 24px |
+| Padding horizontal | space-md | 12px |
+| Item gap | space-md | 12px |
+| Dot size (engine status) | — | 6px |
+| Dot margin-right | space-2xs | 4px |
+
+---
+
+## Typography
+
+| Element | Size | Weight | Typeface | Color |
+|---------|------|--------|----------|-------|
+| All status text | text-3xs | 400 | system mono | var(--text) |
+| Engine status (ready) | text-3xs | 400 | system mono | var(--success) |
+| Engine status (loading) | text-3xs | 400 | system mono | var(--warning) |
+| Theme name | text-3xs | 500 | system mono | var(--text) |
+
+---
+
+## Status Items
+
+### Left Group
+
+**OBJECT ID:** `statusbar-left`
+
+| Item | Content | Update Trigger |
+|------|---------|----------------|
+| Cursor position | `Ln {line}, Col {col}` | Cursor movement |
+| Line count | `{n} lines` | Document change |
+| Selection (conditional) | `{n} selected` | When text selected |
+
+### Right Group
+
+**OBJECT ID:** `statusbar-right`
+
+| Item | Content | Behavior |
+|------|---------|----------|
+| Engine status | `● Ready` (green dot) or `◌ Loading...` (amber, pulse) | Auto-updates on engine state change |
+| Theme indicator | `{Theme Name} 🎨` | Click → opens theme picker (same as header button) |
+| Offline (conditional) | `📡 Offline` | Only visible when offline |
+
+---
+
+## States
+
+| State | Engine Indicator | Additional |
+|-------|-----------------|------------|
+| Ready | ● green dot, "Ready" | — |
+| Loading | ◌ amber dot, pulse animation, "Loading..." | — |
+| Error | ● red dot, "Engine error" | Tooltip with error message |
+| Offline | ● green dot, "Ready" | + "📡 Offline" appended |
+
+---
+
+## Responsive
+
+| Breakpoint | Behavior |
+|------------|----------|
+| >= 768px | Full status bar, all items visible |
+| < 768px | Simplified: cursor position + engine dot only. Theme and line count hidden. |
+
+---
+
+## Technical Notes
+
+- Status bar reads from editor state (cursor, selection, line count) and engine hook (ready, error)
+- Theme indicator is the only clickable element — keeps status bar non-disruptive
+- On macOS/Windows: maps to native status bar or window title bar info
+
+---
+
+**Previous Step:** ← [App Shell](../1.1-app-shell/1.1-app-shell.md)
+
+---
+
+_Created using Whiteport Design Studio (WDS) methodology_