# M2 UI Gallery Delta Matrix

> **Evidence record — not current product guidance.** Use the [documentation index](../../../README.md)
> for current guidance. The canonical visual contract is the [Editor Design System](../../design-system.md),
> with architecture in [ADR 0049](../../../adr/0049-penpot-led-editor-visual-system.md).

This matrix distinguishes correctable production drift from deliberate differences between an
authored Penpot mock and a truthful interactive editor. The direct PNG is the visual reference;
the SVG is used to inspect numeric child geometry because it does not embed Source Sans Pro.

| Area | Penpot reference | Production/gallery truth | Classification | Evidence/state |
|------|------------------|--------------------------|----------------|----------------|
| Materials canvases | 620 x 539 and 420 x 735 | Exact presets render the shared `editor_ui` components | Required match | Geometry/unit tests pass; fresh paired gallery captures and full-editor primitive captures at 620/420 pass |
| Renderer canvases | 760 x 1233 and 480 x 828 | Exact gallery presets use shared renderer/component chrome | Required match | Fresh paired gallery captures cover both widths; the rebuilt full editor now has managed static-renderer captures at 760/480 |
| Renderer hierarchy | 50 px component header, 40 px array header, 84/60 px entry headers, 38 px properties heading, and 50 px indexed-material heading | The gallery and full editor call the same `editor_ui::renderer` view-model/chrome functions | Resolved structural drift | Focused checks pass and the fresh full-editor static renderer shows the same hierarchy without the former duplicate slot presentation |
| Renderer slot states | Full primary slot, compact secondary slot, explicit unassigned drop target, and collapsed sibling renderers | The shared material panel supports a full header with collapsed parameters and a first-class empty thumbnail/Choose Material action | Resolved structural drift | Fresh 760/480 gallery pairs show all states without gallery-only material cards |
| Scalar geometry | 6 px inset, 93.8/160.3 px track, 6 px gap, 33 px number | Same exported child coordinates at 620/420 | Resolved drift | Focused tests and 620 overlay pass |
| Scalar sample value | Text reads `0.72`; thumb is positioned near 0.55 | Thumb position is computed from the displayed/runtime value | Intentional semantic delta | Keep truthful 0.72 normalization |
| ORM channels | ORM selected while AO, Roughness, and Metallic sample glyphs all read G | Canonical ORM is AO=R, Roughness=G, Metallic=B | Intentional semantic delta | Runtime/schema invariant and fixture test |
| Material preview | Authored static sample sphere | Gallery uses a deterministic fixture approximation; full editor uses the real typed thumbnail | Intentional content delta | Full-editor thumbnail was observed pending and then resolved in place without layout movement |
| Texture identity | Mock fields use generic/synthetic asset art | Ready project textures show their typed thumbnail without a redundant generic icon | Intentional product delta | Texture-field test passes |
| Borders/rasterization | Browser-rendered SVG strokes can antialias across pixel boundaries | egui uses deterministic inside strokes | Renderer-level delta | Do not alter semantic colors or geometry to mimic browser antialiasing |
| Typography | Direct PNG preserves Source Sans Pro | Production bundles Source Sans Pro Regular/Bold and maps explicit 400/700 families | Required match | Font/type-role tests and fresh gallery/full-editor captures pass |
| Difference metric | Raw per-pixel comparison includes all sample and raster deltas | Latest Materials 620 diagnostic: mean 7.41, max 231, 22.8% of pixels above 8 | Diagnostic only | Must be interpreted through this matrix, never used alone for acceptance |
| Runtime reload | Not applicable to the design mock | Theme and material fixture JSON reload without rebuild/restart | Framework requirement | Focused reload tests pass |
| Rebuild/restart | Not applicable to the design mock | Focused managed build reports bounded progress; replacement launches before last-good exits; failures preserve last-good | Framework requirement | Eight workflow tests pass |

## Remaining acceptance

- Primitive Materials pass full-editor 620/420 and deep-scroll containment. The rebuilt static
  renderer passes the native 760/480 hierarchy and containment check. The current checked-in scene
  has no placed skinned actor, so skinned presentation remains proven through the shared production
  component, renderer gallery fixture, focused tests, and editor compile rather than a separate
  native actor capture.
- The broad `penpot-material-inspector` scenario intentionally remains incomplete because picker,
  color, invalid-drop, dirty/save/relaunch, and broken-reference assertions are outside this gallery
  framework boundary. Its fixture was restored byte-for-byte after the two managed integration
  captures.
- Attach the paired reference/native evidence to #68 at the next authorized tracker synchronization.
  Keep #68, #59, #65, and M2 in Acceptance-in-progress; this framework slice is evidence for the
  next visual pass, not permission to publish or close the milestone.

## Fresh local evidence — 2026-07-18 10:20 UTC

- Materials 620: `ui-gallery-materials-620-20260718T102015Z.png`
  (`cc918c567522204f9dc8d8f179e24e49ba802fe03a81d3a65fa1e5b6058623c9`)
- Materials 420: `ui-gallery-materials-420-20260718T102015Z.png`
  (`70dea081df62ab38d589ea559d73a6e8d3685f26fee54dbc87cc8682ebed8474`)
- Renderer 760: `ui-gallery-renderer-760-20260718T102015Z.png`
  (`724d9cedf25753de9315993f9e6ea656949f54e5b54c44f1f8ab46f1db88b0d6`)
- Renderer 480: `ui-gallery-renderer-480-20260718T102015Z.png`
  (`f90c3f72b757649f5c11362ed6d776e5e85288751ffd74f08f8cc386f162fc4f`)
- Full-editor primitive Inspector 620, 420, and deep-scroll captures are recorded under the same
  local `.codex/evidence/` store with timestamp `20260718T095413Z`.
- Full-editor static renderer 480: `penpot-material-inspector-20260718T104504Z.png`
  (`3c5c6585822afffa6c29994aa757adf645c81d653e369e059bbee08c26c1aa26`)
- Full-editor static renderer 760: `penpot-material-inspector-20260718T104550Z.png`
  (`95ef7366d1671ac494cb5fd389d3332d51a0d5636cd0a02f66e9faf0399eb82f`)