exodeui-react-native 1.0.0 → 1.0.2

package/src/engine.ts

@@ -1,32 +1,55 @@
-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 { SkCanvas, SkImage, SkPaint, PaintStyle, Skia, SkPath, SkColor, BlurStyle, SkImageFilter, SkMaskFilter, ClipOp, matchFont, FontStyle, SkFont } from '@shopify/react-native-skia';
+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;
+  private _renderCount: number = 0;
   private inputs: Map<string, any> = new Map(); // id -> value
   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>();
+  private fonts = new Map<number, SkFont>();
   
   private layout: Layout = { fit: 'Contain', alignment: 'Center' };
   
   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();
+  private _lastPointerPos: { x: number; y: number } | null = null;
+  private _prevPointerPos: { x: number; y: number } | null = null;
+
+  // Interaction State
+  private focusedId: string | null = null;
+  private draggingSliderId: string | null = null;
+  private activeDropdownId: string | null = null;
+  private draggingListViewId: string | null = null;
+  private lastHoveredObjectId: 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 +59,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 +98,156 @@ 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;
+    this.fonts.clear();
+    
+    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 +255,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 +265,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 +273,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 +293,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 +321,9 @@ export class ExodeUIEngine {
 
       this.layerStates.set(layerName, {
           currentStateIds: stateIds,
-          animation: anim,
+          animations: activeAnims,
           time: 0,
-          currentState: selectedState
+          duration: maxDuration
       });
   }
 
