@protobase/ui 0.63.3 → 0.63.5

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 { InlineChildTable } from "../inline-child-table/inline-child-table.js";
+import { useAdminMeta, usePermissions } from "./meta-gate.js";
 import { Section } from "../record-view/section.js";
-import { can } from "./permissions.js";
+import { formatInt } from "../format/number.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 { lineTableMinWidth } from "../inline-child-table/columns.js";
+import { InlineChildTable } from "../inline-child-table/inline-child-table.js";
+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

@@ -5,12 +5,8 @@ import { useClient } from "../data/api-provider.js";
 import { cn } from "../lib/cn.js";
 import { Notice, useAdminMeta, usePermissions } from "./meta-gate.js";
 import { Button, buttonClass } from "../primitives/button.js";
-import { Skeleton } from "../primitives/skeleton.js";
-import { inApp } from "../app-shell/breadcrumb.js";
-import { Field } from "../record-view/field.js";
-import { Section } from "../record-view/section.js";
-import { MetadataCard } from "../record-view/record-sidebar.js";
 import { RecordHeader } from "../record-view/record-header.js";
+import { Section } from "../record-view/section.js";
 import { humanize } from "../live/naming.js";
 import { markdownExcerpt } from "../markdown/markdown-excerpt.js";
 import { isMarkdown } from "../markdown/markdown-hint.js";
@@ -18,13 +14,17 @@ import { contactFormat } from "../live/contact-links.js";
 import { toneFor } from "../live/columns-from-model.js";
 import { displayValue, valueTitle } from "../live/display-value.js";
 import { filledFields } from "./filled-fields.js";
+import { Skeleton } from "../primitives/skeleton.js";
+import { inApp } from "../app-shell/breadcrumb.js";
 import { text } from "./messages.js";
 import { useNavigationGuard } from "./router.js";
 import { AppLink, useAppAddress } from "./use-app-address.js";
 import { GroupSection } from "../record-view/group-section.js";
 import { RecordTabs } from "../record-view/record-tabs.js";
+import { Field } from "../record-view/field.js";
 import { SpecTable } from "../record-view/spec-table.js";
 import { KeyFacts } from "../record-view/key-facts.js";
+import { MetadataCard } from "../record-view/record-sidebar.js";
 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";
@@ -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/record-row/record-row-body.js

@@ -1,10 +1,10 @@
 import { formatTag } from "../../locale/active-locale.js";
 import { useAdminMeta } from "../meta-gate.js";
 import { useIsXs } from "../../lib/use-media-query.js";
-import { Skeleton } from "../../primitives/skeleton.js";
 import { humanize } from "../../live/naming.js";
 import { displaysOf, loadedFields } from "../displays/list-displays.js";
 import { defaultOrderBy } from "../list-order.js";
+import { Skeleton } from "../../primitives/skeleton.js";
 import { AppLink } from "../use-app-address.js";
 import { ErrorBanner } from "../error-banner.js";
 import { viewAllAddress } from "../embedded-list/embedded-display.js";

package/dist/app/record-row/record-row.js

@@ -1,5 +1,5 @@
-import { Skeleton } from "../../primitives/skeleton.js";
 import { displayRow } from "../displays/list-displays.js";
+import { Skeleton } from "../../primitives/skeleton.js";
 import { usePagedRows } from "../../data-grid/use-paged-rows.js";
 import { RecordCard } from "../displays/record-card.js";
 import { rowOffset } from "./row-window.js";

package/dist/app/record-row/saved-record-row.js

@@ -1,7 +1,7 @@
 import { useAdminMeta } from "../meta-gate.js";
-import { Skeleton } from "../../primitives/skeleton.js";
 import { humanize } from "../../live/naming.js";
 import { listedResource } from "../current-address.js";
+import { Skeleton } from "../../primitives/skeleton.js";
 import { ErrorBanner } from "../error-banner.js";
 import { savedScope } from "../saved/saved-records.js";
 import { useSavedRecords } from "../saved/use-saved-records.js";

package/dist/app/related-cards/related-card.js

@@ -1,6 +1,6 @@
 import { useAdminMeta } from "../meta-gate.js";
-import { Skeleton } from "../../primitives/skeleton.js";
 import { recordKey } from "../../live/model-helpers.js";
+import { Skeleton } from "../../primitives/skeleton.js";
 import { AppLink } from "../use-app-address.js";
 import { useRecordTitle } from "../titles/record-titles.js";
 import { RecordScope } from "../pages/record-scope.js";

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

@@ -1,7 +1,7 @@
 import { useIsXs } from "../../lib/use-media-query.js";
-import { Skeleton } from "../../primitives/skeleton.js";
 import { humanize } from "../../live/naming.js";
 import { defaultOrderBy } from "../list-order.js";
+import { Skeleton } from "../../primitives/skeleton.js";
 import { AppLink } from "../use-app-address.js";
 import { ErrorBanner } from "../error-banner.js";
 import { scopeOf, useCount, useListPage } from "../pages/use-layout-data.js";

