@protobase/ui 0.25.2 → 0.25.3

package/dist/compact-table/messages.js

@@ -0,0 +1,18 @@
+import { defineMessages } from "../locale/messages.js";
+//#region src/compact-table/messages.ts
+const text = defineMessages({
+	en: {
+		table: "Table",
+		noRows: "No rows.",
+		rows: (count) => `${count} ${count === 1 ? "row" : "rows"}`,
+		cutOff: ", cut off at the limit"
+	},
+	nl: {
+		table: "Tabel",
+		noRows: "Geen rijen.",
+		rows: (count) => `${count} ${count === 1 ? "rij" : "rijen"}`,
+		cutOff: ", afgekapt bij de limiet"
+	}
+});
+//#endregion
+export { text };

package/dist/data/meta-data.d.ts

@@ -1,5 +1,5 @@
-import { MapLayerModel, PluginRef, ResourcePermissions, SourceRef } from "@protobase/client";
 import { Locale } from "@protobase/schema/internal";
+import { MapLayerModel, PluginRef, ResourcePermissions, SourceRef } from "@protobase/client";
 import { BottomBarModel, ResourceModel, SignInViewModel, UserMenuModel, ViewModel } from "@protobase/schema";
 import { PageModel } from "@protobase/layout";
 //#region src/data/meta-data.d.ts

package/dist/data/use-update-record.js

@@ -1,7 +1,7 @@
 import { keys } from "./query-keys.js";
 import { useClient } from "./api-provider.js";
-import { PreconditionFailedError } from "@protobase/client";
 import { encodeKey } from "@protobase/schema/internal";
+import { PreconditionFailedError } from "@protobase/client";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 //#region src/data/use-update-record.ts
 /**

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

@@ -1,6 +1,7 @@
 import { Button } from "../primitives/button.js";
 import { productAt } from "../mocks/products.js";
 import { lineGrid } 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";
@@ -10,15 +11,14 @@ import { DndContext, KeyboardSensor, MouseSensor, TouchSensor, closestCenter, us
 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 instructions = "To pick up a line, press space or enter on its drag handle. Use the up and down arrow keys to move it, space or enter to drop it, and escape to cancel. The row menu also has Move up and Move down.";
 const announcementsFor = (lines) => {
-	const name = (id) => lines.find((line) => line.id === id)?.description ?? "line";
+	const name = (id) => lines.find((line) => line.id === id)?.description ?? text("line");
 	const place = (id) => lines.findIndex((line) => line.id === id) + 1;
 	return {
-		onDragStart: ({ active }) => `Picked up ${name(active.id)}, line ${place(active.id)} of ${lines.length}.`,
-		onDragOver: ({ active, over }) => over ? `${name(active.id)} is over line ${place(over.id)} of ${lines.length}.` : void 0,
-		onDragEnd: ({ active, over }) => over ? `${name(active.id)} was dropped at line ${place(over.id)} of ${lines.length}.` : `${name(active.id)} was dropped where it started.`,
-		onDragCancel: ({ active }) => `Moving ${name(active.id)} was cancelled. It is back at line ${place(active.id)}.`
+		onDragStart: ({ active }) => text("pickedUp", name(active.id), place(active.id), lines.length),
+		onDragOver: ({ active, over }) => over ? text("over", name(active.id), place(over.id), lines.length) : void 0,
+		onDragEnd: ({ active, over }) => over ? text("dropped", name(active.id), place(over.id), lines.length) : text("droppedAtStart", name(active.id)),
+		onDragCancel: ({ active }) => text("cancelled", name(active.id), place(active.id))
 	};
 };
 const InlineChildTable = ({ lines, onChange, onReorder, vatRate = .21, readOnly, reorderable = !readOnly }) => {
@@ -58,19 +58,19 @@ const InlineChildTable = ({ lines, onChange, onReorder, vatRate = .21, readOnly,
 					/* @__PURE__ */ jsx("span", {}),
 					/* @__PURE__ */ jsx("span", {
 						className: headerCell,
-						children: "Item"
+						children: text("item")
 					}),
 					/* @__PURE__ */ jsx("span", {
 						className: `${headerCell} text-right`,
-						children: "Qty"
+						children: text("qty")
 					}),
 					/* @__PURE__ */ jsx("span", {
 						className: `${headerCell} text-right`,
-						children: "Unit price"
+						children: text("unitPrice")
 					}),
 					/* @__PURE__ */ jsx("span", {
 						className: `${headerCell} text-right`,
-						children: "Line total"
+						children: text("lineTotal")
 					}),
 					/* @__PURE__ */ jsx("span", {})
 				]
