@nexub/mcp 5.3.0 → 5.5.0

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

@@ -23,6 +23,13 @@ Feature-rich data table with sorting and row selection powered by TanStack Table
 | `columnVisibility / onColumnVisibilityChange` | `Record<string, boolean>` |  | Which columns show, keyed by column id (5.3). |
 | `viewOptions` | `boolean` | `false` | A "View" menu above the table for density and column visibility (5.3). |
 | `toolbar` | `ReactNode` |  | Content at the start of the row above the table, e.g. filters (5.3). |
+| `enableColumnResizing` | `boolean` | `false` | Drag a header edge to resize (5.4). The handle is focusable: Arrow keys resize by 16px, double-click resets. |
+| `columnSizing / onColumnSizingChange` | `Record<string, number>` |  | Column widths in px, keyed by column id (5.4). |
+| `enableColumnReordering` | `boolean` | `false` | Drag headers to reorder, or Alt+Arrow on a focused header; the move is announced (5.4). |
+| `columnOrder / onColumnOrderChange` | `string[]` |  | Column ids in display order (5.4). |
+| `columnPinning / onColumnPinningChange` | `{ left?: string[]; right?: string[] }` |  | Columns that stay in view while the rest scroll sideways (5.4). The selection column pins with them. |
+| `maxHeight` | `number \| string` |  | Caps the height: rows scroll and the header sticks (5.4). |
+| `DataTableVirtual` | `import from '@nexub/react/DataTableVirtual'` |  | Same props plus `maxHeight` (required), `estimateRowHeight` and `overscan`: renders only the rows in view, for thousands of rows. Needs `@tanstack/react-virtual` installed (5.4). No pagination. |
 | `pagination.pageSize` | `number` | `20` | Rows per page; pagination is on when `pagination` is set. |
 
 ## Example: Default
@@ -140,3 +147,97 @@ export default function Example() {
   );
 }
 ```
+
+## Example: Resize, reorder and pin
+
+Drag header edges to resize and headers to reorder (or Alt+Arrow). Invoice stays pinned while the rest scroll; the header sticks within `maxHeight`.
+
+```tsx
+'use client';
+
+import { DataTable, type DataTableColumn } from '@nexub/react';
+
+interface Invoice {
+  id: string;
+  customer: string;
+  region: string;
+  owner: string;
+  status: string;
+  amount: number;
+}
+
+const invoices: Invoice[] = Array.from({ length: 30 }, (_, i) => ({
+  id: `INV-${2041 + i}`,
+  customer: ['Acme', 'Globex', 'Initech', 'Umbrella', 'Hooli'][i % 5]!,
+  region: ['EMEA', 'APAC', 'Americas'][i % 3]!,
+  owner: ['Ana', 'Ben', 'Chen', 'Dev'][i % 4]!,
+  status: ['Paid', 'Overdue', 'Draft'][i % 3]!,
+  amount: 400 + ((i * 137) % 2000),
+}));
+
+const columns: DataTableColumn<Invoice>[] = [
+  { accessorKey: 'id', header: 'Invoice', size: 120 },
+  { accessorKey: 'customer', header: 'Customer', size: 160 },
+  { accessorKey: 'region', header: 'Region', size: 140 },
+  { accessorKey: 'owner', header: 'Owner', size: 140 },
+  { accessorKey: 'status', header: 'Status', size: 140 },
+  { accessorKey: 'amount', header: 'Amount', size: 120, meta: { align: 'end' } },
+];
+
+export default function Example() {
+  return (
+    <div className="w-full max-w-[640px]">
+      <DataTable
+        caption="Invoices"
+        captionHidden
+        columns={columns}
+        data={invoices}
+        enableColumnResizing
+        enableColumnReordering
+        columnPinning={{ left: ['id'] }}
+        maxHeight={320}
+      />
+    </div>
+  );
+}
+```
+
+## Example: 10,000 rows (DataTableVirtual)
+
+`import { DataTableVirtual } from '@nexub/react/DataTableVirtual'` and install `@tanstack/react-virtual`. Only the rows in view are rendered.
+
+```tsx
+'use client';
+
+import type { DataTableColumn } from '@nexub/react';
+import { DataTableVirtual } from '@nexub/react/DataTableVirtual';
+
+interface Event {
+  id: number;
+  name: string;
+  user: string;
+  at: string;
+}
+
+const events: Event[] = Array.from({ length: 10_000 }, (_, i) => ({
+  id: i + 1,
+  name: ['sign_in', 'export', 'invite', 'upgrade'][i % 4]!,
+  user: `user${(i * 7919) % 997}@example.com`,
+  at: new Date(Date.UTC(2026, 10, 1) + i * 60_000).toISOString().slice(0, 16).replace('T', ' '),
+}));
+
+const columns: DataTableColumn<Event>[] = [
+  { accessorKey: 'id', header: '#', meta: { align: 'end' } },
+  { accessorKey: 'name', header: 'Event' },
+  { accessorKey: 'user', header: 'User' },
+  { accessorKey: 'at', header: 'Time (UTC)' },
+];
+
+export default function Example() {
+  return (
+    <div className="w-full max-w-[640px]">
+      <DataTableVirtual caption="Audit log" captionHidden columns={columns} data={events} maxHeight={360} enableSorting />
+    </div>
+  );
+}
+```

package/dist/skill/references/components/date-range-picker.md

@@ -17,10 +17,10 @@ Dual-calendar date range selector.
 | `disabled` | `boolean` | `false` | Disables the trigger input and calendar popover. |
 | `minDate` | `Date` |  | Earliest selectable date. Dates before this are greyed out. |
 | `maxDate` | `Date` |  | Latest selectable date. Dates after this are greyed out. |
-| `numberOfMonths` | `number` | `2` | Number of months to display in the calendar popover. |
 | `aria-label` | `string` |  | Field name for screen readers; the selected value is appended. |
 | `id` | `string` |  | Id for the trigger button, e.g. to pair with a <label htmlFor>. |
-| `error` | `string` |  | Error message displayed below the input. |
+| `presets` | `boolean \| { label: string; range: (today: Date) => DateRange }[]` |  | `true` adds Today, Last 7 days, Last 30 days, Month to date and Last month beside the calendar; or pass your own (5.5). |
+| `timeZone` | `string` |  | IANA zone the dates mean, e.g. `Europe/London`. Shown under the calendar; presets count "today" there (5.5). `todayIn(zone)` is exported. |
 
 ## Example: Default
 
@@ -52,3 +52,23 @@ export default function Example() {
   );
 }
 ```
