@texturehq/edges 0.1.6 → 0.1.8

package/dist/styles.css

@@ -217,9 +217,15 @@
   }
 }
 @layer utilities {
+  .pointer-events-auto {
+    pointer-events: auto;
+  }
   .pointer-events-none {
     pointer-events: none;
   }
+  .collapse {
+    visibility: collapse;
+  }
   .invisible {
     visibility: hidden;
   }
@@ -270,6 +276,9 @@
   .top-1\/2 {
     top: calc(1/2 * 100%);
   }
+  .top-2 {
+    top: calc(0.25rem * 2);
+  }
   .-right-2 {
     right: calc(0.25rem * -2);
   }
@@ -372,6 +381,9 @@
   .mb-2 {
     margin-bottom: calc(0.25rem * 2);
   }
+  .mb-3 {
+    margin-bottom: calc(0.25rem * 3);
+  }
   .mb-4 {
     margin-bottom: calc(0.25rem * 4);
   }
@@ -483,6 +495,9 @@
   .h-px {
     height: 1px;
   }
+  .max-h-48 {
+    max-height: calc(0.25rem * 48);
+  }
   .max-h-\[300px\] {
     max-height: 300px;
   }
@@ -556,15 +571,15 @@
   .w-full {
     width: 100%;
   }
+  .max-w-4xl {
+    max-width: 56rem;
+  }
   .max-w-\[200px\] {
     max-width: 200px;
   }
   .max-w-\[250px\] {
     max-width: 250px;
   }
-  .max-w-\[400px\] {
-    max-width: 400px;
-  }
   .max-w-full {
     max-width: 100%;
   }
@@ -580,6 +595,9 @@
   .max-w-xl {
     max-width: 36rem;
   }
+  .max-w-xs {
+    max-width: 20rem;
+  }
   .min-w-0 {
     min-width: calc(0.25rem * 0);
   }
@@ -592,15 +610,9 @@
   .min-w-\[150px\] {
     min-width: 150px;
   }
-  .min-w-\[200px\] {
-    min-width: 200px;
-  }
   .min-w-\[208px\] {
     min-width: 208px;
   }
-  .min-w-\[var\(--trigger-width\)\] {
-    min-width: var(--trigger-width);
-  }
   .flex-1 {
     flex: 1;
   }
@@ -649,9 +661,15 @@
   .cursor-pointer {
     cursor: pointer;
   }
+  .cursor-text {
+    cursor: text;
+  }
   .resize {
     resize: both;
   }
+  .resize-none {
+    resize: none;
+  }
   .resize-x {
     resize: horizontal;
   }
@@ -722,6 +740,9 @@
   .gap-1 {
     gap: calc(0.25rem * 1);
   }
+  .gap-1\.5 {
+    gap: calc(0.25rem * 1.5);
+  }
   .gap-2 {
     gap: calc(0.25rem * 2);
   }
@@ -764,6 +785,13 @@
   .gap-\[var\(--control-gap-xl\)\] {
     gap: var(--control-gap-xl);
   }
+  .space-y-1 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(0.25rem * 1) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(0.25rem * 1) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-1\.5 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -952,6 +980,12 @@
   .border-action-primary {
     border-color: #444ae1;
   }
+  .border-action-primary\/20 {
+    border-color: color-mix(in oklab, #444ae1 20%, transparent);
+  }
+  .border-blue-200 {
+    border-color: oklch(0.882 0.059 254.128);
+  }
   .border-border-default {
     border-color: #e5e7eb;
   }
@@ -1033,6 +1067,9 @@
   .bg-action-primary {
     background-color: #444ae1;
   }
+  .bg-action-primary\/10 {
+    background-color: color-mix(in oklab, #444ae1 10%, transparent);
+  }
   .bg-background-hover {
     background-color: #f3f4f6;
   }
@@ -1060,6 +1097,9 @@
   .bg-blue-50 {
     background-color: oklch(0.97 0.014 254.604);
   }
+  .bg-blue-100 {
+    background-color: oklch(0.932 0.032 255.585);
+  }
   .bg-blue-500 {
     background-color: oklch(0.623 0.214 259.815);
   }
@@ -1230,6 +1270,9 @@
   .px-1 {
     padding-inline: calc(0.25rem * 1);
   }
+  .px-1\.5 {
+    padding-inline: calc(0.25rem * 1.5);
+  }
   .px-2 {
     padding-inline: calc(0.25rem * 2);
   }
@@ -1269,6 +1312,9 @@
   .py-2 {
     padding-block: calc(0.25rem * 2);
   }
+  .py-2\.5 {
+    padding-block: calc(0.25rem * 2.5);
+  }
   .py-3 {
     padding-block: calc(0.25rem * 3);
   }
@@ -1341,6 +1387,9 @@
   .text-start {
     text-align: start;
   }
+  .align-baseline {
+    vertical-align: baseline;
+  }
   .align-middle {
     vertical-align: middle;
   }
@@ -1405,6 +1454,10 @@
     --tw-leading: 62px;
     line-height: 62px;
   }
+  .leading-none {
+    --tw-leading: 1;
+    line-height: 1;
+  }
   .leading-relaxed {
     --tw-leading: 1.625;
     line-height: 1.625;
@@ -1471,6 +1524,9 @@
   .text-blue-600 {
     color: oklch(0.546 0.245 262.881);
   }
+  .text-blue-800 {
+    color: oklch(0.424 0.199 265.638);
+  }
   .text-brand-dark {
     color: #363ccb;
   }
@@ -1480,6 +1536,9 @@
   .text-brand-primary {
     color: #444ae1;
   }
+  .text-current {
+    color: currentcolor;
+  }
   .text-feedback-error-text {
     color: #b91c1c;
   }
@@ -1581,9 +1640,6 @@
     --tw-numeric-spacing: tabular-nums;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
   }
-  .caret-transparent {
-    caret-color: transparent;
-  }
   .opacity-0 {
     opacity: 0%;
   }
@@ -1593,6 +1649,12 @@
   .opacity-60 {
     opacity: 60%;
   }
+  .opacity-70 {
+    opacity: 70%;
+  }
+  .opacity-75 {
+    opacity: 75%;
+  }
   .opacity-100 {
     opacity: 100%;
   }
@@ -1611,6 +1673,10 @@
     --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);
@@ -2005,6 +2071,13 @@
       }
     }
   }
