Files
calctext/_bmad-output/A-Product-Brief/project-brief.md
C. Cassel 0d38bd3108 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>
2026-03-18 09:12:05 -04:00

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