+
+## Example: Presets and time zone
+
+Quick ranges counted in the chosen time zone, which is labelled under the calendar.
+
+```tsx
+'use client';
+
+import * as React from 'react';
+import { DateRangePicker, type DateRange } from '@nexub/react';
+
+export default function Example() {
+  const [range, setRange] = React.useState<DateRange | undefined>();
+  return (
+    <div className="w-[300px]">
+      <DateRangePicker aria-label="Report period" value={range} onChange={setRange} presets timeZone="Europe/London" />
+    </div>
+  );
+}
+```

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

@@ -15,6 +15,8 @@ Search + filter toolbar pattern for data-heavy list or table views.
 | `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. |
+| `activeCount` | `number` | `0` | Applied filters; above 0 shows "N filters" (5.5). `countFilters(group)` counts a FilterBuilder query. |
+| `onClearAll` | `() => void` |  | Shows a Clear all button next to the count (5.5). |
 | `actions` | `React.ReactNode` |  | Action buttons (e.g. "Export") rendered on the far right. |
 
 ## Example: Default

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

@@ -0,0 +1,68 @@
+# Filter Builder
+
+Build AND/OR filter queries with nested groups. The output is plain JSON your app runs.
+
+- Package: `@nexub/react` · Category: Form Controls · Status: beta
+- Import: `import { FilterBuilder } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/filter-builder
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `fields` (required) | `{ id; label; type: "text" \| "number" \| "select" \| "date"; options? }[]` |  | What can be filtered. The type picks the operators and the value input. |
+| `value / defaultValue` | `FilterGroup` |  | `{ id, combinator: "and" \| "or", rules: (FilterRule \| FilterGroup)[] }`; a rule is `{ id, field, operator, value: string }`. |
+| `onValueChange` | `(value: FilterGroup) => void` |  | Called with the whole query on every change. |
+| `maxDepth` | `number` | `1` | Levels of nested groups "Add group" may create; 0 hides it. |
+
+## Example: Deals filter
+
+```tsx
+'use client';
+
+import * as React from 'react';
+import { FilterBuilder, type FilterField, type FilterGroup } from '@nexub/react';
+
+const fields: FilterField[] = [
+  { id: 'name', label: 'Deal name', type: 'text' },
+  { id: 'amount', label: 'Amount', type: 'number' },
+  {
+    id: 'stage',
+    label: 'Stage',
+    type: 'select',
+    options: [
+      { value: 'lead', label: 'Lead' },
+      { value: 'proposal', label: 'Proposal' },
+      { value: 'won', label: 'Won' },
+    ],
+  },
+  { id: 'close', label: 'Close date', type: 'date' },
+];
+
+export default function Example() {
+  const [query, setQuery] = React.useState<FilterGroup>({
+    id: 'root',
+    combinator: 'and',
+    rules: [
+      { id: 'r1', field: 'stage', operator: 'equals', value: 'proposal' },
+      { id: 'r2', field: 'amount', operator: 'greaterThan', value: '10000' },
+    ],
+  });
+  return (
+    <div className="flex w-full max-w-[640px] flex-col gap-4">
+      <FilterBuilder fields={fields} value={query} onValueChange={setQuery} />
+      <pre className="max-h-40 overflow-auto rounded-shape-container bg-[var(--color-surface-container-low)] p-3 text-label-sm">
+        {JSON.stringify(query, null, 2)}
+      </pre>
+    </div>
+  );
+}
+```
+
+## Accessibility
+
+- Roles: Each group is a `group` named "Filters, match all/any".
+- Field, condition and value controls are labelled; remove buttons say what they remove.
+- Helpers: `emptyFilter()`, `countFilters(group)`, `isFilterGroup(rule)`, `filterOperators`.
+
+Related: [filter-bar](filter-bar.md), [saved-views](saved-views.md), [data-table](data-table.md)

