@assistant-ui/mcp-docs-server 0.2.1 → 0.2.3

package/.docs/raw/docs/ui/dot-matrix.mdx

@@ -1,133 +0,0 @@
----
-title: Dot Matrix
-description: Tiny 5x5 dot-matrix indicator with 20 state-specific blink patterns.
-platforms: ["react"]
----
-
-import { PreviewCode } from "@/components/docs/preview-code.server";
-import {
-  DotMatrixSample,
-  DotMatrixLifecycleSample,
-  DotMatrixInlineSample,
-  DotMatrixSizesSample,
-} from "@/components/docs/samples/dot-matrix";
-
-<Callout>
-  This is a **standalone component** that does not depend on the assistant-ui runtime. Use it anywhere in your application.
-</Callout>
-
-<DotMatrixSample />
-
-## Installation
-
-<InstallCommand shadcn={["dot-matrix"]} />
-
-This adds a `/components/assistant-ui/dot-matrix.tsx` file to your project, which you can adjust as needed. The component has no dependencies beyond React.
-
-## Usage
-
-```tsx
-import { DotMatrix } from "@/components/assistant-ui/dot-matrix";
-
-export function RunIndicator({ isRunning }: { isRunning: boolean }) {
-  return <DotMatrix state={isRunning ? "loading" : "success"} />;
-}
-```
-
-Dots inherit the surrounding text color, so the matrix renders dark dots on light backgrounds and light dots on dark backgrounds without configuration. Every state is a combination of a dot pattern, a motion, and a color, and switching states cross-fades each dot into its new pattern.
-
-## States
-
-| State | Pattern |
-|-------|---------|
-| `idle` | Dim static grid |
-| `loading` | Randomized twinkle (default) |
-| `thinking` | Diagonal wave |
-| `streaming` | Falling rain, per-column streaks |
-| `searching` | Horizontal sweep |
-| `syncing` | Rotating sweep around the center |
-| `connecting` | Ripple expanding from the center |
-| `waiting` | Ellipsis dots blinking in sequence |
-| `uploading` | Wave rising upward |
-| `downloading` | Wave falling downward |
-| `listening` | Slow equalizer columns |
-| `speaking` | Fast equalizer columns |
-| `recording` | Red center dot breathing |
-| `success` | Green check glyph, static |
-| `error` | Red cross glyph, blinking |
-| `warning` | Amber exclamation glyph, slow blink |
-| `info` | Blue info glyph, static |
-| `paused` | Pause bars glyph, static |
-| `stopped` | Square glyph, static |
-| `offline` | Very dim static grid |
-
-The component exports `dotMatrixStates` (the ordered list above) and the `DotMatrixState` union type, so UIs can enumerate or map states without duplicating the list. New states are added by extending the `STATES` record in the component source with a glyph and a per-dot blink function.
-
-## Examples
-
-### State Lifecycle
-
-Drive the `state` prop from your run status; the matrix morphs between patterns instead of swapping components.
-
-<PreviewCode file="components/docs/samples/dot-matrix" name="DotMatrixLifecycleSample">
-  <DotMatrixLifecycleSample />
-</PreviewCode>
-
-### Inline With Text
-
-At the default `size-4` the matrix aligns with text like an icon, and the dots adapt to inverted surfaces through `currentColor`.
-
-<PreviewCode file="components/docs/samples/dot-matrix" name="DotMatrixInlineSample">
-  <DotMatrixInlineSample />
-</PreviewCode>
-
-### Sizes
-
-The matrix is an SVG, so any size utility scales it crisply.
-
-<DotMatrixSizesSample />
-
-## How It Works
-
-The grid is a 5x5 SVG of `currentColor` circles. Blinking is a single CSS keyframe animation whose high/low opacity bounds come from registered per-dot CSS variables; the animation runs in every state (static states collapse the bounds) and the bounds carry a transition, which is what makes state changes cross-fade per dot. The randomized loading rhythm uses deterministic per-dot delays and durations, so server and client render identical markup and no JavaScript runs after render. With `prefers-reduced-motion`, the dots hold their resting opacity instead of blinking.
-
-The root is a `role="status"` live region whose text content is the state name (or the `label` prop), so screen readers announce state changes; the SVG itself is `aria-hidden`.
-
-## API Reference
-
-### DotMatrix
-
-<ParametersTable
-  type="DotMatrixProps"
-  parameters={[
-    {
-      name: "state",
-      type: "DotMatrixState",
-      default: '"loading"',
-      description:
-        "One of the 20 built-in states listed above, controlling pattern, motion, and color.",
-    },
-    {
-      name: "label",
-      type: "string",
-      description:
-        "Accessible label announced by screen readers. Defaults to the state name.",
-    },
-    {
-      name: "className",
-      type: "string",
-      description:
-        "Additional CSS classes. Use size utilities to scale and text color utilities to recolor.",
-    },
-  ]}
-/>
-
-### Styling
-
-Color follows `currentColor`, so `className="text-blue-500"` recolors the whole matrix; the outcome states (`success`, `error`, `warning`, `info`, `recording`, and the muted static states) set their own color which a `className` can override. Dots are targetable via `[data-slot="dot-matrix"]` and `[data-slot="dot-matrix-dot"]`, and the current state is exposed as `data-state` on the root.
-
-## Related Components
-
-- [Number Roll](/docs/ui/number-roll) - Animated rolling number
-- [Badge](/docs/ui/badge) - Small status and metadata labels
-- [Voice](/docs/ui/voice) - Voice activity visualization

