refactor(ui): PageHeader primitive — one header shell for module pages and settings intros (convergence round 3) by jackwener · Pull Request #689 · apache/maka

jackwener · 2026-07-09T14:50:02Z

Round 3 of notes/ui-convergence-map-2026-07-09.md: the two page-header dialects (module h2 shells, settings h3 intros) converge onto one PageHeader primitive with title/subtitle/eyebrow/icon/badge/as/actions/meta slots + data-slot hooks. All 6 call sites migrated, none skipped; daily-review stays header-less by design. No CSS re-pins needed (wrapper descendant selectors match through the slots — verified via live computed styles: module 26px/600, intro 13px/600 preserved). check-a11y brand allow-list gains Maka. Desktop 2293/2293 + ui 46/46 exit-code gated; dead-css + alignment auditor clean; 5 CDP captures verified. Implemented by an opus worktree agent to the map spec.

…ttings intros (convergence round 3) The app grew two independent page-header dialects that kept re-declaring the same title/subtitle/actions structure per call site. Round 3 of the UI convergence map extracts a single shared shell. New primitives/page-header.tsx: PageHeader({ title, subtitle?, eyebrow?, icon?, badge?, as?: 'h2'|'h3', actions?, meta?, className?, titleId? }) plus contentClassName/iconClassName/headingRowClassName/subtitleClassName/ as_wrapper escape hatches so each call site KEEPS its existing wrapper class. The primitive converges STRUCTURE (slot order + arrangement); per-slot typography and surface chrome stay in the wrapper CSS, which targets the slots via unchanged DESCENDANT selectors (`.wrap h2/h3/p`) — so no contract re-pin was needed and radius/pruning pins are untouched. Migrated all 6 call sites: - skills-panel.tsx maka-module-main-header (as=h2, actions) - plan-reminder-panel.tsx maka-plan-hero (as=h2, contentClassName= maka-plan-heading, actions) - permission-center-page.tsx settingsPermissionIntro (as=h3, meta: RelativeTime + refresh Button) - health-center-page.tsx settingsHealthIntro (as=h3, meta: Badge + RelativeTime + refresh; subtitle) - voice-settings-page.tsx settingsFeatureStatusHero (as=h3, icon + 本地自检 badge chip) - about-settings-page.tsx settingsAboutHero (as=h2, icon + version/ channel badge fragment + tagline subtitle) check-a11y: added the app's own product name `Maka` to the brand allow-list (the About title prop tripped english-aria-label). Verified: packages/ui + desktop (main/preload/renderer) builds; desktop 2293 / ui 46 tests green; check-dead-css clean; alignment audit (AUDIT_PORT_BASE=15900) no new findings; 5 CDP captures (module-skills, plan-reminders, settings-permissions, settings-voice, settings-about) confirm slot typography + grid layout preserved.

