exodeui-react-native 1.0.0 → 1.0.1

package/src/engine.ts

@@ -1,14 +1,13 @@
 import { SkCanvas, SkImage, SkPaint, PaintStyle, Skia, SkPath, SkColor, BlurStyle, SkImageFilter, SkMaskFilter } from '@shopify/react-native-skia';
-import { Artboard, Animation, ShapeObject, StateMachine, State, Fit, Alignment, Layout } from './types';
-import Matter from 'matter-js';
+import { Artboard, Animation as SDKAnimation, ShapeObject, StateMachine, State, Fit, Alignment, Layout, LogicNode, LogicOp, Constraint, ComponentEvent } from './types';
+import { PhysicsEngine, MatterPhysics } from './physics';
 
 export class ExodeUIEngine {
   private artboard: Artboard | null = null;
   private objectStates: Map<string, any> = new Map();
   
   // Physics State
-  private physicsEngine: Matter.Engine | null = null;
-  private physicsBodies: Map<string, Matter.Body> = new Map();
+  private physicsEngine: PhysicsEngine | null = null;
 
   // State Machine State
   private activeStateMachine: StateMachine | null = null;
@@ -16,9 +15,9 @@ export class ExodeUIEngine {
   private inputNameMap: Map<string, string[]> = new Map(); // name -> id[] mapping
   private layerStates: Map<string, {
     currentStateIds: string[];
-    animation: Animation | null;
+    animations: { animation: SDKAnimation; state: State | null }[];
     time: number;
-    currentState: State | null;
+    duration: number;
   }> = new Map();
 
   private imageCache = new Map<string, SkImage>();
@@ -27,6 +26,22 @@ export class ExodeUIEngine {
   
   private onTrigger?: (triggerName: string, animationName: string) => void;
   private onInputUpdate?: (nameOrId: string, value: any) => void;
+  private onComponentChange?: (event: ComponentEvent) => void;
+
+  // Specific Component Listeners
+  private onToggle?: (name: string, checked: boolean) => void;
+  private onInputChange?: (name: string, text: string) => void;
+  private onInputFocus?: (name: string) => void;
+  private onInputBlur?: (name: string) => void;
+
+  // Track triggers that were just fired in the current frame
+  private justFiredTriggers: Set<string> = new Set();
+
+  // Interaction State
+  private focusedId: string | null = null;
+
+  // Physics/Animation State
+  private objectVelocities: Map<string, { vx: number; vy: number }> = new Map();
 
   setTriggerCallback(cb: (triggerName: string, animationName: string) => void) {
       this.onTrigger = cb;
@@ -36,6 +51,26 @@ export class ExodeUIEngine {
       this.onInputUpdate = cb;
   }
 
+  setComponentChangeCallback(cb: (event: ComponentEvent) => void) {
+      this.onComponentChange = cb;
+  }
+
+  setToggleCallback(cb: (name: string, checked: boolean) => void) {
+      this.onToggle = cb;
+  }
+
+  setInputChangeCallback(cb: (name: string, text: string) => void) {
+      this.onInputChange = cb;
+  }
+
+  setInputFocusCallback(cb: (name: string) => void) {
+      this.onInputFocus = cb;
+  }
+
+  setInputBlurCallback(cb: (name: string) => void) {
+      this.onInputBlur = cb;
+  }
+
   constructor() {}
 
   // Helper to update Map AND notify listener
@@ -55,81 +90,155 @@ export class ExodeUIEngine {
       return state ? state.currentStateIds : [];
   }
 
+  getObjectState(id: string): any {
+      return this.objectStates.get(id);
+  }
+
+
+  updateConstraint(objectId: string, index: number, properties: Partial<Constraint>) {
+      const obj = this.artboard?.objects.find(o => o.id === objectId);
+      if (obj && obj.constraints && obj.constraints[index]) {
+          obj.constraints[index] = { ...obj.constraints[index], ...properties } as any;
+          
+          // Clear velocity if spring is disabled or reset
+          if (properties.useSpring === false) {
+              this.objectVelocities.delete(objectId);
+          }
+      }
+  }
+
+  updateObjectOptions(id: string, newOptions: any) {
+    const state = this.objectStates.get(id);
+    if (state) {
+        state.options = { ...state.options, ...newOptions };
+    }
+  }
+
+  public updateGraphData(nameOrId: string, data: number[]) {
+    if (!this.artboard) return;
+    
+    // Find the graph object
+    const obj = this.artboard.objects.find(o => o.id === nameOrId || o.name === nameOrId);
+    if (obj && obj.geometry.type === 'LineGraph') {
+        const geo = obj.geometry as any;
+        
+        if (!geo.datasets || geo.datasets.length === 0) {
+            geo.datasets = [{
+                id: 'default',
+                label: 'Runtime Data',
+                data: data,
+                lineColor: '#3b82f6',
+                lineWidth: 2,
+                showArea: false
+            }];
+        } else {
+            geo.datasets[0].data = data;
+        }
+        
+        const state = this.objectStates.get(obj.id);
+        if (state && state.geometry && state.geometry.type === 'LineGraph') {
+            if (!state.geometry.datasets || state.geometry.datasets.length === 0) {
+                state.geometry.datasets = JSON.parse(JSON.stringify(geo.datasets));
+            } else {
+                state.geometry.datasets[0].data = [...data];
+            }
+        }
+
+        if (geo.datasets[0].inputId) {
+            this.updateInput(geo.datasets[0].inputId, data);
+        }
+    } else {
+        this.updateInput(nameOrId, data);
+    }
+  }
+
   load(data: Artboard) {
+    if (!data) {
+        console.warn('[ExodeUIEngine] Attempted to load null artboard');
+        return;
+    }
+    console.log(`[ExodeUIEngine] Loading artboard: ${data.name} (${data.width}x${data.height})`);
     this.artboard = data;
     this.reset();
+    this.advance(0);
   }
 
   reset() {
     if (!this.artboard) return;
     this.objectStates.clear();
+    this.objectVelocities.clear();
     this.inputs.clear();
     this.inputNameMap.clear();
     this.layerStates.clear();
-    this.physicsBodies.clear();
-    this.physicsEngine = null;
+    
+    if (this.physicsEngine) {
+      this.physicsEngine.destroy();
+      this.physicsEngine = null;
+    }
     
     // Initialize object states
-    this.artboard.objects.forEach((obj: ShapeObject) => {
-      // Deep copy initial state
-      this.objectStates.set(obj.id, {
-        ...obj.transform,
-        style: JSON.parse(JSON.stringify(obj.style || {})),
-        geometry: JSON.parse(JSON.stringify(obj.geometry || {}))
-      });
-    });
-
-    // Initialize Physics Engine if any object has physics enabled
-    const hasPhysics = this.artboard.objects.some(obj => obj.physics?.enabled);
-    if (hasPhysics) {
-        this.physicsEngine = Matter.Engine.create();
-        
-        // Configure Global Physics (Gravity)
-        if (this.artboard.physics) {
-            this.physicsEngine.gravity.x = this.artboard.physics.gravity.x;
-            this.physicsEngine.gravity.y = this.artboard.physics.gravity.y;
-        } else {
-             this.physicsEngine.gravity.y = 1; // Default
-        }
-
-        this.artboard.objects.forEach(obj => {
-            if (obj.physics?.enabled && obj.type === 'Shape') {
-                const state = this.objectStates.get(obj.id);
-                const w = (obj.geometry as any).width || 100;
-                const h = (obj.geometry as any).height || 100;
-                
-                const options: Matter.IChamferableBodyDefinition = {
-                    isStatic: obj.physics.bodyType === 'Static',
-                    label: obj.id,
-                    friction: obj.physics.friction,
-                    restitution: obj.physics.restitution,
-                    mass: obj.physics.mass,
-                    frictionAir: obj.physics.frictionAir,
-                    isSensor: obj.physics.isSensor,
-                    angle: state.rotation * (Math.PI / 180) // Convert deg to rad
-                };
-                
-                if (obj.physics.density) {
-                    options.density = obj.physics.density;
-                }
-
-                let body: Matter.Body | null = null;
-
-                if (obj.geometry.type === 'Rectangle' || obj.geometry.type === 'Image') {
-                     body = Matter.Bodies.rectangle(state.x, state.y, w, h, options);
-                } else if (obj.geometry.type === 'Ellipse') {
-                     const r = (w + h) / 4; 
-                     body = Matter.Bodies.circle(state.x, state.y, r, options);
-                } else {
-                     body = Matter.Bodies.rectangle(state.x, state.y, w, h, options);
-                }
+    if (this.artboard.objects) {
+        this.artboard.objects?.forEach((obj: ShapeObject) => {
+          // Deep copy initial state
+          const transform = obj.transform || { x: 0, y: 0, rotation: 0, scale_x: 1, scale_y: 1 };
+          this.objectStates.set(obj.id, {
+            x: transform.x ?? 0,
+            y: transform.y ?? 0,
+            rotation: transform.rotation ?? 0,
+            scale_x: transform.scale_x ?? 1,
+            scale_y: transform.scale_y ?? 1,
+            width: (obj as any).width || (obj.geometry as any).width || 100,
+            height: (obj as any).height || (obj.geometry as any).height || 100,
+            cornerRadius: (obj as any).cornerRadius ?? (obj as any).corner_radius ?? 0,
+            opacity: obj.opacity !== undefined ? obj.opacity : 1,
+            visible: obj.visible !== undefined ? obj.visible : (obj.isVisible !== undefined ? obj.isVisible : true),
+            blendMode: obj.blendMode || 'Normal',
+            style: JSON.parse(JSON.stringify(obj.style || {})),
+            geometry: JSON.parse(JSON.stringify(obj.geometry || {})),
+            options: (obj as any).options ? JSON.parse(JSON.stringify((obj as any).options)) : {}
+          });
+        });
 
-                if (body) {
-                    Matter.World.add(this.physicsEngine!.world, body);
-                    this.physicsBodies.set(obj.id, body);
+        // Initialize Physics Engine if any object has physics enabled
+        const hasPhysics = this.artboard.objects.some(obj => obj.physics?.enabled);
+        if (hasPhysics) {
+            this.physicsEngine = new MatterPhysics();
+            
+            const gravity = this.artboard.physics 
+            ? { x: this.artboard.physics.gravity.x, y: this.artboard.physics.gravity.y }
+            : { x: 0, y: 1 }; // Default
+            
+            this.physicsEngine.init(gravity).then(() => {
+            if (!this.physicsEngine) return;
+            
+            this.artboard?.objects?.forEach(obj => {
+                if (obj.physics?.enabled && obj.type === 'Shape') {
+                    const state = this.objectStates.get(obj.id);
+                    if (!state) return;
+                    
+                    const w = (obj.geometry as any).width || 100;
+                    const h = (obj.geometry as any).height || 100;
+                    
+                    this.physicsEngine!.createBody({
+                        id: obj.id,
+                        type: obj.geometry.type as any,
+                        x: state.x,
+                        y: state.y,
+                        width: w,
+                        height: h,
+                        rotation: state.rotation * (Math.PI / 180),
+                        isStatic: obj.physics.bodyType === 'Static',
+                        mass: obj.physics.mass,
+                        friction: obj.physics.friction,
+                        restitution: obj.physics.restitution,
+                        frictionAir: obj.physics.frictionAir,
+                        density: obj.physics.density,
+                        isSensor: obj.physics.isSensor
+                    });
                 }
-            }
-        });
+            });
+            });
+        }
     }
 
     // Initialize State Machine
@@ -137,7 +246,7 @@ export class ExodeUIEngine {
         this.activeStateMachine = this.artboard.stateMachine;
         
         // Init Inputs
-        this.activeStateMachine.inputs.forEach((input: any) => {
+        this.activeStateMachine.inputs?.forEach((input: any) => {
             this.inputs.set(input.id, input.value.value);
             
             // Map Name -> IDs
@@ -147,7 +256,7 @@ export class ExodeUIEngine {
         });
 
         // Init Layers
-        this.activeStateMachine.layers.forEach((layer: any) => {
+        this.activeStateMachine.layers?.forEach((layer: any) => {
             // Initial Entry
             const entryState = layer.states.find((s: State) => s.id === layer.entryStateId);
             
@@ -155,17 +264,18 @@ export class ExodeUIEngine {
                 this.enterStates(layer.name, [entryState.id]);
             }
         });
+
+        this.evaluateTransitions();
     }
 
     if (!this.artboard.stateMachine && this.artboard.animations.length > 0) {
-       // Check for 'onLoad' animation to play by default
-       const onLoadAnim = this.artboard.animations.find((a: Animation) => a.name === 'onLoad');
+       const onLoadAnim = this.artboard.animations.find((a: SDKAnimation) => a.name === 'onLoad');
        if (onLoadAnim) {
            this.layerStates.set('intro', {
                currentStateIds: ['onLoad'],
-               animation: onLoadAnim,
+               animations: [{ animation: onLoadAnim, state: { loop: true } as any }],
                time: 0,
-               currentState: null
+               duration: onLoadAnim.duration
            });
        }
     }
@@ -174,30 +284,26 @@ export class ExodeUIEngine {
   private enterStates(layerName: string, stateIds: string[]) {
       if (stateIds.length === 0) return;
 
-      let anim: Animation | null = null;
-      let selectedState: State | null = null;
+      const activeAnims: { animation: SDKAnimation; state: State | null }[] = [];
+      let maxDuration = 0;
 
       if (this.artboard && this.activeStateMachine) {
           const layer = this.activeStateMachine.layers.find(l => l.name === layerName);
           if (layer) {
-              // Iterate backwards to find the last state that actually HAS an animation
-              for (let i = stateIds.length - 1; i >= 0; i--) {
-                  const sId = stateIds[i];
+              for (const sId of stateIds) {
                   const state = layer.states.find(s => s.id === sId);
-                  
                   if (state) {
-                         // Priority 1: Direct ID Match
+                        let anim: SDKAnimation | null = null;
                         if (state.animationId) {
                             anim = this.artboard.animations.find(a => a.id === state.animationId) || null;
                         }
-                        // Priority 2: Name Match (Legacy)
                         if (!anim) {
-                                anim = this.artboard.animations.find((a: Animation) => a.name === state.name || a.id === state.name || (state.name === "Entry" && a.name === "Rotate")) || null;
+                            anim = this.artboard.animations.find((a: SDKAnimation) => a.name === state.name || a.id === state.name) || null;
                         }
 
                         if (anim) {
-                            selectedState = state; // Store the state
-                            break; // Found one!
+                            activeAnims.push({ animation: anim, state });
+                            maxDuration = Math.max(maxDuration, anim.duration);
                         }
                   }
               }
@@ -206,9 +312,9 @@ export class ExodeUIEngine {
 
       this.layerStates.set(layerName, {
           currentStateIds: stateIds,
-          animation: anim,
+          animations: activeAnims,
           time: 0,
-          currentState: selectedState
+          duration: maxDuration
       });
   }
 
@@ -229,11 +335,17 @@ export class ExodeUIEngine {
       this.updateInput(nameOrId, value);
   }
 
+  setInputNumberArray(nameOrId: string, value: number[]) {
+      this.updateInput(nameOrId, value);
+  }
+
+  setInputStringArray(nameOrId: string, value: string[]) {
+      this.updateInput(nameOrId, value);
+  }
+
   private updateInput(nameOrId: string, value: any) {
-      console.log(`[Engine] updateInput: ${nameOrId} -> ${value}`);
       
       let inputType: string | undefined;
-      // Resolve Type
       if (this.inputs.has(nameOrId)) {
           const input = this.activeStateMachine?.inputs.find(i => i.id === nameOrId);
           if (input && typeof input.value === 'object') {
@@ -255,42 +367,36 @@ export class ExodeUIEngine {
           else if (value === 0) finalValue = false;
       }
       
-      // 1. Try treating as ID
       if (this.inputs.has(nameOrId)) {
           this.setInternalInput(nameOrId, finalValue);
       }
       
-      // 2. Try treating as Name (Broadcast)
       const ids = this.inputNameMap.get(nameOrId);
       if (ids) {
-          ids.forEach(id => this.setInternalInput(id, finalValue));
+          ids?.forEach(id => this.setInternalInput(id, finalValue));
       }
 
-      // TRIGGER HARD RESET logic
       if (inputType === 'Trigger' && finalValue === true) {
-          // Find transition usage to jump immediately
-           this.activeStateMachine?.layers.forEach(layer => {
-              layer.states.forEach(state => {
-                  state.transitions.forEach(trans => {
-                      if (trans.conditions) {
-                          const usesTrigger = trans.conditions.some((cond: any) => {
-                              const condInputId = cond.inputId;
-                              return condInputId === nameOrId || (ids && ids.includes(condInputId));
-                          });
-                          
-                          if (usesTrigger && this.checkConditions(trans.conditions)) {
-                              this.enterStates(layer.name, [trans.targetStateId]);
-                              this.setInternalInput(nameOrId, false);
-                              if (ids) {
-                                  ids.forEach(id => this.setInternalInput(id, false));
-                              }
-                              return;
-                          }
+          this.justFiredTriggers.add(nameOrId);
+          if (ids) {
+              ids?.forEach(id => this.justFiredTriggers.add(id));
+          }
+      }
+
+      // Sync with compatible components (ListView/Dropdown)
+      if (Array.isArray(finalValue)) {
+          this.artboard?.objects?.forEach(obj => {
+              if (obj.inputId === nameOrId || obj.name === nameOrId) {
+                  const state = this.objectStates.get(obj.id);
+                  if (state && state.options) {
+                      if (obj.type === 'ListView' || (obj as any).variant === 'listview') {
+                          state.options.items = finalValue;
+                      } else if (obj.type === 'Dropdown' || (obj as any).variant === 'dropdown') {
+                          state.options.optionsList = finalValue;
                       }
-                  });
-              });
+                  }
+              }
           });
-          return;
       }
 
       this.evaluateTransitions();
@@ -299,7 +405,7 @@ export class ExodeUIEngine {
   private evaluateTransitions() {
       if (!this.activeStateMachine) return;
 
-      this.activeStateMachine.layers.forEach((layer) => {
+      this.activeStateMachine.layers?.forEach((layer) => {
           const layerState = this.layerStates.get(layer.name);
           if (!layerState || layerState.currentStateIds.length === 0) return;
 
@@ -318,19 +424,12 @@ export class ExodeUIEngine {
                        transitioned = true;
                        hasTransition = true;
                        
-                       // Reset Trigger/Number inputs used in this transition
                        if (trans.conditions) {
-                           trans.conditions.forEach((cond: any) => {
+                           trans.conditions?.forEach((cond: any) => {
                                const input = this.activeStateMachine?.inputs.find(i => i.id === cond.inputId);
                                 if (input && typeof input.value === 'object') {
-                                   if (input.value.type === 'Trigger') {
-                                       this.setInternalInput(cond.inputId, false);
-                                       if (this.inputNameMap.has(input.name)) {
-                                            const ids = this.inputNameMap.get(input.name);
-                                            ids?.forEach(id => this.setInternalInput(id, false));
-                                       }
-                                   } else if (input.value.type === 'Number') {
-                                       this.setInternalInput(cond.inputId, 0);
+                                   if (input.value.type === 'Number') {
+                                           this.setInternalInput(cond.inputId, 0);
                                        if (this.inputNameMap.has(input.name)) {
                                             const ids = this.inputNameMap.get(input.name);
                                             ids?.forEach(id => this.setInternalInput(id, 0));
@@ -347,11 +446,63 @@ export class ExodeUIEngine {
               }
           }
 
+          if (!hasTransition) {
+              const globalTransition = this.findGlobalTransition(layer, layerState.currentStateIds);
+              if (globalTransition) {
+                  nextStateIds.length = 0;
+                  nextStateIds.push(globalTransition.targetStateId);
+                  hasTransition = true;
+                  
+                  if (globalTransition.conditions) {
+                      globalTransition.conditions?.forEach((cond: any) => {
+                          const input = this.activeStateMachine?.inputs.find(i => i.id === cond.inputId);
+                          if (input && typeof input.value === 'object') {
+                              if (input.value.type === 'Number') {
+                                  this.setInternalInput(cond.inputId, 0);
+                                  if (this.inputNameMap.has(input.name)) {
+                                      const ids = this.inputNameMap.get(input.name);
+                                      ids?.forEach(id => this.setInternalInput(id, 0));
+                                  }
+                              }
+                          }
+                      });
+                  }
+              }
+          }
+
           if (hasTransition) {
               const uniqueIds = Array.from(new Set(nextStateIds));
               this.enterStates(layer.name, uniqueIds);
           }
       });
+
+      if (this.justFiredTriggers.size > 0) {
+          this.justFiredTriggers?.forEach(id => {
+              this.setInternalInput(id, false);
+              const input = this.activeStateMachine?.inputs.find(i => i.id === id);
+              if (input && this.inputNameMap.has(input.name)) {
+                  this.inputNameMap.get(input.name)?.forEach(nid => this.setInternalInput(nid, false));
+              }
+          });
+          this.justFiredTriggers.clear();
+      }
+  }
+
+  private findGlobalTransition(layer: any, currentStateIds: string[]): any | null {
+      for (const state of layer.states) {
+          const isActive = currentStateIds.includes(state.id);
+          if (isActive && this.justFiredTriggers.size === 0) continue;
+          
+          for (const trans of state.transitions) {
+              const targetsActive = currentStateIds.includes(trans.targetStateId);
+              if (targetsActive && this.justFiredTriggers.size === 0) continue;
+              
+              if (this.checkConditions(trans.conditions)) {
+                  return trans;
+              }
+          }
+      }
+      return null;
   }
 
   private checkConditions(conditions: any[]): boolean {
@@ -362,7 +513,7 @@ export class ExodeUIEngine {
           const op = cond.op;
           const targetValue = cond.value;
 
-          const inputValue = this.inputs.get(inputId);
+          const inputValue = this.evaluateLogicTree(inputId);
           
           if (inputValue === undefined) return false;
 
@@ -382,10 +533,57 @@ export class ExodeUIEngine {
       });
   }
 
-  // Trigger Management
+  private evaluateLogicTree(sourceId: string, sourceHandleId?: string, visited: Set<string> = new Set()): any {
+    if (visited.has(sourceId)) return false;
+    visited.add(sourceId);
+
+    const logicNode = this.activeStateMachine?.logicNodes?.find((n: LogicNode) => n.id === sourceId);
+    if (logicNode) {
+        const getInputValue = (portId: string, defaultValue: any) => {
+            const inputPort = logicNode.inputs.find((i: any) => i.id === portId);
+            if (!inputPort) return defaultValue;
+            
+            if (inputPort.sourceId) {
+                return this.evaluateLogicTree(inputPort.sourceId, inputPort.sourceHandleId, visited);
+            }
+            return inputPort.value !== undefined ? inputPort.value : defaultValue; 
+        };
+
+        switch (logicNode.op) {
+            case LogicOp.AND: return getInputValue('a', false) && getInputValue('b', false);
+            case LogicOp.OR: return getInputValue('a', false) || getInputValue('b', false);
+            case LogicOp.NOT: return !getInputValue('in', false);
+            case LogicOp.XOR: return !!getInputValue('a', false) !== !!getInputValue('b', false);
+            default: return 0;
+        }
+    }
+
+    let value = this.inputs.get(sourceId);
+    if (this.justFiredTriggers.has(sourceId)) {
+        value = true;
+    }
+    
+    if (sourceHandleId && value !== undefined) {
+        const input = this.activeStateMachine?.inputs.find(i => i.id === sourceId);
+        if (input && input.value.type === 'Number' && typeof value === 'number') {
+            const threshold = (input.value as any).defaultValue ?.(input.value as any).value;
+            if (sourceHandleId === 'source-greater') return value > threshold;
+            if (sourceHandleId === 'source-less') return value < threshold;
+            if (sourceHandleId === 'source-equal') return value === threshold;
+        }
+        if (sourceHandleId === 'source-true') return value === true;
+        if (sourceHandleId === 'source-false') return value === false;
+        if (sourceHandleId === 'source-fire') {
+            return this.justFiredTriggers.has(sourceId);
+        }
+    }
+
+    return value !== undefined ? value : 0;
+  }
+
   private activeTriggers: Map<string, {
     triggerId: string;
-    animation: Animation;
+    animation: SDKAnimation;
     time: number;
     phase: 'entry' | 'hold' | 'exit';
     elapsedHold: number;
@@ -396,15 +594,22 @@ export class ExodeUIEngine {
 
     // 1. Step Physics
     if (this.physicsEngine) {
-        Matter.Engine.update(this.physicsEngine, dt * 1000); 
-
-        // Sync Physics -> State
-        this.physicsBodies.forEach((body, id) => {
-            const state = this.objectStates.get(id);
-            if (state) {
-                state.x = body.position.x;
-                state.y = body.position.y;
-                state.rotation = body.angle * (180 / Math.PI); // Rad -> Deg
+        this.physicsEngine.step(dt);
+
+        this.artboard.objects?.forEach(obj => {
+            if (obj.physics?.enabled) {
+                const pos = this.physicsEngine!.getPosition(obj.id);
+                const rot = this.physicsEngine!.getRotation(obj.id);
+                const state = this.objectStates.get(obj.id);
+                
+                if (state && pos !== null) {
+                    state.x = pos.x;
+                    state.y = pos.y;
+                }
+                
+                if (state && rot !== null) {
+                    state.rotation = rot * (180 / Math.PI);
+                }
             }
         });
     }
@@ -413,31 +618,35 @@ export class ExodeUIEngine {
     if (this.activeStateMachine) {
         this.evaluateTransitions();
 
-        this.layerStates.forEach(state => {
-            if (state.animation) {
-                state.time += dt;
-                
-                const duration = state.animation.duration;
-                const shouldLoop = state.currentState?.loop !== false;
+        this.layerStates?.forEach(layerState => {
+            if (layerState.animations.length > 0) {
+                layerState.time += dt;
                 
-                if (state.time > duration) {
-                    if (shouldLoop) {
-                        state.time %= duration; 
+                if (layerState.time > layerState.duration) {
+                    const canLoop = layerState.animations.some(a => a.state?.loop === true);
+                    if (canLoop) {
+                        layerState.time %= layerState.duration;
                     } else {
-                        state.time = duration; 
+                        layerState.time = layerState.duration;
                     }
                 }
 
-                this.applyAnimation(state.animation, state.time);
+                layerState.animations?.forEach(animObj => {
+                    this.applyAnimation(animObj.animation, layerState.time);
+                });
             }
         });
     }
 
+    // Solve Constraints
+    this.solveConstraints(dt);
+
     // Advance Active Triggers
-    this.activeTriggers.forEach((state, objectId) => {
+    this.activeTriggers?.forEach((state, objectId) => {
         if (state.phase === 'entry') {
             state.time += dt;
             if (state.time >= state.animation.duration) {
+                const trigger = this.artboard?.objects.find(o => o.id === objectId)?.triggers?.find(t => t.id === state.triggerId);
                 state.phase = 'hold';
                 state.elapsedHold = 0;
                 state.time = state.animation.duration; 
@@ -471,6 +680,97 @@ export class ExodeUIEngine {
             }
         }
     });
+
+    // 4. Apply Bindings
+    this.applyBindings();
+  }
+
+  private applyBindings() {
+    if (!this.artboard) return;
+    this.artboard.objects?.forEach(obj => {
+        const bindings = (obj as any).bindings || [];
+        if (bindings.length > 0) {
+            bindings?.forEach((binding: any) => {
+                const val = this.evaluateLogicTree(binding.inputId);
+                const state = this.objectStates.get(obj.id);
+                if (state && val !== undefined) {
+                    state[binding.property] = val;
+                }
+            });
+        }
+    });
+  }
+
+  private solveConstraints(dt: number) {
+      if (!this.artboard || !this.artboard.objects) return;
+
+      this.artboard.objects?.forEach(obj => {
+          if (obj.constraints && obj.constraints.length > 0) {
+              obj.constraints?.forEach(constraint => {
+                  this.applyConstraint(obj.id, constraint, dt);
+              });
+          }
+      });
+  }
+
+  private applyConstraint(objectId: string, constraint: Constraint, dt: number) {
+      const state = this.objectStates.get(objectId);
+      const targetState = this.objectStates.get(constraint.targetId);
+
+      if (!state || !targetState) return;
+
+      const strength = constraint.strength ?? 1;
+
+      switch (constraint.type) {
+          case 'Translation':
+              if (constraint.useSpring) {
+                  this.applySpring(objectId, 'x', targetState.x, constraint, dt);
+                  this.applySpring(objectId, 'y', targetState.y, constraint, dt);
+              } else {
+                  if (constraint.copyX !== false) state.x += (targetState.x - state.x) * strength;
+                  if (constraint.copyY !== false) state.y += (targetState.y - state.y) * strength;
+              }
+              break;
+          case 'Rotation':
+              if (constraint.useSpring) {
+                  this.applySpring(objectId, 'rotation', targetState.rotation, constraint, dt);
+              } else {
+                  state.rotation += (targetState.rotation - state.rotation) * strength;
+              }
+              break;
+          case 'Scale':
+              if (constraint.useSpring) {
+                  this.applySpring(objectId, 'scale_x', targetState.scale_x, constraint, dt);
+                  this.applySpring(objectId, 'scale_y', targetState.scale_y, constraint, dt);
+              } else {
+                  state.scale_x += (targetState.scale_x - state.scale_x) * strength;
+                  state.scale_y += (targetState.scale_y - state.scale_y) * strength;
+              }
+              break;
+      }
+  }
+
+  private applySpring(objectId: string, property: string, targetValue: number, constraint: Constraint, dt: number) {
+      const state = this.objectStates.get(objectId);
+      if (!state) return;
+
+      const current = state[property];
+      const velocityKey = `${objectId}_${property}`;
+      let v = this.objectVelocities.get(velocityKey) || { vx: 0, vy: 0 };
+
+      const k = constraint.stiffness ?? 100;
+      const d = constraint.damping ?? 10;
+      const m = constraint.mass ?? 1;
+
+      // F = -k * (x - target) - d * v
+      const x = current - targetValue;
+      const f = -k * x - d * v.vx;
+      const a = f / m;
+
+      v.vx += a * dt;
+      state[property] += v.vx * dt;
+
+      this.objectVelocities.set(velocityKey, v);
   }
 
   handlePointerInput(type: string, canvasX: number, canvasY: number, canvasWidth: number, canvasHeight: number) {
@@ -492,12 +792,15 @@ export class ExodeUIEngine {
   private handlePointerEvent(type: string, x: number, y: number) {
       if (!this.artboard) return;
 
+      let hitId: string | null = null;
       for (let i = this.artboard.objects.length - 1; i >= 0; i--) {
           const obj = this.artboard.objects[i];
           const isHit = this.hitTest(obj, x, y);
           
           if (isHit) {
-              // Check interactions
+              hitId = obj.id;
+              
+              // Handle interactions
               const interactions = (obj as any).interactions || [];
               const matchingInteraction = interactions.find((int: any) => int.event === type || (int.event === 'onClick' && type === 'click'));
               
@@ -509,7 +812,23 @@ export class ExodeUIEngine {
                   }
               }
 
-              // Check triggers
+              // Handle Component Listeners
+              if (type === 'click' || type === 'PointerDown') {
+                  const state = this.objectStates.get(obj.id);
+                  const options = state?.options || {};
+                  
+                  if (obj.type === 'Toggle' || (obj as any).variant === 'toggle') {
+                      const newValue = !options.checked;
+                      this.updateObjectOptions(obj.id, { checked: newValue });
+                      if (this.onToggle) this.onToggle(obj.name, newValue);
+                      if (obj.inputId) this.updateInput(obj.inputId, newValue);
+                  } else if ((obj as any).type === 'TextInput' || (obj as any).variant === 'textinput') {
+                      this.focusedId = obj.id;
+                      if (this.onInputFocus) this.onInputFocus(obj.name);
+                  }
+              }
+
+              // Handle triggers (Animations)
               const triggers = obj.triggers || [];
               const matchingTrigger = triggers.find(t => t.eventType === type || (t.eventType === 'onClick' && type === 'click'));
               
@@ -530,28 +849,39 @@ export class ExodeUIEngine {
                       return;
                   }
               }
+              break; 
+          }
+      }
+
+      if (!hitId && (type === 'click' || type === 'PointerDown')) {
+          if (this.focusedId) {
+              const focusedObj = this.artboard.objects.find(o => o.id === this.focusedId);
+              if (focusedObj && this.onInputBlur) this.onInputBlur(focusedObj.name);
+              this.focusedId = null;
           }
       }
   }
 
   private hitTest(obj: ShapeObject, x: number, y: number): boolean {
       const state = this.objectStates.get(obj.id);
-      if (!state) return false;
+      if (!state || state.visible === false) return false;
 
-      const w = (obj.geometry as any).width || 100;
-      const h = (obj.geometry as any).height || 100;
+      const w = state.width || (obj.geometry as any).width || 100;
+      const h = state.height || (obj.geometry as any).height || 100;
       
       const dx = x - state.x;
       const dy = y - state.y;
       
+      // Basic AABB check
       return Math.abs(dx) <= w / 2 && Math.abs(dy) <= h / 2;
   }
 
-  private applyAnimation(anim: Animation, time: number) {
-    anim.tracks.forEach((track: any) => {
-      const isPhysicsControlled = this.physicsBodies.has(track.object_id) && 
-                                  this.physicsBodies.get(track.object_id)?.isStatic === false; 
-                                  
+  private applyAnimation(anim: SDKAnimation, time: number) {
+    anim.tracks?.forEach((track: any) => {
+      // Skip physics controlled objects if they are dynamic
+      const isPhysicsControlled = this.physicsEngine && 
+                                  this.physicsEngine.isDynamic(track.object_id);
+                                   
       if (isPhysicsControlled && (['x', 'y', 'rotation'].includes(track.property) || track.property.startsWith('transform.'))) {
           return; 
       }
@@ -574,14 +904,13 @@ export class ExodeUIEngine {
       }
       
       // Sync State -> Physics Body (for Kinematic/Static animations)
-      const body = this.physicsBodies.get(track.object_id);
-      if (body && body.isStatic) {
+      if (this.physicsEngine && !this.physicsEngine.isDynamic(track.object_id)) {
           if (track.property === 'x' || track.property === 'transform.x') {
-             Matter.Body.setPosition(body, { x: value, y: body.position.y });
+             this.physicsEngine.setPosition(track.object_id, value, objState.y);
           } else if (track.property === 'y' || track.property === 'transform.y') {
-             Matter.Body.setPosition(body, { x: body.position.x, y: value });
+             this.physicsEngine.setPosition(track.object_id, objState.x, value);
           } else if (track.property === 'rotation' || track.property === 'transform.rotation') {
-             Matter.Body.setAngle(body, value * (Math.PI / 180));
+             this.physicsEngine.setRotation(track.object_id, value * (Math.PI / 180));
           }
       }
     });
@@ -605,6 +934,7 @@ export class ExodeUIEngine {
     }
 
     const duration = end.time - bg.time;
+    if (duration <= 0) return end.value;
     const t = (time - bg.time) / duration;
 
     if (typeof bg.value === 'string' && bg.value.startsWith('#')) {
@@ -620,6 +950,13 @@ export class ExodeUIEngine {
   private interpolateColor(c1: string, c2: string, t: number): string {
       const parse = (c: string) => {
           const hex = c.replace('#', '');
+          if (hex.length === 3) {
+              return {
+                  r: parseInt(hex[0] + hex[0], 16),
+                  g: parseInt(hex[1] + hex[1], 16),
+                  b: parseInt(hex[2] + hex[2], 16)
+              };
+          }
           return {
               r: parseInt(hex.substring(0, 2), 16),
               g: parseInt(hex.substring(2, 4), 16),
@@ -647,7 +984,13 @@ export class ExodeUIEngine {
         return;
     }
 
-    canvas.clear(Skia.Color(this.artboard.backgroundColor || '#000000'));
+    try {
+        const bg = this.artboard.backgroundColor || '#000000';
+        canvas.clear(Skia.Color(bg));
+    } catch (e) {
+        console.error('[ExodeUIEngine] Rendering failed (clear):', e);
+        canvas.clear(Skia.Color('#000000'));
+    }
 
     const abWidth = this.artboard.width;
     const abHeight = this.artboard.height;
@@ -672,7 +1015,7 @@ export class ExodeUIEngine {
     clipPath.addRect({ x: -abWidth / 2, y: -abHeight / 2, width: abWidth, height: abHeight });
     canvas.clipPath(clipPath, 1, true); 
 
-    this.artboard.objects.forEach((obj: ShapeObject) => {
+    this.artboard.objects?.forEach((obj: ShapeObject) => {
       this.renderObject(canvas, obj);
     });
 
@@ -760,35 +1103,39 @@ export class ExodeUIEngine {
 
   private renderObject(canvas: SkCanvas, obj: ShapeObject) {
     const state = this.objectStates.get(obj.id);
-    if (!state) return;
+    if (!state || state.visible === false) return;
 
     const geometry = state.geometry || obj.geometry;
     
-    const w = (geometry as any).width || 0;
-    const h = (geometry as any).height || 0;
+    const w = state.width || (geometry as any).width || 0;
+    const h = state.height || (geometry as any).height || 0;
     
-    const cx = state.x;
-    const cy = state.y;
+    const cx = state.x || 0;
+    const cy = state.y || 0;
+    const rotation = state.rotation || 0;
+    const scaleX = state.scale_x === undefined ? 1 : state.scale_x;
+    const scaleY = state.scale_y === undefined ? 1 : state.scale_y;
 
     canvas.save();
     canvas.translate(cx, cy);
-    canvas.rotate(state.rotation, 0, 0); 
-    canvas.scale(state.scale_x, state.scale_y);
+    canvas.rotate(rotation, 0, 0); 
+    canvas.scale(scaleX, scaleY);
 
     const style = state.style || obj.style;
 
     if (geometry.type === 'Text') {
-        // Text rendering omitted
+        // Simple text rendering placeholder
     } else if (geometry.type === 'Image') {
-         // Image rendering omitted
+         // Image rendering placeholder
     } else {
         // Shapes
         const path = Skia.Path.Make();
         
         if (geometry.type === 'Rectangle') {
             const rect = { x: -w/2, y: -h/2, width: w, height: h };
-            if (geometry.corner_radius) {
-                path.addRRect(Skia.RRectXY(rect, geometry.corner_radius, geometry.corner_radius));
+            if (state.cornerRadius || geometry.corner_radius) {
+                const cr = state.cornerRadius || geometry.corner_radius;
+                path.addRRect(Skia.RRectXY(rect, cr, cr));
             } else {
                 path.addRect(rect);
             }
@@ -800,8 +1147,8 @@ export class ExodeUIEngine {
             path.lineTo(-w/2, h/2);
             path.close();
         } else if (geometry.type === 'Star') {
-             const ir = geometry.inner_radius; 
-             const or = geometry.outer_radius; 
+             const ir = geometry.inner_radius || 20; 
+             const or = geometry.outer_radius || 50; 
              const sp = geometry.points || 5;
              for (let i = 0; i < sp * 2; i++) {
                  const a = (i * Math.PI / sp) - (Math.PI / 2);
@@ -816,7 +1163,11 @@ export class ExodeUIEngine {
 
         if (style.fill) {
           const paint = Skia.Paint();
-          paint.setColor(Skia.Color(style.fill.color));
+          try {
+              paint.setColor(Skia.Color(style.fill.color || '#000000'));
+          } catch (e) {
+              paint.setColor(Skia.Color('#FF00FF')); // Debug pink
+          }
           paint.setAlphaf((state.opacity ?? 1) * (style.fill.opacity ?? 1));
           paint.setStyle(PaintStyle.Fill);