package/dist/app/related-section.js

@@ -1,9 +1,9 @@
 import { keys } from "../data/query-keys.js";
 import { useClient } from "../data/api-provider.js";
 import { useAdminMeta, usePermissions } from "./meta-gate.js";
-import { Skeleton } from "../primitives/skeleton.js";
 import { Section } from "../record-view/section.js";
 import { listColumnNames } from "../live/columns-from-model.js";
+import { Skeleton } from "../primitives/skeleton.js";
 import { ErrorBanner } from "./error-banner.js";
 import { countQuery } from "./pages/use-layout-data.js";
 import { RelatedCards } from "./related-cards/related-cards.js";

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

@@ -1,5 +1,5 @@
-import { Skeleton } from "../../primitives/skeleton.js";
 import { humanize } from "../../live/naming.js";
+import { Skeleton } from "../../primitives/skeleton.js";
 import { ErrorBanner } from "../error-banner.js";
 import { PageHeader } from "../../app-shell/page-header.js";
 import { savedScope } from "./saved-records.js";

package/dist/app/searches/saved-search-rows.js

@@ -1,7 +1,7 @@
 import { useAdminMeta } from "../meta-gate.js";
-import { Skeleton } from "../../primitives/skeleton.js";
 import { humanize } from "../../live/naming.js";
 import { recordKey } from "../../live/model-helpers.js";
+import { Skeleton } from "../../primitives/skeleton.js";
 import { AppLink } from "../use-app-address.js";
 import { ErrorBanner } from "../error-banner.js";
 import { text } from "./messages.js";

package/dist/app/searches/saved-search-section.js

@@ -1,8 +1,8 @@
 import { useClient } from "../../data/api-provider.js";
 import { Button } from "../../primitives/button.js";
-import { useToast } from "../../toasts/toast-provider.js";
 import { humanize } from "../../live/naming.js";
 import { AppLink } from "../use-app-address.js";
+import { useToast } from "../../toasts/toast-provider.js";
 import { useRefreshResource } from "../pages/use-layout-data.js";
 import { text } from "./messages.js";
 import { InlineFilterChips } from "./filter-chip-list.js";

package/dist/app/searches/saved-searches.js

@@ -1,7 +1,7 @@
 import { Notice, useAdminMeta, usePermissions } from "../meta-gate.js";
-import { Skeleton } from "../../primitives/skeleton.js";
 import { humanize } from "../../live/naming.js";
 import { recordKey } from "../../live/model-helpers.js";
+import { Skeleton } from "../../primitives/skeleton.js";
 import { AppLink } from "../use-app-address.js";
 import { ErrorBanner } from "../error-banner.js";
 import { slotted } from "../../locale/slotted.js";

package/dist/app/searches/search-controls.js

@@ -1,7 +1,7 @@
 import { useClient } from "../../data/api-provider.js";
-import { useToast } from "../../toasts/toast-provider.js";
 import { humanize } from "../../live/naming.js";
 import { Switch } from "../../primitives/switch.js";
+import { useToast } from "../../toasts/toast-provider.js";
 import { useRefreshResource } from "../pages/use-layout-data.js";
 import { text } from "./messages.js";
 import { useId } from "react";

package/dist/app/searches/update-search-dialog.js

@@ -1,9 +1,9 @@
 import { useClient } from "../../data/api-provider.js";
 import { Button } from "../../primitives/button.js";
 import { ResponsiveDialog } from "../../primitives/responsive-dialog.js";
-import { Skeleton } from "../../primitives/skeleton.js";
 import { humanize } from "../../live/naming.js";
 import { defaultOrderBy } from "../list-order.js";
+import { Skeleton } from "../../primitives/skeleton.js";
 import { countQuery } from "../pages/use-layout-data.js";
 import { text } from "./messages.js";
 import { useFilterChips } from "./use-filter-chips.js";

package/dist/app/searches/use-save-search.js

@@ -1,9 +1,9 @@
 import { useClient } from "../../data/api-provider.js";
 import { useAdminMeta } from "../meta-gate.js";
-import { useToast } from "../../toasts/toast-provider.js";
 import { humanize } from "../../live/naming.js";
 import { recordKey } from "../../live/model-helpers.js";
 import { useAppAddress } from "../use-app-address.js";
+import { useToast } from "../../toasts/toast-provider.js";
 import { can } from "../permissions.js";
 import { useRefreshResource } from "../pages/use-layout-data.js";
 import { text } from "./messages.js";

package/dist/app/sensitive-field.js

@@ -1,9 +1,9 @@
 import { cn } from "../lib/cn.js";
 import { Button } from "../primitives/button.js";
-import { Input } from "../primitives/input.js";
 import { humanize } from "../live/naming.js";
 import { displayValue } from "../live/display-value.js";
 import { text } from "./messages.js";
+import { Input } from "../primitives/input.js";
 import { toDraft } from "../live/field-values.js";
 import { ErrorBanner } from "./error-banner.js";
 import { ConfirmSignIn } from "./confirm-sign-in.js";

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