std-timer

Level: Atom | Entity: TimerSession | Persistence: runtime

4 states, 7 events, 9 transitions

Live Preview

orbital TimerSessionOrbital {
  entity TimerSession [runtime] {
    id : string
    name : string
    description : string
    status : string
    createdAt : string
    remaining : number
    duration : number
  }
  trait TimerSessionTimer -> TimerSession [interaction] {
    initial: idle
    state idle {
      INIT -> idle
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", align: "center", children: [{ type: "stack", direction: "vertical", gap: "md", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "clock", size: "lg" }, { type: "typography", content: "Timer", variant: "h2" }] }, { type: "divider" }, { type: "animated-counter", value: ["object/get", ["array/first", "@entity"], "remaining"], suffix: "s", duration: 500 }, { type: "stat-display", label: "Time Remaining", value: ["object/get", ["array/first", "@entity"], "remaining"], max: 60 }, { type: "meter", value: ["object/get", ["array/first", "@entity"], "remaining"], min: 0, max: 60 }, { type: "progress-bar", value: ["object/get", ["array/first", "@entity"], "remaining"], max: 60, color: "primary", showPercentage: true }, { type: "badge", label: ["object/get", ["array/first", "@entity"], "status"] }] }, { type: "stack", direction: "horizontal", gap: "sm", justify: "center", children: [{ type: "button", label: "Start", event: "START", variant: "primary", icon: "play" }, { type: "button", label: "Pause", event: "PAUSE", variant: "ghost", icon: "pause", disabled: true }, { type: "button", label: "Reset", event: "RESET", variant: "ghost", icon: "rotate-ccw", disabled: true }] }] })
      START -> running
        (set @entity.remaining 60)
        (set @entity.status running)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", align: "center", children: [{ type: "stack", direction: "vertical", gap: "md", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "clock", size: "lg" }, { type: "typography", content: "Timer", variant: "h2" }] }, { type: "divider" }, { type: "animated-counter", value: ["object/get", ["array/first", "@entity"], "remaining"], suffix: "s", duration: 500 }, { type: "stat-display", label: "Time Remaining", value: ["object/get", ["array/first", "@entity"], "remaining"], max: 60 }, { type: "meter", value: ["object/get", ["array/first", "@entity"], "remaining"], min: 0, max: 60 }, { type: "progress-bar", value: ["object/get", ["array/first", "@entity"], "remaining"], max: 60, color: "primary", showPercentage: true }, { type: "badge", label: ["object/get", ["array/first", "@entity"], "status"] }] }, { type: "stack", direction: "horizontal", gap: "sm", justify: "center", children: [{ type: "button", label: "Pause", event: "PAUSE", variant: "secondary", icon: "pause" }, { type: "button", label: "Reset", event: "RESET", variant: "ghost", icon: "rotate-ccw" }] }] })
    }
    state running {
      TICK -> running
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", align: "center", children: [{ type: "stack", direction: "vertical", gap: "md", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "clock", size: "lg" }, { type: "typography", content: "Timer", variant: "h2" }] }, { type: "divider" }, { type: "animated-counter", value: ["object/get", ["array/first", "@entity"], "remaining"], suffix: "s", duration: 500 }, { type: "stat-display", label: "Time Remaining", value: ["object/get", ["array/first", "@entity"], "remaining"], max: 60 }, { type: "meter", value: ["object/get", ["array/first", "@entity"], "remaining"], min: 0, max: 60 }, { type: "progress-bar", value: ["object/get", ["array/first", "@entity"], "remaining"], max: 60, color: "primary", showPercentage: true }, { type: "badge", label: ["object/get", ["array/first", "@entity"], "status"] }] }, { type: "stack", direction: "horizontal", gap: "sm", justify: "center", children: [{ type: "button", label: "Pause", event: "PAUSE", variant: "secondary", icon: "pause" }, { type: "button", label: "Reset", event: "RESET", variant: "ghost", icon: "rotate-ccw" }] }] })
      PAUSE -> paused
        (set @entity.status paused)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", align: "center", children: [{ type: "stack", direction: "vertical", gap: "md", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "clock", size: "lg" }, { type: "typography", content: "Timer", variant: "h2" }] }, { type: "divider" }, { type: "animated-counter", value: ["object/get", ["array/first", "@entity"], "remaining"], suffix: "s", duration: 500 }, { type: "stat-display", label: "Time Remaining", value: ["object/get", ["array/first", "@entity"], "remaining"], max: 60 }, { type: "meter", value: ["object/get", ["array/first", "@entity"], "remaining"], min: 0, max: 60 }, { type: "progress-bar", value: ["object/get", ["array/first", "@entity"], "remaining"], max: 60, color: "primary", showPercentage: true }, { type: "badge", label: ["object/get", ["array/first", "@entity"], "status"] }] }, { type: "stack", direction: "horizontal", gap: "sm", justify: "center", children: [{ type: "button", label: "Resume", event: "RESUME", variant: "primary", icon: "play" }, { type: "button", label: "Reset", event: "RESET", variant: "ghost", icon: "rotate-ccw" }] }] })
      EXPIRE -> expired
        (set @entity.status expired)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", align: "center", children: [{ type: "stack", direction: "vertical", gap: "md", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "clock", size: "lg" }, { type: "typography", content: "Timer", variant: "h2" }] }, { type: "divider" }, { type: "animated-counter", value: ["object/get", ["array/first", "@entity"], "remaining"], suffix: "s", duration: 500 }, { type: "stat-display", label: "Time Remaining", value: ["object/get", ["array/first", "@entity"], "remaining"], max: 60 }, { type: "meter", value: ["object/get", ["array/first", "@entity"], "remaining"], min: 0, max: 60 }, { type: "progress-bar", value: ["object/get", ["array/first", "@entity"], "remaining"], max: 60, color: "primary", showPercentage: true }, { type: "badge", label: ["object/get", ["array/first", "@entity"], "status"] }] }, { type: "typography", content: "Time is up!", variant: "h3" }, { type: "stack", direction: "horizontal", gap: "sm", justify: "center", children: [{ type: "button", label: "Reset", event: "RESET", variant: "primary", icon: "rotate-ccw" }] }] })
      RESET -> idle
        (set @entity.status idle)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", align: "center", children: [{ type: "stack", direction: "vertical", gap: "md", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "clock", size: "lg" }, { type: "typography", content: "Timer", variant: "h2" }] }, { type: "divider" }, { type: "animated-counter", value: ["object/get", ["array/first", "@entity"], "remaining"], suffix: "s", duration: 500 }, { type: "stat-display", label: "Time Remaining", value: ["object/get", ["array/first", "@entity"], "remaining"], max: 60 }, { type: "meter", value: ["object/get", ["array/first", "@entity"], "remaining"], min: 0, max: 60 }, { type: "progress-bar", value: ["object/get", ["array/first", "@entity"], "remaining"], max: 60, color: "primary", showPercentage: true }, { type: "badge", label: ["object/get", ["array/first", "@entity"], "status"] }] }, { type: "stack", direction: "horizontal", gap: "sm", justify: "center", children: [{ type: "button", label: "Start", event: "START", variant: "primary", icon: "play" }, { type: "button", label: "Pause", event: "PAUSE", variant: "ghost", icon: "pause", disabled: true }, { type: "button", label: "Reset", event: "RESET", variant: "ghost", icon: "rotate-ccw", disabled: true }] }] })
    }
    state paused {
      RESUME -> running
        (set @entity.status running)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", align: "center", children: [{ type: "stack", direction: "vertical", gap: "md", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "clock", size: "lg" }, { type: "typography", content: "Timer", variant: "h2" }] }, { type: "divider" }, { type: "animated-counter", value: ["object/get", ["array/first", "@entity"], "remaining"], suffix: "s", duration: 500 }, { type: "stat-display", label: "Time Remaining", value: ["object/get", ["array/first", "@entity"], "remaining"], max: 60 }, { type: "meter", value: ["object/get", ["array/first", "@entity"], "remaining"], min: 0, max: 60 }, { type: "progress-bar", value: ["object/get", ["array/first", "@entity"], "remaining"], max: 60, color: "primary", showPercentage: true }, { type: "badge", label: ["object/get", ["array/first", "@entity"], "status"] }] }, { type: "stack", direction: "horizontal", gap: "sm", justify: "center", children: [{ type: "button", label: "Pause", event: "PAUSE", variant: "secondary", icon: "pause" }, { type: "button", label: "Reset", event: "RESET", variant: "ghost", icon: "rotate-ccw" }] }] })
      RESET -> idle
        (set @entity.status idle)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", align: "center", children: [{ type: "stack", direction: "vertical", gap: "md", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "clock", size: "lg" }, { type: "typography", content: "Timer", variant: "h2" }] }, { type: "divider" }, { type: "animated-counter", value: ["object/get", ["array/first", "@entity"], "remaining"], suffix: "s", duration: 500 }, { type: "stat-display", label: "Time Remaining", value: ["object/get", ["array/first", "@entity"], "remaining"], max: 60 }, { type: "meter", value: ["object/get", ["array/first", "@entity"], "remaining"], min: 0, max: 60 }, { type: "progress-bar", value: ["object/get", ["array/first", "@entity"], "remaining"], max: 60, color: "primary", showPercentage: true }, { type: "badge", label: ["object/get", ["array/first", "@entity"], "status"] }] }, { type: "stack", direction: "horizontal", gap: "sm", justify: "center", children: [{ type: "button", label: "Start", event: "START", variant: "primary", icon: "play" }, { type: "button", label: "Pause", event: "PAUSE", variant: "ghost", icon: "pause", disabled: true }, { type: "button", label: "Reset", event: "RESET", variant: "ghost", icon: "rotate-ccw", disabled: true }] }] })
    }
    state expired {
      RESET -> idle
        (set @entity.status idle)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", align: "center", children: [{ type: "stack", direction: "vertical", gap: "md", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "clock", size: "lg" }, { type: "typography", content: "Timer", variant: "h2" }] }, { type: "divider" }, { type: "animated-counter", value: ["object/get", ["array/first", "@entity"], "remaining"], suffix: "s", duration: 500 }, { type: "stat-display", label: "Time Remaining", value: ["object/get", ["array/first", "@entity"], "remaining"], max: 60 }, { type: "meter", value: ["object/get", ["array/first", "@entity"], "remaining"], min: 0, max: 60 }, { type: "progress-bar", value: ["object/get", ["array/first", "@entity"], "remaining"], max: 60, color: "primary", showPercentage: true }, { type: "badge", label: ["object/get", ["array/first", "@entity"], "status"] }] }, { type: "stack", direction: "horizontal", gap: "sm", justify: "center", children: [{ type: "button", label: "Start", event: "START", variant: "primary", icon: "play" }, { type: "button", label: "Pause", event: "PAUSE", variant: "ghost", icon: "pause", disabled: true }, { type: "button", label: "Reset", event: "RESET", variant: "ghost", icon: "rotate-ccw", disabled: true }] }] })
    }
  }
  page "/timersessions/timer" -> TimerSessionTimer
}

Loading preview...

Orbital Visualization

Loading visualization...

Entity Fields

Field	Type	Default
id	string	-
name	string	-
description	string	-
status	string	"active"
createdAt	string	-
remaining	number	0
duration	number	0

States

State	Type
idle	Initial
running	-
paused	-
expired	-

Events

Event	Payload
INIT	-
START	-
PAUSE	-
RESUME	-
RESET	-
TICK	-
EXPIRE	-

Transitions

From	Event	To	Effects
idle	INIT	idle	1 effect
idle	START	running	3 effects
running	TICK	running	1 effect
running	PAUSE	paused	2 effects
paused	RESUME	running	2 effects
running	EXPIRE	expired	2 effects
running	RESET	idle	2 effects
paused	RESET	idle	2 effects
expired	RESET	idle	2 effects