@texturehq/edges 1.7.1 → 1.7.3

package/dist/components.manifest.json

@@ -1,142 +1,74 @@
 {
-  "version": "1.7.1",
-  "generatedAt": "2025-10-15T19:41:30.334Z",
+  "version": "1.7.3",
+  "generatedAt": "2025-10-16T14:43:20.650Z",
   "components": [
     {
       "name": "ActionCell",
+      "category": "Uncategorized",
+      "description": "",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/ActionCell",
-      "description": "",
-      "props": []
+      "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",
-      "description": "ActionMenu  A dropdown menu for actions, typically triggered by a button. Supports icons, destructive actions, and flexible alignment.",
-      "props": [
-        {
-          "name": "items",
-          "type": "ActionItem[]"
-        },
-        {
-          "name": "children",
-          "type": "ReactNode"
-        },
-        {
-          "name": "align",
-          "type": "\"left\" | \"right\""
-        },
-        {
-          "name": "size",
-          "type": "\"sm\" | \"md\""
-        },
-        {
-          "name": "textAlign",
-          "type": "\"left\" | \"right\""
-        },
-        {
-          "name": "className",
-          "type": "string"
-        },
-        {
-          "name": "onAction",
-          "type": "(item: ActionItem) => void"
-        }
-      ]
+      "props": [],
+      "relatedComponents": [
+        "Button",
+        "Icon"
+      ],
+      "storybookPath": "Form Controls/ActionMenu"
     },
     {
       "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",
-      "description": "Alert  A simple alert dialog with a single action button. Use for informational messages that require acknowledgment.",
-      "props": [
-        {
-          "name": "isOpen",
-          "type": "boolean"
-        },
-        {
-          "name": "onClose",
-          "type": "() => void"
-        },
-        {
-          "name": "title",
-          "type": "string"
-        },
-        {
-          "name": "message",
-          "type": "React.ReactNode"
-        },
-        {
-          "name": "confirmLabel",
-          "type": "string"
-        },
-        {
-          "name": "confirmVariant",
-          "type": "DialogAction[\"variant\"]"
-        },
-        {
-          "name": "maxWidth",
-          "type": "string"
-        },
-        {
-          "name": "minWidth",
-          "type": "string"
-        }
-      ]
+      "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",
-      "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",
-      "props": [
-        {
-          "name": "sideNav",
-          "type": "Omit<SideNavProps, \"mobileMenuId\" | \"sidebarCollapseId\">"
-        },
-        {
-          "name": "topNav",
-          "type": "Pick<"
-        },
-        {
-          "name": "children",
-          "type": "React.ReactNode"
-        },
-        {
-          "name": "contentPaddingX",
-          "type": "string"
-        },
-        {
-          "name": "contentPaddingY",
-          "type": "string"
-        },
-        {
-          "name": "showSidebarBorder",
-          "type": "boolean"
-        },
-        {
-          "name": "mainClassName",
-          "type": "string"
-        },
-        {
-          "name": "enableJsEnhancements",
-          "type": "boolean"
-        }
-      ]
+      "props": [],
+      "relatedComponents": [
+        "Button"
+      ],
+      "storybookPath": "Layout/AppShell"
     },
     {
       "name": "AreaSeries",
+      "category": "Uncategorized",
+      "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",
-      "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.",
-      "props": []
+      "props": [],
+      "relatedComponents": [],
+      "storybookPath": "Uncategorized/AreaSeries"
     },
     {
       "name": "Autocomplete",
+      "category": "Form Controls",
+      "description": "Autocomplete  Text input with typeahead suggestions and keyboard navigation.",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/Autocomplete",
-      "description": "Autocomplete  Text input with typeahead suggestions and keyboard navigation.",
       "props": [
         {
           "name": "label",
@@ -226,144 +158,95 @@
           "name": "autoFocus",
           "type": "boolean"
         }
-      ]
+      ],
+      "relatedComponents": [
+        "StoryLayout",
+        "StoryTable",
+        "StoryTableCell",
+        "StoryTableRow"
+      ],
+      "storybookPath": "Form Controls/Autocomplete"
     },
     {
       "name": "AutoMobileRenderer",
+      "category": "Data",
+      "description": "",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/AutoMobileRenderer",
-      "description": "",
-      "props": []
+      "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",
-      "description": "Avatar  Display user, team, or organization avatars with support for images, initials, and fallback icons. Includes optional status indicators.",
-      "props": [
-        {
-          "name": "src",
-          "type": "string"
-        },
-        {
-          "name": "alt",
-          "type": "string"
-        },
-        {
-          "name": "firstName",
-          "type": "string"
-        },
-        {
-          "name": "lastName",
-          "type": "string"
-        },
-        {
-          "name": "fullName",
-          "type": "string"
-        },
-        {
-          "name": "onClick",
-          "type": "() => void"
-        },
-        {
-          "name": "size",
-          "type": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\""
-        },
-        {
-          "name": "shape",
-          "type": "\"circle\" | \"square\""
-        },
-        {
-          "name": "variant",
-          "type": "\"user\" | \"team\" | \"organization\""
-        },
-        {
-          "name": "className",
-          "type": "string"
-        },
-        {
-          "name": "status",
-          "type": "\"online\" | \"offline\" | \"away\" | \"busy\""
-        },
-        {
-          "name": "bordered",
-          "type": "boolean"
-        }
-      ]
+      "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.",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/Badge",
-      "description": "Badge  A non-interactive label for displaying status, counts, or categories. Use for read-only indicators. For interactive elements, use Chip instead.",
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode"
-        },
-        {
-          "name": "variant",
-          "type": "\"default\" | \"success\" | \"error\" | \"warning\" | \"info\" | \"primary\" | \"secondary\" | \"neutral\""
-        },
-        {
-          "name": "size",
-          "type": "\"sm\" | \"md\" | \"lg\""
-        },
-        {
-          "name": "shape",
-          "type": "\"pill\" | \"rounded\" | \"square\""
-        },
-        {
-          "name": "dot",
-          "type": "boolean"
-        },
-        {
-          "name": "dotPosition",
-          "type": "\"left\" | \"right\""
-        },
-        {
-          "name": "className",
-          "type": "string"
-        }
-      ]
+      "props": [],
+      "relatedComponents": [],
+      "storybookPath": "Display/Badge"
     },
     {
       "name": "BarSeries",
+      "category": "Uncategorized",
+      "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",
-      "description": "BarSeries  Chart component for rendering bar/column charts. Displays data as vertical bars with customizable colors, opacity, and category-based coloring.",
-      "props": []
+      "props": [],
+      "relatedComponents": [],
+      "storybookPath": "Uncategorized/BarSeries"
     },
     {
       "name": "BooleanCell",
+      "category": "Uncategorized",
+      "description": "",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/BooleanCell",
-      "description": "",
-      "props": []
+      "props": [],
+      "relatedComponents": [],
+      "storybookPath": "Uncategorized/BooleanCell"
     },
     {
       "name": "Breadcrumb",
+      "category": "Navigation",
+      "description": "Breadcrumbs  Navigation breadcrumbs that show the user's current location in the hierarchy",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/Breadcrumb",
-      "description": "Breadcrumbs  Navigation breadcrumbs that show the user's current location in the hierarchy",
-      "props": []
+      "props": [],
+      "relatedComponents": [],
+      "storybookPath": "Navigation/Breadcrumb"
     },
     {
       "name": "Breadcrumbs",
+      "category": "Navigation",
+      "description": "Breadcrumbs  Navigation breadcrumbs that show the user's current location in the hierarchy",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/Breadcrumbs",
-      "description": "Breadcrumbs  Navigation breadcrumbs that show the user's current location in the hierarchy",
-      "props": []
+      "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",
-      "description": "Renders an Edges Button. When `href` is provided, renders a link-styled button using the same visual system.",
       "props": [
         {
           "name": "variant",
-          "type": "\"default\" | \"primary\" | \"secondary\" | \"destructive\" | \"icon\" | \"link\" | \"unstyled\" | \"ghost\""
+          "type": "| \"default\" | \"primary\" | \"secondary\" | \"destructive\" | \"icon\" | \"link\" | \"unstyled\" | \"ghost\""
         },
         {
           "name": "size",
@@ -429,20 +312,33 @@
           "name": "style",
           "type": "React.CSSProperties"
         }
-      ]
+      ],
+      "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",
-      "description": "Calendar  Single-date calendar primitive with Edges styling.",
-      "props": []
+      "props": [],
+      "relatedComponents": [],
+      "storybookPath": "Form Controls/Calendar"
     },
     {
       "name": "Card",
+      "category": "Layout",
+      "description": "Card - Enterprise surface container component  A flexible, composable card component following enterprise design system best practices. Supports modular content sections with consistent styling and accessibility.  Usage: ```tsx <Card variant=\"outlined\" size=\"md\"> <Card.Header title=\"Card Title\" subtitle=\"Optional subtitle\" actions={<Button variant=\"ghost\" icon=\"MoreHorizontal\" />} /> <Card.Media src=\"image.jpg\" alt=\"Description\" /> <Card.Content> <p>Main content goes here</p> </Card.Content> <Card.Footer> <Button variant=\"primary\">Action</Button> </Card.Footer> </Card> ```",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/Card",
-      "description": "Card - Enterprise surface container component  A flexible, composable card component following enterprise design system best practices. Supports modular content sections with consistent styling and accessibility.  Usage: ```tsx <Card variant=\"outlined\" size=\"md\"> <Card.Header title=\"Card Title\" subtitle=\"Optional subtitle\" actions={<Button variant=\"ghost\" icon=\"MoreHorizontal\" />} /> <Card.Media src=\"image.jpg\" alt=\"Description\" /> <Card.Content> <p>Main content goes here</p> </Card.Content> <Card.Footer> <Button variant=\"primary\">Action</Button> </Card.Footer> </Card> ```",
       "props": [
         {
           "name": "variant",
@@ -460,27 +356,42 @@
           "name": "isLoading",
           "type": "boolean"
         }
-      ]
+      ],
+      "relatedComponents": [
+        "Avatar",
+        "Badge",
+        "Button",
+        "Icon",
+        "StoryLayout"
+      ],
+      "storybookPath": "Layout/Card"
     },
     {
       "name": "CardMobileRenderer",
+      "category": "Data",
+      "description": "",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/CardMobileRenderer",
-      "description": "",
-      "props": []
+      "props": [],
+      "relatedComponents": [],
+      "storybookPath": "Data/CardMobileRenderer"
     },
     {
       "name": "ChartAxis",
+      "category": "Uncategorized",
+      "description": "ChartAxis  Chart axis components for rendering X and Y axes. Provides formatted bottom (time) and left (numeric) axes with customizable tick formatting.",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/ChartAxis",
-      "description": "ChartAxis  Chart axis components for rendering X and Y axes. Provides formatted bottom (time) and left (numeric) axes with customizable tick formatting.",
-      "props": []
+      "props": [],
+      "relatedComponents": [],
+      "storybookPath": "Uncategorized/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.",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/ChartBottomBar",
-      "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.",
       "props": [
         {
           "name": "items",
@@ -490,39 +401,57 @@
           "name": "onExport",
           "type": "(type: ExportType) => void | Promise<void>"
         }
-      ]
+      ],
+      "relatedComponents": [],
+      "storybookPath": "Uncategorized/ChartBottomBar"
     },
     {
       "name": "ChartContainer",
+      "category": "Data",
+      "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",
-      "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.",
-      "props": []
+      "props": [],
+      "relatedComponents": [
+        "AreaSeries",
+        "BarSeries",
+        "LineSeries"
+      ],
+      "storybookPath": "Data/ChartContainer"
     },
     {
       "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.",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/ChartTooltip",
-      "description": "ChartTooltip  Interactive tooltip component for charts. Displays formatted data values at hover position with automatic positioning and animations.",
-      "props": []
+      "props": [],
+      "relatedComponents": [],
+      "storybookPath": "Uncategorized/ChartTooltip"
     },
     {
       "name": "Checkbox",
+      "category": "Form Controls",
+      "description": "Checkbox  Single checkbox with Edges visuals.",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/Checkbox",
-      "description": "Checkbox  Single checkbox with Edges visuals.",
       "props": [
         {
           "name": "children",
           "type": "ReactNode | ((props: CheckboxRenderProps) => ReactNode)"
         }
-      ]
+      ],
+      "relatedComponents": [
+        "Checkbox"
+      ],
+      "storybookPath": "Form Controls/Checkbox"
     },
     {
       "name": "CheckboxGroup",
+      "category": "Form Controls",
+      "description": "Checkbox  Single checkbox with Edges visuals.",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/CheckboxGroup",
-      "description": "Checkbox  Single checkbox with Edges visuals.",
       "props": [
         {
           "name": "label",
@@ -540,486 +469,230 @@
           "name": "errorMessage",
           "type": "string | ((validation: ValidationResult) => 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",
-      "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.",
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode"
-        },
-        {
-          "name": "onRemove",
-          "type": "() => void"
-        },
-        {
-          "name": "size",
-          "type": "Size"
-        },
-        {
-          "name": "variant",
-          "type": "\"default\" | \"primary\" | \"secondary\""
-        },
-        {
-          "name": "isRemovable",
-          "type": "boolean"
-        },
-        {
-          "name": "isDisabled",
-          "type": "boolean"
-        },
-        {
-          "name": "className",
-          "type": "string"
-        },
-        {
-          "name": "onClick",
-          "type": "() => void"
-        }
-      ]
+      "props": [],
+      "relatedComponents": [],
+      "storybookPath": "Display/Chip"
     },
     {
       "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",
-      "description": "CodeEditor  A code editor component with syntax highlighting and various language support. Built on top of Ace Editor.",
-      "props": [
-        {
-          "name": "value",
-          "type": "string"
-        },
-        {
-          "name": "readOnly",
-          "type": "boolean"
-        },
-        {
-          "name": "onChange",
-          "type": "(value: string) => void"
-        },
-        {
-          "name": "language",
-          "type": "CodeLanguage"
-        },
-        {
-          "name": "theme",
-          "type": "CodeTheme"
-        },
-        {
-          "name": "height",
-          "type": "string"
-        },
-        {
-          "name": "width",
-          "type": "string"
-        },
-        {
-          "name": "className",
-          "type": "string"
-        },
-        {
-          "name": "lineHeight",
-          "type": "number"
-        },
-        {
-          "name": "minLines",
-          "type": "number"
-        },
-        {
-          "name": "maxLines",
-          "type": "number"
-        },
-        {
-          "name": "showLineNumbers",
-          "type": "boolean"
-        },
-        {
-          "name": "showGutter",
-          "type": "boolean"
-        },
-        {
-          "name": "fontSize",
-          "type": "number"
-        },
-        {
-          "name": "wrapEnabled",
-          "type": "boolean"
-        }
-      ]
+      "props": [],
+      "relatedComponents": [],
+      "storybookPath": "Form Controls/CodeEditor"
     },
     {
       "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",
-      "description": "Confirm  A confirmation dialog with confirm and cancel actions. Use for actions that require user confirmation before proceeding.",
-      "props": [
-        {
-          "name": "isOpen",
-          "type": "boolean"
-        },
-        {
-          "name": "onClose",
-          "type": "() => void"
-        },
-        {
-          "name": "onConfirm",
-          "type": "() => void"
-        },
-        {
-          "name": "title",
-          "type": "string"
-        },
-        {
-          "name": "message",
-          "type": "React.ReactNode"
-        },
-        {
-          "name": "confirmLabel",
-          "type": "string"
-        },
-        {
-          "name": "cancelLabel",
-          "type": "string"
-        },
-        {
-          "name": "confirmVariant",
-          "type": "DialogAction[\"variant\"]"
-        },
-        {
-          "name": "isDestructive",
-          "type": "boolean"
-        },
-        {
-          "name": "isLoading",
-          "type": "boolean"
-        },
-        {
-          "name": "maxWidth",
-          "type": "string"
-        },
-        {
-          "name": "minWidth",
-          "type": "string"
-        }
-      ]
+      "props": [],
+      "relatedComponents": [
+        "Button",
+        "StoryLayout",
+        "StoryTable",
+        "StoryTableCell",
+        "StoryTableRow"
+      ],
+      "storybookPath": "Overlays/Confirm"
     },
     {
       "name": "CopyToClipboard",
+      "category": "Display",
+      "description": "Size of the copy button, defaults to \"sm\"",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/CopyToClipboard",
-      "description": "Size of the copy button, defaults to \"sm\"",
-      "props": [
-        {
-          "name": "value",
-          "type": "string"
-        },
-        {
-          "name": "children",
-          "type": "React.ReactNode"
-        },
-        {
-          "name": "className",
-          "type": "string"
-        },
-        {
-          "name": "size",
-          "type": "\"sm\" | \"md\""
-        }
-      ]
+      "props": [],
+      "relatedComponents": [],
+      "storybookPath": "Display/CopyToClipboard"
     },
     {
       "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.  **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",
-      "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.  **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 }} /> ```",
-      "props": [
-        {
-          "name": "search",
-          "type": "{"
-        },
-        {
-          "name": "value",
-          "type": "string"
-        },
-        {
-          "name": "onChange",
-          "type": "(value: string) => void"
-        },
-        {
-          "name": "onClear",
-          "type": "() => void"
-        },
-        {
-          "name": "placeholder",
-          "type": "string"
-        }
-      ]
+      "props": [],
+      "relatedComponents": [],
+      "storybookPath": "Data/DataControls"
     },
     {
       "name": "DataTable",
+      "category": "Data",
+      "description": "DataTable  Advanced table component with sorting, filtering, pagination, and mobile-responsive views. Supports custom cell renderers, column configurations, and multiple display densities.",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/DataTable",
-      "description": "DataTable  Advanced table component with sorting, filtering, pagination, and mobile-responsive views. Supports custom cell renderers, column configurations, and multiple display densities.",
-      "props": []
+      "props": [],
+      "relatedComponents": [],
+      "storybookPath": "Data/DataTable"
     },
     {
       "name": "DateCell",
+      "category": "Uncategorized",
+      "description": "",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/DateCell",
-      "description": "",
-      "props": []
+      "props": [],
+      "relatedComponents": [],
+      "storybookPath": "Uncategorized/DateCell"
     },
     {
       "name": "DateField",
+      "category": "Form Controls",
+      "description": "Whether to show a calendar button for date selection @default false",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/DateField",
-      "description": "Whether to show a calendar button for date selection @default false",
-      "props": []
+      "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",
-      "description": "DateRangePicker  Composed date range input with popover calendar.",
-      "props": []
+      "props": [],
+      "relatedComponents": [
+        "Button",
+        "DateRangePicker"
+      ],
+      "storybookPath": "Form Controls/DateRangePicker"
     },
     {
       "name": "Dialog",
+      "category": "Overlays",
+      "description": "Dialog  Responsive modal dialog component with backdrop.  **Desktop (≥768px):** Centered modal with scale and fade animation **Mobile (<768px):** Bottom sheet that slides up from bottom  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",
-      "description": "Dialog  Responsive modal dialog component with backdrop.  **Desktop (≥768px):** Centered modal with scale and fade animation **Mobile (<768px):** Bottom sheet that slides up from bottom  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> ```",
-      "props": [
-        {
-          "name": "isOpen",
-          "type": "boolean"
-        },
-        {
-          "name": "onClose",
-          "type": "() => void"
-        },
-        {
-          "name": "children",
-          "type": "React.ReactNode"
-        },
-        {
-          "name": "transparentOverlay",
-          "type": "boolean"
-        },
-        {
-          "name": "maxWidth",
-          "type": "string"
-        },
-        {
-          "name": "minWidth",
-          "type": "string"
-        },
-        {
-          "name": "contentPadding",
-          "type": "boolean"
-        },
-        {
-          "name": "className",
-          "type": "string"
-        }
-      ]
+      "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",
-      "description": "DialogHeader  Header area for dialogs with optional back arrow.",
-      "props": []
+      "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",
-      "description": "Drawer  Sliding panel that anchors to screen edges.",
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode"
-        },
-        {
-          "name": "isOpen",
-          "type": "boolean"
-        },
-        {
-          "name": "slideInFrom",
-          "type": "\"left\" | \"right\""
-        },
-        {
-          "name": "transparentOverlay",
-          "type": "boolean"
-        },
-        {
-          "name": "onClose",
-          "type": "() => void"
-        },
-        {
-          "name": "className",
-          "type": "string"
-        },
-        {
-          "name": "contentPadding",
-          "type": "boolean"
-        },
-        {
-          "name": "maxWidth",
-          "type": "string"
-        }
-      ]
+      "props": [],
+      "relatedComponents": [
+        "Button",
+        "Icon",
+        "StoryLayout",
+        "StoryTable",
+        "StoryTableCell",
+        "StoryTableRow"
+      ],
+      "storybookPath": "Overlays/Drawer"
     },
     {
       "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",
-      "description": "ErrorBoundary  React error boundary component for graceful error handling. Catches JavaScript errors in child components and displays a fallback UI with retry option.",
-      "props": []
+      "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",
-      "description": "FileUpload  A file upload component with drag-and-drop support. Supports image preview, custom upload handlers, and file validation.",
-      "props": [
-        {
-          "name": "value",
-          "type": "string"
-        },
-        {
-          "name": "onChange",
-          "type": "(file: File | null, url?: string) => void"
-        },
-        {
-          "name": "onUrlChange",
-          "type": "(url: string) => void"
-        },
-        {
-          "name": "accept",
-          "type": "string"
-        },
-        {
-          "name": "maxSize",
-          "type": "number"
-        },
-        {
-          "name": "isDisabled",
-          "type": "boolean"
-        },
-        {
-          "name": "onUpload",
-          "type": "(file: File) => Promise<string>"
-        },
-        {
-          "name": "className",
-          "type": "string"
-        },
-        {
-          "name": "showPreview",
-          "type": "boolean"
-        },
-        {
-          "name": "placeholder",
-          "type": "string"
-        }
-      ]
+      "props": [],
+      "relatedComponents": [],
+      "storybookPath": "Form Controls/FileUpload"
     },
     {
       "name": "FilterChips",
+      "category": "Data",
+      "description": "",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/FilterChips",
-      "description": "",
-      "props": [
-        {
-          "name": "search",
-          "type": "{"
-        },
-        {
-          "name": "value",
-          "type": "string"
-        },
-        {
-          "name": "onChange",
-          "type": "(value: string) => void"
-        },
-        {
-          "name": "onClear",
-          "type": "() => void"
-        },
-        {
-          "name": "placeholder",
-          "type": "string"
-        }
-      ]
+      "props": [],
+      "relatedComponents": [],
+      "storybookPath": "Data/FilterChips"
     },
     {
       "name": "Form",
+      "category": "Form Controls",
+      "description": "Form  Accessibility-first form wrapper with consistent spacing.",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/Form",
-      "description": "Form  Accessibility-first form wrapper with consistent spacing.",
-      "props": []
+      "props": [],
+      "relatedComponents": [
+        "Button",
+        "DateField",
+        "Form",
+        "TextField"
+      ],
+      "storybookPath": "Form Controls/Form"
     },
     {
       "name": "Grid",
+      "category": "Layout",
+      "description": "Child elements",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/Grid",
-      "description": "Child elements",
-      "props": [
-        {
-          "name": "cols",
-          "type": "ResponsiveValue<GridCols>"
-        },
-        {
-          "name": "gap",
-          "type": "GridGap"
-        },
-        {
-          "name": "gapY",
-          "type": "GridGap"
-        },
-        {
-          "name": "gapX",
-          "type": "GridGap"
-        },
-        {
-          "name": "align",
-          "type": "GridAlign"
-        },
-        {
-          "name": "justify",
-          "type": "GridJustify"
-        },
-        {
-          "name": "flow",
-          "type": "GridFlow"
-        },
-        {
-          "name": "autoFit",
-          "type": "string"
-        },
-        {
-          "name": "autoFill",
-          "type": "string"
-        },
-        {
-          "name": "className",
-          "type": "string"
-        },
-        {
-          "name": "children",
-          "type": "React.ReactNode"
-        }
-      ]
+      "props": [],
+      "relatedComponents": [
+        "Badge",
+        "Button",
+        "Card",
+        "Kpi",
+        "StatList",
+        "StoryLayout"
+      ],
+      "storybookPath": "Layout/Grid"
     },
     {
       "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",
-      "description": "Heading  Typography component for page/section headings with size and height options.",
       "props": [
         {
           "name": "tag",
@@ -1041,144 +714,114 @@
           "name": "children",
           "type": "React.ReactNode"
         }
-      ]
+      ],
+      "relatedComponents": [
+        "StoryLayout",
+        "StoryTable",
+        "StoryTableCell",
+        "StoryTableRow"
+      ],
+      "storybookPath": "Typography/Heading"
     },
     {
       "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",
-      "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\" /> ```",
-      "props": []
+      "props": [],
+      "relatedComponents": [],
+      "storybookPath": "Design Tokens/Icon"
     },
     {
       "name": "InteractiveMap",
+      "category": "Uncategorized",
+      "description": "",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/InteractiveMap",
-      "description": "",
-      "props": []
+      "props": [],
+      "relatedComponents": [],
+      "storybookPath": "Uncategorized/InteractiveMap"
     },
     {
       "name": "Kpi",
+      "category": "Data",
+      "description": "Custom trend renderer",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/Kpi",
-      "description": "Custom trend renderer",
-      "props": [
-        {
-          "name": "label",
-          "type": "React.ReactNode"
-        },
-        {
-          "name": "value",
-          "type": "number | string"
-        },
-        {
-          "name": "formatter",
-          "type": "KpiFormatter"
-        },
-        {
-          "name": "delta",
-          "type": "number"
-        },
-        {
-          "name": "deltaPeriodLabel",
-          "type": "string"
-        },
-        {
-          "name": "deltaIntent",
-          "type": "\"upIsGood\" | \"downIsGood\""
-        },
-        {
-          "name": "trend",
-          "type": "TrendPoint[]"
-        },
-        {
-          "name": "status",
-          "type": "{"
-        },
-        {
-          "name": "value",
-          "type": "string"
-        },
-        {
-          "name": "tone",
-          "type": "KpiStatus"
-        }
-      ]
+      "props": [],
+      "relatedComponents": [
+        "Button",
+        "Card",
+        "Section",
+        "Select",
+        "StatList"
+      ],
+      "storybookPath": "Data/Kpi"
     },
     {
       "name": "KpiGroup",
+      "category": "Data",
+      "description": "",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/KpiGroup",
-      "description": "",
-      "props": [
-        {
-          "name": "label",
-          "type": "React.ReactNode"
-        },
-        {
-          "name": "value",
-          "type": "number | string"
-        },
-        {
-          "name": "formatter",
-          "type": "KpiFormatter"
-        },
-        {
-          "name": "delta",
-          "type": "number"
-        },
-        {
-          "name": "deltaPeriodLabel",
-          "type": "string"
-        },
-        {
-          "name": "deltaIntent",
-          "type": "\"upIsGood\" | \"downIsGood\""
-        },
-        {
-          "name": "trend",
-          "type": "TrendPoint[]"
-        },
-        {
-          "name": "status",
-          "type": "{"
-        },
-        {
-          "name": "value",
-          "type": "string"
-        },
-        {
-          "name": "tone",
-          "type": "KpiStatus"
-        }
-      ]
+      "props": [],
+      "relatedComponents": [
+        "Button",
+        "Card",
+        "Section",
+        "Select",
+        "StatList"
+      ],
+      "storybookPath": "Data/KpiGroup"
     },
     {
       "name": "LineSeries",
+      "category": "Uncategorized",
+      "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",
-      "description": "LineSeries  Chart component for rendering line charts. Displays data as a continuous line with customizable stroke width, color, and dash patterns.",
-      "props": []
+      "props": [],
+      "relatedComponents": [],
+      "storybookPath": "Uncategorized/LineSeries"
     },
     {
       "name": "List",
+      "category": "Lists",
+      "description": "List  A semantic wrapper and state manager for rows. Handles selection, hover, keyboard navigation, and accessibility. 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} /> )} /> ```",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/List",
-      "description": "List  A semantic wrapper and state manager for rows. Handles selection, hover, keyboard navigation, and accessibility. 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} /> )} /> ```",
-      "props": []
+      "props": [],
+      "relatedComponents": [
+        "Button",
+        "Icon",
+        "ListStoryContainer",
+        "StoryLayout",
+        "StoryTable",
+        "StoryTableCell",
+        "StoryTableRow"
+      ],
+      "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",
-      "description": "ListBox  Styled wrapper around `react-aria-components` ListBox and related parts used in dropdowns and menus.",
-      "props": []
+      "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",
-      "description": "ListBoxItem  A styled wrapper around `react-aria-components` ListBoxItem with size variants that align with Edges typography.",
       "props": [
         {
           "name": "size",
@@ -1188,47 +831,62 @@
           "name": "className",
           "type": "string"
         }
-      ]
+      ],
+      "relatedComponents": [],
+      "storybookPath": "Form Controls/ListBoxItem"
     },
     {
       "name": "ListItem",
+      "category": "Lists",
+      "description": "",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/ListItem",
-      "description": "",
-      "props": []
+      "props": [],
+      "relatedComponents": [
+        "Button",
+        "Icon",
+        "ListStoryContainer",
+        "StoryLayout",
+        "StoryTable",
+        "StoryTableCell",
+        "StoryTableRow"
+      ],
+      "storybookPath": "Lists/ListItem"
     },
     {
       "name": "ListPane",
+      "category": "Lists",
+      "description": "",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/ListPane",
-      "description": "",
-      "props": []
+      "props": [],
+      "relatedComponents": [
+        "Button",
+        "Icon",
+        "ListStoryContainer",
+        "StoryLayout",
+        "StoryTable",
+        "StoryTableCell",
+        "StoryTableRow"
+      ],
+      "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",
-      "description": "Loader  Animated loading spinner component. Displays a circular spinner with customizable size and color for loading states.",
-      "props": [
-        {
-          "name": "className",
-          "type": "string"
-        },
-        {
-          "name": "size",
-          "type": "number"
-        },
-        {
-          "name": "color",
-          "type": "string"
-        }
-      ]
+      "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",
-      "description": "Logo  Brand logo component with optional wordmark. Supports customizable sizing and fill colors with theme-aware defaults.",
       "props": [
         {
           "name": "className",
@@ -1246,183 +904,104 @@
           "name": "fill",
           "type": "string"
         }
-      ]
+      ],
+      "relatedComponents": [],
+      "storybookPath": "Design Tokens/Logo"
     },
     {
       "name": "MAP_TYPES",
+      "category": "Uncategorized",
+      "description": "",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/MAP_TYPES",
-      "description": "",
-      "props": []
+      "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",
-      "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.",
-      "props": [
-        {
-          "name": "label",
-          "type": "string"
-        },
-        {
-          "name": "size",
-          "type": "\"sm\" | \"md\" | \"lg\""
-        },
-        {
-          "name": "variant",
-          "type": "\"default\" | \"success\" | \"warning\" | \"error\" | \"info\""
-        },
-        {
-          "name": "showWarningIndicator",
-          "type": "boolean"
-        },
-        {
-          "name": "warningThreshold",
-          "type": "number"
-        },
-        {
-          "name": "className",
-          "type": "string"
-        }
-      ]
+      "props": [],
+      "relatedComponents": [],
+      "storybookPath": "Feedback/Meter"
     },
     {
       "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",
-      "description": "ModalBackdrop  Shared backdrop/overlay component used by Dialog and Drawer. Wraps React Aria's ModalOverlay with consistent styling and smooth animations.",
-      "props": [
-        {
-          "name": "transparent",
-          "type": "boolean"
-        },
-        {
-          "name": "className",
-          "type": "string"
-        }
-      ]
+      "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",
-      "description": "Notice  Individual notification component that displays a message with an icon. Typically used within a NoticeProvider for managing multiple notifications.",
-      "props": [
-        {
-          "name": "id",
-          "type": "string"
-        },
-        {
-          "name": "message",
-          "type": "string"
-        },
-        {
-          "name": "variant",
-          "type": "NoticeVariant"
-        },
-        {
-          "name": "duration",
-          "type": "number"
-        },
-        {
-          "name": "dismissible",
-          "type": "boolean"
-        },
-        {
-          "name": "onDismiss",
-          "type": "() => void"
-        },
-        {
-          "name": "className",
-          "type": "string"
-        }
-      ]
+      "props": [],
+      "relatedComponents": [
+        "Button",
+        "NumberField",
+        "Select",
+        "Switch",
+        "TextField"
+      ],
+      "storybookPath": "Feedback/Notice"
     },
     {
       "name": "NoticeContainer",
+      "category": "Feedback",
+      "description": "",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/NoticeContainer",
-      "description": "",
-      "props": [
-        {
-          "name": "id",
-          "type": "string"
-        },
-        {
-          "name": "message",
-          "type": "string"
-        },
-        {
-          "name": "variant",
-          "type": "NoticeVariant"
-        },
-        {
-          "name": "duration",
-          "type": "number"
-        },
-        {
-          "name": "dismissible",
-          "type": "boolean"
-        },
-        {
-          "name": "onDismiss",
-          "type": "() => void"
-        },
-        {
-          "name": "className",
-          "type": "string"
-        }
-      ]
+      "props": [],
+      "relatedComponents": [
+        "Button",
+        "NumberField",
+        "Select",
+        "Switch",
+        "TextField"
+      ],
+      "storybookPath": "Feedback/NoticeContainer"
     },
