@protobase/ui 0.18.0 → 0.19.0

package/dist/app/current-address.d.ts

@@ -19,6 +19,7 @@ export type CurrentAddress = ListAddress | {
   kind: 'record';
   resource: string;
   key: string;
+  edit?: true;
 } | {
   kind: 'create';
   resource: string;

package/dist/app/current-address.js

@@ -31,7 +31,8 @@ const currentAddress = (read, defaults) => {
 	if (read?.kind === "record") return {
 		kind: "record",
 		resource: read.resource,
-		key: encodeKey(read.key)
+		key: encodeKey(read.key),
+		...read.edit && { edit: true }
 	};
 	if (read?.kind !== "list") return read;
 	return {

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

@@ -0,0 +1,37 @@
+import { isStoredFile, shownImage } from "../../live/file-values.js";
+import { encodeKey } from "@protobase/schema/internal";
+//#region src/app/gallery/gallery-items.ts
+const isPicture = (value) => shownImage(value, {
+	width: 0,
+	height: 0
+}) !== void 0;
+const keyOf = (holder, row) => {
+	const parts = holder.primaryKey.map((name) => row[name]);
+	if (parts.some((part) => part === null || part === void 0)) return void 0;
+	return encodeKey(parts);
+};
+/**
+* The photos a gallery steps through: the record's own `cover` first, then the `image` of each of the photo records
+* `rows`, less the one the cover already shows, whose record the cover takes; empty values, missing files and files
+* that are no image are left out.
+*/
+const galleryItems = (cover, rows, image, holder) => {
+	const photos = image === void 0 ? [] : rows.flatMap((row) => {
+		const file = row[image];
+		if (!isStoredFile(file) || !isPicture(file)) return [];
+		const key = holder && keyOf(holder, row);
+		return [{
+			file,
+			...key !== void 0 && { key }
+		}];
+	});
+	if (!isStoredFile(cover) || !isPicture(cover)) return photos;
+	const same = (item) => isStoredFile(item.file) && item.file.uri === cover.uri;
+	const key = photos.find(same)?.key;
+	return [{
+		file: cover,
+		...key !== void 0 && { key }
+	}, ...photos.filter((item) => !same(item))];
+};
+//#endregion
+export { galleryItems };

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

@@ -0,0 +1,17 @@
+/**
+* How many of `count` photos a gallery draws as tiles, and how many more its last tile counts ("+N"): five at most,
+* three of four so the large tile keeps its two rows beside two wide ones, every photo when there are fewer.
+*/
+const galleryTiles = (count) => {
+	const shown = count >= 5 ? 5 : count === 4 ? 3 : count;
+	return {
+		shown,
+		more: count - shown
+	};
+};
+/** A swipe's step: a mostly sideways drag of 40 pixels or more moves to the next photo leftwards, the previous rightwards. */
+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;
+//#endregion
+export { galleryTiles, keyStep, swipeStep };

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

@@ -0,0 +1,124 @@
+import { cn } from "../../lib/cn.js";
+import { Skeleton } from "../../primitives/skeleton.js";
+import { humanize } from "../../live/naming.js";
+import { shownImage } from "../../live/file-values.js";
+import { useAdminMeta, usePermissions } from "../meta-gate.js";
+import { ErrorBanner } from "../error-banner.js";
+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 { PhotoDetails } from "./photo-details.js";
+import { useGalleryPhotos } from "./use-gallery-photos.js";
+import { useState } from "react";
+import { Images } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/gallery/gallery-section.tsx
+const spans = {
+	1: ["md:col-span-4 md:row-span-2"],
+	2: ["md:col-span-2 md:row-span-2", "md:col-span-2 md:row-span-2"],
+	3: [
+		"md:col-span-2 md:row-span-2",
+		"md:col-span-2",
+		"md:col-span-2"
+	],
+	5: [
+		"md:col-span-2 md:row-span-2",
+		"",
+		"",
+		"",
+		""
+	]
+};
+const Tile = ({ photo, large }) => {
+	const image = shownImage(photo, large ? {
+		width: 960,
+		height: 720
+	} : {
+		width: 480,
+		height: 360
+	});
+	return image ? /* @__PURE__ */ jsx(FileImage, {
+		image,
+		loading: "lazy",
+		className: "size-full object-cover transition-transform duration-300 group-hover/tile:scale-[1.02]"
+	}) : null;
+};
+/**
+* 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
+* without photos has no gallery.
+*/
+const GallerySection = ({ item, record, recordKey }) => {
+	const { views } = useAdminMeta();
+	const photos = useGalleryPhotos(item, record, recordKey);
+	const photoPermissions = usePermissions(photos.holder?.name ?? "");
+	const [open, setOpen] = useState();
+	if (photos.isPending) return /* @__PURE__ */ jsx(Section, {
+		title: item.title,
+		children: /* @__PURE__ */ jsx(Skeleton, { className: "aspect-[4/3] w-full rounded-lg md:aspect-[2/1]" })
+	});
+	if (photos.error) return /* @__PURE__ */ jsx(Section, {
+		title: item.title,
+		children: /* @__PURE__ */ jsx(ErrorBanner, {
+			title: "Could not load the photos",
+			error: photos.error
+		})
+	});
+	const count = photos.items.length;
+	if (count === 0) return null;
+	const { shown, more } = galleryTiles(count);
+	const holder = photos.holder;
+	const holderView = holder && views[holder.name];
+	const readable = holder !== void 0 && photoPermissions.read !== false;
+	const details = (index) => {
+		const key = photos.items[index]?.key;
+		return readable && key !== void 0 ? /* @__PURE__ */ jsx(PhotoDetails, {
+			model: holder,
+			view: holderView,
+			photoKey: key
+		}, key) : void 0;
+	};
+	return /* @__PURE__ */ jsxs(Section, {
+		title: item.title,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "grid aspect-[4/3] grid-cols-4 grid-rows-2 gap-1.5 overflow-hidden rounded-lg md:aspect-[2/1]",
+			children: photos.items.slice(0, shown).map((photo, index) => {
+				const last = index === shown - 1 && more > 0;
+				return /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					"aria-label": last ? `Show all ${count} photos` : `Show photo ${index + 1} of ${count}`,
+					onClick: () => setOpen(index),
+					className: cn("group/tile relative overflow-hidden bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary", index === 0 ? "col-span-4 row-span-2" : "max-md:hidden", spans[shown][index]),
+					children: [
+						/* @__PURE__ */ jsx(Tile, {
+							photo: photo.file,
+							large: index === 0
+						}),
+						last && /* @__PURE__ */ jsx("span", {
+							className: "absolute inset-0 flex items-center justify-center bg-backdrop/55 text-lg font-semibold text-white",
+							"aria-hidden": true,
+							children: `+${more}`
+						}),
+						index === 0 && count > 1 && /* @__PURE__ */ jsxs("span", {
+							className: "absolute bottom-2 right-2 flex items-center gap-1.5 rounded-full bg-background/85 px-2.5 py-1 text-xs font-medium tabular-nums text-foreground md:hidden",
+							"aria-hidden": true,
+							children: [/* @__PURE__ */ jsx(Images, { className: "size-3.5" }), count]
+						})
+					]
+				}, index);
+			})
+		}), open !== void 0 && /* @__PURE__ */ jsx(Lightbox, {
+			title: item.title,
+			photos: photos.items.map((photo) => photo.file),
+			index: open,
+			onIndex: setOpen,
+			onClose: () => setOpen(void 0),
+			details,
+			detailsLabel: holder && `${holderView?.names?.singular ?? humanize(holder.name)} details`
+		})]
+	});
+};
+//#endregion
+export { GallerySection };

