Pub Quiz Platform — Designer app

Combined app document — Designer app


Status	Draft
App	Designer app
Generated	2026-05-13
Source of truth	`.claude/context/apps/designer.md`

The authoring app — a content-creation tool used to build quizzes that the Host will play. Ships in MVP on Windows and macOS (Catalyst) from a single .NET MAUI Blazor Hybrid codebase, desktop only. iPad / Android tablet authoring is Stretch and ships from the web-based Designer codebase.

Overview

The Designer is a single .NET 8/9 MAUI Blazor Hybrid app. Razor / Blazor components form the entire authoring UI — shell, slide list, palette, properties inspector, dialogs. Multi-window is real OS-level windowing via the MAUI Window API, with each window hosting its own BlazorWebView. Slide preview is a dedicated Quiz.Preview Unity project, built only for WebGL, embedded in BlazorWebView as a <canvas>. The same WebGL build serves desktop and the future web tool; ~95-98% pixel fidelity vs native Host (accepted trade-off — see Designer Shell — Pixel-fidelity trade-off).

Authoring follows a PowerPoint-style model: a quiz is an ordered list of slides, optionally grouped into rounds. Each slide owns a fixed-resolution Host canvas (TV/projector format) and a responsive Client canvas (phone/tablet format). Authors place typed elements on each canvas via drag-and-drop from a palette of object types.

For the cross-cutting requirements, scope, and platform list, see the project PRD. For the architecture's rationale (why MAUI Blazor, why WebGL preview, what was rejected), see Decisions.

User flows

Per-flow diagrams (lifecycle, File menu, authoring loop, push, run-from-slide, library) live on the dedicated flow page, each linked to its relevant UI mockups. Every surface is catalogued in the surfaces matrix.

Full flow diagrams — App lifecycle · File menu · authoring loop · Push to Host · Run from slide · Library. Each flow links to the mockups it touches.
Surface inventory matrix — Every chrome / menu / dialog / panel / context-menu / shortcut with leads-to targets, phase tags, FR references.
Mockup launcher → — Browse every static mockup in one browser tab. Sidebar nav + dark / light toggle + scale + resolution controls.

Architecture

The top-level Designer architecture is in Designer Shell — single .NET MAUI Blazor Hybrid process + an embedded Quiz.Preview Unity WebGL build inside BlazorWebView. The page includes the inline architecture diagram. Subsystem-level pages will be authored alongside the implementation work tracked in the Build Plan.

Design notes

The brand identity, palette, typography, and motion language are project-wide and live in the Design Specification. Designer-specific design notes (chrome typography, layout grid, padding, panel proportions) are tagged *{designer}* in that document.

Build plan

The Designer's items are part of the single project Build Plan. Each section there carries an app-scope chip; filter visually for designer.

User flows — detail

Surface-to-surface navigation flows for the Designer. Each diagram is a Mermaid flowchart rendered inline. Authoring conventions and theme tokens live in .claude/skills/mermaid-diagrams/SKILL.md.

Surfaces referenced here are defined in Designer surfaces. Functional requirements are in Functional Requirements — Designer.

Mockups: File menu · Recent files · Preferences

