puppertino-table 0.0.0-stage → 0.1.1

package/CHANGELOG.md

@@ -0,0 +1,19 @@
+# Changelog
+
+## 0.1.1 — 2026-10-12
+
+- Correct npm installation and publication-status documentation.
+- Add a guarded GitHub Release publishing workflow with exact tag, commit, version and tarball validation.
+- Run adversarial release-guard tests in CI and verify registry consumers after publishing.
+
+## 0.1.0 — 2026-10-12
+
+- Publish the requested unscoped `puppertino-table` package.
+- Restore pre-gesture widths when standalone resize controls unmount or their cancellation settings change.
+- Show standalone resize controls only on actual leaf headers, including grouped-header layouts.
+
+- Generic React table and typed column helpers powered by TanStack Table.
+- Controlled sorting and selection, optional local sorting, and Shift-click selection ranges.
+- Pointer and keyboard column resizing with bounds, cancellation and optional persistence.
+- Unbundled ESM, TypeScript declarations and a scoped Puppertino stylesheet.
+- Storybook 10 examples for grouped headers, alternate schemas, dark mode and table states.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 KahWee
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,122 @@
-# Temporary Holding Version
+# Puppertino Table
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A generic React table styled with [Puppertino](https://puppertino.com/) and powered by [TanStack Table](https://tanstack.com/table). Bring your own data, columns and cell renderers.
+
+- Typed column definitions for arbitrary row shapes, including grouped headers.
+- Host-controlled sorting by default, with optional local sorting.
+- Checkbox selection with Shift-click ranges and keyboard toggling.
+- Precise, bounded column resizing with optional browser-local persistence.
+- Sizing subscriptions isolated from the memoized row body.
+- Semantic tables, accessible resize separators and horizontal scrolling in narrow containers.
+- Storybook **10.6.1** with interactive examples and accessibility checks.
+
+## Install
+
+The package includes built ESM and TypeScript declarations. Install it from npm:
+
+```sh
+pnpm add puppertino-table@0.1.1 @tanstack/react-table@9.2.8 @codedgar/puppertino@2 react react-dom
+```
+
+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
+
+```tsx
+'use client';
+import { useState } from 'react';
+import type { SortingState } from '@tanstack/react-table';
+import { PuppertinoTable, createPuppertinoColumnHelper } from 'puppertino-table';
+import '@codedgar/puppertino/colors';
+import '@codedgar/puppertino/lists';
+import '@codedgar/puppertino/forms';
+import 'puppertino-table/style.css';
+
+type Item = { id: string; name: string; score: number };
+const helper = createPuppertinoColumnHelper<Item>();
+const columns = helper.columns([
+  helper.accessor('name', { header: 'Name', size: 240, minSize: 140, maxSize: 600 }),
+  helper.accessor('score', { header: 'Score', size: 100, cell: cell => cell.getValue() }),
+]);
+const items: Item[] = [{ id: 'a', name: 'Example', score: 82 }];
+
+export function Example() {
+  const [sorting, setSorting] = useState<SortingState>([]);
+  return (
+    <PuppertinoTable
+      data={items}
+      columns={columns}
+      getRowId={item => item.id}
+      getRowLabel={item => item.name}
+      ariaLabel="Items"
+      sorting={sorting}
+      onSortingChange={setSorting}
+      manualSorting={false}
+      selectable
+      storageKey="my-app.items.columns.v1"
+    />
+  );
+}
+```
+
+The example uses local sorting and uncontrolled checkbox selection. Pass both `rowSelection` and `onRowSelectionChange` for controlled selection. Controlled selection without a change callback is read-only. Keep column definitions and data references stable when possible.
+
+### Sorting and pagination
+
+`manualSorting` defaults to `true`: the table reports sort changes and renders rows in the order provided. Your caller can sort/filter/page locally or request data from any backend. The component makes no network calls, has no endpoint conventions, and does not treat a loaded page as the full dataset. Pagination controls belong to the caller. Use `manualSorting={false}` to let TanStack sort all supplied rows locally.
+
+### Resizing
+
+Drag a header's right edge. Double-click or Enter resets that column to its definition's initial size. Left/Right adjusts 16 pixels; Shift uses 40 pixels. Home/End reaches its limits, and Escape cancels an unfinished gesture. Pointer cancellation, losing window focus, unmounting, or disabling resizing also cancels.
+
+`storageKey` enables persistence; without it no preferences are stored. Supply `storage` to use a compatible storage adapter. Malformed values, unknown column IDs and blocked browser storage fall back safely. Use stable column IDs or string accessor keys. Change the component's React `key` when switching schemas or persistence keys so initialization reads the new configuration.
+
+`cancelMediaQuery` is optional: set it when your layout removes the table at a responsive breakpoint. A narrow table that remains visible can simply scroll horizontally.
+
+### Custom layouts
+
+Use `puppertinoTableFeatures`, `PuppertinoTableInstance`, `useColumnResize`, `ColumnResizeHandle`, and the sizing helpers with your own `useTable` instance. The features enable sorting, sizing and row selection. Subscribe to `table.atoms.columnSizing` around table geometry and keep the row body memoized. Optional hook settings let you choose persistence, a cancellation media query and a drag CSS class.
+
+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.
+
+## 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.
+
+Use Node 20.19+ or 22.12+ and pnpm 11.25.0.
+
+```sh
+pnpm install
+pnpm storybook       # http://localhost:6006
+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, and a different row schema with currency cells. Story controls expose selection, resizing, disabled state and sorting ownership.
+
+## Verification
+
+```sh
+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 twelve 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`.
+
+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.
+
+## npm releases
+
+The unscoped **`puppertino-table`** package is public on npm. Stable releases use the guarded GitHub Release workflow described in [RELEASING.md](https://github.com/kahwee/puppertino-table/blob/main/RELEASING.md), including verified package preparation and clean registry consumers.
+
+```sh
+pnpm check
+npm publish test-results/package/puppertino-table-0.1.1.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.
+
+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.
+
+## License
+
+MIT. Puppertino, React and TanStack Table remain independently maintained projects under their own licenses.

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { PuppertinoTable, type PuppertinoTableProps } from './table.js';
+export { createPuppertinoColumnHelper, puppertinoTableFeatures, type PuppertinoTableInstance, type PuppertinoColumnDef } from './model.js';
+export { useColumnResize, type ColumnResizeOptions } from './use-column-resize.js';
+export { ColumnResizeHandle } from './resize-handle.js';
+export { readColumnSizing, columnSizeBounds, clampSize, type ColumnSizeBounds } from './sizing.js';

package/dist/index.js

@@ -0,0 +1,5 @@
+export { PuppertinoTable } from './table.js';
+export { createPuppertinoColumnHelper, puppertinoTableFeatures } from './model.js';
+export { useColumnResize } from './use-column-resize.js';
+export { ColumnResizeHandle } from './resize-handle.js';
+export { readColumnSizing, columnSizeBounds, clampSize } from './sizing.js';

package/dist/model.d.ts

@@ -0,0 +1,19 @@
+import type { RowData } from '@tanstack/react-table';
+import { type ReactTable, type SortingState, type RowSelectionState, type ColumnDef } from '@tanstack/react-table';
+export declare const puppertinoTableFeatures: {
+    rowSortingFeature: import("@tanstack/react-table").TableFeature;
+    columnSizingFeature: import("@tanstack/react-table").TableFeature;
+    rowSelectionFeature: import("@tanstack/react-table").TableFeature;
+    sortedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+};
+export type PuppertinoTableInstance<T extends RowData> = ReactTable<typeof puppertinoTableFeatures, T, {
+    sorting: SortingState;
+    rowSelection: RowSelectionState;
+}>;
+export type PuppertinoColumnDef<T extends RowData> = ColumnDef<typeof puppertinoTableFeatures, T>;
+export declare function createPuppertinoColumnHelper<T extends RowData>(): import("@tanstack/react-table").ColumnHelper<{
+    rowSortingFeature: import("@tanstack/react-table").TableFeature;
+    columnSizingFeature: import("@tanstack/react-table").TableFeature;
+    rowSelectionFeature: import("@tanstack/react-table").TableFeature;
+    sortedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+}, T>;

package/dist/model.js

@@ -0,0 +1,3 @@
+import { createColumnHelper, createSortedRowModel, tableFeatures, rowSortingFeature, columnSizingFeature, rowSelectionFeature } from '@tanstack/react-table';
+export const puppertinoTableFeatures = tableFeatures({ rowSortingFeature, columnSizingFeature, rowSelectionFeature, sortedRowModel: createSortedRowModel() });
+export function createPuppertinoColumnHelper() { return createColumnHelper(); }

package/dist/resize-handle.d.ts

@@ -0,0 +1,11 @@
+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 declare function ColumnResizeHandle<T extends RowData>({ table, header, label, options }: {
+    table: PuppertinoTableInstance<T>;
+    header: Header<typeof puppertinoTableFeatures, T>;
+    label: string;
+    options?: ColumnResizeOptions;
+}): import("react").JSX.Element | null;

package/dist/resize-handle.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useColumnResize } from './use-column-resize.js';
+export function ColumnResizeHandle({ table, header, label, options }) {
+    const { handle } = useColumnResize(table, options);
+    if (options?.enabled === false || header.isPlaceholder || header.column.columns.length > 0)
+        return null;
+    return _jsx("span", { className: "pt-resizer", role: "separator", tabIndex: 0, "aria-orientation": "vertical", "aria-label": `Resize ${label} column`, "aria-valuemin": header.column.columnDef.minSize ?? 20, "aria-valuemax": header.column.columnDef.maxSize ?? 1200, "aria-valuenow": header.getSize(), "aria-valuetext": `${header.getSize()} pixels`, title: "Drag to resize. Double-click or Enter to reset. Arrow keys adjust width; Escape cancels a drag.", ...handle(header.column.id) });
+}

