@protobase/ui 0.63.2 → 0.63.4

package/dist/activity-chart/activity-chart.js

@@ -1,8 +1,8 @@
 import { cn } from "../lib/cn.js";
 import { useMediaQuery } from "../lib/use-media-query.js";
-import { activitySeries } from "../mocks/activity.js";
 import { formatInt } from "../format/number.js";
 import { formatDayShort } from "../format/date.js";
+import { activitySeries } from "../mocks/activity.js";
 import { Segmented } from "../primitives/segmented.js";
 import { halfOverHalfDelta, totalCount } from "./activity-math.js";
 import { ActivityTooltip } from "./activity-tooltip.js";

package/dist/app/lines-plan.js

@@ -0,0 +1,116 @@
+import { recordId, recordKey } from "../live/model-helpers.js";
+import { differs, toPatchValue } from "../live/field-values.js";
+import { encodeKey } from "@protobase/schema/internal";
+//#region src/app/lines-plan.ts
+const emptyLinesState = {
+	added: [],
+	edits: {},
+	removed: []
+};
+/** The ids on screen, in order: the stored lines that are kept, then the new ones, as far as `order` does not say otherwise. */
+const shownIds = (storedIds, state) => {
+	const kept = [...storedIds.filter((id) => !state.removed.includes(id)), ...state.added];
+	if (!state.order) return kept;
+	return [...state.order.filter((id) => kept.includes(id)), ...kept.filter((id) => !state.order.includes(id))];
+};
+/** The edited fields that differ from the stored line, as the API takes them. */
+const changedData = (model, edits, line) => Object.fromEntries(Object.entries(edits).flatMap(([name, draft]) => {
+	const field = model.fields[name];
+	return field && differs(field, draft, line[name]) ? [[name, toPatchValue(field, draft)]] : [];
+}));
+/** The fields filled in on a new line; the database's defaults fill the rest. */
+const filledData = (model, edits) => Object.fromEntries(Object.entries(edits).flatMap(([name, draft]) => {
+	const field = model.fields[name];
+	if (!field || field.type !== "boolean" && String(draft ?? "").trim() === "") return [];
+	return [[name, toPatchValue(field, draft)]];
+}));
+/**
+* The batch that writes the lines as they are on screen: removed lines are deleted, edited ones updated with the ETag
+* they were read with, and new ones created with the parent's key and their place. New lines after the kept ones are
+* numbered on from them; new lines between kept ones need the kept ones out of the way first, so those are moved above
+* every position in use, the new lines created at their places, and the kept ones moved to theirs. A kept line the batch
+* wrote before is moved with `*`, as its ETag was checked by that earlier operation of the same transaction.
+*/
+const planLinesOps = ({ model, position, link, stored, state }) => {
+	const plan = {
+		ops: [],
+		rows: []
+	};
+	const push = (op, row) => {
+		plan.ops.push(op);
+		plan.rows.push(row);
+	};
+	const byId = new Map(stored.map((line) => [recordId(model, line), line]));
+	const storedIds = [...byId.keys()];
+	const final = shownIds(storedIds, state);
+	const keyOf = (id) => recordKey(model, byId.get(id));
+	const etagOf = (id) => {
+		const etag = byId.get(id).etag;
+		return typeof etag === "string" ? etag : void 0;
+	};
+	for (const id of state.removed) {
+		if (!byId.has(id)) continue;
+		const etag = etagOf(id);
+		push({
+			op: "delete",
+			resource: model.name,
+			key: keyOf(id),
+			...etag && { etag }
+		}, id);
+	}
+	const written = /* @__PURE__ */ new Set();
+	for (const [id, edits] of Object.entries(state.edits)) {
+		if (!byId.has(id) || state.removed.includes(id)) continue;
+		const data = changedData(model, edits, byId.get(id));
+		if (Object.keys(data).length === 0) continue;
+		const etag = etagOf(id);
+		push({
+			op: "update",
+			resource: model.name,
+			key: keyOf(id),
+			data,
+			...etag && { etag }
+		}, id);
+		written.add(id);
+	}
+	const kept = final.filter((id) => byId.has(id));
+	const added = final.filter((id) => !byId.has(id));
+	const etags = (ids, wildcard) => Object.fromEntries(ids.flatMap((id) => {
+		const etag = wildcard || written.has(id) ? "*" : etagOf(id);
+		return etag ? [[encodeKey(keyOf(id)), etag]] : [];
+	}));
+	const reorder = (keys, start, tags) => ({
+		op: "reorder",
+		resource: model.name,
+		field: position,
+		keys,
+		...start !== 1 && { start },
+		etags: tags
+	});
+	const create = (id, place, ref) => ({
+		op: "create",
+		resource: model.name,
+		data: {
+			...filledData(model, state.edits[id] ?? {}),
+			[link.field]: link.value,
+			[position]: place
+		},
+		...ref && { ref }
+	});
+	const placeOf = (line) => Number(line[position]) || 0;
+	const moved = kept.some((id, index) => id !== storedIds.filter((each) => kept.includes(each))[index]);
+	if (added.every((id) => final.indexOf(id) >= kept.length)) {
+		if (moved) push(reorder(kept.map(keyOf), 1, etags(kept, false)));
+		const last = moved ? kept.length : Math.max(0, ...kept.map((id) => placeOf(byId.get(id))));
+		added.forEach((id, index) => push(create(id, last + 1 + index), id));
+		return plan;
+	}
+	const above = Math.max(final.length, ...stored.map(placeOf)) + 1;
+	if (kept.length > 0) push(reorder(kept.map(keyOf), above, etags(kept, false)));
+	const refOf = (id) => `line${added.indexOf(id) + 1}`;
+	for (const id of added) push(create(id, final.indexOf(id) + 1, refOf(id)), id);
+	push(reorder(final.map((id) => byId.has(id) ? keyOf(id) : { $ref: refOf(id) }), 1, etags(kept, true)));
+	return plan;
+};
+//#endregion
+export { emptyLinesState, planLinesOps, shownIds };

