loopwind 0.9.1

package/_dsgn/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/_dsgn/templates/image/template.tsx

@@ -0,0 +1,28 @@
+
+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 (
+    <div style={tw('w-full h-full flex flex-col justify-center items-center bg-gradient-to-br from-gray-900 to-gray-950 p-16')}>
+      <div style={tw('bg-white border rounded-xl p-12 flex flex-col max-w-4xl')}>
+        <h1 style={tw('text-7xl font-bold text-gray-900 mb-4')}>
+          {title}
+        </h1>
+        {description && (
+          <p style={tw('text-3xl text-gray-600')}>
+            {description}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

package/_dsgn/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/_dsgn/templates/kitchen-sink/template.tsx

@@ -0,0 +1,72 @@
+
+export const meta = {
+  name: "kitchen-sink",
+  description: "Comprehensive example showcasing all supported Tailwind features",
+  type: "image",
+  size: { width: 1200, height: 630 },
+  props: {
+    title: "string",
+    subtitle: "string?"
+  }
+};
+
+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/_dsgn/templates/qr-card/meta.json

@@ -0,0 +1,14 @@
+{
+  "name": "qr-card",
+  "description": "QR code card with title and URL",
+  "type": "image",
+  "size": {
+    "width": 800,
+    "height": 1000
+  },
+  "props": {
+    "title": "string",
+    "url": "string",
+    "subtitle": "string?"
+  }
+}

package/_dsgn/templates/qr-card/template.tsx

@@ -0,0 +1,39 @@
+
+// Template metadata is defined in meta.json
+
+export default function Template({ title, url, subtitle, qr, tw }) {
+  return (
+    <div style={tw('w-full h-full flex flex-col items-center justify-center bg-gradient-to-br from-indigo-600 to-purple-600 p-16')}>
+      <div style={tw('bg-white rounded-3xl p-12 flex flex-col items-center shadow-2xl max-w-2xl')}>
+        {/* Title */}
+        <h1 style={tw('text-5xl font-bold text-gray-900 mb-4 text-center')}>
+          {title}
+        </h1>
+
+        {/* Subtitle */}
+        {subtitle && (
+          <p style={tw('text-xl text-gray-600 mb-8 text-center')}>
+            {subtitle}
+          </p>
+        )}
+
+        {/* QR Code - automatically generated from the url prop */}
+        <div style={tw('bg-white p-6 rounded-2xl border-4 border-gray-200 mb-8 flex')}>
+          <img
+            src={qr(url)}
+            width={300}
+            height={300}
+            alt="QR Code"
+          />
+        </div>
+
+        {/* URL Display */}
+        <div style={tw('bg-gray-100 rounded-xl px-6 py-4 flex')}>
+          <p style={tw('text-lg text-gray-700 font-mono')}>
+            {url}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

package/_dsgn/templates/test-parent/child/meta.json

@@ -0,0 +1,11 @@
+{
+  "name": "Child Template",
+  "description": "A simple child template for testing relative paths",
+  "size": {
+    "width": 400,
+    "height": 300
+  },
+  "props": {
+    "text": "string"
+  }
+}

package/_dsgn/templates/test-parent/child/template.tsx

@@ -0,0 +1,27 @@
+
+interface ChildProps {
+  text: string;
+  tw: (classes: string) => any;
+  template: (name: string, props: any) => any;
+}
+
+export default function Child({ text, tw, template }: ChildProps) {
+  return (
+    <div
+      style={{
+        ...tw('bg-blue-500 text-white p-4 rounded-lg'),
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '10px',
+      }}
+    >
+      <div style={tw('text-2xl font-bold')}>Child Template</div>
+      <div style={tw('text-lg')}>{text}</div>
+
+      {/* Use parent-relative path to load sibling template */}
+      {template('../test-sibling', { message: 'Loaded via ../ path!' })}
+    </div>
+  );
+}

package/_dsgn/templates/test-parent/meta.json

@@ -0,0 +1,12 @@
+{
+  "name": "Parent Template",
+  "description": "A parent template that uses relative paths to load child templates",
+  "size": {
+    "width": 800,
+    "height": 600
+  },
+  "props": {
+    "title": "string",
+    "childText": "string"
+  }
+}

package/_dsgn/templates/test-parent/template.tsx

@@ -0,0 +1,30 @@
+
+interface ParentProps {
+  title: string;
+  childText: string;
+  tw: (classes: string) => any;
+  template: (name: string, props: any) => any;
+}
+
+export default function Parent({ title, childText, tw, template }: ParentProps) {
+  return (
+    <div
+      style={{
+        ...tw('bg-gradient-to-br from-purple-500 to-pink-500 p-8'),
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '100%',
+        height: '100%',
+        gap: '20px',
+      }}
+    >
+      <div style={tw('text-4xl font-bold text-white')}>{title}</div>
+      <div style={tw('text-lg text-white opacity-80')}>Testing relative template paths</div>
+
+      {/* Use relative path to load child template */}
+      {template('./child', { text: childText })}
+    </div>
+  );
+}

package/_dsgn/templates/test-sibling/meta.json

@@ -0,0 +1,11 @@
+{
+  "name": "Sibling Template",
+  "description": "A sibling template for testing parent-relative paths",
+  "size": {
+    "width": 300,
+    "height": 100
+  },
+  "props": {
+    "message": "string"
+  }
+}

package/_dsgn/templates/test-sibling/template.tsx

@@ -0,0 +1,20 @@
+
+interface SiblingProps {
+  message: string;
+  tw: (classes: string) => any;
+}
+
+export default function Sibling({ message, tw }: SiblingProps) {
+  return (
+    <div
+      style={{
+        ...tw('bg-green-500 text-white p-3 rounded'),
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <div style={tw('text-sm font-semibold')}>Sibling: {message}</div>
+    </div>
+  );
+}

package/_dsgn/templates/video/.tmp/template-1763421345296.mjs

@@ -0,0 +1,43 @@
+import * as React from "file:///Users/tommyvedvik/Dev/dsgn/node_modules/react/index.js";
+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
+  }
+};
+function Template({ title, description, frame, progress, tw }) {
+  const opacity = Math.min(1, progress * 2);
+  const translateY = 20 - progress * 20;
+  return /* @__PURE__ */ React.createElement("div", { style: tw("w-full h-full flex flex-col justify-center items-center bg-background p-16") }, /* @__PURE__ */ React.createElement("div", { style: tw("bg-card border rounded-xl p-12 flex flex-col max-w-4xl") }, /* @__PURE__ */ React.createElement(
+    "h1",
+    {
+      style: {
+        ...tw("text-7xl font-bold text-foreground mb-4"),
+        opacity,
+        transform: `translateY(${translateY}px)`
+      }
+    },
+    title
+  ), description && /* @__PURE__ */ React.createElement(
+    "p",
+    {
+      style: {
+        ...tw("text-3xl text-muted-foreground"),
+        opacity: Math.min(1, (progress - 0.3) * 2)
+      }
+    },
+    description
+  )));
+}
+export {
+  Template as default,
+  meta
+};

package/_dsgn/templates/video/.tmp/template-1763421362228.mjs

@@ -0,0 +1,43 @@
+import * as React from "file:///Users/tommyvedvik/Dev/dsgn/node_modules/react/index.js";
+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
+  }
+};
+function Template({ title, description, frame, progress, tw }) {
+  const opacity = Math.min(1, progress * 2);
+  const translateY = 20 - progress * 20;
+  return /* @__PURE__ */ React.createElement("div", { style: tw("w-full h-full flex flex-col justify-center items-center bg-background p-16") }, /* @__PURE__ */ React.createElement("div", { style: tw("bg-card border rounded-xl p-12 flex flex-col max-w-4xl") }, /* @__PURE__ */ React.createElement(
+    "h1",
+    {
+      style: {
+        ...tw("text-7xl font-bold text-foreground mb-4"),
+        opacity,
+        transform: `translateY(${translateY}px)`
+      }
+    },
+    title
+  ), description && /* @__PURE__ */ React.createElement(
+    "p",
+    {
+      style: {
+        ...tw("text-3xl text-muted-foreground"),
+        opacity: Math.min(1, (progress - 0.3) * 2)
+      }
+    },
+    description
+  )));
+}
+export {
+  Template as default,
+  meta
+};

package/_dsgn/templates/video/.tmp/template-1763421377706.mjs

@@ -0,0 +1,43 @@
+import * as React from "file:///Users/tommyvedvik/Dev/dsgn/node_modules/react/index.js";
+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
+  }
+};
+function Template({ title, description, frame, progress, tw }) {
+  const opacity = Math.min(1, progress * 2);
+  const translateY = 20 - progress * 20;
+  return /* @__PURE__ */ React.createElement("div", { style: tw("w-full h-full flex flex-col justify-center items-center bg-background p-16") }, /* @__PURE__ */ React.createElement("div", { style: tw("bg-card border rounded-xl p-12 flex flex-col max-w-4xl") }, /* @__PURE__ */ React.createElement(
+    "h1",
+    {
+      style: {
+        ...tw("text-7xl font-bold text-foreground mb-4"),
+        opacity,
+        transform: `translateY(${translateY}px)`
+      }
+    },
+    title
+  ), description && /* @__PURE__ */ React.createElement(
+    "p",
+    {
+      style: {
+        ...tw("text-3xl text-muted-foreground"),
+        opacity: Math.min(1, (progress - 0.3) * 2)
+      }
+    },
+    description
+  )));
+}
+export {
+  Template as default,
+  meta
+};

package/_dsgn/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/_dsgn/templates/video/template.tsx

@@ -0,0 +1,48 @@
+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 (
+    <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/cli.d.ts

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+export {};
+//# sourceMappingURL=cli.d.ts.map

package/dist/cli.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli.d.ts","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":""}

package/dist/cli.js

@@ -0,0 +1,70 @@
+#!/usr/bin/env node
+import { Command } from 'commander';
+import { addCommand } from './commands/add.js';
+import { listCommand } from './commands/list.js';
+import { renderCommand } from './commands/render.js';
+import { validateCommand } from './commands/validate.js';
+import { initCommand } from './commands/init.js';
+import { defaultCommand } from './commands/default.js';
+import { previewCommand } from './commands/preview.js';
+import { readFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const packageJson = JSON.parse(readFileSync(join(__dirname, '../package.json'), 'utf-8'));
+const program = new Command();
+program
+    .name('loopwind')
+    .description('A template-based CLI tool for generating images and videos using Tailwind CSS + Satori')
+    .version(packageJson.version)
+    .action(defaultCommand);
+// design add <template>
+program
+    .command('add <template>')
+    .description('Install a template from the registry')
+    .option('-r, --registry <url>', 'Custom registry URL', 'https://loopwind.dev/r')
+    .action(addCommand);
+// design list
+program
+    .command('list')
+    .description('List all installed templates')
+    .action(listCommand);
+// design render <template> [props]
+program
+    .command('render <template> [props]')
+    .description('Render a template to an image or video')
+    .option('-p, --props <file>', 'Props file (JSON) - deprecated, use positional argument instead')
+    .option('-o, --out <file>', 'Output file path')
+    .option('--format <format>', 'Output format (png, svg, webp, jpg, jpeg)', 'png')
+    .option('--frames-only', 'Render video frames only (no encoding)')
+    .option('--crf <number>', 'Video quality (0-51, lower = better quality)', '23')
+    .addHelpText('after', `
+Examples:
+  Images:
+    $ loopwind render banner-hero '{"title":"Hello World"}'
+    $ loopwind render banner-hero props.json
+    $ loopwind render banner-hero '{"title":"Test"}' --format svg
+    $ loopwind render banner-hero props.json --format webp --out banner.webp
+
+  Videos (serverless-compatible, no ffmpeg required):
+    $ loopwind render my-video '{"title":"Video Title"}'
+    $ loopwind render my-video props.json --out video.mp4
+    $ loopwind render my-video '{"title":"Test"}' --crf 20   # Higher quality
+    $ loopwind render my-video props.json --frames-only      # Just export frames
+`)
+    .action(renderCommand);
+// design validate
+program
+    .command('validate [template]')
+    .description('Validate template metadata')
+    .action(validateCommand);
+// design init
+program
+    .command('init')
+    .description('Initialize a loopwind.json config file')
+    .action(initCommand);
+// design preview <template> [props]
+program.addCommand(previewCommand);
+program.parse();
+//# sourceMappingURL=cli.js.map

package/dist/cli.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,IAAI,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAErC,MAAM,UAAU,GAAG,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAClD,MAAM,SAAS,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;AACtC,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,EAAE,iBAAiB,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC;AAE1F,MAAM,OAAO,GAAG,IAAI,OAAO,EAAE,CAAC;AAE9B,OAAO;KACJ,IAAI,CAAC,UAAU,CAAC;KAChB,WAAW,CAAC,wFAAwF,CAAC;KACrG,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC;KAC5B,MAAM,CAAC,cAAc,CAAC,CAAC;AAE1B,wBAAwB;AACxB,OAAO;KACJ,OAAO,CAAC,gBAAgB,CAAC;KACzB,WAAW,CAAC,sCAAsC,CAAC;KACnD,MAAM,CAAC,sBAAsB,EAAE,qBAAqB,EAAE,wBAAwB,CAAC;KAC/E,MAAM,CAAC,UAAU,CAAC,CAAC;AAEtB,cAAc;AACd,OAAO;KACJ,OAAO,CAAC,MAAM,CAAC;KACf,WAAW,CAAC,8BAA8B,CAAC;KAC3C,MAAM,CAAC,WAAW,CAAC,CAAC;AAEvB,mCAAmC;AACnC,OAAO;KACJ,OAAO,CAAC,2BAA2B,CAAC;KACpC,WAAW,CAAC,wCAAwC,CAAC;KACrD,MAAM,CAAC,oBAAoB,EAAE,iEAAiE,CAAC;KAC/F,MAAM,CAAC,kBAAkB,EAAE,kBAAkB,CAAC;KAC9C,MAAM,CAAC,mBAAmB,EAAE,2CAA2C,EAAE,KAAK,CAAC;KAC/E,MAAM,CAAC,eAAe,EAAE,wCAAwC,CAAC;KACjE,MAAM,CAAC,gBAAgB,EAAE,8CAA8C,EAAE,IAAI,CAAC;KAC9E,WAAW,CAAC,OAAO,EAAE;;;;;;;;;;;;;CAavB,CAAC;KACC,MAAM,CAAC,aAAa,CAAC,CAAC;AAEzB,kBAAkB;AAClB,OAAO;KACJ,OAAO,CAAC,qBAAqB,CAAC;KAC9B,WAAW,CAAC,4BAA4B,CAAC;KACzC,MAAM,CAAC,eAAe,CAAC,CAAC;AAE3B,cAAc;AACd,OAAO;KACJ,OAAO,CAAC,MAAM,CAAC;KACf,WAAW,CAAC,wCAAwC,CAAC;KACrD,MAAM,CAAC,WAAW,CAAC,CAAC;AAEvB,oCAAoC;AACpC,OAAO,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC;AAEnC,OAAO,CAAC,KAAK,EAAE,CAAC"}

package/dist/commands/add.d.ts

@@ -0,0 +1,6 @@
+interface AddOptions {
+    registry?: string;
+}
+export declare function addCommand(templateSource: string, options: AddOptions): Promise<void>;
+export {};
+//# sourceMappingURL=add.d.ts.map

package/dist/commands/add.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"add.d.ts","sourceRoot":"","sources":["../../src/commands/add.ts"],"names":[],"mappings":"AAOA,UAAU,UAAU;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAsB,UAAU,CAC9B,cAAc,EAAE,MAAM,EACtB,OAAO,EAAE,UAAU,GAClB,OAAO,CAAC,IAAI,CAAC,CA4Ff"}