loopwind 0.17.0 → 0.18.1

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.1",
   "description": "A CLI tool for AI code agents and developers for generating images and videos.",
   "type": "module",
   "bin": {
@@ -46,6 +46,7 @@
     "url": "https://github.com/tomtev/loopwind/issues"
   },
   "dependencies": {
+    "@babel/standalone": "^7.28.5",
     "@resvg/resvg-js": "^2.6.0",
     "@vitejs/plugin-react": "^5.1.1",
     "boxen": "^7.1.1",
@@ -74,6 +75,7 @@
     "vite": "^7.2.2"
   },
   "devDependencies": {
+    "@types/babel__standalone": "^7.1.9",
     "@types/chalk-animation": "^1.6.3",
     "@types/express": "^5.0.5",
     "@types/gradient-string": "^1.1.6",

package/test-jsx-support.mjs

@@ -0,0 +1,120 @@
+/**
+ * Test JSX support in defineTemplateFromSource
+ */
+
+import { defineTemplateFromSource, renderImage } from './dist/sdk/index.js';
+
+console.log('Testing JSX Support in defineTemplateFromSource\n');
+
+// Test 1: Simple JSX template
+const simpleJSX = `
+export const meta = {
+  name: 'jsx-test',
+  type: 'image',
+  size: { width: 400, height: 200 }
+};
+
+export default ({ tw, title }) => (
+  <div style={tw('flex items-center justify-center w-full h-full bg-blue-500')}>
+    <h1 style={tw('text-4xl font-bold text-white')}>{title}</h1>
+  </div>
+);
+`;
+
+try {
+  const template1 = defineTemplateFromSource(simpleJSX);
+  const png1 = await renderImage(template1, { title: 'JSX Works!' });
+  console.log('✓ Simple JSX template works');
+  console.log('  PNG size:', png1.length, 'bytes\n');
+} catch (error) {
+  console.error('✗ Simple JSX template failed:', error.message);
+}
+
+// Test 2: Nested JSX
+const nestedJSX = `
+export const meta = {
+  name: 'nested-jsx',
+  size: { width: 600, height: 300 }
+};
+
+export default ({ tw, title, subtitle, items }) => (
+  <div style={tw('flex flex-col w-full h-full bg-white p-8')}>
+    <h1 style={tw('text-5xl font-bold text-gray-900 mb-4')}>{title}</h1>
+    <p style={tw('text-2xl text-gray-600 mb-6')}>{subtitle}</p>
+    <div style={tw('flex gap-4')}>
+      {items.map((item, i) => (
+        <div style={tw('px-4 py-2 bg-blue-500 text-white rounded')}>
+          {item}
+        </div>
+      ))}
+    </div>
+  </div>
+);
+`;
+
+try {
+  const template2 = defineTemplateFromSource(nestedJSX);
+  const png2 = await renderImage(template2, {
+    title: 'Nested JSX',
+    subtitle: 'With multiple levels',
+    items: ['One', 'Two', 'Three']
+  });
+  console.log('✓ Nested JSX template works');
+  console.log('  PNG size:', png2.length, 'bytes\n');
+} catch (error) {
+  console.error('✗ Nested JSX template failed:', error.message);
+}
+
+// Test 3: Self-closing tags
+const selfClosing = `
+export const meta = {
+  name: 'self-closing',
+  size: { width: 400, height: 200 }
+};
+
+export default ({ tw }) => (
+  <div style={tw('flex flex-col items-center justify-center w-full h-full bg-gray-100 gap-4')}>
+    <div style={tw('w-32 h-32 bg-red-500 rounded-full')} />
+    <div style={tw('w-32 h-32 bg-blue-500 rounded-lg')} />
+    <div style={tw('w-32 h-32 bg-green-500')} />
+  </div>
+);
+`;
+
+try {
+  const template3 = defineTemplateFromSource(selfClosing);
+  const png3 = await renderImage(template3, {});
+  console.log('✓ Self-closing tags work');
+  console.log('  PNG size:', png3.length, 'bytes\n');
+} catch (error) {
+  console.error('✗ Self-closing tags failed:', error.message);
+}
+
+// Test 4: Complex attributes
+const complexAttrs = `
+export const meta = {
+  name: 'complex-attrs',
+  size: { width: 500, height: 250 }
+};
+
+export default ({ tw, title, count }) => (
+  <div style={tw('flex flex-col w-full h-full bg-gradient-to-br from-purple-600 to-pink-500 p-8')}>
+    <h1 style={tw('text-4xl font-bold text-white mb-4')}>{title}</h1>
+    <div style={tw('flex items-center gap-2')}>
+      <span style={tw('text-2xl text-white')}>Count:</span>
+      <span style={tw('text-3xl font-bold text-yellow-300')}>{count}</span>
+    </div>
+  </div>
+);
+`;
+
+try {
+  const template4 = defineTemplateFromSource(complexAttrs);
+  const png4 = await renderImage(template4, { title: 'Complex JSX', count: 42 });
+  console.log('✓ Complex attributes work');
+  console.log('  PNG size:', png4.length, 'bytes\n');
+} catch (error) {
+  console.error('✗ Complex attributes failed:', error.message);
+}
+
+console.log('✅ All JSX tests completed!');