@texturehq/edges 2.4.3 → 2.4.4

package/dist/index.d.ts

@@ -1,13 +1,13 @@
 import { BreadcrumbProps, BreadcrumbsProps, DateValue, CalendarProps as CalendarProps$1, ValidationResult, DisclosureGroupProps, DisclosurePanelProps, ButtonProps, DisclosureProps, DateRangePickerProps as DateRangePickerProps$1, FormProps, TooltipTriggerComponentProps, TooltipProps as TooltipProps$1, ListBoxProps as ListBoxProps$1, ListBoxItemProps, ModalOverlayProps, Key, PopoverProps as PopoverProps$1, ProgressBarProps as ProgressBarProps$1, RangeCalendarProps as RangeCalendarProps$1, TabProps as TabProps$1, TabListProps as TabListProps$1, TabPanelProps, TabsProps as TabsProps$2 } from 'react-aria-components';
 export { BreadcrumbProps, BreadcrumbsProps, DialogTrigger } from 'react-aria-components';
-import { Virtualizer } from '@tanstack/react-virtual';
-import * as React$1 from 'react';
-import React__default, { RefObject, ComponentType, ReactNode, HTMLAttributes, ComponentProps, CSSProperties, Component, ErrorInfo } from 'react';
-import { U as FieldValue, V as BooleanFormat, W as FormattedValue, X as FieldFormat, Z as CurrentFormat, _ as DateFormat, $ as DistanceFormat, a0 as EnergyUnit, a1 as EnergyFormat, a2 as CurrencyFormat, a3 as NumberFormat, a4 as PhoneFormat, a5 as PowerFormat, a6 as FormatterFunction, a7 as ResistanceFormat, a8 as TemperatureFormat, a9 as TemperatureUnitString, aa as TemperatureUnit, ab as TextFormat, ac as VoltageFormat, B as BadgeProps, d as BaseDataPoint, u as YFormatType, q as TooltipData, ad as DeviceState, ae as GridState, af as ComponentFormatter, ag as LayerSpec, ah as CustomPinsSpec, ai as GeoJsonLayerSpec, aj as RasterLayerSpec, ak as VectorLayerSpec, al as ClusteredVectorLayerSpec } from './colors-DOYgrvZw.js';
-export { A as ActionItem, am as ActionMenu, a as ActionMenuProps, an as AppShell, b as AppShellProps, ao as Avatar, c as AvatarProps, ap as Badge, aq as BaseFormat, ar as ChartContext, C as ChartMargin, as as CodeEditor, e as CodeEditorProps, f as CodeLanguage, g as CodeTheme, at as ColorSpec, au as ComponentFormatOptions, av as CurrentUnit, aw as CustomFormat, ax as DEFAULT_MAP_TYPE, ay as DateFormatStyle, az as DistanceUnit, aA as ENTITY_CATEGORY_CONFIG, E as ENTITY_CONFIG, aB as EntityCategory, aC as EntityCategoryConfig, h as EntityConfig, i as EntityType, aD as GRID_STATE_COLORS, aE as GridStateColor, H as Heading, aF as InteractiveMap, aG as InteractiveMapHandle, I as InteractiveMapProps, aH as LayerFeature, aI as LayerStyle, L as Loader, j as Logo, aJ as MAP_TYPES, M as MapPoint, aK as MapType, aL as Meter, k as MeterProps, aM as MetricFormat, aN as PercentageFormat, aO as PowerUnit, aP as RenderType, aQ as ResistanceUnit, S as SegmentOption, aR as SegmentedControl, l as SegmentedControlProps, m as SideNav, n as SideNavItem, o as SideNavProps, aS as StackNav, aT as StackNavGroup, aU as StackNavItem, aV as StackNavLinkComponentProps, aW as StackNavProps, aX as StackNavTheme, aY as StaticMap, p as StaticMapProps, T as TextLink, aZ as TextTransform, a_ as TextTruncatePosition, r as TooltipSeries, s as TopNav, t as TopNavProps, a$ as VoltageUnit, Y as YFormatSettings, b0 as ZoomStops, b1 as activeDeviceStates, b2 as baselineFromPoint, v as clearColorCache, w as createCategoryColorMap, x as createXScale, y as createYScale, z as defaultMargin, b3 as deviceStateLabels, b4 as deviceStateMetricFormats, b5 as formatComponentValue, D as getContrastingTextColor, F as getDefaultChartColor, G as getDefaultColors, b6 as getDeviceStateDisplayLabel, b6 as getDeviceStateLabel, b7 as getEntityCategory, J as getEntityConfig, K as getEntityIcon, N as getEntityLabel, b8 as getGridStateLabel, O as getResolvedColor, P as getThemeCategoricalColors, Q as getYFormatSettings, b9 as gridStateLabels, ba as isActiveDeviceState, ba as isActiveState, R as isLightColor, bb as mapValuesToCategoricalColors, bc as useChartContext, bd as useComponentFormatter } from './colors-DOYgrvZw.js';
+import { B as BadgeProps, U as FieldValue, V as BooleanFormat, W as FormattedValue, X as FieldFormat, Z as CurrentFormat, _ as DateFormat, $ as DistanceFormat, a0 as EnergyUnit, a1 as EnergyFormat, a2 as CurrencyFormat, a3 as NumberFormat, a4 as PhoneFormat, a5 as PowerFormat, a6 as FormatterFunction, a7 as ResistanceFormat, a8 as TemperatureFormat, a9 as TemperatureUnitString, aa as TemperatureUnit, ab as TextFormat, ac as VoltageFormat, d as BaseDataPoint, u as YFormatType, q as TooltipData, ad as DeviceState, ae as GridState, af as ComponentFormatter, ag as LayerSpec, ah as CustomPinsSpec, ai as GeoJsonLayerSpec, aj as RasterLayerSpec, ak as VectorLayerSpec, al as ClusteredVectorLayerSpec } from './colors-B85aftHP.js';
+export { A as ActionItem, am as ActionMenu, a as ActionMenuProps, an as AppShell, b as AppShellProps, ao as Avatar, c as AvatarProps, ap as Badge, aq as BaseFormat, ar as ChartContext, C as ChartMargin, as as CodeEditor, e as CodeEditorProps, f as CodeLanguage, g as CodeTheme, at as ColorSpec, au as ComponentFormatOptions, av as CurrentUnit, aw as CustomFormat, ax as DEFAULT_MAP_TYPE, ay as DateFormatStyle, az as DistanceUnit, aA as ENTITY_CATEGORY_CONFIG, E as ENTITY_CONFIG, aB as EntityCategory, aC as EntityCategoryConfig, h as EntityConfig, i as EntityType, aD as GRID_STATE_COLORS, aE as GridStateColor, H as Heading, aF as InteractiveMap, aG as InteractiveMapHandle, I as InteractiveMapProps, aH as LayerFeature, aI as LayerStyle, L as Loader, j as Logo, aJ as MAP_TYPES, M as MapPoint, aK as MapType, aL as Meter, k as MeterProps, aM as MetricFormat, aN as PercentageFormat, aO as PowerUnit, aP as RenderType, aQ as ResistanceUnit, S as SegmentOption, aR as SegmentedControl, l as SegmentedControlProps, m as SideNav, n as SideNavItem, o as SideNavProps, aS as StackNav, aT as StackNavGroup, aU as StackNavItem, aV as StackNavLinkComponentProps, aW as StackNavProps, aX as StackNavTheme, aY as StaticMap, p as StaticMapProps, T as TextLink, aZ as TextTransform, a_ as TextTruncatePosition, r as TooltipSeries, s as TopNav, t as TopNavProps, a$ as VoltageUnit, Y as YFormatSettings, b0 as ZoomStops, b1 as activeDeviceStates, b2 as baselineFromPoint, v as clearColorCache, w as createCategoryColorMap, x as createXScale, y as createYScale, z as defaultMargin, b3 as deviceStateLabels, b4 as deviceStateMetricFormats, b5 as formatComponentValue, D as getContrastingTextColor, F as getDefaultChartColor, G as getDefaultColors, b6 as getDeviceStateDisplayLabel, b6 as getDeviceStateLabel, b7 as getEntityCategory, J as getEntityConfig, K as getEntityIcon, N as getEntityLabel, b8 as getGridStateLabel, O as getResolvedColor, P as getThemeCategoricalColors, Q as getYFormatSettings, b9 as gridStateLabels, ba as isActiveDeviceState, ba as isActiveState, R as isLightColor, bb as mapValuesToCategoricalColors, bc as useChartContext, bd as useComponentFormatter } from './colors-B85aftHP.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React$1 from 'react';
+import React__default, { ReactNode, RefObject, HTMLAttributes, ComponentProps, ComponentType, CSSProperties, Component, ErrorInfo } from 'react';
 import { I as Icon$1, S as Size, d as IconName$2, B as BaseInputProps } from './RichTextEditor-BNXNpG4s.js';
 export { e as BaseProps, C as CUSTOM_ICON_REGISTRY, f as ClearButton, g as CustomIconName, a as DateField, D as DateFieldProps, h as Description, i as DescriptionPlacement, j as DescriptionProps, k as FieldError, l as FieldErrorProps, m as FieldGroup, n as FieldGroupProps, b as FileUpload, F as FileUploadProps, o as Input, p as InputProps, q as InputStyleProps, r as InputWrapper, L as Label, s as LabelProps, P as PhosphorIconName, c as RichTextEditor, R as RichTextEditorProps, t as getFieldGroupStyles, u as getInputBackgroundStyles, v as getInputBaseStyles, w as getInputStateStyles, x as useInputFocus } from './RichTextEditor-BNXNpG4s.js';
+import { Virtualizer } from '@tanstack/react-virtual';
 import { D as DialogAction, a as DialogHeaderConfig, b as DialogFooterConfig } from './index-dofSwYId.js';
 export { c as Dialog, d as DialogForm, e as DialogProps, f as Drawer, g as DrawerForm, h as DrawerProps, F as FormActions, i as FormDivider, j as FormGrid, k as FormSection, l as FormStepper, S as SaveBar, U as UnsavedChangesPrompt, u as useWizard } from './index-dofSwYId.js';
 export { A as Autocomplete, B as Button, g as ButtonProps, C as Checkbox, a as CheckboxGroup, b as ColorField, h as ColorFieldProps, N as NumberField, i as Radio, j as RadioCard, R as RadioCardGroup, k as RadioCardGroupProps, l as RadioCardProps, c as RadioGroup, S as Select, m as SelectItem, d as Switch, T as TextArea, e as TextField, n as TimeField } from './TimeField-2KuhWThm.js';
@@ -18,2392 +18,2331 @@ import '@visx/vendor/d3-scale';
 import 'react-map-gl';
 
 /**
- * Tailwind CSS default breakpoints
- * These match the standard Tailwind breakpoints used in your CSS
- */
-declare const BREAKPOINTS: {
-    readonly sm: "640px";
-    readonly md: "768px";
-    readonly lg: "1024px";
-    readonly xl: "1280px";
-    readonly "2xl": "1536px";
-};
-type Breakpoint = keyof typeof BREAKPOINTS;
-interface BreakpointState {
-    /** Current active breakpoint (highest matching breakpoint) */
-    current: Breakpoint | "base";
-    /** True if viewport is at least 640px (sm breakpoint or higher) */
-    isSm: boolean;
-    /** True if viewport is at least 768px (md breakpoint or higher) */
-    isMd: boolean;
-    /** True if viewport is at least 1024px (lg breakpoint or higher) */
-    isLg: boolean;
-    /** True if viewport is at least 1280px (xl breakpoint or higher) */
-    isXl: boolean;
-    /** True if viewport is at least 1536px (2xl breakpoint or higher) */
-    is2Xl: boolean;
-    /** True if viewport is smaller than 768px (mobile) */
-    isMobile: boolean;
-    /** True if viewport is 768px or larger (tablet/desktop) */
-    isDesktop: boolean;
-}
-/**
- * Public return type alias for useBreakpoint hook
- * Provides a stable public API for barrel re-exports
- */
-type UseBreakpointReturn = BreakpointState;
-/**
- * Hook to detect which Tailwind breakpoint is currently active
+ * Factory for Texture-authored icons that are NOT available in Phosphor but
+ * must plug into the Edges `<Icon name="…" />` component with the exact same
+ * API (size / color / weight / className / mirrored / aria-*).
  *
- * 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.
+ * Each custom icon is authored as a Phosphor-compatible component:
+ *  - 256×256 viewBox (matches Phosphor's optical grid so custom + stock icons
+ *    sit at the same scale)
+ *  - `fill={color}` defaulting to `currentColor` (inherits text color like Phosphor)
+ *  - `size` drives both width and height
  *
- * @param defaultBreakpoint - The breakpoint to assume during SSR or before first render (defaults to "base" for mobile-first)
- * @returns An object containing breakpoint state information
+ * `weight` is accepted for API parity but is a no-op for single-weight custom
+ * glyphs. Author the `children` against the 256×256 grid.
  *
  * @example
  * ```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.
+ * export const TextureRecloserIcon = createTextureIcon(
+ *   "TextureRecloser",
+ *   <path d="M48 128 ..." />,
+ * );
  * ```
  */
-declare function useBreakpoint(defaultBreakpoint?: Breakpoint | "base"): BreakpointState;
-
-/**
- * Data Controls Types
- *
- * Core type definitions for client-side and server-side data filtering,
- * sorting, faceting, and search operations.
- */
-type FilterOperator = "eq" | "neq" | "in" | "nin" | "gt" | "gte" | "lt" | "lte" | "contains" | "startsWith" | "endsWith";
-interface FilterCondition {
-    /** Field name (supports nested paths like 'user.profile.name') */
-    field: string;
-    /** Comparison operator */
-    operator: FilterOperator;
-    /** Value to compare against */
-    value: string | number | boolean | (string | number)[];
-}
-interface FilterGroup {
-    /** Logical operator combining conditions */
-    logic: "AND" | "OR";
-    /** Conditions or nested filter groups */
-    conditions: (FilterCondition | FilterGroup)[];
-}
-/** Root filter state - can be empty, a single group, or nested groups */
-type FilterState = FilterGroup | null;
-interface SortState {
-    /** Field to sort by (supports nested paths) */
-    field: string;
-    /** Sort direction */
-    direction: "asc" | "desc";
-}
-interface SearchConfig {
-    /** Search query string */
-    query: string;
-    /** Fields to search across */
-    fields: string[];
-    /** Use fuzzy matching (Fuse.js) - default true */
-    fuzzy?: boolean;
-    /** Fuse.js matching threshold (0.0 = perfect, 1.0 = anything) - default 0.3 */
-    threshold?: number;
-}
-type FacetType = "string" | "number" | "boolean" | "date";
-interface FacetConfig {
-    /** Field name to facet on */
-    field: string;
-    /** Display label for the facet */
-    label: string;
-    /** Data type of the field */
-    type?: FacetType;
-    /** Optional: Provide predefined values for the facet (useful for enums) */
-    values?: Array<{
-        value: string | number;
-        label: string;
-    }>;
-    /** Number of options to show before requiring search (default: 10) */
-    searchThreshold?: number;
-    /** Max options to show initially, with "Show all" button for rest (default: 50) */
-    maxVisibleOptions?: number;
-    /** Optional description text to show below the label */
-    description?: string;
-    /** Optional: Custom render function for option labels (e.g., to show Badges) */
-    renderLabel?: (value: string, label: string) => React.ReactNode;
-    /** Optional: Group name for organizing filters in FilterDialog */
-    group?: string;
-}
-interface FacetCounts {
-    [field: string]: {
-        [value: string]: number;
-    };
-}
-/**
- * Create a single filter condition
- */
-declare function createFilter(field: string, operator: FilterOperator, value: string | number | boolean | (string | number)[]): FilterCondition;
-/**
- * Create a filter group from multiple conditions with AND logic
- */
-declare function createFilters(conditions: FilterCondition[], logic?: "AND" | "OR"): FilterGroup;
-/**
- * Create an empty filter state
- */
-declare function createEmptyFilter(): FilterGroup;
-/**
- * Check if a filter state is empty (no conditions)
- */
-declare function isFilterEmpty(filter: FilterState): boolean;
-/**
- * Convert structured filter state to simple display chips
- * Used for backward compatibility with existing FilterChips component
- */
-interface FilterChip {
-    id: string;
-    label: string;
-    value: string;
-}
-declare function filterToChips(filter: FilterState, facetConfigs?: FacetConfig[]): FilterChip[];
-/**
- * Add a condition to a filter state
- */
-declare function addFilterCondition(filter: FilterState, condition: FilterCondition): FilterGroup;
-/**
- * Remove a condition from a filter state by field
- */
-declare function removeFilterCondition(filter: FilterState, field: string): FilterGroup;
-/**
- * Get all unique fields being filtered on
- */
-declare function getFilterFields(filter: FilterState): string[];
+declare function createTextureIcon(displayName: string, children: ReactNode): Icon;
 
-interface UseClientDataControlsOptions<T> {
-    /** Raw data to process */
-    data: T[];
-    /** Filter state */
-    filters?: FilterState;
-    /** Sort state */
-    sort?: SortState | null;
-    /** Search configuration */
-    search?: SearchConfig | null;
-    /** Facet configurations */
-    facetConfigs?: FacetConfig[];
+type LoadingState = "idle" | "loading" | "loading-more" | "error";
+interface UseInfiniteScrollOptions<T = unknown> {
+    /** Array of items being displayed */
+    items: T[];
+    /** Callback to load more items (optional - if not provided, no infinite scroll) */
+    onLoadMore?: () => void | Promise<void>;
+    /** Whether there are more items to load */
+    hasMore?: boolean;
+    /** Auto-detects initial vs loading-more from items.length */
+    isLoading?: boolean;
+    /** Explicit loading state override (takes precedence) */
+    loadingState?: LoadingState;
+    /** Enable virtualization (default: true for 100+ items) */
+    enableVirtualization?: boolean;
+    /** Estimated size of each item in pixels */
+    estimatedItemSize?: number;
+    /** Number of items to render outside viewport */
+    overscan?: number;
+    /** Custom scroll element (defaults to parent) */
+    scrollElement?: HTMLElement | null;
+    /** Distance from bottom in pixels to trigger load */
+    loadMoreThreshold?: number;
 }
-interface UseClientDataControlsResult<T> {
-    /** Processed data (filtered, sorted, searched) */
-    data: T[];
-    /** Facet counts computed from filtered data */
-    facetCounts: FacetCounts;
-    /** Number of results after filtering/searching */
-    resultCount: number;
+interface UseInfiniteScrollReturn {
+    virtualizer: Virtualizer<HTMLElement, Element> | null;
+    virtualItems: ReturnType<Virtualizer<HTMLElement, Element>["getVirtualItems"]>;
+    computedLoadingState: LoadingState;
+    isInitialLoad: boolean;
+    isLoadingMore: boolean;
+    scrollRef: RefObject<HTMLDivElement | null>;
+    loadMoreRef: RefObject<HTMLDivElement | null>;
+    scrollToIndex: (index: number, options?: {
+        align?: "start" | "center" | "end";
+    }) => void;
+    scrollToTop: () => void;
 }
 /**
- * useClientDataControls
+ * useInfiniteScroll
  *
- * Client-side hook for filtering, sorting, searching, and faceting data.
- * Uses memoization to avoid unnecessary recomputation.
+ * Hook for implementing infinite scroll with optional virtualization.
+ * Intelligently detects initial vs loading-more states from context.
  *
- * Operations are applied in this order:
- * 1. Search (fuzzy or exact matching)
- * 2. Filter (structured conditions)
- * 3. Facet computation (on filtered data)
- * 4. Sort
+ * 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
  *
  * @example
  * ```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' }
- *   ]
+ * const { scrollRef, computedLoadingState, isLoadingMore } = useInfiniteScroll({
+ *   items,
+ *   onLoadMore: fetchNextPage,
+ *   hasMore: hasNextPage,
+ *   isLoading: isFetching,
  * });
  * ```
  */
-declare function useClientDataControls<T>({ data, filters, sort, search, facetConfigs, }: UseClientDataControlsOptions<T>): UseClientDataControlsResult<T>;
+declare function useInfiniteScroll<T = unknown>({ items, onLoadMore, hasMore, isLoading, loadingState, enableVirtualization, estimatedItemSize, overscan, scrollElement, loadMoreThreshold, }: UseInfiniteScrollOptions<T>): UseInfiniteScrollReturn;
+
+type ActivityFeedVariant = "timeline" | "stacked";
+type ActivityFeedSize = "md" | "sm";
+type ActivityItemTone = "neutral" | "brand" | "success" | "warning" | "danger" | "info";
+type ActivityItemSurface = "minimal" | "subtle" | "solid";
+interface ActivityFeedProps<T = unknown> extends HTMLAttributes<HTMLDivElement> {
+    /** Visual style for the feed */
+    variant?: ActivityFeedVariant;
+    /** Density of the feed */
+    size?: ActivityFeedSize;
+    /** Data-driven mode: array of items to render */
+    items?: T[];
+    /** Render function for each item (when using items array) */
+    renderItem?: (item: T, index: number) => ReactNode;
+    /** Children mode: manual ActivityItem components */
+    children?: ReactNode;
+    /** Loading & error UI gates */
+    isLoading?: boolean;
+    /** Explicit loading state override (takes precedence over auto-detection) */
+    loadingState?: LoadingState;
+    error?: string | null;
+    /** Custom skeleton for initial loading state - matches your activity item structure */
+    renderLoadingSkeleton?: () => ReactNode;
+    /** Number of skeleton items to show during initial loading */
+    loadingSkeletonCount?: number;
+    /** Empty state */
+    emptyMessage?: string;
+    /** Infinite scroll */
+    onLoadMore?: () => void | Promise<void>;
+    hasMore?: boolean;
+    /** Enable virtualization (default: true for 100+ items) */
+    enableVirtualization?: boolean;
+    /** Estimated size of each item in pixels */
+    estimatedItemSize?: number;
+    /** Custom loading indicator for loading-more state */
+    loadingIndicator?: ReactNode;
+    /** Height/maxHeight for scroll container */
+    height?: string | number;
+    maxHeight?: string | number;
+}
+declare function ActivityFeed<T = unknown>({ variant, size, className, children, items, renderItem, isLoading, loadingState, error, renderLoadingSkeleton, loadingSkeletonCount, emptyMessage, onLoadMore, hasMore, enableVirtualization, estimatedItemSize, loadingIndicator, height, maxHeight, ...rest }: ActivityFeedProps<T>): react_jsx_runtime.JSX.Element;
+declare namespace ActivityFeed {
+    var displayName: string;
+}
+interface ActivityFeedGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Heading shown above the grouped items */
+    title?: ReactNode;
+    /** Optional description that provides additional context */
+    description?: ReactNode;
+    /** Optional trailing actions for the group */
+    actions?: ReactNode;
+    /** Group content */
+    children: ReactNode;
+}
+interface ActivityFeedGroupInternalProps extends ActivityFeedGroupProps {
+    __isLastGroup?: boolean;
+    __isFirstGroup?: boolean;
+}
+declare function ActivityFeedGroup(props: ActivityFeedGroupInternalProps): react_jsx_runtime.JSX.Element;
+declare namespace ActivityFeedGroup {
+    var displayName: string;
+}
+interface ActivityItemProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Primary label describing the activity */
+    title: ReactNode;
+    /** Supplementary copy beneath the title */
+    description?: ReactNode;
+    /** Timestamp or contextual information shown opposite the title */
+    timestamp?: ReactNode;
+    /** Additional metadata shown below the description */
+    meta?: ReactNode;
+    /** Supplementary media such as attachments, badges, or chips */
+    media?: ReactNode;
+    /** Optional action buttons or controls */
+    actions?: ReactNode;
+    /** Visual element displayed inside the indicator */
+    visual?: ReactNode;
+    /** Shortcut for displaying an icon in the indicator */
+    icon?: ComponentProps<typeof Icon$1>["name"];
+    /** Icon weight for the indicator icon */
+    iconWeight?: ComponentProps<typeof Icon$1>["weight"];
+    /** Visual tone applied to the indicator */
+    tone?: ActivityItemTone;
+    /** Surface treatment for the content */
+    surface?: ActivityItemSurface;
+    /** Highlights the item using the tone color */
+    isHighlighted?: boolean;
+    /** Whether to render a connector line for timeline layouts */
+    showConnector?: boolean;
+    /** Whether to render the incoming connector line from previous item (internal) */
+    showIncomingConnector?: boolean;
+    /** Hides the indicator entirely */
+    hideIndicator?: boolean;
+    /** Marks the item as interactive, enabling keyboard semantics */
+    interactive?: boolean;
+}
+declare function ActivityItem(props: ActivityItemProps): react_jsx_runtime.JSX.Element;
+declare namespace ActivityItem {
+    var displayName: string;
+}
 
