@redsift/ds-mcp-server 12.5.3-alpha.5 → 12.5.3-alpha.7

package/consumer-instructions/.cursorrules

@@ -40,6 +40,16 @@ When applying colors, spacing, or typography:
 1. Call `search_design_tokens` to find the correct token names and CSS custom properties.
 2. Do not hardcode color hex values — use the design token CSS variables.
 
+## Rule 5 — Host App Setup (Adopting or Migrating to DS)
+
+When adopting `@redsift/*` components in a new project or migrating from raw HTML/CSS/Tailwind:
+
+1. Read the `design-system://getting-started/host-app` MCP resource FIRST.
+2. Ensure the app entry point imports `@redsift/design-system/style/index.css`.
+3. Wrap the app with `<AppContainer>` (full Red Sift shell) or `<ThemeProvider value={{ theme }}>` (standalone). Do NOT pass `theme` to every individual component — use context at the root.
+4. Import icons from `@redsift/icons`, not `@mdi/js`.
+5. Remove conflicting Tailwind/utility-CSS classes (`bg-*`, `text-*`, `border-*`, `dark:*`) from elements that render or wrap DS components.
+
 ## Common Mistakes
 
 These are real examples of props that do NOT exist in the Red Sift DS:
@@ -52,6 +62,10 @@ These are real examples of props that do NOT exist in the Red Sift DS:
 - `import { Select } from '@redsift/design-system'` → Should be `@redsift/pickers`
 - `import { Dialog } from '@redsift/design-system'` → Should be `@redsift/popovers`
 - `import { DataGrid } from '@redsift/design-system'` → Should be `@redsift/table`
+- Passing `theme` to every component → Wrap app with `<AppContainer>` or `<ThemeProvider>` at root
+- Missing `@redsift/design-system/style/index.css` import → Must import at app entry point
+- `import { mdiPlus } from '@mdi/js'` → Should be `@redsift/icons`
+- Tailwind `bg-*`/`text-*`/`dark:*` on DS wrappers → Use DS tokens or layout primitives
 
 ## NEVER Do This
 

package/consumer-instructions/.windsurfrules

