@protobase/ui 0.21.1 → 0.21.3

package/dist/app/related-section.js

@@ -1,13 +1,17 @@
 import { Skeleton } from "../primitives/skeleton.js";
 import { keys } from "../data/query-keys.js";
 import { useClient } from "../data/api-provider.js";
-import { useAdminMeta } from "./meta-gate.js";
+import { useAdminMeta, usePermissions } from "./meta-gate.js";
 import { Section } from "../record-view/section.js";
 import { ErrorBanner } from "./error-banner.js";
 import { listColumnNames } from "../live/columns-from-model.js";
 import { EmbeddedDisplaySwitch, EmbeddedList } from "./embedded-list/embedded-list.js";
 import { useEmbeddedDisplay } from "./embedded-list/use-embedded-display.js";
-import { jsx } from "react/jsx-runtime";
+import { relatedHandOrder } from "./hand-order/hand-order.js";
+import { HandSortedList } from "./hand-order/hand-sorted-list.js";
+import { SortButton } from "./hand-order/sort-button.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useQuery } from "@tanstack/react-query";
 import { createWhere, printFilter } from "@protobase/schema";
 //#region src/app/related-section.tsx
@@ -67,7 +71,8 @@ const Empty = ({ text }) => /* @__PURE__ */ jsx("p", {
 });
 /**
 * A record page section listing the first records of another resource that point at this record, directly or through
-* a join resource, in the list page's table or display, with a link to them all in the list.
+* a join resource, in the list page's table or display, with a link to them all in the list. When they are ordered by
+* hand within this record, **Sort** shows them all in their order, to be moved by their drag handles.
 */
 const RelatedSection = ({ item, recordKey, owner }) => {
 	const { resources, views } = useAdminMeta();
@@ -75,16 +80,40 @@ const RelatedSection = ({ item, recordKey, owner }) => {
 	const view = model && views[model.name];
 	const match = useMatch(item, recordKey);
 	const [display, pick] = useEmbeddedDisplay(view, `related:${owner}:${item.title}`, item.display);
+	const permissions = usePermissions(item.resource);
+	const [sorting, setSorting] = useState(false);
 	if (!model) return null;
 	const columns = item.columns ?? listColumnNames(model, view).filter((name) => name !== item.field);
-	return /* @__PURE__ */ jsx(Section, {
+	const handOrder = relatedHandOrder(item, model, permissions);
+	const displaySwitch = /* @__PURE__ */ jsx(EmbeddedDisplaySwitch, {
+		view,
+		value: display,
+		onChange: pick
+	});
+	const actions = handOrder ? /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2",
+		children: [!sorting && displaySwitch, /* @__PURE__ */ jsx(SortButton, {
+			size: "sm",
+			sorting,
+			onChange: setSorting
+		})]
+	}) : displaySwitch;
+	if (sorting && handOrder) return /* @__PURE__ */ jsx(Section, {
 		title: item.title,
 		help: item.help,
-		actions: /* @__PURE__ */ jsx(EmbeddedDisplaySwitch, {
+		actions,
+		children: /* @__PURE__ */ jsx(HandSortedList, {
+			model,
 			view,
-			value: display,
-			onChange: pick
-		}),
+			field: handOrder,
+			filter: printFilter(where$1.eq(item.field, recordKey)),
+			columns
+		})
+	});
+	return /* @__PURE__ */ jsx(Section, {
+		title: item.title,
+		help: item.help,
+		actions,
 		children: match.isPending ? /* @__PURE__ */ jsx(Loading, {}) : match.error ? /* @__PURE__ */ jsx(ErrorBanner, {
 			title: "Could not load",
 			error: match.error

package/dist/data-grid/cell-text.js

@@ -0,0 +1,30 @@
+import { formatMoney } from "../format/money.js";
+import { formatInt, formatPercent, formatSigned } from "../format/number.js";
+import { formatDate, formatDateTime } from "../format/date.js";
+import { userById } from "../mocks/users.js";
+import { fileShown } from "../live/file-values.js";
+import { enumLabel } from "@protobase/schema";
+//#region src/data-grid/cell-text.ts
+/** A relation cell's text: the related record's name when the row carries it, else its key. */
+const relationLabel = (value) => typeof value === "object" && value !== null && "name" in value ? String(value.name) : String(value);
+/** The text a cell of `spec` shows for `value`; `undefined` when it shows only an icon, such as a ticked boolean. */
+const cellText = (spec, value) => {
+	if (value === null || value === void 0) return "—";
+	switch (spec.kind) {
+		case "text":
+		case "id": return String(value);
+		case "money": return `${formatMoney(Number(value), spec.currency, spec.decimals)}${spec.suffix ?? ""}`;
+		case "date": return formatDate(Number(value));
+		case "datetime": return formatDateTime(Number(value));
+		case "number": return `${formatInt(Number(value))}${spec.suffix ?? ""}`;
+		case "signed": return `${formatSigned(Number(value))}${spec.suffix ?? ""}`;
+		case "percent": return Number(value) === 0 ? "—" : formatPercent(Number(value));
+		case "status": return enumLabel(String(value), spec.labels);
+		case "relation": return relationLabel(value);
+		case "boolean": return value ? void 0 : "No";
+		case "file": return fileShown(value)?.name ?? "—";
+		case "user": return userById(String(value)).name;
+	}
+};
+//#endregion
+export { cellText, relationLabel };

package/dist/data-grid/cells.js

@@ -1,66 +1,61 @@
 import { cn } from "../lib/cn.js";
 import { Avatar } from "../primitives/avatar.js";
 import { Badge } from "../primitives/badge.js";
-import { formatMoney } from "../format/money.js";
-import { formatInt, formatPercent, formatSigned } from "../format/number.js";
-import { formatDate, formatDateTime } from "../format/date.js";
 import { userById } from "../mocks/users.js";
 import { fileShown, shownImage } from "../live/file-values.js";
+import { cellText } from "./cell-text.js";
 import { FileImage } from "../live/file-image.js";
 import { valueColor } from "../live/value-color.js";
+import { TruncatedText } from "./truncated-text.js";
 import { Check, Paperclip } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { enumLabel } from "@protobase/schema";
 //#region src/data-grid/cells.tsx
 const muted = (text) => /* @__PURE__ */ jsx("span", {
 	className: "text-faint-foreground",
 	children: text
 });
-const relationLabel = (value) => typeof value === "object" && value !== null && "name" in value ? String(value.name) : String(value);
 const renderCell = (spec, value) => {
 	if (value === null || value === void 0) return muted("—");
+	const text = cellText(spec, value) ?? "";
 	switch (spec.kind) {
-		case "text": return /* @__PURE__ */ jsx("span", {
-			className: "truncate",
-			children: String(value)
+		case "text": return /* @__PURE__ */ jsx(TruncatedText, { text });
+		case "id": return /* @__PURE__ */ jsx(TruncatedText, {
+			text,
+			className: "font-mono text-xs text-muted-foreground"
 		});
-		case "id": return /* @__PURE__ */ jsx("span", {
-			className: "truncate font-mono text-xs text-muted-foreground",
-			children: String(value)
-		});
-		case "money": return /* @__PURE__ */ jsxs("span", {
+		case "money": return /* @__PURE__ */ jsx("span", {
 			className: "tabular-nums",
-			children: [formatMoney(Number(value), spec.currency, spec.decimals), spec.suffix]
+			children: text
 		});
 		case "date": return /* @__PURE__ */ jsx("span", {
 			className: "tabular-nums text-muted-foreground",
-			children: formatDate(Number(value))
+			children: text
 		});
 		case "datetime": return /* @__PURE__ */ jsx("span", {
 			className: "tabular-nums text-muted-foreground",
-			children: formatDateTime(Number(value))
+			children: text
 		});
-		case "number": return /* @__PURE__ */ jsxs("span", {
+		case "number": return /* @__PURE__ */ jsx("span", {
 			className: "tabular-nums",
-			children: [formatInt(Number(value)), spec.suffix]
+			children: text
 		});
-		case "signed": return /* @__PURE__ */ jsxs("span", {
+		case "signed": return /* @__PURE__ */ jsx("span", {
 			className: cn("tabular-nums", Number(value) < 0 ? "text-danger-text" : "text-success-text"),
-			children: [formatSigned(Number(value)), spec.suffix]
+			children: text
 		});
 		case "percent": return Number(value) === 0 ? muted("—") : /* @__PURE__ */ jsx("span", {
 			className: "tabular-nums",
-			children: formatPercent(Number(value))
+			children: text
 		});
 		case "status": return /* @__PURE__ */ jsx(Badge, {
 			tone: spec.tones?.[String(value)] ?? "neutral",
 			color: valueColor(spec.colors, value),
 			shape: spec.shape,
-			children: enumLabel(String(value), spec.labels)
+			children: text
 		});
-		case "relation": return /* @__PURE__ */ jsx("span", {
-			className: "truncate font-medium text-primary-text hover:underline",
-			children: relationLabel(value)
+		case "relation": return /* @__PURE__ */ jsx(TruncatedText, {
+			text,
+			className: "font-medium text-primary-text hover:underline"
 		});
 		case "boolean": return value ? /* @__PURE__ */ jsx("span", {
 			className: "inline-flex size-4 items-center justify-center rounded-full bg-success-soft text-success-text",
@@ -72,9 +67,9 @@ const renderCell = (spec, value) => {
 		case "file": {
 			const file = fileShown(value);
 			if (!file) return muted("—");
-			if ("missing" in file) return /* @__PURE__ */ jsx("span", {
-				className: "truncate text-danger-text",
-				children: file.name
+			if ("missing" in file) return /* @__PURE__ */ jsx(TruncatedText, {
+				text: file.name,
+				className: "text-danger-text"
 			});
 			const image = shownImage(value, {
 				width: 20,
@@ -85,10 +80,7 @@ const renderCell = (spec, value) => {
 				children: [image ? /* @__PURE__ */ jsx(FileImage, {
 					image,
 					className: "size-5 shrink-0 rounded-sm object-cover"
-				}) : /* @__PURE__ */ jsx(Paperclip, { className: "size-3.5 shrink-0 text-muted-foreground" }), /* @__PURE__ */ jsx("span", {
-					className: "truncate",
-					children: file.name
-				})]
+				}) : /* @__PURE__ */ jsx(Paperclip, { className: "size-3.5 shrink-0 text-muted-foreground" }), /* @__PURE__ */ jsx(TruncatedText, { text: file.name })]
 			});
 		}
 		case "user": {
@@ -100,9 +92,9 @@ const renderCell = (spec, value) => {
 					hue: user.hue,
 					size: "xs",
 					className: "ring-0"
-				}), /* @__PURE__ */ jsx("span", {
-					className: "truncate text-muted-foreground",
-					children: user.name
+				}), /* @__PURE__ */ jsx(TruncatedText, {
+					text: user.name,
+					className: "text-muted-foreground"
 				})]
 			});
 		}

package/dist/data-grid/content-widths.js

@@ -0,0 +1,81 @@
+import { cellText } from "./cell-text.js";
+//#region src/data-grid/content-widths.ts
+/** Room for a header at 12px plus cell padding, the sort arrow and the column menu button. */
+const headerWidth = (header, sortable) => Math.ceil(header.length * 7.2) + 24 + (sortable ? 16 : 0) + 28;
+/** A status badge: dot, padding and the longest label. */
+const badgeWidth = (labels) => Math.ceil(Math.max(0, ...labels.map((label) => label.length)) * 7.2) + 56;
+/** Pixels per character: body text, the small monospace of identifiers, and tabular numbers. */
+const charWidth = {
+	body: 7.5,
+	mono: 7.2,
+	numeric: 8
+};
+const cellPadding = 24;
+const iconRoom = 24;
+const checkWidth = 16;
+/** Values cut short would read wrong, so their columns take their measured width whole. */
+const wholeKinds = /* @__PURE__ */ new Set([
+	"status",
+	"money",
+	"number",
+	"signed",
+	"percent",
+	"date",
+	"datetime",
+	"boolean"
+]);
+const numericKinds = /* @__PURE__ */ new Set([
+	"money",
+	"number",
+	"signed",
+	"percent",
+	"date",
+	"datetime"
+]);
+const minWeight = 80;
+const maxWeight = 400;
+const maxIdWidth = 240;
+const perChar = (kind) => kind === "id" ? charWidth.mono : numericKinds.has(kind) ? charWidth.numeric : charWidth.body;
+const valueOf = (spec, row) => spec.value ? spec.value(row) : row[spec.id];
+/** The width the widest of `rows`' values of `spec` takes, cell padding included. */
+const contentWidth = (spec, rows) => {
+	const texts = rows.map((row) => cellText(spec, valueOf(spec, row)));
+	if (spec.kind === "status") return badgeWidth(texts.map((text) => text ?? ""));
+	const icon = spec.kind === "user" || spec.kind === "file" ? iconRoom : 0;
+	return Math.max(0, ...texts.map((text) => text === void 0 ? checkWidth : Math.ceil(text.length * perChar(spec.kind)))) + icon + cellPadding;
+};
+const clamp = (value, low, high) => Math.min(high, Math.max(low, value));
+const fitted = (spec, content) => {
+	if (wholeKinds.has(spec.kind) && !spec.title) return {
+		...spec,
+		fixed: true,
+		width: Math.max(spec.minWidth ?? 0, content)
+	};
+	const weighted = {
+		...spec,
+		fixed: false,
+		width: clamp(content, minWeight, maxWeight)
+	};
+	if (spec.kind !== "id") return weighted;
+	return {
+		...weighted,
+		minWidth: Math.max(headerWidth(spec.header, spec.sortable ?? false), Math.min(content, maxIdWidth))
+	};
+};
+/**
+* Columns sized by the values in `rows`: values that must stay whole get their widest value's width, text a share of the
+* leftover space as large as its widest value, and the title column the largest share. Columns drawn by their own
+* `render` keep their width, as their content cannot be estimated.
+*/
+const fitColumns = (specs, rows) => {
+	if (rows.length === 0) return specs;
+	const sized = specs.map((spec) => spec.render ? spec : fitted(spec, contentWidth(spec, rows)));
+	const shares = sized.filter((spec, index) => !spec.fixed && !spec.title && !specs[index].render).map((spec) => spec.width);
+	const largest = Math.max(0, ...shares);
+	return sized.map((spec, index) => spec.title && !specs[index].render ? {
+		...spec,
+		width: Math.max(spec.width, largest)
+	} : spec);
+};
+//#endregion
+export { badgeWidth, contentWidth, fitColumns, headerWidth };

package/dist/data-grid/data-grid.js

@@ -6,19 +6,26 @@ import { RowMenu, availableActions } from "./row-menu.js";
 import { desktopMinScale, gridMinWidth, gutterWidthFor } from "./grid-template.js";
 import { useHorizontalScroll } from "./use-horizontal-scroll.js";
 import { usePinnedColumns } from "./use-pinned-columns.js";
+import { defaultPins } from "./default-pins.js";
+import { useFittedColumns } from "./use-fitted-columns.js";
 import { GridHeader } from "./grid-header.js";
 import { DataRow, SkeletonRow } from "./grid-row.js";
 import { usePagedRows } from "./use-paged-rows.js";
 import { useVirtualRows } from "./use-virtual-rows.js";
 import { useCellEditing } from "./use-cell-editing.js";
+import { ReorderRows, SortableRow } from "./row-reorder.js";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useTable } from "@tanstack/react-table";
 //#region src/data-grid/data-grid.tsx
 const headerHeight = 32;
-const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0, onScrollIndex, latencyMs = 150, sort: controlledSort, onSortChange, onOpenRow, rowActions, cellEditor, rowPatches, bulkActions, pinKey, defaultPinned, rowNumbers = true, compact = false, selectable = true, fit = false, scroll = "own", className }) => {
+const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0, onScrollIndex, latencyMs = 150, sort: controlledSort, onSortChange, onOpenRow, rowActions, cellEditor, rowPatches, bulkActions, pinKey, defaultPinned, rowNumbers = true, compact = false, selectable: selecting = true, reorder, fit = false, scroll = "own", className }) => {
+	const selectable = selecting && !reorder;
 	const rowHeight = compact ? 28 : 36;
-	const [pinned, setPinned] = usePinnedColumns(pinKey, defaultPinned);
+	const narrow = !useIsDesktop();
+	const pinsByDefault = (defaultPinned ?? (narrow ? [] : defaultPins(given))).join(" ");
+	const initialPins = useMemo(() => pinsByDefault ? pinsByDefault.split(" ") : [], [pinsByDefault]);
+	const [pinned, setPinned] = usePinnedColumns(pinKey, initialPins);
 	const columns = useMemo(() => {
 		return [...pinned.flatMap((id) => given.find((spec) => spec.id === id) ?? []), ...given.filter((spec) => !pinned.includes(spec.id))];
 	}, [given, pinned]);
@@ -58,7 +65,6 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 		initialIndex: startIndex,
 		inset: headerHeight
 	});
-	const narrow = !useIsDesktop();
 	const gutter = narrow || !rowNumbers ? 40 : gutterWidthFor(total);
 	const topIndex = Math.floor(Math.max(0, top) / rowHeight);
 	useEffect(() => onScrollIndex?.(topIndex), [topIndex, onScrollIndex]);
@@ -87,6 +93,7 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 		firstIndex,
 		lastIndex
 	]);
+	const sized = useFittedColumns(columns, data);
 	const table = useTable({
 		features,
 		columns: tableColumns,
@@ -143,7 +150,7 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 		onOpenRow,
 		container: gridRef
 	});
-	const minWidth = gridMinWidth(columns, gutter, trailing, minScale);
+	const minWidth = gridMinWidth(sized, gutter, trailing, minScale);
 	const own = scroll === "own";
 	const header = /* @__PURE__ */ jsx("div", {
 		ref: headerRef,
@@ -152,7 +159,7 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 			style: { minWidth },
 			children: /* @__PURE__ */ jsx(GridHeader, {
 				cells: headerCells,
-				specs: columns,
+				specs: sized,
 				gutter,
 				trailing,
 				minScale,
@@ -166,6 +173,46 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 			})
 		})
 	});
+	const rowsInView = loaded.map(({ index, offset, row }) => {
+		const frame = {
+			specs: sized,
+			gutter,
+			index,
+			offset,
+			height: rowHeight,
+			selectable,
+			trailing,
+			minScale,
+			scrolled: horizontal.scrolled,
+			pins,
+			lastPinned
+		};
+		const tableRow = row ? tableRows.get(row.id) : void 0;
+		if (!tableRow || !row) return /* @__PURE__ */ jsx(SkeletonRow, { ...frame }, `skeleton-${index}`);
+		const actions = trailing ? availableActions(rowActions, row) : [];
+		const props = {
+			...frame,
+			selected: tableRow.getIsSelected(),
+			onToggle: () => tableRow.toggleSelected(),
+			onOpen: onOpenRow ? () => onOpenRow(row) : void 0,
+			menu: actions.length > 0 ? /* @__PURE__ */ jsx(RowMenu, {
+				row,
+				actions
+			}) : void 0,
+			cells: tableRow.getAllCells().map((cell) => {
+				const content = /* @__PURE__ */ jsx(table.FlexRender, { cell });
+				return {
+					spec: columns.find((spec) => spec.id === cell.column.id),
+					...cellEditing ? cellEditing.cell(index, row, cell.column.id, content) : { content }
+				};
+			})
+		};
+		return reorder ? /* @__PURE__ */ jsx(SortableRow, {
+			...props,
+			row,
+			label: reorder.label(row)
+		}, row.id) : /* @__PURE__ */ jsx(DataRow, { ...props }, row.id);
+	});
 	const body = /* @__PURE__ */ jsx("div", {
 		ref: horizontal.attach,
 		onScroll: onBodyScroll,
@@ -177,41 +224,12 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 				minWidth,
 				height: geometry.contentHeight
 			},
-			children: loaded.map(({ index, offset, row }) => {
-				const frame = {
-					specs: columns,
-					gutter,
-					index,
-					offset,
-					height: rowHeight,
-					selectable,
-					trailing,
-					minScale,
-					scrolled: horizontal.scrolled,
-					pins,
-					lastPinned
-				};
-				const tableRow = row ? tableRows.get(row.id) : void 0;
-				if (!tableRow) return /* @__PURE__ */ jsx(SkeletonRow, { ...frame }, `skeleton-${index}`);
-				const actions = trailing && row ? availableActions(rowActions, row) : [];
-				return /* @__PURE__ */ jsx(DataRow, {
-					...frame,
-					selected: tableRow.getIsSelected(),
-					onToggle: () => tableRow.toggleSelected(),
-					onOpen: onOpenRow && row ? () => onOpenRow(row) : void 0,
-					menu: row && actions.length > 0 ? /* @__PURE__ */ jsx(RowMenu, {
-						row,
-						actions
-					}) : void 0,
-					cells: tableRow.getAllCells().map((cell) => {
-						const content = /* @__PURE__ */ jsx(table.FlexRender, { cell });
-						return {
-							spec: columns.find((spec) => spec.id === cell.column.id),
-							...cellEditing && row ? cellEditing.cell(index, row, cell.column.id, content) : { content }
-						};
-					})
-				}, row?.id);
-			})
+			children: reorder ? /* @__PURE__ */ jsx(ReorderRows, {
+				ids: Array.from({ length: total }, (_, index) => patchedRow(index)?.id ?? `missing-${index}`),
+				rowAt: patchedRow,
+				reorder,
+				children: rowsInView
+			}) : rowsInView
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {

package/dist/data-grid/default-pins.js

@@ -0,0 +1,13 @@
+//#region src/data-grid/default-pins.ts
+/**
+* The columns pinned until the user chooses: the leading columns through the title column, when it is first or second.
+* Pinned columns move to the front, so a title further right stays unpinned rather than reorder the list; pins only
+* take effect once the grid is too wide and scrolls sideways.
+*/
+const defaultPins = (specs) => {
+	const index = specs.findIndex((spec) => spec.title);
+	if (index < 0 || index > 1) return [];
+	return specs.slice(0, index + 1).map((spec) => spec.id);
+};
+//#endregion
+export { defaultPins };

package/dist/data-grid/grid-row.js

@@ -33,13 +33,25 @@ const Gutter = ({ width, index, selectable, selected, onToggle, edge }) => /* @_
 		children: formatInt(index + 1)
 	})]
 });
-const DataRow = ({ cells, selected, onToggle, onOpen, menu, ...frame }) => /* @__PURE__ */ jsxs("div", {
+const dragStyle = (frame, dragY, transition) => ({
+	gridTemplateColumns: gridTemplate(frame.specs, frame.gutter, frame.trailing, frame.minScale),
+	height: frame.height,
+	top: frame.offset,
+	transform: dragY === 0 ? void 0 : `translateY(${dragY}px)`,
+	transition
+});
+const DataRow = ({ cells, selected, onToggle, onOpen, menu, handle, rowRef, dragY, transition, dragging, ...frame }) => /* @__PURE__ */ jsxs("div", {
+	ref: rowRef,
 	role: "row",
 	onClick: onOpen,
-	className: cn("absolute inset-x-0 top-0 grid items-center border-b", selected ? "bg-primary-soft" : "bg-background hover:bg-surface", onOpen && "cursor-pointer"),
-	style: frameStyle(frame),
+	className: cn("absolute inset-x-0 top-0 grid items-center border-b", selected ? "bg-primary-soft" : "bg-background hover:bg-surface", onOpen && "cursor-pointer", dragging && "z-30 bg-surface shadow-pop"),
+	style: dragY === void 0 ? frameStyle(frame) : dragStyle(frame, dragY, transition),
 	children: [
-		/* @__PURE__ */ jsx(Gutter, {
+		handle ? /* @__PURE__ */ jsx("div", {
+			className: cn("sticky left-0 z-10 flex h-full items-center bg-inherit pl-1.5", frame.scrolled && !frame.lastPinned && "shadow-[1px_0_0_var(--border),4px_0_6px_-2px_rgb(0_0_0/0.12)]"),
+			style: { width: frame.gutter },
+			children: handle
+		}) : /* @__PURE__ */ jsx(Gutter, {
 			width: frame.gutter,
 			index: frame.index,
 			selectable: frame.selectable,

package/dist/data-grid/pinned-storage.js

@@ -8,6 +8,7 @@ const readPinned = (storage, key) => guarded(() => {
 	const parsed = JSON.parse(raw);
 	return Array.isArray(parsed) && parsed.every((entry) => typeof entry === "string") ? parsed : void 0;
 }, void 0);
-const writePinned = (storage, key, pinned) => guarded(() => pinned.length === 0 ? storage.removeItem(key) : storage.setItem(key, JSON.stringify(pinned)), void 0);
+/** Keeps an empty list too, so a column pinned by default and then unpinned stays unpinned. */
+const writePinned = (storage, key, pinned) => guarded(() => storage.setItem(key, JSON.stringify(pinned)), void 0);
 //#endregion
 export { pinnedStorageKey, readPinned, writePinned };

package/dist/data-grid/row-reorder.js

@@ -0,0 +1,68 @@
+import { DataRow } from "./grid-row.js";
+import { GripVertical } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+import { DndContext, KeyboardSensor, MouseSensor, TouchSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
+import { SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+//#region src/data-grid/row-reorder.tsx
+const instructions = "To move a row, press Space on its handle, move it with the up and down arrow keys, and press Space again to drop it there. Escape puts it back.";
+/** The rows of a grid that are moved by hand, `ids` in their order, each loaded or not, so the drop's index is the row's place in the whole list. */
+const ReorderRows = ({ ids, rowAt, reorder, children }) => {
+	const sensors = useSensors(useSensor(MouseSensor, { activationConstraint: { distance: 4 } }), useSensor(TouchSensor, { activationConstraint: {
+		delay: 250,
+		tolerance: 5
+	} }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+	const place = (id) => ids.indexOf(String(id));
+	const name = (id) => {
+		const row = rowAt(place(id));
+		return row ? reorder.label(row) : "row";
+	};
+	const announcements = {
+		onDragStart: ({ active }) => `Picked up ${name(active.id)}, row ${place(active.id) + 1} of ${ids.length}.`,
+		onDragOver: ({ active, over }) => over ? `${name(active.id)} is over row ${place(over.id) + 1} of ${ids.length}.` : void 0,
+		onDragEnd: ({ active, over }) => over ? `${name(active.id)} was dropped at row ${place(over.id) + 1} of ${ids.length}.` : `${name(active.id)} was put back.`,
+		onDragCancel: ({ active }) => `Moving ${name(active.id)} was cancelled. It is back at row ${place(active.id) + 1}.`
+	};
+	const end = ({ active, over }) => {
+		if (!over || active.id === over.id) return;
+		reorder.onMove(place(active.id), place(over.id));
+	};
+	return /* @__PURE__ */ jsx(DndContext, {
+		sensors,
+		collisionDetection: closestCenter,
+		onDragEnd: end,
+		accessibility: {
+			announcements,
+			screenReaderInstructions: { draggable: instructions }
+		},
+		children: /* @__PURE__ */ jsx(SortableContext, {
+			items: ids,
+			strategy: verticalListSortingStrategy,
+			children
+		})
+	});
+};
+/** A row moved by its handle, which takes the checkbox's place; it follows the pointer up and down only. */
+const SortableRow = ({ row, label, ...props }) => {
+	const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = useSortable({ id: row.id });
+	const handle = /* @__PURE__ */ jsx("button", {
+		ref: setActivatorNodeRef,
+		type: "button",
+		"aria-label": `Move ${label}`,
+		...attributes,
+		...listeners,
+		onClick: (event) => event.stopPropagation(),
+		style: { touchAction: "none" },
+		className: "flex size-7 cursor-grab items-center justify-center rounded text-faint-foreground hover:bg-muted hover:text-foreground focus-visible:text-foreground active:cursor-grabbing pointer-coarse:size-9",
+		children: /* @__PURE__ */ jsx(GripVertical, { className: "size-4" })
+	});
+	return /* @__PURE__ */ jsx(DataRow, {
+		...props,
+		rowRef: setNodeRef,
+		handle,
+		dragY: transform?.y ?? 0,
+		transition,
+		dragging: isDragging
+	});
+};
+//#endregion
+export { ReorderRows, SortableRow };

package/dist/data-grid/truncated-text.js

@@ -0,0 +1,16 @@
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/data-grid/truncated-text.tsx
+const offerWhole = (text) => (event) => {
+	const span = event.currentTarget;
+	if (span.scrollWidth > Math.ceil(span.getBoundingClientRect().width)) span.title = text;
+	else span.removeAttribute("title");
+};
+/** Text cut to one line with an ellipsis, that shows whole as a tooltip when hovered while cut. */
+const TruncatedText = ({ text, className }) => /* @__PURE__ */ jsx("span", {
+	className: cn("truncate", className),
+	onMouseEnter: offerWhole(text),
+	children: text
+});
+//#endregion
+export { TruncatedText };

package/dist/data-grid/use-fitted-columns.js

@@ -0,0 +1,28 @@
+import { fitColumns } from "./content-widths.js";
+import { useMemo, useState } from "react";
+//#region src/data-grid/use-fitted-columns.ts
+const sizesOf = (specs) => Object.fromEntries(specs.map(({ id, width, minWidth, fixed }) => [id, {
+	width,
+	minWidth,
+	fixed
+}]));
+/**
+* `columns` sized by the first rows shown, fitted once per set of columns: later pages, filters and sorts keep those
+* widths, so columns never jump while scrolling, and a longer value later on is cut, with the whole of it on hover.
+*/
+const useFittedColumns = (columns, rows) => {
+	const key = columns.map((spec) => spec.id).sort().join(" ");
+	const [fitted, setFitted] = useState();
+	const current = fitted?.key === key ? fitted : void 0;
+	if (!current && rows.length > 0) setFitted({
+		key,
+		sizes: sizesOf(fitColumns(columns, rows))
+	});
+	const sizes = current?.sizes;
+	return useMemo(() => sizes ? columns.map((spec) => ({
+		...spec,
+		...sizes[spec.id]
+	})) : columns, [columns, sizes]);
+};
+//#endregion
+export { useFittedColumns };

package/dist/data-grid/use-pinned-columns.js

@@ -3,14 +3,15 @@ import { useCallback, useState } from "react";
 //#region src/data-grid/use-pinned-columns.ts
 /**
 * The ids of the columns pinned to the left, in pin order. With a `storageKey` the choice is kept in local storage
-* (per user and resource); `initial` applies until the user has chosen.
+* (per user and resource); `initial` applies until the user has chosen, as it is on each render.
 */
 const usePinnedColumns = (storageKey, initial = []) => {
-	const [pinned, setPinned] = useState(() => (storageKey ? readPinned(localStorage, storageKey) : void 0) ?? initial);
-	return [pinned, useCallback((next) => {
-		setPinned(next);
+	const [chosen, setChosen] = useState(() => storageKey ? readPinned(localStorage, storageKey) : void 0);
+	const update = useCallback((next) => {
+		setChosen(next);
 		if (storageKey) writePinned(localStorage, storageKey, next);
-	}, [storageKey])];
+	}, [storageKey]);
+	return [chosen ?? initial, update];
 };
 //#endregion
 export { usePinnedColumns };