@nexub/mcp 6.3.0 → 6.5.0

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

@@ -0,0 +1,48 @@
+# Action Bar
+
+Save and cancel that stay in view at the bottom of a long form.
+
+- Package: `@nexub/react` · Category: Form & Input · Status: beta
+- Import: `import { ActionBar } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/action-bar
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `message` | `ReactNode` |  | Status on the start side, e.g. "Unsaved changes"; announced politely and names the region. |
+| `children` (required) | `ReactNode` |  | The actions, primary last. |
+
+## Example: Unsaved changes
+
+```tsx
+'use client';
+
+import * as React from 'react';
+import { ActionBar, Button, Input, useUnsavedChanges } from '@nexub/react';
+
+export default function Example() {
+  const [saved, setSaved] = React.useState('Acme');
+  const [name, setName] = React.useState('Acme');
+  const dirty = name !== saved;
+  useUnsavedChanges(dirty);
+  return (
+    <div className="flex w-full max-w-lg flex-col gap-4">
+      <Input aria-label="Company name" value={name} onChange={(e) => setName(e.target.value)} />
+      {dirty && (
+        <ActionBar message="Unsaved changes">
+          <Button variant="text" onClick={() => setName(saved)}>Discard</Button>
+          <Button onClick={() => setSaved(name)}>Save</Button>
+        </ActionBar>
+      )}
+    </div>
+  );
+}
+```
+
+## Accessibility
+
+- A region named by its message. Sticky at the bottom of its scrolling parent, so put it last in the form.
+- Pair with `useUnsavedChanges(dirty)` to warn before leaving the page.
+
+Related: [form](form.md), [data-table](data-table.md)

package/dist/skill/references/components/data-table.md

@@ -14,6 +14,8 @@ Feature-rich data table with sorting and row selection powered by TanStack Table
 | `data` (required) | `TData[]` |  | Array of row data objects to render. |
 | `getSubRows` | `(row, index) => TData[] \| undefined` |  | Nested rows (a tree table). The first column gets an expand toggle (`aria-expanded`) and indents each level; sorting sorts within each level. |
 | `expanded / defaultExpanded / onExpandedChange` | `ExpandedState` |  | Expanded rows by row id (see `getRowId`), or `true` for all. |
+| `onRowOrderChange` | `(data: TData[]) => void` |  | Adds a handle column: drag rows, or Alt+ArrowUp/Down on a handle. Hidden while a column is sorted. |
+| `getRowLabel` | `(row) => string` |  | Names a row in "Move ‹label›" and the move announcements. |
 | `caption` | `ReactNode` |  | Names the table for assistive tech (and its scroll region). Shown below the table; add `captionHidden` to keep it screen-reader only. |
 | `enableSorting` | `boolean` | `false` | Click a header to sort; Shift+click adds more columns, numbered 1, 2… (5.3). |
 | `enableRowSelection` | `boolean` | `false` | Turns on row selection state. |

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

@@ -0,0 +1,57 @@
+# Kanban
+
+Columns of cards people move by dragging or with Alt+Arrow keys.
+
+- Package: `@nexub/react` · Category: Data Display · Status: beta
+- Import: `import { Kanban } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/kanban
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `columns` (required) | `{ id, title, items: T[] }[]` |  | The board. |
+| `getId / getLabel` (required) | `(item) => string` |  | Stable key and the name read when it moves. |
+| `onChange` (required) | `(columns) => void` |  | Called with the columns after a move; store them (and save to your server). |
+| `renderCard` (required) | `(item) => ReactNode` |  | The card’s content. |
+
+## Example: Task board
+
+```tsx
+'use client';
+
+import * as React from 'react';
+import { Badge, Kanban, type KanbanColumn } from '@nexub/react';
+
+type Task = { id: string; title: string; tag?: string };
+
+export default function Example() {
+  const [columns, setColumns] = React.useState<KanbanColumn<Task>[]>([
+    { id: 'todo', title: 'To do', items: [{ id: '1', title: 'Write release notes', tag: 'Docs' }, { id: '2', title: 'Update pricing page' }] },
+    { id: 'doing', title: 'In progress', items: [{ id: '3', title: 'Billing migration', tag: 'Backend' }] },
+    { id: 'done', title: 'Done', items: [{ id: '4', title: 'Hire designer' }] },
+  ]);
+  return (
+    <Kanban
+      columns={columns}
+      getId={(t) => t.id}
+      getLabel={(t) => t.title}
+      onChange={setColumns}
+      renderCard={(t) => (
+        <div className="flex flex-col items-start gap-1">
+          {t.title}
+          {t.tag && <Badge>{t.tag}</Badge>}
+        </div>
+      )}
+    />
+  );
+}
+```
+
+## Accessibility
+
+- `Alt+ArrowUp / Alt+ArrowDown`: On a handle: moves the card within its column.
+- `Alt+ArrowLeft / Alt+ArrowRight`: Moves the card to the previous or next column. Mirrored in RTL.
+- Each column is a region named by its heading. Moves are announced: "Bravo moved to Done, position 2 of 2".
+
+Related: [sortable](sortable.md)

