@almadar/std 16.236.0 → 16.238.0

package/behaviors/lolo/ui/avl/atoms/ui-avl-state-machine.lolo

@@ -58,6 +58,22 @@ orbital AvlStateMachineOrbital {
           direction: @config.direction
           showHeader: @config.showHeader
           className: @config.className
+          enter: @config.enter
+          enterDelay: @config.enterDelay
+          aria-label: @config.ariaLabel
+          aria-labelledby: @config.ariaLabelledby
+          aria-describedby: @config.ariaDescribedby
+          aria-live: @config.ariaLive
+          aria-current: @config.ariaCurrent
+          aria-pressed: @config.ariaPressed
+          aria-expanded: @config.ariaExpanded
+          aria-selected: @config.ariaSelected
+          aria-hidden: @config.ariaHidden
+          aria-busy: @config.ariaBusy
+          role: @config.role
+          lang: @config.lang
+          dir: @config.dir
+          tabIndex: @config.tabIndex
           type: avl-state-machine
         })
     }
@@ -137,6 +153,80 @@ orbital AvlStateMachineOrbital {
         @label "Class Name"
         @description "className prop"
         @tier "presentation"
+      enter : "none" | "fade" | "rise" | "scale" | "slide"
+        @label "Enter"
+        @description "How this element animates in when it mounts (theme-styled); overrides the theme's default slot entry. `none` opts out."
+        @tier "presentation"
+      enterDelay : number
+        @label "Enter Delay"
+        @description "Stagger step for the entry: waits this many `--motion-enter-stagger` steps before animating."
+        @tier "presentation"
+      ariaLabel : string
+        @label "Aria-label"
+        @description "Accessible name read by screen readers when the visible text is missing or not descriptive (e.g. an icon-only control)."
+        @synonyms "aria-label"
+        @tier "presentation"
+      ariaLabelledby : string
+        @label "Aria-labelledby"
+        @description "Id of the element whose text names this one."
+        @synonyms "aria-labelledby"
+        @tier "presentation"
+      ariaDescribedby : string
+        @label "Aria-describedby"
+        @description "Id of the element whose text describes this one (help text, error)."
+        @synonyms "aria-describedby"
+        @tier "presentation"
+      ariaLive : "off" | "polite" | "assertive"
+        @label "Aria-live"
+        @description "Announce changes to this region: polite waits for a pause, assertive interrupts."
+        @synonyms "aria-live"
+        @tier "presentation"
+      ariaCurrent : "page" | "step" | "location" | "date" | "time" | "true" | "false"
+        @label "Aria-current"
+        @description "Marks the current item in a set: the current page, step, location, date or time."
+        @synonyms "aria-current"
+        @tier "presentation"
+      ariaPressed : "true" | "false" | "mixed"
+        @label "Aria-pressed"
+        @description "Toggle-button state."
+        @synonyms "aria-pressed"
+        @tier "presentation"
+      ariaExpanded : boolean
+        @label "Aria-expanded"
+        @description "Whether the element it controls is expanded."
+        @synonyms "aria-expanded"
+        @tier "presentation"
+      ariaSelected : boolean
+        @label "Aria-selected"
+        @description "Whether this item is selected (tabs, options, grid cells)."
+        @synonyms "aria-selected"
+        @tier "presentation"
+      ariaHidden : boolean
+        @label "Aria-hidden"
+        @description "Hide from assistive technology (decorative content only)."
+        @synonyms "aria-hidden"
+        @tier "presentation"
+      ariaBusy : boolean
+        @label "Aria-busy"
+        @description "This region is updating; assistive technology waits before announcing it."
+        @synonyms "aria-busy"
+        @tier "presentation"
+      role : "alert" | "alertdialog" | "application" | "article" | "banner" | "blockquote" | "button" | "caption" | "cell" | "checkbox" | "code" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "deletion" | "dialog" | "document" | "emphasis" | "feed" | "figure" | "form" | "generic" | "grid" | "gridcell" | "group" | "heading" | "img" | "insertion" | "link" | "list" | "listbox" | "listitem" | "log" | "main" | "marquee" | "math" | "menu" | "menubar" | "menuitem" | "menuitemcheckbox" | "menuitemradio" | "meter" | "navigation" | "none" | "note" | "option" | "paragraph" | "presentation" | "progressbar" | "radio" | "radiogroup" | "region" | "row" | "rowgroup" | "rowheader" | "scrollbar" | "search" | "searchbox" | "separator" | "slider" | "spinbutton" | "status" | "strong" | "subscript" | "superscript" | "switch" | "tab" | "table" | "tablist" | "tabpanel" | "term" | "textbox" | "time" | "timer" | "toolbar" | "tooltip" | "tree" | "treegrid" | "treeitem"
+        @label "Role"
+        @description "WAI-ARIA role when the element's native semantics don't describe it."
+        @tier "presentation"
+      lang : string
+        @label "Lang"
+        @description "Language of this element's content (BCP 47, e.g. ar, sl, en)."
+        @tier "presentation"
+      dir : "ltr" | "rtl" | "auto"
+        @label "Dir"
+        @description "Text direction of this element's content."
+        @tier "presentation"
+      tabIndex : number
+        @label "Tab Index"
+        @description "0 puts the element in the Tab order; -1 makes it focusable only programmatically."
+        @tier "presentation"
     }
   }
 

