loopwind 0.9.1

package/dist/sdk/template.js

@@ -0,0 +1,60 @@
+/**
+ * Define a template programmatically for use in serverless environments
+ *
+ * @example
+ * ```typescript
+ * const ogImage = defineTemplate({
+ *   name: 'og-image',
+ *   type: 'image',
+ *   size: { width: 1200, height: 630 },
+ *   render: ({ tw, title, description }) => (
+ *     <div style={tw('flex flex-col w-full h-full bg-white p-12')}>
+ *       <h1 style={tw('text-6xl font-bold')}>{title}</h1>
+ *       <p style={tw('text-2xl text-gray-600')}>{description}</p>
+ *     </div>
+ *   )
+ * });
+ * ```
+ */
+export function defineTemplate(definition) {
+    // Validate definition
+    if (!definition.name) {
+        throw new Error('Template definition must have a name');
+    }
+    if (!definition.size || !definition.size.width || !definition.size.height) {
+        throw new Error('Template definition must have a size with width and height');
+    }
+    if (!definition.render || typeof definition.render !== 'function') {
+        throw new Error('Template definition must have a render function');
+    }
+    // Set defaults
+    const type = definition.type || 'image';
+    if (type === 'video' && !definition.video) {
+        throw new Error('Video templates must have video metadata (fps, duration)');
+    }
+    return {
+        ...definition,
+        type,
+    };
+}
+/**
+ * Convert a template definition to template metadata
+ * @internal
+ */
+export function templateToMeta(template) {
+    return {
+        name: template.name,
+        description: template.name, // Use name as description for SDK templates
+        type: template.type || 'image',
+        size: template.size,
+        video: template.video,
+        props: {}, // SDK templates don't need props metadata
+        fonts: template.fonts?.map(fontName => ({
+            name: fontName,
+            path: `fonts/${fontName}.woff`,
+            weight: 400,
+            style: 'normal',
+        })),
+    };
+}
+//# sourceMappingURL=template.js.map

package/dist/sdk/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../src/sdk/template.ts"],"names":[],"mappings":"AAWA;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,cAAc,CAC5B,UAAsC;IAEtC,sBAAsB;IACtB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;QACrB,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAC;IAC1D,CAAC;IAED,IAAI,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;QAC1E,MAAM,IAAI,KAAK,CAAC,4DAA4D,CAAC,CAAC;IAChF,CAAC;IAED,IAAI,CAAC,UAAU,CAAC,MAAM,IAAI,OAAO,UAAU,CAAC,MAAM,KAAK,UAAU,EAAE,CAAC;QAClE,MAAM,IAAI,KAAK,CAAC,iDAAiD,CAAC,CAAC;IACrE,CAAC;IAED,eAAe;IACf,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,IAAI,OAAO,CAAC;IAExC,IAAI,IAAI,KAAK,OAAO,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;QAC1C,MAAM,IAAI,KAAK,CAAC,0DAA0D,CAAC,CAAC;IAC9E,CAAC;IAED,OAAO;QACL,GAAG,UAAU;QACb,IAAI;KACL,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,cAAc,CAAC,QAA4B;IACzD,OAAO;QACL,IAAI,EAAE,QAAQ,CAAC,IAAI;QACnB,WAAW,EAAE,QAAQ,CAAC,IAAI,EAAE,4CAA4C;QACxE,IAAI,EAAE,QAAQ,CAAC,IAAI,IAAI,OAAO;QAC9B,IAAI,EAAE,QAAQ,CAAC,IAAI;QACnB,KAAK,EAAE,QAAQ,CAAC,KAAK;QACrB,KAAK,EAAE,EAAE,EAAE,0CAA0C;QACrD,KAAK,EAAE,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;YACtC,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,SAAS,QAAQ,OAAO;YAC9B,MAAM,EAAE,GAAG;YACX,KAAK,EAAE,QAAiB;SACzB,CAAC,CAAC;KACJ,CAAC;AACJ,CAAC"}

package/dist/types/config.d.ts

