@texturehq/edges 1.12.0 → 1.12.2

package/dist/{server-BwR7EOd8.d.cts → server-8T44SFVa.d.cts}

@@ -4,6 +4,7 @@ import React__default, { ReactNode } from 'react';
 import * as PhosphorIcons from '@phosphor-icons/react';
 import { IconProps as IconProps$1 } from '@phosphor-icons/react';
 import { DateValue, DateFieldProps as DateFieldProps$1, ValidationResult, MeterProps as MeterProps$1 } from 'react-aria-components';
+import * as react_map_gl from 'react-map-gl';
 import { ViewState, MapRef } from 'react-map-gl';
 import * as d3_scale from 'd3-scale';
 import { ScaleTime, ScaleLinear } from 'd3-scale';
@@ -995,10 +996,64 @@ interface RasterLayerSpec extends BaseLayerSpec {
         fadeDuration?: number;
     };
 }
+/**
+ * Clustered vector tile layer (Mapbox Vector Tiles with server-side clustering)
+ *
+ * Used for displaying large numbers of point features with automatic clustering.
+ * The backend MVT service pre-clusters points and provides cluster metadata.
+ */
+interface ClusteredVectorLayerSpec extends Omit<BaseLayerSpec, "tooltip"> {
+    kind: "clusteredVector";
+    /** Mapbox tileset URL (mapbox://...) or HTTP template with {z}/{x}/{y} */
+    tileset: string;
+    /** Source layer name within the tileset */
+    sourceLayer: string;
+    /** ID of the currently selected feature (for highlighting) */
+    selectedId?: string | null;
+    /** Tooltip configuration specific to clustered data */
+    tooltip?: {
+        /** When to show the tooltip (defaults to "hover") */
+        trigger?: "hover" | "click";
+        /** Tooltip content for clusters (receives point count and feature) */
+        cluster?: (count: number, feature: LayerFeature) => React.ReactNode;
+        /** Tooltip content for individual points */
+        point?: (feature: LayerFeature) => React.ReactNode;
+    };
+    /** Style overrides for cluster circles (optional, uses design system defaults) */
+    clusterStyle?: {
+        /** Color for cluster circles */
+        color?: ColorValue;
+        /** Shadow color */
+        shadowColor?: string;
+        /** Size thresholds and radii for different cluster sizes */
+        sizes?: {
+            threshold: number;
+            radius: number;
+        }[];
+    };
+    /** Style overrides for individual points (optional, uses design system defaults) */
+    pointStyle?: {
+        /** Fill color */
+        color?: ColorValue;
+        /** Circle radius in pixels */
+        radius?: number;
+        /** Border width in pixels */
+        borderWidth?: number;
+        /** Border color */
+        borderColor?: string;
+    };
+    /** Style overrides for selected point (optional, uses design system defaults) */
+    selectedStyle?: {
+        /** Fill color */
+        color?: ColorValue;
+        /** Circle radius in pixels */
+        radius?: number;
+    };
+}
 /**
  * Union of all layer types
  */
-type LayerSpec = VectorLayerSpec | GeoJsonLayerSpec | CustomPinsSpec | RasterLayerSpec;
+type LayerSpec = VectorLayerSpec | GeoJsonLayerSpec | CustomPinsSpec | RasterLayerSpec | ClusteredVectorLayerSpec;
 
 /**
  * Unified map style configuration for all map components
@@ -1319,6 +1374,21 @@ interface InteractiveMapProps {
      * controls={false}
      */
     controls?: MapControl[] | "default" | false;
+    /**
+     * Raw Mapbox GL children (Source, Layer, Marker, etc.)
+     * Use for advanced layer configurations not supported by the layers prop
+     */
+    children?: React__default.ReactNode;
+    /**
+     * Layer IDs that should be interactive (clickable/hoverable)
+     * Used when rendering raw Mapbox children that need click/hover events
+     */
+    additionalInteractiveLayerIds?: string[];
+    /**
+     * Handler for map clicks on interactive layers (includes both layers prop and children)
+     * Receives the click event with feature data
+     */
+    onMapClick?: (event: react_map_gl.MapLayerMouseEvent) => void;
     /**
      * Show user location as a blue dot marker (like Google/Apple Maps)
      * This only controls the visibility of the blue dot marker.
@@ -1592,4 +1662,4 @@ declare const isLightColor: (color: string) => boolean;
  */
 declare const getContrastingTextColor: (backgroundColor: string) => string;
 
