@almadar/std 2.1.1 → 2.4.1

package/dist/behaviors/game-core.js

@@ -1,4 +1,223 @@
 // behaviors/game-core.ts
+var GAME_CORE_THEME = {
+  name: "game-core-cyan",
+  tokens: {
+    colors: {
+      primary: "#0891b2",
+      "primary-hover": "#0e7490",
+      "primary-foreground": "#ffffff",
+      accent: "#06b6d4",
+      "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"
+  },
+  features: {
+    gold_mine: "/world-map/gold_mine.png",
+    portal: "/world-map/portal_open.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 gameLoopCanvasView = ["render-ui", "main", {
+  type: "isometric-canvas",
+  tiles: TILES_5X5,
+  units: [{ id: "player", x: 2, y: 2, unitType: "guardian" }],
+  scale: 0.5,
+  boardWidth: 5,
+  boardHeight: 5,
+  enableCamera: true,
+  assetBaseUrl: KFLOW_ASSETS,
+  assetManifest: GAME_MANIFEST,
+  tileClickEvent: "START"
+}];
+var gameLoopHudView = ["render-ui", "overlay", {
+  type: "stack",
+  direction: "vertical",
+  gap: "sm",
+  children: [
+    { type: "game-hud", position: "top", elements: [
+      { label: "Frame", value: "@entity.frameCount", icon: "hash" },
+      { label: "Delta", value: "@entity.deltaTime", icon: "clock" },
+      { label: "Elapsed", value: "@entity.elapsedTime", icon: "timer" }
+    ] },
+    { type: "stack", direction: "horizontal", gap: "sm", children: [
+      { type: "button", label: "Start", action: "START", icon: "play", variant: "primary" },
+      { type: "button", label: "Pause", action: "PAUSE", icon: "pause", variant: "secondary" },
+      { type: "button", label: "Stop", action: "STOP", icon: "square", variant: "destructive" }
+    ] }
+  ]
+}];
+var physicsCanvasView = ["render-ui", "main", {
+  type: "simulation-canvas",
+  preset: "projectile",
+  running: true,
+  width: 600,
+  height: 400
+}];
+var physicsHudView = ["render-ui", "overlay", {
+  type: "stack",
+  direction: "vertical",
+  gap: "sm",
+  children: [
+    { type: "stack", direction: "horizontal", gap: "sm", children: [
+      { type: "badge", label: "X", value: "@entity.x", icon: "move-horizontal" },
+      { type: "badge", label: "Y", value: "@entity.y", icon: "move-vertical" },
+      { type: "badge", label: "VX", value: "@entity.vx", icon: "arrow-right" },
+      { type: "badge", label: "VY", value: "@entity.vy", icon: "arrow-down" }
+    ] },
+    { type: "stack", direction: "horizontal", gap: "sm", children: [
+      { type: "button", label: "Apply Force", action: "APPLY_FORCE", icon: "zap", variant: "primary" },
+      { type: "button", label: "Freeze", action: "FREEZE", icon: "snowflake", variant: "secondary" }
+    ] }
+  ]
+}];
+var physicsFrozenCanvasView = ["render-ui", "main", {
+  type: "simulation-canvas",
+  preset: "projectile",
+  running: false,
+  width: 600,
+  height: 400
+}];
+var physicsFrozenHudView = ["render-ui", "overlay", {
+  type: "stack",
+  direction: "vertical",
+  gap: "sm",
+  children: [
+    { type: "stack", direction: "horizontal", gap: "sm", children: [
+      { type: "badge", label: "X", value: "@entity.x", icon: "move-horizontal" },
+      { type: "badge", label: "Y", value: "@entity.y", icon: "move-vertical" },
+      { type: "badge", label: "VX", value: "@entity.vx", icon: "arrow-right" },
+      { type: "badge", label: "VY", value: "@entity.vy", icon: "arrow-down" }
+    ] },
+    { type: "stack", direction: "horizontal", gap: "sm", children: [
+      { type: "button", label: "Unfreeze", action: "UNFREEZE", icon: "flame", variant: "primary" }
+    ] }
+  ]
+}];
+var inputCanvasView = ["render-ui", "main", {
+  type: "isometric-canvas",
+  tiles: TILES_5X5,
+  units: [{ id: "cursor", x: 2, y: 2, unitType: "breaker" }],
+  scale: 0.5,
+  boardWidth: 5,
+  boardHeight: 5,
+  enableCamera: true,
+  assetBaseUrl: KFLOW_ASSETS,
+  assetManifest: GAME_MANIFEST
+}];
+var inputHudView = ["render-ui", "overlay", {
+  type: "stack",
+  direction: "vertical",
+  gap: "sm",
+  children: [
+    { type: "stack", direction: "horizontal", gap: "sm", children: [
+      { type: "badge", label: "Key Down", value: "@entity.lastKeyDown", icon: "arrow-down-circle" },
+      { type: "badge", label: "Key Up", value: "@entity.lastKeyUp", icon: "arrow-up-circle" },
+      { type: "badge", label: "Active", value: "@entity.isActive", icon: "activity" }
+    ] },
+    { type: "stack", direction: "horizontal", gap: "sm", children: [
+      { type: "button", label: "Reset", action: "RESET", icon: "rotate-ccw", variant: "secondary" }
+    ] }
+  ]
+}];
+var collisionCanvasView = ["render-ui", "main", {
+  type: "isometric-canvas",
+  tiles: TILES_5X5,
+  units: [],
+  scale: 0.5,
+  boardWidth: 5,
+  boardHeight: 5,
+  enableCamera: true,
+  assetBaseUrl: KFLOW_ASSETS,
+  assetManifest: GAME_MANIFEST
+}];
+var collisionHudView = ["render-ui", "overlay", {
+  type: "stack",
+  direction: "vertical",
+  gap: "sm",
+  children: [
+    { type: "stack", direction: "horizontal", gap: "sm", children: [
+      { type: "badge", label: "Colliding", value: "@entity.isColliding", icon: "alert-triangle" },
+      { type: "badge", label: "Last Hit", value: "@entity.lastCollisionId", icon: "target" }
+    ] },
+    { type: "stack", direction: "horizontal", gap: "sm", children: [
+      { type: "button", label: "Clear", action: "CLEAR", icon: "x-circle", variant: "secondary" },
+      { type: "button", label: "Disable", action: "DISABLE", icon: "circle-off", variant: "destructive" }
+    ] }
+  ]
+}];
+var collisionHitEffectView = ["render-ui", "overlay", {
+  type: "canvas-effect",
+  actionType: "hit",
+  x: 200,
+  y: 200,
+  duration: 600
+}];
+var collisionDisabledCanvasView = ["render-ui", "main", {
+  type: "isometric-canvas",
+  tiles: TILES_5X5,
+  units: [],
+  scale: 0.5,
+  boardWidth: 5,
+  boardHeight: 5,
+  enableCamera: true,
+  assetBaseUrl: KFLOW_ASSETS,
+  assetManifest: GAME_MANIFEST
+}];
+var collisionDisabledHudView = ["render-ui", "overlay", {
+  type: "stack",
+  direction: "vertical",
+  gap: "sm",
+  children: [
+    { type: "stack", direction: "horizontal", gap: "sm", children: [
+      { type: "badge", label: "Colliding", value: "@entity.isColliding", icon: "alert-triangle" },
+      { type: "badge", label: "Last Hit", value: "@entity.lastCollisionId", icon: "target" }
+    ] },
+    { type: "stack", direction: "horizontal", gap: "sm", children: [
+      { type: "button", label: "Enable", action: "ENABLE", icon: "circle-dot", variant: "primary" }
+    ] }
+  ]
+}];
 var GAME_LOOP_BEHAVIOR = {
   name: "std-gameloop",
   version: "1.0.0",
@@ -6,20 +225,22 @@ var GAME_LOOP_BEHAVIOR = {
   orbitals: [
     {
       name: "GameLoopOrbital",
+      theme: GAME_CORE_THEME,
       entity: {
-        name: "GameLoopState",
+        name: "GameLoopData",
         persistence: "runtime",
         fields: [
           { name: "id", type: "string", required: true },
           { name: "frameCount", type: "number", default: 0 },
           { name: "deltaTime", type: "number", default: 16 },
-          { name: "elapsedTime", type: "number", default: 0 }
+          { name: "elapsedTime", type: "number", default: 0 },
+          { name: "status", type: "string", default: "stopped" }
         ]
       },
       traits: [
         {
           name: "GameLoop",
-          linkedEntity: "GameLoopState",
+          linkedEntity: "GameLoopData",
           category: "interaction",
           stateMachine: {
             states: [
@@ -28,45 +249,82 @@ var GAME_LOOP_BEHAVIOR = {
               { name: "Paused" }
             ],
             events: [
+              { key: "INIT", name: "Initialize" },
               { key: "START", name: "Start" },
               { key: "STOP", name: "Stop" },
               { key: "PAUSE", name: "Pause" },
-              { key: "RESUME", name: "Resume" },
-              { key: "TICK", name: "Tick" }
+              { key: "RESUME", name: "Resume" }
             ],
             transitions: [
+              {
+                from: "Stopped",
+                to: "Stopped",
+                event: "INIT",
+                effects: [
+                  ["fetch", "GameLoopData"],
+                  ["set", "@entity.frameCount", 0],
+                  ["set", "@entity.elapsedTime", 0],
+                  ["set", "@entity.status", "stopped"],
+                  gameLoopCanvasView,
+                  gameLoopHudView
+                ]
+              },
               {
                 from: "Stopped",
                 to: "Running",
                 event: "START",
                 effects: [
+                  ["fetch", "GameLoopData"],
                   ["set", "@entity.frameCount", 0],
-                  ["set", "@entity.elapsedTime", 0]
+                  ["set", "@entity.elapsedTime", 0],
+                  ["set", "@entity.status", "running"],
+                  gameLoopCanvasView,
+                  gameLoopHudView
                 ]
               },
               {
                 from: "Running",
                 to: "Paused",
                 event: "PAUSE",
-                effects: []
+                effects: [
+                  ["fetch", "GameLoopData"],
+                  ["set", "@entity.status", "paused"],
+                  gameLoopCanvasView,
+                  gameLoopHudView
+                ]
               },
               {
                 from: "Paused",
                 to: "Running",
                 event: "RESUME",
-                effects: []
+                effects: [
+                  ["fetch", "GameLoopData"],
+                  ["set", "@entity.status", "running"],
+                  gameLoopCanvasView,
+                  gameLoopHudView
+                ]
               },
               {
                 from: "Running",
                 to: "Stopped",
                 event: "STOP",
-                effects: []
+                effects: [
+                  ["fetch", "GameLoopData"],
+                  ["set", "@entity.status", "stopped"],
+                  gameLoopCanvasView,
+                  gameLoopHudView
+                ]
               },
               {
                 from: "Paused",
                 to: "Stopped",
                 event: "STOP",
-                effects: []
+                effects: [
+                  ["fetch", "GameLoopData"],
+                  ["set", "@entity.status", "stopped"],
+                  gameLoopCanvasView,
+                  gameLoopHudView
+                ]
               }
             ]
           },
@@ -77,14 +335,20 @@ var GAME_LOOP_BEHAVIOR = {
               guard: ["=", "@state", "Running"],
               effects: [
                 ["set", "@entity.frameCount", ["+", "@entity.frameCount", 1]],
-                ["set", "@entity.elapsedTime", ["+", "@entity.elapsedTime", "@entity.deltaTime"]],
-                ["emit", "GAME_TICK", { frame: "@entity.frameCount", delta: "@entity.deltaTime" }]
+                ["set", "@entity.elapsedTime", ["+", "@entity.elapsedTime", "@entity.deltaTime"]]
               ]
             }
           ]
         }
       ],
-      pages: []
+      pages: [
+        {
+          name: "GameLoopPage",
+          path: "/game-loop",
+          isInitial: true,
+          traits: [{ ref: "GameLoop" }]
+        }
+      ]
     }
   ]
 };
@@ -95,8 +359,9 @@ var PHYSICS_2D_BEHAVIOR = {
   orbitals: [
     {
       name: "Physics2DOrbital",
+      theme: GAME_CORE_THEME,
       entity: {
-        name: "Physics2DState",
+        name: "Physics2DData",
         persistence: "runtime",
         fields: [
           { name: "id", type: "string", required: true },
@@ -104,8 +369,9 @@ var PHYSICS_2D_BEHAVIOR = {
           { name: "y", type: "number", default: 0 },
           { name: "vx", type: "number", default: 0 },
           { name: "vy", type: "number", default: 0 },
+          { name: "fx", type: "number", default: 0 },
+          { name: "fy", type: "number", default: 0 },
           { name: "isGrounded", type: "boolean", default: false },
-          // Config fields (previously @config bindings)
           { name: "gravity", type: "number", default: 0.5 },
           { name: "friction", type: "number", default: 0.8 },
           { name: "airResistance", type: "number", default: 0.99 },
@@ -115,7 +381,7 @@ var PHYSICS_2D_BEHAVIOR = {
       traits: [
         {
           name: "Physics2D",
-          linkedEntity: "Physics2DState",
+          linkedEntity: "Physics2DData",
           category: "interaction",
           stateMachine: {
             states: [
@@ -124,7 +390,10 @@ var PHYSICS_2D_BEHAVIOR = {
             ],
             events: [
               { key: "INIT", name: "Initialize" },
-              { key: "APPLY_FORCE", name: "Apply Force" },
+              { key: "APPLY_FORCE", name: "Apply Force", payloadSchema: [
+                { name: "fx", type: "number", required: true },
+                { name: "fy", type: "number", required: true }
+              ] },
               { key: "GROUND_HIT", name: "Ground Hit" },
               { key: "FREEZE", name: "Freeze" },
               { key: "UNFREEZE", name: "Unfreeze" }
@@ -135,9 +404,12 @@ var PHYSICS_2D_BEHAVIOR = {
                 to: "Active",
                 event: "INIT",
                 effects: [
+                  ["fetch", "Physics2DData"],
                   ["set", "@entity.vx", 0],
                   ["set", "@entity.vy", 0],
-                  ["set", "@entity.isGrounded", false]
+                  ["set", "@entity.isGrounded", false],
+                  physicsCanvasView,
+                  physicsHudView
                 ]
               },
               {
@@ -145,9 +417,12 @@ var PHYSICS_2D_BEHAVIOR = {
                 to: "Active",
                 event: "INIT",
                 effects: [
+                  ["fetch", "Physics2DData"],
                   ["set", "@entity.vx", 0],
                   ["set", "@entity.vy", 0],
-                  ["set", "@entity.isGrounded", false]
+                  ["set", "@entity.isGrounded", false],
+                  physicsCanvasView,
+                  physicsHudView
                 ]
               },
               {
@@ -155,8 +430,11 @@ var PHYSICS_2D_BEHAVIOR = {
                 to: "Active",
                 event: "APPLY_FORCE",
                 effects: [
+                  ["fetch", "Physics2DData"],
                   ["set", "@entity.vx", ["+", "@entity.vx", "@payload.fx"]],
-                  ["set", "@entity.vy", ["+", "@entity.vy", "@payload.fy"]]
+                  ["set", "@entity.vy", ["+", "@entity.vy", "@payload.fy"]],
+                  physicsCanvasView,
+                  physicsHudView
                 ]
               },
               {
@@ -164,22 +442,33 @@ var PHYSICS_2D_BEHAVIOR = {
                 to: "Active",
                 event: "GROUND_HIT",
                 effects: [
+                  ["fetch", "Physics2DData"],
                   ["set", "@entity.isGrounded", true],
                   ["set", "@entity.vy", 0],
-                  ["set", "@entity.vx", ["*", "@entity.vx", "@entity.friction"]]
+                  ["set", "@entity.vx", ["*", "@entity.vx", "@entity.friction"]],
+                  physicsCanvasView,
+                  physicsHudView
                 ]
               },
               {
                 from: "Active",
                 to: "Frozen",
                 event: "FREEZE",
-                effects: []
+                effects: [
+                  ["fetch", "Physics2DData"],
+                  physicsFrozenCanvasView,
+                  physicsFrozenHudView
+                ]
               },
               {
                 from: "Frozen",
                 to: "Active",
                 event: "UNFREEZE",
-                effects: []
+                effects: [
+                  ["fetch", "Physics2DData"],
+                  physicsCanvasView,
+                  physicsHudView
+                ]
               }
             ]
           },
@@ -205,7 +494,14 @@ var PHYSICS_2D_BEHAVIOR = {
           ]
         }
       ],
-      pages: []
+      pages: [
+        {
+          name: "PhysicsPage",
+          path: "/physics",
+          isInitial: true,
+          traits: [{ ref: "Physics2D" }]
+        }
+      ]
     }
   ]
 };
@@ -216,47 +512,57 @@ var INPUT_BEHAVIOR = {
   orbitals: [
     {
       name: "InputOrbital",
+      theme: GAME_CORE_THEME,
       entity: {
-        name: "InputState",
+        name: "InputData",
         persistence: "runtime",
         fields: [
           { name: "id", type: "string", required: true },
-          { name: "left", type: "boolean", default: false },
-          { name: "right", type: "boolean", default: false },
-          { name: "up", type: "boolean", default: false },
-          { name: "down", type: "boolean", default: false },
-          { name: "jump", type: "boolean", default: false },
-          { name: "action", type: "boolean", default: false },
-          { name: "pause", type: "boolean", default: false }
+          { name: "lastKeyDown", type: "string", default: "" },
+          { name: "lastKeyUp", type: "string", default: "" },
+          { name: "isActive", type: "boolean", default: true }
         ]
       },
       traits: [
         {
           name: "Input",
-          linkedEntity: "InputState",
+          linkedEntity: "InputData",
           category: "interaction",
           stateMachine: {
             states: [{ name: "Ready", isInitial: true }],
             events: [
-              { key: "KEY_DOWN", name: "Key Down" },
-              { key: "KEY_UP", name: "Key Up" },
-              { key: "TOUCH_START", name: "Touch Start" },
-              { key: "TOUCH_END", name: "Touch End" },
+              { key: "INIT", name: "Initialize" },
+              { key: "KEY_DOWN", name: "Key Down", payloadSchema: [
+                { name: "key", type: "string", required: true }
+              ] },
+              { key: "KEY_UP", name: "Key Up", payloadSchema: [
+                { name: "key", type: "string", required: true }
+              ] },
               { key: "RESET", name: "Reset" }
             ],
             transitions: [
+              {
+                from: "Ready",
+                to: "Ready",
+                event: "INIT",
+                effects: [
+                  ["fetch", "InputData"],
+                  ["set", "@entity.lastKeyDown", ""],
+                  ["set", "@entity.lastKeyUp", ""],
+                  ["set", "@entity.isActive", true],
+                  inputCanvasView,
+                  inputHudView
+                ]
+              },
               {
                 from: "Ready",
                 to: "Ready",
                 event: "KEY_DOWN",
                 effects: [
-                  ["if", ["or", ["=", "@payload.key", "ArrowLeft"], ["=", "@payload.key", "a"]], ["set", "@entity.left", true]],
-                  ["if", ["or", ["=", "@payload.key", "ArrowRight"], ["=", "@payload.key", "d"]], ["set", "@entity.right", true]],
-                  ["if", ["or", ["=", "@payload.key", "ArrowUp"], ["=", "@payload.key", "w"]], ["set", "@entity.up", true]],
-                  ["if", ["or", ["=", "@payload.key", "ArrowDown"], ["=", "@payload.key", "s"]], ["set", "@entity.down", true]],
-                  ["if", ["=", "@payload.key", " "], ["set", "@entity.jump", true]],
-                  ["if", ["or", ["=", "@payload.key", "Enter"], ["=", "@payload.key", "e"]], ["set", "@entity.action", true]],
-                  ["if", ["or", ["=", "@payload.key", "Escape"], ["=", "@payload.key", "p"]], ["set", "@entity.pause", true]]
+                  ["fetch", "InputData"],
+                  ["set", "@entity.lastKeyDown", "@payload.key"],
+                  inputCanvasView,
+                  inputHudView
                 ]
               },
               {
@@ -264,13 +570,10 @@ var INPUT_BEHAVIOR = {
                 to: "Ready",
                 event: "KEY_UP",
                 effects: [
-                  ["if", ["or", ["=", "@payload.key", "ArrowLeft"], ["=", "@payload.key", "a"]], ["set", "@entity.left", false]],
-                  ["if", ["or", ["=", "@payload.key", "ArrowRight"], ["=", "@payload.key", "d"]], ["set", "@entity.right", false]],
-                  ["if", ["or", ["=", "@payload.key", "ArrowUp"], ["=", "@payload.key", "w"]], ["set", "@entity.up", false]],
-                  ["if", ["or", ["=", "@payload.key", "ArrowDown"], ["=", "@payload.key", "s"]], ["set", "@entity.down", false]],
-                  ["if", ["=", "@payload.key", " "], ["set", "@entity.jump", false]],
-                  ["if", ["or", ["=", "@payload.key", "Enter"], ["=", "@payload.key", "e"]], ["set", "@entity.action", false]],
-                  ["if", ["or", ["=", "@payload.key", "Escape"], ["=", "@payload.key", "p"]], ["set", "@entity.pause", false]]
+                  ["fetch", "InputData"],
+                  ["set", "@entity.lastKeyUp", "@payload.key"],
+                  inputCanvasView,
+                  inputHudView
                 ]
               },
               {
@@ -278,20 +581,25 @@ var INPUT_BEHAVIOR = {
                 to: "Ready",
                 event: "RESET",
                 effects: [
-                  ["set", "@entity.left", false],
-                  ["set", "@entity.right", false],
-                  ["set", "@entity.up", false],
-                  ["set", "@entity.down", false],
-                  ["set", "@entity.jump", false],
-                  ["set", "@entity.action", false],
-                  ["set", "@entity.pause", false]
+                  ["fetch", "InputData"],
+                  ["set", "@entity.lastKeyDown", ""],
+                  ["set", "@entity.lastKeyUp", ""],
+                  inputCanvasView,
+                  inputHudView
                 ]
               }
             ]
           }
         }
       ],
-      pages: []
+      pages: [
+        {
+          name: "InputPage",
+          path: "/input",
+          isInitial: true,
+          traits: [{ ref: "Input" }]
+        }
+      ]
     }
   ]
 };
@@ -302,22 +610,20 @@ var COLLISION_BEHAVIOR = {
   orbitals: [
     {
       name: "CollisionOrbital",
+      theme: GAME_CORE_THEME,
       entity: {
-        name: "CollisionState",
+        name: "CollisionData",
         persistence: "runtime",
         fields: [
           { name: "id", type: "string", required: true },
           { name: "isColliding", type: "boolean", default: false },
-          { name: "collidingWith", type: "array", default: [] },
-          // Config fields (previously @config bindings)
-          { name: "onCollision", type: "string", default: null },
-          { name: "onTrigger", type: "string", default: null }
+          { name: "lastCollisionId", type: "string", default: "" }
         ]
       },
       traits: [
         {
           name: "Collision",
-          linkedEntity: "CollisionState",
+          linkedEntity: "CollisionData",
           category: "interaction",
           stateMachine: {
             states: [
@@ -325,9 +631,11 @@ var COLLISION_BEHAVIOR = {
               { name: "Disabled" }
             ],
             events: [
-              { key: "COLLISION", name: "Collision" },
-              { key: "TRIGGER_ENTER", name: "Trigger Enter" },
-              { key: "TRIGGER_EXIT", name: "Trigger Exit" },
+              { key: "INIT", name: "Initialize" },
+              { key: "COLLISION", name: "Collision", payloadSchema: [
+                { name: "entityId", type: "string", required: true }
+              ] },
+              { key: "CLEAR", name: "Clear Collision" },
               { key: "ENABLE", name: "Enable" },
               { key: "DISABLE", name: "Disable" }
             ],
@@ -335,28 +643,38 @@ var COLLISION_BEHAVIOR = {
               {
                 from: "Active",
                 to: "Active",
-                event: "COLLISION",
+                event: "INIT",
                 effects: [
-                  ["set", "@entity.isColliding", true],
-                  ["set", "@entity.collidingWith", ["array/append", "@entity.collidingWith", "@payload.entityId"]],
-                  ["if", "@entity.onCollision", ["emit", "@entity.onCollision", { entityId: "@payload.entityId", side: "@payload.side" }]]
+                  ["fetch", "CollisionData"],
+                  ["set", "@entity.isColliding", false],
+                  ["set", "@entity.lastCollisionId", ""],
+                  collisionCanvasView,
+                  collisionHudView
                 ]
               },
               {
                 from: "Active",
                 to: "Active",
-                event: "TRIGGER_ENTER",
+                event: "COLLISION",
                 effects: [
-                  ["if", "@entity.onTrigger", ["emit", "@entity.onTrigger", { entityId: "@payload.entityId", action: "enter" }]]
+                  ["fetch", "CollisionData"],
+                  ["set", "@entity.isColliding", true],
+                  ["set", "@entity.lastCollisionId", "@payload.entityId"],
+                  collisionCanvasView,
+                  collisionHudView,
+                  collisionHitEffectView
                 ]
               },
               {
                 from: "Active",
                 to: "Active",
-                event: "TRIGGER_EXIT",
+                event: "CLEAR",
                 effects: [
-                  ["set", "@entity.collidingWith", ["array/filter", "@entity.collidingWith", ["fn", "id", ["!=", "@id", "@payload.entityId"]]]],
-                  ["if", ["=", ["array/len", "@entity.collidingWith"], 0], ["set", "@entity.isColliding", false]]
+                  ["fetch", "CollisionData"],
+                  ["set", "@entity.isColliding", false],
+                  ["set", "@entity.lastCollisionId", ""],
+                  collisionCanvasView,
+                  collisionHudView
                 ]
               },
               {
@@ -364,21 +682,35 @@ var COLLISION_BEHAVIOR = {
                 to: "Disabled",
                 event: "DISABLE",
                 effects: [
+                  ["fetch", "CollisionData"],
                   ["set", "@entity.isColliding", false],
-                  ["set", "@entity.collidingWith", []]
+                  ["set", "@entity.lastCollisionId", ""],
+                  collisionDisabledCanvasView,
+                  collisionDisabledHudView
                 ]
               },
               {
                 from: "Disabled",
                 to: "Active",
                 event: "ENABLE",
-                effects: []
+                effects: [
+                  ["fetch", "CollisionData"],
+                  collisionCanvasView,
+                  collisionHudView
+                ]
               }
             ]
           }
         }
       ],
-      pages: []
+      pages: [
+        {
+          name: "CollisionPage",
+          path: "/collision",
+          isInitial: true,
+          traits: [{ ref: "Collision" }]
+        }
+      ]
     }
   ]
 };