@nexub/mcp 6.4.0 → 6.6.0

package/dist/skill/references/components/chart-zoom.md

@@ -0,0 +1,47 @@
+# Chart Zoom
+
+Zoom any chart to part of its range with a two-thumb slider.
+
+- Package: `@nexub/react` · Category: Data Display · Status: beta
+- Import: `import { ChartZoom } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/chart-zoom
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `data` (required) | `T[]` |  | The full data. |
+| `index` (required) | `keyof T` |  | The category key; its values label the range. |
+| `children` (required) | `(slice: T[]) => ReactNode` |  | Render the chart for the visible slice. |
+| `defaultRange` | `[start, end]` |  | Starting indexes; the whole range by default. |
+| `minSpan` | `number` | `2` | Fewest categories shown. |
+
+## Example: Zoom a year of revenue
+
+```tsx
+'use client';
+
+import { ChartZoom, LineChart } from '@nexub/react';
+
+const data = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'].map((month, i) => ({
+  month,
+  revenue: 120 + i * 14 + (i % 3) * 9,
+}));
+
+export default function Example() {
+  return (
+    <ChartZoom data={data} index="month" defaultRange={[3, 8]} className="w-full">
+      {(slice) => (
+        <LineChart className="w-full" title="Revenue ($k)" data={slice} index="month" series={[{ key: 'revenue', label: 'Revenue' }]} />
+      )}
+    </ChartZoom>
+  );
+}
+```
+
+## Accessibility
+
+- `Arrow keys / Home / End`: Move the focused thumb.
+- Thumbs read "Zoom start: Mar" and "Zoom end: Sep". Charts themselves stay server components; only this wrapper runs on the client.
+
+Related: [line-chart](line-chart.md), [bar-chart](bar-chart.md), [chart-toggle](chart-toggle.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. |
@@ -294,6 +296,53 @@ export default function Example() {
 }
 ```
 
+## Example: Export CSV
+
+`toCSV(rows, columns)` quotes and escapes per RFC 4180 and neutralises cells that start like a spreadsheet formula. Pass what the person sees.
+
+```tsx
+'use client';
+
+import { Button, DataTable, toCSV, type DataTableColumn } from '@nexub/react';
+
+type Invoice = { id: string; customer: string; amount: number };
+
+const data: Invoice[] = [
+  { id: 'INV-1042', customer: 'Acme, Inc.', amount: 1200 },
+  { id: 'INV-1043', customer: 'Globex', amount: 860 },
+];
+
+const columns: DataTableColumn<Invoice>[] = [
+  { accessorKey: 'id', header: 'Invoice' },
+  { accessorKey: 'customer', header: 'Customer' },
+  { accessorKey: 'amount', header: 'Amount', meta: { align: 'end' } },
+];
+
+function download() {
+  const csv = toCSV(data, [
+    { header: 'Invoice', value: 'id' },
+    { header: 'Customer', value: 'customer' },
+    { header: 'Amount', value: 'amount' },
+  ]);
+  const url = URL.createObjectURL(new Blob([csv], { type: 'text/csv;charset=utf-8' }));
+  const a = Object.assign(document.createElement('a'), { href: url, download: 'invoices.csv' });
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+export default function Example() {
+  return (
+    <DataTable
+      caption="Invoices"
+      captionHidden
+      columns={columns}
+      data={data}
+      toolbar={<Button variant="outlined" size="sm" onClick={download}>Export CSV</Button>}
+    />
+  );
+}
+```
+
 ## Accessibility
 
 - Roles: table (default), grid (with `grid`), columnheader with aria-sort when sortable

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/notification-center.md

