loopwind 0.9.2 → 0.9.3

package/FONTS.md

@@ -1,6 +1,6 @@
-# Font Handling in dsgn
+# Font Handling in loopwind
 
-dsgn has a two-part font system:
+loopwind has a two-part font system:
 1. **Font Data** (template-specific) - Actual font files loaded by Satori
 2. **Font Classes** (project-wide) - CSS font-family applied via `tw()`
 
@@ -62,11 +62,11 @@ my-template/
 - ✅ **TTF** (`.ttf`) - Also supported
 - ✅ **OTF** (`.otf`) - Also supported
 
-## Font Classes (from dsgn.json)
+## Font Classes (from loopwind.json)
 
-Use Tailwind font-family classes in templates. These reference the font stacks in `dsgn.json`:
+Use Tailwind font-family classes in templates. These reference the font stacks in `loopwind.json`:
 
-**dsgn.json:**
+**loopwind.json:**
 ```json
 {
   "fonts": {
@@ -82,12 +82,12 @@ Use Tailwind font-family classes in templates. These reference the font stacks i
 export default function({ title, tw }) {
   return (
     <div style={tw('w-full h-full')}>
-      {/* Uses fonts.sans from dsgn.json */}
+      {/* Uses fonts.sans from loopwind.json */}
       <h1 style={tw('font-sans text-6xl font-bold')}>
         {title}
       </h1>
 
-      {/* Uses fonts.mono from dsgn.json */}
+      {/* Uses fonts.mono from loopwind.json */}
       <code style={tw('font-mono text-sm')}>
         Hello World
       </code>
@@ -97,14 +97,14 @@ export default function({ title, tw }) {
 ```
 
 **Available classes:**
-- `font-sans` - Uses `fonts.sans` from dsgn.json (default: system-ui, -apple-system, sans-serif)
-- `font-serif` - Uses `fonts.serif` from dsgn.json (default: Georgia, serif)
-- `font-mono` - Uses `fonts.mono` from dsgn.json (default: monospace)
+- `font-sans` - Uses `fonts.sans` from loopwind.json (default: system-ui, -apple-system, sans-serif)
+- `font-serif` - Uses `fonts.serif` from loopwind.json (default: Georgia, serif)
+- `font-mono` - Uses `fonts.mono` from loopwind.json (default: monospace)
 
 ## How It Works Together
 
 1. **Font data** is loaded from template's `meta.json` (or default Noto Sans)
-2. **Font classes** (`font-sans`) apply CSS `fontFamily` from `dsgn.json`
+2. **Font classes** (`font-sans`) apply CSS `fontFamily` from `loopwind.json`
 3. The font name in CSS must match a loaded font for Satori to use it
 
 **Example:**
