@protobase/ui 0.21.7 → 0.21.9

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

@@ -0,0 +1,65 @@
+import { humanize } from "../../live/naming.js";
+import { recordKey } from "../../live/model-helpers.js";
+import { rowAllows } from "../permissions.js";
+import { relationTarget } from "../related-opens.js";
+//#region src/app/embedded-list/embedded-row-targets.ts
+const singularOf = (model, view) => (view?.names?.singular ?? humanize(model.name)).toLowerCase();
+/**
+* Where a table row of an embedded list leads, and its menu's items. A row opens its own record, or with `opens` the
+* record that relation points at when it holds one; its menu then opens that record and edits, or for a user who may
+* not, opens the row's own.
+*/
+const embeddedRowTargets = ({ model, view, opens, resources, views, canUpdate }) => {
+	const own = (row) => ({
+		kind: "record",
+		resource: model.name,
+		key: recordKey(model, row)
+	});
+	const farName = opens && model.fields[opens]?.relation?.resource;
+	const far = farName ? resources[farName] : void 0;
+	const other = (row) => {
+		const key = opens && far ? relationTarget(row, opens) : void 0;
+		return far && key !== void 0 ? {
+			kind: "record",
+			resource: far.name,
+			key
+		} : void 0;
+	};
+	const address = (row) => other(row) ?? own(row);
+	const singular = singularOf(model, view);
+	const actions = (linkTo) => {
+		const openOwn = {
+			label: `Open ${singular}`,
+			link: (row) => linkTo(own(row))
+		};
+		if (!far) return [openOwn];
+		const editable = (row) => canUpdate && rowAllows(row, "update");
+		return [
+			{
+				label: `Open ${singularOf(far, views[far.name])}`,
+				available: (row) => other(row) !== void 0,
+				link: (row) => linkTo(other(row))
+			},
+			{
+				label: `Edit ${singular}`,
+				available: editable,
+				link: (row) => linkTo({
+					kind: "record",
+					resource: model.name,
+					key: recordKey(model, row),
+					edit: true
+				})
+			},
+			{
+				...openOwn,
+				available: (row) => !editable(row)
+			}
+		];
+	};
+	return {
+		address,
+		actions
+	};
+};
+//#endregion
+export { embeddedRowTargets };

package/dist/app/export/cells.js

@@ -1,3 +1,4 @@
+import { viewerZone, zoneOffset } from "../../format/zone.js";
 import { fileShown, isStoredFile } from "../../live/file-values.js";
 import { displayValue } from "../../live/display-value.js";
 //#region src/app/export/cells.ts
@@ -57,17 +58,18 @@ const numberCell = (column, value, mode) => {
 		value: number
 	};
 };
