std-selection

Level: Atom | Entity: SelectableItem | Persistence: runtime

3 states, 5 events, 7 transitions

Live Preview

orbital SelectableItemOrbital {
  entity SelectableItem [runtime] {
    id : string
    name : string
    description : string
    status : string
    createdAt : string
  }
  trait SelectableItemSelection -> SelectableItem [interaction] {
    initial: idle
    state idle {
      INIT -> idle
        (fetch SelectableItem)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "check-square", size: "lg" }, { type: "typography", content: "SelectableItems", variant: "h2" }] }, { type: "divider" }, { type: "typography", variant: "caption", color: "muted", content: "Choose a selectableitem to continue." }, { type: "data-grid", entity: "SelectableItem", emptyIcon: "inbox", emptyTitle: "No selectableitems yet", emptyDescription: "Add selectableitems to see them here.", className: "transition-shadow hover:shadow-md cursor-pointer", itemActions: [{ label: "Select", event: "SELECT", icon: "check" }], renderItem: ["fn", "item", { type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "checkbox", label: "@item.name" }] }] }] })
      SELECT -> selecting
        (fetch SelectableItem)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "md", align: "center", children: [{ type: "icon", name: "check-square", size: "lg" }, { type: "typography", content: "SelectableItems", variant: "h2" }] }, { type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "badge", label: "Selecting" }, { type: "button", label: "Clear", event: "CLEAR", variant: "ghost", icon: "x" }] }] }, { type: "divider" }, { type: "alert", variant: "info", message: ["concat", "Selected: ", "@payload.id"] }, { type: "data-grid", entity: "SelectableItem", emptyIcon: "inbox", emptyTitle: "No selectableitems yet", emptyDescription: "Add selectableitems to see them here.", itemActions: [{ label: "Select", event: "SELECT", icon: "check" }], renderItem: ["fn", "item", { type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "checkbox", label: "@item.name", checked: ["==", "@item.id", "@payload.id"] }] }] }, { type: "divider" }, { type: "button-group", variant: "outline", buttons: [{ label: "Select All", event: "SELECT", icon: "check-square" }, { label: "Deselect All", event: "DESELECT", icon: "square" }, { label: "Confirm", event: "CONFIRM_SELECTION", icon: "check" }] }] })
    }
    state selecting {
      SELECT -> selecting
        (fetch SelectableItem)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "md", align: "center", children: [{ type: "icon", name: "check-square", size: "lg" }, { type: "typography", content: "SelectableItems", variant: "h2" }] }, { type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "badge", label: "Selecting" }, { type: "button", label: "Clear", event: "CLEAR", variant: "ghost", icon: "x" }] }] }, { type: "divider" }, { type: "alert", variant: "info", message: ["concat", "Selected: ", "@payload.id"] }, { type: "data-grid", entity: "SelectableItem", emptyIcon: "inbox", emptyTitle: "No selectableitems yet", emptyDescription: "Add selectableitems to see them here.", itemActions: [{ label: "Select", event: "SELECT", icon: "check" }], renderItem: ["fn", "item", { type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "checkbox", label: "@item.name", checked: ["==", "@item.id", "@payload.id"] }] }] }, { type: "divider" }, { type: "button-group", variant: "outline", buttons: [{ label: "Select All", event: "SELECT", icon: "check-square" }, { label: "Deselect All", event: "DESELECT", icon: "square" }, { label: "Confirm", event: "CONFIRM_SELECTION", icon: "check" }] }] })
      DESELECT -> idle
        (fetch SelectableItem)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "check-square", size: "lg" }, { type: "typography", content: "SelectableItems", variant: "h2" }] }, { type: "divider" }, { type: "typography", variant: "caption", color: "muted", content: "Choose a selectableitem to continue." }, { type: "data-grid", entity: "SelectableItem", emptyIcon: "inbox", emptyTitle: "No selectableitems yet", emptyDescription: "Add selectableitems to see them here.", className: "transition-shadow hover:shadow-md cursor-pointer", itemActions: [{ label: "Select", event: "SELECT", icon: "check" }], renderItem: ["fn", "item", { type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "checkbox", label: "@item.name" }] }] }] })
      CLEAR -> idle
        (fetch SelectableItem)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "check-square", size: "lg" }, { type: "typography", content: "SelectableItems", variant: "h2" }] }, { type: "divider" }, { type: "typography", variant: "caption", color: "muted", content: "Choose a selectableitem to continue." }, { type: "data-grid", entity: "SelectableItem", emptyIcon: "inbox", emptyTitle: "No selectableitems yet", emptyDescription: "Add selectableitems to see them here.", className: "transition-shadow hover:shadow-md cursor-pointer", itemActions: [{ label: "Select", event: "SELECT", icon: "check" }], renderItem: ["fn", "item", { type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "checkbox", label: "@item.name" }] }] }] })
      CONFIRM_SELECTION -> selected
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "md", align: "center", children: [{ type: "icon", name: "check-circle", size: "lg" }, { type: "typography", content: "Selection Confirmed", variant: "h2" }] }, { type: "badge", label: "Confirmed" }] }, { type: "divider" }, { type: "alert", variant: "success", message: "Selection confirmed successfully." }, { type: "stack", direction: "horizontal", gap: "md", align: "center", children: [{ type: "typography", variant: "caption", content: "Selected ID:" }, { type: "typography", variant: "body", content: "@payload.id" }] }, { type: "button", label: "Clear Selection", event: "CLEAR", variant: "ghost", icon: "rotate-ccw" }] })
    }
    state selected {
      CLEAR -> idle
        (fetch SelectableItem)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "check-square", size: "lg" }, { type: "typography", content: "SelectableItems", variant: "h2" }] }, { type: "divider" }, { type: "typography", variant: "caption", color: "muted", content: "Choose a selectableitem to continue." }, { type: "data-grid", entity: "SelectableItem", emptyIcon: "inbox", emptyTitle: "No selectableitems yet", emptyDescription: "Add selectableitems to see them here.", className: "transition-shadow hover:shadow-md cursor-pointer", itemActions: [{ label: "Select", event: "SELECT", icon: "check" }], renderItem: ["fn", "item", { type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "checkbox", label: "@item.name" }] }] }] })
    }
  }
  page "/selectableitems/selection" -> SelectableItemSelection
}

Loading preview...

Orbital Visualization

Loading visualization...

Entity Fields

Field	Type	Default
id	string	-
name	string	-
description	string	-
status	string	"active"
createdAt	string	-

States

State	Type
idle	Initial
selecting	-
selected	-

Events

Event	Payload
INIT	-
SELECT	id: string
DESELECT	-
CLEAR	-
CONFIRM_SELECTION	id: string

Transitions

From	Event	To	Effects
idle	INIT	idle	2 effects
idle	SELECT	selecting	2 effects
selecting	SELECT	selecting	2 effects
selecting	DESELECT	idle	2 effects
selecting	CLEAR	idle	2 effects
selecting	CONFIRM_SELECTION	selected	1 effect
selected	CLEAR	idle	2 effects