exodeui-react-native 1.0.1 → 1.0.3

package/package.json

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

package/src/ExodeUIView.tsx

@@ -2,11 +2,7 @@ import React, { useRef, useEffect, useState, forwardRef, useImperativeHandle } f
 import { View, StyleSheet, LayoutChangeEvent, ViewStyle, PanResponder, PanResponderInstance, GestureResponderEvent, Image } from 'react-native';
 import { Canvas, Skia, Picture, SkPicture } from '@shopify/react-native-skia';
 import { ExodeUIEngine } from './engine';
-import { Artboard, Fit, Alignment } from './types';
-
-// Assuming ComponentEvent is defined elsewhere or will be defined.
-// For now, let's define a placeholder if not provided.
-type ComponentEvent = any; 
+import { Artboard, Fit, Alignment, ComponentEvent } from './types';
 
 export interface ExodeUIViewProps {
   artboard?: Artboard;
@@ -33,6 +29,11 @@ export const ExodeUIView = forwardRef<any, ExodeUIViewProps>(
     const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
     const lastTimeRef = useRef<number>(0);
     const rafRef = useRef<number | undefined>(undefined);
+    const dimsRef = useRef(dimensions);
+
+    useEffect(() => {
+        dimsRef.current = dimensions;
+    }, [dimensions]);
 
     useImperativeHandle(ref, () => ({
         getEngine: () => engineRef.current,
@@ -101,9 +102,11 @@ export const ExodeUIView = forwardRef<any, ExodeUIViewProps>(
             }
 
             if (data) {
-                console.log('[ExodeUIView] Loading artboard:', data.name || 'Untitled');
+                console.log('[ExodeUIView] ✅ Successfully loaded artboard:', data.name || 'Untitled', 'Objects:', data.objects?.length);
                 engineRef.current.load(data);
                 if (onReady) onReady(engineRef.current);
+            } else {
+                console.warn('[ExodeUIView] ❌ No artboard data found to load');
             }
         };
 
@@ -153,32 +156,41 @@ export const ExodeUIView = forwardRef<any, ExodeUIViewProps>(
         };
     }, [autoPlay, dimensions]);
 
-    const handleResponderStart = (e: any) => {
-        const { locationX, locationY } = e.nativeEvent;
-        engineRef.current.handlePointerInput('PointerDown', locationX, locationY, dimensions.width, dimensions.height);
-        return true;
-    };
-
-    const handleResponderRelease = (e: any) => {
-        const { locationX, locationY } = e.nativeEvent;
-        engineRef.current.handlePointerInput('click', locationX, locationY, dimensions.width, dimensions.height);
-        engineRef.current.handlePointerInput('PointerUp', locationX, locationY, dimensions.width, dimensions.height);
-    };
-
-    const handleResponderMove = (e: any) => {
-        const { locationX, locationY } = e.nativeEvent;
-        engineRef.current.handlePointerInput('PointerMove', locationX, locationY, dimensions.width, dimensions.height);
-    };
+    const panResponder = useRef(
+        PanResponder.create({
+            onStartShouldSetPanResponder: () => true,
+            onStartShouldSetPanResponderCapture: () => true,
+            onMoveShouldSetPanResponder: () => true,
+            onMoveShouldSetPanResponderCapture: () => true,
+            onPanResponderGrant: (e) => {
+                const { locationX, locationY } = e.nativeEvent;
+                console.log(`[ExodeUIView] PanResponder Grant: ${locationX.toFixed(1)}, ${locationY.toFixed(1)}`);
+                engineRef.current.handlePointerInput('PointerDown', locationX, locationY, dimsRef.current.width, dimsRef.current.height);
+            },
+            onPanResponderMove: (e) => {
+                const { locationX, locationY } = e.nativeEvent;
+                engineRef.current.handlePointerInput('PointerMove', locationX, locationY, dimsRef.current.width, dimsRef.current.height);
+            },
+            onPanResponderRelease: (e) => {
+                const { locationX, locationY } = e.nativeEvent;
+                console.log(`[ExodeUIView] PanResponder Release: ${locationX.toFixed(1)}, ${locationY.toFixed(1)}`);
+                engineRef.current.handlePointerInput('click', locationX, locationY, dimsRef.current.width, dimsRef.current.height);
+                engineRef.current.handlePointerInput('PointerUp', locationX, locationY, dimsRef.current.width, dimsRef.current.height);
+            },
+            onPanResponderTerminate: (e) => {
+                const { locationX, locationY } = e.nativeEvent;
+                engineRef.current.handlePointerInput('PointerUp', locationX, locationY, dimsRef.current.width, dimsRef.current.height);
+            },
+            onShouldBlockNativeResponder: () => true,
+            onPanResponderTerminationRequest: () => false,
+        })
+    ).current;
 
     return (
         <View 
             style={[styles.container, style]} 
             onLayout={onLayout}
-            onStartShouldSetResponder={() => true}
-            onResponderGrant={handleResponderStart}
-            onResponderMove={handleResponderMove}
-            onResponderRelease={handleResponderRelease}
-            onResponderTerminate={handleResponderRelease}
+            {...panResponder.panHandlers}
         >
              <View style={StyleSheet.absoluteFill} pointerEvents="none">
                   <Canvas style={{ flex: 1 }}>

package/src/engine.ts

@@ -1,4 +1,4 @@
-import { SkCanvas, SkImage, SkPaint, PaintStyle, Skia, SkPath, SkColor, BlurStyle, SkImageFilter, SkMaskFilter } from '@shopify/react-native-skia';
+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';
 
@@ -11,6 +11,7 @@ export class ExodeUIEngine {
 
   // 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, {
@@ -21,6 +22,7 @@ export class ExodeUIEngine {
   }> = new Map();
 
   private imageCache = new Map<string, SkImage>();
+  private fonts = new Map<number, SkFont>();
   
   private layout: Layout = { fit: 'Contain', alignment: 'Center' };
   
@@ -36,9 +38,15 @@ export class ExodeUIEngine {
 
   // 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();
@@ -170,6 +178,7 @@ export class ExodeUIEngine {
     this.inputs.clear();
     this.inputNameMap.clear();
     this.layerStates.clear();
+    this.fonts.clear();
     
     if (this.physicsEngine) {
       this.physicsEngine.destroy();
@@ -786,94 +795,429 @@ 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 hitId: string | null = null;
+      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) {
-              hitId = obj.id;
-              
-              // Handle interactions
-              const interactions = (obj as any).interactions || [];
-              const matchingInteraction = interactions.find((int: any) => int.event === type || (int.event === 'onClick' && type === 'click'));
-              
-              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;
 
-              // Handle Component Listeners
-              if (type === 'click' || type === 'PointerDown') {
-                  const state = this.objectStates.get(obj.id);
-                  const options = state?.options || {};
+      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;
+      }
+
+      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 (obj.type === 'Toggle' || (obj as any).variant === 'toggle') {
-                      const newValue = !options.checked;
-                      this.updateObjectOptions(obj.id, { checked: newValue });
-                      if (this.onToggle) this.onToggle(obj.name, newValue);
-                      if (obj.inputId) this.updateInput(obj.inputId, newValue);
-                  } else if ((obj as any).type === 'TextInput' || (obj as any).variant === 'textinput') {
-                      this.focusedId = obj.id;
-                      if (this.onInputFocus) this.onInputFocus(obj.name);
+                  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 (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;
+          }
 
-              // Handle triggers (Animations)
-              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
-                      });
+          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 || {};
                       
-                      if (this.onTrigger) {
-                          this.onTrigger(matchingTrigger.name, anim.name);
+                      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
+                          });
                       }
-                      return;
                   }
               }
-              break; 
           }
       }