package/dist/sizing.d.ts

@@ -0,0 +1,21 @@
+import type { ColumnSizingState } from '@tanstack/react-table';
+export interface ColumnSizeBounds {
+    id: string;
+    size: number;
+    minSize: number;
+    maxSize: number;
+}
+export declare function clampSize(value: unknown, bounds: ColumnSizeBounds): number;
+/** Unknown/stale column IDs and nonnumeric preferences never enter table state. */
+export declare function readColumnSizing(bounds: readonly ColumnSizeBounds[], key?: string, storage?: Pick<Storage, 'getItem'>): ColumnSizingState;
+/** Stable IDs keep stored widths independent of translated header labels. */
+interface SizingDefinition {
+    id?: string;
+    accessorKey?: unknown;
+    size?: number;
+    minSize?: number;
+    maxSize?: number;
+    columns?: readonly SizingDefinition[];
+}
+export declare function columnSizeBounds(columns: readonly SizingDefinition[]): ColumnSizeBounds[];
+export {};

package/dist/sizing.js

@@ -0,0 +1,31 @@
+export function clampSize(value, bounds) {
+    return typeof value === 'number' && Number.isFinite(value) ? Math.max(bounds.minSize, Math.min(bounds.maxSize, Math.round(value))) : bounds.size;
+}
+/** Unknown/stale column IDs and nonnumeric preferences never enter table state. */
+export function readColumnSizing(bounds, key, storage) {
+    let saved = {};
+    try {
+        const value = key ? JSON.parse(storage?.getItem(key) || '{}') : {};
+        if (value && typeof value === 'object' && !Array.isArray(value))
+            saved = value;
+    }
+    catch { /* Unavailable or malformed storage uses defaults. */ }
+    return Object.fromEntries(bounds.map(bound => [bound.id, clampSize(saved[bound.id], bound)]));
+}
+export function columnSizeBounds(columns) {
+    const flatten = (defs) => defs.flatMap(column => column.columns ? flatten(column.columns) : [column]);
+    const leaves = flatten(columns);
+    const ids = new Set();
+    return leaves.map(column => {
+        const id = column.id ?? (typeof column.accessorKey === 'string' ? column.accessorKey.replaceAll('.', '_') : undefined);
+        if (!id || ids.has(id))
+            throw new Error('Every leaf column needs a unique stable id or accessorKey.');
+        ids.add(id);
+        const minSize = column.minSize ?? 20;
+        const maxSize = column.maxSize ?? 1200;
+        if (!Number.isFinite(minSize) || !Number.isFinite(maxSize) || minSize <= 0 || maxSize < minSize)
+            throw new Error(`Invalid width bounds for ${id}.`);
+        const size = clampSize(column.size ?? 150, { id, size: Math.max(minSize, Math.min(maxSize, 150)), minSize, maxSize });
+        return { id, size, minSize, maxSize };
+    });
+}

