Run 2: Visual Foundation — Byproducts Log

Date: 2026-03-19

Discovered Issues

1. ResizeObserver Not Mocked in Vitest Setup

Severity: Medium — blocks any test that renders Radix UI Tooltip, DropdownMenu, Popover, or Select components (all use PopperContent which calls ResizeObserver).

Affected files: src/components/canary/atoms/icon-button/icon-button.test.tsx (and any future tests for components using Radix popper primitives).

Fix applied: Added no-op ResizeObserver mock to vitest.setup.ts.

if (typeof ResizeObserver === 'undefined') {
  global.ResizeObserver = class ResizeObserver {
    observe() {}
    unobserve() {}
    disconnect() {}
  };
}

Note for future runs: Any new canary atom that wraps a Radix component with PopperContent (Tooltip, Combobox, Select, etc.) will need this mock. It’s now in the global setup so all tests benefit automatically.

---

2. VRT Baselines Not Updated

Severity: High — exit criterion 7 (git status --porcelain __screenshots__/ | wc -l = 0) and criterion 8 (VRT tests pass) are not yet satisfied.

Cause: Playwright browser was occupied by another session during this run. The npm run dev (Storybook server) background process was also blocked by permission sandbox.

Required action: After this run, with a clean browser session:

# Start Storybook dev server
cd /Users/jmp/code/arda/ux-prototype
npm run dev &

# Wait for it to start, then regenerate all VRT baselines
npx playwright test --project=vrt --update-snapshots

# Commit the new baselines
git add __screenshots__/
git commit -m "chore: regenerate VRT baselines after themeQuartz migration (Run 2)"

Expected diffs: All grid-related stories will have changed visuals:

• Row heights: browser default → 48px
• Header heights: browser default → 36px
• Fonts: system default → Geist Sans 14px body / 13px 600-weight headers
• Cell padding: default → 12px
• Border radius on wrapper: 0 → 8px
• Colors: AG Grid defaults → Arda orange tokens (primary = oklch(0.637 0.222 29))

---

3. --accent-light Token Not Present in ux-prototype’s tokens.css

Severity: Low — observation only, no action required.

The worktree’s gridColorVars uses var(--accent-light) for --ag-selected-row-background-color. This token does not exist in ux-prototype/src/styles/tokens.css. The ux-prototype’s DataGrid correctly uses var(--primary-muted) instead, which is defined as oklch(0.98 0.016 29) — a very light Arda orange tint functionally equivalent to what --accent-light would provide.

If the worktree is ever merged into ux-prototype, --accent-light should be aliased or removed in favor of --primary-muted.

---

4. ag-theme-arda.css Import in DataGrid Molecule

Observation: data-grid.tsx imports @/styles/canary/ag-theme-arda.css (line 24). The worktree’s item-grid.tsx does not have this import — the worktree relies entirely on themeQuartz.withParams() and CSS variable cascading from a container div.

Assessment: The ag-theme-arda.css import in the DataGrid molecule appears to be supplementary CSS that extends the themeQuartz with any additional Arda-specific overrides not coverable via withParams(). This is safe to keep — it does not conflict with the themeQuartz approach.

Action for Run 6: When integrating the item-grid into ux-prototype, verify whether ag-theme-arda.css contents are still needed or can be replaced entirely by themeQuartz.withParams().

---

TODOs for Later Runs

Priority	Item	Target Run
High	Regenerate VRT baselines after themeQuartz migration	Follow-up to Run 2
High	Playwright MCP visual verification (ThemedGrid vs item-grid worktree)	Follow-up to Run 2
Medium	Audit ag-theme-arda.css for redundancy after full themeQuartz migration	Run 6
Low	Alias or remove --accent-light if worktree tokens are merged	Run 7

Observations

• The DataGrid molecule’s theme configuration is now identical in structure to the item-grid’s theme configuration. Both use themeQuartz.withParams() with the same 20 structural parameters. The only differences are token name prefixes (design-system namespacing) and one color token name (--primary-muted vs --accent-light).

• The ThemedGrid story uses inventory-domain sample data (part numbers, descriptions, unit costs) which is intentional — it makes the story visually representative of the actual Arda use case and provides a good reference for Run 3 (organism port) and Run 6 (item-grid integration).

• The canary DataGrid molecule now serves as the visual baseline for ALL grid consumers: entity-data-grid, entity-data-grid-shim, and the future item-grid migration (Run 6). The themeQuartz configuration at the molecule level means all grid stories will share the same Arda theme without any per-consumer theme setup.