scrollcraft 2.0.7 → 2.0.8

package/README.md

@@ -14,20 +14,44 @@ npm install scrollcraft
 
 ---
 
-## Quick Start
+## The Universal Asset Pipeline
 
-Initialize your project:
+ScrollCraft features a **Universal Asset Pipeline** that runs identical logic in both the **CLI** (Node.js) and the **Browser** (ideal for CMS integrations like WordPress).
+
+### 1. CLI Usage (Node.js)
+Transform your video into a ScrollCraft project from your terminal:
 
 ```bash
-# 1. Transform your video into a ScrollCraft project
-# This will extract frames, track the subject, and generate optimized variants and depth maps using cloud AI processing.
+# This will extract frames, track the subject, and generate optimized variants and depth maps.
 npx scft create "your-video.mp4" --name "my-project" --track "apple" --cloud --depth
 ```
 
+### 2. Programmatic Usage (Browser/Node)
+You can also import the pipeline into your own React apps or dashboard:
+
+```javascript
+import { AssetPipeline } from 'scrollcraft/pipeline';
+
+const pipeline = new AssetPipeline({
+  apiKey: process.env.FAL_KEY,
+  onProgress: (p) => console.log(`${p.step}: ${p.percent}%`)
+});
+
+// Returns the project configuration or a ZIP blob
+const project = await pipeline.create({
+  input: videoFile, // Can be a File object or Path
+  name: "my-project",
+  variants: [720, 1080],
+  outputZip: true // Perfect for CMS uploads
+});
+```
+
+---
+
 ```tsx
 // 2. Drop it into your Next.js app
 import project from './my-project/scrollcraft.json';
-import { ScrollCraftProvider, ScrollCraftCanvas, SubjectLayer } from 'scrollcraft';
+import { ScrollCraftProvider, ScrollCraftCanvas, SubjectLayer } from 'scrollcraft/react';
 
 const App = () => (
   <ScrollCraftProvider 
@@ -53,13 +77,13 @@ const App = () => (
 Choose your path based on your role:
 
 ### 👤 For Humans
-- [**Core Architecture**](https://github.com/aleskozelsky/scrollcraft/blob/main/packages/docs/app/docs/architecture/page.md): Understand the state-snapshot engine.
-- [**Asset Pipeline**](https://github.com/aleskozelsky/scrollcraft/blob/main/packages/docs/app/docs/asset-pipeline/page.md): Learn how to use the CLI and AI tracking.
-- [**React Hooks**](https://github.com/aleskozelsky/scrollcraft/blob/main/packages/docs/app/docs/react-integration/page.md): Build custom interactive components.
+- [**Core Architecture**](https://github.com/aleskozelsky/scrollcraft/blob/main/packages/docs/app/architecture/page.md): Understand the state-snapshot engine.
+- [**Asset Pipeline**](https://github.com/aleskozelsky/scrollcraft/blob/main/packages/docs/app/asset-pipeline/page.md): Learn how to use the CLI and AI tracking.
+- [**React Hooks**](https://github.com/aleskozelsky/scrollcraft/blob/main/packages/docs/app/react-integration/page.md): Build custom interactive components.
 
 ### 🤖 For AI Agents
 - [**AGENTS.md**](https://github.com/aleskozelsky/scrollcraft/blob/main/AGENTS.md): Technical standard operating procedures for the repository.
-- [**AI Integration Protocol**](https://github.com/aleskozelsky/scrollcraft/blob/main/packages/docs/app/docs/ai-integration/page.md): How to prompt agents to build scenes for you.
+- [**AI Integration Protocol**](https://github.com/aleskozelsky/scrollcraft/blob/main/packages/docs/app/ai-integration/page.md): How to prompt agents to build scenes for you.
 
 ---
 

package/dist/cli/index.js

@@ -232,8 +232,10 @@ program
     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}`));
-        // In a real implementation, we might offer to upgrade or handle incompatibilities
     }
-    console.log(chalk_1.default.dim('Skeletal update implemented. Continuing in next iteration...'));
+    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);

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/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/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/node-driver.d.ts

@@ -0,0 +1,18 @@
+import { IPipelineDriver, VariantConfig } from './types';
+export declare class NodeDriver implements IPipelineDriver {
+    private ffmpegPath;
+    constructor();
+    readFile(filePath: string): Promise<Uint8Array>;
+    writeFile(filePath: string, data: Uint8Array | string): Promise<void>;
+    mkdir(dirPath: string): Promise<void>;
+    exists(filePath: string): Promise<boolean>;
+    readdir(dirPath: string): Promise<string[]>;
+    remove(filePath: string): Promise<void>;
+    join(...parts: string[]): string;
+    resolve(...parts: string[]): string;
+    extractFrames(videoSource: string, outputDir: string, onProgress?: (percent: number) => void): Promise<void>;
+    processImage(input: Uint8Array | string, config: VariantConfig, options?: {
+        grayscale?: boolean;
+        blur?: number;
+    }): Promise<Uint8Array>;
+}

