Undo
An agent-native component that implements the "action with an undo window" pattern: when triggered, it enters the pending state, shows an inline snackbar (message + Undo button), and commits the action automatically when the timeout expires. Use it in deletion flows or destructive actions where the real effect should be deferred ("Deleted. Undo?"). The machine-readable layer exposes data-state on the host (idle | pending | undone | committed) and a global registry window.__puraUndo (a Map keyed by undo-id with remaining, run/undo/commit, and .pending()), letting agents enumerate and resolve any undo flow on the page.
Preview
<pura-undo id="demo-undo" timeout="5000" undo-label="Undo">
Conversation archived.
<button slot="trigger" type="button">Archive conversation</button>
</pura-undo>
<script type="module">
const u = document.getElementById("demo-undo");
u.addEventListener("action", () => console.log("action started"));
u.addEventListener("undo", () => console.log("undone in time"));
u.addEventListener("commit", () => console.log("committed, effect applied"));
</script>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
timeout | number | 5000 | Undo window in ms. Values <= 0 keep the snackbar pinned (sticky), resolved only via undo()/commit(). |
label | string | Action performed. | Message text when there's no content in the default slot. |
undo-label | string | Undo | Text for the undo button. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/undo.js"></script>import "./pura/lib/undo.js";