@nexub/mcp 5.0.1 → 5.2.0

package/dist/skill/references/components/autocomplete.md

@@ -15,7 +15,12 @@ Type-to-search input with matching options dropdown.
 | `onValueChange` | `(value: string) => void` |  | Callback fired when the selected value changes. |
 | `placeholder` | `string` |  | Placeholder text shown in the input when empty. |
 | `emptyText` | `string` |  | Text shown when no options match the current search query. |
-| `loading` | `boolean` |  | Shows a loading indicator while options are being fetched. |
+| `loading` | `boolean` |  | Skeleton rows while options are being fetched (5.2); "Loading" is announced. |
+| `inputValue` | `string` |  | Controlled input text (5.1). |
+| `onInputChange` | `(text: string) => void` |  | Called as the user types, so you can fetch options (5.1). When set, options are shown as given, without built-in filtering. |
+| `mode` | `'inline' \| 'popover'` | `'inline'` | Popover (5.2): a field whose list opens below it while typing. Inline keeps the list always visible; it stays the default until 6.0. |
+| `onCreate` | `(text: string) => void` |  | Adds a "Create “text”" option when the text matches no option (5.2). |
+| `aria-label` | `string` |  | Accessible name of the field when it has no visible label. |
 
 ## Example: Default
 
@@ -73,3 +78,44 @@ export default function Example() {
   );
 }
 ```
+
+## Example: Popover, fetch as you type
+
+`mode="popover"` with `onInputChange`: the app filters, the list shows skeleton rows while loading.
+
+```tsx
+'use client';
+
+import * as React from 'react';
+import { Autocomplete } from '@nexub/react';
+
+const all = ['Amsterdam', 'Berlin', 'Lisbon', 'London', 'Madrid', 'Paris', 'Singapore', 'Tokyo'];
+
+// Fetch-as-you-type: onInputChange turns built-in filtering off.
+export default function Example() {
+  const [query, setQuery] = React.useState('');
+  const [loading, setLoading] = React.useState(false);
+  const [options, setOptions] = React.useState(all.map((c) => ({ value: c, label: c })));
+  React.useEffect(() => {
+    setLoading(true);
+    const t = setTimeout(() => {
+      const q = query.toLowerCase();
+      setOptions(all.filter((c) => c.toLowerCase().includes(q)).map((c) => ({ value: c, label: c })));
+      setLoading(false);
+    }, 300);
+    return () => clearTimeout(t);
+  }, [query]);
+  return (
+    <div className="w-[280px]">
+      <Autocomplete
+        mode="popover"
+        aria-label="City"
+        placeholder="Search cities…"
+        options={options}
+        loading={loading}
+        onInputChange={setQuery}
+      />
+    </div>
+  );
+}
+```

package/dist/skill/references/components/breadcrumb.md

@@ -13,6 +13,8 @@ Hierarchical navigation trail showing page location.
 | `Breadcrumb.Root aria-label` | `string` | `'breadcrumb'` | Accessible label for the nav landmark. |
 | `Breadcrumb.Link href` | `string` |  | URL the breadcrumb link navigates to. |
 | `Breadcrumb.Link asChild` | `boolean` | `false` | Merges props onto the immediate child element, useful for router Link components. |
+| `Breadcrumb.Trail items` (required) | `{ label: ReactNode; href?: string }[]` |  | The whole trail from data (5.1), root first; the last item is the current page. |
+| `Breadcrumb.Trail maxItems` | `number` | `4` | Longer trails keep the first item and the last `maxItems - 1`, and move the rest into a "More" menu. |
 | `Breadcrumb.Separator children` | `React.ReactNode` |  | Custom separator element. Defaults to a chevron icon. |
 | `Breadcrumb.Ellipsis aria-label` | `string` | `'More'` | Accessible label for the ellipsis element used to collapse long trails. |
 
@@ -57,3 +59,26 @@ export default function Example() {
   );
 }
 ```
+
+## Example: Auto-collapse
+
+Breadcrumb.Trail moves the middle of a long path into a menu.
+
+```tsx
+import { Breadcrumb } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <Breadcrumb.Trail
+      maxItems={3}
+      items={[
+        { label: 'Home', href: '/' },
+        { label: 'Acme', href: '/' },
+        { label: 'Billing', href: '/' },
+        { label: 'Invoices', href: '/' },
+        { label: 'INV-2041' },
+      ]}
+    />
+  );
+}
+```