@@ -81,7 +81,7 @@ const InlineChildTable = ({ lines, onChange, onReorder, vatRate = .21, readOnly,
 				onDragEnd,
 				accessibility: {
 					announcements: announcementsFor(lines),
-					screenReaderInstructions: { draggable: instructions }
+					screenReaderInstructions: { draggable: text("instructions") }
 				},
 				children: /* @__PURE__ */ jsx(SortableContext, {
 					items: lines.map((line) => line.id),
@@ -107,7 +107,7 @@ const InlineChildTable = ({ lines, onChange, onReorder, vatRate = .21, readOnly,
 					variant: "ghost",
 					size: "sm",
 					onClick: addLine,
-					children: [/* @__PURE__ */ jsx(Plus, { className: "size-3.5" }), "Add line"]
+					children: [/* @__PURE__ */ jsx(Plus, { className: "size-3.5" }), text("addLine")]
 				})
 			})
 		]

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

@@ -4,26 +4,27 @@ import { lineTotalCents } from "../mocks/invoices.js";
 import { lineGrid } from "./columns.js";
 import { LineMenu } from "./line-menu.js";
 import { NumberCell } from "./number-cell.js";
+import { text } from "./messages.js";
 import { GripVertical } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useSortable } from "@dnd-kit/sortable";
 //#region src/inline-child-table/line-row.tsx