+  }
 
-      if (!hitId && (type === 'click' || type === 'PointerDown')) {
-          if (this.focusedId) {
-              const focusedObj = this.artboard.objects.find(o => o.id === this.focusedId);
-              if (focusedObj && this.onInputBlur) this.onInputBlur(focusedObj.name);
-              this.focusedId = null;
+  private 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 || 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 - state.x;
-      const dy = y - state.y;
+      const dx = x - world.x;
+      const dy = y - world.y;
       
-      // Basic AABB check
-      return Math.abs(dx) <= w / 2 && Math.abs(dy) <= h / 2;
+      // 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;
+  }
+
+  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 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);
+      
+      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: SDKAnimation, time: number) {
@@ -986,15 +1330,26 @@ export class ExodeUIEngine {
 
     try {
         const bg = this.artboard.backgroundColor || '#000000';
-        canvas.clear(Skia.Color(bg));
+        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) {
-        console.error('[ExodeUIEngine] Rendering failed (clear):', 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, 
@@ -1007,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);
+      if (!obj.parentId) {
+          this.renderObject(canvas, obj);
+      }
     });
 
     canvas.restore();
@@ -1101,15 +1462,13 @@ 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 || state.visible === false) 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 cx = state.x || 0;
     const cy = state.y || 0;
     const rotation = state.rotation || 0;
@@ -1118,97 +1477,540 @@ export class ExodeUIEngine {
 
     canvas.save();
     canvas.translate(cx, cy);
-    canvas.rotate(rotation, 0, 0); 
+    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') {
-        // Simple text rendering placeholder
+        this.renderText(canvas, obj, w, h);
     } else if (geometry.type === 'Image') {
-         // Image rendering placeholder
+        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 (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();
-        }
+        // 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);
+        });
+    }
 
-        if (style.fill) {
-          const paint = Skia.Paint();
+    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 {
-              paint.setColor(Skia.Color(style.fill.color || '#000000'));
-          } catch (e) {
-              paint.setColor(Skia.Color('#FF00FF')); // Debug pink
+              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);
           }
-          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)
-              ));
+      }
+  }
+
+  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)));
+
+      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)
-              ));
+          const clean = cleanStr.replace(/\s+/g, '');
+          try {
+              return Skia.Color(clean) || Skia.Color(fallback);
+          } catch {
+              return Skia.Color(fallback);
           }
-          if (style.blur && style.blur.amount > 0) {
-              paint.setMaskFilter(Skia.MaskFilter.MakeBlur(BlurStyle.Normal, style.blur.amount, true));
+      };
+
+      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();
   }
 }

package/src/types.ts

@@ -195,6 +195,7 @@ export interface ShapeObject {
   compositeOperation?: string;
   options?: any;
   inputId?: string;
+  text?: string;
 }
 
 export interface Keyframe {