@texturehq/edges 0.0.18 → 0.0.20

package/scripts/setup-cursor-rules.js

@@ -0,0 +1,170 @@
+// scripts/setup-cursor-rules.js
+import fs from 'fs';
+import path from 'path';
+
+const setupCursorRules = () => {
+  const cwd = process.env.INIT_CWD || process.cwd();
+  
+  // Don't run inside the edges package itself
+  try {
+    const pkgJsonPath = path.join(cwd, "package.json");
+    if (fs.existsSync(pkgJsonPath)) {
+      const pkg = JSON.parse(fs.readFileSync(pkgJsonPath, "utf8"));
+      if (pkg.name === "@texturehq/edges") return;
+    }
+  } catch {
+    // ignore
+  }
+  
+  const cursorTemplatesDir = path.join(path.dirname(new URL(import.meta.url).pathname), '../templates/cursor-rules');
+  const claudeTemplatesDir = path.join(path.dirname(new URL(import.meta.url).pathname), '../templates/claude-rules');
+  const cursorDir = path.join(cwd, '.cursor');
+  const rulesDir = path.join(cursorDir, 'rules');
+  
+  // Create directories recursively
+  fs.mkdirSync(cursorDir, { recursive: true });
+  fs.mkdirSync(rulesDir, { recursive: true });
+  
+  // Setup Cursor rules
+  if (fs.existsSync(cursorTemplatesDir)) {
+    const templateFiles = fs.readdirSync(cursorTemplatesDir).filter(file => file.endsWith('.mdc'));
+    
+    if (templateFiles.length > 0) {
+      let copiedCount = 0;
+      
+      templateFiles.forEach(file => {
+        const templatePath = path.join(cursorTemplatesDir, file);
+        const targetPath = path.join(rulesDir, file);
+        
+        // Backup existing rule before overwriting
+        if (fs.existsSync(targetPath)) {
+          const backupsDir = path.join(rulesDir, "_backups");
+          fs.mkdirSync(backupsDir, { recursive: true });
+          const ts = new Date().toISOString().replace(/[:.]/g, "-");
+          fs.copyFileSync(targetPath, path.join(backupsDir, `${file}.${ts}.bak`));
+        }
+        // Always copy to ensure latest version
+        fs.copyFileSync(templatePath, targetPath);
+        copiedCount++;
+        console.log(`✅ Updated .cursor/rules/${file}`);
+      });
+      
+      if (copiedCount > 0) {
+        console.log(`🎨 Added ${copiedCount} cursor rule(s) for @texturehq/edges design system`);
+      }
+    }
+  }
+  
+  // Setup Claude rules
+  if (fs.existsSync(claudeTemplatesDir)) {
+    const claudeTemplateFiles = fs.readdirSync(claudeTemplatesDir).filter(file => file.endsWith('.md') || file === '.claude');
+    
+    if (claudeTemplateFiles.length > 0) {
+      let claudeCopiedCount = 0;
+      
+      claudeTemplateFiles.forEach(file => {
+        const templatePath = path.join(claudeTemplatesDir, file);
+        const targetPath = path.join(cwd, file);
+        
+        // Backup existing file before overwriting
+        if (fs.existsSync(targetPath)) {
+          const backupPath = `${targetPath}.${new Date().toISOString().replace(/[:.]/g, "-")}.bak`;
+          fs.copyFileSync(targetPath, backupPath);
+          console.log(`📋 Backed up existing ${file} to ${backupPath}`);
+        }
+        
+        // Always copy to ensure latest version
+        fs.copyFileSync(templatePath, targetPath);
+        claudeCopiedCount++;
+        console.log(`✅ Updated ${file} for Claude`);
+      });
+      
+      if (claudeCopiedCount > 0) {
+        console.log(`🤖 Added ${claudeCopiedCount} Claude rule(s) for @texturehq/edges design system`);
+      }
+    }
+  }
+
+  // Also render edges-components.mdc from manifest when present
+  const manifestPath = [
+    path.join(cwd, 'node_modules/@texturehq/edges/dist/components.manifest.json')
+  ].find(p => fs.existsSync(p));
+
+  if (manifestPath) {
+    try {
+      const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));
+      
+      // Generate Cursor components list
+      const cursorLines = [
+        '---',
+        'alwaysApply: true',
+        '---',
+        '',
+        `## @texturehq/edges Components (v${manifest.version || 'unknown'})`,
+        ''
+      ];
+      for (const c of manifest.components || []) {
+        cursorLines.push(`- ${c.name}`);
+        if (c.importRoot) cursorLines.push(`  - Import: \`import { ${c.name} } from "${c.importRoot}"\``);
+        if (c.importPath) cursorLines.push(`  - Subpath: \`import { ${c.name} } from "${c.importPath}"\``);
+        if (c.props && c.props.length) {
+          const propNames = c.props.slice(0, 8).map(p => p.name).join(', ');
+          cursorLines.push(`  - Props: ${propNames}${c.props.length > 8 ? ', …' : ''}`);
+        }
+      }
+      const cursorOutPath = path.join(rulesDir, 'edges-components.mdc');
+      // Backup existing components manifest before overwriting
+      if (fs.existsSync(cursorOutPath)) {
+        const backupsDir = path.join(rulesDir, "_backups");
+        fs.mkdirSync(backupsDir, { recursive: true });
+        const ts = new Date().toISOString().replace(/[:.]/g, "-");
+        fs.copyFileSync(cursorOutPath, path.join(backupsDir, `edges-components.mdc.${ts}.bak`));
+      }
+      fs.writeFileSync(cursorOutPath, cursorLines.join('\n'), "utf8");
+      console.log(`✅ Wrote .cursor/rules/edges-components.mdc from manifest (${manifest.components?.length || 0} components)`);
+      
+      // Generate Claude components list
+      const claudeLines = [];
+      for (const c of manifest.components || []) {
+        claudeLines.push(`- **${c.name}**`);
+        if (c.description) claudeLines.push(`  - ${c.description}`);
+        if (c.importPath) claudeLines.push(`  - Import: \`import { ${c.name} } from "${c.importPath}"\``);
+        if (c.props && c.props.length) {
+          const propNames = c.props.slice(0, 6).map(p => p.name).join(', ');
+          claudeLines.push(`  - Props: ${propNames}${c.props.length > 6 ? ', …' : ''}`);
+        }
+        claudeLines.push('');
+      }
+      
+      // Update Claude templates with components list
+      const claudeTemplates = ['claude.md', '.claude'];
+      
+      claudeTemplates.forEach(templateName => {
+        const claudeTemplatePath = path.join(claudeTemplatesDir, templateName);
+        if (fs.existsSync(claudeTemplatePath)) {
+          let claudeContent = fs.readFileSync(claudeTemplatePath, 'utf8');
+          claudeContent = claudeContent.split("{{COMPONENTS_LIST}}").join(claudeLines.join("\n"));
+          const claudeOutPath = path.join(cwd, templateName);
+          // Backup existing file before overwriting
+          if (fs.existsSync(claudeOutPath)) {
+            const backupPath = `${claudeOutPath}.${new Date().toISOString().replace(/[:.]/g, "-")}.bak`;
+            fs.copyFileSync(claudeOutPath, backupPath);
+            console.log(`📋 Backed up existing ${templateName} to ${backupPath}`);
+          }
+          fs.writeFileSync(claudeOutPath, claudeContent, "utf8");
+          console.log(`✅ Wrote ${templateName} with components list (${manifest.components?.length || 0} components)`);
+        }
+      });
+    } catch (err) {
+      console.log('⚠️  Failed to read components.manifest.json:', err.message);
+    }
+  }
+};
+
+try {
+  setupCursorRules();
+} catch (err) {
+  console.warn("setup-cursor-rules error:", err);
+}
+
+