package/dist/app/gallery/lightbox.js

@@ -0,0 +1,121 @@
+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 { 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.
+*/
+const Lightbox = ({ title, photos, index, onIndex, onClose, details, detailsLabel = "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 image = shownImage(photos[index], {
+		width: 1600,
+		height: 1200
+	});
+	const shownDetails = details?.(index);
+	const key = (event) => {
+		const by = keyStep(event.key);
+		if (by === 0) return;
+		event.preventDefault();
+		step(by);
+	};
+	const down = (event) => {
+		if (event.pointerType === "touch") start.current = {
+			x: event.clientX,
+			y: event.clientY
+		};
+	};
+	const up = (event) => {
+		if (!start.current) return;
+		step(swipeStep(event.clientX - start.current.x, event.clientY - start.current.y));
+		start.current = void 0;
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: panel,
+		tabIndex: -1,
+		role: "dialog",
+		"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: "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__ */ 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,
+				onPointerCancel: () => start.current = void 0,
+				children: [image && /* @__PURE__ */ jsx(FileImage, {
+					image,
+					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"),
+					"aria-label": "Previous photo",
+					onClick: () => step(-1),
+					children: /* @__PURE__ */ jsx(ChevronLeft, {
+						className: "size-5",
+						"aria-hidden": true
+					})
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: cn(control, "absolute right-3 top-1/2 -translate-y-1/2"),
+					"aria-label": "Next photo",
+					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
+			})
+		]
+	});
+};
+//#endregion
+export { Lightbox };

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