-export { type LayerStyle as $, type ActionItem as A, type BooleanFormat as B, type CurrentFormat as C, type DateFormat as D, type EnergyFormat as E, type FieldValue as F, type GeoJsonLayerSpec as G, type CodeTheme as H, Icon as I, CodeEditor as J, type DateFieldProps as K, type LayerSpec as L, DateField as M, type NumberFormat as N, type FileUploadProps as O, type PhoneFormat as P, FileUpload as Q, type ResistanceFormat as R, Heading as S, type TemperatureUnitString as T, Loader as U, type VoltageFormat as V, Logo as W, type ColorSpec as X, type YFormatType as Y, type InteractiveMapProps as Z, type LayerFeature as _, type FormattedValue as a, type MapPoint as a0, type RenderType as a1, type StaticMapProps as a2, type ZoomStops as a3, InteractiveMap as a4, MAP_TYPES as a5, StaticMap as a6, type MeterProps as a7, Meter as a8, type RichTextEditorProps as a9, isLightColor as aA, type ComponentFormatOptions as aB, formatComponentValue as aC, useComponentFormatter as aD, type BaseFormat as aE, type TextTransform as aF, type TextTruncatePosition as aG, type DateFormatStyle as aH, type EnergyUnit as aI, type PowerUnit as aJ, type VoltageUnit as aK, type CurrentUnit as aL, type ResistanceUnit as aM, type DistanceUnit as aN, type CustomFormat as aO, RichTextEditor as aa, type SegmentedControlProps as ab, type SegmentOption as ac, SegmentedControl as ad, type SideNavItem as ae, type SideNavProps as af, SideNav as ag, TextLink as ah, type TopNavProps as ai, TopNav as aj, type TooltipSeries as ak, ChartContext as al, useChartContext as am, type ChartMargin as an, createXScale as ao, createYScale as ap, defaultMargin as aq, getYFormatSettings as ar, type YFormatSettings as as, clearColorCache as at, createCategoryColorMap as au, getContrastingTextColor as av, getDefaultChartColor as aw, getDefaultColors as ax, getResolvedColor as ay, getThemeCategoricalColors as az, type DistanceFormat as b, type CurrencyFormat as c, type PowerFormat as d, type FormatterFunction as e, type TemperatureUnit as f, type TemperatureFormat as g, type TextFormat as h, type FieldFormat as i, type BaseDataPoint as j, type TooltipData as k, type IconName as l, type ComponentFormatter as m, type CustomPinsSpec as n, type RasterLayerSpec as o, type VectorLayerSpec as p, type ActionMenuProps as q, ActionMenu as r, type AppShellProps as s, AppShell as t, type AvatarProps as u, Avatar as v, type BadgeProps as w, Badge as x, type CodeEditorProps as y, type CodeLanguage as z };
+export { type LayerFeature as $, type ActionItem as A, type BooleanFormat as B, type CurrentFormat as C, type DateFormat as D, type EnergyFormat as E, type FieldValue as F, type GeoJsonLayerSpec as G, type CodeLanguage as H, Icon as I, type CodeTheme as J, CodeEditor as K, type LayerSpec as L, type DateFieldProps as M, type NumberFormat as N, DateField as O, type PhoneFormat as P, type FileUploadProps as Q, type ResistanceFormat as R, FileUpload as S, type TemperatureUnitString as T, Heading as U, type VoltageFormat as V, Loader as W, Logo as X, type YFormatType as Y, type ColorSpec as Z, type InteractiveMapProps as _, type FormattedValue as a, type LayerStyle as a0, type MapPoint as a1, type RenderType as a2, type StaticMapProps as a3, type ZoomStops as a4, InteractiveMap as a5, MAP_TYPES as a6, StaticMap as a7, type MeterProps as a8, Meter as a9, getThemeCategoricalColors as aA, isLightColor as aB, type ComponentFormatOptions as aC, formatComponentValue as aD, useComponentFormatter as aE, type BaseFormat as aF, type TextTransform as aG, type TextTruncatePosition as aH, type DateFormatStyle as aI, type EnergyUnit as aJ, type PowerUnit as aK, type VoltageUnit as aL, type CurrentUnit as aM, type ResistanceUnit as aN, type DistanceUnit as aO, type CustomFormat as aP, type RichTextEditorProps as aa, RichTextEditor as ab, type SegmentedControlProps as ac, type SegmentOption as ad, SegmentedControl as ae, type SideNavItem as af, type SideNavProps as ag, SideNav as ah, TextLink as ai, type TopNavProps as aj, TopNav as ak, type TooltipSeries as al, ChartContext as am, useChartContext as an, type ChartMargin as ao, createXScale as ap, createYScale as aq, defaultMargin as ar, getYFormatSettings as as, type YFormatSettings as at, clearColorCache as au, createCategoryColorMap as av, getContrastingTextColor as aw, getDefaultChartColor as ax, getDefaultColors as ay, getResolvedColor as az, type DistanceFormat as b, type CurrencyFormat as c, type PowerFormat as d, type FormatterFunction as e, type TemperatureUnit as f, type TemperatureFormat as g, type TextFormat as h, type FieldFormat as i, type BaseDataPoint as j, type TooltipData as k, type IconName as l, type ComponentFormatter as m, type CustomPinsSpec as n, type RasterLayerSpec as o, type VectorLayerSpec as p, type ClusteredVectorLayerSpec as q, type ActionMenuProps as r, ActionMenu as s, type AppShellProps as t, AppShell as u, type AvatarProps as v, Avatar as w, type BadgeProps as x, Badge as y, type CodeEditorProps as z };