package/dist/style.css

@@ -0,0 +1,26 @@
+/* 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-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-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-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; } }
+
+.pt-table .pt-selection { padding: 0; text-align: center; overflow: visible; }
+.pt-table .pt-selection input { margin: 0; vertical-align: middle; }

package/dist/table.d.ts

@@ -0,0 +1,27 @@
+import type { RowData } from '@tanstack/react-table';
+import { type ReactNode } from 'react';
+import { type SortingState, type RowSelectionState, type OnChangeFn } from '@tanstack/react-table';
+import { type PuppertinoColumnDef } from './model.js';
+export interface PuppertinoTableProps<T extends RowData> {
+    data: readonly T[];
+    columns: readonly PuppertinoColumnDef<T>[];
+    getRowId: (row: T, index: number) => string;
+    sorting: SortingState;
+    onSortingChange: OnChangeFn<SortingState>;
+    /** True for server-owned order/pagination; false enables local TanStack sorting. */
+    manualSorting?: boolean;
+    rowSelection?: RowSelectionState;
+    onRowSelectionChange?: OnChangeFn<RowSelectionState>;
+    getRowLabel?: (row: T) => string;
+    selectable?: boolean;
+    disabled?: boolean;
+    resizable?: boolean;
+    storageKey?: string;
+    storage?: Pick<Storage, 'getItem' | 'setItem'>;
+    cancelMediaQuery?: string;
+    ariaLabel: string;
+    caption?: ReactNode;
+    emptyContent?: ReactNode;
+    className?: string;
+}
+export declare function PuppertinoTable<T extends RowData>({ data, columns, getRowId, sorting, onSortingChange, manualSorting, rowSelection: controlledSelection, onRowSelectionChange, getRowLabel, selectable, disabled, resizable, storageKey, storage, cancelMediaQuery, ariaLabel, caption, emptyContent, className }: PuppertinoTableProps<T>): import("react").JSX.Element;

