loopwind 0.17.0 → 0.18.0

package/examples/code-editor-templates.ts

@@ -0,0 +1,173 @@
+/**
+ * Example: Code Editor - User-created templates from source strings
+ *
+ * Use case: Building a code editor where users write template code
+ * directly as strings (e.g., Monaco Editor, CodeMirror).
+ *
+ * ⚠️ SECURITY WARNING:
+ * Only use defineTemplateFromSource() with TRUSTED sources!
+ * It evaluates code using new Function() which can execute arbitrary code.
+ * Never pass untrusted user input directly.
+ */
+
+import { defineTemplateFromSource, renderImage, renderVideo } from 'loopwind/sdk';
+import fs from 'fs/promises';
+
+// Example 1: Simple image template from string
+const imageTemplateSource = `
+export const meta = {
+  name: 'user-card',
+  type: 'image',
+  size: { width: 1200, height: 630 }
+};
+
+export default ({ tw, title, description }) => {
+  const h = React.createElement;
+  return h('div', {
+    style: tw('flex flex-col w-full h-full bg-gradient-to-br from-blue-600 to-purple-700 p-12 justify-between')
+  },
+    h('div', { style: tw('flex items-center gap-4') },
+      h('div', { style: tw('w-16 h-16 rounded-full bg-white/20') })
+    ),
+    h('div', null,
+      h('h1', { style: tw('text-6xl font-bold text-white mb-4') }, title),
+      h('p', { style: tw('text-2xl text-white/80') }, description)
+    )
+  );
+};
+`;
+
+async function renderUserTemplate() {
+  // Create template from source string
+  const template = defineTemplateFromSource(imageTemplateSource, {
+    config: {
+      colors: {
+        primary: '#3b82f6',
+        background: '#ffffff',
+      },
+    },
+  });
+
+  // Render with user props
+  const png = await renderImage(template, {
+    title: 'User Created Template',
+    description: 'Built with code editor',
+  });
+
+  await fs.writeFile('user-card.png', png);
+  console.log('✓ Rendered user-card.png');
+}
+
+// Example 2: Video template from string
+const videoTemplateSource = `
+export const meta = {
+  name: 'intro-animation',
+  type: 'video',
+  size: { width: 1920, height: 1080 },
+  video: { fps: 30, duration: 3 }
+};
+
+export default ({ tw, progress, title }) => {
+  const h = React.createElement;
+
+  // Fade in animation
+  const opacity = progress < 0.5 ? progress / 0.5 : 1;
+  const scale = 0.8 + (opacity * 0.2);
+
+  return h('div', {
+    style: tw('flex items-center justify-center w-full h-full bg-black')
+  },
+    h('h1', {
+      style: {
+        ...tw('text-8xl font-bold text-white'),
+        opacity,
+        transform: \`scale(\${scale})\`
+      }
+    }, title)
+  );
+};
+`;
+
+async function renderVideoTemplate() {
+  const template = defineTemplateFromSource(videoTemplateSource);
+
+  const mp4 = await renderVideo(template, {
+    title: 'Hello World',
+  });
+
+  await fs.writeFile('intro-animation.mp4', mp4);
+  console.log('✓ Rendered intro-animation.mp4');
+}
+
+// Example 3: Database-stored template
+// This simulates loading templates from a database
+interface StoredTemplate {
+  id: string;
+  name: string;
+  source: string;
+  config?: any;
+}
+
+const templatesDB: StoredTemplate[] = [
+  {
+    id: 'og-1',
+    name: 'Blog OG Image',
+    source: `
+export const meta = {
+  name: 'blog-og',
+  type: 'image',
+  size: { width: 1200, height: 630 }
+};
+
+export default ({ tw, title, author }) => {
+  const h = React.createElement;
+  return h('div', {
+    style: tw('flex flex-col w-full h-full bg-white p-12 justify-center')
+  },
+    h('h1', { style: tw('text-6xl font-bold text-gray-900 mb-4') }, title),
+    h('p', { style: tw('text-2xl text-gray-600') }, 'By ' + author)
+  );
+};
+    `,
+    config: {
+      colors: {
+        primary: '#1f2937',
+        background: '#ffffff',
+      },
+    },
+  },
+];
+
+async function renderFromDatabase(templateId: string, props: any) {
+  // Fetch template from "database"
+  const stored = templatesDB.find((t) => t.id === templateId);
+  if (!stored) {
+    throw new Error('Template not found');
+  }
+
+  // Create template from stored source
+  const template = defineTemplateFromSource(stored.source, {
+    config: stored.config,
+  });
+
+  // Render
+  const png = await renderImage(template, props);
+  await fs.writeFile(`${stored.id}.png`, png);
+  console.log(`✓ Rendered ${stored.id}.png`);
+}
+
+// Run examples
+async function main() {
+  console.log('Code Editor Examples\n');
+
+  await renderUserTemplate();
+  await renderVideoTemplate();
+  await renderFromDatabase('og-1', {
+    title: 'Building a Template Editor',
+    author: 'John Doe',
+  });
+
+  console.log('\n✅ All code editor examples completed!');
+}
+
+main().catch(console.error);

