feat(web): align panel and metric typography with Hearth scale

[Joncallim]

Summary

• align shared Panel and Metric spacing/type roles through defined Hearth-aligned aliases
• keep operational state, topology workspace, and Copilot-specific styling outside this neutral primitive slice
• add CSS contract coverage for panel/metric aliases and protected operational/topology selectors

Validation

added 256 packages, and audited 260 packages in 2s

55 packages are looking for funding
run npm fund for details

6 vulnerabilities (3 moderate, 3 high)

To address all issues, run:
npm audit fix

Run npm audit for details.

@dockermap/web@0.1.0 test
vitest run --passWithNoTests --run src/panel-metric-tokens.test.ts

RUN v4.1.9 /tmp/dockermap-67-hearth-panel-metric-type/apps/web

Test Files 1 passed (1)
Tests 2 passed (2)
Start at 00:45:01
Duration 118ms (transform 16ms, setup 0ms, import 24ms, tests 3ms, environment 0ms)

dockermap-monorepo@0.1.0 typecheck
npm run typecheck --workspaces --if-present

@dockermap/api@0.1.0 typecheck
tsc --project tsconfig.json

@dockermap/web@0.1.0 typecheck
tsc --project tsconfig.json

@dockermap/contracts@0.1.0 typecheck
tsc --project tsconfig.json

dockermap-monorepo@0.1.0 test:web
npm run test --workspace @dockermap/web --if-present

@dockermap/web@0.1.0 test
vitest run --passWithNoTests

RUN v4.1.9 /tmp/dockermap-67-hearth-panel-metric-type/apps/web

Test Files 33 passed (33)
Tests 317 passed (317)
Start at 00:45:06
Duration 2.22s (transform 5.11s, setup 0ms, import 10.73s, tests 3.37s, environment 8.07s) (317 tests)

dockermap-monorepo@0.1.0 build
npm run build --workspaces --if-present

@dockermap/api@0.1.0 build
npm run build --workspace @dockermap/contracts && tsc --project tsconfig.json

@dockermap/contracts@0.1.0 build
tsc --project tsconfig.build.json

@dockermap/web@0.1.0 build
tsc --project tsconfig.json && vite build

