@protobase/ui 0.21.1 → 0.21.3

package/dist/app/current-address.js

@@ -1,4 +1,4 @@
-import { defaultDisplay } from "./displays/list-displays.js";
+import { defaultDisplay, listDefaultDisplay } from "./displays/list-displays.js";
 import { defaultOrderBy } from "./list-order.js";
 import { encodeKey } from "@protobase/schema/internal";
 //#region src/app/current-address.ts
@@ -22,7 +22,7 @@ const listedResource = (resources, views, resource) => {
 };
 /** What a list shows when its address names nothing: its default display for the screen, the list's sort, the filters in a bar. */
 const listDefaults = (model, view, xs = false) => ({
-	display: defaultDisplay(view, xs),
+	display: model ? listDefaultDisplay(model, view, xs) : defaultDisplay(view, xs),
 	orderBy: model ? defaultOrderBy(model, view) : "",
 	filterLayout: "bar"
 });

package/dist/app/displays/display-controls.js

@@ -18,11 +18,10 @@ const icons = {
 	map: Map
 };
 /**
-* The list page's switch between the table and the view's displays, as buttons or, on a phone, as a menu; nothing for a
-* list with only its table.
+* The list page's switch between the table and the view's displays, or `choices`, as buttons or, on a phone, as a menu;
+* nothing for a list with only its table.
 */
