@almadar/std 16.238.0 → 16.241.0

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

@@ -1,7 +1,7 @@
 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 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 FieldSpec = { name : string!, label : string, variant : h3 | h4 | overline | avatar | body | caption | badge | small | progress, icon : string, format : date | time | datetime | 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, colorMap : Map string BadgeColor, labels : Map string string, variant : h3 | h4 }
 type FilterSpec = { field : string!, label : string, options : [string] }
@@ -48,8 +48,9 @@ orbital BrowseItemOrbital {
       itemActions: @config.itemActions
       viewerRole: @config.viewerRole
       itemClickEvent: @config.itemClickEvent
-      maxInlineActions: @config.maxInlineActions
+      maxInlineActions: 0
       variant: compact
+      surface: none
       selfFetch: false
     }
 
@@ -283,30 +284,16 @@ orbital BrowseItemOrbital {
         @description "Entity field containing the thumbnail URL for each row."
         @synonyms "image field, thumbnail field, photo field, picture column"
         @tier "presentation"
-      titleBinding : string = @item.name
-        @label "Title field binding"
-        @description "Binding path for the card title slot (e.g. @item.dishName)."
-        @tier "internal"
-      descriptionBinding : string = @item.description
-        @label "Description field binding"
-        @description "Binding path for the card body/subtitle slot."
-        @tier "internal"
-      badgeBinding : string = @item.status
-        @label "Badge field binding"
-        @description "Binding path for the status/badge slot."
-        @tier "internal"
-      metaBinding : string = @item.createdAt
-        @label "Meta field binding"
-        @description "Binding path for the secondary meta slot (timestamp / category). Hosts binding a count or other non-date value should label it in the binding itself (e.g. (str/concat \"Vehicles: \" @item.vehicleCount)) and set metaFormat: none."
-        @tier "internal"
-      metaFormat : "none" | "date" | "time" | "datetime" | "number" = date
-        @label "Meta value format"
-        @description "Typography format for the feed meta slot — date by default so the createdAt binding renders human-readable instead of raw ISO; set none for non-date bindings."
+      surface : "auto" | "none" = auto
+        @label "Paint a surface behind the list?"
+        @description "auto (default) draws the theme's content surface behind every look — on a patterned page background the list reads as one block; the theme decides how that surface looks. none places the list directly on the page (e.g. a list already inside a card or panel you composed)."
+        @synonyms "card background, panel, container, list background, no background, transparent, bare"
+        @tier "presentation"
+      feedSurface : "cards" | "divided" | "plain" = cards
+        @label "How are feed items separated?"
+        @description "browseLook = feed only. cards = each item its own raised card with space between (community posts, listings); divided = one surface with hairline rows (inboxes, answer lists, notes); plain = no chrome, items on the page background (editorial article lists, changelogs). What each item shows comes from `fields`: overline = eyebrow above the title, h3/h4 = title (its `icon` becomes a leading tile), caption = prose, small/body = meta line, badge = pill, avatar = leading initials."
+        @synonyms "feed style, item chrome, card per item, divided list, editorial list, rows or cards"
         @tier "presentation"
-      categoryBinding : string = @item.category
-        @label "Category field binding"
-        @description "Binding path for the category/tag slot."
-        @tier "internal"
       itemActions : [ItemAction] = []
         @label "What actions can users take on each row?"
         @description "Buttons rendered on each row (e.g. Edit, Delete, View)."
@@ -490,6 +477,7 @@ orbital BrowseItemOrbital {
           emptyDescription: @config.emptyDescription
           emptyIcon: @config.emptyIcon
           emptyTitle: @config.emptyTitle
+          surface: @config.surface
           type: data-grid
         }]
         direction: vertical
@@ -539,6 +527,7 @@ orbital BrowseItemOrbital {
             itemClickEvent: @config.itemClickEvent
             look: dense
             maxInlineActions: @config.maxInlineActions
+            surface: none
             pageSize: @config.displayPageSize
             selectable: @config.selectable
             emptyDescription: @config.emptyDescription
@@ -551,7 +540,7 @@ orbital BrowseItemOrbital {
           gap: none
           type: stack
         }]
-        className: "rounded-lg border border-[var(--color-border)] bg-[var(--color-card)] shadow-sm overflow-hidden"
+        className: (if ["=", @config.surface, "auto"] "surface-content overflow-hidden" "")
         direction: vertical
         gap: none
         type: stack