@@ -120,7 +120,7 @@ export default function({ title, tw }) {
 ```
 
 ```json
-// dsgn.json - Defines font stacks for CSS
+// loopwind.json - Defines font stacks for CSS
 {
   "fonts": {
     "sans": ["Inter", "system-ui", "sans-serif"]
@@ -152,5 +152,5 @@ export default function({ title, tw }) {
 1. **For most templates:** Use default Noto Sans, no font setup needed
 2. **For branded templates:** Bundle custom fonts in template's `fonts/` folder
 3. **Use font classes:** `tw('font-sans')` instead of raw `fontFamily: 'Inter'`
-4. **Match names:** Ensure `dsgn.json` font names match template's loaded fonts
+4. **Match names:** Ensure `loopwind.json` font names match template's loaded fonts
 5. **Include fallbacks:** Always include system fallbacks in font stacks

package/HELPERS_DEMO.md

@@ -70,7 +70,7 @@ Then use the `video()` helper with the prop value.
 ## Example: Video with Text Overlay
 
 ```tsx
-// Template: _dsgn/templates/video-overlay/index.tsx
+// Template: _loopwind/templates/video-overlay/index.tsx
 export default function VideoOverlay({ tw, video, frame, progress, title }) {
   // Animate title opacity
   const opacity = progress < 0.2 ? progress / 0.2 : 1;
@@ -123,7 +123,7 @@ export default function VideoOverlay({ tw, video, frame, progress, title }) {
 
 ```bash
 # Render
-dsgn render video-overlay props.json --out output.mp4
+loopwind render video-overlay props.json --out output.mp4
 ```
 
 This will:

package/PROJECT_STRUCTURE.md

@@ -2,7 +2,7 @@
 
 ## Overview
 
-**dsgn** is a global CLI tool that operates on project-local templates and outputs.
+**loopwind** is a global CLI tool that operates on project-local templates and outputs.
 
 Think of it like:
 - **Global CLI**: Like `npm` or `git` - installed once, used everywhere
@@ -13,11 +13,11 @@ Think of it like:
 
 ### Your Project
 
-When you use `dsgn` in your project, this is the structure:
+When you use `loopwind` in your project, this is the structure:
 
 ```
 my-project/
-├── dsgn/
+├── loopwind/
 │   ├── templates/          # Installed templates (like node_modules)
 │   │   ├── banner-hero/
 │   │   │   ├── banner-hero.tsx
@@ -28,14 +28,14 @@ my-project/
 │   └── outputs/            # Generated images/videos
 │       ├── banner-hero-1234567890.png
 │       └── product-card-1234567891.png
-├── dsgn.json              # Your project's design tokens (optional)
+├── loopwind.json              # Your project's design tokens (optional)
 └── package.json
 ```
 
 ### The CLI Package (this repo)
 
 ```
-dsgn/
+loopwind/
 ├── src/
 │   ├── cli.ts                    # Main CLI entry point
 │   ├── commands/                 # Command implementations
@@ -64,34 +64,34 @@ dsgn/
 ### 1. Global Installation
 
 ```bash
-npm install -g dsgn
+npm install -g loopwind
 ```
 
-This installs the CLI globally, making the `dsgn` command available anywhere.
+This installs the CLI globally, making the `loopwind` command available anywhere.
 
 ### 2. Project Usage
 
 ```bash
 cd ~/my-project
-dsgn add banner-hero
+loopwind add banner-hero
 ```
 
 This:
 1. Fetches template from registry: `https://design.unpeel.dev/r/banner-hero`
-2. Installs to: `~/my-project/dsgn/templates/banner-hero/`
+2. Installs to: `~/my-project/loopwind/templates/banner-hero/`
 3. Creates structure if it doesn't exist
 
 ### 3. Rendering
 
 ```bash
-dsgn render banner-hero --props '{"title":"Hello"}'
+loopwind render banner-hero --props '{"title":"Hello"}'
 ```
 
 This:
-1. Loads template from `dsgn/templates/banner-hero/`
-2. Loads config from `dsgn.json` (if exists)
+1. Loads template from `loopwind/templates/banner-hero/`
+2. Loads config from `loopwind.json` (if exists)
 3. Renders with Satori
-4. Saves to `dsgn/outputs/banner-hero-{timestamp}.png`
+4. Saves to `loopwind/outputs/banner-hero-{timestamp}.png`
 
 ## Why This Architecture?
 
@@ -155,9 +155,9 @@ Returns:
 }
 ```
 
-When you run `dsgn add banner-hero`, it:
+When you run `loopwind add banner-hero`, it:
 1. Fetches this JSON
-2. Writes files to `dsgn/templates/banner-hero/`
+2. Writes files to `loopwind/templates/banner-hero/`
 3. Templates are now local and ready to use
 
 ## Git Workflow
@@ -165,20 +165,20 @@ When you run `dsgn add banner-hero`, it:
 ### What to commit?
 
 **DO commit:**
-- `dsgn/templates/` - Your templates (like `node_modules` in some projects)
-- `dsgn.json` - Your design configuration
+- `loopwind/templates/` - Your templates (like `node_modules` in some projects)
+- `loopwind.json` - Your design configuration
 
 **DON'T commit:**
-- `dsgn/outputs/` - Generated files (usually)
+- `loopwind/outputs/` - Generated files (usually)
 
 Example `.gitignore`:
 
 ```gitignore
 # Ignore generated outputs
-dsgn/outputs/
+loopwind/outputs/
 
 # Keep templates (optional - depends on your workflow)
-# dsgn/templates/
+# loopwind/templates/
 ```
 
 Some teams prefer to commit templates (reproducibility), others prefer to install them (like npm packages).
@@ -215,46 +215,46 @@ mkdir my-project
 cd my-project
 
 # Initialize config
-dsgn init
+loopwind init
 
 # Install templates
-dsgn add banner-hero
-dsgn add product-card
+loopwind add banner-hero
+loopwind add product-card
 
 # Render images
-dsgn render banner-hero --props props.json
+loopwind render banner-hero --props props.json
 ```
 
 ### Sharing with Team
 
 ```bash
 # Developer 1
-git add dsgn/templates/
+git add loopwind/templates/
 git commit -m "Add banner template"
 git push
 
 # Developer 2
 git pull
-dsgn list  # See all templates
-dsgn render banner-hero --props '{"title":"Team Banner"}'
+loopwind list  # See all templates
+loopwind render banner-hero --props '{"title":"Team Banner"}'
 ```
 
 ### CI/CD Pipeline
 
 ```yaml
 # .github/workflows/generate-images.yml
-- name: Install dsgn
-  run: npm install -g dsgn
+- name: Install loopwind
+  run: npm install -g loopwind
 
 - name: Generate images
   run: |
-    dsgn render banner-hero --props props/hero.json
-    dsgn render product-card --props props/product.json
+    loopwind render banner-hero --props props/hero.json
+    loopwind render product-card --props props/product.json
 
 - name: Upload artifacts
   uses: actions/upload-artifact@v3
   with:
-    path: dsgn/outputs/
+    path: loopwind/outputs/
 ```
 
 ## Future Enhancements
@@ -262,25 +262,25 @@ dsgn render banner-hero --props '{"title":"Team Banner"}'
 ### Template Versions
 
 ```bash
-dsgn add banner-hero@2.0.0
-dsgn update banner-hero
+loopwind add banner-hero@2.0.0
+loopwind update banner-hero
 ```
 
 ### Template Marketplace
 
 ```bash
-dsgn search "hero"
-dsgn add @company/custom-banner
+loopwind search "hero"
+loopwind add @company/custom-banner
 ```
 
 ### Global vs Local
 
 ```bash
 # Install globally (like npm -g)
-dsgn add banner-hero --global
+loopwind add banner-hero --global
 
 # Install locally (default, like npm install)
-dsgn add banner-hero
+loopwind add banner-hero
 ```
 
 This is the **Shadcn for design and marketing** - same philosophy of owning your code, but for design assets!

package/PUBLISHING.md

@@ -1,12 +1,12 @@
 # Publishing Guide
 
-This guide explains how to publish `dsgn` to npm.
+This guide explains how to publish `loopwind` to npm.
 
 ## Prerequisites
 
 1. npm account (create at https://www.npmjs.com/signup)
 2. npm CLI logged in: `npm login`
-3. Package name availability check: `npm search dsgn`
+3. Package name availability check: `npm search loopwind`
 
 ## Pre-publish Checklist
 
@@ -37,8 +37,8 @@ You can test the package locally before publishing:
 
 ```bash
 npm pack
-npm install -g ./dsgn-0.1.0.tgz
-dsgn --help
+npm install -g ./loopwind-0.1.0.tgz
+loopwind --help
 ```
 
 ### 3. Publish to npm
@@ -58,13 +58,13 @@ npm publish --access public
 Check that it's published:
 
 ```bash
-npm view dsgn
+npm view loopwind
 ```
 
 Test installation:
 
 ```bash
-npx dsgn@latest --help
+npx loopwind@latest --help
 ```
 
 ## Post-publish
@@ -92,13 +92,13 @@ npm version major  # 0.1.0 -> 1.0.0
 
 ## Package Name Alternatives
 
-If `dsgn` is taken, consider:
+If `loopwind` is taken, consider:
 
-- `@yourusername/dsgn` (scoped package)
+- `@yourusername/loopwind` (scoped package)
 - `design-cli`
 - `designkit-cli`
-- `dsgn-cli`
-- `template-dsgn`
+- `loopwind-cli`
+- `template-loopwind`
 
 Check availability:
 
@@ -111,13 +111,13 @@ npm search <package-name>
 If you need to unpublish (within 72 hours):
 
 ```bash
-npm unpublish dsgn@0.1.0
+npm unpublish loopwind@0.1.0
 ```
 
 Note: Unpublishing is discouraged. Use `npm deprecate` instead for older versions:
 
 ```bash
-npm deprecate dsgn@0.1.0 "Please upgrade to 0.2.0"
+npm deprecate loopwind@0.1.0 "Please upgrade to 0.2.0"
 ```
 
 ## CI/CD Publishing (GitHub Actions)
@@ -161,7 +161,7 @@ npm publish --tag beta
 Install beta:
 
 ```bash
-npm install dsgn@beta
+npm install loopwind@beta
 ```
 
 ## Resources

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