package/dist/{server-BwR7EOd8.d.ts → server-8T44SFVa.d.ts}

@@ -4,6 +4,7 @@ import React__default, { ReactNode } from 'react';
 import * as PhosphorIcons from '@phosphor-icons/react';
 import { IconProps as IconProps$1 } from '@phosphor-icons/react';
 import { DateValue, DateFieldProps as DateFieldProps$1, ValidationResult, MeterProps as MeterProps$1 } from 'react-aria-components';
+import * as react_map_gl from 'react-map-gl';
 import { ViewState, MapRef } from 'react-map-gl';
 import * as d3_scale from 'd3-scale';
 import { ScaleTime, ScaleLinear } from 'd3-scale';
@@ -995,10 +996,64 @@ interface RasterLayerSpec extends BaseLayerSpec {
         fadeDuration?: number;
     };
 }
+/**
+ * Clustered vector tile layer (Mapbox Vector Tiles with server-side clustering)
+ *
+ * Used for displaying large numbers of point features with automatic clustering.
+ * The backend MVT service pre-clusters points and provides cluster metadata.
+ */
+interface ClusteredVectorLayerSpec extends Omit<BaseLayerSpec, "tooltip"> {
+    kind: "clusteredVector";
+    /** Mapbox tileset URL (mapbox://...) or HTTP template with {z}/{x}/{y} */
+    tileset: string;
+    /** Source layer name within the tileset */
+    sourceLayer: string;
+    /** ID of the currently selected feature (for highlighting) */
+    selectedId?: string | null;
+    /** Tooltip configuration specific to clustered data */
+    tooltip?: {
+        /** When to show the tooltip (defaults to "hover") */
+        trigger?: "hover" | "click";
+        /** Tooltip content for clusters (receives point count and feature) */
+        cluster?: (count: number, feature: LayerFeature) => React.ReactNode;
+        /** Tooltip content for individual points */
+        point?: (feature: LayerFeature) => React.ReactNode;
+    };
+    /** Style overrides for cluster circles (optional, uses design system defaults) */
+    clusterStyle?: {
+        /** Color for cluster circles */
+        color?: ColorValue;
+        /** Shadow color */
+        shadowColor?: string;
+        /** Size thresholds and radii for different cluster sizes */
+        sizes?: {
+            threshold: number;
+            radius: number;
+        }[];
+    };
+    /** Style overrides for individual points (optional, uses design system defaults) */
+    pointStyle?: {
+        /** Fill color */
+        color?: ColorValue;
+        /** Circle radius in pixels */
+        radius?: number;
+        /** Border width in pixels */
+        borderWidth?: number;
+        /** Border color */
+        borderColor?: string;
+    };
+    /** Style overrides for selected point (optional, uses design system defaults) */
+    selectedStyle?: {
+        /** Fill color */
+        color?: ColorValue;
+        /** Circle radius in pixels */
+        radius?: number;
+    };
+}
 /**
  * Union of all layer types
  */
-type LayerSpec = VectorLayerSpec | GeoJsonLayerSpec | CustomPinsSpec | RasterLayerSpec;
+type LayerSpec = VectorLayerSpec | GeoJsonLayerSpec | CustomPinsSpec | RasterLayerSpec | ClusteredVectorLayerSpec;
 
 /**
  * Unified map style configuration for all map components
@@ -1319,6 +1374,21 @@ interface InteractiveMapProps {
      * controls={false}
      */
     controls?: MapControl[] | "default" | false;
