# M2 Penpot Design Exports

> **Evidence record — not current product guidance.** Use the [documentation index](../../../../README.md) for current behavior and architecture. These exports pin the visual acceptance targets used to close M2 issues #67 and #68. The source document is `Blacksite Editor UI` (`cf1804c7-b801-80c5-8008-57ad3313e5c6`).

The current Penpot README makes pages 01–30 authoritative, pages 90–91 implementation masters only, and page 99 forbidden as current guidance. The `CODEGEN MAP` block is handoff documentation and never renders in Blacksite.

## Responsive Inspector targets

| Export | Penpot page and shape | Required match |
|---|---|---|
| [Materials — wide](materials-wide-620.svg) | Page 01, `ad983554-05bb-80cb-8008-5698dfab667e` | 620 px Inspector reference; 596 px material slot; 569 px parameter body; deterministic wide rows and actions. |
| [Materials — narrow](materials-narrow-420.svg) | Page 01, `ad983554-05bb-80cb-8008-5698e08d425a` | 420 px Inspector floor; 396 px material slot; 369 px parameter body; two-line input rows with no clipping or horizontal scroll. |
| [Static Mesh Renderer — wide](static-mesh-renderer-wide-760.svg) | Page 02, `6cb78075-fbd0-8045-8008-57f5315abf0a` | Full 760 px renderer composition, stable slot ordering, shared component chrome, and repeated material slots. |
| [Static Mesh Renderer — narrow](static-mesh-renderer-narrow-480.svg) | Page 02, `6cb78075-fbd0-8045-8008-57f5419afad2` | Full 480 px renderer composition and bounded narrow reflow. |

## Shared component targets

| Export | Penpot page and shape | Required match |
|---|---|---|
| [Foundation components catalog](foundation-components-catalog.svg) | Page 11, `6cb78075-fbd0-8045-8008-5801d6740577` | Authoritative controls, field sizing, selection behavior, asset/drop states, vector layouts, buttons, disclosure, and usage rules shared by Inspector components. |
| [Inspector component header](component-header-50.svg) | Page 12, `83c3baf0-0e37-808a-8008-57cd2388f9b9` | One reusable 50 px component header and action/status geometry. |
| [Array header](array-header-40.svg) | Page 12, `83c3baf0-0e37-808a-8008-57cd23947466` | One reusable 40 px collection header. |
| [Composition rule](component-composition-rule.svg) | Page 12, `83c3baf0-0e37-808a-8008-57cd23a58de0` | Component containment and section ownership rule. |
| [Material components and states](material-components-states.svg) | Page 13, `83c3baf0-0e37-808a-8008-57d8c2a3305d` | Shared slot anatomy and direct, inherited, dirty, processing, failed, read-only, imported-source, and built-in states. |

## Color-picker targets

| Export | Penpot page and shape | Required match |
|---|---|---|
| [Wheel](color-picker-wheel.svg) | Page 22, `83c3baf0-0e37-808a-8008-57cd9b7b0667` | Wheel mode layout, current/previous values, alpha, recents, and footer behavior. |
| [Adjusted wheel state](color-picker-adjusted.svg) | Page 22, `83c3baf0-0e37-808a-8008-57cd9bbd9c3b` | Dirty preview state and exact value presentation. |
| [Sliders](color-picker-sliders.svg) | Page 23, `83c3baf0-0e37-808a-8008-57cda8a2c70f` | Sliders mode layout and conversion controls. |
| [Presets](color-picker-presets.svg) | Page 23, `83c3baf0-0e37-808a-8008-57cda8c84257` | Presets mode, recent/user palette presentation, and bounded footer. |

## Issue ownership

- **#68** owns exact Inspector/component/material/color-picker geometry and responsive behavior against these exports.
- **#67** owns the live authored-document and save-state behavior represented by the material-state and adjusted-color exports: interaction remains memory-only until explicit save, with distinct unsaved, processing, failed, and conflict state.
- **#65** owns consolidated native comparison evidence across wide, narrow, short-height, multi-slot, overlay, save, restart, and failure scenarios.
- **#59** indexes the design authority and requires the relevant child acceptance targets to be satisfied before epic closure.