Timed Danger

The component is self-contained: one file, no dependencies, its own palette in the --vibeui-buttongroup-039-* variables. It is a client component: useState holds the number of elapsed seconds, and the remainder is computed as delay minus the elapsed time — a change of delay then takes effect at once and the state does not have to be reset by an effect; useEffect starts a setTimeout for one second and clears it on unmount. The ring is drawn with a conic-gradient plus a radial-gradient mask — the cut-out in the middle turns the circle into a ring without SVG; the filled share arrives through the --vibeui-buttongroup-039-progress variable. The disabled attribute is real: the button cannot be pressed and does not catch Enter, rather than merely looking pale. The number of seconds is duplicated as text and announced through role="status", because the ring does not exist for a screen reader. The protection is designed against the momentum of a press, not against ill intent.