@@ -595,82 +584,19 @@ orbital BrowseItemOrbital {
           type: stack
         }), {
           entity: ?data
-          fields: []
-          gap: md
+          fields: @config.fields
+          gap: none
           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: [{
-              align: start
-              children: [{
-                className: "rounded-full flex-shrink-0"
-                fallback: @config.titleBinding
-                size: md
-                type: avatar
-              }, {
-                children: [{
-                  align: center
-                  children: [{
-                    className: truncate
-                    content: @config.titleBinding
-                    type: typography
-                    variant: body
-                    weight: medium
-                  }, {
-                    label: @config.categoryBinding
-                    size: sm
-                    type: badge
-                    variant: neutral
-                  }]
-                  className: flex-wrap
-                  direction: horizontal
-                  gap: xs
-                  type: stack
-                }, {
-                  className: "text-[var(--color-foreground)] whitespace-pre-wrap break-words leading-relaxed"
-                  content: @config.descriptionBinding
-                  type: typography
-                  variant: body
-                }, {
-                  align: center
-                  children: [{
-                    color: muted
-                    content: @config.metaBinding
-                    format: @config.metaFormat
-                    type: typography
-                    variant: caption
-                  }, {
-                    label: @config.badgeBinding
-                    size: sm
-                    type: badge
-                    variant: default
-                  }]
-                  className: pt-1
-                  direction: horizontal
-                  gap: sm
-                  justify: between
-                  type: stack
-                }]
-                className: "flex-1 min-w-0"
-                direction: vertical
-                gap: xs
-                type: stack
-              }]
-              className: p-card-md
-              direction: horizontal
-              gap: md
-              type: stack
-            }]
-            className: "rounded-lg bg-[var(--color-card)] border border-[var(--color-border)] shadow-sm transition-all duration-normal hover:shadow-main hover:border-[var(--color-border-strong)] hover:-translate-y-px"
-            look: flat-bordered
-            padding: none
-            type: card
-          })
+          look: (if ["=", @config.feedSurface, "cards"] card-rows borderless)
+          maxInlineActions: @config.maxInlineActions
           emptyDescription: @config.emptyDescription
           emptyIcon: @config.emptyIcon
           emptyTitle: @config.emptyTitle
+          pageSize: @config.displayPageSize
+          surface: (if ["=", @config.feedSurface, "plain"] none @config.surface)
           type: data-list
-          variant: card
+          variant: (if ["=", @config.feedSurface, "divided"] card default)
         }]
         className: w-full
         direction: vertical
@@ -678,7 +604,7 @@ orbital BrowseItemOrbital {
         type: stack
       }
         @label "Feed look body"
-        @description "Render-ui SExpr rendered after rows load when browseLook = feed. Chronological card-per-item stream with avatar, title, meta, body, timestamp; composes titleBinding/descriptionBinding/categoryBinding/badgeBinding/metaBinding/searchPlaceholder/itemActions. Folded from std-browse-feed (Phase 5.B)."
+        @description "Render-ui SExpr rendered after rows load when browseLook = feed. Chronological item stream on the same `fields` contract every look reads (roles: overline, h3/h4, caption, small/body, badge, avatar), separated per feedSurface. Folded from std-browse-feed (Phase 5.B)."
         @tier "internal"
       galleryBodyContent : render-ui = {
         children: [(if @config.bodySearch {
@@ -727,6 +653,7 @@ orbital BrowseItemOrbital {
           emptyDescription: @config.emptyDescription
           emptyIcon: @config.emptyIcon
           emptyTitle: @config.emptyTitle
+          surface: @config.surface
           type: data-grid
         }]
         className: w-full
@@ -780,6 +707,8 @@ orbital BrowseItemOrbital {
             emptyDescription: @config.emptyDescription
             emptyIcon: @config.emptyIcon
             emptyTitle: @config.emptyTitle
+            pageSize: @config.displayPageSize
+            surface: none
             type: data-list
             variant: compact
           }]
@@ -788,7 +717,7 @@ orbital BrowseItemOrbital {
           gap: none
           type: stack
         }]
-        className: "rounded-lg border border-[var(--color-border)] bg-[var(--color-card)] shadow-sm overflow-hidden"
+        className: (if ["=", @config.surface, "auto"] "surface-content overflow-hidden" "")
         direction: vertical
         gap: none
         type: stack
@@ -851,7 +780,7 @@ orbital BrowseItemOrbital {
           }
           type: master-detail-layout
         }]