package/dist/pipeline/types.d.ts

@@ -0,0 +1,43 @@
+export interface PipelineProgress {
+    percent: number;
+    message: string;
+    step: 'initializing' | 'extracting' | 'tracking' | 'depth' | 'processing' | 'saving';
+}
+export interface VariantConfig {
+    id: string;
+    width: number;
+    height: number;
+    media: string;
+    orientation: 'portrait' | 'landscape';
+    aspectRatio: string;
+}
+export interface IPipelineDriver {
+    readFile(path: string): Promise<Uint8Array>;
+    writeFile(path: string, data: Uint8Array | string): Promise<void>;
+    mkdir(path: string): Promise<void>;
+    exists(path: string): Promise<boolean>;
+    readdir(path: string): Promise<string[]>;
+    remove(path: string): Promise<void>;
+    join(...parts: string[]): string;
+    resolve(...parts: string[]): string;
+    extractFrames(videoSource: string | File | Blob, outputDir: string, onProgress?: (percent: number) => void): Promise<void>;
+    processImage(input: Uint8Array | string, config: VariantConfig, options: {
+        grayscale?: boolean;
+        blur?: number;
+    }): Promise<Uint8Array>;
+    zipProject?(outDir: string): Promise<Uint8Array>;
+}
+export interface PipelineOptions {
+    apiKey?: string;
+    proxyUrl?: string;
+    onProgress?: (progress: PipelineProgress) => void;
+}
+export interface CreateCommandOptions {
+    input: string | File | Blob;
+    name: string;
+    track?: string;
+    hasDepth?: boolean;
+    variants: number[] | VariantConfig[];
+    step?: number;
+    outputZip?: boolean;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "scrollcraft",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "description": "ScrollCraft is a web-based tool for scroll-triggered animations.",
   "main": "dist/core/scrollcraft.umd.min.js",
   "module": "dist/core/scrollcraft.umd.min.js",
@@ -10,18 +10,16 @@
       "import": "./dist/core/scrollcraft.umd.min.js",
       "require": "./dist/core/scrollcraft.umd.min.js"
     },
-    "./core": {
-      "types": "./dist/core/index.d.ts",
-      "import": "./dist/core/scrollcraft.umd.min.js",
-      "require": "./dist/core/scrollcraft.umd.min.js"
-    },
     "./react": {
       "types": "./dist/react/index.d.ts",
-      "require": "./dist/react/index.js",
-      "import": "./dist/react/index.js"
+      "import": "./dist/react/index.js",
+      "require": "./dist/react/index.js"
     },
-    "./cli": "./dist/cli/index.js",
-    "./pipeline": "./dist/pipeline/index.js"
+    "./pipeline": {
+      "types": "./dist/pipeline/index.d.ts",
+      "import": "./dist/pipeline/index.js",
+      "require": "./dist/pipeline/index.js"
+    }
   },
   "types": "dist/core/index.d.ts",
   "bin": {
@@ -32,15 +30,15 @@
     "README.md"
   ],
   "scripts": {
-    "build": "npm run sync-readme && npm run build:js && npm run build:types && npm run build:cli",
+    "build": "npm run sync-readme && npm run build:web && npm run build:pipeline",
     "sync-readme": "node -e \"fs.copyFileSync('../../README.md', './README.md')\"",
-    "build:js": "webpack --config webpack.config.js --mode production",
-    "build:types": "tsc --project tsconfig.json --emitDeclarationOnly",
-    "build:cli": "tsc --project tsconfig.cli.json && node scripts/make-executable.cjs",
-    "dev": "concurrently -n JS,CLI,TYP -c \"blue,yellow,magenta\" \"npm:dev:js\" \"npm:dev:cli\" \"npm:dev:types\"",
-    "dev:js": "webpack --config webpack.config.js --mode development --watch",
-    "dev:cli": "tsc --project tsconfig.cli.json --watch --preserveWatchOutput",
-    "dev:types": "tsc --project tsconfig.json --emitDeclarationOnly --watch --preserveWatchOutput"
+    "build:web": "webpack --config webpack.config.js --mode production && npm run build:types:web",
+    "build:types:web": "tsc --project tsconfig.json --emitDeclarationOnly",
+    "build:pipeline": "tsc --project tsconfig.node.json && node scripts/make-executable.cjs",
+    "prepublishOnly": "npm run build",
+    "dev": "concurrently -n WEB,NODE -c \"blue,yellow\" \"npm:dev:web\" \"npm:dev:node\"",
+    "dev:web": "webpack --config webpack.config.js --mode development --watch",
+    "dev:node": "tsc --project tsconfig.node.json --watch --preserveWatchOutput"
   },
   "peerDependencies": {
     "react": ">=16.8.0",