loopwind 0.19.0 → 0.20.1

package/render-examples-600x400.mjs

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

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

@@ -0,0 +1,56 @@
+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-sdk-config.mjs

@@ -4,6 +4,7 @@
  */
 
 import { defineTemplate, renderImage, renderVideo } from './dist/sdk/index.js';
+import * as configTestTemplate from './test-templates/config-test.mjs';
 import React from 'react';
 import fs from 'fs/promises';
 import path from 'path';
@@ -12,6 +13,11 @@ import { fileURLToPath } from 'url';
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const { createElement: h } = React;
 
+// Helper to create inline template modules for testing
+function createTemplateModule(meta, render) {
+  return { meta, default: render };
+}
+
 // Test utilities
 let testsPassed = 0;
 let testsFailed = 0;
@@ -52,15 +58,7 @@ await test('Config in defineTemplate - Image', async () => {
     },
   };
 
-  const template = defineTemplate({
-    name: 'test-config-template',
-    size: { width: 400, height: 400 },
-    config,
-    render: ({ tw, title }) =>
-      h('div', { style: tw('flex items-center justify-center w-full h-full bg-background') },
-        h('h1', { style: tw('text-4xl font-bold text-primary') }, title)
-      ),
-  });
+  const template = defineTemplate(configTestTemplate, { config });
 
   assert(template.config, 'Template should have config');
   assert(template.config.colors.primary === '#ff0000', 'Config colors should match');
