@texturehq/edges 1.24.1 → 1.25.0

package/dist/styles.css

@@ -1487,6 +1487,9 @@
   .top-20 {
     top: var(--spacing-20);
   }
+  .top-\[-2px\] {
+    top: -2px;
+  }
   .top-\[2rem\] {
     top: 2rem;
   }
@@ -1979,6 +1982,9 @@
   .max-h-\[300px\] {
     max-height: 300px;
   }
+  .max-h-\[500px\] {
+    max-height: 500px;
+  }
   .min-h-0 {
     min-height: var(--spacing-0);
   }
@@ -2175,6 +2181,9 @@
   .max-w-7xl {
     max-width: var(--container-7xl);
   }
+  .max-w-\[90vw\] {
+    max-width: 90vw;
+  }
   .max-w-\[150px\] {
     max-width: 150px;
   }
@@ -2350,8 +2359,8 @@
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
-  .-translate-y-\[calc\(50\%\+1px\)\] {
-    --tw-translate-y: calc(calc(50% + 1px) * -1);
+  .translate-y-\[0\.5px\] {
+    --tw-translate-y: 0.5px;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
   .rotate-0 {
@@ -3690,9 +3699,6 @@
   .p-\[1rem\] {
     padding: 1rem;
   }
-  .\!px-1 {
-    padding-inline: var(--spacing-1) !important;
-  }
   .\!px-2 {
     padding-inline: var(--spacing-2) !important;
   }
@@ -3825,9 +3831,6 @@
   .pt-8 {
     padding-top: var(--spacing-8);
   }
-  .pt-\[60px\] {
-    padding-top: 60px;
-  }
   .pr-0 {
     padding-right: var(--spacing-0);
   }
@@ -3939,6 +3942,10 @@
   .font-mono {
     font-family: var(--font-mono);
   }
+  .\!text-base {
+    font-size: var(--text-base) !important;
+    line-height: var(--tw-leading, var(--text-base--line-height)) !important;
+  }
   .text-2xl {
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
@@ -4790,6 +4797,11 @@
       }
     }
   }
+  .group-focus-visible\:opacity-100 {
+    &:is(:where(.group):focus-visible *) {
+      opacity: 100%;
+    }
+  }
   .group-disabled\:text-gray-200 {
     &:is(:where(.group):disabled *) {
       color: var(--color-gray-200);
@@ -4800,6 +4812,11 @@
       color: var(--color-text-disabled);
     }
   }
+  .group-data-\[focused\]\:opacity-100 {
+    &:is(:where(.group)[data-focused] *) {
+      opacity: 100%;
+    }
+  }
   .peer-checked\/category\:block {
     &:is(:where(.peer\/category):checked ~ *) {
       display: block;
@@ -4935,6 +4952,12 @@
       background-color: var(--color-border-muted);
     }
   }
+  .after\:bg-transparent {
+    &::after {
+      content: var(--tw-content);
+      background-color: transparent;
+    }
+  }
   .after\:content-\[\'\'\] {
     &::after {
       --tw-content: '';
@@ -5127,6 +5150,13 @@
       }
     }
   }
+  .hover\:bg-background-surface {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-background-surface);
+      }
+    }
+  }
   .hover\:bg-black\/10 {
     &:hover {
       @media (hover: hover) {
@@ -5250,13 +5280,6 @@
       }
     }
   }
-  .hover\:bg-transparent {
-    &:hover {
-      @media (hover: hover) {
-        background-color: transparent;
-      }
-    }
-  }
   .hover\:bg-white\/10 {
     &:hover {
       @media (hover: hover) {
@@ -5475,6 +5498,11 @@
       outline-style: none;
     }
   }
+  .focus-visible\:bg-brand-light {
+    &:focus-visible {
+      background-color: var(--color-brand-light);
+    }
+  }
   .focus-visible\:ring-0 {
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -5933,11 +5961,21 @@
       padding-bottom: var(--spacing-0);
     }
   }
+  .md\:absolute {
+    @media (width >= 48rem) {
+      position: absolute;
+    }
+  }
   .md\:relative {
     @media (width >= 48rem) {
       position: relative;
     }
   }
+  .md\:left-1\/2 {
+    @media (width >= 48rem) {
+      left: calc(1/2 * 100%);
+    }
+  }
   .md\:order-1 {
     @media (width >= 48rem) {
       order: 1;
@@ -6108,6 +6146,11 @@
       width: auto;
     }
   }
