UI Prototype — overview¶

Open the mockup locally¶

Open the UI mockup

PROPOSED — the mockup lives at docs/ui/mockup/index.html in the repository. Open that file locally in a browser. It is a design aid and is not deployed with this guide.

Three stages¶

PROPOSED — the primary navigation is a titlebar stage switcher:

flowchart LR
  P["Prepare<br/>model · profiles · non-planar setup"] --> V["Preview<br/>layers · color-by · compare"]
  V --> S["Simulate<br/>playback · findings triage"]
  S --> P

Changing stage changes the left-sidebar stack, viewport painter set, and default inspector tab as one unit. It does not discard loaded model, toolpath, analysis, or camera state.

Stages are orthogonal to ProductMode¶

PROPOSED — stage answers what task am I doing? ProductMode answers which product launched? They are independent:

HOW IT IS — there are still two executables. Slicer hides playback (src/SlicerApp/MainWindow.axaml:20,93–94); Simulator mounts the playback panel (src/SimulatorApp/MainWindow.axaml:62). The SLICER / SIMULATOR ProductMode chip is a visible seam for a later IProductMode, not a claim that one-binary mode switching exists.

Planned shell map¶

┌ titlebar: app + stage switcher + ProductMode + ABI + Slice + Export ┐
├──────────────┬───────────────────────────┬────┬─────────────────────┤
│ stage-aware  │ viewport                  │bar │ inspector           │
│ left sidebar│ toolbar + painters        │    │ Overlays / Findings │
│              │ layer or move scrubber    │    │ Playback / Regions  │
│              │ HUD / toast / empty state │    │ Activity            │
├──────────────┴───────────────────────────┴────┴─────────────────────┤
│ status + DEMO TOOLPATH + findings summary + estimates + engine/ABI │
└─────────────────────────────────────────────────────────────────────┘

HOW IT IS — the shared shell already supplies title, left region, viewport, right activity bar/inspector, splitters, and status region (src/Nps.Shell/Controls/MainWindowShell.axaml:12–33,35–113). The stage host, extra tabs, badges, banners, and dialogs below are PROPOSED.

Element status legend¶

Full element map¶

The numbers match the design contract’s element master list (docs/ui/ui-plan.md:153–273). Follow the page links for behavior and honesty labels.

Titlebar and Prepare¶

Preview, Simulate, and viewport¶

Toolbar, inspector, status, and dialogs¶

See also¶

• Prepare, Preview, and Simulate for the stage tours.
• Slicer — interaction map for the current Slicer UI.
• Simulator — interaction map for current playback and mesh behavior.