%%{init: {"theme":"base","themeVariables":{"fontFamily":"Inter, system-ui, sans-serif","fontSize":"14px","primaryColor":"#FFFFFF","primaryBorderColor":"#FF009F","primaryTextColor":"#1F1933","secondaryColor":"#F0EBE3","secondaryBorderColor":"#16B2EB","secondaryTextColor":"#1F1933","tertiaryColor":"#F8F5F0","tertiaryBorderColor":"#5A536B","tertiaryTextColor":"#1F1933","lineColor":"#5A536B","edgeLabelBackground":"#F8F5F0","mainBkg":"#F8F5F0","clusterBkg":"#F0EBE3","clusterBorder":"#DDD5C8","titleColor":"#1F1933","nodeBorder":"#5A536B"},"flowchart":{"useMaxWidth":false,"htmlLabels":false,"curve":"basis","padding":20,"nodeSpacing":70,"rankSpacing":80}}}%% flowchart TB F[File menu open] --> N[New quiz] --> N1[New-quiz dialog] --> MS[Main shell] F --> O[Open…] --> O1[OS file picker] --> MS F --> OR[Open recent ▸] --> OR1[Recent submenu] --> MS F --> S[Save] --> MSV[Save flow inline] F --> SA[Save as…] --> SAV[OS save picker] --> MS F --> R[▸ Run from slide] --> RUN[Spawns local Host process] F --> P[Push to Host…] --> P1[Push-to-Host dialog] --> P2[Transferring] --> MS F --> RB[Restore from backup…] --> RB1[Restore dialog] --> MS F --> IM[Import quiz package…] --> IM1[OS picker] --> MS F --> EX[Export .quiz…] --> EX1[OS save picker] F --> PR[Preferences…] --> PR1[Preferences dialog] F --> SI[Sign in… — Stretch] --> SI1[Sign-in dialog] F --> Q[Quit] --> Q1{Dirty?} Q1 -->|yes| QU[Quit-unsaved] --> EXIT[Exit] Q1 -->|no| EXIT classDef decision fill:#FFF1DC,stroke:#FFA94D,stroke-width:2px,color:#1F1933 classDef terminal fill:#E8F5EC,stroke:#36D17B,stroke-width:2px,color:#1F1933,rx:14,ry:14 class Q1 decision class MS,EXIT terminal

3. Authoring loop

Mockups: Main shell · Slide selected · Element selected · Multi-select · Slide context menu · Element context menu · Round context menu

%%{init: {"theme":"base","themeVariables":{"fontFamily":"Inter, system-ui, sans-serif","fontSize":"14px","primaryColor":"#FFFFFF","primaryBorderColor":"#FF009F","primaryTextColor":"#1F1933","secondaryColor":"#F0EBE3","secondaryBorderColor":"#16B2EB","secondaryTextColor":"#1F1933","tertiaryColor":"#F8F5F0","tertiaryBorderColor":"#5A536B","tertiaryTextColor":"#1F1933","lineColor":"#5A536B","edgeLabelBackground":"#F8F5F0","mainBkg":"#F8F5F0","clusterBkg":"#F0EBE3","clusterBorder":"#DDD5C8","titleColor":"#1F1933","nodeBorder":"#5A536B"},"flowchart":{"useMaxWidth":false,"htmlLabels":false,"curve":"basis","padding":20,"nodeSpacing":70,"rankSpacing":80}}}%% flowchart TB MS[Main shell] --> SL[Slide list] SL -->|click slide| SS[Slide selected] SL -->|shift-click| MSEL[Multi-select] SL -->|right-click slide| SCM[Slide context menu] SL -->|right-click round header| RCM[Round context menu] SCM -->|Duplicate| SL SCM -->|Move to round ▸| SL SCM -->|New round from selection| SL SCM -->|Focus notes pane| NP[Notes pane focused] SCM -->|Delete| SL RCM -->|Rename| RCH[Inline rename] RCM -->|Round scoring| RPP[Right pane → round properties] RCM -->|Ungroup| SL RCM -->|Delete round + slides| CONF[Confirm → SL] SS --> CV[Canvas] CV -->|click element| ES[Element selected] CV -->|right-click element| ECM[Element context menu] CV -->|drag from Insert| EI[Element inserted] ECM -->|Cut/Copy/Paste/Duplicate| CV ECM -->|Bring to front / Send to back / forward / backward| CV ECM -->|Copy to Host / Client canvas| CV ECM -->|Lock / Unlock| CV ECM -->|Delete| CV ES --> RPI[Right pane → element properties\nshared block + reveal + lock + type editor] SS --> RPS[Right pane → slide properties] MS --> RPN[Right pane → Insert]

4. Push to Host

Mockups: Push to Host · Transferring

5. Run from slide (local)

Mockups: Main shell — preview mode

6. Library

Mockups: Library panel · Library picker · Import resource