loopwind 0.23.0 → 0.24.0

package/examples/visual-builder-templates.ts

@@ -1,336 +0,0 @@
-/**
- * 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/render-examples-600x400.mjs

@@ -1,161 +0,0 @@
-import { defineTemplate, renderVideo } from './dist/sdk/index.js';
-import fs from 'fs/promises';
-import React from 'react';
-
-const { createElement: h } = React;
-
-function createTemplateModule(meta, render) {
-  return { meta, default: render };
-}
-
-const templates = [
-  // 1. Bouncing ball with spring
-  createTemplateModule(
-    {
-      name: 'bouncing-ball',
-      description: 'Bouncing ball with spring easing animation',
-      type: 'video',
-      size: { width: 600, height: 400 },
-      video: { fps: 60, duration: 4 },
-    },
-    ({ tw }) =>
-      h('div', { style: tw('flex items-center justify-center w-full h-full bg-gradient-to-br from-blue-900 to-purple-900') },
-        h('div', { style: tw('w-48 h-48 rounded-full bg-gradient-to-br from-yellow-400 to-orange-500 shadow-2xl spring loop-translate-y-16/1000') })
-      )
-  ),
-
-  // 2. Linear easing
-  createTemplateModule(
-    {
-      name: 'easing-linear',
-      description: 'Bouncing ball with linear easing (constant speed)',
-      type: 'video',
-      size: { width: 600, height: 400 },
-      video: { fps: 60, duration: 4 },
-    },
-    ({ tw }) =>
-      h('div', { style: tw('flex flex-col items-center justify-center gap-6 w-full h-full bg-gradient-to-br from-slate-900 to-slate-800') },
-        h('div', { style: tw('w-32 h-32 rounded-full bg-gradient-to-br from-cyan-400 to-blue-500 shadow-2xl linear loop-translate-y-12/1000') }),
-        h('div', { style: tw('text-white text-2xl font-bold') }, 'Linear Easing'),
-        h('div', { style: tw('text-white/60 text-sm text-center max-w-md px-4') }, 'Constant speed')
-      )
-  ),
-
-  // 3. Ease-in
-  createTemplateModule(
-    {
-      name: 'easing-ease-in',
-      description: 'Bouncing ball with ease-in (accelerating)',
-      type: 'video',
-      size: { width: 600, height: 400 },
-      video: { fps: 60, duration: 4 },
-    },
-    ({ tw }) =>
-      h('div', { style: tw('flex flex-col items-center justify-center gap-6 w-full h-full bg-gradient-to-br from-emerald-900 to-teal-800') },
-        h('div', { style: tw('w-32 h-32 rounded-full bg-gradient-to-br from-emerald-400 to-green-500 shadow-2xl ease-in loop-translate-y-12/1000') }),
-        h('div', { style: tw('text-white text-2xl font-bold') }, 'Ease In'),
-        h('div', { style: tw('text-white/60 text-sm text-center max-w-md px-4') }, 'Slow start, fast end')
-      )
-  ),
-
-  // 4. Ease-out
-  createTemplateModule(
-    {
-      name: 'easing-ease-out',
-      description: 'Bouncing ball with ease-out (decelerating)',
-      type: 'video',
-      size: { width: 600, height: 400 },
-      video: { fps: 60, duration: 4 },
-    },
-    ({ tw }) =>
-      h('div', { style: tw('flex flex-col items-center justify-center gap-6 w-full h-full bg-gradient-to-br from-rose-900 to-pink-800') },
-        h('div', { style: tw('w-32 h-32 rounded-full bg-gradient-to-br from-rose-400 to-pink-500 shadow-2xl ease-out loop-translate-y-12/1000') }),
-        h('div', { style: tw('text-white text-2xl font-bold') }, 'Ease Out'),
-        h('div', { style: tw('text-white/60 text-sm text-center max-w-md px-4') }, 'Fast start, slow end')
-      )
-  ),
-
-  // 5. Easing comparison (3 balls)
-  createTemplateModule(
-    {
-      name: 'easing-comparison',
-      description: 'Three balls with different easings side-by-side',
-      type: 'video',
-      size: { width: 600, height: 400 },
-      video: { fps: 60, duration: 4 },
-    },
-    ({ tw }) =>
-      h('div', { style: tw('flex items-center justify-center gap-8 w-full h-full bg-gradient-to-br from-slate-900 to-gray-900 px-8') },
-        h('div', { style: tw('flex flex-col items-center gap-4') },
-          h('div', { style: tw('w-24 h-24 rounded-full bg-gradient-to-br from-cyan-400 to-blue-500 shadow-2xl linear loop-translate-y-10/800') }),
-          h('div', { style: tw('text-white text-sm font-bold') }, 'Linear'),
-          h('div', { style: tw('text-white/50 text-xs') }, '800ms')
-        ),
-        h('div', { style: tw('flex flex-col items-center gap-4') },
-          h('div', { style: tw('w-24 h-24 rounded-full bg-gradient-to-br from-pink-400 to-rose-500 shadow-2xl ease-out loop-translate-y-10/1000') }),
-          h('div', { style: tw('text-white text-sm font-bold') }, 'Ease Out'),
-          h('div', { style: tw('text-white/50 text-xs') }, '1000ms')
-        ),
-        h('div', { style: tw('flex flex-col items-center gap-4') },
-          h('div', { style: tw('w-24 h-24 rounded-full bg-gradient-to-br from-yellow-400 to-orange-500 shadow-2xl spring loop-translate-y-10/1200') }),
-          h('div', { style: tw('text-white text-sm font-bold') }, 'Spring'),
-          h('div', { style: tw('text-white/50 text-xs') }, '1200ms')
-        )
-      )
-  ),
-
-  // 6. Spring variants
-  createTemplateModule(
-    {
-      name: 'spring-variants',
-      description: 'Different spring configurations with varying bounce',
-      type: 'video',
-      size: { width: 600, height: 400 },
-      video: { fps: 60, duration: 4 },
-    },
-    ({ tw }) =>
-      h('div', { style: tw('flex items-center justify-center gap-6 w-full h-full bg-gradient-to-br from-indigo-900 to-purple-900 px-6') },
-        h('div', { style: tw('flex flex-col items-center gap-3') },
-          h('div', { style: tw('w-24 h-24 rounded-full bg-gradient-to-br from-blue-400 to-cyan-500 shadow-2xl spring/1/100/10 loop-translate-y-10/1000') }),
-          h('div', { style: tw('text-white text-xs font-bold') }, 'Gentle'),
-          h('div', { style: tw('text-white/50 text-[10px]') }, '1/100/10')
-        ),
-        h('div', { style: tw('flex flex-col items-center gap-3') },
-          h('div', { style: tw('w-24 h-24 rounded-full bg-gradient-to-br from-pink-400 to-rose-500 shadow-2xl spring/1/170/8 loop-translate-y-10/1000') }),
-          h('div', { style: tw('text-white text-xs font-bold') }, 'Bouncy'),
-          h('div', { style: tw('text-white/50 text-[10px]') }, '1/170/8')
-        ),
-        h('div', { style: tw('flex flex-col items-center gap-3') },
-          h('div', { style: tw('w-24 h-24 rounded-full bg-gradient-to-br from-emerald-400 to-green-500 shadow-2xl spring/1/200/15 loop-translate-y-10/1000') }),
-          h('div', { style: tw('text-white text-xs font-bold') }, 'Snappy'),
-          h('div', { style: tw('text-white/50 text-[10px]') }, '1/200/15')
-        )
-      )
-  ),
-];
-
-async function renderAll() {
-  console.log('Rendering all examples at 600x400...\n');
-
-  for (let i = 0; i < templates.length; i++) {
-    const templateModule = templates[i];
-    const template = defineTemplate(templateModule);
-    const outputName = `example-${templateModule.meta.name}.mp4`;
-    const outputPath = `output/${outputName}`;
-
-    console.log(`📹 Rendering ${outputName}...`);
-
-    try {
-      const buffer = await renderVideo(template, {}, { quality: 20 });
-      await fs.writeFile(outputPath, buffer);
-      console.log(`   ✔ ${outputName} (${(buffer.length / 1024).toFixed(1)}KB)\n`);
-    } catch (err) {
-      console.log(`   ✖ Failed: ${err.message}\n`);
-      console.error(err);
-    }
-  }
-
-  console.log('✅ All examples rendered at 600x400!');
-}
-
-renderAll().catch(console.error);

package/render-spring-variants-fixed.mjs

@@ -1,60 +0,0 @@
-import { defineTemplate, renderVideo } from './dist/sdk/index.js';
-import fs from 'fs/promises';
-import React from 'react';
-
-const { createElement: h } = React;
-
-function createTemplateModule(meta, render) {
-  return { meta, default: render };
-}
-
-// Spring variants with enter animations to show the bounce better
-const springVariantsTemplate = createTemplateModule(
-  {
-    name: 'spring-variants',
-    description: 'Different spring configurations with varying bounce',
-    type: 'video',
-    size: { width: 600, height: 400 },
-    video: { fps: 60, duration: 3 },
-  },
-  ({ tw }) =>
-    h('div', { style: tw('flex items-center justify-center gap-6 w-full h-full bg-gradient-to-br from-indigo-900 to-purple-900 px-6') },
-      h('div', { style: tw('flex flex-col items-center gap-3') },
-        h('div', { style: tw('w-24 h-24 rounded-full bg-gradient-to-br from-blue-400 to-cyan-500 shadow-2xl opacity-0 enter-ease-spring/1/100/10 enter-fade-in/0/1500 enter--translate-y-32/0/1500') }),
-        h('div', { style: tw('text-white text-xs font-bold opacity-0 enter-fade-in/0/800') }, 'Gentle'),
-        h('div', { style: tw('text-white/50 text-[10px] opacity-0 enter-fade-in/0/800') }, '1/100/10')
-      ),
-      h('div', { style: tw('flex flex-col items-center gap-3') },
-        h('div', { style: tw('w-24 h-24 rounded-full bg-gradient-to-br from-pink-400 to-rose-500 shadow-2xl opacity-0 enter-ease-spring/1/170/8 enter-fade-in/0/1500 enter--translate-y-32/0/1500') }),
-        h('div', { style: tw('text-white text-xs font-bold opacity-0 enter-fade-in/200/800') }, 'Bouncy'),
-        h('div', { style: tw('text-white/50 text-[10px] opacity-0 enter-fade-in/200/800') }, '1/170/8')
-      ),
-      h('div', { style: tw('flex flex-col items-center gap-3') },
-        h('div', { style: tw('w-24 h-24 rounded-full bg-gradient-to-br from-emerald-400 to-green-500 shadow-2xl opacity-0 enter-ease-spring/1/200/15 enter-fade-in/0/1500 enter--translate-y-32/0/1500') }),
-        h('div', { style: tw('text-white text-xs font-bold opacity-0 enter-fade-in/400/800') }, 'Snappy'),
-        h('div', { style: tw('text-white/50 text-[10px] opacity-0 enter-fade-in/400/800') }, '1/200/15')
-      )
-    )
-);
-
-async function render() {
-  console.log('Rendering spring-variants with enter animations...\n');
-
-  const template = defineTemplate(springVariantsTemplate);
-  const outputPath = 'output/example-spring-variants.mp4';
-
-  try {
-    const buffer = await renderVideo(template, {}, { quality: 20 });
-    await fs.writeFile(outputPath, buffer);
-    console.log(`✔ example-spring-variants.mp4 (${(buffer.length / 1024).toFixed(1)}KB)\n`);
-    console.log('✅ Now you can see the spring differences!');
-    console.log('   - Gentle: smooth drop with slight overshoot bounce');
-    console.log('   - Bouncy: exaggerated drop with lots of bounce');
-    console.log('   - Snappy: fast drop with minimal/no bounce');
-  } catch (err) {
-    console.log(`✖ Failed: ${err.message}\n`);
-    console.error(err);
-  }
-}
-
-render().catch(console.error);

package/render-staggered-text.mjs

@@ -1,56 +0,0 @@
-import { defineTemplate, renderVideo } from './dist/sdk/index.js';
-import fs from 'fs/promises';
-import React from 'react';
-
-const { createElement: h } = React;
-
-function createTemplateModule(meta, render) {
-  return { meta, default: render };
-}
-
-const staggeredTextTemplate = createTemplateModule(
-  {
-    name: 'staggered-text',
-    description: 'Staggered text animation with spring easing',
-    type: 'video',
-    size: { width: 600, height: 400 },
-    video: { fps: 60, duration: 3 },
-  },
-  ({ tw }) => {
-    const text = 'loopwind';
-    const letters = text.split('');
-    const staggerDelay = 80; // ms between each letter
-
-    return h('div', { style: tw('flex items-center justify-center w-full h-full bg-gradient-to-br from-violet-900 via-purple-900 to-fuchsia-900') },
-      h('div', { style: tw('flex items-center justify-center gap-1') },
-        ...letters.map((letter, i) =>
-          h('span', {
-            key: i,
-            style: tw(`text-8xl font-black bg-clip-text text-transparent bg-gradient-to-br from-cyan-400 via-blue-400 to-purple-400 opacity-0 enter-ease-spring enter-fade-in/${i * staggerDelay}/600 enter--translate-y-12/${i * staggerDelay}/600`)
-          }, letter)
-        )
-      )
-    );
-  }
-);
-
-async function render() {
-  console.log('Rendering staggered-text animation...\n');
-
-  const template = defineTemplate(staggeredTextTemplate);
-  const outputPath = 'output/example-staggered-text.mp4';
-
-  try {
-    const buffer = await renderVideo(template, {}, { quality: 20 });
-    await fs.writeFile(outputPath, buffer);
-    console.log(`✔ example-staggered-text.mp4 (${(buffer.length / 1024).toFixed(1)}KB)\n`);
-    console.log('✅ Staggered text animation complete!');
-    console.log('   Each letter animates in with spring easing');
-    console.log('   80ms delay between each letter');
-  } catch (err) {
-    console.log(`✖ Failed: ${err.message}\n`);
-    console.error(err);
-  }
-}
-
-render().catch(console.error);

package/test-cloudflare-worker/README.md

@@ -1,64 +0,0 @@
-# Loopwind Cloudflare Workers Test
-
-This project tests the loopwind SDK in a Cloudflare Workers environment.
-
-## Quick Start
-
-```bash
-# Install dependencies
-npm install
-
-# Test locally with Node.js (recommended)
-node test-sdk.mjs
-
-# Deploy to Cloudflare production
-npm run deploy
-```
-
-## Local Development Limitations
-
-**Note:** Local development with `wrangler dev` has WASM limitations that prevent full functionality. This is a known limitation of the local workerd runtime.
-
-For local testing, use:
-1. **Node.js test script:** `node test-sdk.mjs` (works fully)
-2. **SVG format only:** `http://localhost:8787/?format=svg&title=Hello` (in wrangler dev)
-
-## Production
-
-When deployed to Cloudflare production, all features work:
-- SVG rendering
-- PNG rendering (with WASM)
-
-## API
-
-### GET /
-
-Generate an image with query parameters:
-- `title` - Main title text (default: "Hello from Loopwind!")
-- `subtitle` - Subtitle text (default: "Running in Cloudflare Workers")
-- `format` - Output format: `svg` or `png` (default: `svg`)
-
-### GET /health
-
-Health check endpoint returning JSON status.
-
-## Example Usage
-
-```bash
-# Generate SVG
-curl "https://your-worker.workers.dev/?title=Hello&format=svg" > image.svg
-
-# Generate PNG
-curl "https://your-worker.workers.dev/?title=Hello&format=png" > image.png
-```
-
-## Project Structure
-
-```
-test-cloudflare-worker/
-├── src/
-│   └── index.ts      # Worker entry point
-├── test-sdk.mjs      # Node.js test script
-├── wrangler.toml     # Wrangler configuration
-└── README.md
-```

package/test-cloudflare-worker/dist/README.md

@@ -1 +0,0 @@
-This folder contains the built output assets for the worker "loopwind-worker-test" generated at 2025-12-10T07:43:03.352Z.