+interface AlertProps {
+    /**
+     * Whether the alert is open
+     */
+    isOpen: boolean;
+    /**
+     * Callback when the alert is closed
+     */
+    onClose: () => void;
+    /**
+     * Alert title
+     */
+    title: string;
+    /**
+     * Alert message/content
+     */
+    message: React__default.ReactNode;
+    /**
+     * Label for the confirm button
+     * @default "OK"
+     */
+    confirmLabel?: string;
+    /**
+     * Variant for the confirm button
+     * @default "primary"
+     */
+    confirmVariant?: DialogAction["variant"];
+    /**
+     * Maximum width of the alert dialog
+     * @default "400px"
+     */
+    maxWidth?: string;
+    /**
+     * Minimum width of the alert dialog (desktop only)
+     * @default "320px"
+     */
+    minWidth?: string;
+}
 /**
- * useContainerBreakpoint — measures a container element's width and returns
- * the same BreakpointState shape as useBreakpoint, but derived from the
- * container, not the window.
- *
- * Blocks that need to respond to their render width (not the viewport) should
- * use this hook instead of useBreakpoint. When rendered inside a
- * ContainerQueryProvider, the hook reads from context (no ref needed). When
- * no provider is present, it falls back to measuring its own ref, or
- * ultimately to window-based breakpoints.
+ * Alert
  *
- * @returns BreakpointState — same shape as useBreakpoint
+ * A simple alert dialog with a single action button.
+ * Use for informational messages that require acknowledgment.
  */
-declare function useContainerBreakpoint(containerRef?: React.RefObject<HTMLElement | null>): BreakpointState;
+declare function Alert({ isOpen, onClose, title, message, confirmLabel, confirmVariant, maxWidth, minWidth, }: AlertProps): react_jsx_runtime.JSX.Element;
 
