@texturehq/edges 1.12.2 → 1.13.1

package/dist/styles/utilities.css

@@ -28,8 +28,8 @@
   outline: none;
 }
 
-/* Ensure focus-visible still works for interactive elements */
-:focus-visible {
+/* Ensure focus-visible still works for interactive elements that don't have custom focus styles */
+:focus-visible:not(input):not(textarea):not(select) {
   outline: 2px solid var(--color-action-default);
   outline-offset: 2px;
 }

package/dist/styles.css

@@ -62,7 +62,6 @@
   --color-brand-light: #f7f7ff;
   --color-brand-dark: #363ccb;
   --color-brand-background: #f6f7ff;
-  --color-neutral-white: #ffffff;
   --color-neutral-black: #000000;
   --spacing-0: 0px;
   --spacing-1: 0.25rem;
@@ -1037,7 +1036,7 @@
 [role="dialog"], [role="menu"], [role="listbox"], [data-react-aria-dialog], [data-react-aria-modal] {
   outline: none;
 }
-:focus-visible {
+:focus-visible:not(input):not(textarea):not(select) {
   outline: 2px solid var(--color-action-default);
   outline-offset: 2px;
 }
@@ -1282,8 +1281,8 @@
   .top-20 {
     top: var(--spacing-20);
   }
-  .top-\[1\.5rem\] {
-    top: 1.5rem;
+  .top-\[2rem\] {
+    top: 2rem;
   }
   .-right-2 {
     right: calc(var(--spacing-2) * -1);
@@ -1690,8 +1689,8 @@
   .h-\[600px\] {
     height: 600px;
   }
-  .h-\[calc\(100\%\+2rem\)\] {
-    height: calc(100% + 2rem);
+  .h-\[calc\(100\%\+2\.5rem\)\] {
+    height: calc(100% + 2.5rem);
   }
   .h-\[calc\(100dvh-60px\)\] {
     height: calc(100dvh - 60px);
@@ -1858,6 +1857,9 @@
   .w-\[320px\] {
     width: 320px;
   }
+  .w-\[400px\] {
+    width: 400px;
+  }
   .w-\[500px\] {
     width: 500px;
   }
@@ -2190,9 +2192,6 @@
   .grid-cols-12 {
     grid-template-columns: repeat(12, minmax(0, 1fr));
   }
-  .grid-cols-\[1fr_300px\] {
-    grid-template-columns: 1fr 300px;
-  }
   .grid-cols-\[1fr_auto\] {
     grid-template-columns: 1fr auto;
   }
@@ -2677,6 +2676,9 @@
       border-color: color-mix(in oklab, var(--color-border-default) 60%, transparent);
     }
   }
+  .border-border-focus {
+    border-color: var(--color-border-focus);
+  }
   .border-border-input {
     border-color: var(--color-border-input);
   }
@@ -3126,6 +3128,9 @@
   .p-1 {
     padding: var(--spacing-1);
   }
+  .p-1\.5 {
+    padding: calc(var(--spacing) * 1.5);
+  }
   .p-2 {
     padding: var(--spacing-2);
   }
@@ -3207,6 +3212,9 @@
   .px-px {
     padding-inline: 1px;
   }
+  .py-0 {
+    padding-block: var(--spacing-0);
+  }
   .py-0\.5 {
     padding-block: calc(var(--spacing) * 0.5);
   }
@@ -3591,9 +3599,6 @@
   .text-inherit {
     color: inherit;
   }
-  .text-neutral-white {
-    color: var(--color-neutral-white);
-  }
   .text-orange-500 {
     color: var(--color-orange-500);
   }
@@ -3738,6 +3743,14 @@
     --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[inset_0_0_0_1px_var\(--color-border-focus\)\] {
+    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--color-border-focus));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-\[inset_0_0_0_1px_var\(--color-feedback-error-border\)\] {
+    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--color-feedback-error-border));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[inset_0_1px_0_0_theme\(colors\.gray\.600\)\] {
     --tw-shadow: inset 0 1px 0 0 var(--tw-shadow-color, #4b5563);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3956,6 +3969,12 @@
   .\[--tw-enter-translate-x\:calc\(-16rem-100\%\)\] {
     --tw-enter-translate-x: calc(-16rem - 100%);
   }
+  .\[animation-delay\:0\.1s\] {
+    animation-delay: 0.1s;
+  }
+  .\[animation-delay\:0\.2s\] {
+    animation-delay: 0.2s;
+  }
   .ring-inset {
     --tw-ring-inset: inset;
   }
@@ -4479,6 +4498,13 @@
       }
     }
   }
+  .hover\:decoration-current {
+    &:hover {
+      @media (hover: hover) {
+        text-decoration-color: currentcolor;
+      }
+    }
+  }
   .hover\:decoration-text-link-hover {
     &:hover {
       @media (hover: hover) {
@@ -5188,9 +5214,9 @@
       padding-block: var(--spacing-6);
     }
   }
-  .md\:pt-24 {
+  .md\:pt-12 {
     @media (width >= 48rem) {
-      padding-top: var(--spacing-24);
+      padding-top: var(--spacing-12);
     }
   }
   .md\:pb-28 {

package/dist/utilities.manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.12.2",
-  "generatedAt": "2025-10-25T13:46:35.400Z",
+  "version": "1.13.1",
+  "generatedAt": "2025-10-27T18:44:56.463Z",
   "categories": {
     "hooks": {
       "description": "React hooks for common functionality like breakpoints, debouncing, local storage, and media queries",
@@ -26,6 +26,20 @@
           "category": "hooks",
           "file": "hooks/useChartExport.ts"
         },
+        {
+          "name": "useClientDataControls",
+          "type": "function",
+          "description": "useClientDataControls Client-side hook for filtering, sorting, searching, and faceting data. Uses memoization to avoid unnecessary recomputation. Operations are applied in this order: 1. Search (fuzzy or exact matching) 2. Filter (structured conditions) 3. Facet computation (on filtered data) 4. Sort ```tsx const { data, facetCounts, resultCount } = useClientDataControls({ data: rawData, filters: createFilters([ createFilter('department', 'in', ['Engineering', 'Sales']) ]), sort: { field: 'name', direction: 'asc' }, search: { query: searchQuery, fields: ['name', 'email'] }, facetConfigs: [ { field: 'department', label: 'Department' }, { field: 'status', label: 'Status' } ] }); ```",
+          "category": "hooks",
+          "file": "hooks/useClientDataControls.ts"
+        },
+        {
+          "name": "useDataControls",
+          "type": "function",
+          "description": "useDataControls Unified hook for managing data filtering, sorting, searching, and faceting. Supports both client-side and server-side modes. **Client Mode:** - Processes data locally using pure functions - Computes facet counts automatically - Best for datasets < 5000 rows **Server Mode:** - Notifies parent when state changes (debounced for search) - Passes through server-provided data and counts - Best for large datasets or complex queries ```tsx const { data, facetCounts, resultCount } = useDataControls({ mode: 'client', data: rawData, filters: createFilters([...]), sort: { field: 'name', direction: 'asc' }, search: { query: searchQuery, fields: ['name', 'email'] }, facetConfigs: [{ field: 'department', label: 'Department' }] }); ``` ```tsx const { data, facetCounts, resultCount } = useDataControls({ mode: 'server', data: serverData, // Already filtered filters, sort, search, resultCount: totalCount, facetCounts: serverFacets, onStateChange: (state) => refetch(state) }); ```",
+          "category": "hooks",
+          "file": "hooks/useDataControls.ts"
+        },
         {
           "name": "useDebounce",
           "type": "function",
@@ -40,6 +54,13 @@
           "category": "hooks",
           "file": "hooks/useElementSize.ts"
         },
+        {
+          "name": "useInfiniteScroll",
+          "type": "function",
+          "description": "useInfiniteScroll Hook for implementing infinite scroll with optional virtualization. Intelligently detects initial vs loading-more states from context. Features: - Smart loading state detection (initial vs loading-more) - Optional explicit state control - TanStack Virtual integration for performance - Intersection Observer for load triggering - Configurable virtualization threshold ```tsx const { scrollRef, computedLoadingState, isLoadingMore } = useInfiniteScroll({ items, onLoadMore: fetchNextPage, hasMore: hasNextPage, isLoading: isFetching, }); ```",
+          "category": "hooks",
+          "file": "hooks/useInfiniteScroll.ts"
+        },
         {
           "name": "useLocalStorage",
           "type": "function",
@@ -53,6 +74,13 @@
           "description": "Hook to check if a media query matches the current viewport ```tsx const isMobile = useMediaQuery('(max-width: 767px)'); const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)'); const isLandscape = useMediaQuery('(orientation: landscape)'); ```",
           "category": "hooks",
           "file": "hooks/useMediaQuery.ts"
+        },
+        {
+          "name": "useServerDataControls",
+          "type": "function",
+          "description": "useServerDataControls Server-side hook that notifies the parent when filter/sort/search state changes. Search queries are debounced to avoid excessive API calls. This hook doesn't manipulate data - it just provides a clean way to: 1. Debounce search input 2. Notify when any state changes 3. Trigger server refetch ```tsx const [filters, setFilters] = useState(null); const [sort, setSort] = useState({ field: 'name', direction: 'asc' }); const [search, setSearch] = useState({ query: '', fields: ['name'] }); useServerDataControls({ filters, sort, search, onStateChange: (state) => { // Refetch data with new parameters refetch({ filters: state.filters, sort: state.sort, search: state.search?.query }); } }); ```",
+          "category": "hooks",
+          "file": "hooks/useServerDataControls.ts"
         }
       ]
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@texturehq/edges",
-  "version": "1.12.2",
+  "version": "1.13.1",
   "author": "Nicholas Brown <nick@texturehq.com>",
   "description": "A shared component library for Texture",
   "type": "module",
@@ -64,6 +64,7 @@
   },
   "dependencies": {
     "@phosphor-icons/react": "^2.1.7",
+    "@tanstack/react-virtual": "^3.13.12",
     "@tiptap/core": "^3.4.5",
     "@tiptap/extension-link": "^3.4.5",
     "@tiptap/pm": "^3.4.5",
@@ -86,6 +87,7 @@
     "file-saver": "^2.0.5",
     "filestack-react": "^6.0.0",
     "framer-motion": "^12.23.18",
+    "fuse.js": "^7.0.0",
     "lucide-react": "^0.544.0",
     "luxon": "^3.4.4",
     "mapbox-gl": "3.7.0",