package/.docs/raw/docs/ui/number-roll.mdx

@@ -1,154 +0,0 @@
----
-title: Number Roll
-description: Animated number that rolls digits odometer-style when the value changes.
-platforms: ["react"]
----
-
-import { PreviewCode } from "@/components/docs/preview-code.server";
-import {
-  NumberRollSample,
-  NumberRollCompactSample,
-  NumberRollFormatSample,
-  NumberRollLiveSample,
-} from "@/components/docs/samples/number-roll";
-
-<Callout>
-  This is a **standalone component** that does not depend on the assistant-ui runtime. Use it anywhere in your application.
-</Callout>
-
-<NumberRollSample />
-
-## Installation
-
-<InstallCommand shadcn={["number-roll"]} />
-
-This adds a `/components/assistant-ui/number-roll.tsx` file to your project, which you can adjust as needed. The component has no dependencies beyond React.
-
-## Usage
-
-```tsx
-import { NumberRoll } from "@/components/assistant-ui/number-roll";
-
-export function TokenCounter({ count }: { count: number }) {
-  return <NumberRoll value={count} format={{ notation: "compact" }} />;
-}
-```
-
-When `value` changes, each digit rolls in place to its new value. Formatting is handled by `Intl.NumberFormat`, so structural changes animate too: when `700` becomes `1.1K` with compact notation, the surviving ones digit rolls from 0 to 1 while the leading `70` slides out and the decimal point, fraction digit, and `K` suffix slide in.
-
-## Examples
-
-### Compact Notation
-
-Pass any `Intl.NumberFormatOptions` via the `format` prop. Crossing a compact-notation threshold animates the formatting change instead of remounting the whole string.
-
-<PreviewCode file="components/docs/samples/number-roll" name="NumberRollCompactSample">
-  <NumberRollCompactSample />
-</PreviewCode>
-
-### Formats and Locales
-
-Currencies, percentages, suffixes, and non-English locales all work through the same `Intl.NumberFormat` pipeline. Compact thresholds and suffixes are locale-dependent (`1.2万` in `zh-CN`), so never hardcode them.
-
-<PreviewCode file="components/docs/samples/number-roll" name="NumberRollFormatSample">
-  <NumberRollFormatSample />
-</PreviewCode>
-
-### Live Counter
-
-Rapid successive updates retarget the in-flight roll smoothly, which makes the component suitable for streaming token counts and other live metrics.
-
-<PreviewCode file="components/docs/samples/number-roll" name="NumberRollLiveSample">
-  <NumberRollLiveSample />
-</PreviewCode>
-
-## How It Works
-
-The value is formatted with `Intl.NumberFormat.formatToParts` and split into keyed parts. Integer digits are keyed by place value counted from the right, so when `999` becomes `1,000` the existing columns keep their identity and roll in place while only the new leading digit and separator enter. Symbols (decimal point, group separators, currency signs, compact suffixes) cross-fade and collapse via animated `grid-template-columns`.
-
-Each digit renders a strip of 0 to 9 and animates a registered CSS custom property; CSS `mod()` math wraps the strip into an endless ribbon, so rolling from 9 to 0 continues in the trend direction instead of spinning backwards. There is no JavaScript animation loop and no animation library dependency.
-
-In browsers without CSS `mod()` support, and during server rendering, the component renders the plain formatted string. With `prefers-reduced-motion`, values swap instantly without rolling. When server rendering, pass an explicit `locales`: the server's default locale can differ from the visitor's browser locale, and a mismatched formatted string causes a React hydration error. Locales whose default numbering system is non-Latin (such as `ar-EG`) cross-fade their digits as symbols instead of rolling.
-
-The formatted value is exposed to screen readers as plain text while the animated digits are `aria-hidden`. Value changes are not announced automatically; wrap the component in an `aria-live` region if you need announcements.
-
-## API Reference
-
-### NumberRoll
-
-<ParametersTable
-  type="NumberRollProps"
-  parameters={[
-    {
-      name: "value",
-      type: "number",
-      required: true,
-      description: "The number to display.",
-    },
-    {
-      name: "format",
-      type: "Intl.NumberFormatOptions",
-      description:
-        "Number formatting options, e.g. `{ notation: \"compact\" }` or `{ style: \"currency\", currency: \"USD\" }`.",
-    },
-    {
-      name: "locales",
-      type: "Intl.LocalesArgument",
-      description:
-        "Locale(s) passed to `Intl.NumberFormat`. Pass an explicit value in server-rendered apps so the server and client format identically.",
-    },
-    {
-      name: "prefix",
-      type: "string",
-      description: "Static text rendered before the number.",
-    },
-    {
-      name: "suffix",
-      type: "string",
-      description: "Static text rendered after the number.",
-    },
-    {
-      name: "trend",
-      type: '"auto" | "up" | "down"',
-      default: '"auto"',
-      description:
-        "Roll direction. `auto` follows the sign of the value change; `up` and `down` force a direction, wrapping digits through 9/0 as needed.",
-    },
-    {
-      name: "duration",
-      type: "number",
-      default: "500",
-      description:
-        "Digit roll duration in milliseconds. Enter/exit fades run at 60% of this value.",
-    },
-    {
-      name: "className",
-      type: "string",
-      description: "Additional CSS classes.",
-    },
-  ]}
-/>
-
-### Styling
-
-The root applies `tabular-nums` so digits keep a constant width while rolling; the font you use must provide tabular figures for the layout to stay stable. Size and color are inherited from the surrounding text, so style it like any span:
-
-```tsx
-<NumberRoll value={value} className="text-4xl font-semibold" />
-```
-
-Change the animation speed via the `duration` prop; it drives both the CSS timing and the cleanup that unmounts exited characters, so overriding the duration variable in CSS alone would remove them mid-fade. The fade and easing variables are safe to override via the `style` prop (the defaults are set as inline styles, so plain `className` overrides do not apply):
-
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--aui-number-roll-duration` | `500ms` (from the `duration` prop) | Digit roll duration. |
-| `--aui-number-roll-fade` | 60% of the duration | Enter/exit fade and width-collapse duration. |
-| `--aui-number-roll-ease` | `cubic-bezier(0.23, 1, 0.32, 1)` | Digit roll easing. |
-
-Parts are targetable via data attributes: `[data-slot="number-roll"]`, `[data-slot="number-roll-part"]`, `[data-slot="number-roll-digit"]`, and `[data-slot="number-roll-symbol"]`.
-
-## Related Components
-
-- [Context Display](/docs/ui/context-display) - Live token usage ring and bar
-- [Message Timing](/docs/ui/message-timing) - Streaming stats badge
-- [Badge](/docs/ui/badge) - Small status and metadata labels

package/.docs/raw/docs/ui/select.mdx

@@ -1,254 +0,0 @@
----
-title: Select
-description: A dropdown select component with composable sub-components.
-links:
-  - label: Radix UI Select (Radix styles)
-    url: https://www.radix-ui.com/primitives/docs/components/select
-  - label: Base UI Select (base styles)
-    url: https://base-ui.com/react/components/select
-platforms: ["react"]
----
-
-import { PreviewCode } from "@/components/docs/preview-code.server";
-import {
-  SelectSample,
-  SelectDisabledItemsSample,
-  SelectPlaceholderSample,
-  SelectDisabledSample,
-  SelectGroupsSample,
-  SelectVariantsSample,
-  SelectSizesSample,
-  SelectScrollableSample,
-} from "@/components/docs/samples/select";
-import * as SelectRadixSamples from "@/components/docs/samples/select.radix";
-import { Flavored, FlavorSwitcher } from "@/components/docs/contexts/flavor.server";
-
-<Callout>
-  This is a **standalone component** that does not depend on the assistant-ui runtime. Use it anywhere in your application.
-</Callout>
-
-<FlavorSwitcher />
-
-<Flavored radix={<SelectRadixSamples.SelectSample />} base={<SelectSample />} />
-
-## Installation
-
-<InstallCommand shadcn={["select"]} />
-
-## Usage
-
-```tsx
-import { Select } from "@/components/assistant-ui/select";
-
-const options = [
-  { value: "apple", label: "Apple" },
-  { value: "banana", label: "Banana" },
-  { value: "orange", label: "Orange" },
-];
-
-export function FruitPicker() {
-  const [value, setValue] = useState("apple");
-
-  return (
-    <Select
-      value={value}
-      onValueChange={setValue}
-      options={options}
-      placeholder="Select a fruit..."
-    />
-  );
-}
-```
-
-## Examples
-
-### Variants
-
-Use the `variant` prop on `SelectTrigger` to change the visual style.
-
-<Flavored radix={<SelectRadixSamples.SelectVariantsSample />} base={<SelectVariantsSample />} />
-
-```tsx
-<SelectTrigger variant="outline" /> // Border (default)
-<SelectTrigger variant="ghost" />   // No border
-<SelectTrigger variant="muted" />   // Solid background
-```
-
-### Sizes
-
-Use the `size` prop on `SelectTrigger` to change the height.
-
-<Flavored radix={<SelectRadixSamples.SelectSizesSample />} base={<SelectSizesSample />} />
-
-```tsx
-<SelectTrigger size="default" /> // 36px (default)
-<SelectTrigger size="sm" />      // 32px
-```
-
-### Scrollable
-
-Long lists automatically become scrollable.
-
-<PreviewCode file="components/docs/samples/select" name="SelectScrollableSample" base={<SelectScrollableSample />}>
-  <SelectRadixSamples.SelectScrollableSample />
-</PreviewCode>
-
-### Groups
-
-Use the composable API for grouped options:
-
-<PreviewCode file="components/docs/samples/select" name="SelectGroupsSample" base={<SelectGroupsSample />}>
-  <SelectRadixSamples.SelectGroupsSample />
-</PreviewCode>
-
-### Disabled Items
-
-<PreviewCode file="components/docs/samples/select" name="SelectDisabledItemsSample" base={<SelectDisabledItemsSample />}>
-  <SelectRadixSamples.SelectDisabledItemsSample />
-</PreviewCode>
-
-### With Placeholder
-
-<PreviewCode file="components/docs/samples/select" name="SelectPlaceholderSample" base={<SelectPlaceholderSample />}>
-  <SelectRadixSamples.SelectPlaceholderSample />
-</PreviewCode>
-
-### Disabled Select
-
-<PreviewCode file="components/docs/samples/select" name="SelectDisabledSample" base={<SelectDisabledSample />}>
-  <SelectRadixSamples.SelectDisabledSample />
-</PreviewCode>
-
-## API Reference
-
-### Composable API
-
-| Component | Description |
-|-----------|-------------|
-| `Select` | A convenience component that renders a complete select with options. |
-| `SelectRoot` | The root component that manages state. |
-| `SelectTrigger` | The button that opens the dropdown. Accepts `variant` and `size` props. |
-| `SelectValue` | Renders the selected value or placeholder. |
-| `SelectContent` | The dropdown content container with animations. |
-| `SelectItem` | An individual selectable item. |
-| `SelectGroup` | Groups related items together. |
-| `SelectLabel` | A label for a group of items. |
-| `SelectSeparator` | A visual separator between items or groups. |
-| `SelectScrollUpButton` | Scroll indicator for long lists. |
-| `SelectScrollDownButton` | Scroll indicator for long lists. |
-
-With the Base UI flavor, `SelectValue` resolves the trigger label from the `items` prop on `SelectRoot`; pass the same array you map into `SelectItem` children. The Radix flavor reads the label from the selected item's text automatically.
-
-### Select
-
-A convenience component that renders a complete select with options.
-
-<ParametersTable
-  type="SelectProps"
-  parameters={[
-    {
-      name: "value",
-      type: "string",
-      required: true,
-      description: "The controlled value of the select.",
-    },
-    {
-      name: "onValueChange",
-      type: "(value: string) => void",
-      required: true,
-      description: "Callback when the selected value changes.",
-    },
-    {
-      name: "options",
-      type: "SelectOption[]",
-      required: true,
-      description: "Array of options to display.",
-    },
-    {
-      name: "placeholder",
-      type: "string",
-      description: "Placeholder text when no value is selected.",
-    },
-    {
-      name: "className",
-      type: "string",
-      description: "Additional CSS classes for the trigger.",
-    },
-    {
-      name: "disabled",
-      type: "boolean",
-      description: "Whether the select is disabled.",
-    },
-  ]}
-/>
-
-### SelectOption
-
-<ParametersTable
-  type="SelectOption"
-  parameters={[
-    {
-      name: "value",
-      type: "string",
-      required: true,
-      description: "The value of the option.",
-    },
-    {
-      name: "label",
-      type: "ReactNode",
-      required: true,
-      description: "The display label for the option.",
-    },
-    {
-      name: "textValue",
-      type: "string",
-      description: "Optional text value for typeahead. Defaults to label if it's a string.",
-    },
-    {
-      name: "disabled",
-      type: "boolean",
-      description: "Whether the option is disabled.",
-    },
-  ]}
-/>
-
-### SelectTrigger
-
-The button that opens the dropdown.
-
-<ParametersTable
-  type="SelectTriggerProps"
-  parameters={[
-    {
-      name: "variant",
-      type: '"outline" | "ghost" | "muted"',
-      default: '"outline"',
-      description: "The visual style of the trigger.",
-    },
-    {
-      name: "size",
-      type: '"sm" | "default" | "lg"',
-      default: '"default"',
-      description: "The size of the trigger.",
-    },
-    {
-      name: "className",
-      type: "string",
-      description: "Additional CSS classes.",
-    },
-  ]}
-/>
-
-### Style Variants (CVA)
-
-| Export | Description |
-|--------|-------------|
-| `selectTriggerVariants` | Styles for the select trigger button. |
-
-```tsx
-import { selectTriggerVariants } from "@/components/assistant-ui/select";
-
-<button className={selectTriggerVariants({ variant: "ghost", size: "sm" })}>
-  Custom Trigger
-</button>
-```