Undo Snackbar

When to use it

Destructive-action confirmation flows — delete, archive, move to trash — where users need a brief undo window before the action commits.

When not to

Non-destructive actions or contexts where the auto-cycle demo loop would confuse users — remove the dismiss/loop cycle before shipping in production.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Change DURATION to 6000 for a longer undo window, update --fb12-acc to #818cf8 for an indigo accent, and add a sixth label 'Bookmark deleted' to the labels array. Theme: dark tokens live in :root, the light variant in :root[data-theme="light"]; ?theme=light or a {type:'forever:theme'} postMessage switches at runtime.

Safe to edit

• countdown duration (DURATION=4200)
• accent color (--fb12-acc)
• label strings (labels array)
• ring radius and stroke width (R=12.5, stroke-width=3.4)
• bar width (min(82%,420px))
• idle demo cadence (DEMO_UNDO=1500 ms presses UNDO on alternate cycles;)
• theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

• visibilitychange clock-rebasing (t0+=gap, timers[i].due+=gap)
• IIFE wrapper
• prefers-reduced-motion static fallback
• role=status + aria-live on bar
• idle demo (alternate cycles press UNDO through press(); a real press takes over)
• theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)
• demo-v1 preview lifecycle: initialize demoEnabled from window.__foreverPreview and stop attract work on the window forever:interactive event; retain manual feedback, settling, cleanup and explicit sessions

Known limitations

• First deliberate input permanently disables idle demo; manual input, finite feedback and settling remain active. Host demoEnabled=false skips the initial attract cycle.
• Countdown uses rAF clock, not CSS, so it cannot be paused via CSS alone
• State remains local to each mounted instance; format/theme remount preserves takeover, not component values.

More Feedback & States components

• Success CheckMint-green ring sweeps closed and a checkmark draws in with a springy pop and expanding halo; initial replay stops after first input; click or Space runs…
• Error ShakeDark email input shakes horizontally with decaying-sine, border flushes red, X icon pops in with overshoot spring, validation message slides up.
• Toast StackDark notification toasts spring up from the bottom, drain a colored progress bar, then slide off right. Four types cycle: success, error, warning,…
• Hold to ConfirmPress-and-hold fills a tick-marked ring; full hold rotates center square 45° into a green check; early release flashes red cross (cancelled).
• Empty StateA Bauhaus open vessel sits empty while 26 mint motes drift in a slow orbital cloud above it; poking scatters them and they spring back to settle.
• Like BurstRose-and-verdigris enamel palette: a heart spring-pops with 96 dots and ring shards. First input stops the demo; later input toggles the liked state.