scrollcraft 2.0.5 → 2.0.8

package/dist/core/types.d.ts

@@ -1,5 +1,5 @@
 /**
- * SCROLLCRAFT 2.0 - DECLARATIVE SCHEMA
+ * SCROLLCRAFT - DECLARATIVE SCHEMA
  *
  * This file defines the core data structures that allow an AI Agent
  * to describe a scroll experience in one step.
@@ -11,12 +11,12 @@ export interface ProjectConfiguration {
     timeline: TimelineDefinition;
 }
 export interface ProjectSettings {
-    fps: number;
     baseResolution: {
         width: number;
         height: number;
     };
     scrollMode: 'vh' | 'px';
+    basePath?: string;
 }
 /**
  * ASSET SYSTEM
@@ -32,8 +32,11 @@ export interface AssetVariant {
     path: string;
     aspectRatio: string;
     frameCount: number;
+    width: number;
+    height: number;
+    orientation: 'portrait' | 'landscape';
     hasDepthMap?: boolean;
-    subjectTracking?: SubjectFrameData[];
+    subjects?: string[];
 }
 export interface SubjectFrameData {
     frame: number;
@@ -97,76 +100,3 @@ export interface LayerAnimation {
     end: number;
     easing?: string;
 }
-/**
- * LEGACY TYPES (V1 Compatibility)
- * These are required for existing modules to compile.
- */
-export interface BlockInstanceInterface {
-    destroy(): void;
-    resize(params: {
-        wiWidth: number;
-        wiHeight: number;
-    }): void;
-}
-export type MediaGroupPositionAndSize = {
-    bgSize?: 'contain' | 'cover' | 'custom';
-    bgPosition?: {
-        x: number;
-        y: number;
-    };
-};
-export type ImagesUrlListArray = Array<string | {
-    i: string;
-    dur?: number;
-}>;
-export type ImageGroupUrlList = MediaGroupPositionAndSize & {
-    type: 'urlList';
-    prefix?: string;
-    suffix?: string;
-    images: ImagesUrlListArray;
-    duration?: number;
-};
-export type ImageGroupGap = {
-    type: 'gap';
-    duration: number;
-};
-export type VideoGroupUrl = MediaGroupPositionAndSize & {
-    type: 'urlVideo';
-    video?: string;
-    duration?: number;
-};
-export type ImageGroupWp = MediaGroupPositionAndSize & {
-    type: 'wpMedia';
-    images: number[];
-    duration?: number;
-};
-export type VideoGroupWp = MediaGroupPositionAndSize & {
-    type: 'wpVideo';
-    video?: number;
-    duration?: number;
-};
-export type MediaGroup = ImageGroupGap | ImageGroupUrlList | VideoGroupUrl | ImageGroupWp | VideoGroupWp;
-export type MediaGroups = MediaGroup[];
-export type AttributesCanvas2d = {
-    mediaGroups: MediaGroups;
-    markers: boolean;
-    scrub: number;
-    triggerStart: number;
-    triggerEnd: number;
-    pin: boolean;
-    pinSpacing: boolean;
-};
-export type AttributesScene = {
-    scenePosition: 'flow' | 'sticky' | 'fixed';
-    stickyType: 'css' | 'js';
-    height: number;
-    heightUnit: string;
-    duration: number;
-    durationUnit: string;
-    top: number;
-    topUnit: string;
-    markers: boolean;
-    scrub: number;
-    triggerStart: number;
-    triggerEnd: number;
-};

package/dist/core/types.js

