loopwind 0.9.1

package/dist/commands/validate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validate.js","sourceRoot":"","sources":["../../src/commands/validate.ts"],"names":[],"mappings":"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"}

package/dist/default-templates/AGENTS.md

@@ -0,0 +1,229 @@
+# loopwind CLI - Quick Reference for AI Agents
+
+> Template-based CLI for generating images and videos using Tailwind CSS + Satori
+
+## Essential Commands
+
+### 1. Initialize Project
+```bash
+loopwind init
+```
+Creates `loopwind.json` config file. Run this first in new projects.
+
+### 2. Add Templates
+```bash
+loopwind add <template>   # From registry ('image' or 'video' default)
+```
+
+### 3. List Installed Templates
+```bash
+loopwind list
+```
+
+### 4. Render Images
+```bash
+# With inline props (JSON string)
+loopwind render banner-hero '{"title":"Hello World"}'
+
+# With props file
+loopwind render banner-hero props.json
+
+# Specify output path and format
+loopwind render banner-hero props.json --out output.png --format png
+
+# Supported formats: png (default), svg, webp, jpg, jpeg
+```
+
+### 5. Render Videos
+```bash
+# Requires ffmpeg installed
+loopwind render my-video '{"title":"Video Title"}'
+
+# With options
+loopwind render my-video props.json --preset fast --crf 23
+
+# Export frames only (no ffmpeg needed)
+loopwind render my-video props.json --frames-only
+
+# Keep frames after encoding
+loopwind render my-video props.json --keep-frames
+```
+
+### 6. Validate Templates
+```bash
+loopwind validate [template]  # Validate one or all templates
+```
+
+## Project Structure
+
+```
+project/
+├── loopwind.json           # Config (colors, fonts, paths)
+└── _loopwind/
+    ├── AGENTS.md       # This file
+    ├── templates/      # Installed templates
+    └── outputs/        # Generated files
+```
+
+## Template Types
+
+### Image Template
+**meta.json:**
+```json
+{
+  "name": "my-template",
+  "type": "image",
+  "size": { "width": 1200, "height": 630 },
+  "props": { "title": "string" }
+}
+```
+
+**template.tsx:**
+```tsx
+export default function Template({ title, tw }) {
+  return (
+    <div style={tw('flex items-center justify-center w-full h-full bg-primary')}>
+      <h1 style={tw('text-6xl font-bold text-white')}>{title}</h1>
+    </div>
+  );
+}
+```
+
+### Video Template
+**meta.json:**
+```json
+{
+  "name": "my-video",
+  "type": "video",
+  "size": { "width": 1920, "height": 1080 },
+  "video": { "fps": 30, "duration": 3 },
+  "props": { "title": "string" }
+}
+```
+
+**template.tsx:**
+```tsx
+export default function VideoTemplate({ title, tw, progress }) {
+  const opacity = progress < 0.2 ? progress / 0.2 : 1;
+
+  return (
+    <div style={tw('flex items-center justify-center w-full h-full bg-black')}>
+      <h1 style={{ ...tw('text-8xl font-bold text-white'), opacity }}>
+        {title}
+      </h1>
+    </div>
+  );
+}
+```
+
+## Template Helpers
+
+All templates receive these helper functions:
+
+```tsx
+export default function Template({
+  // User props
+  title,
+  subtitle,
+
+  // Built-in helpers
+  tw,        // Convert Tailwind classes to inline styles
+  qr,        // Generate QR code data URIs
+  image,     // Load images as data URIs
+  video,     // Load video frames (video templates only)
+  template,  // Embed other templates
+  config,    // Access loopwind.json config
+
+  // Video template props
+  frame,     // Current frame number (0, 1, 2, ...)
+  progress,  // Animation progress (0 to 1)
+}) {
+  return (
+    <div style={tw('flex w-full h-full')}>
+      {/* Your template code */}
+    </div>
+  );
+}
+```
+
+### Helper Examples
+
+**`tw()` - Tailwind to inline styles:**
+```tsx
+<div style={tw('flex items-center justify-center bg-primary text-white p-8')}>
+  <h1 style={tw('text-6xl font-bold')}>Title</h1>
+</div>
+```
+
+**`qr()` - Generate QR codes:**
+```tsx
+<img src={qr('https://example.com')} width={200} height={200} />
+```
+
+**`image()` - Embed images:**
+```tsx
+// Props: { background: "./bg.jpg" }
+<img src={image('background')} style={tw('w-full h-full')} />
+```
+
+**`video()` - Embed videos (auto-syncs to frame):**
+```tsx
+// Props: { background: "./video.mp4" }
+<img src={video('background')} style={tw('absolute inset-0')} />
+```
+
+**`template()` - Embed templates:**
+```tsx
+{template('banner-hero', { title: 'Nested', subtitle: 'Template' })}
+```
+
+## Common Workflows
+
+### Generate Image
+```bash
+loopwind init
+loopwind add banner-hero
+loopwind render banner-hero '{"title":"Hello","subtitle":"World"}'
+```
+
+### Generate Video
+```bash
+loopwind add my-video
+loopwind render my-video '{"title":"Amazing Video"}'  # Requires ffmpeg
+```
+
+### Use Custom Branding
+```bash
+loopwind init  # Detects tailwind.config.js automatically
+# Edit loopwind.json to customize colors/fonts
+loopwind add og-image
+loopwind render og-image '{"title":"My Page"}'
+```
+
+## Satori Limitations
+
+**Not Supported:**
+- Backdrop filters, 3D transforms, calc(), z-index
+
+**Workarounds:**
+- Pre-calculate values instead of calc()
+- Use DOM order instead of z-index
+
+**Fully Supported:**
+- Flexbox, colors, gradients, typography, spacing, borders, opacity, shadows, text-shadow, filters (blur, brightness, contrast, etc.)
+
+## Key Points for Agents
+
+1. Always run `loopwind init` first in new projects
+2. Check `loopwind list` to see available templates
+3. Video rendering requires ffmpeg (or use `--frames-only`)
+4. Image props are auto-detected (any prop ending in .jpg, .png, etc.)
+5. Video props are extracted at template FPS and cached
+6. Use `tw()` for all styling - it uses project's Tailwind config
+7. Templates use React/JSX but render to static images/videos
+8. Default output: `_loopwind/outputs/<template>.<format>`
+
+## Need Help?
+
+- Documentation: https://github.com/tomtev/loopwind
+- Issues: https://github.com/tomtev/loopwind/issues

