@protobase/ui 0.21.1 → 0.21.2

package/dist/app/hand-order/hand-order.js

@@ -0,0 +1,21 @@
+import { can } from "../permissions.js";
+//#region src/app/hand-order/hand-order.ts
+/** The field a user may sort `model`'s records by hand in: its `position`, when they may update it. */
+const writablePosition = (model, permissions) => {
+	const position = model.position;
+	if (!position || !can(permissions, "update")) return void 0;
+	const field = model.fields[position.field];
+	return field && !field.readOnly ? position.field : void 0;
+};
+/**
+* The field the list page sorts all of `model`'s records by hand in. A resource whose records are ordered within a
+* parent is sorted in the parent's related section instead, since its list mixes the parents.
+*/
+const listHandOrder = (model, permissions) => model.position?.within === void 0 ? writablePosition(model, permissions) : void 0;
+/**
+* The field a related section sorts its records by hand in: those of one parent, when the section lists every record
+* whose `within` relation points at the page's record, no filter or join resource leaving some out.
+*/
+const relatedHandOrder = (item, model, permissions) => model.position?.within !== void 0 && item.field === model.position.within && !item.through && !item.filter ? writablePosition(model, permissions) : void 0;
+//#endregion
+export { listHandOrder, relatedHandOrder };

package/dist/app/hand-order/hand-sorted-list.js

@@ -0,0 +1,98 @@
+import { Skeleton } from "../../primitives/skeleton.js";
+import { recordKey, recordTitle } from "../../live/model-helpers.js";
+import { humanize } from "../../live/naming.js";
+import { useProjectUi } from "../pages/project-ui.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { ErrorBanner } from "../error-banner.js";
+import { loadedFields } from "../displays/list-displays.js";
+import { useAppAddress } from "../use-app-address.js";
+import { DataGrid } from "../../data-grid/data-grid.js";
+import { embeddedColumns } from "../embedded-list/embedded-columns.js";
+import { useHandOrder } from "./use-hand-order.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/hand-order/hand-sorted-list.tsx
+/**
+* The records in their order by hand, in the list's table with a drag handle in each row's checkbox place: dragging a
+* row, or moving it with the keyboard from its handle, renumbers them all. The page scrolls them, and a row still opens
+* its record.
+*/
+const HandSortedList = ({ model, view, field, filter, columns }) => {
+	const { resources, views } = useAdminMeta();
+	const { fields: fieldTypes } = useProjectUi();
+	const { go } = useAppAddress();
+	const specs = useMemo(() => embeddedColumns(model, view, columns, {
+		resources,
+		views,
+		fieldTypes
+	}).map((spec) => ({
+		...spec,
+		sortable: false
+	})), [
+		model,
+		view,
+		columns.join(","),
+		resources,
+		views,
+		fieldTypes
+	]);
+	const fields = useMemo(() => loadedFields(model, view, specs.map((spec) => spec.id)), [
+		model,
+		view,
+		specs
+	]);
+	const order = useHandOrder({
+		model,
+		field,
+		filter,
+		fields
+	});
+	const rows = order.rows;
+	const source = useMemo(() => rows && {
+		total: rows.length,
+		rowAt: (index) => rows[index]
+	}, [rows]);
+	const plural = (view?.names?.plural ?? humanize(model.name)).toLowerCase();
+	if (order.loading) return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col gap-2",
+		children: Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }, index))
+	});
+	if (order.error) return /* @__PURE__ */ jsx(ErrorBanner, {
+		title: "Could not load",
+		error: order.error
+	});
+	if (order.more) return /* @__PURE__ */ jsxs("p", {
+		className: "text-muted-foreground",
+		children: [
+			"There are more than ",
+			500 .toLocaleString("en-IE"),
+			" ",
+			plural,
+			", too many to sort by hand."
+		]
+	});
+	if (!source || source.total === 0) return /* @__PURE__ */ jsx("p", {
+		className: "text-muted-foreground",
+		children: "Nothing here yet."
+	});
+	const openRecord = (row) => go({
+		kind: "record",
+		resource: model.name,
+		key: recordKey(model, row)
+	});
+	return /* @__PURE__ */ jsx(DataGrid, {
+		fit: true,
+		scroll: "parent",
+		columns: specs,
+		source,
+		latencyMs: 0,
+		onOpenRow: openRecord,
+		rowNumbers: false,
+		reorder: {
+			label: (row) => recordTitle(model, view, row, row.id),
+			onMove: order.move
+		}
+	});
+};
+//#endregion
+export { HandSortedList };

