@almadar/std 2.1.0 → 2.4.1

package/dist/behaviors/game-entity.js

@@ -1,4 +1,217 @@
 // behaviors/game-entity.ts
+var GAME_ENTITY_THEME = {
+  name: "game-entity-rose",
+  tokens: {
+    colors: {
+      primary: "#e11d48",
+      "primary-hover": "#be123c",
+      "primary-foreground": "#ffffff",
+      accent: "#fb7185",
+      "accent-foreground": "#000000",
+      success: "#22c55e",
+      warning: "#f59e0b",
+      error: "#ef4444"
+    }
+  }
+};
+var KFLOW_ASSETS = "https://almadar-kflow-assets.web.app/shared";
+var GAME_MANIFEST = {
+  terrain: {
+    stone: "/terrain/Isometric/stoneSide_N.png",
+    dirt: "/terrain/Isometric/dirt_N.png",
+    bridge: "/terrain/Isometric/stoneStep_N.png",
+    wall: "/terrain/Isometric/stoneWallArchway_N.png"
+  },
+  units: {
+    guardian: "/sprite-sheets/guardian-sprite-sheet-se.png",
+    breaker: "/sprite-sheets/breaker-sprite-sheet-se.png",
+    archivist: "/sprite-sheets/archivist-sprite-sheet-se.png"
+  },
+  features: {
+    gold_mine: "/world-map/gold_mine.png",
+    portal: "/world-map/portal_open.png",
+    treasure: "/world-map/treasure_chest_closed.png"
+  }
+};
+var TILES_5X5 = [
+  { x: 0, y: 0, terrain: "stone" },
+  { x: 1, y: 0, terrain: "dirt" },
+  { x: 2, y: 0, terrain: "stone" },
+  { x: 3, y: 0, terrain: "dirt" },
+  { x: 4, y: 0, terrain: "stone" },
+  { x: 0, y: 1, terrain: "dirt" },
+  { x: 1, y: 1, terrain: "stone" },
+  { x: 2, y: 1, terrain: "dirt" },
+  { x: 3, y: 1, terrain: "stone" },
+  { x: 4, y: 1, terrain: "dirt" },
+  { x: 0, y: 2, terrain: "stone" },
+  { x: 1, y: 2, terrain: "dirt" },
+  { x: 2, y: 2, terrain: "bridge" },
+  { x: 3, y: 2, terrain: "dirt" },
+  { x: 4, y: 2, terrain: "stone" },
+  { x: 0, y: 3, terrain: "dirt" },
+  { x: 1, y: 3, terrain: "stone" },
+  { x: 2, y: 3, terrain: "dirt" },
+  { x: 3, y: 3, terrain: "stone" },
+  { x: 4, y: 3, terrain: "dirt" },
+  { x: 0, y: 4, terrain: "stone" },
+  { x: 1, y: 4, terrain: "dirt" },
+  { x: 2, y: 4, terrain: "stone" },
+  { x: 3, y: 4, terrain: "wall" },
+  { x: 4, y: 4, terrain: "stone" }
+];
+var healthCanvasView = ["render-ui", "main", {
+  type: "isometric-canvas",
+  tiles: TILES_5X5,
+  units: [{ id: "guardian-1", unitType: "guardian", x: 2, y: 2 }],
+  scale: 1,
+  boardWidth: 5,
+  boardHeight: 5,
+  enableCamera: true,
+  assetBaseUrl: KFLOW_ASSETS,
+  assetManifest: GAME_MANIFEST,
+  tileClickEvent: "TILE_CLICK",
+  unitClickEvent: "UNIT_CLICK"
+}];
+var healthOverlayView = ["render-ui", "overlay", {
+  type: "game-hud",
+  elements: [
+    { type: "stat", label: "HP", value: "@entity.currentHealth", icon: "heart" },
+    { type: "stat", label: "Max HP", value: "@entity.maxHealth", icon: "heart" },
+    { type: "stat", label: "Invulnerable", value: "@entity.isInvulnerable", icon: "shield" },
+    { type: "button", label: "Damage", action: "DAMAGE", icon: "sword", variant: "secondary" },
+    { type: "button", label: "Heal", action: "HEAL", icon: "heart", variant: "primary" },
+    { type: "button", label: "Respawn", action: "RESPAWN", icon: "refresh-cw", variant: "secondary" }
+  ]
+}];
+var healthDamageEffectOverlay = ["render-ui", "overlay", {
+  type: "canvas-effect",
+  actionType: "hit",
+  x: 200,
+  y: 200,
+  duration: 600
+}];
+var scoreCanvasView = ["render-ui", "main", {
+  type: "isometric-canvas",
+  tiles: TILES_5X5,
+  units: [{ id: "scorer-1", unitType: "guardian", x: 2, y: 2 }],
+  scale: 1,
+  boardWidth: 5,
+  boardHeight: 5,
+  enableCamera: true,
+  assetBaseUrl: KFLOW_ASSETS,
+  assetManifest: GAME_MANIFEST,
+  tileClickEvent: "TILE_CLICK",
+  unitClickEvent: "UNIT_CLICK"
+}];
+var scoreOverlayView = ["render-ui", "overlay", {
+  type: "game-hud",
+  elements: [
+    { type: "stat", label: "Score", value: "@entity.currentScore", icon: "star" },
+    { type: "stat", label: "High Score", value: "@entity.highScore", icon: "award" },
+    { type: "stat", label: "Combo", value: "@entity.comboCount", icon: "zap" },
+    { type: "stat", label: "Multiplier", value: "@entity.multiplier", icon: "trending-up" },
+    { type: "button", label: "Add Points", action: "ADD_POINTS", icon: "plus", variant: "primary" },
+    { type: "button", label: "Reset", action: "RESET", icon: "refresh-cw", variant: "secondary" }
+  ]
+}];
+var movementCanvasView = ["render-ui", "main", {
+  type: "isometric-canvas",
+  tiles: TILES_5X5,
+  units: [{ id: "mover-1", unitType: "guardian", x: 2, y: 2 }],
+  scale: 1,
+  boardWidth: 5,
+  boardHeight: 5,
+  enableCamera: true,
+  assetBaseUrl: KFLOW_ASSETS,
+  assetManifest: GAME_MANIFEST,
+  tileClickEvent: "TILE_CLICK",
+  unitClickEvent: "UNIT_CLICK"
+}];
+var movementOverlayView = ["render-ui", "overlay", {
+  type: "game-hud",
+  elements: [
+    { type: "stat", label: "X", value: "@entity.x", icon: "arrow-right" },
+    { type: "stat", label: "Y", value: "@entity.y", icon: "arrow-up" },
+    { type: "stat", label: "Speed", value: "@entity.moveSpeed", icon: "gauge" },
+    { type: "stat", label: "Direction", value: "@entity.direction", icon: "compass" },
+    { type: "button", label: "Move Left", action: "MOVE_LEFT", icon: "arrow-left", variant: "secondary" },
+    { type: "button", label: "Move Right", action: "MOVE_RIGHT", icon: "arrow-right", variant: "secondary" },
+    { type: "button", label: "Jump", action: "JUMP", icon: "arrow-big-up", variant: "primary" },
+    { type: "button", label: "Stop", action: "STOP", icon: "square", variant: "secondary" }
+  ]
+}];
+var combatCanvasView = ["render-ui", "main", {
+  type: "isometric-canvas",
+  tiles: TILES_5X5,
+  units: [
+    { id: "attacker-1", unitType: "guardian", x: 1, y: 2 },
+    { id: "target-1", unitType: "breaker", x: 3, y: 2 }
+  ],
+  scale: 1,
+  boardWidth: 5,
+  boardHeight: 5,
+  enableCamera: true,
+  assetBaseUrl: KFLOW_ASSETS,
+  assetManifest: GAME_MANIFEST,
+  tileClickEvent: "TILE_CLICK",
+  unitClickEvent: "UNIT_CLICK"
+}];
+var combatLogOverlay = ["render-ui", "overlay", {
+  type: "combat-log",
+  events: [],
+  maxVisible: 10,
+  title: "Battle Log"
+}];
+var combatHudOverlay = ["render-ui", "overlay", {
+  type: "game-hud",
+  elements: [
+    { type: "stat", label: "Damage", value: "@entity.attackDamage", icon: "sword" },
+    { type: "stat", label: "Duration", value: "@entity.attackDuration", icon: "timer" },
+    { type: "stat", label: "Cooldown", value: "@entity.cooldownDuration", icon: "clock" },
+    { type: "stat", label: "Hit Count", value: "@entity.hitCount", icon: "target" },
+    { type: "button", label: "Attack", action: "ATTACK", icon: "sword", variant: "primary" },
+    { type: "button", label: "Defend", action: "DEFEND", icon: "shield", variant: "secondary" }
+  ]
+}];
+var combatAttackEffect = ["render-ui", "overlay", {
+  type: "canvas-effect",
+  actionType: "melee",
+  x: 200,
+  y: 200,
+  duration: 600
+}];
+var inventoryBrowseView = ["render-ui", "main", {
+  type: "inventory-panel",
+  items: "@entity",
+  slots: 12,
+  columns: 4,
+  selectSlotEvent: "SELECT",
+  showTooltips: true
+}];
+var inventoryDetailView = ["render-ui", "main", {
+  type: "stack",
+  direction: "vertical",
+  children: [
+    { type: "stack", direction: "horizontal", children: [
+      { type: "icon", name: "package" },
+      { type: "typography", content: "Item Detail", variant: "h2" }
+    ] },
+    { type: "divider" },
+    { type: "stack", direction: "vertical", gap: "md", children: [
+      { type: "typography", content: "@entity.name", variant: "h2" },
+      { type: "stack", direction: "horizontal", gap: "sm", children: [
+        { type: "typography", content: "Quantity:", variant: "body" },
+        { type: "typography", content: "@entity.quantity", variant: "body" }
+      ] },
+      { type: "stack", direction: "horizontal", gap: "sm", children: [
+        { type: "typography", content: "Slot:", variant: "body" },
+        { type: "typography", content: "@entity.slot", variant: "body" }
+      ] },
+      { type: "badge", label: "@entity.isEquipped", variant: "outline" }
+    ] }
+  ]
+}];
 var HEALTH_BEHAVIOR = {
   name: "std-health",
   version: "1.0.0",
@@ -6,8 +219,9 @@ var HEALTH_BEHAVIOR = {
   orbitals: [
     {
       name: "HealthOrbital",
+      theme: GAME_ENTITY_THEME,
       entity: {
-        name: "HealthState",
+        name: "HealthData",
         persistence: "runtime",
         fields: [
           { name: "id", type: "string", required: true },
@@ -15,26 +229,32 @@ var HEALTH_BEHAVIOR = {
           { name: "maxHealth", type: "number", default: 100 },
           { name: "isInvulnerable", type: "boolean", default: false },
           { name: "lastDamageTime", type: "number", default: 0 },
-          { name: "invulnerabilityTime", type: "number", default: 1e3 },
-          { name: "onDeath", type: "string", default: null }
+          { name: "invulnerabilityTime", type: "number", default: 1e3 }
         ]
       },
       traits: [
         {
           name: "Health",
-          linkedEntity: "HealthState",
+          linkedEntity: "HealthData",
           category: "interaction",
           stateMachine: {
             states: [
               { name: "Alive", isInitial: true },
               { name: "Damaged" },
-              { name: "Invulnerable" },
-              { name: "Dead", isTerminal: true }
+              { name: "Dead" }
             ],
             events: [
               { key: "INIT", name: "Initialize" },
-              { key: "DAMAGE", name: "Damage" },
-              { key: "HEAL", name: "Heal" },
+              {
+                key: "DAMAGE",
+                name: "Damage",
+                payloadSchema: [{ name: "amount", type: "number", required: true }]
+              },
+              {
+                key: "HEAL",
+                name: "Heal",
+                payloadSchema: [{ name: "amount", type: "number", required: true }]
+              },
               { key: "DIE", name: "Die" },
               { key: "RESPAWN", name: "Respawn" },
               { key: "INVULNERABILITY_END", name: "Invulnerability End" }
@@ -45,13 +265,11 @@ var HEALTH_BEHAVIOR = {
                 to: "Alive",
                 event: "INIT",
                 effects: [
+                  ["fetch", "HealthData"],
                   ["set", "@entity.currentHealth", "@entity.maxHealth"],
                   ["set", "@entity.isInvulnerable", false],
-                  ["render-ui", "hud-top", {
-                    type: "stats",
-                    label: "Health",
-                    value: "@entity.currentHealth"
-                  }]
+                  healthCanvasView,
+                  healthOverlayView
                 ]
               },
               {
@@ -60,37 +278,62 @@ var HEALTH_BEHAVIOR = {
                 event: "DAMAGE",
                 guard: ["not", "@entity.isInvulnerable"],
                 effects: [
+                  ["fetch", "HealthData"],
                   ["set", "@entity.currentHealth", ["math/max", 0, ["-", "@entity.currentHealth", "@payload.amount"]]],
                   ["set", "@entity.lastDamageTime", "@now"],
-                  [
-                    "if",
-                    ["<=", "@entity.currentHealth", 0],
-                    ["emit", "DIE"],
-                    [
-                      "do",
-                      ["set", "@entity.isInvulnerable", true]
-                    ]
-                  ]
+                  ["set", "@entity.isInvulnerable", true],
+                  healthCanvasView,
+                  healthOverlayView,
+                  healthDamageEffectOverlay
                 ]
               },
               {
                 from: "Damaged",
-                to: "Alive",
-                event: "INVULNERABILITY_END",
-                effects: [["set", "@entity.isInvulnerable", false]]
+                to: "Dead",
+                event: "DAMAGE",
+                guard: ["<=", "@entity.currentHealth", 0],
+                effects: [
+                  ["fetch", "HealthData"],
+                  ["set", "@entity.currentHealth", 0],
+                  healthCanvasView,
+                  healthOverlayView
+                ]
+              },
+              {
+                from: "Damaged",
+                to: "Damaged",
+                event: "DAMAGE",
+                guard: ["and", ["not", "@entity.isInvulnerable"], [">", "@entity.currentHealth", 0]],
+                effects: [
+                  ["fetch", "HealthData"],
+                  ["set", "@entity.currentHealth", ["math/max", 0, ["-", "@entity.currentHealth", "@payload.amount"]]],
+                  ["set", "@entity.lastDamageTime", "@now"],
+                  ["set", "@entity.isInvulnerable", true],
+                  healthCanvasView,
+                  healthOverlayView,
+                  healthDamageEffectOverlay
+                ]
               },
               {
-                from: "Invulnerable",
+                from: "Damaged",
                 to: "Alive",
                 event: "INVULNERABILITY_END",
-                effects: [["set", "@entity.isInvulnerable", false]]
+                effects: [
+                  ["fetch", "HealthData"],
+                  ["set", "@entity.isInvulnerable", false],
+                  healthCanvasView,
+                  healthOverlayView
+                ]
               },
               {
                 from: "Alive",
                 to: "Alive",
                 event: "HEAL",
                 effects: [
-                  ["set", "@entity.currentHealth", ["math/min", "@entity.maxHealth", ["+", "@entity.currentHealth", "@payload.amount"]]]
+                  ["fetch", "HealthData"],
+                  ["set", "@entity.currentHealth", ["math/min", "@entity.maxHealth", ["+", "@entity.currentHealth", "@payload.amount"]]],
+                  healthCanvasView,
+                  healthOverlayView
                 ]
               },
               {
@@ -98,7 +341,10 @@ var HEALTH_BEHAVIOR = {
                 to: "Damaged",
                 event: "HEAL",
                 effects: [
-                  ["set", "@entity.currentHealth", ["math/min", "@entity.maxHealth", ["+", "@entity.currentHealth", "@payload.amount"]]]
+                  ["fetch", "HealthData"],
+                  ["set", "@entity.currentHealth", ["math/min", "@entity.maxHealth", ["+", "@entity.currentHealth", "@payload.amount"]]],
+                  healthCanvasView,
+                  healthOverlayView
                 ]
               },
               {
@@ -106,8 +352,10 @@ var HEALTH_BEHAVIOR = {
                 to: "Dead",
                 event: "DIE",
                 effects: [
+                  ["fetch", "HealthData"],
                   ["set", "@entity.currentHealth", 0],
-                  ["if", "@entity.onDeath", ["emit", "@entity.onDeath", { entityId: "@entity.id" }]]
+                  healthCanvasView,
+                  healthOverlayView
                 ]
               },
               {
@@ -115,15 +363,23 @@ var HEALTH_BEHAVIOR = {
                 to: "Dead",
                 event: "DIE",
                 effects: [
+                  ["fetch", "HealthData"],
                   ["set", "@entity.currentHealth", 0],
-                  ["if", "@entity.onDeath", ["emit", "@entity.onDeath", { entityId: "@entity.id" }]]
+                  healthCanvasView,
+                  healthOverlayView
                 ]
               },
               {
                 from: "Dead",
                 to: "Alive",
                 event: "RESPAWN",
-                effects: [["emit", "INIT"]]
+                effects: [
+                  ["fetch", "HealthData"],
+                  ["set", "@entity.currentHealth", "@entity.maxHealth"],
+                  ["set", "@entity.isInvulnerable", false],
+                  healthCanvasView,
+                  healthOverlayView
+                ]
               }
             ]
           },
@@ -132,12 +388,21 @@ var HEALTH_BEHAVIOR = {
               name: "InvulnerabilityTimer",
               interval: "frame",
               guard: ["and", "@entity.isInvulnerable", [">", ["-", "@now", "@entity.lastDamageTime"], "@entity.invulnerabilityTime"]],
-              effects: [["emit", "INVULNERABILITY_END"]]
+              effects: [
+                ["set", "@entity.isInvulnerable", false]
+              ]
             }
           ]
         }
       ],
-      pages: []
+      pages: [
+        {
+          name: "HealthPage",
+          path: "/health",
+          isInitial: true,
+          traits: [{ ref: "Health" }]
+        }
+      ]
     }
   ]
 };
@@ -148,8 +413,9 @@ var SCORE_BEHAVIOR = {
   orbitals: [
     {
       name: "ScoreOrbital",
+      theme: GAME_ENTITY_THEME,
       entity: {
-        name: "ScoreState",
+        name: "ScoreData",
         persistence: "runtime",
         fields: [
           { name: "id", type: "string", required: true },
@@ -165,17 +431,20 @@ var SCORE_BEHAVIOR = {
       traits: [
         {
           name: "Score",
-          linkedEntity: "ScoreState",
+          linkedEntity: "ScoreData",
           category: "interaction",
           stateMachine: {
             states: [{ name: "Active", isInitial: true }],
             events: [
               { key: "INIT", name: "Initialize" },
-              { key: "ADD_POINTS", name: "Add Points" },
+              {
+                key: "ADD_POINTS",
+                name: "Add Points",
+                payloadSchema: [{ name: "points", type: "number", required: true }]
+              },
               { key: "COMBO_HIT", name: "Combo Hit" },
               { key: "COMBO_BREAK", name: "Combo Break" },
-              { key: "RESET", name: "Reset" },
-              { key: "SAVE_HIGH_SCORE", name: "Save High Score" }
+              { key: "RESET", name: "Reset" }
             ],
             transitions: [
               {
@@ -183,15 +452,12 @@ var SCORE_BEHAVIOR = {
                 to: "Active",
                 event: "INIT",
                 effects: [
+                  ["fetch", "ScoreData"],
                   ["set", "@entity.currentScore", 0],
                   ["set", "@entity.comboCount", 0],
                   ["set", "@entity.multiplier", 1],
-                  ["render-ui", "hud-top", {
-                    type: "stats",
-                    label: "Score",
-                    value: "@entity.currentScore",
-                    subtitle: "High: @entity.highScore"
-                  }]
+                  scoreCanvasView,
+                  scoreOverlayView
                 ]
               },
               {
@@ -199,8 +465,11 @@ var SCORE_BEHAVIOR = {
                 to: "Active",
                 event: "ADD_POINTS",
                 effects: [
+                  ["fetch", "ScoreData"],
                   ["set", "@entity.currentScore", ["+", "@entity.currentScore", ["*", "@payload.points", "@entity.multiplier"]]],
-                  ["set", "@entity.lastScoreTime", "@now"]
+                  ["set", "@entity.lastScoreTime", "@now"],
+                  scoreCanvasView,
+                  scoreOverlayView
                 ]
               },
               {
@@ -208,9 +477,12 @@ var SCORE_BEHAVIOR = {
                 to: "Active",
                 event: "COMBO_HIT",
                 effects: [
+                  ["fetch", "ScoreData"],
                   ["set", "@entity.comboCount", ["+", "@entity.comboCount", 1]],
                   ["set", "@entity.multiplier", ["math/min", "@entity.maxMultiplier", ["+", 1, ["/", "@entity.comboCount", 5]]]],
-                  ["set", "@entity.lastScoreTime", "@now"]
+                  ["set", "@entity.lastScoreTime", "@now"],
+                  scoreCanvasView,
+                  scoreOverlayView
                 ]
               },
               {
@@ -218,31 +490,40 @@ var SCORE_BEHAVIOR = {
                 to: "Active",
                 event: "COMBO_BREAK",
                 effects: [
+                  ["fetch", "ScoreData"],
                   ["set", "@entity.comboCount", 0],
-                  ["set", "@entity.multiplier", 1]
+                  ["set", "@entity.multiplier", 1],
+                  scoreCanvasView,
+                  scoreOverlayView
                 ]
               },
               {
                 from: "Active",
                 to: "Active",
                 event: "RESET",
+                guard: [">", "@entity.currentScore", "@entity.highScore"],
                 effects: [
-                  [
-                    "if",
-                    [">", "@entity.currentScore", "@entity.highScore"],
-                    ["set", "@entity.highScore", "@entity.currentScore"]
-                  ],
-                  ["emit", "INIT"]
+                  ["fetch", "ScoreData"],
+                  ["set", "@entity.highScore", "@entity.currentScore"],
+                  ["set", "@entity.currentScore", 0],
+                  ["set", "@entity.comboCount", 0],
+                  ["set", "@entity.multiplier", 1],
+                  scoreCanvasView,
+                  scoreOverlayView
                 ]
               },
               {
                 from: "Active",
                 to: "Active",
-                event: "SAVE_HIGH_SCORE",
-                guard: [">", "@entity.currentScore", "@entity.highScore"],
+                event: "RESET",
+                guard: ["<=", "@entity.currentScore", "@entity.highScore"],
                 effects: [
-                  ["set", "@entity.highScore", "@entity.currentScore"],
-                  ["persist", "update", "HighScore", { score: "@entity.highScore" }]
+                  ["fetch", "ScoreData"],
+                  ["set", "@entity.currentScore", 0],
+                  ["set", "@entity.comboCount", 0],
+                  ["set", "@entity.multiplier", 1],
+                  scoreCanvasView,
+                  scoreOverlayView
                 ]
               }
             ]
@@ -252,12 +533,22 @@ var SCORE_BEHAVIOR = {
               name: "ComboTimeout",
               interval: "frame",
               guard: ["and", [">", "@entity.comboCount", 0], [">", ["-", "@now", "@entity.lastScoreTime"], "@entity.comboTimeWindow"]],
-              effects: [["emit", "COMBO_BREAK"]]
+              effects: [
+                ["set", "@entity.comboCount", 0],
+                ["set", "@entity.multiplier", 1]
+              ]
             }
           ]
         }
       ],
-      pages: []
+      pages: [
+        {
+          name: "ScorePage",
+          path: "/score",
+          isInitial: true,
+          traits: [{ ref: "Score" }]
+        }
+      ]
     }
   ]
 };
@@ -268,8 +559,9 @@ var MOVEMENT_BEHAVIOR = {
   orbitals: [
     {
       name: "MovementOrbital",
+      theme: GAME_ENTITY_THEME,
       entity: {
-        name: "MovementState",
+        name: "MovementData",
         persistence: "runtime",
         fields: [
           { name: "id", type: "string", required: true },
@@ -279,13 +571,13 @@ var MOVEMENT_BEHAVIOR = {
           { name: "facingRight", type: "boolean", default: true },
           { name: "canJump", type: "boolean", default: true },
           { name: "moveSpeed", type: "number", default: 5 },
-          { name: "jumpForce", type: "number", default: -15 }
+          { name: "jumpForce", type: "number", default: 15 }
         ]
       },
       traits: [
         {
           name: "Movement",
-          linkedEntity: "MovementState",
+          linkedEntity: "MovementData",
           category: "interaction",
           stateMachine: {
             states: [
@@ -295,37 +587,88 @@ var MOVEMENT_BEHAVIOR = {
               { name: "Falling" }
             ],
             events: [
-              { key: "MOVE", name: "Move" },
+              { key: "INIT", name: "Initialize" },
+              {
+                key: "MOVE_RIGHT",
+                name: "Move Right"
+              },
+              {
+                key: "MOVE_LEFT",
+                name: "Move Left"
+              },
               { key: "STOP", name: "Stop" },
               { key: "JUMP", name: "Jump" },
-              { key: "LAND", name: "Land" }
+              { key: "LAND", name: "Land" },
+              { key: "FALL", name: "Fall" }
             ],
             transitions: [
               {
                 from: "Idle",
+                to: "Idle",
+                event: "INIT",
+                effects: [
+                  ["fetch", "MovementData"],
+                  ["set", "@entity.x", 0],
+                  ["set", "@entity.y", 0],
+                  ["set", "@entity.direction", 0],
+                  ["set", "@entity.facingRight", true],
+                  ["set", "@entity.canJump", true],
+                  movementCanvasView,
+                  movementOverlayView
+                ]
+              },
+              {
+                from: "Idle",
+                to: "Moving",
+                event: "MOVE_RIGHT",
+                effects: [
+                  ["fetch", "MovementData"],
+                  ["set", "@entity.direction", 1],
+                  ["set", "@entity.facingRight", true],
+                  movementCanvasView,
+                  movementOverlayView
+                ]
+              },
+              {
+                from: "Idle",
+                to: "Moving",
+                event: "MOVE_LEFT",
+                effects: [
+                  ["fetch", "MovementData"],
+                  ["set", "@entity.direction", -1],
+                  ["set", "@entity.facingRight", false],
+                  movementCanvasView,
+                  movementOverlayView
+                ]
+              },
+              {
+                from: "Moving",
                 to: "Moving",
-                event: "MOVE",
+                event: "MOVE_RIGHT",
                 effects: [
-                  ["set", "@entity.direction", "@payload.direction"],
-                  ["if", [">", "@payload.direction", 0], ["set", "@entity.facingRight", true]],
-                  ["if", ["<", "@payload.direction", 0], ["set", "@entity.facingRight", false]]
+                  ["set", "@entity.direction", 1],
+                  ["set", "@entity.facingRight", true]
                 ]
               },
               {
                 from: "Moving",
                 to: "Moving",
-                event: "MOVE",
+                event: "MOVE_LEFT",
                 effects: [
-                  ["set", "@entity.direction", "@payload.direction"],
-                  ["if", [">", "@payload.direction", 0], ["set", "@entity.facingRight", true]],
-                  ["if", ["<", "@payload.direction", 0], ["set", "@entity.facingRight", false]]
+                  ["set", "@entity.direction", -1],
+                  ["set", "@entity.facingRight", false]
                 ]
               },
               {
                 from: "Moving",
                 to: "Idle",
                 event: "STOP",
-                effects: [["set", "@entity.direction", 0]]
+                effects: [
+                  ["fetch", "MovementData"],
+                  ["set", "@entity.direction", 0],
+                  movementCanvasView,
+                  movementOverlayView
+                ]
               },
               {
                 from: "Idle",
@@ -333,8 +676,11 @@ var MOVEMENT_BEHAVIOR = {
                 event: "JUMP",
                 guard: "@entity.canJump",
                 effects: [
+                  ["fetch", "MovementData"],
                   ["set", "@entity.canJump", false],
-                  ["emit", "APPLY_FORCE", { fx: 0, fy: "@entity.jumpForce" }]
+                  ["set", "@entity.y", ["-", "@entity.y", "@entity.jumpForce"]],
+                  movementCanvasView,
+                  movementOverlayView
                 ]
               },
               {
@@ -344,16 +690,25 @@ var MOVEMENT_BEHAVIOR = {
                 guard: "@entity.canJump",
                 effects: [
                   ["set", "@entity.canJump", false],
-                  ["emit", "APPLY_FORCE", { fx: 0, fy: "@entity.jumpForce" }]
+                  ["set", "@entity.y", ["-", "@entity.y", "@entity.jumpForce"]]
                 ]
               },
+              {
+                from: "Jumping",
+                to: "Falling",
+                event: "FALL",
+                effects: []
+              },
               {
                 from: "Jumping",
                 to: "Idle",
                 event: "LAND",
                 effects: [
+                  ["fetch", "MovementData"],
                   ["set", "@entity.canJump", true],
-                  ["if", ["!=", "@entity.direction", 0], ["emit", "MOVE", { direction: "@entity.direction" }]]
+                  ["set", "@entity.direction", 0],
+                  movementCanvasView,
+                  movementOverlayView
                 ]
               },
               {
@@ -361,8 +716,11 @@ var MOVEMENT_BEHAVIOR = {
                 to: "Idle",
                 event: "LAND",
                 effects: [
+                  ["fetch", "MovementData"],
                   ["set", "@entity.canJump", true],
-                  ["if", ["!=", "@entity.direction", 0], ["emit", "MOVE", { direction: "@entity.direction" }]]
+                  ["set", "@entity.direction", 0],
+                  movementCanvasView,
+                  movementOverlayView
                 ]
               }
             ]
@@ -379,7 +737,14 @@ var MOVEMENT_BEHAVIOR = {
           ]
         }
       ],
-      pages: []
+      pages: [
+        {
+          name: "MovementPage",
+          path: "/movement",
+          isInitial: true,
+          traits: [{ ref: "Movement" }]
+        }
+      ]
     }
   ]
 };
@@ -390,25 +755,24 @@ var COMBAT_BEHAVIOR = {
   orbitals: [
     {
       name: "CombatOrbital",
+      theme: GAME_ENTITY_THEME,
       entity: {
-        name: "CombatState",
+        name: "CombatData",
         persistence: "runtime",
         fields: [
           { name: "id", type: "string", required: true },
           { name: "isAttacking", type: "boolean", default: false },
           { name: "attackStartTime", type: "number", default: 0 },
-          { name: "hitEntities", type: "array", default: [] },
           { name: "attackDamage", type: "number", default: 10 },
           { name: "attackDuration", type: "number", default: 300 },
           { name: "cooldownDuration", type: "number", default: 500 },
-          { name: "hitboxOffset", type: "object", default: { x: 20, y: 0 } },
-          { name: "hitboxSize", type: "object", default: { width: 30, height: 30 } }
+          { name: "hitCount", type: "number", default: 0 }
         ]
       },
       traits: [
         {
           name: "Combat",
-          linkedEntity: "CombatState",
+          linkedEntity: "CombatData",
           category: "interaction",
           stateMachine: {
             states: [
@@ -417,43 +781,63 @@ var COMBAT_BEHAVIOR = {
               { name: "Cooldown" }
             ],
             events: [
+              { key: "INIT", name: "Initialize" },
               { key: "ATTACK", name: "Attack" },
               { key: "ATTACK_END", name: "Attack End" },
-              { key: "HIT_CONNECT", name: "Hit Connect" },
               { key: "COOLDOWN_END", name: "Cooldown End" }
             ],
             transitions: [
               {
                 from: "Ready",
-                to: "Attacking",
-                event: "ATTACK",
+                to: "Ready",
+                event: "INIT",
                 effects: [
-                  ["set", "@entity.isAttacking", true],
-                  ["set", "@entity.attackStartTime", "@now"],
-                  ["set", "@entity.hitEntities", []]
+                  ["fetch", "CombatData"],
+                  ["set", "@entity.isAttacking", false],
+                  ["set", "@entity.hitCount", 0],
+                  ["set", "@entity.attackStartTime", 0],
+                  combatCanvasView,
+                  combatLogOverlay,
+                  combatHudOverlay
                 ]
               },
               {
-                from: "Attacking",
+                from: "Ready",
                 to: "Attacking",
-                event: "HIT_CONNECT",
-                guard: ["not", ["array/includes", "@entity.hitEntities", "@payload.entityId"]],
+                event: "ATTACK",
                 effects: [
-                  ["set", "@entity.hitEntities", ["array/append", "@entity.hitEntities", "@payload.entityId"]],
-                  ["emit", "DAMAGE", { target: "@payload.entityId", amount: "@entity.attackDamage" }]
+                  ["fetch", "CombatData"],
+                  ["set", "@entity.isAttacking", true],
+                  ["set", "@entity.attackStartTime", "@now"],
+                  combatCanvasView,
+                  combatLogOverlay,
+                  combatHudOverlay,
+                  combatAttackEffect
                 ]
               },
               {
                 from: "Attacking",
                 to: "Cooldown",
                 event: "ATTACK_END",
-                effects: [["set", "@entity.isAttacking", false]]
+                effects: [
+                  ["fetch", "CombatData"],
+                  ["set", "@entity.isAttacking", false],
+                  ["set", "@entity.hitCount", ["+", "@entity.hitCount", 1]],
+                  combatCanvasView,
+                  combatLogOverlay,
+                  combatHudOverlay
+                ]
               },
               {
                 from: "Cooldown",
                 to: "Ready",
                 event: "COOLDOWN_END",
-                effects: []
+                effects: [
+                  ["fetch", "CombatData"],
+                  combatCanvasView,
+                  combatLogOverlay,
+                  combatHudOverlay
+                ]
               }
             ]
           },
@@ -462,18 +846,21 @@ var COMBAT_BEHAVIOR = {
               name: "AttackDuration",
               interval: "frame",
               guard: ["and", "@entity.isAttacking", [">", ["-", "@now", "@entity.attackStartTime"], "@entity.attackDuration"]],
-              effects: [["emit", "ATTACK_END"]]
-            },
-            {
-              name: "CooldownTimer",
-              interval: "frame",
-              guard: ["and", ["=", "@state", "Cooldown"], [">", ["-", "@now", "@entity.attackStartTime"], ["+", "@entity.attackDuration", "@entity.cooldownDuration"]]],
-              effects: [["emit", "COOLDOWN_END"]]
+              effects: [
+                ["set", "@entity.isAttacking", false]
+              ]
             }
           ]
         }
       ],
-      pages: []
+      pages: [
+        {
+          name: "CombatPage",
+          path: "/combat",
+          isInitial: true,
+          traits: [{ ref: "Combat" }]
+        }
+      ]
     }
   ]
 };
@@ -484,179 +871,99 @@ var INVENTORY_BEHAVIOR = {
   orbitals: [
     {
       name: "InventoryOrbital",
+      theme: GAME_ENTITY_THEME,
       entity: {
-        name: "InventoryState",
+        name: "InventoryItem",
         persistence: "runtime",
         fields: [
           { name: "id", type: "string", required: true },
-          { name: "x", type: "number", default: 0 },
-          { name: "y", type: "number", default: 0 },
-          { name: "items", type: "array", default: [] },
-          { name: "selectedSlot", type: "number", default: 0 },
-          { name: "isOpen", type: "boolean", default: false },
-          { name: "equipped", type: "object", default: {} },
-          { name: "maxSlots", type: "number", default: 20 }
+          { name: "name", type: "string", default: "" },
+          { name: "quantity", type: "number", default: 1 },
+          { name: "slot", type: "number", default: 0 },
+          { name: "isEquipped", type: "boolean", default: false }
         ]
       },
       traits: [
         {
-          name: "Inventory",
-          linkedEntity: "InventoryState",
+          name: "InventoryManagement",
+          linkedEntity: "InventoryItem",
           category: "interaction",
           stateMachine: {
             states: [
-              { name: "Empty", isInitial: true },
-              { name: "HasItems" },
-              { name: "Full" }
+              { name: "browsing", isInitial: true },
+              { name: "viewing" }
             ],
             events: [
-              { key: "COLLECT", name: "Collect" },
-              { key: "USE", name: "Use" },
-              { key: "DROP", name: "Drop" },
-              { key: "EQUIP", name: "Equip" },
-              { key: "UNEQUIP", name: "Unequip" },
-              { key: "OPEN", name: "Open" },
-              { key: "CLOSE", name: "Close" },
-              { key: "INVENTORY_EMPTY", name: "Inventory Empty" }
-            ],
-            transitions: [
+              { key: "INIT", name: "Initialize" },
               {
-                from: "Empty",
-                to: "HasItems",
-                event: "COLLECT",
-                guard: ["<", ["array/len", "@entity.items"], "@entity.maxSlots"],
-                effects: [
-                  ["set", "@entity.items", ["array/append", "@entity.items", "@payload.item"]],
-                  ["notify", "in_app", ["str/concat", "Collected ", "@payload.item.name"]]
-                ]
-              },
-              {
-                from: "HasItems",
-                to: "HasItems",
-                event: "COLLECT",
-                guard: ["<", ["array/len", "@entity.items"], "@entity.maxSlots"],
-                effects: [
-                  ["set", "@entity.items", ["array/append", "@entity.items", "@payload.item"]],
-                  ["notify", "in_app", ["str/concat", "Collected ", "@payload.item.name"]]
-                ]
+                key: "SELECT",
+                name: "Select Item",
+                payloadSchema: [{ name: "itemId", type: "string", required: true }]
               },
+              { key: "BACK", name: "Back to List" },
+              { key: "EQUIP", name: "Equip Item" },
+              { key: "UNEQUIP", name: "Unequip Item" }
+            ],
+            transitions: [
               {
-                from: "HasItems",
-                to: "HasItems",
-                event: "USE",
+                from: "browsing",
+                to: "browsing",
+                event: "INIT",
                 effects: [
-                  [
-                    "let",
-                    [["item", ["array/nth", "@entity.items", "@payload.slot"]]],
-                    ["if", "@item.onUse", ["emit", "@item.onUse", { item: "@item" }]],
-                    [
-                      "if",
-                      "@item.consumable",
-                      ["set", "@entity.items", ["array/filter", "@entity.items", ["fn", "i", "idx", ["!=", "@idx", "@payload.slot"]]]]
-                    ]
-                  ],
-                  ["if", ["=", ["array/len", "@entity.items"], 0], ["emit", "INVENTORY_EMPTY"]]
+                  ["fetch", "InventoryItem"],
+                  inventoryBrowseView
                 ]
               },
               {
-                from: "HasItems",
-                to: "HasItems",
-                event: "DROP",
+                from: "browsing",
+                to: "viewing",
+                event: "SELECT",
                 effects: [
-                  [
-                    "let",
-                    [["item", ["array/nth", "@entity.items", "@payload.slot"]]],
-                    ["set", "@entity.items", ["array/filter", "@entity.items", ["fn", "i", "idx", ["!=", "@idx", "@payload.slot"]]]],
-                    ["emit", "ITEM_DROPPED", { item: "@item", position: { x: "@entity.x", y: "@entity.y" } }]
-                  ],
-                  ["if", ["=", ["array/len", "@entity.items"], 0], ["emit", "INVENTORY_EMPTY"]]
+                  ["fetch", "InventoryItem"],
+                  inventoryDetailView
                 ]
               },
               {
-                from: "HasItems",
-                to: "Empty",
-                event: "INVENTORY_EMPTY",
-                effects: []
-              },
-              {
-                from: "Empty",
-                to: "Empty",
-                event: "EQUIP",
+                from: "viewing",
+                to: "browsing",
+                event: "BACK",
                 effects: [
-                  ["set", "@entity.equipped", ["object/set", "@entity.equipped", "@payload.slot", "@payload.item"]],
-                  ["emit", "STATS_UPDATED", { equipped: "@entity.equipped" }]
+                  ["fetch", "InventoryItem"],
+                  inventoryBrowseView
                 ]
               },
               {
-                from: "HasItems",
-                to: "HasItems",
+                from: "viewing",
+                to: "viewing",
                 event: "EQUIP",
                 effects: [
-                  ["set", "@entity.equipped", ["object/set", "@entity.equipped", "@payload.slot", "@payload.item"]],
-                  ["emit", "STATS_UPDATED", { equipped: "@entity.equipped" }]
+                  ["fetch", "InventoryItem"],
+                  ["set", "@entity.isEquipped", true],
+                  inventoryDetailView
                 ]
               },
               {
-                from: "Empty",
-                to: "Empty",
+                from: "viewing",
+                to: "viewing",
                 event: "UNEQUIP",
                 effects: [
-                  ["set", "@entity.equipped", ["object/remove", "@entity.equipped", "@payload.slot"]],
-                  ["emit", "STATS_UPDATED", { equipped: "@entity.equipped" }]
+                  ["fetch", "InventoryItem"],
+                  ["set", "@entity.isEquipped", false],
+                  inventoryDetailView
                 ]
-              },
-              {
-                from: "HasItems",
-                to: "HasItems",
-                event: "UNEQUIP",
-                effects: [
-                  ["set", "@entity.equipped", ["object/remove", "@entity.equipped", "@payload.slot"]],
-                  ["emit", "STATS_UPDATED", { equipped: "@entity.equipped" }]
-                ]
-              },
-              {
-                from: "Empty",
-                to: "Empty",
-                event: "OPEN",
-                effects: [
-                  ["render-ui", "modal", {
-                    type: "modal",
-                    title: "Inventory",
-                    isOpen: "@entity.isOpen",
-                    onClose: "CLOSE"
-                  }]
-                ]
-              },
-              {
-                from: "HasItems",
-                to: "HasItems",
-                event: "OPEN",
-                effects: [
-                  ["render-ui", "modal", {
-                    type: "modal",
-                    title: "Inventory",
-                    isOpen: "@entity.isOpen",
-                    onClose: "CLOSE"
-                  }]
-                ]
-              },
-              {
-                from: "Empty",
-                to: "Empty",
-                event: "CLOSE",
-                effects: [["set", "@entity.isOpen", false]]
-              },
-              {
-                from: "HasItems",
-                to: "HasItems",
-                event: "CLOSE",
-                effects: [["set", "@entity.isOpen", false]]
               }
             ]
           }
         }
       ],
-      pages: []
+      pages: [
+        {
+          name: "InventoryPage",
+          path: "/inventory",
+          isInitial: true,
+          traits: [{ ref: "InventoryManagement" }]
+        }
+      ]
     }
   ]
 };