@alaarab/ogrid-mcp 2.5.4 → 2.5.8

package/README.md

@@ -1,68 +1,23 @@
 # @alaarab/ogrid-mcp
 
-MCP (Model Context Protocol) server for OGrid documentation. Lets AI assistants search and retrieve OGrid docs, code examples, and API references across all supported frameworks (React, Angular, Vue, vanilla JS).
+MCP server that lets AI editors search and retrieve OGrid documentation across all supported frameworks.
 
-## Usage
+## Install
 
-### Claude Desktop
-
-Add this to your Claude Desktop config (`claude_desktop_config.json`):
+Add to your editor's MCP configuration:
 
 ```json
 {
   "mcpServers": {
-    "ogrid": {
-      "command": "npx",
-      "args": ["-y", "@alaarab/ogrid-mcp"]
-    }
+    "ogrid": { "command": "npx", "args": ["-y", "@alaarab/ogrid-mcp"] }
   }
 }
 ```
 
-### Claude Code
-
-```bash
-claude mcp add ogrid -- npx -y @alaarab/ogrid-mcp
-```
-
-### Direct execution
+Or run directly:
 
 ```bash
 npx @alaarab/ogrid-mcp
 ```
 
-## Tools
-
-The server exposes 5 tools:
-
-| Tool | Description |
-|------|-------------|
-| `search_docs` | Search OGrid documentation by keyword. Returns matching docs with title, description, and content excerpt. |
-| `list_docs` | List available documentation pages, optionally filtered by category (`features`, `getting-started`, `guides`, `api`). |
-| `get_docs` | Get the full content of a documentation page by its path. |
-| `get_code_example` | Find code examples matching a query, optionally filtered by framework (`react`, `angular`, `vue`, `js`). |
-| `detect_version` | Detect which OGrid version and framework is installed in the user's project by reading their package.json. |
-
-## Resources
-
-| URI | Description |
-|-----|-------------|
-| `ogrid://quick-reference` | Key props, install commands, and common patterns. |
-| `ogrid://migration-guide` | Full migration guide from AG Grid to OGrid with side-by-side API mapping. |
-| `ogrid://docs/{path}` | Any documentation page by path (e.g. `ogrid://docs/features/sorting`). |
-
-## Prompts
-
-| Name | Description |
-|------|-------------|
-| `migrate-from-ag-grid` | Step-by-step guide to migrate from AG Grid to OGrid. Returns the full migration guide with instructions for the AI to analyze your AG Grid usage and provide specific migration steps. |
-
-## Environment Variables
-
-| Variable | Description | Default |
-|----------|-------------|---------|
-| `OGRID_DOCS_PATH` | Absolute path to the docs directory containing `.mdx`/`.md` files. | `packages/docs/docs` relative to the package install location |
-
-## How it works
-
-On startup, the server indexes all `.mdx` and `.md` files from the docs directory. It parses frontmatter (title, description), extracts fenced code blocks with framework detection, and builds a searchable in-memory index. Search results are ranked by title match, description match, content density, and category relevance.
+See the [OGrid docs](https://alaarab.github.io/ogrid/) for full documentation.

package/bundled-docs/api/README.md

@@ -4,23 +4,23 @@ Complete API documentation for OGrid components, types, and interfaces.
 
 ## Components
 
-- **[DataGridTable](./components-datagrid-table.mdx)** — Core data grid component that renders the table, headers, rows, and cells
-- **[ColumnHeaderFilter](./components-column-header-filter.mdx)** — Column header with sorting and filtering UI (text, multi-select, people, date)
-- **[ColumnChooser](./components-column-chooser.mdx)** — Dropdown for showing/hiding columns
-- **[PaginationControls](./components-pagination-controls.mdx)** — Pagination UI with page navigation and page size selector
-- **[StatusBar](./components-status-bar.mdx)** — Status bar with row counts and cell aggregations
-- **[SideBar](./components-sidebar.mdx)** — Collapsible sidebar with columns and filters panels
+- **[DataGridTable](./components-datagrid-table.mdx)**  -  Core data grid component that renders the table, headers, rows, and cells
+- **[ColumnHeaderFilter](./components-column-header-filter.mdx)**  -  Column header with sorting and filtering UI (text, multi-select, people, date)
+- **[ColumnChooser](./components-column-chooser.mdx)**  -  Dropdown for showing/hiding columns
+- **[PaginationControls](./components-pagination-controls.mdx)**  -  Pagination UI with page navigation and page size selector
+- **[StatusBar](./components-status-bar.mdx)**  -  Status bar with row counts and cell aggregations
+- **[SideBar](./components-sidebar.mdx)**  -  Collapsible sidebar with columns and filters panels
 
 ## Configuration
 
-- **[OGrid Props](./ogrid-props.mdx)** — Top-level OGrid component props (client-side and server-side modes)
-- **[Column Definition](./column-def.mdx)** — Complete column definition reference (IColumnDef, IColumnGroupDef, cell editors, filters)
-- **[Grid API](./grid-api.mdx)** — Imperative grid API (IOGridApi) for programmatic control
-- **[JS API](./js-api.mdx)** — Vanilla JS API reference (OGrid class, state classes, components)
+- **[OGrid Props](./ogrid-props.mdx)**  -  Top-level OGrid component props (client-side and server-side modes)
+- **[Column Definition](./column-def.mdx)**  -  Complete column definition reference (IColumnDef, IColumnGroupDef, cell editors, filters)
+- **[Grid API](./grid-api.mdx)**  -  Imperative grid API (IOGridApi) for programmatic control
+- **[JS API](./js-api.mdx)**  -  Vanilla JS API reference (OGrid class, state classes, components)
 
 ## Types
 
-- **[Types Reference](./types.mdx)** — All shared TypeScript types:
+- **[Types Reference](./types.mdx)**  -  All shared TypeScript types:
   - **Data Types:** `RowId`, `FilterValue`, `IFilters`, `IDataSource`, `IFetchParams`, `IPageResult`
   - **Selection:** `RowSelectionMode`, `IActiveCell`, `ISelectionRange`, `IRowSelectionChangeEvent`
   - **Editing:** `ICellEditorProps`, `ICellValueChangedEvent`, `CellEditorParams`

package/bundled-docs/api/components-column-chooser.mdx

@@ -211,8 +211,8 @@ const handleVisibilityChange = (columnKey: string, visible: boolean) => {
 ### Select All / Clear All
 
 The dropdown includes two action buttons:
-- **Select All** — Shows all columns (except those marked as `required: false` — these remain hidden)
-- **Clear All** — Hides all optional columns (required columns remain visible)
+- **Select All**  -  Shows all columns (except those marked as `required: false`  -  these remain hidden)
+- **Clear All**  -  Hides all optional columns (required columns remain visible)
 
 ### Visual Indicator
 
@@ -220,9 +220,9 @@ The trigger button shows the current visibility count: `"Column Visibility (3 of
 
 ### Checkbox States
 
-- **Checked** — Column is visible
-- **Unchecked** — Column is hidden
-- **Disabled + Checked** — Column is required and cannot be hidden
+- **Checked**  -  Column is visible
+- **Unchecked**  -  Column is hidden
+- **Disabled + Checked**  -  Column is required and cannot be hidden
 
 ## Accessibility
 
@@ -251,11 +251,11 @@ The trigger button shows the current visibility count: `"Column Visibility (3 of
 
 ### Keyboard Navigation
 
-- `Enter` / `Space` (on trigger button) — Open/close dropdown
-- `Tab` / `Shift+Tab` — Navigate between checkboxes and action buttons
-- `Space` — Toggle focused checkbox
-- `Enter` (on action buttons) — Execute "Select All" or "Clear All"
-- `Escape` — Close dropdown
+- `Enter` / `Space` (on trigger button)  -  Open/close dropdown
+- `Tab` / `Shift+Tab`  -  Navigate between checkboxes and action buttons
+- `Space`  -  Toggle focused checkbox
+- `Enter` (on action buttons)  -  Execute "Select All" or "Clear All"
+- `Escape`  -  Close dropdown
 
 ### Focus Management
 
@@ -286,25 +286,25 @@ See the [Accessibility Guide](/docs/guides/accessibility) for complete documenta
 All UI packages provide default styles matching their design system. Styles are scoped to avoid conflicts.
 
 **CSS custom properties** (all packages):
-- `--ogrid-header-bg` — Trigger button and popover background color
-- `--ogrid-border` — Border color
-- `--ogrid-fg` — Foreground text color
+- `--ogrid-header-bg`  -  Trigger button and popover background color
+- `--ogrid-border`  -  Border color
+- `--ogrid-fg`  -  Foreground text color
 
 ## Placement in OGrid
 
 The `columnChooser` prop on `OGrid` controls where the column chooser renders:
 
-- `true` or `'toolbar'` (default) — Renders in the toolbar strip (recommended)
-- `'sidebar'` — Only available via the sidebar columns panel (no toolbar button)
-- `false` — Hidden entirely (useful when you want full control over visibility)
+- `true` or `'toolbar'` (default)  -  Renders in the toolbar strip (recommended)
+- `'sidebar'`  -  Only available via the sidebar columns panel (no toolbar button)
+- `false`  -  Hidden entirely (useful when you want full control over visibility)
 
 ## Related Components
 
-- [DataGridTable](./components-datagrid-table.mdx) — Main grid component
-- [SideBar](./components-sidebar.mdx) — Sidebar with columns panel (alternative placement)
-- [OGrid](./ogrid-props.mdx) — Top-level wrapper that integrates the column chooser
+- [DataGridTable](./components-datagrid-table.mdx)  -  Main grid component
+- [SideBar](./components-sidebar.mdx)  -  Sidebar with columns panel (alternative placement)
+- [OGrid](./ogrid-props.mdx)  -  Top-level wrapper that integrates the column chooser
 
 ## See Also
 
-- [Column Definition](./column-def.mdx#icolumnmeta) — Column metadata reference
-- [Grid API](./grid-api.mdx) — `getColumnState()` and `applyColumnState()` methods
+- [Column Definition](./column-def.mdx#icolumnmeta)  -  Column metadata reference
+- [Grid API](./grid-api.mdx)  -  `getColumnState()` and `applyColumnState()` methods

package/bundled-docs/api/components-column-header-filter.mdx

@@ -286,34 +286,34 @@ const handleFilterChange = (values: string[]) => {
 ### Keyboard Navigation
 
 **Header Interaction:**
-- `Tab` — Move focus to sort button, then filter button
-- `Enter` / `Space` — Activate focused button (toggle sort or open filter)
-- `Shift+Tab` — Move focus backwards
+- `Tab`  -  Move focus to sort button, then filter button
+- `Enter` / `Space`  -  Activate focused button (toggle sort or open filter)
+- `Shift+Tab`  -  Move focus backwards
 
 **Filter Popover (All Types):**
-- `Escape` — Close popover without applying changes
-- `Tab` / `Shift+Tab` — Navigate inputs and buttons
-- `Enter` (on Apply button) — Apply filter and close popover
+- `Escape`  -  Close popover without applying changes
+- `Tab` / `Shift+Tab`  -  Navigate inputs and buttons
+- `Enter` (on Apply button)  -  Apply filter and close popover
 
 **Text Filter:**
 - Type to enter filter text
-- `Enter` — Apply filter immediately (no button click needed)
+- `Enter`  -  Apply filter immediately (no button click needed)
 
 **Multi-Select Filter:**
-- `↑` `↓` — Navigate checkbox list
-- `Space` — Toggle focused checkbox
-- `Ctrl+A` — Select all options
+- `↑` `↓`  -  Navigate checkbox list
+- `Space`  -  Toggle focused checkbox
+- `Ctrl+A`  -  Select all options
 - Type to search options
 
 **People Filter:**
 - Type to search people
-- `↓` — Move to search results list
-- `↑` `↓` — Navigate search results
-- `Enter` — Select focused person
-- `Backspace` — Clear selected person
+- `↓`  -  Move to search results list
+- `↑` `↓`  -  Navigate search results
+- `Enter`  -  Select focused person
+- `Backspace`  -  Clear selected person
 
 **Date Filter:**
-- `Tab` — Move between "From" and "To" inputs
+- `Tab`  -  Move between "From" and "To" inputs
 - Type date in `YYYY-MM-DD` format
 - Date picker (if supported): Arrow keys to navigate calendar
 
@@ -347,17 +347,17 @@ See the [Accessibility Guide](/docs/guides/accessibility) for complete documenta
 All UI packages provide default styles matching their design system (Radix UI, Fluent UI, Material UI, PrimeNG, Vuetify, PrimeVue). Styles are scoped to avoid conflicts.
 
 **CSS custom properties** (all packages):
-- `--ogrid-header-bg` — Header background color
-- `--ogrid-border` — Border color
-- `--ogrid-fg` — Foreground text color
+- `--ogrid-header-bg`  -  Header background color
+- `--ogrid-border`  -  Border color
+- `--ogrid-fg`  -  Foreground text color
 
 ## Related Components
 
-- [DataGridTable](./components-datagrid-table.mdx) — Main grid component that renders column headers
-- [ColumnChooser](./components-column-chooser.mdx) — Column visibility dropdown
-- [Types: FilterValue](./types.mdx#filtervalue) — Filter value discriminated union
+- [DataGridTable](./components-datagrid-table.mdx)  -  Main grid component that renders column headers
+- [ColumnChooser](./components-column-chooser.mdx)  -  Column visibility dropdown
+- [Types: FilterValue](./types.mdx#filtervalue)  -  Filter value discriminated union
 
 ## See Also
 
-- [Column Definition](./column-def.mdx#icolumnfilterdef) — Filter configuration reference
-- [Filtering Feature Guide](/docs/features/filtering) — Complete filtering documentation
+- [Column Definition](./column-def.mdx#icolumnfilterdef)  -  Filter configuration reference
+- [Filtering Feature Guide](/docs/features/filtering)  -  Complete filtering documentation

package/bundled-docs/api/components-datagrid-table.mdx

@@ -56,7 +56,7 @@ The core data grid component that renders the table structure, headers, rows, ce
 | `sortBy` | `string` | `undefined` | Currently sorted column ID. |
 | `sortDirection` | `'asc' \| 'desc'` | `undefined` | Sort direction. |
 | `onSortChange` | `(field: string, direction: 'asc' \| 'desc') => void` | `undefined` | Callback when user clicks a sortable column header. |
-| `filters` | `IFilters` | `{}` | Active filter values (column ID → FilterValue). |
+| `filters` | `IFilters` | `{}` | Active filter values (column ID  to  FilterValue). |
 | `onFiltersChange` | `(filters: IFilters) => void` | `undefined` | Callback when filters are applied or cleared. |
 | `visibleColumns` | `Set<string>` | All columns | Set of visible column IDs. |
 | `onVisibilityChange` | `(columnId: string, visible: boolean) => void` | `undefined` | Callback when column visibility changes. |
@@ -227,35 +227,35 @@ The grid uses semantic HTML with proper ARIA roles:
 Complete Excel-style keyboard navigation:
 
 **Arrow Keys:**
-- `↑` `↓` `←` `→` — Move active cell one cell in the direction pressed
-- `Ctrl+↑` / `Ctrl+↓` — Jump to first/last row
-- `Ctrl+←` / `Ctrl+→` — Jump to first/last column
-- `Home` / `End` — Jump to start/end of row
-- `Ctrl+Home` / `Ctrl+End` — Jump to first/last cell in grid
+- `↑` `↓` `←` ` to `  -  Move active cell one cell in the direction pressed
+- `Ctrl+↑` / `Ctrl+↓`  -  Jump to first/last row
+- `Ctrl+←` / `Ctrl+ to `  -  Jump to first/last column
+- `Home` / `End`  -  Jump to start/end of row
+- `Ctrl+Home` / `Ctrl+End`  -  Jump to first/last cell in grid
 
 **Selection:**
-- `Shift+Arrows` — Extend cell selection range
-- `Ctrl+A` — Select all cells
-- `Space` (on checkbox column) — Toggle row selection
+- `Shift+Arrows`  -  Extend cell selection range
+- `Ctrl+A`  -  Select all cells
+- `Space` (on checkbox column)  -  Toggle row selection
 
 **Editing:**
-- `Enter` or `F2` — Start editing active cell
-- `Escape` — Cancel editing and revert
-- `Enter` (while editing) — Commit and move down
-- `Tab` (while editing) — Commit and move right
+- `Enter` or `F2`  -  Start editing active cell
+- `Escape`  -  Cancel editing and revert
+- `Enter` (while editing)  -  Commit and move down
+- `Tab` (while editing)  -  Commit and move right
 
 **Clipboard:**
-- `Ctrl+C` / `Cmd+C` — Copy selected cells
-- `Ctrl+X` / `Cmd+X` — Cut selected cells
-- `Ctrl+V` / `Cmd+V` — Paste
-- `Delete` — Clear selected cells
+- `Ctrl+C` / `Cmd+C`  -  Copy selected cells
+- `Ctrl+X` / `Cmd+X`  -  Cut selected cells
+- `Ctrl+V` / `Cmd+V`  -  Paste
+- `Delete`  -  Clear selected cells
 
 **Undo/Redo:**
-- `Ctrl+Z` / `Cmd+Z` — Undo last edit
-- `Ctrl+Y` / `Cmd+Shift+Z` — Redo
+- `Ctrl+Z` / `Cmd+Z`  -  Undo last edit
+- `Ctrl+Y` / `Cmd+Shift+Z`  -  Redo
 
 **Context Menu:**
-- `Shift+F10` — Open context menu for active cell
+- `Shift+F10`  -  Open context menu for active cell
 
 See the [Accessibility Guide](/docs/guides/accessibility) for complete keyboard shortcuts.
 
@@ -304,13 +304,13 @@ For complete accessibility documentation, see the [Accessibility Guide](/docs/gu
 
 ## Related Components
 
-- [OGrid](./ogrid-props.mdx) — Top-level wrapper that includes toolbar and pagination
-- [ColumnHeaderFilter](./components-column-header-filter.mdx) — Column filtering UI
-- [StatusBar](./components-status-bar.mdx) — Status bar below the grid
-- [PaginationControls](./components-pagination-controls.mdx) — Pagination UI
+- [OGrid](./ogrid-props.mdx)  -  Top-level wrapper that includes toolbar and pagination
+- [ColumnHeaderFilter](./components-column-header-filter.mdx)  -  Column filtering UI
+- [StatusBar](./components-status-bar.mdx)  -  Status bar below the grid
+- [PaginationControls](./components-pagination-controls.mdx)  -  Pagination UI
 
 ## See Also
 
-- [Column Definition](./column-def.mdx) — Complete column definition reference
-- [Grid API](./grid-api.mdx) — Imperative grid API reference
-- [Accessibility Guide](/docs/guides/accessibility) — Complete accessibility documentation
+- [Column Definition](./column-def.mdx)  -  Complete column definition reference
+- [Grid API](./grid-api.mdx)  -  Imperative grid API reference
+- [Accessibility Guide](/docs/guides/accessibility)  -  Complete accessibility documentation

package/bundled-docs/api/components-pagination-controls.mdx

@@ -206,12 +206,12 @@ const handlePageSizeChange = (size: number) => {
 
 ### Pagination Buttons
 
-- **« (First)** — Jump to page 1 (disabled when on page 1)
-- **‹ (Previous)** — Go to the previous page (disabled when on page 1)
-- **[1] [2] [3]** — Numbered page buttons (up to 7 buttons shown)
-- **...** — Ellipsis when there are more than 7 pages
-- **› (Next)** — Go to the next page (disabled when on last page)
-- **» (Last)** — Jump to the last page (disabled when on last page)
+- **« (First)**  -  Jump to page 1 (disabled when on page 1)
+- **‹ (Previous)**  -  Go to the previous page (disabled when on page 1)
+- **[1] [2] [3]**  -  Numbered page buttons (up to 7 buttons shown)
+- **...**  -  Ellipsis when there are more than 7 pages
+- **› (Next)**  -  Go to the next page (disabled when on last page)
+- **» (Last)**  -  Jump to the last page (disabled when on last page)
 
 ### Page Number Display Logic
 
@@ -281,11 +281,11 @@ Showing {startItem} to {endItem} of {totalCount} {entityLabelPlural}
 
 ### Keyboard Navigation
 
-- `Tab` / `Shift+Tab` — Navigate between pagination buttons and page size dropdown
-- `Enter` / `Space` (on buttons) — Activate focused button (change page)
-- `←` `→` (on page buttons) — Navigate between page number buttons
-- `↑` `↓` (on dropdown) — Change page size
-- `Enter` (on dropdown) — Confirm page size selection
+- `Tab` / `Shift+Tab`  -  Navigate between pagination buttons and page size dropdown
+- `Enter` / `Space` (on buttons)  -  Activate focused button (change page)
+- `←` ` to ` (on page buttons)  -  Navigate between page number buttons
+- `↑` `↓` (on dropdown)  -  Change page size
+- `Enter` (on dropdown)  -  Confirm page size selection
 
 ### Focus Management
 
@@ -319,10 +319,10 @@ See the [Accessibility Guide](/docs/guides/accessibility) for complete documenta
 All UI packages provide default styles matching their design system. Styles are scoped to avoid conflicts.
 
 **CSS custom properties** (all packages):
-- `--ogrid-header-bg` — Background color
-- `--ogrid-border` — Border color
-- `--ogrid-fg` — Foreground text color
-- `--ogrid-primary` — Primary color (current page button)
+- `--ogrid-header-bg`  -  Background color
+- `--ogrid-border`  -  Border color
+- `--ogrid-fg`  -  Foreground text color
+- `--ogrid-primary`  -  Primary color (current page button)
 
 ## Layout Integration
 
@@ -330,15 +330,15 @@ All UI packages provide default styles matching their design system. Styles are
 
 ## No Border or Padding
 
-The component itself has **no outer border or padding** — the parent container (footer strip in `OGridLayout`) provides these styles.
+The component itself has **no outer border or padding**  -  the parent container (footer strip in `OGridLayout`) provides these styles.
 
 ## Related Components
 
-- [OGrid](./ogrid-props.mdx) — Top-level wrapper that includes pagination
-- [DataGridTable](./components-datagrid-table.mdx) — Main grid component
-- [StatusBar](./components-status-bar.mdx) — Status bar below the grid
+- [OGrid](./ogrid-props.mdx)  -  Top-level wrapper that includes pagination
+- [DataGridTable](./components-datagrid-table.mdx)  -  Main grid component
+- [StatusBar](./components-status-bar.mdx)  -  Status bar below the grid
 
 ## See Also
 
-- [Grid API](./grid-api.mdx) — Pagination-related API methods
-- [Pagination Feature Guide](/docs/features/pagination) — Complete pagination documentation
+- [Grid API](./grid-api.mdx)  -  Pagination-related API methods
+- [Pagination Feature Guide](/docs/features/pagination)  -  Complete pagination documentation

package/bundled-docs/api/components-sidebar.mdx

@@ -60,7 +60,7 @@ The `SideBar` component is framework-agnostic and uses inline styles. All React
 | `filterableColumns` | `SideBarFilterColumn[]` | **Required** | Filterable columns (for the filters panel). |
 | `filters` | `IFilters` | **Required** | Active filter values. |
 | `onFilterChange` | `(key: string, value: FilterValue \| undefined) => void` | **Required** | Callback when a filter value changes. |
-| `filterOptions` | `Record<string, string[]>` | **Required** | Available options for multi-select filters (column ID → options array). |
+| `filterOptions` | `Record<string, string[]>` | **Required** | Available options for multi-select filters (column ID  to  options array). |
 
 ## SideBarFilterColumn
 
@@ -284,13 +284,13 @@ const columns = [...];
 ### Tab Strip
 
 The sidebar has a vertical tab strip with one button per panel:
-- **C** — Columns panel button
-- **F** — Filters panel button
+- **C**  -  Columns panel button
+- **F**  -  Filters panel button
 
 Clicking a tab toggles the panel:
-- If the panel is closed → open it
-- If the panel is open → close it
-- If another panel is open → close it and open the clicked panel
+- If the panel is closed  to  open it
+- If the panel is open  to  close it
+- If another panel is open  to  close it and open the clicked panel
 
 ### Panel Content
 
@@ -298,8 +298,8 @@ The panel content area has a fixed width (240px) and scrollable content. The pan
 
 ### Keyboard Navigation
 
-- `Tab` / `Shift+Tab` — Move focus between interactive elements
-- `Enter` / `Space` — Toggle panel buttons, checkboxes, and other controls
+- `Tab` / `Shift+Tab`  -  Move focus between interactive elements
+- `Enter` / `Space`  -  Toggle panel buttons, checkboxes, and other controls
 
 ## Accessibility
 
@@ -352,25 +352,25 @@ The panel content area has a fixed width (240px) and scrollable content. The pan
 ### Keyboard Navigation
 
 **Tab Strip:**
-- `Tab` / `Shift+Tab` — Navigate between tab buttons
-- `Enter` / `Space` — Toggle focused panel (open/close)
-- `←` `→` — Navigate between tab buttons (alternative to Tab)
+- `Tab` / `Shift+Tab`  -  Navigate between tab buttons
+- `Enter` / `Space`  -  Toggle focused panel (open/close)
+- `←` ` to `  -  Navigate between tab buttons (alternative to Tab)
 
 **Columns Panel:**
-- `Tab` / `Shift+Tab` — Navigate between checkboxes and action buttons
-- `Space` — Toggle focused checkbox
-- `Enter` (on action buttons) — Execute "Select All" or "Clear All"
+- `Tab` / `Shift+Tab`  -  Navigate between checkboxes and action buttons
+- `Space`  -  Toggle focused checkbox
+- `Enter` (on action buttons)  -  Execute "Select All" or "Clear All"
 
 **Filters Panel:**
-- `Tab` / `Shift+Tab` — Navigate between filter inputs
+- `Tab` / `Shift+Tab`  -  Navigate between filter inputs
 - Type to enter filter values
-- `Enter` — Apply filter (for text filters)
-- `Space` — Toggle checkboxes (for multi-select filters)
+- `Enter`  -  Apply filter (for text filters)
+- `Space`  -  Toggle checkboxes (for multi-select filters)
 
 ### Focus Management
 
 - **Focus visible:** `:focus-visible` styles show 2px solid outline (`--ogrid-accent`) on keyboard navigation
-- **Focus order:** Tab buttons → panel content (top to bottom)
+- **Focus order:** Tab buttons  to  panel content (top to bottom)
 - **Panel closure:** Closing a panel does not move focus; it remains on the tab button
 
 ### Screen Reader Support
@@ -398,10 +398,10 @@ See the [Accessibility Guide](/docs/guides/accessibility) for complete documenta
 The `SideBar` component uses **inline styles** (no external CSS) to remain framework-agnostic. All styles use CSS custom properties for theming:
 
 **CSS custom properties:**
-- `--ogrid-header-bg` — Tab strip and panel header background color
-- `--ogrid-bg` — Panel content background color
-- `--ogrid-border` — Border color
-- `--ogrid-fg` — Foreground text color
+- `--ogrid-header-bg`  -  Tab strip and panel header background color
+- `--ogrid-bg`  -  Panel content background color
+- `--ogrid-border`  -  Border color
+- `--ogrid-fg`  -  Foreground text color
 
 ## Layout Integration
 
@@ -417,11 +417,11 @@ When `position: 'left'`, the sidebar is on the left. When `position: 'right'`, i
 
 ## Related Components
 
-- [OGrid](./ogrid-props.mdx) — Top-level wrapper with `sideBar` prop
-- [ColumnChooser](./components-column-chooser.mdx) — Alternative column visibility UI (toolbar dropdown)
-- [ColumnHeaderFilter](./components-column-header-filter.mdx) — Alternative filter UI (column header popovers)
+- [OGrid](./ogrid-props.mdx)  -  Top-level wrapper with `sideBar` prop
+- [ColumnChooser](./components-column-chooser.mdx)  -  Alternative column visibility UI (toolbar dropdown)
+- [ColumnHeaderFilter](./components-column-header-filter.mdx)  -  Alternative filter UI (column header popovers)
 
 ## See Also
 
-- [Types: ISideBarDef](./types.mdx#isidebardef) — Sidebar configuration reference
-- [Sidebar Feature Guide](/docs/features/sidebar) — Complete sidebar documentation
+- [Types: ISideBarDef](./types.mdx#isidebardef)  -  Sidebar configuration reference
+- [Sidebar Feature Guide](/docs/features/sidebar)  -  Complete sidebar documentation

package/bundled-docs/api/components-status-bar.mdx

@@ -269,10 +269,10 @@ The `aria-live="polite"` setting ensures announcements don't interrupt the user'
 ### Semantic HTML
 
 The status bar uses semantic `<span>` elements with clear text labels:
-- "Rows: 1,000" — Total row count
-- "Filtered: 250" — Filtered row count
-- "Selected: 5" — Selected row count
-- "Sum: 450" — Aggregation values
+- "Rows: 1,000"  -  Total row count
+- "Filtered: 250"  -  Filtered row count
+- "Selected: 5"  -  Selected row count
+- "Sum: 450"  -  Aggregation values
 
 No additional ARIA labels are needed because the text content is already descriptive.
 
@@ -289,9 +289,9 @@ See the [Accessibility Guide](/docs/guides/accessibility) for complete documenta
 All UI packages provide default styles matching their design system. The status bar is styled with a subtle background and border-top.
 
 **CSS custom properties** (all packages):
-- `--ogrid-header-bg` — Background color (matches header)
-- `--ogrid-border` — Border color
-- `--ogrid-fg` — Foreground text color
+- `--ogrid-header-bg`  -  Background color (matches header)
+- `--ogrid-border`  -  Border color
+- `--ogrid-fg`  -  Foreground text color
 
 ## Layout Integration
 
@@ -299,11 +299,11 @@ The status bar is rendered inside `DataGridTable` at the bottom, just above the
 
 ## Related Components
 
-- [DataGridTable](./components-datagrid-table.mdx) — Main grid component that renders the status bar
-- [PaginationControls](./components-pagination-controls.mdx) — Pagination UI below the status bar
-- [OGrid](./ogrid-props.mdx) — Top-level wrapper with `statusBar` prop
+- [DataGridTable](./components-datagrid-table.mdx)  -  Main grid component that renders the status bar
+- [PaginationControls](./components-pagination-controls.mdx)  -  Pagination UI below the status bar
+- [OGrid](./ogrid-props.mdx)  -  Top-level wrapper with `statusBar` prop
 
 ## See Also
 
-- [Types: IStatusBarProps](./types.mdx#istatusbarprops) — Status bar props reference
-- [Spreadsheet Selection Feature Guide](/docs/features/spreadsheet-selection) — How aggregations are computed
+- [Types: IStatusBarProps](./types.mdx#istatusbarprops)  -  Status bar props reference
+- [Spreadsheet Selection Feature Guide](/docs/features/spreadsheet-selection)  -  How aggregations are computed