-const dateCell = (type, value, mode) => {
+const dateCell = (type, value, mode, zone) => {
 	const ms = Date.parse(String(value));
 	if (Number.isNaN(ms)) return text(String(value));
+	const clock = type === "timestamp" && mode === "shown" ? ms + zoneOffset(ms, zone) : ms;
 	return {
 		kind: "number",
-		value: excelSerial(ms),
+		value: excelSerial(clock),
 		format: dateFormats[mode][type]
 	};
 };
 /** A value as one typed Excel cell: numbers, dates and booleans as such, labels or stored values as text. */
-const xlsxCell = (column, value, labels, mode) => {
+const xlsxCell = (column, value, labels, mode, zone = viewerZone()) => {
 	if (isEmpty(value)) return empty;
 	const { field } = column;
 	switch (field.type) {
@@ -79,7 +81,7 @@ const xlsxCell = (column, value, labels, mode) => {
 		case "bigint":
 		case "decimal": return numberCell(column, value, mode);
 		case "date":
-		case "timestamp": return dateCell(field.type, value, mode);
+		case "timestamp": return dateCell(field.type, value, mode, zone);
 		case "relation":
 			if (mode === "shown") return text(relationLabel(column, value, labels));
 			return typeof value === "number" ? {

package/dist/app/field-editor.js

@@ -7,7 +7,8 @@ import { fromDraft, isEditable, toFieldDraft } from "../live/field-values.js";
 import { Switch } from "../primitives/switch.js";
 import { Textarea } from "../primitives/textarea.js";
 import { isMarkdown } from "../markdown/markdown-hint.js";
-import { displayValue } from "../live/display-value.js";
+import { contactFormat, contactInputProps } from "../live/contact-links.js";
+import { displayValue, valueTitle } from "../live/display-value.js";
 import { AppLink } from "./use-app-address.js";
 import { RelationPicker } from "./relation-picker.js";
 import { SensitiveField } from "./sensitive-field.js";
@@ -17,6 +18,7 @@ import { WidgetPart } from "./field-types/widget-part.js";
 import { Markdown } from "../markdown/markdown.js";
 import { MarkdownEditor } from "../markdown/markdown-editor.js";
 import { numeric, numericInputProps } from "./numeric-input.js";
+import { ContactLink } from "../live/contact-link.js";
 import { ArrowUpRight } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { enumLabel } from "@protobase/schema";
@@ -95,7 +97,16 @@ const BuiltInEditor = ({ field, hints, value, stored, relationLabel, relationTo,
 		source: stored,
 		className: "py-1.5"
 	});
+	const contact = field.type === "text" ? contactFormat(hints) : void 0;
+	if ((!isEditable(field) || locked) && contact && typeof stored === "string" && stored !== "") return /* @__PURE__ */ jsx("div", {
+		className: "min-w-0 break-words py-1.5",
+		children: /* @__PURE__ */ jsx(ContactLink, {
+			format: contact,
+			value: stored
+		})
+	});
 	if (!isEditable(field) || locked) return /* @__PURE__ */ jsx("div", {
+		title: valueTitle(field, stored),
 		className: cn("py-1.5 tabular-nums", field.type === "decimal" || field.type === "integer" ? "font-medium" : "text-muted-foreground", multiline && "whitespace-pre-line break-words"),
 		children: displayValue(field, stored, hints)
 	});
@@ -133,6 +144,7 @@ const BuiltInEditor = ({ field, hints, value, stored, relationLabel, relationTo,
 		placeholder,
 		className: cn(numeric.has(field.type) && "text-right tabular-nums"),
 		...numericInputProps(field.type),
+		...contactInputProps(contact),
 		value: String(value),
 		onChange: (event) => onChange(event.target.value)
 	});

package/dist/app/import/convert.js

@@ -1,3 +1,4 @@
+import { parseNumberText } from "../../format/number-text.js";
 import { cellText, isEmptyCell, isSheetDate } from "./sheet-cell.js";
 import { enumLabel } from "@protobase/schema";
 //#region src/app/import/convert.ts
@@ -10,17 +11,6 @@ const problem = (text) => ({
 	problem: text
 });
 const quoted = (cell) => `“${cellText(cell)}”`;
-const escapeRegExp = (text) => text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-/**
-* A number written as text, as a plain decimal (`-1234.5`): digits grouped by thousands with the other separator or
-* spaces, and the `decimal` separator before the fraction. Undefined when the text is no such number.
-*/
-const parseNumberText = (text, decimal) => {
-	const group = `[${escapeRegExp(decimal === "." ? "," : ".")}\\s\\u00a0\\u202f']`;
-	const match = new RegExp(`^([-+]?)(\\d{1,3}(?:${group}\\d{3})+|\\d+)(?:${escapeRegExp(decimal)}(\\d+))?$`).exec(text.trim());
-	if (match) return `${match[1] === "-" ? "-" : ""}${match[2].replace(/\D/g, "")}${match[3] ? `.${match[3]}` : ""}`;
-	if (decimal === "." && /^[-+]?\d+(\.\d+)?e[-+]?\d+$/i.test(text.trim())) return String(Number(text.trim()));
-};
 const toNumberText = (cell, options) => {
 	if (typeof cell === "number") return String(cell);
 	if (typeof cell === "string") return parseNumberText(cell, options.decimal);
@@ -148,4 +138,4 @@ const convertCell = (field, hints, cell, options) => {
 	}
 };
 //#endregion
-export { convertCell, parseNumberText };
+export { convertCell };

package/dist/app/import/locale-formats.js

@@ -1,10 +1,11 @@
+import { localeDecimal } from "../../format/number-text.js";
 //#region src/app/import/locale-formats.ts
 /**
 * How the browser's locale writes numbers and dates, as the import's starting choice: its decimal separator, and whether
 * its dates put the day or the month first. The user sees both and can change them.
 */
 const localeFormats = (locale) => {
-	const decimal = new Intl.NumberFormat(locale).formatToParts(1.5).find((part) => part.type === "decimal")?.value === "," ? "," : ".";
+	const decimal = localeDecimal(locale);
 	const parts = new Intl.DateTimeFormat(locale).formatToParts(new Date(2026, 3, 3)).map((part) => part.type);
 	return {
 		decimal,

package/dist/app/incoming-card.js

@@ -0,0 +1,35 @@
+import { Skeleton } from "../primitives/skeleton.js";
+import { formatInt } from "../format/number.js";
+import { SidebarCard } from "../record-view/record-sidebar.js";
+import { useAdminMeta } from "./meta-gate.js";
+import { AppLink } from "./use-app-address.js";
+import { incomingAddress, incomingRelations } from "./incoming-relations.js";
+import { useIncomingCounts } from "./use-incoming-counts.js";
+import { ChevronRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/incoming-card.tsx
+/** The rail's card of the records pointing at this one: per resource and field, how many, linking to them in their list. */
+const IncomingCard = ({ model, recordKey, layout, lines }) => {
+	const { resources, views } = useAdminMeta();
+	const counts = useIncomingCounts(incomingRelations(model, resources, views, layout, lines), resources, recordKey);
+	if (counts.length === 0) return null;
+	return /* @__PURE__ */ jsx(SidebarCard, {
+		title: "Related records",
+		children: /* @__PURE__ */ jsx("ul", {
+			className: "-mx-2",
+			children: counts.map(({ relation, count }) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(AppLink, {
+				to: incomingAddress(relation, recordKey),
+				className: "group flex items-center justify-between gap-3 rounded-md px-2 py-2 hover:bg-muted",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "min-w-0 truncate font-medium text-primary-text",
+					children: relation.label
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "flex shrink-0 items-center gap-1 tabular-nums text-muted-foreground",
+					children: [count === void 0 ? /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-6" }) : `${formatInt(count.count)}${count.exact ? "" : "+"}`, /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 text-faint-foreground group-hover:text-foreground" })]
+				})]
+			}) }, `${relation.resource}.${relation.field}`))
+		})
+	});
+};
+//#endregion
+export { IncomingCard };

package/dist/app/incoming-relations.js

@@ -0,0 +1,36 @@
+import { humanize } from "../live/naming.js";
+import { createWhere, printFilter } from "@protobase/schema";
+//#region src/app/incoming-relations.ts
+const where$1 = createWhere();
+/**
+* The relations that point at records of `model`, as the rail lists them by default: each filterable relation of
+* another resource the user can see (a hidden resource or field is not in the meta), to a record of one key column.
+* Left out are a resource's tenant, which every record holds, the lines drawn on the page, and what an `l.related`
+* section of the page already lists. Two fields of one resource are told apart by their labels.
+*/
+const incomingRelations = (model, resources, views, layout, lines) => {
+	if (model.primaryKey.length !== 1) return [];
+	const listed = new Set(layout.flatMap((item) => item.kind === "related" && !item.through ? [`${item.resource}.${item.field}`] : []));
+	const found = Object.values(resources).flatMap((source) => Object.values(source.fields).filter((field) => field.type === "relation" && field.relation?.resource === model.name && field.relation.columns.length === 1 && field.filterable).filter((field) => field.name !== source.tenant && source.name !== lines?.name && !listed.has(`${source.name}.${field.name}`)).map((field) => ({
+		source,
+		field: field.name
+	})));
+	return found.map(({ source, field }) => {
+		const view = views[source.name];
+		const plural = view?.names?.plural ?? humanize(source.name);
+		const several = found.filter((other) => other.source.name === source.name).length > 1;
+		return {
+			resource: source.name,
+			field,
+			label: several ? `${plural} (${view?.fields[field]?.label ?? humanize(field)})` : plural
+		};
+	});
+};
+/** The list of the records that point at `key` through `relation`, filtered as its list's address reads. */
+const incomingAddress = (relation, key) => ({
+	kind: "list",
+	resource: relation.resource,
+	filter: printFilter(where$1.eq(relation.field, key))
+});
+//#endregion
+export { incomingAddress, incomingRelations };

package/dist/app/list-chart.js

@@ -1,3 +1,4 @@
+import { viewerZone } from "../format/zone.js";
 import { useSeries } from "../data/use-aggregates.js";
 import { ActivityChart } from "../activity-chart/activity-chart.js";
 import { useState } from "react";
@@ -18,7 +19,8 @@ const ListChart = ({ resource, chart, title, noun, filter }) => {
 		field: chart.field,
 		range,
 		granularity,
-		filter
+		filter,
+		timeZone: viewerZone()
 	}).data?.points.map((point) => ({
 		at: Date.parse(`${point.bucket}Z`),
 		count: point.count

package/dist/app/list-page.js

@@ -31,6 +31,7 @@ import { SignInPrompt } from "../auth/sign-in-prompt.js";
 import { relatedColumnLoads } from "./related-dots/dot-card.js";
 import { useDisplayRows } from "./displays/use-display-rows.js";
 import { BoardDisplay } from "./displays/board-display.js";
+import { CalendarDisplay } from "./displays/calendar-display.js";
 import { CustomDisplay } from "./displays/custom-display.js";
 import { MapDisplay } from "./displays/map-display.js";
 import { DisplaySwitch, SortMenu } from "./displays/display-controls.js";
@@ -115,7 +116,7 @@ const ListPage = ({ address }) => {
 };
 const LoadedList = ({ model, address, scope, heading }) => {
 	const meta = useAdminMeta();
-	const { set, go, href } = useAppAddress();
+	const { set, listTo, go, href } = useAppAddress();
 	const resource = model.name;
 	const view = meta.views[resource];
 	const fields = useMemo(() => widgetFields(view, model), [view, model]);
@@ -202,10 +203,11 @@ const LoadedList = ({ model, address, scope, heading }) => {
 		setFilter(state, text ? [...others, where$1.search(text)] : others);
 	};
 	const plural = view?.names?.plural ?? humanize(resource);
-	const sortMenu = display && /* @__PURE__ */ jsx(SortMenu, {
+	const sorted = display?.kind === "calendar" ? void 0 : display;
+	const sortMenu = sorted && /* @__PURE__ */ jsx(SortMenu, {
 		model,
 		view,
-		display,
+		display: sorted,
 		orderBy,
 		onChange: (next) => set({ orderBy: next })
 	});
@@ -234,12 +236,12 @@ const LoadedList = ({ model, address, scope, heading }) => {
 		onRemove: (key) => setFilter(removeChip(state, key)),
 		onClear: () => setFilter(emptyFilterState)
 	});
-	const phoneSort = display && /* @__PURE__ */ jsx(FilterSection, {
+	const phoneSort = sorted && /* @__PURE__ */ jsx(FilterSection, {
 		title: "Sort",
 		children: /* @__PURE__ */ jsx(SortMenu, {
 			model,
 			view,
-			display,
+			display: sorted,
 			orderBy,
 			onChange: (next) => set({ orderBy: next }),
 			className: "min-h-11 w-full"
@@ -425,6 +427,15 @@ const LoadedList = ({ model, address, scope, heading }) => {
 			filter: loadFilter,
 			orderBy
 		});
+		if (display.kind === "calendar") return /* @__PURE__ */ jsx(CalendarDisplay, {
+			model,
+			view,
+			display,
+			fields: loaded,
+			filter: loadFilter,
+			at: address.calendar,
+			linkTo: (calendar) => listTo({ calendar })
+		});
 		return /* @__PURE__ */ jsx(CustomDisplay, {
 			display,
 			list: displayRows

package/dist/app/pages/field-value.js

@@ -3,13 +3,15 @@ import { keys } from "../../data/query-keys.js";
 import { useClient } from "../../data/api-provider.js";
 import { fileShown, shownImage } from "../../live/file-values.js";
 import { isMarkdown } from "../../markdown/markdown-hint.js";
-import { displayValue } from "../../live/display-value.js";
+import { contactFormat } from "../../live/contact-links.js";
+import { displayValue, valueTitle } from "../../live/display-value.js";
 import { useAdminMeta } from "../meta-gate.js";
 import { AppLink } from "../use-app-address.js";
 import { FileImage } from "../../live/file-image.js";
 import { useShownWidget } from "../field-types/shown-widget.js";
 import { WidgetPart } from "../field-types/widget-part.js";
 import { Markdown } from "../../markdown/markdown.js";
+import { ContactLink } from "../../live/contact-link.js";
 import { fetchLabels } from "../../live/relation-labels.js";
 import { ValueBadge } from "../value-badge.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -74,12 +76,18 @@ const BuiltInValue = ({ model, field, value, format, relationLabel }) => {
 	}
 	if (isMarkdown(field, hints)) return /* @__PURE__ */ jsx(Markdown, { source: String(value) });
 	const text = displayValue(field, value, hints);
+	const contact = field.type === "text" ? contactFormat(hints) : void 0;
+	if (contact) return /* @__PURE__ */ jsx(ContactLink, {
+		format: contact,
+		value: text
+	});
 	if (field.type === "enum" || hints.format === "badge") return /* @__PURE__ */ jsx(ValueBadge, {
 		value,
 		hints,
 		children: text
 	});
 	return /* @__PURE__ */ jsx("span", {
+		title: valueTitle(field, value),
 		className: cn(hints.format === "code" && "font-mono text-xs", (field.type === "decimal" || field.type === "integer") && "tabular-nums", hints.multiline && "whitespace-pre-line break-words"),
 		children: text
 	});

package/dist/app/pages/record-actions.js

@@ -1,4 +1,7 @@
+import { useTopBarSlot } from "../../app-shell/top-bar-slot.js";
+import "../../app-shell/top-bar.js";
 import { ActionRail } from "../../record-view/action-rail.js";
+import { ActionMenu } from "../../record-view/action-menu.js";
 import { AppLink, useAppAddress } from "../use-app-address.js";
 import { ActionPrompt, asksFirst } from "./action-prompt.js";
 import { useActionRunner } from "./use-run-action.js";
@@ -6,14 +9,17 @@ import { actionIcon } from "../action-icon.js";
 import { useState } from "react";
 import { Pencil, Trash2 } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
 //#region src/app/pages/record-actions.tsx
 /**
 * The record page's actions in one rail: Edit, a link to the form at `edit`, when the page offers it; the view's named
 * actions, run like the Action block runs them, a delete among them returning to the list; and the record's own Delete,
-* `onDelete`, unless a named action deletes already.
+* `onDelete`, unless a named action deletes already. On a mobile screen they sit in the top bar's menu instead, at hand
+* however long the record is, when the shell has a top bar.
 */
 const RecordActions = ({ model, stored, recordKey, edit, onDelete }) => {
 	const { go } = useAppAddress();
+	const slot = useTopBarSlot();
 	const scope = {
 		model,
 		record: stored.record,
@@ -39,8 +45,9 @@ const RecordActions = ({ model, stored, recordKey, edit, onDelete }) => {
 		...edit ? [{
 			name: "Edit",
 			icon: Pencil,
-			render: ({ className, children }) => /* @__PURE__ */ jsx(AppLink, {
+			render: ({ className, children, role }) => /* @__PURE__ */ jsx(AppLink, {
 				to: edit,
+				role,
 				className,
 				children
 			})
@@ -54,20 +61,31 @@ const RecordActions = ({ model, stored, recordKey, edit, onDelete }) => {
 		}] : []
 	];
 	if (actions.length === 0) return null;
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ActionRail, { actions }), asking && /* @__PURE__ */ jsx(ActionPrompt, {
-		action: asking,
-		label: asking.label,
-		danger: asking.run?.kind === "delete",
-		onCancel: () => setAsking(void 0),
-		onConfirm: () => {
-			setAsking(void 0);
-			runner.run(asking);
-		},
-		onSubmit: async (values) => {
-			await runner.submit(asking, values);
-			setAsking(void 0);
-		}
-	})] });
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx("div", {
+			className: slot ? "max-md:hidden" : void 0,
+			children: /* @__PURE__ */ jsx(ActionRail, { actions })
+		}),
+		slot && createPortal(/* @__PURE__ */ jsx(ActionMenu, {
+			actions,
+			label: "Record actions",
+			className: "inline-flex size-11 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted md:hidden"
+		}), slot),
+		asking && /* @__PURE__ */ jsx(ActionPrompt, {
+			action: asking,
+			label: asking.label,
+			danger: asking.run?.kind === "delete",
+			onCancel: () => setAsking(void 0),
+			onConfirm: () => {
+				setAsking(void 0);
+				runner.run(asking);
+			},
+			onSubmit: async (values) => {
+				await runner.submit(asking, values);
+				setAsking(void 0);
+			}
+		})
+	] });
 };
 //#endregion
 export { RecordActions };

package/dist/app/pages/use-run-action.js

@@ -12,10 +12,10 @@ import { fillAddress } from "@protobase/schema/internal";
 const message = (error) => error instanceof Error ? error.message : "Something went wrong";
 /**
 * The named actions of `resource`'s view, ready to run on `scope` (the record they act on): built-in behaviour first
-* (`update`, `delete`, `link`), else the handler the project registered under the action's name. An update whose values
-* the record holds already is left out, and so is a link to a URL the record holds while it holds none. `blocked` says
-* why one cannot run; `afterRun` hears about every action that succeeded. `submit` runs one with the answers to its
-* inputs and throws its failure, for the dialog to show.
+* (`update`, `delete`, `link`, and `ai`, which the server runs), else the handler the project registered under the
+* action's name. An update whose values the record holds already is left out, and so is a link to a URL the record
+* holds while it holds none. `blocked` says why one cannot run; `afterRun` hears about every action that succeeded.
+* `submit` runs one with the answers to its inputs and throws its failure, for the dialog to show.
 */
 const useActionRunner = (resource, scope, afterRun) => {
 	const { views } = useAdminMeta();
@@ -30,8 +30,9 @@ const useActionRunner = (resource, scope, afterRun) => {
 	const actions = (views[resource]?.actions ?? []).flatMap((action) => actionFor(action, scope?.record) ?? []);
 	const blocked = (action) => {
 		const kind = action.run?.kind;
-		if ((kind === "update" || kind === "delete") && !scope) return "Needs a record";
-		if (kind === "update" && (!can(permissions, "update") || scope?.permissions?.update === false)) return "You cannot change this record";
+		if ((kind === "update" || kind === "delete" || kind === "ai") && !scope) return "Needs a record";
+		if ((kind === "update" || kind === "ai") && (!can(permissions, "update") || scope?.permissions?.update === false)) return "You cannot change this record";
+		if (action.run?.kind === "ai" && scope?.permissions?.fields?.[action.run.writes] === "read") return "You cannot change this record";
 		if (kind === "delete" && (!can(permissions, "delete") || scope?.permissions?.delete === false)) return "You cannot delete this record";
 		if (!action.run && !handlers?.[action.name]) return `The app has no handler for "${action.name}"`;
 		const custom = action.inputs?.find((input) => input.kind === "custom" && !components?.[input.component ?? ""]);
@@ -46,6 +47,7 @@ const useActionRunner = (resource, scope, afterRun) => {
 		}
 		if (run?.kind === "update") await client.update(resource, scope.key, run.values, scope.etag ?? "*");
 		else if (run?.kind === "delete") await client.remove(resource, scope.key, { etag: scope.etag });
+		else if (run?.kind === "ai") await client.generate(resource, scope.key, action.name);
 		else await handlers[action.name]({
 			resource,
 			record: scope?.record,