+    /**
+     * Raw Mapbox GL children (Source, Layer, Marker, etc.)
+     * Use for advanced layer configurations not supported by the layers prop
+     */
+    children?: React__default.ReactNode;
+    /**
+     * Layer IDs that should be interactive (clickable/hoverable)
+     * Used when rendering raw Mapbox children that need click/hover events
+     */
+    additionalInteractiveLayerIds?: string[];
+    /**
+     * Handler for map clicks on interactive layers (includes both layers prop and children)
+     * Receives the click event with feature data
+     */
+    onMapClick?: (event: react_map_gl.MapLayerMouseEvent) => void;
     /**
      * Show user location as a blue dot marker (like Google/Apple Maps)
      * This only controls the visibility of the blue dot marker.
@@ -1592,4 +1662,4 @@ declare const isLightColor: (color: string) => boolean;
  */
 declare const getContrastingTextColor: (backgroundColor: string) => string;
 
-export { type LayerStyle as $, type ActionItem as A, type BooleanFormat as B, type CurrentFormat as C, type DateFormat as D, type EnergyFormat as E, type FieldValue as F, type GeoJsonLayerSpec as G, type CodeTheme as H, Icon as I, CodeEditor as J, type DateFieldProps as K, type LayerSpec as L, DateField as M, type NumberFormat as N, type FileUploadProps as O, type PhoneFormat as P, FileUpload as Q, type ResistanceFormat as R, Heading as S, type TemperatureUnitString as T, Loader as U, type VoltageFormat as V, Logo as W, type ColorSpec as X, type YFormatType as Y, type InteractiveMapProps as Z, type LayerFeature as _, type FormattedValue as a, type MapPoint as a0, type RenderType as a1, type StaticMapProps as a2, type ZoomStops as a3, InteractiveMap as a4, MAP_TYPES as a5, StaticMap as a6, type MeterProps as a7, Meter as a8, type RichTextEditorProps as a9, isLightColor as aA, type ComponentFormatOptions as aB, formatComponentValue as aC, useComponentFormatter as aD, type BaseFormat as aE, type TextTransform as aF, type TextTruncatePosition as aG, type DateFormatStyle as aH, type EnergyUnit as aI, type PowerUnit as aJ, type VoltageUnit as aK, type CurrentUnit as aL, type ResistanceUnit as aM, type DistanceUnit as aN, type CustomFormat as aO, RichTextEditor as aa, type SegmentedControlProps as ab, type SegmentOption as ac, SegmentedControl as ad, type SideNavItem as ae, type SideNavProps as af, SideNav as ag, TextLink as ah, type TopNavProps as ai, TopNav as aj, type TooltipSeries as ak, ChartContext as al, useChartContext as am, type ChartMargin as an, createXScale as ao, createYScale as ap, defaultMargin as aq, getYFormatSettings as ar, type YFormatSettings as as, clearColorCache as at, createCategoryColorMap as au, getContrastingTextColor as av, getDefaultChartColor as aw, getDefaultColors as ax, getResolvedColor as ay, getThemeCategoricalColors as az, type DistanceFormat as b, type CurrencyFormat as c, type PowerFormat as d, type FormatterFunction as e, type TemperatureUnit as f, type TemperatureFormat as g, type TextFormat as h, type FieldFormat as i, type BaseDataPoint as j, type TooltipData as k, type IconName as l, type ComponentFormatter as m, type CustomPinsSpec as n, type RasterLayerSpec as o, type VectorLayerSpec as p, type ActionMenuProps as q, ActionMenu as r, type AppShellProps as s, AppShell as t, type AvatarProps as u, Avatar as v, type BadgeProps as w, Badge as x, type CodeEditorProps as y, type CodeLanguage as z };
+export { type LayerFeature as $, type ActionItem as A, type BooleanFormat as B, type CurrentFormat as C, type DateFormat as D, type EnergyFormat as E, type FieldValue as F, type GeoJsonLayerSpec as G, type CodeLanguage as H, Icon as I, type CodeTheme as J, CodeEditor as K, type LayerSpec as L, type DateFieldProps as M, type NumberFormat as N, DateField as O, type PhoneFormat as P, type FileUploadProps as Q, type ResistanceFormat as R, FileUpload as S, type TemperatureUnitString as T, Heading as U, type VoltageFormat as V, Loader as W, Logo as X, type YFormatType as Y, type ColorSpec as Z, type InteractiveMapProps as _, type FormattedValue as a, type LayerStyle as a0, type MapPoint as a1, type RenderType as a2, type StaticMapProps as a3, type ZoomStops as a4, InteractiveMap as a5, MAP_TYPES as a6, StaticMap as a7, type MeterProps as a8, Meter as a9, getThemeCategoricalColors as aA, isLightColor as aB, type ComponentFormatOptions as aC, formatComponentValue as aD, useComponentFormatter as aE, type BaseFormat as aF, type TextTransform as aG, type TextTruncatePosition as aH, type DateFormatStyle as aI, type EnergyUnit as aJ, type PowerUnit as aK, type VoltageUnit as aL, type CurrentUnit as aM, type ResistanceUnit as aN, type DistanceUnit as aO, type CustomFormat as aP, type RichTextEditorProps as aa, RichTextEditor as ab, type SegmentedControlProps as ac, type SegmentOption as ad, SegmentedControl as ae, type SideNavItem as af, type SideNavProps as ag, SideNav as ah, TextLink as ai, type TopNavProps as aj, TopNav as ak, type TooltipSeries as al, ChartContext as am, useChartContext as an, type ChartMargin as ao, createXScale as ap, createYScale as aq, defaultMargin as ar, getYFormatSettings as as, type YFormatSettings as at, clearColorCache as au, createCategoryColorMap as av, getContrastingTextColor as aw, getDefaultChartColor as ax, getDefaultColors as ay, getResolvedColor as az, type DistanceFormat as b, type CurrencyFormat as c, type PowerFormat as d, type FormatterFunction as e, type TemperatureUnit as f, type TemperatureFormat as g, type TextFormat as h, type FieldFormat as i, type BaseDataPoint as j, type TooltipData as k, type IconName as l, type ComponentFormatter as m, type CustomPinsSpec as n, type RasterLayerSpec as o, type VectorLayerSpec as p, type ClusteredVectorLayerSpec as q, type ActionMenuProps as r, ActionMenu as s, type AppShellProps as t, AppShell as u, type AvatarProps as v, Avatar as w, type BadgeProps as x, Badge as y, type CodeEditorProps as z };

