@almadar/std 16.236.0 → 16.238.0

package/behaviors/lolo/ui/core/atoms/std-recurrence.lolo

@@ -42,8 +42,10 @@ orbital RecurrenceOrbital {
           emit: { failure: RecurrenceLoadFailed, success: RecurrenceLoaded }
         })
         (render-ui main {
-          title: "Loading schedule…"
-          type: loading-state
+          type: stack
+          direction: vertical
+          gap: lg
+          children: [{ type: skeleton, variant: header }, { type: skeleton, variant: card }, { type: skeleton, variant: list, rows: 6 }]
         })
       RecurrenceLoaded -> viewing
         (set @entity.frequency (object/get (array/first ?data) frequency weekly))
@@ -140,6 +142,10 @@ orbital RecurrenceOrbital {
           }, {
             entity: @entity.occurrences
             fields: (title description date status)
+            titleField: "title"
+            descriptionField: "description"
+            dateField: "date"
+            statusField: "status"
             itemActions: (array/filter @config.itemActions (fn action (or (= (array/len (object/get @action roles [])) 0) (array/includes (object/get @action roles []) @config.viewerRole))))
             look: @config.timelineLook
             type: timeline
@@ -172,8 +178,10 @@ orbital RecurrenceOrbital {
           emit: { failure: RecurrenceLoadFailed, success: RecurrenceLoaded }
         })
         (render-ui main {
-          title: "Refreshing…"
-          type: loading-state
+          type: stack
+          direction: vertical
+          gap: lg
+          children: [{ type: skeleton, variant: header }, { type: skeleton, variant: card }, { type: skeleton, variant: list, rows: 6 }]
         })
       RecurrenceSaveFailed -> error
         (set @entity.errorMessage ?error)
@@ -318,17 +326,15 @@ orbital RecurrenceOrbital {
         (persist update RecurrenceView ?data {
           emit: { failure: RecurrenceSaveFailed, success: RecurrenceSaved }
         })
-        (render-ui main {
-          title: "Saving rule…"
-          type: loading-state
-        })
       CANCEL_RULE -> loading
         (fetch RecurrenceView {
           emit: { failure: RecurrenceLoadFailed, success: RecurrenceLoaded }
         })
         (render-ui main {
-          title: "Cancelling…"
-          type: loading-state
+          type: stack
+          direction: vertical
+          gap: lg
+          children: [{ type: skeleton, variant: header }, { type: skeleton, variant: card }, { type: skeleton, variant: list, rows: 6 }]
         })
     }
 
@@ -337,10 +343,6 @@ orbital RecurrenceOrbital {
         (persist update RecurrenceView { id: ?id, status: skipped } {
           emit: { failure: RecurrenceSaveFailed, success: RecurrenceSaved }
         })
-        (render-ui main {
-          title: "Skipping…"
-          type: loading-state
-        })
       RESCHEDULE_OCCURRENCE -> loading
         (set @entity.rescheduleDate ?newDate)
         (persist update RecurrenceView {
@@ -359,8 +361,10 @@ orbital RecurrenceOrbital {
           emit: { failure: RecurrenceLoadFailed, success: RecurrenceLoaded }
         })
         (render-ui main {
-          title: "Closing…"
-          type: loading-state
+          type: stack
+          direction: vertical
+          gap: lg
+          children: [{ type: skeleton, variant: header }, { type: skeleton, variant: card }, { type: skeleton, variant: list, rows: 6 }]
         })
     }
 
@@ -370,16 +374,20 @@ orbital RecurrenceOrbital {
           emit: { failure: RecurrenceLoadFailed, success: RecurrenceLoaded }
         })
         (render-ui main {
-          title: "Restarting…"
-          type: loading-state
+          type: stack
+          direction: vertical
+          gap: lg
+          children: [{ type: skeleton, variant: header }, { type: skeleton, variant: card }, { type: skeleton, variant: list, rows: 6 }]
         })
     }
 
     state error {
       INIT -> loading
         (render-ui main {
-          title: "Retrying…"
-          type: loading-state
+          type: stack
+          direction: vertical
+          gap: lg
+          children: [{ type: skeleton, variant: header }, { type: skeleton, variant: card }, { type: skeleton, variant: list, rows: 6 }]
         })
     }
 

