distark-render 1.0.0 → 1.0.2

package/README.md

@@ -51,6 +51,87 @@ await renderer.render(canvas, characterData);
 - ⚡ TypeScript support with full type definitions
 - 🌐 Works in browser and Node.js
 
+## Testing
+
+### Automated Test Suite
+
+Run all automated tests to verify rendering and joint movement:
+
+```bash
+# Run all tests (visual verification + joint movement)
+npm test
+
+# Or run tests individually
+npm run test-visual    # Eyes and mouth rendering
+npm run test-joints    # Joint movement and limb positioning
+```
+
+### Visual Verification Test
+
+Verify that eyes and mouth are rendering correctly using automated color comparison:
+
+```bash
+# Test a specific character file
+npm run test-visual
+node dist/tests/test-visual-verification.js character.json
+```
+
+**What it tests:**
+- ✅ Left eye region has rendered content
+- ✅ Right eye region has rendered content  
+- ✅ Mouth region has rendered content
+
+The test uses pixel sampling and color comparison to verify that character features are actually being rendered to the canvas. It calculates expected regions based on the rig data and checks that those regions contain pixels different from the background color.
+
+### Joint Movement Test
+
+Verify that character joints move correctly and limbs appear in expected screen sectors:
+
+```bash
+# Test joint movements
+npm run test-joints
+node dist/tests/test-joint-movement.js character.json
+```
+
+**What it tests:**
+- ✅ **Arm Raised**: Left arm rotates upward and appears in top/middle-left sector
+- ✅ **Leg Forward**: Right leg moves forward and appears in middle/bottom-right sector  
+- ✅ **Head Rotation**: Head turns and remains in top/middle-center sector
+- ✅ **Multiple Joints**: Arms spread and legs move simultaneously (T-pose)
+
+The test modifies joint rotation values and verifies that limbs render in the expected screen sectors by sampling pixels and checking for content (non-background pixels). This ensures the rendering pipeline correctly applies transformations to the character rig.
+
+### Manual Testing with Command Line
+
+You can also manually test character rigs and save rendered output:
+
+```bash
+# Build the project first
+npm run build
+
+# Run test-skia with default settings (renders tank.json)
+npm run test-skia
+
+# Or run directly with custom parameters:
+node dist/tests/test-skia.js [input.json] [output.png] [width] [height]
+
+# Examples:
+node dist/tests/test-skia.js tank.json output.png 1000 1000
+node dist/tests/test-skia.js character.json render.png 800 600
+```
+
+**Parameters:**
+- `input.json` - Path to your character rig JSON file (default: `assets/tank.json`)
+- `output.png` - Output image filename (default: `output-tank.png`)
+- `width` - Canvas width in pixels (default: `1000`)
+- `height` - Canvas height in pixels (default: `1000`)
+
+The test script will:
+1. Load your character rig JSON
+2. Automatically fetch and cache all images
+3. Render the character to a PNG file
+4. Show pivot points for debugging
+
 ## API
 
 ### ImageLoader
