@texturehq/edges 0.0.18 → 0.0.20

package/dist/styles.css

@@ -7,11 +7,13 @@
     --text-sm: 0.875rem;
     --text-base: 1rem;
     --text-lg: 1.125rem;
+    --radius-lg: 0.5rem;
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: "Inter", system-ui, sans-serif;
     --default-mono-font-family: "Fira Code", monospace;
+    --color-brand-primary: #444ae1;
     --color-neutral-black: #333333;
     --color-neutral-white: #ffffff;
     --color-text-body: #333333;
@@ -373,6 +375,9 @@
   .mb-4 {
     margin-bottom: calc(0.25rem * 4);
   }
+  .ml-auto {
+    margin-left: auto;
+  }
   .box-border {
     box-sizing: border-box;
   }
@@ -484,6 +489,9 @@
   .min-h-\[100px\] {
     min-height: 100px;
   }
+  .w-2 {
+    width: calc(0.25rem * 2);
+  }
   .w-3 {
     width: calc(0.25rem * 3);
   }
@@ -823,6 +831,9 @@
   .rounded {
     border-radius: 0.25rem;
   }
+  .rounded-\[0\.5rem\] {
+    border-radius: 0.5rem;
+  }
   .rounded-\[14px\] {
     border-radius: 14px;
   }
@@ -929,6 +940,9 @@
   .border-border-muted\/50 {
     border-color: color-mix(in oklab, #e5e7eb 50%, transparent);
   }
+  .border-brand-primary {
+    border-color: #444ae1;
+  }
   .border-current {
     border-color: currentcolor;
   }
@@ -956,6 +970,9 @@
   .border-slate-800 {
     border-color: var(--slate-800);
   }
+  .border-text-body {
+    border-color: #333333;
+  }
   .border-transparent {
     border-color: transparent;
   }
@@ -971,6 +988,9 @@
   .\!bg-neutral-black {
     background-color: #333333 !important;
   }
+  .bg-\[\#444ae1\] {
+    background-color: #444ae1;
+  }
   .bg-\[var\(--skeleton-base\)\] {
     background-color: var(--skeleton-base);
   }
@@ -1061,18 +1081,12 @@
   .bg-orange-50 {
     background-color: oklch(0.98 0.016 73.684);
   }
-  .bg-pink-400 {
-    background-color: var(--pink-400);
-  }
   .bg-purple-50 {
     background-color: oklch(0.977 0.014 308.299);
   }
   .bg-red-50 {
     background-color: oklch(0.971 0.013 17.38);
   }
-  .bg-red-500 {
-    background-color: oklch(0.637 0.237 25.331);
-  }
   .bg-red-600 {
     background-color: oklch(0.577 0.245 27.325);
   }
@@ -1097,9 +1111,6 @@
   .bg-yellow-50 {
     background-color: oklch(0.987 0.026 102.212);
   }
-  .bg-yellow-400 {
-    background-color: oklch(0.852 0.199 91.936);
-  }
   .bg-gradient-to-r {
     --tw-gradient-position: to right in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
@@ -1174,6 +1185,9 @@
   .p-10 {
     padding: calc(0.25rem * 10);
   }
+  .p-\[1rem\] {
+    padding: 1rem;
+  }
   .\!px-2 {
     padding-inline: calc(0.25rem * 2) !important;
   }
@@ -1267,12 +1281,21 @@
   .pl-3 {
     padding-left: calc(0.25rem * 3);
   }
+  .pl-7 {
+    padding-left: calc(0.25rem * 7);
+  }
   .pl-8 {
     padding-left: calc(0.25rem * 8);
   }
+  .pl-9 {
+    padding-left: calc(0.25rem * 9);
+  }
   .pl-10 {
     padding-left: calc(0.25rem * 10);
   }
+  .pl-12 {
+    padding-left: calc(0.25rem * 12);
+  }
   .text-center {
     text-align: center;
   }
@@ -1320,6 +1343,12 @@
     font-size: 0.75rem;
     line-height: var(--tw-leading, calc(1 / 0.75));
   }
+  .text-\[1\.125rem\] {
+    font-size: 1.125rem;
+  }
+  .text-\[1rem\] {
+    font-size: 1rem;
+  }
   .text-\[length\:var\(--control-text-lg\)\] {
     font-size: var(--control-text-lg);
   }
@@ -1344,6 +1373,10 @@
     --tw-leading: 1.625;
     line-height: 1.625;
   }
