@texturehq/edges 1.26.5 → 1.26.7

package/dist/styles.css

@@ -6171,6 +6171,11 @@
       position: relative;
     }
   }
+  .md\:z-10 {
+    @media (width >= 48rem) {
+      z-index: 10;
+    }
+  }
   .md\:order-1 {
     @media (width >= 48rem) {
       order: 1;

package/dist/utilities.manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.26.5",
+  "version": "1.26.7",
   "categories": {
     "hooks": {
       "description": "React hooks for common functionality like breakpoints, debouncing, local storage, and media queries",
@@ -14,28 +14,28 @@
         {
           "name": "useBreakpoint",
           "type": "function",
-          "description": "Hook to detect which Tailwind breakpoint is currently active Returns an object with boolean flags for each breakpoint and convenience helpers. All breakpoints use min-width queries to match Tailwind's mobile-first approach. ```tsx const { isMobile, isDesktop, current } = useBreakpoint(); // Conditional rendering based on screen size return isMobile ? <MobileNav /> : <DesktopNav />; // Check specific breakpoint if (isLg) { // Show expanded view on large screens } // Use current breakpoint console.log(`Current breakpoint: ${current}`); // \"md\", \"lg\", etc. ```",
+          "description": "Hook to detect which Tailwind breakpoint is currently active Returns an object with boolean flags for each breakpoint and convenience helpers. All breakpoints use min-width queries to match Tailwind's mobile-first approach.",
           "category": "hooks",
           "file": "hooks/useBreakpoint.ts"
         },
         {
           "name": "useChartExport",
           "type": "function",
-          "description": "Hook for exporting chart data in various formats (CSV, SVG, PNG). Provides a stable callback for triggering exports with memoized dependencies. ```tsx const svgRef = useRef<SVGSVGElement>(null); const handleExport = useChartExport({ datasets: chartData, metadata: { xLabel: 'Date', yLabel: 'Value', seriesLabels: ['Series 1', 'Series 2'], filename: 'sales-report', timestamp: true }, svgRef }); // In your component <Button onPress={() => handleExport('csv')}>Export CSV</Button> <Button onPress={() => handleExport('png')}>Export PNG</Button> ```",
+          "description": "Hook for exporting chart data in various formats (CSV, SVG, PNG). Provides a stable callback for triggering exports with memoized dependencies.",
           "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' } ] }); ```",
+          "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",
           "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) }); ```",
+          "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",
           "category": "hooks",
           "file": "hooks/useDataControls.ts"
         },
@@ -56,14 +56,14 @@
         {
           "name": "useElementSize",
           "type": "function",
-          "description": "useElementSize A performant hook that tracks the dimensions of a DOM element using ResizeObserver. Returns a callback ref to attach to the element and its current width/height. Performance optimizations: - Uses ResizeObserver for efficient resize detection - Debounces updates using requestAnimationFrame - Cleans up observer on unmount ```tsx const { ref, width, height } = useElementSize(); return ( <div ref={ref}> Width: {width}px, Height: {height}px </div> ); ```",
+          "description": "useElementSize A performant hook that tracks the dimensions of a DOM element using ResizeObserver. Returns a callback ref to attach to the element and its current width/height. Performance optimizations: - Uses ResizeObserver for efficient resize detection - Debounces updates using requestAnimationFrame - Cleans up observer on unmount",
           "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, }); ```",
+          "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",
           "category": "hooks",
           "file": "hooks/useInfiniteScroll.ts"
         },
@@ -77,16 +77,23 @@
         {
           "name": "useMediaQuery",
           "type": "function",
-          "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)'); ```",
+          "description": "Hook to check if a media query matches the current viewport",
           "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 }); } }); ```",
+          "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",
           "category": "hooks",
           "file": "hooks/useServerDataControls.ts"
+        },
+        {
+          "name": "useTableExport",
+          "type": "function",
+          "description": "Hook for exporting DataTable data as CSV. Provides a stable callback for triggering exports with memoized dependencies. For client-side DataTables where all data is in the browser. For server-side exports, use the `onExport` callback pattern instead.",
+          "category": "hooks",
+          "file": "hooks/useTableExport.ts"
         }
       ]
     },
@@ -173,7 +180,7 @@
         {
           "name": "createFormat",
           "type": "constant",
-          "description": "Convenience function to create a format object ```typescript const currencyFormat = createFormat(\"currency\", { currency: \"EUR\" }); const dateFormat = createFormat(\"date\", { relative: true }); ```",
+          "description": "Convenience function to create a format object",
           "category": "formatting",
           "file": "utils/formatting/index.ts"
         },
@@ -222,14 +229,14 @@
         {
           "name": "formatCapacity",
           "type": "function",
-          "description": "Format battery capacity (kWh) ```typescript formatCapacity(13.5); // \"13.5 kWh\" formatCapacity(1500); // \"1.5 MWh\" formatCapacity(null); // null ```",
+          "description": "Format battery capacity (kWh)",
           "category": "formatting",
           "file": "utils/formatting/capacity.ts"
         },
         {
           "name": "formatComponentValue",
           "type": "function",
-          "description": "Format a value for display in a component Centralizes the logic used by Kpi, StatList, and similar components ```tsx // In a component const formatted = formatComponentValue({ value: 1500, formatter: { type: \"power\" } }); // Returns: \"1.5 kW\" ```",
+          "description": "Format a value for display in a component Centralizes the logic used by Kpi, StatList, and similar components",
           "category": "formatting",
           "file": "utils/formatting/component-formatter.tsx"
         },
@@ -271,7 +278,7 @@
         {
           "name": "formatFieldValue",
           "type": "constant",
-          "description": "Main formatting function that routes to the appropriate formatter based on the format type ```typescript // Format as currency formatFieldValue(1234.56, { type: \"currency\", currency: \"USD\" }) // Returns: \"$1,234.56\" // Format as relative time formatFieldValue(new Date(), { type: \"date\", relative: true }) // Returns: \"just now\" // Format with custom formatter formatFieldValue(\"hello\", { type: \"custom\", formatter: (val) => String(val).toUpperCase() }) // Returns: \"HELLO\" ```",
+          "description": "Main formatting function that routes to the appropriate formatter based on the format type",
           "category": "formatting",
           "file": "utils/formatting/index.ts"
         },
@@ -320,7 +327,7 @@
         {
           "name": "formatPowerRating",
           "type": "function",
-          "description": "Format power rating (kW) ```typescript formatPowerRating(5.2); // \"5.2 kW\" formatPowerRating(2500); // \"2.5 MW\" formatPowerRating(null); // null ```",
+          "description": "Format power rating (kW)",
           "category": "formatting",
           "file": "utils/formatting/capacity.ts"
         },
@@ -544,7 +551,7 @@
         {
           "name": "toDateString",
           "type": "constant",
-          "description": "Format date to a localized string with optional time and timezone. ```typescript toDateString(new Date()); // \"12/25/2023\" toDateString(new Date(), true); // \"12/25/2023, 3:30 PM\" toDateString(\"2023-12-25T15:30:00Z\", true, \"America/New_York\"); // \"12/25/2023, 10:30 AM\" ```",
+          "description": "Format date to a localized string with optional time and timezone.",
           "category": "formatting",
           "file": "utils/formatting/date.ts"
         },
@@ -824,7 +831,7 @@
         {
           "name": "toRelativeTime",
           "type": "constant",
-          "description": "Format date to relative time (e.g., \"2 hours ago\", \"in 3 days\"). Automatically chooses the most appropriate unit. ```typescript toRelativeTime(new Date(Date.now() - 3600000)); // \"1 hour ago\" toRelativeTime(new Date(Date.now() + 86400000)); // \"in 1 day\" toRelativeTime(new Date()); // \"now\" ```",
+          "description": "Format date to relative time (e.g., \"2 hours ago\", \"in 3 days\"). Automatically chooses the most appropriate unit.",
           "category": "formatting",
           "file": "utils/formatting/date.ts"
         },
@@ -845,7 +852,7 @@
         {
           "name": "toSentenceCase",
           "type": "function",
-          "description": "Convert text to sentence case (first letter capitalized, rest lowercase). ```typescript toSentenceCase(\"HELLO WORLD\"); // \"Hello world\" toSentenceCase(\"hello world\"); // \"Hello world\" ```",
+          "description": "Convert text to sentence case (first letter capitalized, rest lowercase).",
           "category": "formatting",
           "file": "utils/formatting/text.ts"
         },
@@ -859,7 +866,7 @@
         {
           "name": "toTitleCase",
           "type": "function",
-          "description": "Convert text to title case with proper handling of articles and prepositions. Capitalizes the first letter of each word except common articles/prepositions (unless they're the first word). ```typescript toTitleCase(\"the quick brown fox\"); // \"The Quick Brown Fox\" toTitleCase(\"war and peace\"); // \"War and Peace\" toTitleCase(\"to be or not to be\"); // \"To Be or Not to Be\" ```",
+          "description": "Convert text to title case with proper handling of articles and prepositions. Capitalizes the first letter of each word except common articles/prepositions (unless they're the first word).",
           "category": "formatting",
           "file": "utils/formatting/text.ts"
         },
@@ -950,7 +957,7 @@
         {
           "name": "useComponentFormatter",
           "type": "function",
-          "description": "Hook for using the component formatter Provides memoization for better performance ```tsx function MyComponent({ value, formatter }) { const format = useComponentFormatter(formatter); const formatted = format(value); return <span>{formatted}</span>; } ```",
+          "description": "Hook for using the component formatter Provides memoization for better performance",
           "category": "formatting",
           "file": "utils/formatting/component-formatter.tsx"
         },
@@ -1011,7 +1018,7 @@
         {
           "name": "exportChart",
           "type": "function",
-          "description": "Main export function that handles all chart export types. Supports CSV, SVG, and PNG formats with automatic filename generation. ```typescript // Export single series as CSV await exportChart(\"csv\", data, { xLabel: \"Date\", yLabel: \"Value\", filename: \"sales-data\" }, svgRef); // Export multi-series chart as PNG await exportChart(\"png\", [series1, series2], { seriesLabels: [\"Revenue\", \"Profit\"], timestamp: false }, svgRef); ```",
+          "description": "Main export function that handles all chart export types. Supports CSV, SVG, and PNG formats with automatic filename generation.",
           "category": "charts",
           "file": "utils/chartExport.ts"
         },
@@ -1042,13 +1049,6 @@
           "description": "Utility to check if export is supported in the current environment",
           "category": "charts",
           "file": "utils/chartExport.ts"
-        },
-        {
-          "name": "that",
-          "type": "function",
-          "description": "",
-          "category": "charts",
-          "file": "utils/chartExport.ts"
         }
       ]
     },