package/dist/server.d.cts

@@ -1,4 +1,4 @@
-export { A as ActionItem, q as ActionMenuProps, t as AppShell, s as AppShellProps, v as Avatar, u as AvatarProps, w as BadgeProps, j as BaseDataPoint, an as ChartMargin, y as CodeEditorProps, z as CodeLanguage, H as CodeTheme, K as DateFieldProps, O as FileUploadProps, S as Heading, Z as InteractiveMapProps, U as Loader, W as Logo, a0 as MapPoint, a7 as MeterProps, a9 as RichTextEditorProps, ac as SegmentOption, ab as SegmentedControlProps, ag as SideNav, ae as SideNavItem, af as SideNavProps, a2 as StaticMapProps, ah as TextLink, k as TooltipData, ak as TooltipSeries, aj as TopNav, ai as TopNavProps, as as YFormatSettings, Y as YFormatType, at as clearColorCache, au as createCategoryColorMap, ao as createXScale, ap as createYScale, aq as defaultMargin, av as getContrastingTextColor, aw as getDefaultChartColor, ax as getDefaultColors, ay as getResolvedColor, az as getThemeCategoricalColors, ar as getYFormatSettings, aA as isLightColor } from './server-BwR7EOd8.cjs';
+export { A as ActionItem, r as ActionMenuProps, u as AppShell, t as AppShellProps, w as Avatar, v as AvatarProps, x as BadgeProps, j as BaseDataPoint, ao as ChartMargin, z as CodeEditorProps, H as CodeLanguage, J as CodeTheme, M as DateFieldProps, Q as FileUploadProps, U as Heading, _ as InteractiveMapProps, W as Loader, X as Logo, a1 as MapPoint, a8 as MeterProps, aa as RichTextEditorProps, ad as SegmentOption, ac as SegmentedControlProps, ah as SideNav, af as SideNavItem, ag as SideNavProps, a3 as StaticMapProps, ai as TextLink, k as TooltipData, al as TooltipSeries, ak as TopNav, aj as TopNavProps, at as YFormatSettings, Y as YFormatType, au as clearColorCache, av as createCategoryColorMap, ap as createXScale, aq as createYScale, ar as defaultMargin, aw as getContrastingTextColor, ax as getDefaultChartColor, ay as getDefaultColors, az as getResolvedColor, aA as getThemeCategoricalColors, as as getYFormatSettings, aB as isLightColor } from './server-8T44SFVa.cjs';
 export { BreadcrumbProps, BreadcrumbsProps } from 'react-aria-components';
 import 'react/jsx-runtime';
 import 'react';

package/dist/server.d.ts

