docs/REFERENCE_IMAGE_UI_ALIGNMENT.md

# Reference Image UI Alignment

This pass aligns the automatic card-flow web app with the supplied reference screenshot.

## Implemented

- Top application bar now follows the reference structure:
  - compact waveform logo
  - `Sample Extractor` title
  - beta pill
  - centered file picker/current filename
  - right-aligned export actions
- Main canvas is now split into:
  - large waveform area on the left
  - persistent settings panel on the right
  - grouped sample board below the waveform
  - compact bottom selection/action bar
- The waveform panel includes:
  - zoom controls
  - current file/progress status
  - time display
  - transport row
  - progress-tinted waveform rendering already provided by the previous real-progress pass
- Sample results now visually match the card/column model:
  - columns by detected type
  - per-column count and draw button
  - compact cards with mini-waveform, label, metadata, and small action strip
- Everyday controls are visible in the right panel, while expert pipeline controls are collapsed under `Expert pipeline controls`.
- Existing automatic behavior is preserved:
  - drop/upload starts processing immediately
  - browser-side waveform renders immediately
  - progressive sample cards appear while processing
  - dismiss, draw another, trim, extend, and save-edit actions remain available

## Intentional differences from the reference

- The screenshot's exact icons are approximated with Unicode/text controls to avoid adding an icon dependency.
- `Export Selected` currently exports the generated pack because backend-level selected-card export is not yet implemented as a distinct artifact path.
- Selection is currently all visible cards by default; the next iteration should add true per-card checkboxes and export only selected representatives.
- The right panel remains visible by default because the reference shows it open.

## Validation targets

- No document-level scrolling on desktop sizes.
- Waveform and sample board fill the viewport.
- Advanced controls are available but not part of the primary visual path.
- All previous backend APIs and semantic editing features remain reachable through the tools drawer.