-interface ServerDataState {
-    filters: FilterState;
-    sort: SortState | null;
-    search: SearchConfig | null;
+type BannerVariant = "info" | "success" | "warning" | "error" | "discovery";
+type BannerAppearance = "subtle" | "bold";
+interface BannerAction {
+    /** Label for the action button */
+    label: string;
+    /** Callback when the action is triggered */
+    onPress: () => void;
+    /** Whether to render as a link-style button */
+    asLink?: boolean;
 }
-interface UseServerDataControlsOptions {
-    /** Filter state */
-    filters: FilterState;
-    /** Sort state */
-    sort: SortState | null;
-    /** Search configuration */
-    search: SearchConfig | null;
-    /** Callback when state changes (debounced for search) */
-    onStateChange: (state: ServerDataState) => void;
-    /** Search debounce delay in ms (default: 300) */
-    searchDebounce?: number;
+interface BannerProps {
+    /** Semantic variant of the banner */
+    variant?: BannerVariant;
+    /** Visual appearance style */
+    appearance?: BannerAppearance;
+    /** The main message/title to display */
+    title?: ReactNode;
+    /** Additional description or content */
+    children?: ReactNode;
+    /** Whether the banner can be dismissed */
+    dismissible?: boolean;
+    /** Callback when the banner is dismissed */
+    onDismiss?: () => void;
+    /** Primary action (rendered as button or link) */
+    primaryAction?: BannerAction;
+    /** Secondary action (rendered as button or link) */
+    secondaryAction?: BannerAction;
+    /** Custom icon to override default status icon */
+    icon?: ReactNode;
+    /** Hide the icon completely */
+    hideIcon?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Test ID for automation */
+    testId?: string;
 }
 /**
- * useServerDataControls
+ * Banner
  *
- * Server-side hook that notifies the parent when filter/sort/search state changes.
- * Search queries are debounced to avoid excessive API calls.
+ * A prominent message component for displaying important information or system messages.
+ * Can be used inline within content sections or positioned at the page level.
  *
- * 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
+ * Inspired by Atlassian's Section Message and Chakra UI's Alert, combining the best
+ * features of both: semantic variant colors, multiple appearances, inline actions, and
+ * flexible composition.
  *
  * @example
  * ```tsx
- * const [filters, setFilters] = useState(null);
- * const [sort, setSort] = useState({ field: 'name', direction: 'asc' });
- * const [search, setSearch] = useState({ query: '', fields: ['name'] });
+ * // Simple info banner
+ * <Banner variant="info" title="New features available">
+ *   Check out the latest updates to improve your workflow.
+ * </Banner>
  *
- * useServerDataControls({
- *   filters,
- *   sort,
- *   search,
- *   onStateChange: (state) => {
- *     // Refetch data with new parameters
- *     refetch({
- *       filters: state.filters,
- *       sort: state.sort,
- *       search: state.search?.query
- *     });
- *   }
- * });
- * ```
- */
-declare function useServerDataControls({ filters, sort, search, onStateChange, searchDebounce, }: UseServerDataControlsOptions): void;
-
-interface UseDataControlsClientOptions<T> {
-    mode: "client";
-    /** Raw data to process (required in client mode) */
-    data: T[];
-    /** Filter state */
-    filters?: FilterState;
-    /** Sort state */
-    sort?: SortState | null;
-    /** Search configuration */
-    search?: SearchConfig | null;
-    /** Facet configurations */
-    facetConfigs?: FacetConfig[];
-}
-interface UseDataControlsServerOptions<T> {
-    mode: "server";
-    /** Data from server (already filtered/sorted) */
-    data: T[];
-    /** Filter state */
-    filters: FilterState;
-    /** Sort state */
-    sort: SortState | null;
-    /** Search configuration */
-    search: SearchConfig | null;
-    /** Callback when state changes (required in server mode) */
-    onStateChange: (state: ServerDataState) => void;
-    /** Search debounce delay in ms (default: 300) */
-    searchDebounce?: number;
-    /** Result count from server */
-    resultCount?: number;
-    /** Facet counts from server */
-    facetCounts?: FacetCounts;
-}
-type UseDataControlsOptions<T> = UseDataControlsClientOptions<T> | UseDataControlsServerOptions<T>;
-interface UseDataControlsResult<T> {
-    /** Processed data (client mode) or server data (server mode) */
-    data: T[];
-    /** Facet counts (computed in client mode, passed through in server mode) */
-    facetCounts: FacetCounts;
-    /** Result count (computed in client mode, passed through in server mode) */
-    resultCount: number;
-}
-/**
- * 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
- *
- * @example Client Mode
- * ```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' }]
- * });
- * ```
+ * // With actions
+ * <Banner
+ *   variant="warning"
+ *   title="Your trial expires soon"
+ *   primaryAction={{ label: "Upgrade now", onPress: () => {} }}
+ *   secondaryAction={{ label: "Learn more", onPress: () => {}, asLink: true }}
+ * >
+ *   Upgrade to continue using premium features.
+ * </Banner>
  *
- * @example Server Mode
- * ```tsx
- * const { data, facetCounts, resultCount } = useDataControls({
- *   mode: 'server',
- *   data: serverData, // Already filtered
- *   filters,
- *   sort,
- *   search,
- *   resultCount: totalCount,
- *   facetCounts: serverFacets,
- *   onStateChange: (state) => refetch(state)
- * });
+ * // Bold appearance
+ * <Banner
+ *   variant="error"
+ *   appearance="bold"
+ *   title="Action required"
+ *   dismissible
+ *   onDismiss={() => {}}
+ * >
+ *   Please update your payment information.
+ * </Banner>
  * ```
  */
-declare function useDataControls<T>(options: UseDataControlsOptions<T>): UseDataControlsResult<T>;
-
-declare function useDebounce<T>(value: T, delay?: number): T;
+declare function Banner({ variant, appearance, title, children, dismissible, onDismiss, primaryAction, secondaryAction, icon, hideIcon, className, testId, }: BannerProps): react_jsx_runtime.JSX.Element;
 
-interface ElementSize {
-    width: number;
-    height: number;
-}
-interface UseElementSizeResult<T extends HTMLElement = HTMLElement> {
-    ref: (node: T | null) => void;
-    width: number;
-    height: number;
+interface PageBannerProps extends BannerProps {
+    /** Whether the banner is visible */
+    isOpen?: boolean;
+    /** Position relative to the navbar */
+    position?: "fixed" | "sticky";
 }
 /**
- * useElementSize
+ * PageBanner
  *
- * 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.
+ * A banner component designed for page-level announcements, positioned at the top
+ * of the page below the navbar. Automatically handles enter/exit animations and
+ * can be fixed or sticky positioned.
  *
- * Performance optimizations:
- * - Uses ResizeObserver for efficient resize detection
- * - Debounces updates using requestAnimationFrame
- * - Cleans up observer on unmount
+ * Use this for system-wide messages, announcements, or important alerts that need
+ * to be visible across the entire page.
  *
  * @example
  * ```tsx
- * const { ref, width, height } = useElementSize();
- *
- * return (
- *   <div ref={ref}>
- *     Width: {width}px, Height: {height}px
- *   </div>
- * );
+ * <PageBanner
+ *   isOpen={showBanner}
+ *   variant="warning"
+ *   title="Scheduled maintenance"
+ *   dismissible
+ *   onDismiss={() => setShowBanner(false)}
+ * >
+ *   Our systems will be under maintenance on Friday from 2-4 PM EST.
+ * </PageBanner>
  * ```
  */
-declare function useElementSize<T extends HTMLElement = HTMLElement>(): UseElementSizeResult<T>;
+declare function PageBanner({ isOpen, position, className, ...bannerProps }: PageBannerProps): react_jsx_runtime.JSX.Element;
 
-type LoadingState = "idle" | "loading" | "loading-more" | "error";
-interface UseInfiniteScrollOptions<T = unknown> {
-    /** Array of items being displayed */
-    items: T[];
-    /** Callback to load more items (optional - if not provided, no infinite scroll) */
-    onLoadMore?: () => void | Promise<void>;
-    /** Whether there are more items to load */
-    hasMore?: boolean;
-    /** Auto-detects initial vs loading-more from items.length */
-    isLoading?: boolean;
-    /** Explicit loading state override (takes precedence) */
-    loadingState?: LoadingState;
-    /** Enable virtualization (default: true for 100+ items) */
-    enableVirtualization?: boolean;
-    /** Estimated size of each item in pixels */
-    estimatedItemSize?: number;
-    /** Number of items to render outside viewport */
-    overscan?: number;
-    /** Custom scroll element (defaults to parent) */
-    scrollElement?: HTMLElement | null;
-    /** Distance from bottom in pixels to trigger load */
-    loadMoreThreshold?: number;
-}
-interface UseInfiniteScrollReturn {
-    virtualizer: Virtualizer<HTMLElement, Element> | null;
-    virtualItems: ReturnType<Virtualizer<HTMLElement, Element>["getVirtualItems"]>;
-    computedLoadingState: LoadingState;
-    isInitialLoad: boolean;
-    isLoadingMore: boolean;
-    scrollRef: RefObject<HTMLDivElement | null>;
-    loadMoreRef: RefObject<HTMLDivElement | null>;
-    scrollToIndex: (index: number, options?: {
-        align?: "start" | "center" | "end";
-    }) => void;
-    scrollToTop: () => void;
-}
+type BreadcrumbItemProps = BreadcrumbProps & {
+    href?: string;
+    /**
+     * When true, adds a copy-to-clipboard button next to the current (last) breadcrumb item.
+     * The value copied is determined by `copyValue` prop, or falls back to the text content.
+     */
+    copyable?: boolean;
+    /**
+     * The value to copy when the copy button is clicked.
+     * If not provided, the text content of the breadcrumb will be used.
+     */
+    copyValue?: string;
+};
 /**
- * useInfiniteScroll
- *
- * Hook for implementing infinite scroll with optional virtualization.
- * Intelligently detects initial vs loading-more states from context.
+ * Breadcrumbs
  *
- * 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
+ * Navigation breadcrumbs that show the user's current location in the hierarchy
+ * Automatically collapses middle items into an ellipsis dropdown when the container
+ * width exceeds the maxWidth threshold (default: 600px)
+ */
+declare function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T> & {
+    maxWidth?: number;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * BreadcrumbItem
  *
- * @example
- * ```tsx
- * const { scrollRef, computedLoadingState, isLoadingMore } = useInfiniteScroll({
- *   items,
- *   onLoadMore: fetchNextPage,
- *   hasMore: hasNextPage,
- *   isLoading: isFetching,
- * });
- * ```
+ * Individual breadcrumb item with optional link
+ * The last breadcrumb is automatically styled as the current page (non-interactive, bold)
+ * When `copyable` is true, adds a copy-to-clipboard button next to the current (last) breadcrumb
  */
-declare function useInfiniteScroll<T = unknown>({ items, onLoadMore, hasMore, isLoading, loadingState, enableVirtualization, estimatedItemSize, overscan, scrollElement, loadMoreThreshold, }: UseInfiniteScrollOptions<T>): UseInfiniteScrollReturn;
+declare function BreadcrumbItem(props: BreadcrumbItemProps): react_jsx_runtime.JSX.Element;
 
 /**
- * Hook for managing localStorage values with React state synchronization
- * @param key - The localStorage key
- * @param initialValue - The initial value if nothing is stored
- * @returns [value, setValue, removeValue] - Current value, setter function, and remove function
+ * Calendar
+ *
+ * Single-date calendar primitive with Edges styling.
  */
-declare function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T | ((val: T) => T)) => void, () => void];
+interface CalendarProps<T extends DateValue> extends Omit<CalendarProps$1<T>, "visibleDuration"> {
+    errorMessage?: string;
+}
+declare function Calendar<T extends DateValue>({ errorMessage, ...props }: CalendarProps<T>): react_jsx_runtime.JSX.Element;
 
 /**
- * Hook to check if a media query matches the current viewport
+ * Card - Enterprise surface container component
  *
- * @param query - A CSS media query string (e.g., "(min-width: 768px)")
- * @param defaultValue - The default value to return during SSR or before the first render
- * @returns A boolean indicating whether the media query matches
+ * A flexible, composable card component following enterprise design system best practices.
+ * Supports modular content sections with consistent styling and accessibility.
  *
- * @example
+ * Usage:
  * ```tsx
- * const isMobile = useMediaQuery('(max-width: 767px)');
- * const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
- * const isLandscape = useMediaQuery('(orientation: landscape)');
- * ```
- */
-declare function useMediaQuery(query: string, defaultValue?: boolean): boolean;
-
-type SortDirection = "asc" | "desc";
-type CellAlignment = "left" | "center" | "right";
-type TableDensity = "compact" | "default" | "relaxed";
-type CellEmphasis = "strong" | "high" | "normal" | "low";
-type LinkBehavior = "none" | "hover" | "visible";
-type TableLayout = "auto" | "fixed" | "responsive";
-type TableWidth = "full" | "auto" | "contained";
-type MobileRenderer = "auto" | "cards" | "custom" | "none";
-type MobileBreakpoint = "sm" | "md" | "lg" | "xl";
-interface SortConfig {
-    columnId: string;
-    direction: SortDirection;
-}
-interface CellContext {
-    isLoading: boolean;
-    isSelected?: boolean;
-    isHovered?: boolean;
-    rowIndex: number;
-    columnIndex: number;
-    density: TableDensity;
+ * <Card variant="outlined" size="md">
+ *   <Card.Header
+ *     title="Card Title"
+ *     subtitle="Optional subtitle"
+ *     actions={<Button variant="ghost" icon="MoreHorizontal" />}
+ *   />
+ *   <Card.Media src="image.jpg" alt="Description" />
+ *   <Card.Content>
+ *     <p>Main content goes here</p>
+ *   </Card.Content>
+ *   <Card.Footer>
+ *     <Button variant="primary">Action</Button>
+ *   </Card.Footer>
+ * </Card>
+ * ```
+ */
+type CardVariant = "outlined" | "elevated" | "filled" | "ghost";
+interface CardProps {
+    variant?: CardVariant;
+    className?: string;
+    children?: React__default.ReactNode;
+    isLoading?: boolean;
+    /** Enable flex column layout so children can expand to fill space */
+    layout?: "default" | "flex";
 }
-interface CellComponentProps<T = any> {
-    value: any;
-    row: T;
-    context: CellContext;
-    [key: string]: any;
+interface CardHeaderProps {
+    title?: React__default.ReactNode;
+    subtitle?: React__default.ReactNode;
+    actions?: React__default.ReactNode;
+    className?: string;
+    isLoading?: boolean;
 }
-type CellComponent<T = any> = ComponentType<CellComponentProps<T>>;
-interface MobileConfig {
-    priority?: 1 | 2 | 3;
-    format?: "primary" | "secondary" | "badge" | "inline";
-    label?: boolean;
-    icon?: string;
+interface CardMediaProps {
+    src?: string;
+    alt?: string;
+    aspectRatio?: "square" | "video" | "wide" | "auto";
+    className?: string;
+    children?: React__default.ReactNode;
+    isLoading?: boolean;
 }
-interface Column<T> {
-    id: string;
-    label: string;
-    accessor?: keyof T | ((row: T) => any);
-    align?: CellAlignment;
-    width?: string | number;
-    minWidth?: string | number;
-    maxWidth?: string | number;
-    flex?: number;
-    cell?: CellComponent<T>;
-    cellProps?: Record<string, any> | ((value: any, row: T) => Record<string, any>);
-    render?: (value: any, row: T, context: CellContext) => ReactNode;
-    sortable?: boolean;
-    /**
-     * Whether this column can be reordered via drag-and-drop.
-     * Defaults to true. Set to false to lock a column in place (e.g., sticky first column).
-     */
-    reorderable?: boolean;
-    noCellPadding?: boolean;
-    mobile?: MobileConfig | false;
-    popover?: string | ((value: unknown, row: T) => ReactNode) | {
-        content: string | ((value: unknown, row: T) => ReactNode);
-        placement?: "top" | "bottom" | "left" | "right";
-        showArrow?: boolean;
-        trigger?: "hover" | "click";
-    };
-    /** Label to use for this column in CSV export headers. Falls back to `label` if not provided. */
-    exportLabel?: string;
-    /**
-     * Custom function to transform the cell value for export.
-     * If not provided, uses the raw accessor value converted to string.
-     * @param value - The raw cell value from the accessor
-     * @param row - The full row data
-     * @returns The value to export (will be converted to string)
-     */
-    exportValue?: (value: unknown, row: T) => string | number | boolean | null;
-    /**
-     * Whether to include this column in CSV exports.
-     * Defaults to true. Set to false to exclude columns like action buttons.
-     */
-    exportable?: boolean;
+interface CardContentProps {
+    className?: string;
+    children?: React__default.ReactNode;
+    isLoading?: boolean;
+    /** When true and parent Card has layout="flex", content expands to fill available space */
+    fill?: boolean;
 }
-interface DataTableProps<T> {
-    columns: Column<T>[];
-    data: T[];
+interface CardFooterProps {
     className?: string;
-    density?: TableDensity;
-    width?: TableWidth;
-    height?: string | number;
-    maxHeight?: string | number;
-    layout?: TableLayout;
-    mobileRenderer?: MobileRenderer;
-    customMobileRowRender?: (row: T, index: number) => ReactNode;
-    mobileBreakpoint?: MobileBreakpoint;
+    children?: React__default.ReactNode;
+    align?: "start" | "end" | "center" | "between";
     isLoading?: boolean;
-    loadingState?: LoadingState;
-    loadingRowCount?: number;
-    onLoadMore?: () => void | Promise<void>;
-    hasMore?: boolean;
-    enableVirtualization?: boolean;
-    estimatedRowHeight?: number;
-    loadingIndicator?: ReactNode;
-    stickyHeader?: boolean;
-    /** Make the first column sticky on horizontal scroll */
-    stickyFirstColumn?: boolean;
-    onRowClick?: (row: T) => void;
-    getRowId?: (row: T) => string;
-    hideHeader?: boolean;
-    /** Controlled sort configuration - when provided, DataTable becomes controlled */
-    sortConfig?: SortConfig | null;
-    onSort?: (sortConfig: SortConfig | null) => void;
-    "aria-label"?: string;
-    /**
-     * Enable drag-and-drop column reordering (like Notion tables).
-     * When enabled, users can drag column headers to reorder columns.
-     */
-    enableColumnReorder?: boolean;
-    /**
-     * Controlled column order - array of column IDs in display order.
-     * When provided, DataTable uses this order instead of the columns array order.
-     * Use with onColumnOrderChange for controlled behavior.
-     */
-    columnOrder?: string[];
-    /**
-     * Callback fired when column order changes via drag-and-drop.
-     * Receives the new array of column IDs in their new order.
-     */
-    onColumnOrderChange?: (columnOrder: string[]) => void;
 }
+declare function Card({ variant, className, children, isLoading, layout }: CardProps): react_jsx_runtime.JSX.Element;
+declare namespace Card {
+    var Header: typeof CardHeader;
+    var Media: typeof CardMedia;
+    var Content: typeof CardContent;
+    var Footer: typeof CardFooter;
+}
+declare function CardHeader({ title, subtitle, actions, className, isLoading }: CardHeaderProps): react_jsx_runtime.JSX.Element | null;
+declare function CardMedia({ src, alt, aspectRatio, className, children, isLoading }: CardMediaProps): react_jsx_runtime.JSX.Element | null;
+declare function CardContent({ className, children, isLoading, fill }: CardContentProps): react_jsx_runtime.JSX.Element | null;
+declare function CardFooter({ className, children, align, isLoading }: CardFooterProps): react_jsx_runtime.JSX.Element | null;
 
-/**
- * Table export utilities for CSV format
- * Provides export functionality for DataTable data
- */
-
-interface TableExportMetadata {
-    /** Base filename for the exported file (without extension) */
-    filename?: string;
-    /** Whether to include timestamp in filename. Defaults to true */
-    timestamp?: boolean;
+interface CarouselRootProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /** Current active page (controlled) */
+    page?: number;
+    /** Default page for uncontrolled mode */
+    defaultPage?: number;
+    /** Called when page changes */
+    onPageChange?: (page: number) => void;
+    /** Orientation of the carousel */
+    orientation?: "horizontal" | "vertical";
+    /** Whether to loop back to start/end */
+    loop?: boolean;
+    /** Enable autoplay */
+    autoplay?: boolean | {
+        delay?: number;
+    };
+    /** Autoplay delay in milliseconds */
+    autoplayDelay?: number;
+    /** Allow mouse/touch dragging */
+    allowMouseDrag?: boolean;
+    /** Spacing between slides */
+    spacing?: string;
+    /** Number of slides to show at once */
+    slidesPerView?: number;
+    /** Number of slides to scroll at once */
+    slidesPerMove?: number;
+    children: React$1.ReactNode;
 }
-interface TableExportOptions<T> {
-    /** Column definitions for the table */
-    columns: Column<T>[];
-    /** Data rows to export */
-    data: T[];
-    /** Export metadata */
-    metadata?: TableExportMetadata;
+interface CarouselItemProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /** Index of this item */
+    index: number;
+    children: React$1.ReactNode;
+}
+interface CarouselControlProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    children: React$1.ReactNode;
+}
+interface CarouselTriggerProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
+    children?: React$1.ReactNode;
+}
+interface CarouselIndicatorProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Index of the slide to navigate to */
+    index: number;
+    children?: React$1.ReactNode;
+}
+interface CarouselItemGroupProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    children: React$1.ReactNode;
 }
 /**
- * Export table data as CSV
- *
- * @param options - Export configuration
- * @returns Promise that resolves when export is complete
- *
- * @example
- * ```typescript
- * await exportTableAsCSV({
- *   columns: tableColumns,
- *   data: tableData,
- *   metadata: {
- *     filename: "devices-export",
- *     timestamp: true
- *   }
- * });
- * ```
+ * CarouselRoot - Main carousel container with state management and navigation logic.
+ * Handles page state, autoplay, looping, and drag interactions.
  */
-declare function exportTableAsCSV<T>(options: TableExportOptions<T>): Promise<void>;
+declare function CarouselRoot({ page: controlledPage, defaultPage, onPageChange, orientation, loop, autoplay, autoplayDelay, allowMouseDrag, spacing, slidesPerView, slidesPerMove, className, children, ...props }: CarouselRootProps): react_jsx_runtime.JSX.Element;
 /**
- * Prepare table data for export (without triggering download)
- * Useful for server-side export where you need the transformed data
- *
- * @param options - Export configuration
- * @returns Array of row objects ready for CSV generation
+ * CarouselItemGroup - Container for carousel items with scrolling behavior.
+ * Manages scroll snap, drag interactions, and layout spacing.
  */
-declare function prepareTableDataForExport<T>(options: Omit<TableExportOptions<T>, "metadata">): Record<string, string | number | boolean>[];
-/**
- * Get column headers for export
- * Useful for generating CSV headers on the server
- */
-declare function getExportHeaders<T>(columns: Column<T>[]): string[];
-
-interface UseTableExportOptions<T> {
-    /** Column definitions for the table */
-    columns: Column<T>[];
-    /** Data rows to export */
-    data: T[];
-    /** Export metadata */
-    metadata?: TableExportMetadata;
-}
-interface UseTableExportReturn {
-    /** Trigger CSV export of the table data */
-    exportCSV: () => Promise<void>;
-    /** Whether export is available (has data and exportable columns) */
-    canExport: boolean;
-}
-/**
- * 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.
- *
- * @param options - Configuration for table export
- * @returns Object with export function and status
- *
- * @example
- * ```tsx
- * const { exportCSV, canExport } = useTableExport({
- *   columns: deviceColumns,
- *   data: devices,
- *   metadata: {
- *     filename: "devices",
- *     timestamp: true
- *   }
- * });
- *
- * // In your DataControls actions
- * <DataControls
- *   actions={{
- *     items: [
- *       {
- *         id: "export",
- *         label: "Export CSV",
- *         icon: "Export",
- *         onClick: exportCSV,
- *         disabled: !canExport
- *       }
- *     ]
- *   }}
- * />
- * ```
- */
-declare function useTableExport<T>({ columns, data, metadata }: UseTableExportOptions<T>): UseTableExportReturn;
-
-/**
- * Data Operations Utilities
- *
- * Pure functions for filtering, sorting, searching, and faceting data.
- * These functions are used by useClientDataControls but can also be used standalone.
- */
-
-interface ApplyDataOperationsOptions<T> {
-    data: T[];
-    filters?: FilterState;
-    sort?: SortState | null;
-    search?: SearchConfig | null;
-    facetConfigs?: FacetConfig[];
-}
-interface ApplyDataOperationsResult<T> {
-    data: T[];
-    facetCounts: FacetCounts;
-    resultCount: number;
-}
-/**
- * Apply all data operations in the correct order:
- * 1. Search
- * 2. Filter
- * 3. Compute facets (on filtered data)
- * 4. Sort
- */
-declare function applyDataOperations<T>({ data, filters, sort, search, facetConfigs, }: ApplyDataOperationsOptions<T>): ApplyDataOperationsResult<T>;
-
-/**
- * Boolean formatting utilities
- */
-
+declare function CarouselItemGroup({ className, children, ...props }: CarouselItemGroupProps): react_jsx_runtime.JSX.Element;
 /**
- * Format boolean value with custom text
+ * Individual slide/item within the carousel.
+ * Handles sizing based on slidesPerView and applies snap alignment.
  */
-declare const toBoolean: (value: boolean | null | undefined, trueText?: string, falseText?: string) => string | null;
+declare function CarouselItem({ index, className, children, ...props }: CarouselItemProps): react_jsx_runtime.JSX.Element;
 /**
- * Format boolean as enabled/disabled
+ * CarouselControl - Container for navigation controls and indicators.
+ * Typically holds prev/next buttons, indicators, and autoplay controls.
  */
-declare const toEnabledDisabled: (value: boolean | null | undefined) => string | null;
+declare function CarouselControl({ className, children, ...props }: CarouselControlProps): react_jsx_runtime.JSX.Element;
 /**
- * Format boolean as on/off
+ * CarouselPrevTrigger - Button to navigate to the previous slide.
+ * Automatically disabled when at the first slide (unless loop is enabled).
  */
-declare const toOnOff: (value: boolean | null | undefined) => string | null;
+declare function CarouselPrevTrigger({ className, children, ...props }: CarouselTriggerProps): react_jsx_runtime.JSX.Element;
 /**
- * Format boolean as active/inactive
+ * CarouselNextTrigger - Button to navigate to the next slide.
+ * Automatically disabled when at the last slide (unless loop is enabled).
  */
-declare const toActiveInactive: (value: boolean | null | undefined) => string | null;
+declare function CarouselNextTrigger({ className, children, ...props }: CarouselTriggerProps): react_jsx_runtime.JSX.Element;
 /**
- * Format boolean as true/false
+ * CarouselIndicator - Dot indicator for a specific slide.
+ * Clicking navigates to the slide at the specified index.
  */
-declare const toTrueFalse: (value: boolean | null | undefined) => string | null;
+declare function CarouselIndicator({ index, className, children, ...props }: CarouselIndicatorProps): react_jsx_runtime.JSX.Element;
 /**
- * Format boolean as checkmark/cross
+ * CarouselIndicatorGroup - Container for all page indicators.
+ * Automatically generates indicators for each page/slide.
  */
-declare const toCheckmark: (value: boolean | null | undefined) => string | null;
+declare function CarouselIndicatorGroup({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
 /**
- * Parse various truthy/falsy values to boolean
+ * CarouselAutoplayTrigger - Toggle button for autoplay functionality.
+ * Allows users to pause and resume automatic slide transitions.
  */
-declare const parseBoolean: (value: FieldValue) => boolean | null;
+declare function CarouselAutoplayTrigger({ className, children, ...props }: CarouselTriggerProps): react_jsx_runtime.JSX.Element;
 /**
- * Format boolean according to BooleanFormat specification
+ * CarouselProgressText - Displays current slide position (e.g., "1 / 5").
+ * Shows the current page number and total number of pages.
  */
-declare const formatBoolean: (value: FieldValue, format: BooleanFormat) => FormattedValue;
+declare function CarouselProgressText({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
 
+type ChipVariant = "primary" | "secondary" | "info";
+type LegacyChipVariant = "default" | "brand";
+interface ChipProps {
+    /** The content to display inside the chip */
+    children: React__default.ReactNode;
+    /** Callback when the remove button is clicked */
+    onRemove?: () => void;
+    /** Size variant of the chip */
+    size?: Size | "xs";
+    /** Visual variant of the chip */
+    /**
+     * Visual treatment. Use `primary` for selected/applied chips and
+     * `secondary` for available/lower-emphasis chips. `default` and `brand` are
+     * deprecated aliases for `secondary` and `primary`, respectively.
+     */
+    variant?: ChipVariant | LegacyChipVariant;
+    /** Whether the chip can be removed (shows X button) */
+    isRemovable?: boolean;
+    /** Whether the chip is disabled */
+    isDisabled?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Click handler for the chip itself (not the remove button) */
+    onClick?: () => void;
+}
 /**
- * Capacity formatting utilities for batteries and energy storage
- *
- * Domain-specific formatters for energy capacity (kWh) and power ratings (kW).
- * Auto-scales to appropriate units (MWh, MW for large values).
- */
-/**
- * Format battery capacity (kWh)
- *
- * @param value - Capacity in kWh
- * @param decimals - Number of decimal places (default: 1)
- * @returns Formatted capacity string or null
+ * Chip
  *
- * @example
- * ```typescript
- * formatCapacity(13.5); // "13.5 kWh"
- * formatCapacity(1500); // "1.5 MWh"
- * formatCapacity(null); // null
- * ```
+ * A compact element that represents an input, attribute, or action.
+ * Can be removable with an X button and supports different variants and sizes.
  */
-declare function formatCapacity(value: number | null | undefined, decimals?: number): string | null;
+declare function Chip({ children, onRemove, size, variant, isRemovable, isDisabled, className, onClick, }: ChipProps): react_jsx_runtime.JSX.Element;
+
+interface Item {
+    id: string;
+    name: string;
+}
+interface ChipInputFieldProps {
+    /** Field label */
+    label?: string;
+    /** Field description */
+    description?: string;
+    /** Error message to display */
+    errorMessage?: string | ((validation: ValidationResult) => string);
+    /** Size variant */
+    size?: Size;
+    /** Tooltip for the label */
+    tooltip?: string;
+    /** Whether the field is required */
+    isRequired?: boolean;
+    /** Whether the field is disabled */
+    isDisabled?: boolean;
+    /** Whether the field is invalid */
+    isInvalid?: boolean;
+    /** Validation result */
+    validationResult?: ValidationResult;
+    /** Placeholder text for the input */
+    placeholder?: string;
+    /** Selected items (array of item IDs) */
+    selectedItems?: string[];
+    /** Callback when selected items change */
+    onItemsChange?: (items: string[]) => void;
+    /** Static items for autocomplete suggestions */
+    staticItems?: Item[];
+    /** Async function to fetch suggestions (alternative to staticItems) */
+    fetchSuggestions?: (query: string) => Promise<string[]>;
+    /** Custom chip variant */
+    chipVariant?: "primary" | "secondary" | "info" | "default" | "brand";
+    /** Whether to show errors */
+    showErrors?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
 /**
- * Format power rating (kW)
- *
- * @param value - Power rating in kW
- * @param decimals - Number of decimal places (default: 1)
- * @returns Formatted power rating string or null
+ * ChipInputField
  *
- * @example
- * ```typescript
- * formatPowerRating(5.2); // "5.2 kW"
- * formatPowerRating(2500); // "2.5 MW"
- * formatPowerRating(null); // null
- * ```
+ * A tags input component with autocomplete suggestions.
+ * Press Enter or comma to add tags, Backspace when empty to remove last tag.
+ * Supports both static items and async fetching for suggestions.
  */
-declare function formatPowerRating(value: number | null | undefined, decimals?: number): string | null;
+declare function ChipInputField({ label, description, errorMessage, size, tooltip, isRequired, isDisabled, isInvalid, validationResult, placeholder, selectedItems, onItemsChange, staticItems, fetchSuggestions, chipVariant, showErrors, className, }: ChipInputFieldProps): react_jsx_runtime.JSX.Element;
 
+type CollapseVariant = "contained" | "bordered" | "plain";
+type CollapseDensity = "comfortable" | "compact";
+interface CollapseProps extends Omit<DisclosureGroupProps, "className"> {
+    variant?: CollapseVariant;
+    density?: CollapseDensity;
+    showDividers?: boolean;
+    className?: DisclosureGroupProps["className"];
+}
 /**
- * Shared CSV export helpers for unit-bearing FieldFormats.
- *
- * CSV columns need one unit for the whole column, not per-row auto-scaling. The
- * on-screen display can happily render "12 kV" one row and "500 mV" the next
- * because a human reads them in context, but in a spreadsheet that mixes
- * magnitudes in a single column and makes the data unusable.
- *
- * These helpers pick a stable column-wide unit for a given FieldFormat and
- * return the bare number that matches that unit:
+ * Collapse
  *
- *   - `csvUnitFor(format)`   → the unit string to show in the column header,
- *     or null when the format has no meaningful unit (text, number, date, …).
- *   - `csvValueFor(raw, format)` → the bare-number string for a cell in that
- *     column. Returns null for non-numeric formats (caller falls back to the
- *     regular display formatter), and "" when the display would be blank
- *     (hideWhenNull / hideWhenZero / null value).
- *
- * Consumers:
- *   - `apps/dashboard/components/Explorer/tables/deviceFieldExport.ts` (Explore CSV)
- *   - `packages/edges/src/utils/chartExport.ts` (chart CSV export)
+ * A composable disclosure group built on `react-aria-components` that follows the
+ * Edges design system. Supports contained, bordered, and plain variants along
+ * with compact or comfortable density options.
  */
+declare function Collapse({ variant, density, showDividers, className, ...props }: CollapseProps): react_jsx_runtime.JSX.Element;
+interface CollapseItemProps extends Omit<DisclosureProps, "className" | "children"> {
+    className?: DisclosureProps["className"];
+    children?: React$1.ReactNode;
+}
+declare function CollapseItem({ className, children, ...props }: CollapseItemProps): react_jsx_runtime.JSX.Element;
+declare namespace CollapseItem {
+    var displayName: string;
+}
+interface CollapseHeaderProps extends Omit<ButtonProps, "children" | "slot"> {
+    title?: React$1.ReactNode;
+    description?: React$1.ReactNode;
+    startContent?: React$1.ReactNode;
+    endContent?: React$1.ReactNode;
+    indicator?: React$1.ReactNode | ((state: {
+        isExpanded: boolean;
+        isDisabled: boolean;
+    }) => React$1.ReactNode);
+    indicatorPosition?: "start" | "end";
+    showIndicator?: boolean;
+    keepIndicatorSpace?: boolean;
+    children?: React$1.ReactNode;
+}
+declare function CollapseHeader({ title, description, startContent, endContent, indicator, indicatorPosition, showIndicator, keepIndicatorSpace, children, className, ...props }: CollapseHeaderProps): react_jsx_runtime.JSX.Element;
+declare namespace CollapseHeader {
+    var displayName: string;
+}
+interface CollapseContentProps extends Omit<DisclosurePanelProps, "className"> {
+    className?: DisclosurePanelProps["className"];
+}
+declare function CollapseContent({ className, children, ...props }: CollapseContentProps): react_jsx_runtime.JSX.Element;
+declare namespace CollapseContent {
+    var displayName: string;
+}
 
+interface ConfirmProps {
+    /**
+     * Whether the confirm dialog is open
+     */
+    isOpen: boolean;
+    /**
+     * Callback when the dialog is closed without confirming
+     */
+    onClose: () => void;
+    /**
+     * Callback when the confirm button is pressed
+     */
+    onConfirm: () => void;
+    /**
+     * Dialog title
+     */
+    title: string;
+    /**
+     * Confirmation message/content
+     */
+    message: React__default.ReactNode;
+    /**
+     * Label for the confirm button
+     * @default "Confirm"
+     */
+    confirmLabel?: string;
+    /**
+     * Label for the cancel button
+     * @default "Cancel"
+     */
+    cancelLabel?: string;
+    /**
+     * Variant for the confirm button
+     * @default "primary"
+     */
+    confirmVariant?: DialogAction["variant"];
+    /**
+     * Whether the confirm action is destructive (uses destructive styling)
+     * @default false
+     */
+    isDestructive?: boolean;
+    /**
+     * Whether the confirm button is in a loading state
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Maximum width of the confirm dialog
+     * @default "500px"
+     */
+    maxWidth?: string;
+    /**
+     * Minimum width of the confirm dialog (desktop only)
+     * @default "400px"
+     */
+    minWidth?: string;
+}
 /**
- * Pick the CSV column unit for a FieldFormat.
+ * Confirm
  *
- * Rules:
- * - Explicit `unit` on the format wins.
- * - Otherwise fall back to the format's canonical base unit
- *   (`DEFAULT_BASE_UNIT` lookup) so every row in the column shares one unit
- *   even if the on-screen display would auto-scale.
- * - Energy honours `sourceUnit` (e.g. meter consumption is stored in kWh) as
- *   the natural stable unit when neither `unit` nor a base fallback would fit.
- * - Temperature symbols are normalised from `"C"`/`"CELSIUS"` etc. to `"°C"`.
- * - Formats with no meaningful unit (text, number, date, boolean, currency,
- *   phone, custom) return null.
+ * A confirmation dialog with confirm and cancel actions.
+ * Use for actions that require user confirmation before proceeding.
  */
-declare function csvUnitFor(format: FieldFormat | undefined | null): string | null;
+declare function Confirm({ isOpen, onClose, onConfirm, title, message, confirmLabel, cancelLabel, confirmVariant, isDestructive, isLoading, maxWidth, minWidth, }: ConfirmProps): react_jsx_runtime.JSX.Element;
+
+interface ConnectionStatusBadgeProps extends Omit<BadgeProps, "variant" | "children"> {
+    /** Whether the device is currently connected */
+    isConnected: boolean;
+    /** Timestamp when the device last connected */
+    connectedAt?: Date | string | null;
+    /** Timestamp when the device disconnected */
+    disconnectedAt?: Date | string | null;
+    /** Show timestamp below the status */
+    showTimestamp?: boolean;
+    /** Loading state */
+    isLoading?: boolean;
+}
 /**
- * Convert a raw value to a bare-number CSV string in the same unit
- * `csvUnitFor` reports.
+ * ConnectionStatusBadge
  *
- * Returns:
- *  - `null` when the format is non-numeric (caller falls back to the display
- *    formatter, e.g. text/date/enum).
- *  - `""` when the display would suppress the value (hideWhenNull / hideWhenZero).
- *  - a bare number string otherwise, with the trailing unit stripped so the
- *    cell can be summed / charted in the spreadsheet.
+ * Displays device connection status with optional timestamps.
+ * - Green "Connected" badge with pulsing dot
+ * - Gray "Disconnected" badge with duration offline
+ * - Auto-calculates "offline for 2 hours" type strings
+ *
+ * @example
+ * ```tsx
+ * <ConnectionStatusBadge isConnected={true} />
+ * <ConnectionStatusBadge isConnected={false} disconnectedAt={new Date()} showTimestamp />
+ * <ConnectionStatusBadge isConnected={true} connectedAt={new Date()} />
+ * ```
  */
-declare function csvValueFor(raw: unknown, format: FieldFormat): string | null;
+declare function ConnectionStatusBadge({ isConnected, connectedAt, disconnectedAt, showTimestamp, isLoading, size, shape, ...badgeProps }: ConnectionStatusBadgeProps): react_jsx_runtime.JSX.Element;
 
+interface ContactCardProps {
+    /** First name */
+    firstName: string;
+    /** Last name */
+    lastName: string;
+    /** Email address (optional) */
+    email?: string;
+    /** Phone number (optional) */
+    phone?: string;
+    /** Avatar image URL (optional) */
+    avatarUrl?: string;
+    /** Link to contact detail page (optional) */
+    href?: string;
+    /** Custom link component (e.g., Next.js Link) */
+    LinkComponent?: LinkComponentType;
+    /** Card variant */
+    variant?: "outlined" | "elevated" | "filled" | "ghost";
+    /** Layout orientation
+     * @default "horizontal"
+     * - "horizontal": Avatar on left, info on right
+     * - "vertical": Avatar on top, info below (centered, better for narrow/square containers)
+     */
+    layout?: "horizontal" | "vertical";
+    /** Show email address
+     * @default true
+     */
+    showEmail?: boolean;
+    /** Show phone number
+     * @default false
+     */
+    showPhone?: boolean;
+    /** Loading state */
+    isLoading?: boolean;
+    /** Additional classes for the card */
+    className?: string;
+    /** Additional classes for the card content (for padding control, etc.) */
+    contentClassName?: string;
+    /**
+     * Entity identifier for PII masking (e.g., "contact:ctc_abc123")
+     * When provided, adds data-pii-* attributes for the Curtain extension
+     */
+    piiEntity?: string;
+}
 /**
- * Electrical current formatting utilities (flow of electric charge)
+ * ContactCard
+ *
+ * A card component for displaying contact information with avatar.
+ * Includes name, optional email, and optional phone number.
+ *
+ * @example
+ * ```tsx
+ * <ContactCard
+ *   firstName="John"
+ *   lastName="Doe"
+ *   email="john.doe@example.com"
+ *   phone="+1 (555) 123-4567"
+ *   showEmail
+ *   showPhone
+ *   href="/contacts/123"
+ * />
+ * ```
  */
+declare function ContactCard({ firstName, lastName, email, phone, avatarUrl, href, LinkComponent, variant, layout, showEmail, showPhone, isLoading, className, contentClassName, piiEntity, }: ContactCardProps): react_jsx_runtime.JSX.Element;
 
 /**
- * Format as milliamps
- */
-declare const toMilliamps: (value: number | null | undefined, decimals?: number) => string | null;
-/**
- * Format as amperes
+ * Tailwind CSS default breakpoints
+ * These match the standard Tailwind breakpoints used in your CSS
  */
-declare const toAmps: (value: number | null | undefined, decimals?: number) => string | null;
+declare const BREAKPOINTS: {
+    readonly sm: "640px";
+    readonly md: "768px";
+    readonly lg: "1024px";
+    readonly xl: "1280px";
+    readonly "2xl": "1536px";
+};
+type Breakpoint = keyof typeof BREAKPOINTS;
+interface BreakpointState {
+    /** Current active breakpoint (highest matching breakpoint) */
+    current: Breakpoint | "base";
+    /** True if viewport is at least 640px (sm breakpoint or higher) */
+    isSm: boolean;
+    /** True if viewport is at least 768px (md breakpoint or higher) */
+    isMd: boolean;
+    /** True if viewport is at least 1024px (lg breakpoint or higher) */
+    isLg: boolean;
+    /** True if viewport is at least 1280px (xl breakpoint or higher) */
+    isXl: boolean;
+    /** True if viewport is at least 1536px (2xl breakpoint or higher) */
+    is2Xl: boolean;
+    /** True if viewport is smaller than 768px (mobile) */
+    isMobile: boolean;
+    /** True if viewport is 768px or larger (tablet/desktop) */
+    isDesktop: boolean;
+}
 /**
- * Format as kiloamps (rarely used but included for completeness)
+ * Public return type alias for useBreakpoint hook
+ * Provides a stable public API for barrel re-exports
  */
-declare const toKiloamps: (value: number | null | undefined, decimals?: number) => string | null;
+type UseBreakpointReturn = BreakpointState;
 /**
- * Auto-scale current to the most appropriate unit
- */
-declare const autoScaleCurrent: (value: number | null | undefined, decimals?: number) => string | null;
-/**
- * Format current according to CurrentFormat specification
- */
-declare const formatCurrent: (value: FieldValue, format: CurrentFormat) => FormattedValue;
-declare const toMA: (value: number | null | undefined, decimals?: number) => string | null;
-declare const toA: (value: number | null | undefined, decimals?: number) => string | null;
-declare const toKA: (value: number | null | undefined, decimals?: number) => string | null;
-
-/**
- * Date formatting utilities using Luxon
- */
-
-/**
- * Format date to a localized string with optional time and timezone.
+ * Hook to detect which Tailwind breakpoint is currently active
  *
- * @param value - Date value (string, Date object, or timestamp)
- * @param showTime - Whether to include time in the output (default: false)
- * @param timezone - Optional timezone for display (e.g., "America/New_York")
- * @returns Formatted date string or null
+ * 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.
+ *
+ * @param defaultBreakpoint - The breakpoint to assume during SSR or before first render (defaults to "base" for mobile-first)
+ * @returns An object containing breakpoint state information
  *
  * @example
- * ```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"
- * ```
- */
-declare const toDateString: (value: string | Date | number | null | undefined, showTime?: boolean, timezone?: string) => string | null;
-/**
- * Format date to relative time (e.g., "2 hours ago", "in 3 days").
- * Automatically chooses the most appropriate unit.
+ * ```tsx
+ * const { isMobile, isDesktop, current } = useBreakpoint();
  *
- * @param value - Date value (string, Date object, or timestamp)
- * @returns Relative time string or null
+ * // Conditional rendering based on screen size
+ * return isMobile ? <MobileNav /> : <DesktopNav />;
  *
- * @example
- * ```typescript
- * toRelativeTime(new Date(Date.now() - 3600000)); // "1 hour ago"
- * toRelativeTime(new Date(Date.now() + 86400000)); // "in 1 day"
- * toRelativeTime(new Date()); // "now"
+ * // Check specific breakpoint
+ * if (isLg) {
+ *   // Show expanded view on large screens
+ * }
+ *
+ * // Use current breakpoint
+ * console.log(`Current breakpoint: ${current}`); // "md", "lg", etc.
  * ```
  */
-declare const toRelativeTime: (value: string | Date | number | null | undefined) => string | null;
-/**
- * Format date with full date and time including weekday
- */
-declare const toFullDateTime: (value: string | Date | number | null | undefined, timezone?: string) => string | null;
-/**
- * Format date to ISO string
- */
-declare const toISOString: (value: string | Date | number | null | undefined) => string | null;
-/**
- * Format date with custom format string
- */
-declare const toCustomDateFormat: (value: string | Date | number | null | undefined, format: string, timezone?: string) => string | null;
-/**
- * Get formatted date parts
- */
-declare const getDateParts: (value: string | Date | number | null | undefined) => {
-    year: number;
-    month: number;
-    day: number;
-    weekday: number;
-    hour: number;
-    minute: number;
-    second: number;
-    millisecond: number;
-    weekdayShort: string | null;
-    weekdayLong: string | null;
-    monthShort: string | null;
-    monthLong: string | null;
-} | null;
-/**
- * Format date according to DateFormat specification
- */
-declare const formatDate: (value: FieldValue, format: DateFormat) => FormattedValue;
+declare function useBreakpoint(defaultBreakpoint?: Breakpoint | "base"): BreakpointState;
 
 /**
- * Distance and length formatting utilities
+ * Data Controls Types
+ *
+ * Core type definitions for client-side and server-side data filtering,
+ * sorting, faceting, and search operations.
  */
-
+type FilterOperator = "eq" | "neq" | "in" | "nin" | "gt" | "gte" | "lt" | "lte" | "contains" | "startsWith" | "endsWith";
+interface FilterCondition {
+    /** Field name (supports nested paths like 'user.profile.name') */
+    field: string;
+    /** Comparison operator */
+    operator: FilterOperator;
+    /** Value to compare against */
+    value: string | number | boolean | (string | number)[];
+}
+interface FilterGroup {
+    /** Logical operator combining conditions */
+    logic: "AND" | "OR";
+    /** Conditions or nested filter groups */
+    conditions: (FilterCondition | FilterGroup)[];
+}
+/** Root filter state - can be empty, a single group, or nested groups */
+type FilterState = FilterGroup | null;
+interface SortState {
+    /** Field to sort by (supports nested paths) */
+    field: string;
+    /** Sort direction */
+    direction: "asc" | "desc";
+}
+interface SearchConfig {
+    /** Search query string */
+    query: string;
+    /** Fields to search across */
+    fields: string[];
+    /** Use fuzzy matching (Fuse.js) - default true */
+    fuzzy?: boolean;
+    /** Fuse.js matching threshold (0.0 = perfect, 1.0 = anything) - default 0.3 */
+    threshold?: number;
+}
+type FacetType = "string" | "number" | "boolean" | "date";
+interface FacetConfig {
+    /** Field name to facet on */
+    field: string;
+    /** Display label for the facet */
+    label: string;
+    /** Data type of the field */
+    type?: FacetType;
+    /** Optional: Provide predefined values for the facet (useful for enums) */
+    values?: Array<{
+        value: string | number;
+        label: string;
+    }>;
+    /** Number of options to show before requiring search (default: 10) */
+    searchThreshold?: number;
+    /** Max options to show initially, with "Show all" button for rest (default: 50) */
+    maxVisibleOptions?: number;
+    /** Optional description text to show below the label */
+    description?: string;
+    /** Optional: Custom render function for option labels (e.g., to show Badges) */
+    renderLabel?: (value: string, label: string) => React.ReactNode;
+    /** Optional: Group name for organizing filters in FilterDialog */
+    group?: string;
+}
+interface FacetCounts {
+    [field: string]: {
+        [value: string]: number;
+    };
+}
 /**
- * Format as meters
+ * Create a single filter condition
  */
-declare const toMeters: (value: number | null | undefined, decimals?: number) => string | null;
+declare function createFilter(field: string, operator: FilterOperator, value: string | number | boolean | (string | number)[]): FilterCondition;
 /**
- * Format as centimeters
+ * Create a filter group from multiple conditions with AND logic
  */
-declare const toCentimeters: (value: number | null | undefined, decimals?: number) => string | null;
+declare function createFilters(conditions: FilterCondition[], logic?: "AND" | "OR"): FilterGroup;
 /**
- * Format as millimeters
+ * Create an empty filter state
  */
-declare const toMillimeters: (value: number | null | undefined, decimals?: number) => string | null;
+declare function createEmptyFilter(): FilterGroup;
 /**
- * Format as kilometers
+ * Check if a filter state is empty (no conditions)
  */
-declare const toKilometers: (value: number | null | undefined, decimals?: number) => string | null;
+declare function isFilterEmpty(filter: FilterState): boolean;
 /**
- * Format as feet
+ * Convert structured filter state to simple display chips
+ * Used for backward compatibility with existing FilterChips component
  */
-declare const toFeet: (value: number | null | undefined, decimals?: number) => string | null;
+interface FilterChip {
+    id: string;
+    label: string;
+    value: string;
+}
+declare function filterToChips(filter: FilterState, facetConfigs?: FacetConfig[]): FilterChip[];
 /**
- * Format as inches
+ * Add a condition to a filter state
  */
-declare const toInches: (value: number | null | undefined, decimals?: number) => string | null;
+declare function addFilterCondition(filter: FilterState, condition: FilterCondition): FilterGroup;
 /**
- * Format as miles
+ * Remove a condition from a filter state by field
  */
-declare const toMiles: (value: number | null | undefined, decimals?: number) => string | null;
+declare function removeFilterCondition(filter: FilterState, field: string): FilterGroup;
 /**
- * Format as yards
+ * Get all unique fields being filtered on
  */
-declare const toYards: (value: number | null | undefined, decimals?: number) => string | null;
+declare function getFilterFields(filter: FilterState): string[];
+
+interface UseClientDataControlsOptions<T> {
+    /** Raw data to process */
+    data: T[];
+    /** Filter state */
+    filters?: FilterState;
+    /** Sort state */
+    sort?: SortState | null;
+    /** Search configuration */
+    search?: SearchConfig | null;
+    /** Facet configurations */
+    facetConfigs?: FacetConfig[];
+}
+interface UseClientDataControlsResult<T> {
+    /** Processed data (filtered, sorted, searched) */
+    data: T[];
+    /** Facet counts computed from filtered data */
+    facetCounts: FacetCounts;
+    /** Number of results after filtering/searching */
+    resultCount: number;
+}
 /**
- * Format as nautical miles
+ * 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
+ *
+ * @example
+ * ```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' }
+ *   ]
+ * });
+ * ```
  */
-declare const toNauticalMiles: (value: number | null | undefined, decimals?: number) => string | null;
+declare function useClientDataControls<T>({ data, filters, sort, search, facetConfigs, }: UseClientDataControlsOptions<T>): UseClientDataControlsResult<T>;
+
 /**
- * Conversion utilities
- */
-declare const metersToFeet: (meters: number) => number;
-declare const feetToMeters: (feet: number) => number;
-declare const milesToKilometers: (miles: number) => number;
-declare const kilometersToMiles: (km: number) => number;
-declare const feetToMiles: (feet: number) => number;
-declare const milesToFeet: (miles: number) => number;
-declare const metersToMiles: (meters: number) => number;
-declare const milesToMeters: (miles: number) => number;
-declare const yardsToMeters: (yards: number) => number;
-declare const metersToYards: (meters: number) => number;
-declare const inchesToCentimeters: (inches: number) => number;
-declare const centimetersToInches: (cm: number) => number;
-/**
- * Auto-scale distance to the most appropriate unit
- */
-declare const autoScaleDistance: (value: number | null | undefined, metric?: boolean, decimals?: number) => string | null;
-/**
- * Format distance according to DistanceFormat specification
+ * useContainerBreakpoint — measures a container element's width and returns
+ * the same BreakpointState shape as useBreakpoint, but derived from the
+ * container, not the window.
+ *
+ * Blocks that need to respond to their render width (not the viewport) should
+ * use this hook instead of useBreakpoint. When rendered inside a
+ * ContainerQueryProvider, the hook reads from context (no ref needed). When
+ * no provider is present, it falls back to measuring its own ref, or
+ * ultimately to window-based breakpoints.
+ *
+ * @returns BreakpointState — same shape as useBreakpoint
  */
-declare const formatDistance: (value: FieldValue, format: DistanceFormat) => FormattedValue;
+declare function useContainerBreakpoint(containerRef?: React.RefObject<HTMLElement | null>): BreakpointState;
 
+interface ServerDataState {
+    filters: FilterState;
+    sort: SortState | null;
+    search: SearchConfig | null;
+}
+interface UseServerDataControlsOptions {
+    /** Filter state */
+    filters: FilterState;
+    /** Sort state */
+    sort: SortState | null;
+    /** Search configuration */
+    search: SearchConfig | null;
+    /** Callback when state changes (debounced for search) */
+    onStateChange: (state: ServerDataState) => void;
+    /** Search debounce delay in ms (default: 300) */
+    searchDebounce?: number;
+}
 /**
- * Energy formatting utilities (stored or consumed energy)
- * For power (rate of energy), use power.ts
- * For electrical units (voltage, current), use voltage.ts and current.ts
+ * 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
+ *
+ * @example
+ * ```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
+ *     });
+ *   }
+ * });
+ * ```
  */
+declare function useServerDataControls({ filters, sort, search, onStateChange, searchDebounce, }: UseServerDataControlsOptions): void;
 
+interface UseDataControlsClientOptions<T> {
+    mode: "client";
+    /** Raw data to process (required in client mode) */
+    data: T[];
+    /** Filter state */
+    filters?: FilterState;
+    /** Sort state */
+    sort?: SortState | null;
+    /** Search configuration */
+    search?: SearchConfig | null;
+    /** Facet configurations */
+    facetConfigs?: FacetConfig[];
+}
+interface UseDataControlsServerOptions<T> {
+    mode: "server";
+    /** Data from server (already filtered/sorted) */
+    data: T[];
+    /** Filter state */
+    filters: FilterState;
+    /** Sort state */
+    sort: SortState | null;
+    /** Search configuration */
+    search: SearchConfig | null;
+    /** Callback when state changes (required in server mode) */
+    onStateChange: (state: ServerDataState) => void;
+    /** Search debounce delay in ms (default: 300) */
+    searchDebounce?: number;
+    /** Result count from server */
+    resultCount?: number;
+    /** Facet counts from server */
+    facetCounts?: FacetCounts;
+}
+type UseDataControlsOptions<T> = UseDataControlsClientOptions<T> | UseDataControlsServerOptions<T>;
+interface UseDataControlsResult<T> {
+    /** Processed data (client mode) or server data (server mode) */
+    data: T[];
+    /** Facet counts (computed in client mode, passed through in server mode) */
+    facetCounts: FacetCounts;
+    /** Result count (computed in client mode, passed through in server mode) */
+    resultCount: number;
+}
 /**
- * Format as Watt-hours
- */
-declare const toWh: (value: number | null | undefined, decimals?: number) => string | null;
-/**
- * Format as kilowatt-hours
- */
-declare const tokWh: (value: number | null | undefined, decimals?: number) => string | null;
-/**
- * Format as megawatt-hours
- */
-declare const toMWh: (value: number | null | undefined, decimals?: number) => string | null;
-/**
- * Format as gigawatt-hours
- */
-declare const toGWh: (value: number | null | undefined, decimals?: number) => string | null;
-/**
- * Pick the display unit auto-scaling would choose for a Wh magnitude.
- */
-declare const pickEnergyUnit: (whValue: number) => EnergyUnit;
-/**
- * Auto-scale energy to the most appropriate unit
- */
-declare const autoScaleEnergy: (value: number | null | undefined, decimals?: number) => string | null;
-/**
- * Format energy according to EnergyFormat specification
- */
-/**
- * Multiplier from the named energy unit to Wh — the formatter's internal
- * reference unit. Keep in sync with `EnergyUnit`.
+ * 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
+ *
+ * @example Client Mode
+ * ```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' }]
+ * });
+ * ```
+ *
+ * @example Server Mode
+ * ```tsx
+ * const { data, facetCounts, resultCount } = useDataControls({
+ *   mode: 'server',
+ *   data: serverData, // Already filtered
+ *   filters,
+ *   sort,
+ *   search,
+ *   resultCount: totalCount,
+ *   facetCounts: serverFacets,
+ *   onStateChange: (state) => refetch(state)
+ * });
+ * ```
  */
-declare const SOURCE_UNIT_TO_WH: Record<EnergyUnit, number>;
-declare const formatEnergy: (value: FieldValue, format: EnergyFormat) => FormattedValue;
+declare function useDataControls<T>(options: UseDataControlsOptions<T>): UseDataControlsResult<T>;
 
+declare function useDebounce<T>(value: T, delay?: number): T;
+
+interface ElementSize {
+    width: number;
+    height: number;
+}
+interface UseElementSizeResult<T extends HTMLElement = HTMLElement> {
+    ref: (node: T | null) => void;
+    width: number;
+    height: number;
+}
 /**
- * `formatFieldValue` dispatcher — extracted from `./index.ts` into its own
- * leaf module so downstream helpers (notably `csvUnit.ts`) can depend on the
- * dispatcher without pulling the whole formatting barrel (and any of its
- * transitively-imported React/PostHog side-effects) into a test setup.
+ * useElementSize
  *
- * `./index.ts` re-exports this module so the public API is unchanged.
+ * 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
+ *
+ * @example
+ * ```tsx
+ * const { ref, width, height } = useElementSize();
+ *
+ * return (
+ *   <div ref={ref}>
+ *     Width: {width}px, Height: {height}px
+ *   </div>
+ * );
+ * ```
  */
+declare function useElementSize<T extends HTMLElement = HTMLElement>(): UseElementSizeResult<T>;
 
 /**
- * Main formatting function that routes to the appropriate formatter based on
- * the format type. See `./index.ts` for the fuller doc comment.
+ * Hook for managing localStorage values with React state synchronization
+ * @param key - The localStorage key
+ * @param initialValue - The initial value if nothing is stored
+ * @returns [value, setValue, removeValue] - Current value, setter function, and remove function
  */
-declare const formatFieldValue: (value: FieldValue, format: FieldFormat) => FormattedValue;
+declare function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T | ((val: T) => T)) => void, () => void];
 
 /**
- * Number and currency formatting utilities
+ * Hook to check if a media query matches the current viewport
+ *
+ * @param query - A CSS media query string (e.g., "(min-width: 768px)")
+ * @param defaultValue - The default value to return during SSR or before the first render
+ * @returns A boolean indicating whether the media query matches
+ *
+ * @example
+ * ```tsx
+ * const isMobile = useMediaQuery('(max-width: 767px)');
+ * const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
+ * const isLandscape = useMediaQuery('(orientation: landscape)');
+ * ```
  */
+declare function useMediaQuery(query: string, defaultValue?: boolean): boolean;
 
 /**
- * Check if a value is null or undefined
- */
-declare const isNil: (value: unknown) => value is null | undefined;
-/**
- * Format as percentage
- */
-declare const toPercentage: (value: number | null | undefined, decimals?: number) => string | null;
-/**
- * Format percentage (simple wrapper for consistency with other formatters)
- *
- * @param value - Numeric value (0-100 range)
- * @param precision - Number of decimal places (default: 0)
- * @returns Formatted percentage string with % symbol
- */
-declare const formatPercent: (value: number | null | undefined, precision?: number) => string;
-/**
- * Format as integer
- */
-declare const toInteger: (value: number | null | undefined) => string | null;
-/**
- * Format as float with specified decimals
- */
-declare const toFloat: (value: number | null | undefined, decimals?: number) => string | null;
-/**
- * Format number with thousands separator
- */
-declare const toFormattedNumber: (value: number | null | undefined, decimals?: number, thousandsSeparator?: boolean) => string | null;
-/**
- * Format number with compact notation (1K, 1M, etc.)
- */
-declare const toCompactNumber: (value: number | null | undefined, display?: "short" | "long") => string | null;
-/**
- * Format number with scientific notation
- */
-declare const toScientificNotation: (value: number | null | undefined, decimals?: number) => string | null;
-/**
- * Format as currency
- */
-declare const toCurrency: (value: number | null | undefined, currency?: string, options?: Partial<CurrencyFormat>) => string | null;
-/**
- * Format number according to NumberFormat specification
- */
-declare const formatNumber: (value: FieldValue, format: NumberFormat) => FormattedValue;
-/**
- * Format currency according to CurrencyFormat specification
- */
-declare const formatCurrency: (value: FieldValue, format: CurrencyFormat) => FormattedValue;
-
-/**
- * Phone number formatting utilities
- */
-
-/**
- * Format US phone number
- */
-declare const formatUSPhone: (phone: string | null | undefined) => string | null;
-/**
- * Format international phone number
- */
-declare const formatInternationalPhone: (phone: string | null | undefined) => string | null;
-/**
- * Format phone number with basic formatting
- */
-declare const formatPhoneNumber: (phone: string | null | undefined) => string | null;
-/**
- * Format phone according to PhoneFormat specification
- */
-declare const formatPhone: (value: FieldValue, format: PhoneFormat) => FormattedValue;
-
-/**
- * Power formatting utilities (rate of energy transfer)
+ * Table export utilities for CSV format
+ * Provides export functionality for DataTable data
  */
 
+interface TableExportMetadata {
+    /** Base filename for the exported file (without extension) */
+    filename?: string;
+    /** Whether to include timestamp in filename. Defaults to true */
+    timestamp?: boolean;
+}
+interface TableExportOptions<T> {
+    /** Column definitions for the table */
+    columns: Column<T>[];
+    /** Data rows to export */
+    data: T[];
+    /** Export metadata */
+    metadata?: TableExportMetadata;
+}
 /**
- * Format as Watts
- */
-declare const toWatts: (value: number | null | undefined, decimals?: number) => string | null;
-/**
- * Format as kilowatts
- */
-declare const toKilowatts: (value: number | null | undefined, decimals?: number) => string | null;
-/**
- * Format as megawatts
- */
-declare const toMegawatts: (value: number | null | undefined, decimals?: number) => string | null;
-/**
- * Format as gigawatts
+ * Export table data as CSV
+ *
+ * @param options - Export configuration
+ * @returns Promise that resolves when export is complete
+ *
+ * @example
+ * ```typescript
+ * await exportTableAsCSV({
+ *   columns: tableColumns,
+ *   data: tableData,
+ *   metadata: {
+ *     filename: "devices-export",
+ *     timestamp: true
+ *   }
+ * });
+ * ```
  */
-declare const toGigawatts: (value: number | null | undefined, decimals?: number) => string | null;
+declare function exportTableAsCSV<T>(options: TableExportOptions<T>): Promise<void>;
 /**
- * Auto-scale power to the most appropriate unit
+ * Prepare table data for export (without triggering download)
+ * Useful for server-side export where you need the transformed data
+ *
+ * @param options - Export configuration
+ * @returns Array of row objects ready for CSV generation
  */
-declare const autoScalePower: (value: number | null | undefined, decimals?: number) => string | null;
+declare function prepareTableDataForExport<T>(options: Omit<TableExportOptions<T>, "metadata">): Record<string, string | number | boolean>[];
 /**
- * Format power according to PowerFormat specification
+ * Get column headers for export
+ * Useful for generating CSV headers on the server
  */
-declare const formatPower: (value: FieldValue, format: PowerFormat) => FormattedValue;
-declare const toW: (value: number | null | undefined, decimals?: number) => string | null;
-declare const toKW: (value: number | null | undefined, decimals?: number) => string | null;
-declare const toMW: (value: number | null | undefined, decimals?: number) => string | null;
-declare const toGW: (value: number | null | undefined, decimals?: number) => string | null;
+declare function getExportHeaders<T>(columns: Column<T>[]): string[];
 
+interface UseTableExportOptions<T> {
+    /** Column definitions for the table */
+    columns: Column<T>[];
+    /** Data rows to export */
+    data: T[];
+    /** Export metadata */
+    metadata?: TableExportMetadata;
+}
+interface UseTableExportReturn {
+    /** Trigger CSV export of the table data */
+    exportCSV: () => Promise<void>;
+    /** Whether export is available (has data and exportable columns) */
+    canExport: boolean;
+}
 /**
- * FormatRegistry - A singleton pattern for managing formatters
- * Allows registration and retrieval of formatting functions by key
+ * 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.
+ *
+ * @param options - Configuration for table export
+ * @returns Object with export function and status
+ *
+ * @example
+ * ```tsx
+ * const { exportCSV, canExport } = useTableExport({
+ *   columns: deviceColumns,
+ *   data: devices,
+ *   metadata: {
+ *     filename: "devices",
+ *     timestamp: true
+ *   }
+ * });
+ *
+ * // In your DataControls actions
+ * <DataControls
+ *   actions={{
+ *     items: [
+ *       {
+ *         id: "export",
+ *         label: "Export CSV",
+ *         icon: "Export",
+ *         onClick: exportCSV,
+ *         disabled: !canExport
+ *       }
+ *     ]
+ *   }}
+ * />
+ * ```
  */
+declare function useTableExport<T>({ columns, data, metadata }: UseTableExportOptions<T>): UseTableExportReturn;
 
-declare class FormatRegistryClass {
-    private formatters;
+type SortDirection = "asc" | "desc";
+type CellAlignment = "left" | "center" | "right";
+type TableDensity = "compact" | "default" | "relaxed";
+type CellEmphasis = "strong" | "high" | "normal" | "low";
+type LinkBehavior = "none" | "hover" | "visible";
+type TableLayout = "auto" | "fixed" | "responsive";
+type TableWidth = "full" | "auto" | "contained";
+type MobileRenderer = "auto" | "cards" | "custom" | "none";
+type MobileBreakpoint = "sm" | "md" | "lg" | "xl";
+interface SortConfig {
+    columnId: string;
+    direction: SortDirection;
+}
+interface CellContext {
+    isLoading: boolean;
+    isSelected?: boolean;
+    isHovered?: boolean;
+    rowIndex: number;
+    columnIndex: number;
+    density: TableDensity;
+}
+interface CellComponentProps<T = any> {
+    value: any;
+    row: T;
+    context: CellContext;
+    [key: string]: any;
+}
+type CellComponent<T = any> = ComponentType<CellComponentProps<T>>;
+interface MobileConfig {
+    priority?: 1 | 2 | 3;
+    format?: "primary" | "secondary" | "badge" | "inline";
+    label?: boolean;
+    icon?: string;
+}
+interface Column<T> {
+    id: string;
+    label: string;
+    accessor?: keyof T | ((row: T) => any);
+    align?: CellAlignment;
+    width?: string | number;
+    minWidth?: string | number;
+    maxWidth?: string | number;
+    flex?: number;
+    cell?: CellComponent<T>;
+    cellProps?: Record<string, any> | ((value: any, row: T) => Record<string, any>);
+    render?: (value: any, row: T, context: CellContext) => ReactNode;
+    sortable?: boolean;
     /**
-     * Register a new formatter
-     * @param key - Unique identifier for the formatter
-     * @param formatter - The formatting function
+     * Whether this column can be reordered via drag-and-drop.
+     * Defaults to true. Set to false to lock a column in place (e.g., sticky first column).
      */
-    register(key: string, formatter: FormatterFunction): void;
+    reorderable?: boolean;
+    noCellPadding?: boolean;
+    mobile?: MobileConfig | false;
+    popover?: string | ((value: unknown, row: T) => ReactNode) | {
+        content: string | ((value: unknown, row: T) => ReactNode);
+        placement?: "top" | "bottom" | "left" | "right";
+        showArrow?: boolean;
+        trigger?: "hover" | "click";
+    };
+    /** Label to use for this column in CSV export headers. Falls back to `label` if not provided. */
+    exportLabel?: string;
     /**
-     * Format a value using a registered formatter
-     * @param key - The formatter key
-     * @param value - The value to format
-     * @param args - Additional arguments to pass to the formatter
-     * @returns The formatted value or null
+     * Custom function to transform the cell value for export.
+     * If not provided, uses the raw accessor value converted to string.
+     * @param value - The raw cell value from the accessor
+     * @param row - The full row data
+     * @returns The value to export (will be converted to string)
      */
-    format(key: string, value: FieldValue, ...args: unknown[]): FormattedValue;
+    exportValue?: (value: unknown, row: T) => string | number | boolean | null;
     /**
-     * Check if a formatter is registered
-     * @param key - The formatter key
-     * @returns True if the formatter exists
+     * Whether to include this column in CSV exports.
+     * Defaults to true. Set to false to exclude columns like action buttons.
      */
-    has(key: string): boolean;
+    exportable?: boolean;
+}
+interface DataTableProps<T> {
+    columns: Column<T>[];
+    data: T[];
+    className?: string;
+    density?: TableDensity;
+    width?: TableWidth;
+    height?: string | number;
+    maxHeight?: string | number;
+    layout?: TableLayout;
+    mobileRenderer?: MobileRenderer;
+    customMobileRowRender?: (row: T, index: number) => ReactNode;
+    mobileBreakpoint?: MobileBreakpoint;
+    isLoading?: boolean;
+    loadingState?: LoadingState;
+    loadingRowCount?: number;
+    onLoadMore?: () => void | Promise<void>;
+    hasMore?: boolean;
+    enableVirtualization?: boolean;
+    estimatedRowHeight?: number;
+    loadingIndicator?: ReactNode;
+    stickyHeader?: boolean;
+    /** Make the first column sticky on horizontal scroll */
+    stickyFirstColumn?: boolean;
+    onRowClick?: (row: T) => void;
+    getRowId?: (row: T) => string;
+    hideHeader?: boolean;
+    /** Controlled sort configuration - when provided, DataTable becomes controlled */
+    sortConfig?: SortConfig | null;
+    onSort?: (sortConfig: SortConfig | null) => void;
+    "aria-label"?: string;
     /**
-     * Get all registered formatter keys
-     * @returns Array of formatter keys
+     * Enable drag-and-drop column reordering (like Notion tables).
+     * When enabled, users can drag column headers to reorder columns.
      */
-    keys(): string[];
+    enableColumnReorder?: boolean;
     /**
-     * Remove a formatter
-     * @param key - The formatter key to remove
+     * Controlled column order - array of column IDs in display order.
+     * When provided, DataTable uses this order instead of the columns array order.
+     * Use with onColumnOrderChange for controlled behavior.
      */
-    unregister(key: string): void;
+    columnOrder?: string[];
     /**
-     * Clear all registered formatters
+     * Callback fired when column order changes via drag-and-drop.
+     * Receives the new array of column IDs in their new order.
      */
-    clear(): void;
+    onColumnOrderChange?: (columnOrder: string[]) => void;
 }
-declare const FormatRegistry: FormatRegistryClass;
 
+interface ContactMetaDisplayProps {
+    /** First name */
+    firstName: string;
+    /** Last name */
+    lastName: string;
+    /** Email address (optional) */
+    email?: string;
+    /** Avatar image URL (optional) */
+    avatarUrl?: string;
+    /** Layout variant - stacked (vertical) or inline (horizontal) */
+    layout?: "stacked" | "inline";
+    /** Size variant */
+    size?: "xs" | "sm" | "md" | "lg";
+    /** Link to contact detail page (optional) */
+    href?: string;
+    /** Custom link component (e.g., Next.js Link) */
+    LinkComponent?: LinkComponentType;
+    /** Link variant for the name */
+    linkVariant?: "primary" | "secondary" | "muted" | "unstyled" | "default" | "brand";
+    /** Text emphasis level - "strong"/"high" for bold, "normal" for regular, "low" for muted */
+    emphasis?: CellEmphasis;
+    /** Show email address (only for stacked layout) */
+    showEmail?: boolean;
+    /** Badge element to display next to the name (e.g., Owner, Admin badge) */
+    badge?: React.ReactNode;
+    /** Avatar shape (default: "square") */
+    avatarShape?: "circle" | "square";
+    /** Loading state */
+    isLoading?: boolean;
+    /** Additional classes */
+    className?: string;
+    /**
+     * Entity identifier for PII masking (e.g., "contact:ctc_abc123")
+     * When provided, adds data-pii-* attributes for the Curtain extension
+     */
+    piiEntity?: string;
+}
 /**
- * Electrical resistance formatting utilities
+ * ContactMetaDisplay
+ *
+ * Reusable component for displaying contact information with avatar.
+ * Supports stacked and inline layouts with size variants and optional linking.
+ *
+ * **Stacked layout**: Avatar, name above, optional email below
+ * **Inline layout**: Avatar + name only (horizontal)
+ *
+ * Use this component directly in cards, lists, or other layouts.
+ * For DataTable cells, use ContactMetaCell which wraps this component.
+ *
+ * @example
+ * ```tsx
+ * // Stacked layout (default)
+ * <ContactMetaDisplay
+ *   firstName="John"
+ *   lastName="Doe"
+ *   email="john@example.com"
+ *   layout="stacked"
+ *   size="md"
+ *   showEmail
+ *   href="/contacts/123"
+ * />
+ *
+ * // Inline layout
+ * <ContactMetaDisplay
+ *   firstName="John"
+ *   lastName="Doe"
+ *   layout="inline"
+ *   size="sm"
+ *   href="/contacts/123"
+ * />
+ * ```
  */
+declare function ContactMetaDisplay({ firstName, lastName, email, avatarUrl, layout, size, href, LinkComponent, linkVariant, emphasis, showEmail, badge, avatarShape, isLoading, className, piiEntity, }: ContactMetaDisplayProps): react_jsx_runtime.JSX.Element;
 
 /**
- * Format as milliohms
- */
-declare const toMilliohms: (value: number | null | undefined, decimals?: number) => string | null;
-/**
- * Format as ohms
- */
-declare const toOhms: (value: number | null | undefined, decimals?: number) => string | null;
-/**
- * Format as kilohms
- */
-declare const toKilohms: (value: number | null | undefined, decimals?: number) => string | null;
-/**
- * Format as megohms
- */
-declare const toMegohms: (value: number | null | undefined, decimals?: number) => string | null;
-/**
- * Auto-scale resistance to the most appropriate unit
- */
-declare const autoScaleResistance: (value: number | null | undefined, decimals?: number) => string | null;
-/**
- * Format resistance according to ResistanceFormat specification
+ * ContainerQueryProvider — measures its own width via ResizeObserver and
+ * provides breakpoint state to all descendant blocks via context.
+ *
+ * Wrap block previews (or board surfaces) in this provider so blocks that
+ * use `useContainerBreakpoint` respond to their actual render width, not
+ * the browser viewport.
+ *
+ * Renders a transparent div wrapper — apply className to control layout.
  */
-declare const formatResistance: (value: FieldValue, format: ResistanceFormat) => FormattedValue;
+declare function ContainerQueryProvider({ children, className }: {
+    children: React.ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+interface CopyToClipboardProps {
+    /**
+     * The value to copy to clipboard. If not provided, will use the text content of children
+     */
+    value?: string;
+    /**
+     * The content to display
+     */
+    children: React__default.ReactNode;
+    /**
+     * Optional className for the container
+     */
+    className?: string;
+    /**
+     * Size of the copy button, defaults to "sm"
+     */
+    size?: "sm" | "md";
+    /**
+     * Position of the copy icon relative to children, defaults to "right"
+     */
+    iconPosition?: "left" | "right";
+}
+declare function CopyToClipboard({ value, children, className, size, iconPosition, }: CopyToClipboardProps): react_jsx_runtime.JSX.Element;
 
 /**
- * Temperature formatting utilities
+ * Boolean formatting utilities
  */
 
 /**
- * Convert temperature unit string to symbol
+ * Format boolean value with custom text
  */
-declare const temperatureStringToSymbol: (unit: TemperatureUnitString) => TemperatureUnit;
+declare const toBoolean: (value: boolean | null | undefined, trueText?: string, falseText?: string) => string | null;
 /**
- * Format as Fahrenheit
+ * Format boolean as enabled/disabled
  */
-declare const toFahrenheit: (value: number | null | undefined, decimals?: number) => string | null;
+declare const toEnabledDisabled: (value: boolean | null | undefined) => string | null;
 /**
- * Format as Celsius
+ * Format boolean as on/off
  */
-declare const toCelsius: (value: number | null | undefined, fromFahrenheit?: boolean, decimals?: number) => string | null;
+declare const toOnOff: (value: boolean | null | undefined) => string | null;
 /**
- * Format as Kelvin
+ * Format boolean as active/inactive
  */
-declare const toKelvin: (value: number | null | undefined, fromFahrenheit?: boolean, decimals?: number) => string | null;
+declare const toActiveInactive: (value: boolean | null | undefined) => string | null;
 /**
- * Convert Celsius to Fahrenheit
+ * Format boolean as true/false
  */
-declare const celsiusToFahrenheit: (celsius: number) => number;
+declare const toTrueFalse: (value: boolean | null | undefined) => string | null;
 /**
- * Convert Fahrenheit to Celsius
+ * Format boolean as checkmark/cross
  */
-declare const fahrenheitToCelsius: (fahrenheit: number) => number;
+declare const toCheckmark: (value: boolean | null | undefined) => string | null;
 /**
- * Convert Celsius to Kelvin
+ * Parse various truthy/falsy values to boolean
  */
-declare const celsiusToKelvin: (celsius: number) => number;
+declare const parseBoolean: (value: FieldValue) => boolean | null;
 /**
- * Convert Kelvin to Celsius
+ * Format boolean according to BooleanFormat specification
  */
-declare const kelvinToCelsius: (kelvin: number) => number;
+declare const formatBoolean: (value: FieldValue, format: BooleanFormat) => FormattedValue;
+
 /**
- * Convert Fahrenheit to Kelvin
+ * Capacity formatting utilities for batteries and energy storage
+ *
+ * Domain-specific formatters for energy capacity (kWh) and power ratings (kW).
+ * Auto-scales to appropriate units (MWh, MW for large values).
  */
-declare const fahrenheitToKelvin: (fahrenheit: number) => number;
 /**
- * Convert Kelvin to Fahrenheit
+ * Format battery capacity (kWh)
+ *
+ * @param value - Capacity in kWh
+ * @param decimals - Number of decimal places (default: 1)
+ * @returns Formatted capacity string or null
+ *
+ * @example
+ * ```typescript
+ * formatCapacity(13.5); // "13.5 kWh"
+ * formatCapacity(1500); // "1.5 MWh"
+ * formatCapacity(null); // null
+ * ```
  */
-declare const kelvinToFahrenheit: (kelvin: number) => number;
+declare function formatCapacity(value: number | null | undefined, decimals?: number): string | null;
 /**
- * Format temperature with specified unit
+ * Format power rating (kW)
+ *
+ * @param value - Power rating in kW
+ * @param decimals - Number of decimal places (default: 1)
+ * @returns Formatted power rating string or null
+ *
+ * @example
+ * ```typescript
+ * formatPowerRating(5.2); // "5.2 kW"
+ * formatPowerRating(2500); // "2.5 MW"
+ * formatPowerRating(null); // null
+ * ```
  */
-declare const toTemperature: (value: number | null | undefined, unit?: TemperatureUnit | TemperatureUnitString, decimals?: number) => string | null;
+declare function formatPowerRating(value: number | null | undefined, decimals?: number): string | null;
+
 /**
- * Format temperature according to TemperatureFormat specification
+ * Shared CSV export helpers for unit-bearing FieldFormats.
+ *
+ * CSV columns need one unit for the whole column, not per-row auto-scaling. The
+ * on-screen display can happily render "12 kV" one row and "500 mV" the next
+ * because a human reads them in context, but in a spreadsheet that mixes
+ * magnitudes in a single column and makes the data unusable.
+ *
+ * These helpers pick a stable column-wide unit for a given FieldFormat and
+ * return the bare number that matches that unit:
+ *
+ *   - `csvUnitFor(format)`   → the unit string to show in the column header,
+ *     or null when the format has no meaningful unit (text, number, date, …).
+ *   - `csvValueFor(raw, format)` → the bare-number string for a cell in that
+ *     column. Returns null for non-numeric formats (caller falls back to the
+ *     regular display formatter), and "" when the display would be blank
+ *     (hideWhenNull / hideWhenZero / null value).
+ *
+ * Consumers:
+ *   - `apps/dashboard/components/Explorer/tables/deviceFieldExport.ts` (Explore CSV)
+ *   - `packages/edges/src/utils/chartExport.ts` (chart CSV export)
  */
-declare const formatTemperature: (value: FieldValue, format: TemperatureFormat) => FormattedValue;
 
 /**
- * Text formatting utilities
+ * Pick the CSV column unit for a FieldFormat.
+ *
+ * Rules:
+ * - Explicit `unit` on the format wins.
+ * - Otherwise fall back to the format's canonical base unit
+ *   (`DEFAULT_BASE_UNIT` lookup) so every row in the column shares one unit
+ *   even if the on-screen display would auto-scale.
+ * - Energy honours `sourceUnit` (e.g. meter consumption is stored in kWh) as
+ *   the natural stable unit when neither `unit` nor a base fallback would fit.
+ * - Temperature symbols are normalised from `"C"`/`"CELSIUS"` etc. to `"°C"`.
+ * - Formats with no meaningful unit (text, number, date, boolean, currency,
+ *   phone, custom) return null.
  */
-
+declare function csvUnitFor(format: FieldFormat | undefined | null): string | null;
 /**
- * Convert text to uppercase
+ * Convert a raw value to a bare-number CSV string in the same unit
+ * `csvUnitFor` reports.
+ *
+ * Returns:
+ *  - `null` when the format is non-numeric (caller falls back to the display
+ *    formatter, e.g. text/date/enum).
+ *  - `""` when the display would suppress the value (hideWhenNull / hideWhenZero).
+ *  - a bare number string otherwise, with the trailing unit stripped so the
+ *    cell can be summed / charted in the spreadsheet.
  */
-declare const toUpperCase: (text: string | null | undefined) => string;
+declare function csvValueFor(raw: unknown, format: FieldFormat): string | null;
+
 /**
- * Convert text to lowercase
+ * Electrical current formatting utilities (flow of electric charge)
  */
-declare const toLowerCase: (text: string | null | undefined) => string;
+
 /**
- * Convert text to sentence case (first letter capitalized, rest lowercase).
- *
- * @param text - Text to convert
- * @returns Sentence-cased text
- *
- * @example
- * ```typescript
- * toSentenceCase("HELLO WORLD"); // "Hello world"
- * toSentenceCase("hello world"); // "Hello world"
- * ```
+ * Format as milliamps
  */
-declare const toSentenceCase: (text: string | null | undefined) => string;
+declare const toMilliamps: (value: number | null | undefined, decimals?: number) => string | null;
 /**
- * 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).
- *
- * @param text - Text to convert
- * @returns Title-cased text
- *
- * @example
- * ```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"
- * ```
+ * Format as amperes
  */
-declare const toTitleCase: (text: string | null | undefined) => string;
+declare const toAmps: (value: number | null | undefined, decimals?: number) => string | null;
 /**
- * Capitalize first letter of each word
+ * Format as kiloamps (rarely used but included for completeness)
  */
-declare const capitalize: (text: string | null | undefined) => string;
+declare const toKiloamps: (value: number | null | undefined, decimals?: number) => string | null;
 /**
- * Uppercase first letter only
+ * Auto-scale current to the most appropriate unit
  */
-declare const ucFirst: (text: string | null | undefined) => string;
+declare const autoScaleCurrent: (value: number | null | undefined, decimals?: number) => string | null;
 /**
- * Convert camelCase to words
+ * Format current according to CurrentFormat specification
  */
-declare const camelCaseToWords: (text: string | null | undefined) => string;
+declare const formatCurrent: (value: FieldValue, format: CurrentFormat) => FormattedValue;
+declare const toMA: (value: number | null | undefined, decimals?: number) => string | null;
+declare const toA: (value: number | null | undefined, decimals?: number) => string | null;
+declare const toKA: (value: number | null | undefined, decimals?: number) => string | null;
+
 /**
- * Convert snake_case to words
+ * Date formatting utilities using Luxon
  */
-declare const snakeCaseToWords: (text: string | null | undefined) => string;
+
 /**
- * Convert enum-style text to sentence case
+ * Format date to a localized string with optional time and timezone.
+ *
+ * @param value - Date value (string, Date object, or timestamp)
+ * @param showTime - Whether to include time in the output (default: false)
+ * @param timezone - Optional timezone for display (e.g., "America/New_York")
+ * @returns Formatted date string or null
+ *
+ * @example
+ * ```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"
+ * ```
  */
-declare const enumToSentenceCase: (text: string | null | undefined) => string;
+declare const toDateString: (value: string | Date | number | null | undefined, showTime?: boolean, timezone?: string) => string | null;
 /**
- * Truncate text in the middle
+ * Format date to relative time (e.g., "2 hours ago", "in 3 days").
+ * Automatically chooses the most appropriate unit.
+ *
+ * @param value - Date value (string, Date object, or timestamp)
+ * @returns Relative time string or null
+ *
+ * @example
+ * ```typescript
+ * toRelativeTime(new Date(Date.now() - 3600000)); // "1 hour ago"
+ * toRelativeTime(new Date(Date.now() + 86400000)); // "in 1 day"
+ * toRelativeTime(new Date()); // "now"
+ * ```
  */
-declare const truncateMiddle: (value: string | null | undefined, length?: number) => string;
+declare const toRelativeTime: (value: string | Date | number | null | undefined) => string | null;
 /**
- * Truncate text at the start
+ * Format date with full date and time including weekday
  */
-declare const truncateStart: (value: string | null | undefined, length?: number) => string;
+declare const toFullDateTime: (value: string | Date | number | null | undefined, timezone?: string) => string | null;
 /**
- * Truncate text at the end
+ * Format date to ISO string
  */
-declare const truncateEnd: (value: string | null | undefined, length?: number, ellipsis?: string) => string;
+declare const toISOString: (value: string | Date | number | null | undefined) => string | null;
 /**
- * Mask sensitive text (e.g., secrets, API keys)
+ * Format date with custom format string
  */
-declare const toSecret: (value: string | null | undefined) => string;
+declare const toCustomDateFormat: (value: string | Date | number | null | undefined, format: string, timezone?: string) => string | null;
 /**
- * Format text according to TextFormat specification
+ * Get formatted date parts
  */
-declare const formatText: (value: FieldValue, format: TextFormat) => FormattedValue;
-
+declare const getDateParts: (value: string | Date | number | null | undefined) => {
+    year: number;
+    month: number;
+    day: number;
+    weekday: number;
+    hour: number;
+    minute: number;
+    second: number;
+    millisecond: number;
+    weekdayShort: string | null;
+    weekdayLong: string | null;
+    monthShort: string | null;
+    monthLong: string | null;
+} | null;
 /**
- * Voltage formatting utilities (electrical potential)
+ * Format date according to DateFormat specification
  */
+declare const formatDate: (value: FieldValue, format: DateFormat) => FormattedValue;
 
 /**
- * Format as millivolts
+ * Distance and length formatting utilities
  */
-declare const toMillivolts: (value: number | null | undefined, decimals?: number) => string | null;
+
 /**
- * Format as volts
+ * Format as meters
  */
-declare const toVolts: (value: number | null | undefined, decimals?: number) => string | null;
+declare const toMeters: (value: number | null | undefined, decimals?: number) => string | null;
 /**
- * Format as kilovolts
+ * Format as centimeters
  */
-declare const toKilovolts: (value: number | null | undefined, decimals?: number) => string | null;
+declare const toCentimeters: (value: number | null | undefined, decimals?: number) => string | null;
 /**
- * Auto-scale voltage to the most appropriate unit
+ * Format as millimeters
  */
-declare const autoScaleVoltage: (value: number | null | undefined, decimals?: number) => string | null;
+declare const toMillimeters: (value: number | null | undefined, decimals?: number) => string | null;
 /**
- * Format voltage according to VoltageFormat specification
+ * Format as kilometers
  */
-declare const formatVoltage: (value: FieldValue, format: VoltageFormat) => FormattedValue;
-declare const toMV: (value: number | null | undefined, decimals?: number) => string | null;
-declare const toV: (value: number | null | undefined, decimals?: number) => string | null;
-declare const toKV: (value: number | null | undefined, decimals?: number) => string | null;
-
+declare const toKilometers: (value: number | null | undefined, decimals?: number) => string | null;
 /**
- * Comprehensive formatting utilities for the Edges design system
- *
- * This module provides a unified formatting system with support for:
- * - Text formatting (case conversion, truncation, etc.)
- * - Number formatting (decimals, thousands separators, compact notation)
- * - Currency formatting (multiple currencies and display options)
- * - Date formatting (relative time, custom formats, timezones)
- * - Boolean formatting (custom true/false text)
- * - Energy units (Wh, kWh, MWh, GWh with auto-scaling)
- * - Temperature units (Celsius, Fahrenheit, Kelvin)
- * - Distance units (meters, kilometers, miles, feet)
- * - Phone number formatting (US and international)
- * - Custom formatters via the FormatRegistry
+ * Format as feet
  */
-
+declare const toFeet: (value: number | null | undefined, decimals?: number) => string | null;
 /**
- * Convenience function to create a format object
- *
- * @example
- * ```typescript
- * const currencyFormat = createFormat("currency", { currency: "EUR" });
- * const dateFormat = createFormat("date", { relative: true });
- * ```
+ * Format as inches
  */
-declare const createFormat: <T extends FieldFormat["type"]>(type: T, options?: Omit<Extract<FieldFormat, {
-    type: T;
-}>, "type">) => Extract<FieldFormat, {
-    type: T;
-}>;
-
+declare const toInches: (value: number | null | undefined, decimals?: number) => string | null;
 /**
- * Semantic typography role classes generated by @texturehq/edges-tokens.
- *
- * These classes apply the full type role — family, size, line-height,
- * weight, and letter-spacing. Pair them with explicit semantic text-color
- * utilities at the callsite.
+ * Format as miles
  */
-declare const typographyRole: {
-    readonly displayXl: "text-display-xl";
-    readonly displayLg: "text-display-lg";
-    readonly displayMd: "text-display-md";
-    readonly displaySm: "text-display-sm";
-    readonly headingXl: "text-heading-xl";
-    readonly headingLg: "text-heading-lg";
-    readonly headingMd: "text-heading-md";
-    readonly headingSm: "text-heading-sm";
-    readonly bodyLg: "text-body-lg";
-    readonly bodyMd: "text-body-md";
-    readonly bodySm: "text-body-sm";
-    readonly labelLg: "text-label-lg";
-    readonly labelMd: "text-label-md";
-    readonly labelSm: "text-label-sm";
-    readonly code: "text-code";
-    readonly agent: "text-agent";
-};
-type TypographyRole = keyof typeof typographyRole;
+declare const toMiles: (value: number | null | undefined, decimals?: number) => string | null;
 /**
- * Merge a semantic typography role with semantic color utilities and any
- * component-specific layout classes. This keeps components from hand-composing
- * `text-sm font-medium leading-*` whenever a role exists.
+ * Format as yards
  */
-declare function typeRole(role: TypographyRole, ...classNames: Array<string | false | null | undefined>): string;
-
+declare const toYards: (value: number | null | undefined, decimals?: number) => string | null;
 /**
- * Factory for Texture-authored icons that are NOT available in Phosphor but
- * must plug into the Edges `<Icon name="…" />` component with the exact same
- * API (size / color / weight / className / mirrored / aria-*).
- *
- * Each custom icon is authored as a Phosphor-compatible component:
- *  - 256×256 viewBox (matches Phosphor's optical grid so custom + stock icons
- *    sit at the same scale)
- *  - `fill={color}` defaulting to `currentColor` (inherits text color like Phosphor)
- *  - `size` drives both width and height
- *
- * `weight` is accepted for API parity but is a no-op for single-weight custom
- * glyphs. Author the `children` against the 256×256 grid.
- *
- * @example
- * ```tsx
- * export const TextureRecloserIcon = createTextureIcon(
- *   "TextureRecloser",
- *   <path d="M48 128 ..." />,
- * );
- * ```
+ * Format as nautical miles
  */
-declare function createTextureIcon(displayName: string, children: ReactNode): Icon;
-
-type ActivityFeedVariant = "timeline" | "stacked";
-type ActivityFeedSize = "md" | "sm";
-type ActivityItemTone = "neutral" | "brand" | "success" | "warning" | "danger" | "info";
-type ActivityItemSurface = "minimal" | "subtle" | "solid";
-interface ActivityFeedProps<T = unknown> extends HTMLAttributes<HTMLDivElement> {
-    /** Visual style for the feed */
-    variant?: ActivityFeedVariant;
-    /** Density of the feed */
-    size?: ActivityFeedSize;
-    /** Data-driven mode: array of items to render */
-    items?: T[];
-    /** Render function for each item (when using items array) */
-    renderItem?: (item: T, index: number) => ReactNode;
-    /** Children mode: manual ActivityItem components */
-    children?: ReactNode;
-    /** Loading & error UI gates */
-    isLoading?: boolean;
-    /** Explicit loading state override (takes precedence over auto-detection) */
-    loadingState?: LoadingState;
-    error?: string | null;
-    /** Custom skeleton for initial loading state - matches your activity item structure */
-    renderLoadingSkeleton?: () => ReactNode;
-    /** Number of skeleton items to show during initial loading */
-    loadingSkeletonCount?: number;
-    /** Empty state */
-    emptyMessage?: string;
-    /** Infinite scroll */
-    onLoadMore?: () => void | Promise<void>;
-    hasMore?: boolean;
-    /** Enable virtualization (default: true for 100+ items) */
-    enableVirtualization?: boolean;
-    /** Estimated size of each item in pixels */
-    estimatedItemSize?: number;
-    /** Custom loading indicator for loading-more state */
-    loadingIndicator?: ReactNode;
-    /** Height/maxHeight for scroll container */
-    height?: string | number;
-    maxHeight?: string | number;
-}
-declare function ActivityFeed<T = unknown>({ variant, size, className, children, items, renderItem, isLoading, loadingState, error, renderLoadingSkeleton, loadingSkeletonCount, emptyMessage, onLoadMore, hasMore, enableVirtualization, estimatedItemSize, loadingIndicator, height, maxHeight, ...rest }: ActivityFeedProps<T>): react_jsx_runtime.JSX.Element;
-declare namespace ActivityFeed {
-    var displayName: string;
-}
-interface ActivityFeedGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
-    /** Heading shown above the grouped items */
-    title?: ReactNode;
-    /** Optional description that provides additional context */
-    description?: ReactNode;
-    /** Optional trailing actions for the group */
-    actions?: ReactNode;
-    /** Group content */
-    children: ReactNode;
-}
-interface ActivityFeedGroupInternalProps extends ActivityFeedGroupProps {
-    __isLastGroup?: boolean;
-    __isFirstGroup?: boolean;
-}
-declare function ActivityFeedGroup(props: ActivityFeedGroupInternalProps): react_jsx_runtime.JSX.Element;
-declare namespace ActivityFeedGroup {
-    var displayName: string;
-}
-interface ActivityItemProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
-    /** Primary label describing the activity */
-    title: ReactNode;
-    /** Supplementary copy beneath the title */
-    description?: ReactNode;
-    /** Timestamp or contextual information shown opposite the title */
-    timestamp?: ReactNode;
-    /** Additional metadata shown below the description */
-    meta?: ReactNode;
-    /** Supplementary media such as attachments, badges, or chips */
-    media?: ReactNode;
-    /** Optional action buttons or controls */
-    actions?: ReactNode;
-    /** Visual element displayed inside the indicator */
-    visual?: ReactNode;
-    /** Shortcut for displaying an icon in the indicator */
-    icon?: ComponentProps<typeof Icon$1>["name"];
-    /** Icon weight for the indicator icon */
-    iconWeight?: ComponentProps<typeof Icon$1>["weight"];
-    /** Visual tone applied to the indicator */
-    tone?: ActivityItemTone;
-    /** Surface treatment for the content */
-    surface?: ActivityItemSurface;
-    /** Highlights the item using the tone color */
-    isHighlighted?: boolean;
-    /** Whether to render a connector line for timeline layouts */
-    showConnector?: boolean;
-    /** Whether to render the incoming connector line from previous item (internal) */
-    showIncomingConnector?: boolean;
-    /** Hides the indicator entirely */
-    hideIndicator?: boolean;
-    /** Marks the item as interactive, enabling keyboard semantics */
-    interactive?: boolean;
-}
-declare function ActivityItem(props: ActivityItemProps): react_jsx_runtime.JSX.Element;
-declare namespace ActivityItem {
-    var displayName: string;
-}
-
-interface AlertProps {
-    /**
-     * Whether the alert is open
-     */
-    isOpen: boolean;
-    /**
-     * Callback when the alert is closed
-     */
-    onClose: () => void;
-    /**
-     * Alert title
-     */
-    title: string;
-    /**
-     * Alert message/content
-     */
-    message: React__default.ReactNode;
-    /**
-     * Label for the confirm button
-     * @default "OK"
-     */
-    confirmLabel?: string;
-    /**
-     * Variant for the confirm button
-     * @default "primary"
-     */
-    confirmVariant?: DialogAction["variant"];
-    /**
-     * Maximum width of the alert dialog
-     * @default "400px"
-     */
-    maxWidth?: string;
-    /**
-     * Minimum width of the alert dialog (desktop only)
-     * @default "320px"
-     */
-    minWidth?: string;
-}
+declare const toNauticalMiles: (value: number | null | undefined, decimals?: number) => string | null;
 /**
- * Alert
- *
- * A simple alert dialog with a single action button.
- * Use for informational messages that require acknowledgment.
+ * Conversion utilities
  */
-declare function Alert({ isOpen, onClose, title, message, confirmLabel, confirmVariant, maxWidth, minWidth, }: AlertProps): react_jsx_runtime.JSX.Element;
-
-type BannerVariant = "info" | "success" | "warning" | "error" | "discovery";
-type BannerAppearance = "subtle" | "bold";
-interface BannerAction {
-    /** Label for the action button */
-    label: string;
-    /** Callback when the action is triggered */
-    onPress: () => void;
-    /** Whether to render as a link-style button */
-    asLink?: boolean;
-}
-interface BannerProps {
-    /** Semantic variant of the banner */
-    variant?: BannerVariant;
-    /** Visual appearance style */
-    appearance?: BannerAppearance;
-    /** The main message/title to display */
-    title?: ReactNode;
-    /** Additional description or content */
-    children?: ReactNode;
-    /** Whether the banner can be dismissed */
-    dismissible?: boolean;
-    /** Callback when the banner is dismissed */
-    onDismiss?: () => void;
-    /** Primary action (rendered as button or link) */
-    primaryAction?: BannerAction;
-    /** Secondary action (rendered as button or link) */
-    secondaryAction?: BannerAction;
-    /** Custom icon to override default status icon */
-    icon?: ReactNode;
-    /** Hide the icon completely */
-    hideIcon?: boolean;
-    /** Additional CSS classes */
-    className?: string;
-    /** Test ID for automation */
-    testId?: string;
-}
+declare const metersToFeet: (meters: number) => number;
+declare const feetToMeters: (feet: number) => number;
+declare const milesToKilometers: (miles: number) => number;
+declare const kilometersToMiles: (km: number) => number;
+declare const feetToMiles: (feet: number) => number;
+declare const milesToFeet: (miles: number) => number;
+declare const metersToMiles: (meters: number) => number;
+declare const milesToMeters: (miles: number) => number;
+declare const yardsToMeters: (yards: number) => number;
+declare const metersToYards: (meters: number) => number;
+declare const inchesToCentimeters: (inches: number) => number;
+declare const centimetersToInches: (cm: number) => number;
 /**
- * Banner
- *
- * A prominent message component for displaying important information or system messages.
- * Can be used inline within content sections or positioned at the page level.
- *
- * Inspired by Atlassian's Section Message and Chakra UI's Alert, combining the best
- * features of both: semantic variant colors, multiple appearances, inline actions, and
- * flexible composition.
- *
- * @example
- * ```tsx
- * // Simple info banner
- * <Banner variant="info" title="New features available">
- *   Check out the latest updates to improve your workflow.
- * </Banner>
- *
- * // With actions
- * <Banner
- *   variant="warning"
- *   title="Your trial expires soon"
- *   primaryAction={{ label: "Upgrade now", onPress: () => {} }}
- *   secondaryAction={{ label: "Learn more", onPress: () => {}, asLink: true }}
- * >
- *   Upgrade to continue using premium features.
- * </Banner>
- *
- * // Bold appearance
- * <Banner
- *   variant="error"
- *   appearance="bold"
- *   title="Action required"
- *   dismissible
- *   onDismiss={() => {}}
- * >
- *   Please update your payment information.
- * </Banner>
- * ```
+ * Auto-scale distance to the most appropriate unit
  */
-declare function Banner({ variant, appearance, title, children, dismissible, onDismiss, primaryAction, secondaryAction, icon, hideIcon, className, testId, }: BannerProps): react_jsx_runtime.JSX.Element;
+declare const autoScaleDistance: (value: number | null | undefined, metric?: boolean, decimals?: number) => string | null;
+/**
+ * Format distance according to DistanceFormat specification
+ */
+declare const formatDistance: (value: FieldValue, format: DistanceFormat) => FormattedValue;
 
-interface PageBannerProps extends BannerProps {
-    /** Whether the banner is visible */
-    isOpen?: boolean;
-    /** Position relative to the navbar */
-    position?: "fixed" | "sticky";
-}
 /**
- * PageBanner
- *
- * A banner component designed for page-level announcements, positioned at the top
- * of the page below the navbar. Automatically handles enter/exit animations and
- * can be fixed or sticky positioned.
- *
- * Use this for system-wide messages, announcements, or important alerts that need
- * to be visible across the entire page.
- *
- * @example
- * ```tsx
- * <PageBanner
- *   isOpen={showBanner}
- *   variant="warning"
- *   title="Scheduled maintenance"
- *   dismissible
- *   onDismiss={() => setShowBanner(false)}
- * >
- *   Our systems will be under maintenance on Friday from 2-4 PM EST.
- * </PageBanner>
- * ```
+ * Energy formatting utilities (stored or consumed energy)
+ * For power (rate of energy), use power.ts
+ * For electrical units (voltage, current), use voltage.ts and current.ts
  */
-declare function PageBanner({ isOpen, position, className, ...bannerProps }: PageBannerProps): react_jsx_runtime.JSX.Element;
 
-type BreadcrumbItemProps = BreadcrumbProps & {
-    href?: string;
-    /**
-     * When true, adds a copy-to-clipboard button next to the current (last) breadcrumb item.
-     * The value copied is determined by `copyValue` prop, or falls back to the text content.
-     */
-    copyable?: boolean;
-    /**
-     * The value to copy when the copy button is clicked.
-     * If not provided, the text content of the breadcrumb will be used.
-     */
-    copyValue?: string;
-};
 /**
- * Breadcrumbs
- *
- * Navigation breadcrumbs that show the user's current location in the hierarchy
- * Automatically collapses middle items into an ellipsis dropdown when the container
- * width exceeds the maxWidth threshold (default: 600px)
+ * Format as Watt-hours
  */
-declare function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T> & {
-    maxWidth?: number;
-}): react_jsx_runtime.JSX.Element;
+declare const toWh: (value: number | null | undefined, decimals?: number) => string | null;
 /**
- * BreadcrumbItem
- *
- * Individual breadcrumb item with optional link
- * The last breadcrumb is automatically styled as the current page (non-interactive, bold)
- * When `copyable` is true, adds a copy-to-clipboard button next to the current (last) breadcrumb
+ * Format as kilowatt-hours
  */
-declare function BreadcrumbItem(props: BreadcrumbItemProps): react_jsx_runtime.JSX.Element;
-
+declare const tokWh: (value: number | null | undefined, decimals?: number) => string | null;
 /**
- * Calendar
- *
- * Single-date calendar primitive with Edges styling.
+ * Format as megawatt-hours
  */
-interface CalendarProps<T extends DateValue> extends Omit<CalendarProps$1<T>, "visibleDuration"> {
-    errorMessage?: string;
-}
-declare function Calendar<T extends DateValue>({ errorMessage, ...props }: CalendarProps<T>): react_jsx_runtime.JSX.Element;
-
+declare const toMWh: (value: number | null | undefined, decimals?: number) => string | null;
 /**
- * Card - Enterprise surface container component
- *
- * A flexible, composable card component following enterprise design system best practices.
- * Supports modular content sections with consistent styling and accessibility.
- *
- * Usage:
- * ```tsx
- * <Card variant="outlined" size="md">
- *   <Card.Header
- *     title="Card Title"
- *     subtitle="Optional subtitle"
- *     actions={<Button variant="ghost" icon="MoreHorizontal" />}
- *   />
- *   <Card.Media src="image.jpg" alt="Description" />
- *   <Card.Content>
- *     <p>Main content goes here</p>
- *   </Card.Content>
- *   <Card.Footer>
- *     <Button variant="primary">Action</Button>
- *   </Card.Footer>
- * </Card>
- * ```
+ * Format as gigawatt-hours
+ */
+declare const toGWh: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Pick the display unit auto-scaling would choose for a Wh magnitude.
+ */
+declare const pickEnergyUnit: (whValue: number) => EnergyUnit;
+/**
+ * Auto-scale energy to the most appropriate unit
+ */
+declare const autoScaleEnergy: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format energy according to EnergyFormat specification
+ */
+/**
+ * Multiplier from the named energy unit to Wh — the formatter's internal
+ * reference unit. Keep in sync with `EnergyUnit`.
+ */
+declare const SOURCE_UNIT_TO_WH: Record<EnergyUnit, number>;
+declare const formatEnergy: (value: FieldValue, format: EnergyFormat) => FormattedValue;
+
+/**
+ * `formatFieldValue` dispatcher — extracted from `./index.ts` into its own
+ * leaf module so downstream helpers (notably `csvUnit.ts`) can depend on the
+ * dispatcher without pulling the whole formatting barrel (and any of its
+ * transitively-imported React/PostHog side-effects) into a test setup.
+ *
+ * `./index.ts` re-exports this module so the public API is unchanged.
  */
-type CardVariant = "outlined" | "elevated" | "filled" | "ghost";
-interface CardProps {
-    variant?: CardVariant;
-    className?: string;
-    children?: React__default.ReactNode;
-    isLoading?: boolean;
-    /** Enable flex column layout so children can expand to fill space */
-    layout?: "default" | "flex";
-}
-interface CardHeaderProps {
-    title?: React__default.ReactNode;
-    subtitle?: React__default.ReactNode;
-    actions?: React__default.ReactNode;
-    className?: string;
-    isLoading?: boolean;
-}
-interface CardMediaProps {
-    src?: string;
-    alt?: string;
-    aspectRatio?: "square" | "video" | "wide" | "auto";
-    className?: string;
-    children?: React__default.ReactNode;
-    isLoading?: boolean;
-}
-interface CardContentProps {
-    className?: string;
-    children?: React__default.ReactNode;
-    isLoading?: boolean;
-    /** When true and parent Card has layout="flex", content expands to fill available space */
-    fill?: boolean;
-}
-interface CardFooterProps {
-    className?: string;
-    children?: React__default.ReactNode;
-    align?: "start" | "end" | "center" | "between";
-    isLoading?: boolean;
-}
-declare function Card({ variant, className, children, isLoading, layout }: CardProps): react_jsx_runtime.JSX.Element;
-declare namespace Card {
-    var Header: typeof CardHeader;
-    var Media: typeof CardMedia;
-    var Content: typeof CardContent;
-    var Footer: typeof CardFooter;
-}
-declare function CardHeader({ title, subtitle, actions, className, isLoading }: CardHeaderProps): react_jsx_runtime.JSX.Element | null;
-declare function CardMedia({ src, alt, aspectRatio, className, children, isLoading }: CardMediaProps): react_jsx_runtime.JSX.Element | null;
-declare function CardContent({ className, children, isLoading, fill }: CardContentProps): react_jsx_runtime.JSX.Element | null;
-declare function CardFooter({ className, children, align, isLoading }: CardFooterProps): react_jsx_runtime.JSX.Element | null;
 
-interface CarouselRootProps extends React$1.HTMLAttributes<HTMLDivElement> {
-    /** Current active page (controlled) */
-    page?: number;
-    /** Default page for uncontrolled mode */
-    defaultPage?: number;
-    /** Called when page changes */
-    onPageChange?: (page: number) => void;
-    /** Orientation of the carousel */
-    orientation?: "horizontal" | "vertical";
-    /** Whether to loop back to start/end */
-    loop?: boolean;
-    /** Enable autoplay */
-    autoplay?: boolean | {
-        delay?: number;
-    };
-    /** Autoplay delay in milliseconds */
-    autoplayDelay?: number;
-    /** Allow mouse/touch dragging */
-    allowMouseDrag?: boolean;
-    /** Spacing between slides */
-    spacing?: string;
-    /** Number of slides to show at once */
-    slidesPerView?: number;
-    /** Number of slides to scroll at once */
-    slidesPerMove?: number;
-    children: React$1.ReactNode;
-}
-interface CarouselItemProps extends React$1.HTMLAttributes<HTMLDivElement> {
-    /** Index of this item */
-    index: number;
-    children: React$1.ReactNode;
-}
-interface CarouselControlProps extends React$1.HTMLAttributes<HTMLDivElement> {
-    children: React$1.ReactNode;
-}
-interface CarouselTriggerProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
-    children?: React$1.ReactNode;
-}
-interface CarouselIndicatorProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
-    /** Index of the slide to navigate to */
-    index: number;
-    children?: React$1.ReactNode;
-}
-interface CarouselItemGroupProps extends React$1.HTMLAttributes<HTMLDivElement> {
-    children: React$1.ReactNode;
-}
 /**
- * CarouselRoot - Main carousel container with state management and navigation logic.
- * Handles page state, autoplay, looping, and drag interactions.
+ * Main formatting function that routes to the appropriate formatter based on
+ * the format type. See `./index.ts` for the fuller doc comment.
  */