@@ -10,7 +10,7 @@ This project uses the **Red Sift Design System** (`@redsift/*` packages). The de
 
 1. Configure the MCP server — see [MCP Server docs](https://design-system.redsift.io/introduction/mcp-server)
 2. Copy this file to your project root as `.cursorrules`
-3. Verify: ask the AI *"What props does Button accept?"* — it should call `get_component_props`, not answer from memory
+3. Verify: ask the AI _"What props does Button accept?"_ — it should call `get_component_props`, not answer from memory
 
 ## Rule 1 — Mandatory Prop Lookup
 
@@ -40,6 +40,16 @@ When applying colors, spacing, or typography:
 1. Call `search_design_tokens` to find the correct token names and CSS custom properties.
 2. Do not hardcode color hex values — use the design token CSS variables.
 
+## Rule 5 — Host App Setup (Adopting or Migrating to DS)
+
+When adopting `@redsift/*` components in a new project or migrating from raw HTML/CSS/Tailwind:
+
+1. Read the `design-system://getting-started/host-app` MCP resource FIRST.
+2. Ensure the app entry point imports `@redsift/design-system/style/index.css`.
+3. Wrap the app with `<AppContainer>` (full Red Sift shell) or `<ThemeProvider value={{ theme }}>` (standalone). Do NOT pass `theme` to every individual component — use context at the root.
+4. Import icons from `@redsift/icons`, not `@mdi/js`.
+5. Remove conflicting Tailwind/utility-CSS classes (`bg-*`, `text-*`, `border-*`, `dark:*`) from elements that render or wrap DS components.
+
 ## Common Mistakes
 
 These are real examples of props that do NOT exist in the Red Sift DS:
@@ -52,6 +62,10 @@ These are real examples of props that do NOT exist in the Red Sift DS:
 - `import { Select } from '@redsift/design-system'` → Should be `@redsift/pickers`
 - `import { Dialog } from '@redsift/design-system'` → Should be `@redsift/popovers`
 - `import { DataGrid } from '@redsift/design-system'` → Should be `@redsift/table`
+- Passing `theme` to every component → Wrap app with `<AppContainer>` or `<ThemeProvider>` at root
+- Missing `@redsift/design-system/style/index.css` import → Must import at app entry point
+- `import { mdiPlus } from '@mdi/js'` → Should be `@redsift/icons`
+- Tailwind `bg-*`/`text-*`/`dark:*` on DS wrappers → Use DS tokens or layout primitives
 
 ## NEVER Do This
 
@@ -75,6 +89,6 @@ import { Select } from '@redsift/design-system';
 
 Test that your AI assistant is using the MCP server correctly with these prompts:
 
-1. *"What props does Button accept?"* → Should call `get_component_props`, NOT answer from memory
-2. *"Import the Select component"* → Should call `get_component_usage`, return `@redsift/pickers`
-3. *"Create a data table page"* → Should call `search_patterns` first, then follow the pattern spec
+1. _"What props does Button accept?"_ → Should call `get_component_props`, NOT answer from memory
+2. _"Import the Select component"_ → Should call `get_component_usage`, return `@redsift/pickers`
+3. _"Create a data table page"_ → Should call `search_patterns` first, then follow the pattern spec

package/consumer-instructions/CLAUDE.md

@@ -40,6 +40,16 @@ When applying colors, spacing, or typography:
 1. Call `search_design_tokens` to find the correct token names and CSS custom properties.
 2. Do not hardcode color hex values — use the design token CSS variables.
 
+## Rule 5 — Host App Setup (Adopting or Migrating to DS)
+
+When adopting `@redsift/*` components in a new project or migrating from raw HTML/CSS/Tailwind:
+
+1. Read the `design-system://getting-started/host-app` MCP resource FIRST.
+2. Ensure the app entry point imports `@redsift/design-system/style/index.css`.
+3. Wrap the app with `<AppContainer>` (full Red Sift shell) or `<ThemeProvider value={{ theme }}>` (standalone). Do NOT pass `theme` to every individual component — use context at the root.
+4. Import icons from `@redsift/icons`, not `@mdi/js`.
+5. Remove conflicting Tailwind/utility-CSS classes (`bg-*`, `text-*`, `border-*`, `dark:*`) from elements that render or wrap DS components.
+
 ## NEVER Do This
 
 These are concrete examples of wrong code. **Every single one will fail:**
@@ -62,17 +72,21 @@ import { Select } from '@redsift/design-system';
 
 ## Common Mistakes
 
-| Wrong (guessed)                                     | Correct (actual)                             | How to verify                           |
-| --------------------------------------------------- | -------------------------------------------- | --------------------------------------- |
-| `variant="primary"`                                 | Look up actual variants                      | `get_component_props` for the component |
-| `size="sm"` / `size="lg"`                           | Most components have no size prop            | `get_component_props` for the component |
-| `colorScheme="red"`                                 | Does not exist                               | `get_component_props` for the component |
-| `isDisabled`                                        | `disabled`                                   | `get_component_props` for the component |
-| `onPress`                                           | `onClick`                                    | `get_component_props` for the component |
-| `leftIcon` / `rightIcon`                            | Look up actual icon prop names               | `get_component_props` for the component |
-| `import { Select } from '@redsift/design-system'`   | `import { Select } from '@redsift/pickers'`  | `get_component_usage`                   |
-| `import { Dialog } from '@redsift/design-system'`   | `import { Dialog } from '@redsift/popovers'` | `get_component_usage`                   |
-| `import { DataGrid } from '@redsift/design-system'` | `import { DataGrid } from '@redsift/table'`  | `get_component_usage`                   |
+| Wrong (guessed)                                     | Correct (actual)                                            | How to verify                              |
+| --------------------------------------------------- | ----------------------------------------------------------- | ------------------------------------------ |
+| `variant="primary"`                                 | Look up actual variants                                     | `get_component_props` for the component    |
+| `size="sm"` / `size="lg"`                           | Most components have no size prop                           | `get_component_props` for the component    |
+| `colorScheme="red"`                                 | Does not exist                                              | `get_component_props` for the component    |
+| `isDisabled`                                        | `disabled`                                                  | `get_component_props` for the component    |
+| `onPress`                                           | `onClick`                                                   | `get_component_props` for the component    |
+| `leftIcon` / `rightIcon`                            | Look up actual icon prop names                              | `get_component_props` for the component    |
+| `import { Select } from '@redsift/design-system'`   | `import { Select } from '@redsift/pickers'`                 | `get_component_usage`                      |
+| `import { Dialog } from '@redsift/design-system'`   | `import { Dialog } from '@redsift/popovers'`                | `get_component_usage`                      |
+| `import { DataGrid } from '@redsift/design-system'` | `import { DataGrid } from '@redsift/table'`                 | `get_component_usage`                      |
+| Passing `theme` to every component                  | Wrap app with `<AppContainer>` or `<ThemeProvider>` at root | `design-system://getting-started/host-app` |
+| Missing `@redsift/design-system/style/index.css`    | Must import at app entry point                              | `design-system://getting-started/host-app` |
+| `import { mdiPlus } from '@mdi/js'`                 | `import { mdiPlus } from '@redsift/icons'`                  | `get_component_usage`                      |
+| Tailwind `bg-*`/`text-*`/`dark:*` on DS wrappers    | Use DS tokens or layout primitives                          | `design-system://getting-started/host-app` |
 
 ## Verification
 

package/consumer-instructions/redsift-design-system.instructions.md

@@ -15,6 +15,7 @@ This project uses the **Red Sift Design System** (`@redsift/*` packages). The de
 1. Configure the MCP server in `.vscode/mcp.json` — see [MCP Server docs](https://design-system.redsift.io/introduction/mcp-server)
 2. Copy this file to `.github/instructions/` in your project
 3. Verify: ask the AI _"What props does Button accept?"_ — it should call `get_component_props`, not answer from memory
+4. **For automated code generation (Software Factory / agent workflows):** also load the `design-system://prompts/ds-advisor` MCP resource into the system prompt — it contains the component selection cheat sheet, anti-patterns, and disambiguation rules
 
 ## Rule 1 — Mandatory Prop Lookup
 
@@ -44,9 +45,53 @@ When applying colors, spacing, or typography:
 1. Call `search_design_tokens` to find the correct token names and CSS custom properties.
 2. Do not hardcode color hex values — use the design token CSS variables.
 
+## Rule 5 — Host App Setup (Adopting or Migrating to DS)
+
+When adopting `@redsift/*` components in a new project or migrating from raw HTML/CSS/Tailwind:
+
+1. Read the `design-system://getting-started/host-app` MCP resource FIRST.
+2. Ensure the app entry point imports `@redsift/design-system/style/index.css`.
+3. Wrap the app with `<AppContainer>` (full Red Sift shell) or `<ThemeProvider value={{ theme }}>` (standalone). Do NOT pass `theme` to every individual component — use context at the root.
+4. Import icons from `@redsift/icons`, not `@mdi/js`.
+5. Remove conflicting Tailwind/utility-CSS classes (`bg-*`, `text-*`, `border-*`, `dark:*`) from elements that render or wrap DS components.
+
+## Rule 6 — Semantic Colors Only
+
+When setting colors on DS components:
+
+1. **Never use hex/rgb literals** (`#22c55e`, `rgb(34, 197, 94)`) on DS component color props.
+2. **Never use CSS variable fallbacks** like `color="var(--rs-color-green-500, #22c55e)"`.
+3. **Always use semantic color values:** `"success"`, `"warning"`, `"error"`, `"info"`, `"no-data"`, `"question"`, or palette names from `NeutralColorPalette` / `PresentationColorPalette`.
+4. If asked which hex color to use, **refuse** — return the semantic token name instead.
+
+## Rule 7 — Icons from @redsift/icons Only
+
+1. **Never use unicode glyphs** (✓, ✕, ⚠, ›, •) as visual indicators — import the equivalent `mdi*` icon from `@redsift/icons`.
+2. **Never import from `@mdi/js`** — always use `@redsift/icons` (the DS re-exports the mdi icon set).
+3. Render icons with the `<Icon>` component from `@redsift/design-system`, e.g. `<Icon path={mdiCheck} />`.
+
+## Rule 8 — Component Selection
+
+When choosing which component to use, follow this cheat sheet:
+
+| UI Intent                | Correct Component                      | Package                  | Common Mistake                                    |
+| ------------------------ | -------------------------------------- | ------------------------ | ------------------------------------------------- |
+| KPI / metric tile        | `DataCard` + `DataRow`                 | `@redsift/dashboard`     | Using `Card` with inline styles                   |
+| Status badge             | `<Pill color="success">Label</Pill>`   | `@redsift/design-system` | `<Pill label="..." />` (label prop doesn't exist) |
+| Loading placeholder      | `Skeleton` / `SkeletonText`            | `@redsift/design-system` | `Skeleton` from `@mui/material`                   |
+| Collapsible detail panel | `DetailedCard` + `DetailedCardSection` | `@redsift/design-system` | Custom accordion with Card                        |
+| Generic container        | `Card`                                 | `@redsift/design-system` | Using Card for KPI tiles (use DataCard)           |
+| Modal / dialog           | `Dialog` compound component            | `@redsift/popovers`      | Building custom overlay                           |
+
+## Rule 9 — Refusal Rules
+
+1. If asked to provide a hex color for a DS component → **refuse** and return the semantic token name.
+2. If asked to wrap a DS component in `styled-components` to change its visual appearance → **refuse** and propose using the component's built-in props, composition, or filing a DS feature request.
+3. If the requested component does not exist in any `@redsift/*` package → say so and propose the closest existing primitive or composition.
+
 ## NEVER Do This
 
-These are concrete examples of wrong code. **Every single one will fail:**
+These are concrete examples of wrong code. **Every single one will fail or produce incorrect results:**
 
 ```tsx
 // ❌ WRONG — Button has NO size prop
@@ -62,21 +107,71 @@ These are concrete examples of wrong code. **Every single one will fail:**
 
 // ❌ WRONG — wrong package
 import { Select } from '@redsift/design-system';
+
+// ❌ WRONG — Use DataCard for KPI tiles, not Card with inline styles
+<Card style={{ borderLeft: '4px solid green' }}>
+// ✅ RIGHT
+<DataCard color="success">
+
+// ❌ WRONG — Pill uses children, not label
+<Pill label="Active" />
+// ✅ RIGHT
+<Pill color="success">Active</Pill>
+
+// ❌ WRONG — gap takes a string
+<Flexbox gap={4}>
+// ✅ RIGHT
+<Flexbox gap="4px">
+
+// ❌ WRONG — use mdi icons, not unicode characters
+<Text>✓ Trusted</Text>
+// ✅ RIGHT
+<Icon path={mdiCheck} /> <Text>Trusted</Text>
+
+// ❌ WRONG — use DS Skeleton, not MUI
+import { Skeleton } from '@mui/material';
+// ✅ RIGHT
+import { Skeleton } from '@redsift/design-system';
+
+// ❌ WRONG — hex color on DS component
+<Heading color="#22c55e">Title</Heading>
+// ✅ RIGHT
+<Heading color="success">Title</Heading>
+
+// ❌ WRONG — CSS variable fallback on DS component
+<Text color="var(--rs-color-green-500, #22c55e)">Status</Text>
+// ✅ RIGHT
+<Text color="success">Status</Text>
+
+// ❌ WRONG — import from @mdi/js
+import { mdiPlus } from '@mdi/js';
+// ✅ RIGHT
+import { mdiPlus } from '@redsift/icons';
 ```
 
 ## Common Mistakes
 
-| Wrong (guessed)                                     | Correct (actual)                             | How to verify                           |
-| --------------------------------------------------- | -------------------------------------------- | --------------------------------------- |
-| `variant="primary"`                                 | Look up actual variants                      | `get_component_props` for the component |
-| `size="sm"` / `size="lg"`                           | Most components have no size prop            | `get_component_props` for the component |
-| `colorScheme="red"`                                 | Does not exist                               | `get_component_props` for the component |
-| `isDisabled`                                        | `disabled`                                   | `get_component_props` for the component |
-| `onPress`                                           | `onClick`                                    | `get_component_props` for the component |
-| `leftIcon` / `rightIcon`                            | Look up actual icon prop names               | `get_component_props` for the component |
-| `import { Select } from '@redsift/design-system'`   | `import { Select } from '@redsift/pickers'`  | `get_component_usage`                   |
-| `import { Dialog } from '@redsift/design-system'`   | `import { Dialog } from '@redsift/popovers'` | `get_component_usage`                   |
-| `import { DataGrid } from '@redsift/design-system'` | `import { DataGrid } from '@redsift/table'`  | `get_component_usage`                   |
+| Wrong (guessed)                                     | Correct (actual)                                            | How to verify                              |
+| --------------------------------------------------- | ----------------------------------------------------------- | ------------------------------------------ |
+| `variant="primary"`                                 | Look up actual variants                                     | `get_component_props` for the component    |
+| `size="sm"` / `size="lg"`                           | Most components have no size prop                           | `get_component_props` for the component    |
+| `colorScheme="red"`                                 | Does not exist                                              | `get_component_props` for the component    |
+| `isDisabled`                                        | `disabled`                                                  | `get_component_props` for the component    |
+| `onPress`                                           | `onClick`                                                   | `get_component_props` for the component    |
+| `leftIcon` / `rightIcon`                            | Look up actual icon prop names                              | `get_component_props` for the component    |
+| `import { Select } from '@redsift/design-system'`   | `import { Select } from '@redsift/pickers'`                 | `get_component_usage`                      |
+| `import { Dialog } from '@redsift/design-system'`   | `import { Dialog } from '@redsift/popovers'`                | `get_component_usage`                      |
+| `import { DataGrid } from '@redsift/design-system'` | `import { DataGrid } from '@redsift/table'`                 | `get_component_usage`                      |
+| Passing `theme` to every component                  | Wrap app with `<AppContainer>` or `<ThemeProvider>` at root | `design-system://getting-started/host-app` |
+| Missing `@redsift/design-system/style/index.css`    | Must import at app entry point                              | `design-system://getting-started/host-app` |
+| `import { mdiPlus } from '@mdi/js'`                 | `import { mdiPlus } from '@redsift/icons'`                  | `get_component_usage`                      |
+| Tailwind `bg-*`/`text-*`/`dark:*` on DS wrappers    | Use DS tokens or layout primitives                          | `design-system://getting-started/host-app` |
+| `<Pill label="Active" />`                           | `<Pill color="success">Active</Pill>` (children)            | `get_component_props` for Pill             |
+| `<Flexbox gap={4}>`                                 | `<Flexbox gap="4px">` (string, not number)                  | `get_component_props` for Flexbox          |
+| `<Card>` for KPI tiles                              | `<DataCard>` from `@redsift/dashboard`                      | `get_component_props` for DataCard         |
+| `import { Skeleton } from '@mui/material'`          | `import { Skeleton } from '@redsift/design-system'`         | `get_component_usage` for Skeleton         |
+| Hex/rgb colors on DS components                     | Use semantic colors: `"success"`, `"error"`, etc.           | `get_component_props` for the component    |
+| Unicode glyphs (✓, ✕, ⚠) as indicators              | `<Icon path={mdiCheck} />` from `@redsift/icons`            | `get_component_usage` for Icon             |
 
 ## Verification
 

package/data/docs/components/charts/Axis.json

@@ -265,5 +265,10 @@
     }
   ],
   "examples": [],
-  "tags": {}
+  "tags": {},
+  "keywords": [
+    "chart axis",
+    "x axis",
+    "y axis"
+  ]
 }