package/dist/skill/references/components/saved-views.md

@@ -0,0 +1,53 @@
+# Saved Views
+
+A menu to switch, save, update and delete saved filter views. Your app stores them.
+
+- Package: `@nexub/react` · Category: Navigation · Status: beta
+- Import: `import { SavedViews } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/saved-views
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `views` (required) | `{ id: string; name: string }[]` |  | The saved views. |
+| `activeId` | `string` |  | The view in use; its name shows on the button. |
+| `onSelect` (required) | `(id: string) => void` |  | Switch to a view: restore its filters, sort and columns. |
+| `onSave` | `(name: string) => void` |  | Adds "Save as new view…", which asks for a name. |
+| `onUpdate / onDelete` | `(id: string) => void` |  | Add "Update" and "Delete" for the active view. |
+
+## Example: Views for a deals table
+
+```tsx
+'use client';
+
+import * as React from 'react';
+import { SavedViews, type SavedView } from '@nexub/react';
+
+export default function Example() {
+  const [views, setViews] = React.useState<SavedView[]>([
+    { id: 'mine', name: 'My open deals' },
+    { id: 'big', name: 'Over $10k' },
+  ]);
+  const [active, setActive] = React.useState('mine');
+  return (
+    <SavedViews
+      views={views}
+      activeId={active}
+      onSelect={setActive}
+      onSave={(name) => {
+        const id = crypto.randomUUID();
+        setViews((v) => [...v, { id, name }]);
+        setActive(id);
+      }}
+      onUpdate={() => {}}
+      onDelete={(id) => {
+        setViews((v) => v.filter((x) => x.id !== id));
+        setActive('');
+      }}
+    />
+  );
+}
+```
+
+Related: [filter-builder](filter-builder.md), [filter-bar](filter-bar.md), [data-table](data-table.md)

package/dist/skill/references/components.md

@@ -1,6 +1,6 @@
 # Component index
 
-Nexub DS v5.3.0. Open `components/<slug>.md` for props, examples and accessibility notes.
+Nexub DS v5.5.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.
+- [Filter Builder](components/filter-builder.md) `@nexub/react`: Build AND/OR filter queries with nested groups. The output is plain JSON your app runs.
 - [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.
@@ -147,6 +148,7 @@ Never use a component marked deprecated.
 - [Breadcrumb](components/breadcrumb.md) `@nexub/react`: Hierarchical navigation trail showing page location.
 - [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.
 - [Tabs](components/tabs.md) `@nexub/react`: Layered content panels switched by tab triggers. Built on Radix UI Tabs.
 
 ## Components — Overlays
@@ -225,5 +227,5 @@ Never use a component marked deprecated.
 
 These exist; read their TypeScript props in `node_modules/<package>/dist/index.d.ts`.
 
-- `@nexub/react`: AgentKit, AppShell, AspectRatio, Chart, CheckList, Code, CommandPalette, Container, ContextMenu, CountryBadge, DropdownMenu, FileUpload, Flag, FormError, KeyboardShortcut, Logo, Menubar, Motion, NavigationMenu, NexubProvider, PageHeader, Section, Sidebar, ThemeProvider, Toolbar, TopNav, VisuallyHidden
+- `@nexub/react`: AgentKit, AppShell, AspectRatio, Chart, CheckList, Code, CommandPalette, Container, ContextMenu, CountryBadge, DataTableVirtual, DropdownMenu, FileUpload, Flag, FormError, KeyboardShortcut, Logo, Menubar, Motion, NavigationMenu, NexubProvider, PageHeader, Section, Sidebar, ThemeProvider, Toolbar, TopNav, VisuallyHidden
 - `@nexub/patterns`: ActivityPage, AppHeader, AppLauncher, ChatPage, CheckoutPage, DashboardPage, PageFrame, PaywallPage, SettingsLayout, SettingsPage, SignInPage, TransactionDetailPage

package/dist/skill/references/tokens.md

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