package/dist/skill/references/components/resizable-panels.md

@@ -0,0 +1,45 @@
+# Resizable Panels
+
+Panels with draggable separators, for list–detail and editor layouts.
+
+- Package: `@nexub/react` · Category: Layout · Status: beta
+- Import: `import { ResizablePanels } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/resizable-panels
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` (required) | `ReactNode` |  | The panels; a separator goes between each pair. |
+| `direction` | `'horizontal' \| 'vertical'` | `'horizontal'` | Side by side or stacked. |
+| `sizes / defaultSizes / onSizesChange` | `number[]` |  | One percentage per panel, adding up to 100. Save them (localStorage, user settings) to restore the layout. |
+| `minSizes` | `number[]` | `10 each` | Smallest size per panel, in percent. |
+| `handleLabel` | `string` | `"Resize panels"` | Names the separators. |
+
+## Example: List and detail
+
+```tsx
+import { ResizablePanels } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <ResizablePanels defaultSizes={[35, 65]} minSizes={[20, 30]} className="h-64 w-full rounded-shape-container border border-[var(--color-outline-variant)]">
+      <ul className="flex flex-col gap-2 p-4 text-body-md">
+        <li>Quarterly report</li>
+        <li>Launch checklist</li>
+        <li>Hiring plan</li>
+      </ul>
+      <div className="p-4 text-body-md">Drag the line, or focus it with Tab and use the arrow keys.</div>
+    </ResizablePanels>
+  );
+}
+```
+
+## Accessibility
+
+- Roles: separator (focusable, with aria-valuenow / min / max and aria-controls)
+- `Arrow keys`: Move the focused separator by 5%. Mirrored in RTL.
+- `Home / End`: To the smallest or largest size.
+- `Enter`: Back to the default split.
+
+Related: [sidebar](sidebar.md), [app-shell](app-shell.md)

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

@@ -0,0 +1,44 @@
+# Sortable
+
+A list people reorder by dragging or with Alt+Arrow keys on a handle.
+
+- Package: `@nexub/react` · Category: Data Display · Status: beta
+- Import: `import { Sortable } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/sortable
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `items` (required) | `T[]` |  | The list, in order. |
+| `getId / getLabel` (required) | `(item) => string` |  | Stable key, and the name read in "Move ‹label›" and the move announcements. |
+| `onReorder` (required) | `(items: T[]) => void` |  | Called with the new order; store it. |
+| `children` (required) | `(item) => ReactNode` |  | The item’s content; the handle sits before it. |
+| `aria-label` | `string` |  | Names the list. |
+
+## Example: Widget order
+
+```tsx
+'use client';
+
+import * as React from 'react';
+import { Sortable } from '@nexub/react';
+
+export default function Example() {
+  const [widgets, setWidgets] = React.useState(['Revenue', 'Active users', 'Churn', 'Support tickets']);
+  return (
+    <Sortable aria-label="Dashboard widgets" items={widgets} getId={(w) => w} getLabel={(w) => w} onReorder={setWidgets} className="w-full max-w-sm">
+      {(w) => w}
+    </Sortable>
+  );
+}
+```
+
+## Accessibility
+
+- `Alt+ArrowUp / Alt+ArrowDown`: On a handle: moves the item; focus stays on its handle.
+- Every handle is a button named "Move ‹label›", described by the key hint.
+- Moves are announced: "Alpha moved to position 3 of 5".
+- Mouse drag uses the native drag-and-drop API, so there is no extra dependency.
+
+Related: [kanban](kanban.md), [data-table](data-table.md)

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

@@ -0,0 +1,65 @@
+# Stepper
+
+Progress through a multi-step flow, with clickable steps that follow the order you allow.
+
+- Package: `@nexub/react` · Category: Navigation · Status: beta
+- Import: `import { Stepper } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/stepper
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `steps` (required) | `{ id, label, description? }[]` |  | The steps in order. |
+| `current` (required) | `number` |  | Index of the step being shown. |
+| `completed` | `number[]` |  | Finished steps. Defaults to every step before `current`. |
+| `onStepChange` | `(index) => void` |  | Makes reachable steps buttons: finished ones and the first unfinished one. |
+| `nonLinear` | `boolean` |  | Every step is reachable. |
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Vertical suits side columns and narrow screens. |
+| `aria-label` | `string` |  | Names the navigation landmark, e.g. "Setup steps". |
+
+## Example: Wizard with a form per step
+
+```tsx
+'use client';
+
+import * as React from 'react';
+import { Button, Form, FormField, Input, Stepper } from '@nexub/react';
+
+const steps = [
+  { id: 'account', label: 'Account' },
+  { id: 'workspace', label: 'Workspace' },
+  { id: 'done', label: 'Done' },
+];
+
+export default function Example() {
+  const [current, setCurrent] = React.useState(0);
+  return (
+    <div className="flex w-full max-w-lg flex-col gap-6">
+      <Stepper aria-label="Sign-up steps" steps={steps} current={current} onStepChange={setCurrent} />
+      {current < 2 ? (
+        <Form key={current} onSubmit={() => setCurrent(current + 1)}>
+          <FormField.Root name={current === 0 ? 'email' : 'workspace'} required>
+            <FormField.Label>{current === 0 ? 'Work email' : 'Workspace name'}</FormField.Label>
+            <FormField.Control>
+              <Input type={current === 0 ? 'email' : 'text'} />
+            </FormField.Control>
+            <FormField.Error />
+          </FormField.Root>
+          <Button type="submit" className="self-start">Continue</Button>
+        </Form>
+      ) : (
+        <p className="text-body-md">All set.</p>
+      )}
+    </div>
+  );
+}
+```
+
+## Accessibility
+
+- A `nav` with an ordered list; the current step has `aria-current="step"`.
+- Each step reads "Step 2 of 4: Billing", plus "completed" when finished.
+- Validate each step with a Form and move `current` on its submit.
+
+Related: [form](form.md), [tabs](tabs.md)

