Generative DOM + custom-elements-collection

Edit markdown on the left. Use any ce-* or lesson-* tag. The right pane streams the output through Generative DOM with the @generative-dom/plugin-companion plugin; components come from the real custom-elements-collection package.

markdown source

# Release readiness — v0.4

<ce-kpi value="70" label="CEC tags whitelisted" color="green"></ce-kpi>

<ce-kpi value="165" label="Tests passing" color="blue"></ce-kpi>

<ce-callout type="success" title="Ship it">
All quality gates green. **Bold markdown** still works inside slots.
</ce-callout>

## Verdict

<ce-verdict type="good" title="Tag v0.4.0" detail="70 public components, 0 open bugs."></ce-verdict>

## Chat surfaces (new in v0.3+)

<ce-chat-bubble role="user" author="Alex" timestamp="12:34">
Can you summarise the spec?
</ce-chat-bubble>

<ce-chat-bubble role="assistant" author="Claude" model="opus-4.7" timestamp="12:34" tokens="234">
Sure — three sections, eight Tier-1 components, and one citation marker[^1].
</ce-chat-bubble>

<ce-thinking variant="dots" label="Thinking…"></ce-thinking>

<ce-tool-call name="web_search" status="ok" duration-ms="612" open>
<pre slot="args" style="margin:0;font-family:var(--ce-font-mono);font-size:12px;">{ "query": "lit shadow dom", "count": 3 }</pre>
<pre slot="result" style="margin:0;font-family:var(--ce-font-mono);font-size:12px;">[
  { "title": "Lit · Shadow DOM", "url": "https://lit.dev/" }
]</pre>
</ce-tool-call>

## Charts (new ce-plot in v0.4)

<ce-plot type="line" x-label="Day" y-label="Sessions" height="240px"
  data='[{"name":"Desktop","points":[{"x":1,"y":126},{"x":2,"y":133},{"x":3,"y":146},{"x":4,"y":153},{"x":5,"y":156},{"x":6,"y":162},{"x":7,"y":171},{"x":8,"y":182},{"x":9,"y":193},{"x":10,"y":206}]},{"name":"Mobile","color":"green","points":[{"x":1,"y":86},{"x":2,"y":93},{"x":3,"y":99},{"x":4,"y":113},{"x":5,"y":124},{"x":6,"y":131},{"x":7,"y":138},{"x":8,"y":143},{"x":9,"y":150},{"x":10,"y":163}]}]'></ce-plot>

## Status row

<ce-grid cols="3">
<ce-status-light state="ok" label="API"></ce-status-light>
<ce-status-light state="warn" label="DB latency"></ce-status-light>
<ce-status-light state="ok" label="CDN"></ce-status-light>
</ce-grid>

<ce-gauge value="84" min="0" max="100" label="Uptime %"></ce-gauge>

## Card with markdown body

<ce-card title="What changed">
**Bold markdown** inside a `ce-card` — inline parsing stays enabled. Try editing the source on the left.
</ce-card>

rendered output

idle

Generative DOM × custom-elements-collection — streaming demo

markdown source

rendered output