@@ -70,6 +151,4 @@ const renderer = new CharacterRigRenderer(imageLoader?: ImageLoader);
 await renderer.render(canvas, rigData, loadedImages?, cameraOffset?, showPivotPoints?);
 ```
 
-## License
 
-MIT

package/dist/modules/adapters/p5Renderer.d.ts

@@ -0,0 +1,71 @@
+/**
+ * p5.js Renderer - Pre-built adapter for p5.js
+ * Reduces setup from ~80 lines to ~3 lines
+ */
+import { ImageLoader } from '../imageLoad.js';
+import { CharacterRigRenderer } from '../renderRig.js';
+import type { RigData, RenderOptions, RigRenderData } from '../../types.js';
+/**
+ * p5-specific image loader
+ * Extends ImageLoader to use p5.loadImage instead of browser Image API
+ */
+export declare class P5ImageLoader extends ImageLoader {
+    private p5;
+    constructor(p5Instance: any, baseHost?: string);
+    /**
+     * Override to use p5.loadImage
+     * Inherits all caching, URL resolution, and batch loading from base class
+     */
+    loadImage(key: string, imageData: string, onLoad?: (key: string, img: any) => void, onError?: (key: string, error: Event | string) => void): void;
+}
+/**
+ * p5.js Renderer - Complete rendering solution for p5.js
+ *
+ * Usage:
+ *   const renderer = new P5Renderer(p);
+ *   await renderer.loadImages(rigData);
+ *   renderer.render(rigData, { width: 800, height: 800 });
+ *
+ * Advanced Usage (full p5 control):
+ *   const renderData = renderer.compute(rigData, options);
+ *   // Modify renderData.objects as needed
+ *   renderer.renderObjects(renderData.objects);
+ */
+export declare class P5Renderer extends CharacterRigRenderer {
+    private p5;
+    private loadedImages;
+    private isReady;
+    constructor(p5Instance: any, baseHost?: string);
+    /**
+     * Load all images for a character rig
+     * Must be called before renderRig()
+     */
+    loadImages(rigData: RigData): Promise<void>;
+    /**
+     * Compute rig render data (for advanced control)
+     * Returns the computed transforms that you can modify before rendering
+     */
+    compute(rigData: RigData, options?: Partial<RenderOptions>): RigRenderData;
+    /**
+     * Render objects to p5 canvas
+     * Can be used with modified render data for custom effects
+     */
+    renderObjects(objects: any[], showPivots?: boolean, pivotPoints?: any[]): void;
+    /**
+     * Simple one-line render (compute + renderObjects)
+     *
+     * @param rigData - Character rig data
+     * @param options - Render options (width, height, camera offset)
+     * @param showPivots - Whether to show pivot points for debugging
+     */
+    renderRig(rigData: RigData, options?: Partial<RenderOptions>, showPivots?: boolean): void;
+    /**
+     * Check if images are loaded and ready to render
+     */
+    ready(): boolean;
+    /**
+     * Get loaded images (for custom rendering)
+     */
+    getLoadedImages(): Record<string, any>;
+}
+//# sourceMappingURL=p5Renderer.d.ts.map

package/dist/modules/adapters/p5Renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"p5Renderer.d.ts","sourceRoot":"","sources":["../../../modules/adapters/p5Renderer.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE5E;;;GAGG;AACH,qBAAa,aAAc,SAAQ,WAAW;IAC1C,OAAO,CAAC,EAAE,CAAM;gBAEJ,UAAU,EAAE,GAAG,EAAE,QAAQ,CAAC,EAAE,MAAM;IAK9C;;;OAGG;IACH,SAAS,CACL,GAAG,EAAE,MAAM,EACX,SAAS,EAAE,MAAM,EACjB,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,EACxC,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,GAAG,MAAM,KAAK,IAAI,GACvD,IAAI;CA6BV;AAED;;;;;;;;;;;;GAYG;AACH,qBAAa,UAAW,SAAQ,oBAAoB;IAChD,OAAO,CAAC,EAAE,CAAM;IAChB,OAAO,CAAC,YAAY,CAA2B;IAC/C,OAAO,CAAC,OAAO,CAAkB;gBAErB,UAAU,EAAE,GAAG,EAAE,QAAQ,CAAC,EAAE,MAAM;IAM9C;;;OAGG;IACG,UAAU,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC;IAKjD;;;OAGG;IACH,OAAO,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG,aAAa;IAe1E;;;OAGG;IACH,aAAa,CAAC,OAAO,EAAE,GAAG,EAAE,EAAE,UAAU,GAAE,OAAe,EAAE,WAAW,CAAC,EAAE,GAAG,EAAE,GAAG,IAAI;IA6BrF;;;;;;OAMG;IACH,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,EAAE,UAAU,GAAE,OAAe,GAAG,IAAI;IAKhG;;OAEG;IACH,KAAK,IAAI,OAAO;IAIhB;;OAEG;IACH,eAAe,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;CAGzC"}

package/dist/modules/adapters/p5Renderer.js

@@ -0,0 +1,145 @@
+/**
+ * p5.js Renderer - Pre-built adapter for p5.js
+ * Reduces setup from ~80 lines to ~3 lines
+ */
+import { ImageLoader } from '../imageLoad.js';
+import { CharacterRigRenderer } from '../renderRig.js';
+/**
+ * p5-specific image loader
+ * Extends ImageLoader to use p5.loadImage instead of browser Image API
+ */
+export class P5ImageLoader extends ImageLoader {
+    constructor(p5Instance, baseHost) {
+        super(baseHost);
+        this.p5 = p5Instance;
+    }
+    /**
+     * Override to use p5.loadImage
+     * Inherits all caching, URL resolution, and batch loading from base class
+     */
+    loadImage(key, imageData, onLoad, onError) {
+        const imageUrl = this.resolveImageSource(imageData);
+        if (!imageUrl) {
+            console.warn(`Could not resolve image source for ${key}: ${imageData}`);
+            if (onError)
+                onError(key, 'Invalid image source');
+            return;
+        }
+        // Check cache first (from base class)
+        const cached = this.getCachedImage(key);
+        if (cached) {
+            if (onLoad)
+                onLoad(key, cached);
+            return;
+        }
+        // Use p5.loadImage
+        this.p5.loadImage(imageUrl, (img) => {
+            this.cacheImage(key, img);
+            if (onLoad)
+                onLoad(key, img);
+        }, (err) => {
+            console.error(`Failed to load ${key}:`, err);
+            if (onError)
+                onError(key, err);
+        });
+    }
+}
+/**
+ * p5.js Renderer - Complete rendering solution for p5.js
+ *
+ * Usage:
+ *   const renderer = new P5Renderer(p);
+ *   await renderer.loadImages(rigData);
+ *   renderer.render(rigData, { width: 800, height: 800 });
+ *
+ * Advanced Usage (full p5 control):
+ *   const renderData = renderer.compute(rigData, options);
+ *   // Modify renderData.objects as needed
+ *   renderer.renderObjects(renderData.objects);
+ */
+export class P5Renderer extends CharacterRigRenderer {
+    constructor(p5Instance, baseHost) {
+        const imageLoader = new P5ImageLoader(p5Instance, baseHost);
+        super(imageLoader);
+        this.loadedImages = {};
+        this.isReady = false;
+        this.p5 = p5Instance;
+    }
+    /**
+     * Load all images for a character rig
+     * Must be called before renderRig()
+     */
+    async loadImages(rigData) {
+        this.loadedImages = await this.imageLoader.loadAllRigImages(rigData, true);
+        this.isReady = true;
+    }
+    /**
+     * Compute rig render data (for advanced control)
+     * Returns the computed transforms that you can modify before rendering
+     */
+    compute(rigData, options) {
+        if (!this.isReady) {
+            throw new Error('Images not loaded. Call loadImages() first.');
+        }
+        const renderOptions = {
+            canvasWidth: options?.canvasWidth ?? this.p5.width,
+            canvasHeight: options?.canvasHeight ?? this.p5.height,
+            cameraOffset: options?.cameraOffset ?? { x: 0, y: 0 },
+            loadedImages: this.loadedImages
+        };
+        return this.computeCharacterRigData(rigData, renderOptions);
+    }
+    /**
+     * Render objects to p5 canvas
+     * Can be used with modified render data for custom effects
+     */
+    renderObjects(objects, showPivots = false, pivotPoints) {
+        objects.forEach(obj => {
+            if (!obj.imageData)
+                return;
+            this.p5.push();
+            this.p5.translate(obj.x, obj.y);
+            this.p5.rotate(obj.rotation);
+            this.p5.scale(obj.scaleX, obj.scaleY);
+            const drawX = -obj.width * obj.anchorX;
+            const drawY = -obj.height * obj.anchorY;
+            this.p5.image(obj.imageData, drawX, drawY, obj.width, obj.height);
+            this.p5.pop();
+        });
+        // Draw pivot points if requested
+        if (showPivots && pivotPoints) {
+            pivotPoints.forEach((pivot) => {
+                this.p5.push();
+                this.p5.fill(0, 150, 255, 230);
+                this.p5.stroke(0);
+                this.p5.strokeWeight(1);
+                this.p5.circle(pivot.x, pivot.y, 8);
+                this.p5.pop();
+            });
+        }
+    }
+    /**
+     * Simple one-line render (compute + renderObjects)
+     *
+     * @param rigData - Character rig data
+     * @param options - Render options (width, height, camera offset)
+     * @param showPivots - Whether to show pivot points for debugging
+     */
+    renderRig(rigData, options, showPivots = false) {
+        const renderData = this.compute(rigData, options);
+        this.renderObjects(renderData.objects, showPivots, renderData.pivotPoints);
+    }
+    /**
+     * Check if images are loaded and ready to render
+     */
+    ready() {
+        return this.isReady;
+    }
+    /**
+     * Get loaded images (for custom rendering)
+     */
+    getLoadedImages() {
+        return this.loadedImages;
+    }
+}
+//# sourceMappingURL=p5Renderer.js.map

package/dist/modules/adapters/p5Renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"p5Renderer.js","sourceRoot":"","sources":["../../../modules/adapters/p5Renderer.ts"],"names":[],"mappings":"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"}

package/dist/modules/adapters/skiaRenderer.d.ts

@@ -0,0 +1,84 @@
+/**
+ * Skia Canvas Renderer - Pre-built adapter for Node.js/Skia
+ * Reduces setup from ~75 lines to ~4 lines
+ */
+import { ImageLoader } from '../imageLoad.js';
+import { CharacterRigRenderer } from '../renderRig.js';
+import type { RigData, RenderOptions, RigRenderData } from '../../types.js';
+/**
+ * Skia-specific image loader
+ * Handles async image loading for Node.js canvas
+ */
+export declare class SkiaImageLoader extends ImageLoader {
+    constructor(baseHost?: string);
+    /**
+     * Async image loading for Skia Canvas
+     * Note: This requires the @napi-rs/canvas package's loadImage function
+     */
+    loadImageAsync(key: string, imageData: string): Promise<any>;
+    loadAllRigImagesAsync(rigData: RigData): Promise<Record<string, any>>;
+}
+/**
+ * Skia Canvas Renderer - Complete rendering solution for Node.js
+ *
+ * Simple Usage:
+ *   const renderer = new SkiaRenderer();
+ *   await renderer.renderToFile('output.png', rigData, { width: 800, height: 800 });
+ *
+ * Advanced Usage:
+ *   const renderer = new SkiaRenderer();
+ *   await renderer.loadImages(rigData);
+ *   const canvas = renderer.createCanvas(800, 800);
+ *   renderer.render(canvas, rigData);
+ *   await canvas.saveAs('output.png');
+ */
+export declare class SkiaRenderer extends CharacterRigRenderer {
+    private loadedImages;
+    private isReady;
+    constructor(baseHost?: string);
+    /**
+     * Load all images for a character rig
+     */
+    loadImages(rigData: RigData): Promise<void>;
+    /**
+     * Create a Skia canvas
+     */
+    createCanvas(width: number, height: number): Promise<any>;
+    /**
+     * Compute rig render data (for advanced control)
+     */
+    compute(rigData: RigData, options?: Partial<RenderOptions>): RigRenderData;
+    /**
+     * Render objects to canvas context
+     * Use this to render pre-computed and modified render data
+     */
+    renderObjects(ctx: any, objects: any[], showPivots?: boolean, pivotPoints?: any[]): void;
+    /**
+     * Render to a canvas (Skia Canvas 2D API)
+     * Computes render data and renders it
+     */
+    renderToCanvas(canvas: any, rigData: RigData, options?: Partial<RenderOptions>, showPivots?: boolean): void;
+    /**
+     * One-liner: Render directly to file
+     *
+     * @param outputPath - Path to save PNG file
+     * @param rigData - Character rig data
+     * @param options - Render options (width, height, camera offset)
+     */
+    renderToFile(outputPath: string, rigData: RigData, options?: Partial<RenderOptions> & {
+        showPivots?: boolean;
+    }): Promise<void>;
+    /**
+     * Render to buffer (for streaming, HTTP responses, etc.)
+     */
+    renderToBuffer(rigData: RigData, options?: Partial<RenderOptions>, format?: 'png' | 'jpeg'): Promise<Buffer>;
+    /**
+     * Check if images are loaded
+     */
+    ready(): boolean;
+    /**
+     * Get loaded images (for custom rendering)
+     */
+    getLoadedImages(): Record<string, any>;
+}
+//# sourceMappingURL=skiaRenderer.d.ts.map

package/dist/modules/adapters/skiaRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skiaRenderer.d.ts","sourceRoot":"","sources":["../../../modules/adapters/skiaRenderer.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE5E;;;GAGG;AACH,qBAAa,eAAgB,SAAQ,WAAW;gBAChC,QAAQ,CAAC,EAAE,MAAM;IAI7B;;;OAGG;IACG,cAAc,CAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC;IA+B5D,qBAAqB,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAiE9E;AAED;;;;;;;;;;;;;GAaG;AACH,qBAAa,YAAa,SAAQ,oBAAoB;IAClD,OAAO,CAAC,YAAY,CAA2B;IAC/C,OAAO,CAAC,OAAO,CAAkB;gBAErB,QAAQ,CAAC,EAAE,MAAM;IAK7B;;OAEG;IACG,UAAU,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC;IAMjD;;OAEG;IACG,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC;IAa/D;;OAEG;IACH,OAAO,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,GAAE,OAAO,CAAC,aAAa,CAAM,GAAG,aAAa;IAe9E;;;OAGG;IACH,aAAa,CAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,EAAE,UAAU,GAAE,OAAe,EAAE,WAAW,CAAC,EAAE,GAAG,EAAE,GAAG,IAAI;IAgC/F;;;OAGG;IACH,cAAc,CAAC,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,EAAE,UAAU,GAAE,OAAe,GAAG,IAAI;IAgBlH;;;;;;OAMG;IACG,YAAY,CACd,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE,OAAO,EAChB,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,OAAO,CAAA;KAAE,GAC5D,OAAO,CAAC,IAAI,CAAC;IAoBhB;;OAEG;IACG,cAAc,CAChB,OAAO,EAAE,OAAO,EAChB,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,EAChC,MAAM,GAAE,KAAK,GAAG,MAAc,GAC/B,OAAO,CAAC,MAAM,CAAC;IAclB;;OAEG;IACH,KAAK,IAAI,OAAO;IAIhB;;OAEG;IACH,eAAe,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;CAGzC"}

package/dist/modules/adapters/skiaRenderer.js

@@ -0,0 +1,262 @@
+/**
+ * Skia Canvas Renderer - Pre-built adapter for Node.js/Skia
+ * Reduces setup from ~75 lines to ~4 lines
+ */
+import { ImageLoader } from '../imageLoad.js';
+import { CharacterRigRenderer } from '../renderRig.js';
+/**
+ * Skia-specific image loader
+ * Handles async image loading for Node.js canvas
+ */
+export class SkiaImageLoader extends ImageLoader {
+    constructor(baseHost) {
+        super(baseHost);
+    }
+    /**
+     * Async image loading for Skia Canvas
+     * Note: This requires the @napi-rs/canvas package's loadImage function
+     */
+    async loadImageAsync(key, imageData) {
+        const imageUrl = this.resolveImageSource(imageData);
+        if (!imageUrl) {
+            throw new Error(`Could not resolve image source for ${key}: ${imageData}`);
+        }
+        // Check cache first
+        const cached = this.getCachedImage(key);
+        if (cached) {
+            return cached;
+        }
+        // Dynamic import to avoid browser compatibility issues
+        let loadImage;
+        try {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore - Optional dependency
+            const module = await import('@napi-rs/canvas');
+            loadImage = module.loadImage;
+        }
+        catch {
+            // Fallback to skia-canvas if @napi-rs/canvas is not available
+            const module = await import('skia-canvas');
+            loadImage = module.loadImage;
+        }
+        const img = await loadImage(imageUrl);
+        this.cacheImage(key, img);
+        return img;
+    }
+    async loadAllRigImagesAsync(rigData) {
+        const imagesToLoad = [];
+        // Collect all unique image paths from imagePaths
+        // CHANGED: We now ONLY track the actual path/hash, not semantic keys
+        if (rigData.imagePaths) {
+            for (const [, hash] of Object.entries(rigData.imagePaths)) {
+                if (hash && typeof hash === 'string' && !hash.includes('[MEDIA_REMOVED]')) {
+                    // Only add if not already in list (deduplicate)
+                    if (!imagesToLoad.find(item => item.hash === hash)) {
+                        imagesToLoad.push({ hash });
+                    }
+                }
+            }
+        }
+        // Collect all eye images
+        if (rigData.eyes) {
+            for (const [eyeKey, value] of Object.entries(rigData.eyes)) {
+                if (typeof value === 'string' && !value.includes('[MEDIA_REMOVED]') &&
+                    (eyeKey.includes('Image') || eyeKey.includes('Iris') || eyeKey.includes('Lid'))) {
+                    // Only add if not already in list (deduplicate)
+                    if (!imagesToLoad.find(item => item.hash === value)) {
+                        imagesToLoad.push({ hash: value });
+                    }
+                }
+            }
+        }
+        // Collect all mouth images from rigData.mouth
+        if (rigData.mouth) {
+            for (const [_mouthKey, value] of Object.entries(rigData.mouth)) {
+                if (typeof value === 'string' && !value.includes('[MEDIA_REMOVED]')) {
+                    // Only add if not already in list (deduplicate)
+                    if (!imagesToLoad.find(item => item.hash === value)) {
+                        imagesToLoad.push({ hash: value });
+                    }
+                }
+            }
+        }
+        console.log(`📦 Loading ${imagesToLoad.length} images for character rig...`);
+        const loadedImages = {};
+        let loaded = 0;
+        let failed = 0;
+        // Load all images in parallel
+        await Promise.all(imagesToLoad.map(async ({ hash }) => {
+            // CRITICAL: Use the actual path/hash as the cache key!
+            const img = await this.loadImageAsync(hash, hash);
+            if (img) {
+                loadedImages[hash] = img; // Cache by actual path, not semantic key!
+                loaded++;
+            }
+            else {
+                failed++;
+            }
+        }));
+        console.log(`✓ Loaded ${loaded}/${imagesToLoad.length} images (${failed} failed)`);
+        console.log('📦 Image Cache (indexed by actual paths):', Object.keys(loadedImages).map(k => k.substring(0, 50)));
+        return loadedImages;
+    }
+}
+/**
+ * Skia Canvas Renderer - Complete rendering solution for Node.js
+ *
+ * Simple Usage:
+ *   const renderer = new SkiaRenderer();
+ *   await renderer.renderToFile('output.png', rigData, { width: 800, height: 800 });
+ *
+ * Advanced Usage:
+ *   const renderer = new SkiaRenderer();
+ *   await renderer.loadImages(rigData);
+ *   const canvas = renderer.createCanvas(800, 800);
+ *   renderer.render(canvas, rigData);
+ *   await canvas.saveAs('output.png');
+ */
+export class SkiaRenderer extends CharacterRigRenderer {
+    constructor(baseHost) {
+        const imageLoader = new SkiaImageLoader(baseHost);
+        super(imageLoader);
+        this.loadedImages = {};
+        this.isReady = false;
+    }
+    /**
+     * Load all images for a character rig
+     */
+    async loadImages(rigData) {
+        const loader = this.getImageLoader();
+        this.loadedImages = await loader.loadAllRigImagesAsync(rigData);
+        this.isReady = true;
+    }
+    /**
+     * Create a Skia canvas
+     */
+    async createCanvas(width, height) {
+        try {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore - Optional dependency
+            const module = await import('@napi-rs/canvas');
+            return module.createCanvas(width, height);
+        }
+        catch {
+            // Fallback to skia-canvas
+            const module = await import('skia-canvas');
+            return module.Canvas ? new module.Canvas(width, height) : module.createCanvas(width, height);
+        }
+    }
+    /**
+     * Compute rig render data (for advanced control)
+     */
+    compute(rigData, options = {}) {
+        if (!this.isReady) {
+            throw new Error('Images not loaded. Call loadImages() first.');
+        }
+        const renderOptions = {
+            canvasWidth: options.canvasWidth ?? 800,
+            canvasHeight: options.canvasHeight ?? 800,
+            cameraOffset: options.cameraOffset ?? { x: 0, y: 0 },
+            loadedImages: this.loadedImages
+        };
+        return this.computeCharacterRigData(rigData, renderOptions);
+    }
+    /**
+     * Render objects to canvas context
+     * Use this to render pre-computed and modified render data
+     */
+    renderObjects(ctx, objects, showPivots = false, pivotPoints) {
+        objects.forEach(obj => {
+            if (!obj.imageData)
+                return;
+            ctx.save();
+            ctx.translate(obj.x, obj.y);
+            ctx.rotate(obj.rotation);
+            ctx.scale(obj.scaleX, obj.scaleY);
+            const drawX = -obj.width * obj.anchorX;
+            const drawY = -obj.height * obj.anchorY;
+            ctx.drawImage(obj.imageData, drawX, drawY, obj.width, obj.height);
+            ctx.restore();
+        });
+        // Draw pivot points if requested
+        if (showPivots && pivotPoints) {
+            pivotPoints.forEach(pivot => {
+                ctx.save();
+                ctx.fillStyle = 'rgba(0, 150, 255, 0.9)';
+                ctx.strokeStyle = '#000';
+                ctx.lineWidth = 1;
+                ctx.beginPath();
+                ctx.arc(pivot.x, pivot.y, 4, 0, Math.PI * 2);
+                ctx.fill();
+                ctx.stroke();
+                ctx.restore();
+            });
+        }
+    }
+    /**
+     * Render to a canvas (Skia Canvas 2D API)
+     * Computes render data and renders it
+     */
+    renderToCanvas(canvas, rigData, options, showPivots = false) {
+        const ctx = canvas.getContext('2d');
+        const renderData = this.compute(rigData, {
+            ...options,
+            canvasWidth: canvas.width,
+            canvasHeight: canvas.height
+        });
+        // Clear canvas
+        ctx.fillStyle = '#f0f0f0';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        // Render using renderObjects
+        this.renderObjects(ctx, renderData.objects, showPivots, renderData.pivotPoints);
+    }
+    /**
+     * One-liner: Render directly to file
+     *
+     * @param outputPath - Path to save PNG file
+     * @param rigData - Character rig data
+     * @param options - Render options (width, height, camera offset)
+     */
+    async renderToFile(outputPath, rigData, options) {
+        // Load images if not already loaded
+        if (!this.isReady) {
+            await this.loadImages(rigData);
+        }
+        // Create canvas
+        const width = options?.canvasWidth ?? 800;
+        const height = options?.canvasHeight ?? 800;
+        const canvas = await this.createCanvas(width, height);
+        // Render
+        this.renderToCanvas(canvas, rigData, options, options?.showPivots);
+        // Save to file
+        const fs = await import('fs/promises');
+        const buffer = await canvas.toBuffer('image/png');
+        await fs.writeFile(outputPath, buffer);
+    }
+    /**
+     * Render to buffer (for streaming, HTTP responses, etc.)
+     */
+    async renderToBuffer(rigData, options, format = 'png') {
+        if (!this.isReady) {
+            await this.loadImages(rigData);
+        }
+        const width = options?.canvasWidth ?? 800;
+        const height = options?.canvasHeight ?? 800;
+        const canvas = await this.createCanvas(width, height);
+        this.renderToCanvas(canvas, rigData, options);
+        return await canvas.toBuffer(`image/${format}`);
+    }
+    /**
+     * Check if images are loaded
+     */
+    ready() {
+        return this.isReady;
+    }
+    /**
+     * Get loaded images (for custom rendering)
+     */
+    getLoadedImages() {
+        return this.loadedImages;
+    }
+}
+//# sourceMappingURL=skiaRenderer.js.map