+  .hover\:bg-action-primary\/15 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in oklab, #444ae1 15%, transparent);
+      }
+    }
+  }
   .hover\:bg-background-hover {
     &:hover {
       @media (hover: hover) {
@@ -2012,6 +2085,23 @@
       }
     }
   }
+  .hover\:bg-black\/10 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #333333 10%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-neutral-black) 10%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-blue-200 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: oklch(0.882 0.059 254.128);
+      }
+    }
+  }
   .hover\:bg-blue-600 {
     &:hover {
       @media (hover: hover) {
@@ -2117,6 +2207,13 @@
       }
     }
   }
+  .hover\:opacity-100 {
+    &:hover {
+      @media (hover: hover) {
+        opacity: 100%;
+      }
+    }
+  }
   .hover\:brightness-90 {
     &:hover {
       @media (hover: hover) {
@@ -2218,6 +2315,22 @@
       opacity: 100%;
     }
   }
+  .data-\[focused\]\:\!outline-\[1\.5px\] {
+    &[data-focused] {
+      outline-style: var(--tw-outline-style) !important;
+      outline-width: 1.5px !important;
+    }
+  }
+  .data-\[focused\]\:\!outline-\[var\(--control-focus-ring-color\)\] {
+    &[data-focused] {
+      outline-color: var(--control-focus-ring-color) !important;
+    }
+  }
+  .data-\[focused\]\:\!\[--tw-outline-style\:solid\] {
+    &[data-focused] {
+      --tw-outline-style: solid !important;
+    }
+  }
   .data-\[placeholder\]\:text-text-placeholder {
     &[data-placeholder] {
       color: #9ca3af;
@@ -2365,11 +2478,6 @@
       color: #333333;
     }
   }
-  .dark\:text-white {
-    @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-white);
-    }
-  }
   .dark\:text-zinc-100 {
     @media (prefers-color-scheme: dark) {
       color: oklch(0.967 0.001 286.375);
@@ -2385,11 +2493,6 @@
       color: oklch(0.871 0.006 286.286);
     }
   }
