stateful-artifactslisted

# Stateful artifacts Some pages are not reports — they are **records**. A close checklist that several people tick through, a sign-off board, an approval queue, an input collector. The page holds the state and everyone who opens it sees the same thing. For shared persistence, declare `capabilities: { artifact: {} }`. Load the host's `artifact-capabilities` skill when available for the authoritative contract. If it is unavailable, build the local-only scratch mode below and label it clearly; do not claim shared persistence. --- ## Two models — pick deliberately ### Live document (preferred for trackers and checklists) Mark the region people edit. **The markup inside that region is the shared document.** Whatever a click or keystroke does to that DOM in your handlers is saved and reaches every view — and Claude. ```html <artifact-sync> <ul id="close-tasks"> <li data-id="C02"><input type="checkbox"> Bank rec — operating</li> <li data-id="C03"><input type="checkbox"> AR subledger to GL</li> </ul> </artifact-sync> ``` Or put the `artifact-sync` attribute directly on a `<tbody>` or `<ul>`. **The one rule that decides whether this works:** > Write the synced content as HTML in the page and **mutate that DOM directly**. Never render it from > a JavaScript object. A region re-rendered from JS state is not saved — by design. This is the mistake that costs an afternoon: everything looks correct locally, nothing persists. ```js // RIGHT - mutate the live DOM; this