@almadar/std 16.206.0 → 16.208.0

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

@@ -8,7 +8,6 @@ orbital InputOrbital {
 
   entity InputItem [runtime] {
     id : string!
-    value : string
   }
 
   trait InputRender -> @rebindable InputItem [interaction, instance] {
@@ -16,33 +15,10 @@ orbital InputOrbital {
 
     state idle {
       INIT -> idle
-        (set @entity.value @config.value)
         (render-ui main {
           className: @config.className
           placeholder: @config.placeholder
-          value: @entity.value
-          disabled: @config.disabled
-          action: @config.action
-          inputType: @config.inputType
-          label: @config.label
-          helperText: @config.helperText
-          error: @config.error
-          leftIcon: @config.leftIcon
-          rightIcon: @config.rightIcon
-          icon: @config.icon
-          clearable: @config.clearable
-          onClear: @config.onClear
-          options: @config.options
-          rows: @config.rows
-          onChange: @config.onChange
-          type: input
-        })
-      ACTION -> idle
-        (set @entity.value ?value)
-        (render-ui main {
-          className: @config.className
-          placeholder: @config.placeholder
-          value: @entity.value
+          value: @config.value
           disabled: @config.disabled
           action: @config.action
           inputType: @config.inputType
@@ -78,15 +54,6 @@ orbital InputOrbital {
         @tier "essential"
     }
 
-    listens {
-      ACTION {
-        value : match @config.inputType {
-          "number" -> number
-          _ -> string
-        }!
-      }
-    }
-
     config {
       className : string
         @label "Class Name"
@@ -96,7 +63,7 @@ orbital InputOrbital {
         @label "Placeholder"
         @description "Placeholder text"
         @tier "presentation"
-      value : string
+      value : scalar
         @label "Value"
         @description "Current value"
         @tier "presentation"

package/behaviors/lolo/ui/core/molecules/ui-carousel.lolo

@@ -1,6 +1,12 @@
 app ui-carousel "1.0.0"
 "Carousel — UI factory (1:1 with the @almadar/ui carousel pattern)."
 orbital CarouselOrbital {
+  type CarouselItemsItem = {
+    id : string
+    title : string
+    image : asset
+  }
+
   entity CarouselItem [runtime] {
     id : string!
   }
@@ -33,7 +39,7 @@ orbital CarouselOrbital {
     }
 
     config {
-      items : [opaque] = []
+      items : [CarouselItemsItem] = [{ id: "Id", title: "Title", image: "https://almadar-kflow-assets.web.app/shared/ui-roguelike-board/default/units/player.png" }, { id: "Id 2", title: "Title 2", image: "https://almadar-kflow-assets.web.app/shared/ui-roguelike-board/default/units/player.png" }]
         @label "Items"
         @description "Array of items to display as slides"
         @tier "presentation"

package/behaviors/lolo/ui/core/molecules/ui-code-block.lolo

@@ -385,7 +385,7 @@ orbital CodeBlockOrbital {
         @label "Show Language Badge"
         @description "Show the language badge"
         @tier "presentation"
-      maxHeight : string = "60vh"
+      maxHeight : scalar = "60vh"
         @label "Max Height"
         @description "Maximum height before scrolling"
         @tier "presentation"

package/behaviors/lolo/ui/core/molecules/ui-command-palette.lolo

@@ -9,9 +9,9 @@ orbital CommandPaletteOrbital {
     keywords : [string]
     group : string
     disabled : boolean
-    event : string
-    action : string
-    actionPayload : Map string scalar
+    event : event
+    action : event
+    actionPayload : @payload action
   }
   type CommandPaletteSELECTCommand = {
     id : string!
@@ -21,9 +21,9 @@ orbital CommandPaletteOrbital {
     keywords : [string]
     group : string
     disabled : boolean
-    event : string
-    action : string
-    actionPayload : Map string scalar
+    event : event
+    action : event
+    actionPayload : @payload action
   }
 
   entity CommandPaletteItem [runtime] {
@@ -89,7 +89,7 @@ orbital CommandPaletteOrbital {
         @label "On Open Change"
         @description "Called to open/close the overlay (Escape, overlay click, or a selection)"
         @tier "presentation"
-      commands : [CommandPaletteCommandsItem] = [{ id: "Id", label: "Label", icon: "circle", shortcut: "Shortcut", keywords: ["Item", "Item 2"], group: "Group", disabled: false, action: "Action" }, { id: "Id 2", label: "Label 2", icon: "circle", shortcut: "Shortcut 2", keywords: ["Item", "Item 2"], group: "Group 2", disabled: true, action: "Action 2" }]
+      commands : [CommandPaletteCommandsItem] = [{ id: "Id", label: "Label", icon: "circle", shortcut: "Shortcut", keywords: ["Item", "Item 2"], group: "Group", disabled: false, action: "INIT" }, { id: "Id 2", label: "Label 2", icon: "circle", shortcut: "Shortcut 2", keywords: ["Item", "Item 2"], group: "Group 2", disabled: true, action: "INIT" }]
         @label "Commands"
         @description "Commands listed in the palette, filtered as the user types"
         @tier "presentation"

package/behaviors/lolo/ui/core/molecules/ui-document-viewer.lolo

@@ -74,7 +74,7 @@ orbital DocumentViewerOrbital {
         @label "Total Pages"
         @description "Total pages"
         @tier "presentation"
-      height : string
+      height : scalar = 600
         @label "Height"
         @description "Viewer height"
         @tier "presentation"

package/behaviors/lolo/ui/core/molecules/ui-flex.lolo

@@ -51,15 +51,15 @@ orbital FlexOrbital {
         @label "Inline"
         @description "Inline flex"
         @tier "presentation"
-      grow : number
+      grow : scalar
         @label "Grow"
         @description "Flex grow"
         @tier "presentation"
-      shrink : number
+      shrink : scalar
         @label "Shrink"
         @description "Flex shrink"
         @tier "presentation"
-      basis : string
+      basis : scalar
         @label "Basis"
         @description "Flex basis"
         @tier "presentation"

package/behaviors/lolo/ui/core/molecules/ui-floating-toolbar.lolo

@@ -5,9 +5,9 @@ orbital FloatingToolbarOrbital {
     id : string!
     icon : icon!
     label : string!
-    event : string
-    action : string
-    actionPayload : Map string scalar
+    event : event
+    action : event
+    actionPayload : @payload action
     active : boolean
     disabled : boolean
     testId : string
@@ -32,7 +32,7 @@ orbital FloatingToolbarOrbital {
     }
 
     config {
-      items : [FloatingToolbarItemsItem] = [{ id: "Id", icon: "circle", label: "Label", action: "Action", active: false, disabled: false, testId: "Test Id" }, { id: "Id 2", icon: "circle", label: "Label 2", action: "Action 2", active: true, disabled: true, testId: "Test Id 2" }]
+      items : [FloatingToolbarItemsItem] = [{ id: "Id", icon: "circle", label: "Label", action: "INIT", active: false, disabled: false, testId: "Test Id" }, { id: "Id 2", icon: "circle", label: "Label 2", action: "INIT", active: true, disabled: true, testId: "Test Id 2" }]
         @label "Items"
         @description "Tool items rendered as icon buttons"
         @tier "presentation"

package/behaviors/lolo/ui/core/molecules/ui-form-actions.lolo

@@ -4,7 +4,7 @@ orbital FormActionsOrbital {
   type FormActionsPrimary = {
     label : string!
     actionType : string
-    event : string
+    event : event
     navigatesTo : string
     variant : string
   }

package/behaviors/lolo/ui/core/molecules/ui-input-group.lolo

@@ -8,7 +8,6 @@ orbital InputGroupOrbital {
 
   entity InputGroupItem [runtime] {
     id : string!
-    value : string
   }
 
   trait InputGroupRender -> @rebindable InputGroupItem [interaction, instance] {
@@ -16,34 +15,10 @@ orbital InputGroupOrbital {
 
     state idle {
       INIT -> idle
-        (set @entity.value @config.value)
         (render-ui main {
           className: @config.className
           placeholder: @config.placeholder
-          value: @entity.value
-          disabled: @config.disabled
-          action: @config.action
-          inputType: @config.inputType
-          label: @config.label
-          helperText: @config.helperText
-          error: @config.error
-          leftIcon: @config.leftIcon
-          rightIcon: @config.rightIcon
-          clearable: @config.clearable
-          onClear: @config.onClear
-          options: @config.options
-          rows: @config.rows
-          onChange: @config.onChange
-          leftAddon: @config.leftAddon
-          rightAddon: @config.rightAddon
-          type: input-group
-        })
-      ACTION -> idle
-        (set @entity.value ?value)
-        (render-ui main {
-          className: @config.className
-          placeholder: @config.placeholder
-          value: @entity.value
+          value: @config.value
           disabled: @config.disabled
           action: @config.action
           inputType: @config.inputType
@@ -80,15 +55,6 @@ orbital InputGroupOrbital {
         @tier "essential"
     }
 
-    listens {
-      ACTION {
-        value : match @config.inputType {
-          "number" -> number
-          _ -> string
-        }!
-      }
-    }
-
     config {
       className : string
         @label "Class Name"
@@ -98,7 +64,7 @@ orbital InputGroupOrbital {
         @label "Placeholder"
         @description "Placeholder text"
         @tier "presentation"
-      value : string
+      value : scalar
         @label "Value"
         @description "Current value"
         @tier "presentation"

package/behaviors/lolo/ui/core/molecules/ui-likert-scale.lolo

@@ -46,7 +46,7 @@ orbital LikertScaleOrbital {
         @label "Options"
         @description "Scale points (defaults to a 5-point agree/disagree set)"
         @tier "presentation"
-      value : string
+      value : scalar
         @label "Value"
         @description "Selected value (controlled)"
         @tier "presentation"

package/behaviors/lolo/ui/core/molecules/ui-notification.lolo

@@ -69,7 +69,7 @@ orbital NotificationOrbital {
         @label "On Action"
         @description "Action button click handler"
         @tier "presentation"
-      badge : string
+      badge : scalar
         @label "Badge"
         @description "Badge count (optional)"
         @tier "presentation"

package/behaviors/lolo/ui/core/molecules/ui-orbital-visualization.lolo

@@ -2,15 +2,15 @@ app ui-orbital-visualization "1.0.0"
 "OrbitalVisualization — UI factory (1:1 with the @almadar/ui orbital-visualization pattern)."
 orbital OrbitalVisualizationOrbital {
   type OrbitalVisualizationSchema = {
-    dataEntities : [Map string scalar]
+    dataEntities : number
     ui : OrbitalVisualizationSchemaUi
-    traits : [Map string scalar]
+    traits : number
   }
   type OrbitalVisualizationSchemaUi = {
     pages : [OrbitalVisualizationSchemaUiPagesItem]
   }
   type OrbitalVisualizationSchemaUiPagesItem = {
-    sections : [Map string scalar]
+    sections : number
   }
   type OrbitalVisualizationError = {
     message : string!
@@ -51,7 +51,7 @@ orbital OrbitalVisualizationOrbital {
     config {
       schema : OrbitalVisualizationSchema
         @label "Schema"
-        @description "Full KFlow schema object"
+        @description "Complexity-scoring summary of a KFlow schema (counts only — see {@link OrbitalVisualizationSchemaSummary})."
         @tier "presentation"
       complexity : number
         @label "Complexity"

package/behaviors/lolo/ui/core/molecules/ui-page-header.lolo

@@ -70,11 +70,11 @@ orbital PageHeaderOrbital {
     }
 
     config {
-      title : string
+      title : scalar
         @label "Title"
         @description "Page title - accepts string or number from generated code accessing dynamic entity data"
         @tier "presentation"
-      subtitle : string
+      subtitle : scalar
         @label "Subtitle"
         @description "Optional subtitle/description"
         @tier "presentation"

package/behaviors/lolo/ui/core/molecules/ui-reply-tree.lolo

@@ -2,6 +2,16 @@ app ui-reply-tree "1.0.0"
 "ReplyTree — UI factory (1:1 with the @almadar/ui reply-tree pattern)."
 orbital ReplyTreeOrbital {
     type ReplyTreeLoaded = Event { data : [ReplyTreeItem] } "ReplyTree rows finished loading; payload.data holds the collection"
+  type ReplyNodeRow = {
+    authorName : string
+    content : string
+    authorAvatarUrl : string
+    postedAt : string
+    voteCount : number
+    userVote : "up" | "down" | "none"
+    collapsed : boolean
+    replies : [ReplyNodeRow]
+  }
 
   entity ReplyTreeItem [runtime] {
     id : string!
@@ -12,7 +22,7 @@ orbital ReplyTreeOrbital {
     voteCount : number = 1
     userVote : "up" | "down" | "none" = up
     collapsed : boolean = false
-    replies : [opaque] = []
+    replies : [ReplyNodeRow] = []
   }
 
   trait ReplyTreeRender -> @rebindable ReplyTreeItem [interaction, instance] {

package/behaviors/lolo/ui/core/molecules/ui-simple-grid.lolo

@@ -22,7 +22,7 @@ orbital SimpleGridOrbital {
     }
 
     config {
-      minChildWidth : string
+      minChildWidth : scalar = 250
         @label "Min Child Width"
         @description "Minimum width of each child (e.g., 200, '200px', '15rem')"
         @tier "presentation"

package/behaviors/lolo/ui/core/molecules/ui-stat-display.lolo

@@ -49,7 +49,7 @@ orbital StatDisplayOrbital {
         @label "Label"
         @description "Display label (e.g., 'Total', 'Remaining')"
         @tier "presentation"
-      value : string = ""
+      value : scalar = ""
         @label "Value"
         @description "Primary value (number or formatted string)"
         @tier "presentation"

package/behaviors/lolo/ui/core/molecules/ui-swipeable-row.lolo

@@ -1,19 +1,20 @@
 app ui-swipeable-row "1.0.0"
 "SwipeableRow — UI factory (1:1 with the @almadar/ui swipeable-row pattern)."
 orbital SwipeableRowOrbital {
+    type SwipeableRowLoaded = Event { data : [SwipeableRowItem] } "SwipeableRow rows finished loading; payload.data holds the collection"
   type SwipeableRowLeftActionsItem = {
     label : string!
     icon : icon
     variant : "primary" | "secondary" | "danger" | "ghost"
     event : event!
-    eventPayload : Map string scalar
+    eventPayload : @payload event
   }
   type SwipeableRowRightActionsItem = {
     label : string!
     icon : icon
     variant : "primary" | "secondary" | "danger" | "ghost"
     event : event!
-    eventPayload : Map string scalar
+    eventPayload : @payload event
   }
 
   entity SwipeableRowItem [runtime] {
@@ -24,16 +25,44 @@ orbital SwipeableRowOrbital {
     initial: idle
 
     state idle {
-      INIT -> idle
+      INIT -> idle when @config.selfFetch
+        (fetch SwipeableRowItem { emit: { success: SwipeableRowLoaded } })
         (render-ui main {
           leftActions: @config.leftActions
           rightActions: @config.rightActions
           threshold: @config.threshold
           children: @config.children
-          itemData: @config.itemData
+          itemData: @entity
           className: @config.className
           type: swipeable-row
         })
+      INIT -> idle when (not @config.selfFetch)
+        (render-ui main {
+          leftActions: @config.leftActions
+          rightActions: @config.rightActions
+          threshold: @config.threshold
+          children: @config.children
+          itemData: @entity
+          className: @config.className
+          type: swipeable-row
+        })
+      SwipeableRowLoaded -> idle
+        (render-ui main {
+          leftActions: @config.leftActions
+          rightActions: @config.rightActions
+          threshold: @config.threshold
+          children: @config.children
+          itemData: @payload.data
+          className: @config.className
+          type: swipeable-row
+        })
+    }
+
+    emits {
+      SwipeableRowLoaded
+        @description "SwipeableRow rows finished loading; payload.data holds the collection."
+        @synonyms "loaded, fetched, retrieved"
+        @tier "essential"
     }
 
     config {
@@ -53,14 +82,14 @@ orbital SwipeableRowOrbital {
         @label "Children"
         @description "children prop"
         @tier "presentation"
-      itemData : Map string scalar = {}
-        @label "Item Data"
-        @description "itemData prop"
-        @tier "presentation"
       className : string
         @label "Class Name"
         @description "className prop"
         @tier "presentation"
+      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"
     }
   }
 

package/behaviors/lolo/ui/core/molecules/ui-wizard-container.lolo

@@ -167,7 +167,7 @@ orbital WizardContainerOrbital {
         @label "Steps"
         @description "Wizard steps"
         @tier "presentation"
-      currentStep : string
+      currentStep : scalar
         @label "Current Step"
         @description "Current step index (controlled) - accepts number or string for generated code compatibility"
         @tier "presentation"

package/behaviors/lolo/ui/core/organisms/ui-detail-panel.lolo

@@ -32,7 +32,7 @@ orbital DetailPanelOrbital {
   type DetailPanelBackAction = {
     label : string!
     icon : icon
-    event : string
+    event : event
     navigatesTo : string
     variant : "primary" | "secondary" | "ghost" | "danger"
   }

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

@@ -34,7 +34,7 @@ orbital EntityTableOrbital {
   }
   type EntityTableEmptyAction = {
     label : string!
-    event : string
+    event : event
   }
   type EntityTableRowActionsItem = {
     label : string!

package/behaviors/lolo/ui/core/organisms/ui-subagent-trace-panel.lolo

@@ -7,6 +7,34 @@ orbital SubagentTracePanelOrbital {
     code : string
     stack : string
   }
+  type SubagentTracePanelSubagentsItem = {
+    id : string!
+    name : string!
+    role : string!
+    orbitalName : string
+    parentId : string
+    status : "running" | "complete" | "error"!
+    task : string!
+    messages : [SubagentTracePanelSubagentsItemMessagesItem]!
+    durationMs : number
+  }
+  type SubagentTracePanelSubagentsItemMessagesItem = {
+    message : string!
+    tool : string
+    timestamp : number!
+  }
+  type SubagentTracePanelCoordinatorMessagesItem = {
+    role : "system" | "user" | "assistant" | "tool"!
+    content : string!
+    toolCalls : [SubagentTracePanelCoordinatorMessagesItemToolCallsItem]
+    toolCallId : string
+    toolName : string
+    reasoningContent : string
+  }
+  type SubagentTracePanelCoordinatorMessagesItemToolCallsItem = {
+    id : string!
+    name : string!
+  }
 
   entity SubagentTracePanelItem [runtime] {
     id : string!
@@ -40,7 +68,6 @@ orbital SubagentTracePanelOrbital {
           disclosureLevel: @config.disclosureLevel
           open: @config.open
           onClose: @config.onClose
-          coordinatorActivities: @config.coordinatorActivities
           coordinatorMessages: @config.coordinatorMessages
           mode: @config.mode
           type: subagent-trace-panel
@@ -114,7 +141,7 @@ orbital SubagentTracePanelOrbital {
         @label "Selected Ids"
         @description "Currently selected item IDs"
         @tier "presentation"
-      subagents : [Map string scalar] = []
+      subagents : [SubagentTracePanelSubagentsItem] = [{ id: "Id", name: "Name", role: "Role", orbitalName: "Orbital Name", parentId: "Parent Id", status: running, task: "Task", messages: [{ message: "Message", tool: "Tool", timestamp: 1 }, { message: "Message 2", tool: "Tool 2", timestamp: 2 }], durationMs: 1, timeline: [] }, { id: "Id 2", name: "Name 2", role: "Role 2", orbitalName: "Orbital Name 2", parentId: "Parent Id 2", status: complete, task: "Task 2", messages: [{ message: "Message", tool: "Tool", timestamp: 1 }, { message: "Message 2", tool: "Tool 2", timestamp: 2 }], durationMs: 2, timeline: [] }]
         @label "Subagents"
         @description "All known subagents from the runner."
         @tier "presentation"
@@ -134,11 +161,7 @@ orbital SubagentTracePanelOrbital {
         @label "On Close"
         @description "Optional dismiss handler."
         @tier "presentation"
-      coordinatorActivities : [Map string scalar] = []
-        @label "Coordinator Activities"
-        @description "Full coordinator activities (tool calls, results, messages, errors)."
-        @tier "presentation"
-      coordinatorMessages : [Map string scalar] = []
+      coordinatorMessages : [SubagentTracePanelCoordinatorMessagesItem] = []
         @label "Coordinator Messages"
         @description "Canonical Coordinator conversation — same shape live and on reload. When present, takes precedence over `coordinatorActivities` for the Coordinator section."
         @tier "presentation"

package/behaviors/lolo/ui/game/atoms/std-mesh-asset-art.lolo

@@ -29,11 +29,11 @@ orbital StdMeshAssetArtOrbital {
 
     listens {
       MESH_ASSET_SYNC { }
-      MESH_ASSET_PUBLISH { kind : string, states : Map string opaque }
+      MESH_ASSET_PUBLISH { kind : string, states : Map string [node] }
     }
 
     config {
-      seedArt : Map string opaque = {}
+      seedArt : Map string Map string [node] = {}
         @label "Seed Art"
         @description "Initial kind → (state → draw-group items of draw-mesh descriptors) catalog merged under bus-published entries (published entries win). Lets a 3D board ship volumetric art with zero asset imports."
         @tier "presentation"

package/behaviors/lolo/ui/game/atoms/std-svg-asset-art.lolo

@@ -29,11 +29,11 @@ orbital StdSvgAssetArtOrbital {
 
     listens {
       SVG_ASSET_SYNC { }
-      SVG_ASSET_PUBLISH { kind : string, states : Map string opaque }
+      SVG_ASSET_PUBLISH { kind : string, states : Map string [node] }
     }
 
     config {
-      seedArt : Map string opaque = {}
+      seedArt : Map string Map string [node] = {}
         @label "Seed Art"
         @description "Initial kind → (state → draw-group items) catalog merged under bus-published entries (published entries win). Lets a board ship vector art with zero asset imports."
         @tier "presentation"

package/behaviors/lolo/ui/game/atoms/ui-draw-shape-layer.lolo

@@ -3,6 +3,7 @@ app ui-draw-shape-layer "1.0.0"
 orbital DrawShapeLayerOrbital {
   type DrawShapeLayerItemsItem = {
     type : "draw-shape"!
+    id : string
     shape : "cell" | "rect" | "ellipse" | "poly" | "path"!
     position : DrawShapeLayerItemsItemPosition!
     anchor : "top-left" | "ground" | "center"
@@ -147,7 +148,7 @@ orbital DrawShapeLayerOrbital {
     }
 
     config {
-      items : [DrawShapeLayerItemsItem] = [{ type: "draw-shape", shape: cell, position: { x: 1, y: 1, z: 1 }, anchor: "top-left", width: 1, height: 1, radiusX: 1, radiusY: 1, offsetX: 1, offsetY: 1, points: [{ x: 1, y: 1 }, { x: 2, y: 2 }], d: "D", fill: "Fill", gradient: { kind: linear, from: { x: 1, y: 1 }, to: { x: 1, y: 1 }, center: { x: 1, y: 1 }, radius: 1, angle: 1, stops: [{ offset: 1, color: "Color" }, { offset: 2, color: "Color 2" }] }, fillPattern: { kind: noise, url: "Url", scale: 1, alpha: 1, color: "Color" }, stroke: "Stroke", strokeWidth: 1, strokeGradient: { kind: linear, from: { x: 1, y: 1 }, to: { x: 1, y: 1 }, center: { x: 1, y: 1 }, radius: 1, angle: 1, stops: [{ offset: 1, color: "Color" }, { offset: 2, color: "Color 2" }] }, strokeDash: [1, 2], strokeDashOffset: 1, blendMode: "source-over", blur: 1, rotate: 1, pivot: { x: 1, y: 1 }, shadow: { color: "Color", blur: 1 }, animation: { durationMs: 1, loop: false, keyframes: [{ at: 1, offsetX: 1, offsetY: 1, rotate: 1, opacity: 1, radiusX: 1, radiusY: 1, width: 1, height: 1, strokeWidth: 1, strokeDashOffset: 1, blur: 1, fill: "Fill", stroke: "Stroke", shadow: { color: "Color", blur: 1 } }, { at: 2, offsetX: 2, offsetY: 2, rotate: 2, opacity: 2, radiusX: 2, radiusY: 2, width: 2, height: 2, strokeWidth: 2, strokeDashOffset: 2, blur: 2, fill: "Fill 2", stroke: "Stroke 2", shadow: { color: "Color 2", blur: 2 } }] }, opacity: 1 }, { type: "draw-shape", shape: rect, position: { x: 2, y: 2, z: 2 }, anchor: ground, width: 2, height: 2, radiusX: 2, radiusY: 2, offsetX: 2, offsetY: 2, points: [{ x: 1, y: 1 }, { x: 2, y: 2 }], d: "D 2", fill: "Fill 2", gradient: { kind: radial, from: { x: 2, y: 2 }, to: { x: 2, y: 2 }, center: { x: 2, y: 2 }, radius: 2, angle: 2, stops: [{ offset: 1, color: "Color" }, { offset: 2, color: "Color 2" }] }, fillPattern: { kind: image, url: "Url 2", scale: 2, alpha: 2, color: "Color 2" }, stroke: "Stroke 2", strokeWidth: 2, strokeGradient: { kind: radial, from: { x: 2, y: 2 }, to: { x: 2, y: 2 }, center: { x: 2, y: 2 }, radius: 2, angle: 2, stops: [{ offset: 1, color: "Color" }, { offset: 2, color: "Color 2" }] }, strokeDash: [1, 2], strokeDashOffset: 2, blendMode: lighter, blur: 2, rotate: 2, pivot: { x: 2, y: 2 }, shadow: { color: "Color 2", blur: 2 }, animation: { durationMs: 2, loop: true, keyframes: [{ at: 1, offsetX: 1, offsetY: 1, rotate: 1, opacity: 1, radiusX: 1, radiusY: 1, width: 1, height: 1, strokeWidth: 1, strokeDashOffset: 1, blur: 1, fill: "Fill", stroke: "Stroke", shadow: { color: "Color", blur: 1 } }, { at: 2, offsetX: 2, offsetY: 2, rotate: 2, opacity: 2, radiusX: 2, radiusY: 2, width: 2, height: 2, strokeWidth: 2, strokeDashOffset: 2, blur: 2, fill: "Fill 2", stroke: "Stroke 2", shadow: { color: "Color 2", blur: 2 } }] }, opacity: 2 }]
+      items : [DrawShapeLayerItemsItem] = [{ type: "draw-shape", id: "Id", shape: cell, position: { x: 1, y: 1, z: 1 }, anchor: "top-left", width: 1, height: 1, radiusX: 1, radiusY: 1, offsetX: 1, offsetY: 1, points: [{ x: 1, y: 1 }, { x: 2, y: 2 }], d: "D", fill: "Fill", gradient: { kind: linear, from: { x: 1, y: 1 }, to: { x: 1, y: 1 }, center: { x: 1, y: 1 }, radius: 1, angle: 1, stops: [{ offset: 1, color: "Color" }, { offset: 2, color: "Color 2" }] }, fillPattern: { kind: noise, url: "Url", scale: 1, alpha: 1, color: "Color" }, stroke: "Stroke", strokeWidth: 1, strokeGradient: { kind: linear, from: { x: 1, y: 1 }, to: { x: 1, y: 1 }, center: { x: 1, y: 1 }, radius: 1, angle: 1, stops: [{ offset: 1, color: "Color" }, { offset: 2, color: "Color 2" }] }, strokeDash: [1, 2], strokeDashOffset: 1, blendMode: "source-over", blur: 1, rotate: 1, pivot: { x: 1, y: 1 }, shadow: { color: "Color", blur: 1 }, animation: { durationMs: 1, loop: false, keyframes: [{ at: 1, offsetX: 1, offsetY: 1, rotate: 1, opacity: 1, radiusX: 1, radiusY: 1, width: 1, height: 1, strokeWidth: 1, strokeDashOffset: 1, blur: 1, fill: "Fill", stroke: "Stroke", shadow: { color: "Color", blur: 1 } }, { at: 2, offsetX: 2, offsetY: 2, rotate: 2, opacity: 2, radiusX: 2, radiusY: 2, width: 2, height: 2, strokeWidth: 2, strokeDashOffset: 2, blur: 2, fill: "Fill 2", stroke: "Stroke 2", shadow: { color: "Color 2", blur: 2 } }] }, opacity: 1 }, { type: "draw-shape", id: "Id 2", shape: rect, position: { x: 2, y: 2, z: 2 }, anchor: ground, width: 2, height: 2, radiusX: 2, radiusY: 2, offsetX: 2, offsetY: 2, points: [{ x: 1, y: 1 }, { x: 2, y: 2 }], d: "D 2", fill: "Fill 2", gradient: { kind: radial, from: { x: 2, y: 2 }, to: { x: 2, y: 2 }, center: { x: 2, y: 2 }, radius: 2, angle: 2, stops: [{ offset: 1, color: "Color" }, { offset: 2, color: "Color 2" }] }, fillPattern: { kind: image, url: "Url 2", scale: 2, alpha: 2, color: "Color 2" }, stroke: "Stroke 2", strokeWidth: 2, strokeGradient: { kind: radial, from: { x: 2, y: 2 }, to: { x: 2, y: 2 }, center: { x: 2, y: 2 }, radius: 2, angle: 2, stops: [{ offset: 1, color: "Color" }, { offset: 2, color: "Color 2" }] }, strokeDash: [1, 2], strokeDashOffset: 2, blendMode: lighter, blur: 2, rotate: 2, pivot: { x: 2, y: 2 }, shadow: { color: "Color 2", blur: 2 }, animation: { durationMs: 2, loop: true, keyframes: [{ at: 1, offsetX: 1, offsetY: 1, rotate: 1, opacity: 1, radiusX: 1, radiusY: 1, width: 1, height: 1, strokeWidth: 1, strokeDashOffset: 1, blur: 1, fill: "Fill", stroke: "Stroke", shadow: { color: "Color", blur: 1 } }, { at: 2, offsetX: 2, offsetY: 2, rotate: 2, opacity: 2, radiusX: 2, radiusY: 2, width: 2, height: 2, strokeWidth: 2, strokeDashOffset: 2, blur: 2, fill: "Fill 2", stroke: "Stroke 2", shadow: { color: "Color 2", blur: 2 } }] }, opacity: 2 }]
         @label "Items"
         @description "items prop"
         @tier "presentation"

package/behaviors/lolo/ui/game/atoms/ui-draw-sprite-layer.lolo

@@ -3,6 +3,7 @@ app ui-draw-sprite-layer "1.0.0"
 orbital DrawSpriteLayerOrbital {
   type DrawSpriteLayerItemsItem = {
     type : "draw-sprite"!
+    id : string
     position : DrawSpriteLayerItemsItemPosition!
     asset : DrawSpriteLayerItemsItemAsset!
     anchor : "top-left" | "ground" | "center"
@@ -63,7 +64,7 @@ orbital DrawSpriteLayerOrbital {
     }
 
     config {
-      items : [DrawSpriteLayerItemsItem] = [{ type: "draw-sprite", position: { x: 1, y: 1, z: 1 }, asset: { url: "https://almadar-kflow-assets.web.app/shared/ui-roguelike-board/default/units/player.png", role: "npc", category: "asset", animations: ["idle", "walk", "attack", "hit", "death"], style: "pixel", dimension: "2d", aspect: "1:1", name: "asset", thumbnailUrl: "" }, anchor: "top-left", width: 1, height: 1, frame: { x: 1, y: 1, w: 1, h: 1 }, animation: "Animation", loop: false, clockMs: 1, flipX: false, rotation: 1, opacity: 1, shadow: { color: "Color", blur: 1 } }, { type: "draw-sprite", position: { x: 2, y: 2, z: 2 }, asset: { url: "https://almadar-kflow-assets.web.app/shared/ui-roguelike-board/default/units/player.png", role: "npc", category: "asset", animations: ["idle", "walk", "attack", "hit", "death"], style: "pixel", dimension: "2d", aspect: "1:1", name: "asset", thumbnailUrl: "" }, anchor: ground, width: 2, height: 2, frame: { x: 2, y: 2, w: 2, h: 2 }, animation: "Animation 2", loop: true, clockMs: 2, flipX: true, rotation: 2, opacity: 2, shadow: { color: "Color 2", blur: 2 } }]
+      items : [DrawSpriteLayerItemsItem] = [{ type: "draw-sprite", id: "Id", position: { x: 1, y: 1, z: 1 }, asset: { url: "https://almadar-kflow-assets.web.app/shared/ui-roguelike-board/default/units/player.png", role: "npc", category: "asset", animations: ["idle", "walk", "attack", "hit", "death"], style: "pixel", dimension: "2d", aspect: "1:1", name: "asset", thumbnailUrl: "" }, anchor: "top-left", width: 1, height: 1, frame: { x: 1, y: 1, w: 1, h: 1 }, animation: "Animation", loop: false, clockMs: 1, flipX: false, rotation: 1, opacity: 1, shadow: { color: "Color", blur: 1 } }, { type: "draw-sprite", id: "Id 2", position: { x: 2, y: 2, z: 2 }, asset: { url: "https://almadar-kflow-assets.web.app/shared/ui-roguelike-board/default/units/player.png", role: "npc", category: "asset", animations: ["idle", "walk", "attack", "hit", "death"], style: "pixel", dimension: "2d", aspect: "1:1", name: "asset", thumbnailUrl: "" }, anchor: ground, width: 2, height: 2, frame: { x: 2, y: 2, w: 2, h: 2 }, animation: "Animation 2", loop: true, clockMs: 2, flipX: true, rotation: 2, opacity: 2, shadow: { color: "Color 2", blur: 2 } }]
         @label "Items"
         @description "Sprites painted in array order; z-ordering is the caller's responsibility."
         @tier "presentation"