-        className: "rounded-lg border border-[var(--color-border)] bg-[var(--color-card)] shadow-sm overflow-hidden"
+        className: (if ["=", @config.surface, "auto"] "surface-content overflow-hidden" "")
         direction: vertical
         gap: none
         type: stack
@@ -899,6 +828,7 @@ orbital BrowseItemOrbital {
             closeEvent: @config.detailCloseEvent
             initialData: ?row
             showActions: true
+            surface: none
             type: detail-panel
           }
           hasSelection: true
@@ -911,7 +841,7 @@ orbital BrowseItemOrbital {
           }
           type: master-detail-layout
         }]
-        className: "rounded-lg border border-[var(--color-border)] bg-[var(--color-card)] shadow-sm overflow-hidden"
+        className: (if ["=", @config.surface, "auto"] "surface-content overflow-hidden" "")
         direction: vertical
         gap: none
         type: stack

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

@@ -1,5 +1,5 @@
 app std-graphs "2.0.0"
-"std-graphs — embeddable chart atom. ITEMS_LOADED keeps the rows whose @config.filterField equals @config.filterValue (blank = all), groups them by @config.categoryField, or (timeAxis=true) by the @config.period bucket of @config.timeField — rows without a time value have no place on a time axis and are left out — and aggregates per bucket. Multi-series rendering via @config.series (preformatted ChartSeries shape). Histograms via chartType=histogram pass pre-binned @payload.data through unchanged. Stacked / 100% stacked bars via @config.stack. Post-process sort + limit. Clicking a data point emits UI:@config.drillEvent with { label, value, seriesLabel? }. Drop into a dashboard alongside std-stats / std-browse."
+"std-graphs — embeddable chart atom. ITEMS_LOADED keeps the rows whose @config.filterField equals @config.filterValue (blank = all), groups them by @config.categoryField, or (timeAxis=true) by the @config.period bucket of @config.timeField — rows without a time value (or, by category, without a category value) have no bucket to land in and are left out — and aggregates per bucket. Multi-series rendering via @config.series (preformatted ChartSeries shape). Histograms via chartType=histogram pass pre-binned @payload.data through unchanged. Stacked / 100% stacked bars via @config.stack. Post-process sort + limit. Clicking a data point emits UI:@config.drillEvent with { label, value, seriesLabel? }. Drop into a dashboard alongside std-stats / std-browse."
 type ObjectSpec = { id : string, label : string, value : string }
 orbital GraphItemOrbital {
     type ChartPoint = { label : string!, value : number! }
@@ -38,7 +38,7 @@ orbital GraphItemOrbital {
           (set @entity.chartData (if ["=", @config.chartType, histogram] (array/map @rows (fn p {
           label: (object/get @p label)
           value: (object/get @p value)
-        })) (array/map (object/entries (if @config.timeAxis (array/groupBy (array/map (array/filter @rows (fn row (object/get @row @config.timeField))) (fn row (object/set @row "periodStart" (time/startOf (time/parse (object/get @row @config.timeField)) @config.period)))) "periodStart") (array/groupBy @rows @config.categoryField))) (fn entry {
+        })) (array/map (object/entries (if @config.timeAxis (array/groupBy (array/map (array/filter @rows (fn row (object/get @row @config.timeField))) (fn row (object/set @row "periodStart" (time/startOf (time/parse (object/get @row @config.timeField)) @config.period)))) "periodStart") (array/groupBy (array/filter @rows (fn row (object/get @row @config.categoryField))) @config.categoryField))) (fn entry {
           label: (object/get @entry "0")
           value: (if ["=", @config.aggregation, sum] (array/sum (object/get @entry "1") @config.valueField) (if ["=", @config.aggregation, avg] (array/avg (object/get @entry "1") @config.valueField) (if ["=", @config.aggregation, min] (array/min (object/get @entry "1") @config.valueField) (if ["=", @config.aggregation, max] (array/max (object/get @entry "1") @config.valueField) (array/len (object/get @entry "1"))))))
         })))))

package/behaviors/lolo/ui/core/atoms/std-panel-launcher.lolo

@@ -0,0 +1,97 @@
+app std-panel-launcher "1.0.0"
+"std-panel-launcher — a floating button on the page that opens a side panel holding one trait (an assistant, a help panel, a cart). Closed: the button floats bottom-right. Open: the panel shows `contentTrait` under `title` and the button steps aside; the panel's close button (or Escape on small screens) brings the button back. The panel slot defaults to `dock`, which pushes the page aside on wide screens and becomes a side sheet below 1024px. List the trait on every page that should carry the button — it never injects itself."
+;; @capabilities "floating action button, launcher, side panel, docked panel, chat launcher, help panel, assistant button"
+orbital PanelLauncherOrbital {
+  entity PanelLauncherView [runtime] {
+    id : string!
+  }
+
+  trait PanelLauncher -> @rebindable PanelLauncherView [interaction, instance] {
+    config {
+      contentTrait : trait
+        @label "What does the panel hold?"
+        @description "The trait the panel shows when it is open."
+        @synonyms "panel content, body, assistant, chat"
+        @tier "presentation"
+      title : string = "Panel"
+        @label "Panel title"
+        @description "Heading at the top of the open panel."
+        @tier "presentation"
+      icon : icon = message-circle
+        @label "Button icon"
+        @tier "presentation"
+      label : string = "Open panel"
+        @label "Button label"
+        @description "What the floating button does, read to screen readers and shown as its tooltip."
+        @synonyms "aria label, button name, tooltip"
+        @tier "presentation"
+      closeLabel : string = "Close panel"
+        @label "Close button label"
+        @tier "presentation"
+      panelSlot : slot = dock
+        @label "Where the panel opens"
+        @description "`dock` pushes the page aside (a side sheet on small screens); `drawer` slides over it."
+        @tier "presentation"
+    }
+    initial: closed
+
+    state closed {
+      INIT -> closed
+        (render-ui floating {
+          action: OPEN
+          icon: @config.icon
+          label: @config.label
+          type: floating-action-button
+        })
+      OPEN -> open
+        (render-ui floating null)
+        (render-ui @config.panelSlot {
+          children: [{
+            align: center
+            children: [{
+              content: @config.title
+              type: typography
+              variant: h4
+            }, {
+              action: CLOSE
+              aria-label: @config.closeLabel
+              icon: x
+              type: button
+              variant: ghost
+            }]
+            direction: horizontal
+            justify: between
+            type: stack
+          }, @config.contentTrait]
+          direction: vertical
+          gap: md
+          className: "h-full min-h-0 p-4"
+          type: stack
+        })
+    }
+
+    state open {
+      CLOSE -> closed
+        (render-ui @config.panelSlot null)
+        (render-ui floating {
+          action: OPEN
+          icon: @config.icon
+          label: @config.label
+          type: floating-action-button
+        })
+    }
+
+    emits {
+      OPEN
+        @description "Open the panel."
+        @synonyms "show, launch, expand"
+        @tier "presentation"
+      CLOSE
+        @description "Close the panel."
+        @synonyms "hide, dismiss, collapse"
+        @tier "presentation"
+    }
+  }
+
+  page "/panel-launcher" as PanelLauncherPage -> PanelLauncher
+}

package/behaviors/lolo/ui/core/atoms/std-site-header.lolo

@@ -1,5 +1,5 @@
 app std-site-header "1.0.0"
-"std-site-header — the sticky top bar of a public website: brand (logo + name), navigation links with the current page marked (a link with children opens a dropdown), an optional language picker (std-language-picker: the same page in each language, default language at the root and the others under /<code>/), and an optional call-to-action button. On small screens the links fold into a menu opened by a toggle, with child links indented under their parent and the call-to-action button at the bottom. Links follow `href` (in-app path, #anchor, or absolute URL); the header action and the small-screen menu links also emit NAV_CLICKED { href, label }. Pick for marketing sites, docs portals and product websites; for signed-in app chrome use std-app-layout."
+"std-site-header — the sticky top bar of a public website: brand (logo + name, linking home when `homeHref` is set), navigation links with the current page marked (a link with children opens a dropdown), an optional light/dark toggle, an optional language picker (std-language-picker: the same page in each language, default language at the root and the others under /<code>/), and an optional call-to-action button. On small screens the links fold into a menu opened by a toggle, with child links indented under their parent and the call-to-action button at the bottom. Links follow `href` (in-app path, #anchor, or absolute URL); the header action and the small-screen menu links also emit NAV_CLICKED { href, label }. Pick for marketing sites, docs portals and product websites; for signed-in app chrome use std-app-layout."
 type SiteNavLink = { label : string!, href : string!, children : [SiteNavLink] }
 type SiteLanguage = { code : string!, label : string!, href : string! }
 orbital SiteHeaderOrbital {
@@ -54,6 +54,11 @@ orbital SiteHeaderOrbital {
         @label "Logo image"
         @description "Logo URL; empty shows the name only"
         @tier "presentation"
+      homeHref : string = ""
+        @label "Home link"
+        @description "Where the brand (logo + name) links to, usually the site's home page; empty leaves the brand unlinked"
+        @synonyms "logo link, home page, brand link"
+        @tier "presentation"
       links : [SiteNavLink] = [{ label: "Features", href: "/features" }, { label: "Pricing", href: "/pricing" }, { label: "About", href: "/about" }]
         @label "Navigation links"
         @synonyms "menu, nav items, top navigation"
@@ -67,6 +72,11 @@ orbital SiteHeaderOrbital {
         @description "Every language this page exists in, each named in its own language, with the href of THIS page in that language (default language at the root, others under /<code>/). Empty hides the language picker."
         @synonyms "locales, translations, language switcher, i18n"
         @tier "presentation"
+      showThemeToggle : boolean = false
+        @label "Light/dark toggle"
+        @description "Show a button that switches the site between its light and dark mode"
+        @synonyms "dark mode, theme switch, color mode"
+        @tier "presentation"
       currentLanguage : string = "en"
         @label "Current language"
         @description "The code of the language this page is in"
@@ -92,6 +102,7 @@ orbital SiteHeaderOrbital {
           showMenuToggle: false
           brandName: @config.brandName
           logoSrc: @config.logoSrc
+          brandHref: @config.homeHref
           className: "hidden lg:flex"
           navigationItems: (array/map @config.links (fn entry {
             label: (object/get @entry label "")
@@ -103,7 +114,7 @@ orbital SiteHeaderOrbital {
               active: (== (object/get @child href "") @config.currentPath)
             }))
           }))
-          actions: [@trait.SiteHeaderLanguages, {
+          actions: [@trait.SiteHeaderLanguages, { type: theme-toggle, size: sm, className: (if @config.showThemeToggle "" hidden) }, {
             type: button
             label: @config.actionLabel
             href: @config.actionHref
@@ -122,8 +133,9 @@ orbital SiteHeaderOrbital {
           onMenuToggle: MENU_TOGGLE
           brandName: @config.brandName
           logoSrc: @config.logoSrc
+          brandHref: @config.homeHref
           className: "lg:hidden"
-          actions: [@trait.SiteHeaderLanguages]
+          actions: [@trait.SiteHeaderLanguages, { type: theme-toggle, size: sm, className: (if @config.showThemeToggle "" hidden) }]
         }, {
           type: stack
           direction: vertical

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

@@ -391,7 +391,7 @@ orbital StatsItemOrbital {
             justify: between
             type: stack
           }]
-          className: "rounded-lg border border-[var(--color-border)] bg-[var(--color-card)] p-card-md shadow-elevation-sm hover:shadow-elevation-md transition-shadow min-h-[180px]"
+          className: "surface-content p-card-md hover:shadow-elevation-dialog transition-shadow min-h-[180px]"
           direction: vertical
           gap: sm
           type: stack

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

@@ -19,9 +19,9 @@ orbital TagStripOrbital {
     createdAt : string = ""
     pendingId : string = ""
     docId : string @intrinsic @description "The open record's id, stashed at SHOW_TAG_STRIP so commits know which row to update." @synonyms "record id, scope id" = ""
-    docTagIds : [string] @intrinsic @description "The open record's current tag ids, stashed at SHOW_TAG_STRIP for membership tests." @synonyms "attached tags, current tags"
+    docTagIds : [string] @intrinsic @description "The open record's current tag ids, stashed at SHOW_TAG_STRIP for membership tests." @synonyms "attached tags, current tags" = []
     pendingTagName : string @intrinsic @description "The tag name typed or clicked on add, held across the resolve fetch." @synonyms "typed tag, adding tag" = ""
-    pendingNames : [string] @intrinsic @description "The chip names remaining after a remove, held across the resolve fetch." @synonyms "remaining tags, kept names"
+    pendingNames : [string] @intrinsic @description "The chip names remaining after a remove, held across the resolve fetch." @synonyms "remaining tags, kept names" = []
   }
 
   trait TagStrip -> @rebindable StripTag [interaction, collection] {

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

@@ -5,7 +5,7 @@ orbital TagTaxonomyOrbital {
 
     type TagLoadFailed = Event { error : string, code : string } "Fired when the tag collection fails to load"
 
-    type TagSelected = Event { tagId : string! } "Fired when a tag is selected to drill into its children"
+    type TagSelected = Event { tagId : Tag.id! } "Fired when a tag is selected to drill into its children"
 
     type TagCreated = Event Tag "Fired after a new tag row persists — the payload IS the created row (flat: ?id, ?name, ?parentId)"
 
@@ -476,7 +476,7 @@ orbital TagTaxonomyOrbital {
 
     emits {
       SELECT_TAG {
-        tagId : string!
+        tagId : Tag.id!
       }
         @description "Signals a tag has been chosen for navigation."
         @synonyms "choose, pick, activate, navigate"
@@ -495,7 +495,7 @@ orbital TagTaxonomyOrbital {
         @synonyms "error, failed, problem, issue"
         @tier "internal"
       TagSelected {
-        tagId : string!
+        tagId : Tag.id!
       }
         @description "Signals a tag has been chosen for further exploration."
         @synonyms "chosen, picked, activated, highlighted"
@@ -512,7 +512,7 @@ orbital TagTaxonomyOrbital {
         @synonyms "cancel, back"
         @tier "internal"
       LEVEL_RELOAD {
-        tagId : string
+        tagId : Tag.id
       }
         @description "Internal hop that refetches the open level after the new-category form closes (a fetch filter cannot read trait state, so the level travels by payload)."
         @synonyms "reload level, refresh"
@@ -532,7 +532,7 @@ orbital TagTaxonomyOrbital {
 
     listens {
       SELECT_TAG {
-        tagId : string!
+        tagId : Tag.id!
       }
         @description "A tag in the taxonomy was selected for navigation."
         @synonyms "choose, pick, activate, navigate"
@@ -551,7 +551,7 @@ orbital TagTaxonomyOrbital {
         @synonyms "error, failure, load failed"
         @tier "internal"
       TagSelected {
-        tagId : string!
+        tagId : Tag.id!
       }
         @description "A tag in the taxonomy has been chosen by the user."
         @synonyms "chosen, picked, activated, selected"
@@ -571,7 +571,7 @@ orbital TagTaxonomyOrbital {
         @synonyms "cancel, back"
         @tier "internal"
       LEVEL_RELOAD {
-        tagId : string
+        tagId : Tag.id
       }
         @description "Refetch the open level."
         @synonyms "reload level, refresh"

package/behaviors/lolo/ui/core/atoms/std-version-history.lolo

@@ -168,7 +168,7 @@ orbital RevisionOrbital {
                 type: typography
                 variant: caption
               }, {
-                content: @entity.createdAt
+                content: (time/format (time/parse @entity.createdAt) "MMM D, YYYY")
                 type: typography
                 variant: body
               }]

package/behaviors/lolo/ui/core/atoms/ui-animated-graphic.lolo

@@ -27,6 +27,7 @@ orbital AnimatedGraphicOrbital {
           alt: @config.alt
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -106,6 +107,10 @@ orbital AnimatedGraphicOrbital {
         @label "Enter Delay"
         @description "Stagger step for the entry: waits this many `--motion-enter-stagger` steps before animating."
         @tier "presentation"
+      skeleton : "header" | "table" | "list" | "grid" | "detail" | "stats" | "form" | "card" | "text" | "none"
+        @label "Skeleton"
+        @description "Skeleton shown while this element's server render is in flight: a shape (`table`, `list`, …), `{ variant, rows?, columns?, fields? }`, or `none`."
+        @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)."

package/behaviors/lolo/ui/core/atoms/ui-animated-reveal.lolo

@@ -24,6 +24,7 @@ orbital AnimatedRevealOrbital {
           children: @config.children
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -91,6 +92,10 @@ orbital AnimatedRevealOrbital {
         @label "Enter Delay"
         @description "Stagger step for the entry: waits this many `--motion-enter-stagger` steps before animating."
         @tier "presentation"
+      skeleton : "header" | "table" | "list" | "grid" | "detail" | "stats" | "form" | "card" | "text" | "none"
+        @label "Skeleton"
+        @description "Skeleton shown while this element's server render is in flight: a shape (`table`, `list`, …), `{ variant, rows?, columns?, fields? }`, or `none`."
+        @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)."

package/behaviors/lolo/ui/core/atoms/ui-aside.lolo

@@ -17,6 +17,7 @@ orbital AsideOrbital {
           children: @config.children
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -52,6 +53,10 @@ orbital AsideOrbital {
         @label "Enter Delay"
         @description "Stagger step for the entry: waits this many `--motion-enter-stagger` steps before animating."
         @tier "presentation"
+      skeleton : "header" | "table" | "list" | "grid" | "detail" | "stats" | "form" | "card" | "text" | "none"
+        @label "Skeleton"
+        @description "Skeleton shown while this element's server render is in flight: a shape (`table`, `list`, …), `{ variant, rows?, columns?, fields? }`, or `none`."
+        @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)."

package/behaviors/lolo/ui/core/atoms/ui-atlas-image.lolo

@@ -32,6 +32,7 @@ orbital AtlasImageOrbital {
           aria-hidden: @config.ariaHidden
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           type: atlas-image
         })
     }
@@ -86,6 +87,10 @@ orbital AtlasImageOrbital {
         @label "Enter Delay"
         @description "Stagger step for the entry: waits this many `--motion-enter-stagger` steps before animating."
         @tier "presentation"
+      skeleton : "header" | "table" | "list" | "grid" | "detail" | "stats" | "form" | "card" | "text" | "none"
+        @label "Skeleton"
+        @description "Skeleton shown while this element's server render is in flight: a shape (`table`, `list`, …), `{ variant, rows?, columns?, fields? }`, or `none`."
+        @tier "presentation"
     }
   }
 

package/behaviors/lolo/ui/core/atoms/ui-atlas-panel.lolo

@@ -30,6 +30,7 @@ orbital AtlasPanelOrbital {
           aria-hidden: @config.ariaHidden
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           type: atlas-panel
         })
     }
@@ -76,6 +77,10 @@ orbital AtlasPanelOrbital {
         @label "Enter Delay"
         @description "Stagger step for the entry: waits this many `--motion-enter-stagger` steps before animating."
         @tier "presentation"
+      skeleton : "header" | "table" | "list" | "grid" | "detail" | "stats" | "form" | "card" | "text" | "none"
+        @label "Skeleton"
+        @description "Skeleton shown while this element's server render is in flight: a shape (`table`, `list`, …), `{ variant, rows?, columns?, fields? }`, or `none`."
+        @tier "presentation"
     }
   }
 

package/behaviors/lolo/ui/core/atoms/ui-avatar.lolo

@@ -26,6 +26,7 @@ orbital AvatarOrbital {
           actionPayload: @config.actionPayload
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -110,6 +111,10 @@ orbital AvatarOrbital {
         @label "Enter Delay"
         @description "Stagger step for the entry: waits this many `--motion-enter-stagger` steps before animating."
         @tier "presentation"
+      skeleton : "header" | "table" | "list" | "grid" | "detail" | "stats" | "form" | "card" | "text" | "none"
+        @label "Skeleton"
+        @description "Skeleton shown while this element's server render is in flight: a shape (`table`, `list`, …), `{ variant, rows?, columns?, fields? }`, or `none`."
+        @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)."

package/behaviors/lolo/ui/core/atoms/ui-badge.lolo

@@ -38,6 +38,7 @@ orbital BadgeOrbital {
           removeLabel: @config.removeLabel
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -101,6 +102,10 @@ orbital BadgeOrbital {
         @label "Enter Delay"
         @description "Stagger step for the entry: waits this many `--motion-enter-stagger` steps before animating."
         @tier "presentation"
+      skeleton : "header" | "table" | "list" | "grid" | "detail" | "stats" | "form" | "card" | "text" | "none"
+        @label "Skeleton"
+        @description "Skeleton shown while this element's server render is in flight: a shape (`table`, `list`, …), `{ variant, rows?, columns?, fields? }`, or `none`."
+        @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)."