puppertino-table 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.3.0 — 2026-10-12
+
+- Require the latest stable React 19 at release time (19.3.0, peer range `^19.3.0`); remove React 18 compatibility coverage.
+
+- Extract a React-independent resize gesture controller, browser-effects adapter and persistence module; keep the hook focused on lifecycle and event adaptation.
+- Compose the complete table from exported `TableHeader`, memoized `TableBody`, `RowSelectionCheckbox` and `ColumnResizeHandle` primitives.
+- Separate public state, row/cell customization, body context and resize type contracts from rendering modules; preserve existing root exports.
+- Replace duplicated custom-layout examples with shared primitives, document the contracts, and add controller unit tests plus checkbox Storybook coverage.
+- Preserve Puppertino's separated borders, rounded stripes, native header emphasis and numeric alignment.
+- Derive secondary text, focus rings and resize dividers from Puppertino theme tokens; keep selected-row colors through hover.
+- Match the compact desktop header band and group the selection cell with its first data column.
+
 ## 0.2.0 — 2026-10-12
 
 - Add typed row/cell DOM customization callbacks and a leading-rows slot to the complete table.

package/README.md

@@ -17,10 +17,10 @@ A generic React table styled with [Puppertino](https://puppertino.com/) and powe
 The package includes built ESM and TypeScript declarations. Install it from npm:
 
 ```sh
-pnpm add puppertino-table@0.2.0 @tanstack/react-table@9.2.8 @codedgar/puppertino@2 react react-dom
+pnpm add puppertino-table@0.3.0 @tanstack/react-table@9.2.8 @codedgar/puppertino@2 react@19.3.0 react-dom@19.3.0
 ```
 
-React, TanStack Table and Puppertino are peer dependencies; the library does not bundle another copy of them. For Git-based installation, use `github:kahwee/puppertino-table` and pin a commit or tag for reproducibility.
+React 19.3.0 or a compatible newer React 19 release is required (`^19.3.0`). React 18 and React 20 are outside the supported range. React, TanStack Table and Puppertino are peer dependencies; the library does not bundle another copy of them. For Git-based installation, use `github:kahwee/puppertino-table` and pin a commit or tag for reproducibility.
 
 ## Use
 
@@ -104,48 +104,56 @@ Callbacks receive typed TanStack row/cell objects, including `original`, IDs and
 
 `leadingRows` accepts React content or a function receiving the table. Its second argument is the same body context, with `columnCount` including the selection column. Return semantic `<tr>` elements with `<th>`/`<td>` children. It renders inside `<tbody>` before data rows, including when there are no data rows; the empty-state row still renders. Use `context.columnCount` for full-width row `colSpan`. Leading rows are app-owned: they do not enter the data row model, sorting, selection ranges or the row/cell callbacks.
 
-Use **`usePuppertinoTable` and the primitives** when you own the table markup, selection controls or header layout. The hook returns a `PuppertinoTableInstance` and shares the complete component's column bounds, persisted initial sizing, sorting ownership and controlled/uncontrolled selection rules. It accepts the state/data options from `PuppertinoTable`, without rendering options such as `ariaLabel` or `leadingRows`.
+Use **`usePuppertinoTable` and the primitives** when you own the table wrapper, selection controls or header layout. `TableHeader` and memoized `TableBody` are the same components used by `PuppertinoTable`. They preserve grouped-header semantics, sort accessibility, resize controls, row customization and selection. The hook returns a `PuppertinoTableInstance` and shares the complete component's column bounds, persisted initial sizing, sorting ownership and controlled/uncontrolled selection rules. It accepts the state/data options from `PuppertinoTable`, without rendering options such as `ariaLabel` or `leadingRows`.
 
 ```tsx
 import { useState } from 'react';
 import type { SortingState } from '@tanstack/react-table';
-import { usePuppertinoTable, ColumnResizeHandle } from 'puppertino-table';
+import { usePuppertinoTable, TableHeader, TableBody } from 'puppertino-table';
 
 function CustomItems() {
   const [sorting, setSorting] = useState<SortingState>([]);
+  const storageKey = 'my-app.custom-items.columns.v1';
   const table = usePuppertinoTable({
     data: items, columns, getRowId: item => item.id,
-    sorting, onSortingChange: setSorting, manualSorting: false, selectable: true,
-    storageKey: 'my-app.custom-items.columns.v1',
+    sorting, onSortingChange: setSorting, manualSorting: false, selectable: true, storageKey,
   });
-  return <table.Subscribe source={table.atoms.columnSizing}>{() => (
-    <table className="p-table pt-table" aria-label="Items" style={{ width: table.getTotalSize() }}>
-      <colgroup>{table.getAllLeafColumns().map(column => <col key={column.id} style={{ width: column.getSize() }} />)}</colgroup>
-      <thead>{table.getHeaderGroups().map(group => <tr key={group.id}>{group.headers.map(header => (
-        <th key={header.id} colSpan={header.colSpan} scope={header.column.columns.length ? 'colgroup' : 'col'}
-          aria-sort={header.column.getIsSorted() === 'asc' ? 'ascending' : header.column.getIsSorted() === 'desc' ? 'descending' : undefined}>
-          {!header.isPlaceholder && (header.column.getCanSort()
-            ? <button type="button" onClick={() => header.column.toggleSorting()}><table.FlexRender header={header} /></button>
-            : <table.FlexRender header={header} />)}
-          <ColumnResizeHandle table={table} header={header} label={header.column.id}
-            options={{ storageKey: 'my-app.custom-items.columns.v1' }} />
-        </th>
-      ))}</tr>)}</thead>
-      <tbody>{table.getRowModel().rows.map(row => <tr key={row.id}>
-        {row.getAllCells().map((cell, index) => <td key={cell.id}>
-          {index === 0 && <input type="checkbox" aria-label={`Select ${row.original.name}`}
-            checked={row.getIsSelected()} disabled={!row.getCanSelect()} onChange={row.getToggleSelectedHandler()} />}
-          <table.FlexRender cell={cell} />
-        </td>)}
-      </tr>)}</tbody>
-    </table>
-  )}</table.Subscribe>;
+  return <div className="pt-scroll" tabIndex={0} role="region" aria-label="Items scroll area">
+    <table.Subscribe source={table.atoms.columnSizing}>{() => (
+      <table className="p-table pt-table" aria-label="Items" style={{ width: table.getTotalSize() + 36 }}>
+        <colgroup><col style={{ width: 36 }} />{table.getAllLeafColumns().map(column => <col key={column.id} style={{ width: column.getSize() }} />)}</colgroup>
+        <TableHeader table={table} selectable resizeOptions={{ storageKey }} />
+        <TableBody table={table} selectable getRowLabel={item => item.name}
+          leadingRows={(_table, context) => <tr><td colSpan={context.columnCount}>Folder</td></tr>} />
+      </table>
+    )}</table.Subscribe>
+  </div>;
 }
 ```
 
-The hook initializes sizing but does not install resize listeners. `ColumnResizeHandle` infers its accessible label from a string header or column ID; pass `label` for a custom or translated name. Its props type is exported as `ColumnResizeHandleProps`. `ColumnResizeHandle` and `useColumnResize` automatically share a controller keyed by the table's sizing store, with one pair of global keydown/blur listeners and one active gesture. The initiating handle's options govern that gesture; pass consistent storage and responsive settings to all handles. Removing the active handle, disabling it or changing its resize settings cancels its preview. Removing other handles leaves the gesture running. Separate tables remain independent. Pass `options={{ enabled: false }}` to hide a primitive handle when your layout is disabled; the hook's `disabled` controls selection, while primitive UI controls remain yours to disable.
+Pass matching `selectable` values to the hook, header and body; include a 36-pixel selection `<col>` when it is enabled. Pass `disabled` to all three to disable selection, sorting controls and resizing consistently. Keep the geometry subscription around the table; `TableBody` is already memoized separately. It supplies the empty-state row and accepts the same `getRowProps`, `getCellProps`, `leadingRows` and `getRowLabel` options as the complete component.
 
-For more specialized state wiring, the existing `puppertinoTableFeatures`, `PuppertinoTableInstance`, sizing helpers and TanStack `useTable` remain available. In custom layouts, memoize your row body separately from the `columnSizing` subscription to avoid rerendering cells during drags.
+For a fully custom header or body, use `ColumnResizeHandle` and `RowSelectionCheckbox` individually. The checkbox handles Shift ranges, keyboard toggling and event isolation from row clicks. Give it `row`, an optional row-description `label`, and `disabled` when appropriate. Keep your `<thead>`/`<tbody>` and `<th>`/`<td>` markup semantic and supply accessible sort state.
+
+### Public type contracts
+
+All existing root imports remain supported. Rendering modules consume dedicated type contracts: table state options, body/customization types and resize options are defined separately from component implementations. Import these contracts with `import type`:
+
+```tsx
+import type {
+  PuppertinoTableOptions, PuppertinoTableProps,
+  PuppertinoRow, PuppertinoCell, PuppertinoBodyContext,
+  PuppertinoRowProps, PuppertinoCellProps,
+  TableHeaderProps, TableBodyProps, RowSelectionCheckboxProps,
+  ColumnResizeOptions, ColumnResizeHandleProps,
+} from 'puppertino-table';
+```
+
+The controller's gesture engine, browser effects and persistence are internal modules. `useColumnResize` manages React lifecycle and adapts events; it continues to provide the existing `handle(columnId)` API.
+
+The hook initializes sizing but does not install resize listeners; `TableHeader` installs them through its shared resize handles. `ColumnResizeHandle` infers its accessible label from a string header or column ID; pass `label` for a custom or translated name. Its props type is exported as `ColumnResizeHandleProps`. `ColumnResizeHandle` and `useColumnResize` automatically share a controller keyed by the table's sizing store, with one pair of global keydown/blur listeners and one active gesture. The initiating handle's options govern that gesture; pass consistent storage and responsive settings to all handles. Removing the active handle, disabling it or changing its resize settings cancels its preview. Removing other handles leaves the gesture running. Separate tables remain independent. Pass `options={{ enabled: false }}` to hide a primitive handle when your layout is disabled; the hook's `disabled` controls selection, while primitive UI controls remain yours to disable.
+
+For more specialized state wiring, the existing `puppertinoTableFeatures`, `PuppertinoTableInstance`, sizing helpers and TanStack `useTable` remain available. In custom layouts, use `TableBody` or memoize your custom row body separately from the `columnSizing` subscription to avoid rerendering cells during drags.
 
 ### Server-paginated complete table
 
@@ -192,6 +200,8 @@ Keep `loadPage` stable (for example, a module-level function or `useCallback`).
 
 The package adds scoped `.pt-*` enhancements to Puppertino's `p-table` styles. Import Puppertino's CSS in your application, then the package stylesheet. Theme tokens remain owned by Puppertino and your application. Include Puppertino's dark-mode stylesheet when using its dark theme.
 
+Puppertino owns separated borders, rounded row stripes, numeric alignment and active-header weight. The package adds scroll/sticky geometry, sort-button and resize-target behavior, plus contrast-safe text. Override `--pt-table-secondary` for secondary/header text and `--pt-table-text` for data-cell text using your application's Puppertino theme tokens. Selection reads `--p-list-selection` and `--p-list-selection-text` in every hover state.
+
 ## Storybook and demo
 
 GitHub Pages is configured to publish [Storybook 10](https://kahwee.github.io/puppertino-table/) from `storybook-static/` after the checks on main pass. The Pages artifact contains only Storybook and its examples. Pull requests run verification without deploying. For repository setup, select **Settings → Pages → Source → GitHub Actions**; the workflow also attempts to enable Pages automatically.
@@ -205,7 +215,7 @@ pnpm dev             # standalone 267-row fictional-data demo
 pnpm build:storybook # static Storybook in storybook-static/
 ```
 
-Stories cover local sorting, host-owned order, range selection, keyboard resizing, dark mode, narrow layouts, empty/disabled/read-only states, grouped headers, a different row schema with currency cells, customized/leading rows, and a custom hook layout. Story controls expose selection, resizing, disabled state and sorting ownership.
+Stories cover local sorting, host-owned order, range selection, keyboard resizing, dark mode, narrow layouts, empty/disabled/read-only states, grouped headers, a different row schema with currency cells, customized/leading rows, a shared-primitive hook layout, and standalone checkbox selection. Story controls expose selection, resizing, disabled state and sorting ownership.
 
 ## Verification
 
@@ -213,7 +223,7 @@ Stories cover local sorting, host-owned order, range selection, keyboard resizin
 pnpm check
 ```
 
-Checks include TypeScript, preference/schema unit tests, library/demo/Storybook builds, and Chromium regression tests. The browser suite exercises 512 repeated pointer drags, width limits, reset/cancellation/persistence, selection, unmount/disabled recovery, standalone-control removal and grouped-header resizing, all 267 demo rows across six pages, six light/dark accessibility layouts, all seventeen Storybook stories, and tarball installation with typed imports, server rendering and CSS exports in fresh React 18 and React 19 consumers. Set `PLAYWRIGHT_CHROMIUM_EXECUTABLE` to a system Chromium path, or install a browser with `pnpm exec playwright install chromium`.
+Checks include TypeScript, independent controller ownership/cancellation/persistence tests, preference/schema unit tests, library/demo/Storybook builds, and Chromium regression tests. The browser suite exercises 512 repeated pointer drags, width limits, reset/cancellation/persistence, selection, unmount/disabled recovery, standalone-control removal and grouped-header resizing, all 267 demo rows across six pages, six light/dark accessibility layouts, all eighteen Storybook stories, and tarball installation with typed imports, server rendering and CSS exports in fresh React 19.3.0 consumers. Set `PLAYWRIGHT_CHROMIUM_EXECUTABLE` to a system Chromium path, or install a browser with `pnpm exec playwright install chromium`.
 
 GitHub Actions runs the same checks and uploads Storybook plus browser evidence as an artifact. Browser tests use fictional data and do not claim Safari, physical-device or latency coverage.
 
@@ -223,10 +233,10 @@ The unscoped **`puppertino-table`** package is public on npm. Stable releases us
 
 ```sh
 pnpm check
-npm publish test-results/package/puppertino-table-0.2.0.tgz --dry-run --ignore-scripts --access public
+npm publish test-results/package/puppertino-table-0.3.0.tgz --dry-run --ignore-scripts --access public
 ```
 
-`pnpm check` builds and packs the library, checks the tarball file list, and installs it in isolated React 18 and React 19 consumers. `prepack` rebuilds JavaScript and declarations so a locally packed release cannot silently use stale output. Only the compiled library, CSS, package metadata, README, changelog and MIT license ship; Storybook, the demo and tests stay out of the npm package.
+`pnpm check` builds and packs the library, checks the tarball file list, and installs it in isolated React 19.3.0 consumers. `prepack` rebuilds JavaScript and declarations so a locally packed release cannot silently use stale output. Only the compiled library, CSS, package metadata, README, changelog and MIT license ship; Storybook, the demo and tests stay out of the npm package.
 
 The manually dispatched **Prepare npm package** GitHub Actions workflow performs these checks and uploads `npm-release-candidate`, containing the verified tarball and `pack.json`. It never publishes to npm. See [RELEASING.md](https://github.com/kahwee/puppertino-table/blob/main/RELEASING.md) for the final publishing steps.
 

package/dist/index.d.ts

@@ -1,6 +1,12 @@
-export { PuppertinoTable, type PuppertinoTableProps, type PuppertinoRow, type PuppertinoCell, type PuppertinoRowProps, type PuppertinoCellProps, type PuppertinoDataAttributes, type PuppertinoBodyContext } from './table.js';
+export { PuppertinoTable } from './table.js';
+export type { PuppertinoTableProps, PuppertinoRow, PuppertinoCell, PuppertinoRowProps, PuppertinoCellProps, PuppertinoDataAttributes, PuppertinoBodyContext, PuppertinoBodyOptions, TableHeaderProps, TableBodyProps, RowSelectionCheckboxProps } from './table-types.js';
+export { TableHeader } from './table-header.js';
+export { TableBody } from './table-body.js';
+export { RowSelectionCheckbox } from './row-selection-checkbox.js';
 export { createPuppertinoColumnHelper, puppertinoTableFeatures, type PuppertinoTableInstance, type PuppertinoColumnDef } from './model.js';
-export { useColumnResize, type ColumnResizeOptions } from './use-column-resize.js';
-export { ColumnResizeHandle, type ColumnResizeHandleProps } from './resize-handle.js';
+export { useColumnResize } from './use-column-resize.js';
+export { ColumnResizeHandle } from './resize-handle.js';
+export type { ColumnResizeOptions, ColumnResizeHandleProps } from './resize-types.js';
 export { readColumnSizing, columnSizeBounds, clampSize, type ColumnSizeBounds } from './sizing.js';
-export { usePuppertinoTable, type PuppertinoTableOptions } from './use-puppertino-table.js';
+export { usePuppertinoTable } from './use-puppertino-table.js';
+export type { PuppertinoTableOptions } from './table-options.js';

package/dist/index.js

@@ -1,4 +1,7 @@
 export { PuppertinoTable } from './table.js';
+export { TableHeader } from './table-header.js';
+export { TableBody } from './table-body.js';
+export { RowSelectionCheckbox } from './row-selection-checkbox.js';
 export { createPuppertinoColumnHelper, puppertinoTableFeatures } from './model.js';
 export { useColumnResize } from './use-column-resize.js';
 export { ColumnResizeHandle } from './resize-handle.js';

package/dist/resize-controller.d.ts

@@ -0,0 +1,35 @@
+import { type ColumnSizeBounds } from './sizing.js';
+import type { ColumnResizeOptions } from './resize-types.js';
+export type ResizeWidths = Record<string, number>;
+export interface ResizeAdapter {
+    snapshot(): ResizeWidths;
+    bounds(id: string): ColumnSizeBounds;
+    apply(widths: ResizeWidths): void;
+    reset(id: string): void;
+}
+export interface ResizeMember {
+    adapter: ResizeAdapter;
+    options: ColumnResizeOptions;
+}
+export interface ResizeTarget {
+    focus(): void;
+    setPointerCapture(pointer: number): void;
+    hasPointerCapture(pointer: number): boolean;
+    releasePointerCapture(pointer: number): void;
+}
+export interface ResizeEnvironment {
+    listenCancel(cancel: () => boolean): () => void;
+    isCompact(query?: string): boolean;
+    startGesture(target: ResizeTarget, pointer: number, className: string, query: string | undefined, cancel: () => void): () => void;
+}
+/** Gesture ownership and width transitions. No React or browser globals. */
+export declare function createResizeController(environment: ResizeEnvironment, persist: (member: ResizeMember) => void): {
+    cancelMember: (member: ResizeMember) => void;
+    retain(member: ResizeMember): () => void;
+    begin(member: ResizeMember, id: string, x: number, pointer: number, target: ResizeTarget, button: number): boolean;
+    move(member: ResizeMember, pointer: number, x: number): void;
+    end(member: ResizeMember, pointer: number): void;
+    cancel(member: ResizeMember, pointer: number): void;
+    reset(member: ResizeMember, id: string): boolean;
+    key(member: ResizeMember, id: string, key: string, shift?: boolean): boolean;
+};

package/dist/resize-controller.js

@@ -0,0 +1,94 @@
+import { clampSize } from './sizing.js';
+/** Gesture ownership and width transitions. No React or browser globals. */
+export function createResizeController(environment, persist) {
+    const members = new Set();
+    let stopListening;
+    let drag = null;
+    const finish = (cancel) => {
+        const active = drag;
+        if (!active)
+            return false;
+        drag = null;
+        active.cleanup();
+        active.member.adapter.apply(cancel ? active.before : active.member.adapter.snapshot());
+        if (!cancel)
+            persist(active.member);
+        return true;
+    };
+    const owns = (member, pointer) => drag?.member === member && drag.pointer === pointer;
+    const cancelMember = (member) => { if (drag?.member === member)
+        finish(true); };
+    return {
+        cancelMember,
+        retain(member) {
+            if (!members.size)
+                stopListening = environment.listenCancel(() => finish(true));
+            members.add(member);
+            let released = false;
+            return () => {
+                if (released)
+                    return;
+                released = true;
+                cancelMember(member);
+                members.delete(member);
+                if (!members.size) {
+                    stopListening?.();
+                    stopListening = undefined;
+                }
+            };
+        },
+        begin(member, id, x, pointer, target, button) {
+            if (button !== 0 || member.options.enabled === false || drag || !members.has(member) || environment.isCompact(member.options.cancelMediaQuery))
+                return false;
+            const before = member.adapter.snapshot();
+            if (!Number.isFinite(before[id]))
+                return false;
+            const active = { member, id, x, width: before[id], before, pointer, query: member.options.cancelMediaQuery, cleanup: () => { } };
+            drag = active;
+            try {
+                active.cleanup = environment.startGesture(target, pointer, member.options.dragClassName ?? 'pt-resizing', active.query, () => finish(true));
+            }
+            catch {
+                finish(true);
+                return false;
+            }
+            return true;
+        },
+        move(member, pointer, x) {
+            if (!owns(member, pointer) || !drag)
+                return;
+            member.adapter.apply({ ...member.adapter.snapshot(), [drag.id]: clampSize(drag.width + x - drag.x, member.adapter.bounds(drag.id)) });
+        },
+        end(member, pointer) {
+            if (owns(member, pointer))
+                finish(member.options.enabled === false || environment.isCompact(drag?.query));
+        },
+        cancel(member, pointer) { if (owns(member, pointer))
+            finish(true); },
+        reset(member, id) {
+            if (!members.has(member) || member.options.enabled === false || drag)
+                return false;
+            member.adapter.reset(id);
+            persist(member);
+            return true;
+        },
+        key(member, id, key, shift = false) {
+            if (!members.has(member) || member.options.enabled === false || drag)
+                return false;
+            if (key === 'Enter') {
+                member.adapter.reset(id);
+                persist(member);
+                return true;
+            }
+            const widths = member.adapter.snapshot();
+            const bounds = member.adapter.bounds(id);
+            const step = shift ? 40 : 16;
+            const next = key === 'ArrowLeft' ? widths[id] - step : key === 'ArrowRight' ? widths[id] + step : key === 'Home' ? bounds.minSize : key === 'End' ? bounds.maxSize : undefined;
+            if (next === undefined)
+                return false;
+            member.adapter.apply({ ...widths, [id]: clampSize(next, bounds) });
+            persist(member);
+            return true;
+        },
+    };
+}

package/dist/resize-dom.d.ts

@@ -0,0 +1,3 @@
+import type { ResizeEnvironment } from './resize-controller.js';
+/** Browser effects are installed only when a mounted hook retains a controller. */
+export declare const resizeEnvironment: ResizeEnvironment;

package/dist/resize-dom.js

@@ -0,0 +1,40 @@
+const activeClasses = new Map();
+function markDrag(name, delta) {
+    const count = Math.max(0, (activeClasses.get(name) || 0) + delta);
+    if (count)
+        activeClasses.set(name, count);
+    else
+        activeClasses.delete(name);
+    document.documentElement.classList.toggle(name, count > 0);
+}
+/** Browser effects are installed only when a mounted hook retains a controller. */
+export const resizeEnvironment = {
+    listenCancel(cancel) {
+        const escape = (event) => { if (event.key === 'Escape' && cancel())
+            event.preventDefault(); };
+        const blur = () => { cancel(); };
+        window.addEventListener('keydown', escape);
+        window.addEventListener('blur', blur);
+        return () => { window.removeEventListener('keydown', escape); window.removeEventListener('blur', blur); };
+    },
+    isCompact: query => !!(query && window.matchMedia(query).matches),
+    startGesture(target, pointer, className, query, cancel) {
+        target.focus();
+        target.setPointerCapture(pointer);
+        markDrag(className, 1);
+        const compact = query ? window.matchMedia(query) : undefined;
+        const change = () => { if (compact?.matches)
+            cancel(); };
+        compact?.addEventListener('change', change);
+        let released = false;
+        return () => {
+            if (released)
+                return;
+            released = true;
+            compact?.removeEventListener('change', change);
+            markDrag(className, -1);
+            if (target.hasPointerCapture(pointer))
+                target.releasePointerCapture(pointer);
+        };
+    },
+};

package/dist/resize-handle.d.ts

@@ -1,13 +1,4 @@
 import type { RowData } from '@tanstack/react-table';
-import type { ColumnResizeOptions } from './use-column-resize.js';
-import type { PuppertinoTableInstance } from './model.js';
-import type { Header } from '@tanstack/react-table';
-import { puppertinoTableFeatures } from './model.js';
-export interface ColumnResizeHandleProps<T extends RowData> {
-    table: PuppertinoTableInstance<T>;
-    header: Header<typeof puppertinoTableFeatures, T>;
-    /** Defaults to a string header or the stable column ID. */
-    label?: string;
-    options?: ColumnResizeOptions;
-}
+import type { ColumnResizeHandleProps } from './resize-types.js';
+export type { ColumnResizeHandleProps } from './resize-types.js';
 export declare function ColumnResizeHandle<T extends RowData>({ table, header, label, options }: ColumnResizeHandleProps<T>): import("react").JSX.Element | null;

package/dist/resize-persistence.d.ts

@@ -0,0 +1,3 @@
+import type { ResizeMember } from './resize-controller.js';
+/** Persist only completed operations; storage failure never prevents resizing. */
+export declare function persistResize({ adapter, options }: ResizeMember): void;

package/dist/resize-persistence.js

@@ -0,0 +1,8 @@
+/** Persist only completed operations; storage failure never prevents resizing. */
+export function persistResize({ adapter, options }) {
+    try {
+        if (options.storageKey)
+            (options.storage || localStorage).setItem(options.storageKey, JSON.stringify(adapter.snapshot()));
+    }
+    catch { /* Storage is optional. */ }
+}

package/dist/resize-types.d.ts

@@ -0,0 +1,16 @@
+import type { RowData, Header } from '@tanstack/react-table';
+import type { PuppertinoTableInstance, puppertinoTableFeatures } from './model.js';
+export interface ColumnResizeOptions {
+    enabled?: boolean;
+    storageKey?: string;
+    storage?: Pick<Storage, 'setItem'>;
+    cancelMediaQuery?: string;
+    dragClassName?: string;
+}
+export interface ColumnResizeHandleProps<T extends RowData> {
+    table: PuppertinoTableInstance<T>;
+    header: Header<typeof puppertinoTableFeatures, T>;
+    /** Defaults to a string header or the stable column ID. */
+    label?: string;
+    options?: ColumnResizeOptions;
+}

package/dist/resize-types.js

@@ -0,0 +1 @@
+export {};

package/dist/row-selection-checkbox.d.ts

@@ -0,0 +1,5 @@
+import type { RowData } from '@tanstack/react-table';
+import type { RowSelectionCheckboxProps } from './table-types.js';
+export type { RowSelectionCheckboxProps } from './table-types.js';
+/** Shared click/keyboard semantics, including Shift selection and row-event isolation. */
+export declare function RowSelectionCheckbox<T extends RowData>({ row, label, disabled }: RowSelectionCheckboxProps<T>): import("react").JSX.Element;

package/dist/row-selection-checkbox.js

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Shared click/keyboard semantics, including Shift selection and row-event isolation. */
+export function RowSelectionCheckbox({ row, label, disabled = false }) {
+    return _jsx("input", { type: "checkbox", "aria-label": `Select ${label ?? row.id}`, checked: row.getIsSelected(), disabled: disabled || !row.getCanSelect(), onClick: event => { event.stopPropagation(); row.getToggleSelectedHandler()(event); }, onChange: () => { } });
+}

package/dist/style.css

@@ -1,26 +1,32 @@
 /* Scoped enhancements; import Puppertino's table/color/control styles separately. */
 .pt-scroll { max-width: 100%; min-width: 0; overflow: auto; }
-.pt-scroll:focus-visible { outline: 2px solid var(--p-control-accent, #0069d9); outline-offset: 2px; }
-.pt-table { table-layout: fixed; padding: 0; border-collapse: collapse; }
-.pt-table thead { position: sticky; top: 0; z-index: 1; background: var(--p-window-bg, #fff); }
+.pt-scroll:focus-visible { outline: 2px solid var(--p-control-accent); outline-offset: 2px; }
+/* Puppertino owns separated borders, rounded stripes, font and cell spacing.
+   Keep secondary text contrast-safe while deriving it from the active theme. */
+.pt-table { --p-list-text-dim: var(--pt-table-secondary, color-mix(in srgb, var(--p-list-text) 85%, var(--p-window-bg, var(--p-bg-primary)))); table-layout: fixed; padding: 0; }
+.pt-table thead { position: sticky; top: 0; z-index: 1; background: var(--p-window-bg, var(--p-bg-primary)); }
 .pt-table th { position: relative; }
 .pt-table th[aria-sort]::before { display: none; }
 .pt-table :is(th, td) { box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; overflow-wrap: anywhere; }
-.pt-sort { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 4px; min-height: 28px; border: 0; background: none; padding: 0 10px 0 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
-.pt-sort:focus-visible { outline: 2px solid var(--p-control-accent, #0069d9); outline-offset: -2px; border-radius: 3px; }
-.pt-sort-arrow { flex: 0 0 10px; }
+.pt-sort { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 4px; min-height: 19px; border: 0; background: none; padding: 0 10px 0 0; font: inherit; color: inherit; text-align: inherit; cursor: pointer; }
+.pt-sort:focus-visible { outline: 2px solid var(--p-control-accent); outline-offset: -2px; border-radius: 3px; }
+.pt-sort-arrow { flex: 0 0 9px; color: var(--p-list-text-dim); font-size: 9px; font-weight: 510; }
+.p-table-num .pt-sort { justify-content: flex-end; }
 .pt-sort-arrow[data-direction=asc] { transform: rotate(180deg); }
 .pt-sort-arrow[data-direction=none] { visibility: hidden; }
 .pt-resizer { position: absolute; right: -5px; top: 0; bottom: 0; width: 12px; cursor: col-resize; touch-action: none; z-index: 2; }
-.pt-resizer::after { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--p-text-secondary, #666); opacity: .3; }
-.pt-resizer:hover::after, .pt-resizer:focus-visible::after { width: 2px; background: var(--p-control-accent, #0069d9); opacity: 1; }
-.pt-resizer:focus-visible { outline: 2px solid var(--p-control-accent, #0069d9); outline-offset: -2px; }
+.pt-resizer::after { content: ''; position: absolute; left: 5px; top: 4px; bottom: 8px; width: 1px; background: var(--p-table-divider); }
+.pt-resizer:hover::after, .pt-resizer:focus-visible::after { width: 2px; background: var(--p-control-accent); opacity: 1; }
+.pt-resizer:focus-visible { outline: 2px solid var(--p-control-accent); outline-offset: -2px; }
 .pt-resizing, .pt-resizing * { cursor: col-resize !important; user-select: none !important; }
 .pt-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
-/* Primary text contrast applies to every data column, including after selection. */
-.pt-table :is(th, td) { color: var(--pt-table-text, var(--p-list-text, #252525)); }
-.pt-table tr.p-selected td { background: var(--p-list-selection, #0069d9); color: var(--p-list-selection-text, #fff); }
-@media (forced-colors: active) { .pt-table tr.p-selected td { background: Highlight; color: HighlightText; } }
+/* Keep data text readable; native header colors indicate the active sort.
+   Match the hover selector so selected rows retain their Puppertino tint. */
+.pt-table td { color: var(--pt-table-text, var(--p-list-text)); }
+.pt-table td.pt-selection + td { color: var(--p-list-text); }
+.pt-table th.pt-selection + th::after { content: none; }
+.pt-table tbody tr.p-selected td { background: var(--p-list-selection); color: var(--p-list-selection-text); }
+@media (forced-colors: active) { .pt-table tbody tr.p-selected td { background: Highlight; color: HighlightText; } }
 
 .pt-table .pt-selection { padding: 0; text-align: center; overflow: visible; }
 .pt-table .pt-selection input { margin: 0; vertical-align: middle; }

package/dist/table-body.d.ts

@@ -0,0 +1,6 @@
+import type { RowData } from '@tanstack/react-table';
+import type { TableBodyProps } from './table-types.js';
+export type { TableBodyProps } from './table-types.js';
+declare function RenderTableBody<T extends RowData>({ table, selectable, disabled, getRowLabel, emptyContent, getRowProps, getCellProps, leadingRows }: TableBodyProps<T>): import("react").JSX.Element;
+/** Geometry updates do not rerender cells; data and table state changes still do. */
+export declare const TableBody: typeof RenderTableBody;

package/dist/table-body.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { memo } from 'react';
+import { RowSelectionCheckbox } from './row-selection-checkbox.js';
+function RenderTableBody({ table, selectable = false, disabled = false, getRowLabel, emptyContent = 'No rows', getRowProps, getCellProps, leadingRows }) {
+    const rows = table.getRowModel().rows;
+    const context = { table, selectable, disabled, columnCount: table.getAllLeafColumns().length + (selectable ? 1 : 0) };
+    return _jsxs("tbody", { children: [typeof leadingRows === 'function' ? leadingRows(table, context) : leadingRows, rows.length ? rows.map(row => {
+                const props = getRowProps?.(row, context);
+                const className = [row.getIsSelected() ? 'p-selected' : '', props?.className].filter(Boolean).join(' ') || undefined;
+                return _createElement("tr", { ...props, key: row.id, className: className },
+                    selectable && _jsx("td", { className: "pt-selection", children: _jsx(RowSelectionCheckbox, { row: row, label: getRowLabel?.(row.original), disabled: disabled }) }),
+                    row.getAllCells().map(cell => _createElement("td", { ...getCellProps?.(cell, context), key: cell.id },
+                        _jsx(table.FlexRender, { cell: cell }))));
+            }) : _jsx("tr", { children: _jsx("td", { colSpan: context.columnCount, children: emptyContent }) })] });
+}
+/** Geometry updates do not rerender cells; data and table state changes still do. */
+export const TableBody = memo(RenderTableBody);

package/dist/table-header.d.ts

@@ -0,0 +1,4 @@
+import type { RowData } from '@tanstack/react-table';
+import type { TableHeaderProps } from './table-types.js';
+export type { TableHeaderProps } from './table-types.js';
+export declare function TableHeader<T extends RowData>({ table, selectable, disabled, resizable, resizeOptions }: TableHeaderProps<T>): import("react").JSX.Element;

package/dist/table-header.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ColumnResizeHandle } from './resize-handle.js';
+export function TableHeader({ table, selectable = false, disabled = false, resizable = true, resizeOptions }) {
+    const groups = table.getHeaderGroups();
+    const options = { ...resizeOptions, enabled: resizable && !disabled && resizeOptions?.enabled !== false };
+    return _jsx("thead", { children: groups.map((group, index) => _jsxs("tr", { children: [selectable && index === 0 && _jsx("th", { className: "pt-selection", rowSpan: groups.length, scope: "col", children: _jsx("span", { className: "pt-sr-only", children: "Select rows" }) }), group.headers.map(header => {
+                    const column = header.column;
+                    const label = typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id;
+                    const sorted = column.getIsSorted();
+                    return _jsxs("th", { colSpan: header.colSpan, scope: column.columns.length === 0 ? 'col' : 'colgroup', "aria-sort": sorted ? sorted === 'asc' ? 'ascending' : 'descending' : undefined, children: [!header.isPlaceholder && (column.getCanSort() ? _jsxs("button", { type: "button", className: "pt-sort", "aria-label": `Sort by ${label}`, disabled: disabled, onClick: () => column.toggleSorting(), children: [_jsx(table.FlexRender, { header: header }), _jsx("span", { className: "pt-sort-arrow", "aria-hidden": "true", "data-direction": sorted || 'none', children: "\u2304" })] }) : _jsx(table.FlexRender, { header: header })), options.enabled && _jsx(ColumnResizeHandle, { table: table, header: header, label: label, options: options })] }, header.id);
+                })] }, group.id)) });
+}

package/dist/table-options.d.ts

@@ -0,0 +1,22 @@
+import type { RowData, SortingState, RowSelectionState, OnChangeFn } from '@tanstack/react-table';
+import type { PuppertinoColumnDef } from './model.js';
+/** Shared state contract for complete tables and custom layouts. */
+export interface PuppertinoTableOptions<T extends RowData> {
+    data: readonly T[];
+    columns: readonly PuppertinoColumnDef<T>[];
+    getRowId: (row: T, index: number) => string;
+    /** Omit for local state. Controlled state without a callback is read-only. */
+    sorting?: SortingState;
+    onSortingChange?: OnChangeFn<SortingState>;
+    /** Initial values apply only on mount to uncontrolled state. */
+    initialSorting?: SortingState;
+    initialRowSelection?: RowSelectionState;
+    /** Preserve host-owned order by default, including server-paginated data. */
+    manualSorting?: boolean;
+    rowSelection?: RowSelectionState;
+    onRowSelectionChange?: OnChangeFn<RowSelectionState>;
+    selectable?: boolean;
+    disabled?: boolean;
+    storageKey?: string;
+    storage?: Pick<Storage, 'getItem' | 'setItem'>;
+}

package/dist/table-options.js

@@ -0,0 +1 @@
+export {};

package/dist/table-types.d.ts

@@ -0,0 +1,52 @@
+import type { RowData, Row, Cell } from '@tanstack/react-table';
+import type { ReactNode, ComponentPropsWithoutRef } from 'react';
+import type { puppertinoTableFeatures, PuppertinoTableInstance } from './model.js';
+import type { PuppertinoTableOptions } from './table-options.js';
+import type { ColumnResizeOptions } from './resize-types.js';
+export type PuppertinoRow<T extends RowData> = Row<typeof puppertinoTableFeatures, T>;
+export type PuppertinoCell<T extends RowData> = Cell<typeof puppertinoTableFeatures, T>;
+export type PuppertinoDataAttributes = {
+    [key: `data-${string}`]: string | number | boolean | null | undefined;
+};
+export interface PuppertinoBodyContext<T extends RowData> {
+    table: PuppertinoTableInstance<T>;
+    /** Leaf columns plus the optional selection column. */
+    columnCount: number;
+    selectable: boolean;
+    disabled: boolean;
+}
+export type PuppertinoRowProps = PuppertinoDataAttributes & Omit<ComponentPropsWithoutRef<'tr'>, 'children' | 'dangerouslySetInnerHTML'>;
+export type PuppertinoCellProps = PuppertinoDataAttributes & Omit<ComponentPropsWithoutRef<'td'>, 'children' | 'dangerouslySetInnerHTML'>;
+export interface PuppertinoBodyOptions<T extends RowData> {
+    selectable?: boolean;
+    disabled?: boolean;
+    getRowLabel?: (row: T) => string;
+    emptyContent?: ReactNode;
+    getRowProps?: (row: PuppertinoRow<T>, context: PuppertinoBodyContext<T>) => PuppertinoRowProps | undefined;
+    getCellProps?: (cell: PuppertinoCell<T>, context: PuppertinoBodyContext<T>) => PuppertinoCellProps | undefined;
+    /** Semantic <tr> elements before data rows, including when data is empty. */
+    leadingRows?: ReactNode | ((table: PuppertinoTableInstance<T>, context: PuppertinoBodyContext<T>) => ReactNode);
+}
+export interface PuppertinoTableProps<T extends RowData> extends PuppertinoTableOptions<T>, PuppertinoBodyOptions<T> {
+    resizable?: boolean;
+    cancelMediaQuery?: string;
+    ariaLabel: string;
+    caption?: ReactNode;
+    className?: string;
+}
+export interface TableHeaderProps<T extends RowData> {
+    table: PuppertinoTableInstance<T>;
+    selectable?: boolean;
+    disabled?: boolean;
+    resizable?: boolean;
+    resizeOptions?: ColumnResizeOptions;
+}
+export interface TableBodyProps<T extends RowData> extends PuppertinoBodyOptions<T> {
+    table: PuppertinoTableInstance<T>;
+}
+export interface RowSelectionCheckboxProps<T extends RowData> {
+    row: PuppertinoRow<T>;
+    /** Row description without the "Select" prefix. Defaults to the stable ID. */
+    label?: string;
+    disabled?: boolean;
+}

package/dist/table-types.js

@@ -0,0 +1 @@
+export {};

package/dist/table.d.ts

@@ -1,32 +1,4 @@
-import type { RowData, Row, Cell } from '@tanstack/react-table';
-import { type ReactNode, type ComponentPropsWithoutRef } from 'react';
-import { puppertinoTableFeatures, type PuppertinoTableInstance } from './model.js';
-import { type PuppertinoTableOptions } from './use-puppertino-table.js';
-export type PuppertinoRow<T extends RowData> = Row<typeof puppertinoTableFeatures, T>;
-export type PuppertinoCell<T extends RowData> = Cell<typeof puppertinoTableFeatures, T>;
-export type PuppertinoDataAttributes = {
-    [key: `data-${string}`]: string | number | boolean | null | undefined;
-};
-export interface PuppertinoBodyContext<T extends RowData> {
-    table: PuppertinoTableInstance<T>;
-    /** Leaf columns plus the optional selection column. */
-    columnCount: number;
-    selectable: boolean;
-    disabled: boolean;
-}
-export type PuppertinoRowProps = PuppertinoDataAttributes & Omit<ComponentPropsWithoutRef<'tr'>, 'children' | 'dangerouslySetInnerHTML'>;
-export type PuppertinoCellProps = PuppertinoDataAttributes & Omit<ComponentPropsWithoutRef<'td'>, 'children' | 'dangerouslySetInnerHTML'>;
-export interface PuppertinoTableProps<T extends RowData> extends PuppertinoTableOptions<T> {
-    getRowLabel?: (row: T) => string;
-    resizable?: boolean;
-    cancelMediaQuery?: string;
-    ariaLabel: string;
-    caption?: ReactNode;
-    emptyContent?: ReactNode;
-    className?: string;
-    getRowProps?: (row: PuppertinoRow<T>, context: PuppertinoBodyContext<T>) => PuppertinoRowProps | undefined;
-    getCellProps?: (cell: PuppertinoCell<T>, context: PuppertinoBodyContext<T>) => PuppertinoCellProps | undefined;
-    /** Render semantic <tr> elements before data rows, including when data is empty. */
-    leadingRows?: ReactNode | ((table: PuppertinoTableInstance<T>, context: PuppertinoBodyContext<T>) => ReactNode);
-}
-export declare function PuppertinoTable<T extends RowData>({ data, columns, getRowId, sorting, onSortingChange, initialSorting, initialRowSelection, manualSorting, rowSelection: controlledSelection, onRowSelectionChange, getRowLabel, selectable, disabled, resizable, storageKey, storage, cancelMediaQuery, ariaLabel, caption, emptyContent, className, getRowProps, getCellProps, leadingRows }: PuppertinoTableProps<T>): import("react").JSX.Element;
+import type { RowData } from '@tanstack/react-table';
+import type { PuppertinoTableProps } from './table-types.js';
+export type { PuppertinoTableProps, PuppertinoRow, PuppertinoCell, PuppertinoRowProps, PuppertinoCellProps, PuppertinoDataAttributes, PuppertinoBodyContext } from './table-types.js';
+export declare function PuppertinoTable<T extends RowData>({ data, columns, getRowId, sorting, onSortingChange, initialSorting, initialRowSelection, manualSorting, rowSelection, onRowSelectionChange, getRowLabel, selectable, disabled, resizable, storageKey, storage, cancelMediaQuery, ariaLabel, caption, emptyContent, className, getRowProps, getCellProps, leadingRows }: PuppertinoTableProps<T>): import("react").JSX.Element;

package/dist/table.js

@@ -1,34 +1,10 @@
 "use client";
-import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo } from 'react';
 import { usePuppertinoTable } from './use-puppertino-table.js';
-import { useColumnResize } from './use-column-resize.js';
-export function PuppertinoTable({ data, columns, getRowId, sorting, onSortingChange, initialSorting, initialRowSelection, manualSorting = true, rowSelection: controlledSelection, onRowSelectionChange, getRowLabel, selectable = false, disabled = false, resizable = true, storageKey, storage, cancelMediaQuery, ariaLabel, caption, emptyContent = 'No rows', className = '', getRowProps, getCellProps, leadingRows }) {
+import { TableHeader } from './table-header.js';
+import { TableBody } from './table-body.js';
+export function PuppertinoTable({ data, columns, getRowId, sorting, onSortingChange, initialSorting, initialRowSelection, manualSorting = true, rowSelection, onRowSelectionChange, getRowLabel, selectable = false, disabled = false, resizable = true, storageKey, storage, cancelMediaQuery, ariaLabel, caption, emptyContent = 'No rows', className = '', getRowProps, getCellProps, leadingRows }) {
     const table = usePuppertinoTable({ data, columns, getRowId, sorting, onSortingChange, initialSorting, initialRowSelection, manualSorting,
-        rowSelection: controlledSelection, onRowSelectionChange, selectable, disabled, storageKey, storage });
-    const options = { enabled: resizable && !disabled, storageKey, storage, cancelMediaQuery };
-    const { handle } = useColumnResize(table, options);
-    const groups = table.getHeaderGroups();
-    return _jsx("div", { className: `pt-scroll ${className}`, tabIndex: 0, role: "region", "aria-label": `${ariaLabel} scroll area`, children: _jsx(table.Subscribe, { source: table.atoms.columnSizing, children: () => _jsxs("table", { className: "p-table pt-table", "aria-label": ariaLabel, style: { width: table.getTotalSize() + (selectable ? 36 : 0) }, children: [caption && _jsx("caption", { children: caption }), _jsxs("colgroup", { children: [selectable && _jsx("col", { style: { width: 36 } }), table.getAllLeafColumns().map(column => _jsx("col", { style: { width: column.getSize() } }, column.id))] }), _jsx("thead", { children: groups.map((group, index) => _jsxs("tr", { children: [selectable && index === 0 && _jsx("th", { className: "pt-selection", rowSpan: groups.length, scope: "col", children: _jsx("span", { className: "pt-sr-only", children: "Select rows" }) }), group.headers.map(header => {
-                                    const column = header.column;
-                                    const label = typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id;
-                                    const sorted = column.getIsSorted();
-                                    const leaf = column.columns.length === 0;
-                                    return _jsxs("th", { colSpan: header.colSpan, scope: leaf ? 'col' : 'colgroup', "aria-sort": sorted ? sorted === 'asc' ? 'ascending' : 'descending' : undefined, children: [!header.isPlaceholder && (column.getCanSort() ? _jsxs("button", { type: "button", className: "pt-sort", "aria-label": `Sort by ${label}`, disabled: disabled, onClick: () => column.toggleSorting(), children: [_jsx(table.FlexRender, { header: header }), _jsx("span", { className: "pt-sort-arrow", "aria-hidden": "true", "data-direction": sorted || 'none', children: "\u2304" })] }) : _jsx(table.FlexRender, { header: header })), leaf && !header.isPlaceholder && resizable && !disabled && _jsx("span", { className: "pt-resizer", role: "separator", tabIndex: 0, "aria-orientation": "vertical", "aria-label": `Resize ${label} column`, "aria-valuemin": column.columnDef.minSize, "aria-valuemax": column.columnDef.maxSize, "aria-valuenow": header.getSize(), "aria-valuetext": `${header.getSize()} pixels`, title: "Drag to resize. Double-click or Enter to reset. Arrows adjust width; Escape cancels a drag.", ...handle(column.id) })] }, header.id);
-                                })] }, group.id)) }), _jsx(MemoTableBody, { table: table, selectable: selectable, disabled: disabled, getRowLabel: getRowLabel, emptyContent: emptyContent, getRowProps: getRowProps, getCellProps: getCellProps, leadingRows: leadingRows })] }) }) });
+        rowSelection, onRowSelectionChange, selectable, disabled, storageKey, storage });
+    return _jsx("div", { className: `pt-scroll ${className}`, tabIndex: 0, role: "region", "aria-label": `${ariaLabel} scroll area`, children: _jsx(table.Subscribe, { source: table.atoms.columnSizing, children: () => _jsxs("table", { className: "p-table pt-table", "aria-label": ariaLabel, style: { width: table.getTotalSize() + (selectable ? 36 : 0) }, children: [caption && _jsx("caption", { children: caption }), _jsxs("colgroup", { children: [selectable && _jsx("col", { style: { width: 36 } }), table.getAllLeafColumns().map(column => _jsx("col", { style: { width: column.getSize() } }, column.id))] }), _jsx(TableHeader, { table: table, selectable: selectable, disabled: disabled, resizable: resizable, resizeOptions: { storageKey, storage, cancelMediaQuery } }), _jsx(TableBody, { table: table, selectable: selectable, disabled: disabled, getRowLabel: getRowLabel, emptyContent: emptyContent, getRowProps: getRowProps, getCellProps: getCellProps, leadingRows: leadingRows })] }) }) });
 }
-/** Geometry updates do not rerender cells. State and data changes still do. */
-function TableBody({ table, selectable, disabled, getRowLabel, emptyContent, getRowProps, getCellProps, leadingRows }) {
-    const rows = table.getRowModel().rows;
-    const context = { table, selectable, disabled, columnCount: table.getAllLeafColumns().length + (selectable ? 1 : 0) };
-    return _jsxs("tbody", { children: [typeof leadingRows === 'function' ? leadingRows(table, context) : leadingRows, rows.length ? rows.map(row => {
-                const props = getRowProps?.(row, context);
-                const className = [row.getIsSelected() ? 'p-selected' : '', props?.className].filter(Boolean).join(' ') || undefined;
-                return _createElement("tr", { ...props, key: row.id, className: className },
-                    selectable && _jsx("td", { className: "pt-selection", children: _jsx("input", { type: "checkbox", "aria-label": `Select ${getRowLabel?.(row.original) ?? row.id}`, checked: row.getIsSelected(), disabled: !row.getCanSelect(), onClick: event => { event.stopPropagation(); row.getToggleSelectedHandler()(event); }, onChange: () => { } }) }),
-                    row.getAllCells().map(cell => _createElement("td", { ...getCellProps?.(cell, context), key: cell.id },
-                        _jsx(table.FlexRender, { cell: cell }))));
-            }) : _jsx("tr", { children: _jsx("td", { colSpan: context.columnCount, children: emptyContent }) })] });
-}
-const MemoTableBody = memo(TableBody);

package/dist/use-column-resize.d.ts

@@ -1,13 +1,8 @@
 import type { RowData } from '@tanstack/react-table';
 import { type PointerEvent, type KeyboardEvent } from 'react';
 import type { PuppertinoTableInstance } from './model.js';
-export interface ColumnResizeOptions {
-    enabled?: boolean;
-    storageKey?: string;
-    storage?: Pick<Storage, 'setItem'>;
-    cancelMediaQuery?: string;
-    dragClassName?: string;
-}
+import type { ColumnResizeOptions } from './resize-types.js';
+export type { ColumnResizeOptions } from './resize-types.js';
 export declare function useColumnResize<T extends RowData>(table: PuppertinoTableInstance<T>, options?: ColumnResizeOptions): {
     handle: (id: string) => {
         onPointerDown: (event: PointerEvent<HTMLElement>) => void;

package/dist/use-column-resize.js

@@ -1,149 +1,44 @@
 "use client";
 import { useEffect, useRef } from 'react';
-import { clampSize } from './sizing.js';
-const activeClasses = new Map();
-function markDrag(name, delta) {
-    const count = Math.max(0, (activeClasses.get(name) || 0) + delta);
-    if (count)
-        activeClasses.set(name, count);
-    else
-        activeClasses.delete(name);
-    document.documentElement.classList.toggle(name, count > 0);
-}
-/** One gesture and one set of global listeners for each table's sizing store. */
-function createController() {
-    const members = new Set();
-    let drag = null;
-    const snapshot = (table) => Object.fromEntries(table.getAllLeafColumns().map(column => [column.id, column.getSize()]));
-    const bounds = (table, id) => {
-        const column = table.getColumn(id);
-        return { id, size: column.columnDef.size ?? 150, minSize: column.columnDef.minSize ?? 20, maxSize: column.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER };
-    };
-    const save = ({ table, options }) => {
-        try {
-            if (options.storageKey)
-                (options.storage || localStorage).setItem(options.storageKey, JSON.stringify(snapshot(table)));
-        }
-        catch { /* Storage is optional. */ }
-    };
-    const finish = (cancel = false) => {
-        const active = drag;
-        if (!active)
-            return;
-        drag = null;
-        active.removeMedia();
-        markDrag(active.className, -1);
-        if (active.target.hasPointerCapture(active.pointer))
-            active.target.releasePointerCapture(active.pointer);
-        active.member.table.setColumnSizing(cancel ? active.before : snapshot(active.member.table));
-        if (!cancel)
-            save(active.member);
-    };
-    const cancel = (event) => { if (event.key === 'Escape' && drag) {
-        event.preventDefault();
-        finish(true);
-    } };
-    const blur = () => finish(true);
-    const cancelMember = (member) => { if (drag?.member === member)
-        finish(true); };
-    return {
-        cancelMember,
-        retain(member) {
-            if (!members.size) {
-                window.addEventListener('keydown', cancel);
-                window.addEventListener('blur', blur);
-            }
-            members.add(member);
-            return () => {
-                cancelMember(member);
-                members.delete(member);
-                if (!members.size) {
-                    window.removeEventListener('keydown', cancel);
-                    window.removeEventListener('blur', blur);
-                }
-            };
-        },
-        handle(id, member) {
-            const reset = () => { member.table.getColumn(id).resetSize(); save(member); };
-            return {
-                onPointerDown: (event) => {
-                    const { table, options } = member;
-                    if (options.enabled === false || event.button !== 0 || drag || !members.has(member))
-                        return;
-                    const media = options.cancelMediaQuery ? window.matchMedia(options.cancelMediaQuery) : undefined;
-                    if (media?.matches)
-                        return;
-                    event.preventDefault();
-                    event.stopPropagation();
-                    event.currentTarget.focus();
-                    const before = snapshot(table);
-                    const modeChange = () => { if (media?.matches)
-                        finish(true); };
-                    drag = { member, id, x: event.clientX, width: before[id], before, target: event.currentTarget,
-                        pointer: event.pointerId, className: options.dragClassName ?? 'pt-resizing', media,
-                        removeMedia: () => media?.removeEventListener('change', modeChange) };
-                    media?.addEventListener('change', modeChange);
-                    event.currentTarget.setPointerCapture(event.pointerId);
-                    markDrag(drag.className, 1);
-                },
-                onPointerMove: (event) => {
-                    const active = drag;
-                    if (active?.member === member && active.pointer === event.pointerId) {
-                        const { table } = member;
-                        table.setColumnSizing({ ...snapshot(table), [active.id]: clampSize(active.width + event.clientX - active.x, bounds(table, active.id)) });
-                    }
-                },
-                onPointerUp: (event) => {
-                    if (drag?.member === member && event.pointerId === drag.pointer)
-                        finish(member.options.enabled === false || !!drag.media?.matches);
-                },
-                onPointerCancel: (event) => { if (drag?.member === member && event.pointerId === drag.pointer)
-                    finish(true); },
-                onLostPointerCapture: (event) => { if (drag?.member === member && event.pointerId === drag.pointer)
-                    finish(true); },
-                onDoubleClick: () => { if (member.options.enabled !== false && !drag)
-                    reset(); },
-                onKeyDown: (event) => {
-                    if (member.options.enabled === false || drag)
-                        return;
-                    if (event.key === 'Enter') {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        reset();
-                        return;
-                    }
-                    const { table } = member;
-                    const step = event.shiftKey ? 40 : 16;
-                    const widths = snapshot(table);
-                    const next = event.key === 'ArrowLeft' ? widths[id] - step : event.key === 'ArrowRight' ? widths[id] + step : event.key === 'Home' ? bounds(table, id).minSize : event.key === 'End' ? bounds(table, id).maxSize : undefined;
-                    if (next === undefined)
-                        return;
-                    event.preventDefault();
-                    event.stopPropagation();
-                    table.setColumnSizing({ ...widths, [id]: clampSize(next, bounds(table, id)) });
-                    save(member);
-                },
-            };
-        },
-    };
-}
-// The atom survives table wrapper rerenders. Weak keys allow discarded tables to be collected.
+import { createResizeController } from './resize-controller.js';
+import { resizeEnvironment } from './resize-dom.js';
+import { persistResize } from './resize-persistence.js';
 const controllers = new WeakMap();
 export function useColumnResize(table, options = {}) {
     const key = table.atoms.columnSizing;
     let controller = controllers.get(key);
     if (!controller) {
-        controller = createController();
+        controller = createResizeController(resizeEnvironment, persistResize);
         controllers.set(key, controller);
     }
-    const member = useRef({ table, options });
-    member.current.table = table;
-    member.current.options = options;
+    const adapter = {
+        snapshot: () => Object.fromEntries(table.getAllLeafColumns().map(column => [column.id, column.getSize()])),
+        bounds: (id) => {
+            const column = table.getColumn(id);
+            return { id, size: column.columnDef.size ?? 150, minSize: column.columnDef.minSize ?? 20, maxSize: column.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER };
+        },
+        apply: (widths) => table.setColumnSizing(widths),
+        reset: (id) => table.getColumn(id).resetSize(),
+    };
+    const member = useRef({ adapter, options });
+    // Update committed configuration before lifecycle registration or cancellation.
+    useEffect(() => { member.current.adapter = adapter; member.current.options = options; });
     useEffect(() => controller.retain(member.current), [controller]);
     useEffect(() => {
         if (options.enabled === false)
             controller.cancelMember(member.current);
         return () => controller.cancelMember(member.current);
     }, [controller, options.enabled, options.storageKey, options.storage, options.cancelMediaQuery, options.dragClassName]);
-    return { handle: (id) => controller.handle(id, member.current) };
+    const consume = (event) => { event.preventDefault(); event.stopPropagation(); };
+    return { handle: (id) => ({
+            onPointerDown: (event) => { if (controller.begin(member.current, id, event.clientX, event.pointerId, event.currentTarget, event.button))
+                consume(event); },
+            onPointerMove: (event) => controller.move(member.current, event.pointerId, event.clientX),
+            onPointerUp: (event) => controller.end(member.current, event.pointerId),
+            onPointerCancel: (event) => controller.cancel(member.current, event.pointerId),
+            onLostPointerCapture: (event) => controller.cancel(member.current, event.pointerId),
+            onDoubleClick: () => { controller.reset(member.current, id); },
+            onKeyDown: (event) => { if (controller.key(member.current, id, event.key, event.shiftKey))
+                consume(event); },
+        }) };
 }

package/dist/use-puppertino-table.d.ts

@@ -1,22 +1,6 @@
-import type { RowData, SortingState, RowSelectionState, OnChangeFn } from '@tanstack/react-table';
-import { type PuppertinoColumnDef, type PuppertinoTableInstance } from './model.js';
-export interface PuppertinoTableOptions<T extends RowData> {
-    data: readonly T[];
-    columns: readonly PuppertinoColumnDef<T>[];
-    getRowId: (row: T, index: number) => string;
-    /** Omit for local state. Supply a callback alongside controlled sorting to allow edits. */
-    sorting?: SortingState;
-    onSortingChange?: OnChangeFn<SortingState>;
-    initialSorting?: SortingState;
-    initialRowSelection?: RowSelectionState;
-    /** Preserve host-owned order by default, including server-paginated data. */
-    manualSorting?: boolean;
-    rowSelection?: RowSelectionState;
-    onRowSelectionChange?: OnChangeFn<RowSelectionState>;
-    selectable?: boolean;
-    disabled?: boolean;
-    storageKey?: string;
-    storage?: Pick<Storage, 'getItem' | 'setItem'>;
-}
+import type { RowData } from '@tanstack/react-table';
+import { type PuppertinoTableInstance } from './model.js';
+import type { PuppertinoTableOptions } from './table-options.js';
+export type { PuppertinoTableOptions } from './table-options.js';
 /** Shared state wiring for complete tables and custom semantic layouts. */
 export declare function usePuppertinoTable<T extends RowData>({ data, columns, getRowId, sorting: controlledSorting, onSortingChange, initialSorting, initialRowSelection, manualSorting, rowSelection: controlledSelection, onRowSelectionChange, selectable, disabled, storageKey, storage }: PuppertinoTableOptions<T>): PuppertinoTableInstance<T>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "puppertino-table",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "private": false,
   "publishConfig": {
     "access": "public",
@@ -45,7 +45,7 @@
   "peerDependencies": {
     "@codedgar/puppertino": "^2.0.0",
     "@tanstack/react-table": "9.2.8",
-    "react": ">=18"
+    "react": "^19.3.0"
   },
   "devDependencies": {
     "@codedgar/puppertino": "2.0.0",