Lyrics Card Generator v4.4.0 Release Notes
Release date: 2026-07-10
This release moves Settings out of a modal and into a complete “Settings Wing” to the right of the editor. The editor, lyric examples, and settings now share one mutually exclusive spatial system: examples still enter from above, settings enter from the right, and all existing preferences, live previews, automatic saves, and persistence behavior remain intact.
Main Updates
- Settings no longer adds a dark overlay or leaves the background editor clickable. The editor exits to the left as the Settings Wing enters from the right.
- A unified active-surface state isolates hidden areas with
aria-hidden,inert, and pointer-event guards. Escape and the header X return to the editor and restore focus to the original Settings button. - Settings navigation now has three responsive modes: a full descriptive sidebar on wide screens, a compact icon rail at medium widths, and a self-closing category menu on small screens.
- Added a dedicated settings header, save status, category descriptions, and consistent group cards while keeping the existing General, Appearance, Export, AI, and About categories.
- Settings state and side effects are separated from the old modal shell. Regular preferences still preview and save immediately, obsolete background assets are still cleaned up, and AI settings retain their 700ms deferred save plus close-time flush.
- Incomplete AI configuration now opens the AI category directly. Tab input state is retained, while reduced-motion mode replaces the large slide with a very short fade.
- Removed the app-background grid and the Settings Wing’s outer frame, refined the navigation selection animation, moved Spark Cursor to Appearance, aligned the lyric action buttons, and locked the initial layout to Custom with Auto Height enabled.
- Added localized category descriptions for all six interface languages and a Settings Wing regression suite covering spatial transitions, save lifecycles, responsive navigation, and accessibility behavior.
Verification
- npm run typecheck
- npm run core:test
- npm run build
- npm run desktop:build
- git diff --check
- Responsive and interaction checks at 1520px, 1280px, 900px, 720px, and 520px