@@ -1086,7 +1086,7 @@
         {
           "name": "createCategoricalMapping",
           "type": "constant",
-          "description": "Creates a categorical color mapping for use with vector layers or explicit mappings This is a helper for cases where categorical auto-assignment doesn't work: - Vector tile layers (data not accessible at render time) - URL-based GeoJSON layers - Custom pin layers // Vector layer with categorical coloring layer.vector({ tileset: \"mapbox://my-tileset\", sourceLayer: \"buildings\", style: { color: createCategoricalMapping(\"type\", [\"residential\", \"commercial\", \"industrial\"]) } }) // With custom colors for specific values const mapping = createCategoricalMapping(\"status\", [\"active\", \"pending\", \"inactive\"]); // Then override specific colors if needed: mapping.mapping.inactive = { hex: \"#cccccc\" };",
+          "description": "Creates a categorical color mapping for use with vector layers or explicit mappings This is a helper for cases where categorical auto-assignment doesn't work: - Vector tile layers (data not accessible at render time) - URL-based GeoJSON layers - Custom pin layers",
           "category": "colors",
           "file": "utils/colors.ts"
         },
@@ -1107,14 +1107,14 @@
         {
           "name": "createDivergingMapping",
           "type": "constant",
-          "description": "Creates a diverging color mapping for vector layers or manual bounds Use this helper when categorical auto-assignment doesn't work: - Vector tile layers (data not accessible at render time) - URL-based GeoJSON layers - When you want consistent colors across multiple maps // Vector layer with diverging coloring layer.vector({ tileset: \"mapbox://my-tileset\", sourceLayer: \"temperature\", style: { color: createDivergingMapping(\"temp_anomaly\", { min: -10, max: 10 }, 0, \"orangeYellowSeafoam\") } })",
+          "description": "Creates a diverging color mapping for vector layers or manual bounds Use this helper when categorical auto-assignment doesn't work: - Vector tile layers (data not accessible at render time) - URL-based GeoJSON layers - When you want consistent colors across multiple maps",
           "category": "colors",
           "file": "utils/colors.ts"
         },
         {
           "name": "createSequentialMapping",
           "type": "constant",
-          "description": "Creates a sequential color mapping for vector layers or manual bounds Use this helper when categorical auto-assignment doesn't work: - Vector tile layers (data not accessible at render time) - URL-based GeoJSON layers - When you want consistent colors across multiple maps // Vector layer with sequential coloring layer.vector({ tileset: \"mapbox://my-tileset\", sourceLayer: \"population\", style: { color: createSequentialMapping(\"density\", { min: 0, max: 100000 }, \"magma\") } })",
+          "description": "Creates a sequential color mapping for vector layers or manual bounds Use this helper when categorical auto-assignment doesn't work: - Vector tile layers (data not accessible at render time) - URL-based GeoJSON layers - When you want consistent colors across multiple maps",
           "category": "colors",
           "file": "utils/colors.ts"
         },
