exodeui 2.4.0

package/README.md

@@ -0,0 +1,113 @@
+# exodeui
+
+The React Runtime for the ExodeUI Animation Engine. Easily render and interact with ExodeUI animations in your React applications.
+
+## Installation
+
+```bash
+npm install exodeui
+# or
+yarn add exodeui
+```
+
+## Basic Usage
+
+```tsx
+import { ExodeUICanvas } from 'exodeui';
+
+function App() {
+  return (
+    <div style={{ width: 500, height: 500 }}>
+      {/* Option 1: Load from a URL or file path (e.g. in public folder) */}
+      <ExodeUICanvas 
+        src="/my-animation.json"
+        autoPlay={true}
+        fit="Contain"
+        alignment="Center"
+      />
+    </div>
+  );
+}
+```
+
+### Loading via Import
+
+Alternatively, you can import the JSON directly if your bundler supports it:
+
+```tsx
+import { ExodeUICanvas } from 'exodeui';
+import animationData from './my-animation.json';
+
+function App() {
+  return (
+    <ExodeUICanvas artboard={animationData} />
+  )
+}
+```
+
+## API
+
+### `<ExodeUICanvas />`
+
+The main component for rendering ExodeUI animations.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `artboard` | `object` | `undefined` | The JSON animation data object. |
+| `src` | `string` | `undefined` | URL to fetch the animation JSON from. |
+| `autoPlay` | `boolean` | `true` | Whether the animation should start playing automatically. |
+| `fit` | `'Contain' \| 'Cover' \| 'Fill' \| 'FitWidth' \| 'FitHeight' \| 'None' \| 'ScaleDown'` | `'Contain'` | How the artboard fits within the canvas. |
+| `alignment` | `'Center' \| 'TopLeft' \| ...` | `'Center'` | How the content aligns if there is extra space. |
+| `onReady` | `(engine: ExodeUIEngine) => void` | `undefined` | Callback fired when the engine is loaded and ready. |
+| `style` | `CSSProperties` | `{ width: '100%', height: '100%' }` | CSS styles for the canvas element. |
+| `className` | `string` | `undefined` | CSS class name for the canvas element. |
+
+### `useExodeUI` Hook
+
+(Coming Soon)
+
+## State Machine Inputs
+
+You can control the animation state machine using the engine instance provided via `onReady`.
+
+```tsx
+const [engine, setEngine] = useState<ExodeUIEngine | null>(null);
+
+// ...
+
+<ExodeUICanvas 
+  artboard={data} 
+  onReady={(e) => {
+    setEngine(e);
+    
+    // Listen to triggers
+    e.setTriggerCallback((triggerName, animationName) => {
+      console.log(`Trigger "${triggerName}" fired! Playing "${animationName}"`);
+    });
+  }} 
+/>
+
+<button onClick={() => engine?.setInputBool('IsWalking', true)}>
+  Walk
+</button>
+```
+
+## Listening to Triggers
+
+You can listen for interactive triggers (e.g. clicks on shapes) using `setTriggerCallback`:
+
+```tsx
+<ExodeUICanvas 
+  artboard={data}
+  onReady={(engine) => {
+    engine.setTriggerCallback((triggerName, animationName) => {
+       // Handle side effects here (e.g. navigation, sound, analytics)
+       console.log(triggerName, animationName);
+    });
+  }}
+/>
+```
+
+## License
+
+MIT

package/dist/ExodeUICanvas.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { ExodeUIEngine } from './engine';
+import { Artboard, Fit, Alignment } from './types';
+
+export interface ExodeUICanvasProps {
+    artboard?: Artboard;
+    src?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    autoPlay?: boolean;
+    fit?: Fit;
+    alignment?: Alignment;
+    onReady?: (engine: ExodeUIEngine) => void;
+    onTrigger?: (triggerName: string, animationName: string) => void;
+    onInputUpdate?: (nameOrId: string, value: any) => void;
+}
+export declare const ExodeUICanvas: React.ForwardRefExoticComponent<ExodeUICanvasProps & React.RefAttributes<HTMLCanvasElement>>;

package/dist/engine.d.ts

@@ -0,0 +1,42 @@
+import { Artboard, Fit, Alignment } from './types';
+
+export declare class ExodeUIEngine {
+    private artboard;
+    private objectStates;
+    private physicsEngine;
+    private activeStateMachine;
+    private inputs;
+    private inputNameMap;
+    private layerStates;
+    private imageCache;
+    private layout;
+    private onTrigger?;
+    private onInputUpdate?;
+    setTriggerCallback(cb: (triggerName: string, animationName: string) => void): void;
+    setInputUpdateCallback(cb: (nameOrId: string, value: any) => void): void;
+    constructor();
+    private setInternalInput;
+    setLayout(fit: Fit, alignment: Alignment): void;
+    getActiveStateIds(layerName?: string): string[];
+    load(data: Artboard): void;
+    reset(): void;
+    private enterStates;
+    setInputBool(nameOrId: string, value: boolean): void;
+    setInputNumber(nameOrId: string, value: number): void;
+    fireTrigger(nameOrId: string): void;
+    setInputText(nameOrId: string, value: string): void;
+    private updateInput;
+    private evaluateTransitions;
+    private checkConditions;
+    private activeTriggers;
+    advance(dt: number): void;
+    handlePointerInput(type: string, canvasX: number, canvasY: number, canvasWidth: number, canvasHeight: number): void;
+    private handlePointerEvent;
+    private hitTest;
+    private applyAnimation;
+    private interpolate;
+    private interpolateColor;
+    render(ctx: CanvasRenderingContext2D, width: number, height: number): void;
+    private calculateTransform;
+    private renderObject;
+}

package/dist/index.d.ts

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