Final small refinements on Dictation per round-11 feedback before
moving to Files/Tasks/History.
1. Vertical rhythm tightened.
LumotiaPageSkeleton header padding pt-5 pb-3 -> pt-3 pb-2.
Notice padding pt-3 -> pt-2.
Primary surface area pt-5 pb-3 -> pt-3 pb-2.
DictationPage primary inner py-8 -> py-6.
Net: about 16 px shaved off the top band. Transcript canvas
begins higher, no longer feels like a large header above empty
space.
2. Disabled actions go neutral when there is nothing to act on.
Save button variant is now conditional:
variant={transcript.trim() ? "primary" : "secondary"}
Previously Save kept the blue primary fill even when disabled.
Disabled blue under 50% opacity still read as a strong primary
cue. Now: no transcript = neutral secondary; transcript exists
= primary blue. Other actions (Copy / Extract / Template / Open
Viewer) stay neutral regardless and become enabled when
transcript exists.
3. Light-mode transcript surface gains a tactile paper edge.
LumotiaPageSkeleton primary surface gains:
shadow-[inset_0_1px_0_rgba(0,0,0,0.05)]
Subtle 1-px inset top shadow at 5% opacity. Invisible in dark
mode (against the dark surface), visible in light mode as a
faint paper edge. Skeleton-wide because it costs nothing in
dark and adds the warmth Jake asked for in light.
4. Ambient info notice nested inside transcript surface.
Browser-preview notice + real-error notice now render INSIDE
the transcript card via the primary snippet, not in the
skeleton's notice slot. Renders contained at the top of the
card rather than as a full-width page banner. The notice slot
on LumotiaPageSkeleton stays available for blocking/error-
banner cases on other pages.
5. Mock-ready screenshot delivered.
Captured two new screenshot pairs:
root_PREVIEW__quiet-{dark,light}.png browser-preview state
root_READY__quiet-{dark,light}.png mocked Tauri-available
Mock done by temporarily setting tauriRuntimeAvailable = true
for the capture run, then reverted to hasTauriRuntime() at
commit time. The headless context still has no real Tauri
runtime so the model-check call fails — that surfaces as a
danger-tone slim notice in the ready screenshots, which
happens to demonstrate the danger-slim notice rendering
alongside the enabled red Record button.
In the real Tauri desktop app the danger notice would not
appear; only the Record (red), empty-state typography, and
bottom action dock with all-disabled neutral controls would.
Verified.
- npm run check: 0 errors, 0 warnings across 5707 files.
No colour exploration. No new tokens. Same red/blue/green/yellow/
orange grammar from Phase 4k.
Phase 5c is now complete. Next focused commits: 5d (Files), 5e
(Tasks), 5f (History), then Phase 6 (icon — waiting on SVG) and
Phase 7 (motion audit).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Three small phases land together for Jake's round-4 feedback. Each is
focused and reviewable. Larger Dictation/Settings/Tasks/History page
migrations are deferred to focused future sittings.
Phase 4f — semantic source / derived token architecture.
Added --semantic-{red,blue,green,yellow}-source raw-palette tokens.
These encode the role's hue identity from Jake's color.adobe.com
palette (#FF0700 / #FFCD00 / #00FF56 / #000AFF) and stay constant
across all themes. The existing --color-{danger,caution,success,info}
tokens are now documented as theme-tuned derivations meeting WCAG
AA in context. Source tokens make the brand-to-runtime relationship
traceable in code.
Added --color-{role}-bg subtle-fill tokens derived via
color-mix(in oklab, var(--color-{role}) 8%, transparent). Used by
Notice backgrounds, hover tints and focus halos. HC mode forces
-bg tokens to transparent so HC notices read as text + icon +
2-px border + left bar with no body tint.
Phase 5a — page skeleton primitive + slim notice variant.
NEW src/lib/ui/LumotiaPageSkeleton.svelte. Six-zone layout:
header (optional)
notice (optional, slim ambient state)
primary work surface (required, primaryBleed for full-bleed)
right rail (optional, lg-screen drawer)
action bar (optional, bottom)
metadata (optional, mono micro-footer)
Every zone except primary is opt-in. Foundation for the
page-skeleton sweep without forcing any page migration yet.
LumotiaNotice gained a slim prop. When true: padding collapses
(px-3 py-2 vs px-4 py-3), icon shrinks (14 vs 16), title block is
suppressed. For ambient page-level notices like browser-preview.
Phase 5b — browser-preview reclassification.
src/lib/pages/DictationPage.svelte: the browser-preview state used
to render as a red error block. That is an environment limitation,
not a failed action. Reclassified as a slim info notice with
friendlier copy:
"You're in a browser preview. Local transcription only works in
the Lumotia desktop app."
Other error states (transcription failed, needs review) still
render through the original danger-tinted block with the
technical-details affordance preserved. Only the browser-preview
path branches into LumotiaNotice tone="info" slim.
The larger Dictation page restructure (header recomposition,
Template/Extract Tasks demotion to bottom action bar, empty-state
typography) is reserved for a focused Phase 5c sitting since
DictationPage.svelte is 1 262 LOC of state-heavy code.
Verified.
- npm run check: 0 errors, 0 warnings across 5707 files.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
