loopwind 0.9.1 → 0.9.3

package/README.md

@@ -1,4 +1,4 @@
-# dsgn
+# loopwind
 
 > The Shadcn for design and marketing. A template-based CLI tool for generating images and videos using React + Tailwind CSS + Satori.
 
@@ -13,7 +13,7 @@
 - ✅ **Smart Validation**: Automatic prop and template validation with helpful error messages
 - 🚀 **Framework-agnostic**: Works with Node, Bun, Deno, Laravel, Python, and more
 - 🤖 **Agent-friendly**: Machine-readable metadata for LLMs
-- 📦 **Easy installation**: `npx dsgn add template-name`
+- 📦 **Easy installation**: `npx loopwind add template-name`
 - 🌐 **Pure JavaScript/WASM**: No native dependencies, works everywhere
 
 ## Quick Start
@@ -21,13 +21,13 @@
 ### Installation
 
 ```bash
-npm install -g dsgn
+npm install -g loopwind
 ```
 
 Or use with npx:
 
 ```bash
-npx dsgn --help
+npx loopwind --help
 ```
 
 ### Install a Template
@@ -37,21 +37,21 @@ Templates can be installed from multiple sources:
 #### 1. Official Registry (Coming Soon)
 
 ```bash
-dsgn add banner-hero
-dsgn add og-image --registry https://custom-registry.com/r
+loopwind add banner-hero
+loopwind add og-image --registry https://custom-registry.com/r
 ```
 
 #### 2. GitHub Repositories
 
 ```bash
 # From a GitHub repo (looks for template.json in repo root)
-dsgn add github:username/repo
+loopwind add github:username/repo
 
 # From a specific path in the repo
-dsgn add github:username/repo/templates/banner-hero
+loopwind add github:username/repo/templates/banner-hero
 
 # From an organization
-dsgn add github:myorg/design-templates/social-media/og-image
+loopwind add github:myorg/design-templates/social-media/og-image
 ```
 
 **How it works:**
@@ -64,8 +64,8 @@ dsgn add github:myorg/design-templates/social-media/og-image
 
 ```bash
 # Install from any publicly accessible URL
-dsgn add https://example.com/templates/my-template.json
-dsgn add https://cdn.example.com/templates/awesome-banner.json
+loopwind add https://example.com/templates/my-template.json
+loopwind add https://cdn.example.com/templates/awesome-banner.json
 ```
 
 **Requirements:**
@@ -76,11 +76,11 @@ dsgn add https://cdn.example.com/templates/awesome-banner.json
 
 ```bash
 # Relative path
-dsgn add ./my-templates/banner-hero
-dsgn add ../shared-templates/product-card
+loopwind add ./my-templates/banner-hero
+loopwind add ../shared-templates/product-card
 
 # Absolute path
-dsgn add /Users/you/templates/social-card
+loopwind add /Users/you/templates/social-card
 ```
 
 **Use cases:**
@@ -89,7 +89,7 @@ dsgn add /Users/you/templates/social-card
 - Shared team templates (monorepo)
 - Before publishing to registry
 
-Templates are installed to: `_dsgn/templates/<template>/` (customizable in `dsgn.json`)
+Templates are installed to: `_loopwind/templates/<template>/` (customizable in `loopwind.json`)
 
 **Benefits:**
 - Templates are local to your project (like npm packages)
@@ -103,17 +103,17 @@ See `REGISTRY_SETUP.md` to create your own registry.
 ### Render an Image
 
 ```bash
-dsgn render banner-hero \
-  --props '{"title":"Hello World","subtitle":"Welcome to dsgn"}'
+loopwind render banner-hero \
+  --props '{"title":"Hello World","subtitle":"Welcome to loopwind"}'
 ```
 
-By default, images are saved to `dsgn/outputs/` in your current project.
+By default, images are saved to `_loopwind/outputs/` in your current project.
 
 You can specify a custom output path:
 
 ```bash
-dsgn render banner-hero \
-  --props '{"title":"Hello World","subtitle":"Welcome to dsgn"}' \
+loopwind render banner-hero \
+  --props '{"title":"Hello World","subtitle":"Welcome to loopwind"}' \
   --out custom/path/banner.png
 ```
 