@@ -0,0 +1,51 @@
+# NotificationCenter
+
+A bell with an unread count that opens the notification list.
+
+- Package: `@nexub/patterns` · Category: Feedback · Status: beta
+- Import: `import { NotificationCenter } from '@nexub/patterns';`
+- Docs: https://nexub-ds-docs.pages.dev/patterns/notification-center
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `notifications` (required) | `{ id, title, description?, timestamp?, read?, icon?, href? }[]` |  | Newest first. Your app owns them and their read state. |
+| `onOpen` | `(id) => void` |  | A notification was opened; mark it read here. |
+| `onDismiss` | `(id) => void` |  | Shows a dismiss button per item. |
+| `onMarkAllRead` | `() => void` |  | Shows "Mark all as read" while some are unread. |
+| `emptyText` | `ReactNode` | `"You’re all caught up"` | Shown with no notifications. |
+
+## Example: Inbox
+
+```tsx
+'use client';
+
+import * as React from 'react';
+import { NotificationCenter, type NotificationCenterItem } from '@nexub/patterns';
+
+export default function Example() {
+  const [items, setItems] = React.useState<NotificationCenterItem[]>([
+    { id: '1', title: 'Deploy failed on main', description: 'Build step "test" exited with 1.', timestamp: '2 min ago' },
+    { id: '2', title: 'Invoice #1042 paid', timestamp: '1 h ago' },
+    { id: '3', title: 'Ada commented on Q4 plan', timestamp: 'Yesterday', read: true },
+  ]);
+  const markRead = (id?: string) => setItems((list) => list.map((n) => (!id || n.id === id ? { ...n, read: true } : n)));
+  return (
+    <NotificationCenter
+      notifications={items}
+      onOpen={(id) => markRead(id)}
+      onDismiss={(id) => setItems((list) => list.filter((n) => n.id !== id))}
+      onMarkAllRead={() => markRead()}
+    />
+  );
+}
+```
+
+## Accessibility
+
+- The bell reads "Notifications, 3 unread"; the count badge is decorative.
+- The list opens in a popover labelled by its heading; Escape closes it and focus returns to the bell.
+- Each item’s title is its link or button, stretched over the whole item.
+
+Related: [notification-item](notification-item.md)

package/dist/skill/references/components/notification-item.md

@@ -13,9 +13,10 @@ Single notification row for notification panels or dropdowns.
 | `title` (required) | `string` |  | Notification title. |
 | `description` | `string` |  | Supporting text. |
 | `timestamp` | `string` |  | Relative time string. |
-| `unread` | `boolean` | `false` | Applies unread indicator styling. |
-| `avatar` | `React.ReactNode` |  | Avatar for the notification actor. |
-| `onClick` | `() => void` |  | Click handler for the item. |
+| `read` | `boolean` | `false` | Unread items get a tinted background and an "Unread" dot. |
+| `icon` | `ReactNode` |  | Icon or avatar before the text. |
+| `href / onSelect` | `string / () => void` |  | Makes the whole item a link or a button (6.6). |
+| `onDismiss` | `() => void` |  | Shows a dismiss button. |
 
 ## Example: Default
 

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.md

@@ -1,6 +1,6 @@
 # Component index
 
-Nexub DS v6.4.0. Open `components/<slug>.md` for props, examples and accessibility notes.
+Nexub DS v6.6.0. Open `components/<slug>.md` for props, examples and accessibility notes.
 Never use a component marked deprecated.
 
 ## Components — Actions
@@ -32,6 +32,7 @@ Never use a component marked deprecated.
 - [Amount](components/amount.md) `@nexub/react`: Honest money: Intl formatting, tabular numerals, the currency’s minor unit and a true minus sign.
 - [Bar Chart](components/bar-chart.md) `@nexub/react`: Compare values across categories, grouped or stacked. Server-rendered SVG on the chart palette.
 - [Chart Toggle](components/chart-toggle.md) `@nexub/react`: A legend whose entries switch series on and off, wrapped around any chart.
+- [Chart Zoom](components/chart-zoom.md) `@nexub/react`: Zoom any chart to part of its range with a two-thumb slider.
 - [Data Table](components/data-table.md) `@nexub/react`: Feature-rich data table with sorting and row selection powered by TanStack Table.
 - [Donut Chart](components/donut-chart.md) `@nexub/react`: Parts of a whole, with an optional total in the hole. Keep it to six slices or fewer.
 - [Empty State](components/empty-state.md) `@nexub/react`: Placeholder UI shown when a list or page has no content.
@@ -40,9 +41,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.
 
@@ -210,6 +213,7 @@ Never use a component marked deprecated.
 
 ## Patterns — Feedback
 
+- [NotificationCenter](components/notification-center.md) `@nexub/patterns`: A bell with an unread count that opens the notification list.
 - [NotificationItem](components/notification-item.md) `@nexub/patterns`: Single notification row for notification panels or dropdowns.
 
 ## Patterns — Forms

package/dist/skill/references/tokens.md

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