-declare function CarouselRoot({ page: controlledPage, defaultPage, onPageChange, orientation, loop, autoplay, autoplayDelay, allowMouseDrag, spacing, slidesPerView, slidesPerMove, className, children, ...props }: CarouselRootProps): react_jsx_runtime.JSX.Element;
+declare const formatFieldValue: (value: FieldValue, format: FieldFormat) => FormattedValue;
+
 /**
- * CarouselItemGroup - Container for carousel items with scrolling behavior.
- * Manages scroll snap, drag interactions, and layout spacing.
+ * Number and currency formatting utilities
  */
-declare function CarouselItemGroup({ className, children, ...props }: CarouselItemGroupProps): react_jsx_runtime.JSX.Element;
+
 /**
- * Individual slide/item within the carousel.
- * Handles sizing based on slidesPerView and applies snap alignment.
+ * Check if a value is null or undefined
  */
-declare function CarouselItem({ index, className, children, ...props }: CarouselItemProps): react_jsx_runtime.JSX.Element;
+declare const isNil: (value: unknown) => value is null | undefined;
 /**
- * CarouselControl - Container for navigation controls and indicators.
- * Typically holds prev/next buttons, indicators, and autoplay controls.
+ * Format as percentage
  */
-declare function CarouselControl({ className, children, ...props }: CarouselControlProps): react_jsx_runtime.JSX.Element;
+declare const toPercentage: (value: number | null | undefined, decimals?: number) => string | null;
 /**
- * CarouselPrevTrigger - Button to navigate to the previous slide.
- * Automatically disabled when at the first slide (unless loop is enabled).
+ * Format percentage (simple wrapper for consistency with other formatters)
+ *
+ * @param value - Numeric value (0-100 range)
+ * @param precision - Number of decimal places (default: 0)
+ * @returns Formatted percentage string with % symbol
  */