package/data/docs/components/charts/BarChart.json

@@ -848,5 +848,11 @@
     }
   ],
   "examples": [],
-  "tags": {}
+  "tags": {},
+  "keywords": [
+    "bar graph",
+    "histogram",
+    "column chart",
+    "bar visualization"
+  ]
 }

package/data/docs/components/charts/BaseBarChart.json

@@ -1,6 +1,6 @@
 {
   "name": "BaseBarChart",
-  "description": "BarChart visualizes categorical data with rectangular bars.\nBuilt on D3.js with responsive sizing and interactive tooltips.\n\nSupports horizontal/vertical orientation, stacked/grouped bars,\nand various legend placements.\n\nData format: `CategoryData` `[{ key: string, value: number }]`",
+  "description": "BarChart visualizes categorical data with rectangular bars.\nBuilt on D3.js with responsive sizing and interactive tooltips.\n\nThis is the only public entry point for bar charts. Do not import\n`RenderedLinearBarChart`, `RenderedOrdinalBarChart`, `EmptyBarChart`, or\n`LoadingBarChart` directly — `BarChart` selects the correct renderer\n(linear vs. ordinal scale) automatically based on the data type,\nand manages all loading and empty states internally.\n\nSupports horizontal/vertical orientation, stacked/grouped bars,\nand various legend placements.\n\nData format: `CategoryData` `[{ key: string, value: number }]`",
   "package": "@redsift/charts",
   "filePath": "packages/charts/src/components/BarChart/BarChart.tsx",
   "props": [

package/data/docs/components/charts/ChartContainerTitle.json

@@ -570,5 +570,9 @@
     }
   ],
   "examples": [],