package/scripts/setup-cursor-rules.sh

@@ -0,0 +1,95 @@
+// scripts/setup-cursor-rules.js
+import fs from 'fs';
+import path from 'path';
+
+const setupCursorRules = () => {
+  const cwd = process.cwd();
+  
+  // Don't run in the package itself
+  if (cwd.includes('mono/packages/edges')) {
+    return;
+  }
+  
+  const templatesDir = path.join(__dirname, '../templates/cursor-rules');
+  const cursorDir = path.join(cwd, '.cursor');
+  const rulesDir = path.join(cursorDir, 'rules');
+  
+  // Create directories if they don't exist
+  if (!fs.existsSync(cursorDir)) {
+    fs.mkdirSync(cursorDir);
+  }
+  if (!fs.existsSync(rulesDir)) {
+    fs.mkdirSync(rulesDir);
+  }
+  
+  // Check if templates directory exists
+  if (!fs.existsSync(templatesDir)) {
+    console.log('⚠️  No cursor rules templates found');
+    return;
+  }
+  
+  // Copy all .mdc files from templates to the project's cursor rules
+  const templateFiles = fs.readdirSync(templatesDir).filter(file => file.endsWith('.mdc'));
+  
+  if (templateFiles.length === 0) {
+    console.log('⚠️  No .mdc files found in templates directory');
+    return;
+  }
+  
+  let copiedCount = 0;
+  
+  templateFiles.forEach(file => {
+    const templatePath = path.join(templatesDir, file);
+    const targetPath = path.join(rulesDir, file);
+    
+    // Only copy if the target doesn't already exist
+    if (!fs.existsSync(targetPath)) {
+      fs.copyFileSync(templatePath, targetPath);
+      copiedCount++;
+      console.log(`✅ Added .cursor/rules/${file}`);
+    } else {
+      console.log(`⏭️  Skipped .cursor/rules/${file} (already exists)`);
+    }
+  });
+  
+  if (copiedCount > 0) {
+    console.log(`🎨 Added ${copiedCount} cursor rule(s) for @texturehq/edges design system`);
+  } else {
+    console.log('ℹ️  All cursor rules already exist');
+  }
+
+  // Also render edges-components.mdc from manifest when present
+  const manifestPath = [
+    path.join(cwd, 'node_modules/@texturehq/edges/dist/components.manifest.json')
+  ].find(p => fs.existsSync(p));
+
+  if (manifestPath) {
+    try {
+      const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));
+      const lines = [
+        '---',
+        'alwaysApply: true',
+        '---',
+        '',
+        `## @texturehq/edges Components (v${manifest.version || 'unknown'})`,
+        ''
+      ];
+      for (const c of manifest.components || []) {
+        lines.push(`- ${c.name}`);
+        if (c.importRoot) lines.push(`  - Import: \`import { ${c.name} } from "${c.importRoot}"\``);
+        if (c.importPath) lines.push(`  - Subpath: \`import { ${c.name} } from "${c.importPath}"\``);
+        if (c.props && c.props.length) {
+          const propNames = c.props.slice(0, 8).map(p => p.name).join(', ');
+          lines.push(`  - Props: ${propNames}${c.props.length > 8 ? ', …' : ''}`);
+        }
+      }
+      const outPath = path.join(rulesDir, 'edges-components.mdc');
+      fs.writeFileSync(outPath, lines.join('\n'));
+      console.log(`✅ Wrote .cursor/rules/edges-components.mdc from manifest (${manifest.components?.length || 0} components)`);
+    } catch (err) {
+      console.log('⚠️  Failed to read components.manifest.json:', err.message);
+    }
+  }
+};
+
+setupCursorRules();