-    {
-      "name": "NoticeProvider",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/NoticeProvider",
-      "description": "",
-      "props": [
-        {
-          "name": "id",
-          "type": "string"
-        },
-        {
-          "name": "message",
-          "type": "string"
-        },
-        {
-          "name": "variant",
-          "type": "NoticeVariant"
-        },
-        {
-          "name": "duration",
-          "type": "number"
-        },
-        {
-          "name": "dismissible",
-          "type": "boolean"
-        },
-        {
-          "name": "onDismiss",
-          "type": "() => void"
-        },
-        {
-          "name": "className",
-          "type": "string"
-        }
-      ]
+    {
+      "name": "NoticeProvider",
+      "category": "Feedback",
+      "description": "",
+      "importRoot": "@texturehq/edges",
+      "importPath": "@texturehq/edges/components/NoticeProvider",
+      "props": [],
+      "relatedComponents": [
+        "Button",
+        "NumberField",
+        "Select",
+        "Switch",
+        "TextField"
+      ],
+      "storybookPath": "Feedback/NoticeProvider"
     },
     {
       "name": "NumberCell",
+      "category": "Uncategorized",
+      "description": "",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/NumberCell",
-      "description": "",
-      "props": []
+      "props": [],
+      "relatedComponents": [],
+      "storybookPath": "Uncategorized/NumberCell"
     },
     {
       "name": "NumberField",
+      "category": "Form Controls",
+      "description": "NumberField  Numeric input with stepper controls and validation.",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/NumberField",
-      "description": "NumberField  Numeric input with stepper controls and validation.",
       "props": [
         {
           "name": "value",
@@ -1484,41 +1063,43 @@
           "name": "validationResult",
           "type": "ValidationResult"
         }
-      ]
+      ],
+      "relatedComponents": [
+        "NumberField"
+      ],
+      "storybookPath": "Form Controls/NumberField"
     },
     {
       "name": "PageLayout",
+      "category": "Layout",
+      "description": "Constrain width and apply default page rhythm",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/PageLayout",
-      "description": "Constrain width and apply default page rhythm",
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode"
-        },
-        {
-          "name": "maxWidth",
-          "type": "number"
-        },
-        {
-          "name": "paddingXClass",
-          "type": "string"
-        },
-        {
-          "name": "paddingYClass",
-          "type": "string"
-        },
-        {
-          "name": "className",
-          "type": "string"
-        }
-      ]
+      "props": [],
+      "relatedComponents": [
+        "Avatar",
+        "Badge",
+        "Button",
+        "Card",
+        "DataTable",
+        "Grid",
+        "Icon",
+        "Kpi",
+        "KpiGroup",
+        "Section",
+        "Select",
+        "StatList",
+        "Switch",
+        "TextField"
+      ],
+      "storybookPath": "Layout/PageLayout"
     },
     {
       "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",
-      "description": "PlaceSearch  Location search component with autocomplete; emits a `Place` value on selection.",
       "props": [
         {
           "name": "label",
@@ -1587,365 +1168,220 @@
         {
           "name": "validationResult",
           "type": "ValidationResult"
-        },
-        {
-          "name": "countryRestrictions",
-          "type": "string[]"
-        },
-        {
-          "name": "proximity",
-          "type": "\"ip\" | [number, number]"
         }
-      ]
+      ],
+      "relatedComponents": [],
+      "storybookPath": "Form Controls/PlaceSearch"
     },
     {
       "name": "Popover",
+      "category": "Overlays",
+      "description": "Popover content",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/Popover",
-      "description": "Popover content",
-      "props": [
-        {
-          "name": "showArrow",
-          "type": "boolean"
-        },
-        {
-          "name": "withBackdrop",
-          "type": "boolean"
-        },
-        {
-          "name": "isDismissable",
-          "type": "boolean"
-        },
-        {
-          "name": "children",
-          "type": "React.ReactNode"
-        }
-      ]
+      "props": [],
+      "relatedComponents": [
+        "StoryLayout",
+        "StoryTable",
+        "StoryTableCell",
+        "StoryTableRow"
+      ],
+      "storybookPath": "Overlays/Popover"
     },
     {
       "name": "ProgressBar",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/ProgressBar",
+      "category": "Feedback",
       "description": "ProgressBar  Linear progress indicator with optional labels.",
-      "props": [
-        {
-          "name": "label",
-          "type": "string"
-        },
-        {
-          "name": "rightLabel",
-          "type": "string"
-        },
-        {
-          "name": "progressWidth",
-          "type": "number"
-        },
-        {
-          "name": "hideLabels",
-          "type": "boolean"
-        }
-      ]
-    },
-    {
-      "name": "Radio",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/Radio",
-      "description": "Validation result object for functional errorMessage",
-      "props": [
-        {
-          "name": "label",
-          "type": "string"
-        },
-        {
-          "name": "children",
-          "type": "ReactNode"
-        },
-        {
-          "name": "description",
-          "type": "string"
-        },
-        {
-          "name": "errorMessage",
-          "type": "string | ((validation: ValidationResult) => string)"
-        },
-        {
-          "name": "validationResult",
-          "type": "ValidationResult"
-        }
-      ]
-    },
-    {
-      "name": "RadioGroup",
       "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/RadioGroup",
-      "description": "Validation result object for functional errorMessage",
+      "importPath": "@texturehq/edges/components/ProgressBar",
       "props": [
         {
           "name": "label",
           "type": "string"
         },
         {
-          "name": "children",
-          "type": "ReactNode"
-        },
-        {
-          "name": "description",
-          "type": "string"
-        },
-        {
-          "name": "errorMessage",
-          "type": "string | ((validation: ValidationResult) => string)"
-        },
-        {
-          "name": "validationResult",
-          "type": "ValidationResult"
-        }
-      ]
-    },
-    {
-      "name": "RangeCalendar",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/RangeCalendar",
-      "description": "RangeCalendar  Calendar allowing selection of a date range.",
-      "props": []
-    },
-    {
-      "name": "ResultsCount",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/ResultsCount",
-      "description": "",
-      "props": [
-        {
-          "name": "search",
-          "type": "{"
-        },
-        {
-          "name": "value",
-          "type": "string"
-        },
-        {
-          "name": "onChange",
-          "type": "(value: string) => void"
-        },
-        {
-          "name": "onClear",
-          "type": "() => void"
-        },
-        {
-          "name": "placeholder",
-          "type": "string"
-        }
-      ]
-    },
-    {
-      "name": "RichTextEditor",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/RichTextEditor",
-      "description": "RichTextEditor  A rich text editor with formatting capabilities including headings, bold, italic, lists, and links. Built on top of TipTap/ProseMirror.",
-      "props": [
-        {
-          "name": "initialContent",
-          "type": "string"
-        },
-        {
-          "name": "onChange",
-          "type": "(html: string) => void"
-        },
-        {
-          "name": "className",
-          "type": "string"
-        },
-        {
-          "name": "isDisabled",
-          "type": "boolean"
-        },
-        {
-          "name": "placeholder",
-          "type": "string"
-        }
-      ]
-    },
-    {
-      "name": "SearchControl",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/SearchControl",
-      "description": "",
-      "props": [
-        {
-          "name": "search",
-          "type": "{"
-        },
-        {
-          "name": "value",
-          "type": "string"
-        },
-        {
-          "name": "onChange",
-          "type": "(value: string) => void"
-        },
-        {
-          "name": "onClear",
-          "type": "() => void"
-        },
-        {
-          "name": "placeholder",
-          "type": "string"
-        }
-      ]
-    },
-    {
-      "name": "Section",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/Section",
-      "description": "Section content",
-      "props": [
-        {
-          "name": "title",
-          "type": "React.ReactNode"
-        },
-        {
-          "name": "description",
-          "type": "React.ReactNode"
-        },
-        {
-          "name": "actions",
-          "type": "React.ReactNode"
-        },
-        {
-          "name": "variant",
-          "type": "SectionVariant"
-        },
-        {
-          "name": "spacing",
-          "type": "SectionSpacing"
-        },
-        {
-          "name": "withDivider",
-          "type": "boolean"
-        },
-        {
-          "name": "headingAs",
-          "type": "\"h2\" | \"h3\" | \"h4\""
-        },
-        {
-          "name": "className",
-          "type": "string"
-        },
-        {
-          "name": "children",
-          "type": "React.ReactNode"
-        }
-      ]
-    },
-    {
-      "name": "SegmentedControl",
-      "importRoot": "@texturehq/edges",
-      "importPath": "@texturehq/edges/components/SegmentedControl",
-      "description": "SegmentedControl  A segmented control component for selecting between multiple options. Similar to a radio group but with a more compact, button-like appearance.",
-      "props": [
-        {
-          "name": "options",
-          "type": "SegmentOption[]"
-        },
-        {
-          "name": "value",
-          "type": "string"
-        },
-        {
-          "name": "onChange",
-          "type": "(value: string) => void"
-        },
-        {
-          "name": "size",
-          "type": "\"sm\" | \"md\" | \"lg\" | \"xl\""
-        },
-        {
-          "name": "className",
+          "name": "rightLabel",
           "type": "string"
         },
         {
-          "name": "isDisabled",
+          "name": "progressWidth",
+          "type": "number"
+        },
+        {
+          "name": "hideLabels",
           "type": "boolean"
         }
-      ]
+      ],
+      "relatedComponents": [
+        "ProgressBar"
+      ],
+      "storybookPath": "Feedback/ProgressBar"
+    },
+    {
+      "name": "Radio",
+      "category": "Form Controls",
+      "description": "Validation result object for functional errorMessage",
+      "importRoot": "@texturehq/edges",
+      "importPath": "@texturehq/edges/components/Radio",
+      "props": [],
+      "relatedComponents": [],
+      "storybookPath": "Form Controls/Radio"
+    },
+    {
+      "name": "RadioGroup",
+      "category": "Form Controls",
+      "description": "Validation result object for functional errorMessage",
+      "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": "Section",
+      "category": "Layout",
+      "description": "Section content",
+      "importRoot": "@texturehq/edges",
+      "importPath": "@texturehq/edges/components/Section",
+      "props": [],
+      "relatedComponents": [
+        "Badge",
+        "Button",
+        "Card",
+        "DataTable",
+        "Grid",
+        "Kpi",
+        "KpiGroup",
+        "Select",
+        "Switch",
+        "TextField"
+      ],
+      "storybookPath": "Layout/Section"
+    },
+    {
+      "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 transparent background",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/Select",
-      "description": "Whether to use transparent background",
-      "props": []
+      "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",
-      "description": "",
-      "props": []
+      "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",
-      "description": "SideNav  Vertical navigation component for application sidebars. Supports nested navigation items, sections, collapsible categories, and mobile-responsive behavior.",
-      "props": [
-        {
-          "name": "topItems",
-          "type": "SideNavItem[] | SideNavSection[]"
-        },
-        {
-          "name": "bottomItems",
-          "type": "SideNavItem[]"
-        },
-        {
-          "name": "bottomContent",
-          "type": "React.ReactNode"
-        },
-        {
-          "name": "logo",
-          "type": "React.ReactNode"
-        },
-        {
-          "name": "showLogo",
-          "type": "boolean"
-        },
-        {
-          "name": "linkComponent",
-          "type": "React.ElementType"
-        },
-        {
-          "name": "className",
-          "type": "string"
-        },
-        {
-          "name": "mobileMenuId",
-          "type": "string"
-        },
-        {
-          "name": "sidebarCollapseId",
-          "type": "string"
-        }
-      ]
+      "props": [],
+      "relatedComponents": [
+        "Button",
+        "Icon"
+      ],
+      "storybookPath": "Navigation/SideNav"
     },
     {
       "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",
-      "description": "Skeleton  Loading placeholder component that mimics content structure. Supports various shapes, animations, and responsive configurations for skeleton screens.",
-      "props": []
+      "props": [],
+      "relatedComponents": [
+        "StoryGrid",
+        "StoryItem",
+        "StoryLayout",
+        "StorySection"
+      ],
+      "storybookPath": "Feedback/Skeleton"
     },
     {
       "name": "SKELETON_SIZES",
+      "category": "Uncategorized",
+      "description": "",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/SKELETON_SIZES",
-      "description": "",
-      "props": []
+      "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",
-      "description": "Show the current numeric value to the right of the track",
       "props": [
         {
           "name": "label",
@@ -1998,206 +1434,152 @@
         {
           "name": "disabled",
           "type": "boolean"
-        },
-        {
-          "name": "showValue",
-          "type": "boolean"
         }
-      ]
+      ],
+      "relatedComponents": [
+        "Slider",
+        "StoryLayout",
+        "StoryTable",
+        "StoryTableCell",
+        "StoryTableRow"
+      ],
+      "storybookPath": "Form Controls/Slider"
     },
     {
       "name": "SortControl",
+      "category": "Data",
+      "description": "",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/SortControl",
-      "description": "",
-      "props": [
-        {
-          "name": "search",
-          "type": "{"
-        },
-        {
-          "name": "value",
-          "type": "string"
-        },
-        {
-          "name": "onChange",
-          "type": "(value: string) => void"
-        },
-        {
-          "name": "onClear",
-          "type": "() => void"
-        },
-        {
-          "name": "placeholder",
-          "type": "string"
-        }
-      ]
+      "props": [],
+      "relatedComponents": [],
+      "storybookPath": "Data/SortControl"
     },
     {
       "name": "SplitPane",
+      "category": "Layout",
+      "description": "Child panels",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/SplitPane",
-      "description": "Child panels",
-      "props": [
-        {
-          "name": "asideWidth",
-          "type": "number | string"
-        },
-        {
-          "name": "asideHeight",
-          "type": "number | string"
-        },
-        {
-          "name": "minAsideWidth",
-          "type": "number"
-        },
-        {
-          "name": "minAsideHeight",
-          "type": "number"
-        },
-        {
-          "name": "minMainWidth",
-          "type": "number"
-        },
-        {
-          "name": "minMainHeight",
-          "type": "number"
-        },
-        {
-          "name": "orientation",
-          "type": "SplitPaneOrientation"
-        },
-        {
-          "name": "resizable",
-          "type": "boolean"
-        },
-        {
-          "name": "onAsideResize",
-          "type": "(size: number) => void"
-        },
-        {
-          "name": "onResizeStart",
-          "type": "() => void"
-        },
-        {
-          "name": "onResizeEnd",
-          "type": "() => void"
-        },
-        {
-          "name": "className",
-          "type": "string"
-        },
-        {
-          "name": "dividerClassName",
-          "type": "string"
-        },
-        {
-          "name": "children",
-          "type": "React.ReactNode"
-        }
-      ]
+      "props": [],
+      "relatedComponents": [
+        "Badge",
+        "Button",
+        "Card",
+        "Section",
+        "TextField"
+      ],
+      "storybookPath": "Layout/SplitPane"
     },
     {
       "name": "StaticMap",
+      "category": "Uncategorized",
+      "description": "",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/StaticMap",
-      "description": "",
-      "props": []
+      "props": [],
+      "relatedComponents": [],
+      "storybookPath": "Uncategorized/StaticMap"
     },
     {
       "name": "StatList",
+      "category": "Data",
+      "description": "Additional CSS classes",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/StatList",
-      "description": "Additional CSS classes",
-      "props": [
-        {
-          "name": "items",
-          "type": "StatItem[]"
-        },
-        {
-          "name": "layout",
-          "type": "StatLayout"
-        },
-        {
-          "name": "dense",
-          "type": "boolean"
-        },
-        {
-          "name": "valueAlign",
-          "type": "StatAlign"
-        },
-        {
-          "name": "showDividers",
-          "type": "boolean"
-        },
-        {
-          "name": "skeleton",
-          "type": "boolean"
-        },
-        {
-          "name": "empty",
-          "type": "boolean"
-        },
-        {
-          "name": "error",
-          "type": "string | React.ReactNode"
-        },
-        {
-          "name": "className",
-          "type": "string"
-        }
-      ]
+      "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",
-      "description": "Switch  Toggle switch component for binary on/off states. Provides an accessible alternative to checkboxes for settings and preferences.",
       "props": [
         {
           "name": "children",
           "type": "React.ReactNode"
         }
-      ]
+      ],
+      "relatedComponents": [
+        "Switch"
+      ],
+      "storybookPath": "Form Controls/Switch"
     },
     {
       "name": "Tab",
+      "category": "Navigation",
+      "description": "Tabs  Tabbed interface with styled tabs and panels. @param variant - \"default\" for gray styling, \"accent\" for brand color styling",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/Tab",
-      "description": "Tabs  Tabbed interface with styled tabs and panels. @param variant - \"default\" for gray styling, \"accent\" for brand color styling",
-      "props": []
+      "props": [],
+      "relatedComponents": [
+        "StoryLayout",
+        "StoryTable",
+        "StoryTableCell",
+        "StoryTableRow"
+      ],
+      "storybookPath": "Navigation/Tab"
     },
     {
       "name": "TabList",
+      "category": "Navigation",
+      "description": "TabList container.",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/TabList",
-      "description": "TabList container.",
-      "props": []
+      "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",
-      "description": "TabPanel content area.",
-      "props": []
+      "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 gray styling, \"accent\" for brand color styling",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/Tabs",
-      "description": "Tabs  Tabbed interface with styled tabs and panels. @param variant - \"default\" for gray styling, \"accent\" for brand color styling",
-      "props": [
-        {
-          "name": "variant",
-          "type": "TabVariant"
-        }
-      ]
+      "props": [],
+      "relatedComponents": [
+        "StoryLayout",
+        "StoryTable",
+        "StoryTableCell",
+        "StoryTableRow"
+      ],
+      "storybookPath": "Navigation/Tabs"
     },
     {
       "name": "TextArea",
+      "category": "Form Controls",
+      "description": "TextArea  Multi-line text input with Edges styling, label, description, and error.",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/TextArea",
-      "description": "TextArea  Multi-line text input with Edges styling, label, description, and error.",
       "props": [
         {
           "name": "label",
@@ -2231,13 +1613,16 @@
           "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",
-      "description": "TextAreaWithChips  Enhanced textarea component with chip/tag support. Enables rich text input with embedded chips for mentions, tags, or structured data entry.",
       "props": [
         {
           "name": "label",
@@ -2311,20 +1696,26 @@
           "name": "chipSize",
           "type": "Size"
         }
-      ]
+      ],
+      "relatedComponents": [],
+      "storybookPath": "Form Controls/TextAreaWithChips"
     },
     {
       "name": "TextCell",
+      "category": "Uncategorized",
+      "description": "",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/TextCell",
-      "description": "",
-      "props": []
+      "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",
-      "description": "Renders an Edges TextField with label, description, validation states and optional search/clear/password affordances.",
       "props": [
         {
           "name": "label",
@@ -2358,13 +1749,22 @@
           "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.",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/TextLink",
-      "description": "TextLink  Styled text link component for navigation and actions. Supports internal/external links, button mode, and multiple visual variants.",
       "props": [
         {
           "name": "href",
@@ -2406,13 +1806,16 @@
           "name": "showArrow",
           "type": "boolean"
         }
-      ]
+      ],
+      "relatedComponents": [],
+      "storybookPath": "Navigation/TextLink"
     },
     {
       "name": "TimeField",
+      "category": "Form Controls",
+      "description": "Renders an Edges TimeField composed from segmented date parts.",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/TimeField",
-      "description": "Renders an Edges TimeField composed from segmented date parts.",
       "props": [
         {
           "name": "label",
@@ -2446,13 +1849,18 @@
           "name": "validationResult",
           "type": "ValidationResult"
         }
-      ]
+      ],
+      "relatedComponents": [
+        "TimeField"
+      ],
+      "storybookPath": "Form Controls/TimeField"
     },
     {
       "name": "ToggleButton",
+      "category": "Form Controls",
+      "description": "Value used for group selection state",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/ToggleButton",
-      "description": "Value used for group selection state",
       "props": [
         {
           "name": "variant",
@@ -2510,10 +1918,6 @@
           "name": "iconPosition",
           "type": "\"left\" | \"right\""
         },
-        {
-          "name": "value",
-          "type": "string"
-        },
         {
           "name": "isLoading",
           "type": "boolean"
@@ -2538,13 +1942,22 @@
           "name": "badgePosition",
           "type": "\"top-right\" | \"top-left\" | \"bottom-right\" | \"bottom-left\""
         }
-      ]
+      ],
+      "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",
-      "description": "Tooltip  Lightweight content container that appears on hover/focus/press.",
       "props": [
         {
           "name": "children",
@@ -2554,51 +1967,146 @@
           "name": "content",
           "type": "React.ReactNode"
         }
-      ]
+      ],
+      "relatedComponents": [],
+      "storybookPath": "Overlays/Tooltip"
     },
     {
       "name": "TopNav",
+      "category": "Navigation",
+      "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",
-      "description": "TopNav  Horizontal navigation bar component for application headers. Includes mobile menu toggle, user avatar, theme switcher, and customizable action areas.",
-      "props": [
-        {
-          "name": "rightContent",
-          "type": "React.ReactNode"
-        },
-        {
-          "name": "showMobileMenu",
-          "type": "boolean"
-        },
-        {
-          "name": "avatar",
-          "type": "React.ReactNode"
-        },
-        {
-          "name": "showColorModeSwitcher",
-          "type": "boolean"
-        },
-        {
-          "name": "toggleTheme",
-          "type": "() => void"
-        },
-        {
-          "name": "isDarkThemeEnabled",
-          "type": "boolean"
-        },
-        {
-          "name": "actions",
-          "type": "React.ReactNode"
-        },
-        {
-          "name": "className",
-          "type": "string"
-        },
-        {
-          "name": "mobileMenuId",
-          "type": "string"
-        }
-      ]
+      "props": [],
+      "relatedComponents": [
+        "Avatar",
+        "Button",
+        "Icon"
+      ],
+      "storybookPath": "Navigation/TopNav"
     }