-  "tags": {}
+  "tags": {},
+  "keywords": [
+    "chart title",
+    "chart heading"
+  ]
 }

package/data/docs/components/charts/Legend.json

@@ -506,5 +506,10 @@
     }
   ],
   "examples": [],
-  "tags": {}
+  "tags": {},
+  "keywords": [
+    "chart legend",
+    "color legend",
+    "series legend"
+  ]
 }

package/data/docs/components/charts/LineChart.json

@@ -1,6 +1,6 @@
 {
   "name": "LineChart",
-  "description": "LineChart displays trends over time or continuous data.\nBuilt on D3.js with smooth interpolation and interactive data points.\n\nData format: `LinearData` `[{ key: Date, value: number, label?: string }]`",
+  "description": "LineChart displays trends over time or continuous data.\nBuilt on D3.js with smooth interpolation and interactive data points.\n\nThis is the only public entry point for line charts. Do not import\n`RenderedLineChart`, `EmptyLineChart`, or `LoadingLineChart` directly —\nthose are internal sub-components that `LineChart` selects automatically\nbased on whether `data` is present and non-empty.\n\nData format: `LinearData` `[{ key: Date, value: number, label?: string }]`",
   "package": "@redsift/charts",
   "filePath": "packages/charts/src/components/LineChart/LineChart.tsx",
   "props": [
@@ -749,5 +749,11 @@
     }
   ],
   "examples": [],
