@almadar/std 16.151.0 → 16.153.0

package/behaviors/lolo/infra/atoms/std-data-erasure.lolo

@@ -211,7 +211,11 @@ orbital DataErasureOrbital {
     }
 
     state browsing {
-      CANCEL_ERASURE -> loading
+      ;; Stays in `browsing`: this persist's result arms (ErasureSaved /
+      ;; ErasureSaveFailed) are declared here. Leaving for `loading` landed the
+      ;; save on a deaf state and wedged the panel on its spinner — the
+      ;; ErasureSaved arm below is what moves to `loading` to re-fetch.
+      CANCEL_ERASURE -> browsing
         (set @entity.id ?id)
         (set @entity.status cancelled)
         (persist update ErasureRequest @entity {

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

@@ -1,4 +1,4 @@
-app std-browse "2.4.0"
+app std-browse "2.5.0"
 "std-browse as a Function — single primitive: data-grid. Owns the fetch + REFETCH (query/filter/page) state machine. Consumers configure fields/imageField/itemActions/cols/gap/variant; the atom renders the grid. Each `fields[]` entry accepts `{ name, label, variant }` plus optional `referenceEntity` + `displayField` to render a foreign-key column as the joined entity's display value (data-grid resolves @list[referenceEntity] at render time when both keys are present). `browseLook` (table default / dense / feed / gallery / master-detail / triage) selects one of six render bodies; dense/feed/gallery were folded in from std-browse-dense/-feed/-gallery (Phase 5.B); master-detail (split record view driven by the guarded VIEW/CLOSE self-transitions) and triage (inbox rows) were folded in 2026-07-26. Consumers retarget by setting browseLook."
 type FieldSpec = { name : string!, label : string, variant : h3 | h4 | body | caption | badge | small | progress, icon : string, format : date | currency | number | boolean | percent, key : string, header : string }
 type ItemAction = { label : string!, event : string, navigatesTo : string, variant : primary | secondary | ghost | danger, icon : string }
@@ -43,6 +43,7 @@ orbital BrowseItemOrbital {
       columns: @config.columns
       emptyMessage: "No records"
       itemActions: @config.itemActions
+      itemClickEvent: VIEW
       look: dense
       maxInlineActions: @config.maxInlineActions
       pageSize: @config.displayPageSize
@@ -75,7 +76,7 @@ orbital BrowseItemOrbital {
       INIT -> loading
         (fetch BrowseItem {
           emit: { failure: BrowseItemLoadFailed, success: BrowseItemLoaded }
-          filter: (or ["=", @config.scopeField, ""] ["=", (object/get @entity @config.scopeField), @user.id])
+          filter: (and (or ["=", @config.scopeField, ""] ["=", (object/get @entity @config.scopeField), @user.id]) (or ["=", @config.initialFilterField, ""] ["=", (object/get @entity @config.initialFilterField), @config.initialFilterValue]))
           limit: @config.pageSize
           offset: 0
         })
@@ -104,7 +105,7 @@ orbital BrowseItemOrbital {
       INIT -> loading
         (fetch BrowseItem {
           emit: { failure: BrowseItemLoadFailed, success: BrowseItemLoaded }
-          filter: (or ["=", @config.scopeField, ""] ["=", (object/get @entity @config.scopeField), @user.id])
+          filter: (and (or ["=", @config.scopeField, ""] ["=", (object/get @entity @config.scopeField), @user.id]) (or ["=", @config.initialFilterField, ""] ["=", (object/get @entity @config.initialFilterField), @config.initialFilterValue]))
           limit: @config.pageSize
           offset: 0
         })
@@ -161,7 +162,7 @@ orbital BrowseItemOrbital {
       INIT -> loading
         (fetch BrowseItem {
           emit: { failure: BrowseItemLoadFailed, success: BrowseItemLoaded }
-          filter: (or ["=", @config.scopeField, ""] ["=", (object/get @entity @config.scopeField), @user.id])
+          filter: (and (or ["=", @config.scopeField, ""] ["=", (object/get @entity @config.scopeField), @user.id]) (or ["=", @config.initialFilterField, ""] ["=", (object/get @entity @config.initialFilterField), @config.initialFilterValue]))
           limit: @config.pageSize
           offset: 0
         })
@@ -353,6 +354,16 @@ orbital BrowseItemOrbital {
         @description "Name the field on this entity that holds the viewer's id (e.g. memberId, patientId, assignee). When set, the list loads ONLY rows whose that field equals @user.id — the 'my bookings' / 'my appointments' shape. Left blank the list loads every row, which is the default. Declared, never inferred: guessing the column from its name would silently scope the wrong one."
         @synonyms "owner field, my records, only mine, only my own, scope to user, per-user list, mine only, owned by me"
         @tier "policy"
+      initialFilterField : string = ""
+        @label "Which field does the first load filter on?"
+        @description "Name the field the INITIAL load filters on, paired with initialFilterValue. This is the detail half of a list-detail pair: a thread that must wait for a conversation to be picked sets the field to its parent key and leaves the value blank, so the first load matches nothing and the empty state shows instead of every record in the table. REFETCH_FILTER then supplies the real selection. Left blank the first load is unfiltered, which is the default."
+        @synonyms "initial filter, first load filter, wait for selection, detail pane filter, requires selection, start empty"
+        @tier "policy"
+      initialFilterValue : string = ""
+        @label "What value does the first load filter for?"
+        @description "The value initialFilterField must equal on the first load. Blank is meaningful: it matches only records whose field is itself blank, which for a detail pane is normally none — that is how a thread stays empty until its parent is selected."
+        @synonyms "initial filter value, first load value, default selection"
+        @tier "policy"
       selectable : boolean = false
         @label "Show row selection checkboxes?"
         @description "Adds a checkbox column with select-all to the dense table. Enable only when the surface offers bulk actions — checkboxes with nothing to act on are a dead affordance."

package/behaviors/lolo/ui/core/molecules/ui-data-list.lolo

@@ -84,6 +84,8 @@ orbital DataListOrbital {
           loadMoreEvent: @config.loadMoreEvent
           hasMore: @config.hasMore
           pageSize: @config.pageSize
+          sortBy: @config.sortBy
+          sortDirection: @config.sortDirection
           look: @config.look
           type: data-list
         })
@@ -123,6 +125,8 @@ orbital DataListOrbital {
           loadMoreEvent: @config.loadMoreEvent
           hasMore: @config.hasMore
           pageSize: @config.pageSize
+          sortBy: @config.sortBy
+          sortDirection: @config.sortDirection
           look: @config.look
           type: data-list
         })
@@ -303,6 +307,14 @@ orbital DataListOrbital {
         @label "Page Size"
         @description "Max items to show before 'Show More' button. Defaults to 5. Set to 0 to disable."
         @tier "presentation"
+      sortBy : string
+        @label "Sort By"
+        @description "Field name to order rows by. Values are compared by their own type — numbers numerically, date-like strings chronologically, everything else alphabetically — never by what the field is called. Empty cells sort last. Unset leaves the incoming order untouched. Orders only the rows already fetched: a collection larger than its `limit` still needs ordering at the data layer."
+        @tier "presentation"
+      sortDirection : "asc" | "desc" = asc
+        @label "Sort Direction"
+        @description "Direction for `sortBy`. Defaults to ascending."
+        @tier "presentation"
       look : "dense" | "spacious" | "striped" | "borderless" | "card-rows" = dense
         @label "Look"
         @description "Layer 2 visual treatment — mirrors the `entity-table` look enum so data-grid / data-list / entity-table share one knob name from authors."

package/behaviors/lolo/ui/core/molecules/ui-emoji-picker.lolo

@@ -0,0 +1,56 @@
+app ui-emoji-picker "1.0.0"
+"EmojiPicker — UI factory (1:1 with the @almadar/ui emoji-picker pattern)."
+orbital EmojiPickerOrbital {
+  entity EmojiPickerItem [runtime] {
+    id : string!
+  }
+
+  trait EmojiPickerRender -> @rebindable EmojiPickerItem [interaction, instance] {
+    initial: idle
+
+    state idle {
+      INIT -> idle
+        (render-ui main {
+          pickEvent: @config.pickEvent
+          position: @config.position
+          triggerIcon: @config.triggerIcon
+          triggerLabel: @config.triggerLabel
+          className: @config.className
+          type: emoji-picker
+        })
+    }
+
+    emits {
+      @config.pickEvent -> external {
+        id : string
+      }
+        @description "Declarative event name — picking an emoji emits UI:{pickEvent} with { emoji } via eventBus"
+        @tier "essential"
+    }
+
+    config {
+      pickEvent : string = "PICK"
+        @label "Pick Event"
+        @description "Declarative event name — picking an emoji emits UI:{pickEvent} with { emoji } via eventBus"
+        @tier "presentation"
+      position : "top" | "bottom" = top
+        @label "Position"
+        @description "Which side of the trigger the panel opens on"
+        @tier "presentation"
+      triggerIcon : icon
+        @label "Trigger Icon"
+        @description "Icon shown on the trigger button"
+        @tier "presentation"
+      triggerLabel : string = "Add emoji"
+        @label "Trigger Label"
+        @description "Accessible label for the trigger button"
+        @tier "presentation"
+      className : string
+        @label "Class Name"
+        @description "Additional CSS classes applied to the trigger button"
+        @tier "presentation"
+    }
+  }
+
+  page "/emoji-picker" as EmojiPickerPage -> EmojiPickerRender
+}

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

@@ -3,6 +3,7 @@ app ui-popover "1.0.0"
 orbital PopoverOrbital {
   entity PopoverItem [runtime] {
     id : string!
+    open : boolean
   }
 
   trait PopoverRender -> @rebindable PopoverItem [interaction, instance] {
@@ -10,15 +11,45 @@ orbital PopoverOrbital {
 
     state idle {
       INIT -> idle
+        (set @entity.open @config.open)
         (render-ui main {
           content: @config.content
           children: @config.children
           position: @config.position
           trigger: @config.trigger
           showArrow: @config.showArrow
+          open: @entity.open
+          onOpenChange: @config.onOpenChange
           className: @config.className
           type: popover
         })
+      OPEN_CHANGE -> idle
+        (set @entity.open ?open)
+        (render-ui main {
+          content: @config.content
+          children: @config.children
+          position: @config.position
+          trigger: @config.trigger
+          showArrow: @config.showArrow
+          open: @entity.open
+          onOpenChange: @config.onOpenChange
+          className: @config.className
+          type: popover
+        })
+    }
+
+    emits {
+      @config.onOpenChange -> external {
+        open : boolean
+      }
+        @description "Fired when the popover wants to change visibility (trigger click, outside click)"
+        @tier "essential"
+    }
+
+    listens {
+      OPEN_CHANGE {
+        open : boolean
+      }
     }
 
     config {
@@ -42,6 +73,14 @@ orbital PopoverOrbital {
         @label "Show Arrow"
         @description "Show arrow"
         @tier "presentation"
+      open : boolean
+        @label "Open"
+        @description "Controlled open state. When set, the host owns visibility and the popover reports intent through onOpenChange instead of toggling itself."
+        @tier "presentation"
+      onOpenChange : string = "OPEN_CHANGE"
+        @label "On Open Change"
+        @description "Fired when the popover wants to change visibility (trigger click, outside click)"
+        @tier "presentation"
       className : string
         @label "Class Name"
         @description "Additional CSS classes"

package/behaviors/lolo/ui/core/molecules/ui-table-view.lolo

@@ -66,6 +66,7 @@ orbital TableViewOrbital {
           fields: @config.fields
           itemActions: @config.itemActions
           maxInlineActions: @config.maxInlineActions
+          itemClickEvent: @config.itemClickEvent
           selectable: @config.selectable
           selectEvent: @config.selectEvent
           selectedIds: @config.selectedIds
@@ -96,6 +97,7 @@ orbital TableViewOrbital {
           fields: @config.fields
           itemActions: @config.itemActions
           maxInlineActions: @config.maxInlineActions
+          itemClickEvent: @config.itemClickEvent
           selectable: @config.selectable
           selectEvent: @config.selectEvent
           selectedIds: @config.selectedIds
@@ -114,6 +116,11 @@ orbital TableViewOrbital {
     }
 
     emits {
+      @config.itemClickEvent -> external {
+        id : string
+      }
+        @description "When set, the whole row is clickable and emits UI:{itemClickEvent} with { id, row } (action-button clicks stopPropagation so they still win). Mirrors DataList's contract."
+        @tier "essential"
       @config.selectEvent -> external {
         id : string
       }
@@ -184,6 +191,10 @@ orbital TableViewOrbital {
         @label "Max Inline Actions"
         @description "Max inline action buttons before the rest collapse into a '⋯' overflow menu. Omit = all inline."
         @tier "presentation"
+      itemClickEvent : string = "ITEM_CLICK"
+        @label "Item Click Event"
+        @description "When set, the whole row is clickable and emits UI:{itemClickEvent} with { id, row } (action-button clicks stopPropagation so they still win). Mirrors DataList's contract."
+        @tier "presentation"
       selectable : boolean = false
         @label "Selectable"
         @description "Render a leading checkbox column. Selection changes emit `selectEvent`."

package/behaviors/lolo/ui/game/atoms/ui-draw-group.lolo

@@ -0,0 +1,54 @@
+app ui-draw-group "1.0.0"
+"DrawGroup — UI factory (1:1 with the @almadar/ui draw-group pattern)."
+orbital DrawGroupOrbital {
+  type DrawGroupPosition = {
+    x : number!
+    y : number!
+    z : number
+  }
+
+  entity DrawGroupItem [runtime] {
+    id : string!
+  }
+
+  trait DrawGroupRender -> @rebindable DrawGroupItem [interaction, instance] {
+    initial: idle
+
+    state idle {
+      INIT -> idle
+        (render-ui main {
+          position: @config.position
+          scale: @config.scale
+          rotate: @config.rotate
+          opacity: @config.opacity
+          items: @config.items
+          type: draw-group
+        })
+    }
+
+    config {
+      position : DrawGroupPosition = { x: 1, y: 1, z: 1 }
+        @label "Position"
+        @description "Logical scene position; the projector maps it to pixels / world."
+        @tier "presentation"
+      scale : number
+        @label "Scale"
+        @description "Uniform scale applied to the whole group."
+        @tier "presentation"
+      rotate : number
+        @label "Rotate"
+        @description "Rotation in radians (painter units)."
+        @tier "presentation"
+      opacity : number
+        @label "Opacity"
+        @description "0..1 opacity."
+        @tier "presentation"
+      items : [json] = []
+        @label "Items"
+        @description "The grouped drawables, painted through the normal dispatch."
+        @tier "presentation"
+    }
+  }
+
+  page "/draw-group" as DrawGroupPage -> DrawGroupRender
+}

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

@@ -27,6 +27,7 @@ orbital DrawShapeOrbital {
           offsetX: @config.offsetX
           offsetY: @config.offsetY
           points: @config.points
+          d: @config.d
           fill: @config.fill
           stroke: @config.stroke
           strokeWidth: @config.strokeWidth
@@ -36,7 +37,7 @@ orbital DrawShapeOrbital {
     }
 
     config {
-      shape : "cell" | "rect" | "ellipse" | "poly" = cell
+      shape : "cell" | "rect" | "ellipse" | "poly" | "path" = cell
         @label "Shape"
         @description "shape prop"
         @tier "presentation"
@@ -76,6 +77,10 @@ orbital DrawShapeOrbital {
         @label "Points"
         @description "Poly vertices as world-unit offsets relative to the cell's projected top-left."
         @tier "presentation"
+      d : string
+        @label "D"
+        @description "SVG path data in world units relative to the cell's projected top-left — same coordinate convention as `points`."
+        @tier "presentation"
       fill : string
         @label "Fill"
         @description "fill prop"

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

@@ -61,11 +61,11 @@ orbital DrawSpriteOrbital {
         @tier "presentation"
       width : number
         @label "Width"
-        @description "Draw width in world units (fractions of `projector.tileWidth`); omitted → resolved source width in px."
+        @description "Draw width in world units (fractions of `projector.tileWidth`). Omitted → one cell on tile grids (`flat`/`iso`/`hex`); native source px on `free`/`side`."
         @tier "presentation"
       height : number
         @label "Height"
-        @description "Draw height in world units (fractions of `projector.tileWidth`); omitted → resolved source height in px."
+        @description "Draw height in world units (fractions of `projector.tileWidth`). Omitted → one cell on tile grids (`flat`/`iso`/`hex`); native source px on `free`/`side`."
         @tier "presentation"
       frame : json = {}
         @label "Frame"

package/behaviors/lolo/ui/game/atoms/ui-svg-draw-group.lolo

@@ -0,0 +1,58 @@
+app ui-svg-draw-group "1.0.0"
+"SvgDrawGroup — UI factory (1:1 with the @almadar/ui svg-draw-group pattern)."
+orbital SvgDrawGroupOrbital {
+  entity SvgDrawGroupItem [runtime] {
+    id : string!
+  }
+
+  trait SvgDrawGroupRender -> @rebindable SvgDrawGroupItem [interaction, instance] {
+    initial: idle
+
+    state idle {
+      INIT -> idle
+        (render-ui main {
+          x: @config.x
+          y: @config.y
+          scale: @config.scale
+          rotate: @config.rotate
+          opacity: @config.opacity
+          className: @config.className
+          children: @config.children
+          type: svg-draw-group
+        })
+    }
+
+    config {
+      x : number = 0
+        @label "X"
+        @description "Grid-cell x of the group's origin."
+        @tier "presentation"
+      y : number = 0
+        @label "Y"
+        @description "Grid-cell y of the group's origin."
+        @tier "presentation"
+      scale : number
+        @label "Scale"
+        @description "Uniform scale applied after the translate."
+        @tier "presentation"
+      rotate : number
+        @label "Rotate"
+        @description "Rotation in degrees applied after the translate."
+        @tier "presentation"
+      opacity : number
+        @label "Opacity"
+        @description "0..1 opacity."
+        @tier "presentation"
+      className : string
+        @label "Class Name"
+        @description "Additional CSS classes"
+        @tier "presentation"
+      children : node
+        @label "Children"
+        @description "children prop"
+        @tier "presentation"
+    }
+  }
+
+  page "/svg-draw-group" as SvgDrawGroupPage -> SvgDrawGroupRender
+}

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

@@ -0,0 +1,103 @@
+app ui-svg-draw-shape "1.0.0"
+"SvgDrawShape — UI factory (1:1 with the @almadar/ui svg-draw-shape pattern)."
+orbital SvgDrawShapeOrbital {
+  entity SvgDrawShapeItem [runtime] {
+    id : string!
+  }
+
+  trait SvgDrawShapeRender -> @rebindable SvgDrawShapeItem [interaction, instance] {
+    initial: idle
+
+    state idle {
+      INIT -> idle
+        (render-ui main {
+          shape: @config.shape
+          x: @config.x
+          y: @config.y
+          width: @config.width
+          height: @config.height
+          radius: @config.radius
+          radiusY: @config.radiusY
+          points: @config.points
+          d: @config.d
+          x2: @config.x2
+          y2: @config.y2
+          fill: @config.fill
+          stroke: @config.stroke
+          strokeWidth: @config.strokeWidth
+          opacity: @config.opacity
+          className: @config.className
+          type: svg-draw-shape
+        })
+    }
+
+    config {
+      shape : "rect" | "circle" | "ellipse" | "polygon" | "polyline" | "path" | "line" = rect
+        @label "Shape"
+        @description "shape prop"
+        @tier "presentation"
+      x : number = 1
+        @label "X"
+        @description "Grid-cell x of the element's translated origin."
+        @tier "presentation"
+      y : number = 1
+        @label "Y"
+        @description "Grid-cell y of the element's translated origin."
+        @tier "presentation"
+      width : number
+        @label "Width"
+        @description "Rect width in cell units."
+        @tier "presentation"
+      height : number
+        @label "Height"
+        @description "Rect height in cell units."
+        @tier "presentation"
+      radius : number
+        @label "Radius"
+        @description "Circle radius / ellipse horizontal radius in cell units."
+        @tier "presentation"
+      radiusY : number
+        @label "Radius Y"
+        @description "Ellipse vertical radius in cell units; omitted → `radius` (a circle)."
+        @tier "presentation"
+      points : string
+        @label "Points"
+        @description "Polygon/polyline points, viewBox units relative to the translated origin."
+        @tier "presentation"
+      d : string
+        @label "D"
+        @description "Path data, viewBox units relative to the translated origin."
+        @tier "presentation"
+      x2 : number
+        @label "X2"
+        @description "Line end x in cell units."
+        @tier "presentation"
+      y2 : number
+        @label "Y2"
+        @description "Line end y in cell units."
+        @tier "presentation"
+      fill : string
+        @label "Fill"
+        @description "fill prop"
+        @tier "presentation"
+      stroke : string
+        @label "Stroke"
+        @description "stroke prop"
+        @tier "presentation"
+      strokeWidth : number
+        @label "Stroke Width"
+        @description "strokeWidth prop"
+        @tier "presentation"
+      opacity : number
+        @label "Opacity"
+        @description "0..1 opacity."
+        @tier "presentation"
+      className : string
+        @label "Class Name"
+        @description "Additional CSS classes"
+        @tier "presentation"
+    }
+  }
+
+  page "/svg-draw-shape" as SvgDrawShapePage -> SvgDrawShapeRender
+}

package/behaviors/lolo/ui/game/atoms/ui-svg-draw-text.lolo

@@ -0,0 +1,58 @@
+app ui-svg-draw-text "1.0.0"
+"SvgDrawText — UI factory (1:1 with the @almadar/ui svg-draw-text pattern)."
+orbital SvgDrawTextOrbital {
+  entity SvgDrawTextItem [runtime] {
+    id : string!
+  }
+
+  trait SvgDrawTextRender -> @rebindable SvgDrawTextItem [interaction, instance] {
+    initial: idle
+
+    state idle {
+      INIT -> idle
+        (render-ui main {
+          x: @config.x
+          y: @config.y
+          text: @config.text
+          size: @config.size
+          fill: @config.fill
+          anchor: @config.anchor
+          className: @config.className
+          type: svg-draw-text
+        })
+    }
+
+    config {
+      x : number = 1
+        @label "X"
+        @description "Grid-cell x of the text anchor."
+        @tier "presentation"
+      y : number = 1
+        @label "Y"
+        @description "Grid-cell y of the text anchor."
+        @tier "presentation"
+      text : string = ""
+        @label "Text"
+        @description "The text content."
+        @tier "presentation"
+      size : number = 12
+        @label "Size"
+        @description "Font size in viewBox units (default 12)."
+        @tier "presentation"
+      fill : string = "var(--color-foreground)"
+        @label "Fill"
+        @description "fill prop"
+        @tier "presentation"
+      anchor : "start" | "middle" | "end" = middle
+        @label "Anchor"
+        @description "Text anchor (default 'middle')."
+        @tier "presentation"
+      className : string
+        @label "Class Name"
+        @description "Additional CSS classes"
+        @tier "presentation"
+    }
+  }
+
+  page "/svg-draw-text" as SvgDrawTextPage -> SvgDrawTextRender
+}

package/behaviors/lolo/ui/game/molecules/ui-canvas-2d.lolo

@@ -42,6 +42,8 @@ orbital Canvas2dOrbital {
           keyUpMap: @config.keyUpMap
           camera: @config.camera
           scale: @config.scale
+          tileWidth: @config.tileWidth
+          fit: @config.fit
           showMinimap: @config.showMinimap
           followTarget: @config.followTarget
           cameraPos: @config.cameraPos
@@ -130,7 +132,15 @@ orbital Canvas2dOrbital {
         @tier "presentation"
       scale : number = 0.4
         @label "Scale"
-        @description "Render scale (0.4 = 40% zoom). Ignored by `free`/`side` (world-pixel-direct)."
+        @description "Render scale, legacy-squared semantics: on-screen cell ≈ `256 × scale²` px (the authored contract every board tuned its value for). Converted internally to the single camera zoom against the board's native tile width, so the cell pitch follows the asset while the on-screen size stays as authored. Ignored when `fit` is on; passed through raw for `free`/`side` (world-pixel-direct)."
+        @tier "presentation"
+      tileWidth : number
+        @label "Tile Width"
+        @description "Native tile/cell width in source px for this board's asset (e.g. 16 for Kenney tiny-dungeon, ~128 for iso blocks). The grid cell pitch follows the asset, so tile textures map 1:1 (crisp, no stretch). Defaults to the detected atlas tile width, else 256."
+        @tier "presentation"
+      fit : boolean = false
+        @label "Fit"
+        @description "Auto-fit the board's grid extent to the viewport (default false — boards render at their authored `scale` and overflow → pan). Opt in for whole-board-overview boards. User wheel/pinch zoom always wins after the initial fit."
         @tier "presentation"
       showMinimap : boolean = true
         @label "Show Minimap"

package/behaviors/lolo/ui/game/molecules/ui-canvas.lolo

@@ -19,6 +19,8 @@ orbital CanvasOrbital {
           isLoading: @config.isLoading
           unitScale: @config.unitScale
           showMinimap: @config.showMinimap
+          fit: @config.fit
+          tileWidth: @config.tileWidth
           backgroundImage: @config.backgroundImage
           backgroundColor: @config.backgroundColor
           worldWidth: @config.worldWidth
@@ -104,6 +106,14 @@ orbital CanvasOrbital {
         @label "Show Minimap"
         @description "Minimap overlay (2D)."
         @tier "presentation"
+      fit : boolean
+        @label "Fit"
+        @description "Auto-fit the board's grid extent to the viewport (2D grid layouts; default false — boards render at their authored `camera.zoom` scale)."
+        @tier "presentation"
+      tileWidth : number
+        @label "Tile Width"
+        @description "Native tile/cell width in source px of the board's asset (2D grid layouts; defaults to the detected atlas tile width, else 256)."
+        @tier "presentation"
       backgroundImage : asset
         @label "Background Image"
         @description "Backdrop image (2D iso/hex/flat/free/side)."

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

@@ -3,7 +3,7 @@ app ui-draw-shape-layer "1.0.0"
 orbital DrawShapeLayerOrbital {
   type DrawShapeLayerItemsItem = {
     type : json!
-    shape : "cell" | "rect" | "ellipse" | "poly"!
+    shape : "cell" | "rect" | "ellipse" | "poly" | "path"!
     position : DrawShapeLayerItemsItemPosition!
     anchor : json
     width : number
@@ -13,6 +13,7 @@ orbital DrawShapeLayerOrbital {
     offsetX : number
     offsetY : number
     points : [json]
+    d : string
     fill : string
     stroke : string
     strokeWidth : number
@@ -40,7 +41,7 @@ orbital DrawShapeLayerOrbital {
     }
 
     config {
-      items : [DrawShapeLayerItemsItem] = [{ type: "Type", shape: cell, position: { x: 1, y: 1, z: 1 }, width: 1, height: 1, radiusX: 1, radiusY: 1, offsetX: 1, offsetY: 1, points: [], fill: "Fill", stroke: "Stroke", strokeWidth: 1, opacity: 1 }, { type: "Type 2", shape: rect, position: { x: 2, y: 2, z: 2 }, width: 2, height: 2, radiusX: 2, radiusY: 2, offsetX: 2, offsetY: 2, points: [], fill: "Fill 2", stroke: "Stroke 2", strokeWidth: 2, opacity: 2 }]
+      items : [DrawShapeLayerItemsItem] = [{ type: "Type", shape: cell, position: { x: 1, y: 1, z: 1 }, width: 1, height: 1, radiusX: 1, radiusY: 1, offsetX: 1, offsetY: 1, points: [], d: "D", fill: "Fill", stroke: "Stroke", strokeWidth: 1, opacity: 1 }, { type: "Type 2", shape: rect, position: { x: 2, y: 2, z: 2 }, width: 2, height: 2, radiusX: 2, radiusY: 2, offsetX: 2, offsetY: 2, points: [], d: "D 2", fill: "Fill 2", stroke: "Stroke 2", strokeWidth: 2, opacity: 2 }]
         @label "Items"
         @description "items prop"
         @tier "presentation"