@@ -0,0 +1,62 @@
+export interface DesignConfig {
+    colors?: {
+        [key: string]: string | {
+            [shade: string]: string;
+        };
+    };
+    fonts?: {
+        sans?: string[] | {
+            family: string[];
+            files?: Array<{
+                path: string;
+                weight?: number;
+                style?: string;
+            }>;
+        };
+        serif?: string[] | {
+            family: string[];
+            files?: Array<{
+                path: string;
+                weight?: number;
+                style?: string;
+            }>;
+        };
+        mono?: string[] | {
+            family: string[];
+            files?: Array<{
+                path: string;
+                weight?: number;
+                style?: string;
+            }>;
+        };
+        [key: string]: string[] | {
+            family: string[];
+            files?: Array<{
+                path: string;
+                weight?: number;
+                style?: string;
+            }>;
+        } | undefined;
+    };
+    tokens?: {
+        spacing?: {
+            [key: string]: string;
+        };
+        borderRadius?: {
+            [key: string]: string;
+        };
+        [key: string]: any;
+    };
+    defaults?: {
+        width?: number;
+        height?: number;
+        [key: string]: any;
+    };
+    paths?: {
+        root?: string;
+        templates?: string;
+        outputs?: string;
+    };
+}
+export declare const DEFAULT_CONFIG: DesignConfig;
+//# sourceMappingURL=config.d.ts.map

package/dist/types/config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/types/config.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAE3B,MAAM,CAAC,EAAE;QACP,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG;YAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;SAAE,CAAC;KACrD,CAAC;IAGF,KAAK,CAAC,EAAE;QACN,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG;YAChB,MAAM,EAAE,MAAM,EAAE,CAAC;YACjB,KAAK,CAAC,EAAE,KAAK,CAAC;gBAAE,IAAI,EAAE,MAAM,CAAC;gBAAC,MAAM,CAAC,EAAE,MAAM,CAAC;gBAAC,KAAK,CAAC,EAAE,MAAM,CAAA;aAAE,CAAC,CAAC;SAClE,CAAC;QACF,KAAK,CAAC,EAAE,MAAM,EAAE,GAAG;YACjB,MAAM,EAAE,MAAM,EAAE,CAAC;YACjB,KAAK,CAAC,EAAE,KAAK,CAAC;gBAAE,IAAI,EAAE,MAAM,CAAC;gBAAC,MAAM,CAAC,EAAE,MAAM,CAAC;gBAAC,KAAK,CAAC,EAAE,MAAM,CAAA;aAAE,CAAC,CAAC;SAClE,CAAC;QACF,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG;YAChB,MAAM,EAAE,MAAM,EAAE,CAAC;YACjB,KAAK,CAAC,EAAE,KAAK,CAAC;gBAAE,IAAI,EAAE,MAAM,CAAC;gBAAC,MAAM,CAAC,EAAE,MAAM,CAAC;gBAAC,KAAK,CAAC,EAAE,MAAM,CAAA;aAAE,CAAC,CAAC;SAClE,CAAC;QACF,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG;YAAE,MAAM,EAAE,MAAM,EAAE,CAAC;YAAC,KAAK,CAAC,EAAE,KAAK,CAAC;gBAAE,IAAI,EAAE,MAAM,CAAC;gBAAC,MAAM,CAAC,EAAE,MAAM,CAAC;gBAAC,KAAK,CAAC,EAAE,MAAM,CAAA;aAAE,CAAC,CAAA;SAAE,GAAG,SAAS,CAAC;KAC9H,CAAC;IAGF,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE;YAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;SAAE,CAAC;QACpC,YAAY,CAAC,EAAE;YAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;SAAE,CAAC;QACzC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACpB,CAAC;IAGF,QAAQ,CAAC,EAAE;QACT,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACpB,CAAC;IAGF,KAAK,CAAC,EAAE;QACN,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;CACH;AAGD,eAAO,MAAM,cAAc,EAAE,YAoD5B,CAAC"}

package/dist/types/config.js