@@ -1,6 +1,6 @@
 "use strict";
 /**
- * SCROLLCRAFT 2.0 - DECLARATIVE SCHEMA
+ * SCROLLCRAFT - DECLARATIVE SCHEMA
  *
  * This file defines the core data structures that allow an AI Agent
  * to describe a scroll experience in one step.

package/dist/pipeline/browser-driver.d.ts

@@ -0,0 +1,31 @@
+import { IPipelineDriver, VariantConfig } from './types';
+export declare class BrowserDriver implements IPipelineDriver {
+    private files;
+    constructor();
+    readFile(path: string): Promise<Uint8Array>;
+    writeFile(path: string, data: Uint8Array | string): Promise<void>;
+    mkdir(path: string): Promise<void>;
+    exists(path: string): Promise<boolean>;
+    readdir(dirPath: string): Promise<string[]>;
+    remove(path: string): Promise<void>;
+    join(...parts: string[]): string;
+    resolve(...parts: string[]): string;
+    /**
+     * EXTRACT FRAMES (via ffmpeg.wasm)
+     * Note: Requires SharedArrayBuffer & specific Headers if using multithreading.
+     */
+    extractFrames(videoSource: string | File | Blob, outputDir: string, onProgress?: (percent: number) => void): Promise<void>;
+    /**
+     * PROCESS IMAGE (via Canvas API)
+     * High-performance resizing and cropping using the browser's hardware-accelerated Canvas.
+     */
+    processImage(input: Uint8Array | string, config: VariantConfig, options?: {
+        grayscale?: boolean;
+        blur?: number;
+    }): Promise<Uint8Array>;
+    /**
+     * ZIP PROJECT (via JSZip)
+     * Bundles all processed assets into a single file for upload or download.
+     */
+    zipProject(outDir: string): Promise<Uint8Array>;
+}

package/dist/pipeline/browser-driver.js