@@ -229,11 +344,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 +376,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 +414,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 +433,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 +455,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 +522,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 +542,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 +603,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 +627,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 +689,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) {
@@ -486,72 +795,437 @@ export class ExodeUIEngine {
       const artboardX = ((canvasX - transform.tx) / transform.scaleX) - (this.artboard.width / 2);
       const artboardY = ((canvasY - transform.ty) / transform.scaleY) - (this.artboard.height / 2);
 
+      this._prevPointerPos = this._lastPointerPos;
+      this._lastPointerPos = { x: artboardX, y: artboardY };
+
+      this.updateInput('mouseX', artboardX);
+      this.updateInput('mouseY', artboardY);
+
       this.handlePointerEvent(type, artboardX, artboardY);
   }
 
   private handlePointerEvent(type: string, x: number, y: number) {
       if (!this.artboard) return;
 
+      let hitObj: any = null;
+      console.log(`[ExodeUIEngine] PointerEvent: ${type} at ${x.toFixed(1)},${y.toFixed(1)}`);
+
+      const objectHandlesEvent = (obj: any, evType: string) => {
+          let artboardEvent = evType;
+          if (evType === 'click') artboardEvent = 'onClick';
+          else if (evType === 'PointerDown') artboardEvent = 'onPointerDown';
+          else if (evType === 'PointerUp') artboardEvent = 'onPointerUp';
+          else if (evType === 'PointerMove') artboardEvent = 'hover';
+
+          const aliases = new Set([artboardEvent]);
+          if (evType === 'PointerMove') {
+              aliases.add('onPointerEnter').add('hover').add('onPointerLeave');
+          }
+          const interacts = ['button', 'toggle', 'toggle_button', 'dropdown', 'listview', 'inputbox', 'slider'];
+          if (obj.type === 'Component' && interacts.includes((obj as any).variant)) return true;
+          if (interacts.includes(obj.type?.toLowerCase())) return true;
+
+          const interactions = obj.interactions || [];
+          if (interactions.some((int: any) => aliases.has(int.event))) return true;
+
+          const triggers = obj.triggers || [];
+          if (triggers.some((t: any) => aliases.has(t.eventType))) return true;
+
+          return false;
+      };
+
+      let topHit: any = 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
-              const interactions = (obj as any).interactions || [];
-              const matchingInteraction = interactions.find((int: any) => int.event === type || (int.event === 'onClick' && type === 'click'));
-              
-              if (matchingInteraction) {
-                  if (matchingInteraction.action === 'setInput') {
-                      this.updateInput(matchingInteraction.targetInputId, matchingInteraction.value);
-                  } else if (matchingInteraction.action === 'fireTrigger') {
-                      this.updateInput(matchingInteraction.targetInputId, true);
-                  }
+          const state = this.objectStates.get(obj.id);
+          if (state && state.visible !== false && state.opacity > 0 && this.hitTest(obj, x, y)) {
+              if (!topHit) topHit = obj;
+              if (objectHandlesEvent(obj, type)) {
+                  hitObj = obj;
+                  break;
+              }
+          }
+      }
+      
+      if (!hitObj && topHit) hitObj = topHit;
+      
+      if (hitObj) {
+          console.log(`[ExodeUIEngine] Hit object: ${hitObj.name || hitObj.id} (${hitObj.type})`);
+      } else {
+          console.log(`[ExodeUIEngine] No object hit at ${x.toFixed(1)},${y.toFixed(1)}`);
+      }
+      const hitId = hitObj?.id || null;
+
+      if (type === 'PointerMove') {
+          if (this.draggingSliderId) {
+              const obj = this.artboard.objects.find(o => o.id === this.draggingSliderId);
+              if (obj) this.updateSliderValueFromPointer(obj, x, y);
+              return;
+          }
+
+          if (this.draggingListViewId) {
+              const obj = this.artboard.objects.find(o => o.id === this.draggingListViewId);
+              if (obj) this.updateListViewScrollFromPointer(obj, x, y);
+              return;
+          }
+
+          if (hitId !== this.lastHoveredObjectId) {
+              if (this.lastHoveredObjectId) {
+                  this.fireEventForObject(this.lastHoveredObjectId, 'onPointerLeave');
               }
+              if (hitId) {
+                  this.fireEventForObject(hitId, 'onPointerEnter');
+              }
+              this.lastHoveredObjectId = hitId;
+          }
+          return;
+      }
 
-              // Check triggers
-              const triggers = obj.triggers || [];
-              const matchingTrigger = triggers.find(t => t.eventType === type || (t.eventType === 'onClick' && type === 'click'));
-              
-              if (matchingTrigger && matchingTrigger.entryAnimationId) {
-                  const anim = this.artboard.animations.find(a => a.id === matchingTrigger.entryAnimationId);
-                  if (anim) {
-                      this.activeTriggers.set(obj.id, {
-                          triggerId: matchingTrigger.id,
-                          animation: anim,
-                          time: 0,
-                          phase: 'entry',
-                          elapsedHold: 0
-                      });
+      if (type === 'PointerUp') {
+          this.draggingSliderId = null;
+          this.draggingListViewId = null;
+      }
+
+      if (this.activeDropdownId && type === 'PointerDown') {
+          const activeObj = this.artboard.objects.find(o => o.id === this.activeDropdownId);
+          if (activeObj && (activeObj.type === 'Dropdown' || (activeObj as any).variant === 'dropdown')) {
+              const state = this.objectStates.get(activeObj.id);
+              if (state) {
+                  const opts = state.options || {};
+                  const w = state.width || (activeObj.geometry as any)?.width || 160;
+                  const h = state.height || (activeObj.geometry as any)?.height || 40;
+                  const world = this.getWorldTransform(activeObj.id);
+                  
+                  if (hitId !== this.activeDropdownId) {
+                      // Check if click is inside the expanded options list
+                      const optionsList = opts.optionsList || [];
+                      const itemH = opts.itemHeight || 36;
+                      const listTop = world.y + h / 2;
+                      const listBottom = listTop + optionsList.length * itemH;
+                      const listLeft = world.x - w / 2;
+                      const listRight = world.x + w / 2;
                       
-                      if (this.onTrigger) {
-                          this.onTrigger(matchingTrigger.name, anim.name);
+                      if (x >= listLeft && x <= listRight && y >= listTop && y <= listBottom) {
+                          // Hit inside the options list — select item
+                          const itemIndex = Math.floor((y - listTop) / itemH);
+                          if (itemIndex >= 0 && itemIndex < optionsList.length) {
+                              const selected = optionsList[itemIndex];
+                              const selectedValue = typeof selected === 'string' ? selected : (selected?.label || selected?.value || itemIndex);
+                              opts.activeItemIndex = itemIndex;
+                              opts.selectedValue = selectedValue;
+                              opts.isOpen = false;
+                              this.activeDropdownId = null;
+                              if (activeObj.inputId) this.updateInput(activeObj.inputId, selectedValue);
+                              if (this.onComponentChange) {
+                                  this.onComponentChange({ objectId: activeObj.id, componentName: activeObj.name, variant: 'dropdown', property: 'selected', value: selectedValue });
+                              }
+                              console.log(`[ExodeUIEngine] Dropdown selected: ${selectedValue}`);
+                          }
+                      } else {
+                          // Tap outside — close
+                          opts.isOpen = false;
+                          this.activeDropdownId = null;
                       }
                       return;
                   }
               }
           }
       }
+
+      if (hitObj) {
+          let targetObj = hitObj;
+          let current: any = hitObj;
+          while (current && current.parentId) {
+              const parent = this.artboard.objects.find(o => o.id === current.parentId);
+              if (parent && parent.type === 'Component') {
+                  targetObj = parent;
+                  break;
+              }
+              current = parent;
+          }
+
+          let artboardEvent = type;
+          if (type === 'click') artboardEvent = 'onClick';
+          else if (type === 'PointerDown') artboardEvent = 'onPointerDown';
+          else if (type === 'PointerUp') artboardEvent = 'onPointerUp';
+
+          this.fireEventForObject(hitObj.id, artboardEvent);
+          if (targetObj !== hitObj) {
+              this.fireEventForObject(targetObj.id, artboardEvent);
+          }
+
+          if (targetObj.type === 'Component' && (targetObj as any).variant === 'toggle') {
+              if (type === 'PointerDown') {
+                  const state = this.objectStates.get(targetObj.id);
+                  const opts = state?.options || targetObj.options || {};
+                  opts.checked = !opts.checked;
+                  if (targetObj.inputId) this.updateInput(targetObj.inputId, opts.checked);
+                  if (this.onToggle) this.onToggle(targetObj.name, opts.checked);
+              }
+          }
+
+          if (targetObj.type === 'Component' && (targetObj as any).variant === 'slider') {
+              if (type === 'PointerDown') {
+                  this.draggingSliderId = targetObj.id;
+                  this.updateSliderValueFromPointer(targetObj, x, y);
+              }
+          }
+
+          if (targetObj.type === 'Component' && (targetObj as any).variant === 'dropdown') {
+              if (type === 'PointerDown') {
+                  const state = this.objectStates.get(targetObj.id);
+                  if (!state) return;
+                  if (!state.options) state.options = {};
+                  const isOpening = !state.options.isOpen;
+                  state.options.isOpen = isOpening;
+                  this.activeDropdownId = isOpening ? targetObj.id : null;
+                  console.log(`[ExodeUIEngine] Dropdown toggled: isOpen=${isOpening}`);
+              }
+          }
+
+          if (targetObj.type === 'Component' && (targetObj as any).variant === 'listview') {
+              if (type === 'PointerDown') {
+                  this.draggingListViewId = targetObj.id;
+                  this._prevPointerPos = { x, y };
+
+                  const itemIndex = this.getListViewItemIndexAtPointer(targetObj, x, y);
+                  if (itemIndex !== null) {
+                      const state = this.objectStates.get(targetObj.id) || {};
+                      const opts = state.options || targetObj.options || {};
+                      
+                      opts.activeItemIndex = itemIndex;                      
+                      const selected = (opts.items || [])[itemIndex];
+                      const selectedValue = typeof selected === 'string' ? selected : (selected?.label || selected?.value || itemIndex);                      
+                      opts.selectedValue = selectedValue;
+
+                      if (targetObj.inputId) {
+                          this.updateInput(targetObj.inputId, selectedValue);
+                      }
+                      
+                      if (this.onComponentChange) {
+                          this.onComponentChange({
+                              objectId: targetObj.id,
+                              componentName: targetObj.name,
+                              variant: 'listview',
+                              property: 'activeItemIndex',
+                              value: itemIndex
+                          });
+                          this.onComponentChange({
+                                objectId: targetObj.id,
+                                componentName: targetObj.name,
+                                variant: 'listview',
+                                property: 'selected',
+                                value: selectedValue
+                          });
+                      }
+                  }
+              }
+          }
+      }
+  }
+
+  private fireEventForObject(objectId: string, eventType: string) {
+      if (!this.artboard) return;
+      const obj = this.artboard.objects.find(o => o.id === objectId);
+      if (!obj) return;
+
+      const eventAliases = new Set([eventType]);
+      if (eventType === 'onPointerEnter') eventAliases.add('hover');
+      if (eventType === 'onPointerLeave') eventAliases.add('blur');
+
+      const interactions = (obj as any).interactions || [];
+      const matchingInteraction = interactions.find((int: any) => eventAliases.has(int.event));
+      
+      if (matchingInteraction) {
+          if (matchingInteraction.action === 'setInput') {
+              this.updateInput(matchingInteraction.targetInputId, matchingInteraction.value);
+          } else if (matchingInteraction.action === 'fireTrigger') {
+              this.updateInput(matchingInteraction.targetInputId, true);
+          }
+      }
+      
+      const triggers = obj.triggers || [];
+      const matchingTrigger = triggers.find(t => eventAliases.has(t.eventType));
+      
+      if (matchingTrigger && matchingTrigger.entryAnimationId) {
+          const anim = this.artboard.animations.find(a => a.id === matchingTrigger.entryAnimationId);
+          if (anim) {
+              this.activeTriggers.set(obj.id, {
+                  triggerId: matchingTrigger.id,
+                  animation: anim,
+                  time: 0,
+                  phase: 'entry',
+                  elapsedHold: 0
+              });
+              if (this.onTrigger) this.onTrigger(matchingTrigger.name, anim.name);
+          }
+      }
+  }
+
+  private updateSliderValueFromPointer(obj: any, x: number, y: number) {
+      const state = this.objectStates.get(obj.id);
+      const world = this.getWorldTransform(obj.id);
+      const opts = state?.options || obj.options || {};
+      const w = obj.geometry?.width || 200;
+      
+      const thumbWidth = opts.thumbWidth ?? 16;
+      const travelW = w - thumbWidth;
+      
+      const relativeX = (x - world.x) / world.scaleX;
+      const percentage = Math.max(0, Math.min(1, (relativeX + travelW / 2) / travelW));
+      
+      const min = opts.min ?? 0;
+      const max = opts.max ?? 100;
+      const newValue = min + (percentage * (max - min));
+      
+      this.updateObjectOptions(obj.id, { value: newValue });
+      if (obj.inputId) this.updateInput(obj.inputId, newValue);
+      if (this.onComponentChange) {
+          this.onComponentChange({
+              objectId: obj.id,
+              componentName: obj.name,
+              variant: 'slider',
+              property: 'value',
+              value: newValue
+          });
+      }
+  }
+
+  private updateListViewScrollFromPointer(obj: any, x: number, y: number) {
+      if (!this._prevPointerPos) {
+          this._prevPointerPos = { x, y };
+          return;
+      }
+      const dy = y - this._prevPointerPos.y;
+      const state = this.objectStates.get(obj.id) || {};
+      const opts = state.options || obj.options || {};
+      opts.scrollOffset = (opts.scrollOffset || 0) + dy;
+      
+      const items = opts.items || [];
+      const itemGap = opts.itemGap ?? 10;
+      const itemHeight = opts.itemHeight ?? 50;
+      const h = state.height !== undefined ? state.height : (obj.geometry?.height || 300);
+
+      const totalSize = (items.length || 0) * itemHeight + Math.max(0, (items.length || 0) - 1) * itemGap;
+      const maxScroll = Math.max(0, totalSize - h + (opts.padding * 2 || 0));
+
+      if (opts.scrollOffset > 0) opts.scrollOffset = 0;
+      if (opts.scrollOffset < -maxScroll) opts.scrollOffset = -maxScroll;
+      
+      this._prevPointerPos = { x, y };
+  }
+
+  private updateListViewHoverFromPointer(obj: any, x: number, y: number) {
+      const index = this.getListViewItemIndexAtPointer(obj, x, y);
+      const state = this.objectStates.get(obj.id) || {};
+      const opts = state.options || obj.options || {};
+      if (opts.hoveredIndex !== index) {
+          opts.hoveredIndex = index;
+      }
+  }
+
+  private getListViewItemIndexAtPointer(obj: any, x: number, y: number): number | null {
+      const state = this.objectStates.get(obj.id) || {};
+      const opts = state.options || obj.options || {};
+      const items = opts.items || [];
+      if (items.length === 0) return null;
+
+      const w = state.width !== undefined ? state.width : (obj.geometry?.width || 200);
+      const h = state.height !== undefined ? state.height : (obj.geometry?.height || 300);
+      const itemGap = opts.itemGap ?? 10;
+      const itemHeight = opts.itemHeight ?? 50;
+      const scrollOffset = opts.scrollOffset ?? 0;
+      let padVal = opts.padding ?? 0;
+      if (typeof padVal !== 'number') padVal = padVal[0] || 0;
+
+      const worldTransform = this.getWorldTransform(obj.id);
+      const dx = x - worldTransform.x;
+      const dy = y - worldTransform.y;
+      const rad = -(worldTransform.rotation) * (Math.PI / 180);
+      const cos = Math.cos(rad);
+      const sin = Math.sin(rad);
+      const localX = dx * cos - dy * sin;
+      const localY = dx * sin + dy * cos;
+
+      const startX = -w / 2;
+      const startY = -h / 2;
+      
+      let currentPos = startY + scrollOffset + padVal;
+
+      for (let i = 0; i < items.length; i++) {
+          const iW = w;
+          const iH = itemHeight;
+          const iX = startX;
+          const iY = currentPos;
+
+          if (localX >= iX && localX <= iX + iW && localY >= iY && localY <= iY + iH) {
+              return i;
+          }
+          currentPos += itemHeight + itemGap;
+      }
+
+      return 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 world = this.getWorldTransform(obj.id);
+      const w = state.width || (obj.geometry as any).width || 100;
+      const h = state.height || (obj.geometry as any).height || 100;
+      
+      const dx = x - world.x;
+      const dy = y - world.y;
+      
+      // Basic AABB check in world space
+      // Note: Full matrix-based hit test would be better for rotated objects
+      return Math.abs(dx) <= (w * Math.abs(world.scaleX)) / 2 && 
+             Math.abs(dy) <= (h * Math.abs(world.scaleY)) / 2;
+  }
 
-      const w = (obj.geometry as any).width || 100;
-      const h = (obj.geometry as any).height || 100;
+  private getWorldTransform(objId: string): { x: number, y: number, scaleX: number, scaleY: number, rotation: number } {
+      const state = this.objectStates.get(objId);
+      if (!state) return { x: 0, y: 0, scaleX: 1, scaleY: 1, rotation: 0 };
       
-      const dx = x - state.x;
-      const dy = y - state.y;
+      const obj = this.artboard?.objects.find(o => o.id === objId);
+      if (!obj || !obj.parentId) {
+          return {
+              x: state.x,
+              y: state.y,
+              scaleX: state.scale_x ?? 1,
+              scaleY: state.scale_y ?? 1,
+              rotation: state.rotation ?? 0
+          };
+      }
+
+      const parentWorld = this.getWorldTransform(obj.parentId);
       
-      return Math.abs(dx) <= w / 2 && Math.abs(dy) <= h / 2;
+      const rad = parentWorld.rotation * (Math.PI / 180);
+      const cos = Math.cos(rad);
+      const sin = Math.sin(rad);
+
+      const sx = state.x * parentWorld.scaleX;
+      const sy = state.y * parentWorld.scaleY;
+
+      const worldX = parentWorld.x + (sx * cos - sy * sin);
+      const worldY = parentWorld.y + (sx * sin + sy * cos);
+
+      return {
+          x: worldX,
+          y: worldY,
+          scaleX: (state.scale_x ?? 1) * parentWorld.scaleX,
+          scaleY: (state.scale_y ?? 1) * parentWorld.scaleY,
+          rotation: parentWorld.rotation + (state.rotation ?? 0)
+      };
   }
 
-  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 +1248,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 +1278,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 +1294,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,11 +1328,28 @@ export class ExodeUIEngine {
         return;
     }
 
-    canvas.clear(Skia.Color(this.artboard.backgroundColor || '#000000'));
+    try {
+        const bg = this.artboard.backgroundColor || '#000000';
+        if (bg === 'transparent' || bg === 'rgba(0,0,0,0)') {
+            canvas.clear(Skia.Color('rgba(0,0,0,0)'));
+        } else {
+            canvas.clear(Skia.Color(bg));
+        }
+    } catch (e) {
+        canvas.clear(Skia.Color('#000000'));
+    }
+    this._renderCount++;
+    if (this._renderCount % 60 === 0) {
+        console.log(`[ExodeUIEngine] Rendering frame ${this._renderCount}, objects: ${this.artboard.objects?.length}`);
+    }
 
     const abWidth = this.artboard.width;
     const abHeight = this.artboard.height;
     
+    if (this._renderCount % 60 === 1) {
+        console.log(`[ExodeUIEngine] Artboard size: ${abWidth}x${abHeight}, Canvas size: ${width}x${height}`);
+    }
+    
     // Calculate Layout Transform
     const transform = this.calculateTransform(
         width, height, 
@@ -664,16 +1362,22 @@ export class ExodeUIEngine {
     canvas.translate(transform.tx, transform.ty);
     canvas.scale(transform.scaleX, transform.scaleY);
 
+    if (this._renderCount % 60 === 1) {
+        console.log(`[ExodeUIEngine] Viewport Transform: tx=${transform.tx.toFixed(2)}, ty=${transform.ty.toFixed(2)}, scale=${transform.scaleX.toFixed(2)}`);
+    }
+
     // Center the Artboard Origin
     canvas.translate(abWidth / 2, abHeight / 2);
     
     // Clip to artboard bounds
     const clipPath = Skia.Path.Make();
     clipPath.addRect({ x: -abWidth / 2, y: -abHeight / 2, width: abWidth, height: abHeight });
-    canvas.clipPath(clipPath, 1, true); 
+    canvas.clipPath(clipPath, 1, true); // 1 = Intersect
 
-    this.artboard.objects.forEach((obj: ShapeObject) => {
-      this.renderObject(canvas, obj);
+    this.artboard.objects?.forEach((obj: ShapeObject) => {
+      if (!obj.parentId) {
+          this.renderObject(canvas, obj);
+      }
     });
 
     canvas.restore();
@@ -758,106 +1462,555 @@ export class ExodeUIEngine {
       return { scaleX, scaleY, tx, ty };
   }
 
-  private renderObject(canvas: SkCanvas, obj: ShapeObject) {
+  private renderObject(canvas: any, 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 cx = state.x;
-    const cy = state.y;
+    const w = state.width || (geometry as any).width || 0;
+    const h = state.height || (geometry as any).height || 0;
+    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 * Math.PI / 180, 0, 0); 
+    canvas.scale(scaleX, scaleY);
 
-    const style = state.style || obj.style;
+    if (this._renderCount % 60 === 1) {
+        console.log(`[ExodeUIEngine]   - Drawing object: ${obj.name || obj.id} (${obj.type}), pos: ${cx.toFixed(1)},${cy.toFixed(1)}`);
+    }
 
     if (geometry.type === 'Text') {
-        // Text rendering omitted
+        this.renderText(canvas, obj, w, h);
     } else if (geometry.type === 'Image') {
-         // Image rendering omitted
+        this.renderImage(canvas, obj, w, h);
+    } else if (obj.type === 'Component' && (obj as any).variant === 'button') {
+        this.renderButton(canvas, obj, w, h);
+    } else if (obj.type === 'Component' && (obj as any).variant === 'toggle') {
+        this.renderToggle(canvas, obj, w, h);
+    } else if (obj.type === 'Component' && (obj as any).variant === 'slider') {
+        this.renderSlider(canvas, obj, w, h);
+    } else if (obj.type === 'Component' && (obj as any).variant === 'dropdown') {
+        this.renderDropdown(canvas, obj, w, h);
+    } else if (geometry.type === 'LineGraph') {
+        this.renderLineGraph(canvas, geometry, w, h);
+    } else if (obj.type === 'Component' && (obj as any).variant === 'listview') {
+        this.renderListView(canvas, obj, w, h);
+    } else if (obj.type === 'Component' && (obj as any).variant === 'inputbox') {
+        this.renderInputBox(canvas, obj, w, h);
+    } else if (geometry.type === 'SVG') {
+        this.renderSVG(canvas, obj, w, h);
     } 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));
-            } else {
-                path.addRect(rect);
-            }
-        } else if (geometry.type === 'Ellipse') {
-            path.addOval({ x: -w/2, y: -h/2, width: w, height: h });
-        } else if (geometry.type === 'Triangle') {
-            path.moveTo(0, -h/2);
-            path.lineTo(w/2, h/2);
-            path.lineTo(-w/2, h/2);
-            path.close();
-        } else if (geometry.type === 'Star') {
-             const ir = geometry.inner_radius; 
-             const or = geometry.outer_radius; 
-             const sp = geometry.points || 5;
-             for (let i = 0; i < sp * 2; i++) {
-                 const a = (i * Math.PI / sp) - (Math.PI / 2);
-                 const rad = i % 2 === 0 ? or : ir;
-                 const px = rad * Math.cos(a);
-                 const py = rad * Math.sin(a);
-                 if (i === 0) path.moveTo(px, py);
-                 else path.lineTo(px, py);
-             }
-             path.close();
-        }
+        // Default to shape rendering
+        this.renderShape(canvas, obj, w, h);
+    }
+
+    // Always check for text property on non-component shapes
+    if (obj.text && (obj.type !== 'Component' || geometry.type === 'Text')) {
+        this.renderText(canvas, obj, w, h);
+    }
+
+    if (obj.children && obj.children.length > 0) {
+        obj.children.forEach(childId => {
+            const childObj = this.artboard?.objects.find(o => o.id === childId);
+            if (childObj) this.renderObject(canvas, childObj);
+        });
+    }
+
+    canvas.restore();
+  }
+
+  private getFont(size: number, family: string = 'System'): SkFont {
+      if (size <= 0) size = 14;
+      
+      if (this.fonts.has(size)) return this.fonts.get(size)!;
+      
+      try {
+          const fontMgr = Skia.FontMgr.System();
+          let typeface = fontMgr.matchFamilyStyle(family, { weight: 400 });
+          
+          if (!typeface) {
+              typeface = fontMgr.matchFamilyStyle("System", { weight: 400 });
+          }
+          if (!typeface) {
+              typeface = fontMgr.matchFamilyStyle("sans-serif", { weight: 400 });
+          }
+          if (!typeface) {
+              typeface = fontMgr.matchFamilyStyle("Arial", { weight: 400 });
+          }
+          
+          if (typeface) {
+              const font = Skia.Font(typeface, size);
+              this.fonts.set(size, font);
+              return font;
+          }
+          
+          // Fallback to matchFont utility with generic sizing
+          const font = matchFont({ fontSize: size, fontFamily: 'System' });
+          if (font) {
+              this.fonts.set(size, font);
+              return font;
+          }
+          
+          // Absolute last resort
+          const defaultFont = Skia.Font(null as any, size);
+          this.fonts.set(size, defaultFont);
+          return defaultFont;
+      } catch (e) {
+          console.error(`[ExodeUIEngine] getFont error: ${e}. Attempting last resort.`);
+          try {
+              const font = matchFont({ fontSize: size });
+              this.fonts.set(size, font);
+              return font;
+          } catch (e2) {
+              console.error(`[ExodeUIEngine] Total font failure: ${e2}`);
+              return Skia.Font(null as any, size);
+          }
+      }
+  }
 
-        if (style.fill) {
-          const paint = Skia.Paint();
-          paint.setColor(Skia.Color(style.fill.color));
-          paint.setAlphaf((state.opacity ?? 1) * (style.fill.opacity ?? 1));
-          paint.setStyle(PaintStyle.Fill);
+  private renderText(canvas: any, obj: any, w: number, h: number) {
+      const state = this.objectStates.get(obj.id);
+      const geom = state?.geometry || obj.geometry;
+      const text = obj.text || geom.text || '';
+      if (!text) return;
+
+      const paint = Skia.Paint();
+      const colorValue = obj.style?.fill?.color || '#ffffff';
+      try {
+          const skColor = Skia.Color(colorValue);
+          paint.setColor(skColor);
+      } catch (e) {
+          paint.setColor(Skia.Color('#ffffff'));
+      }
+      
+      const opacity1 = state?.opacity !== undefined ? state.opacity : 1;
+      const opacity2 = obj.style?.fill?.opacity !== undefined ? obj.style.fill.opacity : 1;
+      paint.setAlphaf(Math.max(0, Math.min(1, opacity1 * opacity2)));
 
-          if (style.shadow && style.shadow.opacity > 0) {
-              const alphaHex = Math.round(style.shadow.opacity * 255).toString(16).padStart(2, '0');
-              const colorWithAlpha = `${style.shadow.color}${alphaHex}`;
-              paint.setImageFilter(Skia.ImageFilter.MakeDropShadow(
-                  style.shadow.offsetX, style.shadow.offsetY,
-                  style.shadow.blur, style.shadow.blur,
-                  Skia.Color(colorWithAlpha)
-              ));
+      const fontSize = geom.fontSize || 14;
+      const font = this.getFont(fontSize, geom.fontFamily || obj.fontFamily || 'System');
+      
+      const align = geom.textAlign || obj.textAlign || 'center';
+      let x = -w/2;
+      
+      // Calculate text width for alignment
+      const textWidth = font.getTextWidth(text);
+      if (align === 'center') {
+          x = -textWidth / 2;
+      } else if (align === 'right') {
+          x = w/2 - textWidth;
+      }
+
+      if (this._renderCount % 60 === 1) {
+          console.log(`[ExodeUIEngine] Drawing text: "${text}" align=${align} width=${textWidth} x=${x} color=${colorValue} alpha=${paint.getAlphaf()} font_size=${font.getSize()}`);
+      }
+      
+      // Check baseline (web typically aligns center of text roughly to center if no baseline is provided, but standard is y=fontSize/2 or similar)
+      const y = geom.verticalAlign === 'center' || !geom.verticalAlign ? fontSize / 3 : fontSize / 2;
+      
+      canvas.drawText(text, x, y, paint, font);
+  }
+
+  private renderImage(canvas: any, obj: any, w: number, h: number) {
+      // Image support requires Skia.Image.MakeFromExternalSource or similar
+      // Placeholder for now
+      const paint = Skia.Paint();
+      paint.setColor(Skia.Color('#374151'));
+      canvas.drawRect({ x: -w/2, y: -h/2, width: w, height: h }, paint);
+  }
+
+  private renderButton(canvas: any, obj: any, w: number, h: number) {
+      const state = this.objectStates.get(obj.id);
+      const opts = state?.options || obj.options || {};
+      const paint = Skia.Paint();
+      
+      const isPressed = this.draggingSliderId === obj.id; // Reuse logic for now
+      paint.setColor(Skia.Color(isPressed ? (opts.activeBackgroundColor || '#2563eb') : (opts.backgroundColor || '#3b82f6')));
+      
+      const r = opts.cornerRadius ?? 8;
+      canvas.drawRRect(Skia.RRectXY({ x: -w/2, y: -h/2, width: w, height: h }, r, r), paint);
+      
+      const label = opts.label || { text: opts.text || 'Button', fontSize: 14, color: '#ffffff' };
+      if (label && label.text) {
+          const textPaint = Skia.Paint();
+          textPaint.setColor(Skia.Color(label.color || '#ffffff'));
+          const fontSize = label.fontSize || 14;
+          const font = this.getFont(fontSize);
+
+          // DEBUG: Cyan marker for button text
+          const linePaint = Skia.Paint();
+          linePaint.setColor(Skia.Color('cyan'));
+          linePaint.setStrokeWidth(1);
+          canvas.drawLine(-w/4, fontSize/2, w/4, fontSize/2, linePaint);
+
+          if (this._renderCount % 60 === 1) {
+              console.log(`[ExodeUIEngine] Button text: "${label.text}" at ${-w/4},${fontSize/2} font_size=${font.getSize()}`);
           }
-          if (style.blur && style.blur.amount > 0) {
-              paint.setMaskFilter(Skia.MaskFilter.MakeBlur(BlurStyle.Normal, style.blur.amount, true));
+
+          canvas.drawText(label.text, -w/4, fontSize / 2, textPaint, font);
+      }
+  }
+
+  private renderToggle(canvas: any, obj: any, w: number, h: number) {
+      const state = this.objectStates.get(obj.id);
+      const opts = state?.options || obj.options || {};
+      const checked = opts.checked || false;
+      
+      const paint = Skia.Paint();
+      paint.setColor(Skia.Color(checked ? (opts.activeColor || '#3b82f6') : (opts.inactiveColor || '#374151')));
+      
+      const r = h / 2;
+      canvas.drawRRect(Skia.RRectXY({ x: -w/2, y: -h/2, width: w, height: h }, r, r), paint);
+      
+      const thumbPaint = Skia.Paint();
+      thumbPaint.setColor(Skia.Color('#ffffff'));
+      const thumbRadius = (h - 8) / 2;
+      const thumbX = checked ? (w / 2 - thumbRadius - 4) : (-w / 2 + thumbRadius + 4);
+      canvas.drawCircle(thumbX, 0, thumbRadius, thumbPaint);
+  }
+
+  private renderSlider(canvas: any, obj: any, w: number, h: number) {
+      const state = this.objectStates.get(obj.id);
+      const opts = state?.options || obj.options || {};
+      const value = opts.value ?? 50;
+      const min = opts.min ?? 0;
+      const max = opts.max ?? 100;
+      const percentage = (value - min) / (max - min);
+
+      const trackPaint = Skia.Paint();
+      trackPaint.setColor(Skia.Color(opts.inactiveColor || '#374151'));
+      const trackHeight = opts.trackHeight || 4;
+      canvas.drawRect({ x: -w/2, y: -trackHeight/2, width: w, height: trackHeight }, trackPaint);
+
+      const activePaint = Skia.Paint();
+      activePaint.setColor(Skia.Color(opts.activeColor || '#3b82f6'));
+      const thumbWidth = opts.thumbWidth ?? 16;
+      const travelW = w - thumbWidth;
+      const thumbX = -w / 2 + (thumbWidth / 2) + (percentage * travelW);
+      canvas.drawRect({ x: -w/2, y: -trackHeight/2, width: thumbX + w/2, height: trackHeight }, activePaint);
+
+      const thumbPaint = Skia.Paint();
+      thumbPaint.setColor(Skia.Color(opts.thumbColor || '#ffffff'));
+      canvas.drawCircle(thumbX, 0, thumbWidth / 2, thumbPaint);
+  }
+
+  private renderDropdown(canvas: any, obj: any, w: number, h: number) {
+      const state = this.objectStates.get(obj.id);
+      const opts = state?.options || obj.options || {};
+      const isOpen = opts.isOpen ?? false;
+
+      const paint = Skia.Paint();
+      paint.setColor(Skia.Color(opts.backgroundColor || '#ffffff'));
+      const r = opts.cornerRadius ?? 6;
+      canvas.drawRRect(Skia.RRectXY({ x: -w/2, y: -h/2, width: w, height: h }, r, r), paint);
+
+      const displayText = opts.selectedValue || opts.placeholder || 'Select...';
+      const textPaint = Skia.Paint();
+      textPaint.setColor(Skia.Color(opts.color || '#333333'));
+      const fontSize = opts.fontSize || 14;
+      const font = this.getFont(fontSize, 'Helvetica Neue');
+
+      canvas.save();
+      canvas.translate(-w/2 + 10, fontSize / 2);
+      canvas.drawText(String(displayText), 0, 0, textPaint, font);
+      canvas.restore();
+      
+      // Chevron
+      const chevronPaint = Skia.Paint();
+      chevronPaint.setColor(Skia.Color(opts.chevronColor || '#9ca3af'));
+      chevronPaint.setStyle(PaintStyle.Stroke);
+      chevronPaint.setStrokeWidth(2);
+      const cx = w/2 - 15;
+      const cy = isOpen ? 2 : 0;
+      if (isOpen) {
+          canvas.drawLine(cx - 4, cy + 2, cx, cy - 2, chevronPaint);
+          canvas.drawLine(cx, cy - 2, cx + 4, cy + 2, chevronPaint);
+      } else {
+          canvas.drawLine(cx - 4, cy - 2, cx, cy + 2, chevronPaint);
+          canvas.drawLine(cx, cy + 2, cx + 4, cy - 2, chevronPaint);
+      }
+
+      if (isOpen && opts.optionsList && opts.optionsList.length > 0) {
+          const dropList = opts.optionsList;
+          const dropdownItemH = opts.itemHeight || 36;
+          const dropdownY = h/2;
+          const dropX = -w/2;
+          const totalH = dropList.length * dropdownItemH;
+          
+          const dropBgPaint = Skia.Paint();
+          dropBgPaint.setColor(Skia.Color(opts.listBackgroundColor || '#ffffff'));
+          canvas.drawRRect(Skia.RRectXY({ x: dropX, y: dropdownY, width: w, height: totalH }, 6, 6), dropBgPaint);
+          
+          const borderP = Skia.Paint();
+          borderP.setColor(Skia.Color(opts.listBorderColor || '#e5e7eb'));
+          borderP.setStyle(PaintStyle.Stroke);
+          borderP.setStrokeWidth(1);
+          canvas.drawRRect(Skia.RRectXY({ x: dropX, y: dropdownY, width: w, height: totalH }, 6, 6), borderP);
+
+          dropList.forEach((item: any, i: number) => {
+              const itemY = dropdownY + i * dropdownItemH;
+              const isActive = opts.activeItemIndex === i;
+              if (isActive) {
+                  const activePaint = Skia.Paint();
+                  activePaint.setColor(Skia.Color(opts.listHoverColor || '#eff6ff'));
+                  canvas.drawRect({ x: dropX, y: itemY, width: w, height: dropdownItemH }, activePaint);
+              }
+              const itemText = typeof item === 'string' ? item : (item?.label || `Option ${i + 1}`);
+              const itemTextP = Skia.Paint();
+              itemTextP.setColor(Skia.Color(opts.listTextColor || (isActive ? '#2563eb' : '#374151')));
+              canvas.save();
+              canvas.translate(dropX + 12, itemY + dropdownItemH / 2);
+              canvas.drawText(String(itemText), 0, fontSize / 3, itemTextP, font);
+              canvas.restore();
+          });
+      }
+  }
+
+  private renderListView(canvas: any, obj: any, w: number, h: number) {
+      const state = this.objectStates.get(obj.id);
+      const opts = state?.options || obj.options || {};
+      const items = opts.items || [];
+      const scrollOffset = opts.scrollOffset || 0;
+      
+      const glassEffect = opts.glassEffect !== false;
+      const cornerR = opts.cornerRadius ?? 12;
+      let listBgColor = opts.listBackgroundColor || opts.backgroundColor || (glassEffect ? 'rgba(31,41,55,0.4)' : '#1f2937');
+      if (listBgColor === 'transparent') listBgColor = 'rgba(0,0,0,0)';
+      
+      const getSafeColor = (col: any, fallback: string = '#000000') => {
+          if (!col) return Skia.Color('rgba(0,0,0,0)');
+          if (col === 'transparent') return Skia.Color('rgba(0,0,0,0)');
+          
+          let cleanStr = col;
+          if (typeof col === 'object') {
+              cleanStr = col?.color || col?.stops?.[0]?.color || fallback;
           }
+          if (typeof cleanStr !== 'string') return Skia.Color(fallback);
 
-          canvas.drawPath(path, paint);
-        }
-        if (style.stroke) {
-          const paint = Skia.Paint();
-          paint.setColor(Skia.Color(style.stroke.color));
-          paint.setStrokeWidth(style.stroke.width);
-          paint.setAlphaf((state.opacity ?? 1) * (style.stroke.opacity ?? 1));
-          paint.setStyle(PaintStyle.Stroke);
-
-          if (style.shadow && style.shadow.opacity > 0) {
-              const alphaHex = Math.round(style.shadow.opacity * 255).toString(16).padStart(2, '0');
-              const colorWithAlpha = `${style.shadow.color}${alphaHex}`;
-              paint.setImageFilter(Skia.ImageFilter.MakeDropShadow(
-                  style.shadow.offsetX, style.shadow.offsetY,
-                  style.shadow.blur, style.shadow.blur,
-                  Skia.Color(colorWithAlpha)
-              ));
-          }
-          if (style.blur && style.blur.amount > 0) {
-              paint.setMaskFilter(Skia.MaskFilter.MakeBlur(BlurStyle.Normal, style.blur.amount, true));
+          const clean = cleanStr.replace(/\s+/g, '');
+          try {
+              return Skia.Color(clean) || Skia.Color(fallback);
+          } catch {
+              return Skia.Color(fallback);
+          }
+      };
+
+      const bgPaint = Skia.Paint();
+      bgPaint.setColor(getSafeColor(listBgColor, '#1f2937'));
+      bgPaint.setStyle(PaintStyle.Fill);
+      
+      const rRect = Skia.RRectXY({ x: -w/2, y: -h/2, width: w, height: h }, cornerR, cornerR);
+      canvas.drawRRect(rRect, bgPaint);
+
+      if (glassEffect) {
+          const borderPaint = Skia.Paint();
+          borderPaint.setColor(getSafeColor('rgba(255,255,255,0.25)'));
+          borderPaint.setStyle(PaintStyle.Stroke);
+          borderPaint.setStrokeWidth(1);
+          canvas.drawRRect(rRect, borderPaint);
+      }
+
+      canvas.save();
+      // const clipOp = ClipOp ? ClipOp.Intersect : 1; 
+      // canvas.clipRRect(rRect, clipOp, true);
+
+      const itemHeight = opts.itemHeight || 50;
+      const itemGap = opts.itemGap ?? 10;
+      const padding = opts.padding ?? 0;
+      const pad = typeof padding === 'number' ? padding : (padding as any)[0] || 0;
+      
+      let currentPos = -h/2 + scrollOffset + pad;
+
+      const font = this.getFont(14, 'Helvetica Neue');
+      const accentColor = opts.accentColor || '#3b82f6';
+      const itemTextColor = opts.itemTextColor || '#333333';
+      const itemBgColor = opts.itemBackgroundColor || 'transparent';
+      
+      if (this._renderCount <= 2) {
+          // debug logging disabled
+      }
+      
+      items.forEach((item: any, i: number) => {
+          const itemY = currentPos;
+          const itemH = itemHeight;
+          const itemW = w;
+          
+          if (itemY + itemH > -h/2 && itemY < h/2) {
+              const isHovered = opts.hoveredIndex === i;
+              const isActive = opts.activeItemIndex === i;
+
+              if (isActive) {
+                  const activePaint = Skia.Paint();
+                  activePaint.setColor(getSafeColor(accentColor, '#3b82f6'));
+                  activePaint.setAlphaf(0.8);
+                  canvas.drawRect({ x: -w/2, y: itemY, width: itemW, height: itemH }, activePaint);
+              } else if (isHovered) {
+                  const hoverPaint = Skia.Paint();
+                  hoverPaint.setColor(getSafeColor(glassEffect ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.05)'));
+                  canvas.drawRect({ x: -w/2, y: itemY, width: itemW, height: itemH }, hoverPaint);
+              } else if (itemBgColor && itemBgColor !== 'transparent') {
+                  const itemBgPaint = Skia.Paint();
+                  itemBgPaint.setColor(getSafeColor(itemBgColor));
+                  canvas.drawRect({ x: -w/2, y: itemY, width: itemW, height: itemH }, itemBgPaint);
+              }
+
+              if (isActive || isHovered) {
+                  const stripePaint = Skia.Paint();
+                  stripePaint.setColor(getSafeColor(accentColor, '#3b82f6'));
+                  canvas.drawRect({ x: -w/2, y: itemY, width: 3, height: itemH }, stripePaint);
+              }
+
+              const textPaint = Skia.Paint();
+              if (isActive) {
+                  textPaint.setColor(getSafeColor('#ffffff'));
+              } else if (glassEffect) {
+                  textPaint.setColor(getSafeColor('#ffffff'));
+                  textPaint.setAlphaf(0.9);
+              } else {
+                  textPaint.setColor(getSafeColor(itemTextColor, '#ffffff'));
+              }
+
+              const text = typeof item === 'string' ? item : (item?.label || item?.value || `Item ${i + 1}`);
+              canvas.save();
+              canvas.translate(-w/2 + 16, itemY + itemH / 2);
+              canvas.drawText(String(text), 0, 14 / 3, textPaint, font);
+              canvas.restore();
           }
+          currentPos += itemHeight + itemGap;
+      });
+
+      canvas.restore();
+  }
+
+  private renderInputBox(canvas: any, obj: any, w: number, h: number) {
+      const state = this.objectStates.get(obj.id);
+      const opts = state?.options || obj.options || {};
+      
+      const paint = Skia.Paint();
+      paint.setColor(Skia.Color(opts.backgroundColor || '#1f2937'));
+      const r = opts.cornerRadius ?? 8;
+      canvas.drawRRect(Skia.RRectXY({ x: -w/2, y: -h/2, width: w, height: h }, r, r), paint);
+
+      const textPaint = Skia.Paint();
+      textPaint.setColor(Skia.Color(opts.color || '#ffffff'));
+      const fontSize = opts.fontSize || 14;
+      const font = this.getFont(fontSize);
+      const text = opts.text || '';
+      const display = text || opts.placeholder || 'Enter text...';
+      if (!text) textPaint.setAlphaf(0.5);
+
+      canvas.drawText(display, -w/2 + 15, 5, textPaint, font);
+  }
+
+  private renderSVG(canvas: any, obj: any, w: number, h: number) {
+      const geometry = obj.geometry;
+      const svgContent = geometry.svgContent;
+      if (!svgContent) return;
+
+      // In a real implementation, we'd parse the SVG or use a pre-parsed Skia Path
+      // For now, placeholder or basic path if it's a simple icon
+      const paint = Skia.Paint();
+      paint.setColor(Skia.Color('#ffffff'));
+      paint.setAlphaf(0.8);
+      canvas.drawCircle(0, 0, Math.min(w, h) / 4, paint);
+  }
 
+  private renderLineGraph(canvas: any, geom: any, w: number, h: number) {
+      const state = this.objectStates.get(geom.id);
+      const datasets = geom.datasets || [];
+      if (datasets.length === 0) return;
+
+      const paint = Skia.Paint();
+      paint.setStyle(PaintStyle.Stroke);
+      paint.setStrokeWidth(geom.lineWidth || 2);
+
+      datasets.forEach((ds: any) => {
+          const data = ds.data || [];
+          if (data.length < 2) return;
+
+          paint.setColor(Skia.Color(ds.lineColor || '#3b82f6'));
+          const path = Skia.Path.Make();
+          
+          const stepX = w / (data.length - 1);
+          const max = Math.max(...data, 1);
+          
+          data.forEach((val: number, i: number) => {
+              const x = -w/2 + i * stepX;
+              const y = h/2 - (val / max) * h;
+              if (i === 0) path.moveTo(x, y);
+              else path.lineTo(x, y);
+          });
           canvas.drawPath(path, paint);
+      });
+  }
+  private renderShape(canvas: SkCanvas, obj: ShapeObject, w: number, h: number) {
+    const state = this.objectStates.get(obj.id);
+    const geometry = state.geometry || obj.geometry;
+    const style = state.style || obj.style;
+
+    const path = Skia.Path.Make();
+    if (geometry.type === 'Rectangle') {
+        const rect = { x: -w/2, y: -h/2, width: w, height: h };
+        if (state.cornerRadius || geometry.corner_radius) {
+            const cr = state.cornerRadius || geometry.corner_radius;
+            path.addRRect(Skia.RRectXY(rect, cr, cr));
+        } else {
+            path.addRect(rect);
         }
+    } else if (geometry.type === 'Ellipse') {
+        path.addOval({ x: -w/2, y: -h/2, width: w, height: h });
+    } else if (geometry.type === 'Triangle') {
+        path.moveTo(0, -h/2);
+        path.lineTo(w/2, h/2);
+        path.lineTo(-w/2, h/2);
+        path.close();
+    } else if (geometry.type === 'Star') {
+         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);
+             const rad = i % 2 === 0 ? or : ir;
+             const px = rad * Math.cos(a);
+             const py = rad * Math.sin(a);
+             if (i === 0) path.moveTo(px, py);
+             else path.lineTo(px, py);
+         }
+         path.close();
+    }
+
+    if (style.fill) {
+      const paint = Skia.Paint();
+      paint.setColor(Skia.Color(style.fill.color || '#000000'));
+      paint.setAlphaf((state.opacity ?? 1) * (style.fill.opacity ?? 1));
+      paint.setStyle(PaintStyle.Fill);
+
+      if (style.shadow && style.shadow.opacity > 0) {
+          const alphaHex = Math.round(style.shadow.opacity * 255).toString(16).padStart(2, '0');
+          const colorWithAlpha = `${style.shadow.color}${alphaHex}`;
+          paint.setImageFilter(Skia.ImageFilter.MakeDropShadow(
+              style.shadow.offsetX, style.shadow.offsetY,
+              style.shadow.blur, style.shadow.blur,
+              Skia.Color(colorWithAlpha)
+          ));
+      }
+      if (style.blur && style.blur.amount > 0) {
+          paint.setMaskFilter(Skia.MaskFilter.MakeBlur(BlurStyle.Normal, style.blur.amount, true));
+      }
+      canvas.drawPath(path, paint);
+    }
+    if (style.stroke) {
+      const paint = Skia.Paint();
+      paint.setColor(Skia.Color(style.stroke.color));
+      paint.setStrokeWidth(style.stroke.width);
+      paint.setAlphaf((state.opacity ?? 1) * (style.stroke.opacity ?? 1));
+      paint.setStyle(PaintStyle.Stroke);
+      canvas.drawPath(path, paint);
     }
-    canvas.restore();
   }
 }