@@ -0,0 +1,47 @@
+// shadcn/ui design system defaults (zinc theme)
+export const DEFAULT_CONFIG = {
+    colors: {
+        // Primary colors
+        primary: '#18181b',
+        'primary-foreground': '#fafafa',
+        // Secondary colors
+        secondary: '#f4f4f5',
+        'secondary-foreground': '#18181b',
+        // Background colors
+        background: '#ffffff',
+        foreground: '#09090b',
+        // Muted colors
+        muted: '#f4f4f5',
+        'muted-foreground': '#71717a',
+        // Accent colors
+        accent: '#f4f4f5',
+        'accent-foreground': '#18181b',
+        // Destructive
+        destructive: '#ef4444',
+        'destructive-foreground': '#fafafa',
+        // Border and input
+        border: '#e4e4e7',
+        input: '#e4e4e7',
+        ring: '#18181b',
+        // Card
+        card: '#ffffff',
+        'card-foreground': '#09090b',
+        // Popover
+        popover: '#ffffff',
+        'popover-foreground': '#09090b',
+    },
+    fonts: {
+        sans: ['Noto Sans', 'system-ui', '-apple-system', 'sans-serif'],
+        serif: ['Georgia', 'serif'],
+        mono: ['Courier New', 'monospace'],
+    },
+    tokens: {
+        borderRadius: {
+            sm: '0.25rem',
+            md: '0.375rem',
+            lg: '0.5rem',
+            xl: '0.75rem',
+        },
+    },
+};
+//# sourceMappingURL=config.js.map

package/dist/types/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","sourceRoot":"","sources":["../../src/types/config.ts"],"names":[],"mappings":"AA6CA,gDAAgD;AAChD,MAAM,CAAC,MAAM,cAAc,GAAiB;IAC1C,MAAM,EAAE;QACN,iBAAiB;QACjB,OAAO,EAAE,SAAS;QAClB,oBAAoB,EAAE,SAAS;QAE/B,mBAAmB;QACnB,SAAS,EAAE,SAAS;QACpB,sBAAsB,EAAE,SAAS;QAEjC,oBAAoB;QACpB,UAAU,EAAE,SAAS;QACrB,UAAU,EAAE,SAAS;QAErB,eAAe;QACf,KAAK,EAAE,SAAS;QAChB,kBAAkB,EAAE,SAAS;QAE7B,gBAAgB;QAChB,MAAM,EAAE,SAAS;QACjB,mBAAmB,EAAE,SAAS;QAE9B,cAAc;QACd,WAAW,EAAE,SAAS;QACtB,wBAAwB,EAAE,SAAS;QAEnC,mBAAmB;QACnB,MAAM,EAAE,SAAS;QACjB,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QAEf,OAAO;QACP,IAAI,EAAE,SAAS;QACf,iBAAiB,EAAE,SAAS;QAE5B,UAAU;QACV,OAAO,EAAE,SAAS;QAClB,oBAAoB,EAAE,SAAS;KAChC;IACD,KAAK,EAAE;QACL,IAAI,EAAE,CAAC,WAAW,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,CAAC;QAC/D,KAAK,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC;QAC3B,IAAI,EAAE,CAAC,aAAa,EAAE,WAAW,CAAC;KACnC;IACD,MAAM,EAAE;QACN,YAAY,EAAE;YACZ,EAAE,EAAE,SAAS;YACb,EAAE,EAAE,UAAU;YACd,EAAE,EAAE,QAAQ;YACZ,EAAE,EAAE,SAAS;SACd;KACF;CACF,CAAC"}

package/dist/types/template.d.ts