@@ -0,0 +1,176 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BrowserDriver = void 0;
+class BrowserDriver {
+    files = new Map();
+    constructor() {
+        console.log('🌐 BrowserDriver initialized');
+    }
+    async readFile(path) {
+        const data = this.files.get(path);
+        if (!data)
+            throw new Error(`File not found: ${path}`);
+        if (typeof data === 'string')
+            return new TextEncoder().encode(data);
+        return data;
+    }
+    async writeFile(path, data) {
+        this.files.set(path, data);
+    }
+    async mkdir(path) {
+        // Virtual folders - no-op for simple Map implementation
+    }
+    async exists(path) {
+        return this.files.has(path);
+    }
+    async readdir(dirPath) {
+        const results = [];
+        for (const key of this.files.keys()) {
+            if (key.startsWith(dirPath)) {
+                // Simple relative path extraction
+                const relative = key.replace(dirPath, '').replace(/^[\\\/]/, '');
+                if (relative && !relative.includes('/') && !relative.includes('\\')) {
+                    results.push(relative);
+                }
+            }
+        }
+        return results;
+    }
+    async remove(path) {
+        this.files.delete(path);
+    }
+    join(...parts) {
+        return parts.join('/').replace(/\/+/g, '/');
+    }
+    resolve(...parts) {
+        return this.join(...parts);
+    }
+    /**
+     * EXTRACT FRAMES (via ffmpeg.wasm)
+     * Note: Requires SharedArrayBuffer & specific Headers if using multithreading.
+     */
+    async extractFrames(videoSource, outputDir, onProgress) {
+        try {
+            // Dynamic import to keep core bundle small
+            const { FFmpeg } = await Promise.resolve().then(() => __importStar(require('@ffmpeg/ffmpeg')));
+            const { fetchFile, toBlobURL } = await Promise.resolve().then(() => __importStar(require('@ffmpeg/util')));
+            const ffmpeg = new FFmpeg();
+            ffmpeg.on('progress', ({ progress }) => {
+                if (onProgress)
+                    onProgress(Math.round(progress * 100));
+            });
+            // Load FFmpeg WASM
+            // You'll need to provide the correct URL for the core/worker files in your WP plugin
+            await ffmpeg.load({
+                coreURL: await toBlobURL(`https://unpkg.com/@ffmpeg/core@0.12.6/dist/esm/ffmpeg-core.js`, 'text/javascript'),
+                wasmURL: await toBlobURL(`https://unpkg.com/@ffmpeg/core@0.12.6/dist/esm/ffmpeg-core.wasm`, 'application/wasm'),
+            });
+            const inputName = 'input.mp4';
+            await ffmpeg.writeFile(inputName, await fetchFile(videoSource));
+            // Extract as PNGs/WebPs (WebP might be faster if supported in the WASM build)
+            await ffmpeg.exec(['-i', inputName, `${outputDir}/frame_%04d.png`]);
+            // Move files from FFmpeg VFS to our Map FS
+            const files = await ffmpeg.listDir(outputDir);
+            for (const file of files) {
+                if (file.name.startsWith('frame_')) {
+                    const data = await ffmpeg.readFile(`${outputDir}/${file.name}`);
+                    await this.writeFile(this.join(outputDir, file.name), data);
+                }
+            }
+            await ffmpeg.terminate();
+        }
+        catch (err) {
+            console.error('FFmpeg WASM Error:', err);
+            throw new Error('Failed to extract frames in browser. Did you enable SharedArrayBuffer headers?');
+        }
+    }
+    /**
+     * PROCESS IMAGE (via Canvas API)
+     * High-performance resizing and cropping using the browser's hardware-accelerated Canvas.
+     */
+    async processImage(input, config, options = {}) {
+        // 1. Load image into a bitmap
+        let blob;
+        if (typeof input === 'string') {
+            const data = await this.readFile(input);
+            blob = new Blob([data]);
+        }
+        else {
+            blob = new Blob([input]);
+        }
+        const img = await createImageBitmap(blob);
+        // 2. Setup Canvas
+        const canvas = new OffscreenCanvas(config.width, config.height);
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            throw new Error('Could not get Canvas context');
+        // 3. Smart Crop Logic (simplified to cover/center)
+        const scale = Math.max(config.width / img.width, config.height / img.height);
+        const x = (config.width - img.width * scale) / 2;
+        const y = (config.height - img.height * scale) / 2;
+        // Apply filters
+        let filters = '';
+        if (options.grayscale)
+            filters += 'grayscale(100%) ';
+        if (options.blur)
+            filters += `blur(${options.blur}px) `;
+        if (filters)
+            ctx.filter = filters.trim();
+        ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
+        // 4. Encode to WebP
+        const outputBlob = await canvas.convertToBlob({
+            type: 'image/webp',
+            quality: 0.8
+        });
+        return new Uint8Array(await outputBlob.arrayBuffer());
+    }
+    /**
+     * ZIP PROJECT (via JSZip)
+     * Bundles all processed assets into a single file for upload or download.
+     */
+    async zipProject(outDir) {
+        const { default: JSZip } = await Promise.resolve().then(() => __importStar(require('jszip')));
+        const zip = new JSZip();
+        for (const [path, data] of this.files.entries()) {
+            if (path.startsWith(outDir)) {
+                const relativePath = path.replace(outDir, '').replace(/^[\\\/]/, '');
+                zip.file(relativePath, data);
+            }
+        }
+        return await zip.generateAsync({ type: 'uint8array' });
+    }
+}
+exports.BrowserDriver = BrowserDriver;

package/dist/pipeline/fal-service.d.ts

@@ -0,0 +1,15 @@
+import { IPipelineDriver } from './types';
+import { SubjectFrameData } from '../core/types';
+export interface FalOptions {
+    apiKey?: string;
+    proxyUrl?: string;
+}
+export declare class FalService {
+    private options;
+    constructor(options?: FalOptions);
+    private getAuthHeaders;
+    trackSubject(input: string | File | Blob, driver: IPipelineDriver, prompt?: string): Promise<SubjectFrameData[]>;
+    generateDepthMap(input: string | File | Blob, driver: IPipelineDriver): Promise<string>;
+    private uploadFile;
+    private mapBoxesToTrackingData;
+}