package/dist/app/hand-order/sort-button.js

@@ -0,0 +1,20 @@
+import { Button } from "../../primitives/button.js";
+import { ArrowUpDown, Check } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/hand-order/sort-button.tsx
+/** The button that turns sorting by hand on, as **Sort**, and off again, as **Done**; with `iconOnly` its icon alone. */
+const SortButton = ({ sorting, onChange, size, iconOnly = false }) => {
+	const label = sorting ? "Done" : "Sort";
+	return /* @__PURE__ */ jsxs(Button, {
+		size,
+		variant: sorting ? "primary" : "secondary",
+		onClick: () => onChange(!sorting),
+		...iconOnly && {
+			"aria-label": label,
+			title: label
+		},
+		children: [sorting ? /* @__PURE__ */ jsx(Check, { className: "size-3.5" }) : /* @__PURE__ */ jsx(ArrowUpDown, { className: "size-3.5" }), !iconOnly && label]
+	});
+};
+//#endregion
+export { SortButton };

package/dist/app/hand-order/use-hand-order.js

@@ -0,0 +1,105 @@
+import { keys } from "../../data/query-keys.js";
+import { useClient } from "../../data/api-provider.js";
+import { recordId, recordKey } from "../../live/model-helpers.js";
+import { useToast } from "../../toasts/toast-provider.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { refusalReason } from "../displays/board-columns.js";
+import { useRefreshResource } from "../pages/use-layout-data.js";
+import { listLabels, withLabels } from "../../live/relation-labels.js";
+import { useRef, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { encodeKey } from "@protobase/schema/internal";
+import { arrayMove } from "@dnd-kit/sortable";
+//#region src/app/hand-order/use-hand-order.ts
+/**
+* The records of `filter` in the order of `field`, all of them up to `handOrderLimit`, with `more` when there are
+* others, and `move` to put one elsewhere. A move shows at once and renumbers them all 1, 2, 3, ... in one batch
+* `reorder` with their ETags; moves made while one saves are saved after it, with the ETags it gave back. A refusal
+* puts them back as the server has them and says why; either way every list of the resource reloads.
+*/
+const useHandOrder = ({ model, field, filter, fields }) => {
+	const client = useClient();
+	const toast = useToast();
+	const refresh = useRefreshResource();
+	const { resources, views } = useAdminMeta();
+	const orderBy = `${field} asc`;
+	const loaded = useQuery({
+		queryKey: [...keys.list(model.name, filter, orderBy, 500, "hand-order"), fields.join(",")],
+		queryFn: async () => {
+			const labels = listLabels(resources, views, model, fields);
+			const page = await client.search(model.name, {
+				filter: filter || void 0,
+				orderBy,
+				pageSize: 500,
+				labels
+			});
+			return {
+				rows: withLabels(resources, model, fields, page.items, page.labels).map((row, index) => ({
+					...row,
+					id: recordId(model, page.items[index])
+				})),
+				more: Boolean(page.nextPageToken)
+			};
+		}
+	});
+	const [moved, setMoved] = useState();
+	const latest = useRef(void 0);
+	const saving = useRef(Promise.resolve());
+	const waiting = useRef(0);
+	const save = async () => {
+		const rows = latest.current;
+		if (!rows) return;
+		const etags = Object.fromEntries(rows.flatMap((row) => typeof row.etag === "string" ? [[encodeKey(recordKey(model, row)), row.etag]] : []));
+		const written = (await client.batchWrite([{
+			op: "reorder",
+			resource: model.name,
+			field,
+			keys: rows.map((row) => recordKey(model, row)),
+			etags
+		}])).results[0];
+		if (written?.op !== "reorder" || !latest.current) return;
+		const stored = new Map(written.records.map((entry) => [recordId(model, entry.record), entry]));
+		latest.current = latest.current.map((row) => {
+			const entry = stored.get(row.id);
+			return entry ? {
+				...row,
+				[field]: entry.record[field],
+				etag: entry.etag
+			} : row;
+		});
+	};
+	const refused = (error) => {
+		latest.current = void 0;
+		setMoved(void 0);
+		toast.show({
+			state: "error",
+			title: "Could not change the order",
+			description: refusalReason(error)
+		});
+	};
+	const settle = async () => {
+		waiting.current -= 1;
+		if (waiting.current > 0) return;
+		await refresh(model.name);
+		if (waiting.current > 0) return;
+		latest.current = void 0;
+		setMoved(void 0);
+	};
+	const move = (from, to) => {
+		const rows = latest.current ?? loaded.data?.rows;
+		if (!rows || from === to) return;
+		latest.current = arrayMove(rows, from, to);
+		setMoved(latest.current);
+		waiting.current += 1;
+		saving.current = saving.current.then(save).catch(refused).then(settle);
+	};
+	return {
+		rows: moved ?? loaded.data?.rows,
+		more: loaded.data?.more ?? false,
+		loading: loaded.isPending,
+		error: loaded.error,
+		move
+	};
+};
+//#endregion
+export { useHandOrder };

package/dist/app/list-page.js

@@ -14,7 +14,7 @@ import { parseSort, sortToOrderBy } from "./list-order.js";
 import { listedResource } from "./current-address.js";
 import { AppLink, useAppAddress } from "./use-app-address.js";
 import { can, rowAllows } from "./permissions.js";
-import { columnsFromModel } from "../live/columns-from-model.js";
+import { columnsFromModel, listColumnNames } from "../live/columns-from-model.js";
 import { pinnedStorageKey } from "../data-grid/pinned-storage.js";
 import { DataGrid } from "../data-grid/data-grid.js";
 import { useLiveRows } from "../live/use-live-rows.js";
@@ -52,6 +52,9 @@ import { SavedList } from "./saved/saved-list.js";
 import { SaveSearchButton } from "./searches/save-search-button.js";
 import { SavedSearches } from "./searches/saved-searches.js";
 import { useListCellEditor } from "./list-edit/use-list-cell-editor.js";
+import { listHandOrder } from "./hand-order/hand-order.js";
+import { HandSortedList } from "./hand-order/hand-sorted-list.js";
+import { SortButton } from "./hand-order/sort-button.js";
 import { useMemo, useState } from "react";
 import { Download, Plus, SlidersHorizontal } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -160,7 +163,11 @@ const LoadedList = ({ model, address, scope, heading }) => {
 		related
 	});
 	const display = shownDisplay(view, address.display);
