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>
3.6 KiB
CalcText — Simplified Product Brief
Date: 2026-03-17 Type: Brownfield — Workspace Evolution Brief Level: Simplified
Project Scope
CalcText is a cross-platform notepad calculator (Web, macOS, Windows) powered by a shared Rust calculation engine with 200+ unit conversions, 180+ fiat currencies, 50+ crypto, date/time math, and 50+ built-in functions.
The web app is evolving from a single-document, two-column calculator into a full workspace application with:
- Multi-theme system — Light, Dark, Matrix, and custom user-defined themes
- Tabbed documents — Multiple calctext files open simultaneously
- File sidebar — Left panel with folder organization, recent files, favorites, templates
- localStorage persistence — Documents survive page reloads without backend
- Elevated results panel — Richer, subtler result display
Platform strategy: Web-first design. Once established, replicate the UX patterns to macOS (SwiftUI) and Windows (iced/Rust). The design must be portable — avoid web-only paradigms that don't translate to native.
Challenge & Opportunity
CalcText has a powerful engine trapped in a basic single-document UI. The current web app is functional but doesn't reflect the depth of what the engine can do, and doesn't invite users to stay.
The opportunity: No competitor (Soulver, Numi, Numbr, PCalc) offers a true multi-document workspace with theming and file organization for calculations. CalcText can own this gap — becoming the app users open daily and live in, not just visit for a quick calculation.
The gap: Current UI is a text editor with results. The vision is a professional workspace where calculations are organized, styled, and persistent.
Design Goals
Functional
- Multi-theme engine with preset themes and custom theme support
- Tab bar for multi-document management
- Collapsible file sidebar with tree view, folders, and templates
- Document model with create, rename, delete, organize
- localStorage persistence for all documents and preferences
Experience
- Professional workspace feel — "VS Code/Notion for numbers"
- Complete experience shipped as one coherent product, not incremental phases
- Matrix theme as a brand differentiator and personality statement
- Intuitive for first-time users, powerful for daily users
Business
- Web-first design that establishes reusable UX patterns
- Cross-platform portable design language
- Foundation for future premium features (cloud sync, accounts, collaboration)
Constraints
Technical (locked in)
- React 19 + CodeMirror 6 + Vite 7
- Rust WASM engine running in Web Worker
- Custom CSS with CSS custom properties (no Tailwind, no shadcn)
- PWA architecture (service worker, manifest, offline support)
Deferred (out of scope this phase)
- User accounts and authentication
- Cloud save and sync (Supabase planned)
- Collaborative real-time editing (CRDT)
- Shareable URL links
- Embeddable widget
Cross-platform
- Design patterns must translate to SwiftUI (macOS) and iced (Windows)
- Avoid web-only interactions that don't port to native
- Shared engine means consistent calculation behavior across platforms
Timeline & Budget
- Flexible — no hard deadline
- Stakes: enterprise/high — quality over speed
Current State Reference
See 01-brownfield-analysis.md for complete codebase scan including:
- All CSS custom properties and values
- Component inventory and props
- Responsive breakpoints and behavior
- Accessibility audit
- Cross-platform comparison (macOS vs Web)
Created using Whiteport Design Studio (WDS) methodology