@@ -0,0 +1,49 @@
+import { Skeleton } from "../../primitives/skeleton.js";
+import { useRecord } from "../../data/use-record.js";
+import { humanize } from "../../live/naming.js";
+import { AppLink } from "../use-app-address.js";
+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";
+//#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.
+*/
+const PhotoDetails = ({ model, view, photoKey }) => {
+	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" });
+	if (record.error) return /* @__PURE__ */ jsx(ErrorBanner, {
+		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}`
+		})]
+	});
+};
+//#endregion
+export { PhotoDetails };

package/dist/app/gallery/use-gallery-photos.js

@@ -0,0 +1,38 @@
+import { keys } from "../../data/query-keys.js";
+import { useClient } from "../../data/api-provider.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { galleryItems } from "./gallery-items.js";
+import { useQuery } from "@tanstack/react-query";
+import { createWhere, printFilter } from "@protobase/schema";
+//#region src/app/gallery/use-gallery-photos.ts
+const where = createWhere();
+/**
+* A gallery's photos: the record's own image, then the photo records that point at it, read with the list API under
+* the user's own access, so its row filters and readable fields apply. Without the photos' resource in `/meta`, the
+* user cannot list them, and the record's image is all there is.
+*/
+const useGalleryPhotos = (item, record, recordKey) => {
+	const client = useClient();
+	const { resources } = useAdminMeta();
+	const holder = item.photos ? resources[item.photos.resource] : void 0;
+	const filter = item.photos ? printFilter(where.eq(item.photos.field, recordKey)) : "";
+	const sort = item.photos?.sort ?? "";
+	const rows = useQuery({
+		queryKey: keys.list(holder?.name ?? "", filter, sort, 500, "gallery"),
+		enabled: holder !== void 0,
+		queryFn: async () => (await client.list(holder.name, {
+			filter,
+			...sort && { orderBy: sort },
+			pageSize: 500
+		})).items
+	});
+	const cover = item.image === void 0 ? void 0 : record[item.image];
+	return {
+		holder,
+		items: galleryItems(cover, rows.data ?? [], item.photos?.image, holder),
+		isPending: holder !== void 0 && rows.isPending,
+		error: rows.error
+	};
+};
+//#endregion
+export { useGalleryPhotos };

package/dist/app/record-lines.js

@@ -14,7 +14,7 @@ const toLine = (record) => ({
 	unitPriceCents: Math.round(Number(record.unitPrice) * 100)
 });
 /** The lines of a record. Reordering only changes `draft`; the record's Save writes it, in one batch. */
-const RecordLines = ({ lines, draft, vatRate, saving }) => {
+const RecordLines = ({ lines, draft, vatRate, saving, locked = false }) => {
 	const canReorder = can(usePermissions(lines.name), "update");
 	return /* @__PURE__ */ jsx(Section, {
 		title: "Lines",
@@ -29,7 +29,7 @@ const RecordLines = ({ lines, draft, vatRate, saving }) => {
 					onReorder: (next) => draft.setOrder(next.map((line) => line.id)),
 					vatRate,
 					readOnly: true,
-					reorderable: canReorder && !saving
+					reorderable: canReorder && !saving && !locked
 				})
 			})
 		})

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

@@ -0,0 +1,31 @@
+//#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.
+*/
+const recordShown = (mode, canUpdate, edit) => {
+	if (mode === void 0 || mode === "edit") return {
+		shown: canUpdate ? "form" : "locked",
+		offersEdit: false,
+		editing: canUpdate
+	};
+	if (canUpdate && edit) return {
+		shown: "form",
+		offersEdit: false,
+		editing: true
+	};
+	return {
+		shown: mode,
+		offersEdit: canUpdate,
+		editing: false
+	};
+};
+/** Whether a help line shows: always, unless it, or else the view, says only while editing and the record is not. */
+const helpShown = (own, view, editing) => (own ?? view?.helpWhen ?? "always") === "always" || editing;
+/** A field's help line on the record page, when it shows. */
+const fieldHelp = (hints, view, editing) => hints?.help !== void 0 && helpShown(hints.helpWhen, view, editing) ? hints.help : void 0;
+//#endregion
+export { fieldHelp, helpShown, recordShown };