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

package/.docs/raw/docs/ui/accordion.mdx

@@ -1,266 +0,0 @@
----
-title: Accordion
-description: A vertically stacked set of interactive headings that reveal or hide content sections.
-links:
-  - label: Radix UI Accordion (Radix styles)
-    url: https://www.radix-ui.com/primitives/docs/components/accordion
-  - label: Base UI Accordion (base styles)
-    url: https://base-ui.com/react/components/accordion
-platforms: ["react"]
----
-
-import { PreviewCode } from "@/components/docs/preview-code.server";
-import {
-  AccordionSample,
-  AccordionVariantsSample,
-  AccordionMultipleSample,
-  AccordionWithIconsSample,
-  AccordionControlledSample,
-  AccordionFAQSample,
-} from "@/components/docs/samples/accordion";
-import * as AccordionRadixSamples from "@/components/docs/samples/accordion.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={<AccordionRadixSamples.AccordionSample />} base={<AccordionSample />} />
-
-## Installation
-
-<InstallCommand shadcn={["accordion"]} />
-
-## Usage
-
-```tsx
-import {
-  Accordion,
-  AccordionItem,
-  AccordionTrigger,
-  AccordionContent,
-} from "@/components/assistant-ui/accordion";
-
-export function Example() {
-  return (
-    <Accordion type="single" collapsible>
-      <AccordionItem value="item-1">
-        <AccordionTrigger>Section 1</AccordionTrigger>
-        <AccordionContent>Content for section 1.</AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-2">
-        <AccordionTrigger>Section 2</AccordionTrigger>
-        <AccordionContent>Content for section 2.</AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  );
-}
-```
-
-## Examples
-
-### Variants
-
-Use the `variant` prop on `Accordion` to change the visual style. Child components inherit the variant automatically.
-
-<Flavored radix={<AccordionRadixSamples.AccordionVariantsSample />} base={<AccordionVariantsSample />} />
-
-```tsx
-// Default - border-bottom separator
-<Accordion type="single" collapsible variant="default">
-  <AccordionItem value="item-1">
-    <AccordionTrigger>...</AccordionTrigger>
-    <AccordionContent>...</AccordionContent>
-  </AccordionItem>
-</Accordion>
-
-// Outline - bordered container
-<Accordion type="single" collapsible variant="outline">
-  <AccordionItem value="item-1">
-    <AccordionTrigger>...</AccordionTrigger>
-    <AccordionContent>...</AccordionContent>
-  </AccordionItem>
-</Accordion>
-
-// Ghost - separated cards
-<Accordion type="single" collapsible variant="ghost">
-  <AccordionItem value="item-1">
-    <AccordionTrigger>...</AccordionTrigger>
-    <AccordionContent>...</AccordionContent>
-  </AccordionItem>
-</Accordion>
-```
-
-### Multiple Items Open
-
-Use `type="multiple"` to allow multiple items to be open simultaneously.
-
-<Flavored radix={<AccordionRadixSamples.AccordionMultipleSample />} base={<AccordionMultipleSample />} />
-
-```tsx
-<Accordion type="multiple">
-  <AccordionItem value="item-1">
-    <AccordionTrigger>First Section</AccordionTrigger>
-    <AccordionContent>Content 1</AccordionContent>
-  </AccordionItem>
-  <AccordionItem value="item-2">
-    <AccordionTrigger>Second Section</AccordionTrigger>
-    <AccordionContent>Content 2</AccordionContent>
-  </AccordionItem>
-</Accordion>
-```
-
-### With Icons
-
-Add icons or custom elements inside the trigger.
-
-<PreviewCode file="components/docs/samples/accordion" name="AccordionWithIconsSample" base={<AccordionWithIconsSample />}>
-  <AccordionRadixSamples.AccordionWithIconsSample />
-</PreviewCode>
-
-### Controlled
-
-Use `value` and `onValueChange` for controlled accordion state.
-
-<PreviewCode file="components/docs/samples/accordion" name="AccordionControlledSample" base={<AccordionControlledSample />}>
-  <AccordionRadixSamples.AccordionControlledSample />
-</PreviewCode>
-
-### FAQ Section
-
-A practical example of using accordion for a FAQ section.
-
-<PreviewCode file="components/docs/samples/accordion" name="AccordionFAQSample" base={<AccordionFAQSample />}>
-  <AccordionRadixSamples.AccordionFAQSample />
-</PreviewCode>
-
-## API Reference
-
-### Composable API
-
-| Component | Description |
-|-----------|-------------|
-| `Accordion` | The root component that manages accordion state and variant. |
-| `AccordionItem` | A single collapsible section container. |
-| `AccordionTrigger` | The clickable header that toggles content visibility. |
-| `AccordionContent` | The collapsible content panel. |
-
-### Accordion
-
-The root component that manages accordion state. Set `variant` here to style all child components.
-
-<ParametersTable
-  type="AccordionProps"
-  parameters={[
-    {
-      name: "type",
-      type: '"single" | "multiple"',
-      required: true,
-      description: "Whether only one or multiple items can be open at once.",
-    },
-    {
-      name: "collapsible",
-      type: "boolean",
-      default: "false",
-      description: "When type is 'single', allows closing the open item by clicking it again.",
-    },
-    {
-      name: "defaultValue",
-      type: "string | string[]",
-      description: "The default open item(s) (uncontrolled).",
-    },
-    {
-      name: "value",
-      type: "string | string[]",
-      description: "The controlled open item(s).",
-    },
-    {
-      name: "onValueChange",
-      type: "(value: string | string[]) => void",
-      description: "Callback when the open item(s) change.",
-    },
-    {
-      name: "variant",
-      type: '"default" | "outline" | "ghost"',
-      default: '"default"',
-      description: "The visual style of the accordion. Child components inherit this automatically.",
-    },
-    {
-      name: "className",
-      type: "string",
-      description: "Additional CSS classes.",
-    },
-  ]}
-/>
-
-### AccordionItem
-
-A single collapsible section container.
-
-<ParametersTable
-  type="AccordionItemProps"
-  parameters={[
-    {
-      name: "value",
-      type: "string",
-      required: true,
-      description: "A unique identifier for this item.",
-    },
-    {
-      name: "disabled",
-      type: "boolean",
-      description: "Whether the item is disabled.",
-    },
-    {
-      name: "className",
-      type: "string",
-      description: "Additional CSS classes.",
-    },
-  ]}
-/>
-
-### AccordionTrigger
-
-The clickable header that toggles content visibility.
-
-<ParametersTable
-  type="AccordionTriggerProps"
-  parameters={[
-    {
-      name: "className",
-      type: "string",
-      description: "Additional CSS classes.",
-    },
-  ]}
-/>
-
-### AccordionContent
-
-The collapsible content panel.
-
-<ParametersTable
-  type="AccordionContentProps"
-  parameters={[
-    {
-      name: "className",
-      type: "string",
-      description: "Additional CSS classes.",
-    },
-  ]}
-/>
-
-### Style Variants (CVA)
-
-| Export | Description |
-|--------|-------------|
-| `accordionVariants` | Styles for the accordion container. |
-
-```tsx
-import { accordionVariants } from "@/components/assistant-ui/accordion";
-
-<div className={accordionVariants({ variant: "outline" })}>
-  Custom Accordion Container
-</div>
-```

