@protobase/ui 0.19.1 → 0.19.3

package/dist/app/app.js

@@ -36,6 +36,7 @@ import { useActiveRole } from "../roles/use-active-role.js";
 import { userMenuFromMeta } from "./user-menu-from-meta.js";
 import { navFromMeta } from "./nav-from-meta.js";
 import { ComposedPage } from "./pages/composed-page.js";
+import { ProjectLogo } from "./project-logo.js";
 import { PluginGate, usePluginsOff } from "../plugins/plugin-gate.js";
 import { PluginNotice } from "../plugins/plugin-notice.js";
 import { RecordPage } from "./record-page.js";
@@ -178,6 +179,7 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 		onSignOut: user && (() => void signOut()),
 		signIn: user ? void 0 : signIn.link(),
 		workspace: current?.organization?.name ?? workspace,
+		logo: ProjectLogo,
 		navGroups: groups,
 		bottomBar: bottomBarFromMeta(meta, basePath, place),
 		userMenu: [

package/dist/app/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><style>.c{fill:#FF5A1F}.r{fill:#14161A}@media (prefers-color-scheme:dark){.c{fill:#FF6A33}.r{fill:#F1F0EA}}</style><path class="c" fill-rule="evenodd" d="M0 5a5 5 0 0 1 5-5h7a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zM4 5a1 1 0 0 1 1-1h5v6H4z"/><path class="r" d="M17 0h10a5 5 0 0 1 5 5v22a5 5 0 0 1-5 5H5a5 5 0 0 1-5-5V17h17z"/></svg>

package/dist/app/gallery/detail-fields.js

@@ -0,0 +1,12 @@
+//#region src/app/gallery/detail-fields.ts
+/**
+* The fields of a photo's details: those its record page shows in its sections, or without a layout every field but its
+* key and tenant, less sensitive ones and those the gallery already shows: `omit`, such as the photo's file and the
+* field pointing at the gallery's record.
+*/
+const detailFields = (model, view, omit) => {
+	const sections = (view?.layout ?? []).flatMap((item) => item.kind === "section" ? item.fields : []);
+	return (sections.length > 0 ? [...new Set(sections)] : Object.keys(model.fields).filter((name) => name !== model.tenant && !model.primaryKey.includes(name))).filter((name) => model.fields[name] && !model.fields[name].sensitive && !omit.includes(name));
+};
+//#endregion
+export { detailFields };

package/dist/app/gallery/gallery-layout.js

@@ -13,5 +13,7 @@ const galleryTiles = (count) => {
 const swipeStep = (dx, dy) => Math.abs(dx) < 40 || Math.abs(dx) <= Math.abs(dy) ? 0 : dx < 0 ? 1 : -1;
 /** A key's step: the right arrow moves to the next photo, the left arrow to the previous one. */
 const keyStep = (key) => key === "ArrowRight" ? 1 : key === "ArrowLeft" ? -1 : 0;
+/** The photo a step from `index` lands on among `count`: it stops at the first and the last rather than wrapping around. */
+const steppedPhoto = (index, by, count) => Math.min(Math.max(index + by, 0), Math.max(count - 1, 0));
 //#endregion
-export { galleryTiles, keyStep, swipeStep };
+export { galleryTiles, keyStep, steppedPhoto, swipeStep };

package/dist/app/gallery/gallery-section.js

@@ -8,6 +8,7 @@ import { FileImage } from "../../live/file-image.js";
 import { Section } from "../../record-view/section.js";
 import { galleryTiles } from "./gallery-layout.js";
 import { Lightbox } from "./lightbox.js";
+import { detailFields } from "./detail-fields.js";
 import { PhotoDetails } from "./photo-details.js";
 import { useGalleryPhotos } from "./use-gallery-photos.js";
 import { useState } from "react";
@@ -47,7 +48,7 @@ const Tile = ({ photo, large }) => {
 /**
 * A record's photos as tiles, one large and the next ones smaller, the last counting those not drawn ("+N"); a mobile
 * screen draws the large one with the number of photos. Each tile opens the lightbox at its photo. A photo held by a
-* record of a resource the user may read gets a details button there, whose details the record API answers. A record
+* record of a resource the user may read has its details beside it there, as the record API answers them. A record
 * without photos has no gallery.
 */
 const GallerySection = ({ item, record, recordKey }) => {
@@ -71,13 +72,15 @@ const GallerySection = ({ item, record, recordKey }) => {
 	const { shown, more } = galleryTiles(count);
 	const holder = photos.holder;
 	const holderView = holder && views[holder.name];
-	const readable = holder !== void 0 && photoPermissions.read !== false;
+	const fields = holder ? detailFields(holder, holderView, [item.photos?.image, item.photos?.field].filter((name) => name !== void 0)) : [];
+	const readable = holder !== void 0 && photoPermissions.read !== false && fields.length > 0;
 	const details = (index) => {
 		const key = photos.items[index]?.key;
 		return readable && key !== void 0 ? /* @__PURE__ */ jsx(PhotoDetails, {
 			model: holder,
 			view: holderView,
-			photoKey: key
+			photoKey: key,
+			fields
 		}, key) : void 0;
 	};
 	return /* @__PURE__ */ jsxs(Section, {
@@ -116,7 +119,7 @@ const GallerySection = ({ item, record, recordKey }) => {
 			onIndex: setOpen,
 			onClose: () => setOpen(void 0),
 			details,
-			detailsLabel: holder && `${holderView?.names?.singular ?? humanize(holder.name)} details`
+			detailsTitle: holder && `${holderView?.names?.singular ?? humanize(holder.name)} details`
 		})]
 	});
 };

package/dist/app/gallery/lightbox.js

@@ -2,25 +2,27 @@ import { cn } from "../../lib/cn.js";
 import { useFocusTrap } from "../../lib/use-focus-trap.js";
 import { shownImage } from "../../live/file-values.js";
 import { FileImage } from "../../live/file-image.js";
-import { shownPhoto } from "../displays/card-photos.js";
-import { keyStep, swipeStep } from "./gallery-layout.js";
-import { useRef, useState } from "react";
-import { ChevronLeft, ChevronRight, Info, X } from "lucide-react";
+import { keyStep, steppedPhoto, swipeStep } from "./gallery-layout.js";
+import { useRef } from "react";
+import { ChevronLeft, ChevronRight, X } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/gallery/lightbox.tsx
 const control = "flex size-10 shrink-0 items-center justify-center rounded-full bg-background/85 text-foreground shadow-sm transition-colors hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40";
 /**
 * Photos one at a time at full size over the page: a modal dialog with a counter, arrows and keys (left, right, Escape)
-* that step through them and wrap around, a sideways swipe on a touch screen, and, for a photo with details the user may
-* read, a button that shows them under the photo. The page does not scroll behind it, and focus returns to what opened it.
+* that step through them, stopping at the first and the last, a sideways swipe on a touch screen, and, for a photo with details the user may
+* read, those details in a sidebar beside it, or below it on a mobile screen, where the dialog scrolls down to them. The
+* page does not scroll behind it, and focus returns to what opened it.
 */
-const Lightbox = ({ title, photos, index, onIndex, onClose, details, detailsLabel = "Details" }) => {
+const Lightbox = ({ title, photos, index, onIndex, onClose, details, detailsTitle = "Details" }) => {
 	const panel = useRef(null);
 	const start = useRef(void 0);
-	const [showDetails, setShowDetails] = useState(false);
 	useFocusTrap(panel, true, onClose);
 	const count = photos.length;
-	const step = (by) => by !== 0 && onIndex(shownPhoto(index + by, count));
+	const step = (by) => {
+		const next = steppedPhoto(index, by, count);
+		if (next !== index) onIndex(next);
+	};
 	const image = shownImage(photos[index], {
 		width: 1600,
 		height: 1200
@@ -50,39 +52,26 @@ const Lightbox = ({ title, photos, index, onIndex, onClose, details, detailsLabe
 		"aria-modal": "true",
 		"aria-label": title,
 		onKeyDown: key,
-		className: "fixed inset-0 z-[90] flex flex-col bg-backdrop outline-none",
-		children: [
-			/* @__PURE__ */ jsxs("div", {
+		className: "fixed inset-0 z-[90] flex flex-col overflow-y-auto overscroll-contain bg-backdrop outline-none md:flex-row",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cn("flex shrink-0 flex-col md:sticky md:top-0 md:h-dvh md:min-w-0 md:flex-1", shownDetails === void 0 ? "h-dvh" : "h-[85svh]"),
+			children: [/* @__PURE__ */ jsxs("div", {
 				className: "flex shrink-0 items-center justify-between gap-2 p-3",
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "rounded-full bg-background/85 px-3 py-1 text-[13px] font-medium tabular-nums text-foreground",
 					"aria-live": "polite",
 					children: `${index + 1} / ${count}`
-				}), /* @__PURE__ */ jsxs("span", {
-					className: "flex items-center gap-2",
-					children: [shownDetails !== void 0 && /* @__PURE__ */ jsx("button", {
-						type: "button",
-						className: cn(control, showDetails && "bg-background ring-2 ring-primary/40"),
-						"aria-label": detailsLabel,
-						"aria-pressed": showDetails,
-						onClick: () => setShowDetails(!showDetails),
-						children: /* @__PURE__ */ jsx(Info, {
-							className: "size-4",
-							"aria-hidden": true
-						})
-					}), /* @__PURE__ */ jsx("button", {
-						type: "button",
-						className: control,
-						"aria-label": "Close",
-						onClick: onClose,
-						children: /* @__PURE__ */ jsx(X, {
-							className: "size-4",
-							"aria-hidden": true
-						})
-					})]
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: control,
+					"aria-label": "Close",
+					onClick: onClose,
+					children: /* @__PURE__ */ jsx(X, {
+						className: "size-4",
+						"aria-hidden": true
+					})
 				})]
-			}),
-			/* @__PURE__ */ jsxs("div", {
+			}), /* @__PURE__ */ jsxs("div", {
 				className: "relative flex min-h-0 flex-1 touch-pan-y items-center justify-center px-3 pb-3 md:px-16",
 				onPointerDown: down,
 				onPointerUp: up,
@@ -92,8 +81,9 @@ const Lightbox = ({ title, photos, index, onIndex, onClose, details, detailsLabe
 					className: "max-h-full max-w-full select-none object-contain"
 				}, image.url), count > 1 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
 					type: "button",
-					className: cn(control, "absolute left-3 top-1/2 -translate-y-1/2"),
+					className: cn(control, "absolute left-3 top-1/2 -translate-y-1/2 aria-disabled:cursor-default aria-disabled:opacity-40"),
 					"aria-label": "Previous photo",
+					"aria-disabled": index === 0,
 					onClick: () => step(-1),
 					children: /* @__PURE__ */ jsx(ChevronLeft, {
 						className: "size-5",
@@ -101,20 +91,24 @@ const Lightbox = ({ title, photos, index, onIndex, onClose, details, detailsLabe
 					})
 				}), /* @__PURE__ */ jsx("button", {
 					type: "button",
-					className: cn(control, "absolute right-3 top-1/2 -translate-y-1/2"),
+					className: cn(control, "absolute right-3 top-1/2 -translate-y-1/2 aria-disabled:cursor-default aria-disabled:opacity-40"),
 					"aria-label": "Next photo",
+					"aria-disabled": index === count - 1,
 					onClick: () => step(1),
 					children: /* @__PURE__ */ jsx(ChevronRight, {
 						className: "size-5",
 						"aria-hidden": true
 					})
 				})] })]
-			}),
-			showDetails && shownDetails !== void 0 && /* @__PURE__ */ jsx("div", {
-				className: "shrink-0 border-t border-border bg-background p-4 text-foreground",
-				children: shownDetails
-			})
-		]
+			})]
+		}), shownDetails !== void 0 && /* @__PURE__ */ jsxs("aside", {
+			"aria-label": detailsTitle,
+			className: "shrink-0 border-t border-border bg-background p-5 text-foreground md:min-h-dvh md:w-[360px] md:border-l md:border-t-0",
+			children: [/* @__PURE__ */ jsx("h2", {
+				className: "mb-3 text-[15px] font-semibold",
+				children: detailsTitle
+			}), shownDetails]
+		})]
 	});
 };
 //#endregion