-const parseEuros = (text) => Math.round(Number(text.replace(",", ".").replace(/[^0-9.]/g, "")) * 100);
+const parseEuros = (typed) => Math.round(Number(typed.replace(",", ".").replace(/[^0-9.]/g, "")) * 100);
 const LineRow = ({ line, position, count, reorderable, editable, onChange, onRemove, onMove }) => {
 	const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = useSortable({
 		id: line.id,
 		disabled: !reorderable
 	});
 	const menu = [...reorderable ? [{
-		label: "Move up",
+		label: text("moveUp"),
 		disabled: position === 0,
 		onSelect: () => onMove(position - 1)
 	}, {
-		label: "Move down",
+		label: text("moveDown"),
 		disabled: position === count - 1,
 		onSelect: () => onMove(position + 1)
 	}] : [], ...editable ? [{
-		label: "Remove line",
+		label: text("removeLine"),
 		destructive: true,
 		onSelect: onRemove
 	}] : []];
@@ -39,7 +40,7 @@ const LineRow = ({ line, position, count, reorderable, editable, onChange, onRem
 			reorderable ? /* @__PURE__ */ jsx("button", {
 				ref: setActivatorNodeRef,
 				type: "button",
-				"aria-label": `Drag to reorder ${line.description}`,
+				"aria-label": text("dragToReorder", line.description),
 				...attributes,
 				...listeners,
 				style: { touchAction: "none" },
@@ -57,17 +58,17 @@ const LineRow = ({ line, position, count, reorderable, editable, onChange, onRem
 				})]
 			}),
 			editable ? /* @__PURE__ */ jsx(NumberCell, {
-				label: "Quantity",
+				label: text("quantity"),
 				value: line.quantity,
 				format: String,
-				parse: (text) => Math.round(Number(text)),
+				parse: (typed) => Math.round(Number(typed)),
 				onCommit: (quantity) => onChange({ quantity })
 			}) : /* @__PURE__ */ jsx("span", {
 				className: "px-2 text-right tabular-nums",
 				children: line.quantity
 			}),
 			editable ? /* @__PURE__ */ jsx(NumberCell, {
-				label: "Unit price",
+				label: text("unitPrice"),
 				value: line.unitPriceCents,
 				format: (cents) => (cents / 100).toFixed(2),
 				parse: parseEuros,
@@ -81,7 +82,7 @@ const LineRow = ({ line, position, count, reorderable, editable, onChange, onRem
 				children: formatMoney(lineTotalCents(line))
 			}),
 			menu.length > 0 ? /* @__PURE__ */ jsx(LineMenu, {
-				label: `Actions for ${line.description}`,
+				label: text("actionsFor", line.description),
 				items: menu
 			}) : /* @__PURE__ */ jsx("span", {})
 		]

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

@@ -0,0 +1,52 @@
+import { defineMessages } from "../locale/messages.js";
+//#region src/inline-child-table/messages.ts
+const text = defineMessages({
+	en: {
+		instructions: "To pick up a line, press space or enter on its drag handle. Use the up and down arrow keys to move it, space or enter to drop it, and escape to cancel. The row menu also has Move up and Move down.",
+		line: "line",
+		pickedUp: (name, place, count) => `Picked up ${name}, line ${place} of ${count}.`,
+		over: (name, place, count) => `${name} is over line ${place} of ${count}.`,
+		dropped: (name, place, count) => `${name} was dropped at line ${place} of ${count}.`,
+		droppedAtStart: (name) => `${name} was dropped where it started.`,
+		cancelled: (name, place) => `Moving ${name} was cancelled. It is back at line ${place}.`,
+		item: "Item",
+		qty: "Qty",
+		quantity: "Quantity",
+		unitPrice: "Unit price",
+		lineTotal: "Line total",
+		addLine: "Add line",
+		moveUp: "Move up",
+		moveDown: "Move down",
+		removeLine: "Remove line",
+		dragToReorder: (name) => `Drag to reorder ${name}`,
+		actionsFor: (name) => `Actions for ${name}`,
+		subtotal: "Subtotal",
+		vat: (percent) => `VAT ${percent}%`,
+		total: "Total"
+	},
+	nl: {
+		instructions: "Druk op spatie of enter op de sleepgreep om een regel op te pakken. Verplaats hem met de pijltjestoetsen omhoog en omlaag, zet hem neer met spatie of enter, en annuleer met escape. Het regelmenu heeft ook Omhoog en Omlaag.",
+		line: "regel",
+		pickedUp: (name, place, count) => `${name} opgepakt, regel ${place} van ${count}.`,
+		over: (name, place, count) => `${name} is boven regel ${place} van ${count}.`,
+		dropped: (name, place, count) => `${name} is neergezet op regel ${place} van ${count}.`,
+		droppedAtStart: (name) => `${name} is neergezet waar hij begon.`,
+		cancelled: (name, place) => `Verplaatsen van ${name} is geannuleerd. Hij staat weer op regel ${place}.`,
+		item: "Artikel",
+		qty: "Aantal",
+		quantity: "Aantal",
+		unitPrice: "Stukprijs",
+		lineTotal: "Regeltotaal",
+		addLine: "Regel toevoegen",
+		moveUp: "Omhoog",
+		moveDown: "Omlaag",
+		removeLine: "Regel verwijderen",
+		dragToReorder: (name) => `Sleep om ${name} te verplaatsen`,
+		actionsFor: (name) => `Acties voor ${name}`,
+		subtotal: "Subtotaal",
+		vat: (percent) => `Btw ${percent}%`,
+		total: "Totaal"
+	}
+});
+//#endregion
+export { text };

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

@@ -1,5 +1,6 @@
 import { formatMoney } from "../format/money.js";
 import { invoiceTotals } from "../mocks/invoices.js";
+import { text } from "./messages.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/inline-child-table/totals-footer.tsx
 const TotalsFooter = ({ lines, vatRate }) => {
@@ -9,19 +10,15 @@ const TotalsFooter = ({ lines, vatRate }) => {
 		children: [
 			/* @__PURE__ */ jsx("dt", {
 				className: "text-muted-foreground",
-				children: "Subtotal"
+				children: text("subtotal")
 			}),
 			/* @__PURE__ */ jsx("dd", {
 				className: "text-right text-foreground",
 				children: formatMoney(totals.subtotalCents)
 			}),
-			/* @__PURE__ */ jsxs("dt", {
+			/* @__PURE__ */ jsx("dt", {
 				className: "text-muted-foreground",
-				children: [
-					"VAT ",
-					Math.round(vatRate * 100),
-					"%"
-				]
+				children: text("vat", Math.round(vatRate * 100))
 			}),
 			/* @__PURE__ */ jsx("dd", {
 				className: "text-right text-foreground",
@@ -29,7 +26,7 @@ const TotalsFooter = ({ lines, vatRate }) => {
 			}),
 			/* @__PURE__ */ jsx("dt", {
 				className: "mt-1 border-t border-border pt-2 font-semibold text-foreground",
-				children: "Total"
+				children: text("total")
 			}),
 			/* @__PURE__ */ jsx("dd", {
 				className: "mt-1 border-t border-border pt-2 text-right text-[16px] font-semibold text-foreground",

package/dist/invitations/invite-form.js

@@ -2,6 +2,7 @@ import { Input } from "../primitives/input.js";
 import { Button } from "../primitives/button.js";
 import { AccountSection, SectionError } from "../account/account-section.js";
 import { useAction } from "../organizations/use-action.js";
+import { text } from "./messages.js";
 import { LinkNotice } from "./link-notice.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -30,7 +31,7 @@ const InviteForm = ({ title, description, onInvite, beside, children, incomplete
 					className: "flex flex-col gap-2 sm:flex-row",
 					children: [
 						/* @__PURE__ */ jsx(Input, {
-							"aria-label": "Email",
+							"aria-label": text("email"),
 							type: "email",
 							placeholder: "name@example.com",
 							value: email,
@@ -43,7 +44,7 @@ const InviteForm = ({ title, description, onInvite, beside, children, incomplete
 							variant: "primary",
 							loading: busy,
 							disabled: !email.trim() || incomplete,
-							children: "Invite"
+							children: text("invite")
 						})
 					]
 				}), children]

package/dist/invitations/link-notice.js

@@ -1,12 +1,14 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { slotted } from "../locale/slotted.js";
+import { text } from "./messages.js";
+import { jsx } from "react/jsx-runtime";
 //#region src/invitations/link-notice.tsx
 /** The invitation link to pass on, when the app cannot email it. */
-const LinkNotice = ({ link }) => link ? /* @__PURE__ */ jsxs("p", {
+const LinkNotice = ({ link }) => link ? /* @__PURE__ */ jsx("p", {
 	className: "mt-3 break-all rounded-md border bg-muted px-3 py-2 text-xs",
-	children: ["This app cannot send email, so pass this link on yourself. It works once, until the invitation expires: ", /* @__PURE__ */ jsx("span", {
+	children: slotted(text("passLinkOn"), /* @__PURE__ */ jsx("span", {
 		className: "font-mono",
 		children: link
-	})]
+	}))
 }) : null;
 //#endregion
 export { LinkNotice };

package/dist/invitations/messages.js

@@ -0,0 +1,24 @@
+import { defineMessages } from "../locale/messages.js";
+//#region src/invitations/messages.ts
+const text = defineMessages({
+	en: {
+		email: "Email",
+		invite: "Invite",
+		expired: "Expired",
+		until: (date) => `Until ${date}`,
+		sendAgain: "Send again",
+		revoke: "Revoke",
+		passLinkOn: "This app cannot send email, so pass this link on yourself. It works once, until the invitation expires: {}"
+	},
+	nl: {
+		email: "E-mailadres",
+		invite: "Uitnodigen",
+		expired: "Verlopen",
+		until: (date) => `Tot ${date}`,
+		sendAgain: "Opnieuw sturen",
+		revoke: "Intrekken",
+		passLinkOn: "Deze app kan geen e-mail sturen, dus geef deze link zelf door. Die werkt één keer, tot de uitnodiging verloopt: {}"
+	}
+});
+//#endregion
+export { text };

package/dist/invitations/pending-invitation-row.js

@@ -2,6 +2,7 @@ import { formatTag } from "../locale/active-locale.js";
 import { Button } from "../primitives/button.js";
 import { SectionError } from "../account/account-section.js";
 import { useAction } from "../organizations/use-action.js";
+import { text } from "./messages.js";
 import { LinkNotice } from "./link-notice.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -27,7 +28,7 @@ const PendingInvitationRow = ({ email, gives, expiresAt, onResend, onRevoke }) =
 							children: [
 								gives,
 								" · ",
-								expired ? "Expired" : `Until ${new Date(expiresAt).toLocaleDateString(formatTag())}`
+								expired ? text("expired") : text("until", new Date(expiresAt).toLocaleDateString(formatTag()))
 							]
 						})]
 					}),
@@ -35,14 +36,14 @@ const PendingInvitationRow = ({ email, gives, expiresAt, onResend, onRevoke }) =
 						size: "sm",
 						loading: busy,
 						onClick: () => void run(async () => setLink((await onResend()).link)),
-						children: "Send again"
+						children: text("sendAgain")
 					}),
 					/* @__PURE__ */ jsx(Button, {
 						size: "sm",
 						variant: "danger",
 						loading: busy,
 						onClick: () => void run(onRevoke),
-						children: "Revoke"
+						children: text("revoke")
 					})
 				]
 			}),

package/dist/lists/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from "../locale/messages.js";
+//#region src/lists/messages.ts
+const text = defineMessages({
+	en: { showMore: "Show more" },
+	nl: { showMore: "Meer tonen" }
+});
+//#endregion
+export { text };

package/dist/lists/paged-search-list.js

@@ -1,6 +1,7 @@
 import { Input } from "../primitives/input.js";
 import { Button } from "../primitives/button.js";
 import { AccountSection, SectionError } from "../account/account-section.js";
+import { text } from "./messages.js";
 import { Search } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/lists/paged-search-list.tsx
@@ -34,7 +35,7 @@ const PagedSearchList = ({ title, description, searchLabel, placeholder, query,
 			className: "mt-3",
 			loading: list.loading,
 			onClick: () => void list.more(),
-			children: "Show more"
+			children: text("showMore")
 		})
 	]
 });

