loopwind 0.22.0 → 0.24.0

package/dist/sdk/compiler.js

@@ -1,122 +0,0 @@
-import * as Babel from '@babel/standalone';
-/**
- * Compile JSX template source to plain JavaScript
- *
- * This function transforms JSX syntax to React.createElement calls using Babel.
- * Use this in your admin panel, build pipeline, or anywhere you need to compile
- * user-generated JSX templates before storing or deploying them.
- *
- * **When to use this:**
- * - In admin panels where users edit templates in a code editor
- * - In build pipelines that process templates before deployment
- * - Before storing templates in a database
- *
- * **Benefits:**
- * - Compile JSX at save time instead of runtime
- * - Catch syntax errors early (before production)
- * - Reduce production bundle size (no Babel in production)
- * - Faster rendering (no compilation overhead)
- *
- * @example
- * ```typescript
- * // In your admin panel API
- * import { compileTemplate } from 'loopwind/sdk/compiler';
- *
- * export async function POST(req: Request) {
- *   const { templateId, jsxCode } = await req.json();
- *
- *   try {
- *     // Compile JSX to JavaScript
- *     const compiled = compileTemplate(jsxCode);
- *
- *     // Save compiled version to database
- *     await db.templates.update(templateId, {
- *       sourceCode: compiled,
- *       updatedAt: new Date()
- *     });
- *
- *     return Response.json({ success: true });
- *   } catch (error) {
- *     return Response.json({
- *       error: 'Compilation failed',
- *       message: error.message
- *     }, { status: 400 });
- *   }
- * }
- * ```
- *
- * @example
- * ```typescript
- * // Input JSX
- * const jsxSource = `
- * export const meta = {
- *   name: 'card',
- *   size: { width: 1200, height: 630 }
- * };
- *
- * export default ({ tw, title }) => (
- *   <div style={tw('flex items-center justify-center w-full h-full bg-blue-500')}>
- *     <h1 style={tw('text-6xl font-bold text-white')}>{title}</h1>
- *   </div>
- * );
- * `;
- *
- * // Compile to plain JavaScript
- * const compiled = compileTemplate(jsxSource);
- *
- * // compiled now contains React.createElement calls
- * // You can safely use this with defineTemplateFromSource in production
- * ```
- *
- * @param jsxSource - Template source code containing JSX syntax
- * @returns Compiled JavaScript with React.createElement calls
- * @throws Error if the JSX syntax is invalid or compilation fails
- */
-export function compileTemplate(jsxSource) {
-    try {
-        const result = Babel.transform(jsxSource, {
-            presets: ['react'],
-            filename: 'template.tsx',
-        });
-        if (!result.code) {
-            throw new Error('Babel compilation returned empty code');
-        }
-        return result.code;
-    }
-    catch (error) {
-        throw new Error(`Failed to compile JSX template: ${error instanceof Error ? error.message : String(error)}`);
-    }
-}
-/**
- * Check if source code contains JSX syntax
- *
- * This is a simple heuristic check that looks for common JSX patterns.
- * Use this to determine if source code needs compilation.
- *
- * @example
- * ```typescript
- * const code1 = '<div>Hello</div>';
- * const code2 = 'React.createElement("div", null, "Hello")';
- *
- * containsJSX(code1); // true
- * containsJSX(code2); // false
- * ```
- *
- * @param sourceCode - Source code to check
- * @returns true if the code appears to contain JSX
- */
-export function containsJSX(sourceCode) {
-    // Look for JSX-like patterns:
-    // - Opening tags: <div, <Component
-    // - Self-closing tags: <div />, <Component />
-    // - JSX fragments: <>, </>
-    const jsxPatterns = [
-        /<[A-Za-z][A-Za-z0-9]*\s/, // <div , <Component
-        /<[A-Za-z][A-Za-z0-9]*>/, // <div>, <Component>
-        /<[A-Za-z][A-Za-z0-9]*\s*\/>/, // <div/>, <Component />
-        /<>\s*/, // Fragment opening
-        /<\/>\s*/, // Fragment closing
-    ];
-    return jsxPatterns.some((pattern) => pattern.test(sourceCode));
-}
-//# sourceMappingURL=compiler.js.map