+  .md\:max-w-4xl {
+    @media (width >= 48rem) {
+      max-width: var(--container-4xl);
+    }
+  }
   .md\:max-w-none {
     @media (width >= 48rem) {
       max-width: none;
@@ -6133,6 +6176,12 @@
       flex-shrink: 0;
     }
   }
+  .md\:-translate-x-1\/2 {
+    @media (width >= 48rem) {
+      --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
   .md\:translate-x-0 {
     @media (width >= 48rem) {
       --tw-translate-x: var(--spacing-0);
@@ -6238,6 +6287,11 @@
       }
     }
   }
+  .md\:px-4 {
+    @media (width >= 48rem) {
+      padding-inline: var(--spacing-4);
+    }
+  }
   .md\:px-6 {
     @media (width >= 48rem) {
       padding-inline: var(--spacing-6);
@@ -6258,6 +6312,28 @@
       padding-bottom: var(--spacing-28);
     }
   }
+  .md\:text-sm {
+    @media (width >= 48rem) {
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+    }
+  }
+  .md\:text-xs {
+    @media (width >= 48rem) {
+      font-size: var(--text-xs);
+      line-height: var(--tw-leading, var(--text-xs--line-height));
+    }
+  }
+  .md\:\!text-\[length\:var\(--control-text-md\)\] {
+    @media (width >= 48rem) {
+      font-size: var(--control-text-md) !important;
+    }
+  }
+  .md\:\!text-\[length\:var\(--control-text-sm\)\] {
+    @media (width >= 48rem) {
+      font-size: var(--control-text-sm) !important;
+    }
+  }
   .lg\:sticky {
     @media (width >= 64rem) {
       position: sticky;

package/dist/utilities.manifest.json

@@ -1,6 +1,5 @@
 {
-  "version": "1.24.1",
-  "generatedAt": "2025-11-30T15:12:49.135Z",
+  "version": "1.25.0",
   "categories": {
     "hooks": {
       "description": "React hooks for common functionality like breakpoints, debouncing, local storage, and media queries",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@texturehq/edges",
-  "version": "1.24.1",
+  "version": "1.25.0",
   "author": "Nicholas Brown <nick@texturehq.com>",
   "description": "A shared component library for Texture",
   "type": "module",
@@ -65,7 +65,7 @@
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
     "test:ui": "vitest --ui",
-    "storybook": "VITE_MAPBOX_ACCESS_TOKEN=pk.eyJ1IjoidmljdG9yLXRleHR1cmUiLCJhIjoiY2x1cXM5dnVqMDFvYTJrcWszbnZmdGo4cCJ9.uEu0gqmITLtBMKEVW0aFtA storybook dev -p 6010 --no-open",
+    "storybook": "VITE_MAPBOX_ACCESS_TOKEN=pk.eyJ1IjoidmljdG9yLXRleHR1cmUiLCJhIjoiY2x1cXM5dnVqMDFvYTJrcWszbnZmdGo4cCJ9.uEu0gqmITLtBMKEVW0aFtA storybook dev -p ${STORYBOOK_PORT:-6010} --no-open",
     "build-storybook": "storybook build",
     "postinstall": "node scripts/setup-cursor-rules.js || echo \"! setup-cursor-rules: non-fatal error\""
   },

package/scripts/generate-edges-docs.js

@@ -37,6 +37,12 @@ function ensureDir(dir) {
   if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
 }
 
+function escapeMarkdownTableCell(text) {
+  // Only escape backslashes since the text will be wrapped in backticks (inline code).
+  // Pipes and backticks don't need escaping inside inline code spans.
+  return text.replace(/\\/g, "\\\\");
+}
+
 function writeFile(filePath, content) {
   ensureDir(path.dirname(filePath));
   fs.writeFileSync(filePath, content, "utf8");
@@ -242,6 +248,8 @@ function generateComponentsManifest() {
 
     // Extract props
     const props = extractProps(content, name);
+    // Sort props alphabetically for deterministic output
+    props.sort((a, b) => a.name.localeCompare(b.name));
 
     // Extract Storybook metadata
     const storyFile = findStorybookFile(relPath);
@@ -285,7 +293,8 @@ function generateComponentsManifest() {
 
   const manifest = {
     version: PACKAGE_VERSION,
-    generatedAt: new Date().toISOString(),
+    // generatedAt removed to prevent unnecessary git churn
+    // Use version field to track which package version generated this
     components: components,
     categories: categories,
   };
@@ -405,7 +414,8 @@ function generateUtilitiesManifest() {
 
   const manifest = {
     version: PACKAGE_VERSION,
-    generatedAt: new Date().toISOString(),
+    // generatedAt removed to prevent unnecessary git churn
+    // Use version field to track which package version generated this
     categories: {},
   };
 
@@ -588,7 +598,8 @@ This document provides a complete reference of all ${components.length} componen
         content += `| Prop | Type |\n`;
         content += `|------|------|\n`;
         for (const prop of component.props) {
-          content += `| \`${prop.name}\` | \`${prop.type}\` |\n`;
+          const safeType = escapeMarkdownTableCell(prop.type);
+          content += `| \`${prop.name}\` | \`${safeType}\` |\n`;
         }
         content += `\n`;
       }
@@ -823,7 +834,8 @@ function generateEdgesReadme(componentsManifest, utilitiesManifest) {
   const componentCount = componentsManifest.components.length;
   const categoryCount = Object.keys(componentsManifest.categories).length;
   const hookCount = utilitiesManifest.categories.hooks?.utilities.length || 0;
-  const generatedAt = componentsManifest.generatedAt || new Date().toISOString();
+  // Use version instead of timestamp to avoid git churn
+  const version = componentsManifest.version || PACKAGE_VERSION;
 
   let utilityCount = 0;
   for (const cat in utilitiesManifest.categories) {
@@ -916,8 +928,7 @@ When building UI in \`apps/dashboard\`, reference:
 
 ---
 
-**Package Version:** ${componentsManifest.version}
-**Generated:** ${generatedAt}
+**Package Version:** ${version}
 `;
 
   writeFile(path.join(DOCS_AI_EDGES, "README.md"), content);

package/scripts/setup-cursor-rules.js

@@ -42,6 +42,10 @@ const setupCursorRules = () => {
     path.dirname(new URL(import.meta.url).pathname),
     "../templates/claude-rules"
   );
+  const codexTemplatesDir = path.join(
+    path.dirname(new URL(import.meta.url).pathname),
+    "../templates/codex-rules"
+  );
   const cursorDir = path.join(cwd, ".cursor");
   const rulesDir = path.join(cursorDir, "rules");
 
@@ -80,31 +84,8 @@ const setupCursorRules = () => {
       .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");
-      fs.mkdirSync(claudeDir, { recursive: true });
-
-      claudeTemplateFiles.forEach((file) => {
-        const templatePath = path.join(claudeTemplatesDir, file);
-        // 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`
-        );
-      }
-    }
+    // Claude template processing is done later with component injection (lines 221-236)
+    // so we don't need to copy templates here
   }
 
   // Also render edges-components.mdc from manifest when present
@@ -112,9 +93,17 @@ const setupCursorRules = () => {
     path.join(cwd, "node_modules/@texturehq/edges/dist/components.manifest.json"),
   ].find((p) => fs.existsSync(p));
 
+  // Track what we generated for summary
+  let cursorComponentCount = 0;
+  let claudeComponentCount = 0;
+  let codexComponentCount = 0;
+  let packageVersion = "unknown";
+
   if (manifestPath) {
     try {
       const manifest = JSON.parse(fs.readFileSync(manifestPath, "utf8"));
+      packageVersion = manifest.version || "unknown";
+      // Don't set counts yet - only set them when files are actually written
 
       // Generate Cursor components list
       const cursorLines = [
@@ -150,7 +139,9 @@ const setupCursorRules = () => {
 
         if (c.props && c.props.length) {
           cursorLines.push("**Props:**");
-          c.props.forEach((prop) => {
+          // Sort props alphabetically for deterministic output
+          const sortedProps = [...c.props].sort((a, b) => a.name.localeCompare(b.name));
+          sortedProps.forEach((prop) => {
             cursorLines.push(`- \`${prop.name}: ${prop.type}\``);
           });
           cursorLines.push("");
@@ -161,8 +152,9 @@ const setupCursorRules = () => {
       const cursorOutPath = path.join(rulesDir, "edges-components.mdc");
 
       fs.writeFileSync(cursorOutPath, cursorLines.join("\n"), "utf8");
+      cursorComponentCount = manifest.components?.length || 0;
       console.log(
-        `✅ Wrote .cursor/rules/edges-components.mdc from manifest (${manifest.components?.length || 0} components)`
+        `✅ Wrote .cursor/rules/edges-components.mdc from manifest (${cursorComponentCount} components)`
       );
 
       // Generate Claude components list
@@ -192,7 +184,9 @@ const setupCursorRules = () => {
 
         if (c.props && c.props.length) {
           claudeLines.push("**Props:**");
-          c.props.forEach((prop) => {
+          // Sort props alphabetically for deterministic output
+          const sortedProps = [...c.props].sort((a, b) => a.name.localeCompare(b.name));
+          sortedProps.forEach((prop) => {
             claudeLines.push(`- \`${prop.name}: ${prop.type}\``);
           });
           claudeLines.push("");
@@ -212,18 +206,72 @@ const setupCursorRules = () => {
 
         const claudeOutPath = path.join(claudeDir, "edges.md");
         fs.writeFileSync(claudeOutPath, claudeContent, "utf8");
+        claudeComponentCount = manifest.components?.length || 0;
+        console.log(
+          `✅ Wrote .claude/edges.md with components list (${claudeComponentCount} components)`
+        );
+      }
+
+      // Generate Codex docs using template
+      const codexTemplatePath = path.join(codexTemplatesDir, "codex.md");
+      if (fs.existsSync(codexTemplatePath)) {
+        const codexDir = path.join(cwd, ".codex");
+        fs.mkdirSync(codexDir, { recursive: true });
+
+        let codexContent = fs.readFileSync(codexTemplatePath, "utf8");
+        codexContent = codexContent.split("{{COMPONENTS_LIST}}").join(claudeLines.join("\n"));
+
+        const codexOutPath = path.join(codexDir, "edges.md");
+        fs.writeFileSync(codexOutPath, codexContent, "utf8");
+        codexComponentCount = manifest.components?.length || 0;
         console.log(
-          `✅ Wrote .claude/edges.md with components list (${manifest.components?.length || 0} components)`
+          `✅ Wrote .codex/edges.md with components list (${codexComponentCount} components)`
         );
       }
     } catch (err) {
       console.log("⚠️  Failed to read components.manifest.json:", err.message);
+      console.log("   This might mean:");
+      console.log("   1. @texturehq/edges is not installed");
+      console.log("   2. Package is installed but not built");
+      console.log("   3. Try: cd packages/edges && yarn build");
     }
   }
+
+  // Return summary for outer handler
+  return {
+    cursorCount: cursorComponentCount,
+    claudeCount: claudeComponentCount,
+    codexCount: codexComponentCount,
+    version: packageVersion
+  };
 };
 
 try {
-  setupCursorRules();
+  const result = setupCursorRules();
+  
+  // Print summary if we generated context
+  if (result && (result.cursorCount > 0 || result.claudeCount > 0 || result.codexCount > 0)) {
+    console.log("\n" + "=".repeat(60));
+    console.log("🤖 Agent Context Generated Successfully");
+    console.log("=".repeat(60));
+    
+    if (result.cursorCount > 0) {
+      console.log(`   ✅ Cursor: ${result.cursorCount} components (v${result.version})`);
+    }
+    if (result.claudeCount > 0) {
+      console.log(`   ✅ Claude: ${result.claudeCount} components (v${result.version})`);
+    }
+    if (result.codexCount > 0) {
+      console.log(`   ✅ Codex: ${result.codexCount} components (v${result.version})`);
+    }
+    
+    console.log(`   📦 Source: @texturehq/edges v${result.version}`);
+    console.log("\n💡 Tip: Reload your AI agent to use the latest context");
+    console.log("   Cursor: Cmd+Shift+P → 'Developer: Reload Window'");
+    console.log("   Claude: Restart Claude Desktop / Reload project");
+    console.log("=".repeat(60) + "\n");
+  }
 } catch (err) {
-  console.warn("setup-cursor-rules error:", err);
+  console.warn("⚠️  setup-cursor-rules error:", err);
+  console.warn("   Agent context may not be available");
 }

package/templates/codex-rules/codex.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 `.theme-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";
+```