package/dist/app/list-order.js

@@ -1,7 +1,13 @@
 //#region src/app/list-order.ts
+/**
+* The order a list opens in: the view's sort, else the primary key's when it is sortable. Otherwise none, as the API
+* refuses a sort by a field that is not sortable and orders a list without one by its key anyway.
+*/
 const defaultOrderBy = (model, view) => {
 	const sort = view?.list?.sort?.[0];
-	return sort ? `${sort[0]} ${sort[1]}` : `${model.primaryKey[0]} asc`;
+	if (sort) return `${sort[0]} ${sort[1]}`;
+	const key = model.primaryKey[0];
+	return model.fields[key]?.sortable ? `${key} asc` : "";
 };
 const parseSort = (orderBy) => {
 	const [columnId = "", direction] = orderBy.trim().split(/\s+/);

package/dist/app/record-lines-cell.js

@@ -0,0 +1,47 @@
+import { FieldControlContext } from "../primitives/field-control.js";
+import { FieldEditor } from "./field-editor.js";
+import { fieldMessage } from "./field-errors.js";
+import { text } from "./record-messages.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/record-lines-cell.tsx
+/** One field of a line, edited with the record page's own editor; its label is for screen readers, as the column heading shows it. */
+const LineCell = ({ field, hints, label, lineNumber, resource, value, stored, relationLabel, relationTo, relationPicker, locked, problem, onChange }) => {
+	const id = useId();
+	const message = problem && fieldMessage(field, label, problem);
+	return /* @__PURE__ */ jsxs(FieldControlContext.Provider, {
+		value: {
+			id,
+			invalid: Boolean(problem),
+			required: false,
+			...message && { describedBy: `${id}-error` }
+		},
+		children: [
+			/* @__PURE__ */ jsx("label", {
+				htmlFor: id,
+				className: "sr-only",
+				children: text("lineField", label, lineNumber)
+			}),
+			/* @__PURE__ */ jsx(FieldEditor, {
+				field,
+				hints,
+				value,
+				stored,
+				relationLabel,
+				relationTo,
+				relationPicker,
+				locked,
+				invalid: Boolean(problem),
+				resource,
+				onChange
+			}),
+			message && /* @__PURE__ */ jsx("p", {
+				id: `${id}-error`,
+				className: "px-1 pt-0.5 text-xs text-danger-text",
+				children: message
+			})
+		]
+	});
+};
+//#endregion
+export { LineCell };

package/dist/app/record-lines.js

@@ -1,40 +1,117 @@
-import { usePermissions } from "./meta-gate.js";
+import { useAdminMeta, usePermissions } from "./meta-gate.js";
+import { lineTableMinWidth } from "../inline-child-table/columns.js";
 import { InlineChildTable } from "../inline-child-table/inline-child-table.js";
+import { formatInt } from "../format/number.js";
 import { Section } from "../record-view/section.js";
-import { can } from "./permissions.js";
+import { humanize } from "../live/naming.js";
+import { recordTitle } from "../live/model-helpers.js";
+import { isChosen, keyValue } from "./create/create-values.js";
+import { can, rowAllows } from "./permissions.js";
 import { text } from "./record-messages.js";
-import { jsx } from "react/jsx-runtime";
+import { LineCell } from "./record-lines-cell.js";
+import "./use-lines.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/record-lines.tsx
-/** A resource that holds numbered lines of this one: it points at the parent and has `position` and `quantity`. */
-const findLinesResource = (resources, parent) => Object.values(resources).find((candidate) => candidate.name !== parent.name && candidate.fields.position && candidate.fields.quantity && Object.values(candidate.fields).some((field) => field.type === "relation" && field.relation?.resource === parent.name));
-const toLine = (record) => ({
-	id: String(record.id),
-	productId: String(record.productId ?? ""),
-	description: String(record.description ?? ""),
-	quantity: Number(record.quantity),
-	unitPriceCents: Math.round(Number(record.unitPrice) * 100)
-});
-/** The lines of a record. Reordering only changes `draft`; the record's Save writes it, in one batch. */
-const RecordLines = ({ lines, draft, vatRate, saving, locked = false }) => {
-	const canReorder = can(usePermissions(lines.name), "update");
-	return /* @__PURE__ */ jsx(Section, {
+/**
+* The lines of a record as a table of their view's columns, edited in place: a line's fields, new lines, removed ones
+* and their order only change the draft; the record's Save writes it all, in one batch. A line the server turns down
+* says why on its row.
+*/
+const RecordLines = ({ lines, editable, saving }) => {
+	const { resources, views } = useAdminMeta();
+	const { model, columns, data, draft } = lines;
+	const permissions = usePermissions(model.name);
+	const view = views[model.name];
+	const [picked, setPicked] = useState({});
+	const open = editable && data.complete && !data.loading && !saving;
+	const canUpdate = open && can(permissions, "update");
+	const canCreate = open && can(permissions, "create");
+	const canDelete = open && can(permissions, "delete");
+	const writable = (line) => line.stored ? canUpdate && rowAllows(line.stored, "update") : canCreate;
+	const placeOf = (line) => draft.shown.indexOf(line) + 1;
+	const rejected = (line) => draft.rejection?.id === line.id ? draft.rejection : void 0;
+	const tableColumns = columns.map((name) => {
+		const field = model.fields[name];
+		const hints = view?.fields[name];
+		const label = hints?.label ?? humanize(name);
+		const target = field.relation ? resources[field.relation.resource] : void 0;
+		const pickable = target && target.primaryKey.length === 1 ? target : void 0;
+		return {
+			key: name,
+			label,
+			...[
+				"integer",
+				"bigint",
+				"decimal"
+			].includes(field.type) && {
+				align: "right",
+				width: "minmax(6rem,0.6fr)"
+			},
+			cell: (line) => {
+				const value = draft.value(line.id, name);
+				const chosen = value === null || value === void 0 || value === "" ? void 0 : String(value);
+				return /* @__PURE__ */ jsx(LineCell, {
+					field,
+					hints,
+					label,
+					lineNumber: placeOf(line),
+					resource: model.name,
+					value,
+					stored: line.stored?.[name],
+					relationLabel: chosen === void 0 ? void 0 : picked[`${line.id}/${name}`] ?? data.labels[name]?.[chosen],
+					relationTo: pickable && chosen !== void 0 ? {
+						kind: "record",
+						resource: pickable.name,
+						key: chosen
+					} : void 0,
+					relationPicker: pickable && {
+						target: pickable,
+						view: views[pickable.name]
+					},
+					locked: !writable(line),
+					problem: rejected(line)?.fields[name],
+					onChange: (next) => {
+						if (!pickable || !isChosen(next)) return draft.change(line.id, name, next);
+						setPicked((current) => ({
+							...current,
+							[`${line.id}/${name}`]: next.label
+						}));
+						draft.change(line.id, name, keyValue(pickable, next.key));
+					}
+				});
+			}
+		};
+	});
+	const lineError = (line) => {
+		const rejection = rejected(line);
+		if (!rejection || columns.some((name) => rejection.fields[name])) return void 0;
+		return rejection.message;
+	};
+	return /* @__PURE__ */ jsxs(Section, {
 		title: text("lines"),
 		help: text("linesHelp"),
-		children: /* @__PURE__ */ jsx("div", {
+		children: [!data.complete && /* @__PURE__ */ jsx("p", {
+			className: "mb-2 text-muted-foreground",
+			children: text("tooManyLines", formatInt(1e3))
+		}), /* @__PURE__ */ jsx("div", {
 			className: "-mx-4 overflow-x-auto px-4 [-webkit-overflow-scrolling:touch] md:mx-0 md:px-0",
 			children: /* @__PURE__ */ jsx("div", {
-				className: "min-w-[560px]",
+				style: { minWidth: lineTableMinWidth(tableColumns) },
 				children: /* @__PURE__ */ jsx(InlineChildTable, {
-					lines: draft.shown.map(toLine),
-					onChange: () => void 0,
+					lines: draft.shown,
+					columns: tableColumns,
+					lineName: (line) => recordTitle(model, view, line.stored ?? {}, "") || text("lineNumber", placeOf(line)),
 					onReorder: (next) => draft.setOrder(next.map((line) => line.id)),
-					vatRate,
-					readOnly: true,
-					reorderable: canReorder && !saving && !locked
+					reorderable: canUpdate,
+					onAdd: canCreate ? () => void draft.add() : void 0,
+					onRemove: canCreate || canDelete ? (line) => draft.remove(line.id) : void 0,
+					removable: (line) => line.stored ? canDelete && rowAllows(line.stored, "delete") : canCreate,
+					lineError
 				})
 			})
-		})
+		})]
 	});
 };
 //#endregion
-export { RecordLines, findLinesResource };
+export { RecordLines };

package/dist/app/record-messages.js

@@ -36,7 +36,10 @@ const text = defineMessages({
 		couldNotLoadRelated: "Could not load",
 		relatedRecords: "Related records",
 		lines: "Lines",
-		linesHelp: "What the document bills for. Drag the handle, or use the menu, to change the order; Save applies it."
+		linesHelp: "What the document bills for. Edit a line in place, add one, or drag the handle to change the order; Save applies it all.",
+		lineNumber: (place) => `Line ${place}`,
+		lineField: (label, place) => `${label}, line ${place}`,
+		tooManyLines: (limit) => `This record has more than ${limit} lines, so they show here read-only.`
 	},
 	nl: {
 		details: "Details",
@@ -73,7 +76,10 @@ const text = defineMessages({
 		couldNotLoadRelated: "Kon niet laden",
 		relatedRecords: "Gerelateerde records",
 		lines: "Regels",
-		linesHelp: "Waar het document voor factureert. Sleep de greep, of gebruik het menu, om de volgorde te wijzigen; Bewaren past hem toe."
+		linesHelp: "Waar het document voor factureert. Wijzig een regel ter plekke, voeg er een toe, of sleep de greep om de volgorde te wijzigen; Bewaren past alles toe.",
+		lineNumber: (place) => `Regel ${place}`,
+		lineField: (label, place) => `${label}, regel ${place}`,
+		tooManyLines: (limit) => `Dit record heeft meer dan ${limit} regels, dus ze staan hier alleen ter inzage.`
 	}
 });
 //#endregion

package/dist/app/record-page.js

@@ -53,10 +53,9 @@ import { RecordChartSection } from "./record-chart/record-chart-section.js";
 import { RecordActions } from "./pages/record-actions.js";
 import { groupOpen, toggledOpen } from "./group-open.js";
 import { attentionTab, shownTab, splitTabs } from "./record-tabs.js";
-import { RecordLines, findLinesResource } from "./record-lines.js";
+import { RecordLines } from "./record-lines.js";
 import { draftStorageKey } from "./draft-storage.js";
-import { useLines } from "./use-lines.js";
-import { useLinesDraft } from "./use-lines-draft.js";
+import { useRecordLines } from "./use-record-lines.js";
 import { GallerySection } from "./gallery/gallery-section.js";
 import { HistorySection } from "./history/history-section.js";
 import { CommentsSection } from "./comments/comments-section.js";
@@ -67,7 +66,7 @@ import { useRelatedRecords } from "./use-related-records.js";
 import { IncomingCard } from "./incoming-card.js";
 import { RelatedSection } from "./related-section.js";
 import { relatedValue } from "./related-value.js";
-import { Fragment, useEffect, useMemo } from "react";
+import { Fragment, useEffect } from "react";
 import { Check } from "lucide-react";
 import { isApiError } from "@protobase/client";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -174,9 +173,7 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 	const view = meta.views[model.name];
 	const title = useRecordTitle()(model, view, stored.record, recordKey);
 	const { state: auth } = useAuth();
-	const linesModel = useMemo(() => findLinesResource(meta.resources, model), [meta.resources, model]);
-	const linesData = useLines(linesModel, model, recordKey);
-	const linesDraft = useLinesDraft(linesModel, linesData.items);
+	const lines = useRecordLines(model, recordKey);
 	const editor = useRecordEditor({
 		model,
 		stored,
@@ -184,7 +181,7 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 		mode: view?.saveFeedback ?? "toast",
 		subject: title,
 		draftKey: !preview && auth.kind === "signed-in" ? draftStorageKey(auth.user.id, model.name, recordKey) : void 0,
-		lines: linesDraft
+		lines: lines.draft
 	});
 	const queryClient = useQueryClient();
 	const client = useClient();
@@ -552,12 +549,13 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 										children: tab.items.flatMap(mainItem)
 									}, `tab:${tab.title}`),
 									after.flatMap(mainItem),
-									linesModel && !preview && /* @__PURE__ */ jsx(RecordLines, {
-										lines: linesModel,
-										draft: linesDraft,
-										vatRate: Number(stored.record.vatRate ?? 21) / 100,
-										saving: editor.saving,
-										locked: shown !== "form"
+									lines.model && !preview && /* @__PURE__ */ jsx(RecordLines, {
+										lines: {
+											...lines,
+											model: lines.model
+										},
+										editable: shown === "form",
+										saving: editor.saving
 									})
 								]
 							}), /* @__PURE__ */ jsxs("aside", {
@@ -604,7 +602,7 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 										model,
 										recordKey,
 										layout,
-										lines: linesModel
+										lines: lines.model
 									})
 								]
 							})]