package/behaviors/lolo/ui/avl/atoms/ui-behavior-view.lolo

@@ -72,6 +72,20 @@ orbital BehaviorViewOrbital {
       INIT -> idle
         (render-ui main {
           data: @config.data
+          aria-label: @config.ariaLabel
+          aria-labelledby: @config.ariaLabelledby
+          aria-describedby: @config.ariaDescribedby
+          aria-live: @config.ariaLive
+          aria-current: @config.ariaCurrent
+          aria-pressed: @config.ariaPressed
+          aria-expanded: @config.ariaExpanded
+          aria-selected: @config.ariaSelected
+          aria-hidden: @config.ariaHidden
+          aria-busy: @config.ariaBusy
+          role: @config.role
+          lang: @config.lang
+          dir: @config.dir
+          tabIndex: @config.tabIndex
           type: behavior-view
         })
     }
@@ -81,6 +95,72 @@ orbital BehaviorViewOrbital {
         @label "Data"
         @description "The orbital to summarize."
         @tier "presentation"
+      ariaLabel : string
+        @label "Aria-label"
+        @description "Accessible name read by screen readers when the visible text is missing or not descriptive (e.g. an icon-only control)."
+        @synonyms "aria-label"
+        @tier "presentation"
+      ariaLabelledby : string
+        @label "Aria-labelledby"
+        @description "Id of the element whose text names this one."
+        @synonyms "aria-labelledby"
+        @tier "presentation"
+      ariaDescribedby : string
+        @label "Aria-describedby"
+        @description "Id of the element whose text describes this one (help text, error)."
+        @synonyms "aria-describedby"
+        @tier "presentation"
+      ariaLive : "off" | "polite" | "assertive"
+        @label "Aria-live"
+        @description "Announce changes to this region: polite waits for a pause, assertive interrupts."
+        @synonyms "aria-live"
+        @tier "presentation"
+      ariaCurrent : "page" | "step" | "location" | "date" | "time" | "true" | "false"
+        @label "Aria-current"
+        @description "Marks the current item in a set: the current page, step, location, date or time."
+        @synonyms "aria-current"
+        @tier "presentation"
+      ariaPressed : "true" | "false" | "mixed"
+        @label "Aria-pressed"
+        @description "Toggle-button state."
+        @synonyms "aria-pressed"
+        @tier "presentation"
+      ariaExpanded : boolean
+        @label "Aria-expanded"
+        @description "Whether the element it controls is expanded."
+        @synonyms "aria-expanded"
+        @tier "presentation"
+      ariaSelected : boolean
+        @label "Aria-selected"
+        @description "Whether this item is selected (tabs, options, grid cells)."
+        @synonyms "aria-selected"
+        @tier "presentation"
+      ariaHidden : boolean
+        @label "Aria-hidden"
+        @description "Hide from assistive technology (decorative content only)."
+        @synonyms "aria-hidden"
+        @tier "presentation"
+      ariaBusy : boolean
+        @label "Aria-busy"
+        @description "This region is updating; assistive technology waits before announcing it."
+        @synonyms "aria-busy"
+        @tier "presentation"
+      role : "alert" | "alertdialog" | "application" | "article" | "banner" | "blockquote" | "button" | "caption" | "cell" | "checkbox" | "code" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "deletion" | "dialog" | "document" | "emphasis" | "feed" | "figure" | "form" | "generic" | "grid" | "gridcell" | "group" | "heading" | "img" | "insertion" | "link" | "list" | "listbox" | "listitem" | "log" | "main" | "marquee" | "math" | "menu" | "menubar" | "menuitem" | "menuitemcheckbox" | "menuitemradio" | "meter" | "navigation" | "none" | "note" | "option" | "paragraph" | "presentation" | "progressbar" | "radio" | "radiogroup" | "region" | "row" | "rowgroup" | "rowheader" | "scrollbar" | "search" | "searchbox" | "separator" | "slider" | "spinbutton" | "status" | "strong" | "subscript" | "superscript" | "switch" | "tab" | "table" | "tablist" | "tabpanel" | "term" | "textbox" | "time" | "timer" | "toolbar" | "tooltip" | "tree" | "treegrid" | "treeitem"
+        @label "Role"
+        @description "WAI-ARIA role when the element's native semantics don't describe it."
+        @tier "presentation"
+      lang : string
+        @label "Lang"
+        @description "Language of this element's content (BCP 47, e.g. ar, sl, en)."
+        @tier "presentation"
+      dir : "ltr" | "rtl" | "auto"
+        @label "Dir"
+        @description "Text direction of this element's content."
+        @tier "presentation"
+      tabIndex : number
+        @label "Tab Index"
+        @description "0 puts the element in the Tab order; -1 makes it focusable only programmatically."
+        @tier "presentation"
     }
   }
 

