# Editable content and exact original SVG controls

The renderer accepts exactly `icon0`…`icon4`, `label`, `accent`, `fade`,
and `pointer`. Both delivered inputs are the existing library's original
content variants, not new product demos. `ORIGIN.json` binds the exact files.

| Input | Default | Adaptation | Constraint |
| --- | --- | --- | --- |
| `label` | Connected context | Collected insight | Exactly 17 characters, one line; no shrinking |
| `accent` | `#168ab9` | `#986146` | Seed and label color |
| `icon0` | Document drawing | Chart drawing | 800×800 intrinsic, 100×100 viewBox/display |
| `icon1` | Open book | Nested polygon | 912×800 intrinsic, 114×100 viewBox/display |
| `icon2` | Folded block | Peaks | 896×800 intrinsic, 112×100 viewBox/display |
| `icon3` | Folded shape | T-shaped marker | 800×880 intrinsic, 100×110 viewBox/display |
| `icon4` | Note panel | Divided panel | 896×800 intrinsic, 112×100 viewBox/display |
| `fade` | Shared white gradient | Same | 80×110 intrinsic/viewBox/display |
| `pointer` | Shared hand drawing | Same | 400×432 intrinsic; 50×54 viewBox/display |

The five files are `public/art/type-chip-retract-expand/iconN-VARIANT.svg`.
The other two are `trailing-fade.svg` and `hand-pointer.svg`. Their SVG viewBox
units already equal their displayed pixel dimensions; do not treat the 8×
intrinsic export dimensions as on-screen scale. Fit is contain, not cover.
Preserve the occupied silhouettes, not merely the image-box aspect ratio.

Each SVG contains its editable `path d`, fills and strokes. Edit that original
geometry, not a screenshot. The default last panel's fill is low-chroma
`#727c92`; a saturation-only test incorrectly treats it as absent.

## Seed controls are not an icon swap

The ring symbol is built from three animated arm groups. Each arm has a tail
group containing a cubic and a separate circular cap, followed by a ring node.
The ring is **outside** the tail's scale transform.

| Primitive | Exact original control |
| --- | --- |
| Tail curve | `M49 28C35 33 25 43 23 54`, 120×120 viewBox, no fill, 9 px stroke |
| Tail reveal | Dash array 200; animated dash offset from the recipe, not a linear wipe invented for this kit |
| Tail cap | 9×9 filled ellipse; independent x/y/opacity tracks |
| Ring | 32×32 outer box, white fill, 9 px inside-box stroke; SVG centerline radius 11.5, center (16,16) |
| Arm copies | 0°, 120°, 240° around (60,60) |
| Tail transform | Per-frame y, scale and rotation around (60,20) |
| Whole seed | 120×120 group; per-frame x/y and rotation around (60,60) |

`generated-controls/primitive-svg/` supplies these control drawings.
`native-layer-controls.json` retains every track and exact original path;
`resolve-frame-layers.csv` evaluates every frame, including all cap coordinates,
dash offsets and separate transforms. Never replace this with a static
three-dot graphic, a stock loader or uniform scaling of the whole capsule.

## Label, border and field

Geist regular, 83 px, line height 83 px, tracking −0.8 px, layout 850×110.
Measured Chrome baseline is **71 px** from the text box top. The baseline and
widths are Chrome measurements, not assumed Text+ values. The label's parent
mask is at (195,63) relative to the moving capsule, 110 px high, with per-frame
width. The white trailing gradient has an independently animated x and scaleX.
Only this inner branch fades; the border must not be masked or dimmed with it.

The capsule is 210 px high, outer radius105, inside-box border4 in `#f1f1f1`,
CSS Gaussian blur sigma1.1 px. Its width changes; its children do not shrink
uniformly. Native Resolve's blur/soft-edge sliders are not claimed to use the
same sigma scale. The white fade makes arbitrary dark backgrounds unsupported.

Only local image paths with a rights declaration are accepted. Text metrics
are measured by Chrome during Remotion rendering, in addition to structural
contract validation. A 17-character label can still have a different visible
withdrawal cadence; review it rather than changing tracks behind the contract.