-  ]
+  ],
+  "categories": {
+    "Form Controls": [
+      "ActionMenu",
+      "Autocomplete",
+      "Button",
+      "Calendar",
+      "Checkbox",
+      "CheckboxGroup",
+      "CodeEditor",
+      "DateField",
+      "DateRangePicker",
+      "FileUpload",
+      "Form",
+      "ListBox",
+      "ListBoxItem",
+      "NumberField",
+      "PlaceSearch",
+      "Radio",
+      "RadioGroup",
+      "RangeCalendar",
+      "RichTextEditor",
+      "SegmentedControl",
+      "Select",
+      "Slider",
+      "Switch",
+      "TextArea",
+      "TextAreaWithChips",
+      "TextField",
+      "TimeField",
+      "ToggleButton"
+    ],
+    "Overlays": [
+      "Alert",
+      "Confirm",
+      "Dialog",
+      "Drawer",
+      "Popover",
+      "Tooltip"
+    ],
+    "Layout": [
+      "AppShell",
+      "Card",
+      "Grid",
+      "PageLayout",
+      "Section",
+      "SplitPane"
+    ],
+    "Display": [
+      "Avatar",
+      "Badge",
+      "Chip",
+      "CopyToClipboard"
+    ],
+    "Navigation": [
+      "Breadcrumb",
+      "Breadcrumbs",
+      "SideNav",
+      "Tab",
+      "TabList",
+      "TabPanel",
+      "Tabs",
+      "TextLink",
+      "TopNav"
+    ],
+    "Uncategorized": [
+      "ActionCell",
+      "AreaSeries",
+      "BarSeries",
+      "BooleanCell",
+      "ChartAxis",
+      "ChartBottomBar",
+      "ChartTooltip",
+      "DateCell",
+      "DialogHeader",
+      "InteractiveMap",
+      "LineSeries",
+      "MAP_TYPES",
+      "ModalBackdrop",
+      "NumberCell",
+      "SKELETON_SIZES",
+      "SelectCell",
+      "StaticMap",
+      "TextCell"
+    ],
+    "Data": [
+      "AutoMobileRenderer",
+      "CardMobileRenderer",
+      "ChartContainer",
+      "DataControls",
+      "DataTable",
+      "FilterChips",
+      "Kpi",
+      "KpiGroup",
+      "ResultsCount",
+      "SearchControl",
+      "SortControl",
+      "StatList"
+    ],
+    "Feedback": [
+      "ErrorBoundary",
+      "Meter",
+      "Notice",
+      "NoticeContainer",
+      "NoticeProvider",
+      "ProgressBar",
+      "Skeleton"
+    ],
+    "Typography": [
+      "Heading"
+    ],
+    "Design Tokens": [
+      "Icon",
+      "Logo"
+    ],
+    "Lists": [
+      "List",
+      "ListItem",
+      "ListPane"
+    ],
+    "Utility": [
+      "Loader"
+    ]
+  }
 }