@@ -1,4 +1,4 @@
-export { A as ActionItem, q as ActionMenuProps, t as AppShell, s as AppShellProps, v as Avatar, u as AvatarProps, w as BadgeProps, j as BaseDataPoint, an as ChartMargin, y as CodeEditorProps, z as CodeLanguage, H as CodeTheme, K as DateFieldProps, O as FileUploadProps, S as Heading, Z as InteractiveMapProps, U as Loader, W as Logo, a0 as MapPoint, a7 as MeterProps, a9 as RichTextEditorProps, ac as SegmentOption, ab as SegmentedControlProps, ag as SideNav, ae as SideNavItem, af as SideNavProps, a2 as StaticMapProps, ah as TextLink, k as TooltipData, ak as TooltipSeries, aj as TopNav, ai as TopNavProps, as as YFormatSettings, Y as YFormatType, at as clearColorCache, au as createCategoryColorMap, ao as createXScale, ap as createYScale, aq as defaultMargin, av as getContrastingTextColor, aw as getDefaultChartColor, ax as getDefaultColors, ay as getResolvedColor, az as getThemeCategoricalColors, ar as getYFormatSettings, aA as isLightColor } from './server-BwR7EOd8.js';
+export { A as ActionItem, r as ActionMenuProps, u as AppShell, t as AppShellProps, w as Avatar, v as AvatarProps, x as BadgeProps, j as BaseDataPoint, ao as ChartMargin, z as CodeEditorProps, H as CodeLanguage, J as CodeTheme, M as DateFieldProps, Q as FileUploadProps, U as Heading, _ as InteractiveMapProps, W as Loader, X as Logo, a1 as MapPoint, a8 as MeterProps, aa as RichTextEditorProps, ad as SegmentOption, ac as SegmentedControlProps, ah as SideNav, af as SideNavItem, ag as SideNavProps, a3 as StaticMapProps, ai as TextLink, k as TooltipData, al as TooltipSeries, ak as TopNav, aj as TopNavProps, at as YFormatSettings, Y as YFormatType, au as clearColorCache, av as createCategoryColorMap, ap as createXScale, aq as createYScale, ar as defaultMargin, aw as getContrastingTextColor, ax as getDefaultChartColor, ay as getDefaultColors, az as getResolvedColor, aA as getThemeCategoricalColors, as as getYFormatSettings, aB as isLightColor } from './server-8T44SFVa.js';
 export { BreadcrumbProps, BreadcrumbsProps } from 'react-aria-components';
 import 'react/jsx-runtime';
 import 'react';

package/dist/styles/utilities.css

@@ -14,3 +14,22 @@
     display: none;
   }
 }
+
+/**
+ * Accessibility: Remove focus outlines from container elements
+ * These elements get programmatic focus but shouldn't show visual focus rings.
+ * Interactive elements inside them will still show focus indicators via focus-visible.
+ */
+[role="dialog"],
+[role="menu"],
+[role="listbox"],
+[data-react-aria-dialog],
+[data-react-aria-modal] {
+  outline: none;
+}
+
+/* Ensure focus-visible still works for interactive elements */
+:focus-visible {
+  outline: 2px solid var(--color-action-default);
+  outline-offset: 2px;
+}

package/dist/styles.css

@@ -92,7 +92,6 @@
   --radius-md: 0.375rem;
   --radius-lg: 0.5rem;
   --radius-xl: 0.75rem;
-  --radius-2xl: 1rem;
   --radius-full: 9999px;
   --font-weight-light: 300;
   --font-weight-normal: 400;
@@ -493,9 +492,9 @@
   --color-action-brand: #7a8ee1;
   --color-action-brand-hover: #6a6fcc;
   --color-action-brand-text: #ffffff;
-  --color-action-default: #374151;
-  --color-action-default-hover: #4b5563;
-  --color-action-default-text: #ffffff;
+  --color-action-default: #ededef;
+  --color-action-default-hover: #ffffff;
+  --color-action-default-text: #111827;
   --color-state-charging: #581c87;
   --color-state-charging-border: #a855f7;
   --color-state-charging-text: #e9d5ff;
@@ -1035,6 +1034,13 @@
     display: none;
   }
 }
