loopwind 0.9.1

package/REGISTRY_SETUP.md

@@ -0,0 +1,427 @@
+# Setting Up the Template Registry
+
+## Overview
+
+The registry is a simple HTTP endpoint that serves template JSON files. Users run `dsgn add template-name` and it fetches from `https://dsgncli.com/r/template-name`.
+
+## Quick Solutions
+
+### Option 1: Static JSON Files (Simplest)
+
+Host static JSON files on any static hosting:
+
+**1. Create template JSON files:**
+
+```
+dsgncli.com/
+└── 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": "banner-hero.tsx",
+      "content": "import React from 'react';\n\nexport const meta = {...};\n\nexport default function BannerHero({...}) {...}"
+    },
+    {
+      "path": "meta.json",
+      "content": "{\"name\":\"banner-hero\",\"size\":{\"width\":1600,\"height\":900},...}"
+    }
+  ]
+}
+```
+
+**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: 'banner-hero.tsx',
+          content: require('./templates/banner-hero.tsx.txt')
+        },
+        {
+          path: 'meta.json',
+          content: require('./templates/banner-hero-meta.json')
+        }
+      ]
+    }
+  };
+
+  return templates[name];
+}
+```
+
+**Deploy:**
+
+```bash
+vercel deploy
+# or
+netlify deploy
+```
+
+### Option 3: Use GitHub as Registry (Temporary)
+
+Until you set up a real registry, use GitHub:
+
+**1. Create a templates repo:**
+
+```
+github.com/yourusername/dsgn-templates/
+├── banner-hero/
+│   ├── template.json
+│   ├── banner-hero.tsx
+│   └── meta.json
+├── product-card/
+│   └── ...
+└── README.md
+```
+
+**2. Users install with:**
+
+```bash
+dsgn add github:yourusername/dsgn-templates/banner-hero
+```
+
+**3. Update CLI default:**
+
+```typescript
+// src/lib/constants.ts
+export const DEFAULT_REGISTRY = 'github:yourusername/dsgn-templates';
+```
+
+Then users can:
+
+```bash
+dsgn add banner-hero  # Uses GitHub as registry
+```
+
+## 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 `dsgncli.com/r/`
+
+## Example Hosting Setups
+
+### Vercel (Recommended)
+
+**1. Create Next.js project:**
+
+```bash
+npx create-next-app@latest dsgn-registry
+cd dsgn-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 `dsgncli.com` 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
+// dsgn add banner-hero@1.2.0
+```
+
+## Testing Your Registry
+
+Once deployed, test it:
+
+```bash
+# Test the endpoint
+curl https://dsgncli.com/r/banner-hero
+
+# Should return JSON like:
+{
+  "name": "banner-hero",
+  "version": "1.0.0",
+  "files": [...]
+}
+
+# Test with CLI
+dsgn add banner-hero
+```
+
+## Until Registry is Ready
+
+**Option 1:** Tell users to use GitHub:
+
+```bash
+dsgn add github:yourusername/dsgn-templates/banner-hero
+```
+
+**Option 2:** Update README with temporary instructions:
+
+```markdown
+## Installation
+
+Templates are currently hosted on GitHub. Install with:
+
+\`\`\`bash
+dsgn add github:dsgncli/templates/banner-hero
+\`\`\`
+
+Official registry coming soon!
+```
+
+**Option 3:** 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:**
+
+```
+dsgn/
+├── 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 dsgn
+dsgn 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/SHADCN_INTEGRATION.md

@@ -0,0 +1,269 @@
+# shadcn/ui Design System Integration
+
+dsgn uses **shadcn/ui's design system** by default, providing beautiful and consistent colors, typography, and components.
+
+## Default Color Palette
+
+All templates automatically have access to shadcn's semantic color tokens:
+
+```typescript
+colors: {
+  // Primary colors
+  primary: '#18181b',           // Main brand color
+  'primary-foreground': '#fafafa',
+
+  // Secondary colors
+  secondary: '#f4f4f5',         // Subtle accents
+  'secondary-foreground': '#18181b',
+
+  // Background
+  background: '#ffffff',        // Page background
+  foreground: '#09090b',        // Main text color
+
+  // Muted
+  muted: '#f4f4f5',            // Subtle backgrounds
+  'muted-foreground': '#71717a', // Muted text
+
+  // Accent
+  accent: '#f4f4f5',           // Highlight color
+  'accent-foreground': '#18181b',
+
+  // Destructive
+  destructive: '#ef4444',       // Error/danger states
+  'destructive-foreground': '#fafafa',
+
+  // UI Elements
+  border: '#e4e4e7',           // Border color
+  input: '#e4e4e7',            // Input borders
+  ring: '#18181b',             // Focus rings
+  card: '#ffffff',             // Card background
+  'card-foreground': '#09090b',
+  popover: '#ffffff',          // Popover background
+  'popover-foreground': '#09090b',
+}
+```
+
+## Using shadcn Colors in Templates
+
+### Basic Usage
+
+```tsx
+export default function Template({ title, tw }) {
+  return (
+    <div style={tw('bg-background text-foreground')}>
+      <h1 style={tw('text-primary font-bold')}>
+        {title}
+      </h1>
+      <p style={tw('text-muted-foreground')}>
+        Subtle secondary text
+      </p>
+    </div>
+  );
+}
+```
+
+### Opacity Modifiers (shadcn Style)
+
+Use Tailwind's slash syntax for opacity:
+
+```tsx
+<div style={tw('bg-primary/50')}>        {/* 50% opacity */}
+<p style={tw('text-muted-foreground/75')}> {/* 75% opacity */}
+<div style={tw('border/30')}>            {/* Border with 30% opacity */}
+```
+
+**Supported syntax:**
+- `bg-{color}/{opacity}` - Background with opacity
+- `text-{color}/{opacity}` - Text with opacity  
+- `border-{color}/{opacity}` - Border with opacity
+
+### Cards and Containers
+
+```tsx
+<div style={tw('bg-card border rounded-xl p-16')}>
+  <h2 style={tw('text-card-foreground font-bold')}>Card Title</h2>
+  <p style={tw('text-muted-foreground')}>Card content</p>
+</div>
+```
+
+### Destructive/Error States
+
+```tsx
+<div style={tw('bg-destructive/10 border-destructive/50 rounded-lg p-4')}>
+  <p style={tw('text-destructive font-medium')}>
+    Error: Something went wrong
+  </p>
+</div>
+```
+
+## Complete Example
+
+Here's a template using shadcn design system:
+
+```tsx
+import React from 'react';
+
+export const meta = {
+  name: "shadcn-card",
+  description: "Card using shadcn design system",
+  type: "image",
+  size: { width: 1200, height: 630 }
+};
+
+export default function ShadcnCard({ title, description, status, tw }) {
+  return (
+    <div style={tw('w-full h-full flex items-center justify-center bg-background p-20')}>
+      <div style={tw('bg-card border rounded-xl p-16 flex flex-col')}>
+        {/* Header */}
+        <div style={tw('flex items-center mb-6')}>
+          <div style={tw('bg-primary rounded-lg p-3')}>
+            <span style={tw('text-primary-foreground text-2xl')}>✓</span>
+          </div>
+          <h1 style={tw('text-4xl font-bold text-foreground ml-4')}>
+            {title}
+          </h1>
+        </div>
+
+        {/* Description */}
+        <p style={tw('text-2xl text-muted-foreground mb-6')}>
+          {description}
+        </p>
+
+        {/* Status badge */}
+        <div style={tw('bg-secondary rounded-md p-2')}>
+          <span style={tw('text-secondary-foreground font-medium')}>
+            Status: {status}
+          </span>
+        </div>
+
+        {/* Subtle border */}
+        <div style={tw('border-t/50 mt-6 pt-6')}>
+          <p style={tw('text-muted-foreground/75 text-sm')}>
+            Powered by dsgn + shadcn
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+```
+
+## Customizing Colors
+
+Users can override the default shadcn colors in their `dsgn.json`:
+
+```json
+{
+  "colors": {
+    "primary": "#3b82f6",
+    "primary-foreground": "#ffffff",
+    "secondary": "#f1f5f9",
+    "secondary-foreground": "#0f172a"
+    // ... other colors
+  }
+}
+```
+
+Or use their existing `tailwind.config.js` colors - dsgn automatically detects and uses them!
+
+## shadcn Themes
+
+dsgn uses the **Zinc theme** by default. Users can easily switch to other shadcn themes:
+
+### Slate Theme
+```json
+{
+  "colors": {
+    "primary": "#020617",
+    "secondary": "#f1f5f9",
+    "muted": "#f1f5f9",
+    "accent": "#f1f5f9",
+    "border": "#e2e8f0"
+  }
+}
+```
+
+### Stone Theme
+```json
+{
+  "colors": {
+    "primary": "#0c0a09",
+    "secondary": "#f5f5f4",
+    "muted": "#f5f5f4",
+    "accent": "#f5f5f4",
+    "border": "#e7e5e4"
+  }
+}
+```
+
+### Dark Mode
+```json
+{
+  "colors": {
+    "primary": "#fafafa",
+    "primary-foreground": "#18181b",
+    "background": "#09090b",
+    "foreground": "#fafafa",
+    "card": "#18181b",
+    "card-foreground": "#fafafa",
+    "muted": "#27272a",
+    "muted-foreground": "#a1a1aa",
+    "border": "#27272a"
+  }
+}
+```
+
+## Supported shadcn Classes
+
+### Colors
+- `text-primary`, `text-secondary`, `text-muted`, `text-accent`, `text-destructive`
+- `bg-primary`, `bg-secondary`, `bg-muted`, `bg-accent`, `bg-destructive`, `bg-card`
+- `border`, `border-primary`, `border-destructive`, etc.
+
+### Foreground Variants
+- `text-primary-foreground`
+- `text-secondary-foreground`
+- `text-muted-foreground`
+- `text-card-foreground`
+
+### With Opacity
+- `bg-primary/50`, `text-muted-foreground/75`, `border/30`
+- Any color can have `/10`, `/20`, `/30`, ... `/90`, `/100`
+
+## Best Practices
+
+1. **Use semantic colors** - `text-foreground` instead of `text-black`
+2. **Leverage opacity modifiers** - `bg-primary/10` for subtle highlights
+3. **Card patterns** - `bg-card border rounded-xl` for containers
+4. **Consistent foregrounds** - Pair colors with their foreground variants
+5. **Muted for secondary** - Use `text-muted-foreground` for less important text
+
+## Migration from Custom Colors
+
+Before (custom gradient):
+```tsx
+<div style={{
+  background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+  color: 'white'
+}}>
+```
+
+After (shadcn):
+```tsx
+<div style={tw('bg-primary text-primary-foreground')}>
+```
+
+Much cleaner and themeable!
+
+## Summary
+
+| Feature | Supported | Example |
+|---------|-----------|---------|
+| **Semantic colors** | ✅ | `text-primary`, `bg-card` |
+| **Foreground variants** | ✅ | `text-muted-foreground` |
+| **Opacity modifiers** | ✅ | `bg-primary/50`, `text-muted/75` |
+| **Border colors** | ✅ | `border`, `border-destructive/50` |
+| **Dark mode** | ✅ | Override in dsgn.json |
+| **Custom themes** | ✅ | Full shadcn palette customizable |
+
+**dsgn templates automatically work with shadcn's design system!** 🎨