refactor(ui): StatTile primitive — four stat-tile recipes become one (convergence R4) by jackwener · Pull Request #701 · apache/maka

jackwener · 2026-07-09T17:04:52Z

Round 4 of notes/ui-convergence-map-2026-07-09.md, executed inline after the agent run was cancelled.

One primitive (packages/ui/src/primitives/stat-tile.tsx, Tailwind-portable like DialogHeader): value slot bakes tabular-nums; emphasis outline|filled; tone paints value ink + (outline) border tint; numeric zero → neutral + dim everywhere (permission's false-alarm rationale generalized)
Migrated: permission summary + health summary (the literal twins), MetricCard (thin alias retained), daily-review totals cell
Typography ladder gains --font-size-stat: 20px — the typography-converge contract rejected my 1.5em arbitrary literal, which is the governance loop doing its job; same for card-converge/radius/tabular-nums/roadmap contracts, each re-pinned to the new form
Screenshot net catch: the first build shipped with a missing import (vite builds don't typecheck) and the health page crashed — caught by the CDP capture, fixed, and full npm run typecheck added to this round's gate

Desktop 2297/2297 + ui 46/46 exit-code gated; dead-css, alignment auditor, health/permission captures all verified.

…(convergence R4) The permission and health summary tiles were literal hand-rolled twins; MetricCard (bot/usage) and the daily-review totals cell repeated the same shape at metric-strip density. One primitive now owns the recipe: - value slot BAKES tabular-nums (tabular-nums contract re-pinned onto the primitive source for the four converged surfaces) - emphasis outline|filled (card tile vs quiet strip); tone paints value ink and, on outline, tints the border (the health model — scans best) - numeric zero drops tone to neutral + dims (the permission '0 已拒绝 in red is a false alarm' rationale, now everywhere) - new --font-size-stat: 20px ladder step retires the ad-hoc 1.5/1.4em (typography-converge rejected the em literal — governance working) - MetricCard stays as a thin alias; wrapper classes keep grid placement - twin CSS blocks deleted; card-converge/radius/roadmap contracts re-pinned to the new forms Caught by the screenshot net: the first build shipped a missing import (vite doesn't typecheck) — full typecheck now part of this round's verification. Desktop 2297/2297, ui 46/46, dead-css + alignment auditor clean, health/permission captures verified.

…ionRow closed with rationale) (#705)

Both recipes the StatTile primitive converged declared `line-height: var(--leading-tight)` on the value in CSS: `.settingsHealthSummaryTile strong` and `.settingsPermissionSummaryValue`. #701 folded them into one primitive and carried the leading as a `leading-tight` utility, which `cn`'s tailwind-merge dropped against the later `text-[length:var(--font-size-stat)]` — a Tailwind v4 font-size utility also carries a line-height, so it read as conflicting. Every outline tile has rendered 5px taller than its own recipe since. Measured on the live app, light, 1440x900: health and permission tiles 76.5 -> 71.5px, value line box 30 -> 25px, widths and element counts unchanged. The filled tile is deliberately left at 1.5 — neither source it converged (daily-review totals cell, `.settingsMetricCard strong`) ever set a line-height, so tightening it would be a new design value rather than a restored one; measured unchanged at 43.875px.

jackwener · 2026-07-09T17:04:52Z

Round 4 of notes/ui-convergence-map-2026-07-09.md, executed inline after the agent run was cancelled.

One primitive (packages/ui/src/primitives/stat-tile.tsx, Tailwind-portable like DialogHeader): value slot bakes tabular-nums; emphasis outline|filled; tone paints value ink + (outline) border tint; numeric zero → neutral + dim everywhere (permission's false-alarm rationale generalized)
Migrated: permission summary + health summary (the literal twins), MetricCard (thin alias retained), daily-review totals cell
Typography ladder gains --font-size-stat: 20px — the typography-converge contract rejected my 1.5em arbitrary literal, which is the governance loop doing its job; same for card-converge/radius/tabular-nums/roadmap contracts, each re-pinned to the new form
Screenshot net catch: the first build shipped with a missing import (vite builds don't typecheck) and the health page crashed — caught by the CDP capture, fixed, and full npm run typecheck added to this round's gate

Desktop 2297/2297 + ui 46/46 exit-code gated; dead-css, alignment auditor, health/permission captures all verified.

…(convergence R4) The permission and health summary tiles were literal hand-rolled twins; MetricCard (bot/usage) and the daily-review totals cell repeated the same shape at metric-strip density. One primitive now owns the recipe: - value slot BAKES tabular-nums (tabular-nums contract re-pinned onto the primitive source for the four converged surfaces) - emphasis outline|filled (card tile vs quiet strip); tone paints value ink and, on outline, tints the border (the health model — scans best) - numeric zero drops tone to neutral + dims (the permission '0 已拒绝 in red is a false alarm' rationale, now everywhere) - new --font-size-stat: 20px ladder step retires the ad-hoc 1.5/1.4em (typography-converge rejected the em literal — governance working) - MetricCard stays as a thin alias; wrapper classes keep grid placement - twin CSS blocks deleted; card-converge/radius/roadmap contracts re-pinned to the new forms Caught by the screenshot net: the first build shipped a missing import (vite doesn't typecheck) — full typecheck now part of this round's verification. Desktop 2297/2297, ui 46/46, dead-css + alignment auditor clean, health/permission captures verified.

…ionRow closed with rationale) (#705)

Both recipes the StatTile primitive converged declared `line-height: var(--leading-tight)` on the value in CSS: `.settingsHealthSummaryTile strong` and `.settingsPermissionSummaryValue`. #701 folded them into one primitive and carried the leading as a `leading-tight` utility, which `cn`'s tailwind-merge dropped against the later `text-[length:var(--font-size-stat)]` — a Tailwind v4 font-size utility also carries a line-height, so it read as conflicting. Every outline tile has rendered 5px taller than its own recipe since. Measured on the live app, light, 1440x900: health and permission tiles 76.5 -> 71.5px, value line box 30 -> 25px, widths and element counts unchanged. The filled tile is deliberately left at 1.5 — neither source it converged (daily-review totals cell, `.settingsMetricCard strong`) ever set a line-height, so tightening it would be a new design value rather than a restored one; measured unchanged at 43.875px.

jackwener · 2026-07-09T17:04:52Z

Round 4 of notes/ui-convergence-map-2026-07-09.md, executed inline after the agent run was cancelled.

One primitive (packages/ui/src/primitives/stat-tile.tsx, Tailwind-portable like DialogHeader): value slot bakes tabular-nums; emphasis outline|filled; tone paints value ink + (outline) border tint; numeric zero → neutral + dim everywhere (permission's false-alarm rationale generalized)
Migrated: permission summary + health summary (the literal twins), MetricCard (thin alias retained), daily-review totals cell
Typography ladder gains --font-size-stat: 20px — the typography-converge contract rejected my 1.5em arbitrary literal, which is the governance loop doing its job; same for card-converge/radius/tabular-nums/roadmap contracts, each re-pinned to the new form
Screenshot net catch: the first build shipped with a missing import (vite builds don't typecheck) and the health page crashed — caught by the CDP capture, fixed, and full npm run typecheck added to this round's gate

Desktop 2297/2297 + ui 46/46 exit-code gated; dead-css, alignment auditor, health/permission captures all verified.

…(convergence R4) The permission and health summary tiles were literal hand-rolled twins; MetricCard (bot/usage) and the daily-review totals cell repeated the same shape at metric-strip density. One primitive now owns the recipe: - value slot BAKES tabular-nums (tabular-nums contract re-pinned onto the primitive source for the four converged surfaces) - emphasis outline|filled (card tile vs quiet strip); tone paints value ink and, on outline, tints the border (the health model — scans best) - numeric zero drops tone to neutral + dims (the permission '0 已拒绝 in red is a false alarm' rationale, now everywhere) - new --font-size-stat: 20px ladder step retires the ad-hoc 1.5/1.4em (typography-converge rejected the em literal — governance working) - MetricCard stays as a thin alias; wrapper classes keep grid placement - twin CSS blocks deleted; card-converge/radius/roadmap contracts re-pinned to the new forms Caught by the screenshot net: the first build shipped a missing import (vite doesn't typecheck) — full typecheck now part of this round's verification. Desktop 2297/2297, ui 46/46, dead-css + alignment auditor clean, health/permission captures verified.

…ionRow closed with rationale) (#705)

Both recipes the StatTile primitive converged declared `line-height: var(--leading-tight)` on the value in CSS: `.settingsHealthSummaryTile strong` and `.settingsPermissionSummaryValue`. #701 folded them into one primitive and carried the leading as a `leading-tight` utility, which `cn`'s tailwind-merge dropped against the later `text-[length:var(--font-size-stat)]` — a Tailwind v4 font-size utility also carries a line-height, so it read as conflicting. Every outline tile has rendered 5px taller than its own recipe since. Measured on the live app, light, 1440x900: health and permission tiles 76.5 -> 71.5px, value line box 30 -> 25px, widths and element counts unchanged. The filled tile is deliberately left at 1.5 — neither source it converged (daily-review totals cell, `.settingsMetricCard strong`) ever set a line-height, so tightening it would be a new design value rather than a restored one; measured unchanged at 43.875px.

jackwener · 2026-07-09T17:04:52Z

Round 4 of notes/ui-convergence-map-2026-07-09.md, executed inline after the agent run was cancelled.

One primitive (packages/ui/src/primitives/stat-tile.tsx, Tailwind-portable like DialogHeader): value slot bakes tabular-nums; emphasis outline|filled; tone paints value ink + (outline) border tint; numeric zero → neutral + dim everywhere (permission's false-alarm rationale generalized)
Migrated: permission summary + health summary (the literal twins), MetricCard (thin alias retained), daily-review totals cell
Typography ladder gains --font-size-stat: 20px — the typography-converge contract rejected my 1.5em arbitrary literal, which is the governance loop doing its job; same for card-converge/radius/tabular-nums/roadmap contracts, each re-pinned to the new form
Screenshot net catch: the first build shipped with a missing import (vite builds don't typecheck) and the health page crashed — caught by the CDP capture, fixed, and full npm run typecheck added to this round's gate

Desktop 2297/2297 + ui 46/46 exit-code gated; dead-css, alignment auditor, health/permission captures all verified.

…(convergence R4) The permission and health summary tiles were literal hand-rolled twins; MetricCard (bot/usage) and the daily-review totals cell repeated the same shape at metric-strip density. One primitive now owns the recipe: - value slot BAKES tabular-nums (tabular-nums contract re-pinned onto the primitive source for the four converged surfaces) - emphasis outline|filled (card tile vs quiet strip); tone paints value ink and, on outline, tints the border (the health model — scans best) - numeric zero drops tone to neutral + dims (the permission '0 已拒绝 in red is a false alarm' rationale, now everywhere) - new --font-size-stat: 20px ladder step retires the ad-hoc 1.5/1.4em (typography-converge rejected the em literal — governance working) - MetricCard stays as a thin alias; wrapper classes keep grid placement - twin CSS blocks deleted; card-converge/radius/roadmap contracts re-pinned to the new forms Caught by the screenshot net: the first build shipped a missing import (vite doesn't typecheck) — full typecheck now part of this round's verification. Desktop 2297/2297, ui 46/46, dead-css + alignment auditor clean, health/permission captures verified.

…ionRow closed with rationale) (#705)

Both recipes the StatTile primitive converged declared `line-height: var(--leading-tight)` on the value in CSS: `.settingsHealthSummaryTile strong` and `.settingsPermissionSummaryValue`. #701 folded them into one primitive and carried the leading as a `leading-tight` utility, which `cn`'s tailwind-merge dropped against the later `text-[length:var(--font-size-stat)]` — a Tailwind v4 font-size utility also carries a line-height, so it read as conflicting. Every outline tile has rendered 5px taller than its own recipe since. Measured on the live app, light, 1440x900: health and permission tiles 76.5 -> 71.5px, value line box 30 -> 25px, widths and element counts unchanged. The filled tile is deliberately left at 1.5 — neither source it converged (daily-review totals cell, `.settingsMetricCard strong`) ever set a line-height, so tightening it would be a new design value rather than a restored one; measured unchanged at 43.875px.

jackwener · 2026-07-09T17:04:52Z

Round 4 of notes/ui-convergence-map-2026-07-09.md, executed inline after the agent run was cancelled.

One primitive (packages/ui/src/primitives/stat-tile.tsx, Tailwind-portable like DialogHeader): value slot bakes tabular-nums; emphasis outline|filled; tone paints value ink + (outline) border tint; numeric zero → neutral + dim everywhere (permission's false-alarm rationale generalized)
Migrated: permission summary + health summary (the literal twins), MetricCard (thin alias retained), daily-review totals cell
Typography ladder gains --font-size-stat: 20px — the typography-converge contract rejected my 1.5em arbitrary literal, which is the governance loop doing its job; same for card-converge/radius/tabular-nums/roadmap contracts, each re-pinned to the new form
Screenshot net catch: the first build shipped with a missing import (vite builds don't typecheck) and the health page crashed — caught by the CDP capture, fixed, and full npm run typecheck added to this round's gate

Desktop 2297/2297 + ui 46/46 exit-code gated; dead-css, alignment auditor, health/permission captures all verified.

…(convergence R4) The permission and health summary tiles were literal hand-rolled twins; MetricCard (bot/usage) and the daily-review totals cell repeated the same shape at metric-strip density. One primitive now owns the recipe: - value slot BAKES tabular-nums (tabular-nums contract re-pinned onto the primitive source for the four converged surfaces) - emphasis outline|filled (card tile vs quiet strip); tone paints value ink and, on outline, tints the border (the health model — scans best) - numeric zero drops tone to neutral + dims (the permission '0 已拒绝 in red is a false alarm' rationale, now everywhere) - new --font-size-stat: 20px ladder step retires the ad-hoc 1.5/1.4em (typography-converge rejected the em literal — governance working) - MetricCard stays as a thin alias; wrapper classes keep grid placement - twin CSS blocks deleted; card-converge/radius/roadmap contracts re-pinned to the new forms Caught by the screenshot net: the first build shipped a missing import (vite doesn't typecheck) — full typecheck now part of this round's verification. Desktop 2297/2297, ui 46/46, dead-css + alignment auditor clean, health/permission captures verified.

…ionRow closed with rationale) (#705)

Both recipes the StatTile primitive converged declared `line-height: var(--leading-tight)` on the value in CSS: `.settingsHealthSummaryTile strong` and `.settingsPermissionSummaryValue`. #701 folded them into one primitive and carried the leading as a `leading-tight` utility, which `cn`'s tailwind-merge dropped against the later `text-[length:var(--font-size-stat)]` — a Tailwind v4 font-size utility also carries a line-height, so it read as conflicting. Every outline tile has rendered 5px taller than its own recipe since. Measured on the live app, light, 1440x900: health and permission tiles 76.5 -> 71.5px, value line box 30 -> 25px, widths and element counts unchanged. The filled tile is deliberately left at 1.5 — neither source it converged (daily-review totals cell, `.settingsMetricCard strong`) ever set a line-height, so tightening it would be a new design value rather than a restored one; measured unchanged at 43.875px.

jackwener · 2026-07-09T17:04:52Z

Round 4 of notes/ui-convergence-map-2026-07-09.md, executed inline after the agent run was cancelled.

One primitive (packages/ui/src/primitives/stat-tile.tsx, Tailwind-portable like DialogHeader): value slot bakes tabular-nums; emphasis outline|filled; tone paints value ink + (outline) border tint; numeric zero → neutral + dim everywhere (permission's false-alarm rationale generalized)
Migrated: permission summary + health summary (the literal twins), MetricCard (thin alias retained), daily-review totals cell
Typography ladder gains --font-size-stat: 20px — the typography-converge contract rejected my 1.5em arbitrary literal, which is the governance loop doing its job; same for card-converge/radius/tabular-nums/roadmap contracts, each re-pinned to the new form
Screenshot net catch: the first build shipped with a missing import (vite builds don't typecheck) and the health page crashed — caught by the CDP capture, fixed, and full npm run typecheck added to this round's gate

Desktop 2297/2297 + ui 46/46 exit-code gated; dead-css, alignment auditor, health/permission captures all verified.

…(convergence R4) The permission and health summary tiles were literal hand-rolled twins; MetricCard (bot/usage) and the daily-review totals cell repeated the same shape at metric-strip density. One primitive now owns the recipe: - value slot BAKES tabular-nums (tabular-nums contract re-pinned onto the primitive source for the four converged surfaces) - emphasis outline|filled (card tile vs quiet strip); tone paints value ink and, on outline, tints the border (the health model — scans best) - numeric zero drops tone to neutral + dims (the permission '0 已拒绝 in red is a false alarm' rationale, now everywhere) - new --font-size-stat: 20px ladder step retires the ad-hoc 1.5/1.4em (typography-converge rejected the em literal — governance working) - MetricCard stays as a thin alias; wrapper classes keep grid placement - twin CSS blocks deleted; card-converge/radius/roadmap contracts re-pinned to the new forms Caught by the screenshot net: the first build shipped a missing import (vite doesn't typecheck) — full typecheck now part of this round's verification. Desktop 2297/2297, ui 46/46, dead-css + alignment auditor clean, health/permission captures verified.

…ionRow closed with rationale) (#705)

Both recipes the StatTile primitive converged declared `line-height: var(--leading-tight)` on the value in CSS: `.settingsHealthSummaryTile strong` and `.settingsPermissionSummaryValue`. #701 folded them into one primitive and carried the leading as a `leading-tight` utility, which `cn`'s tailwind-merge dropped against the later `text-[length:var(--font-size-stat)]` — a Tailwind v4 font-size utility also carries a line-height, so it read as conflicting. Every outline tile has rendered 5px taller than its own recipe since. Measured on the live app, light, 1440x900: health and permission tiles 76.5 -> 71.5px, value line box 30 -> 25px, widths and element counts unchanged. The filled tile is deliberately left at 1.5 — neither source it converged (daily-review totals cell, `.settingsMetricCard strong`) ever set a line-height, so tightening it would be a new design value rather than a restored one; measured unchanged at 43.875px.

jackwener · 2026-07-09T17:04:52Z

Round 4 of notes/ui-convergence-map-2026-07-09.md, executed inline after the agent run was cancelled.

One primitive (packages/ui/src/primitives/stat-tile.tsx, Tailwind-portable like DialogHeader): value slot bakes tabular-nums; emphasis outline|filled; tone paints value ink + (outline) border tint; numeric zero → neutral + dim everywhere (permission's false-alarm rationale generalized)
Migrated: permission summary + health summary (the literal twins), MetricCard (thin alias retained), daily-review totals cell
Typography ladder gains --font-size-stat: 20px — the typography-converge contract rejected my 1.5em arbitrary literal, which is the governance loop doing its job; same for card-converge/radius/tabular-nums/roadmap contracts, each re-pinned to the new form
Screenshot net catch: the first build shipped with a missing import (vite builds don't typecheck) and the health page crashed — caught by the CDP capture, fixed, and full npm run typecheck added to this round's gate

Desktop 2297/2297 + ui 46/46 exit-code gated; dead-css, alignment auditor, health/permission captures all verified.

…(convergence R4) The permission and health summary tiles were literal hand-rolled twins; MetricCard (bot/usage) and the daily-review totals cell repeated the same shape at metric-strip density. One primitive now owns the recipe: - value slot BAKES tabular-nums (tabular-nums contract re-pinned onto the primitive source for the four converged surfaces) - emphasis outline|filled (card tile vs quiet strip); tone paints value ink and, on outline, tints the border (the health model — scans best) - numeric zero drops tone to neutral + dims (the permission '0 已拒绝 in red is a false alarm' rationale, now everywhere) - new --font-size-stat: 20px ladder step retires the ad-hoc 1.5/1.4em (typography-converge rejected the em literal — governance working) - MetricCard stays as a thin alias; wrapper classes keep grid placement - twin CSS blocks deleted; card-converge/radius/roadmap contracts re-pinned to the new forms Caught by the screenshot net: the first build shipped a missing import (vite doesn't typecheck) — full typecheck now part of this round's verification. Desktop 2297/2297, ui 46/46, dead-css + alignment auditor clean, health/permission captures verified.

…ionRow closed with rationale) (#705)

Both recipes the StatTile primitive converged declared `line-height: var(--leading-tight)` on the value in CSS: `.settingsHealthSummaryTile strong` and `.settingsPermissionSummaryValue`. #701 folded them into one primitive and carried the leading as a `leading-tight` utility, which `cn`'s tailwind-merge dropped against the later `text-[length:var(--font-size-stat)]` — a Tailwind v4 font-size utility also carries a line-height, so it read as conflicting. Every outline tile has rendered 5px taller than its own recipe since. Measured on the live app, light, 1440x900: health and permission tiles 76.5 -> 71.5px, value line box 30 -> 25px, widths and element counts unchanged. The filled tile is deliberately left at 1.5 — neither source it converged (daily-review totals cell, `.settingsMetricCard strong`) ever set a line-height, so tightening it would be a new design value rather than a restored one; measured unchanged at 43.875px.

jackwener · 2026-07-09T17:04:52Z

Round 4 of notes/ui-convergence-map-2026-07-09.md, executed inline after the agent run was cancelled.

One primitive (packages/ui/src/primitives/stat-tile.tsx, Tailwind-portable like DialogHeader): value slot bakes tabular-nums; emphasis outline|filled; tone paints value ink + (outline) border tint; numeric zero → neutral + dim everywhere (permission's false-alarm rationale generalized)
Migrated: permission summary + health summary (the literal twins), MetricCard (thin alias retained), daily-review totals cell
Typography ladder gains --font-size-stat: 20px — the typography-converge contract rejected my 1.5em arbitrary literal, which is the governance loop doing its job; same for card-converge/radius/tabular-nums/roadmap contracts, each re-pinned to the new form
Screenshot net catch: the first build shipped with a missing import (vite builds don't typecheck) and the health page crashed — caught by the CDP capture, fixed, and full npm run typecheck added to this round's gate

Desktop 2297/2297 + ui 46/46 exit-code gated; dead-css, alignment auditor, health/permission captures all verified.

…(convergence R4) The permission and health summary tiles were literal hand-rolled twins; MetricCard (bot/usage) and the daily-review totals cell repeated the same shape at metric-strip density. One primitive now owns the recipe: - value slot BAKES tabular-nums (tabular-nums contract re-pinned onto the primitive source for the four converged surfaces) - emphasis outline|filled (card tile vs quiet strip); tone paints value ink and, on outline, tints the border (the health model — scans best) - numeric zero drops tone to neutral + dims (the permission '0 已拒绝 in red is a false alarm' rationale, now everywhere) - new --font-size-stat: 20px ladder step retires the ad-hoc 1.5/1.4em (typography-converge rejected the em literal — governance working) - MetricCard stays as a thin alias; wrapper classes keep grid placement - twin CSS blocks deleted; card-converge/radius/roadmap contracts re-pinned to the new forms Caught by the screenshot net: the first build shipped a missing import (vite doesn't typecheck) — full typecheck now part of this round's verification. Desktop 2297/2297, ui 46/46, dead-css + alignment auditor clean, health/permission captures verified.

…ionRow closed with rationale) (#705)

Both recipes the StatTile primitive converged declared `line-height: var(--leading-tight)` on the value in CSS: `.settingsHealthSummaryTile strong` and `.settingsPermissionSummaryValue`. #701 folded them into one primitive and carried the leading as a `leading-tight` utility, which `cn`'s tailwind-merge dropped against the later `text-[length:var(--font-size-stat)]` — a Tailwind v4 font-size utility also carries a line-height, so it read as conflicting. Every outline tile has rendered 5px taller than its own recipe since. Measured on the live app, light, 1440x900: health and permission tiles 76.5 -> 71.5px, value line box 30 -> 25px, widths and element counts unchanged. The filled tile is deliberately left at 1.5 — neither source it converged (daily-review totals cell, `.settingsMetricCard strong`) ever set a line-height, so tightening it would be a new design value rather than a restored one; measured unchanged at 43.875px.

jackwener merged commit 7837700 into mainJul 9, 2026

jackwener deleted the feat/convergence-r4-stattile branch July 9, 2026 17:05

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

jackwener added a commit that referenced this pull request Jul 9, 2026
docs: convergence map — campaign complete (R4#701, R5#703/#704; Act…
a0d29e0
…ionRow closed with rationale) (#705)