-  "tags": {}
+  "tags": {},
+  "keywords": [
+    "line graph",
+    "time series",
+    "trend chart",
+    "line visualization"
+  ]
 }

package/data/docs/components/charts/PieChart.json

@@ -822,5 +822,10 @@
     }
   ],
   "examples": [],
-  "tags": {}
+  "tags": {},
+  "keywords": [
+    "pie graph",
+    "donut chart",
+    "pie visualization"
+  ]
 }

package/data/docs/components/charts/ScatterPlot.json

@@ -798,5 +798,10 @@
     }
   ],
   "examples": [],
-  "tags": {}
+  "tags": {},
+  "keywords": [
+    "scatter graph",
+    "dot plot",
+    "scatter visualization"
+  ]
 }

package/data/docs/components/dashboard/ChartEmptyState.json

@@ -38,5 +38,12 @@
     }
   ],
   "examples": [],
-  "tags": {}
+  "tags": {},
+  "keywords": [
+    "chart loading",
+    "chart empty",
+    "chart error",
+    "empty chart",
+    "no data chart"
+  ]
 }

package/data/docs/components/dashboard/Dashboard.json

@@ -22,5 +22,10 @@
     }
   ],
   "examples": [],
-  "tags": {}
+  "tags": {},
+  "keywords": [
+    "dashboard page",
+    "dashboard layout",
+    "dashboard container"
+  ]
 }