-declare function CarouselPrevTrigger({ className, children, ...props }: CarouselTriggerProps): react_jsx_runtime.JSX.Element;
+declare const formatPercent: (value: number | null | undefined, precision?: number) => string;
 /**
- * CarouselNextTrigger - Button to navigate to the next slide.
- * Automatically disabled when at the last slide (unless loop is enabled).
+ * Format as integer
  */
-declare function CarouselNextTrigger({ className, children, ...props }: CarouselTriggerProps): react_jsx_runtime.JSX.Element;
+declare const toInteger: (value: number | null | undefined) => string | null;
 /**
- * CarouselIndicator - Dot indicator for a specific slide.
- * Clicking navigates to the slide at the specified index.
+ * Format as float with specified decimals
  */
-declare function CarouselIndicator({ index, className, children, ...props }: CarouselIndicatorProps): react_jsx_runtime.JSX.Element;
+declare const toFloat: (value: number | null | undefined, decimals?: number) => string | null;
 /**
- * CarouselIndicatorGroup - Container for all page indicators.
- * Automatically generates indicators for each page/slide.
+ * Format number with thousands separator
  */
-declare function CarouselIndicatorGroup({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare const toFormattedNumber: (value: number | null | undefined, decimals?: number, thousandsSeparator?: boolean) => string | null;
 /**
- * CarouselAutoplayTrigger - Toggle button for autoplay functionality.
- * Allows users to pause and resume automatic slide transitions.
+ * Format number with compact notation (1K, 1M, etc.)
  */
-declare function CarouselAutoplayTrigger({ className, children, ...props }: CarouselTriggerProps): react_jsx_runtime.JSX.Element;
+declare const toCompactNumber: (value: number | null | undefined, display?: "short" | "long") => string | null;
 /**
- * CarouselProgressText - Displays current slide position (e.g., "1 / 5").
- * Shows the current page number and total number of pages.
+ * Format number with scientific notation
  */
-declare function CarouselProgressText({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare const toScientificNotation: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format as currency
+ */
+declare const toCurrency: (value: number | null | undefined, currency?: string, options?: Partial<CurrencyFormat>) => string | null;
+/**
+ * Format number according to NumberFormat specification
+ */
+declare const formatNumber: (value: FieldValue, format: NumberFormat) => FormattedValue;
+/**
+ * Format currency according to CurrencyFormat specification
+ */
+declare const formatCurrency: (value: FieldValue, format: CurrencyFormat) => FormattedValue;
 
-type ChipVariant = "primary" | "secondary" | "info";
-type LegacyChipVariant = "default" | "brand";
-interface ChipProps {
-    /** The content to display inside the chip */
-    children: React__default.ReactNode;
-    /** Callback when the remove button is clicked */
-    onRemove?: () => void;
-    /** Size variant of the chip */
-    size?: Size | "xs";
-    /** Visual variant of the chip */
-    /**
-     * Visual treatment. Use `primary` for selected/applied chips and
-     * `secondary` for available/lower-emphasis chips. `default` and `brand` are
-     * deprecated aliases for `secondary` and `primary`, respectively.
-     */
-    variant?: ChipVariant | LegacyChipVariant;
-    /** Whether the chip can be removed (shows X button) */
-    isRemovable?: boolean;
-    /** Whether the chip is disabled */
-    isDisabled?: boolean;
-    /** Additional CSS classes */
-    className?: string;
-    /** Click handler for the chip itself (not the remove button) */
-    onClick?: () => void;
-}
 /**
- * Chip
- *
- * A compact element that represents an input, attribute, or action.
- * Can be removable with an X button and supports different variants and sizes.
+ * Phone number formatting utilities
  */
-declare function Chip({ children, onRemove, size, variant, isRemovable, isDisabled, className, onClick, }: ChipProps): react_jsx_runtime.JSX.Element;
 
-interface Item {
-    id: string;
-    name: string;
-}
-interface ChipInputFieldProps {
-    /** Field label */
-    label?: string;
-    /** Field description */
-    description?: string;
-    /** Error message to display */
-    errorMessage?: string | ((validation: ValidationResult) => string);
-    /** Size variant */
-    size?: Size;
-    /** Tooltip for the label */
-    tooltip?: string;
-    /** Whether the field is required */
-    isRequired?: boolean;
-    /** Whether the field is disabled */
-    isDisabled?: boolean;
-    /** Whether the field is invalid */
-    isInvalid?: boolean;
-    /** Validation result */
-    validationResult?: ValidationResult;
-    /** Placeholder text for the input */
-    placeholder?: string;
-    /** Selected items (array of item IDs) */
-    selectedItems?: string[];
-    /** Callback when selected items change */
-    onItemsChange?: (items: string[]) => void;
-    /** Static items for autocomplete suggestions */
-    staticItems?: Item[];
-    /** Async function to fetch suggestions (alternative to staticItems) */
-    fetchSuggestions?: (query: string) => Promise<string[]>;
-    /** Custom chip variant */
-    chipVariant?: "primary" | "secondary" | "info" | "default" | "brand";
-    /** Whether to show errors */
-    showErrors?: boolean;
-    /** Additional CSS classes */
-    className?: string;
-}
 /**
- * ChipInputField
- *
- * A tags input component with autocomplete suggestions.
- * Press Enter or comma to add tags, Backspace when empty to remove last tag.
- * Supports both static items and async fetching for suggestions.
+ * Format US phone number
  */
-declare function ChipInputField({ label, description, errorMessage, size, tooltip, isRequired, isDisabled, isInvalid, validationResult, placeholder, selectedItems, onItemsChange, staticItems, fetchSuggestions, chipVariant, showErrors, className, }: ChipInputFieldProps): react_jsx_runtime.JSX.Element;
+declare const formatUSPhone: (phone: string | null | undefined) => string | null;
+/**
+ * Format international phone number
+ */
+declare const formatInternationalPhone: (phone: string | null | undefined) => string | null;
+/**
+ * Format phone number with basic formatting
+ */
+declare const formatPhoneNumber: (phone: string | null | undefined) => string | null;
+/**
+ * Format phone according to PhoneFormat specification
+ */
+declare const formatPhone: (value: FieldValue, format: PhoneFormat) => FormattedValue;
 
-type CollapseVariant = "contained" | "bordered" | "plain";
-type CollapseDensity = "comfortable" | "compact";
-interface CollapseProps extends Omit<DisclosureGroupProps, "className"> {
-    variant?: CollapseVariant;
-    density?: CollapseDensity;
-    showDividers?: boolean;
-    className?: DisclosureGroupProps["className"];
-}
 /**
- * Collapse
- *
- * A composable disclosure group built on `react-aria-components` that follows the
- * Edges design system. Supports contained, bordered, and plain variants along
- * with compact or comfortable density options.
+ * Power formatting utilities (rate of energy transfer)
  */
-declare function Collapse({ variant, density, showDividers, className, ...props }: CollapseProps): react_jsx_runtime.JSX.Element;
-interface CollapseItemProps extends Omit<DisclosureProps, "className" | "children"> {
-    className?: DisclosureProps["className"];
-    children?: React$1.ReactNode;
-}
-declare function CollapseItem({ className, children, ...props }: CollapseItemProps): react_jsx_runtime.JSX.Element;
-declare namespace CollapseItem {
-    var displayName: string;
-}
-interface CollapseHeaderProps extends Omit<ButtonProps, "children" | "slot"> {
-    title?: React$1.ReactNode;
-    description?: React$1.ReactNode;
-    startContent?: React$1.ReactNode;
-    endContent?: React$1.ReactNode;
-    indicator?: React$1.ReactNode | ((state: {
-        isExpanded: boolean;
-        isDisabled: boolean;
-    }) => React$1.ReactNode);
-    indicatorPosition?: "start" | "end";
-    showIndicator?: boolean;
-    keepIndicatorSpace?: boolean;
-    children?: React$1.ReactNode;
-}
-declare function CollapseHeader({ title, description, startContent, endContent, indicator, indicatorPosition, showIndicator, keepIndicatorSpace, children, className, ...props }: CollapseHeaderProps): react_jsx_runtime.JSX.Element;
-declare namespace CollapseHeader {
-    var displayName: string;
-}
-interface CollapseContentProps extends Omit<DisclosurePanelProps, "className"> {
-    className?: DisclosurePanelProps["className"];
-}
-declare function CollapseContent({ className, children, ...props }: CollapseContentProps): react_jsx_runtime.JSX.Element;
-declare namespace CollapseContent {
-    var displayName: string;
-}
 
-interface ConfirmProps {
-    /**
-     * Whether the confirm dialog is open
-     */
-    isOpen: boolean;
-    /**
-     * Callback when the dialog is closed without confirming
-     */
-    onClose: () => void;
-    /**
-     * Callback when the confirm button is pressed
-     */
-    onConfirm: () => void;
-    /**
-     * Dialog title
-     */
-    title: string;
-    /**
-     * Confirmation message/content
-     */
-    message: React__default.ReactNode;
-    /**
-     * Label for the confirm button
-     * @default "Confirm"
-     */
-    confirmLabel?: string;
+/**
+ * Format as Watts
+ */
+declare const toWatts: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format as kilowatts
+ */
+declare const toKilowatts: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format as megawatts
+ */
+declare const toMegawatts: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format as gigawatts
+ */
+declare const toGigawatts: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Auto-scale power to the most appropriate unit
+ */
+declare const autoScalePower: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format power according to PowerFormat specification
+ */
+declare const formatPower: (value: FieldValue, format: PowerFormat) => FormattedValue;
+declare const toW: (value: number | null | undefined, decimals?: number) => string | null;
+declare const toKW: (value: number | null | undefined, decimals?: number) => string | null;
+declare const toMW: (value: number | null | undefined, decimals?: number) => string | null;
+declare const toGW: (value: number | null | undefined, decimals?: number) => string | null;
+
+/**
+ * FormatRegistry - A singleton pattern for managing formatters
+ * Allows registration and retrieval of formatting functions by key
+ */
+
+declare class FormatRegistryClass {
+    private formatters;
     /**
-     * Label for the cancel button
-     * @default "Cancel"
+     * Register a new formatter
+     * @param key - Unique identifier for the formatter
+     * @param formatter - The formatting function
      */
-    cancelLabel?: string;
+    register(key: string, formatter: FormatterFunction): void;
     /**
-     * Variant for the confirm button
-     * @default "primary"
+     * Format a value using a registered formatter
+     * @param key - The formatter key
+     * @param value - The value to format
+     * @param args - Additional arguments to pass to the formatter
+     * @returns The formatted value or null
      */
-    confirmVariant?: DialogAction["variant"];
+    format(key: string, value: FieldValue, ...args: unknown[]): FormattedValue;
     /**
-     * Whether the confirm action is destructive (uses destructive styling)
-     * @default false
+     * Check if a formatter is registered
+     * @param key - The formatter key
+     * @returns True if the formatter exists
      */
-    isDestructive?: boolean;
+    has(key: string): boolean;
     /**
-     * Whether the confirm button is in a loading state
-     * @default false
+     * Get all registered formatter keys
+     * @returns Array of formatter keys
      */
-    isLoading?: boolean;
+    keys(): string[];
     /**
-     * Maximum width of the confirm dialog
-     * @default "500px"
+     * Remove a formatter
+     * @param key - The formatter key to remove
      */
-    maxWidth?: string;
+    unregister(key: string): void;
     /**
-     * Minimum width of the confirm dialog (desktop only)
-     * @default "400px"
+     * Clear all registered formatters
      */
-    minWidth?: string;
+    clear(): void;
 }
+declare const FormatRegistry: FormatRegistryClass;
+
 /**
- * Confirm
- *
- * A confirmation dialog with confirm and cancel actions.
- * Use for actions that require user confirmation before proceeding.
+ * Electrical resistance formatting utilities
  */
-declare function Confirm({ isOpen, onClose, onConfirm, title, message, confirmLabel, cancelLabel, confirmVariant, isDestructive, isLoading, maxWidth, minWidth, }: ConfirmProps): react_jsx_runtime.JSX.Element;
 
-interface ConnectionStatusBadgeProps extends Omit<BadgeProps, "variant" | "children"> {
-    /** Whether the device is currently connected */
-    isConnected: boolean;
-    /** Timestamp when the device last connected */
-    connectedAt?: Date | string | null;
-    /** Timestamp when the device disconnected */
-    disconnectedAt?: Date | string | null;
-    /** Show timestamp below the status */
-    showTimestamp?: boolean;
-    /** Loading state */
-    isLoading?: boolean;
-}
 /**
- * ConnectionStatusBadge
- *
- * Displays device connection status with optional timestamps.
- * - Green "Connected" badge with pulsing dot
- * - Gray "Disconnected" badge with duration offline
- * - Auto-calculates "offline for 2 hours" type strings
- *
- * @example
- * ```tsx
- * <ConnectionStatusBadge isConnected={true} />
- * <ConnectionStatusBadge isConnected={false} disconnectedAt={new Date()} showTimestamp />
- * <ConnectionStatusBadge isConnected={true} connectedAt={new Date()} />
- * ```
+ * Format as milliohms
  */
-declare function ConnectionStatusBadge({ isConnected, connectedAt, disconnectedAt, showTimestamp, isLoading, size, shape, ...badgeProps }: ConnectionStatusBadgeProps): react_jsx_runtime.JSX.Element;
+declare const toMilliohms: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format as ohms
+ */
+declare const toOhms: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format as kilohms
+ */
+declare const toKilohms: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format as megohms
+ */
+declare const toMegohms: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Auto-scale resistance to the most appropriate unit
+ */
+declare const autoScaleResistance: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format resistance according to ResistanceFormat specification
+ */
+declare const formatResistance: (value: FieldValue, format: ResistanceFormat) => FormattedValue;
 
-interface ContactCardProps {
-    /** First name */
-    firstName: string;
-    /** Last name */
-    lastName: string;
-    /** Email address (optional) */
-    email?: string;
-    /** Phone number (optional) */
-    phone?: string;
-    /** Avatar image URL (optional) */
-    avatarUrl?: string;
-    /** Link to contact detail page (optional) */
-    href?: string;
-    /** Custom link component (e.g., Next.js Link) */
-    LinkComponent?: LinkComponentType;
-    /** Card variant */
-    variant?: "outlined" | "elevated" | "filled" | "ghost";
-    /** Layout orientation
-     * @default "horizontal"
-     * - "horizontal": Avatar on left, info on right
-     * - "vertical": Avatar on top, info below (centered, better for narrow/square containers)
-     */
-    layout?: "horizontal" | "vertical";
-    /** Show email address
-     * @default true
-     */
-    showEmail?: boolean;
-    /** Show phone number
-     * @default false
-     */
-    showPhone?: boolean;
-    /** Loading state */
-    isLoading?: boolean;
-    /** Additional classes for the card */
-    className?: string;
-    /** Additional classes for the card content (for padding control, etc.) */
-    contentClassName?: string;
-    /**
-     * Entity identifier for PII masking (e.g., "contact:ctc_abc123")
-     * When provided, adds data-pii-* attributes for the Curtain extension
-     */
-    piiEntity?: string;
-}
 /**
- * ContactCard
- *
- * A card component for displaying contact information with avatar.
- * Includes name, optional email, and optional phone number.
- *
- * @example
- * ```tsx
- * <ContactCard
- *   firstName="John"
- *   lastName="Doe"
- *   email="john.doe@example.com"
- *   phone="+1 (555) 123-4567"
- *   showEmail
- *   showPhone
- *   href="/contacts/123"
- * />
- * ```
+ * Temperature formatting utilities
  */
-declare function ContactCard({ firstName, lastName, email, phone, avatarUrl, href, LinkComponent, variant, layout, showEmail, showPhone, isLoading, className, contentClassName, piiEntity, }: ContactCardProps): react_jsx_runtime.JSX.Element;
 
-interface ContactMetaDisplayProps {
-    /** First name */
-    firstName: string;
-    /** Last name */
-    lastName: string;
-    /** Email address (optional) */
-    email?: string;
-    /** Avatar image URL (optional) */
-    avatarUrl?: string;
-    /** Layout variant - stacked (vertical) or inline (horizontal) */
-    layout?: "stacked" | "inline";
-    /** Size variant */
-    size?: "xs" | "sm" | "md" | "lg";
-    /** Link to contact detail page (optional) */
-    href?: string;
-    /** Custom link component (e.g., Next.js Link) */
-    LinkComponent?: LinkComponentType;
-    /** Link variant for the name */
-    linkVariant?: "primary" | "secondary" | "muted" | "unstyled" | "default" | "brand";
-    /** Text emphasis level - "strong"/"high" for bold, "normal" for regular, "low" for muted */
-    emphasis?: CellEmphasis;
-    /** Show email address (only for stacked layout) */
-    showEmail?: boolean;
-    /** Badge element to display next to the name (e.g., Owner, Admin badge) */
-    badge?: React.ReactNode;
-    /** Avatar shape (default: "square") */
-    avatarShape?: "circle" | "square";
-    /** Loading state */
-    isLoading?: boolean;
-    /** Additional classes */
-    className?: string;
-    /**
-     * Entity identifier for PII masking (e.g., "contact:ctc_abc123")
-     * When provided, adds data-pii-* attributes for the Curtain extension
-     */
-    piiEntity?: string;
-}
 /**
- * ContactMetaDisplay
+ * Convert temperature unit string to symbol
+ */
+declare const temperatureStringToSymbol: (unit: TemperatureUnitString) => TemperatureUnit;
+/**
+ * Format as Fahrenheit
+ */
+declare const toFahrenheit: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format as Celsius
+ */
+declare const toCelsius: (value: number | null | undefined, fromFahrenheit?: boolean, decimals?: number) => string | null;
+/**
+ * Format as Kelvin
+ */
+declare const toKelvin: (value: number | null | undefined, fromFahrenheit?: boolean, decimals?: number) => string | null;
+/**
+ * Convert Celsius to Fahrenheit
+ */
+declare const celsiusToFahrenheit: (celsius: number) => number;
+/**
+ * Convert Fahrenheit to Celsius
+ */
+declare const fahrenheitToCelsius: (fahrenheit: number) => number;
+/**
+ * Convert Celsius to Kelvin
+ */
+declare const celsiusToKelvin: (celsius: number) => number;
+/**
+ * Convert Kelvin to Celsius
+ */
+declare const kelvinToCelsius: (kelvin: number) => number;
+/**
+ * Convert Fahrenheit to Kelvin
+ */
+declare const fahrenheitToKelvin: (fahrenheit: number) => number;
+/**
+ * Convert Kelvin to Fahrenheit
+ */
+declare const kelvinToFahrenheit: (kelvin: number) => number;
+/**
+ * Format temperature with specified unit
+ */
+declare const toTemperature: (value: number | null | undefined, unit?: TemperatureUnit | TemperatureUnitString, decimals?: number) => string | null;
+/**
+ * Format temperature according to TemperatureFormat specification
+ */
+declare const formatTemperature: (value: FieldValue, format: TemperatureFormat) => FormattedValue;
+
+/**
+ * Text formatting utilities
+ */
+
+/**
+ * Convert text to uppercase
+ */
+declare const toUpperCase: (text: string | null | undefined) => string;
+/**
+ * Convert text to lowercase
+ */
+declare const toLowerCase: (text: string | null | undefined) => string;
+/**
+ * Convert text to sentence case (first letter capitalized, rest lowercase).
  *
- * Reusable component for displaying contact information with avatar.
- * Supports stacked and inline layouts with size variants and optional linking.
+ * @param text - Text to convert
+ * @returns Sentence-cased text
  *
- * **Stacked layout**: Avatar, name above, optional email below
- * **Inline layout**: Avatar + name only (horizontal)
+ * @example
+ * ```typescript
+ * toSentenceCase("HELLO WORLD"); // "Hello world"
+ * toSentenceCase("hello world"); // "Hello world"
+ * ```
+ */
+declare const toSentenceCase: (text: string | null | undefined) => string;
+/**
+ * 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).
  *
- * Use this component directly in cards, lists, or other layouts.
- * For DataTable cells, use ContactMetaCell which wraps this component.
+ * @param text - Text to convert
+ * @returns Title-cased text
  *
  * @example
- * ```tsx
- * // Stacked layout (default)
- * <ContactMetaDisplay
- *   firstName="John"
- *   lastName="Doe"
- *   email="john@example.com"
- *   layout="stacked"
- *   size="md"
- *   showEmail
- *   href="/contacts/123"
- * />
- *
- * // Inline layout
- * <ContactMetaDisplay
- *   firstName="John"
- *   lastName="Doe"
- *   layout="inline"
- *   size="sm"
- *   href="/contacts/123"
- * />
+ * ```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"
  * ```
  */
-declare function ContactMetaDisplay({ firstName, lastName, email, avatarUrl, layout, size, href, LinkComponent, linkVariant, emphasis, showEmail, badge, avatarShape, isLoading, className, piiEntity, }: ContactMetaDisplayProps): react_jsx_runtime.JSX.Element;
+declare const toTitleCase: (text: string | null | undefined) => string;
+/**
+ * Capitalize first letter of each word
+ */
+declare const capitalize: (text: string | null | undefined) => string;
+/**
+ * Uppercase first letter only
+ */
+declare const ucFirst: (text: string | null | undefined) => string;
+/**
+ * Convert camelCase to words
+ */
+declare const camelCaseToWords: (text: string | null | undefined) => string;
+/**
+ * Convert snake_case to words
+ */
+declare const snakeCaseToWords: (text: string | null | undefined) => string;
+/**
+ * Convert enum-style text to sentence case
+ */
+declare const enumToSentenceCase: (text: string | null | undefined) => string;
+/**
+ * Truncate text in the middle
+ */
+declare const truncateMiddle: (value: string | null | undefined, length?: number) => string;
+/**
+ * Truncate text at the start
+ */
+declare const truncateStart: (value: string | null | undefined, length?: number) => string;
+/**
+ * Truncate text at the end
+ */
+declare const truncateEnd: (value: string | null | undefined, length?: number, ellipsis?: string) => string;
+/**
+ * Mask sensitive text (e.g., secrets, API keys)
+ */
+declare const toSecret: (value: string | null | undefined) => string;
+/**
+ * Format text according to TextFormat specification
+ */
+declare const formatText: (value: FieldValue, format: TextFormat) => FormattedValue;
 
 /**
- * ContainerQueryProvider — measures its own width via ResizeObserver and
- * provides breakpoint state to all descendant blocks via context.
- *
- * Wrap block previews (or board surfaces) in this provider so blocks that
- * use `useContainerBreakpoint` respond to their actual render width, not
- * the browser viewport.
+ * Voltage formatting utilities (electrical potential)
+ */
+
+/**
+ * Format as millivolts
+ */
+declare const toMillivolts: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format as volts
+ */
+declare const toVolts: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format as kilovolts
+ */
+declare const toKilovolts: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Auto-scale voltage to the most appropriate unit
+ */
+declare const autoScaleVoltage: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format voltage according to VoltageFormat specification
+ */
+declare const formatVoltage: (value: FieldValue, format: VoltageFormat) => FormattedValue;
+declare const toMV: (value: number | null | undefined, decimals?: number) => string | null;
+declare const toV: (value: number | null | undefined, decimals?: number) => string | null;
+declare const toKV: (value: number | null | undefined, decimals?: number) => string | null;
+
+/**
+ * Comprehensive formatting utilities for the Edges design system
  *
- * Renders a transparent div wrapper — apply className to control layout.
+ * This module provides a unified formatting system with support for:
+ * - Text formatting (case conversion, truncation, etc.)
+ * - Number formatting (decimals, thousands separators, compact notation)
+ * - Currency formatting (multiple currencies and display options)
+ * - Date formatting (relative time, custom formats, timezones)
+ * - Boolean formatting (custom true/false text)
+ * - Energy units (Wh, kWh, MWh, GWh with auto-scaling)
+ * - Temperature units (Celsius, Fahrenheit, Kelvin)
+ * - Distance units (meters, kilometers, miles, feet)
+ * - Phone number formatting (US and international)
+ * - Custom formatters via the FormatRegistry
  */
-declare function ContainerQueryProvider({ children, className }: {
-    children: React.ReactNode;
-    className?: string;
-}): react_jsx_runtime.JSX.Element;
 
-interface CopyToClipboardProps {
-    /**
-     * The value to copy to clipboard. If not provided, will use the text content of children
-     */
-    value?: string;
-    /**
-     * The content to display
-     */
-    children: React__default.ReactNode;
-    /**
-     * Optional className for the container
-     */
-    className?: string;
-    /**
-     * Size of the copy button, defaults to "sm"
-     */
-    size?: "sm" | "md";
-    /**
-     * Position of the copy icon relative to children, defaults to "right"
-     */
-    iconPosition?: "left" | "right";
-}
-declare function CopyToClipboard({ value, children, className, size, iconPosition, }: CopyToClipboardProps): react_jsx_runtime.JSX.Element;
+/**
+ * Convenience function to create a format object
+ *
+ * @example
+ * ```typescript
+ * const currencyFormat = createFormat("currency", { currency: "EUR" });
+ * const dateFormat = createFormat("date", { relative: true });
+ * ```
+ */
+declare const createFormat: <T extends FieldFormat["type"]>(type: T, options?: Omit<Extract<FieldFormat, {
+    type: T;
+}>, "type">) => Extract<FieldFormat, {
+    type: T;
+}>;
 
 type AreaSeriesBaseline = number | ((point: BaseDataPoint, index: number) => number);
 interface AreaSeriesProps {
@@ -7432,6 +7371,67 @@ interface ColorModeProviderProps {
 }
 declare const ColorModeProvider: React.FC<ColorModeProviderProps>;
 
+/**
+ * Semantic typography role classes generated by @texturehq/edges-tokens.
+ *
+ * These classes apply the full type role — family, size, line-height,
+ * weight, and letter-spacing. Pair them with explicit semantic text-color
+ * utilities at the callsite.
+ */
+declare const typographyRole: {
+    readonly displayXl: "text-display-xl";
+    readonly displayLg: "text-display-lg";
+    readonly displayMd: "text-display-md";
+    readonly displaySm: "text-display-sm";
+    readonly headingXl: "text-heading-xl";
+    readonly headingLg: "text-heading-lg";
+    readonly headingMd: "text-heading-md";
+    readonly headingSm: "text-heading-sm";
+    readonly bodyLg: "text-body-lg";
+    readonly bodyMd: "text-body-md";
+    readonly bodySm: "text-body-sm";
+    readonly labelLg: "text-label-lg";
+    readonly labelMd: "text-label-md";
+    readonly labelSm: "text-label-sm";
+    readonly code: "text-code";
+    readonly agent: "text-agent";
+};
+type TypographyRole = keyof typeof typographyRole;
+/**
+ * Merge a semantic typography role with semantic color utilities and any
+ * component-specific layout classes. This keeps components from hand-composing
+ * `text-sm font-medium leading-*` whenever a role exists.
+ */
+declare function typeRole(role: TypographyRole, ...classNames: Array<string | false | null | undefined>): string;
+
+/**
+ * Data Operations Utilities
+ *
+ * Pure functions for filtering, sorting, searching, and faceting data.
+ * These functions are used by useClientDataControls but can also be used standalone.
+ */
+
+interface ApplyDataOperationsOptions<T> {
+    data: T[];
+    filters?: FilterState;
+    sort?: SortState | null;
+    search?: SearchConfig | null;
+    facetConfigs?: FacetConfig[];
+}
+interface ApplyDataOperationsResult<T> {
+    data: T[];
+    facetCounts: FacetCounts;
+    resultCount: number;
+}
+/**
+ * Apply all data operations in the correct order:
+ * 1. Search
+ * 2. Filter
+ * 3. Compute facets (on filtered data)
+ * 4. Sort
+ */
+declare function applyDataOperations<T>({ data, filters, sort, search, facetConfigs, }: ApplyDataOperationsOptions<T>): ApplyDataOperationsResult<T>;
+
 /**
  * Device state helper utilities
  *