package/dist/app/gallery/photo-details.js

@@ -6,17 +6,13 @@ import { ErrorBanner } from "../error-banner.js";
 import { fieldAccess } from "../permissions.js";
 import { SpecTable } from "../../record-view/spec-table.js";
 import { FieldValue } from "../pages/field-value.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/gallery/photo-details.tsx
-const detailFields = (model, view) => {
-	const sections = (view?.layout ?? []).flatMap((item) => item.kind === "section" ? item.fields : []);
-	return (sections.length > 0 ? [...new Set(sections)] : Object.keys(model.fields).filter((name) => name !== model.tenant && !model.primaryKey.includes(name))).filter((name) => model.fields[name] && !model.fields[name].sensitive);
-};
 /**
-* A photo's record, as the record API answers the user, so the server decides what they may read: the fields its
-* record page shows, as label/value rows, and a link to that page.
+* A photo's record, as the record API answers the user, so the server decides what they may read: its `fields` (see
+* `detailFields`), as label/value rows, and a link to its page.
 */
-const PhotoDetails = ({ model, view, photoKey }) => {
+const PhotoDetails = ({ model, view, photoKey, fields }) => {
 	const record = useRecord(model.name, photoKey);
 	const singular = (view?.names?.singular ?? humanize(model.name)).toLowerCase();
 	if (record.isPending) return /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-48" });
@@ -24,26 +20,23 @@ const PhotoDetails = ({ model, view, photoKey }) => {
 		title: `Could not load the ${singular}`,
 		error: record.error
 	});
-	const shown = detailFields(model, view).filter((name) => fieldAccess(record.data.permissions, name) !== "hidden");
-	return /* @__PURE__ */ jsxs("div", {
-		className: "mx-auto max-w-2xl",
-		children: [/* @__PURE__ */ jsx(SpecTable, { rows: shown.map((name) => ({
-			label: view?.fields[name]?.label ?? humanize(name),
-			value: /* @__PURE__ */ jsx(FieldValue, {
-				model,
-				field: model.fields[name],
-				value: record.data.record[name]
-			})
-		})) }), /* @__PURE__ */ jsx(AppLink, {
-			to: {
-				kind: "record",
-				resource: model.name,
-				key: photoKey
-			},
-			className: "mt-3 inline-block text-[13px] font-medium text-primary-text hover:underline",
-			children: `Open ${singular}`
-		})]
-	});
+	const shown = fields.filter((name) => fieldAccess(record.data.permissions, name) !== "hidden");
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpecTable, { rows: shown.map((name) => ({
+		label: view?.fields[name]?.label ?? humanize(name),
+		value: /* @__PURE__ */ jsx(FieldValue, {
+			model,
+			field: model.fields[name],
+			value: record.data.record[name]
+		})
+	})) }), /* @__PURE__ */ jsx(AppLink, {
+		to: {
+			kind: "record",
+			resource: model.name,
+			key: photoKey
+		},
+		className: "mt-3 inline-block text-[13px] font-medium text-primary-text hover:underline",
+		children: `Open ${singular}`
+	})] });
 };
 //#endregion
 export { PhotoDetails };

