@texturehq/edges 0.0.15 → 0.0.19

package/dist/theme.css

@@ -8,7 +8,61 @@
   }
 }
 
-@theme {
+@keyframes slide-in-from-right {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-in-from-left {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-out-to-right {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes slide-out-to-left {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@theme inline {
   /* Base Font Families */
   --font-sans: "Inter", system-ui, sans-serif;
   --font-brand: "TT Firs Neue", "Helvetica Neue", "Arial", system-ui, sans-serif;
@@ -280,8 +334,8 @@
   --color-stone-900: var(--stone-900);
   --color-stone-950: var(--stone-950);
 
-  --color-black: var(--black);
-  --color-white: var(--white);
+  --color-black: var(--color-neutral-black);
+  --color-white: var(--color-neutral-white);
 
   --spacing: 0.25rem;
 
@@ -407,6 +461,12 @@
   --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
   --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   --animate-bounce: bounce 1s infinite;
+  --animate-slide-in-from-right: slide-in-from-right 0.3s ease-out;
+  --animate-slide-in-from-left: slide-in-from-left 0.3s ease-out;
+  --animate-slide-out-to-right: slide-out-to-right 0.3s ease-in;
+  --animate-slide-out-to-left: slide-out-to-left 0.3s ease-in;
+  --animate-fade-in: fade-in 0.2s ease-out;
+  --animate-fade-out: fade-out 0.15s ease-in;
 
   @keyframes spin {
     to {
@@ -1015,3 +1075,28 @@
   --skeleton-highlight: #374151;
   --skeleton-wave: rgba(255, 255, 255, 0.1);
 }
+
+/* Define the slide animation utilities */
+.slide-in-from-right {
+  animation: slide-in-from-right 0.3s ease-out;
+}
+
+.slide-in-from-left {
+  animation: slide-in-from-left 0.3s ease-out;
+}
+
+.slide-out-to-right {
+  animation: slide-out-to-right 0.15s ease-in;
+}
+
+.slide-out-to-left {
+  animation: slide-out-to-left 0.15s ease-in;
+}
+
+.fade-in {
+  animation: fade-in 0.2s ease-out;
+}
+
+.fade-out {
+  animation: fade-out 0.15s ease-in;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@texturehq/edges",
-  "version": "0.0.15",
+  "version": "0.0.19",
   "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": {
     ".": {
@@ -18,12 +20,17 @@
       "default": "./dist/index.js"
     },
     "./styles.css": "./dist/styles.css",
-    "./theme.css": "./dist/theme.css"
+    "./dist/styles.css": "./dist/styles.css",
+    "./theme.css": "./dist/theme.css",
+    "./dist/theme.css": "./dist/theme.css"
   },
   "scripts": {
     "dev": "yarn watch",
     "watch": "tsup --watch",
     "build": "tsup",
+    "build:yalc": "tsup && npx yalc publish --sig && npx yalc push",
+    "dev:yalc": "tsup && npx yalc publish --sig && npx yalc push && echo 'Package updated! Run in target project: yarn install && yarn dev'",
+    "dev:yalc:force": "tsup && npx yalc publish --sig && npx yalc push && echo 'Package updated! Run in target project: rm -rf .vite && yarn cache clean && yarn dev --force'",
     "clean": "rm -rf dist",
     "lint": "eslint --ext .ts,.tsx src/",
     "lint:quiet": "eslint --ext .ts,.tsx src/ --quiet",
@@ -33,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",
@@ -47,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": {
@@ -84,6 +93,7 @@
     "typescript": "~5.4.2",
     "vite": "^5.1.6",
     "vite-plugin-svgr": "^4.3.0",
-    "vitest": "^3.1.1"
+    "vitest": "^3.1.1",
+    "yalc": "^1.0.0-pre.53"
   }
 }

package/scripts/generate-components-manifest.js

@@ -0,0 +1,154 @@
+// 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) {
+  // Prefer ComponentName/ComponentName.tsx
+  const base = path.join(SRC_DIR, relPath);
+  const dir = path.dirname(base);
+  const compName = path.basename(base);
+  const candidates = [
+    path.join(dir, `${compName}.tsx`),
+    path.join(dir, `${compName}.ts`),
+    path.join(base, `${compName}.tsx`),
+    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();

package/scripts/setup-cursor-rules.js

@@ -0,0 +1,113 @@
+// 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 templatesDir = path.join(path.dirname(new URL(import.meta.url).pathname), '../templates/cursor-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 });
+  
+  // 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);
+    
+    // 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`);
+  } 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');
+      // 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);
+    }
+  }
+};
+
+try {
+  setupCursorRules();
+} catch (err) {
+  console.warn("setup-cursor-rules error:", err);
+}
+
+