package/behaviors/lolo/ui/avl/atoms/ui-module-card.lolo

@@ -73,6 +73,20 @@ orbital ModuleCardOrbital {
       INIT -> idle
         (render-ui main {
           data: @config.data
+          aria-label: @config.ariaLabel
+          aria-labelledby: @config.ariaLabelledby
+          aria-describedby: @config.ariaDescribedby
+          aria-live: @config.ariaLive
+          aria-current: @config.ariaCurrent
+          aria-pressed: @config.ariaPressed
+          aria-expanded: @config.ariaExpanded
+          aria-selected: @config.ariaSelected
+          aria-hidden: @config.ariaHidden
+          aria-busy: @config.ariaBusy
+          role: @config.role
+          lang: @config.lang
+          dir: @config.dir
+          tabIndex: @config.tabIndex
           type: module-card
         })
     }
@@ -82,6 +96,72 @@ orbital ModuleCardOrbital {
         @label "Data"
         @description "The orbital to summarize."
         @tier "presentation"
+      ariaLabel : string
+        @label "Aria-label"
+        @description "Accessible name read by screen readers when the visible text is missing or not descriptive (e.g. an icon-only control)."
+        @synonyms "aria-label"
+        @tier "presentation"
+      ariaLabelledby : string
+        @label "Aria-labelledby"
+        @description "Id of the element whose text names this one."
+        @synonyms "aria-labelledby"
+        @tier "presentation"
+      ariaDescribedby : string
+        @label "Aria-describedby"
+        @description "Id of the element whose text describes this one (help text, error)."
+        @synonyms "aria-describedby"
+        @tier "presentation"
+      ariaLive : "off" | "polite" | "assertive"
+        @label "Aria-live"
+        @description "Announce changes to this region: polite waits for a pause, assertive interrupts."
+        @synonyms "aria-live"
+        @tier "presentation"
+      ariaCurrent : "page" | "step" | "location" | "date" | "time" | "true" | "false"
+        @label "Aria-current"
+        @description "Marks the current item in a set: the current page, step, location, date or time."
+        @synonyms "aria-current"
+        @tier "presentation"
+      ariaPressed : "true" | "false" | "mixed"
+        @label "Aria-pressed"
+        @description "Toggle-button state."
+        @synonyms "aria-pressed"
+        @tier "presentation"
+      ariaExpanded : boolean
+        @label "Aria-expanded"
+        @description "Whether the element it controls is expanded."
+        @synonyms "aria-expanded"
+        @tier "presentation"
+      ariaSelected : boolean
+        @label "Aria-selected"
+        @description "Whether this item is selected (tabs, options, grid cells)."
+        @synonyms "aria-selected"
+        @tier "presentation"
+      ariaHidden : boolean
+        @label "Aria-hidden"
+        @description "Hide from assistive technology (decorative content only)."
+        @synonyms "aria-hidden"
+        @tier "presentation"
+      ariaBusy : boolean
+        @label "Aria-busy"
+        @description "This region is updating; assistive technology waits before announcing it."
+        @synonyms "aria-busy"
+        @tier "presentation"
+      role : "alert" | "alertdialog" | "application" | "article" | "banner" | "blockquote" | "button" | "caption" | "cell" | "checkbox" | "code" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "deletion" | "dialog" | "document" | "emphasis" | "feed" | "figure" | "form" | "generic" | "grid" | "gridcell" | "group" | "heading" | "img" | "insertion" | "link" | "list" | "listbox" | "listitem" | "log" | "main" | "marquee" | "math" | "menu" | "menubar" | "menuitem" | "menuitemcheckbox" | "menuitemradio" | "meter" | "navigation" | "none" | "note" | "option" | "paragraph" | "presentation" | "progressbar" | "radio" | "radiogroup" | "region" | "row" | "rowgroup" | "rowheader" | "scrollbar" | "search" | "searchbox" | "separator" | "slider" | "spinbutton" | "status" | "strong" | "subscript" | "superscript" | "switch" | "tab" | "table" | "tablist" | "tabpanel" | "term" | "textbox" | "time" | "timer" | "toolbar" | "tooltip" | "tree" | "treegrid" | "treeitem"
+        @label "Role"
+        @description "WAI-ARIA role when the element's native semantics don't describe it."
+        @tier "presentation"
+      lang : string
+        @label "Lang"
+        @description "Language of this element's content (BCP 47, e.g. ar, sl, en)."
+        @tier "presentation"
+      dir : "ltr" | "rtl" | "auto"
+        @label "Dir"
+        @description "Text direction of this element's content."
+        @tier "presentation"
+      tabIndex : number
+        @label "Tab Index"
+        @description "0 puts the element in the Tab order; -1 makes it focusable only programmatically."
+        @tier "presentation"
     }
   }
 