package/dist/sdk/compiler.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"compiler.js","sourceRoot":"","sources":["../../src/sdk/compiler.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,mBAAmB,CAAC;AAE3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwEG;AACH,MAAM,UAAU,eAAe,CAAC,SAAiB;IAC/C,IAAI,CAAC;QACH,MAAM,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,SAAS,EAAE;YACxC,OAAO,EAAE,CAAC,OAAO,CAAC;YAClB,QAAQ,EAAE,cAAc;SACzB,CAAC,CAAC;QAEH,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;YACjB,MAAM,IAAI,KAAK,CAAC,uCAAuC,CAAC,CAAC;QAC3D,CAAC;QAED,OAAO,MAAM,CAAC,IAAI,CAAC;IACrB,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,MAAM,IAAI,KAAK,CACb,mCAAmC,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAC5F,CAAC;IACJ,CAAC;AACH,CAAC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,WAAW,CAAC,UAAkB;IAC5C,8BAA8B;IAC9B,mCAAmC;IACnC,8CAA8C;IAC9C,2BAA2B;IAC3B,MAAM,WAAW,GAAG;QAClB,yBAAyB,EAAE,oBAAoB;QAC/C,wBAAwB,EAAE,qBAAqB;QAC/C,6BAA6B,EAAE,wBAAwB;QACvD,OAAO,EAAE,mBAAmB;QAC5B,SAAS,EAAE,mBAAmB;KAC/B,CAAC;IAEF,OAAO,WAAW,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;AACjE,CAAC"}

package/dist/sdk/index.d.ts

@@ -1,62 +0,0 @@
-import type { TemplateDefinition, StyleConfig } from './template.js';
-export { defineTemplate, defineTemplateFromSource, defineTemplateFromSchema } from './template.js';
-export type { TemplateDefinition, StyleConfig, TemplateSchema, SchemaElement } from './template.js';
-export { previewVideo, VideoPreview } from './preview.js';
-export type { PreviewFrames, VideoPreviewProps } from './preview.js';
-/**
- * Render options for image generation
- */
-export interface RenderImageOptions {
-    format?: 'png' | 'jpeg' | 'jpg' | 'webp' | 'svg';
-    quality?: number;
-    config?: StyleConfig;
-}
-/**
- * Render options for video generation
- */
-export interface RenderVideoOptions {
-    quality?: number;
-    onProgress?: (frame: number, total: number, phase?: 'svg' | 'encode') => void;
-    config?: StyleConfig;
-}
-/**
- * Render an image from a template definition
- *
- * @example
- * ```typescript
- * const template = defineTemplate({
- *   name: 'og-image',
- *   size: { width: 1200, height: 630 },
- *   render: ({ tw, title }) => <div style={tw('flex')}>{title}</div>
- * });
- *
- * const png = await renderImage(template, { title: 'Hello World' });
- * // Returns Buffer containing PNG data
- * ```
- */
-export declare function renderImage<TProps = any>(template: TemplateDefinition<TProps>, props: TProps, options?: RenderImageOptions): Promise<Buffer>;
-/**
- * Render a video from a template definition
- *
- * @example
- * ```typescript
- * const template = defineTemplate({
- *   name: 'intro-video',
- *   type: 'video',
- *   size: { width: 1920, height: 1080 },
- *   video: { fps: 30, duration: 3 },
- *   render: ({ tw, progress, title }) => (
- *     <div style={tw('flex items-center justify-center w-full h-full bg-black')}>
- *       <h1 style={{ ...tw('text-8xl font-bold text-white'), opacity: progress }}>
- *         {title}
- *       </h1>
- *     </div>
- *   )
- * });
- *
- * const mp4 = await renderVideo(template, { title: 'Hello' });
- * // Returns Buffer containing MP4 data
- * ```
- */
-export declare function renderVideo<TProps = any>(template: TemplateDefinition<TProps>, props: TProps, options?: RenderVideoOptions): Promise<Buffer>;
-//# sourceMappingURL=index.d.ts.map