package/examples/nextjs-template-import.ts

@@ -0,0 +1,58 @@
+/**
+ * Example: Importing template files in Next.js API routes
+ *
+ * This demonstrates how to reuse _loopwind/templates/ files
+ * in your SDK code with Next.js (or any other bundler)
+ */
+
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { defineTemplateFromFile, 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, {
+  config: {
+    colors: {
+      primary: '#ff0000',        // Override gradient colors
+      'indigo-900': '#1a0033',
+    },
+  },
+});
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  const { version = '1.0.0', changes } = req.query;
+
+  // Parse changes from query param (comma-separated)
+  const changeList = typeof changes === 'string'
+    ? changes.split(',').map(c => c.trim())
+    : undefined;
+
+  // Render video using imported template
+  const mp4 = await renderVideo(template, {
+    version: String(version),
+    changes: changeList,
+  });
+
+  res.setHeader('Content-Type', 'video/mp4');
+  res.setHeader('Cache-Control', 's-maxage=3600, stale-while-revalidate');
+  res.send(mp4);
+}
+
+/**
+ * Usage:
+ *
+ * GET /api/release-video?version=2.0.0&changes=New%20feature,Bug%20fix,Performance
+ *
+ * Returns: MP4 video with version 2.0.0 and custom changes list
+ *
+ * Benefits:
+ * - Reuse CLI templates in API
+ * - Override config for custom branding
+ * - Type-safe with TypeScript
+ * - No duplicate template code
+ */

package/examples/visual-builder-templates.ts