@@ -1135,14 +1135,14 @@
         {
           "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');",
+          "description": "Get color from diverging scale for a given value Uses existing diverging palettes to interpolate color based on value position relative to center",
           "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');",
+          "description": "Get color from sequential scale for a given value Uses existing sequential palettes to interpolate color based on value position in range",
           "category": "colors",
           "file": "utils/colors.ts"
         },
@@ -1177,7 +1177,7 @@
         {
           "name": "getResolvedColor",
           "type": "constant",
-          "description": "Resolves a CSS variable to its computed color value Supports multiple formats and automatically adds the color- prefix if needed - \"brand-primary\" → resolves to --color-brand-primary - \"color-brand-primary\" → resolves to --color-brand-primary - \"--color-brand-primary\" → used as-is - \"var(--color-brand-primary)\" → unwrapped and used",
+          "description": "Resolves a CSS variable to its computed color value Supports multiple formats and automatically adds the color- prefix if needed",
           "category": "colors",
           "file": "utils/colors.ts"
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@texturehq/edges",
-  "version": "1.26.5",
+  "version": "1.26.7",
   "author": "Nicholas Brown <nick@texturehq.com>",
   "description": "A shared component library for Texture",
   "type": "module",
@@ -70,12 +70,12 @@
     "postinstall": "node scripts/setup-cursor-rules.js || echo \"! setup-cursor-rules: non-fatal error\""
   },
   "peerDependencies": {
-    "@hookform/resolvers": "^3.x",
-    "next": "*",
+    "@hookform/resolvers": "^3.x || ^5.x",
+    "next": "^14.2.35 || ^15.5.9",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.x",
-    "zod": "^3.x"
+    "zod": "^3.x || ^4.x"
   },
   "peerDependenciesMeta": {
     "@hookform/resolvers": {

package/scripts/generate-edges-docs.js

@@ -326,13 +326,22 @@ function extractJSDoc(content, functionName) {
     if (match) {
       const jsdocMatch = match[0].match(/\/\*\*([\s\S]*?)\*\//);
       if (jsdocMatch) {
-        const cleaned = jsdocMatch[1]
+        const lines = jsdocMatch[1]
           .split("\n")
-          .map((line) => line.replace(/^\s*\*\s?/, "").trim())
-          .filter((line) => line && !line.startsWith("@"))
-          .join(" ")
-          .trim();
-        return cleaned;
+          .map((line) => line.replace(/^\s*\*\s?/, "").trim());
+
+        // Extract only the main description (before any @tags)
+        const descriptionLines = [];
+        for (const line of lines) {
+          if (line.startsWith("@")) {
+            break; // Stop at first @tag
+          }
+          if (line) {
+            descriptionLines.push(line);
+          }
+        }
+
+        return descriptionLines.join(" ").trim();
       }
     }
   }
@@ -345,33 +354,70 @@ function extractExportsFromFile(filePath) {
 
   const utilities = [];
 
+  // Helper to check if a match is inside a comment
+  function isInComment(matchIndex) {
+    const beforeMatch = content.slice(0, matchIndex);
+
+    // Check if we're inside a JSDoc comment (/** ... */)
+    const lastJSDocStart = beforeMatch.lastIndexOf("/**");
+    const lastJSDocEnd = beforeMatch.lastIndexOf("*/");
+    if (lastJSDocStart > lastJSDocEnd) {
+      return true; // Inside JSDoc comment
+    }
+
+    // Check if we're inside a regular block comment (/* ... */)
+    const lastBlockStart = beforeMatch.lastIndexOf("/*");
+    const lastBlockEnd = beforeMatch.lastIndexOf("*/");
+    if (lastBlockStart > lastBlockEnd) {
+      // Make sure it's not a JSDoc opener (/**)
+      const blockOpener = beforeMatch.slice(lastBlockStart, lastBlockStart + 3);
+      if (blockOpener !== "/**") {
+        return true; // Inside regular block comment
+      }
+    }
+
+    // Check if we're on a line comment (//)
+    const lastNewline = beforeMatch.lastIndexOf("\n");
+    const lineStart = lastNewline === -1 ? 0 : lastNewline + 1;
+    const line = beforeMatch.slice(lineStart);
+    if (line.includes("//")) {
+      return true; // Inside line comment
+    }
+
+    return false;
+  }
+
   // Match export function declarations
   const functionPattern = /export\s+(?:async\s+)?function\s+(\w+)/g;
   let match;
   while ((match = functionPattern.exec(content))) {
-    const name = match[1];
-    utilities.push({
-      name,
-      type: "function",
-      description: extractJSDoc(content, name),
-    });
+    if (!isInComment(match.index)) {
+      const name = match[1];
+      utilities.push({
+        name,
+        type: "function",
+        description: extractJSDoc(content, name),
+      });
+    }
   }
 
   // Match export const arrow functions and constants
   const constPattern = /export\s+const\s+(\w+)\s*(?::\s*[^=]+)?\s*=/g;
   while ((match = constPattern.exec(content))) {
-    const name = match[1];
-    const afterMatch = content.slice(
-      match.index + match[0].length,
-      match.index + match[0].length + 50
-    );
-    const isFunction = afterMatch.includes("=>") || afterMatch.includes("function");
-
-    utilities.push({
-      name,
-      type: isFunction ? "function" : "constant",
-      description: extractJSDoc(content, name),
-    });
+    if (!isInComment(match.index)) {
+      const name = match[1];
+      const afterMatch = content.slice(
+        match.index + match[0].length,
+        match.index + match[0].length + 50
+      );
+      const isFunction = afterMatch.includes("=>") || afterMatch.includes("function");
+
+      utilities.push({
+        name,
+        type: isFunction ? "function" : "constant",
+        description: extractJSDoc(content, name),
+      });
+    }
   }
 
   return utilities;