@@ -0,0 +1,79 @@
+import type { DesignConfig } from './config.js';
+export type TemplateType = "image" | "video" | "presentation" | "website";
+export interface TemplateMeta {
+    name: string;
+    description: string;
+    type?: TemplateType;
+    size: {
+        width: number;
+        height: number;
+        scale?: number;
+    };
+    props: Record<string, string>;
+    fonts?: Array<{
+        name: string;
+        path: string;
+        weight: number;
+        style: "normal" | "italic";
+    }>;
+    templates?: string[] | Record<string, {
+        name: string;
+        size?: {
+            width: number;
+            height: number;
+        };
+        scale?: number;
+    }>;
+    video?: {
+        fps: number;
+        duration: number;
+    };
+    presentation?: {
+        slides: Array<{
+            name: string;
+            size?: {
+                width: number;
+                height: number;
+            };
+        }>;
+        transition?: "fade" | "slide" | "none";
+    };
+    website?: {
+        pages: Array<{
+            route: string;
+            component: string;
+        }>;
+        output?: "static" | "spa";
+    };
+}
+export interface TemplateProps {
+    [key: string]: any;
+    frame?: number;
+    progress?: number;
+    config?: DesignConfig;
+    tw?: (classes: string) => any;
+    qr?: (text: string, options?: {
+        width?: number;
+        margin?: number;
+        errorCorrectionLevel?: 'L' | 'M' | 'Q' | 'H';
+        color?: {
+            dark?: string;
+            light?: string;
+        };
+    }) => string;
+    template?: (name: string, props?: Record<string, any>) => string;
+}
+export interface Template {
+    meta: TemplateMeta;
+    default: (props: TemplateProps) => JSX.Element;
+}
+export interface RegistryTemplate {
+    name: string;
+    version: string;
+    description: string;
+    files: Array<{
+        path: string;
+        content: string;
+    }>;
+}
+//# sourceMappingURL=template.d.ts.map

package/dist/types/template.d.ts.map

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

package/dist/types/template.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=template.js.map

package/dist/types/template.js.map

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

package/examples/nextjs-api/README.md