package/behaviors/lolo/ui/core/atoms/std-related.lolo

@@ -33,17 +33,10 @@ orbital RelatedItemOrbital {
           emit: { failure: RelatedItemLoadFailed, success: RelatedItemLoaded }
         })
         (render-ui main {
-          align: center
-          children: [{ type: spinner }, {
-            color: muted
-            content: "Loading related…"
-            type: typography
-            variant: caption
-          }]
-          className: py-8
-          direction: vertical
-          gap: sm
           type: stack
+          direction: vertical
+          gap: lg
+          children: [{ type: skeleton, variant: header }, { type: skeleton, variant: list, rows: 6 }]
         })
       SHOW_RELATED -> loading
         (fetch RelatedItem {
@@ -51,17 +44,10 @@ orbital RelatedItemOrbital {
           filter: (or ["=", @config.relationField, ""] ["=", (object/get @entity @config.relationField), ?key])
         })
         (render-ui main {
-          align: center
-          children: [{ type: spinner }, {
-            color: muted
-            content: "Loading related…"
-            type: typography
-            variant: caption
-          }]
-          className: py-8
-          direction: vertical
-          gap: sm
           type: stack
+          direction: vertical
+          gap: lg
+          children: [{ type: skeleton, variant: header }, { type: skeleton, variant: list, rows: 6 }]
         })
       RelatedItemLoaded -> loaded
         (render-ui main {
@@ -140,7 +126,12 @@ orbital RelatedItemOrbital {
         (fetch RelatedItem {
           emit: { failure: RelatedItemLoadFailed, success: RelatedItemLoaded }
         })
-        (render-ui main { type: spinner })
+        (render-ui main {
+          type: stack
+          direction: vertical
+          gap: lg
+          children: [{ type: skeleton, variant: header }, { type: skeleton, variant: list, rows: 6 }]
+        })
       SELECT_RELATED -> loaded
         (set @entity.id ?id)
       SHOW_RELATED -> loading
@@ -148,7 +139,12 @@ orbital RelatedItemOrbital {
           emit: { failure: RelatedItemLoadFailed, success: RelatedItemLoaded }
           filter: (or ["=", @config.relationField, ""] ["=", (object/get @entity @config.relationField), ?key])
         })
-        (render-ui main { type: spinner })
+        (render-ui main {
+          type: stack
+          direction: vertical
+          gap: lg
+          children: [{ type: skeleton, variant: header }, { type: skeleton, variant: list, rows: 6 }]
+        })
     }
 
     state error {
@@ -156,20 +152,35 @@ orbital RelatedItemOrbital {
         (fetch RelatedItem {
           emit: { failure: RelatedItemLoadFailed, success: RelatedItemLoaded }
         })
-        (render-ui main { type: spinner })
+        (render-ui main {
+          type: stack
+          direction: vertical
+          gap: lg
+          children: [{ type: skeleton, variant: header }, { type: skeleton, variant: list, rows: 6 }]
+        })
       ;; the error screen's Retry button: INIT is lifecycle-only and the bus never
       ;; delivers it, so the affordance must target a first-class user event
       RETRY -> loading
         (fetch RelatedItem {
           emit: { failure: RelatedItemLoadFailed, success: RelatedItemLoaded }
         })
-        (render-ui main { type: spinner })
+        (render-ui main {
+          type: stack
+          direction: vertical
+          gap: lg
+          children: [{ type: skeleton, variant: header }, { type: skeleton, variant: list, rows: 6 }]
+        })
       SHOW_RELATED -> loading
         (fetch RelatedItem {
           emit: { failure: RelatedItemLoadFailed, success: RelatedItemLoaded }
           filter: (or ["=", @config.relationField, ""] ["=", (object/get @entity @config.relationField), ?key])
         })
-        (render-ui main { type: spinner })
+        (render-ui main {
+          type: stack
+          direction: vertical
+          gap: lg
+          children: [{ type: skeleton, variant: header }, { type: skeleton, variant: list, rows: 6 }]
+        })
     }
 
     emits {

package/behaviors/lolo/ui/core/atoms/std-saved-search.lolo

@@ -33,17 +33,10 @@ orbital SavedSearchOrbital {
           emit: { failure: SavedSearchLoadFailed, success: SavedSearchLoaded }
         })
         (render-ui main {
-          align: center
-          children: [{ type: spinner }, {
-            color: muted
-            content: "Loading saved searches…"
-            type: typography
-            variant: caption
-          }]
-          className: py-12
-          direction: vertical
-          gap: md
           type: stack
+          direction: vertical
+          gap: lg
+          children: [{ type: skeleton, variant: header }, { type: skeleton, variant: grid, rows: 6 }]
         })
       SavedSearchLoaded -> browsing
         (render-ui main {
@@ -77,6 +70,7 @@ orbital SavedSearchOrbital {
               variant: badge
             }]
             gap: sm
+            itemClickEvent: @config.itemClickEvent
             itemActions: (array/filter @config.itemActions (fn action (or (= (array/len (object/get @action roles [])) 0) (array/includes (object/get @action roles []) @config.viewerRole))))
             look: @config.tableLook
             type: data-grid
@@ -99,17 +93,10 @@ orbital SavedSearchOrbital {
           emit: { failure: SavedSearchLoadFailed, success: SavedSearchLoaded }
         })
         (render-ui main {
-          align: center
-          children: [{ type: spinner }, {
-            color: muted
-            content: "Loading saved searches…"
-            type: typography
-            variant: caption
-          }]
-          className: py-12
-          direction: vertical
-          gap: md
           type: stack
+          direction: vertical
+          gap: lg
+          children: [{ type: skeleton, variant: header }, { type: skeleton, variant: grid, rows: 6 }]
         })
       TOGGLE_ALERT -> browsing
         (set @entity.id ?id)
@@ -158,10 +145,12 @@ orbital SavedSearchOrbital {
           }, { type: divider }, {
             action: RENAME
             placeholder: Name
+            label: "Saved search name"
             type: input
             value: @entity.name
           }, {
             action: CHANGE_FREQUENCY
+            aria-label: "Alert frequency"
             options: [{ label: Instant, value: instant }, { label: Daily, value: daily }, { label: Weekly, value: weekly }]
             placeholder: "Alert frequency"
             type: select
@@ -234,7 +223,12 @@ orbital SavedSearchOrbital {
         (fetch SavedSearch {
           emit: { failure: SavedSearchLoadFailed, success: SavedSearchLoaded }
         })
-        (render-ui main { size: sm, type: spinner })
+        (render-ui main {
+          type: stack
+          direction: vertical
+          gap: lg
+          children: [{ type: skeleton, variant: header }, { type: skeleton, variant: grid, rows: 6 }]
+        })
     }
 
     emits {
@@ -253,6 +247,7 @@ orbital SavedSearchOrbital {
         @tier "presentation"
       EDIT {
         id : string!
+        row : SavedSearch
       }
         @description "Indicates a saved search is being modified."
         @synonyms "modify, update, change"
@@ -405,6 +400,10 @@ orbital SavedSearchOrbital {
         @label "Default saved-search name"
         @description "Name given to a saved search when the current search has no query text (filters only). Renamable afterwards."
         @tier "presentation"
+      itemClickEvent : event = EDIT
+        @label "Row click"
+        @description "Event emitted when a row is clicked; opens the saved search for editing. Empty disables the row click."
+        @tier "presentation"
       itemActions : [ItemAction] = [{
         event: TOGGLE_ALERT
         icon: bell

package/behaviors/lolo/ui/core/atoms/std-scoped-list.lolo

@@ -0,0 +1,143 @@
+app std-scoped-list "1.0.0"
+"std-scoped-list — the rows that belong to one parent record, scoped at runtime. SET_SCOPE { value } (forward the parent's own loaded event, e.g. a detail page's `TaskDetailLoaded -> SET_SCOPE with { value: ?data.id }`) lists only the rows whose `scopeField` equals that value; the scope is kept, so a later INIT (a reload after a row is created, edited or removed) lists the same parent's rows again. Before a scope arrives the list shows every row, or with `whenUnscoped: nothing` its empty state. Rows render through data-list (fields, row actions filtered by viewerRole, click event, sortBy). Opt in where a list must follow a parent picked elsewhere on the page: the bound entity carries the scope as an @intrinsic field — std-browse stays the general list."
+
+type FieldSpec = { name : string!, label : string, variant : h3 | h4 | body | caption | badge | small | progress, icon : string, format : date | currency | number | boolean | percent }
+type ItemAction = { label : string!, event : event, variant : primary | secondary | ghost | danger, icon : string, roles : [string] }
+
+orbital ScopedListOrbital {
+  type ScopedListLoaded = Event { data : [ScopedListItem] } "Fired when the scoped rows finish loading"
+  type ScopedListLoadFailed = Event { error : string } "Fired when the scoped rows fail to load"
+
+  entity ScopedListItem [runtime] {
+    id : string!
+    name : string! @description "The row's title." @synonyms "title, label"
+    parentId : string @description "The parent record this row belongs to (the default scopeField)." @synonyms "parent, owner id" = ""
+    scopeValue : string @intrinsic @description "The parent the list is scoped to; blank until SET_SCOPE." = ""
+  }
+
+  trait ScopedListBrowse -> @rebindable ScopedListItem [interaction, collection] {
+    initial: listing
+
+    state listing {
+      INIT -> listing
+        (fetch ScopedListItem {
+          emit: { failure: ScopedListLoadFailed, success: ScopedListLoaded }
+          filter: (or (and ["=", (str/default @entity.scopeValue ""), ""] ["=", @config.whenUnscoped, "everything"]) (and ["!=", (str/default @entity.scopeValue ""), ""] ["=", (object/get @entity @config.scopeField), @entity.scopeValue]))
+        })
+      SET_SCOPE -> listing
+        (set @entity.scopeValue ?value)
+        (fetch ScopedListItem {
+          emit: { failure: ScopedListLoadFailed, success: ScopedListLoaded }
+          filter: (or (and ["=", ?value, ""] ["=", @config.whenUnscoped, "everything"]) (and ["!=", ?value, ""] ["=", (object/get @entity @config.scopeField), ?value]))
+        })
+      ScopedListLoaded -> listing
+        (render-ui main {
+          entity: ?data
+          fields: @config.fields
+          itemActions: (array/filter @config.itemActions (fn item (or (= (array/len (object/get @item roles [])) 0) (array/includes (object/get @item roles []) @config.viewerRole))))
+          itemClickEvent: @config.itemClickEvent
+          sortBy: @config.sortBy
+          sortDirection: @config.sortDirection
+          emptyTitle: @config.emptyTitle
+          emptyDescription: @config.emptyDescription
+          emptyIcon: @config.emptyIcon
+          gap: @config.gap
+          type: data-list
+        })
+      ScopedListLoadFailed -> listing
+        (render-ui main { message: ?error, title: "Couldn't load this list", type: alert, variant: error })
+    }
+
+    emits {
+      ScopedListLoaded -> external {
+        data : [ScopedListItem]
+      }
+        @description "The scoped rows loaded; mirror them in another view (e.g. a sortable list)."
+        @synonyms "loaded, rows ready"
+        @tier "domain"
+      ScopedListLoadFailed -> internal {
+        error : string
+      }
+        @tier "internal"
+      VIEW -> external {
+        id : string!
+        row : ScopedListItem!
+      }
+        @description "A row was opened."
+        @synonyms "open, view, select"
+        @tier "presentation"
+      EDIT -> external {
+        id : string!
+        row : ScopedListItem!
+      }
+        @description "A row's edit action was chosen."
+        @synonyms "edit, change"
+        @tier "presentation"
+      DELETE -> external {
+        id : string!
+        row : ScopedListItem!
+      }
+        @description "A row's delete action was chosen."
+        @synonyms "remove, delete"
+        @tier "presentation"
+    }
+
+    listens {
+      SET_SCOPE {
+        value : string!
+      }
+        @description "Scope the list to the rows of this parent; kept for later reloads."
+        @synonyms "scope, select parent, open parent"
+        @tier "domain"
+    }
+
+    config {
+      scopeField : string = "parentId"
+        @label "Which field names the parent?"
+        @description "The row field holding the parent's id; SET_SCOPE's value is matched against it."
+        @synonyms "parent field, foreign key, owner field"
+        @tier "domain"
+      whenUnscoped : "everything" | "nothing" = everything
+        @label "What does the list show before a parent is picked?"
+        @description "everything = every row until SET_SCOPE narrows it; nothing = the empty state, so a detail page never shows other parents' rows while it loads."
+        @synonyms "unscoped, before selection, default scope"
+        @tier "policy"
+      fields : [FieldSpec] = [{ name: name, label: Name, variant: h4 }]
+        @label "Which fields does each row show?"
+        @tier "presentation"
+      itemActions : [ItemAction] = []
+        @label "Row actions"
+        @description "Actions offered on each row; give an item `roles` to show it only to those viewer roles."
+        @tier "presentation"
+      itemClickEvent : event = VIEW
+        @label "Event a row click fires"
+        @tier "presentation"
+      viewerRole : string = ""
+        @label "Viewer's role"
+        @description "The signed-in viewer's role that each action's `roles` is checked against (e.g. `viewerRole: @user.role`)."
+        @tier "policy"
+      sortBy : string = ""
+        @label "Sort rows by"
+        @description "Field the rows are ordered by; blank keeps the stored order."
+        @synonyms "order by, sort field"
+        @tier "presentation"
+      sortDirection : "asc" | "desc" = asc
+        @label "Sort direction"
+        @tier "presentation"
+      emptyTitle : string = "Nothing here yet"
+        @label "Empty-state title"
+        @tier "presentation"
+      emptyDescription : string = ""
+        @label "Empty-state description"
+        @tier "presentation"
+      emptyIcon : icon = inbox
+        @label "Empty-state icon"
+        @tier "presentation"
+      gap : "none" | "sm" | "md" | "lg" = sm
+        @label "Gap between rows"
+        @tier "presentation"
+    }
+  }
+
+  page "/scoped-list" as ScopedListPage -> ScopedListBrowse
+}

package/behaviors/lolo/ui/core/atoms/std-selection.lolo

@@ -24,17 +24,10 @@ orbital SelectableItemOrbital {
           emit: { failure: SelectableItemLoadFailed, success: SelectableItemLoaded }
         })
         (render-ui main {
-          align: center
-          children: [{ type: spinner }, {
-            color: muted
-            content: "Loading…"
-            type: typography
-            variant: caption
-          }]
-          className: py-12
-          direction: vertical
-          gap: md
           type: stack
+          direction: vertical
+          gap: lg
+          children: [{ type: skeleton, variant: header }, { type: skeleton, variant: list, rows: 6 }]
         })
       SelectableItemLoaded -> idle
         (render-ui main {
@@ -87,6 +80,7 @@ orbital SelectableItemOrbital {
             className: "transition-shadow hover:shadow-md cursor-pointer"
             entity: ?data
             fields: []
+            itemClickEvent: @config.itemClickEvent
             itemActions: (array/filter @config.itemActions (fn action (or (= (array/len (object/get @action roles [])) 0) (array/includes (object/get @action roles []) @config.viewerRole))))
             look: @config.tableLook
             pageSize: @config.displayPageSize
@@ -217,6 +211,7 @@ orbital SelectableItemOrbital {
             className: "transition-shadow hover:shadow-md cursor-pointer"
             entity: ?data
             fields: []
+            itemClickEvent: @config.itemClickEvent
             itemActions: (array/filter @config.itemActions (fn action (or (= (array/len (object/get @action roles [])) 0) (array/includes (object/get @action roles []) @config.viewerRole))))
             look: @config.tableLook
             pageSize: @config.displayPageSize
@@ -340,7 +335,12 @@ orbital SelectableItemOrbital {
         (fetch SelectableItem {
           emit: { failure: SelectableItemLoadFailed, success: SelectableItemLoaded }
         })
-        (render-ui main { type: spinner })
+        (render-ui main {
+          type: stack
+          direction: vertical
+          gap: lg
+          children: [{ type: skeleton, variant: header }, { type: skeleton, variant: list, rows: 6 }]
+        })
     }
 
     state selected {
@@ -348,7 +348,12 @@ orbital SelectableItemOrbital {
         (fetch SelectableItem {
           emit: { failure: SelectableItemLoadFailed, success: SelectableItemLoaded }
         })
-        (render-ui main { type: spinner })
+        (render-ui main {
+          type: stack
+          direction: vertical
+          gap: lg
+          children: [{ type: skeleton, variant: header }, { type: skeleton, variant: list, rows: 6 }]
+        })
     }
 
     state error {
@@ -356,14 +361,24 @@ orbital SelectableItemOrbital {
         (fetch SelectableItem {
           emit: { failure: SelectableItemLoadFailed, success: SelectableItemLoaded }
         })
-        (render-ui main { type: spinner })
+        (render-ui main {
+          type: stack
+          direction: vertical
+          gap: lg
+          children: [{ type: skeleton, variant: header }, { type: skeleton, variant: list, rows: 6 }]
+        })
       ;; the error screen's Retry button: INIT is lifecycle-only and the bus never
       ;; delivers it, so the affordance must target a first-class user event
       RETRY -> loading
         (fetch SelectableItem {
           emit: { failure: SelectableItemLoadFailed, success: SelectableItemLoaded }
         })
-        (render-ui main { type: spinner })
+        (render-ui main {
+          type: stack
+          direction: vertical
+          gap: lg
+          children: [{ type: skeleton, variant: header }, { type: skeleton, variant: list, rows: 6 }]
+        })
     }
 
     emits {
@@ -380,6 +395,7 @@ orbital SelectableItemOrbital {
     listens {
       SELECT {
         id : string!
+        row : SelectableItem
       }
         @description "Indicates an item has been chosen."
         @synonyms "chosen, picked, highlighted"
@@ -460,6 +476,10 @@ orbital SelectableItemOrbital {
         @description "Rows visible per page before the data-grid's own pagination control appears — 20 matches the pick-list density sweet spot (Miller's law, 10-25 rows)."
         @synonyms "visible rows, items per page, display limit, show per page"
         @tier "presentation"
+      itemClickEvent : event = SELECT
+        @label "Row click"
+        @description "Event emitted when a row is clicked; clicking a row selects it. Empty disables the row click."
+        @tier "presentation"
       itemActions : [ItemAction] = [{
         event: SELECT
         icon: check

package/behaviors/lolo/ui/core/atoms/std-signature-capture.lolo

@@ -27,19 +27,7 @@ orbital SignatureCaptureOrbital {
         (fetch Signature {
           emit: { failure: SignatureLoadFailed, success: SignatureLoaded }
         })
-        (render-ui main {
-          align: center
-          children: [{ type: spinner }, {
-            color: muted
-            content: "Loading…"
-            type: typography
-            variant: caption
-          }]
-          className: py-12
-          direction: vertical
-          gap: md
-          type: stack
-        })
+        (render-ui main { type: skeleton, variant: card })
       SignatureLoaded -> idle
         (render-ui main {
           children: [{

package/behaviors/lolo/ui/core/atoms/std-slide-deck.lolo

@@ -81,9 +81,9 @@ orbital SlideDeckOrbital {
           gap: md
           align: center
           children: [
-            (array/map [(array/len @config.slides)] (fn n (if @config.showArrows { type: button, variant: ghost, size: lg, icon: @config.prevIcon, action: GO_TO, actionPayload: { index: (if @config.loop (math/wrap (- @entity.slideIndex 1) 0 @n) (math/max 0 (- @entity.slideIndex 1))) }, disabled: (and (== @config.loop false) (<= @entity.slideIndex 0)) } null))),
+            (array/map [(array/len @config.slides)] (fn n (if @config.showArrows { type: button, variant: ghost, size: lg, icon: @config.prevIcon, aria-label: "Previous slide", action: GO_TO, actionPayload: { index: (if @config.loop (math/wrap (- @entity.slideIndex 1) 0 @n) (math/max 0 (- @entity.slideIndex 1))) }, disabled: (and (== @config.loop false) (<= @entity.slideIndex 0)) } null))),
             { type: center, className: "flex-1 min-w-0", minHeight: @config.stageMinHeight, children: (array/map [@entity.slideIndex] (fn i { type: box, className: "w-full", children: [(array/nth @config.slides @i)] })) },
-            (array/map [(array/len @config.slides)] (fn n (if @config.showArrows { type: button, variant: ghost, size: lg, icon: @config.nextIcon, action: GO_TO, actionPayload: { index: (if @config.loop (math/wrap (+ @entity.slideIndex 1) 0 @n) (math/min (- @n 1) (+ @entity.slideIndex 1))) }, disabled: (and (== @config.loop false) (>= @entity.slideIndex (- @n 1))) } null)))
+            (array/map [(array/len @config.slides)] (fn n (if @config.showArrows { type: button, variant: ghost, size: lg, icon: @config.nextIcon, aria-label: "Next slide", action: GO_TO, actionPayload: { index: (if @config.loop (math/wrap (+ @entity.slideIndex 1) 0 @n) (math/min (- @n 1) (+ @entity.slideIndex 1))) }, disabled: (and (== @config.loop false) (>= @entity.slideIndex (- @n 1))) } null)))
           ]
         }, (if @config.showProgress {
           type: stack

package/behaviors/lolo/ui/core/atoms/std-step-flow.lolo

@@ -40,10 +40,7 @@ orbital StepFlowOrbital {
         (fetch StepFlowView {
           emit: { failure: StepItemsLoadFailed, success: StepItemsLoaded }
         })
-        (render-ui main {
-          title: "Loading review…"
-          type: loading-state
-        })
+        (render-ui main { type: skeleton, variant: card })
       StepItemsLoaded -> running
         (set @entity.id (object/get (array/nth ?data 0) id))
         (set @entity.currentStepIndex 0)
@@ -270,10 +267,7 @@ orbital StepFlowOrbital {
         (fetch StepFlowView {
           emit: { failure: StepItemsLoadFailed, success: StepItemsLoaded }
         })
-        (render-ui main {
-          title: "Restarting…"
-          type: loading-state
-        })
+        (render-ui main { type: skeleton, variant: card })
     }
 
     state rejected {
@@ -284,10 +278,7 @@ orbital StepFlowOrbital {
         (fetch StepFlowView {
           emit: { failure: StepItemsLoadFailed, success: StepItemsLoaded }
         })
-        (render-ui main {
-          title: "Restarting…"
-          type: loading-state
-        })
+        (render-ui main { type: skeleton, variant: card })
     }
 
     state escalated {
@@ -297,10 +288,7 @@ orbital StepFlowOrbital {
         (fetch StepFlowView {
           emit: { failure: StepItemsLoadFailed, success: StepItemsLoaded }
         })
-        (render-ui main {
-          title: "Restarting…"
-          type: loading-state
-        })
+        (render-ui main { type: skeleton, variant: card })
     }
 
     state error {