-	const pageScroll = display?.kind !== "map";
+	const permissions = usePermissions(resource);
+	const handOrder = scope ? void 0 : listHandOrder(model, permissions);
+	const [sorting, setSorting] = useState(false);
+	const handSorting = sorting && handOrder !== void 0;
+	const pageScroll = handSorting || display?.kind !== "map";
 	usePageScroll(pageScroll);
 	const displayRows = useDisplayRows(model, rows.page, rows.key, display?.kind === "custom");
 	const scroll = useListScroll();
@@ -172,7 +179,6 @@ const LoadedList = ({ model, address, scope, heading }) => {
 		snapshot: row
 	});
 	const singular = view?.names?.singular ?? humanize(resource);
-	const permissions = usePermissions(resource);
 	const cellEditing = useListCellEditor(model, view, permissions);
 	const { state: auth } = useAuth();
 	const restore = useRestore(model);
@@ -308,7 +314,12 @@ const LoadedList = ({ model, address, scope, heading }) => {
 		},
 		children: [/* @__PURE__ */ jsx(Download, { className: "size-3.5" }), desktop && "Export"]
 	});
-	const displaySwitch = (menu) => /* @__PURE__ */ jsx(DisplaySwitch, {
+	const sortButton = handOrder && /* @__PURE__ */ jsx(SortButton, {
+		sorting: handSorting,
+		onChange: setSorting,
+		iconOnly: !desktop
+	});
+	const displaySwitch = (menu) => !handSorting && /* @__PURE__ */ jsx(DisplaySwitch, {
 		view,
 		value: display?.name ?? tableDisplay,
 		onChange: (name) => set({ display: name }),
@@ -392,7 +403,19 @@ const LoadedList = ({ model, address, scope, heading }) => {
 			list: displayRows
 		});
 	};
-	const shown = drawDisplay();
+	const shown = handSorting ? /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-3",
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground",
+			children: "Drag a row by its handle to move it. Every move is saved as you drop it."
+		}), /* @__PURE__ */ jsx(HandSortedList, {
+			model,
+			view,
+			field: handOrder,
+			filter: "",
+			columns: listColumnNames(model, view)
+		})]
+	}) : drawDisplay();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex min-h-0 flex-1 flex-col gap-3 px-5 py-4",
 		children: [
@@ -404,11 +427,13 @@ const LoadedList = ({ model, address, scope, heading }) => {
 				aside: !desktop && displaySwitch(true),
 				actions: desktop ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 					displaySwitch(false),
+					sortButton,
 					saveSearch,
 					importButton,
 					exportButton,
 					createButton
 				] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					sortButton,
 					saveSearch,
 					importButton,
 					exportButton,
@@ -419,11 +444,11 @@ const LoadedList = ({ model, address, scope, heading }) => {
 				title: "The filter in the address could not be read",
 				error: new Error(parsed.errors.map((error) => error.message).join("; "))
 			}),
