@almadar/std 16.197.0 → 16.198.0

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

@@ -1,6 +1,69 @@
 app ui-canvas "1.0.0"
 "Canvas — UI factory (1:1 with the @almadar/ui canvas pattern)."
 orbital CanvasOrbital {
+  type CanvasCamera = {
+    pos : CanvasCameraPos
+    target : CanvasCameraTarget
+    zoom : number
+    fov : number
+    mode : "isometric" | "perspective" | "top-down" | "front" | "follow" | "chase"
+    azimuth : number
+    elevation : number
+  }
+  type CanvasCameraPos = {
+    x : number!
+    y : number!
+    z : number
+  }
+  type CanvasCameraTarget = {
+    x : number!
+    y : number!
+    z : number
+  }
+  type CanvasLighting = {
+    ambient : CanvasLightingAmbient
+    directional : CanvasLightingDirectional
+    hemisphere : CanvasLightingHemisphere
+    points : [CanvasLightingPointsItem]
+    environment : "room" | "none"
+    toneMapping : "aces" | "none"
+  }
+  type CanvasLightingAmbient = {
+    intensity : number
+    color : string
+    position : [number]
+  }
+  type CanvasLightingDirectional = {
+    intensity : number
+    color : string
+    position : [number]
+  }
+  type CanvasLightingHemisphere = {
+    intensity : number
+    color : string
+    groundColor : string
+  }
+  type CanvasLightingPointsItem = {
+    intensity : number
+    color : string
+    position : [number]!
+    distance : number
+    decay : number
+  }
+  type CanvasPost = {
+    bloom : CanvasPostBloom
+    vignette : CanvasPostVignette
+  }
+  type CanvasPostBloom = {
+    intensity : number
+    threshold : number
+    smoothing : number
+  }
+  type CanvasPostVignette = {
+    offset : number
+    darkness : number
+  }
+
   entity CanvasItem [runtime] {
     id : string!
   }
@@ -47,23 +110,29 @@ orbital CanvasOrbital {
 
     emits {
       @config.tileClickEvent -> external {
-        _payload : object
+        x : number
+        y : number
+        tileId : string
+        z : number
       }
         @description "--- Shared interaction (LOLO-owned). The painter emitted at runtime depends on"
         @tier "essential"
       @config.unitClickEvent -> external {
-        _payload : object
+        unitId : string
+        x : number
+        z : number
       }
         @description "unitClickEvent prop"
         @tier "essential"
       @config.tileHoverEvent -> external {
-        _payload : object
+        x : number
+        y : number
+        tileId : string
+        z : number
       }
         @description "tileHoverEvent prop"
         @tier "essential"
-      @config.tileLeaveEvent -> external {
-        id : string
-      }
+      @config.tileLeaveEvent -> external { }
         @description "tileLeaveEvent prop"
         @tier "essential"
       @config.featureClickEvent -> external {
@@ -81,11 +150,11 @@ orbital CanvasOrbital {
         @label "Mode"
         @description "Painter: 2D sprite/shape/text raster, or 3D mesh. Default '2d'."
         @tier "presentation"
-      drawables : [object] = []
+      drawables : [node] = []
         @label "Drawables"
         @description "Neutral drawable descriptors — the `draw-*` children. Routed to the host's painter."
         @tier "presentation"
-      camera : json = {}
+      camera : CanvasCamera
         @label "Camera"
         @description "Neutral camera pose. Mapped to the underlying host's framing + zoom."
         @tier "presentation"
@@ -157,11 +226,11 @@ orbital CanvasOrbital {
         @label "Fog Of War"
         @description "fogOfWar prop"
         @tier "presentation"
-      lighting : object = {}
+      lighting : CanvasLighting
         @label "Lighting"
         @description "3D scene light rig as data — ambient/directional/hemisphere/point lights + optional 'room' environment for PBR reflections. Omitted → the standard fixed rig."
         @tier "presentation"
-      post : object = {}
+      post : CanvasPost
         @label "Post"
         @description "3D post-processing stack — bloom (emissive glow / neon) and vignette. Omitted → no post pass."
         @tier "presentation"

package/behaviors/lolo/ui/game/atoms/ui-choice-button.lolo

@@ -41,14 +41,10 @@ orbital ChoiceButtonOrbital {
     }
 
     emits {
-      @config.onClick -> external {
-        id : string
-      }
+      @config.onClick -> external { }
         @description "Click handler"
         @tier "essential"
-      @config.action -> external {
-        id : string
-      }
+      @config.action -> external { }
         @description "Declarative event name — emits UI:{action} via eventBus on click"
         @tier "essential"
     }

package/behaviors/lolo/ui/game/atoms/ui-control-button.lolo

@@ -44,14 +44,10 @@ orbital ControlButtonOrbital {
     }
 
     emits {
-      @config.onPress -> external {
-        id : string
-      }
+      @config.onPress -> external { }
         @description "Called when button is pressed"
         @tier "essential"
-      @config.onRelease -> external {
-        id : string
-      }
+      @config.onRelease -> external { }
         @description "Called when button is released"
         @tier "essential"
     }

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

@@ -20,6 +20,7 @@ orbital DrawFxLayerOrbital {
     vy : number
     vz : number
     particleCount : number
+    animation : string
   }
   type DrawFxLayerItemsItemPosition = {
     x : number!
@@ -41,6 +42,7 @@ orbital DrawFxLayerOrbital {
     space : "world" | "screen"
     effect : "confetti" | "flash" | "shake" | "sparkle" | "float-text" | "streak-glow"
     particleCount : number
+    animation : string
   }
   type DrawFxLayerSpritesValue = {
     url : asset!
@@ -78,7 +80,7 @@ orbital DrawFxLayerOrbital {
     }
 
     config {
-      items : [DrawFxLayerItemsItem] = [{ id: "e1", x: 2, y: 2, type: "spawn", message: "Unit spawned" }, { id: "e2", x: 3, y: 1, type: "effect", message: "Attack landed" }]
+      items : [DrawFxLayerItemsItem] = [{ id: "e1", x: 2, y: 2, type: "spawn", message: "Unit spawned", ttl: 1 }, { id: "e2", x: 3, y: 1, type: "effect", message: "Attack landed", ttl: 2 }]
         @label "Items"
         @description "The live fx entries — the mechanic's `@entity.fx` list passed whole; `space: 'screen'` entries are skipped (the overlay owns those)."
         @tier "presentation"
@@ -86,7 +88,7 @@ orbital DrawFxLayerOrbital {
         @label "Presets"
         @description "Consumer-declared effect vocabulary — one row per fx `type` (look + recipe). Unknown types fall back to a neutral spark burst."
         @tier "presentation"
-      art : Map string Map string [object] = { item: {} }
+      art : Map string Map string [node] = { item: {} }
         @label "Art"
         @description "Vector art per fx type (an asset-art map: type → anim-state → drawables); a type's `idle` state wins over sprites/procedural."
         @tier "presentation"

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

@@ -87,7 +87,7 @@ orbital DrawGroupOrbital {
         @label "Clip"
         @description "Clip the group's items to an SVG path (`d` syntax) in world units relative to the group origin — masked reveals, meters, portraits."
         @tier "presentation"
-      items : [object] = []
+      items : [node] = []
         @label "Items"
         @description "The grouped drawables, painted through the normal dispatch."
         @tier "presentation"

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

@@ -2,10 +2,10 @@ app ui-draw-shape-layer "1.0.0"
 "DrawShapeLayer — UI factory (1:1 with the @almadar/ui draw-shape-layer pattern)."
 orbital DrawShapeLayerOrbital {
   type DrawShapeLayerItemsItem = {
-    type : json!
+    type : "draw-shape"!
     shape : "cell" | "rect" | "ellipse" | "poly" | "path"!
     position : DrawShapeLayerItemsItemPosition!
-    anchor : object
+    anchor : "top-left" | "ground" | "center"
     width : number
     height : number
     radiusX : number
@@ -46,7 +46,7 @@ orbital DrawShapeLayerOrbital {
     center : DrawShapeLayerItemsItemGradientCenter
     radius : number
     angle : number
-    stops : [object]!
+    stops : [DrawShapeLayerItemsItemGradientStopsItem]!
   }
   type DrawShapeLayerItemsItemGradientFrom = {
     x : number!
@@ -60,6 +60,10 @@ orbital DrawShapeLayerOrbital {
     x : number!
     y : number!
   }
+  type DrawShapeLayerItemsItemGradientStopsItem = {
+    offset : number!
+    color : string!
+  }
   type DrawShapeLayerItemsItemFillPattern = {
     kind : "noise" | "image"!
     url : string
@@ -74,7 +78,7 @@ orbital DrawShapeLayerOrbital {
     center : DrawShapeLayerItemsItemStrokeGradientCenter
     radius : number
     angle : number
-    stops : [object]!
+    stops : [DrawShapeLayerItemsItemStrokeGradientStopsItem]!
   }
   type DrawShapeLayerItemsItemStrokeGradientFrom = {
     x : number!
@@ -88,6 +92,10 @@ orbital DrawShapeLayerOrbital {
     x : number!
     y : number!
   }
+  type DrawShapeLayerItemsItemStrokeGradientStopsItem = {
+    offset : number!
+    color : string!
+  }
   type DrawShapeLayerItemsItemPivot = {
     x : number!
     y : number!
@@ -139,7 +147,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: [{ 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: [] }, 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: [] }, 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: "Type 2", shape: rect, position: { x: 2, y: 2, z: 2 }, 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: [] }, 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: [] }, 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", 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 }]
         @label "Items"
         @description "items prop"
         @tier "presentation"

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

@@ -17,7 +17,7 @@ orbital DrawShapeOrbital {
     center : DrawShapeGradientCenter
     radius : number
     angle : number
-    stops : [object]!
+    stops : [DrawShapeGradientStopsItem]!
   }
   type DrawShapeGradientFrom = {
     x : number!
@@ -31,6 +31,10 @@ orbital DrawShapeOrbital {
     x : number!
     y : number!
   }
+  type DrawShapeGradientStopsItem = {
+    offset : number!
+    color : string!
+  }
   type DrawShapeFillPattern = {
     kind : "noise" | "image"!
     url : string
@@ -45,7 +49,7 @@ orbital DrawShapeOrbital {
     center : DrawShapeStrokeGradientCenter
     radius : number
     angle : number
-    stops : [object]!
+    stops : [DrawShapeStrokeGradientStopsItem]!
   }
   type DrawShapeStrokeGradientFrom = {
     x : number!
@@ -59,6 +63,10 @@ orbital DrawShapeOrbital {
     x : number!
     y : number!
   }
+  type DrawShapeStrokeGradientStopsItem = {
+    offset : number!
+    color : string!
+  }
   type DrawShapePivot = {
     x : number!
     y : number!
@@ -143,7 +151,7 @@ orbital DrawShapeOrbital {
         @label "Position"
         @description "Logical scene position; the projector maps it to pixels / world."
         @tier "presentation"
-      anchor : object = {}
+      anchor : "top-left" | "ground" | "center" = "top-left"
         @label "Anchor"
         @description "How the shape aligns to its projected position. Default varies by `shape`."
         @tier "presentation"

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

@@ -2,15 +2,16 @@ app ui-draw-sprite-layer "1.0.0"
 "DrawSpriteLayer — UI factory (1:1 with the @almadar/ui draw-sprite-layer pattern)."
 orbital DrawSpriteLayerOrbital {
   type DrawSpriteLayerItemsItem = {
-    type : json!
+    type : "draw-sprite"!
     position : DrawSpriteLayerItemsItemPosition!
     asset : DrawSpriteLayerItemsItemAsset!
-    anchor : object
+    anchor : "top-left" | "ground" | "center"
     width : number
     height : number
     frame : DrawSpriteLayerItemsItemFrame
     animation : string
     loop : boolean
+    clockMs : number
     flipX : boolean
     rotation : number
     opacity : number
@@ -62,7 +63,7 @@ orbital DrawSpriteLayerOrbital {
     }
 
     config {
-      items : [DrawSpriteLayerItemsItem] = [{ type: "Type", 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: "" }, width: 1, height: 1, frame: { x: 1, y: 1, w: 1, h: 1 }, animation: "Animation", loop: false, flipX: false, rotation: 1, opacity: 1, shadow: { color: "Color", blur: 1 } }, { type: "Type 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: "" }, width: 2, height: 2, frame: { x: 2, y: 2, w: 2, h: 2 }, animation: "Animation 2", loop: true, flipX: true, rotation: 2, opacity: 2, shadow: { color: "Color 2", blur: 2 } }]
+      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 } }]
         @label "Items"
         @description "Sprites painted in array order; z-ordering is the caller's responsibility."
         @tier "presentation"

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

@@ -49,6 +49,7 @@ orbital DrawSpriteOrbital {
           frame: @config.frame
           animation: @config.animation
           loop: @config.loop
+          clockMs: @config.clockMs
           flipX: @config.flipX
           rotation: @config.rotation
           opacity: @config.opacity
@@ -66,7 +67,7 @@ orbital DrawSpriteOrbital {
         @label "Asset"
         @description "The image / atlas reference to blit."
         @tier "presentation"
-      anchor : object = {}
+      anchor : "top-left" | "ground" | "center" = "top-left"
         @label "Anchor"
         @description "How the sprite aligns to its projected position. Default `'top-left'`."
         @tier "presentation"
@@ -90,6 +91,10 @@ orbital DrawSpriteOrbital {
         @label "Loop"
         @description "Override the sheet row's loop flag. The paint clock is wall-time, so one-shot rows hold their final frame — preview pages set `true` to cycle attack/hit/death continuously."
         @tier "presentation"
+      clockMs : number
+        @label "Clock Ms"
+        @description "Animation clock override in ms (e.g. an fx entry's age since spawn). Omitted → the host paint clock; one-shot rows anchored to wall-time would otherwise sit on their final frame."
+        @tier "presentation"
       flipX : boolean
         @label "Flip X"
         @description "Mirror horizontally (facing)."

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

@@ -2,10 +2,10 @@ app ui-draw-text-layer "1.0.0"
 "DrawTextLayer — UI factory (1:1 with the @almadar/ui draw-text-layer pattern)."
 orbital DrawTextLayerOrbital {
   type DrawTextLayerItemsItem = {
-    type : json!
+    type : "draw-text"!
     text : string!
     position : DrawTextLayerItemsItemPosition!
-    anchor : object
+    anchor : "top-left" | "ground" | "center"
     offsetX : number
     offsetY : number
     color : string!
@@ -36,7 +36,7 @@ orbital DrawTextLayerOrbital {
     }
 
     config {
-      items : [DrawTextLayerItemsItem] = [{ type: "Type", text: "Text", position: { x: 1, y: 1, z: 1 }, offsetX: 1, offsetY: 1, color: "Color", font: "Font", align: center, baseline: alphabetic, opacity: 1 }, { type: "Type 2", text: "Text 2", position: { x: 2, y: 2, z: 2 }, offsetX: 2, offsetY: 2, color: "Color 2", font: "Font 2", align: end, baseline: bottom, opacity: 2 }]
+      items : [DrawTextLayerItemsItem] = [{ type: "draw-text", text: "Text", position: { x: 1, y: 1, z: 1 }, anchor: "top-left", offsetX: 1, offsetY: 1, color: "Color", font: "Font", align: center, baseline: alphabetic, opacity: 1 }, { type: "draw-text", text: "Text 2", position: { x: 2, y: 2, z: 2 }, anchor: ground, offsetX: 2, offsetY: 2, color: "Color 2", font: "Font 2", align: end, baseline: bottom, opacity: 2 }]
         @label "Items"
         @description "items prop"
         @tier "presentation"

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

@@ -40,7 +40,7 @@ orbital DrawTextOrbital {
         @label "Position"
         @description "Logical scene position; the projector maps it to pixels / world."
         @tier "presentation"
-      anchor : object = {}
+      anchor : "top-left" | "ground" | "center" = "top-left"
         @label "Anchor"
         @description "anchor prop"
         @tier "presentation"

package/behaviors/lolo/ui/game/atoms/ui-sequence-bar.lolo

@@ -8,7 +8,7 @@ orbital SequenceBarOrbital {
     description : string
     iconEmoji : string
     iconUrl : SequenceBarSlotsItemIconUrl
-    stateMachine : object
+    stateMachine : SequenceBarSlotsItemStateMachine
   }
   type SequenceBarSlotsItemIconUrl = {
     url : asset!
@@ -24,6 +24,19 @@ orbital SequenceBarOrbital {
     name : string
     thumbnailUrl : string
   }
+  type SequenceBarSlotsItemStateMachine = {
+    name : string!
+    states : [string]!
+    currentState : string!
+    transitions : [SequenceBarSlotsItemStateMachineTransitionsItem]!
+    description : string
+  }
+  type SequenceBarSlotsItemStateMachineTransitionsItem = {
+    from : string!
+    to : string!
+    event : string!
+    guardHint : string
+  }
   type SequenceBarCategoryColorsValue = {
     bg : string!
     border : string!
@@ -35,7 +48,7 @@ orbital SequenceBarOrbital {
     description : string
     iconEmoji : string
     iconUrl : SequenceBarSLOTDROPItemIconUrl
-    stateMachine : object
+    stateMachine : SequenceBarSLOTDROPItemStateMachine
   }
   type SequenceBarSLOTDROPItemIconUrl = {
     url : asset!
@@ -51,6 +64,19 @@ orbital SequenceBarOrbital {
     name : string
     thumbnailUrl : string
   }
+  type SequenceBarSLOTDROPItemStateMachine = {
+    name : string!
+    states : [string]!
+    currentState : string!
+    transitions : [SequenceBarSLOTDROPItemStateMachineTransitionsItem]!
+    description : string
+  }
+  type SequenceBarSLOTDROPItemStateMachineTransitionsItem = {
+    from : string!
+    to : string!
+    event : string!
+    guardHint : string
+  }
 
   entity SequenceBarItem [runtime] {
     id : string!
@@ -96,7 +122,7 @@ orbital SequenceBarOrbital {
     }
 
     config {
-      slots : [SequenceBarSlotsItem] = [{ id: "Id", name: "Name", category: "Category", description: "Description", iconEmoji: "Icon Emoji", iconUrl: { url: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/default/ui/star.png", role: "ui", category: "iconUrl", animations: ["static"], style: "pixel", dimension: "2d", aspect: "1:1", name: "iconUrl", thumbnailUrl: "" } }, { id: "Id 2", name: "Name 2", category: "Category 2", description: "Description 2", iconEmoji: "Icon Emoji 2", iconUrl: { url: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/default/ui/star.png", role: "ui", category: "iconUrl", animations: ["static"], style: "pixel", dimension: "2d", aspect: "1:1", name: "iconUrl", thumbnailUrl: "" } }]
+      slots : [SequenceBarSlotsItem] = [{ id: "Id", name: "Name", category: "Category", description: "Description", iconEmoji: "Icon Emoji", iconUrl: { url: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/default/ui/star.png", role: "ui", category: "iconUrl", animations: ["static"], style: "pixel", dimension: "2d", aspect: "1:1", name: "iconUrl", thumbnailUrl: "" }, stateMachine: { name: "Name", states: ["Item", "Item 2"], currentState: "Current State", transitions: [{ from: "From", to: "To", event: "Event", guardHint: "Guard Hint" }, { from: "From 2", to: "To 2", event: "Event 2", guardHint: "Guard Hint 2" }], description: "Description" } }, { id: "Id 2", name: "Name 2", category: "Category 2", description: "Description 2", iconEmoji: "Icon Emoji 2", iconUrl: { url: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/default/ui/star.png", role: "ui", category: "iconUrl", animations: ["static"], style: "pixel", dimension: "2d", aspect: "1:1", name: "iconUrl", thumbnailUrl: "" }, stateMachine: { name: "Name 2", states: ["Item", "Item 2"], currentState: "Current State 2", transitions: [{ from: "From", to: "To", event: "Event", guardHint: "Guard Hint" }, { from: "From 2", to: "To 2", event: "Event 2", guardHint: "Guard Hint 2" }], description: "Description 2" } }]
         @label "Slots"
         @description "The current sequence (sparse — undefined means empty slot)"
         @tier "presentation"

package/behaviors/lolo/ui/game/atoms/ui-state-graph.lolo

@@ -34,7 +34,7 @@ orbital StateGraphOrbital {
 
     emits {
       @config.nodeClickEvent -> external {
-        id : string
+        stateId : string!
       }
         @description "Emits UI:{nodeClickEvent} with { stateId } when a node is clicked."
         @tier "essential"

package/behaviors/lolo/ui/game/atoms/ui-trait-slot.lolo

@@ -8,7 +8,7 @@ orbital TraitSlotOrbital {
     description : string
     iconEmoji : string
     iconUrl : TraitSlotEquippedItemIconUrl
-    stateMachine : object
+    stateMachine : TraitSlotEquippedItemStateMachine
   }
   type TraitSlotEquippedItemIconUrl = {
     url : asset!
@@ -24,6 +24,19 @@ orbital TraitSlotOrbital {
     name : string
     thumbnailUrl : string
   }
+  type TraitSlotEquippedItemStateMachine = {
+    name : string!
+    states : [string]!
+    currentState : string!
+    transitions : [TraitSlotEquippedItemStateMachineTransitionsItem]!
+    description : string
+  }
+  type TraitSlotEquippedItemStateMachineTransitionsItem = {
+    from : string!
+    to : string!
+    event : string!
+    guardHint : string
+  }
   type TraitSlotCategoryColorsValue = {
     bg : string!
     border : string!
@@ -55,7 +68,7 @@ orbital TraitSlotOrbital {
     description : string
     iconEmoji : string
     iconUrl : TraitSlotITEMDROPItemIconUrl
-    stateMachine : object
+    stateMachine : TraitSlotITEMDROPItemStateMachine
   }
   type TraitSlotITEMDROPItemIconUrl = {
     url : asset!
@@ -71,6 +84,19 @@ orbital TraitSlotOrbital {
     name : string
     thumbnailUrl : string
   }
+  type TraitSlotITEMDROPItemStateMachine = {
+    name : string!
+    states : [string]!
+    currentState : string!
+    transitions : [TraitSlotITEMDROPItemStateMachineTransitionsItem]!
+    description : string
+  }
+  type TraitSlotITEMDROPItemStateMachineTransitionsItem = {
+    from : string!
+    to : string!
+    event : string!
+    guardHint : string
+  }
   type TraitSlotDRAGSTARTItem = {
     id : string!
     name : string!
@@ -78,7 +104,7 @@ orbital TraitSlotOrbital {
     description : string
     iconEmoji : string
     iconUrl : TraitSlotDRAGSTARTItemIconUrl
-    stateMachine : object
+    stateMachine : TraitSlotDRAGSTARTItemStateMachine
   }
   type TraitSlotDRAGSTARTItemIconUrl = {
     url : asset!
@@ -94,6 +120,19 @@ orbital TraitSlotOrbital {
     name : string
     thumbnailUrl : string
   }
+  type TraitSlotDRAGSTARTItemStateMachine = {
+    name : string!
+    states : [string]!
+    currentState : string!
+    transitions : [TraitSlotDRAGSTARTItemStateMachineTransitionsItem]!
+    description : string
+  }
+  type TraitSlotDRAGSTARTItemStateMachineTransitionsItem = {
+    from : string!
+    to : string!
+    event : string!
+    guardHint : string
+  }
 
   entity TraitSlotItem [runtime] {
     id : string!

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

@@ -138,7 +138,7 @@ orbital TacticsBoard2DOrbital {
     animTicksLeft : number = 0
     animAttackerId : string = ""
     animAtkTicksLeft : number = 0
-    svgAssetArt : json = {}
+    svgAssetArt : Map string Map string [node] = {}
   }
 
   trait TacticsAuthority = Tactics.traits.GridTactics -> GameState {

package/behaviors/lolo/ui/game/organisms/std-tactics-board-3d.lolo

@@ -144,7 +144,7 @@ orbital TacticsBoard3DOrbital {
     attackTargets : [ValidMove] = []
     uiPhase : string = "observation"
     turn : number = 0
-    meshAssetArt : json = {}
+    meshAssetArt : Map string Map string [node] = {}
   }
 
   trait TacticsAuthority = Tactics.traits.GridTactics -> GameState {

package/behaviors/lolo/ui/game/templates/ui-game-shell.lolo

@@ -97,9 +97,9 @@ orbital GameShellOrbital {
         @label "Hud Background Asset"
         @description "Per-call-site 9-sliced panel override. Chrome normally comes from the active theme (see the theme config knob); most callers leave this unset."
         @tier "presentation"
-      fontFamily : string = future
+      fontFamily : string = ""
         @label "Font Family"
-        @description "Game display-font key (future | future-narrow | pixel | blocks | mini) or a CSS font-family. Scoped override of the theme contract's --font-family-display slot: titles and numerics take this face, body text follows the active theme."
+        @description "Game display-font key (pixel | fredoka | future | future-narrow | blocks | mini) or a CSS font-family. Scoped override of the theme contract's --font-family-display slot: titles and numerics take this face, body text follows the active theme. Empty = the active theme's font-family-display token decides."
         @tier "presentation"
       theme : string = ""
         @label "Theme"

package/behaviors/lolo/ui/learning/atoms/std-learn-diagram.lolo

@@ -28,8 +28,8 @@ orbital LearnDiagramOrbital {
     selectedIndex : number = -1
     captionText : string
     readoutText : string
-    captionChildren : [json]
-    partButtons : [json]
+    captionChildren : [node]
+    partButtons : [node]
   }
 
   trait LearnDiagramSim -> @rebindable LearnDiagramScene [interaction, instance] {

package/behaviors/lolo/ui/learning/atoms/std-learn-stepper.lolo

@@ -66,7 +66,7 @@ orbital LearnStepperOrbital {
     tallyItems : [LearnStepperTallyItem]
     visibleThreadNote : string
     shapes : [LearnStepperShape]
-    filterButtons : [json]
+    filterButtons : [node]
   }
 
   trait LearnStepperSim -> @rebindable LearnStepperScene [interaction, instance] {