exodeui-react-native 1.0.0

package/README.md

@@ -0,0 +1,45 @@
+# exodeui-react-native
+
+The React Native Runtime for the ExodeUI Animation Engine. Render ExodeUI animations natively using Skia.
+
+## Installation
+
+```bash
+npm install exodeui-react-native @shopify/react-native-skia
+# or
+yarn add exodeui-react-native @shopify/react-native-skia
+```
+
+## Setup
+
+Ensure you have configured `@shopify/react-native-skia` in your project according to their [installation guide](https://shopify.github.io/react-native-skia/docs/getting-started/installation).
+
+## Basic Usage
+
+```tsx
+import { ExodeUIView } from 'exodeui-react-native';
+import animationData from './my-animation.json';
+
+function App() {
+  return (
+    <ExodeUIView 
+      artboard={animationData} 
+      style={{ width: 300, height: 300 }}
+    />
+  );
+}
+```
+
+## API
+
+### `<ExodeUIView />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `artboard` | `object` | `undefined` | The JSON animation data object. |
+| `style` | `ViewStyle` | `-` | Styles for the container view. |
+| `onReady` | `(engine: any) => void` | `undefined` | Callback fired when the engine is loaded. |
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "exodeui-react-native",
+  "version": "1.0.0",
+  "description": "React Native runtime for ExodeUI animations",
+  "main": "src/index.tsx",
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "react-native",
+    "animation",
+    "exodeui"
+  ],
+  "author": "",
+  "license": "ISC",
+  "peerDependencies": {
+    "@shopify/react-native-skia": "*",
+    "react": "*",
+    "react-native": "*"
+  },
+  "devDependencies": {
+    "@shopify/react-native-skia": "^2.4.14",
+    "@types/matter-js": "^0.20.2"
+  },
+  "dependencies": {
+    "matter-js": "^0.20.0"
+  }
+}

package/src/ExodeUIView.tsx