package/dist/skill/references/components/chip.md

@@ -12,6 +12,7 @@ Compact label chip, optionally dismissible.
 | --- | --- | --- | --- |
 | `variant` | `'filled' \| 'outline'` | `'filled'` | Visual style of the chip. |
 | `onRemove` | `() => void` |  | When provided, renders a dismiss button that calls this handler. |
+| `removeLabel` | `string` | `'Remove'` | Accessible name of the dismiss button (5.2), e.g. "Remove Bug". Use it when several chips sit together. |
 | `size` | `'sm' \| 'md'` |  | Controls chip size. |
 
 ## Example: Default

package/dist/skill/references/components/drawer.md

@@ -17,8 +17,8 @@ Slide-in panel from any edge of the screen.
 | `Drawer.Content` | `compound` |  | The drawer panel. Accepts a side prop. |
 | `scrollLock` | `'style' \| 'class'` |  | On Drawer.Root. How page scroll is locked while open. `class` adds a class from @nexub/themes/base instead of injecting a <style> tag, so it works under a strict CSP (style-src 'self'). Default `style`. |
 | `side` | `'left' \| 'right' \| 'top' \| 'bottom'` |  | Edge of the screen from which the drawer slides in. |
-| `Drawer.Header` | `compound` |  | Header section of the drawer panel. |
-| `Drawer.Footer` | `compound` |  | Footer section of the drawer panel. |
+| `Drawer.Header` | `compound` |  | Header section of the drawer panel. Sticky on solid panels (5.1): long content scrolls under it. |
+| `Drawer.Footer` | `compound` |  | Footer section of the drawer panel. Sticky on solid panels (5.1): actions stay in view while content scrolls. |
 | `Drawer.Title` | `compound` |  | Accessible title for the drawer. |
 | `Drawer.Description` | `compound` |  | Supporting description text for the drawer. |
 | `Drawer.Close` | `compound` |  | Element that closes the drawer. |

package/dist/skill/references/components/filter-bar.md

@@ -13,6 +13,7 @@ Search + filter toolbar pattern for data-heavy list or table views.
 | `searchPlaceholder` | `string` | `'Search…'` | Placeholder text for the search input. |
 | `searchValue` | `string` |  | Controlled search value. |
 | `onSearch` | `(value: string) => void` |  | Callback when search value changes. |
+| `searchLabel` | `string` | `'Search'` | Accessible name of the search field (5.1). Defaults to the localised `search` message. |
 | `filters` | `React.ReactNode` |  | Filter controls rendered to the right of search. |
 | `actions` | `React.ReactNode` |  | Action buttons (e.g. "Export") rendered on the far right. |
 

package/dist/skill/references/components/multi-select.md

