loopwind 0.16.0 → 0.18.0

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.16.0",
+  "version": "0.18.0",
   "description": "A CLI tool for AI code agents and developers for generating images and videos.",
   "type": "module",
   "bin": {

package/test-font-files.mjs

@@ -0,0 +1,72 @@
+/**
+ * Test for font files in SDK StyleConfig
+ * Run with: node test-font-files.mjs
+ */
+
+import { defineTemplate, renderImage } from './dist/sdk/index.js';
+import React from 'react';
+
+const { createElement: h } = React;
+
+console.log('📝 Testing font files in StyleConfig...\n');
+
+// Test with external URL (Google Fonts mirror)
+const config = {
+  colors: {
+    text: '#000000',
+  },
+  fonts: {
+    sans: {
+      family: ['Inter', 'sans-serif'],
+      files: [
+        {
+          path: 'https://unpkg.com/@fontsource/inter@5.0.18/files/inter-latin-400-normal.woff',
+          weight: 400,
+        },
+        {
+          path: 'https://unpkg.com/@fontsource/inter@5.0.18/files/inter-latin-700-normal.woff',
+          weight: 700,
+        },
+      ],
+    },
+  },
+};
+
+const template = defineTemplate({
+  name: 'test-font-files',
+  size: { width: 600, height: 400 },
+  config,
+  render: ({ 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')
+    ),
+});
+
+try {
+  console.log('⏳ Rendering with external font URLs...');
+  const svg = await renderImage(template, {}, { format: 'svg' });
+
+  console.log('✅ SUCCESS: Font files loaded from URLs');
+  console.log(`✅ Generated SVG: ${svg.length} bytes`);
+
+  // Also test PNG to ensure fonts render correctly
+  console.log('\n⏳ Testing PNG rendering with fonts...');
+  const png = await renderImage(template, {}, { format: 'png' });
+
+  if (png[0] === 0x89 && png[1] === 0x50 && png[2] === 0x4e && png[3] === 0x47) {
+    console.log('✅ SUCCESS: PNG generated with fonts');
+    console.log(`✅ PNG size: ${png.length} bytes`);
+  } else {
+    console.error('❌ FAIL: Invalid PNG signature');
+    process.exit(1);
+  }
+
+  console.log('\n🎉 All font file tests passed!');
+  console.log('\n✨ Font files with URLs work correctly in SDK StyleConfig');
+
+} catch (error) {
+  console.error('❌ ERROR:', error.message);
+  console.error(error.stack);
+  process.exit(1);
+}