npm - @texturehq/edges - Versions diffs - 1.29.1 → 1.30.1 - Mend

@texturehq/edges 1.29.1 → 1.30.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/dist/{colors-CkJf6_Bz.d.cts → colors-Dt3zpPN_.d.cts} +5 -1
package/dist/{colors-DR1jXZhL.d.ts → colors-KgCYfdO9.d.ts} +5 -1
package/dist/index.cjs +11 -11
package/dist/index.cjs.map +1 -1
package/dist/index.d.cts +39 -4
package/dist/index.d.ts +39 -4
package/dist/index.js +11 -11
package/dist/index.js.map +1 -1
package/dist/server.d.cts +1 -1
package/dist/server.d.ts +1 -1
package/dist/styles.css +5 -0
package/package.json +4 -5
package/dist/components.manifest.json +0 -3160
package/dist/utilities.manifest.json +0 -1222
package/scripts/generate-edges-docs.js +0 -1127
package/scripts/setup-cursor-rules-manual.js +0 -163
package/scripts/setup-cursor-rules.js +0 -277
package/scripts/setup-cursor-rules.sh +0 -95
package/templates/cursor-rules/edges-usage.mdc +0 -65

package/dist/components.manifest.json DELETED Viewed

@@ -1,3160 +0,0 @@
-{
-  "version": "1.29.1",
-  "components": [
-    {
-      "name": "ActionCell",
-      "category": "Uncategorized",
-      "description": "",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/ActionCell",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Uncategorized/ActionCell"
-    },
-    {
-      "name": "ActionMenu",
-      "category": "Form Controls",
-      "description": "ActionMenu  A dropdown menu for actions, typically triggered by a button. Supports icons, destructive actions, and flexible alignment.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/ActionMenu",
-      "props": [],
-      "relatedComponents": [
-        "Button",
-        "Icon"
-      ],
-      "storybookPath": "Form Controls/ActionMenu"
-    },
-    {
-      "name": "ActivityFeed",
-      "category": "Activity",
-      "description": "Height/maxHeight for scroll container",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/ActivityFeed",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Activity/ActivityFeed"
-    },
-    {
-      "name": "ActivityFeedGroup",
-      "category": "Activity",
-      "description": "Group content",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/ActivityFeedGroup",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Activity/ActivityFeedGroup"
-    },
-    {
-      "name": "ActivityItem",
-      "category": "Activity",
-      "description": "Marks the item as interactive, enabling keyboard semantics",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/ActivityItem",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Activity/ActivityItem"
-    },
-    {
-      "name": "Alert",
-      "category": "Overlays",
-      "description": "Alert  A simple alert dialog with a single action button. Use for informational messages that require acknowledgment.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/Alert",
-      "props": [],
-      "relatedComponents": [
-        "Button",
-        "StoryLayout",
-        "StoryTable",
-        "StoryTableCell",
-        "StoryTableRow"
-      ],
-      "storybookPath": "Overlays/Alert"
-    },
-    {
-      "name": "AppShell",
-      "category": "Layout",
-      "description": "Isomorphic AppShell component that works as both server and client component Uses CSS-only interactions by default for full SSR compatibility Can be progressively enhanced with JavaScript when enableJsEnhancements is true",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/AppShell",
-      "props": [],
-      "relatedComponents": [
-        "Button"
-      ],
-      "storybookPath": "Layout/AppShell"
-    },
-    {
-      "name": "AreaSeries",
-      "category": "Charts",
-      "description": "AreaSeries  Chart component for rendering area charts with gradient fill. Displays data as a filled area with optional line path, supporting animations and custom colors.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/AreaSeries",
-      "props": [],
-      "relatedComponents": [
-        "ChartContainer"
-      ],
-      "storybookPath": "Charts/AreaSeries"
-    },
-    {
-      "name": "Autocomplete",
-      "category": "Form Controls",
-      "description": "Additional CSS classes to apply to the component",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/Autocomplete",
-      "props": [
-        {
-          "name": "autoFocus",
-          "type": "boolean"
-        },
-        {
-          "name": "defaultFilter",
-          "type": "(textValue: string, inputValue: string) => boolean"
-        },
-        {
-          "name": "defaultSelectedKey",
-          "type": "Key | null"
-        },
-        {
-          "name": "description",
-          "type": "string"
-        },
-        {
-          "name": "errorMessage",
-          "type": "string | ((validation: ValidationResult) => string)"
-        },
-        {
-          "name": "isDisabled",
-          "type": "boolean"
-        },
-        {
-          "name": "isInvalid",
-          "type": "boolean"
-        },
-        {
-          "name": "isRequired",
-          "type": "boolean"
-        },
-        {
-          "name": "label",
-          "type": "string"
-        },
-        {
-          "name": "onSelectionChange",
-          "type": "(key: Key | null) => void"
-        },
-        {
-          "name": "placeholder",
-          "type": "string"
-        },
-        {
-          "name": "renderItem",
-          "type": "(item: Item) => React.ReactNode"
-        },
-        {
-          "name": "renderLeftIcon",
-          "type": "(isLoading: boolean) => React.ReactNode"
-        },
-        {
-          "name": "renderSection",
-          "type": "(section: Section, children: React.ReactNode) => React.ReactNode"
-        },
-        {
-          "name": "requestConfig",
-          "type": "AutocompleteRequestConfig"
-        },
-        {
-          "name": "sections",
-          "type": "Section[]"
-        },
-        {
-          "name": "selectedKey",
-          "type": "Key | null"
-        },
-        {
-          "name": "showErrors",
-          "type": "boolean"
-        },
-        {
-          "name": "size",
-          "type": "Size"
-        },
-        {
-          "name": "staticItems",
-          "type": "Item[]"
-        },
-        {
-          "name": "tooltip",
-          "type": "string"
-        },
-        {
-          "name": "validationResult",
-          "type": "ValidationResult"
-        }
-      ],
-      "relatedComponents": [
-        "StoryLayout",
-        "StoryTable",
-        "StoryTableCell",
-        "StoryTableRow"
-      ],
-      "storybookPath": "Form Controls/Autocomplete"
-    },
-    {
-      "name": "AutoMobileRenderer",
-      "category": "Data",
-      "description": "",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/AutoMobileRenderer",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Data/AutoMobileRenderer"
-    },
-    {
-      "name": "Avatar",
-      "category": "Display",
-      "description": "Avatar  Display user, team, or organization avatars with support for images, initials, and fallback icons. Includes optional status indicators.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/Avatar",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Display/Avatar"
-    },
-    {
-      "name": "Badge",
-      "category": "Display",
-      "description": "Badge  A non-interactive label for displaying status, counts, or categories. Use for read-only indicators. For interactive elements, use Chip instead.  Supports device states (charging, discharging, heat, cool, etc.) and grid states (importing, exporting) as variant values.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/Badge",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Display/Badge"
-    },
-    {
-      "name": "BadgeCell",
-      "category": "Uncategorized",
-      "description": "",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/BadgeCell",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Uncategorized/BadgeCell"
-    },
-    {
-      "name": "Banner",
-      "category": "Feedback",
-      "description": "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> ```",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/Banner",
-      "props": [],
-      "relatedComponents": [
-        "Button"
-      ],
-      "storybookPath": "Feedback/Banner"
-    },
-    {
-      "name": "BarSeries",
-      "category": "Charts",
-      "description": "BarSeries  Chart component for rendering bar/column charts. Displays data as vertical bars with customizable colors, opacity, and category-based coloring.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/BarSeries",
-      "props": [],
-      "relatedComponents": [
-        "ChartContainer"
-      ],
-      "storybookPath": "Charts/BarSeries"
-    },
-    {
-      "name": "BooleanCell",
-      "category": "Uncategorized",
-      "description": "",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/BooleanCell",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Uncategorized/BooleanCell"
-    },
-    {
-      "name": "BreadcrumbItem",
-      "category": "Navigation",
-      "description": "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",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/BreadcrumbItem",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Navigation/BreadcrumbItem"
-    },
-    {
-      "name": "Breadcrumbs",
-      "category": "Navigation",
-      "description": "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)",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/Breadcrumbs",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Navigation/Breadcrumbs"
-    },
-    {
-      "name": "Button",
-      "category": "Form Controls",
-      "description": "Renders an Edges Button. When `href` is provided, renders a link-styled button using the same visual system.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/Button",
-      "props": [
-        {
-          "name": "badgeNumber",
-          "type": "number"
-        },
-        {
-          "name": "badgePosition",
-          "type": "\"top-right\" | \"top-left\" | \"bottom-right\" | \"bottom-left\""
-        },
-        {
-          "name": "badgeVariant",
-          "type": "\"primary\" | \"destructive\""
-        },
-        {
-          "name": "className",
-          "type": "string"
-        },
-        {
-          "name": "fullWidth",
-          "type": "boolean"
-        },
-        {
-          "name": "href",
-          "type": "string"
-        },
-        {
-          "name": "icon",
-          "type": "IconName"
-        },
-        {
-          "name": "iconPosition",
-          "type": "\"left\" | \"right\""
-        },
-        {
-          "name": "iconWeight",
-          "type": "\"thin\" | \"light\" | \"regular\" | \"bold\" | \"fill\" | \"duotone\""
-        },
-        {
-          "name": "isLoading",
-          "type": "boolean"
-        },
-        {
-          "name": "loadingIndicator",
-          "type": "React.ReactNode"
-        },
-        {
-          "name": "loadingText",
-          "type": "string"
-        },
-        {
-          "name": "rel",
-          "type": "string"
-        },
-        {
-          "name": "size",
-          "type": "Size"
-        },
-        {
-          "name": "style",
-          "type": "React.CSSProperties"
-        },
-        {
-          "name": "target",
-          "type": "string"
-        },
-        {
-          "name": "variant",
-          "type": "\"default\" | \"brand\" | \"secondary\" | \"destructive\" | \"icon\" | \"link\" | \"unstyled\" | \"ghost\" | \"primary\""
-        }
-      ],
-      "relatedComponents": [
-        "Button",
-        "Icon",
-        "StoryLayout",
-        "StoryTable",
-        "StoryTableCell",
-        "StoryTableRow"
-      ],
-      "storybookPath": "Form Controls/Button"
-    },
-    {
-      "name": "Calendar",
-      "category": "Form Controls",
-      "description": "Calendar  Single-date calendar primitive with Edges styling.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/Calendar",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Form Controls/Calendar"
-    },
-    {
-      "name": "Card",
-      "category": "Layout",
-      "description": "When true and parent Card has layout=\"flex\", content expands to fill available space",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/Card",
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode"
-        },
-        {
-          "name": "className",
-          "type": "string"
-        },
-        {
-          "name": "isLoading",
-          "type": "boolean"
-        },
-        {
-          "name": "variant",
-          "type": "CardVariant"
-        }
-      ],
-      "relatedComponents": [
-        "Avatar",
-        "Badge",
-        "Button",
-        "Icon",
-        "StoryLayout"
-      ],
-      "storybookPath": "Layout/Card"
-    },
-    {
-      "name": "CardContent",
-      "category": "Layout",
-      "description": "When true and parent Card has layout=\"flex\", content expands to fill available space",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/CardContent",
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode"
-        },
-        {
-          "name": "className",
-          "type": "string"
-        },
-        {
-          "name": "isLoading",
-          "type": "boolean"
-        }
-      ],
-      "relatedComponents": [
-        "Avatar",
-        "Badge",
-        "Button",
-        "Icon",
-        "StoryLayout"
-      ],
-      "storybookPath": "Layout/CardContent"
-    },
-    {
-      "name": "CardFooter",
-      "category": "Layout",
-      "description": "When true and parent Card has layout=\"flex\", content expands to fill available space",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/CardFooter",
-      "props": [
-        {
-          "name": "align",
-          "type": "\"start\" | \"end\" | \"center\" | \"between\""
-        },
-        {
-          "name": "children",
-          "type": "React.ReactNode"
-        },
-        {
-          "name": "className",
-          "type": "string"
-        },
-        {
-          "name": "isLoading",
-          "type": "boolean"
-        }
-      ],
-      "relatedComponents": [
-        "Avatar",
-        "Badge",
-        "Button",
-        "Icon",
-        "StoryLayout"
-      ],
-      "storybookPath": "Layout/CardFooter"
-    },
-    {
-      "name": "CardHeader",
-      "category": "Layout",
-      "description": "When true and parent Card has layout=\"flex\", content expands to fill available space",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/CardHeader",
-      "props": [
-        {
-          "name": "actions",
-          "type": "React.ReactNode"
-        },
-        {
-          "name": "className",
-          "type": "string"
-        },
-        {
-          "name": "isLoading",
-          "type": "boolean"
-        },
-        {
-          "name": "subtitle",
-          "type": "React.ReactNode"
-        },
-        {
-          "name": "title",
-          "type": "React.ReactNode"
-        }
-      ],
-      "relatedComponents": [
-        "Avatar",
-        "Badge",
-        "Button",
-        "Icon",
-        "StoryLayout"
-      ],
-      "storybookPath": "Layout/CardHeader"
-    },
-    {
-      "name": "CardMedia",
-      "category": "Layout",
-      "description": "When true and parent Card has layout=\"flex\", content expands to fill available space",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/CardMedia",
-      "props": [
-        {
-          "name": "alt",
-          "type": "string"
-        },
-        {
-          "name": "aspectRatio",
-          "type": "\"square\" | \"video\" | \"wide\" | \"auto\""
-        },
-        {
-          "name": "children",
-          "type": "React.ReactNode"
-        },
-        {
-          "name": "className",
-          "type": "string"
-        },
-        {
-          "name": "isLoading",
-          "type": "boolean"
-        },
-        {
-          "name": "src",
-          "type": "string"
-        }
-      ],
-      "relatedComponents": [
-        "Avatar",
-        "Badge",
-        "Button",
-        "Icon",
-        "StoryLayout"
-      ],
-      "storybookPath": "Layout/CardMedia"
-    },
-    {
-      "name": "CardMobileRenderer",
-      "category": "Data",
-      "description": "",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/CardMobileRenderer",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Data/CardMobileRenderer"
-    },
-    {
-      "name": "CarouselAutoplayTrigger",
-      "category": "Components",
-      "description": "CarouselAutoplayTrigger - Toggle button for autoplay functionality. Allows users to pause and resume automatic slide transitions.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/CarouselAutoplayTrigger",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Components/CarouselAutoplayTrigger"
-    },
-    {
-      "name": "CarouselControl",
-      "category": "Components",
-      "description": "CarouselControl - Container for navigation controls and indicators. Typically holds prev/next buttons, indicators, and autoplay controls.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/CarouselControl",
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode"
-        }
-      ],
-      "relatedComponents": [],
-      "storybookPath": "Components/CarouselControl"
-    },
-    {
-      "name": "CarouselIndicator",
-      "category": "Components",
-      "description": "CarouselIndicator - Dot indicator for a specific slide. Clicking navigates to the slide at the specified index.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/CarouselIndicator",
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode"
-        }
-      ],
-      "relatedComponents": [],
-      "storybookPath": "Components/CarouselIndicator"
-    },
-    {
-      "name": "CarouselIndicatorGroup",
-      "category": "Components",
-      "description": "CarouselIndicatorGroup - Container for all page indicators. Automatically generates indicators for each page/slide.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/CarouselIndicatorGroup",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Components/CarouselIndicatorGroup"
-    },
-    {
-      "name": "CarouselItem",
-      "category": "Components",
-      "description": "Individual slide/item within the carousel. Handles sizing based on slidesPerView and applies snap alignment.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/CarouselItem",
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode"
-        }
-      ],
-      "relatedComponents": [],
-      "storybookPath": "Components/CarouselItem"
-    },
-    {
-      "name": "CarouselItemGroup",
-      "category": "Components",
-      "description": "CarouselItemGroup - Container for carousel items with scrolling behavior. Manages scroll snap, drag interactions, and layout spacing.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/CarouselItemGroup",
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode"
-        }
-      ],
-      "relatedComponents": [],
-      "storybookPath": "Components/CarouselItemGroup"
-    },
-    {
-      "name": "CarouselNextTrigger",
-      "category": "Components",
-      "description": "CarouselNextTrigger - Button to navigate to the next slide. Automatically disabled when at the last slide (unless loop is enabled).",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/CarouselNextTrigger",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Components/CarouselNextTrigger"
-    },
-    {
-      "name": "CarouselPrevTrigger",
-      "category": "Components",
-      "description": "CarouselPrevTrigger - Button to navigate to the previous slide. Automatically disabled when at the first slide (unless loop is enabled).",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/CarouselPrevTrigger",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Components/CarouselPrevTrigger"
-    },
-    {
-      "name": "CarouselProgressText",
-      "category": "Components",
-      "description": "CarouselProgressText - Displays current slide position (e.g., \"1 / 5\"). Shows the current page number and total number of pages.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/CarouselProgressText",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Components/CarouselProgressText"
-    },
-    {
-      "name": "CarouselRoot",
-      "category": "Components",
-      "description": "CarouselRoot - Main carousel container with state management and navigation logic. Handles page state, autoplay, looping, and drag interactions.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/CarouselRoot",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Components/CarouselRoot"
-    },
-    {
-      "name": "CategoryBarChart",
-      "category": "Charts",
-      "description": "Show tooltip on hover (default true)",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/CategoryBarChart",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Charts/CategoryBarChart"
-    },
-    {
-      "name": "ChartAxis",
-      "category": "Charts",
-      "description": "ChartAxis  Chart axis components for rendering X and Y axes. Provides formatted bottom (time) and left (numeric) axes with customizable tick formatting.  Components: - Bottom: Time-based x-axis (for time-series charts) - Left: Numeric y-axis - CategoryBottom: Categorical x-axis (for bar charts with labels) - CategoryLeft: Categorical y-axis (for horizontal bar charts) - NumericBottom: Numeric x-axis (for horizontal bar charts)",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/ChartAxis",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Charts/ChartAxis"
-    },
-    {
-      "name": "ChartBottomBar",
-      "category": "Uncategorized",
-      "description": "ChartBottomBar  Chart footer component with legend and export functionality. Displays color-coded legend items and provides export options for CSV, SVG, and PNG formats.  **Smart legend display:** - Desktop (≥ 640px): Shows all legend items inline with wrapping - Mobile (< 640px): Shows \"Legend (N)\" button that opens a tray with all items - Legend and action buttons always stay on a single row for clean, consistent layout  **Responsive behavior:** - Mobile: No padding, legend in tray, button text hidden (icon-only) - Desktop: Chart margin padding, inline legend, full button labels  Respects chart margins to align legend with Y-axis and export button with X-axis end.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/ChartBottomBar",
-      "props": [
-        {
-          "name": "isZoomed",
-          "type": "boolean"
-        },
-        {
-          "name": "items",
-          "type": "LegendItem[]"
-        },
-        {
-          "name": "marginLeft",
-          "type": "number"
-        },
-        {
-          "name": "marginRight",
-          "type": "number"
-        },
-        {
-          "name": "onExport",
-          "type": "(type: ExportType) => void | Promise<void>"
-        },
-        {
-          "name": "onResetZoom",
-          "type": "() => void"
-        }
-      ],
-      "relatedComponents": [],
-      "storybookPath": "Uncategorized/ChartBottomBar"
-    },
-    {
-      "name": "ChartContainer",
-      "category": "Charts",
-      "description": "ChartContainer  Main chart wrapper component that provides context and layout for chart visualizations. Handles scaling, tooltips, axes, and data management for area, line, and bar charts.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/ChartContainer",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Charts/ChartContainer"
-    },
-    {
-      "name": "ChartEventMarkers",
-      "category": "Charts",
-      "description": "ChartEventMarkers  Renders vertical lines with markers for events (e.g., commands) on a chart. Must be used as a child of ChartContainer to access chart context.  @example ```tsx <ChartContainer> <AreaSeries data={data} label=\"Power\" /> <ChartEventMarkers events={[ { timestamp: new Date('2024-01-01T10:00:00Z'), label: 'Command sent', type: 'command' }, { timestamp: new Date('2024-01-01T12:00:00Z'), label: 'Alert triggered', type: 'alert' } ]} /> </ChartContainer> ```",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/ChartEventMarkers",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Charts/ChartEventMarkers"
-    },
-    {
-      "name": "ChartTooltip",
-      "category": "Uncategorized",
-      "description": "ChartTooltip  Interactive tooltip component for charts. Displays formatted data values at hover position with automatic positioning and animations. Uses the main formatting system for consistency with Kpi, StatList, and DataTable.  Can be used standalone (with label prop) or within ChartContext (for time-series charts).",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/ChartTooltip",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Uncategorized/ChartTooltip"
-    },
-    {
-      "name": "Checkbox",
-      "category": "Form Controls",
-      "description": "Visual variant of the checkbox @default \"default\"",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/Checkbox",
-      "props": [
-        {
-          "name": "children",
-          "type": "ReactNode | ((props: CheckboxRenderProps) => ReactNode)"
-        }
-      ],
-      "relatedComponents": [
-        "Checkbox"
-      ],
-      "storybookPath": "Form Controls/Checkbox"
-    },
-    {
-      "name": "CheckboxGroup",
-      "category": "Form Controls",
-      "description": "Visual variant of the checkbox @default \"default\"",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/CheckboxGroup",
-      "props": [
-        {
-          "name": "children",
-          "type": "ReactNode"
-        },
-        {
-          "name": "description",
-          "type": "string"
-        },
-        {
-          "name": "errorMessage",
-          "type": "string | ((validation: ValidationResult) => string)"
-        },
-        {
-          "name": "label",
-          "type": "string"
-        }
-      ],
-      "relatedComponents": [
-        "Checkbox"
-      ],
-      "storybookPath": "Form Controls/CheckboxGroup"
-    },
-    {
-      "name": "Chip",
-      "category": "Display",
-      "description": "Chip  A compact element that represents an input, attribute, or action. Can be removable with an X button and supports different variants and sizes.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/Chip",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Display/Chip"
-    },
-    {
-      "name": "ChipInputField",
-      "category": "Form Controls",
-      "description": "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.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/ChipInputField",
-      "props": [],
-      "relatedComponents": [
-        "ChipInputField",
-        "StoryLayout",
-        "StoryTable",
-        "StoryTableCell",
-        "StoryTableRow"
-      ],
-      "storybookPath": "Form Controls/ChipInputField"
-    },
-    {
-      "name": "CodeEditor",
-      "category": "Form Controls",
-      "description": "CodeEditor  A code editor component with syntax highlighting and various language support. Built on top of Ace Editor.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/CodeEditor",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Form Controls/CodeEditor"
-    },
-    {
-      "name": "Collapse",
-      "category": "Layout",
-      "description": "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.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/Collapse",
-      "props": [
-        {
-          "name": "className",
-          "type": "RACDisclosureGroupProps[\"className\"]"
-        },
-        {
-          "name": "density",
-          "type": "CollapseDensity"
-        },
-        {
-          "name": "showDividers",
-          "type": "boolean"
-        },
-        {
-          "name": "variant",
-          "type": "CollapseVariant"
-        }
-      ],
-      "relatedComponents": [],
-      "storybookPath": "Layout/Collapse"
-    },
-    {
-      "name": "CollapseContent",
-      "category": "Layout",
-      "description": "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.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/CollapseContent",
-      "props": [
-        {
-          "name": "className",
-          "type": "RACDisclosurePanelProps[\"className\"]"
-        }
-      ],
-      "relatedComponents": [],
-      "storybookPath": "Layout/CollapseContent"
-    },
-    {
-      "name": "CollapseHeader",
-      "category": "Layout",
-      "description": "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.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/CollapseHeader",
-      "props": [
-        {
-          "name": "description",
-          "type": "React.ReactNode"
-        },
-        {
-          "name": "endContent",
-          "type": "React.ReactNode"
-        },
-        {
-          "name": "startContent",
-          "type": "React.ReactNode"
-        },
-        {
-          "name": "title",
-          "type": "React.ReactNode"
-        }
-      ],
-      "relatedComponents": [],
-      "storybookPath": "Layout/CollapseHeader"
-    },
-    {
-      "name": "CollapseItem",
-      "category": "Layout",
-      "description": "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.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/CollapseItem",
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode"
-        },
-        {
-          "name": "className",
-          "type": "RACDisclosureProps[\"className\"]"
-        }
-      ],
-      "relatedComponents": [],
-      "storybookPath": "Layout/CollapseItem"
-    },
-    {
-      "name": "ColorField",
-      "category": "Form Controls",
-      "description": "ColorField Component  A form control that allows users to input hex color codes manually or select colors using a visual color picker. Integrates seamlessly with the Edges design system.  @example ```tsx <ColorField label=\"Brand Color\" value={color} onChange={setColor} description=\"Choose your primary brand color\" /> ```",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/ColorField",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Form Controls/ColorField"
-    },
-    {
-      "name": "CommandPalette",
-      "category": "Uncategorized",
-      "description": "",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/CommandPalette",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Uncategorized/CommandPalette"
-    },
-    {
-      "name": "Confirm",
-      "category": "Overlays",
-      "description": "Confirm  A confirmation dialog with confirm and cancel actions. Use for actions that require user confirmation before proceeding.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/Confirm",
-      "props": [],
-      "relatedComponents": [
-        "Button",
-        "StoryLayout",
-        "StoryTable",
-        "StoryTableCell",
-        "StoryTableRow"
-      ],
-      "storybookPath": "Overlays/Confirm"
-    },
-    {
-      "name": "ConnectionStatusBadge",
-      "category": "Display",
-      "description": "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()} /> ```",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/ConnectionStatusBadge",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Display/ConnectionStatusBadge"
-    },
-    {
-      "name": "ContactCard",
-      "category": "Display",
-      "description": "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\" /> ```",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/ContactCard",
-      "props": [],
-      "relatedComponents": [
-        "StoryLayout",
-        "StoryTable",
-        "StoryTableCell",
-        "StoryTableRow"
-      ],
-      "storybookPath": "Display/ContactCard"
-    },
-    {
-      "name": "ContactMetaCell",
-      "category": "Uncategorized",
-      "description": "",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/ContactMetaCell",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Uncategorized/ContactMetaCell"
-    },
-    {
-      "name": "ContactMetaDisplay",
-      "category": "Display",
-      "description": "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\" /> ```",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/ContactMetaDisplay",
-      "props": [],
-      "relatedComponents": [
-        "StoryLayout",
-        "StoryTable",
-        "StoryTableCell",
-        "StoryTableRow"
-      ],
-      "storybookPath": "Display/ContactMetaDisplay"
-    },
-    {
-      "name": "CopyToClipboard",
-      "category": "Display",
-      "description": "Position of the copy icon relative to children, defaults to \"right\"",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/CopyToClipboard",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Display/CopyToClipboard"
-    },
-    {
-      "name": "CustomCell",
-      "category": "Uncategorized",
-      "description": "",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/CustomCell",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Uncategorized/CustomCell"
-    },
-    {
-      "name": "DataControls",
-      "category": "Data",
-      "description": "DataControls  A unified control bar for data display components (Lists, DataTables). Provides search, filtering, sorting, results count, and action controls with responsive layout.  All data operations (search, filter, sort) are handled server-side. This component is purely presentational and controlled.  **Features:** - Optional sticky positioning for data-heavy pages - Works with PageLayout sticky headers - Configurable z-index and offset  **Responsive Behavior:** - Narrow containers (< 640px): Two rows - Row 1: inputs (search + filter icon), Row 2: outputs (results + sort + actions) - Wide containers (≥ 640px): Single row with all controls visible  Example usage: ```tsx <DataControls resultsCount={{ count: 23, label: \"sites\" }} search={{ value: searchQuery, onChange: setSearchQuery, onClear: () => setSearchQuery(''), placeholder: \"Search sites...\" }} filters={activeFilters} onRemoveFilter={removeFilter} onClearAllFilters={clearAllFilters} onManageFilters={() => setFilterDrawerOpen(true)} sort={{ value: sortBy, options: sortOptions, onChange: setSortBy }} /> ```",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/DataControls",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Data/DataControls"
-    },
-    {
-      "name": "DataTable",
-      "category": "Data",
-      "description": "DataTable  Advanced table component with sorting, filtering, pagination, and infinite scroll. Supports custom cell renderers, column configurations, multiple display densities, and virtualization for large datasets.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/DataTable",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Data/DataTable"
-    },
-    {
-      "name": "DateCell",
-      "category": "Uncategorized",
-      "description": "",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/DateCell",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Uncategorized/DateCell"
-    },
-    {
-      "name": "DateField",
-      "category": "Form Controls",
-      "description": "Renders an Edges DateField with label, description, validation states, and optional calendar picker.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/DateField",
-      "props": [],
-      "relatedComponents": [
-        "Button",
-        "DateField"
-      ],
-      "storybookPath": "Form Controls/DateField"
-    },
-    {
-      "name": "DateRangePicker",
-      "category": "Form Controls",
-      "description": "DateRangePicker  Composed date range input with popover calendar.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/DateRangePicker",
-      "props": [],
-      "relatedComponents": [
-        "Button",
-        "DateRangePicker"
-      ],
-      "storybookPath": "Form Controls/DateRangePicker"
-    },
-    {
-      "name": "DeviceHealthBadge",
-      "category": "Display",
-      "description": "DeviceHealthBadge  Displays device health status with optional alert counts. Maps health status to feedback colors (success/warning/error). Pulsing dot for warning/error states.  @example ```tsx <DeviceHealthBadge status=\"healthy\" /> <DeviceHealthBadge status=\"warning\" alertCount={2} showCount /> <DeviceHealthBadge status=\"error\" alertCount={5} showCount /> ```",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/DeviceHealthBadge",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Display/DeviceHealthBadge"
-    },
-    {
-      "name": "DeviceMetaCell",
-      "category": "Uncategorized",
-      "description": "",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/DeviceMetaCell",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Uncategorized/DeviceMetaCell"
-    },
-    {
-      "name": "DeviceMetaDisplay",
-      "category": "Display",
-      "description": "DeviceMetaDisplay  Reusable component for displaying device metadata (manufacturer, model, logo). Supports stacked and inline layouts with size variants and optional linking.  **Stacked layout**: Large icon/logo, manufacturer name above, device type icon + model below **Inline layout**: Small icon + \"Manufacturer Model\" as single text string  Use this component directly in cards, lists, or other layouts. For DataTable cells, use DeviceMetaCell which wraps this component.  @example ```tsx // Stacked layout (default) <DeviceMetaDisplay manufacturer=\"Tesla\" model=\"Powerwall 2\" deviceType=\"battery\" layout=\"stacked\" size=\"md\" logoUrl=\"https://...\" href=\"/devices/123\" />  // Inline layout <DeviceMetaDisplay manufacturer=\"Tesla\" model=\"Powerwall 2\" deviceType=\"battery\" layout=\"inline\" size=\"sm\" href=\"/devices/123\" /> ```",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/DeviceMetaDisplay",
-      "props": [],
-      "relatedComponents": [
-        "StoryLayout",
-        "StoryTable",
-        "StoryTableCell",
-        "StoryTableRow"
-      ],
-      "storybookPath": "Display/DeviceMetaDisplay"
-    },
-    {
-      "name": "DeviceStateBadge",
-      "category": "Display",
-      "description": "DeviceStateBadge  A specialized badge component for displaying device states with smart defaults. Auto-enables pulsing dot for active states (charging, discharging, heat, cool, on). Uses semantic device state colors from the theme.  @example ```tsx <DeviceStateBadge state=\"charging\" /> <DeviceStateBadge state=\"heat\" label=\"Heating Mode\" /> <DeviceStateBadge state=\"on\" icon=\"Lightning\" /> ```",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/DeviceStateBadge",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Display/DeviceStateBadge"
-    },
-    {
-      "name": "DeviceStateCell",
-      "category": "Uncategorized",
-      "description": "",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/DeviceStateCell",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Uncategorized/DeviceStateCell"
-    },
-    {
-      "name": "DeviceStateWithMetric",
-      "category": "Display",
-      "description": "DeviceStateWithMetric  Combines a device state badge with a formatted metric display. Uses the existing FieldFormat system for flexible metric formatting. Supports horizontal layout (for tables) and vertical layout (for cards/detail views).  @example ```tsx // Battery: \"Charging | 75%\" <DeviceStateWithMetric state=\"charging\" metric={75} metricFormatter={{ type: \"number\", decimals: 0, suffix: \"%\" }} />  // Inverter: \"On | 5.2 kW\" <DeviceStateWithMetric state=\"on\" metric={5200} metricFormatter={{ type: \"power\", unit: \"kW\" }} />  // Thermostat: \"Cool | 72°F\" <DeviceStateWithMetric state=\"cool\" metric={72} metricFormatter={{ type: \"temperature\", unit: \"F\" }} /> ```",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/DeviceStateWithMetric",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Display/DeviceStateWithMetric"
-    },
-    {
-      "name": "DeviceTypeIcon",
-      "category": "Display",
-      "description": "DeviceTypeIcon  Displays a consistent icon for device types across the platform.  **Preferred usage:** Pass `iconName` explicitly (from device-config package) **Legacy usage:** Pass `deviceType` to use built-in icon mapping (deprecated)  @example ```tsx // Preferred: Explicit icon from device-config import { getDeviceTypeDisplay } from \"@texturehq/device-config\"; const display = getDeviceTypeDisplay(\"battery\"); <DeviceTypeIcon iconName={display.icon} size=\"md\" />  // Legacy: Built-in mapping (deprecated) <DeviceTypeIcon deviceType=\"battery\" size=\"md\" /> ```",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/DeviceTypeIcon",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Display/DeviceTypeIcon"
-    },
-    {
-      "name": "Dialog",
-      "category": "Overlays",
-      "description": "Dialog  Responsive modal dialog component with backdrop.  **Desktop (≥768px):** Centered modal with scale and fade animation **Mobile (<768px):** Uses Tray component for native bottom sheet experience with drag handle  Includes optional header with title/back button and footer with action buttons.  ## Usage Patterns  ### Uncontrolled with DialogTrigger (Recommended) ```tsx import { DialogTrigger, Dialog, Button } from \"@texturehq/edges\";  <DialogTrigger> <Button>Open Dialog</Button> <Dialog title=\"My Dialog\"> <p>Dialog content</p> </Dialog> </DialogTrigger> ```  ### Controlled (Advanced) ```tsx const [isOpen, setIsOpen] = useState(false);  <Dialog isOpen={isOpen} onClose={() => setIsOpen(false)} title=\"My Dialog\"> <p>Dialog content</p> </Dialog> ```",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/Dialog",
-      "props": [],
-      "relatedComponents": [
-        "Button",
-        "StoryLayout",
-        "StoryTable",
-        "StoryTableCell",
-        "StoryTableRow"
-      ],
-      "storybookPath": "Overlays/Dialog"
-    },
-    {
-      "name": "DialogHeader",
-      "category": "Uncategorized",
-      "description": "DialogHeader  Header area for dialogs with optional back arrow.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/DialogHeader",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Uncategorized/DialogHeader"
-    },
-    {
-      "name": "Drawer",
-      "category": "Overlays",
-      "description": "Drawer  Sliding panel that anchors to screen edges.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/Drawer",
-      "props": [],
-      "relatedComponents": [
-        "Button",
-        "Icon",
-        "StoryLayout",
-        "StoryTable",
-        "StoryTableCell",
-        "StoryTableRow"
-      ],
-      "storybookPath": "Overlays/Drawer"
-    },
-    {
-      "name": "EmptyState",
-      "category": "Feedback",
-      "description": "EmptyState  Minimal, composable empty state surface for communicating lack of data. Supports optional icon, description and opinionated action patterns.  Use `primaryAction` (button) and `secondaryAction` (text link) for consistent styling, or use `actions` for complete control over the action area.  The `spotlight` variant adds a subtle branded gradient background for marketing-focused empty states that encourage user behavior. Choose from different gradient patterns using the `spotlightPattern` prop.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/EmptyState",
-      "props": [],
-      "relatedComponents": [
-        "Button",
-        "TextLink"
-      ],
-      "storybookPath": "Feedback/EmptyState"
-    },
-    {
-      "name": "EnrollmentStatusBadge",
-      "category": "Display",
-      "description": "EnrollmentStatusBadge  Displays device enrollment status for programs. Color-coded status with optional program name in tooltip.  Status mapping: - enrolled → success (green) - eligible → info (blue) - pending → warning (yellow) - not_eligible → neutral (gray) - opted_out → neutral (gray)  @example ```tsx <EnrollmentStatusBadge status=\"enrolled\" programName=\"Demand Response Q4\" /> <EnrollmentStatusBadge status=\"eligible\" /> <EnrollmentStatusBadge status=\"pending\" /> ```",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/EnrollmentStatusBadge",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Display/EnrollmentStatusBadge"
-    },
-    {
-      "name": "ErrorBoundary",
-      "category": "Feedback",
-      "description": "ErrorBoundary  React error boundary component for graceful error handling. Catches JavaScript errors in child components and displays a fallback UI with retry option.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/ErrorBoundary",
-      "props": [],
-      "relatedComponents": [
-        "StoryLayout",
-        "StoryTable",
-        "StoryTableCell",
-        "StoryTableRow"
-      ],
-      "storybookPath": "Feedback/ErrorBoundary"
-    },
-    {
-      "name": "FileUpload",
-      "category": "Form Controls",
-      "description": "FileUpload  A file upload component with drag-and-drop support. Supports image preview, custom upload handlers, and file validation.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/FileUpload",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Form Controls/FileUpload"
-    },
-    {
-      "name": "FilterChips",
-      "category": "Data",
-      "description": "",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/FilterChips",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Data/FilterChips"
-    },
-    {
-      "name": "FilterDialog",
-      "category": "Data",
-      "description": "",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/FilterDialog",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Data/FilterDialog"
-    },
-    {
-      "name": "FirmwareVersionBadge",
-      "category": "Display",
-      "description": "FirmwareVersionBadge  Displays firmware version with update status indicators. Green indicator if latest, orange if update available. Compact display suitable for tables.  @example ```tsx <FirmwareVersionBadge version=\"1.2.3\" isLatest /> <FirmwareVersionBadge version=\"1.1.0\" updateAvailable /> <FirmwareVersionBadge version=\"2.0.0-beta\" /> ```",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/FirmwareVersionBadge",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Display/FirmwareVersionBadge"
-    },
-    {
-      "name": "Form",
-      "category": "Form Controls",
-      "description": "Form  Accessibility-first form wrapper with consistent spacing. Defaults to ARIA validation to use custom error styling instead of native browser tooltips.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/Form",
-      "props": [],
-      "relatedComponents": [
-        "Button",
-        "DateField",
-        "Form",
-        "TextField"
-      ],
-      "storybookPath": "Form Controls/Form"
-    },
-    {
-      "name": "FormattedCell",
-      "category": "Uncategorized",
-      "description": "",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/FormattedCell",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Uncategorized/FormattedCell"
-    },
-    {
-      "name": "FunnelSeries",
-      "category": "Charts",
-      "description": "Accessible label",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/FunnelSeries",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Charts/FunnelSeries"
-    },
-    {
-      "name": "GlobalSearch",
-      "category": "Uncategorized",
-      "description": "GlobalSearch  Complete global search experience with trigger + results. Desktop: SearchTrigger with popover below Mobile: Icon trigger with full-screen tray  Handles CMD+K shortcuts automatically.  @example ```tsx const [query, setQuery] = useState(\"\"); const [isOpen, setIsOpen] = useState(false);  <GlobalSearch value={query} onChange={setQuery} isOpen={isOpen} onOpenChange={setIsOpen} placeholder=\"Search sites, devices, contacts...\" > <SearchResultsList> <SearchResultGroup title=\"Sites\" count={2}> <SearchResultItem id=\"1\" title=\"HQ\" /> </SearchResultGroup> </SearchResultsList> </GlobalSearch> ```",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/GlobalSearch",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Uncategorized/GlobalSearch"
-    },
-    {
-      "name": "Grid",
-      "category": "Layout",
-      "description": "Child elements",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/Grid",
-      "props": [],
-      "relatedComponents": [
-        "Badge",
-        "Button",
-        "Card",
-        "Kpi",
-        "StatList",
-        "StoryLayout"
-      ],
-      "storybookPath": "Layout/Grid"
-    },
-    {
-      "name": "GridStateBadge",
-      "category": "Display",
-      "description": "GridStateBadge  A specialized badge component for displaying grid states (importing, exporting). Optionally shows directional icons to indicate power flow direction. Uses semantic grid state colors from the theme.  @example ```tsx <GridStateBadge state=\"importing\" /> <GridStateBadge state=\"exporting\" showIcon /> <GridStateBadge state=\"importing\" label=\"Grid Import\" /> ```",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/GridStateBadge",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Display/GridStateBadge"
-    },
-    {
-      "name": "Heading",
-      "category": "Typography",
-      "description": "Heading  Typography component for page/section headings with size and height options.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/Heading",
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode"
-        },
-        {
-          "name": "className",
-          "type": "string"
-        },
-        {
-          "name": "height",
-          "type": "HeadingHeight"
-        },
-        {
-          "name": "size",
-          "type": "HeadingSize"
-        },
-        {
-          "name": "tag",
-          "type": "React.ElementType"
-        }
-      ],
-      "relatedComponents": [
-        "StoryLayout",
-        "StoryTable",
-        "StoryTableCell",
-        "StoryTableRow"
-      ],
-      "storybookPath": "Typography/Heading"
-    },
-    {
-      "name": "HierarchyExplorer",
-      "category": "Components",
-      "description": "HierarchyExplorer - Main component for drill-down navigation through hierarchical data",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/HierarchyExplorer",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Components/HierarchyExplorer"
-    },
-    {
-      "name": "HorizontalBarCell",
-      "category": "Uncategorized",
-      "description": "",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/HorizontalBarCell",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Uncategorized/HorizontalBarCell"
-    },
-    {
-      "name": "HoverCard",
-      "category": "Overlays",
-      "description": "Whether to show an arrow pointing to the trigger @default false",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/HoverCard",
-      "props": [],
-      "relatedComponents": [
-        "Button"
-      ],
-      "storybookPath": "Overlays/HoverCard"
-    },
-    {
-      "name": "Icon",
-      "category": "Design Tokens",
-      "description": "Icon  Phosphor icon wrapper component with standardized sizing and styling. Provides access to the full Phosphor icon library with tree-shaking support and design system presets. - TypeScript autocomplete for all icon names  Usage: ```tsx <Icon name=\"House\" size=\"md\" /> <Icon name=\"User\" size={32} className=\"text-brand\" /> ```",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/Icon",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Design Tokens/Icon"
-    },
-    {
-      "name": "InfiniteScrollIndicator",
-      "category": "Feedback",
-      "description": "InfiniteScrollIndicator  Lightweight composition component for displaying loading states in infinite scroll contexts. Uses the Loader component for consistency.  - For initial loading: Use component-specific Skeleton implementations - For loading-more: Use this component at the bottom of lists/tables  By default, shows only a spinner (no text) to avoid internationalization concerns. Consuming applications can provide their own localized message via the `message` prop.  Example usage: ```tsx // Default: spinner only (no i18n needed) <InfiniteScrollIndicator state=\"loading-more\" />  // With localized text <InfiniteScrollIndicator state=\"loading-more\" message={t('loading.loadMore')} /> ```",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/InfiniteScrollIndicator",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Feedback/InfiniteScrollIndicator"
-    },
-    {
-      "name": "InteractiveMap",
-      "category": "Uncategorized",
-      "description": "",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/InteractiveMap",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Uncategorized/InteractiveMap"
-    },
-    {
-      "name": "Kpi",
-      "category": "Data",
-      "description": "Custom trend renderer",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/Kpi",
-      "props": [],
-      "relatedComponents": [
-        "Button",
-        "Card",
-        "Section",
-        "Select",
-        "StatList"
-      ],
-      "storybookPath": "Data/Kpi"
-    },
-    {
-      "name": "KpiGroup",
-      "category": "Data",
-      "description": "",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/KpiGroup",
-      "props": [],
-      "relatedComponents": [
-        "Button",
-        "Card",
-        "Section",
-        "Select",
-        "StatList"
-      ],
-      "storybookPath": "Data/KpiGroup"
-    },
-    {
-      "name": "LineSeries",
-      "category": "Charts",
-      "description": "LineSeries  Chart component for rendering line charts. Displays data as a continuous line with customizable stroke width, color, and dash patterns.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/LineSeries",
-      "props": [],
-      "relatedComponents": [
-        "ChartContainer"
-      ],
-      "storybookPath": "Charts/LineSeries"
-    },
-    {
-      "name": "List",
-      "category": "Lists",
-      "description": "List  A semantic wrapper and state manager for rows. Handles selection, hover, keyboard navigation, accessibility, and infinite scroll with virtualization. Composes with ListItem for visual rows.  Example usage: ```tsx <List items={sites} selectedId={selectedSiteId} onSelect={(id) => openDetail(id)} onHoverChange={(id) => highlightOnMap(id)} renderItem={({ item, rowProps, isSelected }) => ( <ListItem id={item.id} title={item.name} subtitle={item.address?.city} isSelected={isSelected} {...rowProps} /> )} // Optional: Custom loading skeleton matching your data structure renderLoadingSkeleton={() => ( <div className=\"flex items-center gap-3 px-4 py-3\"> <Skeleton width={40} height={40} variant=\"circle\" /> <div className=\"flex-1\"> <Skeleton width=\"60%\" height={16} /> <Skeleton width=\"40%\" height={12} /> </div> </div> )} loadingSkeletonCount={8} // Infinite scroll onLoadMore={loadMoreSites} hasMore={hasMoreSites} isLoading={isLoading} /> ```",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/List",
-      "props": [],
-      "relatedComponents": [
-        "Icon",
-        "Skeleton"
-      ],
-      "storybookPath": "Lists/List"
-    },
-    {
-      "name": "ListBox",
-      "category": "Form Controls",
-      "description": "ListBox  Styled wrapper around `react-aria-components` ListBox and related parts used in dropdowns and menus.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/ListBox",
-      "props": [],
-      "relatedComponents": [
-        "ListBox",
-        "ListBoxItem"
-      ],
-      "storybookPath": "Form Controls/ListBox"
-    },
-    {
-      "name": "ListBoxItem",
-      "category": "Form Controls",
-      "description": "ListBoxItem  A styled wrapper around `react-aria-components` ListBoxItem with size variants that align with Edges typography.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/ListBoxItem",
-      "props": [
-        {
-          "name": "className",
-          "type": "string"
-        },
-        {
-          "name": "size",
-          "type": "\"sm\" | \"md\" | \"lg\" | \"xl\""
-        }
-      ],
-      "relatedComponents": [],
-      "storybookPath": "Form Controls/ListBoxItem"
-    },
-    {
-      "name": "ListItem",
-      "category": "Lists",
-      "description": "",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/ListItem",
-      "props": [],
-      "relatedComponents": [
-        "Icon",
-        "Skeleton"
-      ],
-      "storybookPath": "Lists/ListItem"
-    },
-    {
-      "name": "ListPane",
-      "category": "Lists",
-      "description": "",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/ListPane",
-      "props": [],
-      "relatedComponents": [
-        "Icon",
-        "Skeleton"
-      ],
-      "storybookPath": "Lists/ListPane"
-    },
-    {
-      "name": "Loader",
-      "category": "Utility",
-      "description": "Loader  Animated loading spinner component. Displays a circular spinner with customizable size and color for loading states.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/Loader",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Utility/Loader"
-    },
-    {
-      "name": "Logo",
-      "category": "Design Tokens",
-      "description": "Logo  Brand logo component with optional wordmark. Supports customizable sizing and fill colors with theme-aware defaults.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/Logo",
-      "props": [
-        {
-          "name": "className",
-          "type": "string"
-        },
-        {
-          "name": "fill",
-          "type": "string"
-        },
-        {
-          "name": "showWordmark",
-          "type": "boolean"
-        },
-        {
-          "name": "width",
-          "type": "number"
-        }
-      ],
-      "relatedComponents": [],
-      "storybookPath": "Design Tokens/Logo"
-    },
-    {
-      "name": "MAP_TYPES",
-      "category": "Uncategorized",
-      "description": "",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/MAP_TYPES",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Uncategorized/MAP_TYPES"
-    },
-    {
-      "name": "Meter",
-      "category": "Feedback",
-      "description": "Meter  Displays a measurement within a known range, with visual indicators for different value ranges. Perfect for showing capacity, usage levels, scores, or any bounded measurement.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/Meter",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Feedback/Meter"
-    },
-    {
-      "name": "MiniBarCell",
-      "category": "Uncategorized",
-      "description": "",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/MiniBarCell",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Uncategorized/MiniBarCell"
-    },
-    {
-      "name": "ModalBackdrop",
-      "category": "Uncategorized",
-      "description": "ModalBackdrop  Shared backdrop/overlay component used by Dialog and Drawer. Wraps React Aria's ModalOverlay with consistent styling and smooth animations.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/ModalBackdrop",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Uncategorized/ModalBackdrop"
-    },
-    {
-      "name": "Notice",
-      "category": "Feedback",
-      "description": "Notice  Individual notification component that displays a message with an icon. Typically used within a NoticeProvider for managing multiple notifications.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/Notice",
-      "props": [],
-      "relatedComponents": [
-        "Button",
-        "ListBoxItem",
-        "NumberField",
-        "Select",
-        "Switch",
-        "TextField"
-      ],
-      "storybookPath": "Feedback/Notice"
-    },
-    {
-      "name": "NoticeContainer",
-      "category": "Feedback",
-      "description": "",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/NoticeContainer",
-      "props": [],
-      "relatedComponents": [
-        "Button",
-        "ListBoxItem",
-        "NumberField",
-        "Select",
-        "Switch",
-        "TextField"
-      ],
-      "storybookPath": "Feedback/NoticeContainer"
-    },
-    {
-      "name": "NoticeProvider",
-      "category": "Feedback",
-      "description": "",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/NoticeProvider",
-      "props": [],
-      "relatedComponents": [
-        "Button",
-        "ListBoxItem",
-        "NumberField",
-        "Select",
-        "Switch",
-        "TextField"
-      ],
-      "storybookPath": "Feedback/NoticeProvider"
-    },
-    {
-      "name": "NumberCell",
-      "category": "Uncategorized",
-      "description": "",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/NumberCell",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Uncategorized/NumberCell"
-    },
-    {
-      "name": "NumberField",
-      "category": "Form Controls",
-      "description": "Where to display the description text - \"below\": Show below the field (default) - \"tooltip\": Show as a tooltip on the label icon - \"inline\": Show inline with the label - \"hidden\": Don't display the description @default \"below\"",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/NumberField",
-      "props": [
-        {
-          "name": "className",
-          "type": "string"
-        },
-        {
-          "name": "defaultValue",
-          "type": "number"
-        },
-        {
-          "name": "description",
-          "type": "string"
-        },
-        {
-          "name": "errorMessage",
-          "type": "string | ((validation: ValidationResult) => string)"
-        },
-        {
-          "name": "formatOptions",
-          "type": "Intl.NumberFormatOptions"
-        },
-        {
-          "name": "id",
-          "type": "string"
-        },
-        {
-          "name": "isRequired",
-          "type": "boolean"
-        },
-        {
-          "name": "label",
-          "type": "string"
-        },
-        {
-          "name": "maxValue",
-          "type": "number"
-        },
-        {
-          "name": "minValue",
-          "type": "number"
-        },
-        {
-          "name": "onChange",
-          "type": "(value: number) => void"
-        },
-        {
-          "name": "step",
-          "type": "number"
-        },
-        {
-          "name": "tooltip",
-          "type": "string"
-        },
-        {
-          "name": "validationResult",
-          "type": "ValidationResult"
-        },
-        {
-          "name": "value",
-          "type": "number"
-        }
-      ],
-      "relatedComponents": [
-        "NumberField"
-      ],
-      "storybookPath": "Form Controls/NumberField"
-    },
-    {
-      "name": "PageBanner",
-      "category": "Feedback",
-      "description": "",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/PageBanner",
-      "props": [],
-      "relatedComponents": [
-        "Button"
-      ],
-      "storybookPath": "Feedback/PageBanner"
-    },
-    {
-      "name": "PageLayout",
-      "category": "Layout",
-      "description": "Constrain width and apply default page rhythm",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/PageLayout",
-      "props": [],
-      "relatedComponents": [
-        "Avatar",
-        "Badge",
-        "Button",
-        "Card",
-        "DataTable",
-        "Grid",
-        "Icon",
-        "Kpi",
-        "KpiGroup",
-        "Section",
-        "Select",
-        "StatList",
-        "Switch",
-        "TextField"
-      ],
-      "storybookPath": "Layout/PageLayout"
-    },
-    {
-      "name": "PercentBarCell",
-      "category": "Uncategorized",
-      "description": "",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/PercentBarCell",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Uncategorized/PercentBarCell"
-    },
-    {
-      "name": "PlaceSearch",
-      "category": "Form Controls",
-      "description": "PlaceSearch  Location search component with autocomplete; emits a `Place` value on selection.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/PlaceSearch",
-      "props": [
-        {
-          "name": "autoFocus",
-          "type": "boolean"
-        },
-        {
-          "name": "countryRestrictions",
-          "type": "string[]; // Array of ISO 3166-1 alpha-2 country codes proximity?: \"ip\" | [number, number]; // Either \"ip\" for IP-based location or [longitude, latitude] coordinates hideCountry?: boolean; // Hide country from results (useful when using countryRestrictions) showIcon?: boolean; // Show location type icons in results (default: true) useMobileTray?: boolean; // Whether to use a Tray (bottom sheet) on mobile devices instead of a Popover (default: true) className?: string"
-        },
-        {
-          "name": "defaultFilter",
-          "type": "(textValue: string, inputValue: string) => boolean"
-        },
-        {
-          "name": "defaultSelectedKey",
-          "type": "Key | null"
-        },
-        {
-          "name": "description",
-          "type": "string"
-        },
-        {
-          "name": "errorMessage",
-          "type": "string | ((validation: ValidationResult) => string)"
-        },
-        {
-          "name": "isDisabled",
-          "type": "boolean"
-        },
-        {
-          "name": "isRequired",
-          "type": "boolean"
-        },
-        {
-          "name": "label",
-          "type": "string"
-        },
-        {
-          "name": "onSelect",
-          "type": "(place: Place) => void"
-        },
-        {
-          "name": "onSelectionChange",
-          "type": "(key: Key | null) => void"
-        },
-        {
-          "name": "placeholder",
-          "type": "string"
-        },
-        {
-          "name": "searchTypes",
-          "type": "SearchType[]"
-        },
-        {
-          "name": "selectedKey",
-          "type": "Key | null"
-        },
-        {
-          "name": "showErrors",
-          "type": "boolean"
-        },
-        {
-          "name": "size",
-          "type": "\"sm\" | \"md\" | \"lg\" | \"xl\""
-        },
-        {
-          "name": "tooltip",
-          "type": "string"
-        },
-        {
-          "name": "validationResult",
-          "type": "ValidationResult"
-        }
-      ],
-      "relatedComponents": [],
-      "storybookPath": "Form Controls/PlaceSearch"
-    },
-    {
-      "name": "Popover",
-      "category": "Overlays",
-      "description": "Popover content",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/Popover",
-      "props": [],
-      "relatedComponents": [
-        "StoryLayout",
-        "StoryTable",
-        "StoryTableCell",
-        "StoryTableRow"
-      ],
-      "storybookPath": "Overlays/Popover"
-    },
-    {
-      "name": "ProgressBar",
-      "category": "Feedback",
-      "description": "ProgressBar  Linear progress indicator with optional labels.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/ProgressBar",
-      "props": [
-        {
-          "name": "hideLabels",
-          "type": "boolean"
-        },
-        {
-          "name": "label",
-          "type": "string"
-        },
-        {
-          "name": "progressWidth",
-          "type": "number"
-        },
-        {
-          "name": "rightLabel",
-          "type": "string"
-        }
-      ],
-      "relatedComponents": [
-        "ProgressBar"
-      ],
-      "storybookPath": "Feedback/ProgressBar"
-    },
-    {
-      "name": "Radio",
-      "category": "Form Controls",
-      "description": "Visual variant of the radio buttons @default \"default\"",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/Radio",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Form Controls/Radio"
-    },
-    {
-      "name": "RadioCard",
-      "category": "Form Controls",
-      "description": "Gap between items",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/RadioCard",
-      "props": [],
-      "relatedComponents": [
-        "Icon"
-      ],
-      "storybookPath": "Form Controls/RadioCard"
-    },
-    {
-      "name": "RadioCardGroup",
-      "category": "Form Controls",
-      "description": "Gap between items",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/RadioCardGroup",
-      "props": [],
-      "relatedComponents": [
-        "Icon"
-      ],
-      "storybookPath": "Form Controls/RadioCardGroup"
-    },
-    {
-      "name": "RadioGroup",
-      "category": "Form Controls",
-      "description": "Visual variant of the radio buttons @default \"default\"",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/RadioGroup",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Form Controls/RadioGroup"
-    },
-    {
-      "name": "RangeCalendar",
-      "category": "Form Controls",
-      "description": "RangeCalendar  Calendar allowing selection of a date range.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/RangeCalendar",
-      "props": [],
-      "relatedComponents": [
-        "RangeCalendar"
-      ],
-      "storybookPath": "Form Controls/RangeCalendar"
-    },
-    {
-      "name": "ResultsCount",
-      "category": "Data",
-      "description": "",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/ResultsCount",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Data/ResultsCount"
-    },
-    {
-      "name": "RichTextEditor",
-      "category": "Form Controls",
-      "description": "RichTextEditor  A rich text editor with formatting capabilities including headings, bold, italic, lists, and links. Built on top of TipTap/ProseMirror.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/RichTextEditor",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Form Controls/RichTextEditor"
-    },
-    {
-      "name": "SearchControl",
-      "category": "Data",
-      "description": "",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/SearchControl",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Data/SearchControl"
-    },
-    {
-      "name": "SearchEmptyState",
-      "category": "Uncategorized",
-      "description": "",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/SearchEmptyState",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Uncategorized/SearchEmptyState"
-    },
-    {
-      "name": "SearchLoadingState",
-      "category": "Uncategorized",
-      "description": "",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/SearchLoadingState",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Uncategorized/SearchLoadingState"
-    },
-    {
-      "name": "SearchResultGroup",
-      "category": "Uncategorized",
-      "description": "",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/SearchResultGroup",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Uncategorized/SearchResultGroup"
-    },
-    {
-      "name": "SearchResultItem",
-      "category": "Uncategorized",
-      "description": "",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/SearchResultItem",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Uncategorized/SearchResultItem"
-    },
-    {
-      "name": "SearchResultsList",
-      "category": "Uncategorized",
-      "description": "",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/SearchResultsList",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Uncategorized/SearchResultsList"
-    },
-    {
-      "name": "SearchTrigger",
-      "category": "Uncategorized",
-      "description": "",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/SearchTrigger",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Uncategorized/SearchTrigger"
-    },
-    {
-      "name": "Section",
-      "category": "Layout",
-      "description": "Label used by in-page navigation (PageLayout.Content with withSectionNav). Falls back to title when omitted",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/Section",
-      "props": [],
-      "relatedComponents": [
-        "Badge",
-        "Button",
-        "Card",
-        "DataTable",
-        "Grid",
-        "Kpi",
-        "KpiGroup",
-        "Select",
-        "Switch",
-        "TextField"
-      ],
-      "storybookPath": "Layout/Section"
-    },
-    {
-      "name": "SectionNav",
-      "category": "Navigation",
-      "description": "Custom filter function to determine which sections are visible",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/SectionNav",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Navigation/SectionNav"
-    },
-    {
-      "name": "SegmentedControl",
-      "category": "Form Controls",
-      "description": "SegmentedControl  A segmented control component for selecting between multiple options. Similar to a radio group but with a more compact, button-like appearance.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/SegmentedControl",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Form Controls/SegmentedControl"
-    },
-    {
-      "name": "Select",
-      "category": "Form Controls",
-      "description": "Whether to use a Tray (bottom sheet) on mobile devices instead of a Popover @default true",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/Select",
-      "props": [],
-      "relatedComponents": [
-        "Icon",
-        "ListBoxItem",
-        "Select",
-        "StoryLayout",
-        "StoryTable",
-        "StoryTableCell",
-        "StoryTableRow"
-      ],
-      "storybookPath": "Form Controls/Select"
-    },
-    {
-      "name": "SelectCell",
-      "category": "Uncategorized",
-      "description": "",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/SelectCell",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Uncategorized/SelectCell"
-    },
-    {
-      "name": "SideNav",
-      "category": "Navigation",
-      "description": "SideNav  Vertical navigation component for application sidebars. Supports nested navigation items, sections, collapsible categories, and mobile-responsive behavior.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/SideNav",
-      "props": [],
-      "relatedComponents": [
-        "Button",
-        "Icon"
-      ],
-      "storybookPath": "Navigation/SideNav"
-    },
-    {
-      "name": "SiteCard",
-      "category": "Display",
-      "description": "SiteCard  A card component for displaying site/location information. Can include an optional static map showing the site's location.  @example ```tsx <SiteCard streetAddress=\"123 Main St\" city=\"San Francisco\" state=\"CA\" postalCode=\"94102\" longitude={-122.4194} latitude={37.7749} showMap href=\"/sites/123\" /> ```",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/SiteCard",
-      "props": [],
-      "relatedComponents": [
-        "StoryLayout",
-        "StoryTable",
-        "StoryTableCell",
-        "StoryTableRow"
-      ],
-      "storybookPath": "Display/SiteCard"
-    },
-    {
-      "name": "SiteContactCard",
-      "category": "Display",
-      "description": "SiteContactCard  A combined card component for displaying both site and contact information. Shows site details with optional map, followed by associated contact information.  @example ```tsx <SiteContactCard site={{ streetAddress: \"123 Main St\", city: \"San Francisco\", state: \"CA\", postalCode: \"94102\", longitude: -122.4194, latitude: 37.7749, href: \"/sites/123\" }} contact={{ firstName: \"John\", lastName: \"Doe\", email: \"john.doe@example.com\", phone: \"+1 (555) 123-4567\", href: \"/contacts/123\" }} showMap /> ```",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/SiteContactCard",
-      "props": [],
-      "relatedComponents": [
-        "StoryLayout",
-        "StoryTable",
-        "StoryTableCell",
-        "StoryTableRow"
-      ],
-      "storybookPath": "Display/SiteContactCard"
-    },
-    {
-      "name": "SiteMetaCell",
-      "category": "Uncategorized",
-      "description": "",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/SiteMetaCell",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Uncategorized/SiteMetaCell"
-    },
-    {
-      "name": "SiteMetaDisplay",
-      "category": "Display",
-      "description": "SiteMetaDisplay  Reusable component for displaying site location information. Supports stacked and inline layouts with size variants and optional linking.  **Stacked layout**: MapPin icon, street address above, city/state/zip below **Inline layout**: MapPin icon + street address only (no city/state)  Use this component directly in cards, lists, or other layouts. For DataTable cells, use SiteMetaCell which wraps this component.  @example ```tsx // Stacked layout (default) <SiteMetaDisplay streetAddress=\"123 Main St\" city=\"San Francisco\" state=\"CA\" postalCode=\"94102\" layout=\"stacked\" size=\"md\" href=\"/sites/123\" />  // Inline layout <SiteMetaDisplay streetAddress=\"123 Main St\" layout=\"inline\" size=\"sm\" href=\"/sites/123\" /> ```",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/SiteMetaDisplay",
-      "props": [],
-      "relatedComponents": [
-        "StoryLayout",
-        "StoryTable",
-        "StoryTableCell",
-        "StoryTableRow"
-      ],
-      "storybookPath": "Display/SiteMetaDisplay"
-    },
-    {
-      "name": "Skeleton",
-      "category": "Feedback",
-      "description": "Skeleton  Loading placeholder component that mimics content structure. Supports various shapes, animations, and responsive configurations for skeleton screens.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/Skeleton",
-      "props": [],
-      "relatedComponents": [
-        "StoryGrid",
-        "StoryItem",
-        "StoryLayout",
-        "StorySection"
-      ],
-      "storybookPath": "Feedback/Skeleton"
-    },
-    {
-      "name": "SKELETON_SIZES",
-      "category": "Uncategorized",
-      "description": "",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/SKELETON_SIZES",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Uncategorized/SKELETON_SIZES"
-    },
-    {
-      "name": "Slider",
-      "category": "Form Controls",
-      "description": "Show the current numeric value to the right of the track",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/Slider",
-      "props": [
-        {
-          "name": "className",
-          "type": "string"
-        },
-        {
-          "name": "defaultValue",
-          "type": "number"
-        },
-        {
-          "name": "description",
-          "type": "string"
-        },
-        {
-          "name": "disabled",
-          "type": "boolean"
-        },
-        {
-          "name": "errorMessage",
-          "type": "string"
-        },
-        {
-          "name": "label",
-          "type": "string"
-        },
-        {
-          "name": "max",
-          "type": "number"
-        },
-        {
-          "name": "min",
-          "type": "number"
-        },
-        {
-          "name": "onChange",
-          "type": "(value: number) => void"
-        },
-        {
-          "name": "size",
-          "type": "Size"
-        },
-        {
-          "name": "step",
-          "type": "number"
-        },
-        {
-          "name": "tooltip",
-          "type": "string"
-        },
-        {
-          "name": "value",
-          "type": "number"
-        }
-      ],
-      "relatedComponents": [
-        "Slider",
-        "StoryLayout",
-        "StoryTable",
-        "StoryTableCell",
-        "StoryTableRow"
-      ],
-      "storybookPath": "Form Controls/Slider"
-    },
-    {
-      "name": "SortControl",
-      "category": "Data",
-      "description": "",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/SortControl",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Data/SortControl"
-    },
-    {
-      "name": "SparklineCell",
-      "category": "Uncategorized",
-      "description": "",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/SparklineCell",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Uncategorized/SparklineCell"
-    },
-    {
-      "name": "SplitPane",
-      "category": "Layout",
-      "description": "Child panels",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/SplitPane",
-      "props": [],
-      "relatedComponents": [
-        "Badge",
-        "Button",
-        "Card",
-        "Section",
-        "TextField"
-      ],
-      "storybookPath": "Layout/SplitPane"
-    },
-    {
-      "name": "StaticMap",
-      "category": "Uncategorized",
-      "description": "",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/StaticMap",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Uncategorized/StaticMap"
-    },
-    {
-      "name": "StatList",
-      "category": "Data",
-      "description": "Additional CSS classes */ className?: string; }  // Helpers  // Use the centralized formatting utility function formatValue(value: StatValue, formatter?: StatFormatter): React.ReactNode { // If value is already a React element, return it as-is (skip formatting) if (React.isValidElement(value)) { return value; }  return formatComponentValue({ value, formatter, emptyClassName: \"text-text-muted\", emptyText: \"—\", }); }  function getTone(item: StatItem): StatTone | undefined { // Check thresholds first if (item.thresholds && item.value !== null && item.value !== undefined) { for (const threshold of item.thresholds) { if (threshold.when(item.value)) { return threshold.tone; } } }  // Fall back to explicit tone return item.tone; }  const toneColors: Record<StatTone, string> = { neutral: \"text-text-body\", success: \"text-feedback-success\", warning: \"text-feedback-warning\", error: \"text-feedback-error\", info: \"text-feedback-info\", };  // StatRow Component  // Constants for auto-truncation const LONG_STRING_THRESHOLD = 24; const LONG_STRING_TRUNCATE_LENGTH = 20;  function StatRow({ item, dense, valueAlign }: { item: StatItem; dense?: boolean; valueAlign?: StatAlign }) { const tone = getTone(item); const toneClass = tone ? toneColors[tone] : \"\"; const isStacked = item.stackOnMobile;  // Check if this is a long string that should be auto-truncated on mobile const isLongString = typeof item.value === \"string\" && item.value.length > LONG_STRING_THRESHOLD && !item.formatter && !React.isValidElement(item.value);  // Get the formatted value (used for both truncated and full display) const formattedValue = formatValue(item.value, item.formatter);  // Get the truncated value for mobile display // Note: We cast to string here because isLongString already verifies typeof item.value === \"string\" const truncatedValue = isLongString ? truncateMiddle(item.value as string, LONG_STRING_TRUNCATE_LENGTH) : null;  const textToCopy = typeof item.copyable === \"function\" ? item.copyable(item.value) : String(item.value);  // PII data attributes (only set if both piiType and piiEntity are provided) const piiAttrs = item.piiType && item.piiEntity ? { \"data-pii-type\": item.piiType, \"data-pii-entity\": item.piiEntity, } : {};  // For long strings, render both truncated (mobile) and full (desktop) versions // CSS classes control which is visible based on screen size // Tooltip content is wrapped in span with PII attributes to allow masking by Curtain extension const hasPiiAttrs = Object.keys(piiAttrs).length > 0; const valueDisplay = isLongString ? ( <> {/* Mobile: show truncated with tooltip */} <Tooltip content={hasPiiAttrs ? <span {...piiAttrs}>{String(item.value)}</span> : String(item.value)}> <span className={twMerge(\"md:hidden\", item.href ? \"hover:underline cursor-pointer\" : \"\")} {...piiAttrs}> {truncatedValue} </span> </Tooltip> {/* Desktop: show full value",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/StatList",
-      "props": [],
-      "relatedComponents": [
-        "Button",
-        "Card",
-        "Grid",
-        "Icon",
-        "Section"
-      ],
-      "storybookPath": "Data/StatList"
-    },
-    {
-      "name": "Switch",
-      "category": "Form Controls",
-      "description": "Switch  Toggle switch component for binary on/off states. Provides an accessible alternative to checkboxes for settings and preferences.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/Switch",
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode"
-        }
-      ],
-      "relatedComponents": [
-        "StoryLayout",
-        "StoryTable",
-        "StoryTableCell",
-        "StoryTableRow",
-        "Switch"
-      ],
-      "storybookPath": "Form Controls/Switch"
-    },
-    {
-      "name": "Tab",
-      "category": "Navigation",
-      "description": "Tab trigger element.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/Tab",
-      "props": [],
-      "relatedComponents": [
-        "StoryLayout",
-        "StoryTable",
-        "StoryTableCell",
-        "StoryTableRow"
-      ],
-      "storybookPath": "Navigation/Tab"
-    },
-    {
-      "name": "TabList",
-      "category": "Navigation",
-      "description": "TabList container.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/TabList",
-      "props": [],
-      "relatedComponents": [
-        "StoryLayout",
-        "StoryTable",
-        "StoryTableCell",
-        "StoryTableRow"
-      ],
-      "storybookPath": "Navigation/TabList"
-    },
-    {
-      "name": "TabPanel",
-      "category": "Navigation",
-      "description": "TabPanel content area.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/TabPanel",
-      "props": [],
-      "relatedComponents": [
-        "StoryLayout",
-        "StoryTable",
-        "StoryTableCell",
-        "StoryTableRow"
-      ],
-      "storybookPath": "Navigation/TabPanel"
-    },
-    {
-      "name": "Tabs",
-      "category": "Navigation",
-      "description": "Tabs  Tabbed interface with styled tabs and panels. @param variant - \"default\" for action-default styling, \"brand\" for action-brand styling",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/Tabs",
-      "props": [],
-      "relatedComponents": [
-        "StoryLayout",
-        "StoryTable",
-        "StoryTableCell",
-        "StoryTableRow"
-      ],
-      "storybookPath": "Navigation/Tabs"
-    },
-    {
-      "name": "TextArea",
-      "category": "Form Controls",
-      "description": "Allow user resizing of the textarea. Defaults to false (non-resizable). When true, enables vertical resize.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/TextArea",
-      "props": [
-        {
-          "name": "description",
-          "type": "string"
-        },
-        {
-          "name": "errorMessage",
-          "type": "string | ((validation: ValidationResult) => string)"
-        },
-        {
-          "name": "isDisabled",
-          "type": "boolean"
-        },
-        {
-          "name": "isInvalid",
-          "type": "boolean"
-        },
-        {
-          "name": "label",
-          "type": "string"
-        },
-        {
-          "name": "size",
-          "type": "Size"
-        },
-        {
-          "name": "tooltip",
-          "type": "string"
-        },
-        {
-          "name": "validationResult",
-          "type": "ValidationResult"
-        }
-      ],
-      "relatedComponents": [],
-      "storybookPath": "Form Controls/TextArea"
-    },
-    {
-      "name": "TextAreaWithChips",
-      "category": "Form Controls",
-      "description": "TextAreaWithChips  Enhanced textarea component with chip/tag support. Enables rich text input with embedded chips for mentions, tags, or structured data entry.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/TextAreaWithChips",
-      "props": [
-        {
-          "name": "chips",
-          "type": "ChipData[]"
-        },
-        {
-          "name": "chipSize",
-          "type": "Size"
-        },
-        {
-          "name": "chipVariant",
-          "type": "\"default\" | \"brand\" | \"secondary\""
-        },
-        {
-          "name": "description",
-          "type": "string"
-        },
-        {
-          "name": "errorMessage",
-          "type": "string | ((validation: ValidationResult) => string)"
-        },
-        {
-          "name": "isDisabled",
-          "type": "boolean"
-        },
-        {
-          "name": "isInvalid",
-          "type": "boolean"
-        },
-        {
-          "name": "label",
-          "type": "string"
-        },
-        {
-          "name": "onChange",
-          "type": "(value: string) => void"
-        },
-        {
-          "name": "onChipsChange",
-          "type": "(chips: ChipData[]) => void"
-        },
-        {
-          "name": "onTriggerDetected",
-          "type": "(triggerInfo: TriggerInfo) => void"
-        },
-        {
-          "name": "onTriggerDismissed",
-          "type": "() => void"
-        },
-        {
-          "name": "renderChip",
-          "type": "(chip: ChipData, onRemove: () => void) => React.ReactNode"
-        },
-        {
-          "name": "size",
-          "type": "Size"
-        },
-        {
-          "name": "tooltip",
-          "type": "string"
-        },
-        {
-          "name": "triggerPattern",
-          "type": "string | RegExp"
-        },
-        {
-          "name": "validationResult",
-          "type": "ValidationResult"
-        },
-        {
-          "name": "value",
-          "type": "string"
-        }
-      ],
-      "relatedComponents": [],
-      "storybookPath": "Form Controls/TextAreaWithChips"
-    },
-    {
-      "name": "TextCell",
-      "category": "Uncategorized",
-      "description": "",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/TextCell",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Uncategorized/TextCell"
-    },
-    {
-      "name": "TextField",
-      "category": "Form Controls",
-      "description": "Renders an Edges TextField with label, description, validation states and optional search/clear/password affordances.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/TextField",
-      "props": [
-        {
-          "name": "className",
-          "type": "string"
-        },
-        {
-          "name": "description",
-          "type": "string"
-        },
-        {
-          "name": "errorMessage",
-          "type": "string | ((validation: ValidationResult) => string)"
-        },
-        {
-          "name": "isRequired",
-          "type": "boolean"
-        },
-        {
-          "name": "label",
-          "type": "string"
-        },
-        {
-          "name": "placeholder",
-          "type": "string"
-        },
-        {
-          "name": "tooltip",
-          "type": "string"
-        },
-        {
-          "name": "validationResult",
-          "type": "ValidationResult"
-        }
-      ],
-      "relatedComponents": [
-        "StoryLayout",
-        "StoryTable",
-        "StoryTableCell",
-        "StoryTableRow",
-        "TextField"
-      ],
-      "storybookPath": "Form Controls/TextField"
-    },
-    {
-      "name": "TextLink",
-      "category": "Navigation",
-      "description": "TextLink  Styled text link component for navigation and actions. Supports internal/external links, button mode, and multiple visual variants.  @param LinkComponent - Optional custom Link component (e.g., Next.js Link) for client-side navigation",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/TextLink",
-      "props": [
-        {
-          "name": "alwaysUnderlined",
-          "type": "boolean"
-        },
-        {
-          "name": "asButton",
-          "type": "boolean"
-        },
-        {
-          "name": "children",
-          "type": "ReactNode"
-        },
-        {
-          "name": "className",
-          "type": "string"
-        },
-        {
-          "name": "external",
-          "type": "boolean"
-        },
-        {
-          "name": "href",
-          "type": "string"
-        },
-        {
-          "name": "onClick",
-          "type": "(e: React.MouseEvent<HTMLAnchorElement>) => void"
-        },
-        {
-          "name": "onPress",
-          "type": "() => void"
-        },
-        {
-          "name": "showArrow",
-          "type": "boolean"
-        },
-        {
-          "name": "title",
-          "type": "string"
-        },
-        {
-          "name": "variant",
-          "type": "\"default\" | \"brand\" | \"muted\" | \"unstyled\""
-        }
-      ],
-      "relatedComponents": [],
-      "storybookPath": "Navigation/TextLink"
-    },
-    {
-      "name": "TimeControls",
-      "category": "Charts",
-      "description": "TimeControls  Sophisticated time control component with responsive behavior and calendar integration. Features preset ranges, custom date picker, and window size selection.  **Responsive Behavior:** - < 600px: Compact mode with Select dropdowns - ≥ 600px: Expanded mode with ToggleButton group for presets  @example ```tsx const [dateRange, setDateRange] = useState({ after: subDays(new Date(), 7), before: new Date() }); const [windowSize, setWindowSize] = useState<WindowSize>(\"HOUR\");  <TimeControls dateRange={dateRange} onDateRangeChange={setDateRange} windowSize={windowSize} onWindowSizeChange={setWindowSize} presetRanges={presetRanges} allowDatePicker /> ```",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/TimeControls",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Charts/TimeControls"
-    },
-    {
-      "name": "TimeField",
-      "category": "Form Controls",
-      "description": "Renders an Edges TimeField with label, description, validation states, and segmented time input.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/TimeField",
-      "props": [
-        {
-          "name": "className",
-          "type": "string"
-        },
-        {
-          "name": "description",
-          "type": "string"
-        },
-        {
-          "name": "errorMessage",
-          "type": "string | ((validation: ValidationResult) => string)"
-        },
-        {
-          "name": "isRequired",
-          "type": "boolean"
-        },
-        {
-          "name": "label",
-          "type": "string"
-        },
-        {
-          "name": "placeholder",
-          "type": "string"
-        },
-        {
-          "name": "tooltip",
-          "type": "string"
-        },
-        {
-          "name": "validationResult",
-          "type": "ValidationResult"
-        }
-      ],
-      "relatedComponents": [
-        "Button",
-        "TimeField"
-      ],
-      "storybookPath": "Form Controls/TimeField"
-    },
-    {
-      "name": "Timeline",
-      "category": "Display",
-      "description": "Timeline  A vertical timeline component for displaying hierarchical or sequential information. Connects items with a visual line to show relationships or flow.  @example ```tsx <Timeline> <TimelineItem>First item</TimelineItem> <TimelineItem>Second item</TimelineItem> <TimelineItem>Third item</TimelineItem> </Timeline> ```",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/Timeline",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Display/Timeline"
-    },
-    {
-      "name": "TimelineItem",
-      "category": "Display",
-      "description": "",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/TimelineItem",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Display/TimelineItem"
-    },
-    {
-      "name": "ToggleButton",
-      "category": "Form Controls",
-      "description": "Value used for group selection state",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/ToggleButton",
-      "props": [
-        {
-          "name": "badgeNumber",
-          "type": "number"
-        },
-        {
-          "name": "badgePosition",
-          "type": "\"top-right\" | \"top-left\" | \"bottom-right\" | \"bottom-left\""
-        },
-        {
-          "name": "badgeVariant",
-          "type": "\"primary\" | \"destructive\""
-        },
-        {
-          "name": "borderLeft",
-          "type": "boolean"
-        },
-        {
-          "name": "borderRadius",
-          "type": "\"left\" | \"right\""
-        },
-        {
-          "name": "borderRight",
-          "type": "boolean"
-        },
-        {
-          "name": "children",
-          "type": "React.ReactNode"
-        },
-        {
-          "name": "className",
-          "type": "string"
-        },
-        {
-          "name": "icon",
-          "type": "IconName"
-        },
-        {
-          "name": "iconPosition",
-          "type": "\"left\" | \"right\""
-        },
-        {
-          "name": "iconWeight",
-          "type": "\"thin\" | \"light\" | \"regular\" | \"bold\" | \"fill\" | \"duotone\""
-        },
-        {
-          "name": "isDisabled",
-          "type": "boolean"
-        },
-        {
-          "name": "isLoading",
-          "type": "boolean"
-        },
-        {
-          "name": "isSelected",
-          "type": "boolean"
-        },
-        {
-          "name": "loadingIndicator",
-          "type": "React.ReactNode"
-        },
-        {
-          "name": "loadingText",
-          "type": "string"
-        },
-        {
-          "name": "onChange",
-          "type": "(isSelected: boolean) => void"
-        },
-        {
-          "name": "onPress",
-          "type": "() => void"
-        },
-        {
-          "name": "size",
-          "type": "Size"
-        },
-        {
-          "name": "variant",
-          "type": "\"default\" | \"brand\""
-        }
-      ],
-      "relatedComponents": [
-        "StoryLayout",
-        "StoryTable",
-        "StoryTableCell",
-        "StoryTableRow",
-        "ToggleButton"
-      ],
-      "storybookPath": "Form Controls/ToggleButton"
-    },
-    {
-      "name": "Tooltip",
-      "category": "Overlays",
-      "description": "Tooltip  Lightweight content container that appears on hover/focus/press.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/Tooltip",
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode"
-        },
-        {
-          "name": "content",
-          "type": "React.ReactNode"
-        }
-      ],
-      "relatedComponents": [],
-      "storybookPath": "Overlays/Tooltip"
-    },
-    {
-      "name": "TopNav",
-      "category": "Layout",
-      "description": "TopNav  Horizontal navigation bar component for application headers. Includes mobile menu toggle, user avatar, theme switcher, and customizable action areas.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/TopNav",
-      "props": [],
-      "relatedComponents": [
-        "Avatar",
-        "GlobalSearch",
-        "SearchEmptyState",
-        "SearchLoadingState",
-        "SearchResultGroup",
-        "SearchResultItem",
-        "SearchResultsList"
-      ],
-      "storybookPath": "Layout/TopNav"
-    },
-    {
-      "name": "Tray",
-      "category": "Overlays",
-      "description": "Tray  Bottom anchored overlay optimized for mobile experiences. Provides optional header/footer slots that align with Dialog & Drawer APIs.",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/Tray",
-      "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Overlays/Tray"
-    }
-  ],
-  "categories": {
-    "Form Controls": [
-      "ActionMenu",
-      "Autocomplete",
-      "Button",
-      "Calendar",
-      "Checkbox",
-      "CheckboxGroup",
-      "ChipInputField",
-      "CodeEditor",
-      "ColorField",
-      "DateField",
-      "DateRangePicker",
-      "FileUpload",
-      "Form",
-      "ListBox",
-      "ListBoxItem",
-      "NumberField",
-      "PlaceSearch",
-      "Radio",
-      "RadioCard",
-      "RadioCardGroup",
-      "RadioGroup",
-      "RangeCalendar",
-      "RichTextEditor",
-      "SegmentedControl",
-      "Select",
-      "Slider",
-      "Switch",
-      "TextArea",
-      "TextAreaWithChips",
-      "TextField",
-      "TimeField",
-      "ToggleButton"
-    ],
-    "Activity": [
-      "ActivityFeed",
-      "ActivityFeedGroup",
-      "ActivityItem"
-    ],
-    "Overlays": [
-      "Alert",
-      "Confirm",
-      "Dialog",
-      "Drawer",
-      "HoverCard",
-      "Popover",
-      "Tooltip",
-      "Tray"
-    ],
-    "Layout": [
-      "AppShell",
-      "Card",
-      "CardContent",
-      "CardFooter",
-      "CardHeader",
-      "CardMedia",
-      "Collapse",
-      "CollapseContent",
-      "CollapseHeader",
-      "CollapseItem",
-      "Grid",
-      "PageLayout",
-      "Section",
-      "SplitPane",
-      "TopNav"
-    ],
-    "Display": [
-      "Avatar",
-      "Badge",
-      "Chip",
-      "ConnectionStatusBadge",
-      "ContactCard",
-      "ContactMetaDisplay",
-      "CopyToClipboard",
-      "DeviceHealthBadge",
-      "DeviceMetaDisplay",
-      "DeviceStateBadge",
-      "DeviceStateWithMetric",
-      "DeviceTypeIcon",
-      "EnrollmentStatusBadge",
-      "FirmwareVersionBadge",
-      "GridStateBadge",
-      "SiteCard",
-      "SiteContactCard",
-      "SiteMetaDisplay",
-      "Timeline",
-      "TimelineItem"
-    ],
-    "Feedback": [
-      "Banner",
-      "EmptyState",
-      "ErrorBoundary",
-      "InfiniteScrollIndicator",
-      "Meter",
-      "Notice",
-      "NoticeContainer",
-      "NoticeProvider",
-      "PageBanner",
-      "ProgressBar",
-      "Skeleton"
-    ],
-    "Navigation": [
-      "BreadcrumbItem",
-      "Breadcrumbs",
-      "SectionNav",
-      "SideNav",
-      "Tab",
-      "TabList",
-      "TabPanel",
-      "Tabs",
-      "TextLink"
-    ],
-    "Components": [
-      "CarouselAutoplayTrigger",
-      "CarouselControl",
-      "CarouselIndicator",
-      "CarouselIndicatorGroup",
-      "CarouselItem",
-      "CarouselItemGroup",
-      "CarouselNextTrigger",
-      "CarouselPrevTrigger",
-      "CarouselProgressText",
-      "CarouselRoot",
-      "HierarchyExplorer"
-    ],
-    "Charts": [
-      "AreaSeries",
-      "BarSeries",
-      "CategoryBarChart",
-      "ChartAxis",
-      "ChartContainer",
-      "ChartEventMarkers",
-      "FunnelSeries",
-      "LineSeries",
-      "TimeControls"
-    ],
-    "Uncategorized": [
-      "ActionCell",
-      "BadgeCell",
-      "BooleanCell",
-      "ChartBottomBar",
-      "ChartTooltip",
-      "CommandPalette",
-      "ContactMetaCell",
-      "CustomCell",
-      "DateCell",
-      "DeviceMetaCell",
-      "DeviceStateCell",
-      "DialogHeader",
-      "FormattedCell",
-      "GlobalSearch",
-      "HorizontalBarCell",
-      "InteractiveMap",
-      "MAP_TYPES",
-      "MiniBarCell",
-      "ModalBackdrop",
-      "NumberCell",
-      "PercentBarCell",
-      "SKELETON_SIZES",
-      "SearchEmptyState",
-      "SearchLoadingState",
-      "SearchResultGroup",
-      "SearchResultItem",
-      "SearchResultsList",
-      "SearchTrigger",
-      "SelectCell",
-      "SiteMetaCell",
-      "SparklineCell",
-      "StaticMap",
-      "TextCell"
-    ],
-    "Data": [
-      "AutoMobileRenderer",
-      "CardMobileRenderer",
-      "DataControls",
-      "DataTable",
-      "FilterChips",
-      "FilterDialog",
-      "Kpi",
-      "KpiGroup",
-      "ResultsCount",
-      "SearchControl",
-      "SortControl",
-      "StatList"
-    ],
-    "Typography": [
-      "Heading"
-    ],
-    "Design Tokens": [
-      "Icon",
-      "Logo"
-    ],
-    "Lists": [
-      "List",
-      "ListItem",
-      "ListPane"
-    ],
-    "Utility": [
-      "Loader"
-    ]
-  }
-}