package/dist/app/pages/merge-ui.d.ts

@@ -3,7 +3,7 @@ import { ProjectUi } from "./project-ui.js";
 /**
  * One UI config from several, each after the ones it `extends`, the last being the app's own: components, action
  * handlers and field types are all kept, and one name defined by two configs is an error naming both; every shell slot
- * and `beforeSignIn` component is drawn, the extended configs' first.
+ * and `beforeSignIn` component is drawn, the extended configs' first, except the logo, the last config's to set one.
  */
 export declare const mergeUi: (...uis: ProjectUi[]) => ProjectUi;
 //#endregion

package/dist/app/pages/merge-ui.js

@@ -36,7 +36,7 @@ const around = (wrappers) => {
 /**
 * One UI config from several, each after the ones it `extends`, the last being the app's own: components, action
 * handlers and field types are all kept, and one name defined by two configs is an error naming both; every shell slot
-* and `beforeSignIn` component is drawn, the extended configs' first.
+* and `beforeSignIn` component is drawn, the extended configs' first, except the logo, the last config's to set one.
 */
 const mergeUi = (...uis) => {
 	const named = uis.flatMap((ui, index) => flatten(ui, ui.name ?? `UI config ${index + 1}`));
@@ -45,6 +45,7 @@ const mergeUi = (...uis) => {
 	const fields = union("The field type", named, (ui) => ui.fields);
 	const actionSlot = slot(named.flatMap(({ ui }) => ui.shell?.actions ? [ui.shell.actions] : []));
 	const rightPanel = slot(named.flatMap(({ ui }) => ui.shell?.rightPanel ? [ui.shell.rightPanel] : []));
+	const logo = named.findLast(({ ui }) => ui.shell?.logo)?.ui.shell?.logo;
 	const beforeSignIn = around(named.flatMap(({ ui }) => ui.beforeSignIn ? [ui.beforeSignIn] : []));
 	const name = uis.at(-1)?.name;
 	return {
@@ -52,9 +53,10 @@ const mergeUi = (...uis) => {
 		components,
 		actions,
 		...Object.keys(fields).length > 0 && { fields },
-		...(actionSlot || rightPanel) && { shell: {
+		...(actionSlot || rightPanel || logo) && { shell: {
 			...actionSlot && { actions: actionSlot },
-			...rightPanel && { rightPanel }
+			...rightPanel && { rightPanel },
+			...logo && { logo }
 		} },
 		...beforeSignIn && { beforeSignIn }
 	};

package/dist/app/pages/project-ui.d.ts

@@ -1,3 +1,4 @@
+import { ShellLogoProps } from "../../app-shell/logo.js";
 import { FieldWidget } from "../field-types/field-widget.js";
 import { ComponentType, ReactNode } from "react";
 import { Client } from "@protobase/client";
@@ -48,10 +49,14 @@ export type ProjectUi = {
   actions?: Record<string, ActionHandler>;
   /** Field types by name, each with the storage types it shows and its components (see `FieldWidget`). */
   fields?: Record<string, FieldWidget>;
-  /** Rendered in the shell on every page: `actions` at the end of the top bar, `rightPanel` beside the page. */
+  /**
+   * Rendered in the shell on every page: `actions` at the end of the top bar, `rightPanel` beside the page, and `logo`
+   * at the top of the sidebar in place of Protobase's (see `ShellLogoProps`).
+   */
   shell?: {
     actions?: ComponentType;
     rightPanel?: ComponentType;
+    logo?: ComponentType<ShellLogoProps>;
   };
   /**
    * Drawn around the pages someone signed out sees, only for a plugin the app loads before sign-in (`beforeSignIn` in

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

@@ -1,13 +1,18 @@
-import { useAppAddress } from "../use-app-address.js";
+import { AppLink, useAppAddress } from "../use-app-address.js";
 import { ActionRail } from "../../record-view/action-rail.js";
 import { ConfirmAction } from "./confirm-action.js";
 import { useActionRunner } from "./use-run-action.js";
 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";
 //#region src/app/pages/record-actions.tsx
-/** The record page's named actions, run like the Action block runs them; deleting the record returns to the list. */
-const RecordActions = ({ model, stored, recordKey }) => {
+/**
+* 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.
+*/
+const RecordActions = ({ model, stored, recordKey, edit, onDelete }) => {
 	const { go } = useAppAddress();
 	const scope = {
 		model,
@@ -21,14 +26,35 @@ const RecordActions = ({ model, stored, recordKey }) => {
 		resource: model.name
 	}, { replace: true }));
 	const [asking, setAsking] = useState();
-	if (runner.actions.length === 0) return null;
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ActionRail, { actions: runner.actions.map((action) => ({
+	const named = runner.actions.map((action) => ({
 		name: action.label,
 		icon: actionIcon(action.icon),
 		blocked: runner.blocked(action),
 		running: runner.running === action.name,
+		...action.run?.kind === "delete" && { tone: "danger" },
 		onRun: () => action.confirm ? setAsking(action) : void runner.run(action)
-	})) }), asking && /* @__PURE__ */ jsx(ConfirmAction, {
+	}));
+	const deletes = runner.actions.some((action) => action.run?.kind === "delete");
+	const actions = [
+		...edit ? [{
+			name: "Edit",
+			icon: Pencil,
+			render: ({ className, children }) => /* @__PURE__ */ jsx(AppLink, {
+				to: edit,
+				className,
+				children
+			})
+		}] : [],
+		...named,
+		...onDelete && !deletes ? [{
+			name: "Delete",
+			icon: Trash2,
+			tone: "danger",
+			onRun: onDelete
+		}] : []
+	];
+	if (actions.length === 0) return null;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ActionRail, { actions }), asking && /* @__PURE__ */ jsx(ConfirmAction, {
 		action: asking,
 		label: asking.label,
 		danger: asking.run?.kind === "delete",

package/dist/app/project-logo.js

@@ -0,0 +1,17 @@
+import { Logo } from "../app-shell/logo.js";
+import { CustomBoundary } from "./pages/custom-boundary.js";
+import { useProjectUi } from "./pages/project-ui.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/project-logo.tsx
+/** The project's `shell.logo` at the top of the sidebar, or Protobase's while it has none or when it throws. */
+const ProjectLogo = (props) => {
+	const Own = useProjectUi().shell?.logo;
+	if (!Own) return /* @__PURE__ */ jsx(Logo, { ...props });
+	return /* @__PURE__ */ jsx(CustomBoundary, {
+		name: "shell.logo",
+		fallback: /* @__PURE__ */ jsx(Logo, { ...props }),
+		children: /* @__PURE__ */ jsx(Own, { ...props })
+	});
+};
+//#endregion
+export { ProjectLogo };

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

@@ -1,18 +1,23 @@
 //#region src/app/record-mode/record-mode.ts
 /**
 * What the record page shows a user, by the view's `mode`, whether they may change the record and whether its address
-* asks for the form (`edit`). Always editable (`edit`, the default) shows the form, locked to a user who may not change
-* it, and ignores `edit`; `read` and `locked` show the read view or the locked form until the address asks for the
-* form, which only a user who may change the record gets. `offersEdit` is whether the page links to the form;
-* `editing` whether the record is being edited, which decides the help shown only while editing.
+* asks for the form (`edit`). A user who may not change the record gets the read view in every mode, at any address.
+* To one who may, always editable (`edit`, the default) shows the form and ignores `edit`; `read` and `locked` show the
+* read view or the locked form until the address asks for the form. `offersEdit` is whether the page links to the
+* form; `editing` whether the record is being edited, which decides the help shown only while editing.
 */
 const recordShown = (mode, canUpdate, edit) => {
+	if (!canUpdate) return {
+		shown: "read",
+		offersEdit: false,
+		editing: false
+	};
 	if (mode === void 0 || mode === "edit") return {
-		shown: canUpdate ? "form" : "locked",
+		shown: "form",
 		offersEdit: false,
-		editing: canUpdate
+		editing: true
 	};
-	if (canUpdate && edit) return {
+	if (edit) return {
 		shown: "form",
 		offersEdit: false,
 		editing: true

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/app-shell/app-shell.d.ts

@@ -4,4 +4,4 @@ import "./nav.js";
 import "./profile-menu.js";
 import "./global-search.js";
 import "./breadcrumb.js";
-import { ReactNode } from "react";
+import { ComponentType, ReactNode } from "react";

package/dist/app-shell/app-shell.js

@@ -9,7 +9,7 @@ import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/app-shell.tsx
 const drawerId = "app-drawer";
-const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, actions, rightPanel, forceExpanded, profileMenuOpen, navGroups, userMenu, bottomBar, onNavigate, onSignOut, signIn, organizations, roles, theme, search, pageScroll: scrollsByDefault = false, className, children }) => {
+const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, logo, actions, rightPanel, forceExpanded, profileMenuOpen, navGroups, userMenu, bottomBar, onNavigate, onSignOut, signIn, organizations, roles, theme, search, pageScroll: scrollsByDefault = false, className, children }) => {
 	const desktop = useIsDesktop();
 	const [drawerOpen, setDrawerOpen] = useState(false);
 	useEffect(() => {
@@ -37,7 +37,8 @@ const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, action
 		signIn,
 		organizations,
 		roles,
-		theme
+		theme,
+		logo
 	});
 	return /* @__PURE__ */ jsx(PageScrollContext.Provider, {
 		value: setPageScroll,

package/dist/app-shell/index.d.ts

@@ -4,6 +4,7 @@ import "./profile-menu.js";
 import { SidebarMode, sidebarModes } from "./sidebar-mode.js";
 import "./global-search.js";
 import "./breadcrumb.js";
+import { LogoMark, ShellLogoProps } from "./logo.js";
 import "./app-shell.js";
 import "./page-header.js";
 import "./page-scroll.js";