package/behaviors/lolo/ui/core/atoms/std-billable-hour.lolo

@@ -52,17 +52,10 @@ orbital BillableHourOrbital {
           emit: { failure: BillableHourLoadFailed, success: BillableHourLoaded }
         })
         (render-ui main {
-          align: center
-          children: [{ type: spinner }, {
-            color: muted
-            content: "Loading time entries…"
-            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: table, rows: 6 }]
         })
       BillableHourLoaded -> browsing
         (render-ui main {
@@ -239,17 +232,10 @@ orbital BillableHourOrbital {
           emit: { failure: BillableHourLoadFailed, success: BillableHourLoaded }
         })
         (render-ui main {
-          align: center
-          children: [{ type: spinner }, {
-            color: muted
-            content: "Loading time entries…"
-            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: table, rows: 6 }]
         })
       INVOICE_HOURS -> loading
         (set @entity.id ?id)
@@ -294,7 +280,12 @@ orbital BillableHourOrbital {
         (fetch BillableHour {
           emit: { failure: BillableHourLoadFailed, success: BillableHourLoaded }
         })
-        (render-ui main { size: sm, type: spinner })
+        (render-ui main {
+          type: stack
+          direction: vertical
+          gap: lg
+          children: [{ type: skeleton, variant: header }, { type: skeleton, variant: table, rows: 6 }]
+        })
     }
 
     emits {

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

@@ -45,10 +45,7 @@ orbital BoardOrbital {
           emit: { failure: BoardItemsLoadFailed, success: BoardItemsLoaded }
           include: @config.include
         })
-        (render-ui main {
-          title: "Loading board…"
-          type: loading-state
-        })
+        (render-ui main { type: skeleton, variant: card })
       BoardItemsLoaded -> viewing_board
         (set @entity.boards (array/map @config.columns (fn col {
           count: (array/len (array/filter ?data (fn item ["=", (object/get @item @config.groupByField), (object/get @col key)])))
@@ -76,10 +73,7 @@ orbital BoardOrbital {
           emit: { failure: BoardItemsLoadFailed, success: BoardItemsLoaded }
           include: @config.include
         })
-        (render-ui main {
-          title: "Refreshing board…"
-          type: loading-state
-        })
+        (render-ui main { type: skeleton, variant: card })
       ;; Same refresh, different contract: a delete emits { id, deleted }, not
       ;; the row, so it cannot ride BoardItemsSaved's payload.
       BoardItemDeleted -> loading
@@ -87,10 +81,6 @@ orbital BoardOrbital {
           emit: { failure: BoardItemsLoadFailed, success: BoardItemsLoaded }
           include: @config.include
         })
-        (render-ui main {
-          title: "Refreshing board…"
-          type: loading-state
-        })
       BoardItemsSaveFailed -> error
         (set @entity.errorMessage ?error)
         (render-ui main {
@@ -106,10 +96,7 @@ orbital BoardOrbital {
           emit: { failure: BoardItemsLoadFailed, success: BoardItemsLoaded }
           include: @config.include
         })
-        (render-ui main {
-          title: "Loading board…"
-          type: loading-state
-        })
+        (render-ui main { type: skeleton, variant: card })
       OPEN_CARD -> viewing_card
         (set @entity.currentId ?id)
         (set @entity.currentTitle ?title)
@@ -291,10 +278,7 @@ orbital BoardOrbital {
           emit: { failure: BoardItemsLoadFailed, success: BoardItemsLoaded }
           include: @config.include
         })
-        (render-ui main {
-          title: "Refreshing board…"
-          type: loading-state
-        })
+        (render-ui main { type: skeleton, variant: card })
       MOVE_CARD -> loading
         (persist update BoardView { id: ?id, stage: ?targetGroup } {
           emit: { failure: BoardItemsSaveFailed, success: BoardItemsSaved }
@@ -307,10 +291,6 @@ orbital BoardOrbital {
         (persist delete BoardView ?id {
           emit: { failure: BoardItemsSaveFailed, success: BoardItemDeleted }
         })
-        (render-ui main {
-          title: "Deleting item…"
-          type: loading-state
-        })
     }
 
     state adding {
@@ -318,10 +298,6 @@ orbital BoardOrbital {
         (persist create BoardView ?data {
           emit: { failure: BoardItemsSaveFailed, success: BoardItemsSaved }
         })
-        (render-ui main {
-          title: "Saving…"
-          type: loading-state
-        })
       CANCEL_ADD -> viewing_board
         (render-ui main {
           title: "Cancelling…"
@@ -331,10 +307,7 @@ orbital BoardOrbital {
 
     state error {
       INIT -> loading
-        (render-ui main {
-          title: "Retrying…"
-          type: loading-state
-        })
+        (render-ui main { type: skeleton, variant: card })
     }
 
     emits {

package/behaviors/lolo/ui/core/atoms/std-book-reader.lolo

@@ -258,7 +258,8 @@ orbital BookReaderOrbital {
                   label: (object/get @chapter title "")
                   action: OPEN_CHAPTER
                   actionPayload: { index: @index }
-                  className: (if (== @index @entity.chapterIndex) "text-foreground font-semibold" "")
+                  aria-current: (if (== @index @entity.chapterIndex) "page" "false")
+                  className: (if (== @index @entity.chapterIndex) "h-auto justify-start text-start text-foreground font-semibold" "h-auto justify-start text-start")
                 }))
               }]
             }, {
@@ -266,16 +267,23 @@ orbital BookReaderOrbital {
               direction: vertical
               gap: lg
               children: [{
-                type: typography
-                content: @entity.progressLabel
-                variant: caption
-                color: muted
-              }, {
-                type: typography
-                content: @entity.chapterTitle
-                variant: h2
-                weight: bold
-                className: "tracking-tight"
+                type: stack
+                direction: vertical
+                gap: lg
+                role: status
+                children: [{
+                  type: typography
+                  content: @entity.progressLabel
+                  variant: caption
+                  color: muted
+                }, {
+                  type: typography
+                  content: @entity.chapterTitle
+                  variant: h1
+                  size: "3xl"
+                  weight: bold
+                  className: "tracking-tight"
+                }]
               }, {
                 type: markdown-content
                 content: @entity.chapterContent

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

@@ -1,8 +1,9 @@
 app std-browse "2.5.0"
 "std-browse as a Function — single primitive: data-grid. Owns the fetch + REFETCH (query/filter/page) state machine. Consumers configure fields/imageField/itemActions/cols/gap/variant; the atom renders the grid. Each `fields[]` entry accepts `{ name, label, variant }` plus optional `referenceEntity` + `displayField` to render a foreign-key column as the joined entity's display value (data-grid resolves @list[referenceEntity] at render time when both keys are present). `browseLook` (table default / dense / feed / gallery / master-detail / triage) selects one of six render bodies; dense/feed/gallery were folded in from std-browse-dense/-feed/-gallery (Phase 5.B); master-detail (split record view driven by the guarded VIEW/CLOSE self-transitions) and triage (inbox rows) were folded in 2026-07-26. Consumers retarget by setting browseLook."
-type FieldSpec = { name : string!, label : string, variant : h3 | h4 | body | caption | badge | small | progress, icon : string, format : date | currency | number | boolean | percent, key : string, header : string }
+type BadgeColor = "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "error" | "info" | "neutral" | "destructive"
+type FieldSpec = { name : string!, label : string, variant : h3 | h4 | body | caption | badge | small | progress, icon : string, format : date | currency | number | boolean | percent, key : string, header : string, colorMap : Map string BadgeColor, labels : Map string string }
 type ItemAction = { label : string!, event : event, navigatesTo : string, variant : primary | secondary | ghost | danger, icon : string, roles : [string], when : SExpr }
-type ColumnSpec = { key : string!, field : string, header : string, width : string, align : left | center | right, className : string, weight : normal | medium | semibold, format : badge | date | currency | number | percent | boolean, icon : string }
+type ColumnSpec = { key : string!, field : string, header : string, width : string, align : left | center | right, className : string, weight : normal | medium | semibold, format : badge | date | currency | number | percent | boolean, icon : string, colorMap : Map string BadgeColor, labels : Map string string, variant : h3 | h4 }
 type FilterSpec = { field : string!, label : string, options : [string] }
 orbital BrowseItemOrbital {
   type BrowseDetailAction = {
@@ -69,7 +70,11 @@ orbital BrowseItemOrbital {
           limit: @config.pageSize
           offset: 0
         })
-        (render-ui main { rows: 4, type: skeleton })
+        (if ["=", @config.browseLook, gallery]
+          (render-ui main { type: skeleton, variant: grid, rows: 6 })
+          (if (or ["=", @config.browseLook, feed] ["=", @config.browseLook, master-detail] ["=", @config.browseLook, triage])
+            (render-ui main { type: skeleton, variant: list, rows: 6 })
+            (render-ui main { type: skeleton, variant: table, rows: 6 })))
       BrowseItemLoaded -> browsing
         (if ["=", @config.browseLook, dense]
           (render-ui main @config.denseBodyContent)
@@ -164,7 +169,11 @@ orbital BrowseItemOrbital {
           limit: @config.pageSize
           offset: 0
         })
-        (render-ui main { rows: 4, type: skeleton })
+        (if ["=", @config.browseLook, gallery]
+          (render-ui main { type: skeleton, variant: grid, rows: 6 })
+          (if (or ["=", @config.browseLook, feed] ["=", @config.browseLook, master-detail] ["=", @config.browseLook, triage])
+            (render-ui main { type: skeleton, variant: list, rows: 6 })
+            (render-ui main { type: skeleton, variant: table, rows: 6 })))
     }
 
     emits {
@@ -406,11 +415,32 @@ orbital BrowseItemOrbital {
         @label "Browse look"
         @description "Layer 2 visual treatment for the whole browse surface. table = the default data-grid (bodyContent); dense = spreadsheet-style table with toolbar search (denseBodyContent); feed = chronological card stream (feedBodyContent); gallery = image-first responsive card grid (galleryBodyContent); master-detail = record-work split view — dense list left, clicked record's detail right (masterDetailBodyContent); triage = inbox-register compact rows for queue work (triageBodyContent). Selecting a non-table look swaps which body tree renders after rows load; any body may still be overridden directly at the call site for a one-off layout."
         @tier "presentation"
-      detailFields : [string] = [name, description, status, createdAt]
+      detailFields : [FieldSpec] = [{
+        label: Name
+        name: name
+        variant: h4
+      }, {
+        label: Description
+        name: description
+        variant: body
+      }, {
+        label: Status
+        name: status
+        variant: badge
+      }, {
+        format: date
+        label: Created
+        name: createdAt
+      }]
         @label "Which fields appear in the master-detail record pane?"
-        @description "Field names shown in the detail panel when browseLook = master-detail; the first entry doubles as the pane title. Consumers overriding columns/fields should override this list to match their entity."
+        @description "Fields shown in the detail panel when browseLook = master-detail; the field declared variant h3/h4 is the pane title. Consumers overriding columns/fields should override this list to match their entity."
         @synonyms "detail columns, record fields, detail pane fields"
         @tier "presentation"
+      detailCloseEvent : event = CLOSE
+        @label "Which pane action closes the record?"
+        @description "The detailActions entry whose event matches renders as the pane's close (×) button."
+        @synonyms "close event, dismiss event, pane close"
+        @tier "presentation"
       detailActions : [BrowseDetailAction] = [{ event: CLOSE, label: Close }]
         @label "Master-detail record pane actions"
         @description "Action buttons on the master-detail record pane (detail-panel `actions` descriptors: label/event/icon/variant). Consumers add their own record actions (Edit/Delete/…) alongside or instead of Close."
@@ -453,6 +483,7 @@ orbital BrowseItemOrbital {
           fields: @config.fields
           gap: @config.gap
           imageField: @config.imageField
+          itemClickEvent: @config.itemClickEvent
           itemActions: (array/filter @config.itemActions (fn item (or (= (array/len (object/get @item roles [])) 0) (array/includes (object/get @item roles []) @config.viewerRole))))
           maxInlineActions: @config.maxInlineActions
           pageSize: @config.displayPageSize
@@ -566,6 +597,7 @@ orbital BrowseItemOrbital {
           entity: ?data
           fields: []
           gap: md
+          itemClickEvent: @config.itemClickEvent
           itemActions: (array/filter @config.itemActions (fn item (or (= (array/len (object/get @item roles [])) 0) (array/includes (object/get @item roles []) @config.viewerRole))))
           renderItem: (fn item {
             children: [{
@@ -688,6 +720,7 @@ orbital BrowseItemOrbital {
           fields: @config.fields
           gap: lg
           imageField: @config.imageField
+          itemClickEvent: @config.itemClickEvent
           itemActions: (array/filter @config.itemActions (fn item (or (= (array/len (object/get @item roles [])) 0) (array/includes (object/get @item roles []) @config.viewerRole))))
           maxInlineActions: @config.maxInlineActions
           minCardWidth: 260
@@ -741,6 +774,7 @@ orbital BrowseItemOrbital {
           children: [{
             entity: ?data
             fields: @config.fields
+            itemClickEvent: @config.itemClickEvent
             itemActions: (array/filter @config.itemActions (fn item (or (= (array/len (object/get @item roles [])) 0) (array/includes (object/get @item roles []) @config.viewerRole))))
             maxInlineActions: @config.maxInlineActions
             emptyDescription: @config.emptyDescription
@@ -861,7 +895,8 @@ orbital BrowseItemOrbital {
         }), {
           detail: {
             actions: (array/filter @config.detailActions (fn action (or (= (array/len (object/get @action roles [])) 0) (array/includes (object/get @action roles []) @config.viewerRole))))
-            fieldNames: @config.detailFields
+            fields: @config.detailFields
+            closeEvent: @config.detailCloseEvent
             initialData: ?row
             showActions: true
             type: detail-panel

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

@@ -31,19 +31,7 @@ orbital CalendarEventOrbital {
           emit: { failure: CalendarEventLoadFailed, success: CalendarEventLoaded }
           include: @config.include
         })
-        (render-ui main {
-          align: center
-          children: [{ type: spinner }, {
-            color: muted
-            content: "Loading calendar…"
-            type: typography
-            variant: caption
-          }]
-          className: py-12
-          direction: vertical
-          gap: md
-          type: stack
-        })
+        (render-ui main { type: skeleton, variant: card })
       CalendarEventLoaded -> month-view
         (if ["=", @config.calendarLook, agenda-list]
           (render-ui main @config.agendaListBodyContent)
@@ -87,7 +75,7 @@ orbital CalendarEventOrbital {
           emit: { failure: CalendarEventLoadFailed, success: CalendarEventLoaded }
           include: @config.include
         })
-        (render-ui main { type: spinner })
+        (render-ui main { type: skeleton, variant: card })
       SELECT_DAY -> loading
         (set @entity.selectedRange ?value)
         ;; filter reads the candidate ROW's configured start column — never a
@@ -133,7 +121,7 @@ orbital CalendarEventOrbital {
           emit: { failure: CalendarEventLoadFailed, success: CalendarEventLoaded }
           include: @config.include
         })
-        (render-ui main { type: spinner })
+        (render-ui main { type: skeleton, variant: card })
       ;; 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
@@ -141,7 +129,7 @@ orbital CalendarEventOrbital {
           emit: { failure: CalendarEventLoadFailed, success: CalendarEventLoaded }
           include: @config.include
         })
-        (render-ui main { type: spinner })
+        (render-ui main { type: skeleton, variant: card })
     }
 
     emits {