@texturehq/edges 1.17.0 → 1.18.0

package/dist/styles/utilities.css

@@ -4,6 +4,11 @@
  * Note: Animation utilities are in animations.css
  */
 
+/* Gradient background utilities */
+.bg-background-canvas {
+  background: var(--theme-background-canvas);
+}
+
 /* Scrollbar hiding utility */
 .scrollbar-hide {
   /* Firefox */
@@ -30,19 +35,30 @@
 
 /**
  * Remove default focus outlines from menu items and list items
- * We'll use data-[focused] with custom styling for keyboard focus instead
+ * We'll use data-[focus-visible] with custom styling for keyboard focus instead
  */
 [role="menuitem"],
 [role="option"] {
   outline: none;
 }
 
+/**
+ * Global fix: Remove focus outlines from mouse clicks
+ * Only show focus indicators when using keyboard navigation
+ * This prevents the focus ring from appearing when clicking buttons, links, etc.
+ */
+:focus:not(:focus-visible) {
+  outline: none !important;
+}
+
 /**
  * Global focus-visible for keyboard navigation accessibility
  * Applies to buttons, links, and form controls
- * Menu/list items use data-[focused] with custom styling instead
+ * Menu/list items use data-[focus-visible] with custom styling instead
  */
-:focus-visible:not([role="menuitem"]):not([role="option"]) {
+:focus-visible:not([role="menuitem"]):not([role="option"]):not([data-richtexteditor]):not(
+    [data-richtexteditor] *
+  ):not([data-avatar]) {
   outline: 2px solid var(--color-action-default);
   outline-offset: 2px;
 }

package/dist/styles.css

@@ -104,9 +104,10 @@
   --color-background-surface: #ffffff;
   --color-background-muted: #f3f4f6;
   --color-background-hover: #f3f4f6;
-  --color-background-selected: #d1d5db;
+  --color-background-selected: #e5e7eb;
   --color-background-modal: rgba(0, 0, 0, 0.15);
   --color-background-input: #ffffff;
+  --theme-background-canvas: linear-gradient(to bottom right, rgb(239 246 255), rgb(250 245 255), rgb(253 242 248));
   --color-text-body: #333333;
   --color-text-heading: #111827;
   --color-text-muted: #4b5563;
@@ -169,12 +170,12 @@
   --color-state-unknown: #f8f8f8;
   --color-state-unknown-border: #d1d5db;
   --color-state-unknown-text: #000000;
-  --color-state-importing: #f8f8f8;
-  --color-state-importing-border: #d1d5db;
-  --color-state-importing-text: #000000;
-  --color-state-exporting: #f8f8f8;
-  --color-state-exporting-border: #d1d5db;
-  --color-state-exporting-text: #000000;
+  --color-state-importing: #dbeafe;
+  --color-state-importing-border: #3b82f6;
+  --color-state-importing-text: #1e40af;
+  --color-state-exporting: #fef3c7;
+  --color-state-exporting-border: #f59e0b;
+  --color-state-exporting-text: #92400e;
   --color-viz-default: #0082ff;
   --color-viz-categorical-1: #a3eae4;
   --color-viz-categorical-2: #91a0ff;
@@ -464,9 +465,10 @@
   --color-background-surface: #1a2038;
   --color-background-muted: #374151;
   --color-background-hover: #242d47;
-  --color-background-selected: #6b7280;
+  --color-background-selected: #4b5563;
   --color-background-modal: rgba(255, 255, 255, 0.12);
   --color-background-input: rgba(255, 255, 255, 0.05);
+  --theme-background-canvas: linear-gradient(to bottom right, rgb(24 28 48), rgb(30 26 45), rgb(35 26 38));
   --color-text-body: #ededef;
   --color-text-heading: #ffffff;
   --color-text-muted: #9ca3af;
@@ -529,12 +531,12 @@
   --color-state-unknown: #1f2937;
   --color-state-unknown-border: #6b7280;
   --color-state-unknown-text: #ffffff;
-  --color-state-importing: #1f2937;
-  --color-state-importing-border: #6b7280;
-  --color-state-importing-text: #ffffff;
-  --color-state-exporting: #1f2937;
-  --color-state-exporting-border: #6b7280;
-  --color-state-exporting-text: #ffffff;
+  --color-state-importing: #1e3a8a;
+  --color-state-importing-border: #60a5fa;
+  --color-state-importing-text: #dbeafe;
+  --color-state-exporting: #78350f;
+  --color-state-exporting-border: #fbbf24;
+  --color-state-exporting-text: #fef3c7;
   --color-map-streets-border: #ffffff;
   --color-map-satellite-border: #ffffff;
   --color-map-neutral-border: #ffffff;
@@ -595,6 +597,16 @@
   --color-viz-sequential-forest-8: #1a3c0d;
   --color-viz-sequential-forest-9: #0f2808;
   --color-viz-sequential-forest-10: #071403;
+  --color-viz-sequential-red-yellow-green-1: #991b1b;
+  --color-viz-sequential-red-yellow-green-2: #dc2626;
+  --color-viz-sequential-red-yellow-green-3: #f87171;
+  --color-viz-sequential-red-yellow-green-4: #fb923c;
+  --color-viz-sequential-red-yellow-green-5: #fbbf24;
+  --color-viz-sequential-red-yellow-green-6: #fde047;
+  --color-viz-sequential-red-yellow-green-7: #bef264;
+  --color-viz-sequential-red-yellow-green-8: #6ee7b7;
+  --color-viz-sequential-red-yellow-green-9: #34d399;
+  --color-viz-sequential-red-yellow-green-10: #10b981;
   --color-viz-diverging-orange-yellow-seafoam-1: #883a1f;
   --color-viz-diverging-orange-yellow-seafoam-2: #c25f27;
   --color-viz-diverging-orange-yellow-seafoam-3: #e8843d;
@@ -687,6 +699,16 @@
   --color-viz-sequential-forest-8: #1b2e13;
   --color-viz-sequential-forest-9: #13200d;
   --color-viz-sequential-forest-10: #0b1305;
+  --color-viz-sequential-red-yellow-green-1: #7f1d1d;
+  --color-viz-sequential-red-yellow-green-2: #b91c1c;
+  --color-viz-sequential-red-yellow-green-3: #ef4444;
+  --color-viz-sequential-red-yellow-green-4: #fb923c;
+  --color-viz-sequential-red-yellow-green-5: #f59e0b;
+  --color-viz-sequential-red-yellow-green-6: #fbbf24;
+  --color-viz-sequential-red-yellow-green-7: #a3e635;
+  --color-viz-sequential-red-yellow-green-8: #4ade80;
+  --color-viz-sequential-red-yellow-green-9: #10b981;
+  --color-viz-sequential-red-yellow-green-10: #059669;
   --color-viz-diverging-orange-yellow-seafoam-1: #6b2c1a;
   --color-viz-diverging-orange-yellow-seafoam-2: #a24b1e;
   --color-viz-diverging-orange-yellow-seafoam-3: #cb7131;
@@ -776,6 +798,16 @@
   --color-viz-sequential-forest-8: #1a3c0d;
   --color-viz-sequential-forest-9: #0f2808;
   --color-viz-sequential-forest-10: #071403;
+  --color-viz-sequential-red-yellow-green-1: #991b1b;
+  --color-viz-sequential-red-yellow-green-2: #dc2626;
+  --color-viz-sequential-red-yellow-green-3: #f87171;
+  --color-viz-sequential-red-yellow-green-4: #fb923c;
+  --color-viz-sequential-red-yellow-green-5: #fbbf24;
+  --color-viz-sequential-red-yellow-green-6: #fde047;
+  --color-viz-sequential-red-yellow-green-7: #bef264;
+  --color-viz-sequential-red-yellow-green-8: #6ee7b7;
+  --color-viz-sequential-red-yellow-green-9: #34d399;
+  --color-viz-sequential-red-yellow-green-10: #10b981;
   --color-viz-diverging-orange-yellow-seafoam-1: #883a1f;
   --color-viz-diverging-orange-yellow-seafoam-2: #c25f27;
   --color-viz-diverging-orange-yellow-seafoam-3: #e8843d;
@@ -1032,6 +1064,9 @@
 .slide-out-to-bottom {
   animation: slide-out-to-bottom 0.2s ease-in;
 }
+.bg-background-canvas {
+  background: var(--theme-background-canvas);
+}
 .scrollbar-hide {
   scrollbar-width: none;
   &::-webkit-scrollbar {
@@ -1044,7 +1079,10 @@
 [role="menuitem"], [role="option"] {
   outline: none;
 }
-:focus-visible:not([role="menuitem"]):not([role="option"]) {
+:focus:not(:focus-visible) {
+  outline: none !important;
+}
+:focus-visible:not([role="menuitem"]):not([role="option"]):not([data-richtexteditor]):not( [data-richtexteditor] * ):not([data-avatar]) {
   outline: 2px solid var(--color-action-default);
   outline-offset: 2px;
 }
@@ -1532,6 +1570,9 @@
   .mb-1 {
     margin-bottom: var(--spacing-1);
   }
+  .mb-1\.5 {
+    margin-bottom: calc(var(--spacing) * 1.5);
+  }
   .mb-2 {
     margin-bottom: var(--spacing-2);
   }
@@ -1938,6 +1979,9 @@
   .max-w-7xl {
     max-width: var(--container-7xl);
   }
+  .max-w-\[150px\] {
+    max-width: 150px;
+  }
   .max-w-\[200px\] {
     max-width: 200px;
   }
@@ -2020,6 +2064,9 @@
   .min-w-\[208px\] {
     min-width: 208px;
   }
+  .min-w-\[400px\] {
+    min-width: 400px;
+  }
   .min-w-full {
     min-width: 100%;
   }
@@ -2335,6 +2382,9 @@
   .gap-10 {
     gap: var(--spacing-10);
   }
+  .gap-16 {
+    gap: var(--spacing-16);
+  }
   .gap-\[var\(--control-gap-lg\)\] {
     gap: var(--control-gap-lg);
   }
@@ -2976,24 +3026,36 @@
       background-color: color-mix(in oklab, var(--color-feedback-error-background) 50%, transparent);
     }
   }
+  .bg-feedback-error-border {
+    background-color: var(--color-feedback-error-border);
+  }
   .bg-feedback-error-text {
     background-color: var(--color-feedback-error-text);
   }
   .bg-feedback-info-background {
     background-color: var(--color-feedback-info-background);
   }
+  .bg-feedback-info-border {
+    background-color: var(--color-feedback-info-border);
+  }
   .bg-feedback-info-text {
     background-color: var(--color-feedback-info-text);
   }
   .bg-feedback-success-background {
     background-color: var(--color-feedback-success-background);
   }
+  .bg-feedback-success-border {
+    background-color: var(--color-feedback-success-border);
+  }
   .bg-feedback-success-text {
     background-color: var(--color-feedback-success-text);
   }
   .bg-feedback-warning-background {
     background-color: var(--color-feedback-warning-background);
   }
+  .bg-feedback-warning-border {
+    background-color: var(--color-feedback-warning-border);
+  }
   .bg-feedback-warning-text {
     background-color: var(--color-feedback-warning-text);
   }
@@ -3142,10 +3204,10 @@
     --tw-gradient-from: var(--color-action-brand);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
-  .from-black\/40 {
-    --tw-gradient-from: color-mix(in srgb, #000000 40%, transparent);
+  .from-black\/20 {
+    --tw-gradient-from: color-mix(in srgb, #000000 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      --tw-gradient-from: color-mix(in oklab, var(--color-black) 40%, transparent);
+      --tw-gradient-from: color-mix(in oklab, var(--color-black) 20%, transparent);
     }
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
@@ -3166,10 +3228,10 @@
     --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
     --tw-gradient-stops: var(--tw-gradient-via-stops);
   }
-  .via-black\/30 {
-    --tw-gradient-via: color-mix(in srgb, #000000 30%, transparent);
+  .via-black\/15 {
+    --tw-gradient-via: color-mix(in srgb, #000000 15%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      --tw-gradient-via: color-mix(in oklab, var(--color-black) 30%, transparent);
+      --tw-gradient-via: color-mix(in oklab, var(--color-black) 15%, transparent);
     }
     --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
     --tw-gradient-stops: var(--tw-gradient-via-stops);
@@ -3178,10 +3240,10 @@
     --tw-gradient-to: var(--color-skeleton-base);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
-  .to-black\/40 {
-    --tw-gradient-to: color-mix(in srgb, #000000 40%, transparent);
+  .to-black\/20 {
+    --tw-gradient-to: color-mix(in srgb, #000000 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      --tw-gradient-to: color-mix(in oklab, var(--color-black) 40%, transparent);
+      --tw-gradient-to: color-mix(in oklab, var(--color-black) 20%, transparent);
     }
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
@@ -3452,6 +3514,9 @@
   .pr-9 {
     padding-right: var(--spacing-9);
   }
+  .pr-12 {
+    padding-right: var(--spacing-12);
+  }
   .pb-1\.5 {
     padding-bottom: calc(var(--spacing) * 1.5);
   }
@@ -3654,6 +3719,9 @@
     --tw-tracking: var(--tracking-wider);
     letter-spacing: var(--tracking-wider);
   }
+  .text-ellipsis {
+    text-overflow: ellipsis;
+  }
   .whitespace-nowrap {
     white-space: nowrap;
   }
@@ -3922,6 +3990,9 @@
   .opacity-30 {
     opacity: 30%;
   }
+  .opacity-40 {
+    opacity: 40%;
+  }
   .opacity-50 {
     opacity: 50%;
   }
@@ -4086,6 +4157,10 @@
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
+  .backdrop-blur-\[2px\] {
+    --tw-backdrop-blur: blur(2px);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
   .backdrop-blur-md {
     --tw-backdrop-blur: blur(var(--blur-md));
     backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
@@ -4359,6 +4434,12 @@
       position: absolute;
     }
   }
+  .after\:inset-0 {
+    &::after {
+      content: var(--tw-content);
+      inset: var(--spacing-0);
+    }
+  }
   .after\:right-0 {
     &::after {
       content: var(--tw-content);
@@ -4377,6 +4458,12 @@
       left: var(--spacing-0);
     }
   }
+  .after\:z-10 {
+    &::after {
+      content: var(--tw-content);
+      z-index: 10;
+    }
+  }
   .after\:block {
     &::after {
       content: var(--tw-content);
@@ -4460,6 +4547,29 @@
       outline-color: var(--color-feedback-error-border);
     }
   }
+  .focus-within\:border-border-input {
+    &:focus-within {
+      border-color: var(--color-border-input);
+    }
+  }
+  .focus-within\:shadow-none {
+    &:focus-within {
+      --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);
+    }
+  }
+  .focus-within\:ring-0 {
+    &:focus-within {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .focus-within\:outline-none {
+    &:focus-within {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+  }
   .hover\:w-16 {
     &:hover {
       @media (hover: hover) {
@@ -4477,6 +4587,13 @@
       }
     }
   }
+  .hover\:scale-\[1\.02\] {
+    &:hover {
+      @media (hover: hover) {
+        scale: 1.02;
+      }
+    }
+  }
   .hover\:cursor-pointer {
     &:hover {
       @media (hover: hover) {
@@ -4990,11 +5107,11 @@
       background-color: var(--color-gray-100);
     }
   }
-  .supports-\[backdrop-filter\]\:bg-black\/25 {
+  .supports-\[backdrop-filter\]\:bg-black\/15 {
     @supports (backdrop-filter: var(--tw)) {
-      background-color: color-mix(in srgb, #000000 25%, transparent);
+      background-color: color-mix(in srgb, #000000 15%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-black) 25%, transparent);
+        background-color: color-mix(in oklab, var(--color-black) 15%, transparent);
       }
     }
   }
@@ -5078,6 +5195,16 @@
       display: none;
     }
   }
+  .sm\:max-w-\[300px\] {
+    @media (width >= 40rem) {
+      max-width: 300px;
+    }
+  }
+  .sm\:max-w-none {
+    @media (width >= 40rem) {
+      max-width: none;
+    }
+  }
   .sm\:max-w-sm {
     @media (width >= 40rem) {
       max-width: var(--container-sm);
@@ -5338,6 +5465,11 @@
       width: auto;
     }
   }
+  .md\:max-w-none {
+    @media (width >= 48rem) {
+      max-width: none;
+    }
+  }
   .md\:translate-x-0 {
     @media (width >= 48rem) {
       --tw-translate-x: var(--spacing-0);
@@ -6070,11 +6202,6 @@
       color: var(--color-gray-400);
     }
   }
-  .dark\:text-gray-700 {
-    @media (prefers-color-scheme: dark) {
-      color: var(--color-gray-700);
-    }
-  }
   .dark\:text-text-body {
     @media (prefers-color-scheme: dark) {
       color: var(--color-text-body);
@@ -6404,6 +6531,14 @@
       outline-style: none;
     }
   }
+  .\[\&_\.ProseMirror\]\:focus\:outline-none {
+    & .ProseMirror {
+      &:focus {
+        --tw-outline-style: none;
+        outline-style: none;
+      }
+    }
+  }
   .\[\&_\.ProseMirror_blockquote\]\:border-l-4 {
     & .ProseMirror blockquote {
       border-left-style: var(--tw-border-style);

package/dist/utilities.manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.17.0",
-  "generatedAt": "2025-11-03T16:51:16.748Z",
+  "version": "1.18.0",
+  "generatedAt": "2025-11-10T02:40:34.291Z",
   "categories": {
     "hooks": {
       "description": "React hooks for common functionality like breakpoints, debouncing, local storage, and media queries",
@@ -1133,6 +1133,20 @@
           "category": "colors",
           "file": "utils/colors.ts"
         },
+        {
+          "name": "getColorFromDivergingScale",
+          "type": "constant",
+          "description": "Get color from diverging scale for a given value Uses existing diverging palettes to interpolate color based on value position relative to center // Get color for temperature anomaly (-10 to +10, center at 0) const color = getColorFromDivergingScale(5, -10, 10, 0, 'redYellowBlue');",
+          "category": "colors",
+          "file": "utils/colors.ts"
+        },
+        {
+          "name": "getColorFromSequentialScale",
+          "type": "constant",
+          "description": "Get color from sequential scale for a given value Uses existing sequential palettes to interpolate color based on value position in range // Get color for response time (0-5000ms range) const color = getColorFromSequentialScale(2500, 0, 5000, 'viridis');",
+          "category": "colors",
+          "file": "utils/colors.ts"
+        },
         {
           "name": "getContrastingTextColor",
           "type": "function",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@texturehq/edges",
-  "version": "1.17.0",
+  "version": "1.18.0",
   "author": "Nicholas Brown <nick@texturehq.com>",
   "description": "A shared component library for Texture",
   "type": "module",
@@ -97,6 +97,7 @@
     "papaparse": "^5.5.3",
     "react-ace": "^14.0.1",
     "react-aria-components": "^1.7.1",
+    "react-colorful": "^5.6.1",
     "react-map-gl": "7.1.7",
     "react-stately": "^3.35.0",
     "tailwind-merge": "^3.2.0"

package/scripts/generate-edges-docs.js

@@ -1002,7 +1002,7 @@ async function main() {
       cwd: MONO_ROOT,
       stdio: "inherit",
     });
-  } catch (err) {
+  } catch (_err) {
     console.log(
       "⚠️  Note: Could not merge agent instructions (merge script may not be available yet)"
     );

package/scripts/setup-cursor-rules.js

@@ -28,7 +28,7 @@ const setupCursorRules = () => {
       try {
         fs.unlinkSync(file);
         console.log(`🧹 Cleaned up legacy file: ${path.relative(cwd, file)}`);
-      } catch (err) {
+      } catch (_err) {
         // Ignore cleanup errors
       }
     }