@almadar/std 16.238.0 → 16.241.0

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

@@ -1,613 +0,0 @@
-app std-list "1.0.0"
-"std-list as a Function"
-type FilterSpec = { field : string!, label : string, options : [string] }
-type ItemAction = { label : string!, event : event, variant : string, roles : [string], when : SExpr }
-;;
-;; Daisy-chain composition showcase: no `on EVENT { ... }` trait-ref overrides.
-;; Modal + Confirmation trait refs are configured via `config: { ... }` at the
-;; call site. Side effects (persist) live in a sibling coordinator trait
-;; (`ListItemPersistor`) that listens for the modal/confirmation trait emits.
-;;
-;; Mirrors std-cart's structure. std-list omits the read-only VIEW path that the
-;; old version had — form-section's mode set only supports "create" | "edit",
-;; and a dedicated detail-view pattern is tracked separately (std-detail).
-orbital ListItemOrbital {
-  uses RoleGate from "std/behaviors/std-role-gate"
-
-  uses Button from "std/behaviors/ui-button"
-
-  uses Confirmation from "std/behaviors/std-confirmation"
-
-  uses Modal from "std/behaviors/std-modal"
-
-    type ListItemLoaded = Event { data : [ListItem] } "Fired when the ListItem collection finishes loading; payload.data holds the list"
-
-    type ListItemLoadFailed = Event { error : string!, code : string } "Fired when the ListItem collection fails to load"
-
-  entity ListItem [persistent: listitems] {
-    id : string!
-    name : string! @description "The text displayed for this list item." @synonyms "label, text, display"
-    description : string @description "A brief explanation of the list item's content." @synonyms "text, details, notes, explanation"
-    status : "active" | "inactive" | "pending" @description "Current operational state of the item." @synonyms "state, condition, flag" = active
-    createdAt : string
-    pendingId : string @description "Identifier for a related, pending item." @synonyms "reference, relatedId, linkId" = ""
-  }
-
-  trait ListItemBrowse -> @rebindable ListItem [interaction, collection] {
-    initial: loading
-
-    state loading {
-      INIT -> loading
-        (fetch ListItem {
-          emit: { failure: ListItemLoadFailed, success: ListItemLoaded }
-        })
-        (render-ui main {
-          type: stack
-          direction: vertical
-          gap: lg
-          children: [{ type: skeleton, variant: header }, { type: skeleton, variant: list, rows: 6 }]
-        })
-      ListItemLoaded -> browsing
-        (render-ui main {
-          children: [{
-            children: [{
-              children: [{ name: list, size: xl, type: icon }, {
-                content: ListItems
-                type: typography
-                variant: h2
-              }]
-              direction: horizontal
-              gap: md
-              type: stack
-            }, <trait.ListItemCreateGate />]
-            direction: horizontal
-            gap: md
-            justify: between
-            type: stack
-          }, { type: divider }, (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: ListItem
-              event: REFETCH_FILTER
-              filters: @config.filters
-              look: @config.filterBarLook
-              type: filter-group
-            }]
-            direction: horizontal
-            gap: sm
-            type: stack
-          } {
-            children: []
-            gap: none
-            type: stack
-          }), {
-            entity: ?data
-            fields: [{
-              icon: list
-              label: Name
-              name: name
-              variant: h4
-            }, {
-              label: Description
-              name: description
-              variant: caption
-            }, {
-              label: Status
-              name: status
-              variant: badge
-            }]
-            itemClickEvent: @config.itemClickEvent
-            itemActions: (array/filter @config.itemActions (fn action (or (= (array/len (object/get @action roles [])) 0) (array/includes (object/get @action roles []) @config.viewerRole))))
-            pageSize: @config.displayPageSize
-            type: data-grid
-          }]
-          className: "max-w-5xl mx-auto w-full"
-          direction: vertical
-          gap: lg
-          type: stack
-        })
-      ListItemLoadFailed -> error
-        (render-ui main {
-          align: center
-          children: [{
-            color: error
-            name: alert-triangle
-            size: lg
-            type: icon
-          }, {
-            content: "Failed to load list"
-            type: typography
-            variant: h3
-          }, {
-            color: muted
-            content: ?error
-            type: typography
-            variant: body
-          }, {
-            action: RETRY
-            icon: rotate-ccw
-            label: Retry
-            type: button
-            variant: primary
-          }]
-          className: py-12
-          direction: vertical
-          gap: md
-          type: stack
-        })
-    }
-
-    state browsing {
-      INIT -> loading
-        (fetch ListItem {
-          emit: { failure: ListItemLoadFailed, success: ListItemLoaded }
-        })
-        (render-ui main {
-          type: stack
-          direction: vertical
-          gap: lg
-          children: [{ type: skeleton, variant: header }, { type: skeleton, variant: list, rows: 6 }]
-        })
-      ;; REFETCH_* stays in `browsing` and DOES NOT replace the grid with a
-      ;; spinner — same reasoning as std-browse's REFETCH_* arms: a skeleton
-      ;; on refetch unmounts the grid and flickers every keystroke. The fetch
-      ;; fires in the background; the ListItemLoaded arm below re-renders in
-      ;; place once it lands.
-      REFETCH_QUERY -> browsing
-        (fetch ListItem {
-          emit: { failure: ListItemLoadFailed, success: ListItemLoaded }
-          filter: (or ["=", ?searchTerm, ""] (str/includes (object/get @entity @config.searchField) ?searchTerm))
-        })
-      REFETCH_FILTER -> browsing
-        (fetch ListItem {
-          emit: { failure: ListItemLoadFailed, success: ListItemLoaded }
-          filter: (or ["=", ?value, ""] ["=", (object/get @entity ?field), ?value])
-        })
-      ;; No filter carried over on REFETCH_PAGE, mirroring std-browse exactly.
-      REFETCH_PAGE -> browsing
-        (fetch ListItem {
-          emit: { failure: ListItemLoadFailed, success: ListItemLoaded }
-          limit: @config.pageSize
-          offset: ["*", ["-", ?page, 1], @config.pageSize]
-        })
-      ListItemLoadFailed -> browsing
-        (notify error (str/concat "Couldn't refresh the list — " ?error))
-      ListItemLoaded -> browsing
-        (render-ui main {
-          children: [{
-            children: [{
-              children: [{ name: list, size: xl, type: icon }, {
-                content: ListItems
-                type: typography
-                variant: h2
-              }]
-              direction: horizontal
-              gap: md
-              type: stack
-            }, <trait.ListItemCreateGate />]
-            direction: horizontal
-            gap: md
-            justify: between
-            type: stack
-          }, { type: divider }, (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: ListItem
-              event: REFETCH_FILTER
-              filters: @config.filters
-              look: @config.filterBarLook
-              type: filter-group
-            }]
-            direction: horizontal
-            gap: sm
-            type: stack
-          } {
-            children: []
-            gap: none
-            type: stack
-          }), {
-            entity: ?data
-            fields: [{
-              icon: list
-              label: Name
-              name: name
-              variant: h4
-            }, {
-              label: Description
-              name: description
-              variant: caption
-            }, {
-              label: Status
-              name: status
-              variant: badge
-            }]
-            itemClickEvent: @config.itemClickEvent
-            itemActions: (array/filter @config.itemActions (fn action (or (= (array/len (object/get @action roles [])) 0) (array/includes (object/get @action roles []) @config.viewerRole))))
-            pageSize: @config.displayPageSize
-            type: data-grid
-          }]
-          className: "max-w-5xl mx-auto w-full"
-          direction: vertical
-          gap: lg
-          type: stack
-        })
-    }
-
-    state error {
-      INIT -> loading
-        (fetch ListItem {
-          emit: { failure: ListItemLoadFailed, success: ListItemLoaded }
-        })
-        (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 ListItem {
-          emit: { failure: ListItemLoadFailed, success: ListItemLoaded }
-        })
-        (render-ui main {
-          type: stack
-          direction: vertical
-          gap: lg
-          children: [{ type: skeleton, variant: header }, { type: skeleton, variant: list, rows: 6 }]
-        })
-    }
-
-    emits {
-      CREATE
-        @description "Signals a new item has been successfully created."
-        @synonyms "added, new, added, insert"
-        @tier "domain"
-      EDIT {
-        id : string!
-        row : { id : string!, name : string!, description : string, status : string, createdAt : string }
-      }
-      DELETE {
-        id : string!
-        row : { id : string!, name : string!, description : string, status : string, createdAt : string }
-      }
-      ListItemLoaded
-        @description "Signals a list item has been successfully loaded."
-        @synonyms "loaded, fetched, retrieved"
-        @tier "domain"
-      ListItemLoadFailed
-        @description "Indicates a failure to load a list item."
-        @synonyms "error, failure, problem, unsuccessful"
-        @tier "internal"
-    }
-
-    listens {
-      ListItemLoadFailed {
-        error : string!
-        code : string
-      }
-        @description "Indicates a failure to load a list item."
-        @synonyms "error, failure, problem, unsuccessful"
-        @tier "internal"
-      ListItemPersistor.ITEM_CREATED -> INIT
-      ListItemPersistor.ITEM_UPDATED -> INIT
-      ListItemPersistor.ITEM_DELETED -> INIT
-      REFETCH_QUERY {
-        searchTerm : string!
-      }
-        @description "Triggers a list refresh based on the current search term."
-        @synonyms "refresh, reload, update, re-query, search"
-        @tier "domain"
-      REFETCH_FILTER {
-        entity : string!
-        field : string!
-        value : string!
-        query : string
-      }
-        @description "Triggers a list refresh based on current filter criteria."
-        @synonyms "refresh, filter, update, reload"
-        @tier "domain"
-      REFETCH_PAGE {
-        page : number!
-      }
-        @description "Triggers a list page refresh."
-        @synonyms "reload, refresh, update, paginate"
-        @tier "domain"
-    }
-
-    config {
-      searchField : string = "name"
-        @label "Which column does the search box match against?"
-        @description "Name the field on this entity the search box's str/includes filter matches against. Declared, never inferred: an entity with no `name` column must set this to a real field (e.g. title, label) or the search box can never match a row."
-        @synonyms "search column, search on field, match field, search key"
-        @tier "policy"
-      bodySearch : boolean = false
-        @label "Show the list's own search box?"
-        @description "Embeds a search box above the grid. 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 — this atom has never had a search box (0 consumers today)."
-        @synonyms "inline search, list search, built-in search, show search"
-        @tier "presentation"
-      searchPlaceholder : string = "Search…"
-        @label "Search box placeholder text"
-        @description "Hint text inside the list search box."
-        @synonyms "search hint, placeholder, search box text"
-        @tier "presentation"
-      filters : [FilterSpec] = []
-        @label "Which filters should appear above the grid?"
-        @description "Dropdown filter facets by field, rendered as an embedded filter bar above the rows; each selection fires REFETCH_FILTER on this trait. Empty (the default) = no filter bar, the right setting whenever the page already composes std-filter beside this list and routes XFilter.FILTER -> REFETCH_FILTER — that is the wired owner and remains the primary path. Use this knob only for a standalone list 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 rows per page when paging?"
-        @description "Records fetched from the server per REFETCH_PAGE request. The initial load and search/filter refetches remain unpaginated (load everything that matches) unless a consumer wires REFETCH_PAGE, so the default list surface is unchanged."
-        @synonyms "fetch limit, records per page, page limit"
-        @tier "presentation"
-      displayPageSize : number = 20
-        @label "How many rows to show at once?"
-        @description "Rows visible per page before the data-grid's own pagination control appears — 20 matches the CRUD-list density sweet spot (Miller's law, 10-25 rows)."
-        @synonyms "visible rows, items per page, display limit, show per page"
-        @tier "presentation"
-      itemClickEvent : event = EDIT
-        @label "Which event does clicking a row fire?"
-        @description "Row-click channel; empty = rows are not clickable."
-        @synonyms "row click event, item click, open event"
-        @tier "presentation"
-      itemActions : [ItemAction] = [{
-        event: EDIT
-        label: Edit
-        variant: ghost
-      }, {
-        event: DELETE
-        label: Delete
-        variant: danger
-      }]
-        @label "Row actions"
-        @description "Actions offered on each row; give an item `roles` to show it only to those viewer roles."
-        @tier "presentation"
-      viewerRole : string = ""
-        @label "Viewer's role"
-        @description "The signed-in viewer's role that each action's `roles` is checked against. Bind it explicitly at the call site (e.g. `viewerRole: @user.role`) in an app whose identity carries a role; left empty, only actions with no `roles` show."
-        @tier "policy"
-      createRoles : [string] = []
-        @label "Roles that can create"
-        @description "Roles (matched against viewerRole) that see the Create button. Empty = everyone."
-        @tier "policy"
-    }
-  }
-
-  trait ListItemCreateButton = Button.traits.ButtonRender {
-    config {
-      action: CREATE
-      icon: plus
-      label: Create
-      variant: primary
-    }
-  }
-
-  trait ListItemCreateGate = RoleGate.traits.RoleGate {
-    config {
-      roles: @config.createRoles
-      viewerRole: @config.viewerRole
-      content: <trait.ListItemCreateButton />
-    }
-  }
-
-  ;; row carries the public display contract (no internal pendingId)
-  ;; so EDIT/DELETE agree with other browse emitters app-wide.
-  ;; Create modal: configured via `config`, no effects overrides.
-  ;; SAVE is renamed to LIST_ITEM_CREATED so the Persistor coordinator
-  ;; distinguishes Create-SAVE from Edit-SAVE without source-scoped listens.
-  trait ListItemCreate = Modal.traits.ModalRecordModal -> ListItem {
-    events {
-      OPEN: CREATE
-      SAVE: LIST_ITEM_CREATED
-    }
-
-    config {
-      icon: plus-circle
-      title: "Create ListItem"
-      fields: (name description status)
-      mode: create
-    }
-
-    listens {
-      ListItemBrowse.CREATE -> CREATE
-      CREATE {
-        id : string
-        row : ListItem
-      }
-        @description "Indicates a new item has been created."
-        @synonyms "add, new, insert"
-        @tier "domain"
-      SAVE {
-        data : @entity!
-      }
-        @description "Data has been successfully saved."
-        @synonyms "persist, store, commit"
-        @tier "domain"
-      ModalRecordLoadFailed {
-        error : string
-        code : string
-      }
-        @description "Indicates failure to load a record for a modal."
-        @synonyms "error, failure, problem, unsuccessful"
-        @tier "internal"
-    }
-  }
-
-  ;; Edit modal: configured via `config`, no effects overrides.
-  ;; SAVE is renamed to LIST_ITEM_UPDATED so the Persistor coordinator
-  ;; distinguishes Edit-SAVE from Create-SAVE.
-  trait ListItemEdit = Modal.traits.ModalRecordModal -> ListItem {
-    events {
-      OPEN: EDIT
-      SAVE: LIST_ITEM_UPDATED
-    }
-
-    config {
-      icon: edit
-      title: "Edit ListItem"
-      fields: (name description status)
-      mode: edit
-    }
-
-    listens {
-      ListItemBrowse.EDIT -> EDIT
-      EDIT {
-        id : string
-        row : ListItem
-      }
-        @description "Indicates a request to modify an existing item."
-        @synonyms "modify, update, change"
-        @tier "domain"
-      SAVE {
-        data : @entity!
-      }
-        @description "Data has been persisted successfully."
-        @synonyms "persist, store, commit, update"
-        @tier "domain"
-      ModalRecordLoadFailed {
-        error : string
-        code : string
-      }
-        @description "Indicates a failure to load a record into a modal window."
-        @synonyms "error, failure, problem, unsuccessful"
-        @tier "internal"
-    }
-  }
-
-  ;; Delete-confirm: configured via `config`, no effects overrides.
-  trait ListItemDelete = Confirmation.traits.ConfirmActionConfirmation -> ListItem {
-    events {
-      REQUEST: DELETE
-      CONFIRM: CONFIRM_DELETE
-    }
-
-    config {
-      icon: alert-triangle
-      title: "Delete ListItem"
-      alertMessage: "This action cannot be undone."
-      confirmLabel: Delete
-    }
-
-    listens {
-      ListItemBrowse.DELETE -> DELETE
-      DELETE {
-        id : string
-        row : ListItem
-      }
-        @description "Indicates a record has been removed from the list."
-        @synonyms "remove, discard, clear"
-        @tier "domain"
-      ConfirmActionLoadFailed {
-        error : string
-        code : string
-      }
-        @description "Indicates a failure to load data for an action."
-        @synonyms "error, failure, problem, unsuccessful"
-        @tier "internal"
-    }
-  }
-
-  ;; Coordinator trait: owns the persist side-effects triggered by the
-  ;; Modal/Confirmation trait refs' emits. Replaces the old per-ref
-  ;; `on SAVE { (persist ...) }` override pattern.
-  trait ListItemPersistor -> ListItem [lifecycle, instance] {
-    initial: idle
-
-    state idle {
-      INIT -> idle
-      DO_CREATE -> idle
-        (persist create ListItem ?data {
-          emit: { success: ITEM_CREATED }
-        })
-      DO_UPDATE -> idle
-        (persist update ListItem ?data {
-          emit: { success: ITEM_UPDATED }
-        })
-      DO_DELETE -> idle
-        (persist delete ListItem ?id {
-          emit: { success: ITEM_DELETED }
-        })
-    }
-
-    emits {
-      ITEM_CREATED -> external {
-        id : string!
-      }
-        @description "Signals a new item has been added to the list."
-        @synonyms "added, new, appended"
-        @tier "domain"
-      ITEM_UPDATED -> external {
-        id : string!
-      }
-        @description "Signals a change in an item's data."
-        @synonyms "modified, changed, refreshed"
-        @tier "presentation"
-      ITEM_DELETED -> external {
-        id : string!
-      }
-        @description "Signals that a list item has been removed."
-        @synonyms "removed, discarded, purged"
-        @tier "domain"
-    }
-
-    listens {
-      DO_CREATE {
-        data : ListItem!
-      }
-        @description "Indicates a request to create a new item."
-        @synonyms "add, new, insert"
-        @tier "domain"
-      DO_UPDATE {
-        data : ListItem!
-      }
-        @description "Indicates a data item has been modified."
-        @synonyms "modified, changed, refreshed"
-        @tier "domain"
-      DO_DELETE {
-        id : string!
-      }
-        @description "Indicates a request to remove an item from the list."
-        @synonyms "remove, discard, erase"
-        @tier "domain"
-      ListItemCreate.LIST_ITEM_CREATED -> DO_CREATE
-      ListItemEdit.LIST_ITEM_UPDATED -> DO_UPDATE
-      ListItemDelete.CONFIRM_DELETE -> DO_DELETE
-    }
-  }
-
-  page "/listitems" as ListItemPage -> ListItemBrowse, ListItemCreate, ListItemEdit, ListItemDelete, ListItemPersistor
-}