scrolltube 2.0.15

package/dist/core/types.d.ts

@@ -0,0 +1,102 @@
+/**
+ * SCROLLTUBE - DECLARATIVE SCHEMA
+ *
+ * This file defines the core data structures that allow an AI Agent
+ * to describe a scroll experience in one step.
+ */
+export interface ProjectConfiguration {
+    version: string;
+    settings: ProjectSettings;
+    assets: SequenceAsset[];
+    timeline: TimelineDefinition;
+}
+export interface ProjectSettings {
+    baseResolution: {
+        width: number;
+        height: number;
+    };
+    scrollMode: 'vh' | 'px';
+    basePath?: string;
+}
+/**
+ * ASSET SYSTEM
+ */
+export interface SequenceAsset {
+    id: string;
+    strategy: 'adaptive' | 'fixed';
+    variants: AssetVariant[];
+}
+export interface AssetVariant {
+    id: string;
+    media: string;
+    path: string;
+    aspectRatio: string;
+    frameCount: number;
+    width: number;
+    height: number;
+    orientation: 'portrait' | 'landscape';
+    hasDepthMap?: boolean;
+    subjects?: string[];
+}
+export interface SubjectFrameData {
+    frame: number;
+    x: number;
+    y: number;
+    scale?: number;
+}
+/**
+ * TIMELINE SYSTEM
+ */
+export interface TimelineDefinition {
+    totalDuration: string | number;
+    scenes: SceneDefinition[];
+}
+export interface SceneDefinition {
+    id: string;
+    assetId: string;
+    startProgress: number;
+    duration: number;
+    assetRange: [number, number];
+    layers: LayerDefinition[];
+}
+/**
+ * LAYER SYSTEM
+ */
+export type LayerDefinition = HTMLLayer | CanvasLayer;
+export interface BaseLayer {
+    id: string;
+    type: string;
+    zIndex?: number;
+    anchor: 'viewport' | 'subject';
+    position: ResponsiveCoordinate;
+    animations: LayerAnimation[];
+}
+export interface HTMLLayer extends BaseLayer {
+    type: 'html';
+    content: string;
+    style?: Record<string, string>;
+}
+export interface CanvasLayer extends BaseLayer {
+    type: 'canvas';
+}
+/**
+ * UTILITY TYPES
+ */
+export interface ResponsiveCoordinate {
+    default: Point;
+    mobile?: Point;
+    tablet?: Point;
+    desktop?: Point;
+}
+export interface Point {
+    x: string | number;
+    y: string | number;
+}
+export interface LayerAnimation {
+    property: string;
+    from: number | string;
+    to: number | string;
+    start: number;
+    end: number;
+    easing?: string;
+}

package/dist/core/types.js

@@ -0,0 +1,8 @@
+"use strict";
+/**
+ * SCROLLTUBE - DECLARATIVE SCHEMA
+ *
+ * This file defines the core data structures that allow an AI Agent
+ * to describe a scroll experience in one step.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });

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,184 @@
+"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) {
+        // 1. Delete the exact file/folder key
+        this.files.delete(path);
+        // 2. Delete all children (recursive cleanup for virtual folders)
+        const prefix = path.endsWith('/') ? path : `${path}/`;
+        for (const key of this.files.keys()) {
+            if (key.startsWith(prefix)) {
+                this.files.delete(key);
+            }
+        }
+    }
+    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/cloud-service.d.ts

@@ -0,0 +1,17 @@
+import { IPipelineDriver } from './types';
+import { SubjectFrameData } from '../core/types';
+export interface CloudOptions {
+    apiKey?: string;
+    baseUrl?: string;
+    proxyUrl?: string;
+}
+export declare class CloudService {
+    private options;
+    private isScrollTube;
+    constructor(options?: CloudOptions);
+    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/cloud-service.js

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CloudService = void 0;
+const client_1 = require("@fal-ai/client");
+class CloudService {
+    options;
+    isScrollTube = false;
+    constructor(options = {}) {
+        this.options = options;
+        // Prioritize SCROLLTUBE_KEY from environment or options
+        const envStube = typeof process !== 'undefined' ? process.env?.SCROLLTUBE_KEY : '';
+        const envFal = typeof process !== 'undefined' ? process.env?.FAL_KEY : '';
+        const key = options.apiKey || envStube || envFal;
+        if (envStube || (options.apiKey && options.apiKey.startsWith('stube_'))) {
+            this.isScrollTube = true;
+        }
+        if (!key && !options.proxyUrl) {
+            // Don't throw yet, only when a cloud method is called
+        }
+    }
+    getAuthHeaders() {
+        // For now, fal-ai/client uses the env variable FE_FAL_KEY or the key provided to it.
+        // In the future, once we use a proxy, we'll manually set headers here.
+        return {};
+    }
+    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.CloudService = CloudService;

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 cloud;
+    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>;
+}