@protobase/ui 0.19.2 → 0.19.4

package/dist/app/record-page.js

@@ -1,7 +1,6 @@
 import { cn } from "../lib/cn.js";
 import { inApp } from "../app-shell/breadcrumb.js";
 import { useAuth } from "../auth/auth-provider.js";
-import { formatRelativeTime } from "../format/date.js";
 import { Button, buttonClass } from "../primitives/button.js";
 import { keys } from "../data/query-keys.js";
 import { useClient } from "../data/api-provider.js";
@@ -42,7 +41,7 @@ import { useRecordEditor } from "./use-record-editor.js";
 import { useRelatedRecords } from "./use-related-records.js";
 import { RelatedSection } from "./related-section.js";
 import { Fragment, useMemo } from "react";
-import { Check, Pencil } from "lucide-react";
+import { Check } from "lucide-react";
 import { isApiError } from "@protobase/client";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useQueryClient } from "@tanstack/react-query";
@@ -50,9 +49,8 @@ import { enumLabel } from "@protobase/schema";
 //#region src/app/record-page.tsx
 const hidden = (model, name) => name === model.tenant || model.primaryKey.includes(name);
 /**
-* The view's layout, or one section with the editable fields when the view has none. A user who may only read the
-* resource has every field read-only, so they get every field, locked, rather than an empty section; so does the read
-* view, which shows the record rather than what can be changed.
+* The view's layout, or one section with the editable fields when the view has none. The read view, which is all a
+* user who may only read the resource gets, shows every field: the record rather than what can be changed.
 */
 const layoutFor = (model, view, read) => {
 	if (view && view.layout.length > 0) return view.layout;
@@ -148,9 +146,10 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 	const { fields: fieldTypes } = useProjectUi();
 	const layout = layoutFor(model, view, shown === "read");
 	const sidebarFields = layout.flatMap((item) => item.kind === "sidebar" ? item.fields : []);
-	const status = model.fields.status?.type === "enum" ? String(stored.record.status) : void 0;
+	const hasStatus = model.fields.status?.type === "enum";
+	const statusValue = stored.record.status;
+	const status = hasStatus && statusValue !== null && statusValue !== void 0 && statusValue !== "" ? String(statusValue) : void 0;
 	const updatedAt = auditField(model, "updated");
-	const updated = updatedAt && stored.record[updatedAt] ? Math.max(0, Math.round((Date.now() - Date.parse(String(stored.record[updatedAt]))) / 1e3)) : void 0;
 	const hint = (name) => view?.fields[name];
 	const visible = (name) => fieldAccess(stored.permissions, name) !== "hidden";
 	const fieldView = (name) => {
@@ -251,30 +250,18 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 	const save = async () => {
 		if (await editor.save() && leavesForm) go(readAddress, { replace: true });
 	};
-	const deleteButton = canDelete && /* @__PURE__ */ jsx(Button, {
-		variant: "danger",
-		className: "max-md:min-h-11",
-		onClick: () => void remove.start({
-			key: recordKey,
-			title,
-			etag: stored.etag,
-			snapshot: stored.record
-		}),
-		children: "Delete"
-	});
-	const saveControls = offersEdit ? /* @__PURE__ */ jsxs(Fragment$1, { children: [deleteButton, /* @__PURE__ */ jsxs(AppLink, {
-		to: editAddress,
-		className: cn(buttonClass({ variant: "primary" }), "max-md:min-h-11 max-md:flex-1"),
-		children: [/* @__PURE__ */ jsx(Pencil, {
-			className: "size-3.5",
-			"aria-hidden": true
-		}), "Edit"]
-	})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+	const startDelete = canDelete ? () => void remove.start({
+		key: recordKey,
+		title,
+		etag: stored.etag,
+		snapshot: stored.record
+	}) : void 0;
+	const formControls = shown === "form" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		editor.dirty && /* @__PURE__ */ jsx("span", {
 			className: "text-xs text-muted-foreground",
 			children: "Unsaved changes"
 		}),
-		editor.dirty && canUpdate && !leavesForm && /* @__PURE__ */ jsx(Button, {
+		editor.dirty && !leavesForm && /* @__PURE__ */ jsx(Button, {
 			className: "max-md:min-h-11",
 			disabled: editor.saving,
 			onClick: editor.discard,
@@ -286,8 +273,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 			onClick: (event) => inApp(event) && editor.discard(),
 			children: "Cancel"
 		}),
-		deleteButton,
-		canUpdate && /* @__PURE__ */ jsxs(Button, {
+		/* @__PURE__ */ jsxs(Button, {
 			variant: "primary",
 			className: "max-md:min-h-11 max-md:flex-1",
 			loading: editor.saving,
@@ -306,16 +292,17 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 					className: "mx-auto max-w-[1100px] px-4 pb-8 pt-6 md:px-10 md:py-8",
 					children: [
 						/* @__PURE__ */ jsx(RecordHeader, {
-							collection: view?.names?.plural ?? humanize(model.name),
 							title,
-							status: {
-								label: status ? enumLabel(status, hint("status")?.valueLabels) : singular,
-								tone: status ? toneFor(status) : "neutral"
+							status: status ? {
+								label: enumLabel(status, hint("status")?.valueLabels),
+								tone: toneFor(status)
+							} : hasStatus ? void 0 : {
+								label: singular,
+								tone: "neutral"
 							},
-							lastEditedBy: { ago: updated === void 0 ? "recently" : formatRelativeTime(updated) },
 							actions: /* @__PURE__ */ jsx("div", {
 								className: "hidden items-center gap-4 md:flex",
-								children: saveControls
+								children: formControls
 							})
 						}),
 						editor.message && /* @__PURE__ */ jsx("div", {
@@ -411,7 +398,9 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 									/* @__PURE__ */ jsx(RecordActions, {
 										model,
 										stored,
-										recordKey
+										recordKey,
+										edit: offersEdit ? editAddress : void 0,
+										onDelete: startDelete
 									}),
 									firstSidebar === -1 && summary,
 									layout.map((item, index) => {
@@ -448,9 +437,9 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 					]
 				})
 			}),
-			(editor.dirty || canDelete || canUpdate) && /* @__PURE__ */ jsx("div", {
+			formControls && /* @__PURE__ */ jsx("div", {
 				className: "sticky bottom-[var(--pb-sticky-bottom,0px)] z-20 flex shrink-0 items-center gap-2 border-t bg-background p-3 md:hidden",
-				children: saveControls
+				children: formControls
 			})
 		]
 	});

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

@@ -1,4 +1,4 @@
-import { PluginRef, ResourcePermissions, SourceRef } from "@protobase/client";
+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
@@ -27,9 +27,10 @@ export type MetaData = {
     dsn: string;
     environment?: string;
   };
-  /** The map style the record page's maps are drawn with, when the app has one (see `MapSection`). */
+  /** The map style the app's maps are drawn with, and the layers they may switch to, when the app has one (see `MapSection`). */
   maps?: {
     style: string;
+    layers?: MapLayerModel[];
   };
   /** The hosts besides the app's own whose images are drawn with the page's referrer (see `FileImage`). */
   files?: {

package/dist/format/date.js

@@ -19,19 +19,6 @@ const time = new Intl.DateTimeFormat("en-GB", {
 const formatDate = (ms) => day.format(ms);
 const formatDayShort = (ms) => dayShort.format(ms);
 const formatDateTime = (ms) => `${day.format(ms)}, ${time.format(ms)}`;
-const relative = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
-const units = [
-	["year", 31536e3],
-	["month", 2592e3],
-	["day", 86400],
-	["hour", 3600],
-	["minute", 60]
-];
-/** "5 minutes ago", "yesterday", "3 years ago"; `seconds` is how long ago it was. */
-const formatRelativeTime = (seconds) => {
-	const [unit, size] = units.find(([, size]) => seconds >= size) ?? ["second", 1];
-	if (unit === "second" && seconds < 45) return "just now";
-	return relative.format(-Math.floor(seconds / size), unit);
-};
+new Intl.RelativeTimeFormat("en", { numeric: "auto" });
 //#endregion
-export { formatDate, formatDateTime, formatDayShort, formatRelativeTime };
+export { formatDate, formatDateTime, formatDayShort };

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.19.2";
+var version = "0.19.4";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };

package/dist/record-view/action-rail.js

@@ -1,5 +1,7 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/record-view/action-rail.tsx
+const itemClass = "flex min-h-11 items-center gap-2 rounded-md border border-border-strong px-3 text-left hover:bg-surface disabled:cursor-default disabled:opacity-60 md:min-h-0 md:w-full md:items-start md:gap-3 md:rounded-none md:border-0 md:px-4 md:py-3";
 /** Named actions with one-line descriptions; on phones a row of buttons, from `md` a list. */
 const ActionRail = ({ actions }) => /* @__PURE__ */ jsxs("div", {
 	className: "overflow-hidden rounded-lg border border-border bg-background",
@@ -8,20 +10,29 @@ const ActionRail = ({ actions }) => /* @__PURE__ */ jsxs("div", {
 		children: "Actions"
 	}), /* @__PURE__ */ jsx("ul", {
 		className: "flex flex-wrap gap-2 p-2 md:block md:divide-y md:divide-border md:p-0",
-		children: actions.map(({ name, description, icon: Icon, onRun, blocked, running }) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
-			type: "button",
-			onClick: onRun,
-			disabled: Boolean(blocked) || running,
-			title: blocked,
-			className: "flex min-h-11 items-center gap-2 rounded-md border border-border-strong px-3 text-left hover:bg-surface disabled:cursor-default disabled:opacity-60 md:min-h-0 md:w-full md:items-start md:gap-3 md:rounded-none md:border-0 md:px-4 md:py-3",
-			children: [/* @__PURE__ */ jsx(Icon, { className: "size-4 shrink-0 text-muted-foreground md:mt-0.5" }), /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("span", {
-				className: "block text-[13px] font-medium text-foreground",
+		children: actions.map(({ name, description, icon: Icon, onRun, blocked, running, tone, render }) => {
+			const children = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, {
+				className: cn("size-4 shrink-0 md:mt-0.5", tone === "danger" ? "text-danger-text" : "text-muted-foreground"),
+				"aria-hidden": true
+			}), /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("span", {
+				className: cn("block text-[13px] font-medium", tone === "danger" ? "text-danger-text" : "text-foreground"),
 				children: name
 			}), description && /* @__PURE__ */ jsx("span", {
 				className: "mt-0.5 hidden text-xs leading-snug text-muted-foreground md:block",
 				children: description
-			})] })]
-		}) }, name))
+			})] })] });
+			return /* @__PURE__ */ jsx("li", { children: render ? render({
+				className: itemClass,
+				children
+			}) : /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onRun,
+				disabled: Boolean(blocked) || running,
+				title: blocked,
+				className: itemClass,
+				children
+			}) }, name);
+		})
 	})]
 });
 //#endregion