@@ -74,14 +72,20 @@ await test('Config in defineTemplate - Image', async () => {
 
 // Test 2: Config in renderImage options
 await test('Config in renderImage options', async () => {
-  const template = defineTemplate({
-    name: 'test-render-config',
-    size: { width: 400, height: 400 },
-    render: ({ tw, title }) =>
+  const templateModule = createTemplateModule(
+    {
+      name: 'test-render-config',
+      type: 'image',
+      size: { width: 400, height: 400 },
+      props: { title: 'string' },
+    },
+    ({ tw, title }) =>
       h('div', { style: tw('flex items-center justify-center w-full h-full bg-secondary') },
         h('h1', { style: tw('text-4xl font-bold text-accent') }, title)
-      ),
-  });
+      )
+  );
+
+  const template = defineTemplate(templateModule);
 
   const svg = await renderImage(
     template,
@@ -104,18 +108,25 @@ await test('Config in renderImage options', async () => {
 
 // Test 3: Config override (options override template)
 await test('Config override - Options override template', async () => {
-  const template = defineTemplate({
-    name: 'test-override',
-    size: { width: 400, height: 400 },
+  const templateModule = createTemplateModule(
+    {
+      name: 'test-override',
+      type: 'image',
+      size: { width: 400, height: 400 },
+      props: {},
+    },
+    ({ tw }) =>
+      h('div', { style: tw('flex items-center justify-center w-full h-full bg-brand') },
+        h('h1', { style: tw('text-4xl font-bold') }, 'Override Test')
+      )
+  );
+
+  const template = defineTemplate(templateModule, {
     config: {
       colors: {
         brand: '#111111',
       },
     },
-    render: ({ tw }) =>
-      h('div', { style: tw('flex items-center justify-center w-full h-full bg-brand') },
-        h('h1', { style: tw('text-4xl font-bold') }, 'Override Test')
-      ),
   });
 
   const svg = await renderImage(
@@ -138,14 +149,20 @@ await test('Config override - Options override template', async () => {
 
 // Test 4: PNG format with config
 await test('PNG format with config', async () => {
-  const template = defineTemplate({
-    name: 'test-png',
-    size: { width: 200, height: 200 },
-    render: ({ tw }) =>
+  const templateModule = createTemplateModule(
+    {
+      name: 'test-png',
+      type: 'image',
+      size: { width: 200, height: 200 },
+      props: {},
+    },
+    ({ tw }) =>
       h('div', { style: tw('flex items-center justify-center w-full h-full bg-primary') },
         h('h1', { style: tw('text-2xl font-bold text-white') }, 'PNG')
-      ),
-  });
+      )
+  );
+
+  const template = defineTemplate(templateModule);
 
   const png = await renderImage(
     template,
@@ -168,21 +185,27 @@ await test('PNG format with config', async () => {
 
 // Test 5: Video with config
 await test('Video with config', async () => {
-  const template = defineTemplate({
-    name: 'test-video',
-    type: 'video',
-    size: { width: 400, height: 400 },
-    video: { fps: 30, duration: 0.5 },
-    config: {
-      colors: {
-        primary: '#ff6600',
-      },
+  const templateModule = createTemplateModule(
+    {
+      name: 'test-video',
+      type: 'video',
+      size: { width: 400, height: 400 },
+      video: { fps: 30, duration: 0.5 },
+      props: {},
     },
-    render: ({ tw, progress }) => {
+    ({ tw, progress }) => {
       const opacity = progress;
       return h('div', { style: tw('flex items-center justify-center w-full h-full bg-white') },
         h('h1', { style: { ...tw('text-4xl font-bold text-primary'), opacity } }, 'Video')
       );
+    }
+  );
+
+  const template = defineTemplate(templateModule, {
+    config: {
+      colors: {
+        primary: '#ff6600',
+      },
     },
   });
 
@@ -197,20 +220,26 @@ await test('Video with config', async () => {
 
 // Test 6: Video with config override
 await test('Video with config override', async () => {
-  const template = defineTemplate({
-    name: 'test-video-override',
-    type: 'video',
-    size: { width: 400, height: 400 },
-    video: { fps: 30, duration: 0.5 },
+  const templateModule = createTemplateModule(
+    {
+      name: 'test-video-override',
+      type: 'video',
+      size: { width: 400, height: 400 },
+      video: { fps: 30, duration: 0.5 },
+      props: {},
+    },
+    ({ tw, progress }) =>
+      h('div', { style: tw('flex items-center justify-center w-full h-full bg-brand') },
+        h('h1', { style: { ...tw('text-4xl font-bold'), opacity: progress } }, 'Video')
+      )
+  );
+
+  const template = defineTemplate(templateModule, {
     config: {
       colors: {
         brand: '#333333',
       },
     },
-    render: ({ tw, progress }) =>
-      h('div', { style: tw('flex items-center justify-center w-full h-full bg-brand') },
-        h('h1', { style: { ...tw('text-4xl font-bold'), opacity: progress } }, 'Video')
-      ),
   });
 
   const mp4 = await renderVideo(template, {}, {
@@ -237,18 +266,23 @@ await test('Multiple custom colors', async () => {
     },
   };
 
-  const template = defineTemplate({
-    name: 'test-multi-colors',
-    size: { width: 600, height: 400 },
-    config,
-    render: ({ tw }) =>
+  const templateModule = createTemplateModule(
+    {
+      name: 'test-multi-colors',
+      type: 'image',
+      size: { width: 600, height: 400 },
+      props: {},
+    },
+    ({ tw }) =>
       h('div', { style: tw('flex flex-col items-center justify-center w-full h-full bg-brand-light p-8') },
         h('h1', { style: tw('text-4xl font-bold text-brand') }, 'Brand'),
         h('p', { style: tw('text-2xl text-brand-dark') }, 'Brand Dark'),
         h('p', { style: tw('text-xl text-accent') }, 'Accent'),
         h('p', { style: tw('text-lg text-success') }, 'Success')
-      ),
-  });
+      )
+  );
+
+  const template = defineTemplate(templateModule, { config });
 
   const svg = await renderImage(template, {}, { format: 'svg' });
   const svgString = svg.toString();
@@ -272,16 +306,21 @@ await test('Fonts in config', async () => {
     },
   };
 
-  const template = defineTemplate({
-    name: 'test-fonts',
-    size: { width: 400, height: 400 },
-    config,
-    render: ({ tw }) =>
+  const templateModule = createTemplateModule(
+    {
+      name: 'test-fonts',
+      type: 'image',
+      size: { width: 400, height: 400 },
+      props: {},
+    },
+    ({ tw }) =>
       h('div', { style: tw('flex flex-col items-center justify-center w-full h-full bg-white') },
         h('h1', { style: tw('font-sans text-4xl text-text') }, 'Sans Font'),
         h('p', { style: tw('font-mono text-xl text-text') }, 'Mono Font')
-      ),
-  });
+      )
+  );
+
+  const template = defineTemplate(templateModule, { config });
 
   const svg = await renderImage(template, {}, { format: 'svg' });
   const svgString = svg.toString();
@@ -292,14 +331,20 @@ await test('Fonts in config', async () => {
 
 // Test 9: Empty config (should work with defaults)
 await test('Empty config - should work with defaults', async () => {
-  const template = defineTemplate({
-    name: 'test-no-config',
-    size: { width: 400, height: 400 },
-    render: ({ tw }) =>
+  const templateModule = createTemplateModule(
+    {
+      name: 'test-no-config',
+      type: 'image',
+      size: { width: 400, height: 400 },
+      props: {},
+    },
+    ({ tw }) =>
       h('div', { style: tw('flex items-center justify-center w-full h-full bg-white') },
         h('h1', { style: tw('text-4xl font-bold text-black') }, 'No Config')
-      ),
-  });
+      )
+  );
+
+  const template = defineTemplate(templateModule);
 
   const svg = await renderImage(template, {}, { format: 'svg' });
   assert(svg.length > 0, 'SVG should be generated without config');
@@ -307,19 +352,26 @@ await test('Empty config - should work with defaults', async () => {
 
 // Test 10: Partial config merge
 await test('Partial config merge', async () => {
-  const template = defineTemplate({
-    name: 'test-partial-merge',
-    size: { width: 400, height: 400 },
+  const templateModule = createTemplateModule(
+    {
+      name: 'test-partial-merge',
+      type: 'image',
+      size: { width: 400, height: 400 },
+      props: {},
+    },
+    ({ tw }) =>
+      h('div', { style: tw('flex items-center justify-center w-full h-full bg-secondary') },
+        h('h1', { style: tw('text-4xl font-bold text-primary') }, 'Merge')
+      )
+  );
+
+  const template = defineTemplate(templateModule, {
     config: {
       colors: {
         primary: '#111111',
         secondary: '#222222',
       },
     },
-    render: ({ tw }) =>
-      h('div', { style: tw('flex items-center justify-center w-full h-full bg-secondary') },
-        h('h1', { style: tw('text-4xl font-bold text-primary') }, 'Merge')
-      ),
   });
 
   const svg = await renderImage(
@@ -363,16 +415,21 @@ await test('Font files from URLs', async () => {
     },
   };
 
-  const template = defineTemplate({
-    name: 'test-font-files',
-    size: { width: 600, height: 400 },
-    config,
-    render: ({ tw }) =>
+  const templateModule = createTemplateModule(
+    {
+      name: 'test-font-files',
+      type: 'image',
+      size: { width: 600, height: 400 },
+      props: {},
+    },
+    ({ tw }) =>
       h('div', { style: tw('flex flex-col items-center justify-center w-full h-full bg-white p-8') },
         h('h1', { style: tw('font-sans text-6xl font-bold text-text') }, 'Bold Text'),
         h('p', { style: tw('font-sans text-3xl font-normal text-text') }, 'Normal Text')
-      ),
-  });
+      )
+  );
+
+  const template = defineTemplate(templateModule, { config });
 
   const svg = await renderImage(template, {}, { format: 'svg' });
   assert(svg.length > 0, 'SVG should be generated with font files from URLs');

package/test-static-debug.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export const meta = {
+  name: 'test-static-debug',
+  description: 'Simple static image for debug testing',
+  type: 'image' as const,
+  size: { width: 600, height: 400 },
+};
+
+export default function TestStatic({ tw }: { tw: any }) {
+  return (
+    <div style={tw('flex items-center justify-center w-full h-full bg-gradient-to-br from-blue-500 to-purple-600')}>
+      <div style={tw('flex flex-col items-center gap-4 p-8 bg-white rounded-lg')}>
+        <h1 style={tw('text-4xl font-bold text-gray-900')}>Debug Test</h1>
+        <p style={tw('text-lg text-gray-600')}>Testing Satori debug mode</p>
+      </div>
+    </div>
+  );
+}