package/dist/pipeline/fal-service.js

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FalService = void 0;
+const client_1 = require("@fal-ai/client");
+class FalService {
+    options;
+    constructor(options = {}) {
+        this.options = options;
+        // In node, we might fallback to process.env if not provided
+        const key = options.apiKey || (typeof process !== 'undefined' ? process.env?.FAL_KEY : '');
+        if (!key && !options.proxyUrl) {
+            // Don't throw yet, only when a cloud method is called
+        }
+    }
+    getAuthHeaders() {
+        return {}; // fal-ai/client handles FAL_KEY from env or we can set it
+    }
+    async trackSubject(input, driver, prompt = "main subject") {
+        let videoUrl;
+        if (typeof input === 'string') {
+            // Local path or URL
+            if (await driver.exists(input)) {
+                videoUrl = await this.uploadFile(input, driver);
+            }
+            else {
+                videoUrl = input;
+            }
+        }
+        else {
+            // File or Blob
+            videoUrl = await client_1.fal.storage.upload(input);
+        }
+        console.log(`🤖 AI is tracking "${prompt}" via SAM 3...`);
+        const result = await client_1.fal.subscribe("fal-ai/sam-3/video-rle", {
+            input: {
+                video_url: videoUrl,
+                prompt: prompt,
+            },
+            logs: true,
+        });
+        const payload = result.data || result;
+        const boxes = payload.boxes;
+        if (!boxes || !Array.isArray(boxes) || boxes.length === 0) {
+            throw new Error(`AI tracking returned no data.`);
+        }
+        return this.mapBoxesToTrackingData(boxes);
+    }
+    async generateDepthMap(input, driver) {
+        let videoUrl;
+        if (typeof input === 'string') {
+            if (await driver.exists(input)) {
+                videoUrl = await this.uploadFile(input, driver);
+            }
+            else {
+                videoUrl = input;
+            }
+        }
+        else {
+            videoUrl = await client_1.fal.storage.upload(input);
+        }
+        console.log(`🤖 AI is generating Depth Map...`);
+        const result = await client_1.fal.subscribe("fal-ai/video-depth-anything", {
+            input: {
+                video_url: videoUrl,
+                model_size: "VDA-Base",
+            },
+            logs: true
+        });
+        const payload = result.data || result;
+        if (!payload.video || !payload.video.url) {
+            throw new Error(`AI Depth Map generation failed.`);
+        }
+        return payload.video.url;
+    }
+    async uploadFile(filePath, driver) {
+        const data = await driver.readFile(filePath);
+        return await client_1.fal.storage.upload(new Blob([data]));
+    }
+    mapBoxesToTrackingData(boxes) {
+        let lastKnown = { x: 0.5, y: 0.5, scale: 0 };
+        return boxes.map((frameBoxes, i) => {
+            if (frameBoxes && Array.isArray(frameBoxes)) {
+                let box = null;
+                if (typeof frameBoxes[0] === 'number' && frameBoxes.length >= 4) {
+                    box = frameBoxes;
+                }
+                else if (Array.isArray(frameBoxes[0]) && frameBoxes[0].length >= 4) {
+                    box = frameBoxes[0];
+                }
+                else if (typeof frameBoxes[0] === 'object' && frameBoxes[0].box_2d) {
+                    box = frameBoxes[0].box_2d;
+                }
+                if (box) {
+                    lastKnown = { x: box[0], y: box[1], scale: box[2] * box[3] };
+                }
+            }
+            return { frame: i, ...lastKnown };
+        });
+    }
+}
+exports.FalService = FalService;

package/dist/pipeline/index.d.ts

@@ -0,0 +1,21 @@
+import { PipelineOptions, CreateCommandOptions } from './types';
+import { ProjectConfiguration, AssetVariant } from '../core/types';
+export declare class AssetPipeline {
+    private driver;
+    private options;
+    private fal;
+    constructor(options?: PipelineOptions);
+    /**
+     * INITIALIZE DRIVER
+     * Detects environment and loads the appropriate driver dynamically.
+     */
+    init(): Promise<void>;
+    private report;
+    /**
+     * THE MAIN ORCHESTRATOR
+     */
+    create(opts: CreateCommandOptions): Promise<ProjectConfiguration | Uint8Array<ArrayBufferLike>>;
+    private normalizeVariants;
+    private processVariants;
+    saveConfig(variants: AssetVariant[], outDir: string): Promise<ProjectConfiguration>;
+}

package/dist/pipeline/index.js