package/dist/sdk/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/sdk/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAQrE,OAAO,EAAE,cAAc,EAAE,wBAAwB,EAAE,wBAAwB,EAAE,MAAM,eAAe,CAAC;AACnG,YAAY,EAAE,kBAAkB,EAAE,WAAW,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACpG,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC1D,YAAY,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAErE;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,CAAC;IACjD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,KAAK,GAAG,QAAQ,KAAK,IAAI,CAAC;IAC9E,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAsB,WAAW,CAAC,MAAM,GAAG,GAAG,EAC5C,QAAQ,EAAE,kBAAkB,CAAC,MAAM,CAAC,EACpC,KAAK,EAAE,MAAM,EACb,OAAO,GAAE,kBAAuB,GAC/B,OAAO,CAAC,MAAM,CAAC,CAoDjB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAsB,WAAW,CAAC,MAAM,GAAG,GAAG,EAC5C,QAAQ,EAAE,kBAAkB,CAAC,MAAM,CAAC,EACpC,KAAK,EAAE,MAAM,EACb,OAAO,GAAE,kBAAuB,GAC/B,OAAO,CAAC,MAAM,CAAC,CA+CjB"}

package/dist/sdk/index.js

@@ -1,141 +0,0 @@
-import { renderToSVG, renderToPNG, renderToJPEG, renderToWebP } from '../lib/renderer.js';
-import { templateToMeta } from './template.js';
-import { renderVideo as renderVideoInternal } from '../lib/video-renderer.js';
-import fs from 'fs/promises';
-import path from 'path';
-import os from 'os';
-export { defineTemplate, defineTemplateFromSource, defineTemplateFromSchema } from './template.js';
-export { previewVideo, VideoPreview } from './preview.js';
-/**
- * Render an image from a template definition
- *
- * @example
- * ```typescript
- * const template = defineTemplate({
- *   name: 'og-image',
- *   size: { width: 1200, height: 630 },
- *   render: ({ tw, title }) => <div style={tw('flex')}>{title}</div>
- * });
- *
- * const png = await renderImage(template, { title: 'Hello World' });
- * // Returns Buffer containing PNG data
- * ```
- */
-export async function renderImage(template, props, options = {}) {
-    const { format = 'png', quality = 92, config } = options;
-    const meta = templateToMeta(template);
-    if (meta.type === 'video') {
-        throw new Error('Cannot render video template as image. Use renderVideo() instead.');
-    }
-    // Save template to temp file so we can use the existing renderer
-    const tempDir = await fs.mkdtemp(path.join(os.tmpdir(), 'loopwind-sdk-'));
-    const templatePath = path.join(tempDir, 'template.tsx');
-    try {
-        // Write template component with embedded meta
-        const templateContent = `import React from 'react';
-
-const h = React.createElement;
-
-export const meta = ${JSON.stringify(meta, null, 2)};
-
-export default ${template.render.toString()};`;
-        await fs.writeFile(templatePath, templateContent);
-        // Merge configs: options.config overrides template.config (deep merge for colors/fonts)
-        const mergedConfig = {
-            ...template.config,
-            ...config,
-            colors: { ...template.config?.colors, ...config?.colors },
-            fonts: { ...template.config?.fonts, ...config?.fonts },
-        };
-        // Use existing renderer and pass config directly (no filesystem writes!)
-        // Pass absolute template path instead of template name
-        if (format === 'svg') {
-            const svg = await renderToSVG(templatePath, props, { config: mergedConfig });
-            return Buffer.from(svg);
-        }
-        else if (format === 'jpeg' || format === 'jpg') {
-            const buffer = await renderToJPEG(templatePath, props, { quality, config: mergedConfig });
-            return buffer;
-        }
-        else if (format === 'webp') {
-            const buffer = await renderToWebP(templatePath, props, { config: mergedConfig });
-            // Note: renderToWebP doesn't take quality param, uses fixed 90
-            return buffer;
-        }
-        else {
-            // PNG
-            const buffer = await renderToPNG(templatePath, props, { config: mergedConfig });
-            return buffer;
-        }
-    }
-    finally {
-        // Cleanup temp files
-        await fs.rm(tempDir, { recursive: true, force: true });
-    }
-}
-/**
- * Render a video from a template definition
- *
- * @example
- * ```typescript
- * const template = defineTemplate({
- *   name: 'intro-video',
- *   type: 'video',
- *   size: { width: 1920, height: 1080 },
- *   video: { fps: 30, duration: 3 },
- *   render: ({ tw, progress, title }) => (
- *     <div style={tw('flex items-center justify-center w-full h-full bg-black')}>
- *       <h1 style={{ ...tw('text-8xl font-bold text-white'), opacity: progress }}>
- *         {title}
- *       </h1>
- *     </div>
- *   )
- * });
- *
- * const mp4 = await renderVideo(template, { title: 'Hello' });
- * // Returns Buffer containing MP4 data
- * ```
- */
-export async function renderVideo(template, props, options = {}) {
-    const { config, ...renderOptions } = options;
-    const meta = templateToMeta(template);
-    if (meta.type !== 'video') {
-        throw new Error('Cannot render image template as video. Use renderImage() instead.');
-    }
-    if (!meta.video) {
-        throw new Error('Template is missing video metadata (fps, duration)');
-    }
-    // Save template to temp file so we can use the existing renderer
-    const tempDir = await fs.mkdtemp(path.join(os.tmpdir(), 'loopwind-sdk-'));
-    const templatePath = path.join(tempDir, 'template.tsx');
-    const outputPath = path.join(tempDir, 'output.mp4');
-    try {
-        // Write template component with embedded meta
-        const templateContent = `import React from 'react';
-
-const h = React.createElement;
-
-export const meta = ${JSON.stringify(meta, null, 2)};
-
-export default ${template.render.toString()};`;
-        await fs.writeFile(templatePath, templateContent);
-        // Merge configs: options.config overrides template.config (deep merge for colors/fonts)
-        const mergedConfig = {
-            ...template.config,
-            ...config,
-            colors: { ...template.config?.colors, ...config?.colors },
-            fonts: { ...template.config?.fonts, ...config?.fonts },
-        };
-        // Use existing video renderer and pass config directly (no filesystem writes!)
-        // Pass absolute template path instead of template name
-        await renderVideoInternal(templatePath, props, outputPath, { ...renderOptions, config: mergedConfig });
-        // Read the generated MP4
-        const buffer = await fs.readFile(outputPath);
-        return buffer;
-    }
-    finally {
-        // Cleanup temp files
-        await fs.rm(tempDir, { recursive: true, force: true });
-    }
-}
-//# sourceMappingURL=index.js.map