@@ -123,26 +123,26 @@ Or use a props file:
 # props.json
 {
   "title": "Hello World",
-  "subtitle": "Welcome to dsgn"
+  "subtitle": "Welcome to loopwind"
 }
 
-dsgn render banner-hero --props props.json --out banner.png
+loopwind render banner-hero --props props.json --out banner.png
 ```
 
 **Output formats:**
 
 ```bash
 # PNG (default) - best for photos and complex gradients
-dsgn render banner-hero --props props.json --format png -o banner.png
+loopwind render banner-hero --props props.json --format png -o banner.png
 
 # SVG - scalable vector, smaller file size, perfect for template composition
-dsgn render banner-hero --props props.json --format svg -o banner.svg
+loopwind render banner-hero --props props.json --format svg -o banner.svg
 
 # WebP - modern format, smaller than PNG with similar quality
-dsgn render banner-hero --props props.json --format webp -o banner.webp
+loopwind render banner-hero --props props.json --format webp -o banner.webp
 
 # JPEG - smallest file size, good for photos
-dsgn render banner-hero --props props.json --format jpg -o banner.jpg
+loopwind render banner-hero --props props.json --format jpg -o banner.jpg
 ```
 
 **SVG benefits with template composition:**
@@ -154,30 +154,30 @@ dsgn render banner-hero --props props.json --format jpg -o banner.jpg
 ### List Installed Templates
 
 ```bash
-dsgn list
+loopwind list
 ```
 
 ### Validate Templates
 
 ```bash
-dsgn validate
-dsgn validate banner-hero
+loopwind validate
+loopwind validate banner-hero
 ```
 
 ## SDK for Programmatic Use
 
-Use **dsgn** programmatically in your Next.js API routes, serverless functions, or Node.js applications!
+Use **loopwind** programmatically in your Next.js API routes, serverless functions, or Node.js applications!
 
 ### Installation
 
 ```bash
-npm install dsgn
+npm install loopwind
 ```
 
 ### Quick Example
 
 ```typescript
