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

package/.docs/raw/docs/ui/diff-viewer.mdx

@@ -1,280 +0,0 @@
----
-title: "Diff Viewer"
-description: Render code diffs with syntax highlighting for additions and deletions.
-links:
-  - label: parse-diff
-    url: https://github.com/sergeyt/parse-diff
-  - label: diff
-    url: https://github.com/kpdecker/jsdiff
-platforms: ["react"]
----
-
-import { PreviewCode } from "@/components/docs/preview-code.server";
-import {
-  DiffViewerSample,
-  DiffViewerSplitSample,
-  DiffViewerViewModesSample,
-  DiffViewerVariantsSample,
-  DiffViewerSizesSample,
-} from "@/components/docs/samples/diff-viewer";
-
-<Callout>
-  This is a **standalone component** that does not depend on the assistant-ui runtime.
-</Callout>
-
-<DiffViewerViewModesSample />
-
-## Installation
-
-<InstallCommand shadcn={["diff-viewer"]} />
-
-## Usage
-
-```tsx
-import { DiffViewer } from "@/components/assistant-ui/diff-viewer";
-
-// With a unified diff patch
-<DiffViewer patch={diffString} />
-
-// With file comparison
-<DiffViewer
-  oldFile={{ content: "old content", name: "file.txt" }}
-  newFile={{ content: "new content", name: "file.txt" }}
-/>
-```
-
-### As Markdown Language Override
-
-Integrate with `MarkdownTextPrimitive` to render diff code blocks:
-
-```tsx title="/components/assistant-ui/markdown-text.tsx"
-import { DiffViewer } from "@/components/assistant-ui/diff-viewer"; // [!code ++]
-
-const MarkdownTextImpl = () => {
-  return (
-    <MarkdownTextPrimitive
-      remarkPlugins={[remarkGfm]}
-      className="aui-md"
-      components={defaultComponents}
-      componentsByLanguage={{                                       // [!code ++]
-        diff: {                                                     // [!code ++]
-          SyntaxHighlighter: ({ code }) => <DiffViewer patch={code} /> // [!code ++]
-        },                                                          // [!code ++]
-      }}                                                            // [!code ++]
-    />
-  );
-};
-
-export const MarkdownText = memo(MarkdownTextImpl);
-```
-
-## Examples
-
-### Unified View
-
-Shows all changes in a single column with `+`/`-` indicators. This is the default mode.
-
-<DiffViewerSample />
-
-```tsx
-<DiffViewer patch={diffString} viewMode="unified" />
-```
-
-### Split View
-
-Shows old content on the left, new content on the right side-by-side.
-
-<DiffViewerSplitSample />
-
-```tsx
-<DiffViewer patch={diffString} viewMode="split" />
-```
-
-### Interactive Mode Toggle
-
-<PreviewCode file="components/docs/samples/diff-viewer" name="DiffViewerViewModesSample">
-  <DiffViewerViewModesSample />
-</PreviewCode>
-
-### Variants
-
-<DiffViewerVariantsSample />
-
-### Sizes
-
-<DiffViewerSizesSample />
-
-### Theming
-
-DiffViewer uses CSS variables for colors. Override them in your CSS:
-
-```css
-[data-slot="diff-viewer"] {
-  --diff-add-bg: rgba(46, 160, 67, 0.15);
-  --diff-add-text: #1a7f37;
-  --diff-add-text-dark: #3fb950;
-  --diff-del-bg: rgba(248, 81, 73, 0.15);
-  --diff-del-text: #cf222e;
-  --diff-del-text-dark: #f85149;
-}
-```
-
-| Variable | Description |
-|----------|-------------|
-| `--diff-add-bg` | Background for added lines |
-| `--diff-add-text` | Text color for added lines (light mode) |
-| `--diff-add-text-dark` | Text color for added lines (dark mode) |
-| `--diff-del-bg` | Background for deleted lines |
-| `--diff-del-text` | Text color for deleted lines (light mode) |
-| `--diff-del-text-dark` | Text color for deleted lines (dark mode) |
-
-## API Reference
-
-### DiffViewer
-
-The main component for rendering diffs.
-
-<ParametersTable
-  type="DiffViewerProps"
-  parameters={[
-    {
-      name: "patch",
-      type: "string",
-      description: "Unified diff string (e.g., output from git diff).",
-    },
-    {
-      name: "code",
-      type: "string",
-      description: "Alias for patch (for markdown integration).",
-    },
-    {
-      name: "oldFile",
-      type: "{ content: string; name?: string }",
-      description: "Old file for direct comparison.",
-    },
-    {
-      name: "newFile",
-      type: "{ content: string; name?: string }",
-      description: "New file for direct comparison.",
-    },
-    {
-      name: "viewMode",
-      type: '"unified" | "split"',
-      default: '"unified"',
-      description: "Display mode for the diff.",
-    },
-    {
-      name: "variant",
-      type: '"default" | "ghost" | "muted"',
-      default: '"default"',
-      description: "Visual style variant.",
-    },
-    {
-      name: "size",
-      type: '"sm" | "default" | "lg"',
-      default: '"default"',
-      description: "Font size.",
-    },
-    {
-      name: "showLineNumbers",
-      type: "boolean",
-      default: "true",
-      description: "Show line numbers.",
-    },
-    {
-      name: "showIcon",
-      type: "boolean",
-      default: "true",
-      description: "Show file extension badge in header.",
-    },
-    {
-      name: "showStats",
-      type: "boolean",
-      default: "true",
-      description: "Show addition/deletion counts in header.",
-    },
-    {
-      name: "className",
-      type: "string",
-      description: "Additional CSS classes.",
-    },
-  ]}
-/>
-
-### Composable API
-
-| Component | Description |
-|-----------|-------------|
-| `DiffViewer` | Main component that renders the diff. |
-| `DiffViewerFile` | Wrapper for each file in multi-file diffs. |
-| `DiffViewerHeader` | File name header with icon and stats. |
-| `DiffViewerContent` | Scrollable content area. |
-| `DiffViewerLine` | Individual line in unified mode. |
-| `DiffViewerSplitLine` | Side-by-side line pair in split mode. |
-| `DiffViewerFileBadge` | File extension badge (e.g., "TS"). |
-| `DiffViewerStats` | Addition/deletion count display. |
-
-### Style Variants (CVA)
-
-| Export | Description |
-|--------|-------------|
-| `diffViewerVariants` | Styles for the root container. |
-| `diffLineVariants` | Background styles for diff lines. |
-| `diffLineTextVariants` | Text color styles for diff lines. |
-
-```tsx
-import {
-  diffViewerVariants,
-  diffLineVariants,
-  diffLineTextVariants,
-} from "@/components/assistant-ui/diff-viewer";
-
-// Use variants directly
-<div className={diffViewerVariants({ variant: "ghost", size: "sm" })}>
-  Custom diff container
-</div>
-```
-
-### Utilities
-
-| Export | Description |
-|--------|-------------|
-| `parsePatch(patch)` | Parse unified diff string into structured data. |
-| `computeDiff(old, new)` | Compute diff between two strings. |
-| `ParsedLine` | Type for a single diff line. |
-| `ParsedFile` | Type for a parsed file with lines and stats. |
-| `SplitLinePair` | Type for a side-by-side line pair. |
-
-## Styling
-
-### Data Attributes
-
-Use data attributes for custom styling:
-
-| Attribute | Values | Description |
-|-----------|--------|-------------|
-| `data-slot` | `"diff-viewer"`, `"diff-viewer-header"`, `"diff-viewer-line"`, etc. | Component identification |
-| `data-type` | `"add"`, `"del"`, `"normal"`, `"empty"` | Line type |
-| `data-view-mode` | `"unified"`, `"split"` | Current view mode |
-| `data-variant` | `"default"`, `"ghost"`, `"muted"` | Current variant |
-
-### Custom CSS Example
-
-```css
-[data-slot="diff-viewer"][data-view-mode="split"] {
-  /* Custom split view styles */
-}
-
-[data-slot="diff-viewer-line"][data-type="add"] {
-  /* Custom addition styles */
-}
-
-[data-slot="diff-viewer-line"][data-type="del"] {
-  /* Custom deletion styles */
-}
-```
-
-## Related Components
-
-- [Markdown](/docs/ui/markdown) - Rich text rendering where diff viewer can be integrated
-- [Syntax Highlighting](/docs/ui/syntax-highlighting) - Code highlighting for other languages

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