`. |
+| attributes | `{ PopoverTrigger?: NativeElementAttributes<"button", typeof PopoverTrigger> }` | - | Native HTML attributes forwarded to the internal composed components. |
+| children | `ReactNode` | - | Trigger element that opens the popover. |
+| closeOnFocusOutside | `boolean` | `true` | Closes the popover when focus moves from it, its trigger, or its anchor to an element outside all three. Applies to programmatic focus too, and has no effect on a modal popover. "Outside" is decided by DOM containment, so a nested surface given its own `portalContainer` counts as outside and closes this popover. Leave nested content on the inherited portal, which mounts inside this popover. |
+| defaultOpen | `boolean` | `false` | Initial open state when uncontrolled. |
+| disabled | `boolean` | - | Disables the popover trigger, preventing it from opening the popover. |
+| modal | `boolean` | `false` | Disables interaction with the rest of the page while the popover is open and hides it from assistive tech. |
+| onCloseAutoFocus | `(event: Event) => void` | - | Called when focus returns to the trigger after the popover closes. Call `event.preventDefault()` to skip the default focus restoration. |
+| onEscapeKeyDown | `(event: KeyboardEvent) => void` | - | Called when Escape is pressed inside the popover. Call `event.preventDefault()` to keep the popover open. |
+| onFocusOutside | `(event: Event) => void` | - | Called when focus moves outside the popover, its trigger, and its anchor, while `closeOnFocusOutside` is enabled. Call `event.preventDefault()` to keep the popover open. The event's `target` is the newly focused element. |
+| onInteractOutside | `(event: Event) => void` | - | Called after `onPointerDownOutside` when a pointer is pressed outside the popover. Focus moving outside calls `onFocusOutside` instead. Call `event.preventDefault()` to keep the popover open. |
+| onOpenAutoFocus | `(event: Event) => void` | - | Called when focus first moves into the popover after it opens. Call `event.preventDefault()` to skip the default focus behavior. |
+| onOpenChange | `(open: boolean) => void` | - | Called when the open state changes. |
+| onPointerDownOutside | `(event: Event) => void` | - | Called when a pointer is pressed outside the popover. Call `event.preventDefault()` to keep the popover open. |
+| open | `boolean` | - | Controlled open state. When provided, the consumer is responsible for updating it in response to `onOpenChange`. |
+| portal | `boolean` | `false` | Renders the floating content in a React portal. |
+| portalContainer | `HTMLElement` | `document.body` | Container for portaled floating content when no nearer portal target exists. |
+| positionAnchor | `string` | - | Overrides the CSS anchor name the popover positions against. Use to pair with a custom anchor name set on `PopoverTrigger` or `PopoverAnchor`. |
+| side | `"right" \| "bottom" \| "left" \| "top"` | `"bottom"` | Preferred side of the anchor to render against. Flips automatically when the popover would overflow the viewport. |
+
+`* = required prop`
+
+## Exports
+
+- Components: `Popover`, `PopoverAnchor`, `PopoverContent`, `PopoverRoot`, `PopoverTrigger`
+- Hooks: `usePopoverContext`
+- Types: `PopoverAnchorProps`, `PopoverContentProps`, `PopoverContextType`, `PopoverProps`, `PopoverRootProps`, `PopoverTriggerProps`
diff --git a/.agents/skills/kaizen-ui/references/components/PortalProvider.md b/.agents/skills/kaizen-ui/references/components/PortalProvider.md
new file mode 100644
index 000000000..5f76cb780
--- /dev/null
+++ b/.agents/skills/kaizen-ui/references/components/PortalProvider.md
@@ -0,0 +1,39 @@
+# PortalProvider
+
+Sets default portal behavior for descendant components that support portaling.
+Wrap the app (or a region) to make overlays portal to a shared target without
+passing `portal`/`portalContainer` to each one; descendants still override with
+their own props.
+
+## Notes
+
+- Render a single `PortalProvider` near the app root to make modals,
+ popovers, tooltips, and other overlays portal by default. This is the dedicated
+ home for app-wide portal defaults — `ThemeProvider` only controls theming. Set
+ `ssrStrategy="defer"` to render those overlays only after hydration, avoiding a
+ flash of unportaled content on the server.
+
+## Examples
+
+### App Root Portal Provider
+
+Wrap your app in a `PortalProvider` so descendant overlays (modals, popovers, tooltips) portal to the document body by default, escaping ancestor styles. Individual components opt out with `portal={false}`.
+
+```tsx
+
+ App content
+
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| portal | `boolean` | `true` | Default for whether descendant components portal their floating content. Components override this with their own `portal` prop. |
+| portalContainer | `HTMLElement` | `document.body` | Default container for descendant portaled content when no nearer portal target exists. |
+| ssrStrategy | `"inline" \| "defer"` | `"inline"` | Server-rendering strategy for descendant portals. - "inline" - Renders content in place on the server so it remains available without JavaScript. - "defer" - Omits portaled content until hydration to avoid a flash of unportaled content. |
+
+## Exports
+
+- Components: `PortalProvider`
+- Types: `PortalProviderProps`
diff --git a/.agents/skills/kaizen-ui/references/components/ProgressBar.md b/.agents/skills/kaizen-ui/references/components/ProgressBar.md
new file mode 100644
index 000000000..f544ad405
--- /dev/null
+++ b/.agents/skills/kaizen-ui/references/components/ProgressBar.md
@@ -0,0 +1,77 @@
+# ProgressBar
+
+Visual indicator for long-running operations like uploads, downloads, and other loading states.
+
+## Notes
+
+- Pass `aria-label` or `aria-labelledby` so assistive tech can announce what the bar represents.
+
+- Use Spinner (not ProgressBar) for indeterminate loading where no percentage exists — `kind="indeterminate"` is rarely the right choice when a Spinner would do.
+
+- Use Skeleton (not ProgressBar) when the content being loaded has a known layout — skeletons reduce perceived load time more than a bar does.
+
+## Examples
+
+### Basic Progress Bar
+
+Use a determinate progress bar when the completion percentage is known.
+
+```tsx
+
+```
+
+### Indeterminate Progress Bar
+
+Use an indeterminate progress bar when the duration of a process is unknown.
+
+```tsx
+
+```
+
+### Sizes Progress Bar
+
+Match the bar to its surroundings: `small` for inline or table row indicators, `medium` (default) for section-level progress, and `large` for prominent file uploads or page-level loading.
+
+```tsx
+
+```
+
+### Labeled Progress Bar
+
+Pair the progress bar with a visible text label using `aria-labelledby` when users benefit from seeing the operation name and percentage alongside the bar.
+
+```tsx
+
+
+ Uploading documents
+ 50%
+
+
+
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| **aria-label** * | `string` | - | Accessible name that tells assistive technology what the bar tracks. Provide this or `aria-labelledby`. |
+| **value** * | `number` | - | Current progress as a percentage from 0 to 100. Values above 100 render a full bar. |
+| aria-labelledby | `string` | - | Id of a visible element that names the bar for assistive technology. Provide this or `aria-label`. |
+| kind | `"determinate" \| "indeterminate"` | `"determinate"` | Whether the bar reflects a known percentage or an unknown duration. - "determinate" - Fills to `value` and is suited for known-length operations like file uploads. - "indeterminate" - Animates continuously and is suited for operations with unknown duration. |
+| size | `"small" \| "medium" \| "large"` | `"medium"` | Size of the progress bar. |
+
+`* = required prop`
+
+## Exports
+
+- Components: `ProgressBar`
+- Types: `ProgressBarProps`
+
+## See also
+
+- [Spinner](./Spinner.md)
+- [Skeleton](./Skeleton.md)
diff --git a/.agents/skills/kaizen-ui/references/components/RadioGroup.md b/.agents/skills/kaizen-ui/references/components/RadioGroup.md
new file mode 100644
index 000000000..872ce9f99
--- /dev/null
+++ b/.agents/skills/kaizen-ui/references/components/RadioGroup.md
@@ -0,0 +1,238 @@
+# RadioGroup
+
+A set of mutually exclusive options where the user picks exactly one. Use when the available options can comfortably fit on screen at once.
+
+## Notes
+
+- RadioGroup works best with 2-4 options. For 5+ mutually exclusive options use Select; for switching between views or modes of the same content use SegmentedControl; for multi-select use a group of Checkboxes.
+
+- SegmentedControl is for switching between views of the same content, not for choosing a value to submit. Use RadioGroup whenever the choice is part of a form.
+
+- Default to `orientation="vertical"`. Use `orientation="horizontal"` only when every option label is short (1-2 words) and horizontal compactness benefits the form.
+
+- Use `kind="tile"` when each option needs a larger clickable surface or supporting details. Pair it with `orientation="horizontal"` only when the tiles remain easy to compare at the available width.
+
+- Pre-select the most common option via `defaultValue` when one choice is clearly dominant — users keep the default they would have picked anyway.
+
+- Order options deliberately (most common, logical sequence, alphabetical, or safest first when options have risk implications — non-destructive or reversible option first) and keep the ordering consistent across sessions to build muscle memory.
+
+- Use the per-item `danger` flag for individual options with destructive implications. If the entire choice is dangerous, prefer marking the form's submit button with `color="danger"` instead.
+
+## Examples
+
+### Basic Radio Group
+
+```tsx
+
+```
+
+### With Icons Radio Group
+
+Use icons in `children` to give each option a visual anchor when the label alone is ambiguous.
+
+```tsx
+
+
+ Daily
+
+ ),
+ value: "daily",
+ },
+ {
+ children: (
+ <>
+
+ Weekly
+
+ ),
+ value: "weekly",
+ },
+ {
+ children: (
+ <>
+
+ Monthly
+
+ ),
+ value: "monthly",
+ },
+ ]}
+/>
+```
+
+### Tile Radio Group
+
+Use tile radio groups when each option needs a larger click target, supporting details, or a selected tile affordance. Tiles are density responsive, so apply `nv-density-compact` or `nv-density-spacious` to tune their spacing. By default horizontal tiles will wrap and have a min width of 10rem - override the min width by setting `--tile-min-width` if you need it to be larger/smaller.
+
+```tsx
+
+ Balanced
+
+ Good default for mixed workloads.
+
+
+ ),
+ value: "balanced",
+ },
+ {
+ children: (
+
+ Performance
+
+ Prioritizes throughput over cost.
+
+
+ ),
+ value: "performance",
+ },
+ {
+ children: (
+
+ Economy
+
+ Conserves resources for lighter tasks.
+
+
+ ),
+ value: "economy",
+ },
+ ]}
+/>
+```
+
+### With Danger Item Radio Group
+
+Use the `danger` flag on an item to warn users about a destructive or irreversible choice.
+
+```tsx
+
+```
+
+### Error Radio Group
+
+Use the group-level `error` prop to surface form validation failures across every item — pair with a `FormField` to render the error message.
+
+```tsx
+
+```
+
+### Label Start Radio Group
+
+Use start label placement when end-aligning radio indicators improves visual scanning.
+
+```tsx
+
+```
+
+### Hidden Indicator Radio Group
+
+Set `showIndicator={false}` when tile styling should communicate the selected state without a visible radio input.
+
+```tsx
+
+```
+
+### Composed
+
+Use the composed primitives when you need full control over item layout or custom content around each radio input.
+
+```tsx
+
+
+
+ RTX 4090
+
+
+
+ RTX 4080
+
+
+
+ RTX 3090
+
+
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| **items** * | `(Pick & Pick & { attributes?: { RadioGroupItem?: NativeElementAttributes<"label", React.ForwardRefExoticComponent & React.RefAttributes>>; RadioGroupInput?: NativeElementAttributes<"input", React.ForwardRefExoticComponent & React.RefAttributes>>; }; })[]` | - | Option definitions rendered in order as the radio group's items. |
+| defaultValue | `string` | - | Initial selected value when uncontrolled. |
+| disabled | `boolean` | - | Disables every radio in the group. |
+| error | `boolean` | - | Renders every radio in an error state. |
+| kind | `"default" \| "tile"` | `"default"` | Visual treatment for the group and its items. |
+| labelSide | `"start" \| "end"` | `"end"` | Which side of the radio input the label renders on. |
+| name | `string` | - | Shared HTML `name` applied to each radio input. Falls back to the surrounding `FormField`'s `name` when omitted. |
+| onValueChange | `(value: string) => void` | - | Called when the selected value changes. |
+| orientation | `"horizontal" \| "vertical"` | `"vertical"` | Layout direction. Determines both visual arrangement and arrow-key navigation order. |
+| required | `boolean` | - | Marks the group as required so the surrounding form refuses to submit without a selection. |
+| showIndicator | `boolean` | `true` | Shows the radio indicator. When `false`, the input remains in the DOM but is visually hidden so tile-style items can convey the selected state themselves. |
+| value | `string` | - | Controlled selected value. When provided, the consumer is responsible for updating it in response to `onValueChange`. |
+
+`* = required prop`
+
+## Exports
+
+- Components: `RadioGroup`, `RadioGroupInput`, `RadioGroupItem`, `RadioGroupRoot`
+- Hooks: `useRadioGroupContext`
+- Contexts: `RadioGroupContext`
+- Types: `RadioGroupContextType`, `RadioGroupInputProps`, `RadioGroupItemProps`, `RadioGroupProps`, `RadioGroupRootProps`
diff --git a/.agents/skills/kaizen-ui/references/components/RangeSlider.md b/.agents/skills/kaizen-ui/references/components/RangeSlider.md
new file mode 100644
index 000000000..ac4826165
--- /dev/null
+++ b/.agents/skills/kaizen-ui/references/components/RangeSlider.md
@@ -0,0 +1,125 @@
+# RangeSlider
+
+Also known as: Range Input, Input Range
+
+A two-thumb slider for selecting a minimum and maximum value within a range. Use for filtering by price, time window, or any min/max selection.
+
+## Notes
+
+- Always provide `aria-label` (or `aria-labelledby`); each thumb derives its accessible name from it.
+
+## Examples
+
+### Basic Range Slider
+
+```tsx
+
+```
+
+### With Step Marks Range Slider
+
+Use step marks to show discrete positions and help users pick precise range boundaries.
+
+```tsx
+
+```
+
+### With Formatted Steps Range Slider
+
+Use stepFormatFn to render step labels in a domain-specific format like currency, percentages, or units.
+
+```tsx
+ `$${value}`} aria-label="Price range" />
+```
+
+### With Custom Steps Range Slider
+
+Use customSteps when the meaningful values are non-uniform, like pricing tiers or named breakpoints.
+
+```tsx
+
+```
+
+### Custom Range Range Slider
+
+Use custom min/max/step when the default 0–100 range does not match the domain.
+
+```tsx
+
+```
+
+### With Min Distance Range Slider
+
+Use minStepsBetweenThumbs to enforce a minimum gap between the two thumbs, preventing collapsed selections.
+
+```tsx
+
+```
+
+### Disabled Range Slider
+
+Use when the range selection is locked and cannot be changed.
+
+```tsx
+
+```
+
+### Vertical Range Slider
+
+Use vertical orientation for controls like equalizer bands or vertical filtering.
+
+```tsx
+
+```
+
+### With Form Name Range Slider
+
+Set name to submit the range as two repeated form fields, supporting both hydrated and no-JS form submissions via the native fallback inputs.
+
+```tsx
+
+```
+
+### Composed
+
+Use the composed primitives when you need full control over track, range, thumb, and step label layout.
+
+```tsx
+
+
+
+
+
+
+
+
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| asChild | `boolean` | - | Render-as-child slot (from Radix Primitive) |
+| attributes | `{ RangeSliderTrack?: NativeElementAttributes<"span", typeof RangeSliderTrack>; RangeSliderRange?: NativeElementAttributes<"span", typeof RangeSliderRange>; RangeSliderThumbStart?: NativeElementAttributes<"span", typeof RangeSliderThumb>; RangeSliderThumbEnd?: NativeElementAttributes<"span", typeof RangeSliderThumb>; RangeSliderSteps?: NativeElementAttributes<"span", typeof RangeSliderSteps>; RangeSliderNativeFallbackFrom?: NativeElementAttributes<"input", typeof RangeSliderNativeFallback>; RangeSliderNativeFallbackTo?: NativeElementAttributes<"input", typeof RangeSliderNativeFallback> }` | - | Native HTML attributes forwarded to the internal composed components. |
+| customSteps | `number[]` | - | Explicit list of step values to render, overriding `stepInterval`. |
+| defaultValue | `[number, number]` | - | Initial `[start, end]` value when uncontrolled. |
+| disabled | `boolean` | `false` | Disables the slider. |
+| form | `string` | - | `id` of the form the slider belongs to. Defaults to the closest ancestor `