package/dist/locale/slotted.js

@@ -0,0 +1,14 @@
+import { Fragment } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/locale/slotted.tsx
+/**
+* A built-in text with a `{}` for each element that goes in it, such as a highlighted address, rendered with the
+* elements in their places in order: each language puts them where its sentence needs them.
+*/
+const slotted = (message, ...slots) => {
+	const parts = message.split("{}");
+	if (parts.length !== slots.length + 1) throw new Error(`The text "${message}" has ${parts.length - 1} places for ${slots.length} elements`);
+	return /* @__PURE__ */ jsx(Fragment$1, { children: parts.map((part, index) => /* @__PURE__ */ jsxs(Fragment, { children: [part, index < slots.length && slots[index]] }, index)) });
+};
+//#endregion
+export { slotted };

package/dist/markdown/markdown-editor.js

@@ -1,15 +1,16 @@
 import { Segmented } from "../primitives/segmented.js";
 import { Textarea } from "../primitives/textarea.js";
 import { Markdown } from "./markdown.js";
+import { text } from "./messages.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/markdown/markdown-editor.tsx
-const modes = [{
+const modes = () => [{
 	value: "write",
-	label: "Write"
+	label: text("write")
 }, {
 	value: "preview",
-	label: "Preview"
+	label: text("preview")
 }];
 /**
 * Markdown source in a box that grows with it, as GitHub edits a comment, and a switch to its rendered preview: the
@@ -23,7 +24,7 @@ const MarkdownEditor = ({ value, onChange, label, invalid, placeholder }) => {
 			className: "self-start",
 			children: /* @__PURE__ */ jsx(Segmented, {
 				value: mode,
-				options: modes,
+				options: modes(),
 				onChange: setMode,
 				label
 			})
@@ -37,7 +38,7 @@ const MarkdownEditor = ({ value, onChange, label, invalid, placeholder }) => {
 			className: "min-h-[7.5rem] rounded-md border border-border px-2.5 py-1.5",
 			children: value.trim() === "" ? /* @__PURE__ */ jsx("span", {
 				className: "text-faint-foreground",
-				children: "Nothing to preview"
+				children: text("nothingToPreview")
 			}) : /* @__PURE__ */ jsx(Markdown, { source: value })
 		})]
 	});

