Changelog

Checkboxes and radio buttons were crammed into side-by-side *,* grid

columns and overflowing into each other. Replaced with full-width

stacked rows — each control type (inputs, checkboxes, radios, toggle,

progress bars) gets its own row with no overlap.

Restructured Form Elements preview section from mismatched two-column

stacks (text inputs + checkboxes vs radio buttons + toggle + progress)

into row-aligned pairs: text inputs side-by-side, checkboxes next to

radio buttons, toggle switch next to progress bars. Each row now has

visually related controls at the same vertical position. Added disabled

input state preview, renamed radio labels to "Option A/B" to avoid

confusion with checkbox "Checked/Unchecked" labels.

Left color column: 420px → 540px so labels like "Surface Elevated",

"Input Background", "Primary Hover" stop truncating. Dialog MinWidth

set to 960px, outer margins reduced from 48,36 to 40,28.

Dialog changes:

• Stretch to fill window with 48/36px margins instead of fixed width (was

getting clipped on smaller screens)

• Left color column fixed at 420px so labels stop truncating
• Preview panel gets all remaining width

Preview panel rewrite — now shows every design token in context:

• Typography: all text colors, accent links with underlines, text-on-accent

chips on primary/secondary backgrounds

• Text Selection: simulated selection on surface + elevated backgrounds,

interactive SelectableTextBlock, all 6 note highlight colors

• Buttons: matrix grid showing Primary/Secondary/Danger in Normal, Hover,

and Muted/Glow states side by side

• Surface Hierarchy: full nesting stack (background → surface → elevated)

plus input background, recessed, and glass surfaces

• Interaction States: normal, hover, selected (with accent bar), pressed
• Semantic Colors: 4-column grid (Success/Warning/Danger/Info) each showing

solid + muted variants, plus Alpha/Beta stage badges

• Form Elements: 2-column layout with inputs, checkboxes, radios, toggle,

progress bars in primary + secondary colors

• Borders: standard + subtle side by side
• Navigation: active (with accent bar), normal, hover states
• Scrollbar: visual mockup of track, thumb, and thumb-hover states
• Calendar: event + event muted chips
• Modal & Overlays: standard + heavy backdrop previews

The shimmer animation on the unlock screen froze during the

"Preparing workspace..." phase because new MainWindow() parses ~900

lines of XAML synchronously on the UI thread, blocking the render loop.

Three changes:

1. Before MainWindow creation, transition the unlock screen from an

animated shimmer to a static "Launching..." message. A static state

doesn't look broken when the UI thread blocks, unlike a frozen

translate animation.

2. Split MainWindow construction and DataContext assignment into

separate steps with dispatcher yields between them, giving the

render loop more chances to tick.

3. Move CloudSyncEnterPassphrase (which does S3 network I/O) off the

UI thread in AutoStartSyncAsync. Previously it ran synchronously

on whatever thread the async method started on.