@payfit/unity-components 2.55.13 → 2.55.15

package/dist/esm/components/tabs/Tabs.context.js

@@ -20,4 +20,4 @@ function a() {
 	return e;
 }
 //#endregion
-export { i as TabsProvider, a as useTabsContext };
+export { r as TabsContext, i as TabsProvider, a as useTabsContext };

package/dist/esm/components/task-menu/TaskMenu.context.js

@@ -44,4 +44,4 @@ function u() {
 	return e;
 }
 //#endregion
-export { l as TaskMenuProvider, u as useTaskMenuContext };
+export { c as TaskMenuContext, l as TaskMenuProvider, u as useTaskMenuContext };

package/dist/esm/components/timeline/Timeline.context.js

@@ -17,4 +17,4 @@ function a() {
 	return e;
 }
 //#endregion
-export { i as TimelineProvider, a as useTimelineContext };
+export { r as TimelineContext, i as TimelineProvider, a as useTimelineContext };

package/dist/esm/components/timeline/parts/TimelineStepContent.context.js

@@ -14,4 +14,4 @@ function a() {
 	return e;
 }
 //#endregion
-export { i as TimelineStepContentProvider, a as useTimelineStepContentContext };
+export { r as TimelineStepContentContext, i as TimelineStepContentProvider, a as useTimelineStepContentContext };

package/dist/esm/hooks/use-has-scroll.js

