Timer

import { Timer } from "@/components/blocks/timer";

"use client";

import { Timer } from "@/components/blocks/timer";

export function Example() {
  return (
    <Timer
      label="Time tracked"
      confirmDescription="Time starts counting immediately and is logged against this task."
      onEvent={(event) => {
        if (event.type === "stop") console.log("logged", event.seconds);
      }}
    />
  );
}

Timer                            (single component — pass everything as props)
└── card-surface <button>        (the whole card is the control; goes red running)
    ├── icon                     (Play when off, Square when running)
    ├── label                    (muted caption, truncates)
    ├── reel                     (transitions-dev spinning counter)
    │   └── t-reel-col[n]        (one clipped window per digit)
    │       └── t-reel-strip     (0-9 cells; rolls forward, blur decays to 0)
    └── off → Popover            (start confirmation)
        │   ├── header           (confirmTitle / confirmDescription)
        │   ├── confirmBody      (any ReactNode)
        │   └── actions          (confirmActions({ start, cancel }) or the
        │                         default Cancel + confirm pair)
        on  → click stops        (no confirmation on the way down)