@texturehq/edges 1.3.0 → 1.4.0

package/dist/utilities.manifest.json

@@ -1,10 +1,36 @@
 {
-  "version": "1.3.0",
-  "generatedAt": "2025-10-08T13:13:11.594Z",
+  "version": "1.4.0",
+  "generatedAt": "2025-10-09T18:20:15.870Z",
   "categories": {
     "hooks": {
       "description": "React hooks for common functionality like debouncing, local storage, and time controls",
       "utilities": [
+        {
+          "name": "Breakpoint",
+          "type": "type",
+          "description": "",
+          "example": null,
+          "category": "hooks",
+          "file": "hooks/useBreakpoint.ts"
+        },
+        {
+          "name": "BREAKPOINTS",
+          "type": "constant",
+          "description": "Tailwind CSS default breakpoints These match the standard Tailwind breakpoints used in your CSS",
+          "params": [],
+          "returns": null,
+          "example": null,
+          "category": "hooks",
+          "file": "hooks/useBreakpoint.ts"
+        },
+        {
+          "name": "BreakpointState",
+          "type": "type",
+          "description": "",
+          "example": null,
+          "category": "hooks",
+          "file": "hooks/useBreakpoint.ts"
+        },
         {
           "name": "handleChartExport",
           "type": "function",
@@ -23,6 +49,33 @@
           "category": "hooks",
           "file": "hooks/useTimeControls.ts"
         },
+        {
+          "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. ```",
+          "params": [
+            {
+              "name": "defaultBreakpoint",
+              "type": "unknown",
+              "description": "The breakpoint to assume during SSR or before first render (defaults to \"base\" for mobile-first)"
+            }
+          ],
+          "returns": {
+            "type": "unknown",
+            "description": "An object containing breakpoint state information"
+          },
+          "example": "const { isMobile, isDesktop, current } = useBreakpoint();\n\n// Conditional rendering based on screen size\nreturn isMobile ? <MobileNav /> : <DesktopNav />;\n\n// Check specific breakpoint\nif (isLg) {\n  // Show expanded view on large screens\n}\n\n// Use current breakpoint\nconsole.log(`Current breakpoint: ${current}`); // \"md\", \"lg\", etc.",
+          "category": "hooks",
+          "file": "hooks/useBreakpoint.ts"
+        },
+        {
+          "name": "UseBreakpointReturn",
+          "type": "type",
+          "description": "Public return type alias for useBreakpoint hook Provides a stable public API for barrel re-exports",
+          "example": null,
+          "category": "hooks",
+          "file": "hooks/useBreakpoint.ts"
+        },
         {
           "name": "useDebounce",
           "type": "function",
@@ -57,6 +110,30 @@
           "category": "hooks",
           "file": "hooks/useLocalStorage.ts"
         },
+        {
+          "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)'); ```",
+          "params": [
+            {
+              "name": "query",
+              "type": "unknown",
+              "description": "A CSS media query string (e.g., \"(min-width: 768px)\")"
+            },
+            {
+              "name": "defaultValue",
+              "type": "unknown",
+              "description": "The default value to return during SSR or before the first render"
+            }
+          ],
+          "returns": {
+            "type": "unknown",
+            "description": "A boolean indicating whether the media query matches"
+          },
+          "example": "const isMobile = useMediaQuery('(max-width: 767px)');\nconst prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');\nconst isLandscape = useMediaQuery('(orientation: landscape)');",
+          "category": "hooks",
+          "file": "hooks/useMediaQuery.ts"
+        },
         {
           "name": "useTimeControls",
           "type": "function",
@@ -1776,6 +1853,26 @@
     "colors": {
       "description": "Color management utilities for theme-aware color resolution, contrast calculation, and palette generation",
       "utilities": [
+        {
+          "name": "calculateBounds",
+          "type": "constant",
+          "description": "Calculate min and max bounds from numeric values",
+          "params": [],
+          "returns": null,
+          "example": null,
+          "category": "colors",
+          "file": "utils/colors.ts"
+        },
+        {
+          "name": "calculateCenter",
+          "type": "constant",
+          "description": "Calculate center point for diverging palettes",
+          "params": [],
+          "returns": null,
+          "example": null,
+          "category": "colors",
+          "file": "utils/colors.ts"
+        },
         {
           "name": "clearColorCache",
           "type": "function",
@@ -1796,6 +1893,16 @@
           "category": "colors",
           "file": "utils/colors.ts"
         },
+        {
+          "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\" };",
+          "params": [],
+          "returns": null,
+          "example": "// Vector layer with categorical coloring\nlayer.vector({\n  tileset: \"mapbox://my-tileset\",\n  sourceLayer: \"buildings\",\n  style: {\n    color: createCategoricalMapping(\"type\", [\"residential\", \"commercial\", \"industrial\"])\n  }\n})",
+          "category": "colors",
+          "file": "utils/colors.ts"
+        },
         {
           "name": "createCategoryColorMap",
           "type": "constant",
@@ -1816,6 +1923,46 @@
           "category": "colors",
           "file": "utils/colors.ts"
         },
+        {
+          "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\") } })",
+          "params": [],
+          "returns": null,
+          "example": "// Vector layer with diverging coloring\nlayer.vector({\n  tileset: \"mapbox://my-tileset\",\n  sourceLayer: \"temperature\",\n  style: {\n    color: createDivergingMapping(\"temp_anomaly\", { min: -10, max: 10 }, 0, \"orangeYellowSeafoam\")\n  }\n})",
+          "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\") } })",
+          "params": [],
+          "returns": null,
+          "example": "// Vector layer with sequential coloring\nlayer.vector({\n  tileset: \"mapbox://my-tileset\",\n  sourceLayer: \"population\",\n  style: {\n    color: createSequentialMapping(\"density\", { min: 0, max: 100000 }, \"magma\")\n  }\n})",
+          "category": "colors",
+          "file": "utils/colors.ts"
+        },
+        {
+          "name": "extractNumericValues",
+          "type": "constant",
+          "description": "Extract numeric values from GeoJSON data for sequential/diverging palettes",
+          "params": [],
+          "returns": null,
+          "example": null,
+          "category": "colors",
+          "file": "utils/colors.ts"
+        },
+        {
+          "name": "extractUniqueValues",
+          "type": "constant",
+          "description": "Extracts unique values for a given property from GeoJSON FeatureCollection",
+          "params": [],
+          "returns": null,
+          "example": null,
+          "category": "colors",
+          "file": "utils/colors.ts"
+        },
         {
           "name": "getContrastingTextColor",
           "type": "function",
@@ -1848,10 +1995,19 @@
         },
         {
           "name": "getDivergingColors",
-          "type": "constant",
-          "description": "Gets diverging colors from a specific palette",
-          "params": [],
-          "returns": null,
+          "type": "function",
+          "description": "Get colors for a specific diverging palette",
+          "params": [
+            {
+              "name": "scheme",
+              "type": "unknown",
+              "description": "Diverging palette name (defaults to \"redYellowBlue\")"
+            }
+          ],
+          "returns": {
+            "type": "unknown",
+            "description": "Array of 10 hex color strings (color 5 is the center)"
+          },
           "example": null,
           "category": "colors",
           "file": "utils/colors.ts"
@@ -1859,7 +2015,7 @@
         {
           "name": "getResolvedColor",
           "type": "constant",
-          "description": "Resolves a CSS variable to its computed color value Supports both var(--name) format and plain --name format",
+          "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",
           "params": [],
           "returns": null,
           "example": null,
@@ -1868,10 +2024,19 @@
         },
         {
           "name": "getSequentialColors",
-          "type": "constant",
-          "description": "Gets sequential colors from a specific palette",
-          "params": [],
-          "returns": null,
+          "type": "function",
+          "description": "Get colors for a specific sequential palette",
+          "params": [
+            {
+              "name": "scheme",
+              "type": "unknown",
+              "description": "Sequential palette name (defaults to \"viridis\")"
+            }
+          ],
+          "returns": {
+            "type": "unknown",
+            "description": "Array of 10 hex color strings"
+          },
           "example": null,
           "category": "colors",
           "file": "utils/colors.ts"
@@ -1895,6 +2060,16 @@
           "example": null,
           "category": "colors",
           "file": "utils/colors.ts"
+        },
+        {
+          "name": "mapValuesToCategoricalColors",
+          "type": "constant",
+          "description": "Maps unique values to categorical colors with looping",
+          "params": [],
+          "returns": null,
+          "example": null,
+          "category": "colors",
+          "file": "utils/colors.ts"
         }
       ]
     },
@@ -1935,12 +2110,12 @@
     }
   },
   "summary": {
-    "totalUtilities": 193,
+    "totalUtilities": 207,
     "totalCategories": 5,
     "categories": [
       {
         "name": "hooks",
-        "count": 5
+        "count": 11
       },
       {
         "name": "formatting",
@@ -1952,7 +2127,7 @@
       },
       {
         "name": "colors",
-        "count": 12
+        "count": 20
       },
       {
         "name": "general",

package/package.json

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

package/scripts/copy-assets.js

@@ -33,6 +33,7 @@ try {
   const tokenFiles = [
     "src/generated/tailwind-tokens-light.css",
     "src/generated/tailwind-tokens-dark.css",
+    "src/generated/viz-runtime.css",
   ];
 
   // Create generated directory in dist

package/scripts/generate-viz-runtime.js

@@ -0,0 +1,95 @@
+/**
+ * Generate viz-runtime.css from Style Dictionary output
+ *
+ * WORKAROUND: Tailwind 4's @theme directive filters out viz color variables,
+ * so we extract them and create a separate runtime file with plain :root and
+ * .theme-dark blocks.
+ *
+ * This script should run after Style Dictionary generates the token files.
+ */
+
+import fs from "fs";
+import path from "path";
+
+const GENERATED_DIR = "src/generated";
+const LIGHT_TOKENS = path.join(GENERATED_DIR, "tailwind-tokens-light.css");
+const DARK_TOKENS = path.join(GENERATED_DIR, "tailwind-tokens-dark.css");
+const OUTPUT_FILE = path.join(GENERATED_DIR, "viz-runtime.css");
+
+/**
+ * Extract viz color variables from a CSS file
+ */
+function extractVizColors(cssContent) {
+  const vizColorRegex = /^\s*(--color-viz-[^:]+:\s*[^;]+;)\s*$/gm;
+  const matches = [];
+  let match;
+
+  while ((match = vizColorRegex.exec(cssContent)) !== null) {
+    matches.push(match[1]);
+  }
+
+  return matches;
+}
+
+/**
+ * Generate the viz-runtime.css file
+ */
+function generateVizRuntime() {
+  console.log("🎨 Generating viz-runtime.css...");
+
+  // Read token files
+  const lightContent = fs.readFileSync(LIGHT_TOKENS, "utf8");
+  const darkContent = fs.readFileSync(DARK_TOKENS, "utf8");
+
+  // Extract viz colors
+  const lightVizColors = extractVizColors(lightContent);
+  const darkVizColors = extractVizColors(darkContent);
+
+  if (lightVizColors.length === 0) {
+    console.warn("⚠️  No viz colors found in light theme tokens");
+  }
+
+  if (darkVizColors.length === 0) {
+    console.warn("⚠️  No viz colors found in dark theme tokens");
+  }
+
+  // Generate output
+  const output = `/**
+ * Data Visualization Color Palette - Runtime Override
+ *
+ * WORKAROUND: These variables are defined here instead of in tailwind-tokens-*.css
+ * because Tailwind 4's @theme directive filters them out (similar issue as data-* prefix).
+ *
+ * AUTO-GENERATED by scripts/generate-viz-runtime.js
+ * DO NOT EDIT MANUALLY - Edit tokens/base/data-visualization.json instead.
+ *
+ * To customize dark mode viz colors, edit the "viz" section in tokens/themes/dark.json
+ */
+
+/* Light theme (default) */
+:root {
+${lightVizColors.map((color) => `  ${color}`).join("\n")}
+}
+
+/* Dark theme */
+.theme-dark {
+${darkVizColors.map((color) => `  ${color}`).join("\n")}
+}
+`;
+
+  // Write output
+  fs.writeFileSync(OUTPUT_FILE, output, "utf8");
+
+  console.log(`✅ Generated ${OUTPUT_FILE}`);
+  console.log(`   - Light theme: ${lightVizColors.length} variables`);
+  console.log(`   - Dark theme: ${darkVizColors.length} variables`);
+}
+
+// Run the script
+try {
+  generateVizRuntime();
+} catch (error) {
+  console.error("❌ Error generating viz-runtime.css:", error);
+  process.exit(1);
+}
+