Mixins / foldkit-mixins-ui

TimerSlots

const · packages/mixins-ui/src/timer.ts:32

const TimerSlots: Slots.Contract<{ readonly root: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly [Attr.AttrToken<"role">], readonly Slot.RequirementName[], boolean>; readonly label: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly area: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly [Attr.AttrToken<"role">], readonly Slot.RequirementName[], boolean>; readonly item: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly separator: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly controls: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<" …;

A timer after Zag's: a countdown from a duration, or a stopwatch counting up (to a duration if it has one), with start, pause, resume, reset and restart. The display is role="timer", its items the hours, minutes and seconds (or the units asked for), each in a Slot of its own.

button -> Pressed -> Stamp (reads the clock) -> Acted -> elapsed, since
                           Tick (waits, reads the clock) -> Ticked -> elapsed

The time counted is this Model, which the application keeps and folds with update; nothing ticks outside it. A press reads the clock in a Command before it acts, and each tick is a Command that waits for the display's next change and reads the clock again, so the time counted is the clock's, however late a tick lands, and a pause keeps every millisecond. The clock is Effect's, so a test drives a whole run with TestClock. Each start counts a new turn, and a tick of an older one is dropped.

The root carries data-state (idle, running, paused, done) and, with a duration, --fk-timer-progress: 0 to 1 of it counted.