package/dist/table.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useMemo, useState } from 'react';
+import { useTable } from '@tanstack/react-table';
+import { puppertinoTableFeatures } from './model.js';
+import { columnSizeBounds, readColumnSizing } from './sizing.js';
+import { useColumnResize } from './use-column-resize.js';
+export function PuppertinoTable({ data, columns, getRowId, sorting, onSortingChange, manualSorting = true, rowSelection: controlledSelection, onRowSelectionChange, getRowLabel, selectable = false, disabled = false, resizable = true, storageKey, storage, cancelMediaQuery, ariaLabel, caption, emptyContent = 'No rows', className = '' }) {
+    const [localSelection, setLocalSelection] = useState({});
+    const rowSelection = controlledSelection ?? localSelection;
+    const canSelect = selectable && !disabled && (controlledSelection === undefined || !!onRowSelectionChange);
+    const bounds = useMemo(() => columnSizeBounds(columns), [columns]);
+    const sizedColumns = useMemo(() => {
+        const byId = new Map(bounds.map(bound => [bound.id, bound]));
+        const decorate = (defs) => defs.map(def => {
+            if ('columns' in def && def.columns)
+                return { ...def, columns: decorate(def.columns) };
+            const id = def.id ?? ('accessorKey' in def ? String(def.accessorKey).replaceAll('.', '_') : '');
+            return { ...def, ...byId.get(id) };
+        });
+        return decorate(columns);
+    }, [columns, bounds]);
+    const [initialWidths] = useState(() => {
+        try {
+            return readColumnSizing(bounds, storageKey, storage || localStorage);
+        }
+        catch {
+            return readColumnSizing(bounds);
+        }
+    });
+    const table = useTable({ features: puppertinoTableFeatures, columns: sizedColumns, data, getRowId,
+        manualSorting, enableMultiSort: false, enableSortingRemoval: false, enableRowSelection: canSelect,
+        enableSubRowSelection: false, initialState: { columnSizing: initialWidths },
+        state: { sorting, rowSelection }, onSortingChange, onRowSelectionChange: onRowSelectionChange ?? setLocalSelection,
+    }, state => ({ sorting: state.sorting, rowSelection: state.rowSelection }));
+    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, getRowLabel: getRowLabel, emptyContent: emptyContent })] }) }) });
+}
+/** Geometry updates do not rerender cells. State and data changes still do. */
+function TableBody({ table, selectable, getRowLabel, emptyContent }) {
+    const rows = table.getRowModel().rows;
+    return _jsx("tbody", { children: rows.length ? rows.map(row => _jsxs("tr", { className: row.getIsSelected() ? 'p-selected' : undefined, children: [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 => _jsx("td", { children: _jsx(table.FlexRender, { cell: cell }) }, cell.id))] }, row.id)) : _jsx("tr", { children: _jsx("td", { colSpan: table.getAllLeafColumns().length + (selectable ? 1 : 0), children: emptyContent }) }) });
+}
+const MemoTableBody = memo(TableBody);

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