package/dist/sdk/index.js.map

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

package/dist/sdk/preview.d.ts

@@ -1,65 +0,0 @@
-import React from 'react';
-import type { TemplateDefinition, StyleConfig } from './template.js';
-/**
- * Pre-rendered video frames
- */
-export interface PreviewFrames {
-    frames: string[];
-    meta: {
-        name: string;
-        width: number;
-        height: number;
-        fps: number;
-        duration: number;
-        totalFrames: number;
-    };
-}
-/**
- * Pre-render all frames of a video template for preview
- * Call this on the server or at build time
- *
- * @example
- * ```typescript
- * const template = defineTemplate({
- *   name: 'intro',
- *   type: 'video',
- *   size: { width: 1920, height: 1080 },
- *   video: { fps: 30, duration: 3 },
- *   render: ({ tw, progress }) => <div style={tw('flex')}>Frame</div>
- * });
- *
- * const frames = await previewVideo(template, { title: 'Hello' });
- * // Pass to <VideoPreview frames={frames} />
- * ```
- */
-export declare function previewVideo<TProps = any>(template: TemplateDefinition<TProps>, props: TProps, options?: {
-    config?: StyleConfig;
-    format?: 'svg' | 'data-url';
-}): Promise<PreviewFrames>;
-/**
- * Props for VideoPreview component
- */
-export interface VideoPreviewProps {
-    frames: PreviewFrames;
-    autoPlay?: boolean;
-    loop?: boolean;
-    controls?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-    onFrameChange?: (frame: number) => void;
-}
-/**
- * Video preview component that displays pre-rendered frames
- * Works in browser - no Node.js dependencies
- *
- * @example
- * ```tsx
- * // Server-side (Next.js, etc.)
- * const frames = await previewVideo(template, props);
- *
- * // Client-side
- * <VideoPreview frames={frames} autoPlay loop />
- * ```
- */
-export declare function VideoPreview({ frames: previewFrames, autoPlay, loop, controls, className, style, onFrameChange, }: VideoPreviewProps): React.JSX.Element;
-//# sourceMappingURL=preview.d.ts.map

