loopwind 0.18.1 → 0.20.1

package/dist/sdk/preview.js

@@ -0,0 +1,262 @@
+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

package/dist/sdk/preview.js.map

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

package/dist/sdk/template.d.ts

@@ -15,25 +15,6 @@ export interface TemplateDefinition<TProps = any> {
     config?: StyleConfig;
     render: (props: TProps & TemplateProps) => JSX.Element;
 }
-/**
- * Define a template programmatically for use in serverless environments
- *
- * @example
- * ```typescript
- * const ogImage = defineTemplate({
- *   name: 'og-image',
- *   type: 'image',
- *   size: { width: 1200, height: 630 },
- *   render: ({ tw, title, description }) => (
- *     <div style={tw('flex flex-col w-full h-full bg-white p-12')}>
- *       <h1 style={tw('text-6xl font-bold')}>{title}</h1>
- *       <p style={tw('text-2xl text-gray-600')}>{description}</p>
- *     </div>
- *   )
- * });
- * ```
- */
-export declare function defineTemplate<TProps = any>(definition: TemplateDefinition<TProps>): TemplateDefinition<TProps>;
 /**
  * Convert a template definition to template metadata
  * @internal
@@ -42,27 +23,69 @@ export declare function templateToMeta(template: TemplateDefinition): TemplateMe
 /**
  * Define a template from an imported template file
  *
- * Allows reusing file-based templates from _loopwind/templates/ in the SDK
+ * The standard way to create templates in loopwind. Import a template file
+ * and pass it to defineTemplate() with optional config overrides.
  *
  * @example
  * ```typescript
- * import * as videoIntro from './_loopwind/templates/video-intro/template';
+ * import * as ogImage from './_loopwind/templates/og-image/template';
  *
- * const template = defineTemplateFromFile(videoIntro, {
+ * const template = defineTemplate(ogImage, {
  *   config: {
  *     colors: { primary: '#ff0000' }
  *   }
  * });
  *
- * const mp4 = await renderVideo(template, { version: '2.0.0' });
+ * const png = await renderImage(template, { title: 'Hello' });
  * ```
  */