@@ -0,0 +1,180 @@
+# dsgn Next.js API Example
+
+This example demonstrates how to use the **dsgn SDK** in Next.js API routes to generate images and videos programmatically.
+
+## Features
+
+- ✅ Serverless image generation (OG images, social cards)
+- ✅ Serverless video generation (intro videos, animations)
+- ✅ No file system dependencies - templates defined in code
+- ✅ Works on Vercel, Netlify, and other serverless platforms
+- ✅ Edge Runtime compatible
+
+## Setup
+
+1. Install dependencies:
+   ```bash
+   npm install
+   ```
+
+2. Run the development server:
+   ```bash
+   npm run dev
+   ```
+
+3. Test the API routes:
+   - Image: `http://localhost:3000/api/og-image?title=Hello&description=World`
+   - Video: `http://localhost:3000/api/intro-video?title=Welcome`
+
+## API Routes
+
+### `/api/og-image` - Generate OG Images
+
+Generate Open Graph images dynamically:
+
+```typescript
+import { defineTemplate, renderImage } from 'dsgn/sdk';
+
+const ogTemplate = defineTemplate({
+  name: 'og-image',
+  size: { width: 1200, height: 630 },
+  render: ({ tw, title, description }) => (
+    <div style={tw('flex flex-col w-full h-full bg-gradient-to-br from-blue-600 to-purple-700 p-12')}>
+      <h1 style={tw('text-6xl font-bold text-white')}>{title}</h1>
+      <p style={tw('text-2xl text-white/80')}>{description}</p>
+    </div>
+  ),
+});
+
+export default async function handler(req, res) {
+  const png = await renderImage(ogTemplate, {
+    title: req.query.title,
+    description: req.query.description,
+  });
+
+  res.setHeader('Content-Type', 'image/png');
+  res.send(png);
+}
+```
+
+**Usage:**
+```bash
+curl http://localhost:3000/api/og-image?title=Hello&description=World > image.png
+```
+
+### `/api/intro-video` - Generate Videos
+
+Generate MP4 videos dynamically:
+
+```typescript
+import { defineTemplate, renderVideo } from 'dsgn/sdk';
+
+const introTemplate = defineTemplate({
+  name: 'intro-video',
+  type: 'video',
+  size: { width: 1920, height: 1080 },
+  video: { fps: 30, duration: 3 },
+  render: ({ tw, progress, title }) => (
+    <div style={tw('flex items-center justify-center w-full h-full bg-black')}>
+      <h1 style={{ ...tw('text-8xl font-bold text-white'), opacity: progress }}>
+        {title}
+      </h1>
+    </div>
+  ),
+});
+
+export default async function handler(req, res) {
+  const mp4 = await renderVideo(introTemplate, {
+    title: req.query.title,
+  });
+
+  res.setHeader('Content-Type', 'video/mp4');
+  res.send(mp4);
+}
+```
+
+**Usage:**
+```bash
+curl http://localhost:3000/api/intro-video?title=Welcome > video.mp4
+```
+
+## Deploy to Vercel
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/tomtev/dsgn/tree/main/examples/nextjs-api)
+
+```bash
+npm install -g vercel
+vercel
+```
+
+## Key Concepts
+
+### 1. **Define Templates Programmatically**
+
+No file system needed - define templates directly in code:
+
+```typescript
+const template = defineTemplate({
+  name: 'my-template',
+  size: { width: 1200, height: 630 },
+  render: ({ tw, title }) => (
+    <div style={tw('flex items-center justify-center w-full h-full bg-white')}>
+      <h1 style={tw('text-4xl font-bold')}>{title}</h1>
+    </div>
+  ),
+});
+```
+
+### 2. **Render to Buffer**
+
+Get image/video as Buffer for maximum flexibility:
+
+```typescript
+const png = await renderImage(template, { title: 'Hello' });
+const mp4 = await renderVideo(videoTemplate, { title: 'Intro' });
+
+// Can save to file, return in API, upload to S3, etc.
+```
+
+### 3. **Tailwind Styling**
+
+Use Tailwind utility classes with the `tw` helper:
+
+```typescript
+render: ({ tw, title }) => (
+  <div style={tw('flex flex-col gap-4 p-8 bg-gradient-to-br from-blue-600 to-purple-700')}>
+    <h1 style={tw('text-6xl font-bold text-white')}>{title}</h1>
+  </div>
+)
+```
+
+### 4. **Video Animations**
+
+Use `progress` and `frame` props for animations:
+
+```typescript
+render: ({ tw, progress, title }) => {
+  const opacity = progress; // 0 to 1
+  const scale = 0.5 + progress * 0.5; // 0.5 to 1
+
+  return (
+    <div style={tw('flex items-center justify-center w-full h-full')}>
+      <h1 style={{ ...tw('text-8xl font-bold'), opacity, transform: `scale(${scale})` }}>
+        {title}
+      </h1>
+    </div>
+  );
+}
+```
+
+## Performance
+
+- **Images**: ~50-100ms per image (PNG/JPEG/WebP)
+- **Videos**: ~7s for 3-second Full HD video (1920×1080 @ 30fps)
+- **Edge Runtime**: Compatible with Vercel Edge Functions for global distribution
+
+## Learn More
+
+- [dsgn Documentation](https://dsgncli.com)
+- [Next.js API Routes](https://nextjs.org/docs/api-routes/introduction)
+- [Vercel Deployment](https://vercel.com/docs)

package/examples/nextjs-api/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "loopwind-nextjs-example",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "loopwind": "latest",
+    "next": "^14.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.2.0",
+    "typescript": "^5.0.0"
+  }
+}

package/examples/nextjs-api/pages/api/intro-video.ts

@@ -0,0 +1,53 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { defineTemplate, renderVideo } from 'dsgn/sdk';
+
+// Define video template programmatically
+const introTemplate = defineTemplate({
+  name: 'intro-video',
+  type: 'video',
+  size: { width: 1920, height: 1080 },
+  video: { fps: 30, duration: 3 },
+  render: ({ tw, progress, title }) => {
+    // Fade in animation
+    const opacity = progress < 0.5 ? progress / 0.5 : 1;
+
+    return (
+      <div
+        style={tw(
+          'flex items-center justify-center w-full h-full bg-gradient-to-br from-black to-gray-900'
+        )}
+      >
+        <h1
+          style={{
+            ...tw('text-8xl font-bold text-white'),
+            opacity,
+          }}
+        >
+          {title}
+        </h1>
+      </div>
+    );
+  },
+});
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  const { title = 'Welcome!' } = req.query;
+
+  try {
+    // Render video as MP4 buffer
+    const mp4 = await renderVideo(introTemplate, {
+      title: String(title),
+    });
+
+    // Return video
+    res.setHeader('Content-Type', 'video/mp4');
+    res.setHeader('Cache-Control', 's-maxage=3600');
+    res.send(mp4);
+  } catch (error) {
+    console.error('Error rendering video:', error);
+    res.status(500).json({ error: 'Failed to render video' });
+  }
+}

package/examples/nextjs-api/pages/api/og-image.ts

