@almadar/std 16.187.0 → 16.188.0

package/behaviors/lolo/ui/core/atoms/std-event-log.lolo

@@ -2,6 +2,7 @@ app std-event-log "2.1.0"
 "std-event-log — generic chronological event feed (Stripe activity log / GitHub PR timeline / Linear event feed style). Renders a vertical `timeline` with type-coded dots, a single horizontal chip-bar of kind filters (All + per-kind), reverse-chronological sort, and an inline form for logging events that weren't auto-captured. `config.kindOptions` maps each kind → status/icon/label so consuming molecules/organisms get type-coded visuals without re-implementing topology. Topology = loading / viewing / backfilling / error."
 type ObjectSpec = { id : string, label : string, value : string }
 type KindOption = { label : string!, value : string! }
+type FilterSpec = { field : string!, label : string, options : [string] }
 orbital EventLogOrbital {
     type LogEntry = { id : string!, title : string!, description : string, date : string, status : "complete" | "active" | "pending" | "error", kind : "created" | "updated" | "approved" | "rejected" }
 
@@ -89,7 +90,37 @@ orbital EventLogOrbital {
             direction: horizontal
             gap: sm
             type: stack
-          }, {
+          }, (if @config.bodySearch {
+            children: [{
+              className: "w-full max-w-md"
+              clearable: true
+              event: REFETCH_QUERY
+              placeholder: @config.searchPlaceholder
+              type: search-input
+            }]
+            direction: horizontal
+            gap: sm
+            type: stack
+          } {
+            children: []
+            gap: none
+            type: stack
+          }), (if [">", (array/len @config.filters), 0] {
+            children: [{
+              entity: EventLogView
+              event: REFETCH_FILTER
+              filters: @config.filters
+              look: @config.filterBarLook
+              type: filter-group
+            }]
+            direction: horizontal
+            gap: sm
+            type: stack
+          } {
+            children: []
+            gap: none
+            type: stack
+          }), {
             activeTab: @entity.filterKind
             tabChangeEvent: APPLY_FILTER
             tabs: @entity.filterChips
@@ -155,7 +186,150 @@ orbital EventLogOrbital {
             direction: horizontal
             gap: sm
             type: stack
+          }, (if @config.bodySearch {
+            children: [{
+              className: "w-full max-w-md"
+              clearable: true
+              event: REFETCH_QUERY
+              placeholder: @config.searchPlaceholder
+              type: search-input
+            }]
+            direction: horizontal
+            gap: sm
+            type: stack
+          } {
+            children: []
+            gap: none
+            type: stack
+          }), (if [">", (array/len @config.filters), 0] {
+            children: [{
+              entity: EventLogView
+              event: REFETCH_FILTER
+              filters: @config.filters
+              look: @config.filterBarLook
+              type: filter-group
+            }]
+            direction: horizontal
+            gap: sm
+            type: stack
+          } {
+            children: []
+            gap: none
+            type: stack
+          }), {
+            activeTab: @entity.filterKind
+            tabChangeEvent: APPLY_FILTER
+            tabs: @entity.filterChips
+            type: tabs
           }, {
+            entity: @entity.entries
+            fields: (title description date status)
+            look: @config.timelineLook
+            type: timeline
+          }]
+          direction: vertical
+          gap: md
+          type: stack
+        })
+      ;; REFETCH_* stays in `viewing` and DOES NOT replace the timeline with a
+      ;; skeleton — same reasoning as std-browse's REFETCH_* arms: a skeleton
+      ;; on refetch unmounts the timeline and flickers every keystroke. The
+      ;; fetch fires in the background; the EventLogLoaded arm below re-renders
+      ;; in place once it lands. Each refetch also honours the current kind
+      ;; tab (@entity.filterKind) so search/generic-filter compound with it
+      ;; instead of resetting it.
+      REFETCH_QUERY -> viewing
+        (fetch EventLogView {
+          emit: { failure: EventLogLoadFailed, success: EventLogLoaded }
+          filter: (and (or ["=", @entity.filterKind, ""] ["=", (object/get @entity kind), @entity.filterKind]) (or ["=", ?searchTerm, ""] (str/includes (object/get @entity title) ?searchTerm)))
+        })
+      REFETCH_FILTER -> viewing
+        (fetch EventLogView {
+          emit: { failure: EventLogLoadFailed, success: EventLogLoaded }
+          filter: (and (or ["=", @entity.filterKind, ""] ["=", (object/get @entity kind), @entity.filterKind]) (or ["=", ?value, ""] ["=", (object/get @entity ?field), ?value]))
+        })
+      ;; No filter carried over on REFETCH_PAGE, mirroring std-browse exactly —
+      ;; the reference page arm does not preserve query/filter either.
+      REFETCH_PAGE -> viewing
+        (fetch EventLogView {
+          emit: { failure: EventLogLoadFailed, success: EventLogLoaded }
+          limit: @config.pageSize
+          offset: ["*", ["-", ?page, 1], @config.pageSize]
+        })
+      EventLogLoaded -> viewing
+        (set @entity.filterChips (array/prepend (array/map @config.kindOptions (fn k {
+          icon: (object/get @k icon circle)
+          id: (object/get @k key)
+          label: (object/get @k label)
+        })) {
+          icon: list
+          id: ""
+          label: All
+        }))
+        (set @entity.allEntries (array/sort (array/map ?data (fn row {
+          date: (object/get @row createdAt (object/get @row date ""))
+          description: (object/get @row description "")
+          id: (object/get @row id "")
+          kind: (object/get @row kind "")
+          status: (object/get (or (array/find @config.kindOptions (fn k ["=", (object/get @k key), (object/get @row kind "")])) {}) status pending)
+          title: (object/get @row title "")
+        })) date desc))
+        (set @entity.entries (array/sort (array/map ?data (fn row {
+          date: (object/get @row createdAt (object/get @row date ""))
+          description: (object/get @row description "")
+          id: (object/get @row id "")
+          kind: (object/get @row kind "")
+          status: (object/get (or (array/find @config.kindOptions (fn k ["=", (object/get @k key), (object/get @row kind "")])) {}) status pending)
+          title: (object/get @row title "")
+        })) date desc))
+        (render-ui main {
+          children: [{
+            align: center
+            children: [{ name: history, type: icon }, {
+              content: @config.title
+              type: typography
+              variant: h3
+            }, {
+              action: OPEN_BACKFILL
+              icon: plus
+              label: "Log event"
+              type: button
+              variant: primary
+            }]
+            direction: horizontal
+            gap: sm
+            type: stack
+          }, (if @config.bodySearch {
+            children: [{
+              className: "w-full max-w-md"
+              clearable: true
+              event: REFETCH_QUERY
+              placeholder: @config.searchPlaceholder
+              type: search-input
+            }]
+            direction: horizontal
+            gap: sm
+            type: stack
+          } {
+            children: []
+            gap: none
+            type: stack
+          }), (if [">", (array/len @config.filters), 0] {
+            children: [{
+              entity: EventLogView
+              event: REFETCH_FILTER
+              filters: @config.filters
+              look: @config.filterBarLook
+              type: filter-group
+            }]
+            direction: horizontal
+            gap: sm
+            type: stack
+          } {
+            children: []
+            gap: none
+            type: stack
+          }), {
             activeTab: @entity.filterKind
             tabChangeEvent: APPLY_FILTER
             tabs: @entity.filterChips
@@ -237,7 +411,37 @@ orbital EventLogOrbital {
             direction: horizontal
             gap: sm
             type: stack
-          }, {
+          }, (if @config.bodySearch {
+            children: [{
+              className: "w-full max-w-md"
+              clearable: true
+              event: REFETCH_QUERY
+              placeholder: @config.searchPlaceholder
+              type: search-input
+            }]
+            direction: horizontal
+            gap: sm
+            type: stack
+          } {
+            children: []
+            gap: none
+            type: stack
+          }), (if [">", (array/len @config.filters), 0] {
+            children: [{
+              entity: EventLogView
+              event: REFETCH_FILTER
+              filters: @config.filters
+              look: @config.filterBarLook
+              type: filter-group
+            }]
+            direction: horizontal
+            gap: sm
+            type: stack
+          } {
+            children: []
+            gap: none
+            type: stack
+          }), {
             activeTab: @entity.filterKind
             tabChangeEvent: APPLY_FILTER
             tabs: @entity.filterChips
@@ -354,6 +558,25 @@ orbital EventLogOrbital {
         @description "Indicates an attempt to save an event failed."
         @synonyms "error, failure, save failed"
         @tier "internal"
+      REFETCH_QUERY {
+        searchTerm : string!
+      }
+        @description "Triggers an activity feed refresh based on the current search term."
+        @synonyms "refresh, reload, update, re-query, search"
+        @tier "domain"
+      REFETCH_FILTER {
+        field : string!
+        value : string!
+      }
+        @description "Triggers an activity feed refresh based on a field/value filter, in addition to the built-in kind tabs."
+        @synonyms "refresh, filter, update, reload"
+        @tier "domain"
+      REFETCH_PAGE {
+        page : number!
+      }
+        @description "Triggers an activity feed page refresh."
+        @synonyms "reload, refresh, update, paginate"
+        @tier "domain"
     }
 
     config {
@@ -397,6 +620,36 @@ orbital EventLogOrbital {
         @label "Timeline look"
         @description "Layer 2 visual treatment for the timeline."
         @tier "presentation"
+      bodySearch : boolean = false
+        @label "Show the log's own search box?"
+        @description "Embeds a search box above the activity feed. Set true only when the page has no other search affordance (e.g. no page-level std-search), so the surface shows one search box instead of two. False is the default — no consumer of this atom has ever had a search box."
+        @synonyms "inline search, log search, built-in search, show search"
+        @tier "presentation"
+      searchPlaceholder : string = "Search activity…"
+        @label "Search box placeholder text"
+        @description "Hint text inside the log's search box."
+        @synonyms "search hint, placeholder, search box text"
+        @tier "presentation"
+      filters : [FilterSpec] = []
+        @label "Which filters should appear above the feed?"
+        @description "Dropdown filter facets by field, rendered as an embedded filter bar above the timeline; each selection fires REFETCH_FILTER on this trait, ANDed with the current kind tab. Empty (the default) = no filter bar — the right setting whenever the page already composes std-filter beside this atom and routes XFilter.FILTER -> REFETCH_FILTER, or relies solely on the built-in kind-filter chips (driven by kindOptions, which this knob does not duplicate or replace). Use this knob only for an extra facet beyond kind (e.g. actor, priority)."
+        @synonyms "filter bar, faceted filters, field filters, dropdowns"
+        @tier "presentation"
+      filterBarLook : "toolbar" | "chips" | "pills" | "popover-trigger" | "inline-column-header" = toolbar
+        @label "Filter bar look"
+        @description "Visual treatment for the embedded filter bar, mirroring std-filter's own enum. Only applies when `filters` is non-empty."
+        @synonyms "filter bar style, facet style, chips, pills"
+        @tier "presentation"
+      pageSize : number = 20
+        @label "How many entries per page when paging?"
+        @description "Records fetched from the server per REFETCH_PAGE request. The initial load and every search/kind/filter refetch stay unpaginated (load everything that matches) so the default unlimited activity feed is unchanged; only an explicit REFETCH_PAGE from a composed std-pagination control applies this limit."
+        @synonyms "fetch limit, records per page, page limit"
+        @tier "presentation"
+      displayPageSize : number = 20
+        @label "How many entries per page should a pager show?"
+        @description "Page size a consumer-composed std-pagination control should use to compute total pages (e.g. from totalCount). This atom's own timeline pattern has no built-in pager UI, so this knob is informational for the composed control, not consumed by the timeline itself."
+        @synonyms "visible rows, items per page, display limit"
+        @tier "presentation"
     }
   }
 

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

@@ -1,5 +1,6 @@
 app std-gallery "1.0.0"
 "std-gallery — image gallery primitive. Browses GalleryItems in a media-gallery grid; opens a lightbox modal for full-size viewing."
+type FilterSpec = { field : string!, label : string, options : [string] }
 orbital GalleryItemOrbital {
   uses Spinner from "std/behaviors/ui-spinner"
   uses Typography from "std/behaviors/ui-typography"
@@ -103,7 +104,37 @@ orbital GalleryItemOrbital {
             direction: horizontal
             gap: sm
             type: stack
-          }, @trait.TitleDivider, @trait.MediaGalleryGrid]
+          }, @trait.TitleDivider, (if @config.bodySearch {
+            children: [{
+              className: "w-full max-w-md"
+              clearable: true
+              event: REFETCH_QUERY
+              placeholder: @config.searchPlaceholder
+              type: search-input
+            }]
+            direction: horizontal
+            gap: sm
+            type: stack
+          } {
+            children: []
+            gap: none
+            type: stack
+          }), (if [">", (array/len @config.filters), 0] {
+            children: [{
+              entity: GalleryItem
+              event: REFETCH_FILTER
+              filters: @config.filters
+              look: @config.filterBarLook
+              type: filter-group
+            }]
+            direction: horizontal
+            gap: sm
+            type: stack
+          } {
+            children: []
+            gap: none
+            type: stack
+          }), @trait.MediaGalleryGrid]
           direction: vertical
           gap: md
           type: stack
@@ -121,6 +152,78 @@ orbital GalleryItemOrbital {
         (fetch GalleryItem {
           emit: { failure: GalleryItemLoadFailed, success: GalleryItemLoaded }
         })
+      ;; REFETCH_* stays in `browsing` and DOES NOT replace the gallery grid
+      ;; with a spinner — search-as-you-type would otherwise unmount the
+      ;; media-gallery every keystroke and flicker. The fetch fires in the
+      ;; background; when GalleryItemLoaded arrives below, React reconciles
+      ;; the grid in place instead of unmounting it.
+      REFETCH_QUERY -> browsing
+        (fetch GalleryItem {
+          emit: { failure: GalleryItemLoadFailed, success: GalleryItemLoaded }
+          filter: (or ["=", ?searchTerm, ""] (str/includes (object/get @entity name) ?searchTerm))
+          limit: @config.pageSize
+          offset: 0
+        })
+      REFETCH_FILTER -> browsing
+        (fetch GalleryItem {
+          emit: { failure: GalleryItemLoadFailed, success: GalleryItemLoaded }
+          filter: (or ["=", ?value, ""] ["=", (object/get @entity ?field), ?value])
+          limit: @config.pageSize
+          offset: 0
+        })
+      REFETCH_PAGE -> browsing
+        (fetch GalleryItem {
+          emit: { failure: GalleryItemLoadFailed, success: GalleryItemLoaded }
+          limit: @config.pageSize
+          offset: ["*", ["-", ?page, 1], @config.pageSize]
+        })
+      GalleryItemLoaded -> browsing
+        (render-ui main {
+          children: [{
+            align: center
+            children: [@trait.GalleryIcon, {
+              content: @config.title
+              type: typography
+              variant: h3
+            }]
+            direction: horizontal
+            gap: sm
+            type: stack
+          }, @trait.TitleDivider, (if @config.bodySearch {
+            children: [{
+              className: "w-full max-w-md"
+              clearable: true
+              event: REFETCH_QUERY
+              placeholder: @config.searchPlaceholder
+              type: search-input
+            }]
+            direction: horizontal
+            gap: sm
+            type: stack
+          } {
+            children: []
+            gap: none
+            type: stack
+          }), (if [">", (array/len @config.filters), 0] {
+            children: [{
+              entity: GalleryItem
+              event: REFETCH_FILTER
+              filters: @config.filters
+              look: @config.filterBarLook
+              type: filter-group
+            }]
+            direction: horizontal
+            gap: sm
+            type: stack
+          } {
+            children: []
+            gap: none
+            type: stack
+          }), @trait.MediaGalleryGrid]
+          direction: vertical
+          gap: md
+          type: stack
+        })
       VIEW -> viewing
         (set @entity.id ?id)
         (render-ui modal {
@@ -195,6 +298,25 @@ orbital GalleryItemOrbital {
     }
 
     listens {
+      REFETCH_QUERY {
+        searchTerm : string!
+      }
+        @description "Triggers a gallery refresh based on the current search query."
+        @synonyms "refresh, reload, update, re-query"
+        @tier "domain"
+      REFETCH_FILTER {
+        field : string!
+        value : string!
+      }
+        @description "Triggers a gallery refresh based on current filter criteria."
+        @synonyms "refresh, filter, update, reload"
+        @tier "domain"
+      REFETCH_PAGE {
+        page : number!
+      }
+        @description "Triggers a gallery page refresh."
+        @synonyms "reload, refresh, update, paginate"
+        @tier "domain"
       VIEW {
         id : string!
         row : GalleryItem
@@ -236,6 +358,31 @@ orbital GalleryItemOrbital {
         @description "Entity field holding the image URL shown in the lightbox for the selected item"
         @synonyms "image url field, thumbnail field, src field"
         @tier "presentation"
+      bodySearch : boolean = false
+        @label "Show the gallery's own search box?"
+        @description "Embeds a search box above the gallery grid. Set false (the default) when the page already provides a search affordance (a toolbar Search molecule), so the surface shows one search box instead of two."
+        @synonyms "inline search, list search, built-in search, show search, duplicate search"
+        @tier "presentation"
+      searchPlaceholder : string = "Search…"
+        @label "Search box placeholder text"
+        @description "Hint text inside the gallery search box (e.g. 'Search photos…')."
+        @synonyms "search hint, placeholder, search box text, search label"
+        @tier "presentation"
+      filters : [FilterSpec] = []
+        @label "Which filters should appear above the gallery?"
+        @description "Dropdown filter facets by field, rendered as an embedded filter bar above the grid; each selection fires REFETCH_FILTER on this trait. Empty (the default) = no filter bar, which is the right setting whenever the page already composes std-filter beside this gallery and routes `XFilter.FILTER -> REFETCH_FILTER` — that is the wired owner and remains the primary path. Use this knob only for a standalone gallery with no page-level filter affordance."
+        @synonyms "filter bar, faceted filters, field filters, dropdowns"
+        @tier "presentation"
+      filterBarLook : "toolbar" | "chips" | "pills" | "popover-trigger" | "inline-column-header" = toolbar
+        @label "Filter bar look"
+        @description "Visual treatment for the embedded filter bar, mirroring std-filter's own enum. Only applies when `filters` is non-empty."
+        @synonyms "filter bar style, facet style, chips, pills"
+        @tier "presentation"
+      pageSize : number = 20
+        @label "How many images to fetch per page?"
+        @description "Records fetched from the server when REFETCH_PAGE fires (a composed std-pagination driving this trait). The initial load and revisit fetches stay unpaged (whole collection), unchanged from before this knob existed."
+        @synonyms "fetch limit, records per page, batch size, page limit"
+        @tier "presentation"
     }
   }