package/templates/claude-rules/.claude

@@ -0,0 +1,85 @@
+# @texturehq/edges Design System
+
+This project uses the @texturehq/edges design system with Tailwind 4. The theme CSS file contains all design system variables that automatically become available as Tailwind classes.
+
+## Setup
+
+The theme is imported via CSS:
+```css
+@import "@texturehq/edges/theme.css";
+```
+
+## How It Works
+
+- CSS variables in the theme file automatically become Tailwind classes
+- `--color-brand-primary` becomes available as `bg-brand-primary`, `text-brand-primary`, `border-brand-primary`, etc.
+- `--spacing-md` becomes available as `p-md`, `m-md`, `gap-md`, etc.
+- `--text-lg` becomes available as `text-lg`
+- `--radius-lg` becomes available as `rounded-lg`
+
+## Usage Guidelines
+
+- **Use semantic classes over arbitrary values**
+- Prefer: `bg-brand-primary`, `text-text-body`, `p-md`, `rounded-lg`
+- Avoid: `bg-[#444ae1]`, `text-[#333333]`, `p-[1rem]`, `rounded-[0.5rem]`
+
+## Naming Conventions
+
+- Brand colors: `brand-primary`, `brand-light`, `brand-dark`
+- Text colors: `text-body`, `text-heading`, `text-muted`, `text-caption`
+- Background colors: `background-body`, `background-surface`, `background-muted`
+- Border colors: `border-default`, `border-focus`, `border-muted`
+- Action colors: `action-primary`, `action-secondary`, `action-destructive`
+- Feedback colors: `feedback-success`, `feedback-error`, `feedback-warning`, `feedback-info`
+- Spacing: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`
+- Typography: `xs`, `sm`, `base`, `lg`, `xl`, `2xl`, `3xl`, `4xl`
+- Border radius: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`
+
+## Examples
+
+```html
+<!-- ✅ Good - Uses semantic classes -->
+<div class="bg-brand-primary text-text-on-primary p-md rounded-lg shadow-md">
+  <h2 class="text-text-heading text-lg font-medium">Title</h2>
+  <p class="text-text-body text-base">Content</p>
+</div>
+
+<!-- ❌ Avoid - Uses arbitrary values -->
+<div class="bg-[#444ae1] text-[#ffffff] p-[1rem] rounded-[0.5rem]">
+  <h2 class="text-[#111827] text-[1.125rem] font-[500]">Title</h2>
+  <p class="text-[#333333] text-[1rem]">Content</p>
+</div>
+```
+
+## Dark Mode
+
+All colors automatically adapt to dark mode when `.dark` class is present.
+
+## Available Variables
+
+All CSS variables from the theme file are automatically available. The theme includes:
+- Complete color system (brand, text, background, border, action, feedback, device states, data visualization)
+- Spacing scale
+- Typography scale  
+- Border radius scale
+- Shadow system
+- Animation definitions
+- Form control specifications
+
+## Available Components
+
+The following components are available from @texturehq/edges:
+
+{{COMPONENTS_LIST}}
+
+## Import Examples
+
+```typescript
+// Import from package root
+import { Button, TextField, Card } from "@texturehq/edges";
+
+// Import individual components for tree-shaking
+import { Button } from "@texturehq/edges/components/Button";
+import { TextField } from "@texturehq/edges/components/TextField";
+import { Card } from "@texturehq/edges/components/Card";
+```