+  .font-\[500\] {
+    --tw-font-weight: 500;
+    font-weight: 500;
+  }
   .font-bold {
     --tw-font-weight: 700;
     font-weight: 700;
@@ -1381,6 +1414,15 @@
   .\!text-text-caption {
     color: #6b7280 !important;
   }
+  .text-\[\#111827\] {
+    color: #111827;
+  }
+  .text-\[\#333333\] {
+    color: #333333;
+  }
+  .text-\[\#ffffff\] {
+    color: #ffffff;
+  }
   .text-action-destructive {
     color: #b91c1c;
   }
@@ -1420,9 +1462,6 @@
   .text-gray-800 {
     color: var(--gray-800);
   }
-  .text-green-500 {
-    color: oklch(0.723 0.219 149.579);
-  }
   .text-green-600 {
     color: oklch(0.627 0.194 149.214);
   }
@@ -1509,6 +1548,9 @@
   .caret-transparent {
     caret-color: transparent;
   }
+  .opacity-0 {
+    opacity: 0%;
+  }
   .opacity-50 {
     opacity: 50%;
   }
@@ -1534,6 +1576,14 @@
     --tw-shadow: inset 0 2px 4px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-lg {
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-md {
+    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-none {
     --tw-shadow: 0 0 #0000;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1578,9 +1628,6 @@
     outline-style: var(--tw-outline-style);
     outline-width: 1.5px;
   }
-  .-outline-offset-1 {
-    outline-offset: calc(1px * -1);
-  }
   .-outline-offset-2 {
     outline-offset: calc(2px * -1);
   }
@@ -1605,9 +1652,6 @@
   .outline-feedback-error-border {
     outline-color: #ef4444;
   }
-  .outline-transparent {
-    outline-color: transparent;
-  }
   .outline-white {
     outline-color: var(--color-neutral-white);
   }
@@ -1748,6 +1792,14 @@
       color: #9ca3af;
     }
   }
+  .placeholder\:text-text-placeholder {
+    &::-moz-placeholder {
+      color: #9ca3af;
+    }
+    &::placeholder {
+      color: #9ca3af;
+    }
+  }
   .before\:absolute {
     &::before {
       content: var(--tw-content);
@@ -2118,6 +2170,11 @@
       background-color: #f3f4f6;
     }
   }
+  .data-\[focused\]\:opacity-100 {
+    &[data-focused] {
+      opacity: 100%;
+    }
+  }
   .data-\[placeholder\]\:text-text-placeholder {
     &[data-placeholder] {
       color: #9ca3af;
@@ -2128,6 +2185,11 @@
       background-color: #f3f4f6;
     }
   }
+  .data-\[selected\]\:opacity-100 {
+    &[data-selected] {
+      opacity: 100%;
+    }
+  }
   .supports-\[-moz-appearance\:none\]\:bg-gray-100 {
     @supports (-moz-appearance:none) {
       background-color: var(--gray-100);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@texturehq/edges",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "author": "Nicholas Brown <nick@texturehq.com>",
   "description": "A shared component library for Texture",
   "type": "module",
@@ -9,7 +9,9 @@
   "types": "./dist/index.d.ts",
   "sideEffects": false,
   "files": [
-    "dist/**"
+    "dist/**",
+    "templates/**",
+    "scripts/**"
   ],
   "exports": {
     ".": {
@@ -38,7 +40,8 @@
     "test:coverage": "vitest run --coverage",
     "test:ui": "vitest --ui",
     "storybook": "storybook dev -p 6010 --no-open",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "postinstall": "node scripts/setup-cursor-rules.js || echo \"! setup-cursor-rules: non-fatal error\""
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -52,6 +55,7 @@
     "next-intl": "^4.0.2",
     "react-ace": "^14.0.1",
     "react-aria-components": "^1.7.1",
+    "react-stately": "^3.35.0",
     "tailwind-merge": "^3.2.0"
   },
   "devDependencies": {

package/scripts/generate-components-manifest.js

@@ -0,0 +1,151 @@
+// generate-components-manifest.js
+// Build-time script that scans exported components and creates dist/components.manifest.json
+
+import fs from "fs";
+import path from "path";
+
+const ROOT = process.cwd();
+const SRC_DIR = path.join(ROOT, "src");
+const DIST_DIR = path.join(ROOT, "dist");
+
+function read(file) {
+  return fs.existsSync(file) ? fs.readFileSync(file, "utf8") : "";
+}
+
+function ensureDir(dir) {
+  if (!fs.existsSync(dir)) fs.mkdirSync(dir);
+}
+
+function extractExportsFromIndex(indexContent) {
+  // Matches: export { Button } from "./components/Button";
+  const re = /export\s+\{\s*([A-Za-z0-9_,\s]+)\s*\}\s+from\s+"\.\/components\/([A-Za-z0-9_/.-]+)"/g;
+  const results = [];
+  let m;
+  while ((m = re.exec(indexContent))) {
+    const exported = m[1]
+      .split(",")
+      .map((s) => s.trim())
+      .filter(Boolean);
+    const rel = m[2];
+    exported.forEach((name) => {
+      // Only keep PascalCase (components); ignore sub-exports like Tab, TabList if not directory-named
+      results.push({ name, relPath: rel });
+    });
+  }
+  return results;
+}
+
+function findComponentFile(relPath) {
+  // Components are in directories like Button/Button.tsx or Button/index.ts
+  const base = path.join(SRC_DIR, "components", relPath);
+  const candidates = [
+    path.join(base, `${relPath}.tsx`),
+    path.join(base, `${relPath}.ts`),
+    path.join(base, `index.tsx`),
+    path.join(base, `index.ts`),
+  ];
+  for (const f of candidates) {
+    if (fs.existsSync(f)) return f;
+  }
+  return null;
+}
+
+function getJsdocAbove(content, idx) {
+  // Find the last JSDoc block before idx
+  const upTo = content.slice(0, idx);
+  const start = upTo.lastIndexOf("/**");
+  const end = upTo.lastIndexOf("*/");
+  if (start !== -1 && end !== -1 && end > start) {
+    const block = upTo.slice(start + 3, end).trim();
+    return block
+      .split("\n")
+      .map((l) => l.replace(/^\s*\*\s?/, "").trim())
+      .join(" ")
+      .trim();
+  }
+  return "";
+}
+
+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");
+  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;
+    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");
+    m = typeRe.exec(content);
+  }
+  const props = [];
+  if (m) {
+    const body = m[2] || m[1] || "";
+    const lines = body
+      .split("\n")
+      .map((l) => l.trim())
+      .filter((l) => !!l && !l.startsWith("//"));
+    for (const line of lines) {
+      // Match: name?: Type; or name: Type;
+      const pm = /^(readonly\s+)?([A-Za-z0-9_]+)\??:\s*([^;]+);?/.exec(line);
+      if (pm) {
+        const name = pm[2];
+        const type = pm[3].trim();
+        props.push({ name, type });
+      }
+    }
+  }
+  return props;
+}
+
+function run() {
+  try {
+    const indexPath = path.join(SRC_DIR, "index.ts");
+    const indexContent = read(indexPath);
+    const exports = extractExportsFromIndex(indexContent);
+
+    const components = [];
+    for (const { name, relPath } of exports) {
+      // Only treat PascalCase names as components
+      if (!/^[A-Z]/.test(name)) continue;
+
+      const componentFile = findComponentFile(relPath);
+      if (!componentFile) continue;
+      const content = read(componentFile);
+
+      // 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`));
+      const description = idx !== -1 ? getJsdocAbove(content, idx) : "";
+
+      const props = extractProps(content, name);
+
+      components.push({
+        name,
+        importRoot: "@texturehq/edges",
+        importPath: `@texturehq/edges/components/${name}`,
+        description,
+        props,
+      });
+    }
+
+    ensureDir(DIST_DIR);
+    const manifest = {
+      version: process.env.npm_package_version || "unknown",
+      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.`);
+  } catch (err) {
+    console.error("Failed to generate components manifest:", err);
+    process.exitCode = 1;
+  }
+}
+
+run();
+
+

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

@@ -0,0 +1,167 @@
+#!/usr/bin/env node
+// setup-cursor-rules-manual.js (manual installer for Cursor rules)
+const fs = require("fs");
+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");
+    if (fs.existsSync(pkgJsonPath)) {
+      const pkg = JSON.parse(fs.readFileSync(pkgJsonPath, "utf8"));
+      if (pkg.name === "@texturehq/edges") return;
+    }
+  } 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'),
+    // Regular npm install path
+    path.join(__dirname, '../templates/cursor-rules'),
+    // Alternative paths
+    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'),
+  ];
+  
+  let templatesDir = null;
+  for (const templatePath of possibleTemplatePaths) {
+    if (fs.existsSync(templatePath)) {
+      templatesDir = templatePath;
+      break;
+    }
+  }
+  
+  if (!templatesDir) {
+    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'),
+    // 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'),
+  ];
+  
+  let packageVersion = 'unknown';
+  for (const packageJsonPath of possiblePackageJsonPaths) {
+    if (fs.existsSync(packageJsonPath)) {
+      try {
+        const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+        packageVersion = packageJson.version;
+        console.log(`📦 Found package version: ${packageVersion}`);
+        break;
+      } catch (error) {
+        console.log(`⚠️  Could not read package.json at: ${packageJsonPath}`);
+      }
+    }
+  }
+  
+  const templateFiles = fs.readdirSync(templatesDir).filter(file => file.endsWith('.mdc'));
+  
+  if (templateFiles.length === 0) {
+    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');
+  
+  // Create directories recursively
+  fs.mkdirSync(cursorDir, { recursive: true });
+  fs.mkdirSync(rulesDir, { recursive: true });
+  
+  let copiedCount = 0;
+  
+  templateFiles.forEach(file => {
+    const templatePath = path.join(templatesDir, file);
+    
+    // Read template content and inject version info
+    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);
+    
+    // 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 overwrite to ensure version-specific rules
+    fs.writeFileSync(targetPath, templateContent, "utf8");
+    copiedCount++;
+    console.log(`✅ Updated .cursor/rules/${file} for @texturehq/edges v${packageVersion}`);
+  });
+
+  // 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')
+  ];
+  let manifestPath = null;
+  for (const p of possibleManifestPaths) {
+    if (fs.existsSync(p)) { manifestPath = p; break; }
+  }
+  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');
+      // Backup existing components manifest before overwriting
+      if (fs.existsSync(outPath)) {
+        const backupsDir = path.join(rulesDir, "_backups");
+        fs.mkdirSync(backupsDir, { recursive: true });
+        const ts = new Date().toISOString().replace(/[:.]/g, "-");
+        fs.copyFileSync(outPath, path.join(backupsDir, `edges-components.mdc.${ts}.bak`));
+      }
+      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);
+    }
+  } else {
+    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}`);
+  }
+};
+
+setupCursorRules();