package/data/docs/components/dashboard/DataCard.json

@@ -296,5 +296,22 @@
     }
   ],
   "examples": [],
-  "tags": {}
+  "tags": {},
+  "usageRules": [
+    "DataCard.Header, DataCard.Body, and DataCard.Listbox must be direct children of <DataCard>. Never nest them inside each other (e.g. Listbox inside Body) — nesting doubles margins and breaks layout.",
+    "Use DataCard.Body for static/link DataRow children. Use DataCard.Listbox for interactive filter-selection DataRow children. Do not combine both in one DataCard.",
+    "The `slot` prop is not supported. Do not pass slot=\"heading\" or similar — use the compound sub-component API instead."
+  ],
+  "disambiguation": "DataCard is a purpose-built KPI/metric tile from @redsift/dashboard. This is the correct component 9 out of 10 times when building \"a card with a big number\" or \"summary cards above a grid\". Do NOT use Card or DetailedCard for this.",
+  "antiPatterns": [
+    "❌ <Card style={{ borderLeft: \"4px solid green\" }}> for KPI tiles → ✅ <DataCard color=\"success\"> — DataCard is purpose-built for metric tiles."
+  ],
+  "keywords": [
+    "kpi tile",
+    "metric tile",
+    "stat card",
+    "kpi card",
+    "summary card",
+    "metric card"
+  ]
 }

package/data/docs/components/dashboard/DataCardBody.json

@@ -435,5 +435,13 @@
     }
   ],
   "examples": [],
-  "tags": {}
+  "tags": {},
+  "usageRules": [
+    "Must be a direct child of <DataCard>. Do not place DataCard.Listbox or DataCard.Header inside DataCard.Body.",
+    "Children should be <DataRow> components."
+  ],
+  "keywords": [
+    "metric body",
+    "kpi body"
+  ]
 }