package/dist/record-view/record-header.js

@@ -5,21 +5,21 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 const RecordHeader = ({ collection, title, status, lastEditedBy, presence = [], actions }) => /* @__PURE__ */ jsxs("header", {
 	className: "flex flex-col gap-4 border-b border-border pb-6 md:flex-row md:items-end md:justify-between md:gap-6",
 	children: [/* @__PURE__ */ jsxs("div", { children: [
-		/* @__PURE__ */ jsx("p", {
-			className: "text-xs text-muted-foreground",
+		collection && /* @__PURE__ */ jsx("p", {
+			className: "mb-1 text-xs text-muted-foreground",
 			children: collection
 		}),
 		/* @__PURE__ */ jsxs("div", {
-			className: "mt-1 flex flex-wrap items-center gap-x-3 gap-y-1",
+			className: "flex flex-wrap items-center gap-x-3 gap-y-1",
 			children: [/* @__PURE__ */ jsx("h1", {
 				className: "text-xl font-semibold tracking-tight text-foreground md:text-2xl",
 				children: title
-			}), /* @__PURE__ */ jsx(Badge, {
+			}), status && /* @__PURE__ */ jsx(Badge, {
 				tone: status.tone,
 				children: status.label
 			})]
 		}),
-		/* @__PURE__ */ jsx("p", {
+		lastEditedBy && /* @__PURE__ */ jsx("p", {
 			className: "mt-1.5 text-xs text-muted-foreground",
 			children: lastEditedBy.name ? /* @__PURE__ */ jsxs(Fragment, { children: [
 				"Last edited by ",