package/dist/sdk/preview.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"preview.d.ts","sourceRoot":"","sources":["../../src/sdk/preview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAMrE;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,IAAI,EAAE;QACJ,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACf,GAAG,EAAE,MAAM,CAAC;QACZ,QAAQ,EAAE,MAAM,CAAC;QACjB,WAAW,EAAE,MAAM,CAAC;KACrB,CAAC;CACH;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAsB,YAAY,CAAC,MAAM,GAAG,GAAG,EAC7C,QAAQ,EAAE,kBAAkB,CAAC,MAAM,CAAC,EACpC,KAAK,EAAE,MAAM,EACb,OAAO,GAAE;IAAE,MAAM,CAAC,EAAE,WAAW,CAAC;IAAC,MAAM,CAAC,EAAE,KAAK,GAAG,UAAU,CAAA;CAAO,GAClE,OAAO,CAAC,aAAa,CAAC,CAwExB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EAAE,aAAa,EACrB,QAAe,EACf,IAAW,EACX,QAAe,EACf,SAAS,EACT,KAAK,EACL,aAAa,GACd,EAAE,iBAAiB,qBA2PnB"}

package/dist/sdk/preview.js

@@ -1,262 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { renderToSVG } from '../lib/renderer.js';
-import { templateToMeta } from './template.js';
-import fs from 'fs/promises';
-import path from 'path';
-import os from 'os';
-/**
- * Pre-render all frames of a video template for preview
- * Call this on the server or at build time
- *
- * @example
- * ```typescript
- * const template = defineTemplate({
- *   name: 'intro',
- *   type: 'video',
- *   size: { width: 1920, height: 1080 },
- *   video: { fps: 30, duration: 3 },
- *   render: ({ tw, progress }) => <div style={tw('flex')}>Frame</div>
- * });
- *
- * const frames = await previewVideo(template, { title: 'Hello' });
- * // Pass to <VideoPreview frames={frames} />
- * ```
- */
-export async function previewVideo(template, props, options = {}) {
-    const { config, format = 'svg' } = options;
-    const meta = templateToMeta(template);
-    if (meta.type !== 'video') {
-        throw new Error('Cannot preview image template. Only video templates are supported.');
-    }
-    if (!meta.video) {
-        throw new Error('Template is missing video metadata (fps, duration)');
-    }
-    const { fps, duration } = meta.video;
-    const totalFrames = Math.floor(fps * duration);
-    const frames = [];
-    // Save template to temp file so we can use the existing renderer
-    const tempDir = await fs.mkdtemp(path.join(os.tmpdir(), 'loopwind-preview-'));
-    const templatePath = path.join(tempDir, 'template.tsx');
-    try {
-        // Write template component with embedded meta
-        const templateContent = `import React from 'react';
-
-const h = React.createElement;
-
-export const meta = ${JSON.stringify(meta, null, 2)};
-
-export default ${template.render.toString()};`;
-        await fs.writeFile(templatePath, templateContent);
-        // Merge configs
-        const mergedConfig = {
-            ...template.config,
-            ...config,
-            colors: { ...template.config?.colors, ...config?.colors },
-            fonts: { ...template.config?.fonts, ...config?.fonts },
-        };
-        // Render each frame
-        for (let frame = 0; frame < totalFrames; frame++) {
-            const progress = frame / totalFrames;
-            const svg = await renderToSVG(templatePath, { ...props, frame, progress }, { config: mergedConfig });
-            if (format === 'data-url') {
-                // Convert SVG to data URL for easier browser usage
-                const dataUrl = `data:image/svg+xml;base64,${Buffer.from(svg).toString('base64')}`;
-                frames.push(dataUrl);
-            }
-            else {
-                frames.push(svg);
-            }
-        }
-        return {
-            frames,
-            meta: {
-                name: meta.name,
-                width: meta.size.width,
-                height: meta.size.height,
-                fps,
-                duration,
-                totalFrames,
-            },
-        };
-    }
-    finally {
-        // Cleanup temp files
-        await fs.rm(tempDir, { recursive: true, force: true });
-    }
-}
-/**
- * Video preview component that displays pre-rendered frames
- * Works in browser - no Node.js dependencies
- *
- * @example
- * ```tsx
- * // Server-side (Next.js, etc.)
- * const frames = await previewVideo(template, props);
- *
- * // Client-side
- * <VideoPreview frames={frames} autoPlay loop />
- * ```
- */
-export function VideoPreview({ frames: previewFrames, autoPlay = true, loop = true, controls = true, className, style, onFrameChange, }) {
-    const [frame, setFrame] = useState(0);
-    const [isPlaying, setIsPlaying] = useState(autoPlay);
-    const [isLooping, setIsLooping] = useState(loop);
-    const animationRef = useRef(null);
-    const lastTimeRef = useRef(0);
-    const { frames, meta } = previewFrames;
-    const { fps, duration, totalFrames, width, height } = meta;
-    const durationMs = duration * 1000;
-    // Notify parent of frame changes
-    useEffect(() => {
-        if (onFrameChange) {
-            onFrameChange(Math.floor(frame));
-        }
-    }, [frame, onFrameChange]);
-    // Playback loop
-    useEffect(() => {
-        if (!isPlaying) {
-            if (animationRef.current) {
-                cancelAnimationFrame(animationRef.current);
-                animationRef.current = null;
-            }
-            return;
-        }
-        lastTimeRef.current = performance.now();
-        const animate = (time) => {
-            const delta = time - lastTimeRef.current;
-            lastTimeRef.current = time;
-            setFrame((prev) => {
-                const increment = (delta / 1000) * fps;
-                const next = prev + increment;
-                if (next >= totalFrames) {
-                    if (isLooping) {
-                        return next % totalFrames;
-                    }
-                    else {
-                        setIsPlaying(false);
-                        return totalFrames - 1;
-                    }
-                }
-                return next;
-            });
-            animationRef.current = requestAnimationFrame(animate);
-        };
-        animationRef.current = requestAnimationFrame(animate);
-        return () => {
-            if (animationRef.current) {
-                cancelAnimationFrame(animationRef.current);
-            }
-        };
-    }, [isPlaying, fps, totalFrames, isLooping]);
-    const currentMs = (frame / totalFrames) * durationMs;
-    const progress = (frame / totalFrames) * 100;
-    const frameNum = Math.floor(frame);
-    const handleScrub = (e) => {
-        const value = parseFloat(e.target.value);
-        setFrame((value / 100) * totalFrames);
-    };
-    const handlePlayPause = () => {
-        if (!isPlaying && frame >= totalFrames - 1) {
-            setFrame(0);
-        }
-        setIsPlaying(!isPlaying);
-    };
-    const handleRestart = () => {
-        setFrame(0);
-        setIsPlaying(true);
-    };
-    const handleStepBackward = () => {
-        setIsPlaying(false);
-        setFrame((prev) => Math.max(0, prev - 1));
-    };
-    const handleStepForward = () => {
-        setIsPlaying(false);
-        setFrame((prev) => Math.min(totalFrames - 1, prev + 1));
-    };
-    return (React.createElement("div", { className: className, style: {
-            display: 'inline-flex',
-            flexDirection: 'column',
-            gap: '0.75rem',
-            ...style,
-        } },
-        React.createElement("div", { style: {
-                position: 'relative',
-                width,
-                height,
-                overflow: 'hidden',
-                borderRadius: '0.5rem',
-                boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
-            } }, frames[frameNum]?.startsWith('data:') ? (React.createElement("img", { src: frames[frameNum], alt: `Frame ${frameNum}`, style: { display: 'block', width: '100%', height: '100%' } })) : (React.createElement("div", { dangerouslySetInnerHTML: { __html: frames[frameNum] || '' }, style: { width: '100%', height: '100%' } }))),
-        controls && (React.createElement("div", { style: {
-                display: 'flex',
-                flexDirection: 'column',
-                gap: '0.5rem',
-                width,
-            } },
-            React.createElement("input", { type: "range", min: "0", max: "100", step: "0.1", value: progress, onChange: handleScrub, style: {
-                    width: '100%',
-                    height: '6px',
-                    background: `linear-gradient(to right, #7c3aed ${progress}%, #d1d5db ${progress}%)`,
-                    borderRadius: '3px',
-                    cursor: 'pointer',
-                    WebkitAppearance: 'none',
-                    appearance: 'none',
-                } }),
-            React.createElement("div", { style: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                    fontSize: '0.875rem',
-                } },
-                React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '0.5rem' } },
-                    React.createElement("button", { onClick: handleRestart, title: "Restart", style: {
-                            background: 'transparent',
-                            border: 'none',
-                            cursor: 'pointer',
-                            padding: '0.25rem',
-                            fontSize: '1.25rem',
-                        } }, "\u23EE"),
-                    React.createElement("button", { onClick: handleStepBackward, title: "Previous frame", style: {
-                            background: 'transparent',
-                            border: 'none',
-                            cursor: 'pointer',
-                            padding: '0.25rem',
-                            fontSize: '1.25rem',
-                        } }, "\u23EA"),
-                    React.createElement("button", { onClick: handlePlayPause, style: {
-                            background: '#7c3aed',
-                            border: 'none',
-                            color: 'white',
-                            cursor: 'pointer',
-                            padding: '0.5rem 0.75rem',
-                            borderRadius: '0.375rem',
-                            fontSize: '1rem',
-                            minWidth: '3rem',
-                        } }, isPlaying ? '⏸' : '▶'),
-                    React.createElement("button", { onClick: handleStepForward, title: "Next frame", style: {
-                            background: 'transparent',
-                            border: 'none',
-                            cursor: 'pointer',
-                            padding: '0.25rem',
-                            fontSize: '1.25rem',
-                        } }, "\u23E9"),
-                    React.createElement("button", { onClick: () => setIsLooping(!isLooping), title: isLooping ? 'Loop enabled' : 'Loop disabled', style: {
-                            background: isLooping ? '#e5e7eb' : 'transparent',
-                            border: '1px solid #d1d5db',
-                            cursor: 'pointer',
-                            padding: '0.25rem 0.5rem',
-                            borderRadius: '0.375rem',
-                            fontSize: '0.875rem',
-                        } }, "\uD83D\uDD01")),
-                React.createElement("div", { style: { fontFamily: 'monospace', color: '#6b7280' } },
-                    Math.floor(currentMs),
-                    "ms / ",
-                    Math.floor(durationMs),
-                    "ms",
-                    React.createElement("span", { style: { marginLeft: '0.5rem' } },
-                        "Frame ",
-                        frameNum,
-                        " / ",
-                        totalFrames)))))));
-}
-//# sourceMappingURL=preview.js.map