@@ -0,0 +1,115 @@
+import React, { useRef, useEffect, useState, useImperativeHandle, forwardRef } from 'react';
+import { View, StyleSheet, TouchableWithoutFeedback, LayoutChangeEvent, Platform } from 'react-native';
+import { Canvas, Skia, Picture, SkPicture } from '@shopify/react-native-skia';
+import { ExodeUIEngine } from './engine';
+import { Artboard, Fit, Alignment } from './types';
+
+export interface ExodeUIViewProps {
+  artboard?: Artboard;
+  style?: any;
+  autoPlay?: boolean;
+  fit?: Fit;
+  alignment?: Alignment;
+  onReady?: (engine: ExodeUIEngine) => void;
+  onTrigger?: (triggerName: string, animationName: string) => void;
+  onInputUpdate?: (nameOrId: string, value: any) => void;
+}
+
+export const ExodeUIView = forwardRef<any, ExodeUIViewProps>(
+  ({ artboard, style, autoPlay = true, fit = 'Contain', alignment = 'Center', onReady, onTrigger, onInputUpdate }, ref) => {
+    
+    const engineRef = useRef<ExodeUIEngine>(new ExodeUIEngine());
+    const [picture, setPicture] = useState<SkPicture | null>(null);
+    const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+    const lastTimeRef = useRef<number>(0);
+    const rafRef = useRef<number | undefined>(undefined);
+
+    useImperativeHandle(ref, () => ({
+        getEngine: () => engineRef.current,
+        // Expose other methods if needed
+    }));
+
+    useEffect(() => {
+        engineRef.current.setLayout(fit, alignment);
+    }, [fit, alignment]);
+
+    useEffect(() => {
+        if (onTrigger) {
+            engineRef.current.setTriggerCallback(onTrigger);
+        }
+    }, [onTrigger]);
+
+    useEffect(() => {
+        if (onInputUpdate) {
+            engineRef.current.setInputUpdateCallback(onInputUpdate);
+        }
+    }, [onInputUpdate]);
+
+    useEffect(() => {
+        if (artboard) {
+            engineRef.current.load(artboard);
+            if (onReady) onReady(engineRef.current);
+        }
+    }, [artboard]);
+
+    const onLayout = (event: LayoutChangeEvent) => {
+        const { width, height } = event.nativeEvent.layout;
+        setDimensions({ width, height });
+    };
+
+    useEffect(() => {
+        const loop = (timestamp: number) => {
+            if (lastTimeRef.current === 0) lastTimeRef.current = timestamp;
+            const dt = (timestamp - lastTimeRef.current) / 1000;
+            lastTimeRef.current = timestamp;
+
+            const engine = engineRef.current;
+            const { width, height } = dimensions;
+
+            if (width > 0 && height > 0) {
+                if (autoPlay) {
+                    engine.advance(dt);
+                }
+
+                // Record Picture
+                const recorder = Skia.PictureRecorder();
+                const canvas = recorder.beginRecording(Skia.XYWHRect(0, 0, width, height));
+                engine.render(canvas, width, height);
+                const pic = recorder.finishRecordingAsPicture();
+                setPicture(pic);
+            }
+
+            rafRef.current = requestAnimationFrame(loop);
+        };
+
+        rafRef.current = requestAnimationFrame(loop);
+
+        return () => {
+            if (rafRef.current) cancelAnimationFrame(rafRef.current);
+        };
+    }, [autoPlay, dimensions]); // depend on dimensions to restart loop/recording? Actually loop uses ref values ideally but dimensions state update triggers re-render anyway.
+
+    const handleTouch = (e: any) => {
+        const { locationX, locationY } = e.nativeEvent;
+        engineRef.current.handlePointerInput('click', locationX, locationY, dimensions.width, dimensions.height);
+    };
+
+    return (
+        <View style={[styles.container, style]} onLayout={onLayout}>
+             <TouchableWithoutFeedback onPress={handleTouch}>
+                <View style={StyleSheet.absoluteFill}>
+                     <Canvas style={{ flex: 1 }}>
+                         {picture && <Picture picture={picture} />}
+                     </Canvas>
+                </View>
+             </TouchableWithoutFeedback>
+        </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+    container: {
+        overflow: 'hidden',
+    }
+});

package/src/engine.ts

@@ -0,0 +1,863 @@
+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';
+
+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();
+
+  // State Machine State
+  private activeStateMachine: StateMachine | null = null;
+  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;
+    time: number;
+    currentState: State | null;
+  }> = new Map();
+
+  private imageCache = new Map<string, SkImage>();
+  
+  private layout: Layout = { fit: 'Contain', alignment: 'Center' };
+  
+  private onTrigger?: (triggerName: string, animationName: string) => void;
+  private onInputUpdate?: (nameOrId: string, value: any) => void;
+
+  setTriggerCallback(cb: (triggerName: string, animationName: string) => void) {
+      this.onTrigger = cb;
+  }
+  
+  setInputUpdateCallback(cb: (nameOrId: string, value: any) => void) {
+      this.onInputUpdate = cb;
+  }
+
+  constructor() {}
+
+  // Helper to update Map AND notify listener
+  private setInternalInput(id: string, value: any) {
+      this.inputs.set(id, value);
+      if (this.onInputUpdate) {
+          this.onInputUpdate(id, value);
+      }
+  }
+
+  setLayout(fit: Fit, alignment: Alignment) {
+      this.layout = { fit, alignment };
+  }
+
+  getActiveStateIds(layerName: string = 'Base Layer'): string[] {
+      const state = this.layerStates.get(layerName);
+      return state ? state.currentStateIds : [];
+  }
+
+  load(data: Artboard) {
+    this.artboard = data;
+    this.reset();
+  }
+
+  reset() {
+    if (!this.artboard) return;
+    this.objectStates.clear();
+    this.inputs.clear();
+    this.inputNameMap.clear();
+    this.layerStates.clear();
+    this.physicsBodies.clear();
+    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 (body) {
+                    Matter.World.add(this.physicsEngine!.world, body);
+                    this.physicsBodies.set(obj.id, body);
+                }
+            }
+        });
+    }
+
+    // Initialize State Machine
+    if (this.artboard.stateMachine) {
+        this.activeStateMachine = this.artboard.stateMachine;
+        
+        // Init Inputs
+        this.activeStateMachine.inputs.forEach((input: any) => {
+            this.inputs.set(input.id, input.value.value);
+            
+            // Map Name -> IDs
+            const existingIds = this.inputNameMap.get(input.name) || [];
+            existingIds.push(input.id);
+            this.inputNameMap.set(input.name, existingIds);
+        });
+
+        // Init Layers
+        this.activeStateMachine.layers.forEach((layer: any) => {
+            // Initial Entry
+            const entryState = layer.states.find((s: State) => s.id === layer.entryStateId);
+            
+            if (entryState) {
+                this.enterStates(layer.name, [entryState.id]);
+            }
+        });
+    }
+
+    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');
+       if (onLoadAnim) {
+           this.layerStates.set('intro', {
+               currentStateIds: ['onLoad'],
+               animation: onLoadAnim,
+               time: 0,
+               currentState: null
+           });
+       }
+    }
+  }
+
+  private enterStates(layerName: string, stateIds: string[]) {
+      if (stateIds.length === 0) return;
+
+      let anim: Animation | null = null;
+      let selectedState: State | null = null;
+
+      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];
+                  const state = layer.states.find(s => s.id === sId);
+                  
+                  if (state) {
+                         // Priority 1: Direct ID Match
+                        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;
+                        }
+
+                        if (anim) {
+                            selectedState = state; // Store the state
+                            break; // Found one!
+                        }
+                  }
+              }
+          }
+      }
+
+      this.layerStates.set(layerName, {
+          currentStateIds: stateIds,
+          animation: anim,
+          time: 0,
+          currentState: selectedState
+      });
+  }
+
+  // Input Control
+  setInputBool(nameOrId: string, value: boolean) {
+      this.updateInput(nameOrId, value);
+  }
+  
+  setInputNumber(nameOrId: string, value: number) {
+      this.updateInput(nameOrId, value);
+  }
+
+  fireTrigger(nameOrId: string) {
+      this.updateInput(nameOrId, true);
+  }
+
+  setInputText(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') {
+              inputType = input.value.type;
+          }
+      } else {
+          const ids = this.inputNameMap.get(nameOrId);
+          if (ids && ids.length > 0) {
+              const input = this.activeStateMachine?.inputs.find(i => i.id === ids[0]);
+              if (input && typeof input.value === 'object') {
+                  inputType = input.value.type;
+              }
+          }
+      }
+      
+      let finalValue = value;
+      if (inputType === 'Trigger') {
+          if (value === 1) finalValue = true;
+          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));
+      }
+
+      // 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;
+                          }
+                      }
+                  });
+              });
+          });
+          return;
+      }
+
+      this.evaluateTransitions();
+  }
+
+  private evaluateTransitions() {
+      if (!this.activeStateMachine) return;
+
+      this.activeStateMachine.layers.forEach((layer) => {
+          const layerState = this.layerStates.get(layer.name);
+          if (!layerState || layerState.currentStateIds.length === 0) return;
+
+          const nextStateIds: string[] = [];
+          let hasTransition = false;
+
+          for (const currentId of layerState.currentStateIds) {
+              const currentState = layer.states.find((s) => s.id === currentId);
+              if (!currentState) continue;
+
+              let transitioned = false;
+
+              for (const trans of currentState.transitions) {
+                  if (this.checkConditions(trans.conditions)) {
+                       nextStateIds.push(trans.targetStateId);
+                       transitioned = true;
+                       hasTransition = true;
+                       
+                       // Reset Trigger/Number inputs used in this transition
+                       if (trans.conditions) {
+                           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 (this.inputNameMap.has(input.name)) {
+                                            const ids = this.inputNameMap.get(input.name);
+                                            ids?.forEach(id => this.setInternalInput(id, 0));
+                                       }
+                                   }
+                               }
+                           });
+                       }
+                  }
+              }
+
+              if (!transitioned) {
+                  nextStateIds.push(currentId);
+              }
+          }
+
+          if (hasTransition) {
+              const uniqueIds = Array.from(new Set(nextStateIds));
+              this.enterStates(layer.name, uniqueIds);
+          }
+      });
+  }
+
+  private checkConditions(conditions: any[]): boolean {
+      if (!conditions || conditions.length === 0) return true; 
+      
+      return conditions.every((cond) => {
+          const inputId = cond.inputId;
+          const op = cond.op;
+          const targetValue = cond.value;
+
+          const inputValue = this.inputs.get(inputId);
+          
+          if (inputValue === undefined) return false;
+
+          let result = false;
+          switch (op) {
+              case 'Equal': result = inputValue == targetValue; break;
+              case 'NotEqual': result = inputValue != targetValue; break;
+              case 'GreaterThan': result = inputValue > (targetValue as number); break;
+              case 'LessThan': result = inputValue < (targetValue as number); break;
+              case 'GreaterEqual': result = inputValue >= (targetValue as number); break;
+              case 'LessEqual': result = inputValue <= (targetValue as number); break;
+              case 'IsTrue': result = inputValue === true; break;
+              case 'IsFalse': result = inputValue === false; break;
+              default: result = false;
+          }
+          return result; 
+      });
+  }
+
+  // Trigger Management
+  private activeTriggers: Map<string, {
+    triggerId: string;
+    animation: Animation;
+    time: number;
+    phase: 'entry' | 'hold' | 'exit';
+    elapsedHold: number;
+  }> = new Map();
+
+  advance(dt: number) {
+    if (!this.artboard) return;
+
+    // 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
+            }
+        });
+    }
+
+    // Advance State Machine
+    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;
+                
+                if (state.time > duration) {
+                    if (shouldLoop) {
+                        state.time %= duration; 
+                    } else {
+                        state.time = duration; 
+                    }
+                }
+
+                this.applyAnimation(state.animation, state.time);
+            }
+        });
+    }
+
+    // Advance Active Triggers
+    this.activeTriggers.forEach((state, objectId) => {
+        if (state.phase === 'entry') {
+            state.time += dt;
+            if (state.time >= state.animation.duration) {
+                state.phase = 'hold';
+                state.elapsedHold = 0;
+                state.time = state.animation.duration; 
+            }
+            this.applyAnimation(state.animation, state.time);
+        } else if (state.phase === 'hold') {
+             const trigger = this.artboard?.objects.find(o => o.id === objectId)?.triggers?.find(t => t.id === state.triggerId);
+             const holdDuration = (trigger?.duration || 0); 
+             state.elapsedHold += dt * 1000; 
+             
+             if (state.elapsedHold >= holdDuration) {
+                 if (trigger?.exitAnimationId) {
+                     const exitAnim = this.artboard?.animations.find(a => a.id === trigger.exitAnimationId);
+                     if (exitAnim) {
+                         state.phase = 'exit';
+                         state.animation = exitAnim;
+                         state.time = 0;
+                     } else {
+                         this.activeTriggers.delete(objectId);
+                     }
+                 } else {
+                     this.activeTriggers.delete(objectId);
+                 }
+             }
+        } else if (state.phase === 'exit') {
+            state.time += dt;
+            if (state.time >= state.animation.duration) {
+                 this.activeTriggers.delete(objectId); 
+            } else {
+                this.applyAnimation(state.animation, state.time);
+            }
+        }
+    });
+  }
+
+  handlePointerInput(type: string, canvasX: number, canvasY: number, canvasWidth: number, canvasHeight: number) {
+      if (!this.artboard) return;
+
+      const transform = this.calculateTransform(
+          canvasWidth, canvasHeight,
+          this.artboard.width, this.artboard.height,
+          this.layout.fit,
+          this.layout.alignment
+      );
+
+      const artboardX = ((canvasX - transform.tx) / transform.scaleX) - (this.artboard.width / 2);
+      const artboardY = ((canvasY - transform.ty) / transform.scaleY) - (this.artboard.height / 2);
+
+      this.handlePointerEvent(type, artboardX, artboardY);
+  }
+
+  private handlePointerEvent(type: string, x: number, y: number) {
+      if (!this.artboard) return;
+
+      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);
+                  }
+              }
+
+              // 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 (this.onTrigger) {
+                          this.onTrigger(matchingTrigger.name, anim.name);
+                      }
+                      return;
+                  }
+              }
+          }
+      }
+  }
+
+  private hitTest(obj: ShapeObject, x: number, y: number): boolean {
+      const state = this.objectStates.get(obj.id);
+      if (!state) return false;
+
+      const w = (obj.geometry as any).width || 100;
+      const h = (obj.geometry as any).height || 100;
+      
+      const dx = x - state.x;
+      const dy = y - state.y;
+      
+      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; 
+                                  
+      if (isPhysicsControlled && (['x', 'y', 'rotation'].includes(track.property) || track.property.startsWith('transform.'))) {
+          return; 
+      }
+
+      const objState = this.objectStates.get(track.object_id);
+      if (!objState) return;
+
+      const value = this.interpolate(track.keyframes, time);
+      
+      if (track.property.includes('.')) {
+          const parts = track.property.split('.');
+          let current = objState;
+          for (let i = 0; i < parts.length - 1; i++) {
+              if (!current[parts[i]]) current[parts[i]] = {};
+              current = current[parts[i]];
+          }
+          current[parts[parts.length - 1]] = value;
+      } else {
+          objState[track.property] = value;
+      }
+      
+      // Sync State -> Physics Body (for Kinematic/Static animations)
+      const body = this.physicsBodies.get(track.object_id);
+      if (body && body.isStatic) {
+          if (track.property === 'x' || track.property === 'transform.x') {
+             Matter.Body.setPosition(body, { x: value, y: body.position.y });
+          } else if (track.property === 'y' || track.property === 'transform.y') {
+             Matter.Body.setPosition(body, { x: body.position.x, y: value });
+          } else if (track.property === 'rotation' || track.property === 'transform.rotation') {
+             Matter.Body.setAngle(body, value * (Math.PI / 180));
+          }
+      }
+    });
+  }
+
+  private interpolate(keyframes: any[], time: number): any {
+    if (keyframes.length === 0) return 0;
+
+    let bg = keyframes[0];
+    let end = keyframes[keyframes.length - 1];
+
+    if (time <= bg.time) return bg.value;
+    if (time >= end.time) return end.value;
+
+    for (let i = 0; i < keyframes.length - 1; i++) {
+      if (time >= keyframes[i].time && time < keyframes[i+1].time) {
+        bg = keyframes[i];
+        end = keyframes[i+1];
+        break;
+      }
+    }
+
+    const duration = end.time - bg.time;
+    const t = (time - bg.time) / duration;
+
+    if (typeof bg.value === 'string' && bg.value.startsWith('#')) {
+        return this.interpolateColor(bg.value, end.value, t);
+    }
+
+    if (typeof bg.value === 'number') {
+        return bg.value + ((end.value as number) - bg.value) * t;
+    }
+    return bg.value;
+  }
+
+  private interpolateColor(c1: string, c2: string, t: number): string {
+      const parse = (c: string) => {
+          const hex = c.replace('#', '');
+          return {
+              r: parseInt(hex.substring(0, 2), 16),
+              g: parseInt(hex.substring(2, 4), 16),
+              b: parseInt(hex.substring(4, 6), 16)
+          };
+      };
+      
+      const start = parse(c1);
+      const end = parse(c2);
+      
+      const r = Math.round(start.r + (end.r - start.r) * t);
+      const g = Math.round(start.g + (end.g - start.g) * t);
+      const b = Math.round(start.b + (end.b - start.b) * t);
+      
+      const toHex = (n: number) => {
+          const h = Math.max(0, Math.min(255, n)).toString(16);
+          return h.length === 1 ? '0' + h : h;
+      };
+      
+      return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+  }
+
+  render(canvas: SkCanvas, width: number, height: number) {
+    if (!this.artboard) {
+        return;
+    }
+
+    canvas.clear(Skia.Color(this.artboard.backgroundColor || '#000000'));
+
+    const abWidth = this.artboard.width;
+    const abHeight = this.artboard.height;
+    
+    // Calculate Layout Transform
+    const transform = this.calculateTransform(
+        width, height, 
+        abWidth, abHeight, 
+        this.layout.fit, 
+        this.layout.alignment
+    );
+
+    canvas.save();
+    canvas.translate(transform.tx, transform.ty);
+    canvas.scale(transform.scaleX, transform.scaleY);
+
+    // 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); 
+
+    this.artboard.objects.forEach((obj: ShapeObject) => {
+      this.renderObject(canvas, obj);
+    });
+
+    canvas.restore();
+  }
+
+  private calculateTransform(
+      availableWidth: number, availableHeight: number, 
+      contentWidth: number, contentHeight: number, 
+      fit: Fit, alignment: Alignment
+  ): { scaleX: number, scaleY: number, tx: number, ty: number } {
+      let scaleX = 1;
+      let scaleY = 1;
+      let minScale = 1;
+      
+      const contentRatio = contentWidth / contentHeight;
+      const screenRatio = availableWidth / availableHeight;
+
+      switch (fit) {
+          case 'Contain':
+              if (screenRatio > contentRatio) {
+                  minScale = availableHeight / contentHeight;
+              } else {
+                  minScale = availableWidth / contentWidth;
+              }
+              scaleX = scaleY = minScale;
+              break;
+          case 'Cover':
+              if (screenRatio > contentRatio) {
+                  minScale = availableWidth / contentWidth;
+              } else {
+                  minScale = availableHeight / contentHeight;
+              }
+              scaleX = scaleY = minScale;
+              break;
+          case 'Fill':
+              scaleX = availableWidth / contentWidth;
+              scaleY = availableHeight / contentHeight;
+              break;
+          case 'FitWidth':
+              minScale = availableWidth / contentWidth;
+              scaleX = scaleY = minScale;
+              break;
+          case 'FitHeight':
+              minScale = availableHeight / contentHeight;
+              scaleX = scaleY = minScale;
+              break;
+          case 'None':
+              scaleX = scaleY = 1;
+              break;
+          case 'ScaleDown':
+              minScale = Math.min(availableWidth / contentWidth, availableHeight / contentHeight);
+              if (minScale > 1) minScale = 1;
+              scaleX = scaleY = minScale;
+              break;
+          default:
+              scaleX = scaleY = 1;
+              break;
+      }
+
+      const scaledWidth = contentWidth * scaleX;
+      const scaledHeight = contentHeight * scaleY;
+      
+      let tx = 0;
+      let ty = 0;
+      
+      if (alignment.includes('Left')) {
+          tx = 0;
+      } else if (alignment.includes('Right')) {
+          tx = availableWidth - scaledWidth;
+      } else {
+          tx = (availableWidth - scaledWidth) / 2;
+      }
+      
+      if (alignment.includes('Top')) {
+          ty = 0;
+      } else if (alignment.includes('Bottom')) {
+          ty = availableHeight - scaledHeight;
+      } else {
+          ty = (availableHeight - scaledHeight) / 2;
+      }
+      
+      return { scaleX, scaleY, tx, ty };
+  }
+
+  private renderObject(canvas: SkCanvas, obj: ShapeObject) {
+    const state = this.objectStates.get(obj.id);
+    if (!state) 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;
+
+    canvas.save();
+    canvas.translate(cx, cy);
+    canvas.rotate(state.rotation, 0, 0); 
+    canvas.scale(state.scale_x, state.scale_y);
+
+    const style = state.style || obj.style;
+
+    if (geometry.type === 'Text') {
+        // Text rendering omitted
+    } else if (geometry.type === 'Image') {
+         // Image rendering omitted
+    } 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();
+        }
+
+        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);
+
+          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);
+
+          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);
+        }
+    }
+    canvas.restore();
+  }
+}