package/dist/app/use-lines-draft.js

@@ -1,44 +1,103 @@
-import { recordKey } from "../live/model-helpers.js";
-import { useCallback, useMemo, useState } from "react";
-import { encodeKey } from "@protobase/schema/internal";
+import { recordId } from "../live/model-helpers.js";
+import { toFieldDraft } from "../live/field-values.js";
+import { fieldErrors } from "./field-errors.js";
+import { emptyLinesState, planLinesOps, shownIds } from "./lines-plan.js";
+import { useMemo, useRef, useState } from "react";
 //#region src/app/use-lines-draft.ts
+const without = (source, name) => Object.fromEntries(Object.entries(source).filter(([key]) => key !== name));
 /**
-* The order the person has given the lines of a record, kept in the form until Save writes it, together with the
-* record, in one batch. `shown` is the lines in that order; `op()` is the batch operation that makes it permanent.
+* The changes the person made to a record's lines, kept in the form until Save writes them, together with the record,
+* in one batch: the order, new lines, typed fields and removed lines. `shown` is the lines as they are on screen;
+* `plan()` is the batch that makes them permanent.
 */
-const useLinesDraft = (model, stored) => {
-	const [order, setOrder] = useState();
-	const ids = stored.map((line) => String(line.id));
-	const shown = useMemo(() => {
-		if (!order) return stored;
-		const known = order.flatMap((id) => stored.filter((line) => String(line.id) === id));
-		const added = stored.filter((line) => !order.includes(String(line.id)));
-		return [...known, ...added];
-	}, [order, stored]);
-	const shownIds = shown.map((line) => String(line.id));
-	const dirty = order !== void 0 && shownIds.some((id, index) => id !== ids[index]);
-	const op = useCallback(() => {
-		if (!model || !dirty) return [];
-		return [{
-			op: "reorder",
-			resource: model.name,
-			field: "position",
-			keys: shown.map((line) => recordKey(model, line)),
-			etags: Object.fromEntries(shown.flatMap((line) => typeof line.etag === "string" ? [[encodeKey(recordKey(model, line)), line.etag]] : []))
-		}];
-	}, [
-		model,
-		dirty,
-		shown
-	]);
+const useLinesDraft = (target, stored) => {
+	const [state, setState] = useState(emptyLinesState);
+	const [rejection, setRejection] = useState();
+	const nextId = useRef(1);
+	const byId = useMemo(() => new Map(target ? stored.map((line) => [recordId(target.model, line), line]) : []), [target, stored]);
+	const shown = shownIds([...byId.keys()], state).map((id) => ({
+		id,
+		stored: byId.get(id)
+	}));
+	const plan = () => target ? planLinesOps({
+		...target,
+		stored,
+		state
+	}) : {
+		ops: [],
+		rows: []
+	};
+	const dirty = plan().ops.length > 0;
+	const order = useMemo(() => {
+		const kept = shownIds([...byId.keys()], state).filter((id) => byId.has(id));
+		const before = [...byId.keys()].filter((id) => kept.includes(id));
+		return state.order !== void 0 && kept.some((id, index) => id !== before[index]) ? kept : void 0;
+	}, [byId, state]);
+	/** The value a line's field editor holds: what was typed, else the stored value as the editor takes it. */
+	const value = (id, name) => {
+		const typed = state.edits[id];
+		if (typed && name in typed) return typed[name];
+		const field = target?.model.fields[name];
+		const current = byId.get(id)?.[name];
+		if (!field) return current;
+		return ["boolean", "file"].includes(field.type) ? current : toFieldDraft(field, current);
+	};
+	const forget = (id) => setRejection((current) => current?.id === id ? void 0 : current);
 	return {
 		shown,
 		dirty,
-		/** The ids in the order on screen, for keeping a draft. */
-		order: dirty ? shownIds : void 0,
-		setOrder: (next) => setOrder(next),
-		reset: () => setOrder(void 0),
-		op
+		/** The stored lines' ids in the order on screen, once moved, for keeping a draft. */
+		order,
+		value,
+		change: (id, name, next) => {
+			forget(id);
+			setState((current) => ({
+				...current,
+				edits: {
+					...current.edits,
+					[id]: {
+						...current.edits[id],
+						[name]: next
+					}
+				}
+			}));
+		},
+		/** Adds an empty line at the end; the database's defaults fill what is left empty when it is saved. */
+		add: () => {
+			const id = `new:${nextId.current++}`;
+			setState((current) => ({
+				...current,
+				added: [...current.added, id]
+			}));
+			return id;
+		},
+		remove: (id) => {
+			forget(id);
+			setState((current) => current.added.includes(id) ? {
+				...current,
+				added: current.added.filter((each) => each !== id),
+				edits: without(current.edits, id)
+			} : {
+				...current,
+				removed: [...current.removed, id]
+			});
+		},
+		setOrder: (next) => setState((current) => ({
+			...current,
+			order: next
+		})),
+		reset: () => {
+			setState(emptyLinesState);
+			setRejection(void 0);
+		},
+		/** The server turned down the write of line `id`: its fields and message show on that line until it changes. */
+		reject: (id, error) => setRejection({
+			id,
+			fields: fieldErrors(error),
+			message: error.message
+		}),
+		rejection,
+		plan
 	};
 };
 //#endregion

package/dist/app/use-lines.js

@@ -1,19 +1,33 @@
 import { useList } from "../data/use-list.js";
+import { useEffect, useMemo } from "react";
 //#region src/app/use-lines.ts
+/** The most lines a record's line editor loads; a record with more shows them read-only, as it cannot save them as a whole. */
+const linesLimit = 1e3;
 const byPosition = (a, b) => Number(a.position) - Number(b.position);
-/** The numbered lines of a record, in position order, as the server has them. Nothing is fetched without a lines resource. */
-const useLines = (lines, parent, parentKey) => {
-	const link = lines && Object.values(lines.fields).find((field) => field.type === "relation" && field.relation?.resource === parent.name);
+/**
+* The numbered lines of a record, in position order, as the server has them: every page, up to `linesLimit`, each as
+* large as the API gives. `labels` names the records their relations point at. Nothing is fetched without a lines resource.
+*/
+const useLines = (lines, link, parentKey, labels) => {
 	const list = useList(lines?.name ?? "", {
 		enabled: Boolean(lines && link),
 		filter: link ? `${link.name} = "${parentKey}"` : void 0,
-		pageSize: 200,
+		pageSize: 500,
+		labels,
 		...lines?.fields.position?.sortable && { orderBy: "position asc" }
 	});
+	const items = useMemo(() => [...list.items].sort(byPosition), [list.data]);
+	const more = list.hasNextPage && list.items.length < 1e3;
+	useEffect(() => {
+		if (more && !list.isFetchingNextPage) list.fetchNextPage();
+	}, [more, list.isFetchingNextPage]);
 	return {
-		items: [...list.items].sort(byPosition),
-		loading: list.isPending && Boolean(lines)
+		items,
+		labels: list.labels,
+		loading: (list.isPending || more) && Boolean(lines),
+		/** Every line is loaded, so the lines can be saved as a whole. */
+		complete: !list.hasNextPage
 	};
 };
 //#endregion
-export { useLines };
+export { linesLimit, useLines };