+[role="dialog"], [role="menu"], [role="listbox"], [data-react-aria-dialog], [data-react-aria-modal] {
+  outline: none;
+}
+:focus-visible {
+  outline: 2px solid var(--color-action-default);
+  outline-offset: 2px;
+}
 @layer theme, base, components, utilities;
 @layer theme;
 @layer base {
@@ -1702,6 +1708,9 @@
   .h-\[var\(--control-xl-height\)\] {
     height: var(--control-xl-height);
   }
+  .h-auto {
+    height: auto;
+  }
   .h-full {
     height: 100%;
   }
@@ -2518,10 +2527,6 @@
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
-  .rounded-t-2xl {
-    border-top-left-radius: var(--radius-2xl);
-    border-top-right-radius: var(--radius-2xl);
-  }
   .rounded-t-none {
     border-top-left-radius: var(--radius-none);
     border-top-right-radius: var(--radius-none);
@@ -3012,10 +3017,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\/60 {
-    --tw-gradient-from: color-mix(in srgb, #000000 60%, transparent);
+  .from-black\/40 {
+    --tw-gradient-from: color-mix(in srgb, #000000 40%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      --tw-gradient-from: color-mix(in oklab, var(--color-black) 60%, transparent);
+      --tw-gradient-from: color-mix(in oklab, var(--color-black) 40%, 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));
   }
@@ -3036,10 +3041,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\/50 {
-    --tw-gradient-via: color-mix(in srgb, #000000 50%, transparent);
+  .via-black\/30 {
+    --tw-gradient-via: color-mix(in srgb, #000000 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      --tw-gradient-via: color-mix(in oklab, var(--color-black) 50%, transparent);
+      --tw-gradient-via: color-mix(in oklab, var(--color-black) 30%, 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);
@@ -3048,10 +3053,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\/60 {
-    --tw-gradient-to: color-mix(in srgb, #000000 60%, transparent);
+  .to-black\/40 {
+    --tw-gradient-to: color-mix(in srgb, #000000 40%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      --tw-gradient-to: color-mix(in oklab, var(--color-black) 60%, transparent);
+      --tw-gradient-to: color-mix(in oklab, var(--color-black) 40%, 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));
   }
@@ -3286,12 +3291,6 @@
   .pr-9 {
     padding-right: var(--spacing-9);
   }
-  .pb-0 {
-    padding-bottom: var(--spacing-0);
-  }
-  .pb-1 {
-    padding-bottom: var(--spacing-1);
-  }
   .pb-1\.5 {
     padding-bottom: calc(var(--spacing) * 1.5);
   }
@@ -3493,6 +3492,9 @@
   .whitespace-nowrap {
     white-space: nowrap;
   }
+  .whitespace-pre-line {
+    white-space: pre-line;
+  }
   .\!text-action-brand {
     color: var(--color-action-brand) !important;
   }
@@ -4738,11 +4740,11 @@
       background-color: var(--color-gray-100);
     }
   }
-  .supports-\[backdrop-filter\]\:bg-black\/40 {
+  .supports-\[backdrop-filter\]\:bg-black\/25 {
     @supports (backdrop-filter: var(--tw)) {
-      background-color: color-mix(in srgb, #000000 40%, transparent);
+      background-color: color-mix(in srgb, #000000 25%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
+        background-color: color-mix(in oklab, var(--color-black) 25%, transparent);
       }
     }
   }
@@ -5061,11 +5063,6 @@
       height: 100%;
     }
   }
-  .md\:max-h-\[85vh\] {
-    @media (width >= 48rem) {
-      max-height: 85vh;
-    }
-  }
   .md\:w-10 {
     @media (width >= 48rem) {
       width: var(--spacing-10);
@@ -5162,11 +5159,6 @@
       flex-direction: row;
     }
   }
-  .md\:items-center {
-    @media (width >= 48rem) {
-      align-items: center;
-    }
-  }
   .md\:items-start {
     @media (width >= 48rem) {
       align-items: flex-start;
@@ -5186,16 +5178,6 @@
       }
     }
   }
-  .md\:rounded-xl {
-    @media (width >= 48rem) {
-      border-radius: var(--radius-xl);
-    }
-  }
-  .md\:p-4 {
-    @media (width >= 48rem) {
-      padding: var(--spacing-4);
-    }
-  }
   .md\:px-6 {
     @media (width >= 48rem) {
       padding-inline: var(--spacing-6);

package/dist/utilities.manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.12.0",
-  "generatedAt": "2025-10-23T13:32:23.564Z",
+  "version": "1.12.2",
+  "generatedAt": "2025-10-25T13:46:35.400Z",
   "categories": {
     "hooks": {
       "description": "React hooks for common functionality like breakpoints, debouncing, local storage, and media queries",

package/package.json

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

package/scripts/generate-edges-docs.js

@@ -82,7 +82,10 @@ function findComponentFile(relPath) {
 function findStorybookFile(relPath) {
   const base = path.join(SRC_DIR, "components", relPath);
   const componentName = relPath.split("/").pop();
-  const candidates = [path.join(base, `${componentName}.stories.tsx`), path.join(base, `${componentName}.stories.ts`)];
+  const candidates = [
+    path.join(base, `${componentName}.stories.tsx`),
+    path.join(base, `${componentName}.stories.ts`),
+  ];
   for (const f of candidates) {
     if (fs.existsSync(f)) return f;
   }
@@ -140,15 +143,19 @@ function getJsdocAbove(content, idx) {
 function extractProps(content, componentName) {
   const ifaceRe = new RegExp(
     `export\\s+interface\\s+${componentName}Props\\s*(?:extends\\s+[^{]+)?\\{([\\s\\S]*?)\\}`,
-    "m",
+    "m"
   );
   let m = ifaceRe.exec(content);
   if (!m) {
-    const anyIfaceRe = /export\s+interface\s+([A-Za-z0-9_]+Props)\s*(?:extends\s+[^{]+)?\{([\s\S]*?)\}/m;
+    const anyIfaceRe =
+      /export\s+interface\s+([A-Za-z0-9_]+Props)\s*(?:extends\s+[^{]+)?\{([\s\S]*?)\}/m;
     m = anyIfaceRe.exec(content);
   }
   if (!m) {
-    const typeRe = new RegExp(`export\\s+type\\s+${componentName}Props\\s*=\\s*(?:[^{&]+&\s*)?([\\s\\S]*?)\\}`, "m");
+    const typeRe = new RegExp(
+      `export\\s+type\\s+${componentName}Props\\s*=\\s*(?:[^{&]+&\s*)?([\\s\\S]*?)\\}`,
+      "m"
+    );
     m = typeRe.exec(content);
   }
   const props = [];
@@ -290,7 +297,9 @@ function generateComponentsManifest() {
   ensureDir(DIST_DIR);
   writeFile(path.join(DIST_DIR, "components.manifest.json"), JSON.stringify(manifest, null, 2));
 
-  console.log(`  Found ${components.length} components in ${Object.keys(categories).length} categories`);
+  console.log(
+    `  Found ${components.length} components in ${Object.keys(categories).length} categories`
+  );
   return manifest;
 }
 
@@ -300,7 +309,10 @@ function generateComponentsManifest() {
 
 function extractJSDoc(content, functionName) {
   const patterns = [
-    new RegExp(`\\/\\*\\*([^*]|\\*(?!\\/))*\\*\\/\\s*export\\s+(?:async\\s+)?function\\s+${functionName}\\b`, "s"),
+    new RegExp(
+      `\\/\\*\\*([^*]|\\*(?!\\/))*\\*\\/\\s*export\\s+(?:async\\s+)?function\\s+${functionName}\\b`,
+      "s"
+    ),
     new RegExp(`\\/\\*\\*([^*]|\\*(?!\\/))*\\*\\/\\s*export\\s+const\\s+${functionName}\\s*=`, "s"),
   ];
 
@@ -344,7 +356,10 @@ function extractExportsFromFile(filePath) {
   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 afterMatch = content.slice(
+      match.index + match[0].length,
+      match.index + match[0].length + 50
+    );
     const isFunction = afterMatch.includes("=>") || afterMatch.includes("function");
 
     utilities.push({
@@ -450,12 +465,17 @@ function generateUtilitiesManifest() {
     };
   }
 
-  const totalUtilities = Object.values(manifest.categories).reduce((sum, cat) => sum + cat.utilities.length, 0);
+  const totalUtilities = Object.values(manifest.categories).reduce(
+    (sum, cat) => sum + cat.utilities.length,
+    0
+  );
 
   ensureDir(DIST_DIR);
   writeFile(path.join(DIST_DIR, "utilities.manifest.json"), JSON.stringify(manifest, null, 2));
 
-  console.log(`  Found ${totalUtilities} utilities in ${Object.keys(manifest.categories).length} categories`);
+  console.log(
+    `  Found ${totalUtilities} utilities in ${Object.keys(manifest.categories).length} categories`
+  );
   return manifest;
 }
 
@@ -983,7 +1003,9 @@ async function main() {
       stdio: "inherit",
     });
   } catch (err) {
-    console.log("⚠️  Note: Could not merge agent instructions (merge script may not be available yet)");
+    console.log(
+      "⚠️  Note: Could not merge agent instructions (merge script may not be available yet)"
+    );
   }
 
   console.log("\n✅ Edges AI context generation complete!");