@@ -0,0 +1,223 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AssetPipeline = void 0;
+const fal_service_1 = require("./fal-service");
+class AssetPipeline {
+    driver;
+    options;
+    fal;
+    constructor(options = {}) {
+        this.options = options;
+        this.fal = new fal_service_1.FalService({ apiKey: options.apiKey, proxyUrl: options.proxyUrl });
+    }
+    /**
+     * INITIALIZE DRIVER
+     * Detects environment and loads the appropriate driver dynamically.
+     */
+    async init() {
+        if (this.driver)
+            return;
+        if (typeof window !== 'undefined') {
+            // Browser Environment
+            try {
+                // @ts-ignore - Assuming BrowserDriver will exist in same folder
+                const { BrowserDriver } = await Promise.resolve().then(() => __importStar(require('./browser-driver')));
+                this.driver = new BrowserDriver();
+            }
+            catch (e) {
+                throw new Error('Could not load BrowserDriver. Ensure @scrollcraft/pipeline/browser is available.');
+            }
+        }
+        else {
+            // Node Environment
+            try {
+                const { NodeDriver } = await Promise.resolve().then(() => __importStar(require('./node-driver')));
+                this.driver = new NodeDriver();
+            }
+            catch (e) {
+                throw new Error('Could not load NodeDriver. Ensure @scrollcraft/pipeline/node (sharp, ffmpeg) is installed.');
+            }
+        }
+    }
+    report(step, percent, message) {
+        if (this.options.onProgress) {
+            this.options.onProgress({ step, percent, message });
+        }
+        console.log(`[${step}] ${percent}% - ${message}`);
+    }
+    /**
+     * THE MAIN ORCHESTRATOR
+     */
+    async create(opts) {
+        await this.init();
+        const { input, name, track, hasDepth, step = 1 } = opts;
+        const outDir = this.driver.resolve(name);
+        const tempDir = this.driver.join(outDir, '.temp-frames');
+        this.report('initializing', 0, `Creating project: ${name}`);
+        await this.driver.mkdir(outDir);
+        await this.driver.mkdir(tempDir);
+        // 1. FRAME EXTRACTION
+        this.report('extracting', 10, 'Extracting frames from source...');
+        await this.driver.extractFrames(input, tempDir);
+        // 2. AI TRACKING & DEPTH
+        let trackingData = [];
+        let isDepthActive = false;
+        if (track || hasDepth) {
+            this.report('tracking', 30, 'Performing AI analysis...');
+            if (track) {
+                trackingData = await this.fal.trackSubject(input, this.driver, track);
+            }
+            if (hasDepth) {
+                this.report('depth', 40, 'Generating depth maps...');
+                const depthVideoUrl = await this.fal.generateDepthMap(input, this.driver);
+                // Download and extract depth frames
+                const response = await fetch(depthVideoUrl);
+                const buffer = await response.arrayBuffer();
+                const depthPath = this.driver.join(tempDir, 'depth_video.mp4');
+                await this.driver.writeFile(depthPath, new Uint8Array(buffer));
+                await this.driver.extractFrames(depthPath, tempDir); // Note: needs to handle prefix
+                isDepthActive = true;
+            }
+        }
+        // Default tracking if none
+        if (trackingData.length === 0) {
+            const files = await this.driver.readdir(tempDir);
+            const frameFiles = files.filter(f => f.startsWith('frame_'));
+            trackingData = frameFiles.map((_, i) => ({ frame: i, x: 0.5, y: 0.5, scale: 0 }));
+        }
+        // 3. VARIANT GENERATION
+        this.report('processing', 60, 'Generating optimized variants...');
+        const variants = await this.processVariants(tempDir, trackingData, {
+            step,
+            hasDepth: isDepthActive,
+            variants: this.normalizeVariants(opts.variants),
+            outDir
+        });
+        // 4. SAVE CONFIG
+        this.report('saving', 90, 'Finalizing project configuration...');
+        const config = await this.saveConfig(variants, outDir);
+        // Cleanup
+        await this.driver.remove(tempDir);
+        this.report('saving', 100, 'Project ready!');
+        if (opts.outputZip && this.driver.zipProject) {
+            return await this.driver.zipProject(outDir);
+        }
+        return config;
+    }
+    normalizeVariants(v) {
+        if (v.length === 0)
+            return [];
+        if (typeof v[0] === 'object')
+            return v;
+        // Convert numbers to baseline portrait/landscape pairs
+        const res = v;
+        const normalized = [];
+        res.forEach(r => {
+            normalized.push({
+                id: `${r}p_p`, width: r, height: Math.round(r * (16 / 9)),
+                orientation: 'portrait', aspectRatio: '9:16', media: '(orientation: portrait)'
+            });
+            normalized.push({
+                id: `${r}p_l`, width: Math.round(r * (16 / 9)), height: r,
+                orientation: 'landscape', aspectRatio: '16:9', media: '(orientation: landscape)'
+            });
+        });
+        return normalized;
+    }
+    async processVariants(tempDir, trackingData, options) {
+        const { step, outDir } = options;
+        const allFiles = await this.driver.readdir(tempDir);
+        const allFrames = allFiles.filter(f => f.startsWith('frame_')).sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
+        const framesToProcess = allFrames.filter((_, i) => i % step === 0);
+        const assetVariants = [];
+        for (const config of options.variants) {
+            const variantDir = this.driver.join(outDir, config.id);
+            await this.driver.mkdir(variantDir);
+            const variantTracking = [];
+            for (let i = 0; i < framesToProcess.length; i++) {
+                const originalIndex = i * step;
+                const frameName = framesToProcess[i];
+                const framePath = this.driver.join(tempDir, frameName);
+                const targetPath = this.driver.join(variantDir, `index_${i}.webp`);
+                const subject = trackingData.find(f => f.frame === originalIndex) || { frame: originalIndex, x: 0.5, y: 0.5, scale: 0 };
+                const imageBuffer = await this.driver.processImage(framePath, config, {});
+                await this.driver.writeFile(targetPath, imageBuffer);
+                if (options.hasDepth) {
+                    const numStr = frameName.match(/(\d+)/)?.[1] || "";
+                    const depthFile = allFiles.find(f => f.startsWith('depth_') && f.includes(numStr));
+                    if (depthFile) {
+                        const depthPath = this.driver.join(tempDir, depthFile);
+                        const depthBuffer = await this.driver.processImage(depthPath, config, { grayscale: true, blur: 2 });
+                        await this.driver.writeFile(this.driver.join(variantDir, `index_${i}_depth.webp`), depthBuffer);
+                    }
+                }
+                variantTracking.push({ ...subject, frame: i });
+            }
+            await this.driver.writeFile(this.driver.join(variantDir, '000_tracking-main.json'), JSON.stringify(variantTracking, null, 2));
+            assetVariants.push({
+                id: config.id,
+                media: config.media,
+                width: config.width,
+                height: config.height,
+                orientation: config.orientation,
+                aspectRatio: config.aspectRatio,
+                path: `./${config.id}`,
+                frameCount: framesToProcess.length,
+                hasDepthMap: options.hasDepth,
+                subjects: ['main']
+            });
+        }
+        return assetVariants;
+    }
+    async saveConfig(variants, outDir) {
+        const pkg = { version: '2.0.6' }; // In real app, import from package.json
+        const config = {
+            version: pkg.version,
+            settings: { baseResolution: { width: 1920, height: 1080 }, scrollMode: 'vh' },
+            assets: [{ id: "main-sequence", strategy: "adaptive", variants: variants }],
+            timeline: {
+                totalDuration: "300vh",
+                scenes: [{
+                        id: "scene-1", assetId: "main-sequence", startProgress: 0, duration: 1,
+                        assetRange: [0, variants[0].frameCount - 1], layers: []
+                    }]
+            }
+        };
+        await this.driver.writeFile(this.driver.join(outDir, 'scrollcraft.json'), JSON.stringify(config, null, 2));
+        return config;
+    }
+}
+exports.AssetPipeline = AssetPipeline;