@@ -0,0 +1,70 @@
+# Multi Select
+
+Pick several options as chips, with search, "+N more" and an optional create option.
+
+- Package: `@nexub/react` · Category: Form Controls · Status: beta
+- Import: `import { MultiSelect } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/multi-select
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `options` (required) | `{ value: string; label: string }[]` |  | The options to pick from. |
+| `value / defaultValue` | `string[]` |  | Selected values, controlled or not. |
+| `onValueChange` | `(value: string[]) => void` |  | Called with the new selection. |
+| `maxVisibleChips` | `number` | `3` | Chips shown before the rest collapse into "+N more". |
+| `onInputChange` | `(text: string) => void` |  | Called as the user types. When set, options are shown as given, so you can fetch them. |
+| `onCreate` | `(text: string) => void` |  | Adds a "Create “text”" option when the text matches no option. |
+| `loading` | `boolean` |  | Skeleton rows instead of options; "Loading" is announced. |
+| `aria-label / aria-labelledby` | `string` |  | Name the field: there is no visible label inside it. |
+
+## Example: Labels with create
+
+```tsx
+'use client';
+
+import * as React from 'react';
+import { MultiSelect } from '@nexub/react';
+
+const labels = [
+  { value: 'bug', label: 'Bug' },
+  { value: 'design', label: 'Design' },
+  { value: 'docs', label: 'Docs' },
+  { value: 'perf', label: 'Performance' },
+  { value: 'a11y', label: 'Accessibility' },
+  { value: 'security', label: 'Security' },
+];
+
+export default function Example() {
+  const [options, setOptions] = React.useState(labels);
+  const [value, setValue] = React.useState(['bug', 'a11y']);
+  return (
+    <div className="w-[320px]">
+      <MultiSelect
+        aria-label="Labels"
+        placeholder="Add labels…"
+        options={options}
+        value={value}
+        onValueChange={setValue}
+        onCreate={(text) => {
+          const v = text.toLowerCase();
+          setOptions((o) => [...o, { value: v, label: text }]);
+          setValue((s) => [...s, v]);
+        }}
+      />
+    </div>
+  );
+}
+```
+
+## Accessibility
+
+- `Type`: Filters the options and opens the list.
+- `ArrowDown / ArrowUp`: Moves through the options.
+- `Enter`: Toggles the highlighted option.
+- `Backspace`: In an empty field, removes the last chip.
+- `Escape`: Closes the list.
+- Options carry `aria-checked`; each chip has a "Remove <label>" button.
+
+Related: [autocomplete](autocomplete.md), [chip](chip.md), [select](select.md)

package/dist/skill/references/components/toast.md

@@ -25,6 +25,7 @@ Imperative toast notifications using the toast object. Render <Toaster /> once i
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
 | `Toaster expand` | `boolean` | `false` | Always show toasts as a list. By default they collapse into a stack that fans out on hover or focus, which also pauses their timers. |
+| `Toaster position` | `'top-start' \| 'top-center' \| 'top-end' \| 'bottom-start' \| 'bottom-center' \| 'bottom-end'` | `'top-end'` | Where the stack sits (5.1). Start and end follow the reading direction; bottom positions stack upward. |
 | `Toaster visibleToasts` | `number` | `3` | How many toasts show at once. Older ones are hidden visually but stay in the live region. |
 | `toast.success(title, opts?)` (required) | `string` |  | Show a success toast with an optional options object. |
 | `toast.error(title, opts?)` (required) | `string` |  | Show an error toast. |

package/dist/skill/references/components.md

@@ -1,6 +1,6 @@
 # Component index
 
-Nexub DS v5.0.1. Open `components/<slug>.md` for props, examples and accessibility notes.
+Nexub DS v5.2.0. Open `components/<slug>.md` for props, examples and accessibility notes.
 Never use a component marked deprecated.
 
 ## Components — Actions
@@ -83,6 +83,7 @@ Never use a component marked deprecated.
 - [Checkbox](components/checkbox.md) `@nexub/react`: Binary checkbox input built on Radix UI.
 - [Checkbox Card](components/checkbox-card.md) `@nexub/react`: A checkbox drawn as a whole card: title, description and optional icon. Pick any number.
 - [Combobox](components/combobox.md) `@nexub/react`: Command-palette style searchable dropdown built on cmdk.
+- [Multi Select](components/multi-select.md) `@nexub/react`: Pick several options as chips, with search, "+N more" and an optional create option.
 - [Radio Card](components/radio-card.md) `@nexub/react`: A radio group where each option is a whole card: title, description and optional icon, one choice.
 - [Radio Group](components/radio-group.md) `@nexub/react`: Group of mutually exclusive radio inputs.
 - [Select](components/select.md) `@nexub/react`: Accessible dropdown select built on Radix UI. Supports groups and search.

package/dist/skill/references/tokens.md

@@ -1,6 +1,6 @@
 # Tokens
 
-Nexub DS v5.0.1. Every token is a CSS custom property from `@nexub/tokens/css` (loaded by `@nexub/themes/base`).
+Nexub DS v5.2.0. Every token is a CSS custom property from `@nexub/tokens/css` (loaded by `@nexub/themes/base`).
 The Tailwind preset (`@nexub/tokens/tailwind`) maps them to utilities. Never hardcode a hex, px spacing or shadow that a token covers.
 
 ## Color roles

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexub/mcp",
-  "version": "5.0.1",
+  "version": "5.2.0",
   "description": "MCP server for Nexub Design System: gives Claude, Cursor and any MCP client the components, patterns, tokens and design rules of the installed release.",
   "type": "module",
   "license": "MIT",