package/templates/claude-rules/claude.md

@@ -0,0 +1,85 @@
+# @texturehq/edges Design System
+
+This project uses the @texturehq/edges design system with Tailwind 4. The theme CSS file contains all design system variables that automatically become available as Tailwind classes.
+
+## Setup
+
+The theme is imported via CSS:
+```css
+@import "@texturehq/edges/theme.css";
+```
+
+## How It Works
+
+- CSS variables in the theme file automatically become Tailwind classes
+- `--color-brand-primary` becomes available as `bg-brand-primary`, `text-brand-primary`, `border-brand-primary`, etc.
+- `--spacing-md` becomes available as `p-md`, `m-md`, `gap-md`, etc.
+- `--text-lg` becomes available as `text-lg`
+- `--radius-lg` becomes available as `rounded-lg`
+
+## Usage Guidelines
+
+- **Use semantic classes over arbitrary values**
+- Prefer: `bg-brand-primary`, `text-text-body`, `p-md`, `rounded-lg`
+- Avoid: `bg-[#444ae1]`, `text-[#333333]`, `p-[1rem]`, `rounded-[0.5rem]`
+
+## Naming Conventions
+
+- Brand colors: `brand-primary`, `brand-light`, `brand-dark`
+- Text colors: `text-body`, `text-heading`, `text-muted`, `text-caption`
+- Background colors: `background-body`, `background-surface`, `background-muted`
+- Border colors: `border-default`, `border-focus`, `border-muted`
+- Action colors: `action-primary`, `action-secondary`, `action-destructive`
+- Feedback colors: `feedback-success`, `feedback-error`, `feedback-warning`, `feedback-info`
+- Spacing: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`
+- Typography: `xs`, `sm`, `base`, `lg`, `xl`, `2xl`, `3xl`, `4xl`
+- Border radius: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`
+
+## Examples
+
+```html
+<!-- ✅ Good - Uses semantic classes -->
+<div class="bg-brand-primary text-text-on-primary p-md rounded-lg shadow-md">
+  <h2 class="text-text-heading text-lg font-medium">Title</h2>
+  <p class="text-text-body text-base">Content</p>
+</div>
+
+<!-- ❌ Avoid - Uses arbitrary values -->
+<div class="bg-[#444ae1] text-[#ffffff] p-[1rem] rounded-[0.5rem]">
+  <h2 class="text-[#111827] text-[1.125rem] font-[500]">Title</h2>
+  <p class="text-[#333333] text-[1rem]">Content</p>
+</div>
+```
+
+## Dark Mode
+
+All colors automatically adapt to dark mode when `.dark` class is present.
+
+## Available Variables
+
+All CSS variables from the theme file are automatically available. The theme includes:
+- Complete color system (brand, text, background, border, action, feedback, device states, data visualization)
+- Spacing scale
+- Typography scale  
+- Border radius scale
+- Shadow system
+- Animation definitions
+- Form control specifications
+
+## Available Components
+
+The following components are available from @texturehq/edges:
+
+{{COMPONENTS_LIST}}
+
+## Import Examples
+
+```typescript
+// Import from package root
+import { Button, TextField, Card } from "@texturehq/edges";
+
+// Import individual components for tree-shaking
+import { Button } from "@texturehq/edges/components/Button";
+import { TextField } from "@texturehq/edges/components/TextField";
+import { Card } from "@texturehq/edges/components/Card";
+```

package/templates/cursor-rules/edges-usage.mdc

@@ -0,0 +1,65 @@
+---
+alwaysApply: true
+---
+
+ Usage Context for @texturehq/edges
+
+## Setup
+This project uses @texturehq/edges design system with Tailwind 4. The theme CSS file contains all design system variables that automatically become available as Tailwind classes.
+
+## Theme Import
+The theme is imported via CSS:
+```css
+@import "@texturehq/edges/theme.css";
+```
+
+## How It Works
+- CSS variables in the theme file automatically become Tailwind classes
+- `--color-brand-primary` becomes available as `bg-brand-primary`, `text-brand-primary`, `border-brand-primary`, etc.
+- `--spacing-md` becomes available as `p-md`, `m-md`, `gap-md`, etc.
+- `--text-lg` becomes available as `text-lg`
+- `--radius-lg` becomes available as `rounded-lg`
+
+## Usage Guidelines
+- **Use semantic classes over arbitrary values**
+- Prefer: `bg-brand-primary`, `text-text-body`, `p-md`, `rounded-lg`
+- Avoid: `bg-[#444ae1]`, `text-[#333333]`, `p-[1rem]`, `rounded-[0.5rem]`
+
+## Naming Conventions
+- Brand colors: `brand-primary`, `brand-light`, `brand-dark`
+- Text colors: `text-body`, `text-heading`, `text-muted`, `text-caption`
+- Background colors: `background-body`, `background-surface`, `background-muted`
+- Border colors: `border-default`, `border-focus`, `border-muted`
+- Action colors: `action-primary`, `action-secondary`, `action-destructive`
+- Feedback colors: `feedback-success`, `feedback-error`, `feedback-warning`, `feedback-info`
+- Spacing: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`
+- Typography: `xs`, `sm`, `base`, `lg`, `xl`, `2xl`, `3xl`, `4xl`
+- Border radius: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`
+
+## Examples
+```html
+<!-- ✅ Good - Uses semantic classes -->
+<div class="bg-brand-primary text-text-on-primary p-md rounded-lg shadow-md">
+  <h2 class="text-text-heading text-lg font-medium">Title</h2>
+  <p class="text-text-body text-base">Content</p>
+</div>
+
+<!-- ❌ Avoid - Uses arbitrary values -->
+<div class="bg-[#444ae1] text-[#ffffff] p-[1rem] rounded-[0.5rem]">
+  <h2 class="text-[#111827] text-[1.125rem] font-[500]">Title</h2>
+  <p class="text-[#333333] text-[1rem]">Content</p>
+</div>
+```
+
+## Dark Mode
+All colors automatically adapt to dark mode when `.dark` class is present.
+
+## Available Variables
+All CSS variables from the theme file are automatically available. The theme includes:
+- Complete color system (brand, text, background, border, action, feedback, device states, data visualization)
+- Spacing scale
+- Typography scale  
+- Border radius scale
+- Shadow system
+- Animation definitions
+- Form control specifications