package/.docs/raw/docs/ui/badge.mdx

@@ -1,150 +0,0 @@
----
-title: Badge
-description: A small label component for displaying status, categories, or metadata.
-links:
-  - label: Radix UI Slot (Radix styles)
-    url: https://www.radix-ui.com/primitives/docs/utilities/slot
-  - label: Base UI useRender (base styles)
-    url: https://base-ui.com/react/utils/use-render
-platforms: ["react"]
----
-
-import { PreviewCode } from "@/components/docs/preview-code.server";
-import {
-  BadgeSample,
-  BadgeSizesSample,
-  BadgeWithIconSample,
-  BadgeAsLinkSample,
-  BadgeAnimatedSample,
-} from "@/components/docs/samples/badge";
-import * as BadgeRadixSamples from "@/components/docs/samples/badge.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={<BadgeRadixSamples.BadgeSample />} base={<BadgeSample />} />
-
-## Installation
-
-<InstallCommand shadcn={["badge"]} />
-
-## Usage
-
-```tsx
-import { Badge } from "@/components/assistant-ui/badge";
-
-export function Example() {
-  return <Badge>Label</Badge>;
-}
-```
-
-## Examples
-
-### Variants
-
-Use the `variant` prop to change the visual style.
-
-<Flavored radix={<BadgeRadixSamples.BadgeSample />} base={<BadgeSample />} />
-
-```tsx
-<Badge variant="outline" />     // Border (default)
-<Badge variant="secondary" />   // Secondary background
-<Badge variant="muted" />       // Muted background
-<Badge variant="ghost" />       // No background
-<Badge variant="info" />        // Blue/info style
-<Badge variant="warning" />     // Amber/warning style
-<Badge variant="success" />     // Green/success style
-<Badge variant="destructive" /> // Red/error style
-```
-
-### Sizes
-
-Use the `size` prop to change the badge size.
-
-<Flavored radix={<BadgeRadixSamples.BadgeSizesSample />} base={<BadgeSizesSample />} />
-
-```tsx
-<Badge size="sm" />      // Small
-<Badge size="default" /> // Default
-<Badge size="lg" />      // Large
-```
-
-### With Icons
-
-Badges automatically style SVG icons.
-
-<PreviewCode file="components/docs/samples/badge" name="BadgeWithIconSample" base={<BadgeWithIconSample />}>
-  <BadgeRadixSamples.BadgeWithIconSample />
-</PreviewCode>
-
-### As Link
-
-Compose with `render` (Base UI) or `asChild` (Radix) to render the badge as a different element, like a link.
-
-<PreviewCode file="components/docs/samples/badge" name="BadgeAsLinkSample" base={<BadgeAsLinkSample />}>
-  <BadgeRadixSamples.BadgeAsLinkSample />
-</PreviewCode>
-
-### Animated
-
-Combine with CSS transitions for scroll and color animations.
-
-<PreviewCode file="components/docs/samples/badge" name="BadgeAnimatedSample" base={<BadgeAnimatedSample />}>
-  <BadgeRadixSamples.BadgeAnimatedSample />
-</PreviewCode>
-
-## API Reference
-
-### Badge
-
-<ParametersTable
-  type="BadgeProps"
-  parameters={[
-    {
-      name: "variant",
-      type: '"outline" | "secondary" | "muted" | "ghost" | "info" | "warning" | "success" | "destructive"',
-      default: '"outline"',
-      description: "The visual style of the badge.",
-    },
-    {
-      name: "size",
-      type: '"sm" | "default" | "lg"',
-      default: '"default"',
-      description: "The size of the badge.",
-    },
-    {
-      name: "render",
-      type: "ReactElement | function",
-      description: "Base UI: compose as a different element instead of rendering a span.",
-    },
-    {
-      name: "asChild",
-      type: "boolean",
-      default: "false",
-      description: "Radix: merge props with a child element instead of rendering a span.",
-    },
-    {
-      name: "className",
-      type: "string",
-      description: "Additional CSS classes.",
-    },
-  ]}
-/>
-
-### Style Variants (CVA)
-
-| Export | Description |
-|--------|-------------|
-| `badgeVariants` | Styles for the badge component. |
-
-```tsx
-import { badgeVariants } from "@/components/assistant-ui/badge";
-
-<span className={badgeVariants({ variant: "muted", size: "sm" })}>
-  Custom Badge
-</span>
-```

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