exodeui-react-native 1.0.0 → 1.0.1

package/src/physics/MatterPhysics.ts

@@ -0,0 +1,66 @@
+import { PhysicsEngine, BodyOptions } from './PhysicsEngine';
+
+/**
+ * Stub implementation of MatterPhysics to isolate white screen issues.
+ * Original matter-js dependency removed as requested.
+ */
+export class MatterPhysics implements PhysicsEngine {
+  private initialized: boolean = false;
+  
+  async init(gravity: { x: number; y: number }): Promise<void> {
+    console.log('[MatterPhysics] Stub initialized');
+    this.initialized = true;
+  }
+  
+  destroy(): void {
+    this.initialized = false;
+  }
+  
+  createBody(options: BodyOptions): void {
+    // No-op
+  }
+  
+  removeBody(id: string): void {
+    // No-op
+  }
+  
+  step(dt: number): void {
+    // No-op
+  }
+  
+  getPosition(id: string): { x: number; y: number } | null {
+    return null;
+  }
+  
+  getRotation(id: string): number | null {
+    return null;
+  }
+  
+  getVelocity(id: string): { x: number; y: number } | null {
+    return null;
+  }
+
+  isDynamic(id: string): boolean {
+    return false;
+  }
+  
+  setPosition(id: string, x: number, y: number): void {
+    // No-op
+  }
+  
+  setRotation(id: string, angle: number): void {
+    // No-op
+  }
+  
+  setVelocity(id: string, vx: number, vy: number): void {
+    // No-op
+  }
+  
+  applyForce(id: string, fx: number, fy: number): void {
+    // No-op
+  }
+  
+  applyImpulse(id: string, ix: number, iy: number): void {
+    // No-op
+  }
+}

package/src/physics/PhysicsEngine.ts

@@ -0,0 +1,42 @@
+export interface BodyOptions {
+  id: string;
+  type: 'Rectangle' | 'Ellipse' | 'Triangle' | 'Star' | 'Polygon' | 'Image';
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  rotation?: number;
+  isStatic: boolean;
+  mass?: number;
+  friction?: number;
+  restitution?: number;
+  frictionAir?: number;
+  density?: number;
+  isSensor?: boolean;
+}
+
+export interface PhysicsEngine {
+  // Lifecycle
+  init(gravity: { x: number; y: number }): Promise<void>;
+  destroy(): void;
+  
+  // Bodies
+  createBody(options: BodyOptions): void;
+  removeBody(id: string): void;
+  
+  // Simulation
+  step(dt: number): void;
+  
+  // Queries
+  getPosition(id: string): { x: number; y: number } | null;
+  getRotation(id: string): number | null;
+  getVelocity(id: string): { x: number; y: number } | null;
+  isDynamic(id: string): boolean;
+  
+  // Updates
+  setPosition(id: string, x: number, y: number): void;
+  setRotation(id: string, angle: number): void;
+  setVelocity(id: string, vx: number, vy: number): void;
+  applyForce(id: string, fx: number, fy: number): void;
+  applyImpulse(id: string, ix: number, iy: number): void;
+}

package/src/physics/index.ts

@@ -0,0 +1,2 @@
+export * from './PhysicsEngine';
+export * from './MatterPhysics';

package/src/types.ts

@@ -18,12 +18,43 @@ export interface Blur {
   amount: number;
 }
 