-  .dark\:text-zinc-400 {
-    @media (prefers-color-scheme: dark) {
-      color: oklch(0.705 0.015 286.067);
-    }
-  }
   .dark\:text-zinc-600 {
     @media (prefers-color-scheme: dark) {
       color: oklch(0.442 0.017 285.786);
@@ -2643,6 +2746,14 @@
       }
     }
   }
+  .\[\&_\[data-chip-id\]\:\:selection\]\:bg-action-primary\/20 {
+    & [data-chip-id]::-moz-selection {
+      background-color: color-mix(in oklab, #444ae1 20%, transparent);
+    }
+    & [data-chip-id]::selection {
+      background-color: color-mix(in oklab, #444ae1 20%, transparent);
+    }
+  }
   .\[\&_td\]\:px-0 {
     & td {
       padding-inline: calc(0.25rem * 0);
@@ -2783,6 +2894,31 @@
       }
     }
   }
+  .\[\&\:empty\]\:before\:pointer-events-none {
+    &:empty {
+      &::before {
+        content: var(--tw-content);
+        pointer-events: none;
+      }
+    }
+  }
+  .\[\&\:empty\]\:before\:text-text-placeholder {
+    &:empty {
+      &::before {
+        content: var(--tw-content);
+        color: #9ca3af;
+      }
+    }
+  }
+  .\[\&\:empty\]\:before\:content-\[attr\(data-placeholder\)\] {
+    &:empty {
+      &::before {
+        content: var(--tw-content);
+        --tw-content: attr(data-placeholder);
+        content: var(--tw-content);
+      }
+    }
+  }
   .\[\&\>\*\]\:rounded-none {
     &>* {
       border-radius: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@texturehq/edges",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "author": "Nicholas Brown <nick@texturehq.com>",
   "description": "A shared component library for Texture",
   "type": "module",

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

@@ -100,13 +100,6 @@ const setupCursorRules = () => {
     
     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++;
@@ -143,13 +136,7 @@ const setupCursorRules = () => {
         }
       }
       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) {

package/scripts/setup-cursor-rules.js

@@ -36,13 +36,6 @@ const setupCursorRules = () => {
         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++;
@@ -57,30 +50,29 @@ const setupCursorRules = () => {
   
   // Setup Claude rules
   if (fs.existsSync(claudeTemplatesDir)) {
-    const claudeTemplateFiles = fs.readdirSync(claudeTemplatesDir).filter(file => file.endsWith('.md') || file === '.claude');
+    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');
+      fs.mkdirSync(claudeDir, { recursive: true });
+      
       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}`);
-        }
+        // 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 ${file} for Claude`);
+        console.log(`✅ Updated .claude/${namespacedFileName} for Claude`);
       });
       
       if (claudeCopiedCount > 0) {
-        console.log(`🤖 Added ${claudeCopiedCount} Claude rule(s) for @texturehq/edges design system`);
+        console.log(`🤖 Added ${claudeCopiedCount} namespaced Claude rule(s) for @texturehq/edges design system`);
       }
     }
   }
@@ -137,13 +129,7 @@ const setupCursorRules = () => {
         cursorLines.push('');
       }
       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)`);
       
@@ -183,25 +169,19 @@ const setupCursorRules = () => {
         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)`);
-        }
-      });
+      // Update Claude template with components list
+      const claudeTemplatePath = path.join(claudeTemplatesDir, 'claude.md');
+      if (fs.existsSync(claudeTemplatePath)) {
+        const claudeDir = path.join(cwd, '.claude');
+        fs.mkdirSync(claudeDir, { recursive: true });
+        
+        let claudeContent = fs.readFileSync(claudeTemplatePath, 'utf8');
+        claudeContent = claudeContent.split("{{COMPONENTS_LIST}}").join(claudeLines.join("\n"));
+        
+        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)`);
+      }
     } catch (err) {
       console.log('⚠️  Failed to read components.manifest.json:', err.message);
     }