Add Technology and Product overview documentation

[IanMayo]

Summary

This PR adds two comprehensive documentation files that provide an overview of GramFrame's architecture, technology stack, and product positioning.

Changes

• docs/Technology-Overview.md – A detailed technical reference covering:

  • Technology stack (JavaScript ES2020+, SVG rendering, Vite, Playwright, zero runtime dependencies)
  • Component lifecycle and initialization flow
  • SVG-based rendering rationale and coordinate system transformations
  • Centralised state management and listener pattern
  • Modular mode system architecture (Analysis, Harmonics, Doppler, Pan modes)
  • HTML table-based configuration approach
  • Responsive design via ResizeObserver
  • Browser storage integration
  • Build and distribution strategies (standard ES module, standalone IIFE bundle, dev server)
  • End-to-end testing infrastructure with Playwright
  • Type checking via JSDoc + TypeScript compiler
  • Key architectural decisions with rationale

• docs/Product-Overview.md – A user-focused guide covering:

  • Product purpose and domain (sonar training, underwater acoustics)
  • Problem statement (static spectrograms → interactive measurement tools)
  • Primary use cases (frequency/time measurement, harmonic identification, Doppler speed estimation, navigation, persistent annotations)
  • Target user personas (trainees, instructors/material authors, analysts)
  • Deployment model (single JavaScript file, file:// protocol support, no server infrastructure)

Notable Details

Both documents are dated 2026-03-27 and serve as reference material for developers, contributors, and stakeholders. The Technology Overview emphasizes the zero-dependency design, SVG-based architecture, and field-friendly deployment characteristics. The Product Overview contextualizes GramFrame within sonar training workflows and explains the value proposition to different user types.

https://claude.ai/code/session_01SpD9T3WhCTibauhLWKzP7A

[github-actions]

PR Preview

Preview deployment is ready! View Preview

Last updated: 2026-03-27T17:26:28.871Z