package/dist/markdown/messages.js

@@ -0,0 +1,16 @@
+import { defineMessages } from "../locale/messages.js";
+//#region src/markdown/messages.ts
+const text = defineMessages({
+	en: {
+		write: "Write",
+		preview: "Preview",
+		nothingToPreview: "Nothing to preview"
+	},
+	nl: {
+		write: "Schrijven",
+		preview: "Voorbeeld",
+		nothingToPreview: "Niets om te tonen"
+	}
+});
+//#endregion
+export { text };

package/dist/organizations/all-organizations.js

@@ -1,4 +1,5 @@
 import { useAuth } from "../auth/auth-provider.js";
+import { text } from "./messages.js";
 import { useAction } from "./use-action.js";
 import { PagedSearchList } from "../lists/paged-search-list.js";
 import { usePagedSearch } from "../lists/use-paged-search.js";
@@ -11,17 +12,17 @@ import { jsx } from "react/jsx-runtime";
 const AllOrganizations = ({ basePath, currentId }) => {
 	const { session } = useAuth();
 	const [query, setQuery] = useState("");
-	const search = useCallback((text, offset) => session.organizations.search(text, offset).then((page) => ({
+	const search = useCallback((term, offset) => session.organizations.search(term, offset).then((page) => ({
 		items: page.organizations,
 		total: page.total
 	})), [session]);
 	const list = usePagedSearch(search, query);
 	const { busy, error, run } = useAction();
 	return /* @__PURE__ */ jsx(PagedSearchList, {
-		title: "All organizations",
-		description: "Every organization in the app. Your global roles let you work in any of them, with what those roles allow there. Opening one you are not a member of is written to the audit log.",
-		searchLabel: "Find an organization",
-		placeholder: "Name or slug",
+		title: text("allOrganizations"),
+		description: text("allOrganizationsDescription"),
+		searchLabel: text("findOrganization"),
+		placeholder: text("nameOrSlug"),
 		query,
 		onQuery: setQuery,
 		list,

package/dist/organizations/app-roles-picker.js

@@ -1,5 +1,6 @@
 import { cn } from "../lib/cn.js";
 import { Checkbox } from "../primitives/checkbox.js";
+import { text } from "./messages.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/organizations/app-roles-picker.tsx
 /**
@@ -12,7 +13,7 @@ const AppRolesPicker = ({ roles, selected, grantable, disabled, onChange }) => /
 		const held = selected.includes(role.name);
 		const locked = disabled || !grantable.has(role.name);
 		return /* @__PURE__ */ jsxs("label", {
-			title: locked && !disabled ? "You cannot give or take away this role" : void 0,
+			title: locked && !disabled ? text("cannotChangeRole") : void 0,
 			className: cn("inline-flex items-center gap-1.5", locked && "text-muted-foreground"),
 			children: [/* @__PURE__ */ jsx(Checkbox, {
 				checked: held,