Arrays & lists

Repeating content — cards, list items — uses an array boundary in the markup:

<div data-ueee-list="values">
  <div data-ueee-item>
    <h3 data-ueee="title">…</h3>
    <p  data-ueee="description">…</p>
  </div>
  <!-- more items -->
</div>

data-ueee-list="path" registers an array at that path.
data-ueee-item marks each element; its index is positional (DOM order) — so adding/removing items needs no renumbering.
Leaves inside an item resolve relative to it (values.<index>.title).

The overlay then shows “values · item [2] · title” in the header and offers add / remove controls.

Why add/remove needs data-driven rendering

Today ueee fills marked slots after the page renders. That can edit existing items, but it cannot add or remove DOM nodes — you can’t inject a 4th card into HTML that only rendered 3.

So lists that support add/remove must render from the content data — the template iterates the YAML list rather than a hardcoded array:

const data = await ueeeContent('/about');
{ data.about.values.map((v) => (
  <ValueCard ueeeItem title={v.title} description={v.description} />
)) }

This makes the content YAML the single source of truth (no duplicated array in the template) and lets add/remove persist on reload. It also fixes array serialization: reconstruct collects data-ueee-item children in order into a real array.