-import { defineTemplate, renderImage } from 'dsgn/sdk';
+import { defineTemplate, renderImage } from 'loopwind/sdk';
 
 // Define template programmatically
 const ogTemplate = defineTemplate({
@@ -194,7 +194,7 @@ const ogTemplate = defineTemplate({
 // Render to buffer
 const png = await renderImage(ogTemplate, {
   title: 'Hello World',
-  description: 'Generated with dsgn SDK',
+  description: 'Generated with loopwind SDK',
 });
 
 // Use in Next.js API route
@@ -208,7 +208,7 @@ export default async function handler(req, res) {
 ### Video Rendering
 
 ```typescript
-import { defineTemplate, renderVideo } from 'dsgn/sdk';
+import { defineTemplate, renderVideo } from 'loopwind/sdk';
 
 const introTemplate = defineTemplate({
   name: 'intro-video',
@@ -253,7 +253,7 @@ See the full example in [`examples/nextjs-api/`](examples/nextjs-api/)
 
 ```typescript
 // pages/api/og-image.ts
-import { defineTemplate, renderImage } from 'dsgn/sdk';
+import { defineTemplate, renderImage } from 'loopwind/sdk';
 
 const template = defineTemplate({
   name: 'og-image',
@@ -280,7 +280,7 @@ https://yoursite.com/api/og-image?title=Hello+World
 
 ## shadcn/ui Design System
 
-dsgn uses **shadcn/ui's design system** by default! All templates have access to semantic color tokens:
+loopwind uses **shadcn/ui's design system** by default! All templates have access to semantic color tokens:
 
 ```tsx
 // Use shadcn colors in templates
@@ -293,21 +293,21 @@ dsgn uses **shadcn/ui's design system** by default! All templates have access to
 **Supported shadcn classes:**
 - `text-primary`, `bg-secondary`, `text-muted-foreground`, `bg-card`, `border`, `bg-destructive`
 - **Opacity modifiers**: `bg-primary/50`, `text-muted-foreground/75`, `border/30`
-- **Dark mode ready**: Override colors in `dsgn.json`
+- **Dark mode ready**: Override colors in `loopwind.json`
 
 See `SHADCN_INTEGRATION.md` for complete documentation.
 
-## Configuration (dsgn.json)
+## Configuration (loopwind.json)
 
-Templates automatically use your project's design tokens defined in `dsgn.json`. This allows generated images to match your brand colors and design system.
+Templates automatically use your project's design tokens defined in `loopwind.json`. This allows generated images to match your brand colors and design system.
 
 ### Initialize Config
 
 ```bash
-dsgn init
+loopwind init
 ```
 
-This creates a `dsgn.json` file in your project:
+This creates a `loopwind.json` file in your project:
 
 ```json
 {
@@ -389,7 +389,7 @@ Combine with custom styles:
 
 ### Automatic Tailwind Config Support
 
-**dsgn automatically detects and uses your `tailwind.config.js`!**
+**loopwind automatically detects and uses your `tailwind.config.js`!**
 
 If you have a Tailwind project:
 
@@ -423,7 +423,7 @@ Your templates can use these values:
 
 **Config priority:**
 1. `tailwind.config.js` (if exists)
-2. `dsgn.json` (fallback)
+2. `loopwind.json` (fallback)
 3. Default Tailwind values
 
 **Supported classes:**
@@ -435,7 +435,7 @@ Your templates can use these values:
 - shadcn/ui colors: `bg-card`, `text-foreground`, `text-muted-foreground`
 - Opacity modifiers: `bg-primary/50`, `text-muted-foreground/75`
 
-**Note:** Tailwind v4 uses CSS variables instead of JS config. We're working on CSS parsing support. For now, use `dsgn.json` or `tailwind.config.js` (v3 format).
+**Note:** Tailwind v4 uses CSS variables instead of JS config. We're working on CSS parsing support. For now, use `loopwind.json` or `tailwind.config.js` (v3 format).
 
 ## Fonts
 
@@ -494,7 +494,7 @@ Templates have access to built-in helper functions:
 - **`image(propKey)`** - Embed images as data URIs
 - **`video(propKey)`** - Embed video frames (for video templates)
 - **`template(name, props)`** - Embed other templates
-- **`config`** - Access dsgn.json configuration
+- **`config`** - Access loopwind.json configuration
 
 ### QR Code Helper
 
@@ -517,9 +517,9 @@ export default function Template({ title, url, qr, tw }) {
 
 **Usage:**
 ```bash
-dsgn render qr-card '{
+loopwind render qr-card '{
   "title": "Visit Our Website",
-  "url": "https://dsgncli.com"
+  "url": "https://loopwind.dev"
 }'
 ```
 
@@ -573,7 +573,7 @@ export default function Banner({ background, tw, image }) {
 
 **Usage:**
 ```bash
-dsgn render banner '{
+loopwind render banner '{
   "background": "./my-background.jpg"
 }'
 ```
@@ -630,7 +630,7 @@ export default function VideoOverlay({ background, title, tw, video, frame, prog
 
 **Usage:**
 ```bash
-dsgn render video-overlay props.json --out output.mp4
+loopwind render video-overlay props.json --out output.mp4
 ```
 
 **How it works:**
@@ -669,7 +669,7 @@ export default function Template({ title, bannerTitle, bannerSubtitle, template,
 
 **Usage:**
 ```bash
-dsgn render composite-card '{
+loopwind render composite-card '{
   "title": "Product Launch",
   "bannerTitle": "New Release",
   "bannerSubtitle": "Coming Soon"
@@ -777,22 +777,22 @@ export default function Template({ title, subtitle, frame, progress, tw, qr, tem
 
 ## Commands
 
-### `dsgn init`
+### `loopwind init`
 
-Initialize a `dsgn.json` config file with default design tokens.
+Initialize a `loopwind.json` config file with default design tokens.
 
-### `dsgn add <template>`
+### `loopwind add <template>`
 
 Install a template from the registry.
 
 Options:
 - `-r, --registry <url>` - Custom registry URL
 
-### `dsgn list`
+### `loopwind list`
 
 List all installed templates with metadata.
 
-### `dsgn render <template>`
+### `loopwind render <template>`
 
 Render a template to an image.
 
@@ -802,25 +802,25 @@ Options:
 - `--format <format>` - Output format: png, svg, webp (default: png)
 - `--video` - Render as video (coming soon)
 
-### `dsgn validate [template]`
+### `loopwind validate [template]`
 
 Validate template metadata. If no template is specified, validates all installed templates.
 
 ## Validation & Error Messages
 
-dsgn automatically validates templates and props before rendering, providing helpful error messages.
+loopwind automatically validates templates and props before rendering, providing helpful error messages.
 
 ### Automatic Validation
 
 ```bash
 # Missing required props
-$ dsgn render banner-hero --props '{}'
+$ loopwind render banner-hero --props '{}'
 ✖ Template validation failed
   ✗ props: Missing required prop: "title"
     → Add "title" to your props: --props '{"title":"value"}'
 
 # Wrong prop type
-$ dsgn render banner-hero --props '{"title":123}'
+$ loopwind render banner-hero --props '{"title":123}'
 ✖ Template validation failed
   ✗ props: Prop "title" should be a string, got number
     → Change "title" to a string: "title": "value"
@@ -828,10 +828,10 @@ $ dsgn render banner-hero --props '{"title":123}'
 
 ### Enhanced Satori Error Messages
 
-When rendering fails, dsgn provides clear suggestions:
+When rendering fails, loopwind provides clear suggestions:
 
 ```bash
-$ dsgn render my-template --props props.json
+$ loopwind render my-template --props props.json
 ✖ Failed to render template
 
 Error: Satori requires explicit display: flex for containers with multiple children
@@ -846,12 +846,12 @@ See `VALIDATION.md` for complete validation documentation and troubleshooting.
 
 ## Creating Custom Templates
 
-Templates are stored in your project's `dsgn/templates/` directory. You can create custom templates:
+Templates are stored in your project's `_loopwind/templates/` directory. You can create custom templates:
 
 1. Create a folder:
 
 ```bash
-mkdir -p dsgn/templates/my-template
+mkdir -p _loopwind/templates/my-template
 ```
 
 2. Create `meta.json`:
@@ -893,8 +893,8 @@ export default function MyTemplate({ title }) {
 4. Validate and render:
 
 ```bash
-dsgn validate my-template
-dsgn render my-template --props '{"title":"Hello"}' --out test.png
+loopwind validate my-template
+loopwind render my-template --props '{"title":"Hello"}' --out test.png
 ```
 
 ## Use Cases
@@ -911,7 +911,7 @@ Video templates use `type: "video"` and support `frame` and `progress` props for
 
 ### ⚡ No Dependencies Required
 
-**dsgn uses pure JavaScript/WASM for video encoding** - works everywhere!
+**loopwind uses pure JavaScript/WASM for video encoding** - works everywhere!
 
 ✅ Works on **Vercel Edge Functions**
 ✅ Works on **Netlify Functions**
@@ -956,13 +956,13 @@ export default function Template({ title, frame, progress, tw, qr, template }) {
 
 ```bash
 # Render to MP4
-dsgn render my-video '{"title":"Animated Title"}' -o output.mp4
+loopwind render my-video '{"title":"Animated Title"}' -o output.mp4
 
 # With custom quality settings
-dsgn render my-video props.json --crf 18   # Higher quality (lower CRF = better quality)
+loopwind render my-video props.json --crf 18   # Higher quality (lower CRF = better quality)
 
 # Export frames only (for manual encoding)
-dsgn render my-video props.json --frames-only -o frames/
+loopwind render my-video props.json --frames-only -o frames/
 ```
 
 **How it works:**
@@ -1006,13 +1006,13 @@ See `website/README.md` for more details.
 Templates are fetched from a registry (similar to shadcn/ui). The default registry is:
 
 ```
-https://dsgncli.com/r
+https://loopwind.dev/r
 ```
 
 You can host your own registry and use it with:
 
 ```bash
-dsgn add my-template --registry https://my-registry.com
+loopwind add my-template --registry https://my-registry.com
 ```
 
 ## License

package/REGISTRY_SETUP.md

@@ -2,7 +2,7 @@
 
 ## 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`.
+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
 
@@ -13,7 +13,7 @@ Host static JSON files on any static hosting:
 **1. Create template JSON files:**
 
 ```
-dsgncli.com/
+loopwind.dev/
 └── r/
     ├── banner-hero.json
     ├── product-card.json
@@ -119,7 +119,7 @@ Until you set up a real registry, use GitHub:
 **1. Create a templates repo:**
 
 ```
-github.com/yourusername/dsgn-templates/
+github.com/yourusername/loopwind-templates/
 ├── banner-hero/
 │   ├── template.json
 │   ├── banner-hero.tsx
@@ -132,20 +132,20 @@ github.com/yourusername/dsgn-templates/
 **2. Users install with:**
 
 ```bash
-dsgn add github:yourusername/dsgn-templates/banner-hero
+loopwind add github:yourusername/loopwind-templates/banner-hero
 ```
 
 **3. Update CLI default:**
 
 ```typescript
 // src/lib/constants.ts
-export const DEFAULT_REGISTRY = 'github:yourusername/dsgn-templates';
+export const DEFAULT_REGISTRY = 'github:yourusername/loopwind-templates';
 ```
 
 Then users can:
 
 ```bash
-dsgn add banner-hero  # Uses GitHub as registry
+loopwind add banner-hero  # Uses GitHub as registry
 ```
 
 ## Creating Template JSON Files
@@ -209,7 +209,7 @@ registry/
 └── social-og.json
 ```
 
-Upload these to `dsgncli.com/r/`
+Upload these to `loopwind.dev/r/`
 
 ## Example Hosting Setups
 
@@ -218,8 +218,8 @@ Upload these to `dsgncli.com/r/`
 **1. Create Next.js project:**
 
 ```bash
-npx create-next-app@latest dsgn-registry
-cd dsgn-registry
+npx create-next-app@latest loopwind-registry
+cd loopwind-registry
 ```
 
 **2. Create API route:**
@@ -250,7 +250,7 @@ vercel
 
 **4. Configure domain:**
 
-Set `dsgncli.com` to point to your Vercel project.
+Set `loopwind.dev` to point to your Vercel project.
 
 ### Cloudflare Workers
 
@@ -333,7 +333,7 @@ app.get('/r/:name', async (req, res) => {
 });
 
 // Users can install specific versions
-// dsgn add banner-hero@1.2.0
+// loopwind add banner-hero@1.2.0
 ```
 
 ## Testing Your Registry
@@ -342,7 +342,7 @@ Once deployed, test it:
 
 ```bash
 # Test the endpoint
-curl https://dsgncli.com/r/banner-hero
+curl https://loopwind.dev/r/banner-hero
 
 # Should return JSON like:
 {
@@ -352,7 +352,7 @@ curl https://dsgncli.com/r/banner-hero
 }
 
 # Test with CLI
-dsgn add banner-hero
+loopwind add banner-hero
 ```
 
 ## Until Registry is Ready
@@ -360,7 +360,7 @@ dsgn add banner-hero
 **Option 1:** Tell users to use GitHub:
 
 ```bash
-dsgn add github:yourusername/dsgn-templates/banner-hero
+loopwind add github:yourusername/loopwind-templates/banner-hero
 ```
 
 **Option 2:** Update README with temporary instructions:
@@ -371,7 +371,7 @@ dsgn add github:yourusername/dsgn-templates/banner-hero
 Templates are currently hosted on GitHub. Install with:
 
 \`\`\`bash
-dsgn add github:dsgncli/templates/banner-hero
+loopwind add github:loopwindcli/templates/banner-hero
 \`\`\`
 
 Official registry coming soon!
@@ -386,7 +386,7 @@ Include templates directly in the npm package:
 **1. Create templates folder:**
 
 ```
-dsgn/
+loopwind/
 ├── dist/
 └── bundled-templates/
     ├── banner-hero.json
@@ -414,8 +414,8 @@ export async function fetchTemplate(name: string) {
 **3. Users get core templates immediately:**
 
 ```bash
-npm install -g dsgn
-dsgn add banner-hero  # Works offline!
+npm install -g loopwind
+loopwind add banner-hero  # Works offline!
 ```
 
 ## Recommended Approach

package/SHADCN_INTEGRATION.md

@@ -1,6 +1,6 @@
 # shadcn/ui Design System Integration
 
-dsgn uses **shadcn/ui's design system** by default, providing beautiful and consistent colors, typography, and components.
+loopwind uses **shadcn/ui's design system** by default, providing beautiful and consistent colors, typography, and components.
 
 ## Default Color Palette
 
@@ -139,7 +139,7 @@ export default function ShadcnCard({ title, description, status, tw }) {
         {/* 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
+            Powered by loopwind + shadcn
           </p>
         </div>
       </div>
@@ -150,7 +150,7 @@ export default function ShadcnCard({ title, description, status, tw }) {
 
 ## Customizing Colors
 
-Users can override the default shadcn colors in their `dsgn.json`:
+Users can override the default shadcn colors in their `loopwind.json`:
 
 ```json
 {
@@ -164,11 +164,11 @@ Users can override the default shadcn colors in their `dsgn.json`:
 }
 ```
 
-Or use their existing `tailwind.config.js` colors - dsgn automatically detects and uses them!
+Or use their existing `tailwind.config.js` colors - loopwind automatically detects and uses them!
 
 ## shadcn Themes
 
-dsgn uses the **Zinc theme** by default. Users can easily switch to other shadcn themes:
+loopwind uses the **Zinc theme** by default. Users can easily switch to other shadcn themes:
 
 ### Slate Theme
 ```json
@@ -263,7 +263,7 @@ Much cleaner and themeable!
 | **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 |
+| **Dark mode** | ✅ | Override in loopwind.json |
 | **Custom themes** | ✅ | Full shadcn palette customizable |
 
-**dsgn templates automatically work with shadcn's design system!** 🎨
+**loopwind templates automatically work with shadcn's design system!** 🎨

package/TAILWIND.md

@@ -108,20 +108,20 @@ tw('opacity-90')     // opacity: 0.9
 ### Colors
 
 - **Static Colors**: `text-white`, `text-black`, `bg-white`, `bg-black`
-- **Config Colors**: `bg-primary`, `text-primary`, `bg-secondary`, etc. (from dsgn.json)
+- **Config Colors**: `bg-primary`, `text-primary`, `bg-secondary`, etc. (from loopwind.json)
 
 Examples:
 ```tsx
 // Using static colors
 tw('bg-black text-white')
 
-// Using config colors (from dsgn.json)
+// Using config colors (from loopwind.json)
 tw('bg-primary text-secondary')
 ```
 
 ## Config Color Integration
 
-The `tw()` function automatically uses colors from your `dsgn.json`:
+The `tw()` function automatically uses colors from your `loopwind.json`:
 
 ```json
 {
@@ -215,7 +215,7 @@ const TAILWIND_MAP = {
 
 1. **Familiar Syntax**: Use the Tailwind classes you already know
 2. **Cleaner Code**: Less verbose than inline styles
-3. **Config Integration**: Automatic color mapping from dsgn.json
+3. **Config Integration**: Automatic color mapping from loopwind.json
 4. **Type Safe**: TypeScript support with CSSProperties
 5. **Extensible**: Easy to add more utilities