-const DisplaySwitch = ({ view, value, onChange, menu = false }) => {
-	const choices = displayChoices(view);
+const DisplaySwitch = ({ view, value, onChange, menu = false, choices = displayChoices(view) }) => {
 	if (choices.length < 2) return null;
 	const options = choices.map((choice) => ({
 		value: choice.name,

package/dist/app/displays/list-displays.js

@@ -1,5 +1,6 @@
 import { recordKey, recordTitleField } from "../../live/model-helpers.js";
 import { humanize } from "../../live/naming.js";
+import { listColumnNames } from "../../live/columns-from-model.js";
 import { displayValue } from "../../live/display-value.js";
 import { photosKey } from "../../live/row-photos.js";
 import { filledFields } from "../filled-fields.js";
@@ -18,6 +19,40 @@ const defaultDisplay = (view, xs, preferred) => {
 	const cards = displaysOf(view).filter((display) => display.kind === "cards");
 	return cards.find((display) => display.name === fallback)?.name ?? cards[0]?.name ?? fallback;
 };
+/** The name of the list a phone shows for a list without a cards display. */
+const rowsDisplay = "rows";
+/**
+* The list a phone shows for a list without a cards display, as a cards display of a row per record: the title, the
+* first enum column as a badge on the right, and the next two columns, booleans left out, on a muted line below.
+* `undefined` for a view with a cards display, or a display of its own named `rows`.
+*/
+const phoneRows = (model, view) => {
+	if (displaysOf(view).some((display) => display.kind === "cards" || display.name === "rows")) return void 0;
+	const title = recordTitleField(model, view);
+	const candidates = listColumnNames(model, view).filter((name) => name !== title && model.fields[name] !== void 0);
+	const badge = candidates.find((name) => model.fields[name].type === "enum");
+	const footer = candidates.filter((name) => name !== badge && model.fields[name].type !== "boolean").slice(0, 2);
+	return {
+		kind: "cards",
+		name: rowsDisplay,
+		label: "List",
+		icon: "list",
+		title,
+		...badge !== void 0 && { badge },
+		footer
+	};
+};
+const isPhoneRows = (view, display) => display.name === "rows" && !displaysOf(view).some((other) => other.name === "rows");
+/**
+* The display a list page opens in when its address names none: `defaultDisplay`, but below the `sm` breakpoint the
+* phone's rows (`phoneRows`) in place of the table.
+*/
+const listDefaultDisplay = (model, view, xs) => {
+	const display = defaultDisplay(view, xs);
+	return xs && display === tableDisplay && phoneRows(model, view) ? rowsDisplay : display;
+};
+/** The display a list page shows for the address's `name`: `shownDisplay`, or the phone's rows when it names them, on any screen. */
+const shownListDisplay = (model, view, name) => (name === "rows" ? phoneRows(model, view) : void 0) ?? shownDisplay(view, name);
 /** The display a list shows for the address's `name`: `undefined` for the table, and the view's default for a name it does not have. */
 const shownDisplay = (view, name) => {
 	if (name === tableDisplay) return void 0;
@@ -38,6 +73,15 @@ const displayChoices = (view) => [{
 	label: display.label ?? humanize(display.name),
 	icon: display.icon ?? defaultIcons[display.kind]
 }))];
+/** The list page's display switch: `displayChoices`, and below the `sm` breakpoint the phone's rows when it has them. */
+const listDisplayChoices = (model, view, xs) => {
+	const choices = displayChoices(view);
+	return xs && phoneRows(model, view) ? [...choices, {
+		name: rowsDisplay,
+		label: "List",
+		icon: "list"
+	}] : choices;
+};
 /** The fields a cards display shows, its title the view's title field when it names none. */
 const cardFields = (model, view, display) => ({
 	image: display.image,
@@ -101,9 +145,19 @@ const shownFields = (model, view, display) => {
 	].filter((name) => name !== void 0);
 };
 /** The fields to label the list's rows for: the table's columns and every display's, so one load serves them all. */
-const loadedFields = (model, view, columns) => [.../* @__PURE__ */ new Set([...columns, ...displaysOf(view).flatMap((display) => shownFields(model, view, display))])];
-/** The sortable fields a display shows, for the sort menu that stands in for column headers. */
-const sortFields = (model, view, display) => [...new Set(shownFields(model, view, display))].filter((name) => model.fields[name]?.sortable);
+const loadedFields = (model, view, columns) => {
+	const rows = phoneRows(model, view);
+	const displays = rows ? [...displaysOf(view), rows] : displaysOf(view);
+	return [.../* @__PURE__ */ new Set([...columns, ...displays.flatMap((display) => shownFields(model, view, display))])];
+};
+/**
+* The sortable fields a display shows, for the sort menu that stands in for column headers; for the phone's rows, those
+* of the table's columns and the title, as the table's headers sort by.
+*/
+const sortFields = (model, view, display) => {
+	const shown = isPhoneRows(view, display) ? [recordTitleField(model, view), ...listColumnNames(model, view)] : shownFields(model, view, display);
+	return [...new Set(shown)].filter((name) => model.fields[name]?.sortable);
+};
 const isLabelled = (value) => typeof value === "object" && value !== null && "id" in value && "name" in value;
 /**
 * A loaded row, its relations as `{ id, name }`, split into the record as the API gives it, the relations' names and
@@ -128,4 +182,4 @@ const displayRow = (model, row) => {
 	};
 };
 //#endregion
-export { amountParts, cardFields, defaultDisplay, displayChoices, displayRow, displaysOf, filledAmount, filledMeta, loadedFields, mapCards, shownDisplay, shownFields, sortFields };
+export { amountParts, cardFields, defaultDisplay, displayChoices, displayRow, displaysOf, filledAmount, filledMeta, listDefaultDisplay, listDisplayChoices, loadedFields, mapCards, phoneRows, rowsDisplay, shownDisplay, shownFields, shownListDisplay, sortFields };

package/dist/app/displays/record-card.js

@@ -3,14 +3,14 @@ import { CustomBoundary } from "../pages/custom-boundary.js";
 import { recordKey } from "../../live/model-helpers.js";
 import { humanize } from "../../live/naming.js";
 import { useProjectUi } from "../pages/project-ui.js";
+import { markdownExcerpt } from "../../markdown/markdown-excerpt.js";
+import { isMarkdown } from "../../markdown/markdown-hint.js";
 import { displayValue } from "../../live/display-value.js";
 import { amountParts, cardFields, filledAmount, filledMeta } from "./list-displays.js";
 import { AppLink } from "../use-app-address.js";
 import { shownWidget } from "../field-types/shown-widget.js";
 import { WidgetPart } from "../field-types/widget-part.js";
 import { Markdown } from "../../markdown/markdown.js";
-import { isMarkdown } from "../../markdown/markdown-hint.js";
-import { markdownExcerpt } from "../../markdown/markdown-excerpt.js";
 import { ValueBadge } from "../value-badge.js";
 import { useSeedRecord } from "../record-preview.js";
 import { namedIcon } from "../named-icon.js";

package/dist/app/embedded-list/embedded-columns.js

@@ -1,7 +1,7 @@
 import { humanize } from "../../live/naming.js";
+import { columnsFromModel } from "../../live/columns-from-model.js";
 import { displayRow } from "../displays/list-displays.js";
 import { scopeOf } from "../pages/use-layout-data.js";
-import { columnsFromModel } from "../../live/columns-from-model.js";
 import { FieldValue } from "../pages/field-value.js";
 import { usePathValue } from "../pages/use-path-value.js";
 import { withFieldTypeCells } from "../field-types/field-type-cells.js";

package/dist/app/embedded-list/embedded-display.js

@@ -18,13 +18,17 @@ const embeddedDisplay = (view, xs, { picked, preferred }) => {
 	return defaultDisplay(view, xs, preferred !== void 0 && names.includes(preferred) ? preferred : void 0);
 };
 /**
-* The resource's list with the embedded list's filter, order and display, leaving out what the list does by default, and
+* The resource's list with the embedded list's filter, order and display, leaving out what the list does by default (an
+* embedded list's own default display among it, so a phone opens the list in its rows rather than the table), and
 * the saved search whose results it shows, if any. `resource` names another list of the same records, such as the
 * favorites that list a user's saved listings.
 */
 const viewAllAddress = (model, view, xs, { resource = model.name, ...list }) => changedList({
 	kind: "list",
 	resource
-}, list, listDefaults(model, view, xs));
+}, list, {
+	...listDefaults(model, view, xs),
+	display: defaultDisplay(view, xs)
+});
 //#endregion
 export { embeddedDisplay, embeddedDisplayKey, readPickedDisplay, viewAllAddress, writePickedDisplay };

package/dist/app/embedded-list/embedded-list.js

@@ -5,10 +5,10 @@ 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 { listColumnNames } from "../../live/columns-from-model.js";
 import { displayRow, loadedFields, shownDisplay } from "../displays/list-displays.js";
 import { defaultOrderBy, parseSort, sortToOrderBy } from "../list-order.js";
 import { AppLink, useAppAddress } from "../use-app-address.js";
-import { listColumnNames } from "../../live/columns-from-model.js";
 import { DataGrid } from "../../data-grid/data-grid.js";
 import { viewAllAddress } from "./embedded-display.js";
 import { BoardDisplay } from "../displays/board-display.js";

package/dist/app/field-editor.js

@@ -6,6 +6,7 @@ import { humanize } from "../live/naming.js";
 import { fromDraft, isEditable, toFieldDraft } from "../live/field-values.js";
 import { Switch } from "../primitives/switch.js";
 import { Textarea } from "../primitives/textarea.js";
+import { isMarkdown } from "../markdown/markdown-hint.js";
 import { displayValue } from "../live/display-value.js";
 import { AppLink } from "./use-app-address.js";
 import { RelationPicker } from "./relation-picker.js";
@@ -15,7 +16,6 @@ import { useShownWidget } from "./field-types/shown-widget.js";
 import { WidgetPart } from "./field-types/widget-part.js";
 import { Markdown } from "../markdown/markdown.js";
 import { MarkdownEditor } from "../markdown/markdown-editor.js";
-import { isMarkdown } from "../markdown/markdown-hint.js";
 import { ArrowUpRight } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { enumLabel } from "@protobase/schema";

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

@@ -1,4 +1,4 @@
-import { useIsDesktop } from "../lib/use-media-query.js";
+import { useIsDesktop, useIsXs } from "../lib/use-media-query.js";
 import { usePageScroll } from "../app-shell/page-scroll.js";
 import { PageHeader } from "../app-shell/page-header.js";
 import { useAuth } from "../auth/auth-provider.js";
@@ -9,12 +9,12 @@ import { useProjectUi } from "./pages/project-ui.js";
 import { Notice, useAdminMeta, usePermissions } from "./meta-gate.js";
 import { Sheet } from "../primitives/sheet.js";
 import { ErrorBanner } from "./error-banner.js";
-import { displayRow, loadedFields, shownDisplay } from "./displays/list-displays.js";
+import { columnsFromModel, listColumnNames } from "../live/columns-from-model.js";
+import { displayRow, listDisplayChoices, loadedFields, shownListDisplay } from "./displays/list-displays.js";
 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 { 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";
@@ -128,6 +131,7 @@ const LoadedList = ({ model, address, scope, heading }) => {
 	const extras = parsed.ok ? parsed.extras : [];
 	const { orderBy, filterLayout: layout } = address;
 	const desktop = useIsDesktop();
+	const xs = useIsXs();
 	const [sheetOpen, setSheetOpen] = useState(false);
 	const scoped = scope ? [...extras, scope] : extras;
 	const config = useFilterConfig({
@@ -159,8 +163,12 @@ const LoadedList = ({ model, address, scope, heading }) => {
 		orderBy,
 		related
 	});
-	const display = shownDisplay(view, address.display);
-	const pageScroll = display?.kind !== "map";
+	const display = shownListDisplay(model, view, address.display);
+	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 +180,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,8 +315,14 @@ 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,
+		choices: listDisplayChoices(model, view, xs),
 		value: display?.name ?? tableDisplay,
 		onChange: (name) => set({ display: name }),
 		menu
@@ -392,7 +405,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 +429,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 +446,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 +463,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/pages/field-value.js

@@ -3,13 +3,13 @@ import { keys } from "../../data/query-keys.js";
 import { useClient } from "../../data/api-provider.js";
 import { useAdminMeta } from "../meta-gate.js";
 import { fileShown, shownImage } from "../../live/file-values.js";
+import { isMarkdown } from "../../markdown/markdown-hint.js";
 import { displayValue } from "../../live/display-value.js";
 import { AppLink } from "../use-app-address.js";
 import { FileImage } from "../../live/file-image.js";
 import { useShownWidget } from "../field-types/shown-widget.js";
 import { WidgetPart } from "../field-types/widget-part.js";
 import { Markdown } from "../../markdown/markdown.js";
-import { isMarkdown } from "../../markdown/markdown-hint.js";
 import { fetchLabels } from "../../live/relation-labels.js";
 import { ValueBadge } from "../value-badge.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/app/record-page.js

@@ -22,16 +22,16 @@ import { fromDraft, isRequiredOnEdit } from "../live/field-values.js";
 import { fieldHelp, helpShown, recordShown, whenShown } from "./record-mode/record-mode.js";
 import { isChosen, keyValue } from "./create/create-values.js";
 import { ErrorBanner } from "./error-banner.js";
+import { isMarkdown } from "../markdown/markdown-hint.js";
+import { toneFor } from "../live/columns-from-model.js";
 import { displayValue } from "../live/display-value.js";
 import { filledFields } from "./filled-fields.js";
 import { AppLink, useAppAddress } from "./use-app-address.js";
 import { shownWidget } from "./field-types/shown-widget.js";
 import { WidgetPart } from "./field-types/widget-part.js";
 import { Markdown } from "../markdown/markdown.js";
-import { isMarkdown } from "../markdown/markdown-hint.js";
 import { FieldEditor } from "./field-editor.js";
 import { can, fieldAccess } from "./permissions.js";
-import { toneFor } from "../live/columns-from-model.js";
 import { ValueBadge } from "./value-badge.js";
 import { FieldValue } from "./pages/field-value.js";
 import { fieldMessage } from "./field-errors.js";

package/dist/app/related-dots/related-dots-columns.js

@@ -1,5 +1,6 @@
 import { humanize } from "../../live/naming.js";
-import { headerWidth, listColumnNames } from "../../live/columns-from-model.js";
+import { headerWidth } from "../../data-grid/content-widths.js";
+import { listColumnNames } from "../../live/columns-from-model.js";
 import { RelatedDots } from "./related-dots.js";
 import { RecordCard } from "../displays/record-card.js";
 import { jsx } from "react/jsx-runtime";

package/dist/app/related-dots/related-dots.js

@@ -2,10 +2,10 @@ import { cn } from "../../lib/cn.js";
 import { toneDots } from "../../primitives/badge.js";
 import { recordTitleField } from "../../live/model-helpers.js";
 import { humanize } from "../../live/naming.js";
+import { toneFor } from "../../live/columns-from-model.js";
 import { displayValue } from "../../live/display-value.js";
 import { displayRow } from "../displays/list-displays.js";
 import { AppLink } from "../use-app-address.js";
-import { toneFor } from "../../live/columns-from-model.js";
 import { valueColor } from "../../live/value-color.js";
 import { placeCard } from "./card-place.js";
 import { dotCard } from "./dot-card.js";