package/data/docs/components/dashboard/DataCardHeader.json

@@ -300,5 +300,12 @@
     }
   ],
   "examples": [],
-  "tags": {}
+  "tags": {},
+  "usageRules": [
+    "Must be a direct child of <DataCard>, not nested inside DataCard.Body or DataCard.Listbox."
+  ],
+  "keywords": [
+    "metric header",
+    "kpi header"
+  ]
 }

package/data/docs/components/dashboard/DataCardListbox.json

@@ -533,5 +533,14 @@
     }
   ],
   "examples": [],
-  "tags": {}
+  "tags": {},
+  "usageRules": [
+    "Must be a direct child of <DataCard>. Do not place DataCard.Body or DataCard.Header inside DataCard.Listbox.",
+    "Children should be <DataRow> components with onClick and hasFilterIcon for drilldown interactions."
+  ],
+  "keywords": [
+    "metric listbox",
+    "kpi listbox",
+    "filter listbox"
+  ]
 }

package/data/docs/components/dashboard/DataRow.json

@@ -576,5 +576,11 @@
     }
   ],
   "examples": [],
-  "tags": {}
+  "tags": {},
+  "keywords": [
+    "kpi row",
+    "metric row",
+    "data row",
+    "summary row"
+  ]
 }

package/data/docs/components/dashboard/PdfExportButton.json

@@ -454,5 +454,10 @@
     }
   ],
   "examples": [],
-  "tags": {}
+  "tags": {},
+  "keywords": [
+    "export pdf",
+    "download pdf",
+    "print dashboard"
+  ]
 }

package/data/docs/components/dashboard/TimeSeriesBarChart.json

@@ -168,5 +168,10 @@
     }
   ],
   "examples": [],
-  "tags": {}
+  "tags": {},
+  "keywords": [
+    "time bar chart",
+    "temporal bar chart",
+    "time series bar"
+  ]
 }

package/data/docs/components/dashboard/WithFilters.json

@@ -98,5 +98,9 @@
     }
   ],
   "examples": [],
-  "tags": {}
+  "tags": {},
+  "keywords": [
+    "filter provider",
+    "crossfilter wrapper"
+  ]
 }

package/data/docs/components/design-system/Alert.json

@@ -345,5 +345,12 @@
     }
   ],
   "examples": [],
-  "tags": {}
+  "tags": {},
+  "keywords": [
+    "banner",
+    "notification",
+    "message bar",
+    "info banner",
+    "error banner"
+  ]
 }

package/data/docs/components/design-system/AppBar.json

@@ -60,5 +60,10 @@
     }
   ],
   "examples": [],
-  "tags": {}
+  "tags": {},
+  "keywords": [
+    "top bar",
+    "header bar",
+    "navigation bar"
+  ]
 }

package/data/docs/components/design-system/AppContent.json

@@ -562,5 +562,12 @@
     }
   ],
   "examples": [],
-  "tags": {}
+  "tags": {},
+  "usageRules": [
+    "Must be a direct child of <AppContainer>. This is where page content goes."
+  ],
+  "keywords": [
+    "main content",
+    "page content"
+  ]
 }

package/data/docs/components/design-system/AppSidePanel.json

@@ -83,5 +83,13 @@
     }
   ],
   "examples": [],
-  "tags": {}
+  "tags": {},
+  "usageRules": [
+    "Must be a direct child of <AppContainer>. Houses the side navigation."
+  ],
+  "keywords": [
+    "side nav",
+    "sidebar",
+    "navigation panel"
+  ]
 }

package/data/docs/components/design-system/Badge.json

@@ -289,5 +289,10 @@
     }
   ],
   "examples": [],
-  "tags": {}
+  "tags": {},
+  "keywords": [
+    "counter",
+    "count badge",
+    "notification badge"
+  ]
 }

package/data/docs/components/design-system/Breadcrumbs.json

@@ -294,5 +294,14 @@
     }
   ],
   "examples": [],
-  "tags": {}
+  "tags": {},
+  "usageRules": [
+    "Only accepts Breadcrumbs.Item as children. Non-Item children are silently ignored and will not render.",
+    "The last Breadcrumbs.Item is automatically marked as the current page and is not clickable.",
+    "Provide an aria-label for accessibility (e.g. aria-label=\"Breadcrumb navigation\")."
+  ],
+  "keywords": [
+    "breadcrumb nav",
+    "path navigation"
+  ]
 }