design: tokens admin diff and export

[Dubemtopsite]

Closes #497

Description

Designers iterating on tokens need to see what changed between saves and export the diff. This PR adds a token diff & export section to the Design Tokens admin page with a three-column diff layout highlighting added, changed, and removed tokens, plus per-format export (JSON, CSS variables, Sass) with copy-to-clipboard and download affordances.

What changed

• New TokenDiff component (src/pages/DesignTokens/TokenDiff.tsx)
  • Three-column layout: Token | Before | After, with status badges (Added / Changed / Removed / Unchanged) on every row
  • Summary chips with live counts (added / changed / removed / unchanged)
  • Status filter segmented control (All / Added / Changed / Removed) and a "Show unchanged" toggle — off by default so large diffs stay readable
  • Collapsible per-category groups showing visible row counts
  • Color swatches rendered next to hex values so hue shifts are visible at a glance
  • Binary tokens (icons/assets) labeled "Binary asset" instead of raw payloads
  • Empty (no changes) state when snapshots match, plus a filter-empty state
  • Export panel with format tabs (JSON / CSS variables / Sass), live preview, copy-to-clipboard, and per-format download
• Diff engine + export formatters (src/pages/DesignTokens/tokenDiff.ts)
  • computeTokenDiff(before, after) classifies added/changed/removed/unchanged by CSS variable across groups
  • formatDiffJSON → { added, changed, removed }; formatDiffCSS → :root { /* added */ ... } with removed tokens commented out; formatDiffSass → $var: value; grouped under comments
  • Bundled TOKEN_DIFF_BEFORE / TOKEN_DIFF_AFTER snapshot data demonstrating every change type (including binary icon tokens)
• Page integration (DesignTokensPage.tsx) renders the section after the token groups
• Accessibility fixes on the existing page so the whole page passes jest-axe
  • Removed invalid role="row" / role="table" usage on token rows and chart swatch grid (rows contained non-cell children)
  • Removed nested <main> landmarks and non-unique <nav> landmarks in DevicePreview
  • Fixed heading-order jumps (h4→h3/h2) in the device preview and chart guidelines
• Docs: docs/uiux/ux497-token-diff-export.md documents the anatomy, behavior, large-diff readability, WCAG 2.1 AA notes, responsive/RTL behavior, and implementation pointers
• Coverage thresholds enforced for the new files in vite.config.ts

Accessibility (axe)

• jest-axe runs on both the new TokenDiff component and the full DesignTokensPage — 0 violations
• Status never conveyed by color alone (text badges + aria-label on rows)
• role="tablist"/"tab" with aria-selected, aria-pressed toggles, aria-live status regions, visible focus indicators
• RTL support via CSS logical properties (padding-inline, border-inline-end, text-align: start); code preview forces direction: ltr

Edge cases covered

• Very large diffs → unchanged rows hidden by default, collapsible groups, status filters, wrapping values, scrollable export preview
• Binary tokens (icons) → labeled "Binary asset" in UI and [binary asset] in exports
• RTL layout → logical properties used throughout
• Empty (no changes) state and filter-empty state

Tests

• src/pages/DesignTokens/TokenDiff.test.tsx — 27 unit + interaction tests
• src/pages/DesignTokens/DesignTokensPage.test.tsx — updated for new section + axe test
• Coverage: TokenDiff.tsx 95.94% lines / 96% functions / 96.77% branches / 100% statements, tokenDiff.ts 100% lines / 97.43% branches / 100% functions / 100% statements (≥95% threshold enforced)
• npm run lint clean on all changed files; npm run build succeeds

Screenshots

Not included — this repo has no visual test harness. The rendered diff section can be previewed at /design-tokens locally (e.g. npm run dev), and the design rationale is documented in docs/uiux/ux497-token-diff-export.md.

Note: npm test full-suite failures in unrelated files (e.g. KycSelfieCapture, AuditTrail, DistributionDashboard, TwoFactorSetup.test, Tabs.tsx) are pre-existing on master (parse/syntax errors in files untouched by this PR) and verified as such.

[drips-wave]

@Dubemtopsite Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits