loopwind 0.12.1 → 0.12.2

package/SHADCN_INTEGRATION.md

@@ -1,269 +0,0 @@
-# shadcn/ui Design System Integration
-
-loopwind 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 loopwind + shadcn
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-}
-```
-
-## Customizing Colors
-
-Users can override the default shadcn colors in their `loopwind.json`:
-
-```json
-{
-  "colors": {
-    "primary": "#3b82f6",
-    "primary-foreground": "#ffffff",
-    "secondary": "#f1f5f9",
-    "secondary-foreground": "#0f172a"
-    // ... other colors
-  }
-}
-```
-
-Or use their existing `tailwind.config.js` colors - loopwind automatically detects and uses them!
-
-## shadcn Themes
-
-loopwind 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 loopwind.json |
-| **Custom themes** | ✅ | Full shadcn palette customizable |
-
-**loopwind templates automatically work with shadcn's design system!** 🎨

package/TAILWIND.md

@@ -1,228 +0,0 @@
-# Using Tailwind Classes in Templates
-
-## Overview
-
-Templates can use Tailwind utility classes instead of writing inline styles! The `tw()` function is automatically provided to every template and converts Tailwind classes to inline styles that Satori can render.
-
-## Basic Usage
-
-```tsx
-export default function MyTemplate({ title, tw }) {
-  return (
-    <div style={tw('flex items-center justify-center w-full h-full bg-blue-500')}>
-      <h1 style={tw('text-6xl font-bold text-white')}>
-        {title}
-      </h1>
-    </div>
-  );
-}
-```
-
-## Combining with Custom Styles
-
-You can mix Tailwind classes with custom styles using the spread operator:
-
-```tsx
-export default function MyTemplate({ title, tw, config }) {
-  return (
-    <div
-      style={{
-        ...tw('flex flex-col p-20 text-white'),
-        background: `linear-gradient(135deg, ${config?.colors?.primary} 0%, ${config?.colors?.secondary} 100%)`,
-      }}
-    >
-      <h1 style={tw('text-8xl font-bold')}>{title}</h1>
-    </div>
-  );
-}
-```
-
-## Supported Tailwind Classes
-
-### Layout
-
-- **Display**: `flex`, `inline-flex`, `block`, `inline-block`, `hidden`
-- **Flex Direction**: `flex-row`, `flex-col`, `flex-row-reverse`, `flex-col-reverse`
-- **Justify**: `justify-start`, `justify-end`, `justify-center`, `justify-between`, `justify-around`
-- **Align**: `items-start`, `items-end`, `items-center`, `items-baseline`, `items-stretch`
-
-### Spacing
-
-- **Padding**: `p-{n}`, `px-{n}`, `py-{n}`, `pt-{n}`, `pb-{n}`, `pl-{n}`, `pr-{n}`
-- **Margin**: `m-{n}`, `mx-{n}`, `my-{n}`, `mt-{n}`, `mb-{n}`, `ml-{n}`, `mr-{n}`
-- **Gap**: `gap-{n}`, `gap-x-{n}`, `gap-y-{n}`
-- **Sizes**: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64
-
-Examples:
-```tsx
-tw('p-4')      // padding: 1rem
-tw('px-8')     // paddingLeft: 2rem, paddingRight: 2rem
-tw('m-6')      // margin: 1.5rem
-tw('gap-4')    // gap: 1rem
-```
-
-### Sizing
-
-- **Width**: `w-{n}`, `w-full`, `w-screen`
-- **Height**: `h-{n}`, `h-full`, `h-screen`
-
-Examples:
-```tsx
-tw('w-full')   // width: 100%
-tw('h-64')     // height: 16rem
-```
-
-### Typography
-
-- **Font Size**: `text-xs`, `text-sm`, `text-base`, `text-lg`, `text-xl`, `text-2xl`, `text-3xl`, `text-4xl`, `text-5xl`, `text-6xl`, `text-7xl`, `text-8xl`, `text-9xl`
-- **Font Weight**: `font-thin`, `font-light`, `font-normal`, `font-medium`, `font-semibold`, `font-bold`, `font-extrabold`, `font-black`
-- **Text Align**: `text-left`, `text-center`, `text-right`
-
-Examples:
-```tsx
-tw('text-6xl')       // fontSize: 3.75rem
-tw('font-bold')      // fontWeight: 700
-tw('text-center')    // textAlign: center
-```
-
-### Borders
-
-- **Border Radius**: `rounded`, `rounded-sm`, `rounded-md`, `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-3xl`, `rounded-full`
-
-Examples:
-```tsx
-tw('rounded-lg')     // borderRadius: 0.5rem
-tw('rounded-full')   // borderRadius: 9999px
-```
-
-### Effects
-
-- **Opacity**: `opacity-{0-100}`
-
-Examples:
-```tsx
-tw('opacity-50')     // opacity: 0.5
-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 loopwind.json)
-
-Examples:
-```tsx
-// Using static colors
-tw('bg-black text-white')
-
-// Using config colors (from loopwind.json)
-tw('bg-primary text-secondary')
-```
-
-## Config Color Integration
-
-The `tw()` function automatically uses colors from your `loopwind.json`:
-
-```json
-{
-  "colors": {
-    "primary": "#667eea",
-    "secondary": "#764ba2",
-    "accent": "#3b82f6"
-  }
-}
-```
-
-```tsx
-// In your template
-<div style={tw('bg-primary text-white')}>
-  {/* background will be #667eea */}
-</div>
-```
-
-## Complete Example
-
-```tsx
-import React from 'react';
-
-export const meta = {
-  name: "social-card",
-  description: "A social media card",
-  size: { width: 1200, height: 630 },
-  props: { title: "string", description: "string" }
-};
-
-interface SocialCardProps {
-  title: string;
-  description: string;
-  tw?: (classes: string) => any;
-  config?: any;
-}
-
-export default function SocialCard({
-  title,
-  description,
-  tw = (c) => ({}),
-  config
-}: SocialCardProps) {
-  return (
-    <div style={tw('w-full h-full flex flex-col justify-center items-center bg-primary text-white p-16')}>
-      <h1 style={tw('text-6xl font-bold text-center mb-8')}>
-        {title}
-      </h1>
-      <p style={tw('text-2xl text-center opacity-90')}>
-        {description}
-      </p>
-    </div>
-  );
-}
-```
-
-## Fallback for Missing tw
-
-Always provide a fallback for the `tw` function in case it's not provided:
-
-```tsx
-export default function MyTemplate({
-  title,
-  tw = (classes: string) => ({})  // Fallback
-}: MyTemplateProps) {
-  // Now tw is always safe to use
-  return <div style={tw('flex items-center')}>{title}</div>;
-}
-```
-
-## Extending Tailwind Support
-
-The current implementation supports common Tailwind classes. To add more:
-
-1. Edit `src/lib/tailwind.ts`
-2. Add to `TAILWIND_MAP` or create a new parser function
-3. Rebuild the CLI
-
-Example adding a new utility:
-
-```typescript
-// In src/lib/tailwind.ts
-const TAILWIND_MAP = {
-  // ... existing classes
-  'shadow-lg': { boxShadow: '0 10px 15px rgba(0,0,0,0.1)' },
-  'shadow-xl': { boxShadow: '0 20px 25px rgba(0,0,0,0.15)' },
-};
-```
-
-## Benefits
-
-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 loopwind.json
-4. **Type Safe**: TypeScript support with CSSProperties
-5. **Extensible**: Easy to add more utilities
-
-## Limitations
-
-- Satori doesn't support all CSS features (no animations, transforms are limited)
-- Pseudo-classes (hover, focus) don't work (Satori renders static images)
-- Some Tailwind utilities may not have equivalents yet
-
-For advanced styling needs, combine Tailwind classes with custom inline styles!