loopwind 0.23.0 → 0.24.1

package/REGISTRY_SETUP.md

@@ -1,363 +0,0 @@
-# Setting Up the Template Registry
-
-## Overview
-
-The registry is a simple HTTP endpoint that serves template JSON files. Users run `loopwind add template-name` and it fetches from `https://loopwind.dev/r/template-name`.
-
-## Quick Solutions
-
-### Option 1: Static JSON Files (Simplest)
-
-Host static JSON files on any static hosting:
-
-**1. Create template JSON files:**
-
-```
-loopwind.dev/
-└── r/
-    ├── banner-hero.json
-    ├── product-card.json
-    └── social-og.json
-```
-
-**2. Each JSON file contains:**
-
-```json
-{
-  "name": "banner-hero",
-  "version": "1.0.0",
-  "description": "Hero banner with gradient background",
-  "files": [
-    {
-      "path": "template.tsx",
-      "content": "export const meta = {...};\n\nexport default function BannerHero({...}) {...}"
-    }
-  ]
-}
-```
-
-**3. Configure your web server:**
-
-```nginx
-# nginx
-location /r/ {
-    # Rewrite /r/banner-hero to /r/banner-hero.json
-    rewrite ^/r/(.+)$ /r/$1.json break;
-}
-```
-
-**4. Host on:**
-- Vercel/Netlify (free)
-- Cloudflare Pages (free)
-- GitHub Pages (free)
-- Any static host
-
-### Option 2: Serverless API (Recommended)
-
-Create a simple API with Vercel/Netlify functions:
-
-**File: `api/templates/[name].js`**
-
-```javascript
-// Vercel/Next.js API route
-export default function handler(req, res) {
-  const { name } = req.query;
-
-  // Load template from database or files
-  const template = getTemplate(name);
-
-  if (!template) {
-    return res.status(404).json({ error: 'Template not found' });
-  }
-
-  res.json(template);
-}
-
-function getTemplate(name) {
-  // Option A: From database
-  // return db.templates.findOne({ name });
-
-  // Option B: From static files
-  const templates = {
-    'banner-hero': {
-      name: 'banner-hero',
-      version: '1.0.0',
-      description: 'Hero banner',
-      files: [
-        {
-          path: 'template.tsx',
-          content: require('./templates/banner-hero.tsx.txt')
-        }
-      ]
-    }
-  };
-
-  return templates[name];
-}
-```
-
-**Deploy:**
-
-```bash
-vercel deploy
-# or
-netlify deploy
-```
-
-## Creating Template JSON Files
-
-### Script to Convert Local Templates
-
-```javascript
-// scripts/create-registry-json.js
-const fs = require('fs');
-const path = require('path');
-
-const templatesDir = './design-templates';
-const outputDir = './registry';
-
-// Read all templates
-const templates = fs.readdirSync(templatesDir);
-
-templates.forEach(name => {
-  const templatePath = path.join(templatesDir, name);
-  const files = [];
-
-  // Read all files in template
-  const entries = fs.readdirSync(templatePath);
-  entries.forEach(file => {
-    const filePath = path.join(templatePath, file);
-    const content = fs.readFileSync(filePath, 'utf-8');
-    files.push({
-      path: file,
-      content: content
-    });
-  });
-
-  // Create registry JSON
-  const registryJson = {
-    name: name,
-    version: '1.0.0',
-    description: `Template: ${name}`,
-    files: files
-  };
-
-  // Write to output
-  const outputPath = path.join(outputDir, `${name}.json`);
-  fs.writeFileSync(outputPath, JSON.stringify(registryJson, null, 2));
-
-  console.log(`Created: ${outputPath}`);
-});
-```
-
-**Run:**
-
-```bash
-node scripts/create-registry-json.js
-```
-
-This creates:
-
-```
-registry/
-├── banner-hero.json
-├── product-card.json
-└── social-og.json
-```
-
-Upload these to `loopwind.dev/r/`
-
-## Example Hosting Setups
-
-### Vercel (Recommended)
-
-**1. Create Next.js project:**
-
-```bash
-npx create-next-app@latest loopwind-registry
-cd loopwind-registry
-```
-
-**2. Create API route:**
-
-```typescript
-// pages/api/r/[template].ts
-import { NextApiRequest, NextApiResponse } from 'next';
-import templates from '../../../data/templates.json';
-
-export default function handler(req: NextApiRequest, res: NextApiResponse) {
-  const { template } = req.query;
-
-  const templateData = templates[template as string];
-
-  if (!templateData) {
-    return res.status(404).json({ error: 'Template not found' });
-  }
-
-  res.json(templateData);
-}
-```
-
-**3. Deploy:**
-
-```bash
-vercel
-```
-
-**4. Configure domain:**
-
-Set `loopwind.dev` to point to your Vercel project.
-
-### Cloudflare Workers
-
-```javascript
-// worker.js
-const templates = {
-  'banner-hero': {
-    name: 'banner-hero',
-    version: '1.0.0',
-    files: [...]
-  }
-};
-
-export default {
-  async fetch(request) {
-    const url = new URL(request.url);
-    const templateName = url.pathname.replace('/r/', '');
-
-    const template = templates[templateName];
-
-    if (!template) {
-      return new Response('Not found', { status: 404 });
-    }
-
-    return new Response(JSON.stringify(template), {
-      headers: { 'Content-Type': 'application/json' }
-    });
-  }
-}
-```
-
-### Static Files on Vercel
-
-**1. Create JSON files:**
-
-```
-public/
-└── r/
-    ├── banner-hero.json
-    ├── product-card.json
-    └── index.json  (list of all templates)
-```
-
-**2. Add to `vercel.json`:**
-
-```json
-{
-  "rewrites": [
-    { "source": "/r/:template", "destination": "/r/:template.json" }
-  ]
-}
-```
-
-**3. Deploy:**
-
-```bash
-vercel deploy
-```
-
-## Database-Backed Registry (Advanced)
-
-For a production registry with versioning, search, etc.:
-
-```typescript
-// API endpoint
-app.get('/r/:name', async (req, res) => {
-  const { name } = req.params;
-  const { version } = req.query;
-
-  const template = await db.templates.findOne({
-    name,
-    version: version || 'latest'
-  });
-
-  if (!template) {
-    return res.status(404).json({ error: 'Template not found' });
-  }
-
-  res.json(template);
-});
-
-// Users can install specific versions
-// loopwind add banner-hero@1.2.0
-```
-
-## Testing Your Registry
-
-Once deployed, test it:
-
-```bash
-# Test the endpoint
-curl https://loopwind.dev/r/banner-hero
-
-# Should return JSON like:
-{
-  "name": "banner-hero",
-  "version": "1.0.0",
-  "files": [...]
-}
-
-# Test with CLI
-loopwind add banner-hero
-```
-
-## Until Registry is Ready
-
-Ship with bundled templates in the CLI package itself (see below).
-
-## Bundled Templates (Alternative)
-
-Include templates directly in the npm package:
-
-**1. Create templates folder:**
-
-```
-loopwind/
-├── dist/
-└── bundled-templates/
-    ├── banner-hero.json
-    ├── product-card.json
-    └── social-og.json
-```
-
-**2. Update installer to check bundled first:**
-
-```typescript
-export async function fetchTemplate(name: string) {
-  // Try bundled templates first
-  const bundledPath = path.join(__dirname, '../bundled-templates', `${name}.json`);
-
-  try {
-    const content = await fs.readFile(bundledPath, 'utf-8');
-    return JSON.parse(content);
-  } catch {
-    // Fall back to registry
-    return fetchFromRegistry(name);
-  }
-}
-```
-
-**3. Users get core templates immediately:**
-
-```bash
-npm install -g loopwind
-loopwind add banner-hero  # Works offline!
-```
-
-## Recommended Approach
-
-1. **Short term:** Bundle 3-5 core templates with the CLI
-2. **Medium term:** Set up static JSON hosting on Vercel/Cloudflare
-3. **Long term:** Build proper registry with database, versioning, search
-
-This way users can use it immediately while you build out the full registry!

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

