exodeui-react-native 1.2.1 → 1.3.2

package/README.md

@@ -30,7 +30,7 @@ function App() {
 }
 ```
 
-## API
+## API Reference
 
 ### `<ExodeUIView />`
 
@@ -38,7 +38,65 @@ function App() {
 |------|------|---------|-------------|
 | `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. |
+| `onReady` | `(engine: ExodeUIEngine) => void` | `undefined` | Callback fired when the engine is initialized. |
+
+---
+
+### `ExodeUIEngine` (Accessed via `onReady`)
+
+The `engine` instance allows you to interact with the animation, respond to events, and update data at runtime.
+
+#### Component Listeners
+Register callbacks for specific interactive components:
+
+- `setButtonClickCallback(cb: (name, id) => void)`: Fired when a button is clicked.
+- `setToggleCallback(cb: (name, checked) => void)`: Fired when a toggle switch changes state.
+- `setInputChangeCallback(cb: (name, text) => void)`: Fired when an InputBox text is modified.
+- `setGraphPointClickCallback(cb: (event) => void)`: Fired when a point on a LineGraph is clicked. Provides `pointIndex`, `value`, and `label`.
+- `setTriggerCallback(cb: (trigger, animation) => void)`: Fired when a state machine trigger is activated.
+
+#### Runtime Updaters
+Modify artboard state and data dynamically:
+
+- `updateInput(nameOrId, value)`: Updates a specific state machine input (Number, Boolean, or Trigger).
+- `updateGraphData(nameOrId, data: number[])`: Updates the dataset for a LineGraph component.
+- `updateObjectOptions(id, options)`: Modifies component-specific options (e.g., list items, dropdown options).
+- `updateConstraint(objectId, index, properties)`: Adjusts constraints (e.g., spring stiffness/damping) at runtime.
+
+#### Advanced Functions
+- `setLayout(fit, alignment)`: Change the artboard fit (`Contain`, `Cover`, `Fill`) and alignment.
+- `getActiveStateIds(layerName)`: Returns the currently active state IDs for a state machine layer.
+- `reset()`: Resets all object states and inputs to their artboard defaults.
+
+---
+
+## Examples
+
+### Responding to a Button Click
+```tsx
+<ExodeUIView
+  artboard={myArtboard}
+  onReady={(engine) => {
+    engine.setButtonClickCallback((name, id) => {
+      console.log(`Button "${name}" clicked!`);
+    });
+  }}
+/>
+```
+
+### Feeding Real-time Data to a Graph
+```tsx
+<ExodeUIView
+  artboard={myArtboard}
+  onReady={(engine) => {
+    // Update graph every second
+    setInterval(() => {
+      const nextData = getLiveSensorData();
+      engine.updateGraphData("LiveGraph", nextData);
+    }, 1000);
+  }}
+/>
+```
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "exodeui-react-native",
-  "version": "1.2.1",
+  "version": "1.3.2",
   "description": "React Native runtime for ExodeUI animations",
   "main": "index.js",
   "files": [

package/src/engine.ts

@@ -42,6 +42,9 @@ export class ExodeUIEngine {
   private justFiredTriggers: Set<string> = new Set();
   private _lastPointerPos: { x: number; y: number } | null = null;
   private _prevPointerPos: { x: number; y: number } | null = null;
+  private _reportedErrors: Set<string> = new Set();
+  private activeStates: Map<string, string> = new Map(); // LayerName -> StateId
+  private activeTriggers: Map<string, any> = new Map();
 
   // Interaction State
   private focusedId: string | null = null;
@@ -204,11 +207,14 @@ export class ExodeUIEngine {
             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),
+            width: (obj as any).width ?? (obj.geometry as any)?.width ?? ((obj.geometry?.type === 'Line') ? (obj.geometry as any).length : 100),
+            height: (obj as any).height ?? (obj.geometry as any)?.height ?? ((obj.geometry?.type === 'Line') ? 0.01 : 100),
+            // cornerRadius lives in geometry.corner_radius for Shape objects, obj.cornerRadius for Frame/Group
+            cornerRadius: (obj.geometry as any)?.corner_radius || (obj.geometry as any)?.cornerRadius || (obj as any).cornerRadius || 0,
+            // Opacity is typically in transform.opacity in .exode files
+            opacity: (transform as any).opacity ?? obj.opacity ?? 1,
+            // Use transform.visible or isVisible as fallback
+            visible: (transform as any).visible ?? obj.visible ?? (obj as any).isVisible ?? true,
             blendMode: obj.blendMode || 'Normal',
             style: JSON.parse(JSON.stringify(obj.style || {})),
             geometry: JSON.parse(JSON.stringify(obj.geometry || {})),
@@ -598,14 +604,6 @@ export class ExodeUIEngine {
     return value !== undefined ? value : 0;
   }
 
-  private activeTriggers: Map<string, {
-    triggerId: string;
-    animation: SDKAnimation;
-    time: number;
-    phase: 'entry' | 'hold' | 'exit';
-    elapsedHold: number;
-  }> = new Map();
-
   advance(dt: number) {
     if (!this.artboard) return;
 
@@ -664,9 +662,14 @@ export class ExodeUIEngine {
             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; 
+                if (trigger && (trigger as any).holdUntilRelease) {
+                    state.phase = 'hold';
+                    state.elapsedHold = 0;
+                    state.time = state.animation.duration; 
+                } else {
+                    state.phase = 'exit';
+                    state.time = 0;
+                }
             }
             this.applyAnimation(state.animation, state.time);
         } else if (state.phase === 'hold') {
@@ -792,6 +795,10 @@ export class ExodeUIEngine {
 
   handlePointerInput(type: string, canvasX: number, canvasY: number, canvasWidth: number, canvasHeight: number) {
       if (!this.artboard) return;
+      
+      if (type === 'click' || type === 'PointerDown') {
+          console.log(`[ExodeUIEngine] TOUCH RECEIVED: type=${type}, canvasX=${canvasX.toFixed(1)}, canvasY=${canvasY.toFixed(1)}`);
+      }
 
       const transform = this.calculateTransform(
           canvasWidth, canvasHeight,
@@ -800,8 +807,18 @@ export class ExodeUIEngine {
           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);
+      // Map canvas-relative pixels to Artboard-relative pixels
+      // 1. Subtract viewport offset
+      const rx = canvasX - transform.tx;
+      const ry = canvasY - transform.ty;
+      
+      // 2. Scale to artboard size
+      const ax = rx / transform.scaleX;
+      const ay = ry / transform.scaleY;
+
+      // 3. Convert from Top-Left origin to Center origin (-W/2 to W/2)
+      const artboardX = ax - (this.artboard.width / 2);
+      const artboardY = ay - (this.artboard.height / 2);
 
       this._prevPointerPos = this._lastPointerPos;
       this._lastPointerPos = { x: artboardX, y: artboardY };
@@ -842,20 +859,27 @@ export class ExodeUIEngine {
           return false;
       };
 
-      let topHit: any = null;
+      let topInteractiveHit: any = null;
+      let topVisualHit: any = null; // Keep track of the topmost visual hit
       for (let i = this.artboard.objects.length - 1; i >= 0; i--) {
           const obj = this.artboard.objects[i];
           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 (!topVisualHit) { // Assign the first visual hit found (which is the topmost)
+                  topVisualHit = obj;
+              }
               if (objectHandlesEvent(obj, type)) {
-                  hitObj = obj;
-                  break;
+                  topInteractiveHit = obj;
+                  console.log(`[ExodeUIEngine] Interactive Hit: ${obj.name || obj.id} (${obj.type}) at ${x.toFixed(1)},${y.toFixed(1)}`);
+                  break; // Stop at the first interactive hit (topmost interactive)
               }
           }
       }
+      hitObj = topInteractiveHit;
       
-      if (!hitObj && topHit) hitObj = topHit;
+      if (!hitObj && topVisualHit) { // If no interactive hit, use the topmost visual hit
+          hitObj = topVisualHit;
+      }
       
       if (hitObj) {
           console.log(`[ExodeUIEngine] Hit object: ${hitObj.name || hitObj.id} (${hitObj.type})`);
@@ -902,7 +926,7 @@ export class ExodeUIEngine {
                   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);
+                  const world = this.getWorldPos(activeObj.id);
                   
                   if (hitId !== this.activeDropdownId) {
                       // Check if click is inside the expanded options list
@@ -1046,7 +1070,7 @@ export class ExodeUIEngine {
                   const state = this.objectStates.get(targetObj.id);
                   const objW = state?.width || geom?.width || 200;
                   const objH = state?.height || geom?.height || 150;
-                  const world = this.getWorldTransform(targetObj.id);
+                  const world = this.getWorldPos(targetObj.id);
                   const axisMarginL = 30;
                   const axisMarginB = 20;
                   const plotW = objW - axisMarginL;
@@ -1118,7 +1142,7 @@ export class ExodeUIEngine {
 
   private updateSliderValueFromPointer(obj: any, x: number, y: number) {
       const state = this.objectStates.get(obj.id);
-      const world = this.getWorldTransform(obj.id);
+      const world = this.getWorldPos(obj.id);
       const opts = state?.options || obj.options || {};
       const w = obj.geometry?.width || 200;
       
@@ -1192,7 +1216,7 @@ export class ExodeUIEngine {
       let padVal = opts.padding ?? 0;
       if (typeof padVal !== 'number') padVal = padVal[0] || 0;
 
-      const worldTransform = this.getWorldTransform(obj.id);
+      const worldTransform = this.getWorldPos(obj.id);
       const dx = x - worldTransform.x;
       const dy = y - worldTransform.y;
       const rad = -(worldTransform.rotation) * (Math.PI / 180);
@@ -1225,53 +1249,116 @@ export class ExodeUIEngine {
       const state = this.objectStates.get(obj.id);
       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;
+      // Transform artboard coordinates into object-local coordinates by 
+      // recursively applying inverse transforms from root to current object.
+      const local = this.toLocal(obj.id, x, 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 = state.width || (obj.geometry as any)?.width || 100;
+      const h = state.height || (obj.geometry as any)?.height || 100;
+
+      // In local space, origin is (0,0) and bounds are [-w/2, -h/2, w/2, h/2]
+      return Math.abs(local.x) <= w / 2 && Math.abs(local.y) <= h / 2;
+  }
+
+  /**
+   * Transforms a point from Artboard space to Local space of the specified object.
+   */
+  private toLocal(objId: string, x: number, y: number): { x: number, y: number } {
+      const obj = this.artboard?.objects.find(o => o.id === objId);
+      if (!obj) return { x, y };
+
+      // Build path from root to object
+      const path: ShapeObject[] = [];
+      let curr: any = obj;
+      const processedIds = new Set();
+      while (curr && !processedIds.has(curr.id)) {
+          processedIds.add(curr.id);
+          path.unshift(curr);
+          if (!curr.parentId || curr.parentId === 'root') break;
+          curr = this.artboard?.objects.find(o => o.id === curr.parentId);
+      }
+
+      let lx = x;
+      let ly = y;
+
+      for (const node of path) {
+          const s = this.objectStates.get(node.id);
+          const t = node.transform || { x: 0, y: 0, rotation: 0, scale_x: 1, scale_y: 1 };
+          
+          const nx = s?.x ?? t.x ?? 0;
+          const ny = s?.y ?? t.y ?? 0;
+          const nr = (s?.rotation ?? t.rotation ?? 0) * Math.PI / 180;
+          const nsX = s?.scale_x ?? t.scale_x ?? 1;
+          const nsY = s?.scale_y ?? t.scale_y ?? 1;
+
+          // Inverse Translate
+          const dx = lx - nx;
+          const dy = ly - ny;
+
+          // Inverse Rotate
+          const cos = Math.cos(-nr);
+          const sin = Math.sin(-nr);
+          const rx = dx * cos - dy * sin;
+          const ry = dx * sin + dy * cos;
+          
+          // Inverse Scale
+          lx = rx / (nsX || 1);
+          ly = ry / (nsY || 1);
+      }
+      return { x: lx, y: ly };
   }
 
-  private getWorldTransform(objId: string): { x: number, y: number, scaleX: number, scaleY: number, rotation: number } {
+  private getWorldMatrix(objId: string): any {
       const state = this.objectStates.get(objId);
       const obj = this.artboard?.objects.find(o => o.id === objId);
-      if (!obj) return { x: 0, y: 0, scaleX: 1, scaleY: 1, rotation: 0 };
+      if (!obj) return Skia.Matrix();
       
       const transform = obj.transform || { x: 0, y: 0, rotation: 0, scale_x: 1, scale_y: 1 };
-      const lx = state?.x !== undefined ? state.x : transform.x;
-      const ly = state?.y !== undefined ? state.y : transform.y;
-      const lsX = state?.scale_x !== undefined ? state.scale_x : (transform.scale_x ?? 1);
-      const lsY = state?.scale_y !== undefined ? state.scale_y : (transform.scale_y ?? 1);
-      const lRot = state?.rotation !== undefined ? state.rotation : transform.rotation;
+      const lx = state?.x ?? transform.x ?? 0;
+      const ly = state?.y ?? transform.y ?? 0;
+      const lsX = state?.scale_x ?? transform.scale_x ?? 1;
+      const lsY = state?.scale_y ?? transform.scale_y ?? 1;
+      const lRot = state?.rotation ?? transform.rotation ?? 0;
+
+      const matrix = Skia.Matrix();
+      matrix.translate(lx, ly);
+      matrix.rotate(lRot * Math.PI / 180);
+      matrix.scale(lsX, lsY);
 
       if (!obj.parentId || obj.parentId === 'root') {
-          return { x: lx, y: ly, scaleX: lsX, scaleY: lsY, rotation: lRot };
+          return matrix;
       }
 
-      const parentWorld = this.getWorldTransform(obj.parentId);
-      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 parentMatrix = this.getWorldMatrix(obj.parentId);
+      parentMatrix.concat(matrix);
+      return parentMatrix;
+  }
 
-      const worldX = parentWorld.x + (sx * cos - sy * sin);
-      const worldY = parentWorld.y + (sx * sin + sy * cos);
+  private mapPoint(matrix: any, x: number, y: number) {
+      // Handle different Skia versions
+      if (matrix.mapXY) {
+          const p = matrix.mapXY(x, y);
+          return { x: p.x, y: p.y };
+      }
+      // Manual fallback for SkMatrix arrays [m0, m1, m2, m3, m4, m5, m6, m7, m8]
+      const m = matrix as any;
+      const px = (m[0] ?? 1) * x + (m[1] ?? 0) * y + (m[2] ?? 0);
+      const py = (m[3] ?? 0) * x + (m[4] ?? 1) * y + (m[5] ?? 0);
+      const pw = (m[6] ?? 0) * x + (m[7] ?? 0) * y + (m[8] ?? 1) || 1;
+      return { x: px / pw, y: py / pw };
+  }
 
-      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 getWorldPos(objId: string) {
+      const matrix = this.getWorldMatrix(objId);
+      const center = this.mapPoint(matrix, 0, 0);
+      const unit = this.mapPoint(matrix, 1, 0);
+      
+      const dx = unit.x - center.x;
+      const dy = unit.y - center.y;
+      const rotation = Math.atan2(dy, dx) * 180 / Math.PI;
+      const scaleX = Math.sqrt(dx*dx + dy*dy);
+      
+      return { x: center.x, y: center.y, rotation, scaleX };
   }
 
   private applyAnimation(anim: SDKAnimation, time: number) {
@@ -1423,10 +1510,36 @@ export class ExodeUIEngine {
     // Center the Artboard Origin
     canvas.translate(abWidth / 2, abHeight / 2);
     
-    // Clip to artboard bounds
+    // Clip to artboard bounds (honoring corner radius)
+    const abState = this.artboard.objects.find(o => o.id === this.artboard?.objects[0]?.id && o.type === 'Frame')
+        ? this.objectStates.get(this.artboard.objects.find(o => o.type === 'Frame')?.id || '')
+        : null;
+    let abCornerR = 0;
+    let abRRect: any = null;
+    const rawAbCr = abState?.cornerRadius;
+    if (rawAbCr) {
+        if (Array.isArray(rawAbCr) && rawAbCr.length >= 4) {
+            abRRect = {
+                rect: { x: -abWidth / 2, y: -abHeight / 2, width: abWidth, height: abHeight },
+                topLeft: Skia.Point(rawAbCr[0], rawAbCr[0]),
+                topRight: Skia.Point(rawAbCr[1], rawAbCr[1]),
+                bottomRight: Skia.Point(rawAbCr[2], rawAbCr[2]),
+                bottomLeft: Skia.Point(rawAbCr[3], rawAbCr[3]),
+            };
+        } else {
+            abCornerR = Array.isArray(rawAbCr) ? (rawAbCr[0] || 0) : Number(rawAbCr);
+        }
+    }
+
     const clipPath = Skia.Path.Make();
-    clipPath.addRect({ x: -abWidth / 2, y: -abHeight / 2, width: abWidth, height: abHeight });
-    canvas.clipPath(clipPath, 1, true); // 1 = Intersect
+    if (abRRect) {
+        clipPath.addRRect(abRRect);
+    } else if (abCornerR > 0) {
+        clipPath.addRRect(Skia.RRectXY({ x: -abWidth / 2, y: -abHeight / 2, width: abWidth, height: abHeight }, abCornerR, abCornerR));
+    } else {
+        clipPath.addRect({ x: -abWidth / 2, y: -abHeight / 2, width: abWidth, height: abHeight });
+    }
+    canvas.clipPath(clipPath, ClipOp.Intersect, true); 
 
     this.artboard.objects?.forEach((obj: ShapeObject) => {
       if (!obj.parentId) {
@@ -1518,12 +1631,13 @@ export class ExodeUIEngine {
 
   private renderObject(canvas: any, obj: ShapeObject) {
     const state = this.objectStates.get(obj.id);
-    const isVisible = state?.visible !== undefined ? state.visible : obj.isVisible !== false;
+    const isVisible = (state?.visible !== undefined ? state.visible : obj.visible) ?? obj.isVisible ?? true;
     if (!isVisible) return;
 
-    const geometry = state?.geometry || obj.geometry;
-    const w = state?.width || (geometry as any).width || 0;
-    const h = state?.height || (geometry as any).height || 0;
+    const geometry = state?.geometry || obj.geometry || {};
+    // Use ?? so that 0 is a valid value, fall back through multiple sources
+    const w = (state?.width ?? (obj as any).width ?? (geometry as any).width) || 0;
+    const h = (state?.height ?? (obj as any).height ?? (geometry as any).height) || 0;
     
     // Resolve transform: use state if present, otherwise use object defaults
     const transform = obj.transform || { x: 0, y: 0, rotation: 0, scale_x: 1, scale_y: 1 };
@@ -1535,16 +1649,28 @@ export class ExodeUIEngine {
 
     canvas.save();
     canvas.translate(cx, cy);
-    if (rotation !== 0) canvas.rotate(rotation * Math.PI / 180, 0, 0); 
-    if (scaleX !== 1 || scaleY !== 1) canvas.scale(scaleX, scaleY);
+    
+    // Apply Global Opacity
+    const opacity = state?.opacity ?? 1;
+    // Note: SkCanvas doesn't have a direct globalAlpha, we usually apply it to paints.
+    // However, some renderers might benefit from a saveLayer for complex blend modes.
+    
+    if (rotation !== 0) {
+        // React Native Skia rotate expects degrees
+        canvas.rotate(rotation, 0, 0);
+    }
+
+    if (scaleX !== 1 || scaleY !== 1) {
+        canvas.scale(scaleX, scaleY);
+    }
 
     if (this._renderCount % 120 === 1) {
-        console.log(`[ExodeUIEngine]   - Drawing object: ${obj.name || obj.id} (${obj.type}), pos: ${cx.toFixed(1)},${cy.toFixed(1)}`);
+        console.log(`[ExodeUIEngine]   - Drawing object: ${obj.name || obj.id} (${obj.type}), pos: ${cx.toFixed(1)},${cy.toFixed(1)}, opacity: ${opacity.toFixed(2)}`);
     }
 
-    if (geometry.type === 'Text') {
+    if (geometry && geometry.type === 'Text') {
         this.renderText(canvas, obj, w, h);
-    } else if (geometry.type === 'Image') {
+    } else if (geometry && geometry.type === 'Image') {
         this.renderImage(canvas, obj, w, h);
     } else if (obj.type === 'Component' && (obj as any).variant === 'button') {
         this.renderButton(canvas, obj, w, h);
@@ -1638,7 +1764,7 @@ export class ExodeUIEngine {
       const segments = geom.segments || obj.segments || [];
 
       if (enableSegments && segments.length > 0) {
-          let offsetX = -w/2;
+          let offsetX = 0;
           const totalWidth = segments.reduce((acc: number, seg: any) => {
               const font = this.getFont(seg.fontSize || geom.fontSize || 14, seg.fontFamily || geom.fontFamily || 'System');
               return acc + font.getTextWidth(seg.text);
@@ -1646,49 +1772,104 @@ export class ExodeUIEngine {
 
           const align = geom.textAlign || 'left';
           if (align === 'center') offsetX = -totalWidth / 2;
-          else if (align === 'right') offsetX = w/2 - totalWidth;
+          else if (align === 'right') offsetX = w / 2 - totalWidth;
+          else offsetX = -w / 2; // Default left
 
           segments.forEach((seg: any) => {
-              const font = this.getFont(seg.fontSize || geom.fontSize || 14, seg.fontFamily || geom.fontFamily || 'System');
-              const paint = Skia.Paint();
-              const col = seg.fill?.color || geom.fill?.color || '#ffffff';
-              try { paint.setColor(Skia.Color(col.replace(/\s+/g, ''))); } catch { paint.setColor(Skia.Color('#ffffff')); }
-              paint.setAlphaf((state?.opacity ?? 1) * (seg.fill?.opacity ?? 1));
-              
-              canvas.drawText(seg.text, offsetX, 0, paint, font);
-              offsetX += font.getTextWidth(seg.text);
-          });
+                const font = this.getFont(seg.fontSize || geom.fontSize || 14, seg.fontFamily || geom.fontFamily || 'System');
+                const paint = Skia.Paint();
+                const style = state?.style || obj.style || {};
+                const opacity = state?.opacity ?? 1;
+
+                const col = seg.fill?.color || geom.fill?.color || '#ffffff';
+                const colStr = typeof col === 'string' ? col.replace(/\s+/g, '') : '#ffffff';
+                try { paint.setColor(Skia.Color(colStr)); } catch { paint.setColor(Skia.Color('#ffffff')); }
+                
+                // Apply shadow/blur/opacity
+                paint.setAlphaf(opacity * (seg.fill?.opacity ?? geom.fill?.opacity ?? 1));
+                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 fontSize = seg.fontSize || geom.fontSize || 14;
+                const y = fontSize - h / 2; // Basic baseline relative to center
+                canvas.drawText(seg.text, offsetX, y, paint, font);
+
+                // Add stroke support for segments
+                if (style.stroke && style.stroke.width > 0 && style.stroke.isEnabled !== false && style.stroke.type !== 'None') {
+                    const strokePaint = Skia.Paint();
+                    strokePaint.setStyle(PaintStyle.Stroke);
+                    strokePaint.setStrokeWidth(style.stroke.width);
+                    const sc = style.stroke.color || '#000000';
+                    try { strokePaint.setColor(Skia.Color(sc.replace(/\s+/g, ''))); } catch { strokePaint.setColor(Skia.Color('#000000')); }
+                    strokePaint.setAlphaf(opacity * (style.stroke.opacity ?? 1));
+                    canvas.drawText(seg.text, offsetX, y, strokePaint, font);
+                }
+
+                offsetX += font.getTextWidth(seg.text);
+            });
           return;
       }
 
       const text = obj.text || geom.text || '';
       if (!text) return;
 
+      const fontSize = geom.fontSize || 14;
+      const fontFamily = geom.fontFamily || obj.fontFamily || 'Helvetica Neue';
       const paint = Skia.Paint();
-      const colorValue = obj.style?.fill?.color || '#ffffff';
-      try {
-          const skColor = Skia.Color(colorValue.replace(/\s+/g, ''));
-          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)));
+      const style = state?.style || obj.style || {};
+      const opacity = state?.opacity ?? 1;
 
-      const fontSize = geom.fontSize || 14;
-      const font = this.getFont(fontSize, geom.fontFamily || obj.fontFamily || 'Helvetica Neue');
+      const fillCol = style.fill?.color || geom.fill?.color || obj.color || geom.color || '#000000';
+      const fillColStr = typeof fillCol === 'string' ? fillCol.replace(/\s+/g, '') : '#000000';
+      try { paint.setColor(Skia.Color(fillColStr)); } catch { paint.setColor(Skia.Color('#000000')); }
       
+      // Apply shadow/blur/opacity
+      paint.setAlphaf(opacity * (style.fill?.opacity ?? 1));
+      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 font = this.getFont(fontSize, fontFamily);
       const align = geom.textAlign || obj.textAlign || 'center';
       const textWidth = font.getTextWidth(text);
-      let x = -w/2;
+      let x = 0;
       if (align === 'center') x = -textWidth / 2;
-      else if (align === 'right') x = w/2 - textWidth;
+      else if (align === 'right') x = w / 2 - textWidth;
+      else x = -w / 2; // Default left
 
       // Check baseline 
-      const y = geom.verticalAlign === 'center' || !geom.verticalAlign ? fontSize / 3 : fontSize / 2;
+      const y = geom.verticalAlign === 'center' || !geom.verticalAlign ? fontSize / 2 : fontSize - h / 2;
       canvas.drawText(text, x, y, paint, font);
+
+      // Add stroke support for regular text
+      if (style.stroke && style.stroke.width > 0 && style.stroke.isEnabled !== false && style.stroke.type !== 'None') {
+          const strokePaint = Skia.Paint();
+          strokePaint.setStyle(PaintStyle.Stroke);
+          strokePaint.setStrokeWidth(style.stroke.width);
+          const sc = style.stroke.color || '#000000';
+          try { strokePaint.setColor(Skia.Color(sc.replace(/\s+/g, ''))); } catch { strokePaint.setColor(Skia.Color('#000000')); }
+          strokePaint.setAlphaf(opacity * (style.stroke.opacity ?? 1));
+          canvas.drawText(text, x, y, strokePaint, font);
+      }
   }
 
   private getOrDecodeImage(src: string): any {
@@ -1716,21 +1897,74 @@ export class ExodeUIEngine {
       const geom = state?.geometry || obj.geometry;
       const src = obj.src || geom.src || '';
 
+      // Resolve corner radius:
+      const rawCrGeo = geom?.corner_radius ?? geom?.cornerRadius;
+      const rawCrState = state?.cornerRadius;
+      const rawCr = (rawCrState !== undefined && rawCrState !== null) ? rawCrState : rawCrGeo;
+      
+      let rRect: any = null;
+      if (rawCr !== undefined && rawCr !== null) {
+          if (Array.isArray(rawCr) && rawCr.length >= 4) {
+              rRect = {
+                rect: Skia.XYWHRect(-w / 2, -h / 2, w, h),
+                topLeft: Skia.Point(rawCr[0], rawCr[0]),
+                topRight: Skia.Point(rawCr[1], rawCr[1]),
+                bottomRight: Skia.Point(rawCr[2], rawCr[2]),
+                bottomLeft: Skia.Point(rawCr[3], rawCr[3]),
+              };
+          } else {
+              const r = Array.isArray(rawCr) ? (rawCr[0] || 0) : Number(rawCr);
+              if (r > 0) rRect = Skia.RRectXY({ x: -w/2, y: -h/2, width: w, height: h }, r, r);
+          }
+      }
+
       const img = this.getOrDecodeImage(src);
       if (img) {
           const paint = Skia.Paint();
-          paint.setAlphaf(state?.opacity ?? 1);
-          canvas.drawImageRect(
-              img,
-              { x: 0, y: 0, width: img.width(), height: img.height() },
-              { x: -w/2, y: -h/2, width: w, height: h },
-              paint
-          );
+          const opacity = state?.opacity ?? 1;
+          paint.setAlphaf(opacity);
+          
+          const style = state?.style || obj.style || {};
+          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));
+          }
+
+          if (rRect) {
+              canvas.save();
+              canvas.clipRRect(rRect, ClipOp.Intersect, true);
+              canvas.drawImageRect(
+                  img,
+                  Skia.XYWHRect(0, 0, img.width(), img.height()),
+                  Skia.XYWHRect(-w / 2, -h / 2, w, h),
+                  paint
+              );
+              canvas.restore();
+          } else {
+              canvas.drawImageRect(
+                  img,
+                  Skia.XYWHRect(0, 0, img.width(), img.height()),
+                  Skia.XYWHRect(-w / 2, -h / 2, w, h),
+                  paint
+              );
+          }
       } else {
           // Fallback placeholder
           const paint = Skia.Paint();
           paint.setColor(Skia.Color('#374151'));
-          canvas.drawRect({ x: -w/2, y: -h/2, width: w, height: h }, paint);
+          if (rRect) {
+              canvas.drawRRect(rRect, paint);
+          } else {
+              canvas.drawRect({ x: -w/2, y: -h/2, width: w, height: h }, paint);
+          }
       }
   }
 
@@ -2106,48 +2340,84 @@ export class ExodeUIEngine {
       if (!svgContent) return;
 
       // Extract path data from potentially multiple <path d="..."> or d='...' tags
-      const pathMatches = svgContent.matchAll(/d=["']([^"']+)["']/g);
+      // Use [\s\S] to match across newlines
+      const pathMatches = svgContent.matchAll(/d=["']([\s\S]+?)["']/g);
       const paths: string[] = [];
       for (const match of pathMatches) {
-          if (match[1]) paths.push(match[1]);
+          if (match[1]) paths.push(match[1].trim());
       }
       
       if (paths.length === 0) return;
 
       const state = this.objectStates.get(obj.id);
       const style = state?.style || obj.style || {};
+      const opacity = state?.opacity ?? 1;
+      
+      canvas.save();
+      canvas.translate(-w / 2, -h / 2);
       
       paths.forEach(d => {
           try {
               const path = Skia.Path.MakeFromSVGString(d);
               if (!path) return;
               
+              const applyStyles = (paint: SkPaint) => {
+                  paint.setAlphaf(opacity * (style.fill?.opacity ?? style.stroke?.opacity ?? 1));
+                  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));
+                  }
+              };
+
               // Draw fill
               if (style.fill && style.fill.type !== 'None') {
                   const paint = Skia.Paint();
                   const fillCol = style.fill.color || '#ffffff';
                   const fillColStr = typeof fillCol === 'string' ? fillCol.replace(/\s+/g, '') : '#ffffff';
                   try { paint.setColor(Skia.Color(fillColStr)); } catch { paint.setColor(Skia.Color('#ffffff')); }
-                  paint.setAlphaf((state?.opacity ?? 1) * (style.fill.opacity ?? 1));
+                  applyStyles(paint);
                   paint.setStyle(PaintStyle.Fill);
                   canvas.drawPath(path, paint);
               }
               
               // Draw stroke if enabled
-              if (style.stroke && style.stroke.width > 0 && style.stroke.isEnabled !== false) {
+              if (style.stroke && style.stroke.width > 0 && style.stroke.isEnabled !== false && style.stroke.type !== 'None') {
                   const paint = Skia.Paint();
                   const strokeCol = style.stroke.color || '#000000';
                   const strokeColStr = typeof strokeCol === 'string' ? strokeCol.replace(/\s+/g, '') : '#000000';
                   try { paint.setColor(Skia.Color(strokeColStr)); } catch { paint.setColor(Skia.Color('#000000')); }
                   paint.setStrokeWidth(style.stroke.width);
-                  paint.setAlphaf((state?.opacity ?? 1) * (style.stroke.opacity ?? 1));
+                  applyStyles(paint);
                   paint.setStyle(PaintStyle.Stroke);
-                  canvas.drawPath(path, paint);
+                  
+                  const align = style.stroke.strokeAlign || 'center';
+                  if (align === 'inside') {
+                       canvas.save();
+                       canvas.clipPath(path, ClipOp.Intersect, true);
+                       paint.setStrokeWidth(style.stroke.width * 2);
+                       canvas.drawPath(path, paint);
+                       canvas.restore();
+                  } else {
+                       canvas.drawPath(path, paint);
+                  }
               }
           } catch (e) {
-              console.warn(`[ExodeUIEngine] Failed to parse SVG path for ${obj.id}:`, e);
+              if (!this._reportedErrors.has(obj.id)) {
+                  console.warn(`[ExodeUIEngine] Failed to parse SVG path for ${obj.id}:`, e);
+                  this._reportedErrors.add(obj.id);
+              }
           }
       });
+      
+      canvas.restore();
   }
 
   private renderLineGraph(canvas: any, geom: any, w: number, h: number) {
@@ -2304,27 +2574,53 @@ export class ExodeUIEngine {
   }
   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 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 !== undefined || geometry.corner_radius !== undefined) {
-            const rawCr = state.cornerRadius ?? geometry.corner_radius;
-            const cr = Array.isArray(rawCr) ? rawCr[0] : Number(rawCr);
-            path.addRRect(Skia.RRectXY(rect, cr, cr));
+    const rect = Skia.XYWHRect(-w / 2, -h / 2, w, h);
+
+    // Resolve corner radius from all possible sources:
+    const rawCrState = state?.cornerRadius;
+    const rawCrGeo = geometry?.corner_radius ?? geometry?.cornerRadius;
+    const rawCr = (rawCrState !== undefined && rawCrState !== null) ? rawCrState : rawCrGeo;
+    
+    let rRect: any = null;
+    if (rawCr !== undefined && rawCr !== null) {
+        if (Array.isArray(rawCr) && rawCr.length >= 4) {
+            // Support non-uniform corner radii [tl, tr, br, bl]
+            rRect = {
+              rect,
+              topLeft: Skia.Point(rawCr[0], rawCr[0]),
+              topRight: Skia.Point(rawCr[1], rawCr[1]),
+              bottomRight: Skia.Point(rawCr[2], rawCr[2]),
+              bottomLeft: Skia.Point(rawCr[3], rawCr[3]),
+            };
+        } else {
+            const r = Array.isArray(rawCr) ? (rawCr[0] || 0) : Number(rawCr);
+            if (r > 0) rRect = Skia.RRectXY(rect, r, r);
+        }
+    }
+    
+    const geoOrObjType = (geometry && geometry.type) || 'Unknown';
+    if (this._renderCount % 120 === 1 && !geometry) {
+        // console.log(`[ExodeUIEngine] Drawing Object without geometry: ${obj.name || obj.id}`);
+    }
+    
+    if (geoOrObjType === 'Rectangle') {
+        if (rRect) {
+            path.addRRect(rRect);
         } 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);
+    } else if (geometry && geometry.type === 'Ellipse') {
+        path.addOval(rect);
+    } else if (geometry && 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') {
+    } else if (geometry && geometry.type === 'Star') {
          const ir = geometry.inner_radius || 20; 
          const or = geometry.outer_radius || 50; 
          const sp = geometry.points || 5;
@@ -2337,6 +2633,18 @@ export class ExodeUIEngine {
              else path.lineTo(px, py);
          }
          path.close();
+    } else if (geometry.type === 'Polygon' && geometry.points) {
+         geometry.points.forEach((p: any, i: number) => {
+             if (i === 0) path.moveTo(p.x - w/2, p.y - h/2);
+             else path.lineTo(p.x - w/2, p.y - h/2);
+         });
+         if (geometry.isClosed !== false) path.close();
+    } else if (geometry.type === 'Line') {
+         const len = geometry.length || 0;
+         path.moveTo(-len / 2, 0);
+         path.lineTo(len / 2, 0);
+    } else {
+        // No default geometry added to path for unknown types
     }
 
     if (style.fill) {
@@ -2346,14 +2654,14 @@ export class ExodeUIEngine {
       if (style.fill.type === 'LinearGradient' && style.fill.stops && style.fill.stops.length >= 2) {
           const colors = style.fill.stops.map((s: any) => Skia.Color(s.color.replace(/\s+/g, '')));
           const offsets = style.fill.stops.map((s: any) => s.offset);
-          const start = style.fill.start ? { x: -w/2 + style.fill.start[0] * w, y: -h/2 + style.fill.start[1] * h } : { x: -w/2, y: 0 };
-          const end = style.fill.end ? { x: -w/2 + style.fill.end[0] * w, y: -h/2 + style.fill.end[1] * h } : { x: w/2, y: 0 };
+          const start = style.fill.start ? { x: (style.fill.start[0] - 0.5) * w, y: (style.fill.start[1] - 0.5) * h } : { x: -w/2, y: -h/2 };
+          const end = style.fill.end ? { x: (style.fill.end[0] - 0.5) * w, y: (style.fill.end[1] - 0.5) * h } : { x: w/2, y: -h/2 };
           paint.setShader(Skia.Shader.MakeLinearGradient(Skia.Point(start.x, start.y), Skia.Point(end.x, end.y), colors, offsets, TileMode.Clamp));
           hasShader = true;
       } else if (style.fill.type === 'RadialGradient' && style.fill.stops && style.fill.stops.length >= 2) {
           const colors = style.fill.stops.map((s: any) => Skia.Color(s.color.replace(/\s+/g, '')));
           const offsets = style.fill.stops.map((s: any) => s.offset);
-          const center = style.fill.center ? { x: -w/2 + style.fill.center[0] * w, y: -h/2 + style.fill.center[1] * h } : { x: 0, y: 0 };
+          const center = style.fill.center ? { x: (style.fill.center[0] - 0.5) * w, y: (style.fill.center[1] - 0.5) * h } : { x: 0, y: 0 };
           const radius = (style.fill.radius || 0.5) * Math.max(w, h);
           paint.setShader(Skia.Shader.MakeRadialGradient(Skia.Point(center.x, center.y), radius, colors, offsets, TileMode.Clamp));
           hasShader = true;
@@ -2361,7 +2669,7 @@ export class ExodeUIEngine {
           const img = this.getOrDecodeImage(style.fill.url);
           if (img) {
               const matrix = Skia.Matrix();
-              matrix.translate(-w/2, -h/2);
+              matrix.translate(-w / 2, -h / 2);
               matrix.scale(w / img.width(), h / img.height());
               paint.setShader(img.makeShaderOptions(0, 0, 0, 0, matrix));
               hasShader = true;
@@ -2379,7 +2687,7 @@ export class ExodeUIEngine {
 
       // Apply clipping for Frame types before drawing
       if (obj.type === 'Frame' || (obj as any).clipContent) {
-          canvas.clipRect({ x: -w/2, y: -h/2, width: w, height: h }, ClipOp.Intersect, true);
+          canvas.clipRect(rect, ClipOp.Intersect, true);
       }
 
       if (style.shadow && style.shadow.opacity > 0) {
@@ -2394,17 +2702,37 @@ export class ExodeUIEngine {
       if (style.blur && style.blur.amount > 0) {
           paint.setMaskFilter(Skia.MaskFilter.MakeBlur(BlurStyle.Normal, style.blur.amount, true));
       }
-      canvas.drawPath(path, paint);
+      if (!path.isEmpty()) {
+          canvas.drawPath(path, paint);
+      }
     }
-    if (style.stroke) {
+    // Draw Stroke
+    if (style.stroke && style.stroke.width > 0 && style.stroke.isEnabled !== false && style.stroke.type !== 'None') {
       const paint = Skia.Paint();
-      const strokeCol = style.stroke.color;
-      const strokeColStr = typeof strokeCol === 'string' ? strokeCol.replace(/\s+/g, '') : '#000000';
-      try { paint.setColor(Skia.Color(strokeColStr)); } catch { paint.setColor(Skia.Color('#000000')); }
-      paint.setStrokeWidth(style.stroke.width ?? 1);
-      paint.setAlphaf(Math.max(0, Math.min(1, (state.opacity ?? 1) * (style.stroke.opacity ?? 1))));
       paint.setStyle(PaintStyle.Stroke);
-      canvas.drawPath(path, paint);
+      paint.setStrokeWidth(style.stroke.width);
+      
+      const col = style.stroke.color || '#000000';
+      const colStr = typeof col === 'string' ? col.replace(/\s+/g, '') : '#000000';
+      try { paint.setColor(Skia.Color(colStr)); } catch { paint.setColor(Skia.Color('#000000')); }
+      
+      const opacity = state?.opacity ?? 1;
+      paint.setAlphaf(opacity * (style.stroke.opacity ?? 1));
+      
+      const align = style.stroke.strokeAlign || 'center';
+      if (align === 'inside') {
+          canvas.save();
+          canvas.clipPath(path, ClipOp.Intersect, true);
+          paint.setStrokeWidth(style.stroke.width * 2);
+          if (!path.isEmpty()) {
+              canvas.drawPath(path, paint);
+          }
+          canvas.restore();
+      } else {
+          if (!path.isEmpty()) {
+              canvas.drawPath(path, paint);
+          }
+      }
     }
   }
 }