@almadar/std 16.238.0 → 16.239.0

package/behaviors/lolo/ui/core/organisms/ui-entity-cards.lolo

@@ -1,399 +0,0 @@
-app ui-entity-cards "1.0.0"
-"EntityCards — UI factory (1:1 with the @almadar/ui entity-cards pattern)."
-;; @pattern "entity-cards"
-orbital EntityCardsOrbital {
-    type EntityCardsLoaded = Event { data : [EntityCardsItem] } "EntityCards rows finished loading; payload.data holds the collection"
-  type EntityCardsError = {
-    message : string!
-    name : string
-    code : string
-    stack : string
-  }
-  type EntityCardsFieldsItem = {
-    name : string!
-    label : string
-    icon : icon
-    variant : "h3" | "h4" | "body" | "caption" | "badge" | "small" | "progress"
-    format : "date" | "datetime" | "currency" | "number" | "boolean" | "percent"
-    colorMap : Map string EntityCardsFieldsItemColorMapValue
-    labels : Map string string
-  }
-  type EntityCardsFieldsItemColorMapValue = "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "error" | "info" | "neutral" | "destructive"
-  type EntityCardsColumnsItem = {
-    name : string!
-    label : string
-    icon : icon
-    variant : "h3" | "h4" | "body" | "caption" | "badge" | "small" | "progress"
-    format : "date" | "datetime" | "currency" | "number" | "boolean" | "percent"
-    colorMap : Map string EntityCardsColumnsItemColorMapValue
-    labels : Map string string
-  }
-  type EntityCardsColumnsItemColorMapValue = "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "error" | "info" | "neutral" | "destructive"
-  type EntityCardsItemActionsItem = {
-    label : string!
-    event : event
-    navigatesTo : string
-    placement : string
-    variant : string
-    when : SExpr
-    payload : SExpr
-    roles : [string]
-  }
-
-  entity EntityCardsItem [runtime] {
-    id : string!
-  }
-
-  trait EntityCardsRender -> @rebindable EntityCardsItem [interaction, instance] {
-    initial: idle
-
-    state idle {
-      INIT -> idle when @config.selfFetch
-        (fetch EntityCardsItem { emit: { success: EntityCardsLoaded } })
-        (render-ui main {
-          className: @config.className
-          isLoading: @config.isLoading
-          error: @config.error
-          sortBy: @config.sortBy
-          sortDirection: @config.sortDirection
-          searchValue: @config.searchValue
-          page: @config.pageProp
-          pageSize: @config.pageSize
-          totalCount: @config.totalCount
-          activeFilters: @config.activeFilters
-          selectedIds: @config.selectedIds
-          entity: @entity
-          minCardWidth: @config.minCardWidth
-          maxCols: @config.maxCols
-          gap: @config.gap
-          alignItems: @config.alignItems
-          children: @config.children
-          fields: @config.fields
-          fieldNames: @config.fieldNames
-          columns: @config.columns
-          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))))
-          showTotal: @config.showTotal
-          showAvatar: @config.showAvatar
-          variant: @config.variant
-          imageField: @config.imageField
-          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: entity-cards
-        })
-      INIT -> idle when (not @config.selfFetch)
-        (render-ui main {
-          className: @config.className
-          isLoading: @config.isLoading
-          error: @config.error
-          sortBy: @config.sortBy
-          sortDirection: @config.sortDirection
-          searchValue: @config.searchValue
-          page: @config.pageProp
-          pageSize: @config.pageSize
-          totalCount: @config.totalCount
-          activeFilters: @config.activeFilters
-          selectedIds: @config.selectedIds
-          entity: @entity
-          minCardWidth: @config.minCardWidth
-          maxCols: @config.maxCols
-          gap: @config.gap
-          alignItems: @config.alignItems
-          children: @config.children
-          fields: @config.fields
-          fieldNames: @config.fieldNames
-          columns: @config.columns
-          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))))
-          showTotal: @config.showTotal
-          showAvatar: @config.showAvatar
-          variant: @config.variant
-          imageField: @config.imageField
-          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: entity-cards
-        })
-      EntityCardsLoaded -> idle
-        (render-ui main {
-          className: @config.className
-          isLoading: @config.isLoading
-          error: @config.error
-          sortBy: @config.sortBy
-          sortDirection: @config.sortDirection
-          searchValue: @config.searchValue
-          page: @config.pageProp
-          pageSize: @config.pageSize
-          totalCount: @config.totalCount
-          activeFilters: @config.activeFilters
-          selectedIds: @config.selectedIds
-          entity: @payload.data
-          minCardWidth: @config.minCardWidth
-          maxCols: @config.maxCols
-          gap: @config.gap
-          alignItems: @config.alignItems
-          children: @config.children
-          fields: @config.fields
-          fieldNames: @config.fieldNames
-          columns: @config.columns
-          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))))
-          showTotal: @config.showTotal
-          showAvatar: @config.showAvatar
-          variant: @config.variant
-          imageField: @config.imageField
-          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: entity-cards
-        })
-    }
-
-    emits {
-      @config.itemClickEvent -> external {
-        id : string!
-        row : @entity!
-      }
-        @description "When set, clicking a card emits UI:{itemClickEvent} with { id, row }. Omit = cards are not clickable."
-        @tier "essential"
-      VIEW -> external {
-        id : string!
-        row : @entity!
-      }
-        @description "User opened a record from the list."
-        @tier "essential"
-      EntityCardsLoaded
-        @description "EntityCards rows finished loading; payload.data holds the collection."
-        @synonyms "loaded, fetched, retrieved"
-        @tier "essential"
-    }
-
-    config {
-      className : string
-        @label "Class Name"
-        @description "Additional CSS classes"
-        @tier "presentation"
-      isLoading : boolean = false
-        @label "Is Loading"
-        @description "Loading state indicator"
-        @tier "presentation"
-      error : EntityCardsError
-        @label "Error"
-        @description "Error state (UiError)"
-        @tier "presentation"
-      sortBy : string
-        @label "Sort By"
-        @description "Current sort field"
-        @tier "presentation"
-      sortDirection : "asc" | "desc"
-        @label "Sort Direction"
-        @description "Current sort direction"
-        @tier "presentation"
-      searchValue : string
-        @label "Search Value"
-        @description "Current search query value"
-        @tier "presentation"
-      pageProp : number
-        @label "Page"
-        @description "Current page number"
-        @synonyms "page"
-        @tier "presentation"
-      pageSize : number
-        @label "Page Size"
-        @description "Number of items per page"
-        @tier "presentation"
-      totalCount : number
-        @label "Total Count"
-        @description "Total number of items"
-        @tier "presentation"
-      activeFilters : Map string string = {}
-        @label "Active Filters"
-        @description "Active filters"
-        @tier "presentation"
-      selectedIds : [string] = []
-        @label "Selected Ids"
-        @description "Currently selected item IDs"
-        @tier "presentation"
-      minCardWidth : number = 280
-        @label "Min Card Width"
-        @description "Minimum width of each card (default: 280px)"
-        @tier "presentation"
-      maxCols : number
-        @label "Max Cols"
-        @description "Maximum number of columns"
-        @tier "presentation"
-      gap : "none" | "sm" | "md" | "lg" | "xl" = md
-        @label "Gap"
-        @description "Gap between cards"
-        @tier "presentation"
-      alignItems : "start" | "center" | "end" | "stretch" = stretch
-        @label "Align Items"
-        @description "Align cards vertically in their cells"
-        @tier "presentation"
-      children : node
-        @label "Children"
-        @description "Children elements (cards) - optional when using entity prop"
-        @tier "presentation"
-      fields : [EntityCardsFieldsItem] = [{ name: "Name", label: "Label", icon: "circle", variant: h3, format: date }, { name: "Name 2", label: "Label 2", icon: "circle", variant: h4, format: datetime }]
-        @label "Fields"
-        @description "Fields to display - required for schema-driven rendering"
-        @tier "presentation"
-      fieldNames : [string] = []
-        @label "Field Names"
-        @description "Alias for fields - backwards compatibility"
-        @tier "presentation"
-      columns : [EntityCardsColumnsItem] = []
-        @label "Columns"
-        @description "Alias for fields - backwards compatibility"
-        @tier "presentation"
-      itemClickEvent : event = "ITEM_CLICK"
-        @label "Item Click Event"
-        @description "When set, clicking a card emits UI:{itemClickEvent} with { id, row }. Omit = cards are not clickable."
-        @tier "presentation"
-      itemActions : [EntityCardsItemActionsItem] = [{ event: VIEW, label: View, variant: ghost }]
-        @label "Item Actions"
-        @description "Actions for each card item (schema-driven)"
-        @tier "presentation"
-      showTotal : boolean = true
-        @label "Show Total"
-        @description "Show total count in pagination"
-        @tier "presentation"
-      showAvatar : boolean
-        @label "Show Avatar"
-        @description "Show avatar/image field on cards"
-        @tier "presentation"
-      variant : string
-        @label "Variant"
-        @description "Visual variant for the card grid"
-        @tier "presentation"
-      imageField : string
-        @label "Image Field"
-        @description "Entity field name containing an image URL to display as card thumbnail"
-        @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"
-      viewerRole : string = ""
-        @label "Viewer's role"
-        @description "The viewer's role that each action's `roles` is checked against; bind it at the call site (e.g. `viewerRole: @user.role`). Empty = only actions with no `roles` show."
-        @tier "policy"
-      selfFetch : boolean = true
-        @label "Fetch its own rows on mount?"
-        @description "true (default) = standalone mount self-populates on INIT. false = a composing atom owns the fetch and routes its loaded event here — suppresses the wrapper's own un-hydrated fetch so it cannot race the composer's."
-        @tier "internal"
-    }
-  }
-
-  page "/entity-cards" as EntityCardsPage -> EntityCardsRender
-}