@almadar/std 16.152.0 → 16.154.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

@@ -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

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-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/molecules/std-crew-board-2d.lolo

@@ -123,11 +123,11 @@ orbital CrewBoard2DOrbital {
           hud: { type: stack, direction: horizontal, gap: md, justify: between, children: [ { type: game-hud, stats: [ { label: "Crew", value: @entity.crewCount, iconUrl: @config.crewIcon }, { label: "Oxygen", value: @entity.oxygen, iconUrl: @config.oxygenIcon } ] }, { type: stack, direction: horizontal, gap: xs, align: center, children: [ { type: typography, variant: caption, content: "Status" }, { type: badge, label: @entity.phase, variant: (if (== @entity.phase "movement") "info" "neutral") } ] }, { type: timer-display, value: @entity.oxygen, label: "O2" }, { type: button, action: CANCEL, label: "Cancel", iconAsset: @config.cancelIcon, variant: secondary } ] }
           children: [ { type: canvas, camera: { zoom: (math/min 1 (/ 5 (+ 1 (math/max (array/max @entity.tiles "x") (array/max @entity.tiles "y"))))), pos: { x: (/ (+ (array/min @entity.tiles "x") (array/max @entity.tiles "x")) 2), y: (/ (+ (array/min @entity.tiles "y") (array/max @entity.tiles "y")) 2) } }, projection: @config.projection, showMinimap: @config.showMinimap, tileClickEvent: TILE_CLICK, unitClickEvent: UNIT_CLICK, children: [
             { type: draw-shape-layer, items: (array/map @entity.tiles (fn t { type: draw-shape, shape: "cell", position: { x: (object/get @t x), y: (object/get @t y) }, fill: "#5c94fc", stroke: "rgba(255,255,255,0.35)", strokeWidth: 1 })) }
-            { type: draw-sprite-layer, items: (array/map @entity.tiles (fn t { type: draw-sprite, position: { x: (object/get @t x), y: (object/get @t y) }, asset: (if (object/get (object/get @t terrainSprite) url) (object/get @t terrainSprite) (object/get (object/get @config.assetManifest terrains) (object/get @t terrain))), anchor: "center", width: 0.5, height: 0.5 })) }
+            { type: draw-sprite-layer, items: (array/map @entity.tiles (fn t { type: draw-sprite, position: { x: (object/get @t x), y: (object/get @t y) }, asset: (if (object/get (object/get @t terrainSprite) url) (object/get @t terrainSprite) (object/get (object/get @config.assetManifest terrains) (object/get @t terrain))), anchor: "center", width: 1, height: 1 })) }
             { type: draw-sprite-layer, items: (array/map @config.features (fn f { type: draw-sprite, position: { x: (object/get @f x), y: (object/get @f y) }, asset: (object/get @f assetUrl) })) }
             { type: draw-shape-layer, items: (array/map @entity.validMoves (fn m { type: draw-shape, shape: "cell", position: { x: (object/get @m x), y: (object/get @m z) }, fill: "rgba(74,222,128,0.4)" })) }
             { type: draw-shape-layer, items: (array/map (array/filter @entity.units (fn u (== (object/get @u id) @entity.selectedUnitId))) (fn u { type: draw-shape, shape: "ellipse", position: (object/get @u position), radiusX: 0.5, radiusY: 0.2, stroke: "rgba(0,200,255,0.8)", strokeWidth: 3 })) }
-            { type: draw-sprite-layer, items: (array/map @entity.units (fn u { type: draw-sprite, position: (object/get @u position), asset: (if (object/get (object/get @u modelUrl) url) (object/get @u modelUrl) (object/get (object/get @config.assetManifest units) (object/get @u unitType))), id: (object/get @u id), anchor: "ground", width: 0.5, height: 0.5 })) }
+            { type: draw-sprite-layer, items: (array/map @entity.units (fn u { type: draw-sprite, position: (object/get @u position), asset: (if (object/get (object/get @u modelUrl) url) (object/get @u modelUrl) (object/get (object/get @config.assetManifest units) (object/get @u unitType))), id: (object/get @u id), anchor: "ground", width: 1, height: 1 })) }
             { type: draw-shape-layer, items: (array/map @entity.units (fn u { type: draw-shape, shape: "rect", position: (object/get @u position), anchor: "ground", offsetX: -0.25, offsetY: -0.6, width: 0.5, height: 0.12, fill: "rgba(0,0,0,0.6)" })) }
             { type: draw-shape-layer, items: (array/map @entity.units (fn u { type: draw-shape, shape: "rect", position: (object/get @u position), anchor: "ground", offsetX: -0.25, offsetY: -0.6, width: (* 0.5 (/ (object/get @u health) (object/get @u maxHealth))), height: 0.12, fill: "#22c55e" })) }
             { type: draw-text-layer, items: (array/map @entity.units (fn u { type: draw-text, text: (object/get @u name), position: (object/get @u position), offsetY: -0.85, color: "#ffffff" })) }
@@ -166,11 +166,11 @@ orbital CrewBoard2DOrbital {
           hud: { type: stack, direction: horizontal, gap: md, justify: between, children: [ { type: game-hud, stats: [ { label: "Crew", value: @entity.crewCount, iconUrl: @config.crewIcon }, { label: "Oxygen", value: @entity.oxygen, iconUrl: @config.oxygenIcon } ] }, { type: stack, direction: horizontal, gap: xs, align: center, children: [ { type: typography, variant: caption, content: "Status" }, { type: badge, label: @entity.phase, variant: (if (== @entity.phase "movement") "info" "neutral") } ] }, { type: timer-display, value: @entity.oxygen, label: "O2" }, { type: button, action: CANCEL, label: "Cancel", iconAsset: @config.cancelIcon, variant: secondary } ] }
           children: [ { type: canvas, camera: { zoom: (math/min 1 (/ 5 (+ 1 (math/max (array/max @entity.tiles "x") (array/max @entity.tiles "y"))))), pos: { x: (/ (+ (array/min @entity.tiles "x") (array/max @entity.tiles "x")) 2), y: (/ (+ (array/min @entity.tiles "y") (array/max @entity.tiles "y")) 2) } }, projection: @config.projection, showMinimap: @config.showMinimap, tileClickEvent: TILE_CLICK, unitClickEvent: UNIT_CLICK, children: [
             { type: draw-shape-layer, items: (array/map @entity.tiles (fn t { type: draw-shape, shape: "cell", position: { x: (object/get @t x), y: (object/get @t y) }, fill: "#5c94fc", stroke: "rgba(255,255,255,0.35)", strokeWidth: 1 })) }
-            { type: draw-sprite-layer, items: (array/map @entity.tiles (fn t { type: draw-sprite, position: { x: (object/get @t x), y: (object/get @t y) }, asset: (if (object/get (object/get @t terrainSprite) url) (object/get @t terrainSprite) (object/get (object/get @config.assetManifest terrains) (object/get @t terrain))), anchor: "center", width: 0.5, height: 0.5 })) }
+            { type: draw-sprite-layer, items: (array/map @entity.tiles (fn t { type: draw-sprite, position: { x: (object/get @t x), y: (object/get @t y) }, asset: (if (object/get (object/get @t terrainSprite) url) (object/get @t terrainSprite) (object/get (object/get @config.assetManifest terrains) (object/get @t terrain))), anchor: "center", width: 1, height: 1 })) }
             { type: draw-sprite-layer, items: (array/map @config.features (fn f { type: draw-sprite, position: { x: (object/get @f x), y: (object/get @f y) }, asset: (object/get @f assetUrl) })) }
             { type: draw-shape-layer, items: (array/map @entity.validMoves (fn m { type: draw-shape, shape: "cell", position: { x: (object/get @m x), y: (object/get @m z) }, fill: "rgba(74,222,128,0.4)" })) }
             { type: draw-shape-layer, items: (array/map (array/filter @entity.units (fn u (== (object/get @u id) @entity.selectedUnitId))) (fn u { type: draw-shape, shape: "ellipse", position: (object/get @u position), radiusX: 0.5, radiusY: 0.2, stroke: "rgba(0,200,255,0.8)", strokeWidth: 3 })) }
-            { type: draw-sprite-layer, items: (array/map @entity.units (fn u { type: draw-sprite, position: (object/get @u position), asset: (if (object/get (object/get @u modelUrl) url) (object/get @u modelUrl) (object/get (object/get @config.assetManifest units) (object/get @u unitType))), id: (object/get @u id), anchor: "ground", width: 0.5, height: 0.5 })) }
+            { type: draw-sprite-layer, items: (array/map @entity.units (fn u { type: draw-sprite, position: (object/get @u position), asset: (if (object/get (object/get @u modelUrl) url) (object/get @u modelUrl) (object/get (object/get @config.assetManifest units) (object/get @u unitType))), id: (object/get @u id), anchor: "ground", width: 1, height: 1 })) }
             { type: draw-shape-layer, items: (array/map @entity.units (fn u { type: draw-shape, shape: "rect", position: (object/get @u position), anchor: "ground", offsetX: -0.25, offsetY: -0.6, width: 0.5, height: 0.12, fill: "rgba(0,0,0,0.6)" })) }
             { type: draw-shape-layer, items: (array/map @entity.units (fn u { type: draw-shape, shape: "rect", position: (object/get @u position), anchor: "ground", offsetX: -0.25, offsetY: -0.6, width: (* 0.5 (/ (object/get @u health) (object/get @u maxHealth))), height: 0.12, fill: "#22c55e" })) }
             { type: draw-text-layer, items: (array/map @entity.units (fn u { type: draw-text, text: (object/get @u name), position: (object/get @u position), offsetY: -0.85, color: "#ffffff" })) }

package/behaviors/lolo/ui/game/molecules/std-dungeon-board-2d.lolo

@@ -195,11 +195,11 @@ orbital DungeonBoard2DOrbital {
           hud: { type: game-hud, stats: [ { label: "HP", value: @entity.hp, max: @entity.maxHp, format: "hearts" }, { label: "Score", value: (+ @entity.score @entity.combatScore) } ] }
           controls: { type: control-grid, kind: "dpad", directionEvents: { up: "MOVE_UP", down: "MOVE_DOWN", left: "MOVE_LEFT", right: "MOVE_RIGHT" }, directionAssets: @config.directionAssets }
           overlay: (if (!= @entity.result "none") { type: game-menu, title: "VICTORY", subtitle: "You found the chest!", options: [ { id: "again", label: "Play Again", event: "PLAY_AGAIN", variant: "primary" } ] } (if (!= @entity.combatResult "none") { type: game-menu, title: "DEFEAT", subtitle: "The dungeon claims another hero", options: [ { id: "again", label: "Play Again", event: "PLAY_AGAIN", variant: "primary" } ] } null))
-          children: [ { type: canvas, camera: { zoom: @config.scale }, projection: "flat", showMinimap: false, keyMap: { ArrowUp: "MOVE_UP", KeyW: "MOVE_UP", ArrowDown: "MOVE_DOWN", KeyS: "MOVE_DOWN", ArrowLeft: "MOVE_LEFT", KeyA: "MOVE_LEFT", ArrowRight: "MOVE_RIGHT", KeyD: "MOVE_RIGHT" }, children: [
+          children: [ { type: canvas, fit: true, camera: { zoom: @config.scale }, projection: "flat", showMinimap: false, keyMap: { ArrowUp: "MOVE_UP", KeyW: "MOVE_UP", ArrowDown: "MOVE_DOWN", KeyS: "MOVE_DOWN", ArrowLeft: "MOVE_LEFT", KeyA: "MOVE_LEFT", ArrowRight: "MOVE_RIGHT", KeyD: "MOVE_RIGHT" }, children: [
             { type: draw-shape-layer, items: (array/map @entity.tiles (fn t { type: draw-shape, shape: "cell", position: { x: (object/get @t x), y: (object/get @t y) }, fill: "#5c94fc" })) }
-            { type: draw-sprite-layer, items: (array/map @entity.tiles (fn t { type: draw-sprite, position: { x: (object/get @t x), y: (object/get @t y) }, asset: (if (object/get (object/get @t terrainSprite) url) (object/get @t terrainSprite) (object/get (object/get @config.assetManifest terrains) (object/get @t terrain))), anchor: "center", width: 0.5, height: 0.5 })) }
+            { type: draw-sprite-layer, items: (array/map @entity.tiles (fn t { type: draw-sprite, position: { x: (object/get @t x), y: (object/get @t y) }, asset: (if (object/get (object/get @t terrainSprite) url) (object/get @t terrainSprite) (object/get (object/get @config.assetManifest terrains) (object/get @t terrain))), anchor: "center", width: 1, height: 1 })) }
             { type: draw-sprite-layer, items: (array/map @entity.features (fn f { type: draw-sprite, position: { x: (object/get @f x), y: (object/get @f y) }, asset: (object/get @f sprite) })) }
-            { type: draw-sprite-layer, items: (array/map (array/concat @entity.units @entity.enemies) (fn u { type: draw-sprite, position: (object/get @u position), asset: (if (object/get (object/get @u sprite) url) (object/get @u sprite) (object/get (object/get @config.assetManifest units) (object/get @u unitType))), anchor: "ground", width: 0.5, height: 0.5 })) }
+            { type: draw-sprite-layer, items: (array/map (array/concat @entity.units @entity.enemies) (fn u { type: draw-sprite, position: (object/get @u position), asset: (if (object/get (object/get @u sprite) url) (object/get @u sprite) (object/get (object/get @config.assetManifest units) (object/get @u unitType))), anchor: "ground", width: 1, height: 1 })) }
             { type: draw-shape-layer, items: (array/map (array/concat @entity.units @entity.enemies) (fn u { type: draw-shape, shape: "rect", position: (object/get @u position), anchor: "ground", offsetX: -0.25, offsetY: -0.6, width: 0.5, height: 0.12, fill: "rgba(0,0,0,0.6)" })) }
             { type: draw-shape-layer, items: (array/map (array/concat @entity.units @entity.enemies) (fn u { type: draw-shape, shape: "rect", position: (object/get @u position), anchor: "ground", offsetX: -0.25, offsetY: -0.6, width: (* 0.5 (/ (object/get @u health) (object/get @u maxHealth))), height: 0.12, fill: "#22c55e" })) }
             { type: draw-text-layer, items: (array/map (array/concat @entity.units @entity.enemies) (fn u { type: draw-text, text: (object/get @u name), position: (object/get @u position), offsetY: -0.85, color: "#ffffff" })) }
@@ -261,11 +261,11 @@ orbital DungeonBoard2DOrbital {
           hud: { type: game-hud, stats: [ { label: "HP", value: @entity.hp, max: @entity.maxHp, format: "hearts" }, { label: "Score", value: (+ @entity.score @entity.combatScore) } ] }
           controls: { type: control-grid, kind: "dpad", directionEvents: { up: "MOVE_UP", down: "MOVE_DOWN", left: "MOVE_LEFT", right: "MOVE_RIGHT" }, directionAssets: @config.directionAssets }
           overlay: (if (!= @entity.result "none") { type: game-menu, title: "VICTORY", subtitle: "You found the chest!", options: [ { id: "again", label: "Play Again", event: "PLAY_AGAIN", variant: "primary" } ] } (if (!= @entity.combatResult "none") { type: game-menu, title: "DEFEAT", subtitle: "The dungeon claims another hero", options: [ { id: "again", label: "Play Again", event: "PLAY_AGAIN", variant: "primary" } ] } null))
-          children: [ { type: canvas, camera: { zoom: @config.scale }, projection: "flat", showMinimap: false, keyMap: { ArrowUp: "MOVE_UP", KeyW: "MOVE_UP", ArrowDown: "MOVE_DOWN", KeyS: "MOVE_DOWN", ArrowLeft: "MOVE_LEFT", KeyA: "MOVE_LEFT", ArrowRight: "MOVE_RIGHT", KeyD: "MOVE_RIGHT" }, children: [
+          children: [ { type: canvas, fit: true, camera: { zoom: @config.scale }, projection: "flat", showMinimap: false, keyMap: { ArrowUp: "MOVE_UP", KeyW: "MOVE_UP", ArrowDown: "MOVE_DOWN", KeyS: "MOVE_DOWN", ArrowLeft: "MOVE_LEFT", KeyA: "MOVE_LEFT", ArrowRight: "MOVE_RIGHT", KeyD: "MOVE_RIGHT" }, children: [
             { type: draw-shape-layer, items: (array/map @entity.tiles (fn t { type: draw-shape, shape: "cell", position: { x: (object/get @t x), y: (object/get @t y) }, fill: "#5c94fc" })) }
-            { type: draw-sprite-layer, items: (array/map @entity.tiles (fn t { type: draw-sprite, position: { x: (object/get @t x), y: (object/get @t y) }, asset: (if (object/get (object/get @t terrainSprite) url) (object/get @t terrainSprite) (object/get (object/get @config.assetManifest terrains) (object/get @t terrain))), anchor: "center", width: 0.5, height: 0.5 })) }
+            { type: draw-sprite-layer, items: (array/map @entity.tiles (fn t { type: draw-sprite, position: { x: (object/get @t x), y: (object/get @t y) }, asset: (if (object/get (object/get @t terrainSprite) url) (object/get @t terrainSprite) (object/get (object/get @config.assetManifest terrains) (object/get @t terrain))), anchor: "center", width: 1, height: 1 })) }
             { type: draw-sprite-layer, items: (array/map @entity.features (fn f { type: draw-sprite, position: { x: (object/get @f x), y: (object/get @f y) }, asset: (object/get @f sprite) })) }
-            { type: draw-sprite-layer, items: (array/map (array/concat @entity.units @entity.enemies) (fn u { type: draw-sprite, position: (object/get @u position), asset: (if (object/get (object/get @u sprite) url) (object/get @u sprite) (object/get (object/get @config.assetManifest units) (object/get @u unitType))), anchor: "ground", width: 0.5, height: 0.5 })) }
+            { type: draw-sprite-layer, items: (array/map (array/concat @entity.units @entity.enemies) (fn u { type: draw-sprite, position: (object/get @u position), asset: (if (object/get (object/get @u sprite) url) (object/get @u sprite) (object/get (object/get @config.assetManifest units) (object/get @u unitType))), anchor: "ground", width: 1, height: 1 })) }
             { type: draw-shape-layer, items: (array/map (array/concat @entity.units @entity.enemies) (fn u { type: draw-shape, shape: "rect", position: (object/get @u position), anchor: "ground", offsetX: -0.25, offsetY: -0.6, width: 0.5, height: 0.12, fill: "rgba(0,0,0,0.6)" })) }
             { type: draw-shape-layer, items: (array/map (array/concat @entity.units @entity.enemies) (fn u { type: draw-shape, shape: "rect", position: (object/get @u position), anchor: "ground", offsetX: -0.25, offsetY: -0.6, width: (* 0.5 (/ (object/get @u health) (object/get @u maxHealth))), height: 0.12, fill: "#22c55e" })) }
             { type: draw-text-layer, items: (array/map (array/concat @entity.units @entity.enemies) (fn u { type: draw-text, text: (object/get @u name), position: (object/get @u position), offsetY: -0.85, color: "#ffffff" })) }

package/behaviors/lolo/ui/game/molecules/std-tactics-board-2d.lolo

@@ -5,6 +5,7 @@ orbital TacticsBoard2DOrbital {
   uses Particles from "std/behaviors/std-fx-particles"
   uses Round from "std/behaviors/std-round-flow"
   uses Score from "std/behaviors/std-score"
+  uses AnimTick from "std/behaviors/std-anim-tick"
 
   type Asset = {
     url : asset
@@ -100,6 +101,13 @@ orbital TacticsBoard2DOrbital {
     turn : number = 0
     score : number = 0
     scoreBaseline : number = 0
+    animCounter : number = 0
+    frameName : string = "0"
+    animUnitId : string = ""
+    animState : string = "idle"
+    animTicksLeft : number = 0
+    animAttackerId : string = ""
+    animAtkTicksLeft : number = 0
   }
 
   trait TacticsAuthority = Tactics.traits.GridTactics -> GameState {
@@ -133,6 +141,10 @@ orbital TacticsBoard2DOrbital {
     config { running: true, pointsPerKill: 10, startScore: 0, initialEnemies: 0 }
   }
 
+  trait AnimClock = AnimTick.traits.AnimTick -> GameState {
+    config { frames: [] }
+  }
+
   trait PlayerIntent -> GameState [interaction, instance] {
     initial: playing
 
@@ -149,23 +161,27 @@ orbital TacticsBoard2DOrbital {
           hudBackgroundAsset: @config.hudBackgroundAsset
           hud: { type: game-hud, stats: (array/concat [ { label: "Result", value: @entity.result }, { label: "Phase", value: @entity.uiPhase }, { label: "Turn", value: @entity.turn }, { label: "Score", value: @entity.score } ] @config.extraStats) }
           addons: { type: stack, direction: vertical, gap: sm, children: (array/concat [ { type: button, action: END_TURN, label: "End Turn", variant: primary }, { type: button, action: CANCEL, label: "Cancel", variant: secondary } ] @config.extraAddons) }
-          children: [ { type: canvas, camera: { zoom: (math/min 1 (/ 5 (+ 1 (math/max (array/max @entity.tiles "x") (array/max @entity.tiles "y"))))), pos: { x: (/ (+ (array/min @entity.tiles "x") (array/max @entity.tiles "x")) 2), y: (/ (+ (array/min @entity.tiles "y") (array/max @entity.tiles "y")) 2) } }, projection: @config.projection, showMinimap: @config.showMinimap, tileClickEvent: TILE_CLICK, unitClickEvent: UNIT_CLICK, children: [
+          children: [ { type: canvas, fit: true, camera: { pos: { x: (/ (+ (array/min @entity.tiles "x") (array/max @entity.tiles "x")) 2), y: (/ (+ (array/min @entity.tiles "y") (array/max @entity.tiles "y")) 2) } }, projection: @config.projection, showMinimap: @config.showMinimap, tileClickEvent: TILE_CLICK, unitClickEvent: UNIT_CLICK, children: [
             { type: draw-shape-layer, items: (array/map @entity.tiles (fn t { type: draw-shape, shape: "cell", position: { x: (object/get @t x), y: (object/get @t y) }, fill: "#5c94fc", stroke: "rgba(255,255,255,0.35)", strokeWidth: 1 })) }
-            { type: draw-sprite-layer, items: (array/filter (array/map @entity.tiles (fn t { type: draw-sprite, position: { x: (object/get @t x), y: (object/get @t y) }, asset: (if (object/get (object/get @t terrainSprite) url) (object/get @t terrainSprite) (object/get (object/get @config.assetManifest terrains) (object/get @t terrain))), anchor: "center", width: 0.5, height: 0.5 })) (fn s (object/get (object/get @s asset) url))) }
+            { type: draw-sprite-layer, items: (array/filter (array/map @entity.tiles (fn t { type: draw-sprite, position: { x: (object/get @t x), y: (object/get @t y) }, asset: (if (object/get (object/get @t terrainSprite) url) (object/get @t terrainSprite) (object/get (object/get @config.assetManifest terrains) (object/get @t terrain))), anchor: "center", width: 1, height: 1 })) (fn s (object/get (object/get @s asset) url))) }
             { type: draw-sprite-layer, items: (array/filter (array/map @config.features (fn f { type: draw-sprite, position: { x: (object/get @f x), y: (object/get @f y) }, asset: (object/get @f assetUrl) })) (fn s (object/get (object/get @s asset) url))) }
             { type: draw-shape-layer, items: (array/map @entity.validMoves (fn m { type: draw-shape, shape: "cell", position: { x: (object/get @m x), y: (object/get @m z) }, fill: "rgba(74,222,128,0.4)" })) }
             { type: draw-shape-layer, items: (array/map @entity.attackTargets (fn a { type: draw-shape, shape: "cell", position: { x: (object/get @a x), y: (object/get @a z) }, fill: "rgba(239,68,68,0.4)" })) }
             { type: draw-shape-layer, items: (array/map (array/filter @entity.units (fn u (== (object/get @u id) @entity.selectedUnitId))) (fn u { type: draw-shape, shape: "ellipse", position: (object/get @u position), radiusX: 0.5, radiusY: 0.2, stroke: "rgba(0,200,255,0.8)", strokeWidth: 3 })) }
-            { type: draw-sprite-layer, items: (array/filter (array/map @entity.units (fn u { type: draw-sprite, position: (object/get @u position), asset: (if (object/get (object/get @u modelUrl) url) (object/get @u modelUrl) (object/get (object/get @config.assetManifest units) (object/get @u unitType))), id: (object/get @u id), anchor: "ground", width: 0.5, height: 0.5 })) (fn s (object/get (object/get @s asset) url))) }
+            { type: draw-sprite-layer, items: (array/filter (array/map @entity.units (fn u (let ((unitAsset (if (object/get (object/get @u modelUrl) url) (object/get @u modelUrl) (object/get (object/get @config.assetManifest units) (object/get @u unitType)))) (unitUrl (object/get @unitAsset url)) (unitAnim (if (<= (object/get @u health) 0) "death" (if (and (== (object/get @u id) @entity.animAttackerId) (> @entity.animAtkTicksLeft 0)) "attack" (if (== (object/get @u id) @entity.animUnitId) @entity.animState "idle"))))) { type: draw-sprite, position: (object/get @u position), asset: (if (and @unitUrl (str/includes @unitUrl ".svg")) (object/merge @unitAsset { url: (str/concat (array/nth (str/split @unitUrl ".svg") 0) (str/concat "." (str/concat @unitAnim (str/concat "-" (str/concat (if (== @unitAnim "walk") (% @entity.animCounter 2) (if (== @unitAnim "idle") (% (math/floor (/ @entity.animCounter 3)) 4) 0))) ".svg")))) }) @unitAsset), id: (object/get @u id), anchor: "ground", width: 0.5, height: 0.5 }))) (fn s (object/get (object/get @s asset) url))) }
             { type: draw-shape-layer, items: (array/map @entity.units (fn u { type: draw-shape, shape: "rect", position: (object/get @u position), anchor: "ground", offsetX: -0.25, offsetY: -0.6, width: 0.5, height: 0.12, fill: "rgba(0,0,0,0.6)" })) }
             { type: draw-shape-layer, items: (array/map @entity.units (fn u { type: draw-shape, shape: "rect", position: (object/get @u position), anchor: "ground", offsetX: -0.25, offsetY: -0.6, width: (* 0.5 (/ (object/get @u health) (object/get @u maxHealth))), height: 0.12, fill: "#22c55e" })) }
             { type: draw-text-layer, items: (array/map @entity.units (fn u { type: draw-text, text: (object/get @u name), position: (object/get @u position), offsetY: -0.85, color: "#ffffff" })) }
-            { type: draw-text-layer, items: (array/map @entity.fx (fn f { type: draw-text, text: (object/get @f message), position: { x: (object/get @f x), y: (object/get @f y) }, color: "#ffe066" })) }
+            { type: draw-text-layer, items: (array/map @entity.fx (fn f { type: draw-text, text: (object/get @f message), position: { x: (object/get @f x), y: (object/get @f z) }, color: "#ffe066" })) }
+            { type: draw-sprite-layer, items: (array/filter (array/map @entity.fx (fn f { type: draw-sprite, position: { x: (object/get @f x), y: (object/get @f z) }, asset: (object/get (object/get @config.assetManifest effects) (object/get @f type)), anchor: "center", width: 0.6, height: 0.6 })) (fn s (object/get (object/get @s asset) url))) }
+            { type: draw-sprite-layer, items: (array/map (array/filter (array/flatten (array/map @entity.units (fn u (array/flatten (array/map [ ["idle", 4], ["walk", 2], ["attack", 1], ["hit", 1], ["death", 1] ] (fn st (array/map (array/range 0 (array/nth @st 1)) (fn i (if (and (object/get (object/get @u modelUrl) url) (str/includes (object/get (object/get @u modelUrl) url) ".svg")) (str/concat (array/nth (str/split (object/get (object/get @u modelUrl) url) ".svg") 0) (str/concat "." (str/concat (array/nth @st 0) (str/concat "-" (str/concat @i ".svg"))))) ""))))))))) (fn w (!= @w ""))) (fn warmUrl { type: draw-sprite, position: { x: 0, y: 0 }, asset: { url: @warmUrl }, opacity: 0, width: 0.5, height: 0.5 })) }
           ] } ]
         })
 
       UNIT_CLICK -> playing when (and (== @entity.uiPhase "action") (and (== (object/get (array/find @entity.units (fn u (== @u.id ?unitId))) team) "enemy") (<= (grid/manhattan-distance (object/get (array/find @entity.units (fn u (== @u.id @entity.selectedUnitId))) position) (object/get (array/find @entity.units (fn u (== @u.id ?unitId))) position)) 1)))
         (emit ATTACK { targetId: ?unitId })
+        (set @entity.animAttackerId @entity.selectedUnitId)
+        (set @entity.animAtkTicksLeft 4)
         (set @entity.selectedUnitId "")
         (set @entity.validMoves [])
         (set @entity.attackTargets [])
@@ -198,28 +214,44 @@ orbital TacticsBoard2DOrbital {
       END_TURN -> playing when (== @entity.result "none")
         (set @entity.turn (+ @entity.turn 1))
         (emit AI_TURN { turn: @entity.turn })
+
+      MOVE -> playing
+        (set @entity.animUnitId ?unitId)
+        (set @entity.animState "walk")
+        (set @entity.animTicksLeft 6)
+
+      ATTACK -> playing
+        (set @entity.animUnitId ?targetId)
+        (set @entity.animState "hit")
+        (set @entity.animTicksLeft 4)
     }
 
     ticks {
       renderTick every 100ms
+        (set @entity.animTicksLeft (if (> @entity.animTicksLeft 0) (- @entity.animTicksLeft 1) 0))
+        (set @entity.animAtkTicksLeft (if (> @entity.animAtkTicksLeft 0) (- @entity.animAtkTicksLeft 1) 0))
+        (set @entity.animState (if (== @entity.animTicksLeft 0) "idle" @entity.animState))
+        (set @entity.animUnitId (if (== @entity.animTicksLeft 0) "" @entity.animUnitId))
+        (set @entity.animAttackerId (if (== @entity.animAtkTicksLeft 0) "" @entity.animAttackerId))
         (render-ui main {
           type: game-shell
           backgroundAsset: @config.backgroundAsset
           hudBackgroundAsset: @config.hudBackgroundAsset
           hud: { type: game-hud, stats: (array/concat [ { label: "Result", value: @entity.result }, { label: "Phase", value: @entity.uiPhase }, { label: "Turn", value: @entity.turn }, { label: "Score", value: @entity.score } ] @config.extraStats) }
           addons: { type: stack, direction: vertical, gap: sm, children: (array/concat [ { type: button, action: END_TURN, label: "End Turn", variant: primary }, { type: button, action: CANCEL, label: "Cancel", variant: secondary } ] @config.extraAddons) }
-          children: [ { type: canvas, camera: { zoom: (math/min 1 (/ 5 (+ 1 (math/max (array/max @entity.tiles "x") (array/max @entity.tiles "y"))))), pos: { x: (/ (+ (array/min @entity.tiles "x") (array/max @entity.tiles "x")) 2), y: (/ (+ (array/min @entity.tiles "y") (array/max @entity.tiles "y")) 2) } }, projection: @config.projection, showMinimap: @config.showMinimap, tileClickEvent: TILE_CLICK, unitClickEvent: UNIT_CLICK, children: [
+          children: [ { type: canvas, fit: true, camera: { pos: { x: (/ (+ (array/min @entity.tiles "x") (array/max @entity.tiles "x")) 2), y: (/ (+ (array/min @entity.tiles "y") (array/max @entity.tiles "y")) 2) } }, projection: @config.projection, showMinimap: @config.showMinimap, tileClickEvent: TILE_CLICK, unitClickEvent: UNIT_CLICK, children: [
             { type: draw-shape-layer, items: (array/map @entity.tiles (fn t { type: draw-shape, shape: "cell", position: { x: (object/get @t x), y: (object/get @t y) }, fill: "#5c94fc", stroke: "rgba(255,255,255,0.35)", strokeWidth: 1 })) }
-            { type: draw-sprite-layer, items: (array/filter (array/map @entity.tiles (fn t { type: draw-sprite, position: { x: (object/get @t x), y: (object/get @t y) }, asset: (if (object/get (object/get @t terrainSprite) url) (object/get @t terrainSprite) (object/get (object/get @config.assetManifest terrains) (object/get @t terrain))), anchor: "center", width: 0.5, height: 0.5 })) (fn s (object/get (object/get @s asset) url))) }
+            { type: draw-sprite-layer, items: (array/filter (array/map @entity.tiles (fn t { type: draw-sprite, position: { x: (object/get @t x), y: (object/get @t y) }, asset: (if (object/get (object/get @t terrainSprite) url) (object/get @t terrainSprite) (object/get (object/get @config.assetManifest terrains) (object/get @t terrain))), anchor: "center", width: 1, height: 1 })) (fn s (object/get (object/get @s asset) url))) }
             { type: draw-sprite-layer, items: (array/filter (array/map @config.features (fn f { type: draw-sprite, position: { x: (object/get @f x), y: (object/get @f y) }, asset: (object/get @f assetUrl) })) (fn s (object/get (object/get @s asset) url))) }
             { type: draw-shape-layer, items: (array/map @entity.validMoves (fn m { type: draw-shape, shape: "cell", position: { x: (object/get @m x), y: (object/get @m z) }, fill: "rgba(74,222,128,0.4)" })) }
             { type: draw-shape-layer, items: (array/map @entity.attackTargets (fn a { type: draw-shape, shape: "cell", position: { x: (object/get @a x), y: (object/get @a z) }, fill: "rgba(239,68,68,0.4)" })) }
             { type: draw-shape-layer, items: (array/map (array/filter @entity.units (fn u (== (object/get @u id) @entity.selectedUnitId))) (fn u { type: draw-shape, shape: "ellipse", position: (object/get @u position), radiusX: 0.5, radiusY: 0.2, stroke: "rgba(0,200,255,0.8)", strokeWidth: 3 })) }
-            { type: draw-sprite-layer, items: (array/filter (array/map @entity.units (fn u { type: draw-sprite, position: (object/get @u position), asset: (if (object/get (object/get @u modelUrl) url) (object/get @u modelUrl) (object/get (object/get @config.assetManifest units) (object/get @u unitType))), id: (object/get @u id), anchor: "ground", width: 0.5, height: 0.5 })) (fn s (object/get (object/get @s asset) url))) }
+            { type: draw-sprite-layer, items: (array/filter (array/map @entity.units (fn u (let ((unitAsset (if (object/get (object/get @u modelUrl) url) (object/get @u modelUrl) (object/get (object/get @config.assetManifest units) (object/get @u unitType)))) (unitUrl (object/get @unitAsset url)) (unitAnim (if (<= (object/get @u health) 0) "death" (if (and (== (object/get @u id) @entity.animAttackerId) (> @entity.animAtkTicksLeft 0)) "attack" (if (== (object/get @u id) @entity.animUnitId) @entity.animState "idle"))))) { type: draw-sprite, position: (object/get @u position), asset: (if (and @unitUrl (str/includes @unitUrl ".svg")) (object/merge @unitAsset { url: (str/concat (array/nth (str/split @unitUrl ".svg") 0) (str/concat "." (str/concat @unitAnim (str/concat "-" (str/concat (if (== @unitAnim "walk") (% @entity.animCounter 2) (if (== @unitAnim "idle") (% (math/floor (/ @entity.animCounter 3)) 4) 0))) ".svg")))) }) @unitAsset), id: (object/get @u id), anchor: "ground", width: 0.5, height: 0.5 }))) (fn s (object/get (object/get @s asset) url))) }
             { type: draw-shape-layer, items: (array/map @entity.units (fn u { type: draw-shape, shape: "rect", position: (object/get @u position), anchor: "ground", offsetX: -0.25, offsetY: -0.6, width: 0.5, height: 0.12, fill: "rgba(0,0,0,0.6)" })) }
             { type: draw-shape-layer, items: (array/map @entity.units (fn u { type: draw-shape, shape: "rect", position: (object/get @u position), anchor: "ground", offsetX: -0.25, offsetY: -0.6, width: (* 0.5 (/ (object/get @u health) (object/get @u maxHealth))), height: 0.12, fill: "#22c55e" })) }
             { type: draw-text-layer, items: (array/map @entity.units (fn u { type: draw-text, text: (object/get @u name), position: (object/get @u position), offsetY: -0.85, color: "#ffffff" })) }
-            { type: draw-text-layer, items: (array/map @entity.fx (fn f { type: draw-text, text: (object/get @f message), position: { x: (object/get @f x), y: (object/get @f y) }, color: "#ffe066" })) }
+            { type: draw-text-layer, items: (array/map @entity.fx (fn f { type: draw-text, text: (object/get @f message), position: { x: (object/get @f x), y: (object/get @f z) }, color: "#ffe066" })) }
+            { type: draw-sprite-layer, items: (array/filter (array/map @entity.fx (fn f { type: draw-sprite, position: { x: (object/get @f x), y: (object/get @f z) }, asset: (object/get (object/get @config.assetManifest effects) (object/get @f type)), anchor: "center", width: 0.6, height: 0.6 })) (fn s (object/get (object/get @s asset) url))) }
           ] } ]
         })
     }
@@ -321,5 +353,5 @@ orbital TacticsBoard2DOrbital {
     }
   }
 
-  page "/tactics-board-2d" as TacticsBoard2DPage -> TacticsAuthority, FxDecay, RoundLogic, ScoreKeeper, PlayerIntent
+  page "/tactics-board-2d" as TacticsBoard2DPage -> TacticsAuthority, FxDecay, RoundLogic, ScoreKeeper, PlayerIntent, AnimClock
 }

package/behaviors/lolo/ui/game/molecules/std-worldmap-board-2d.lolo

@@ -147,7 +147,7 @@ orbital WorldMapBoard2DOrbital {
           hud: { type: stack, direction: horizontal, gap: md, justify: between, children: [ { type: game-hud, stats: (array/concat [ { label: "Region", value: @config.region, iconUrl: @config.regionIconAsset }, { label: "Turn", value: @entity.turn, iconUrl: @config.turnIconAsset }, { label: "Gold", value: @entity.gold, iconUrl: @config.goldIconAsset } ] @config.extraStats) }, { type: stack, direction: horizontal, gap: xs, align: center, children: [ { type: icon, name: map-pin }, { type: typography, variant: caption, content: "Waypoints" } ] } ] }
           addons: { type: stack, direction: vertical, gap: sm, children: (array/concat [ { type: button, action: ADVANCE_TURN, label: "Pass Turn", iconAsset: @config.travelIconAsset, variant: primary } ] @config.extraAddons) }
           overlay: (if (!= @entity.result "none") { type: game-menu, title: (if (== @entity.result "victory") "VICTORY" "DEFEAT"), subtitle: (if (== @entity.result "victory") "The realm is secured" "Your heroes have fallen"), options: [] } null)
-          children: [ { type: canvas, camera: { mode: "isometric", zoom: (math/min 1 (/ 5 (+ 1 (math/max (array/max @entity.tiles "x") (array/max @entity.tiles "y"))))), pos: { x: (/ (+ (array/min @entity.tiles "x") (array/max @entity.tiles "x")) 2), y: (/ (+ (array/min @entity.tiles "y") (array/max @entity.tiles "y")) 2) } }, projection: "isometric", showMinimap: true, tileClickEvent: HERO_MOVE, unitClickEvent: HERO_SELECT, children: [
+          children: [ { type: canvas, fit: true, camera: { pos: { x: (/ (+ (array/min @entity.tiles "x") (array/max @entity.tiles "x")) 2), y: (/ (+ (array/min @entity.tiles "y") (array/max @entity.tiles "y")) 2) } }, projection: "isometric", showMinimap: true, tileClickEvent: HERO_MOVE, unitClickEvent: HERO_SELECT, children: [
             { type: draw-shape-layer, items: (array/map @entity.tiles (fn t { type: draw-shape, shape: "cell", position: { x: (object/get @t x), y: (object/get @t y) }, fill: "#5c94fc", stroke: "rgba(255,255,255,0.35)", strokeWidth: 1 })) }
             { type: draw-sprite-layer, items: (array/filter (array/map @entity.tiles (fn t { type: draw-sprite, position: { x: (object/get @t x), y: (object/get @t y) }, asset: (if (object/get (object/get @t terrainSprite) url) (object/get @t terrainSprite) (object/get (object/get @config.assetManifest terrains) (object/get @t terrain))), anchor: "center", width: 0.5, height: 0.5 })) (fn s (object/get (object/get @s asset) url))) }
             { type: draw-sprite-layer, items: (array/map @config.features (fn f { type: draw-sprite, position: { x: (object/get @f x), y: (object/get @f y) }, asset: (object/get @f sprite) })) }
@@ -195,7 +195,7 @@ orbital WorldMapBoard2DOrbital {
           hud: { type: stack, direction: horizontal, gap: md, justify: between, children: [ { type: game-hud, stats: (array/concat [ { label: "Region", value: @config.region, iconUrl: @config.regionIconAsset }, { label: "Turn", value: @entity.turn, iconUrl: @config.turnIconAsset }, { label: "Gold", value: @entity.gold, iconUrl: @config.goldIconAsset } ] @config.extraStats) }, { type: stack, direction: horizontal, gap: xs, align: center, children: [ { type: icon, name: map-pin }, { type: typography, variant: caption, content: "Waypoints" } ] } ] }
           addons: { type: stack, direction: vertical, gap: sm, children: (array/concat [ { type: button, action: ADVANCE_TURN, label: "Pass Turn", iconAsset: @config.travelIconAsset, variant: primary } ] @config.extraAddons) }
           overlay: (if (!= @entity.result "none") { type: game-menu, title: (if (== @entity.result "victory") "VICTORY" "DEFEAT"), subtitle: (if (== @entity.result "victory") "The realm is secured" "Your heroes have fallen"), options: [] } null)
-          children: [ { type: canvas, camera: { mode: "isometric", zoom: (math/min 1 (/ 5 (+ 1 (math/max (array/max @entity.tiles "x") (array/max @entity.tiles "y"))))), pos: { x: (/ (+ (array/min @entity.tiles "x") (array/max @entity.tiles "x")) 2), y: (/ (+ (array/min @entity.tiles "y") (array/max @entity.tiles "y")) 2) } }, projection: "isometric", showMinimap: true, tileClickEvent: HERO_MOVE, unitClickEvent: HERO_SELECT, children: [
+          children: [ { type: canvas, fit: true, camera: { pos: { x: (/ (+ (array/min @entity.tiles "x") (array/max @entity.tiles "x")) 2), y: (/ (+ (array/min @entity.tiles "y") (array/max @entity.tiles "y")) 2) } }, projection: "isometric", showMinimap: true, tileClickEvent: HERO_MOVE, unitClickEvent: HERO_SELECT, children: [
             { type: draw-shape-layer, items: (array/map @entity.tiles (fn t { type: draw-shape, shape: "cell", position: { x: (object/get @t x), y: (object/get @t y) }, fill: "#5c94fc", stroke: "rgba(255,255,255,0.35)", strokeWidth: 1 })) }
             { type: draw-sprite-layer, items: (array/filter (array/map @entity.tiles (fn t { type: draw-sprite, position: { x: (object/get @t x), y: (object/get @t y) }, asset: (if (object/get (object/get @t terrainSprite) url) (object/get @t terrainSprite) (object/get (object/get @config.assetManifest terrains) (object/get @t terrain))), anchor: "center", width: 0.5, height: 0.5 })) (fn s (object/get (object/get @s asset) url))) }
             { type: draw-sprite-layer, items: (array/map @config.features (fn f { type: draw-sprite, position: { x: (object/get @f x), y: (object/get @f y) }, asset: (object/get @f sprite) })) }

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/organisms/ui-arena-board.lolo

@@ -42,7 +42,7 @@ orbital ArenaBoardOrbital {
         (render-ui main {
           type: game-shell
           hud: { type: game-hud, stats: [ { label: "Result", value: @entity.result } ] }
-          children: [ { type: canvas, projection: "flat", showMinimap: false, children: [
+          children: [ { type: canvas, fit: true, projection: "flat", showMinimap: false, children: [
             { type: draw-shape-layer, items: (array/map @config.tiles (fn t { type: draw-shape, shape: "cell", position: { x: (object/get @t x), y: (object/get @t y) }, fill: "#4ade80", stroke: "rgba(0,0,0,0.2)" })) }
             { type: draw-shape-layer, items: (array/map @entity.units (fn u { type: draw-shape, shape: "ellipse", position: (object/get @u position), radiusX: 0.4, radiusY: 0.4, fill: (if (== (object/get @u team) "player") "#3b82f6" "#ef4444") })) }
             { type: draw-shape-layer, items: (array/map @entity.units (fn u { type: draw-shape, shape: "rect", position: (object/get @u position), offsetY: -0.6, width: 0.8, height: 0.12, fill: "rgba(0,0,0,0.6)" })) }
@@ -57,7 +57,7 @@ orbital ArenaBoardOrbital {
         (render-ui main {
           type: game-shell
           hud: { type: game-hud, stats: [ { label: "Result", value: @entity.result } ] }
-          children: [ { type: canvas, projection: "flat", showMinimap: false, children: [
+          children: [ { type: canvas, fit: true, projection: "flat", showMinimap: false, children: [
             { type: draw-shape-layer, items: (array/map @config.tiles (fn t { type: draw-shape, shape: "cell", position: { x: (object/get @t x), y: (object/get @t y) }, fill: "#4ade80", stroke: "rgba(0,0,0,0.2)" })) }
             { type: draw-shape-layer, items: (array/map @entity.units (fn u { type: draw-shape, shape: "ellipse", position: (object/get @u position), radiusX: 0.4, radiusY: 0.4, fill: (if (== (object/get @u team) "player") "#3b82f6" "#ef4444") })) }
             { type: draw-shape-layer, items: (array/map @entity.units (fn u { type: draw-shape, shape: "rect", position: (object/get @u position), offsetY: -0.6, width: 0.8, height: 0.12, fill: "rgba(0,0,0,0.6)" })) }