@@ -0,0 +1,21 @@
+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;
+}
+export declare function useColumnResize<T extends RowData>(table: PuppertinoTableInstance<T>, { enabled, storageKey, storage, cancelMediaQuery, dragClassName }?: ColumnResizeOptions): {
+    handle: (id: string) => {
+        onPointerDown: (event: PointerEvent<HTMLElement>) => void;
+        onPointerMove: (event: PointerEvent<HTMLElement>) => void;
+        onPointerUp: (event: PointerEvent<HTMLElement>) => void;
+        onPointerCancel: (event: PointerEvent<HTMLElement>) => void;
+        onLostPointerCapture: (event: PointerEvent<HTMLElement>) => void;
+        onDoubleClick: () => void;
+        onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+    };
+};

package/dist/use-column-resize.js

@@ -0,0 +1,115 @@
+"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);
+}
+export function useColumnResize(table, { enabled = true, storageKey, storage, cancelMediaQuery, dragClassName = "pt-resizing" } = {}) {
+    const 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 };
+    };
+    const clamp = (id, value) => clampSize(value, bounds(id));
+    const snapshot = () => Object.fromEntries(table.getAllLeafColumns().map(column => [column.id, column.getSize()]));
+    const save = () => { try {
+        if (storageKey)
+            (storage || localStorage).setItem(storageKey, JSON.stringify(snapshot()));
+    }
+    catch { /* Resizing still works without storage. */ } };
+    const reset = (id) => { table.getColumn(id).resetSize(); save(); };
+    const drag = useRef(null);
+    const apply = (next, persist = false) => {
+        table.setColumnSizing(next);
+        if (persist)
+            save();
+    };
+    const finish = (cancel = false) => {
+        const active = drag.current;
+        if (!active)
+            return;
+        drag.current = null;
+        markDrag(dragClassName, -1);
+        if (active.target.hasPointerCapture(active.pointer))
+            active.target.releasePointerCapture(active.pointer);
+        apply(cancel ? active.before : snapshot(), !cancel);
+    };
+    useEffect(() => { if (!enabled)
+        finish(true); }, [enabled]);
+    useEffect(() => {
+        const cancel = (event) => { if (event.key === 'Escape' && drag.current) {
+            event.preventDefault();
+            finish(true);
+        } };
+        const blur = () => finish(true);
+        const compact = cancelMediaQuery ? window.matchMedia(cancelMediaQuery) : undefined;
+        const modeChange = () => { if (compact?.matches)
+            finish(true); };
+        compact?.addEventListener("change", modeChange);
+        window.addEventListener('keydown', cancel);
+        window.addEventListener('blur', blur);
+        return () => {
+            compact?.removeEventListener("change", modeChange);
+            window.removeEventListener('keydown', cancel);
+            window.removeEventListener('blur', blur);
+            // Never save a gesture interrupted by route or display-mode changes.
+            const active = drag.current;
+            drag.current = null;
+            if (active)
+                markDrag(dragClassName, -1);
+            if (active?.target.hasPointerCapture(active.pointer))
+                active.target.releasePointerCapture(active.pointer);
+            if (active)
+                table.setColumnSizing(active.before);
+        };
+    }, [table.atoms.columnSizing, cancelMediaQuery, dragClassName]);
+    return { handle: (id) => ({
+            onPointerDown: (event) => {
+                if (!enabled || event.button !== 0 || drag.current)
+                    return;
+                event.preventDefault();
+                event.stopPropagation();
+                event.currentTarget.focus();
+                const before = snapshot();
+                drag.current = { id, x: event.clientX, width: before[id], before, target: event.currentTarget, pointer: event.pointerId };
+                event.currentTarget.setPointerCapture(event.pointerId);
+                markDrag(dragClassName, 1);
+            },
+            onPointerMove: (event) => {
+                const active = drag.current;
+                if (active && active.pointer === event.pointerId)
+                    apply({ ...snapshot(), [active.id]: clamp(active.id, active.width + event.clientX - active.x) });
+            },
+            onPointerUp: (event) => { if (event.pointerId === drag.current?.pointer)
+                finish(!enabled || !!(cancelMediaQuery && window.matchMedia(cancelMediaQuery).matches)); },
+            onPointerCancel: (event) => { if (event.pointerId === drag.current?.pointer)
+                finish(true); },
+            onLostPointerCapture: (event) => { if (event.pointerId === drag.current?.pointer)
+                finish(true); },
+            onDoubleClick: () => { if (enabled)
+                reset(id); },
+            onKeyDown: (event) => {
+                if (!enabled || drag.current)
+                    return;
+                if (event.key === "Enter") {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    reset(id);
+                    return;
+                }
+                const step = event.shiftKey ? 40 : 16;
+                const widths = snapshot();
+                const next = event.key === 'ArrowLeft' ? widths[id] - step : event.key === 'ArrowRight' ? widths[id] + step : event.key === 'Home' ? bounds(id).minSize : event.key === 'End' ? bounds(id).maxSize : undefined;
+                if (next === undefined)
+                    return;
+                event.preventDefault();
+                event.stopPropagation();
+                apply({ ...snapshot(), [id]: clamp(id, next) }, true);
+            },
+        }) };
+}