…ntainer, specs remain runnable (#698)

jackwener · 2026-07-09T14:50:02Z

Round 3 of notes/ui-convergence-map-2026-07-09.md: the two page-header dialects (module h2 shells, settings h3 intros) converge onto one PageHeader primitive with title/subtitle/eyebrow/icon/badge/as/actions/meta slots + data-slot hooks. All 6 call sites migrated, none skipped; daily-review stays header-less by design. No CSS re-pins needed (wrapper descendant selectors match through the slots — verified via live computed styles: module 26px/600, intro 13px/600 preserved). check-a11y brand allow-list gains Maka. Desktop 2293/2293 + ui 46/46 exit-code gated; dead-css + alignment auditor clean; 5 CDP captures verified. Implemented by an opus worktree agent to the map spec.

…ttings intros (convergence round 3) The app grew two independent page-header dialects that kept re-declaring the same title/subtitle/actions structure per call site. Round 3 of the UI convergence map extracts a single shared shell. New primitives/page-header.tsx: PageHeader({ title, subtitle?, eyebrow?, icon?, badge?, as?: 'h2'|'h3', actions?, meta?, className?, titleId? }) plus contentClassName/iconClassName/headingRowClassName/subtitleClassName/ as_wrapper escape hatches so each call site KEEPS its existing wrapper class. The primitive converges STRUCTURE (slot order + arrangement); per-slot typography and surface chrome stay in the wrapper CSS, which targets the slots via unchanged DESCENDANT selectors (`.wrap h2/h3/p`) — so no contract re-pin was needed and radius/pruning pins are untouched. Migrated all 6 call sites: - skills-panel.tsx maka-module-main-header (as=h2, actions) - plan-reminder-panel.tsx maka-plan-hero (as=h2, contentClassName= maka-plan-heading, actions) - permission-center-page.tsx settingsPermissionIntro (as=h3, meta: RelativeTime + refresh Button) - health-center-page.tsx settingsHealthIntro (as=h3, meta: Badge + RelativeTime + refresh; subtitle) - voice-settings-page.tsx settingsFeatureStatusHero (as=h3, icon + 本地自检 badge chip) - about-settings-page.tsx settingsAboutHero (as=h2, icon + version/ channel badge fragment + tagline subtitle) check-a11y: added the app's own product name `Maka` to the brand allow-list (the About title prop tripped english-aria-label). Verified: packages/ui + desktop (main/preload/renderer) builds; desktop 2293 / ui 46 tests green; check-dead-css clean; alignment audit (AUDIT_PORT_BASE=15900) no new findings; 5 CDP captures (module-skills, plan-reminders, settings-permissions, settings-voice, settings-about) confirm slot typography + grid layout preserved.

…ntainer, specs remain runnable (#698)

jackwener · 2026-07-09T14:50:02Z

Round 3 of notes/ui-convergence-map-2026-07-09.md: the two page-header dialects (module h2 shells, settings h3 intros) converge onto one PageHeader primitive with title/subtitle/eyebrow/icon/badge/as/actions/meta slots + data-slot hooks. All 6 call sites migrated, none skipped; daily-review stays header-less by design. No CSS re-pins needed (wrapper descendant selectors match through the slots — verified via live computed styles: module 26px/600, intro 13px/600 preserved). check-a11y brand allow-list gains Maka. Desktop 2293/2293 + ui 46/46 exit-code gated; dead-css + alignment auditor clean; 5 CDP captures verified. Implemented by an opus worktree agent to the map spec.

…ttings intros (convergence round 3) The app grew two independent page-header dialects that kept re-declaring the same title/subtitle/actions structure per call site. Round 3 of the UI convergence map extracts a single shared shell. New primitives/page-header.tsx: PageHeader({ title, subtitle?, eyebrow?, icon?, badge?, as?: 'h2'|'h3', actions?, meta?, className?, titleId? }) plus contentClassName/iconClassName/headingRowClassName/subtitleClassName/ as_wrapper escape hatches so each call site KEEPS its existing wrapper class. The primitive converges STRUCTURE (slot order + arrangement); per-slot typography and surface chrome stay in the wrapper CSS, which targets the slots via unchanged DESCENDANT selectors (`.wrap h2/h3/p`) — so no contract re-pin was needed and radius/pruning pins are untouched. Migrated all 6 call sites: - skills-panel.tsx maka-module-main-header (as=h2, actions) - plan-reminder-panel.tsx maka-plan-hero (as=h2, contentClassName= maka-plan-heading, actions) - permission-center-page.tsx settingsPermissionIntro (as=h3, meta: RelativeTime + refresh Button) - health-center-page.tsx settingsHealthIntro (as=h3, meta: Badge + RelativeTime + refresh; subtitle) - voice-settings-page.tsx settingsFeatureStatusHero (as=h3, icon + 本地自检 badge chip) - about-settings-page.tsx settingsAboutHero (as=h2, icon + version/ channel badge fragment + tagline subtitle) check-a11y: added the app's own product name `Maka` to the brand allow-list (the About title prop tripped english-aria-label). Verified: packages/ui + desktop (main/preload/renderer) builds; desktop 2293 / ui 46 tests green; check-dead-css clean; alignment audit (AUDIT_PORT_BASE=15900) no new findings; 5 CDP captures (module-skills, plan-reminders, settings-permissions, settings-voice, settings-about) confirm slot typography + grid layout preserved.

…ntainer, specs remain runnable (#698)

jackwener · 2026-07-09T14:50:02Z

Round 3 of notes/ui-convergence-map-2026-07-09.md: the two page-header dialects (module h2 shells, settings h3 intros) converge onto one PageHeader primitive with title/subtitle/eyebrow/icon/badge/as/actions/meta slots + data-slot hooks. All 6 call sites migrated, none skipped; daily-review stays header-less by design. No CSS re-pins needed (wrapper descendant selectors match through the slots — verified via live computed styles: module 26px/600, intro 13px/600 preserved). check-a11y brand allow-list gains Maka. Desktop 2293/2293 + ui 46/46 exit-code gated; dead-css + alignment auditor clean; 5 CDP captures verified. Implemented by an opus worktree agent to the map spec.

…ttings intros (convergence round 3) The app grew two independent page-header dialects that kept re-declaring the same title/subtitle/actions structure per call site. Round 3 of the UI convergence map extracts a single shared shell. New primitives/page-header.tsx: PageHeader({ title, subtitle?, eyebrow?, icon?, badge?, as?: 'h2'|'h3', actions?, meta?, className?, titleId? }) plus contentClassName/iconClassName/headingRowClassName/subtitleClassName/ as_wrapper escape hatches so each call site KEEPS its existing wrapper class. The primitive converges STRUCTURE (slot order + arrangement); per-slot typography and surface chrome stay in the wrapper CSS, which targets the slots via unchanged DESCENDANT selectors (`.wrap h2/h3/p`) — so no contract re-pin was needed and radius/pruning pins are untouched. Migrated all 6 call sites: - skills-panel.tsx maka-module-main-header (as=h2, actions) - plan-reminder-panel.tsx maka-plan-hero (as=h2, contentClassName= maka-plan-heading, actions) - permission-center-page.tsx settingsPermissionIntro (as=h3, meta: RelativeTime + refresh Button) - health-center-page.tsx settingsHealthIntro (as=h3, meta: Badge + RelativeTime + refresh; subtitle) - voice-settings-page.tsx settingsFeatureStatusHero (as=h3, icon + 本地自检 badge chip) - about-settings-page.tsx settingsAboutHero (as=h2, icon + version/ channel badge fragment + tagline subtitle) check-a11y: added the app's own product name `Maka` to the brand allow-list (the About title prop tripped english-aria-label). Verified: packages/ui + desktop (main/preload/renderer) builds; desktop 2293 / ui 46 tests green; check-dead-css clean; alignment audit (AUDIT_PORT_BASE=15900) no new findings; 5 CDP captures (module-skills, plan-reminders, settings-permissions, settings-voice, settings-about) confirm slot typography + grid layout preserved.

…ntainer, specs remain runnable (#698)

jackwener · 2026-07-09T14:50:02Z

Round 3 of notes/ui-convergence-map-2026-07-09.md: the two page-header dialects (module h2 shells, settings h3 intros) converge onto one PageHeader primitive with title/subtitle/eyebrow/icon/badge/as/actions/meta slots + data-slot hooks. All 6 call sites migrated, none skipped; daily-review stays header-less by design. No CSS re-pins needed (wrapper descendant selectors match through the slots — verified via live computed styles: module 26px/600, intro 13px/600 preserved). check-a11y brand allow-list gains Maka. Desktop 2293/2293 + ui 46/46 exit-code gated; dead-css + alignment auditor clean; 5 CDP captures verified. Implemented by an opus worktree agent to the map spec.

…ttings intros (convergence round 3) The app grew two independent page-header dialects that kept re-declaring the same title/subtitle/actions structure per call site. Round 3 of the UI convergence map extracts a single shared shell. New primitives/page-header.tsx: PageHeader({ title, subtitle?, eyebrow?, icon?, badge?, as?: 'h2'|'h3', actions?, meta?, className?, titleId? }) plus contentClassName/iconClassName/headingRowClassName/subtitleClassName/ as_wrapper escape hatches so each call site KEEPS its existing wrapper class. The primitive converges STRUCTURE (slot order + arrangement); per-slot typography and surface chrome stay in the wrapper CSS, which targets the slots via unchanged DESCENDANT selectors (`.wrap h2/h3/p`) — so no contract re-pin was needed and radius/pruning pins are untouched. Migrated all 6 call sites: - skills-panel.tsx maka-module-main-header (as=h2, actions) - plan-reminder-panel.tsx maka-plan-hero (as=h2, contentClassName= maka-plan-heading, actions) - permission-center-page.tsx settingsPermissionIntro (as=h3, meta: RelativeTime + refresh Button) - health-center-page.tsx settingsHealthIntro (as=h3, meta: Badge + RelativeTime + refresh; subtitle) - voice-settings-page.tsx settingsFeatureStatusHero (as=h3, icon + 本地自检 badge chip) - about-settings-page.tsx settingsAboutHero (as=h2, icon + version/ channel badge fragment + tagline subtitle) check-a11y: added the app's own product name `Maka` to the brand allow-list (the About title prop tripped english-aria-label). Verified: packages/ui + desktop (main/preload/renderer) builds; desktop 2293 / ui 46 tests green; check-dead-css clean; alignment audit (AUDIT_PORT_BASE=15900) no new findings; 5 CDP captures (module-skills, plan-reminders, settings-permissions, settings-voice, settings-about) confirm slot typography + grid layout preserved.

…ntainer, specs remain runnable (#698)

jackwener · 2026-07-09T14:50:02Z

Round 3 of notes/ui-convergence-map-2026-07-09.md: the two page-header dialects (module h2 shells, settings h3 intros) converge onto one PageHeader primitive with title/subtitle/eyebrow/icon/badge/as/actions/meta slots + data-slot hooks. All 6 call sites migrated, none skipped; daily-review stays header-less by design. No CSS re-pins needed (wrapper descendant selectors match through the slots — verified via live computed styles: module 26px/600, intro 13px/600 preserved). check-a11y brand allow-list gains Maka. Desktop 2293/2293 + ui 46/46 exit-code gated; dead-css + alignment auditor clean; 5 CDP captures verified. Implemented by an opus worktree agent to the map spec.

…ttings intros (convergence round 3) The app grew two independent page-header dialects that kept re-declaring the same title/subtitle/actions structure per call site. Round 3 of the UI convergence map extracts a single shared shell. New primitives/page-header.tsx: PageHeader({ title, subtitle?, eyebrow?, icon?, badge?, as?: 'h2'|'h3', actions?, meta?, className?, titleId? }) plus contentClassName/iconClassName/headingRowClassName/subtitleClassName/ as_wrapper escape hatches so each call site KEEPS its existing wrapper class. The primitive converges STRUCTURE (slot order + arrangement); per-slot typography and surface chrome stay in the wrapper CSS, which targets the slots via unchanged DESCENDANT selectors (`.wrap h2/h3/p`) — so no contract re-pin was needed and radius/pruning pins are untouched. Migrated all 6 call sites: - skills-panel.tsx maka-module-main-header (as=h2, actions) - plan-reminder-panel.tsx maka-plan-hero (as=h2, contentClassName= maka-plan-heading, actions) - permission-center-page.tsx settingsPermissionIntro (as=h3, meta: RelativeTime + refresh Button) - health-center-page.tsx settingsHealthIntro (as=h3, meta: Badge + RelativeTime + refresh; subtitle) - voice-settings-page.tsx settingsFeatureStatusHero (as=h3, icon + 本地自检 badge chip) - about-settings-page.tsx settingsAboutHero (as=h2, icon + version/ channel badge fragment + tagline subtitle) check-a11y: added the app's own product name `Maka` to the brand allow-list (the About title prop tripped english-aria-label). Verified: packages/ui + desktop (main/preload/renderer) builds; desktop 2293 / ui 46 tests green; check-dead-css clean; alignment audit (AUDIT_PORT_BASE=15900) no new findings; 5 CDP captures (module-skills, plan-reminders, settings-permissions, settings-voice, settings-about) confirm slot typography + grid layout preserved.

…ntainer, specs remain runnable (#698)

jackwener · 2026-07-09T14:50:02Z

Round 3 of notes/ui-convergence-map-2026-07-09.md: the two page-header dialects (module h2 shells, settings h3 intros) converge onto one PageHeader primitive with title/subtitle/eyebrow/icon/badge/as/actions/meta slots + data-slot hooks. All 6 call sites migrated, none skipped; daily-review stays header-less by design. No CSS re-pins needed (wrapper descendant selectors match through the slots — verified via live computed styles: module 26px/600, intro 13px/600 preserved). check-a11y brand allow-list gains Maka. Desktop 2293/2293 + ui 46/46 exit-code gated; dead-css + alignment auditor clean; 5 CDP captures verified. Implemented by an opus worktree agent to the map spec.

…ttings intros (convergence round 3) The app grew two independent page-header dialects that kept re-declaring the same title/subtitle/actions structure per call site. Round 3 of the UI convergence map extracts a single shared shell. New primitives/page-header.tsx: PageHeader({ title, subtitle?, eyebrow?, icon?, badge?, as?: 'h2'|'h3', actions?, meta?, className?, titleId? }) plus contentClassName/iconClassName/headingRowClassName/subtitleClassName/ as_wrapper escape hatches so each call site KEEPS its existing wrapper class. The primitive converges STRUCTURE (slot order + arrangement); per-slot typography and surface chrome stay in the wrapper CSS, which targets the slots via unchanged DESCENDANT selectors (`.wrap h2/h3/p`) — so no contract re-pin was needed and radius/pruning pins are untouched. Migrated all 6 call sites: - skills-panel.tsx maka-module-main-header (as=h2, actions) - plan-reminder-panel.tsx maka-plan-hero (as=h2, contentClassName= maka-plan-heading, actions) - permission-center-page.tsx settingsPermissionIntro (as=h3, meta: RelativeTime + refresh Button) - health-center-page.tsx settingsHealthIntro (as=h3, meta: Badge + RelativeTime + refresh; subtitle) - voice-settings-page.tsx settingsFeatureStatusHero (as=h3, icon + 本地自检 badge chip) - about-settings-page.tsx settingsAboutHero (as=h2, icon + version/ channel badge fragment + tagline subtitle) check-a11y: added the app's own product name `Maka` to the brand allow-list (the About title prop tripped english-aria-label). Verified: packages/ui + desktop (main/preload/renderer) builds; desktop 2293 / ui 46 tests green; check-dead-css clean; alignment audit (AUDIT_PORT_BASE=15900) no new findings; 5 CDP captures (module-skills, plan-reminders, settings-permissions, settings-voice, settings-about) confirm slot typography + grid layout preserved.

…ntainer, specs remain runnable (#698)

jackwener · 2026-07-09T14:50:02Z

Round 3 of notes/ui-convergence-map-2026-07-09.md: the two page-header dialects (module h2 shells, settings h3 intros) converge onto one PageHeader primitive with title/subtitle/eyebrow/icon/badge/as/actions/meta slots + data-slot hooks. All 6 call sites migrated, none skipped; daily-review stays header-less by design. No CSS re-pins needed (wrapper descendant selectors match through the slots — verified via live computed styles: module 26px/600, intro 13px/600 preserved). check-a11y brand allow-list gains Maka. Desktop 2293/2293 + ui 46/46 exit-code gated; dead-css + alignment auditor clean; 5 CDP captures verified. Implemented by an opus worktree agent to the map spec.

…ttings intros (convergence round 3) The app grew two independent page-header dialects that kept re-declaring the same title/subtitle/actions structure per call site. Round 3 of the UI convergence map extracts a single shared shell. New primitives/page-header.tsx: PageHeader({ title, subtitle?, eyebrow?, icon?, badge?, as?: 'h2'|'h3', actions?, meta?, className?, titleId? }) plus contentClassName/iconClassName/headingRowClassName/subtitleClassName/ as_wrapper escape hatches so each call site KEEPS its existing wrapper class. The primitive converges STRUCTURE (slot order + arrangement); per-slot typography and surface chrome stay in the wrapper CSS, which targets the slots via unchanged DESCENDANT selectors (`.wrap h2/h3/p`) — so no contract re-pin was needed and radius/pruning pins are untouched. Migrated all 6 call sites: - skills-panel.tsx maka-module-main-header (as=h2, actions) - plan-reminder-panel.tsx maka-plan-hero (as=h2, contentClassName= maka-plan-heading, actions) - permission-center-page.tsx settingsPermissionIntro (as=h3, meta: RelativeTime + refresh Button) - health-center-page.tsx settingsHealthIntro (as=h3, meta: Badge + RelativeTime + refresh; subtitle) - voice-settings-page.tsx settingsFeatureStatusHero (as=h3, icon + 本地自检 badge chip) - about-settings-page.tsx settingsAboutHero (as=h2, icon + version/ channel badge fragment + tagline subtitle) check-a11y: added the app's own product name `Maka` to the brand allow-list (the About title prop tripped english-aria-label). Verified: packages/ui + desktop (main/preload/renderer) builds; desktop 2293 / ui 46 tests green; check-dead-css clean; alignment audit (AUDIT_PORT_BASE=15900) no new findings; 5 CDP captures (module-skills, plan-reminders, settings-permissions, settings-voice, settings-about) confirm slot typography + grid layout preserved.

…ntainer, specs remain runnable (#698)

jackwener merged commit bb169ec into mainJul 9, 2026
3 checks passed

jackwener mentioned this pull request Jul 9, 2026
docs: convergence map status — R3 shipped, R4/R5 cancelled-but-runnable #698
Merged

jackwener added a commit that referenced this pull request Jul 9, 2026
docs: convergence map — R3 shipped (#689); R4/R5 run cancelled by mai…
4ef2d06
…ntainer, specs remain runnable (#698)

jackwener mentioned this pull request Jul 9, 2026
docs: convergence map — campaign complete #705
Merged