+export interface LineDataset {
+  id: string;
+  label: string;
+  data: number[];
+  lineColor: string;
+  lineWidth: number;
+  showArea: boolean;
+  areaColor: string;
+  smoothing: boolean;
+  showPoints: boolean;
+  pointSize: number;
+  pointFill: string;
+  pointStrokeColor: string;
+  pointStrokeWidth: number;
+  inputId?: string;
+  isVarEnabled?: boolean;
+}
+
+export interface Fill {
+  type: 'Solid' | 'LinearGradient' | 'RadialGradient' | 'AngularGradient' | 'DiamondGradient' | 'Pattern' | 'None';
+  color?: string;
+  opacity: number;
+  stops?: { offset: number; color: string }[];
+  start?: [number, number];
+  end?: [number, number];
+  center?: [number, number];
+  radius?: number;
+  url?: string;
+  scaleX?: number;
+  scaleY?: number;
+  offsetX?: number;
+  offsetY?: number;
+  rotation?: number;
+}
+
 export interface Style {
-  fill?: {
-    type: 'Solid' | 'LinearGradient' | 'RadialGradient' | 'None';
-    color: string;
-    opacity: number;
-  };
+  fill?: Fill;
   stroke?: {
     color: string;
     width: number;
@@ -35,16 +66,64 @@ export interface Style {
 }
 
 export type Geometry = 
-  | { type: 'Rectangle'; width: number; height: number; corner_radius?: number }
-  | { type: 'Ellipse'; width: number; height: number }
-  | { type: 'Text'; text: string; fontSize: number; fontFamily: string; textInputId?: string }
+  | { type: 'Rectangle'; width: number; height: number; corner_radius?: number | [number, number, number, number]; cornerRadius?: number | [number, number, number, number]; isMask?: boolean }
+  | { type: 'Ellipse'; width: number; height: number; isMask?: boolean }
+  | { 
+      type: 'Text'; 
+      text: string; 
+      fontSize: number; 
+      fontFamily: string; 
+      fontWeight?: string | number;
+      textAlign?: 'left' | 'center' | 'right' | 'justify';
+      textVerticalAlign?: 'top' | 'middle' | 'center' | 'bottom';
+      width?: number;
+      height?: number;
+      lineHeight?: number;
+      letterSpacing?: number;
+      textCase?: 'none' | 'uppercase' | 'lowercase' | 'capitalize';
+      paragraphSpacing?: number;
+      textInputId?: string;
+      segments?: { text: string; fill: Fill; fontSize?: number; fontFamily?: string; fontWeight?: string | number }[];
+      enableSegments?: boolean;
+      isMask?: boolean;
+    }
+  | { type: 'Triangle'; width: number; height: number, isMask?: boolean }
+  | { type: 'Polygon'; radius: number; sides: number, isMask?: boolean }
+  | { type: 'Star'; inner_radius: number; outer_radius: number; points: number, isMask?: boolean }
+  | { type: 'Line'; length: number, isMask?: boolean }
   | { type: 'SVG'; svgContent: string; width: number; height: number; preserveAspectRatio: boolean; colors: string[] }
-  | { type: 'Triangle'; width: number; height: number }
-  | { type: 'Polygon'; radius: number; sides: number }
-  | { type: 'Star'; inner_radius: number; outer_radius: number; points: number }
-  | { type: 'Line'; length: number }
-  | { type: 'SVG'; svgContent: string; width: number; height: number; preserveAspectRatio: boolean; colors: string[] }
-  | { type: 'Image'; src: string; width: number; height: number };
+  | { type: 'Image'; src: string; width: number; height: number }
+  | {
+      type: "LineGraph",
+      datasets?: LineDataset[],
+      data?: number[],
+      width: number,
+      height: number,
+      lineColor?: string,
+      lineWidth?: number,
+      showArea?: boolean,
+      areaColor?: string,
+      smoothing?: boolean,
+      showPoints?: boolean,
+      pointSize?: number,
+      pointFill?: string,
+      pointStrokeColor?: string,
+      pointStrokeWidth?: number,
+      showXAxis?: boolean,
+      showYAxis?: boolean,
+      xAxisColor?: string,
+      yAxisColor?: string,
+      showXLabels?: boolean,
+      showYLabels?: boolean,
+      axisLabelColor?: string,
+      axisLabelFontSize?: number,
+      showLegend?: boolean,
+      legendColor?: string,
+      legendFontSize?: number,
+      areaOpacity?: number
+    }
+  | { type: 'Component'; variant: string; width: number; height: number }
+  | { type: 'Frame'; width: number; height: number };
 
 export interface Trigger {
   id: string;
@@ -76,16 +155,46 @@ export interface Physics {
 }
 
 
+export interface Constraint {
+  id?: string;
+  type: 'Translation' | 'Rotation' | 'Scale' | 'Transform' | 'Distance' | 'IK' | 'FollowPath' | 'FollowPointer';
+  targetId: string;
+  strength: number;
+  copyX?: boolean;
+  copyY?: boolean;
+  limitX?: { enabled: boolean; min: number; max: number };
+  limitY?: { enabled: boolean; min: number; max: number };
+  distance?: number;
+  mode?: 'clamped' | 'exact' | 'minimum' | 'maximum';
+  
+  // Spring Properties
+  useSpring?: boolean;
+  stiffness?: number; // Hooke's Law: F = -k * x
+  damping?: number;   // Damping: F = -c * v
+  mass?: number;      // F = m * a
+}
+
 export interface ShapeObject {
-  type: 'Shape';
+  type: 'Shape' | 'Group' | 'Component' | 'Frame' | 'Button' | 'Bone' | 'Toggle' | 'Slider' | 'Dropdown' | 'ListView';
   id: string;
   name: string;
   transform: Transform;
   geometry: Geometry;
   style: Style;
+  parentId?: string;
+  children?: string[];
   triggers?: Trigger[];
   interactions?: Interaction[];
+  constraints?: Constraint[];
   physics?: Physics;
+  renderAsGroup?: boolean;
+  opacity?: number;
+  visible?: boolean;
+  isVisible?: boolean;
+  blendMode?: string;
+  compositeOperation?: string;
+  options?: any;
+  inputId?: string;
 }
 
 export interface Keyframe {
@@ -160,7 +269,9 @@ export type InputValue =
     | { type: 'Boolean', value: boolean }
     | { type: 'Number', value: number }
     | { type: 'Trigger', value: boolean }
-    | { type: 'Text', value: string };
+    | { type: 'Text', value: string }
+    | { type: 'StringArray', value: string[] }
+    | { type: 'NumberArray', value: number[] };
 
 export interface InputNodePosition {
     id: string;
@@ -184,9 +295,31 @@ export interface Layer {
   states: State[];
 }
 
+export enum LogicOp {
+    AND = 'AND',
+    OR = 'OR',
+    NOT = 'NOT',
+    XOR = 'XOR'
+}
+
+export interface LogicNode {
+    id: string;
+    name: string;
+    op: LogicOp;
+    x: number;
+    y: number;
+    inputs: {
+        id: string;
+        sourceId?: string;
+        sourceHandleId?: string;
+        value?: number | boolean;
+    }[];
+}
+
 export interface StateMachine {
   inputs: Input[];
   layers: Layer[];
+  logicNodes?: LogicNode[];
 }
 
 export interface Artboard {
@@ -194,6 +327,8 @@ export interface Artboard {
   width: number;
   height: number;
   backgroundColor: string;
+  backgroundImage?: string;
+  backgroundOpacity?: number;
   objects: ShapeObject[];
   animations: Animation[];
   stateMachine?: StateMachine;
@@ -211,3 +346,11 @@ export interface Layout {
   fit: Fit;
   alignment: Alignment;
 }
+
+export interface ComponentEvent {
+  objectId: string;
+  componentName: string;
+  variant: string;
+  property: string;
+  value: any;
+}

package/src/useExodeUI.ts

@@ -12,15 +12,45 @@ export function useExodeUI() {
       engine?.setInputNumber(name, value);
   }, [engine]);
 
+  const setInputText = useCallback((name: string, value: string) => {
+      engine?.setInputText(name, value);
+  }, [engine]);
+
+  const setInputNumberArray = useCallback((name: string, value: number[]) => {
+      engine?.setInputNumberArray(name, value);
+  }, [engine]);
+
+  const setInputStringArray = useCallback((name: string, value: string[]) => {
+      engine?.setInputStringArray(name, value);
+  }, [engine]);
+
   const fireTrigger = useCallback((name: string) => {
       engine?.fireTrigger(name);
   }, [engine]);
 
+  const updateConstraint = useCallback((objectId: string, index: number, properties: any) => {
+      engine?.updateConstraint(objectId, index, properties);
+  }, [engine]);
+
+  const updateGraphData = useCallback((nameOrId: string, data: number[]) => {
+      engine?.updateGraphData(nameOrId, data);
+  }, [engine]);
+
+  const updateObjectOptions = useCallback((id: string, newOptions: any) => {
+      engine?.updateObjectOptions(id, newOptions);
+  }, [engine]);
+
   return {
       setEngine, 
       engine,
       setInputBool,
       setInputNumber,
-      fireTrigger
+      setInputText,
+      setInputNumberArray,
+      setInputStringArray,
+      fireTrigger,
+      updateConstraint,
+      updateGraphData,
+      updateObjectOptions
   };
 }