@@ -0,0 +1,50 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { defineTemplate, renderImage } from 'dsgn/sdk';
+
+// Define template programmatically
+const ogTemplate = defineTemplate({
+  name: 'og-image',
+  type: 'image',
+  size: { width: 1200, height: 630 },
+  render: ({ tw, title, description }) => (
+    <div
+      style={tw(
+        'flex flex-col w-full h-full bg-gradient-to-br from-blue-600 to-purple-700 p-12 justify-between'
+      )}
+    >
+      <div style={tw('flex items-center gap-4')}>
+        <div style={tw('w-12 h-12 rounded-full bg-white/20')} />
+        <span style={tw('text-white/80 text-2xl')}>yoursite.com</span>
+      </div>
+
+      <div>
+        <h1 style={tw('text-6xl font-bold text-white mb-4')}>{title}</h1>
+        <p style={tw('text-2xl text-white/80')}>{description}</p>
+      </div>
+    </div>
+  ),
+});
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  const { title = 'Welcome', description = 'Generated with dsgn SDK' } =
+    req.query;
+
+  try {
+    // Render image as PNG buffer
+    const png = await renderImage(ogTemplate, {
+      title: String(title),
+      description: String(description),
+    });
+
+    // Return image
+    res.setHeader('Content-Type', 'image/png');
+    res.setHeader('Cache-Control', 's-maxage=86400, stale-while-revalidate');
+    res.send(png);
+  } catch (error) {
+    console.error('Error rendering OG image:', error);
+    res.status(500).json({ error: 'Failed to render image' });
+  }
+}

package/netlify.toml

@@ -0,0 +1,13 @@
+[build]
+  base = "website"
+  command = "npm run build"
+  publish = "dist"
+
+[build.environment]
+  NODE_VERSION = "18"
+
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200
+

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "loopwind",
+  "version": "0.9.1",
+  "description": "A CLI tool for AI code agents and developers for generating images and videos.",
+  "type": "module",
+  "bin": {
+    "loopwind": "./dist/cli.js",
+    "lw": "./dist/cli.js"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/cli.d.ts",
+      "default": "./dist/cli.js"
+    },
+    "./sdk": {
+      "types": "./dist/sdk/index.d.ts",
+      "default": "./dist/sdk/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsc && npm run copy-templates",
+    "copy-templates": "cp -r src/default-templates dist/",
+    "dev": "tsc --watch",
+    "prepublishOnly": "npm run build",
+    "postinstall": "patch-package"
+  },
+  "keywords": [
+    "design",
+    "cli",
+    "templates",
+    "satori",
+    "tailwind",
+    "image-generation",
+    "og-image",
+    "social-media",
+    "marketing"
+  ],
+  "author": "Tommy Vedvik",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tomtev/loopwind.git"
+  },
+  "homepage": "https://loopwind.dev",
+  "bugs": {
+    "url": "https://github.com/tomtev/loopwind/issues"
+  },
+  "dependencies": {
+    "@resvg/resvg-js": "^2.6.0",
+    "boxen": "^7.1.1",
+    "chalk": "^5.3.0",
+    "chalk-animation": "^2.0.3",
+    "chokidar": "^4.0.3",
+    "clsx": "^2.1.1",
+    "commander": "^12.0.0",
+    "esbuild": "^0.27.0",
+    "express": "^5.1.0",
+    "gradient-string": "^3.0.0",
+    "h264-mp4-encoder": "^1.0.12",
+    "mediabunny": "^1.25.0",
+    "open": "^11.0.0",
+    "ora": "^8.0.1",
+    "pngjs": "^7.0.0",
+    "qrcode": "^1.5.4",
+    "react": "^18.2.0",
+    "satori": "^0.18.3",
+    "sharp": "^0.34.5",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^3.4.1"
+  },
+  "devDependencies": {
+    "@types/chalk-animation": "^1.6.3",
+    "@types/express": "^5.0.5",
+    "@types/gradient-string": "^1.1.6",
+    "@types/node": "^20.11.0",
+    "@types/qrcode": "^1.5.6",
+    "@types/react": "^18.2.48",
+    "patch-package": "^8.0.1",
+    "typescript": "^5.3.3"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}