vite v8.0.16 building client environment for production...
�[2K
transforming...✓ 68 modules transformed.
rendering chunks...
computing gzip size...
dist/index.html 0.51 kB │ gzip: 0.31 kB
dist/assets/index-DnhApYTl.css 35.06 kB │ gzip: 7.42 kB
dist/assets/index-Czh7IJcC.js 383.37 kB │ gzip: 112.09 kB

✓ built in 222ms

@dockermap/contracts@0.1.0 build
tsc --project tsconfig.build.json

dockermap-monorepo@0.1.0 test:e2e:a11y
playwright test --config tests/e2e/playwright.config.ts a11y.spec.ts

Running 77 tests using 1 worker

✓ 1 tests/e2e/a11y.spec.ts:79:11 › responsive and accessibility matrix › axe core dark: home (937ms)
✓ 2 tests/e2e/a11y.spec.ts:79:11 › responsive and accessibility matrix › axe core dark: map (933ms)
✓ 3 tests/e2e/a11y.spec.ts:79:11 › responsive and accessibility matrix › axe core dark: runtime (992ms)
✓ 4 tests/e2e/a11y.spec.ts:79:11 › responsive and accessibility matrix › axe core dark: changes (718ms)
✓ 5 tests/e2e/a11y.spec.ts:79:11 › responsive and accessibility matrix › axe core dark: copilot (727ms)
✓ 6 tests/e2e/a11y.spec.ts:79:11 › responsive and accessibility matrix › axe core dark: networking (870ms)
✓ 7 tests/e2e/a11y.spec.ts:79:11 › responsive and accessibility matrix › axe core dark: network-detail (805ms)
✓ 8 tests/e2e/a11y.spec.ts:79:11 › responsive and accessibility matrix › axe core dark: storage (793ms)
✓ 9 tests/e2e/a11y.spec.ts:79:11 › responsive and accessibility matrix › axe core dark: volume-detail (786ms)
✓ 10 tests/e2e/a11y.spec.ts:79:11 › responsive and accessibility matrix › axe core dark: images (811ms)
✓ 11 tests/e2e/a11y.spec.ts:79:11 › responsive and accessibility matrix › axe core dark: image-detail (804ms)
✓ 12 tests/e2e/a11y.spec.ts:79:11 › responsive and accessibility matrix › axe core dark: logs (846ms)
✓ 13 tests/e2e/a11y.spec.ts:79:11 › responsive and accessibility matrix › axe core dark: compose (736ms)
✓ 14 tests/e2e/a11y.spec.ts:79:11 › responsive and accessibility matrix › axe core dark: diagnostics (769ms)
✓ 15 tests/e2e/a11y.spec.ts:79:11 › responsive and accessibility matrix › axe core dark: settings (858ms)
✓ 16 tests/e2e/a11y.spec.ts:79:11 › responsive and accessibility matrix › axe core dark: service-detail (898ms)
✓ 17 tests/e2e/a11y.spec.ts:79:11 › responsive and accessibility matrix › axe core dark: not-found (670ms)
✓ 18 tests/e2e/a11y.spec.ts:87:9 › responsive and accessibility matrix › axe dark: token screen (554ms)
✓ 19 tests/e2e/a11y.spec.ts:101:11 › responsive and accessibility matrix › axe dark: service tab overview (958ms)
✓ 20 tests/e2e/a11y.spec.ts:101:11 › responsive and accessibility matrix › axe dark: service tab dependencies (890ms)
✓ 21 tests/e2e/a11y.spec.ts:101:11 › responsive and accessibility matrix › axe dark: service tab resources (866ms)
✓ 22 tests/e2e/a11y.spec.ts:101:11 › responsive and accessibility matrix › axe dark: service tab logs (862ms)
✓ 23 tests/e2e/a11y.spec.ts:101:11 › responsive and accessibility matrix › axe dark: service tab configuration (891ms)
✓ 24 tests/e2e/a11y.spec.ts:112:9 › responsive and accessibility matrix › axe dark: service configuration internals expanded (930ms)
✓ 25 tests/e2e/a11y.spec.ts:125:11 › responsive and accessibility matrix › axe dark: network disclosure collapsed (792ms)
✓ 26 tests/e2e/a11y.spec.ts:134:11 › responsive and accessibility matrix › axe dark: network disclosure expanded (854ms)
✓ 27 tests/e2e/a11y.spec.ts:125:11 › responsive and accessibility matrix › axe dark: volume disclosure collapsed (783ms)
✓ 28 tests/e2e/a11y.spec.ts:134:11 › responsive and accessibility matrix › axe dark: volume disclosure expanded (849ms)
✓ 29 tests/e2e/a11y.spec.ts:125:11 › responsive and accessibility matrix › axe dark: image disclosure collapsed (793ms)
✓ 30 tests/e2e/a11y.spec.ts:134:11 › responsive and accessibility matrix › axe dark: image disclosure expanded (828ms)
✓ 31 tests/e2e/a11y.spec.ts:145:9 › responsive and accessibility matrix › axe dark: command palette open (870ms)
✓ 32 tests/e2e/a11y.spec.ts:154:9 › responsive and accessibility matrix › axe dark: command palette empty state (756ms)
✓ 33 tests/e2e/a11y.spec.ts:79:11 › responsive and accessibility matrix › axe core light: home (873ms)
✓ 34 tests/e2e/a11y.spec.ts:79:11 › responsive and accessibility matrix › axe core light: map (943ms)
✓ 35 tests/e2e/a11y.spec.ts:79:11 › responsive and accessibility matrix › axe core light: runtime (1.1s)
✓ 36 tests/e2e/a11y.spec.ts:79:11 › responsive and accessibility matrix › axe core light: changes (796ms)
✓ 37 tests/e2e/a11y.spec.ts:79:11 › responsive and accessibility matrix › axe core light: copilot (780ms)
✓ 38 tests/e2e/a11y.spec.ts:79:11 › responsive and accessibility matrix › axe core light: networking (942ms)
✓ 39 tests/e2e/a11y.spec.ts:79:11 › responsive and accessibility matrix › axe core light: network-detail (903ms)
✓ 40 tests/e2e/a11y.spec.ts:79:11 › responsive and accessibility matrix › axe core light: storage (892ms)
✓ 41 tests/e2e/a11y.spec.ts:79:11 › responsive and accessibility matrix › axe core light: volume-detail (896ms)
✓ 42 tests/e2e/a11y.spec.ts:79:11 › responsive and accessibility matrix › axe core light: images (923ms)
✓ 43 tests/e2e/a11y.spec.ts:79:11 › responsive and accessibility matrix › axe core light: image-detail (878ms)
✓ 44 tests/e2e/a11y.spec.ts:79:11 › responsive and accessibility matrix › axe core light: logs (945ms)
✓ 45 tests/e2e/a11y.spec.ts:79:11 › responsive and accessibility matrix › axe core light: compose (1.8s)
✓ 46 tests/e2e/a11y.spec.ts:79:11 › responsive and accessibility matrix › axe core light: diagnostics (1.3s)
✓ 47 tests/e2e/a11y.spec.ts:79:11 › responsive and accessibility matrix › axe core light: settings (974ms)
✓ 48 tests/e2e/a11y.spec.ts:79:11 › responsive and accessibility matrix › axe core light: service-detail (1.0s)
✓ 49 tests/e2e/a11y.spec.ts:79:11 › responsive and accessibility matrix › axe core light: not-found (792ms)
✓ 50 tests/e2e/a11y.spec.ts:87:9 › responsive and accessibility matrix › axe light: token screen (658ms)
✓ 51 tests/e2e/a11y.spec.ts:101:11 › responsive and accessibility matrix › axe light: service tab overview (1.1s)
✓ 52 tests/e2e/a11y.spec.ts:101:11 › responsive and accessibility matrix › axe light: service tab dependencies (976ms)
✓ 53 tests/e2e/a11y.spec.ts:101:11 › responsive and accessibility matrix › axe light: service tab resources (1.1s)
✓ 54 tests/e2e/a11y.spec.ts:101:11 › responsive and accessibility matrix › axe light: service tab logs (963ms)
✓ 55 tests/e2e/a11y.spec.ts:101:11 › responsive and accessibility matrix › axe light: service tab configuration (985ms)
✓ 56 tests/e2e/a11y.spec.ts:112:9 › responsive and accessibility matrix › axe light: service configuration internals expanded (1.0s)
✓ 57 tests/e2e/a11y.spec.ts:125:11 › responsive and accessibility matrix › axe light: network disclosure collapsed (834ms)
✓ 58 tests/e2e/a11y.spec.ts:134:11 › responsive and accessibility matrix › axe light: network disclosure expanded (991ms)
✓ 59 tests/e2e/a11y.spec.ts:125:11 › responsive and accessibility matrix › axe light: volume disclosure collapsed (890ms)
✓ 60 tests/e2e/a11y.spec.ts:134:11 › responsive and accessibility matrix › axe light: volume disclosure expanded (931ms)
✓ 61 tests/e2e/a11y.spec.ts:125:11 › responsive and accessibility matrix › axe light: image disclosure collapsed (908ms)
✓ 62 tests/e2e/a11y.spec.ts:134:11 › responsive and accessibility matrix › axe light: image disclosure expanded (901ms)
✓ 63 tests/e2e/a11y.spec.ts:145:9 › responsive and accessibility matrix › axe light: command palette open (963ms)
✓ 64 tests/e2e/a11y.spec.ts:154:9 › responsive and accessibility matrix › axe light: command palette empty state (880ms)
✓ 65 tests/e2e/a11y.spec.ts:169:7 › responsive and accessibility matrix › keyboard focus, selections, and aria controls (1.7s)
✓ 66 tests/e2e/a11y.spec.ts:346:9 › responsive and accessibility matrix › responsive 800px has no page overflow, clipped text, or clipped controls (7.6s)
✓ 67 tests/e2e/a11y.spec.ts:346:9 › responsive and accessibility matrix › responsive 640px has no page overflow, clipped text, or clipped controls (7.4s)
✓ 68 tests/e2e/a11y.spec.ts:469:7 › responsive and accessibility matrix › long, empty, and duplicate identities reflow instead of clipping at 640px (390ms)
✓ 69 tests/e2e/a11y.spec.ts:534:7 › responsive and accessibility matrix › service detail and change center surfaces report updates as not collected (493ms)
✓ 70 tests/e2e/a11y.spec.ts:555:7 › responsive and accessibility matrix › change history reports not collected under live authority (500ms)
✓ 71 tests/e2e/a11y.spec.ts:582:7 › responsive and accessibility matrix › change history renders tagged samples in demo mode (299ms)
✓ 72 tests/e2e/a11y.spec.ts:602:7 › responsive and accessibility matrix › resources report non-collection under intercepted live authority (939ms)
✓ 73 tests/e2e/a11y.spec.ts:618:7 › responsive and accessibility matrix › resources remain unavailable in the default mock stack (350ms)
✓ 74 tests/e2e/a11y.spec.ts:629:7 › responsive and accessibility matrix › resources render tagged samples only in explicit demo mode (340ms)
✓ 75 tests/e2e/a11y.spec.ts:645:7 › responsive and accessibility matrix › async route heading is promoted without a late focus steal (8.2s)
✓ 76 tests/e2e/a11y.spec.ts:717:7 › responsive and accessibility matrix › non-text contrast keeps state dots and focus rings at 3:1 without a network overlay (674ms)
✓ 77 tests/e2e/a11y.spec.ts:755:7 › responsive and accessibility matrix › reduced motion disables every visible infinite animation (334ms)

77 passed (1.5m) (77 tests)

Stacked on #238 so the defined compact type alias is shared. No API, runtime, or screen behavior change.

[chatgpt-codex-connector]

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review	Status	Commit	Review trigger
📝 Code Review	✅ Completed 2026-09-02T16:49:25.060679Z	57d7c33	PR opened

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.