@@ -0,0 +1,336 @@
+/**
+ * Example: Visual Builder - Templates from JSON schemas
+ *
+ * Use case: Building a drag-and-drop template builder where users
+ * construct templates visually without writing code.
+ *
+ * Safe for user-generated content - no code execution!
+ */
+
+import {
+  defineTemplateFromSchema,
+  renderImage,
+  renderVideo,
+  type TemplateSchema,
+} from 'loopwind/sdk';
+import fs from 'fs/promises';
+
+// Example 1: Simple card template
+const cardSchema: TemplateSchema = {
+  name: 'simple-card',
+  size: { width: 1200, height: 630 },
+  config: {
+    colors: {
+      primary: '#3b82f6',
+      background: '#ffffff',
+      text: '#1f2937',
+    },
+  },
+  elements: [
+    {
+      type: 'div',
+      className: 'flex flex-col w-full h-full bg-background p-12 justify-center',
+      children: [
+        {
+          type: 'h1',
+          className: 'text-6xl font-bold text-primary mb-4',
+          content: '{{title}}',
+        },
+        {
+          type: 'p',
+          className: 'text-2xl text-text',
+          content: '{{description}}',
+        },
+      ],
+    },
+  ],
+};
+
+async function renderSimpleCard() {
+  const template = defineTemplateFromSchema(cardSchema);
+
+  const png = await renderImage(template, {
+    title: 'Visual Builder',
+    description: 'No code required!',
+  });
+
+  await fs.writeFile('simple-card.png', png);
+  console.log('✓ Rendered simple-card.png');
+}
+
+// Example 2: Complex layout with multiple sections
+const complexSchema: TemplateSchema = {
+  name: 'complex-layout',
+  size: { width: 1200, height: 630 },
+  config: {
+    colors: {
+      primary: '#8b5cf6',
+      secondary: '#ec4899',
+      background: '#fafafa',
+      text: '#0f172a',
+    },
+  },
+  elements: [
+    {
+      type: 'div',
+      className: 'flex w-full h-full bg-background',
+      children: [
+        // Left sidebar
+        {
+          type: 'div',
+          className: 'flex flex-col w-1/3 bg-primary p-8 justify-between',
+          children: [
+            {
+              type: 'h2',
+              className: 'text-3xl font-bold text-white',
+              content: '{{category}}',
+            },
+            {
+              type: 'p',
+              className: 'text-lg text-white/80',
+              content: '{{subtitle}}',
+            },
+          ],
+        },
+        // Right content area
+        {
+          type: 'div',
+          className: 'flex flex-col flex-1 p-12 justify-center',
+          children: [
+            {
+              type: 'h1',
+              className: 'text-6xl font-bold text-text mb-6',
+              content: '{{title}}',
+            },
+            {
+              type: 'div',
+              className: 'w-24 h-2 bg-secondary mb-6',
+            },
+            {
+              type: 'p',
+              className: 'text-2xl text-text/70',
+              content: '{{description}}',
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+async function renderComplexLayout() {
+  const template = defineTemplateFromSchema(complexSchema);
+
+  const png = await renderImage(template, {
+    category: 'TECHNOLOGY',
+    subtitle: 'Innovation Series',
+    title: 'The Future of AI',
+    description: 'Exploring the next generation of artificial intelligence',
+  });
+
+  await fs.writeFile('complex-layout.png', png);
+  console.log('✓ Rendered complex-layout.png');
+}
+
+// Example 3: Template with dynamic branding
+const brandedSchema: TemplateSchema = {
+  name: 'branded-template',
+  size: { width: 1200, height: 630 },
+  elements: [
+    {
+      type: 'div',
+      className: 'flex flex-col w-full h-full bg-brand-bg p-12 justify-between',
+      children: [
+        {
+          type: 'div',
+          className: 'flex items-center gap-4',
+          children: [
+            {
+              type: 'div',
+              className: 'w-16 h-16 rounded-full bg-brand-primary',
+            },
+            {
+              type: 'span',
+              className: 'text-2xl font-bold text-brand-text',
+              content: '{{companyName}}',
+            },
+          ],
+        },
+        {
+          type: 'div',
+          children: [
+            {
+              type: 'h1',
+              className: 'text-6xl font-bold text-brand-text mb-4',
+              content: '{{title}}',
+            },
+            {
+              type: 'p',
+              className: 'text-2xl text-brand-text/80',
+              content: '{{tagline}}',
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+async function renderWithBranding(brandColors: any, props: any) {
+  const template = defineTemplateFromSchema({
+    ...brandedSchema,
+    config: { colors: brandColors },
+  });
+
+  const png = await renderImage(template, props);
+  return png;
+}
+
+async function renderMultipleBrands() {
+  // Brand 1: Blue theme
+  const brand1 = await renderWithBranding(
+    {
+      'brand-primary': '#3b82f6',
+      'brand-bg': '#eff6ff',
+      'brand-text': '#1e3a8a',
+    },
+    {
+      companyName: 'TechCorp',
+      title: 'Innovation Summit 2024',
+      tagline: 'Building the Future Together',
+    }
+  );
+  await fs.writeFile('brand-1.png', brand1);
+  console.log('✓ Rendered brand-1.png');
+
+  // Brand 2: Purple theme
+  const brand2 = await renderWithBranding(
+    {
+      'brand-primary': '#8b5cf6',
+      'brand-bg': '#faf5ff',
+      'brand-text': '#581c87',
+    },
+    {
+      companyName: 'DesignStudio',
+      title: 'Creative Workshop',
+      tagline: 'Unleash Your Creativity',
+    }
+  );
+  await fs.writeFile('brand-2.png', brand2);
+  console.log('✓ Rendered brand-2.png');
+}
+
+// Example 4: User interface builder output
+// This simulates what a drag-and-drop builder would generate
+interface BuilderElement {
+  id: string;
+  type: string;
+  className: string;
+  content?: string;
+  children?: BuilderElement[];
+}
+
+function convertBuilderToSchema(
+  name: string,
+  elements: BuilderElement[],
+  config?: any
+): TemplateSchema {
+  // Remove IDs and convert to schema format
+  const cleanElements = (els: BuilderElement[]) => {
+    return els.map((el) => ({
+      type: el.type as any,
+      className: el.className,
+      content: el.content,
+      children: el.children ? cleanElements(el.children) : undefined,
+    }));
+  };
+
+  return {
+    name,
+    size: { width: 1200, height: 630 },
+    config,
+    elements: cleanElements(elements),
+  };
+}
+
+async function renderFromBuilder() {
+  // Simulated output from visual builder
+  const builderOutput: BuilderElement[] = [
+    {
+      id: 'root-1',
+      type: 'div',
+      className: 'flex items-center justify-center w-full h-full bg-gradient-to-br from-indigo-500 to-purple-600',
+      children: [
+        {
+          id: 'text-1',
+          type: 'h1',
+          className: 'text-8xl font-bold text-white',
+          content: '{{message}}',
+        },
+      ],
+    },
+  ];
+
+  const schema = convertBuilderToSchema('builder-output', builderOutput);
+  const template = defineTemplateFromSchema(schema);
+
+  const png = await renderImage(template, {
+    message: 'Built Visually!',
+  });
+
+  await fs.writeFile('builder-output.png', png);
+  console.log('✓ Rendered builder-output.png');
+}
+
+// Example 5: Video schema (for animated templates)
+const videoSchema: TemplateSchema = {
+  name: 'animated-card',
+  type: 'video',
+  size: { width: 1920, height: 1080 },
+  video: { fps: 30, duration: 3 },
+  config: {
+    colors: {
+      background: '#000000',
+      text: '#ffffff',
+    },
+  },
+  elements: [
+    {
+      type: 'div',
+      className: 'flex items-center justify-center w-full h-full bg-background',
+      children: [
+        {
+          type: 'h1',
+          className: 'text-8xl font-bold text-text enter-fade-in/0/1500 exit-fade-out/2500/3000',
+          content: '{{title}}',
+        },
+      ],
+    },
+  ],
+};
+
+async function renderVideoSchema() {
+  const template = defineTemplateFromSchema(videoSchema);
+
+  const mp4 = await renderVideo(template, {
+    title: 'Schema Video',
+  });
+
+  await fs.writeFile('animated-card.mp4', mp4);
+  console.log('✓ Rendered animated-card.mp4');
+}
+
+// Run all examples
+async function main() {
+  console.log('Visual Builder Examples\n');
+
+  await renderSimpleCard();
+  await renderComplexLayout();
+  await renderMultipleBrands();
+  await renderFromBuilder();
+  await renderVideoSchema();
+
+  console.log('\n✅ All visual builder examples completed!');
+}
+
+main().catch(console.error);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "loopwind",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "A CLI tool for AI code agents and developers for generating images and videos.",
   "type": "module",
   "bin": {