-			rows.error && !display && /* @__PURE__ */ jsx(ErrorBanner, {
+			rows.error && !display && !handSorting && /* @__PURE__ */ jsx(ErrorBanner, {
 				title: "Could not load rows",
 				error: rows.error
 			}),
-			view?.chart && (isGroupChart(view.chart) ? /* @__PURE__ */ jsx(ListGroupChart, {
+			view?.chart && !handSorting && (isGroupChart(view.chart) ? /* @__PURE__ */ jsx(ListGroupChart, {
 				model,
 				view,
 				chart: view.chart,
@@ -436,8 +461,8 @@ const LoadedList = ({ model, address, scope, heading }) => {
 				noun: plural.toLowerCase(),
 				filter: loadFilter
 			})),
-			desktop ? desktopToolbar : phoneFilters,
-			desktop && layout === "panel" ? /* @__PURE__ */ jsxs("div", {
+			!handSorting && (desktop ? desktopToolbar : phoneFilters),
+			desktop && layout === "panel" && !handSorting ? /* @__PURE__ */ jsxs("div", {
 				className: "flex min-h-0 flex-1 gap-4",
 				children: [/* @__PURE__ */ jsx("div", {
 					className: pageScroll ? "sticky top-[calc(var(--pb-sticky-top,0px)+1rem)] flex max-h-[calc(100dvh-var(--pb-sticky-top,0px)-var(--pb-sticky-bottom,0px)-2rem)] shrink-0 self-start" : "flex shrink-0",

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/data-grid.js

@@ -11,12 +11,14 @@ 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 columns = useMemo(() => {
@@ -166,6 +168,46 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 			})
 		})
 	});
+	const rowsInView = 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 || !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 +219,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/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/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/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.21.1";
+var version = "0.21.2";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };