@texturehq/edges 1.0.2 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@texturehq/edges",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "author": "Nicholas Brown <nick@texturehq.com>",
   "description": "A shared component library for Texture",
   "type": "module",
@@ -117,6 +117,8 @@
     "@vitejs/plugin-react": "^4.2.1",
     "@vitest/coverage-v8": "^3.1.1",
     "@vitest/ui": "^3.1.1",
+    "acorn": "^8.15.0",
+    "acorn-jsx": "^5.3.2",
     "autoprefixer": "^10.4.19",
     "jsdom": "^24.0.0",
     "postcss": "^8.4.35",

package/scripts/copy-assets.js

@@ -10,7 +10,11 @@ try {
   console.log("✅ Theme CSS copied to dist");
 
   // Copy style layer files to dist
-  const styleFiles = ["src/styles/animations.css", "src/styles/computed.css", "src/styles/utilities.css"];
+  const styleFiles = [
+    "src/styles/animations.css",
+    "src/styles/computed.css",
+    "src/styles/utilities.css",
+  ];
 
   // Create styles directory in dist
   if (!fs.existsSync("dist/styles")) {
@@ -26,7 +30,10 @@ try {
   });
 
   // Copy generated token CSS to dist (if they exist)
-  const tokenFiles = ["src/generated/tailwind-tokens-light.css", "src/generated/tailwind-tokens-dark.css"];
+  const tokenFiles = [
+    "src/generated/tailwind-tokens-light.css",
+    "src/generated/tailwind-tokens-dark.css",
+  ];
 
   // Create generated directory in dist
   if (!fs.existsSync("dist/generated")) {

package/scripts/generate-components-manifest.js

@@ -68,16 +68,23 @@ function getJsdocAbove(content, idx) {
 
 function extractProps(content, componentName) {
   // Try `export interface <Name>Props` first
-  const ifaceRe = new RegExp(`export\\s+interface\\s+${componentName}Props\\s*(?:extends\\s+[^{]+)?\\{([\\s\\S]*?)\\}`, "m");
+  const ifaceRe = new RegExp(
+    `export\\s+interface\\s+${componentName}Props\\s*(?:extends\\s+[^{]+)?\\{([\\s\\S]*?)\\}`,
+    "m"
+  );
   let m = ifaceRe.exec(content);
   if (!m) {
     // Try generic name: any exported *Props
-    const anyIfaceRe = /export\s+interface\s+([A-Za-z0-9_]+Props)\s*(?:extends\s+[^{]+)?\{([\s\S]*?)\}/m;
+    const anyIfaceRe =
+      /export\s+interface\s+([A-Za-z0-9_]+Props)\s*(?:extends\s+[^{]+)?\{([\s\S]*?)\}/m;
     m = anyIfaceRe.exec(content);
   }
   if (!m) {
     // Try type alias
-    const typeRe = new RegExp(`export\\s+type\\s+${componentName}Props\\s*=\\s*(?:[^{&]+&\s*)?([\\s\\S]*?)\\}`, "m");
+    const typeRe = new RegExp(
+      `export\\s+type\\s+${componentName}Props\\s*=\\s*(?:[^{&]+&\s*)?([\\s\\S]*?)\\}`,
+      "m"
+    );
     m = typeRe.exec(content);
   }
   const props = [];
@@ -118,7 +125,8 @@ function run() {
       // Description: JSDoc above `export function Name` or above `export interface NameProps`
       let idx = content.indexOf(`export function ${name}`);
       if (idx === -1) idx = content.search(new RegExp(`export\\s+(const|class)\\s+${name}\b`));
-      if (idx === -1) idx = content.search(new RegExp(`export\\s+(interface|type)\\s+${name}Props\b`));
+      if (idx === -1)
+        idx = content.search(new RegExp(`export\\s+(interface|type)\\s+${name}Props\b`));
       const description = idx !== -1 ? getJsdocAbove(content, idx) : "";
 
       const props = extractProps(content, name);
@@ -138,8 +146,13 @@ function run() {
       generatedAt: new Date().toISOString(),
       components: components.sort((a, b) => a.name.localeCompare(b.name)),
     };
-    fs.writeFileSync(path.join(DIST_DIR, "components.manifest.json"), JSON.stringify(manifest, null, 2));
-    console.log(`Generated ${path.join("dist", "components.manifest.json")} with ${components.length} components.`);
+    fs.writeFileSync(
+      path.join(DIST_DIR, "components.manifest.json"),
+      JSON.stringify(manifest, null, 2)
+    );
+    console.log(
+      `Generated ${path.join("dist", "components.manifest.json")} with ${components.length} components.`
+    );
   } catch (err) {
     console.error("Failed to generate components manifest:", err);
     process.exitCode = 1;
@@ -147,5 +160,3 @@ function run() {
 }
 
 run();
-
-

package/scripts/setup-cursor-rules-manual.js

@@ -5,7 +5,7 @@ const path = require("path");
 
 const setupCursorRules = () => {
   const cwd = process.cwd();
-  
+
   // Don't run inside the edges package itself
   try {
     const pkgJsonPath = path.join(cwd, "package.json");
@@ -16,20 +16,20 @@ const setupCursorRules = () => {
   } catch {
     // ignore
   }
-  
+
   // Try multiple possible locations for the templates directory
   const possibleTemplatePaths = [
     // Yalc path (the actual files)
-    path.join(cwd, 'node_modules/.yalc/@texturehq/edges/templates/cursor-rules'),
+    path.join(cwd, "node_modules/.yalc/@texturehq/edges/templates/cursor-rules"),
     // Regular npm install path
-    path.join(__dirname, '../templates/cursor-rules'),
+    path.join(__dirname, "../templates/cursor-rules"),
     // Alternative paths
-    path.join(__dirname, '../../templates/cursor-rules'),
-    path.join(__dirname, '../../../templates/cursor-rules'),
+    path.join(__dirname, "../../templates/cursor-rules"),
+    path.join(__dirname, "../../../templates/cursor-rules"),
     // Direct path from node_modules
-    path.join(cwd, 'node_modules/@texturehq/edges/templates/cursor-rules'),
+    path.join(cwd, "node_modules/@texturehq/edges/templates/cursor-rules"),
   ];
-  
+
   let templatesDir = null;
   for (const templatePath of possibleTemplatePaths) {
     if (fs.existsSync(templatePath)) {
@@ -37,69 +37,69 @@ const setupCursorRules = () => {
       break;
     }
   }
-  
+
   if (!templatesDir) {
-    console.log('⚠️  Could not find cursor rules templates. Tried paths:');
-    possibleTemplatePaths.forEach(path => console.log(`   - ${path}`));
+    console.log("⚠️  Could not find cursor rules templates. Tried paths:");
+    possibleTemplatePaths.forEach((path) => console.log(`   - ${path}`));
     return;
   }
-  
+
   console.log(`✅ Found templates at: ${templatesDir}`);
-  
+
   // Try to read package version from multiple locations
   const possiblePackageJsonPaths = [
     // Yalc path (the actual files)
-    path.join(cwd, 'node_modules/.yalc/@texturehq/edges/package.json'),
+    path.join(cwd, "node_modules/.yalc/@texturehq/edges/package.json"),
     // Regular npm install path
-    path.join(__dirname, '../package.json'),
-    path.join(__dirname, '../../package.json'),
-    path.join(__dirname, '../../../package.json'),
-    path.join(cwd, 'node_modules/@texturehq/edges/package.json'),
+    path.join(__dirname, "../package.json"),
+    path.join(__dirname, "../../package.json"),
+    path.join(__dirname, "../../../package.json"),
+    path.join(cwd, "node_modules/@texturehq/edges/package.json"),
   ];
-  
-  let packageVersion = 'unknown';
+
+  let packageVersion = "unknown";
   for (const packageJsonPath of possiblePackageJsonPaths) {
     if (fs.existsSync(packageJsonPath)) {
       try {
-        const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+        const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf8"));
         packageVersion = packageJson.version;
         console.log(`📦 Found package version: ${packageVersion}`);
         break;
-      } catch (error) {
+      } catch (_error) {
         console.log(`⚠️  Could not read package.json at: ${packageJsonPath}`);
       }
     }
   }
-  
-  const templateFiles = fs.readdirSync(templatesDir).filter(file => file.endsWith('.mdc'));
-  
+
+  const templateFiles = fs.readdirSync(templatesDir).filter((file) => file.endsWith(".mdc"));
+
   if (templateFiles.length === 0) {
-    console.log('⚠️  No .mdc files found in templates directory');
+    console.log("⚠️  No .mdc files found in templates directory");
     return;
   }
-  
+
   // Always use package-level rules for version-specific behavior
-  const cursorDir = path.join(cwd, '.cursor');
-  const rulesDir = path.join(cursorDir, '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 });
-  
+
   let copiedCount = 0;
-  
-  templateFiles.forEach(file => {
+
+  templateFiles.forEach((file) => {
     const templatePath = path.join(templatesDir, file);
-    
+
     // Read template content and inject version info
-    let templateContent = fs.readFileSync(templatePath, 'utf8');
-    
+    let templateContent = fs.readFileSync(templatePath, "utf8");
+
     // Add version information to the rule
     const versionHeader = `\n\n<!-- @texturehq/edges version: ${packageVersion} -->\n`;
     templateContent = templateContent + versionHeader;
-    
+
     const targetPath = path.join(rulesDir, file);
-    
+
     // Always overwrite to ensure version-specific rules
     fs.writeFileSync(targetPath, templateContent, "utf8");
     copiedCount++;
@@ -108,44 +108,53 @@ const setupCursorRules = () => {
 
   // Additionally, try to render a components list rule from the manifest if available
   const possibleManifestPaths = [
-    path.join(cwd, 'node_modules/.yalc/@texturehq/edges/dist/components.manifest.json'),
-    path.join(cwd, 'node_modules/@texturehq/edges/dist/components.manifest.json')
+    path.join(cwd, "node_modules/.yalc/@texturehq/edges/dist/components.manifest.json"),
+    path.join(cwd, "node_modules/@texturehq/edges/dist/components.manifest.json"),
   ];
   let manifestPath = null;
   for (const p of possibleManifestPaths) {
-    if (fs.existsSync(p)) { manifestPath = p; break; }
+    if (fs.existsSync(p)) {
+      manifestPath = p;
+      break;
+    }
   }
   if (manifestPath) {
     try {
-      const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));
+      const manifest = JSON.parse(fs.readFileSync(manifestPath, "utf8"));
       const lines = [
-        '---',
-        'alwaysApply: true',
-        '---',
-        '',
-        `## @texturehq/edges Components (v${manifest.version || 'unknown'})`,
-        ''
+        "---",
+        "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.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 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');
+      const outPath = path.join(rulesDir, "edges-components.mdc");
 
-      fs.writeFileSync(outPath, lines.join('\n'), "utf8");
-      console.log(`✅ Wrote .cursor/rules/edges-components.mdc from manifest (${manifest.components?.length || 0} components)`);
+      fs.writeFileSync(outPath, lines.join("\n"), "utf8");
+      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);
+      console.log("⚠️  Failed to read components.manifest.json:", err.message);
     }
   } else {
-    console.log('ℹ️  No components.manifest.json found; skipping edges-components.mdc generation');
+    console.log("ℹ️  No components.manifest.json found; skipping edges-components.mdc generation");
   }
-  
+
   if (copiedCount > 0) {
     console.log(`🎨 Updated ${copiedCount} cursor rule(s) for @texturehq/edges v${packageVersion}`);
   }

package/scripts/setup-cursor-rules.js

@@ -1,10 +1,10 @@
 // scripts/setup-cursor-rules.js
-import fs from 'fs';
-import path from 'path';
+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");
@@ -15,175 +15,191 @@ const setupCursorRules = () => {
   } 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');
-  
+
+  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'));
-    
+    const templateFiles = fs
+      .readdirSync(cursorTemplatesDir)
+      .filter((file) => file.endsWith(".mdc"));
+
     if (templateFiles.length > 0) {
       let copiedCount = 0;
-      
-      templateFiles.forEach(file => {
+
+      templateFiles.forEach((file) => {
         const templatePath = path.join(cursorTemplatesDir, file);
         const targetPath = path.join(rulesDir, file);
-        
+
         // 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'));
-    
+    const claudeTemplateFiles = fs
+      .readdirSync(claudeTemplatesDir)
+      .filter((file) => file.endsWith(".md"));
+
     if (claudeTemplateFiles.length > 0) {
       let claudeCopiedCount = 0;
-      
+
       // Create .claude directory for namespaced files
-      const claudeDir = path.join(cwd, '.claude');
+      const claudeDir = path.join(cwd, ".claude");
       fs.mkdirSync(claudeDir, { recursive: true });
-      
-      claudeTemplateFiles.forEach(file => {
+
+      claudeTemplateFiles.forEach((file) => {
         const templatePath = path.join(claudeTemplatesDir, file);
-        // Namespace the file as edges-specific  
-        const namespacedFileName = 'edges.md';
+        // Namespace the file as edges-specific
+        const namespacedFileName = "edges.md";
         const targetPath = path.join(claudeDir, namespacedFileName);
-        
+
         // Always copy to ensure latest version
         fs.copyFileSync(templatePath, targetPath);
         claudeCopiedCount++;
         console.log(`✅ Updated .claude/${namespacedFileName} for Claude`);
       });
-      
+
       if (claudeCopiedCount > 0) {
-        console.log(`🤖 Added ${claudeCopiedCount} namespaced Claude rule(s) for @texturehq/edges design system`);
+        console.log(
+          `🤖 Added ${claudeCopiedCount} namespaced 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));
+    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 manifest = JSON.parse(fs.readFileSync(manifestPath, "utf8"));
+
       // Generate Cursor components list
       const cursorLines = [
-        '---',
-        'alwaysApply: true',
-        '---',
-        '',
-        `## @texturehq/edges Components (v${manifest.version || 'unknown'})`,
-        '',
-        '### Quick Reference',
-        ''
+        "---",
+        "alwaysApply: true",
+        "---",
+        "",
+        `## @texturehq/edges Components (v${manifest.version || "unknown"})`,
+        "",
+        "### Quick Reference",
+        "",
       ];
-      
+
       // Add quick reference list
       for (const c of manifest.components || []) {
-        cursorLines.push(`- **${c.name}** - ${c.description || 'Component'}`);
+        cursorLines.push(`- **${c.name}** - ${c.description || "Component"}`);
       }
-      
-      cursorLines.push('');
-      cursorLines.push('### Detailed Component Reference');
-      cursorLines.push('');
-      
+
+      cursorLines.push("");
+      cursorLines.push("### Detailed Component Reference");
+      cursorLines.push("");
+
       for (const c of manifest.components || []) {
         cursorLines.push(`#### ${c.name}`);
         if (c.description) {
           cursorLines.push(`${c.description}`);
         }
-        cursorLines.push('');
-        cursorLines.push('**Imports:**');
+        cursorLines.push("");
+        cursorLines.push("**Imports:**");
         cursorLines.push(`- \`import { ${c.name} } from "@texturehq/edges"\``);
         cursorLines.push(`- \`import { ${c.name} } from "@texturehq/edges/components/${c.name}"\``);
-        cursorLines.push('');
-        
+        cursorLines.push("");
+
         if (c.props && c.props.length) {
-          cursorLines.push('**Props:**');
-          c.props.forEach(prop => {
+          cursorLines.push("**Props:**");
+          c.props.forEach((prop) => {
             cursorLines.push(`- \`${prop.name}: ${prop.type}\``);
           });
-          cursorLines.push('');
+          cursorLines.push("");
         }
-        cursorLines.push('---');
-        cursorLines.push('');
+        cursorLines.push("---");
+        cursorLines.push("");
       }
-      const cursorOutPath = path.join(rulesDir, 'edges-components.mdc');
+      const cursorOutPath = path.join(rulesDir, "edges-components.mdc");
+
+      fs.writeFileSync(cursorOutPath, cursorLines.join("\n"), "utf8");
+      console.log(
+        `✅ Wrote .cursor/rules/edges-components.mdc from manifest (${manifest.components?.length || 0} components)`
+      );
 
-      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 = [];
-      claudeLines.push('### Quick Reference');
-      claudeLines.push('');
-      
+      claudeLines.push("### Quick Reference");
+      claudeLines.push("");
+
       // Add quick reference list
       for (const c of manifest.components || []) {
-        claudeLines.push(`- **${c.name}** - ${c.description || 'Component'}`);
+        claudeLines.push(`- **${c.name}** - ${c.description || "Component"}`);
       }
-      
-      claudeLines.push('');
-      claudeLines.push('### Detailed Component Reference');
-      claudeLines.push('');
-      
+
+      claudeLines.push("");
+      claudeLines.push("### Detailed Component Reference");
+      claudeLines.push("");
+
       for (const c of manifest.components || []) {
         claudeLines.push(`#### ${c.name}`);
         if (c.description) {
           claudeLines.push(`${c.description}`);
         }
-        claudeLines.push('');
-        claudeLines.push('**Imports:**');
+        claudeLines.push("");
+        claudeLines.push("**Imports:**");
         claudeLines.push(`- \`import { ${c.name} } from "@texturehq/edges"\``);
         claudeLines.push(`- \`import { ${c.name} } from "@texturehq/edges/components/${c.name}"\``);
-        claudeLines.push('');
-        
+        claudeLines.push("");
+
         if (c.props && c.props.length) {
-          claudeLines.push('**Props:**');
-          c.props.forEach(prop => {
+          claudeLines.push("**Props:**");
+          c.props.forEach((prop) => {
             claudeLines.push(`- \`${prop.name}: ${prop.type}\``);
           });
-          claudeLines.push('');
+          claudeLines.push("");
         }
-        claudeLines.push('---');
-        claudeLines.push('');
+        claudeLines.push("---");
+        claudeLines.push("");
       }
-      
+
       // Update Claude template with components list
-      const claudeTemplatePath = path.join(claudeTemplatesDir, 'claude.md');
+      const claudeTemplatePath = path.join(claudeTemplatesDir, "claude.md");
       if (fs.existsSync(claudeTemplatePath)) {
-        const claudeDir = path.join(cwd, '.claude');
+        const claudeDir = path.join(cwd, ".claude");
         fs.mkdirSync(claudeDir, { recursive: true });
-        
-        let claudeContent = fs.readFileSync(claudeTemplatePath, 'utf8');
+
+        let claudeContent = fs.readFileSync(claudeTemplatePath, "utf8");
         claudeContent = claudeContent.split("{{COMPONENTS_LIST}}").join(claudeLines.join("\n"));
-        
-        const claudeOutPath = path.join(claudeDir, 'edges.md');
+
+        const claudeOutPath = path.join(claudeDir, "edges.md");
         fs.writeFileSync(claudeOutPath, claudeContent, "utf8");
-        console.log(`✅ Wrote .claude/edges.md with components list (${manifest.components?.length || 0} components)`);
+        console.log(
+          `✅ Wrote .claude/edges.md with components list (${manifest.components?.length || 0} components)`
+        );
       }
     } catch (err) {
-      console.log('⚠️  Failed to read components.manifest.json:', err.message);
+      console.log("⚠️  Failed to read components.manifest.json:", err.message);
     }
   }
 };
@@ -193,5 +209,3 @@ try {
 } catch (err) {
   console.warn("setup-cursor-rules error:", err);
 }
-
-