package/dist/default-templates/image/meta.json

@@ -0,0 +1,13 @@
+{
+  "name": "image",
+  "description": "Simple image starter template",
+  "type": "image",
+  "size": {
+    "width": 1200,
+    "height": 630
+  },
+  "props": {
+    "title": "string",
+    "description": "string?"
+  }
+}

package/dist/default-templates/image/template.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export declare const meta: {
+    name: string;
+    description: string;
+    type: string;
+    size: {
+        width: number;
+        height: number;
+    };
+    props: {
+        title: string;
+        description: string;
+    };
+};
+export default function Template({ title, description, tw }: {
+    title: any;
+    description: any;
+    tw: any;
+}): React.JSX.Element;
+//# sourceMappingURL=template.d.ts.map

package/dist/default-templates/image/template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.d.ts","sourceRoot":"","sources":["../../../src/default-templates/image/template.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,IAAI;;;;;;;;;;;;CAShB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE;;;;CAAA,qBAe1D"}

package/dist/default-templates/image/template.js

@@ -0,0 +1,18 @@
+import React from 'react';
+export const meta = {
+    name: "image",
+    description: "Simple image starter template",
+    type: "image",
+    size: { width: 1200, height: 630 },
+    props: {
+        title: "string",
+        description: "string?"
+    }
+};
+export default function Template({ title, description, tw }) {
+    return (React.createElement("div", { style: tw('w-full h-full flex flex-col justify-center items-center bg-background p-16') },
+        React.createElement("div", { style: tw('bg-card border rounded-xl p-12 flex flex-col max-w-4xl') },
+            React.createElement("h1", { style: tw('text-7xl font-bold text-foreground mb-4') }, title),
+            description && (React.createElement("p", { style: tw('text-3xl text-muted-foreground') }, description)))));
+}
+//# sourceMappingURL=template.js.map