package/dist/skill/references/components.md

@@ -1,6 +1,6 @@
 # Component index
 
-Nexub DS v6.3.0. Open `components/<slug>.md` for props, examples and accessibility notes.
+Nexub DS v6.5.0. Open `components/<slug>.md` for props, examples and accessibility notes.
 Never use a component marked deprecated.
 
 ## Components — Actions
@@ -40,9 +40,11 @@ Never use a component marked deprecated.
 - [Funnel](components/funnel.md) `@nexub/react`: Drop-off through ordered steps, with conversion from the first step.
 - [Gauge](components/gauge.md) `@nexub/react`: Progress toward a target on a 270° arc.
 - [Heatmap](components/heatmap.md) `@nexub/react`: Intensity over a grid, such as activity by weekday and week, in seven sequential steps.
+- [Kanban](components/kanban.md) `@nexub/react`: Columns of cards people move by dragging or with Alt+Arrow keys.
 - [KPI Tile](components/kpi-tile.md) `@nexub/react`: A headline number with its change versus last period and a trend line.
 - [Line Chart](components/line-chart.md) `@nexub/react`: Show a trend over ordered categories such as time. Server-rendered SVG on the chart palette.
 - [Number Ticker](components/number-ticker.md) `@nexub/react`: A number whose digits roll to new values on the spatial spring. The first render never animates.
+- [Sortable](components/sortable.md) `@nexub/react`: A list people reorder by dragging or with Alt+Arrow keys on a handle.
 - [Sparkline](components/sparkline.md) `@nexub/react`: A tiny trend line with no axes, for stat cards and table cells.
 - [Table](components/table.md) `@nexub/react`: Semantic HTML table with styled variants.
 
@@ -66,6 +68,7 @@ Never use a component marked deprecated.
 
 ## Components — Form & Input
 
+- [Action Bar](components/action-bar.md) `@nexub/react`: Save and cancel that stay in view at the bottom of a long form.
 - [Date Picker](components/date-picker.md) `@nexub/react`: Calendar date picker with text input.
 - [Date Range Picker](components/date-range-picker.md) `@nexub/react`: Dual-calendar date range selector.
 - [Date Time Picker](components/date-time-picker.md) `@nexub/react`: A DatePicker and a TimePicker that edit one Date, with an optional time-zone label.
@@ -131,6 +134,7 @@ Never use a component marked deprecated.
 - [Flex](components/flex.md) `@nexub/react`: Flexbox layout primitive.
 - [Grid](components/grid.md) `@nexub/react`: CSS Grid layout primitive.
 - [Media Card](components/media-card.md) `@nexub/react`: An image card with a glass caption over a soft scrim. With `href`, the whole card is one link.
+- [Resizable Panels](components/resizable-panels.md) `@nexub/react`: Panels with draggable separators, for list–detail and editor layouts.
 - [Stack](components/stack.md) `@nexub/react`: Vertical stack layout with configurable gap.
 
 ## Components — Loading States
@@ -156,6 +160,7 @@ Never use a component marked deprecated.
 - [Navigation Rail](components/navigation-rail.md) `@nexub/react`: Navigation for medium-width windows: icons over labels, with an active pill behind the icon.
 - [Pagination](components/pagination.md) `@nexub/react`: Page navigation control with prev/next and page number buttons.
 - [Saved Views](components/saved-views.md) `@nexub/react`: A menu to switch, save, update and delete saved filter views. Your app stores them.
+- [Stepper](components/stepper.md) `@nexub/react`: Progress through a multi-step flow, with clickable steps that follow the order you allow.
 - [Tabs](components/tabs.md) `@nexub/react`: Layered content panels switched by tab triggers. Built on Radix UI Tabs.
 - [Tree View](components/tree-view.md) `@nexub/react`: A keyboard-friendly hierarchy (ARIA tree) with lazy children and tri-state checkboxes.
 

package/dist/skill/references/tokens.md

@@ -1,6 +1,6 @@
 # Tokens
 
-Nexub DS v6.3.0. Every token is a CSS custom property from `@nexub/tokens/css` (loaded by `@nexub/themes/base`).
+Nexub DS v6.5.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": "6.3.0",
+  "version": "6.5.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",