package/src/index.tsx

@@ -0,0 +1,4 @@
+export * from './types';
+export * from './ExodeUIView';
+export * from './useExodeUI';
+export * from './engine';

package/src/types.ts

@@ -0,0 +1,213 @@
+export interface Transform {
+  x: number;
+  y: number;
+  rotation: number;
+  scale_x: number;
+  scale_y: number;
+}
+
+export interface Shadow {
+  color: string;
+  blur: number;
+  offsetX: number;
+  offsetY: number;
+  opacity: number;
+}
+
+export interface Blur {
+  amount: number;
+}
+
+export interface Style {
+  fill?: {
+    type: 'Solid' | 'LinearGradient' | 'RadialGradient' | 'None';
+    color: string;
+    opacity: number;
+  };
+  stroke?: {
+    color: string;
+    width: number;
+    opacity: number;
+  };
+  shadow?: Shadow;
+  blur?: Blur;
+  palette?: string[];
+}
+
+export type Geometry = 
+  | { type: 'Rectangle'; width: number; height: number; corner_radius?: number }
+  | { type: 'Ellipse'; width: number; height: number }
+  | { type: 'Text'; text: string; fontSize: number; fontFamily: string; textInputId?: string }
+  | { type: 'SVG'; svgContent: string; width: number; height: number; preserveAspectRatio: boolean; colors: string[] }
+  | { type: 'Triangle'; width: number; height: number }
+  | { type: 'Polygon'; radius: number; sides: number }
+  | { type: 'Star'; inner_radius: number; outer_radius: number; points: number }
+  | { type: 'Line'; length: number }
+  | { type: 'SVG'; svgContent: string; width: number; height: number; preserveAspectRatio: boolean; colors: string[] }
+  | { type: 'Image'; src: string; width: number; height: number };
+
+export interface Trigger {
+  id: string;
+  name: string;
+  eventType: 'onClick' | 'onHold' | 'pointerDown' | 'pointerUp' | 'hover';
+  entryAnimationId?: string | null;
+  exitAnimationId?: string | null;
+  duration?: number;
+  loop?: boolean;
+}
+
+export interface Interaction {
+  id: string;
+  event: 'onClick' | 'onHold' | 'pointerDown' | 'pointerUp' | 'hover';
+  action: 'setInput' | 'fireTrigger';
+  targetInputId: string;
+  value?: any;
+}
+
+export interface Physics {
+    enabled: boolean;
+    bodyType: 'Dynamic' | 'Static';
+    mass: number;
+    density: number;
+    friction: number;            // 0..1
+    restitution: number;         // 0..1 (Bounciness)
+    frictionAir: number;         // 0..1 (Damping)
+    isSensor: boolean;           // For triggers only?
+}
+
+
+export interface ShapeObject {
+  type: 'Shape';
+  id: string;
+  name: string;
+  transform: Transform;
+  geometry: Geometry;
+  style: Style;
+  triggers?: Trigger[];
+  interactions?: Interaction[];
+  physics?: Physics;
+}
+
+export interface Keyframe {
+  time: number;
+  value: number | string;
+  easing: string;
+}
+
+export interface Track {
+  object_id: string;
+  property: string; // e.g., "rotation", "x"
+  keyframes: Keyframe[];
+}
+
+export interface Animation {
+  id: string;
+  name: string;
+  duration: number;
+  tracks: Track[];
+}
+
+// --- State Machine Types ---
+
+export enum ConditionOp {
+    Equal = 'Equal',
+    NotEqual = 'NotEqual',
+    GreaterThan = 'GreaterThan',
+    LessThan = 'LessThan',
+    GreaterEqual = 'GreaterEqual',
+    LessEqual = 'LessEqual',
+    IsTrue = 'IsTrue',
+    IsFalse = 'IsFalse'
+}
+
+export interface Condition {
+    inputId: string;
+    op: ConditionOp;
+    value?: number | boolean;
+}
+
+export interface StateAction {
+    type: 'SetInput' | 'FireTrigger';
+    inputId: string;
+    value?: boolean | number;
+}
+
+export interface Transition {
+  id: string;
+  targetStateId: string;
+  duration: number;
+  delay?: number;
+  conditions: Condition[];
+}
+
+export interface State {
+  id: string;
+  name: string;
+  // UI Position for Graph
+  x: number;
+  y: number;
+  transitions: Transition[];
+  // Animation Binding
+  animationId?: string | null;
+  loop?: boolean;
+  speed?: number;
+  // Advanced Logic
+  onEntry?: StateAction[];
+  onExit?: StateAction[];
+}
+
+export type InputValue = 
+    | { type: 'Boolean', value: boolean }
+    | { type: 'Number', value: number }
+    | { type: 'Trigger', value: boolean }
+    | { type: 'Text', value: string };
+
+export interface InputNodePosition {
+    id: string;
+    x: number;
+    y: number;
+}
+
+export interface Input {
+    id: string;
+    name: string;
+    value: InputValue;
+    x?: number; // Deprecated
+    y?: number; // Deprecated
+    nodes?: InputNodePosition[];
+}
+
+export interface Layer {
+  name: string;
+  entryStateId: string;
+  entryConditions?: Condition[];
+  states: State[];
+}
+
+export interface StateMachine {
+  inputs: Input[];
+  layers: Layer[];
+}
+
+export interface Artboard {
+  name: string;
+  width: number;
+  height: number;
+  backgroundColor: string;
+  objects: ShapeObject[];
+  animations: Animation[];
+  stateMachine?: StateMachine;
+  physics?: {
+    gravity: { x: number; y: number };
+    wind: { x: number; y: number };
+  };
+}
+
+export type Fit = 'Cover' | 'Contain' | 'Fill' | 'FitWidth' | 'FitHeight' | 'None' | 'ScaleDown';
+
+export type Alignment = 'Center' | 'TopLeft' | 'TopCenter' | 'TopRight' | 'CenterLeft' | 'CenterRight' | 'BottomLeft' | 'BottomCenter' | 'BottomRight';
+
+export interface Layout {
+  fit: Fit;
+  alignment: Alignment;
+}

package/src/useExodeUI.ts

@@ -0,0 +1,26 @@
+import { useState, useCallback } from 'react';
+import { ExodeUIEngine } from './engine';
+
+export function useExodeUI() {
+  const [engine, setEngine] = useState<ExodeUIEngine | null>(null);
+
+  const setInputBool = useCallback((name: string, value: boolean) => {
+      engine?.setInputBool(name, value);
+  }, [engine]);
+
+  const setInputNumber = useCallback((name: string, value: number) => {
+      engine?.setInputNumber(name, value);
+  }, [engine]);
+
+  const fireTrigger = useCallback((name: string) => {
+      engine?.fireTrigger(name);
+  }, [engine]);
+
+  return {
+      setEngine, 
+      engine,
+      setInputBool,
+      setInputNumber,
+      fireTrigger
+  };
+}