package/dist/default-templates/image/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/default-templates/image/template.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,IAAI,EAAE,OAAO;IACb,WAAW,EAAE,+BAA+B;IAC5C,IAAI,EAAE,OAAO;IACb,IAAI,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE;IAClC,KAAK,EAAE;QACL,KAAK,EAAE,QAAQ;QACf,WAAW,EAAE,SAAS;KACvB;CACF,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE;IACzD,OAAO,CACL,6BAAK,KAAK,EAAE,EAAE,CAAC,4EAA4E,CAAC;QAC1F,6BAAK,KAAK,EAAE,EAAE,CAAC,wDAAwD,CAAC;YACtE,4BAAI,KAAK,EAAE,EAAE,CAAC,yCAAyC,CAAC,IACrD,KAAK,CACH;YACJ,WAAW,IAAI,CACd,2BAAG,KAAK,EAAE,EAAE,CAAC,gCAAgC,CAAC,IAC3C,WAAW,CACV,CACL,CACG,CACF,CACP,CAAC;AACJ,CAAC"}

package/dist/default-templates/image/template.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+// Template metadata is defined in meta.json
+
+export default function Template({ title, description, tw }) {
+  return (
+    <div style={tw('w-full h-full flex flex-col justify-center items-center bg-background p-16')}>
+      <div style={tw('bg-card border rounded-xl p-12 flex flex-col max-w-4xl')}>
+        <h1 style={tw('text-7xl font-bold text-foreground mb-4')}>
+          {title}
+        </h1>
+        {description && (
+          <p style={tw('text-3xl text-muted-foreground')}>
+            {description}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

package/dist/default-templates/image-template/meta.json

@@ -0,0 +1,13 @@
+{
+  "name": "image",
+  "description": "Simple image starter template",
+  "type": "image",
+  "size": {
+    "width": 1200,
+    "height": 630
+  },
+  "props": {
+    "title": "string",
+    "description": "string?"
+  }
+}

package/dist/default-templates/image-template/template.tsx

@@ -0,0 +1,19 @@
+
+// Template metadata is defined in meta.json
+
+export default function Template({ title, description, tw }) {
+  return (
+    <div style={tw('w-full h-full flex flex-col justify-center items-center bg-background p-16')}>
+      <div style={tw('bg-card border rounded-xl p-12 flex flex-col max-w-4xl')}>
+        <h1 style={tw('text-7xl font-bold text-foreground mb-4')}>
+          {title}
+        </h1>
+        {description && (
+          <p style={tw('text-3xl text-muted-foreground')}>
+            {description}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

package/dist/default-templates/kitchen-sink/meta.json

@@ -0,0 +1,13 @@
+{
+  "name": "kitchen-sink",
+  "description": "Comprehensive example showcasing all supported Tailwind features",
+  "type": "image",
+  "size": {
+    "width": 1200,
+    "height": 630
+  },
+  "props": {
+    "title": "string",
+    "subtitle": "string?"
+  }
+}

package/dist/default-templates/kitchen-sink/template.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+
+// Template metadata is defined in meta.json
+
+export default function Template({ title, subtitle, tw }) {
+  return (
+    <div style={tw('w-full h-full flex flex-col bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 p-8')}>
+      {/* Header Card with Shadow */}
+      <div style={tw('bg-white rounded-2xl shadow-2xl p-8 mb-4 max-w-5xl flex flex-col')}>
+        <h1 style={tw('text-6xl font-extrabold text-indigo-600 mb-3 uppercase tracking-wide')}>
+          {title}
+        </h1>
+        {subtitle && (
+          <p style={tw('text-2xl text-gray-600 italic leading-relaxed')}>
+            {subtitle}
+          </p>
+        )}
+      </div>
+
+      {/* Feature Cards Grid */}
+      <div style={tw('flex flex-wrap gap-4 max-w-6xl flex-1')}>
+        {/* Card 1: Gradients & Shadows */}
+        <div style={tw('bg-gradient-to-br from-cyan-400 to-blue-500 rounded-xl shadow-lg p-6 flex-1 min-w-0 flex flex-col')}>
+          <h2 style={tw('text-2xl font-bold text-white mb-2 tracking-wider')}>
+            Gradients
+          </h2>
+          <p style={tw('text-sm text-white text-opacity-90 leading-normal')}>
+            Full gradient support
+          </p>
+        </div>
+
+        {/* Card 2: Borders & Transforms */}
+        <div style={tw('bg-white rounded-lg border-4 border-emerald-500 p-6 flex-1 min-w-0 flex flex-col shadow-md rotate-1')}>
+          <h2 style={tw('text-2xl font-semibold text-emerald-700 mb-2')}>
+            Transforms
+          </h2>
+          <p style={tw('text-sm text-gray-600 leading-tight')}>
+            Rotation supported!
+          </p>
+        </div>
+
+        {/* Card 3: Typography */}
+        <div style={tw('bg-gray-900 rounded-xl shadow-xl p-6 flex-1 min-w-0 flex flex-col')}>
+          <h2 style={tw('text-2xl font-black text-yellow-400 mb-2 uppercase letter-spacing-wide')}>
+            TYPOGRAPHY
+          </h2>
+          <p style={tw('text-xs text-gray-300 tracking-tight leading-loose')}>
+            All text styles work
+          </p>
+        </div>
+      </div>
+
+      {/* Bottom Info Bar */}
+      <div style={tw('mt-4 bg-white bg-opacity-20 rounded-lg px-6 py-3 max-w-5xl flex flex-row justify-between items-center')}>
+        <p style={tw('text-sm font-medium text-white')}>
+          Kitchen Sink Template
+        </p>
+        <p style={tw('text-xs text-white text-opacity-75 tracking-wide')}>
+          All features demonstrated
+        </p>
+      </div>
+    </div>
+  );
+}

package/dist/default-templates/page/meta.json

@@ -0,0 +1,17 @@
+{
+  "name": "video",
+  "description": "Animated video starter template",
+  "type": "video",
+  "size": {
+    "width": 1200,
+    "height": 630
+  },
+  "props": {
+    "title": "string",
+    "description": "string?"
+  },
+  "video": {
+    "fps": 30,
+    "duration": 3
+  }
+}

package/dist/default-templates/page/template.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+// Template metadata is defined in meta.json
+
+export default function Template({ title, description, frame, progress, tw }) {
+  // Fade in animation
+  const opacity = Math.min(1, progress * 2);
+
+  // Slide up animation
+  const translateY = 20 - (progress * 20);
+
+  return (
+    <div style={tw('w-full h-full flex flex-col justify-center items-center bg-background p-16')}>
+      <div style={tw('bg-card border rounded-xl p-12 flex flex-col max-w-4xl')}>
+        <h1
+          style={{
+            ...tw('text-7xl font-bold text-foreground mb-4'),
+            opacity,
+            transform: `translateY(${translateY}px)`
+          }}
+        >
+          {title}
+        </h1>
+        {description && (
+          <p
+            style={{
+              ...tw('text-3xl text-muted-foreground'),
+              opacity: Math.min(1, (progress - 0.3) * 2)
+            }}
+          >
+            {description}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

package/dist/default-templates/video/meta.json

@@ -0,0 +1,17 @@
+{
+  "name": "video",
+  "description": "Animated video starter template",
+  "type": "video",
+  "size": {
+    "width": 1200,
+    "height": 630
+  },
+  "props": {
+    "title": "string",
+    "description": "string?"
+  },
+  "video": {
+    "fps": 30,
+    "duration": 3
+  }
+}

package/dist/default-templates/video/template.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+export declare const meta: {
+    name: string;
+    description: string;
+    type: string;
+    size: {
+        width: number;
+        height: number;
+    };
+    props: {
+        title: string;
+        description: string;
+    };
+    video: {
+        fps: number;
+        duration: number;
+    };
+};
+export default function Template({ title, description, frame, progress, tw }: {
+    title: any;
+    description: any;
+    frame: any;
+    progress: any;
+    tw: any;
+}): React.JSX.Element;
+//# sourceMappingURL=template.d.ts.map

package/dist/default-templates/video/template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.d.ts","sourceRoot":"","sources":["../../../src/default-templates/video/template.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;CAahB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;;;;;;CAAA,qBAgC3E"}

package/dist/default-templates/video/template.js

@@ -0,0 +1,33 @@
+import React from 'react';
+export const meta = {
+    name: "video",
+    description: "Animated video starter template",
+    type: "video",
+    size: { width: 1200, height: 630 },
+    props: {
+        title: "string",
+        description: "string?"
+    },
+    video: {
+        fps: 30,
+        duration: 3
+    }
+};
+export default function Template({ title, description, frame, progress, tw }) {
+    // Fade in animation
+    const opacity = Math.min(1, progress * 2);
+    // Slide up animation
+    const translateY = 20 - (progress * 20);
+    return (React.createElement("div", { style: tw('w-full h-full flex flex-col justify-center items-center bg-background p-16') },
+        React.createElement("div", { style: tw('bg-card border rounded-xl p-12 flex flex-col max-w-4xl') },
+            React.createElement("h1", { style: {
+                    ...tw('text-7xl font-bold text-foreground mb-4'),
+                    opacity,
+                    transform: `translateY(${translateY}px)`
+                } }, title),
+            description && (React.createElement("p", { style: {
+                    ...tw('text-3xl text-muted-foreground'),
+                    opacity: Math.min(1, (progress - 0.3) * 2)
+                } }, description)))));
+}
+//# sourceMappingURL=template.js.map

package/dist/default-templates/video/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/default-templates/video/template.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,IAAI,EAAE,OAAO;IACb,WAAW,EAAE,iCAAiC;IAC9C,IAAI,EAAE,OAAO;IACb,IAAI,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE;IAClC,KAAK,EAAE;QACL,KAAK,EAAE,QAAQ;QACf,WAAW,EAAE,SAAS;KACvB;IACD,KAAK,EAAE;QACL,GAAG,EAAE,EAAE;QACP,QAAQ,EAAE,CAAC;KACZ;CACF,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC1E,oBAAoB;IACpB,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,GAAG,CAAC,CAAC,CAAC;IAE1C,qBAAqB;IACrB,MAAM,UAAU,GAAG,EAAE,GAAG,CAAC,QAAQ,GAAG,EAAE,CAAC,CAAC;IAExC,OAAO,CACL,6BAAK,KAAK,EAAE,EAAE,CAAC,4EAA4E,CAAC;QAC1F,6BAAK,KAAK,EAAE,EAAE,CAAC,wDAAwD,CAAC;YACtE,4BACE,KAAK,EAAE;oBACL,GAAG,EAAE,CAAC,yCAAyC,CAAC;oBAChD,OAAO;oBACP,SAAS,EAAE,cAAc,UAAU,KAAK;iBACzC,IAEA,KAAK,CACH;YACJ,WAAW,IAAI,CACd,2BACE,KAAK,EAAE;oBACL,GAAG,EAAE,CAAC,gCAAgC,CAAC;oBACvC,OAAO,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,QAAQ,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;iBAC3C,IAEA,WAAW,CACV,CACL,CACG,CACF,CACP,CAAC;AACJ,CAAC"}

package/dist/default-templates/video/template.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+// Template metadata is defined in meta.json
+
+export default function Template({ title, description, frame, progress, tw }) {
+  // Fade in animation
+  const opacity = Math.min(1, progress * 2);
+
+  // Slide up animation
+  const translateY = 20 - (progress * 20);
+
+  return (
+    <div style={tw('w-full h-full flex flex-col justify-center items-center bg-background p-16')}>
+      <div style={tw('bg-card border rounded-xl p-12 flex flex-col max-w-4xl')}>
+        <h1
+          style={{
+            ...tw('text-7xl font-bold text-foreground mb-4'),
+            opacity,
+            transform: `translateY(${translateY}px)`
+          }}
+        >
+          {title}
+        </h1>
+        {description && (
+          <p
+            style={{
+              ...tw('text-3xl text-muted-foreground'),
+              opacity: Math.min(1, (progress - 0.3) * 2)
+            }}
+          >
+            {description}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

package/dist/default-templates/video-template/meta.json

@@ -0,0 +1,17 @@
+{
+  "name": "video",
+  "description": "Animated video starter template",
+  "type": "video",
+  "size": {
+    "width": 1200,
+    "height": 630
+  },
+  "props": {
+    "title": "string",
+    "description": "string?"
+  },
+  "video": {
+    "fps": 30,
+    "duration": 3
+  }
+}

package/dist/default-templates/video-template/template.tsx

@@ -0,0 +1,36 @@
+
+// Template metadata is defined in meta.json
+
+export default function Template({ title, description, frame, progress, tw }) {
+  // Fade in animation
+  const opacity = Math.min(1, progress * 2);
+
+  // Slide up animation
+  const translateY = 20 - (progress * 20);
+
+  return (
+    <div style={tw('w-full h-full flex flex-col justify-center items-center bg-background p-16')}>
+      <div style={tw('bg-card border rounded-xl p-12 flex flex-col max-w-4xl')}>
+        <h1
+          style={{
+            ...tw('text-7xl font-bold text-foreground mb-4'),
+            opacity,
+            transform: `translateY(${translateY}px)`
+          }}
+        >
+          {title}
+        </h1>
+        {description && (
+          <p
+            style={{
+              ...tw('text-3xl text-muted-foreground'),
+              opacity: Math.min(1, (progress - 0.3) * 2)
+            }}
+          >
+            {description}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}