@@ -1,20 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,18 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,20 +0,0 @@
-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/kitchen-sink/template.tsx

@@ -1,64 +0,0 @@
-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/template.tsx

@@ -1,37 +0,0 @@
-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.d.ts

@@ -1,26 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,33 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,37 +0,0 @@
-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/website/pages/home.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-
-// Template metadata is defined in meta.json
-
-export default function Template({ title, description}) {
-  return (
-    <html>
-      <head>
-        <title>{title}</title>
-      </head>
-      <body>
-        <h1>{title}</h1>
-        <p>{description}</p>
-      </body>
-    </html>
-  );
-}

package/dist/default-templates/website/parts/footer.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-
-// Template metadata is defined in meta.json
-
-export default function Template({ title, description}) {
-  return (
-    <html>
-      <head>
-        <title>{title}</title>
-      </head>
-      <body>
-        <h1>{title}</h1>
-        <p>{description}</p>
-      </body>
-    </html>
-  );
-}

package/dist/default-templates/website/parts/header.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-
-// Template metadata is defined in meta.json
-
-export default function Template({ title, description}) {
-  return (
-    <html>
-      <head>
-        <title>{title}</title>
-      </head>
-      <body>
-        <h1>{title}</h1>
-        <p>{description}</p>
-      </body>
-    </html>
-  );
-}