@protobase/ui 0.63.2 → 0.63.4

package/dist/app/use-record-editor.js

@@ -15,7 +15,7 @@ const without = (source, name) => Object.fromEntries(Object.entries(source).filt
 /**
 * Draft state for one record. Saving sends only the changed fields with the ETag that was read;
 * a 412 refetches the record and marks the fields both sides changed so the user can pick a side.
-* When the lines were reordered too, Save sends the record and the new order as one batch: all or nothing.
+* When the lines changed too, Save sends the record and the lines' writes as one batch: all or nothing.
 */
 const useRecordEditor = ({ model, stored, recordKey, mode, subject, draftKey, lines }) => {
 	const client = useClient();
@@ -38,7 +38,7 @@ const useRecordEditor = ({ model, stored, recordKey, mode, subject, draftKey, li
 	useEffect(() => {
 		if (!draftKey) return;
 		const kept = Object.fromEntries(Object.entries(draft).filter(([name]) => !model.fields[name]?.sensitive));
-		const keep = Object.keys(kept).length > 0 || Boolean(lines?.dirty);
+		const keep = Object.keys(kept).length > 0 || Boolean(lines?.order);
 		writeDraft(localStorage, draftKey, keep ? {
 			etag: stored.etag,
 			fields: kept,
@@ -48,7 +48,6 @@ const useRecordEditor = ({ model, stored, recordKey, mode, subject, draftKey, li
 		draftKey,
 		model,
 		draft,
-		lines?.dirty,
 		lines?.order,
 		stored.etag
 	]);
@@ -93,14 +92,15 @@ const useRecordEditor = ({ model, stored, recordKey, mode, subject, draftKey, li
 			throw error;
 		}
 	};
-	const saveBatch = async (linesOps) => {
-		const ops = [...fieldsDirty ? [{
+	const saveBatch = async (linesPlan) => {
+		const recordOps = fieldsDirty ? [{
 			op: "update",
 			resource: model.name,
 			key: recordKey,
 			data: patchOf(),
 			etag: stored.etag
-		}] : [], ...linesOps];
+		}] : [];
+		const ops = [...recordOps, ...linesPlan.ops];
 		try {
 			await client.batchWrite(ops);
 		} catch (error) {
@@ -108,7 +108,12 @@ const useRecordEditor = ({ model, stored, recordKey, mode, subject, draftKey, li
 				await adoptLatest();
 				await queryClient.invalidateQueries({ queryKey: ["list"] });
 				setLinesConflict(true);
-			} else if (isApiError(error)) reject(error);
+			} else if (isApiError(error)) {
+				const lineOp = error.operation === void 0 ? -1 : error.operation - recordOps.length;
+				const row = linesPlan.rows[lineOp];
+				if (lineOp < 0) reject(error);
+				else if (row) lines?.reject(row, error);
+			}
 			throw isApiError(error) ? nameFailingOperation(error, ops) : error;
 		}
 		await Promise.all([
@@ -120,8 +125,8 @@ const useRecordEditor = ({ model, stored, recordKey, mode, subject, draftKey, li
 		lines?.reset();
 	};
 	const save = () => feedback.run(async () => {
-		const linesOps = lines?.op() ?? [];
-		if (linesOps.length > 0) await saveBatch(linesOps);
+		const linesPlan = lines?.plan();
+		if (linesPlan && linesPlan.ops.length > 0) await saveBatch(linesPlan);
 		else await saveRecordOnly();
 		setDraft({});
 		setConflicts({});
@@ -146,7 +151,7 @@ const useRecordEditor = ({ model, stored, recordKey, mode, subject, draftKey, li
 		/** The changes on screen were brought back from this browser. */
 		restored: showRestored && dirty,
 		dismissRestored: () => setShowRestored(false),
-		/** Someone changed the lines while the new order was being made. */
+		/** Someone changed the lines while they were being edited here. */
 		linesConflict,
 		saving: feedback.phase === "saving",
 		phase: feedback.phase,

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

@@ -0,0 +1,47 @@
+import { useAdminMeta } from "./meta-gate.js";
+import { listColumnNames } from "../live/columns-from-model.js";
+import { keyValue } from "./create/create-values.js";
+import { listLabels } from "../live/relation-labels.js";
+import { useLines } from "./use-lines.js";
+import { useLinesDraft } from "./use-lines-draft.js";
+import { useMemo } from "react";
+//#region src/app/use-record-lines.ts
+/** 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));
+/**
+* The lines' columns: the list columns of their view, or its first fields, without what the editor fills in itself:
+* the key, the tenant, the relation to the record and the position, which is the order of the rows.
+*/
+const lineColumnNames = (lines, view, link) => listColumnNames(lines, view).filter((name) => {
+	const field = lines.fields[name];
+	return field && !field.writeOnly && name !== link && name !== "position" && name !== lines.tenant && !lines.primaryKey.includes(name);
+});
+/** The record's lines when it has a lines resource: the resource, its columns, the lines as stored and the changes made to them. */
+const useRecordLines = (parent, parentKey) => {
+	const { resources, views } = useAdminMeta();
+	const model = useMemo(() => findLinesResource(resources, parent), [resources, parent]);
+	const link = model && Object.values(model.fields).find((field) => field.type === "relation" && field.relation?.resource === parent.name);
+	const columns = model && link ? lineColumnNames(model, views[model.name], link.name) : [];
+	const data = useLines(model, link, parentKey, model ? listLabels(resources, views, model, columns) : void 0);
+	const target = useMemo(() => model && link ? {
+		model,
+		position: "position",
+		link: {
+			field: link.name,
+			value: keyValue(parent, parentKey)
+		}
+	} : void 0, [
+		model,
+		link,
+		parent,
+		parentKey
+	]);
+	return {
+		model,
+		columns,
+		data,
+		draft: useLinesDraft(target, data.items)
+	};
+};
+//#endregion
+export { findLinesResource, lineColumnNames, useRecordLines };

package/dist/auth/auth-gate.js

@@ -148,7 +148,10 @@ const useAuthPage = (workspace, children) => {
 				children: text("tryAgain")
 			})]
 		});
-		case "needs-admin": return /* @__PURE__ */ jsx(FirstRunPage, { onCheckAgain: recheck });
+		case "needs-admin": return /* @__PURE__ */ jsx(FirstRunPage, {
+			firstAdminUrl: state.firstAdminUrl,
+			onCheckAgain: recheck
+		});
 	}
 	if (state.kind === "signed-in" && address) return /* @__PURE__ */ jsx(Redirect, { to: next ?? "/" });
 	if (page.kind === "reset-password") return /* @__PURE__ */ jsx(ResetPasswordPage, {

package/dist/auth/auth-provider.js

@@ -125,7 +125,10 @@ const AuthProvider = ({ session: given, origin, nativeBridge, children }) => {
 			setAnonymous(Boolean(status.anonymous));
 			setBeforeSignIn(status.plugins ?? []);
 			setLocale(status.locale);
-			if (status.needsAdmin) return setState({ kind: "needs-admin" });
+			if (status.needsAdmin) return setState({
+				kind: "needs-admin",
+				...status.firstAdminUrl && { firstAdminUrl: status.firstAdminUrl }
+			});
 			const user = await session.session();
 			return user ? enter(user) : setState({ kind: status.anonymous ? "visitor" : "signed-out" });
 		}).catch((error) => setState({

package/dist/auth/first-run-page.js

@@ -1,52 +1,61 @@
 import { text } from "./messages.js";
-import { Button } from "../primitives/button.js";
+import { cn } from "../lib/cn.js";
+import { Button, buttonClass } from "../primitives/button.js";
 import { AuthLayout } from "./auth-layout.js";
 import { useState } from "react";
-import { Check, Copy } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, Copy, ExternalLink } from "lucide-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/auth/first-run-page.tsx
 const createAdminCommand = "protobase users create you@example.com";
 /**
 * Shown while the admin store has no user. Accounts are not created over the web (a fresh URL must not be claimable
-* by whoever reaches it first), so this says how to create the first admin on the host.
+* by whoever reaches it first), so this says how to create the first admin on the host, or, with `firstAdminUrl`,
+* links to the platform's page where it is added, since nobody hosted there can run the command.
 */
-const FirstRunPage = ({ command = createAdminCommand, onCheckAgain, busy }) => {
+const FirstRunPage = ({ command = createAdminCommand, firstAdminUrl, onCheckAgain, busy }) => /* @__PURE__ */ jsxs(AuthLayout, {
+	title: text("noAdminTitle"),
+	description: text("noAdminDescription"),
+	children: [firstAdminUrl ? /* @__PURE__ */ jsx(ConsoleLink, { url: firstAdminUrl }) : /* @__PURE__ */ jsx(CommandBox, { command }), /* @__PURE__ */ jsx(Button, {
+		variant: firstAdminUrl ? "secondary" : "primary",
+		className: "mt-4 min-h-10 w-full",
+		loading: busy,
+		onClick: onCheckAgain,
+		children: text("reload")
+	})]
+});
+const ConsoleLink = ({ url }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", {
+	className: "text-muted-foreground",
+	children: text("firstAdminExplanation")
+}), /* @__PURE__ */ jsxs("a", {
+	href: url,
+	target: "_blank",
+	rel: "noopener noreferrer",
+	className: cn(buttonClass({ variant: "primary" }), "mt-4 min-h-10 w-full"),
+	children: [text("firstAdminLink"), /* @__PURE__ */ jsx(ExternalLink, { className: "size-4" })]
+})] });
+const CommandBox = ({ command }) => {
 	const [copied, setCopied] = useState(false);
-	return /* @__PURE__ */ jsxs(AuthLayout, {
-		title: text("noAdminTitle"),
-		description: text("noAdminDescription"),
-		children: [
-			/* @__PURE__ */ jsx("p", {
-				className: "text-muted-foreground",
-				children: text("noAdminExplanation")
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "mt-4 flex items-center gap-2 rounded-md border bg-surface py-1.5 pl-3 pr-1.5",
-				children: [/* @__PURE__ */ jsx("code", {
-					className: "min-w-0 flex-1 break-all font-mono text-xs",
-					children: command
-				}), /* @__PURE__ */ jsx("button", {
-					type: "button",
-					"aria-label": text("copyCommand"),
-					onClick: () => {
-						navigator.clipboard.writeText(command).then(() => {
-							setCopied(true);
-							setTimeout(() => setCopied(false), 2e3);
-						});
-					},
-					className: "inline-flex size-8 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-muted pointer-coarse:size-11",
-					children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-4 text-success" }) : /* @__PURE__ */ jsx(Copy, { className: "size-4" })
-				})]
-			}),
-			/* @__PURE__ */ jsx(Button, {
-				variant: "primary",
-				className: "mt-4 min-h-10 w-full",
-				loading: busy,
-				onClick: onCheckAgain,
-				children: text("reload")
-			})
-		]
-	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", {
+		className: "text-muted-foreground",
+		children: text("noAdminExplanation")
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "mt-4 flex items-center gap-2 rounded-md border bg-surface py-1.5 pl-3 pr-1.5",
+		children: [/* @__PURE__ */ jsx("code", {
+			className: "min-w-0 flex-1 break-all font-mono text-xs",
+			children: command
+		}), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": text("copyCommand"),
+			onClick: () => {
+				navigator.clipboard.writeText(command).then(() => {
+					setCopied(true);
+					setTimeout(() => setCopied(false), 2e3);
+				});
+			},
+			className: "inline-flex size-8 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-muted pointer-coarse:size-11",
+			children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-4 text-success" }) : /* @__PURE__ */ jsx(Copy, { className: "size-4" })
+		})]
+	})] });
 };
 //#endregion
 export { FirstRunPage, createAdminCommand };

package/dist/auth/messages.js

@@ -29,6 +29,8 @@ const text = defineMessages({
 		noAdminDescription: "This Protobase has no users to sign in with.",
 		noAdminExplanation: "Run this in the terminal where Protobase runs, then reload. The first admin is created on the server, not in the browser, so nobody else can claim a fresh URL.",
 		copyCommand: "Copy command",
+		firstAdminExplanation: "The first user is added in the Protobase Cloud console, not in the browser, so nobody else can claim a fresh URL. Add yourself there, then reload.",
+		firstAdminLink: "Add your first user in the Protobase Cloud console",
 		reload: "Reload",
 		tooManyRequests: "Too many requests. Wait a minute and try again.",
 		tooManyAttempts: "Too many attempts. Wait a minute and try again.",
@@ -127,6 +129,8 @@ const text = defineMessages({
 		noAdminDescription: "Deze Protobase heeft geen gebruikers om mee in te loggen.",
 		noAdminExplanation: "Voer dit uit in de terminal waar Protobase draait en laad de pagina daarna opnieuw. De eerste beheerder wordt op de server gemaakt, niet in de browser, zodat niemand anders een nieuwe URL kan opeisen.",
 		copyCommand: "Opdracht kopiëren",
+		firstAdminExplanation: "De eerste gebruiker wordt in de Protobase Cloud-console toegevoegd, niet in de browser, zodat niemand anders een nieuwe URL kan opeisen. Voeg jezelf daar toe en laad de pagina daarna opnieuw.",
+		firstAdminLink: "Voeg je eerste gebruiker toe in de Protobase Cloud-console",
 		reload: "Opnieuw laden",
 		tooManyRequests: "Te veel verzoeken. Wacht een minuut en probeer het opnieuw.",
 		tooManyAttempts: "Te veel pogingen. Wacht een minuut en probeer het opnieuw.",

package/dist/data/use-list.d.ts

@@ -6,6 +6,8 @@ export type UseListParams = {
   orderBy?: string;
   pageSize?: number;
   fields?: string[];
+  /** Names the records relations point at, as `client.list`'s `labels`: `{ product_id: 'name' }`. */
+  labels?: Record<string, string>;
   /** Start at this page token instead of the first page, for example one from `useAnchors`. */
   startToken?: string;
   enabled?: boolean;
@@ -14,9 +16,13 @@ export type UseListParams = {
 };
 type Row = Record<string, unknown>;
 /** Infinite pages of a resource, following `next_page_token`. */
-export declare const useList: (resource: string, { filter, orderBy, pageSize, fields, startToken, enabled, refetchInterval }?: UseListParams) => {
+export declare const useList: (resource: string, { filter, orderBy, pageSize, fields, labels, startToken, enabled, refetchInterval }?: UseListParams) => {
   items: Row[];
   totalEstimate: number | undefined;
+  /** Per relation asked for in `labels`, the names of the records it points at, from every page loaded. */
+  labels: {
+    [k: string]: Record<string, string>;
+  };
   data: InfiniteData<ListPage<Row>, unknown>;
   error: Error;
   isError: true;
@@ -53,6 +59,10 @@ export declare const useList: (resource: string, { filter, orderBy, pageSize, fi
 } | {
   items: Row[];
   totalEstimate: number | undefined;
+  /** Per relation asked for in `labels`, the names of the records it points at, from every page loaded. */
+  labels: {
+    [k: string]: Record<string, string>;
+  };
   data: InfiniteData<ListPage<Row>, unknown>;
   error: null;
   isError: false;
@@ -89,6 +99,10 @@ export declare const useList: (resource: string, { filter, orderBy, pageSize, fi
 } | {
   items: Row[];
   totalEstimate: number | undefined;
+  /** Per relation asked for in `labels`, the names of the records it points at, from every page loaded. */
+  labels: {
+    [k: string]: Record<string, string>;
+  };
   data: undefined;
   error: Error;
   isError: true;
@@ -125,6 +139,10 @@ export declare const useList: (resource: string, { filter, orderBy, pageSize, fi
 } | {
   items: Row[];
   totalEstimate: number | undefined;
+  /** Per relation asked for in `labels`, the names of the records it points at, from every page loaded. */
+  labels: {
+    [k: string]: Record<string, string>;
+  };
   data: undefined;
   error: null;
   isError: false;
@@ -161,6 +179,10 @@ export declare const useList: (resource: string, { filter, orderBy, pageSize, fi
 } | {
   items: Row[];
   totalEstimate: number | undefined;
+  /** Per relation asked for in `labels`, the names of the records it points at, from every page loaded. */
+  labels: {
+    [k: string]: Record<string, string>;
+  };
   data: undefined;
   error: null;
   isError: false;
@@ -197,6 +219,10 @@ export declare const useList: (resource: string, { filter, orderBy, pageSize, fi
 } | {
   items: Row[];
   totalEstimate: number | undefined;
+  /** Per relation asked for in `labels`, the names of the records it points at, from every page loaded. */
+  labels: {
+    [k: string]: Record<string, string>;
+  };
   data: InfiniteData<ListPage<Row>, unknown>;
   isError: false;
   error: null;

package/dist/data/use-list.js

@@ -4,11 +4,15 @@ import { filterText } from "@protobase/client";
 import { useInfiniteQuery } from "@tanstack/react-query";
 //#region src/data/use-list.ts
 /** Infinite pages of a resource, following `next_page_token`. */
-const useList = (resource, { filter, orderBy, pageSize = 50, fields, startToken = "", enabled = true, refetchInterval } = {}) => {
+const useList = (resource, { filter, orderBy, pageSize = 50, fields, labels, startToken = "", enabled = true, refetchInterval } = {}) => {
 	const client = useClient();
 	const text = filterText(filter) ?? "";
 	const query = useInfiniteQuery({
-		queryKey: [...keys.list(resource, text, orderBy ?? "", pageSize, startToken), fields?.join(",") ?? ""],
+		queryKey: [
+			...keys.list(resource, text, orderBy ?? "", pageSize, startToken),
+			fields?.join(",") ?? "",
+			...labels ? [labels] : []
+		],
 		enabled,
 		refetchInterval,
 		initialPageParam: startToken,
@@ -17,6 +21,7 @@ const useList = (resource, { filter, orderBy, pageSize = 50, fields, startToken
 			orderBy,
 			pageSize,
 			fields,
+			labels,
 			pageToken: pageParam
 		}),
 		getNextPageParam: (last) => last.nextPageToken || void 0
@@ -25,7 +30,9 @@ const useList = (resource, { filter, orderBy, pageSize = 50, fields, startToken
 	return {
 		...query,
 		items: pages.flatMap((page) => page.items),
-		totalEstimate: pages[0]?.totalSizeEstimate
+		totalEstimate: pages[0]?.totalSizeEstimate,
+		/** Per relation asked for in `labels`, the names of the records it points at, from every page loaded. */
+		labels: Object.fromEntries(Object.keys(labels ?? {}).map((name) => [name, Object.assign({}, ...pages.map((page) => page.labels?.[name] ?? {}))]))
 	};
 };
 //#endregion

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

@@ -1,7 +1,7 @@
-import { userById } from "../mocks/users.js";
 import { formatMoney } from "../format/money.js";
 import { formatInt, formatPercent, formatSigned } from "../format/number.js";
 import { formatDate, formatDateTime, formatRelativeTime } from "../format/date.js";
+import { userById } from "../mocks/users.js";
 import { fileShown } from "../live/file-values.js";
 import { text } from "./messages.js";
 import { enumLabel } from "@protobase/schema";

package/dist/data-grid/cells.js

@@ -1,7 +1,7 @@
 import { cn } from "../lib/cn.js";
-import { userById } from "../mocks/users.js";
 import { viewerZone, zoneLabel } from "../format/zone.js";
 import { formatDateTime } from "../format/date.js";
+import { userById } from "../mocks/users.js";
 import { Avatar } from "../primitives/avatar.js";
 import { Badge } from "../primitives/badge.js";
 import { fileShown, shownImage } from "../live/file-values.js";

package/dist/inline-child-table/columns.js

@@ -1,4 +1,9 @@
 //#region src/inline-child-table/columns.ts
-const lineGrid = "grid grid-cols-[28px_minmax(0,1fr)_88px_112px_112px_32px] items-center gap-2 pointer-coarse:grid-cols-[44px_minmax(0,1fr)_88px_112px_112px_44px]";
+const track = (column) => column.width ?? "minmax(8rem,1fr)";
+/** The columns' tracks, between the drag handle and the menu that `lineGrid` places around them. */
+const lineGridStyle = (columns) => ({ "--line-columns": columns.map(track).join(" ") });
+/** The narrowest the table gets before it scrolls sideways: each column's least width, and the handle and menu. */
+const lineTableMinWidth = (columns) => `${columns.reduce((sum, column) => sum + (column.width?.endsWith("px") ? parseInt(column.width) / 16 : 8), 6)}rem`;
+const lineGrid = "grid grid-cols-[28px_var(--line-columns)_32px] items-center gap-2 pointer-coarse:grid-cols-[44px_var(--line-columns)_44px]";
 //#endregion
-export { lineGrid };
+export { lineGrid, lineGridStyle, lineTableMinWidth };

package/dist/inline-child-table/inline-child-table.js

@@ -1,18 +1,20 @@
+import { cn } from "../lib/cn.js";
 import { Button } from "../primitives/button.js";
-import { productAt } from "../mocks/products.js";
-import { lineGrid } from "./columns.js";
+import { lineGrid, lineGridStyle } from "./columns.js";
 import { text } from "./messages.js";
 import { LineRow } from "./line-row.js";
 import { reorder } from "./reorder.js";
-import { TotalsFooter } from "./totals-footer.js";
 import { Plus } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { DndContext, KeyboardSensor, MouseSensor, TouchSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
 import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from "@dnd-kit/sortable";
 //#region src/inline-child-table/inline-child-table.tsx
 const headerCell = "px-2 text-[11px] font-medium uppercase tracking-wide text-muted-foreground";
-const announcementsFor = (lines) => {
-	const name = (id) => lines.find((line) => line.id === id)?.description ?? text("line");
+const announcementsFor = (lines, lineName) => {
+	const name = (id) => {
+		const line = lines.find((each) => each.id === id);
+		return line ? lineName(line) : text("line");
+	};
 	const place = (id) => lines.findIndex((line) => line.id === id) + 1;
 	return {
 		onDragStart: ({ active }) => text("pickedUp", name(active.id), place(active.id), lines.length),
@@ -21,15 +23,16 @@ const announcementsFor = (lines) => {
 		onDragCancel: ({ active }) => text("cancelled", name(active.id), place(active.id))
 	};
 };
-const InlineChildTable = ({ lines, onChange, onReorder, vatRate = .21, readOnly, reorderable = !readOnly }) => {
+/** The lines of a record as rows of the given columns, put in order by dragging or from each row's menu. */
+const InlineChildTable = ({ lines, columns, lineName, onReorder, reorderable = Boolean(onReorder), onAdd, onRemove, removable = () => true, lineError, footer }) => {
 	const sensors = useSensors(useSensor(MouseSensor, { activationConstraint: { distance: 4 } }), useSensor(TouchSensor, { activationConstraint: {
 		delay: 250,
 		tolerance: 5
 	} }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
 	const move = (from, to) => {
 		const line = lines[from];
-		if (!line || to < 0 || to >= lines.length || from === to) return;
-		(onReorder ?? ((next) => onChange(next)))(reorder(lines, from, to), {
+		if (!line || !onReorder || to < 0 || to >= lines.length || from === to) return;
+		onReorder(reorder(lines, from, to), {
 			id: line.id,
 			from,
 			to
@@ -39,48 +42,31 @@ const InlineChildTable = ({ lines, onChange, onReorder, vatRate = .21, readOnly,
 		if (!over || active.id === over.id) return;
 		move(lines.findIndex((line) => line.id === active.id), lines.findIndex((line) => line.id === over.id));
 	};
-	const addLine = () => {
-		const product = productAt(lines.length * 3 + 1);
-		onChange([...lines, {
-			id: `new-${lines.length}-${product.id}`,
-			productId: product.id,
-			description: product.name,
-			quantity: 1,
-			unitPriceCents: product.priceCents
-		}]);
-	};
 	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
 		className: "overflow-hidden rounded-lg border border-border bg-background",
+		style: lineGridStyle(columns),
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: `${lineGrid} border-b border-border bg-surface px-2 py-2`,
 				children: [
 					/* @__PURE__ */ jsx("span", {}),
-					/* @__PURE__ */ jsx("span", {
-						className: headerCell,
-						children: text("item")
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: `${headerCell} text-right`,
-						children: text("qty")
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: `${headerCell} text-right`,
-						children: text("unitPrice")
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: `${headerCell} text-right`,
-						children: text("lineTotal")
-					}),
+					columns.map((column) => /* @__PURE__ */ jsx("span", {
+						className: cn(headerCell, column.align === "right" && "text-right"),
+						children: column.label
+					}, column.key)),
 					/* @__PURE__ */ jsx("span", {})
 				]
 			}),
+			lines.length === 0 && /* @__PURE__ */ jsx("p", {
+				className: "px-4 py-3 text-muted-foreground",
+				children: text("noLines")
+			}),
 			/* @__PURE__ */ jsx(DndContext, {
 				sensors,
 				collisionDetection: closestCenter,
 				onDragEnd,
 				accessibility: {
-					announcements: announcementsFor(lines),
+					announcements: announcementsFor(lines, lineName),
 					screenReaderInstructions: { draggable: text("instructions") }
 				},
 				children: /* @__PURE__ */ jsx(SortableContext, {
@@ -88,33 +74,28 @@ const InlineChildTable = ({ lines, onChange, onReorder, vatRate = .21, readOnly,
 					strategy: verticalListSortingStrategy,
 					children: lines.map((line, index) => /* @__PURE__ */ jsx(LineRow, {
 						line,
+						name: lineName(line),
+						columns,
 						position: index,
 						count: lines.length,
 						reorderable,
-						editable: !readOnly,
-						onChange: (patch) => onChange(lines.map((item) => item.id === line.id ? {
-							...item,
-							...patch
-						} : item)),
-						onRemove: () => onChange(lines.filter((item) => item.id !== line.id)),
-						onMove: (to) => move(index, to)
+						onRemove: onRemove && removable(line) ? () => onRemove(line) : void 0,
+						onMove: (to) => move(index, to),
+						error: lineError?.(line)
 					}, line.id))
 				})
 			}),
-			!readOnly && /* @__PURE__ */ jsx("div", {
+			onAdd && /* @__PURE__ */ jsx("div", {
 				className: "border-t border-border bg-surface px-2 py-1.5",
 				children: /* @__PURE__ */ jsxs(Button, {
 					variant: "ghost",
 					size: "sm",
-					onClick: addLine,
+					onClick: onAdd,
 					children: [/* @__PURE__ */ jsx(Plus, { className: "size-3.5" }), text("addLine")]
 				})
 			})
 		]
-	}), /* @__PURE__ */ jsx(TotalsFooter, {
-		lines,
-		vatRate
-	})] });
+	}), footer] });
 };
 //#endregion
 export { InlineChildTable };