-export declare function defineTemplateFromFile<TProps = any>(templateModule: {
+export declare function defineTemplate<TProps = any>(templateModule: {
     meta: TemplateMeta;
     default: (props: TProps & TemplateProps) => JSX.Element;
 }, options?: {
     config?: StyleConfig;
 }): TemplateDefinition<TProps>;
+/**
+ * Define a template from a source code string
+ *
+ * **IMPORTANT:** This function expects **pre-compiled JavaScript** with React.createElement
+ * calls. If you have JSX source code, compile it first using `compileTemplate()` from
+ * 'loopwind/sdk/compiler'.
+ *
+ * **WARNING:** This function evaluates code strings using `new Function()`.
+ * Only use with **trusted** template sources. Never use with user input from
+ * untrusted sources as it can execute arbitrary code.
+ *
+ * **Recommended workflow:**
+ * 1. In your admin panel: Use `compileTemplate()` to transform JSX → JavaScript
+ * 2. Store the compiled JavaScript in your database
+ * 3. In production: Load compiled code and pass to `defineTemplateFromSource()`
+ *
+ * This approach keeps @babel/standalone out of your production bundle!
+ *
+ * @example
+ * ```typescript
+ * // Admin panel: Compile and save
+ * import { compileTemplate } from 'loopwind/sdk/compiler';
+ *
+ * const jsxCode = getUserCodeFromEditor(); // Contains JSX
+ * const compiled = compileTemplate(jsxCode);
+ * await db.templates.save({ code: compiled });
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Production API: Load and render
+ * import { defineTemplateFromSource, renderImage } from 'loopwind/sdk';
+ *
+ * const template = await db.templates.findById(id);
+ * const templateDef = defineTemplateFromSource(template.code, {
+ *   config: { colors: { primary: '#3b82f6' } }
+ * });
+ *
+ * const png = await renderImage(templateDef, { title: 'Hello' });
+ * ```
+ */
 export declare function defineTemplateFromSource<TProps = any>(sourceCode: string, options?: {
     config?: StyleConfig;
 }): TemplateDefinition<TProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"template.d.ts","sourceRoot":"","sources":["../../src/sdk/template.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACxE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAKvD,MAAM,MAAM,WAAW,GAAG,YAAY,CAAC;AAEvC,MAAM,WAAW,kBAAkB,CAAC,MAAM,GAAG,GAAG;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACxC,KAAK,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,KAAK,GAAG,CAAC,OAAO,CAAC;CACxD;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,cAAc,CAAC,MAAM,GAAG,GAAG,EACzC,UAAU,EAAE,kBAAkB,CAAC,MAAM,CAAC,GACrC,kBAAkB,CAAC,MAAM,CAAC,CAyB5B;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,kBAAkB,GAAG,YAAY,CASzE;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,sBAAsB,CAAC,MAAM,GAAG,GAAG,EACjD,cAAc,EAAE;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,KAAK,GAAG,CAAC,OAAO,CAAA;CAAE,EAC/F,OAAO,GAAE;IAAE,MAAM,CAAC,EAAE,WAAW,CAAA;CAAO,GACrC,kBAAkB,CAAC,MAAM,CAAC,CAW5B;AAuDD,wBAAgB,wBAAwB,CAAC,MAAM,GAAG,GAAG,EACnD,UAAU,EAAE,MAAM,EAClB,OAAO,GAAE;IAAE,MAAM,CAAC,EAAE,WAAW,CAAA;CAAO,GACrC,kBAAkB,CAAC,MAAM,CAAC,CAmC5B;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,KAAK,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,KAAK,CAAC;IAC7E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACxC,KAAK,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,aAAa,EAAE,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,wBAAgB,wBAAwB,CAAC,MAAM,GAAG,GAAG,EACnD,MAAM,EAAE,cAAc,GACrB,kBAAkB,CAAC,MAAM,CAAC,CA+D5B"}
+{"version":3,"file":"template.d.ts","sourceRoot":"","sources":["../../src/sdk/template.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACxE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAIvD,MAAM,MAAM,WAAW,GAAG,YAAY,CAAC;AAEvC,MAAM,WAAW,kBAAkB,CAAC,MAAM,GAAG,GAAG;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACxC,KAAK,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,KAAK,GAAG,CAAC,OAAO,CAAC;CACxD;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,kBAAkB,GAAG,YAAY,CASzE;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,cAAc,CAAC,MAAM,GAAG,GAAG,EACzC,cAAc,EAAE;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,KAAK,GAAG,CAAC,OAAO,CAAA;CAAE,EAC/F,OAAO,GAAE;IAAE,MAAM,CAAC,EAAE,WAAW,CAAA;CAAO,GACrC,kBAAkB,CAAC,MAAM,CAAC,CA0B5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,wBAAgB,wBAAwB,CAAC,MAAM,GAAG,GAAG,EACnD,UAAU,EAAE,MAAM,EAClB,OAAO,GAAE;IAAE,MAAM,CAAC,EAAE,WAAW,CAAA;CAAO,GACrC,kBAAkB,CAAC,MAAM,CAAC,CAgC5B;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,KAAK,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,KAAK,CAAC;IAC7E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACxC,KAAK,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,aAAa,EAAE,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,wBAAgB,wBAAwB,CAAC,MAAM,GAAG,GAAG,EACnD,MAAM,EAAE,cAAc,GACrB,kBAAkB,CAAC,MAAM,CAAC,CAkE5B"}

package/dist/sdk/template.js

@@ -1,44 +1,4 @@
 import React from 'react';
-import * as Babel from '@babel/standalone';
-/**
- * Define a template programmatically for use in serverless environments
- *
- * @example
- * ```typescript
- * const ogImage = defineTemplate({
- *   name: 'og-image',
- *   type: 'image',
- *   size: { width: 1200, height: 630 },
- *   render: ({ tw, title, description }) => (
- *     <div style={tw('flex flex-col w-full h-full bg-white p-12')}>
- *       <h1 style={tw('text-6xl font-bold')}>{title}</h1>
- *       <p style={tw('text-2xl text-gray-600')}>{description}</p>
- *     </div>
- *   )
- * });
- * ```
- */
-export function defineTemplate(definition) {
-    // Validate definition
-    if (!definition.name) {
-        throw new Error('Template definition must have a name');
-    }
-    if (!definition.size || !definition.size.width || !definition.size.height) {
-        throw new Error('Template definition must have a size with width and height');
-    }
-    if (!definition.render || typeof definition.render !== 'function') {
-        throw new Error('Template definition must have a render function');
-    }
-    // Set defaults
-    const type = definition.type || 'image';
-    if (type === 'video' && !definition.video) {
-        throw new Error('Video templates must have video metadata (fps, duration)');
-    }
-    return {
-        ...definition,
-        type,
-    };
-}
 /**
  * Convert a template definition to template metadata
  * @internal
@@ -56,93 +16,91 @@ export function templateToMeta(template) {
 /**
  * Define a template from an imported template file
  *
- * Allows reusing file-based templates from _loopwind/templates/ in the SDK
+ * The standard way to create templates in loopwind. Import a template file
+ * and pass it to defineTemplate() with optional config overrides.
  *
  * @example
  * ```typescript
- * import * as videoIntro from './_loopwind/templates/video-intro/template';
+ * import * as ogImage from './_loopwind/templates/og-image/template';
  *
- * const template = defineTemplateFromFile(videoIntro, {
+ * const template = defineTemplate(ogImage, {
  *   config: {
  *     colors: { primary: '#ff0000' }
  *   }
  * });
  *
- * const mp4 = await renderVideo(template, { version: '2.0.0' });
+ * const png = await renderImage(template, { title: 'Hello' });
  * ```
  */
-export function defineTemplateFromFile(templateModule, options = {}) {
+export function defineTemplate(templateModule, options = {}) {
     const { meta, default: render } = templateModule;
-    return defineTemplate({
+    // Validate meta
+    if (!meta.name) {
+        throw new Error('Template meta must have a name');
+    }
+    if (!meta.size || !meta.size.width || !meta.size.height) {
+        throw new Error('Template meta must have a size with width and height');
+    }
+    const type = meta.type || 'image';
+    if (type === 'video' && !meta.video) {
+        throw new Error('Video templates must have video metadata (fps, duration)');
+    }
+    return {
         name: meta.name,
-        type: meta.type,
+        type: type,
         size: meta.size,
         video: meta.video,
         config: options.config,
         render,
-    });
+    };
 }
 /**
  * Define a template from a source code string
  *
+ * **IMPORTANT:** This function expects **pre-compiled JavaScript** with React.createElement
+ * calls. If you have JSX source code, compile it first using `compileTemplate()` from
+ * 'loopwind/sdk/compiler'.
+ *
  * **WARNING:** This function evaluates code strings using `new Function()`.
  * Only use with **trusted** template sources. Never use with user input from
  * untrusted sources as it can execute arbitrary code.
  *
- * Perfect for:
- * - Templates stored in a database (admin-created only)
- * - Templates from a trusted CMS
- * - Code editor features where templates are validated
+ * **Recommended workflow:**
+ * 1. In your admin panel: Use `compileTemplate()` to transform JSX → JavaScript
+ * 2. Store the compiled JavaScript in your database
+ * 3. In production: Load compiled code and pass to `defineTemplateFromSource()`
+ *
+ * This approach keeps @babel/standalone out of your production bundle!
  *
  * @example
  * ```typescript
- * const templateSource = `
- * export const meta = {
- *   name: 'user-template',
- *   type: 'image',
- *   size: { width: 1200, height: 630 }
- * };
+ * // Admin panel: Compile and save
+ * import { compileTemplate } from 'loopwind/sdk/compiler';
  *
- * export default ({ tw, title }) => {
- *   const h = React.createElement;
- *   return h('div', { style: tw('flex w-full h-full bg-blue-500 p-12') },
- *     h('h1', { style: tw('text-6xl font-bold text-white') }, title)
- *   );
- * };
- * `;
+ * const jsxCode = getUserCodeFromEditor(); // Contains JSX
+ * const compiled = compileTemplate(jsxCode);
+ * await db.templates.save({ code: compiled });
+ * ```
  *
- * const template = defineTemplateFromSource(templateSource, {
+ * @example
+ * ```typescript
+ * // Production API: Load and render
+ * import { defineTemplateFromSource, renderImage } from 'loopwind/sdk';
+ *
+ * const template = await db.templates.findById(id);
+ * const templateDef = defineTemplateFromSource(template.code, {
  *   config: { colors: { primary: '#3b82f6' } }
  * });
  *
- * const png = await renderImage(template, { title: 'Hello' });
+ * const png = await renderImage(templateDef, { title: 'Hello' });
  * ```
  */
-/**
- * Transform JSX to JavaScript using Babel
- * @internal
- */
-function transformJSX(code) {
-    try {
-        const result = Babel.transform(code, {
-            presets: ['react'],
-            filename: 'template.tsx',
-        });
-        return result.code || code;
-    }
-    catch (error) {
-        // If Babel fails, return original code (might be plain JS without JSX)
-        return code;
-    }
-}
 export function defineTemplateFromSource(sourceCode, options = {}) {
     try {
-        // Transform JSX to React.createElement calls
-        let processedSource = transformJSX(sourceCode);
         // Strip export keywords to make it work in function context
         // Convert "export const meta = ..." to "const meta = ..."
         // Convert "export default ..." to "const defaultExport = ..."
-        processedSource = processedSource
+        let processedSource = sourceCode
             .replace(/export\s+const\s+meta\s*=/g, 'const meta =')
             .replace(/export\s+default\s+/g, 'const defaultExport = ');
         // Create a module evaluation function
@@ -160,7 +118,7 @@ export function defineTemplateFromSource(sourceCode, options = {}) {
         if (!templateModule.default || typeof templateModule.default !== 'function') {
             throw new Error('Template source must have a default export function');
         }
-        return defineTemplateFromFile(templateModule, options);
+        return defineTemplate(templateModule, options);
     }
     catch (error) {
         throw new Error(`Failed to parse template source: ${error instanceof Error ? error.message : String(error)}`);
@@ -259,13 +217,15 @@ export function defineTemplateFromSchema(schema) {
       return h(React.Fragment, null, elements.map((el, i) => buildElement(el, i)));
     }
   `)(React);
-    return defineTemplate({
+    // Create a template module from the schema
+    const meta = {
         name: schema.name,
-        type: schema.type,
+        description: schema.name,
+        type: schema.type || 'image',
         size: schema.size,
         video: schema.video,
-        config: schema.config,
-        render,
-    });
+        props: {},
+    };
+    return defineTemplate({ meta, default: render }, { config: schema.config });
 }
 //# sourceMappingURL=template.js.map

package/dist/sdk/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../src/sdk/template.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,KAAK,MAAM,mBAAmB,CAAC;AAc3C;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,cAAc,CAC5B,UAAsC;IAEtC,sBAAsB;IACtB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;QACrB,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAC;IAC1D,CAAC;IAED,IAAI,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;QAC1E,MAAM,IAAI,KAAK,CAAC,4DAA4D,CAAC,CAAC;IAChF,CAAC;IAED,IAAI,CAAC,UAAU,CAAC,MAAM,IAAI,OAAO,UAAU,CAAC,MAAM,KAAK,UAAU,EAAE,CAAC;QAClE,MAAM,IAAI,KAAK,CAAC,iDAAiD,CAAC,CAAC;IACrE,CAAC;IAED,eAAe;IACf,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,IAAI,OAAO,CAAC;IAExC,IAAI,IAAI,KAAK,OAAO,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;QAC1C,MAAM,IAAI,KAAK,CAAC,0DAA0D,CAAC,CAAC;IAC9E,CAAC;IAED,OAAO;QACL,GAAG,UAAU;QACb,IAAI;KACL,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,cAAc,CAAC,QAA4B;IACzD,OAAO;QACL,IAAI,EAAE,QAAQ,CAAC,IAAI;QACnB,WAAW,EAAE,QAAQ,CAAC,IAAI,EAAE,4CAA4C;QACxE,IAAI,EAAE,QAAQ,CAAC,IAAI,IAAI,OAAO;QAC9B,IAAI,EAAE,QAAQ,CAAC,IAAI;QACnB,KAAK,EAAE,QAAQ,CAAC,KAAK;QACrB,KAAK,EAAE,EAAE,EAAE,0CAA0C;KACtD,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,sBAAsB,CACpC,cAA+F,EAC/F,UAAoC,EAAE;IAEtC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,cAAc,CAAC;IAEjD,OAAO,cAAc,CAAC;QACpB,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,IAAI,EAAE,IAAI,CAAC,IAAyB;QACpC,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,MAAM,EAAE,OAAO,CAAC,MAAM;QACtB,MAAM;KACP,CAAC,CAAC;AACL,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH;;;GAGG;AACH,SAAS,YAAY,CAAC,IAAY;IAChC,IAAI,CAAC;QACH,MAAM,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,EAAE;YACnC,OAAO,EAAE,CAAC,OAAO,CAAC;YAClB,QAAQ,EAAE,cAAc;SACzB,CAAC,CAAC;QACH,OAAO,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC;IAC7B,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,uEAAuE;QACvE,OAAO,IAAI,CAAC;IACd,CAAC;AACH,CAAC;AAED,MAAM,UAAU,wBAAwB,CACtC,UAAkB,EAClB,UAAoC,EAAE;IAEtC,IAAI,CAAC;QACH,6CAA6C;QAC7C,IAAI,eAAe,GAAG,YAAY,CAAC,UAAU,CAAC,CAAC;QAE/C,4DAA4D;QAC5D,0DAA0D;QAC1D,8DAA8D;QAC9D,eAAe,GAAG,eAAe;aAC9B,OAAO,CAAC,4BAA4B,EAAE,cAAc,CAAC;aACrD,OAAO,CAAC,sBAAsB,EAAE,wBAAwB,CAAC,CAAC;QAE7D,sCAAsC;QACtC,wDAAwD;QACxD,MAAM,aAAa,GAAG,IAAI,QAAQ,CAAC,OAAO,EAAE;;QAExC,eAAe;;KAElB,CAAC,CAAC;QAEH,0CAA0C;QAC1C,MAAM,cAAc,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;QAE5C,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;YACzB,MAAM,IAAI,KAAK,CAAC,6CAA6C,CAAC,CAAC;QACjE,CAAC;QAED,IAAI,CAAC,cAAc,CAAC,OAAO,IAAI,OAAO,cAAc,CAAC,OAAO,KAAK,UAAU,EAAE,CAAC;YAC5E,MAAM,IAAI,KAAK,CAAC,qDAAqD,CAAC,CAAC;QACzE,CAAC;QAED,OAAO,sBAAsB,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;IACzD,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,MAAM,IAAI,KAAK,CAAC,oCAAoC,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IAChH,CAAC;AACH,CAAC;AA0BD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,UAAU,wBAAwB,CACtC,MAAsB;IAEtB,IAAI,MAAM,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACjC,MAAM,IAAI,KAAK,CAAC,uCAAuC,CAAC,CAAC;IAC3D,CAAC;IAED,+DAA+D;IAC/D,gFAAgF;IAChF,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAErD,qDAAqD;IACrD,wEAAwE;IACxE,gDAAgD;IAChD,MAAM,MAAM,GAAmD,IAAI,QAAQ,CAAC,OAAO,EAAE;;;yBAG9D,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsClC,CAAC,CAAC,KAAK,CAAQ,CAAC;IAEjB,OAAO,cAAc,CAAC;QACpB,IAAI,EAAE,MAAM,CAAC,IAAI;QACjB,IAAI,EAAE,MAAM,CAAC,IAAI;QACjB,IAAI,EAAE,MAAM,CAAC,IAAI;QACjB,KAAK,EAAE,MAAM,CAAC,KAAK;QACnB,MAAM,EAAE,MAAM,CAAC,MAAM;QACrB,MAAM;KACP,CAAC,CAAC;AACL,CAAC"}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../src/sdk/template.ts"],"names":[],"mappings":"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"}

package/examples/nextjs-template-import.ts

@@ -6,13 +6,13 @@
  */
 
 import type { NextApiRequest, NextApiResponse } from 'next';
-import { defineTemplateFromFile, renderVideo } from 'loopwind/sdk';
+import { defineTemplate, renderVideo } from 'loopwind/sdk';
 
 // Import your template file (Next.js/bundler handles TSX automatically)
 import * as videoIntroTemplate from '../../_loopwind/templates/video-intro/template';
 
 // Create SDK template from file with custom config
-const template = defineTemplateFromFile(videoIntroTemplate, {
+const template = defineTemplate(videoIntroTemplate, {
   config: {
     colors: {
       primary: '#ff0000',        // Override gradient colors