scrolltube 2.1.0 → 2.1.3

package/AGENTS.md

@@ -11,7 +11,8 @@ You are a ScrollTube Implementation Expert. Your goal is to transform static med
 ### Step 1: Asset Preparation (The CLI)
 Before writing any UI code, you MUST process the raw assets (video or images) into a ScrollTube project.
 ```bash
-npx stube create <input_path> --cloud --depth --prompt "main subject" [-s 2]
+npx scrolltube create <input_path> --cloud --depth --track "main subject"
+
 ```
 - **Why?** This generates optimized multi-resolution frames, optional AI-tracked subject coordinates, and optional depth maps.
 - **Output**: A directory containing `scrolltube.json` and variant folders (`mobile/`, `desktop/`).

package/README.md

@@ -28,7 +28,8 @@ Transform your video into a ScrollTube project from your terminal:
 
 ```bash
 # This will extract frames, track the subject, and generate optimized variants and depth maps.
-npx stube create "your-video.mp4" --name "my-project" --track "apple" --cloud --depth
+npx scrolltube create "your-video.mp4" --name "my-project" --track "apple" --cloud --depth
+
 ```
 
 #### Programmatic Usage (Browser/Node)
@@ -58,9 +59,9 @@ const project = await pipeline.create({
 All you have to do now, is to drop the scrolltube.json project into your ScrollTubeProvider.
 
 #### Vanilla JS Integration
-For full implementation, please refer to the [Vanilla JS Example](https://github.com/aleskozelsky/scrolltube/blob/main/packages/examples/html/index.html).
+For full implementation, please refer to the [Vanilla JS Example](https://github.com/aleskozelsky/scrolltube/blob/main/demos/html/index.html).
 
-[Live Demo](https://example-html.scroll.tube) 
+[Live Demo](https://demo-html.scroll.tube) 
 
 ```html
 <!-- 2. Drop it into your HTML -->
@@ -75,9 +76,9 @@ For full implementation, please refer to the [Vanilla JS Example](https://github
 
 
 #### React Integration
-For full implementation, please refer to the [React Integration Example](https://github.com/aleskozelsky/scrolltube/blob/main/packages/examples/create-next-app/src/app/page.tsx).
+For full implementation, please refer to the [React Integration Example](https://github.com/aleskozelsky/scrolltube/blob/main/demos/create-next-app/src/app/page.tsx).
 
-[Live Demo](https://example-next.scroll.tube) 
+[Live Demo](https://demo-nextjs.scroll.tube) 
 
 
 ```tsx
@@ -133,7 +134,7 @@ Choose your path based on your role:
 - [**React Hooks**](https://docs.scroll.tube/react-integration): Build custom interactive components.
 
 ### 🤖 For AI Agents
-- [**AGENTS.md**](https://github.com/aleskozelsky/scrolltube/blob/main/packages/scrolltube/AGENTS.md): Technical standard operating procedures for the repository.
+- [**AGENTS.md**](https://github.com/aleskozelsky/scrolltube/blob/main/AGENTS.md): Technical standard operating procedures for the repository.
 - [**AI Integration Protocol**](https://docs.scroll.tube/ai-integration): How to prompt agents to build scenes for you.
 
 ---

package/dist/cli/index.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+import 'dotenv/config';

package/dist/cli/index.js

@@ -0,0 +1,240 @@
+#!/usr/bin/env node
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const commander_1 = require("commander");
+const chalk_1 = __importDefault(require("chalk"));
+const fs = __importStar(require("fs-extra"));
+const path = __importStar(require("path"));
+const child_process_1 = require("child_process");
+const ffmpeg_static_1 = __importDefault(require("ffmpeg-static"));
+const pipeline_1 = require("../pipeline");
+const readline = __importStar(require("readline"));
+require("dotenv/config");
+const pkg = require('../../package.json');
+/**
+ *  MEDIA QUERY BUILDER
+ */
+function buildVariantsFromIds(input) {
+    const result = [];
+    const orientations = ['portrait', 'landscape'];
+    // 1. Process each "Target" resolution
+    input.forEach(item => {
+        let res = 0;
+        if (typeof item === 'number')
+            res = item;
+        else if (typeof item === 'string')
+            res = parseInt(item);
+        else if (item.height)
+            res = item.height; // Assume height is the defining metric
+        if (!res || isNaN(res))
+            return;
+        orientations.forEach(orient => {
+            const isPortrait = orient === 'portrait';
+            const width = isPortrait ? res : Math.round(res * (16 / 9));
+            const height = isPortrait ? Math.round(res * (16 / 9)) : res;
+            result.push({
+                id: `${res}p_${orient.substring(0, 1)}`,
+                width,
+                height,
+                orientation: orient,
+                aspectRatio: isPortrait ? '9:16' : '16:9',
+                media: `(orientation: ${orient})` // Minimal fallback
+            });
+        });
+    });
+    // 2. Sort by height (ascending) so the engine finds the first one that fits
+    return result.sort((a, b) => a.height - b.height);
+}
+/**
+ * CONFIG LOADER
+ * Looks for scrolltube.config.js/ts in the current working directory.
+ */
+async function loadProjectConfig() {
+    const possiblePaths = [
+        path.join(process.cwd(), 'scrolltube.cli.config.js'),
+        path.join(process.cwd(), 'scrolltube.cli.config.cjs'),
+        path.join(process.cwd(), 'scrolltube.cli.config.ts')
+    ];
+    for (const p of possiblePaths) {
+        if (fs.existsSync(p)) {
+            try {
+                // For simplicity in CLI we handle commonjs/esm basics
+                // If it's TS, it might need jiti or ts-node, but let's assume JS for now
+                // or use a simple dynamic import if supported.
+                return require(p);
+            }
+            catch (e) {
+                console.warn(chalk_1.default.yellow(`⚠️  Found config at ${p} but failed to load it. Skipping...`));
+            }
+        }
+    }
+    return null;
+}
+/**
+ * Robust FFmpeg Detection
+ * Prioritizes bundled static binary, then system PATH.
+ */
+function getFFmpegPath() {
+    // 1. Try bundled ffmpeg-static
+    if (ffmpeg_static_1.default)
+        return ffmpeg_static_1.default;
+    // 2. Try system PATH
+    try {
+        (0, child_process_1.execSync)('ffmpeg -version', { stdio: 'ignore' });
+        return 'ffmpeg';
+    }
+    catch (e) {
+        return null;
+    }
+}
+const program = new commander_1.Command();
+program
+    .name('scrolltube')
+    .description('ScrollTube CLI - Immersive Web SDK')
+    .version(pkg.version);
+/**
+ * Interactive Helper
+ */
+async function prompt(question, defaultValue) {
+    const rl = readline.createInterface({
+        input: process.stdin,
+        output: process.stdout
+    });
+    return new Promise(resolve => {
+        rl.question(`${chalk_1.default.cyan('?')} ${question}${defaultValue ? ` (${defaultValue})` : ''}: `, (answer) => {
+            rl.close();
+            resolve(answer.trim() || defaultValue || '');
+        });
+    });
+}
+program
+    .command('create')
+    .description('ONE-STEP: Transform video/images into a responsive ScrollTube')
+    .argument('[input]', 'Path to input video or directory of images')
+    .option('-o, --output <dir>', 'Output directory (deprecated, use --name)')
+    .option('-p, --track <text>', 'Text prompt for subject tracking', 'main subject')
+    .option('-n, --name <string>', 'Name of the project')
+    .option('-v, --variants <string>', 'Comma-separated target resolutions (e.g. 720,1080)')
+    .option('-s, --step <number>', 'Process every Nth frame (default: 1)', '1')
+    .option('--cloud', 'Use Fal.ai for tracking and refinement', false)
+    .option('--depth', 'Generate a 3D depth map for the displacement effect (Requires --cloud)', false)
+    .action(async (inputArg, opts) => {
+    console.log(chalk_1.default.bold.blue('\n🎞️  ScrollTube Asset Pipeline\n'));
+    // 0. PRE-FLIGHT CHECK
+    const ffmpegPath = getFFmpegPath();
+    if (!ffmpegPath) {
+        console.error(chalk_1.default.red('\n❌ FFmpeg not found!'));
+        console.log(chalk_1.default.yellow('This CLI requires FFmpeg to process videos.'));
+        console.log('Please install it manually or ensure regular npm install was successful.');
+        process.exit(1);
+    }
+    const projectConfig = await loadProjectConfig();
+    let input = inputArg;
+    let track = opts.track;
+    let projectName = opts.name;
+    let useTracking = opts.cloud; // Default to cloud if flag set
+    let useDepth = opts.depth;
+    let customVariants = projectConfig?.variants || (opts.variants ? buildVariantsFromIds(opts.variants.split(',')) : null);
+    // 1. INPUT VALIDATION (Immediate)
+    while (!input || !fs.existsSync(input)) {
+        if (input && !fs.existsSync(input)) {
+            console.error(chalk_1.default.red(`\n❌ Error: Input path "${input}" does not exist.`));
+        }
+        input = await prompt('Path to input video or directory of images');
+    }
+    // 2. PROJECT NAME & SETTINGS
+    if (!projectName) {
+        projectName = await prompt('Project name', 'scrolltube-project');
+    }
+    let step = parseInt(opts.step) || 1;
+    if (!inputArg) {
+        const stepInput = await prompt('Process every Nth frame (Step size)', '1');
+        step = parseInt(stepInput) || 1;
+    }
+    // AI Tracking logic preserved in CLI wrapper...
+    // ...
+    const pipeline = new pipeline_1.AssetPipeline({
+        apiKey: process.env.FAL_KEY,
+        onProgress: (p) => {
+            // You could add a progress bar here
+        }
+    });
+    try {
+        await pipeline.create({
+            input: input,
+            name: projectName,
+            track: useTracking ? track : undefined,
+            depth: useDepth,
+            variants: customVariants || [720, 1080],
+            step: step
+        });
+        console.log(chalk_1.default.bold.green(`\n✅ Project Created Successfully!`));
+        console.log(chalk_1.default.white(`📍 Output: ${projectName}`));
+        console.log(chalk_1.default.white(`📜 Config: scrolltube.json`));
+        console.log(chalk_1.default.cyan(`\nNext: Import the .json into your <ScrollTubeProvider />\n`));
+    }
+    catch (err) {
+        console.error(chalk_1.default.red(`\n❌ Error during pipeline: ${err.message}`));
+        process.exit(1);
+    }
+});
+// NEW UPDATE COMMAND
+program
+    .command('update')
+    .description('Rerun extraction and tracking on an existing project')
+    .argument('<dir>', 'Project directory')
+    .option('-p, --track <text>', 'Additional subject to track')
+    .action(async (dir, opts) => {
+    console.log(chalk_1.default.bold.yellow('\n♻️  ScrollTube Update Pipeline\n'));
+    const projectPath = path.resolve(dir);
+    const configPath = path.join(projectPath, 'scrolltube.json');
+    if (!fs.existsSync(configPath)) {
+        console.error(chalk_1.default.red('❌ Not a valid ScrollTube project directory (missing scrolltube.json).'));
+        process.exit(1);
+    }
+    const config = await fs.readJson(configPath);
+    if (config.version !== pkg.version) {
+        console.warn(chalk_1.default.yellow(`⚠️  Version Mismatch: Project is ${config.version}, CLI is ${pkg.version}`));
+    }
+    console.log(chalk_1.default.red('⚠️  UNDER CONSTRUCTION'));
+    console.log(chalk_1.default.yellow('The "update" command is currently being refactored for the Universal Pipeline.'));
+    console.log(chalk_1.default.dim('Please use "scft create" to regenerate your project for now.\n'));
+    process.exit(0);
+});
+program.parse(process.argv);