@almadar/std 16.237.0 → 16.238.0

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 {
@@ -342,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 {
@@ -350,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 {
@@ -358,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 {

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 {

package/behaviors/lolo/ui/core/atoms/std-tag-taxonomy.lolo

@@ -38,17 +38,10 @@ orbital TagTaxonomyOrbital {
           emit: { failure: TagLoadFailed, success: TagLoaded }
         })
         (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: grid, rows: 6 }]
         })
       TagLoaded -> browsing
         (render-ui main {
@@ -150,17 +143,10 @@ orbital TagTaxonomyOrbital {
           emit: { failure: TagLoadFailed, success: TagLoaded }
         })
         (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: grid, rows: 6 }]
         })
       SELECT_TAG -> editing
         (set @entity.id ?tagId)
@@ -171,17 +157,10 @@ orbital TagTaxonomyOrbital {
           emit: { failure: TagLoadFailed, success: TagLoaded }
         })
         (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: grid, rows: 6 }]
         })
       SHOW_ROOT -> loading
         (set @entity.id "")
@@ -191,17 +170,10 @@ orbital TagTaxonomyOrbital {
           emit: { failure: TagLoadFailed, success: TagLoaded }
         })
         (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: grid, rows: 6 }]
         })
       TagLoaded -> browsing
         (render-ui main {
@@ -331,33 +303,19 @@ orbital TagTaxonomyOrbital {
       CANCEL_TAG -> loading
         (render-ui modal null)
         (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: grid, rows: 6 }]
         })
         (emit LEVEL_RELOAD { tagId: @entity.id })
       CLOSE -> loading
         (render-ui modal null)
         (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: grid, rows: 6 }]
         })
         (emit LEVEL_RELOAD { tagId: @entity.id })
       ;; Refetch the level the new tag landed on — its own parentId names it.
@@ -397,17 +355,10 @@ orbital TagTaxonomyOrbital {
           emit: { failure: TagLoadFailed, success: TagLoaded }
         })
         (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: grid, rows: 6 }]
         })
       SELECT_TAG -> editing
         (set @entity.id ?tagId)
@@ -516,17 +467,10 @@ orbital TagTaxonomyOrbital {
           emit: { failure: TagLoadFailed, success: TagLoaded }
         })
         (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: grid, rows: 6 }]
         })
     }