package/package.json

@@ -1,6 +1,85 @@
 {
   "name": "puppertino-table",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "private": false,
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "type": "module",
+  "license": "MIT",
+  "description": "Accessible Puppertino React tables backed by TanStack Table sizing, sorting and selection.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kahwee/puppertino-table.git"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "build": "node scripts/build.mjs",
+    "build:demo": "vite build",
+    "typecheck": "tsc --noEmit",
+    "test": "tsx --test tests/*.test.ts && node --test tests/release.test.mjs",
+    "test:browser": "tsx scripts/check-browser.ts",
+    "check": "pnpm typecheck && pnpm test && pnpm build && pnpm build:demo && pnpm build:storybook && pnpm test:browser && pnpm test:package",
+    "storybook": "storybook dev -p 6006 --no-open",
+    "build:storybook": "storybook build --disable-telemetry",
+    "prepack": "node scripts/build.mjs",
+    "test:package": "node scripts/check-package.mjs"
+  },
+  "peerDependencies": {
+    "@codedgar/puppertino": "^2.0.0",
+    "@tanstack/react-table": "9.2.8",
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@codedgar/puppertino": "2.0.0",
+    "@storybook/addon-a11y": "10.6.1",
+    "@storybook/addon-docs": "10.6.1",
+    "@storybook/react-vite": "10.6.1",
+    "@tanstack/react-table": "9.2.8",
+    "@types/node": "^26.6.5",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "axe-core": "4.14.0",
+    "playwright": "^1.64.0",
+    "react": "19.3.0",
+    "react-dom": "19.3.0",
+    "storybook": "10.6.1",
+    "tsx": "^4.23.15",
+    "typescript": "^7.0.2",
+    "vite": "^8.3.4"
+  },
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
+  "packageManager": "pnpm@11.25.0",
+  "homepage": "https://kahwee.github.io/puppertino-table/",
+  "bugs": {
+    "url": "https://github.com/kahwee/puppertino-table/issues"
+  },
+  "keywords": [
+    "react",
+    "table",
+    "tanstack",
+    "puppertino",
+    "accessible",
+    "resizable",
+    "typescript"
+  ]
+}