@@ -18,7 +18,9 @@ function a(a, o = {}) {
 		}
 	}), p = t(() => {
 		let t = a.current;
-		t && f(e(t, s));
+		if (!t) return;
+		let n = e(t, s);
+		f(n);
 	}, [a, s]);
 	return r(() => {
 		if (!a.current) return;

package/dist/esm/index.js

@@ -169,7 +169,7 @@ import { usePaginationWindow as Dr } from "./components/pagination/hooks/use-pag
 import { usePaginationState as Or } from "./components/pagination/hooks/use-pagination-state.js";
 import { PhoneNumberInput as kr } from "./components/phone-number/PhoneNumberInput.js";
 import { Pill as Ar } from "./components/pill/Pill.js";
-import { DialogTrigger as jr, Popover as Mr } from "./components/popover/Popover.js";
+import { Popover as jr, PopoverTrigger as Mr } from "./components/popover/Popover.js";
 import { ProgressBar as Nr } from "./components/progress-bar/ProgressBar.js";
 import { RadioButtonGroup as Pr } from "./components/radio-button-group/RadioButtonGroup.js";
 import { RadioButtonHelper as Fr } from "./components/radio-button-group/parts/RadioButtonHelper.js";
@@ -238,4 +238,4 @@ import { tanstackFormDefaultValues as la } from "./hooks/tanstack-form-default-v
 import { useFieldA11yContext as ua } from "./components/form-field/TanstackFormField.context.js";
 import { fieldRevalidateLogic as da } from "./utils/field-revalidate-logic.js";
 import { CollapsibleGroup as fa } from "./components/collapsible-group/CollapsibleGroup.js";
-export { y as ActionBar, u as ActionBarAction, d as ActionBarButton, m as ActionBarIconButton, b as ActionBarRoot, e as Actionable, w as Alert, T as AlertActions, O as AlertContent, k as AlertTitle, A as Anchor, j as AppLayout, F as AppMenu, M as AppMenuContext, N as AppMenuContextProvider, U as AppMenuFooter, K as AppMenuHeader, q as AppMenuNavContent, J as Autocomplete, Y as AutocompleteItem, Z as AutocompleteItemGroup, I as Avatar, R as AvatarFallback, $ as AvatarIcon, z as AvatarImage, ee as AvatarPair, _e as BREADCRUMB_ITEM_MAX_WIDTH, B as Badge, te as BadgeDot, ne as BottomSheet, ie as BottomSheetContent, oe as BottomSheetFooter, ce as BottomSheetHeader, de as Breadcrumb, ue as Breadcrumbs, l as Button, ke as Card, Me as CardContent, je as CardTitle, xe as Carousel, Te as CarouselContent, Ce as CarouselHeader, ye as CarouselNav, De as CarouselSlide, Ie as Checkbox, Ui as CheckboxField, Pe as CheckboxGroup, Wi as CheckboxGroupField, Le as CheckboxStandalone, S as CircularIconButton, Re as Collapsible, ze as CollapsibleContent, fa as CollapsibleGroup, Be as CollapsibleTitle, n as DESKTOP_BREAKPOINTS, pt as DataTable, gt as DataTableBulkActions, mt as DataTableRoot, _t as DateCalendar, vt as DatePicker, Ki as DatePickerField, yt as DateRangeCalendar, bt as DateRangePicker, St as DefinitionItem, xt as DefinitionList, Ct as DefinitionTooltip, Et as Dialog, wt as DialogActions, Tt as DialogButton, kt as DialogContent, At as DialogTitle, Dt as DialogTrigger, Ge as EmptyState, Ke as EmptyStateActions, qe as EmptyStateContent, Rt as EmptyStateGetStarted, Bt as EmptyStateGoodJob, Je as EmptyStateIcon, Ht as EmptyStateNoSearchResults, Vt as EmptyStateUpgradeRequired, Ut as EmptyStateUseDesktop, zt as EmptyStateWaitingForData, Gt as ErrorState, Yt as FieldGroup, qt as Fieldset, Xt as Filter, rn as FilterAdapters, Zt as FilterControls, Qt as FilterLabels, an as FilterToolbar, ln as Flex, dn as FlexItem, tn as FloatingActionBar, pn as Form, Vi as FormControl, Hi as FormFeedbackText, zi as FormField, Li as FormHelperText, Gi as FormLabel, mn as FullPageLoader, kn as FunnelBackButton, bn as FunnelBody, vn as FunnelLayout, Sn as FunnelPage, wn as FunnelPageAction, Tn as FunnelPageActions, Dn as FunnelPageContent, An as FunnelPageFooter, Mn as FunnelPageHeader, Pn as FunnelSidebar, In as FunnelTopBar, Bn as Grid, Vn as GridItem, s as Icon, p as IconButton, Hn as Input, Ne as Label, Wn as ListView, Yn as ListViewItemLabel, Xn as ListViewItemText, qn as ListViewSection, r as MOBILE_BREAKPOINTS, h as Menu, g as MenuContent, H as MenuHeader, Zn as MenuSection, V as MenuSeparator, _ as MenuTrigger, Qn as MultiSelect, qi as MultiSelectField, $n as MultiSelectOptGroup, er as MultiSelectOption, tr as Nav, ir as NavGroup, lr as NavigationCardDescription, or as NavigationCardGroup, cr as NavigationCardLabel, fe as NoopRouterProvider, Ji as NumberField, ur as NumberInput, fr as Page, mr as PageHeader, gr as PageHeading, _r as Pagination, yr as PaginationContent, Er as PaginationEllipsis, xr as PaginationItem, W as PayFitBrand, G as PayFitBrandPreprod, kr as PhoneNumberInput, Ar as Pill, Mr as Popover, jr as PopoverTrigger, Nr as ProgressBar, Pt as PromoDialog, jt as PromoDialogActions, Lt as PromoDialogContent, Mt as PromoDialogHero, It as PromoDialogSubtitle, Nt as PromoDialogTitle, Lr as RadioButton, Pr as RadioButtonGroup, Xi as RadioButtonGroupField, Fr as RadioButtonHelper, Ir as RadioIndicator, ve as RawBreadcrumbLink, Ri as RawFormContextualLink, he as RawLink, Un as RawLinkButton, Gn as RawListViewItem, v as RawMenuItem, nr as RawNavItem, ar as RawNavigationCard, Sr as RawPaginationLink, Tr as RawPaginationNext, wr as RawPaginationPrevious, vi as RawSubTask, pi as RawTab, bi as RawTask, pe as RouterProvider, at as Search, zr as SegmentedButtonGroup, ct as Select, st as SelectButton, ea as SelectField, it as SelectOption, Yr as SelectOptionGroup, Xr as SelectOptionHelper, Ur as SelectableButton, Vr as SelectableButtonGroup, Zi as SelectableButtonGroupField, Kr as SelectableCardCheckbox, Gr as SelectableCardCheckboxGroup, Qi as SelectableCardCheckboxGroupField, Jr as SelectableCardRadio, qr as SelectableCardRadioGroup, $i as SelectableCardRadioGroupField, Zr as SidePanel, $r as SidePanelContent, ti as SidePanelFooter, ri as SidePanelHeader, gn as SkipLink, _n as SkipLinks, c as Spinner, un as Stack, fn as StackItem, oi as Step, ai as Stepper, ki as TOAST_CONFIG, mi as TabList, hi as TabPanel, dt as Table, Ve as TableBody, ci as TableCell, Ue as TableColumnHeader, Ye as TableEmptyState, Xe as TableEmptyStateError, Ze as TableEmptyStateLoading, Qe as TableEmptyStateNoData, $e as TableEmptyStateText, nt as TableHeader, et as TableNoSearchResults, lt as TablePagination, ft as TableRoot, ui as TableRow, fi as Tabs, Si as TaskGroup, gi as TaskMenu, D as Text, Ci as TextArea, ta as TextField, Ti as Timeline, Ei as TimelineStep, Oi as TimelineStepDescription, Di as TimelineStepHeader, Ai as ToastManager, Br as ToggleButton, Pi as ToggleSwitch, na as ToggleSwitchField, Mi as ToggleSwitchGroup, ra as ToggleSwitchGroupField, f as Tooltip, x as actionBarRoot, X as autocompleteItem, Q as autocompleteItemGroup, re as bottomSheet, ae as bottomSheetContent, se as bottomSheetFooter, le as bottomSheetHeader, Ae as card, Se as carousel, Ee as carouselContent, we as carouselHeader, be as carouselNav, Oe as carouselSlide, Fe as checkboxGroup, C as circularIconButton, ht as dataTableRoot, Ot as dialog, Kt as errorState, da as fieldRevalidateLogic, Jt as fieldset, $t as filterContainer, en as filterDismissButton, on as filterToolbar, sn as flex, cn as flexItem, nn as floatingActionBar, hn as fullPageLoader, xn as funnelBody, yn as funnelLayout, Cn as funnelPage, En as funnelPageActions, On as funnelPageContent, jn as funnelPageFooter, Nn as funnelPageHeader, Fn as funnelSidebar, Ln as funnelTopBar, L as getInitials, Rn as grid, zn as gridItem, i as isDesktopBreakpoint, a as isMobileBreakpoint, ge as link, Kn as listViewItem, Jn as listViewSection, rr as navItemBase, sr as navigationCardGroup, Yi as numberField, dr as numberInput, pr as page, hr as pageHeader, vr as pagination, br as paginationContent, Cr as paginationLink, Ft as promoDialog, Rr as radioButton, yi as rawSubTask, xi as rawTask, ot as search, Wr as selectableButton, Hr as selectableButtonGroup, Qr as sidePanel, ei as sidePanelContent, ni as sidePanelFooter, ii as sidePanelHeader, He as tableBody, li as tableCell, We as tableColumnHeader, tt as tableEmptyState, rt as tableHeader, ut as tablePagination, di as tableRow, la as tanstackFormDefaultValues, _i as taskMenu, E as text, wi as textArea, ji as toast, Fi as toggleSwitch, Ni as toggleSwitchGroup, P as useAppMenuContext, Ii as useAsyncList, o as useBreakpointListener, Wt as useContainerQueryLevel, ua as useFieldA11yContext, ia as useFieldContext, aa as useFormContext, t as useMediaQuery, Or as usePaginationState, Dr as usePaginationWindow, me as useRouter, si as useStepper, oa as useTanstackUnityForm, Bi as useUnityForm, sa as withFieldGroup, ca as withForm };
+export { y as ActionBar, u as ActionBarAction, d as ActionBarButton, m as ActionBarIconButton, b as ActionBarRoot, e as Actionable, w as Alert, T as AlertActions, O as AlertContent, k as AlertTitle, A as Anchor, j as AppLayout, F as AppMenu, M as AppMenuContext, N as AppMenuContextProvider, U as AppMenuFooter, K as AppMenuHeader, q as AppMenuNavContent, J as Autocomplete, Y as AutocompleteItem, Z as AutocompleteItemGroup, I as Avatar, R as AvatarFallback, $ as AvatarIcon, z as AvatarImage, ee as AvatarPair, _e as BREADCRUMB_ITEM_MAX_WIDTH, B as Badge, te as BadgeDot, ne as BottomSheet, ie as BottomSheetContent, oe as BottomSheetFooter, ce as BottomSheetHeader, de as Breadcrumb, ue as Breadcrumbs, l as Button, ke as Card, Me as CardContent, je as CardTitle, xe as Carousel, Te as CarouselContent, Ce as CarouselHeader, ye as CarouselNav, De as CarouselSlide, Ie as Checkbox, Ui as CheckboxField, Pe as CheckboxGroup, Wi as CheckboxGroupField, Le as CheckboxStandalone, S as CircularIconButton, Re as Collapsible, ze as CollapsibleContent, fa as CollapsibleGroup, Be as CollapsibleTitle, n as DESKTOP_BREAKPOINTS, pt as DataTable, gt as DataTableBulkActions, mt as DataTableRoot, _t as DateCalendar, vt as DatePicker, Ki as DatePickerField, yt as DateRangeCalendar, bt as DateRangePicker, St as DefinitionItem, xt as DefinitionList, Ct as DefinitionTooltip, Et as Dialog, wt as DialogActions, Tt as DialogButton, kt as DialogContent, At as DialogTitle, Dt as DialogTrigger, Ge as EmptyState, Ke as EmptyStateActions, qe as EmptyStateContent, Rt as EmptyStateGetStarted, Bt as EmptyStateGoodJob, Je as EmptyStateIcon, Ht as EmptyStateNoSearchResults, Vt as EmptyStateUpgradeRequired, Ut as EmptyStateUseDesktop, zt as EmptyStateWaitingForData, Gt as ErrorState, Yt as FieldGroup, qt as Fieldset, Xt as Filter, rn as FilterAdapters, Zt as FilterControls, Qt as FilterLabels, an as FilterToolbar, ln as Flex, dn as FlexItem, tn as FloatingActionBar, pn as Form, Vi as FormControl, Hi as FormFeedbackText, zi as FormField, Li as FormHelperText, Gi as FormLabel, mn as FullPageLoader, kn as FunnelBackButton, bn as FunnelBody, vn as FunnelLayout, Sn as FunnelPage, wn as FunnelPageAction, Tn as FunnelPageActions, Dn as FunnelPageContent, An as FunnelPageFooter, Mn as FunnelPageHeader, Pn as FunnelSidebar, In as FunnelTopBar, Bn as Grid, Vn as GridItem, s as Icon, p as IconButton, Hn as Input, Ne as Label, Wn as ListView, Yn as ListViewItemLabel, Xn as ListViewItemText, qn as ListViewSection, r as MOBILE_BREAKPOINTS, h as Menu, g as MenuContent, H as MenuHeader, Zn as MenuSection, V as MenuSeparator, _ as MenuTrigger, Qn as MultiSelect, qi as MultiSelectField, $n as MultiSelectOptGroup, er as MultiSelectOption, tr as Nav, ir as NavGroup, lr as NavigationCardDescription, or as NavigationCardGroup, cr as NavigationCardLabel, fe as NoopRouterProvider, Ji as NumberField, ur as NumberInput, fr as Page, mr as PageHeader, gr as PageHeading, _r as Pagination, yr as PaginationContent, Er as PaginationEllipsis, xr as PaginationItem, W as PayFitBrand, G as PayFitBrandPreprod, kr as PhoneNumberInput, Ar as Pill, jr as Popover, Mr as PopoverTrigger, Nr as ProgressBar, Pt as PromoDialog, jt as PromoDialogActions, Lt as PromoDialogContent, Mt as PromoDialogHero, It as PromoDialogSubtitle, Nt as PromoDialogTitle, Lr as RadioButton, Pr as RadioButtonGroup, Xi as RadioButtonGroupField, Fr as RadioButtonHelper, Ir as RadioIndicator, ve as RawBreadcrumbLink, Ri as RawFormContextualLink, he as RawLink, Un as RawLinkButton, Gn as RawListViewItem, v as RawMenuItem, nr as RawNavItem, ar as RawNavigationCard, Sr as RawPaginationLink, Tr as RawPaginationNext, wr as RawPaginationPrevious, vi as RawSubTask, pi as RawTab, bi as RawTask, pe as RouterProvider, at as Search, zr as SegmentedButtonGroup, ct as Select, st as SelectButton, ea as SelectField, it as SelectOption, Yr as SelectOptionGroup, Xr as SelectOptionHelper, Ur as SelectableButton, Vr as SelectableButtonGroup, Zi as SelectableButtonGroupField, Kr as SelectableCardCheckbox, Gr as SelectableCardCheckboxGroup, Qi as SelectableCardCheckboxGroupField, Jr as SelectableCardRadio, qr as SelectableCardRadioGroup, $i as SelectableCardRadioGroupField, Zr as SidePanel, $r as SidePanelContent, ti as SidePanelFooter, ri as SidePanelHeader, gn as SkipLink, _n as SkipLinks, c as Spinner, un as Stack, fn as StackItem, oi as Step, ai as Stepper, ki as TOAST_CONFIG, mi as TabList, hi as TabPanel, dt as Table, Ve as TableBody, ci as TableCell, Ue as TableColumnHeader, Ye as TableEmptyState, Xe as TableEmptyStateError, Ze as TableEmptyStateLoading, Qe as TableEmptyStateNoData, $e as TableEmptyStateText, nt as TableHeader, et as TableNoSearchResults, lt as TablePagination, ft as TableRoot, ui as TableRow, fi as Tabs, Si as TaskGroup, gi as TaskMenu, D as Text, Ci as TextArea, ta as TextField, Ti as Timeline, Ei as TimelineStep, Oi as TimelineStepDescription, Di as TimelineStepHeader, Ai as ToastManager, Br as ToggleButton, Pi as ToggleSwitch, na as ToggleSwitchField, Mi as ToggleSwitchGroup, ra as ToggleSwitchGroupField, f as Tooltip, x as actionBarRoot, X as autocompleteItem, Q as autocompleteItemGroup, re as bottomSheet, ae as bottomSheetContent, se as bottomSheetFooter, le as bottomSheetHeader, Ae as card, Se as carousel, Ee as carouselContent, we as carouselHeader, be as carouselNav, Oe as carouselSlide, Fe as checkboxGroup, C as circularIconButton, ht as dataTableRoot, Ot as dialog, Kt as errorState, da as fieldRevalidateLogic, Jt as fieldset, $t as filterContainer, en as filterDismissButton, on as filterToolbar, sn as flex, cn as flexItem, nn as floatingActionBar, hn as fullPageLoader, xn as funnelBody, yn as funnelLayout, Cn as funnelPage, En as funnelPageActions, On as funnelPageContent, jn as funnelPageFooter, Nn as funnelPageHeader, Fn as funnelSidebar, Ln as funnelTopBar, L as getInitials, Rn as grid, zn as gridItem, i as isDesktopBreakpoint, a as isMobileBreakpoint, ge as link, Kn as listViewItem, Jn as listViewSection, rr as navItemBase, sr as navigationCardGroup, Yi as numberField, dr as numberInput, pr as page, hr as pageHeader, vr as pagination, br as paginationContent, Cr as paginationLink, Ft as promoDialog, Rr as radioButton, yi as rawSubTask, xi as rawTask, ot as search, Wr as selectableButton, Hr as selectableButtonGroup, Qr as sidePanel, ei as sidePanelContent, ni as sidePanelFooter, ii as sidePanelHeader, He as tableBody, li as tableCell, We as tableColumnHeader, tt as tableEmptyState, rt as tableHeader, ut as tablePagination, di as tableRow, la as tanstackFormDefaultValues, _i as taskMenu, E as text, wi as textArea, ji as toast, Fi as toggleSwitch, Ni as toggleSwitchGroup, P as useAppMenuContext, Ii as useAsyncList, o as useBreakpointListener, Wt as useContainerQueryLevel, ua as useFieldA11yContext, ia as useFieldContext, aa as useFormContext, t as useMediaQuery, Or as usePaginationState, Dr as usePaginationWindow, me as useRouter, si as useStepper, oa as useTanstackUnityForm, Bi as useUnityForm, sa as withFieldGroup, ca as withForm };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-components",
-  "version": "2.55.13",
+  "version": "2.55.15",
   "module": "./dist/esm/index.js",
   "type": "module",
   "sideEffects": false,
@@ -93,7 +93,7 @@
     "tailwind-variants": "3.2.2",
     "usehooks-ts": "3.1.1",
     "zod": "4.4.3",
-    "@payfit/unity-illustrations": "2.55.13"
+    "@payfit/unity-illustrations": "2.55.15"
   },
   "peerDependencies": {
     "@hookform/devtools": "^4",
@@ -105,8 +105,8 @@
     "react-hook-form": "^7",
     "react-router-dom": "^5",
     "zod": "^3 || ^4",
-    "@payfit/unity-icons": "2.55.13",
-    "@payfit/unity-themes": "2.55.13"
+    "@payfit/unity-icons": "2.55.15",
+    "@payfit/unity-themes": "2.55.15"
   },
   "devDependencies": {
     "@figma/code-connect": "1.4.8",
@@ -132,8 +132,8 @@
     "@types/react": "18.3.18",
     "@types/react-dom": "18.3.5",
     "@types/react-router-dom": "5.3.3",
-    "@vitejs/plugin-react": "6.0.2",
-    "@vitest/browser-playwright": "4.1.9",
+    "@vitejs/plugin-react": "6.0.3",
+    "@vitest/browser-playwright": "4.1.10",
     "eslint-plugin-storybook": "10.3.2",
     "glob": "11.1.0",
     "msw": "2.14.6",
@@ -149,17 +149,17 @@
     "storybook-mock-date-decorator": "3.0.0",
     "tailwindcss": "4.3.2",
     "typescript": "npm:@typescript/typescript6@6.0.2",
-    "vite": "8.0.16",
+    "vite": "8.1.4",
     "vite-plugin-node-polyfills": "0.28.0",
-    "vitest": "4.1.9",
+    "vitest": "4.1.10",
+    "@payfit/hr-app-eslint": "0.0.0-use.local",
     "@payfit/hr-apps-tsconfigs": "0.0.0-use.local",
     "@payfit/storybook-addon-console-errors": "0.0.0-use.local",
-    "@payfit/hr-app-eslint": "0.0.0-use.local",
-    "@payfit/unity-icons": "2.55.13",
-    "@payfit/unity-illustrations": "2.55.13",
-    "@payfit/unity-themes": "2.55.13",
-    "@payfit/vite-configs": "0.0.0-use.local",
-    "@payfit/storybook-config": "0.0.0-use.local"
+    "@payfit/storybook-config": "0.0.0-use.local",
+    "@payfit/unity-icons": "2.55.15",
+    "@payfit/unity-illustrations": "2.55.15",
+    "@payfit/unity-themes": "2.55.15",
+    "@payfit/vite-configs": "0.0.0-use.local"
   },
   "peerDependenciesMeta": {
     "@hookform/devtools": {

package/skills/unity-data-table/SKILL.md

@@ -4,9 +4,10 @@ description: >
   Load when rendering tabular data with Unity. Use it to choose DataTable for
   managed table state or primitive Table for static/custom markup, including
   filtering, pagination, virtualization, or bulk actions.
-type: core
-library: '@payfit/unity-components'
-library_version: '2.x'
+metadata:
+  type: core
+  library: '@payfit/unity-components'
+  library_version: '2.x'
 sources:
   - 'PayFit/hr-apps:libs/shared/unity/components/src/components/data-table/DataTable.tsx'
   - 'PayFit/hr-apps:libs/shared/unity/components/src/components/data-table/parts/DataTableRoot.tsx'
@@ -23,7 +24,9 @@ table state to manage.
 
 ## Setup
 
-Minimum working client-side DataTable. Columns and data MUST be memoized.
+Minimum working client-side DataTable. Keep `columns` and `data` references
+stable across renders. Define static columns outside the component or memoize
+them; memoize derived data when its source would otherwise create a new array.
 
 ```tsx
 import { useMemo, useState } from 'react'
@@ -98,241 +101,17 @@ export function EmployeeTable({ employees }: { employees: Employee[] }) {
 
 ## Core Patterns
 
-### Define columns with the column helper and ColumnMeta
+- Define columns with `createColumnHelper` and use `ColumnMeta` for row
+  headers, focus behavior, helper text, and fixed-layout widths.
+- For server pagination, pass only the current page, set `manualPagination`,
+  and derive `pageCount` from the server total.
+- Map `FilterToolbar.onChange` into TanStack Table's column/global filter
+  state.
+- Put `DataTableBulkActions` beside `DataTable` inside `DataTableRoot` and
+  drive it from row-selection state.
 
-ColumnMeta drives accessibility (`isRowHeader`), keyboard navigation
-(`isFocusable: false` for cells whose children are themselves focusable like
-checkboxes), `helperText` (renders a tooltip next to the header), and
-`headerClassName` (required when `layout="fixed"`).
-
-```tsx
-import { Badge } from '@payfit/unity-components'
-import { createColumnHelper } from '@tanstack/react-table'
-
-const columnHelper = createColumnHelper<Employee>()
-
-export const employeeColumns = [
-  columnHelper.accessor('name', {
-    id: 'employee',
-    header: 'Employee',
-    enableSorting: true,
-    meta: { isRowHeader: true, headerClassName: 'uy:w-[260px]' },
-  }),
-  columnHelper.accessor('status', {
-    header: 'Status',
-    enableColumnFilter: true,
-    filterFn: 'arrIncludesSome',
-    cell: info => {
-      const status = info.getValue()
-      return (
-        <Badge variant={status === 'active' ? 'success' : 'neutral'}>
-          {status}
-        </Badge>
-      )
-    },
-    meta: { helperText: 'Active employees can sign in.' },
-  }),
-  columnHelper.display({
-    id: 'actions',
-    header: '',
-    cell: ({ row }) => <RowMenu row={row.original} />,
-    meta: { isFocusable: false },
-  }),
-]
-```
-
-### Server-side pagination
-
-`manualPagination: true` disables Tanstack's internal slicing. Pass only the
-current page's slice as `data` and supply `pageCount`.
-
-```tsx
-import { useMemo, useState } from 'react'
-
-import { getCoreRowModel, useReactTable } from '@tanstack/react-table'
-
-export function ServerTable({ totalCount, fetchPage }: Props) {
-  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 20 })
-  const { data: pageRows = [] } = useQuery({
-    queryKey: ['employees', pagination],
-    queryFn: () => fetchPage(pagination.pageIndex, pagination.pageSize),
-  })
-
-  const columns = useMemo(() => employeeColumns, [])
-  const data = useMemo(() => pageRows, [pageRows])
-
-  const table = useReactTable({
-    data,
-    columns,
-    manualPagination: true,
-    pageCount: Math.ceil(totalCount / pagination.pageSize),
-    state: { pagination },
-    onPaginationChange: setPagination,
-    getCoreRowModel: getCoreRowModel(),
-  })
-
-  return (
-    <DataTableRoot>
-      <DataTable table={table}>
-        {row => (
-          <TableRow key={row.id}>
-            {row.getVisibleCells().map(cell => (
-              <TableCell key={cell.id}>
-                {flexRender(cell.column.columnDef.cell, cell.getContext())}
-              </TableCell>
-            ))}
-          </TableRow>
-        )}
-      </DataTable>
-    </DataTableRoot>
-  )
-}
-```
-
-### Filtering with FilterToolbar
-
-`FilterToolbar.onChange` emits `SerializableAppliedFilter[]`. Map that onto
-`table.setColumnFilters` / `table.setGlobalFilter`. `renderControl` takes any
-control — it is a render function on purpose so you can drop in date pickers,
-multi-selects, text fields, etc.
-
-```tsx
-import type { FilterDef } from '@payfit/unity-components'
-
-import { FilterToolbar, Select, SelectItem } from '@payfit/unity-components'
-import { getFilteredRowModel } from '@tanstack/react-table'
-
-const filterDefs: FilterDef[] = [
-  {
-    id: 'status',
-    label: 'Status',
-    renderControl: (value, onChange) => (
-      <Select selectedKey={value as string} onSelectionChange={onChange}>
-        <SelectItem id="active">Active</SelectItem>
-        <SelectItem id="inactive">Inactive</SelectItem>
-      </Select>
-    ),
-    renderLabel: value => String(value),
-  },
-]
-
-export function FilteredTable() {
-  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
-
-  const table = useReactTable({
-    data,
-    columns,
-    state: { columnFilters, pagination },
-    onColumnFiltersChange: setColumnFilters,
-    onPaginationChange: setPagination,
-    getCoreRowModel: getCoreRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-  })
-
-  return (
-    <>
-      <FilterToolbar
-        filterDefs={filterDefs}
-        onChange={applied =>
-          setColumnFilters(applied.map(f => ({ id: f.id, value: f.value })))
-        }
-      />
-      <DataTableRoot>
-        <DataTable table={table}>
-          {row => (
-            <TableRow key={row.id}>
-              {row.getVisibleCells().map(cell => (
-                <TableCell key={cell.id}>
-                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                </TableCell>
-              ))}
-            </TableRow>
-          )}
-        </DataTable>
-      </DataTableRoot>
-    </>
-  )
-}
-```
-
-### Bulk actions with row selection
-
-`DataTableBulkActions` lives next to `DataTable` inside `DataTableRoot`.
-It auto-shows when rows are selected and provides the F6 focus trap. Use a
-display column with `meta.isFocusable: false` for the checkbox.
-
-```tsx
-import {
-  CheckboxStandalone,
-  DataTable,
-  DataTableBulkActions,
-  DataTableRoot,
-} from '@payfit/unity-components'
-
-const checkboxColumn = columnHelper.display({
-  id: 'select',
-  header: ({ table }) => (
-    <CheckboxStandalone
-      isSelected={table.getIsAllPageRowsSelected()}
-      isIndeterminate={table.getIsSomePageRowsSelected()}
-      onChange={value => table.toggleAllPageRowsSelected(value)}
-      slot="selection"
-    >
-      Select all
-    </CheckboxStandalone>
-  ),
-  cell: ({ row }) => (
-    <CheckboxStandalone
-      isSelected={row.getIsSelected()}
-      onChange={value => row.toggleSelected(value)}
-      slot="selection"
-    >
-      Select row
-    </CheckboxStandalone>
-  ),
-  enableSorting: false,
-  meta: { isFocusable: false },
-})
-
-export function BulkTable() {
-  const [rowSelection, setRowSelection] = useState({})
-  const columns = useMemo(() => [checkboxColumn, ...employeeColumns], [])
-  const table = useReactTable({
-    data,
-    columns,
-    state: { rowSelection, pagination },
-    onRowSelectionChange: setRowSelection,
-    onPaginationChange: setPagination,
-    enableRowSelection: true,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-  })
-
-  return (
-    <DataTableRoot>
-      <DataTable table={table}>
-        {row => (
-          <TableRow key={row.id} isSelected={row.getIsSelected()}>
-            {row.getVisibleCells().map(cell => (
-              <TableCell key={cell.id}>
-                {flexRender(cell.column.columnDef.cell, cell.getContext())}
-              </TableCell>
-            ))}
-          </TableRow>
-        )}
-      </DataTable>
-      <DataTableBulkActions
-        table={table}
-        actions={[
-          { id: 'archive', label: 'Archive', onAction: rows => archive(rows) },
-          { id: 'delete', label: 'Delete', onAction: rows => remove(rows) },
-        ]}
-      />
-    </DataTableRoot>
-  )
-}
-```
+Read [references/patterns.md](references/patterns.md) when implementing one of
+these patterns.
 
 ## Common Mistakes
 
@@ -435,7 +214,7 @@ const table = useReactTable({ /* … */ state: { columnFilters, globalFilter },
 
 FilterToolbar.onChange emits AppliedFilter[]. Agent stores them locally without mapping to table.setGlobalFilter / setColumnFilters, so rows do not actually filter.
 
-### CRITICAL Server-side pagination without slicing data
+### HIGH Pass every local row with manual pagination
 
 Wrong:
 
@@ -447,7 +226,7 @@ useReactTable({
 })
 ```
 
-Correct:
+Correct for locally held data:
 
 ```tsx
 const currentData = useMemo(() => {
@@ -465,6 +244,11 @@ useReactTable({
 
 manualPagination: true tells Tanstack not to slice. Agents pass the full dataset and expect TanStack to paginate anyway.
 
+For server-side pagination, fetch and pass only the current server page and
+set `pageCount` from the server's total count. When all rows are local and
+TanStack should paginate them automatically, omit `manualPagination` and use
+`getPaginationRowModel()` instead.
+
 ### MEDIUM Render large datasets without enableVirtualization
 
 Wrong: