@protobase/ui 0.21.3 → 0.21.4

package/dist/app/app.js

@@ -21,6 +21,7 @@ import { useProjectUi } from "./pages/project-ui.js";
 import { AssistantButton, AssistantPanel } from "./assistant-shell.js";
 import { bottomBarFromMeta } from "./bottom-bar-from-meta.js";
 import { breadcrumbFor } from "./breadcrumb-for.js";
+import { documentTitle, titleParts, useDocumentTitle } from "./document-title.js";
 import { sourceStatusOf } from "../data/with-sources.js";
 import { MetaGate, Notice, useAdminMeta } from "./meta-gate.js";
 import { useAppAddress } from "./use-app-address.js";
@@ -128,15 +129,26 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 	const outsideOrganizations = Boolean(organizationSettings) && current !== void 0 && !current.organization;
 	const organizationPage = organizationSettings && user ? organizationPageTitles[path] : void 0;
 	const accountPage = !user ? void 0 : path === "/-/account" ? "Sign-in & security" : path === "/-/sign-in-policy" ? "Sign-in policy" : organizationPage;
+	const resourceLabel = view?.names?.plural ?? (resource && humanize(resource));
 	const breadcrumb = accountPage ? [accountPage] : breadcrumbFor({
 		basePath,
 		address,
 		group: group?.label,
 		page,
-		resourceLabel: view?.names?.plural ?? (resource && humanize(resource)),
+		resourceLabel,
 		recordTitle: title,
 		recordLoading: titleLoading
 	});
+	const singular = view?.names?.singular ?? (resource && humanize(resource));
+	useDocumentTitle(documentTitle(titleParts({
+		address,
+		page,
+		accountPage,
+		resourceLabel,
+		singular,
+		recordTitle: title,
+		recordLoading: titleLoading
+	}), meta.appName));
 	const content = user && path === "/-/account" ? /* @__PURE__ */ jsx(AccountSecurityPage, { email: user.email }) : user && path === "/-/sign-in-policy" ? admin ? /* @__PURE__ */ jsx(SignInPolicyPage, {}) : /* @__PURE__ */ jsx(Notice, {
 		title: "Admins only",
 		children: "Only an admin can change how people sign in."

package/dist/app/delete/blocked-delete.js

@@ -0,0 +1,34 @@
+import { humanize } from "../../live/naming.js";
+import { createWhere, printFilter } from "@protobase/schema";
+//#region src/app/delete/blocked-delete.ts
+const where$1 = createWhere();
+/** What a delete other records still point at says, such as "Orders still point at this company." */
+const blockedDeleteText = ({ blockingPlural, noun }) => `${blockingPlural} still point at this ${noun.toLowerCase()}.`;
+/**
+* Why the delete was refused, naming the records that point at it by their view's plural, and, when the server names
+* the field pointing at it, a link to their list filtered to those records. `undefined` for a resource the app does not show.
+*/
+const blockedDelete = ({ blockedBy, resources, views, noun, key }) => {
+	const { resource, field } = blockedBy;
+	if (!resources[resource]) return void 0;
+	const plural = views[resource]?.names?.plural ?? humanize(resource);
+	const text = blockedDeleteText({
+		blockingPlural: plural,
+		noun
+	});
+	if (!field || key === void 0) return { text };
+	const list = {
+		kind: "list",
+		resource,
+		filter: printFilter(where$1.eq(field, key))
+	};
+	return {
+		text,
+		link: {
+			label: `Show ${plural.toLowerCase()}`,
+			to: list
+		}
+	};
+};
+//#endregion
+export { blockedDelete, blockedDeleteText };

package/dist/app/delete/use-delete-flow.js

@@ -1,6 +1,9 @@
 import { useClient } from "../../data/api-provider.js";
 import { humanize } from "../../live/naming.js";
 import { useToast } from "../../toasts/toast-provider.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { useAppAddress } from "../use-app-address.js";
+import { blockedDelete } from "./blocked-delete.js";
 import { BulkDeleteDialog, ConfirmDeleteDialog, ConflictDialog } from "./dialogs.js";
 import { diffRecords } from "./record-diff.js";
 import { useState } from "react";
@@ -21,6 +24,15 @@ const useDeleteFlow = ({ model, view, onDeleted, onReview, restore }) => {
 	const [busy, setBusy] = useState(false);
 	const noun = view?.names?.singular ?? humanize(model.name);
 	const plural = view?.names?.plural ?? humanize(model.name);
+	const { resources, views } = useAdminMeta();
+	const { href, open } = useAppAddress();
+	const blocked = (error, target) => error.blockedBy && blockedDelete({
+		blockedBy: error.blockedBy,
+		resources,
+		views,
+		noun,
+		...model.primaryKey.length === 1 && { key: target.key }
+	});
 	const refresh = () => {
 		for (const prefix of [
 			"page",
@@ -87,10 +99,16 @@ const useDeleteFlow = ({ model, view, onDeleted, onReview, restore }) => {
 		} catch (error) {
 			if (!isApiError(error)) throw error;
 			setFlow(void 0);
+			const why = blocked(error, target);
 			toast.show({
 				state: "error",
 				title: `Could not delete ${target.title}`,
-				description: error.message
+				description: why?.text ?? error.message,
+				...why?.link && { action: {
+					label: why.link.label,
+					href: href(why.link.to),
+					onNavigate: open
+				} }
 			});
 		} finally {
 			setBusy(false);
@@ -106,7 +124,7 @@ const useDeleteFlow = ({ model, view, onDeleted, onReview, restore }) => {
 			if (!isApiError(error)) throw error;
 			return {
 				title: target.title,
-				message: error.message
+				message: blocked(error, target)?.text ?? error.message
 			};
 		}
 	};

package/dist/app/displays/list-cards.js

@@ -13,7 +13,7 @@ const plainHeight = 44;
 * The list page's cards display: a card per record (see `RecordCard`), scrolled like the table. An embedded list,
 * which shows a few cards whole, draws them with `CardsDisplay`.
 */
-const ListCards = ({ model, view, display, list }) => {
+const ListCards = ({ model, view, display, list, empty }) => {
 	const plural = view?.names?.plural ?? humanize(model.name);
 	const pictured = display.card === void 0 && (display.image !== void 0 || display.photos !== void 0);
 	if (list.isLoading) return /* @__PURE__ */ jsx("div", {
@@ -24,7 +24,7 @@ const ListCards = ({ model, view, display, list }) => {
 		title: "Could not load rows",
 		error: list.error
 	});
-	if (!list.source || list.source.total === 0) return /* @__PURE__ */ jsxs("p", {
+	if (!list.source || list.source.total === 0) return empty ?? /* @__PURE__ */ jsxs("p", {
 		className: "py-8 text-center text-muted-foreground",
 		children: [
 			"No ",

package/dist/app/document-title.js

@@ -0,0 +1,27 @@
+import { useEffect } from "react";
+//#region src/app/document-title.ts
+/** What a tab names, most specific first: the record and its list, the new record and its list, the list, or the page. */
+const titleParts = ({ address, page, accountPage, resourceLabel, singular, recordTitle, recordLoading }) => {
+	if (accountPage) return [accountPage];
+	if (page) return [page.title];
+	if (!address || address.kind === "page") return [];
+	const list = resourceLabel ? [resourceLabel] : [];
+	if (address.kind === "list") return list;
+	if (address.kind === "create") return [...singular ? [`New ${singular.toLowerCase()}`] : [], ...list];
+	const record = recordTitle ?? (recordLoading ? void 0 : address.key);
+	return [...record ? [record] : [], ...list];
+};
+/** A tab's title: its parts, then the app's name, as in "Nordlicht GmbH · Companies · Protobase". */
+const documentTitle = (parts, appName) => [...parts.filter(Boolean), appName].join(" · ");
+/** Shows `text` as the tab's title while mounted, then puts back the title it found. */
+const useDocumentTitle = (text) => {
+	useEffect(() => {
+		const before = document.title;
+		document.title = text;
+		return () => {
+			document.title = before;
+		};
+	}, [text]);
+};
+//#endregion
+export { documentTitle, titleParts, useDocumentTitle };

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

@@ -40,7 +40,7 @@ const Loading = () => /* @__PURE__ */ jsx("div", {
 const EmbeddedList = ({ model, view, filter, sort, columns, limit, display, empty, row = false, viewAll, link = true }) => {
 	const { resources, views } = useAdminMeta();
 	const { fields: fieldTypes } = useProjectUi();
-	const { go } = useAppAddress();
+	const { go, href } = useAppAddress();
 	const xs = useIsXs();
 	const [orderBy, setOrderBy] = useState(sort || defaultOrderBy(model, view));
 	const names = columns ?? listColumnNames(model, view);
@@ -125,6 +125,14 @@ const EmbeddedList = ({ model, view, filter, sort, columns, limit, display, empt
 		resource: model.name,
 		key: recordKey(model, row)
 	});
+	const recordLink = (row) => ({
+		href: href({
+			kind: "record",
+			resource: model.name,
+			key: recordKey(model, row)
+		}),
+		onFollow: () => openRecord(row)
+	});
 	const singular = view?.names?.singular ?? humanize(model.name);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col gap-3",
@@ -136,6 +144,7 @@ const EmbeddedList = ({ model, view, filter, sort, columns, limit, display, empt
 			sort: parseSort(orderBy),
 			onSortChange: (next) => setOrderBy(sortToOrderBy(next)),
 			onOpenRow: openRecord,
+			rowLink: recordLink,
 			rowActions: [{
 				label: `Open ${singular.toLowerCase()}`,
 				onSelect: openRecord

package/dist/app/field-editor.js

@@ -16,15 +16,11 @@ import { useShownWidget } from "./field-types/shown-widget.js";
 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 { ArrowUpRight } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { enumLabel } from "@protobase/schema";
 //#region src/app/field-editor.tsx
-const numeric = /* @__PURE__ */ new Set([
-	"integer",
-	"bigint",
-	"decimal"
-]);
 const BuiltInEditor = ({ field, hints, value, stored, relationLabel, relationTo, relationPicker, invalid, locked, placeholder, reveal, resource, onChange }) => {
 	const control = useFieldControl();
 	if (field.type === "file") return /* @__PURE__ */ jsx(FileField, {
@@ -136,6 +132,7 @@ const BuiltInEditor = ({ field, hints, value, stored, relationLabel, relationTo,
 		trailing: hints?.suffix ? /* @__PURE__ */ jsx("span", { children: hints.suffix.trim() }) : void 0,
 		placeholder,
 		className: cn(numeric.has(field.type) && "text-right tabular-nums"),
+		...numericInputProps(field.type),
 		value: String(value),
 		onChange: (event) => onChange(event.target.value)
 	});

package/dist/app/hand-order/hand-sorted-list.js

@@ -20,7 +20,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const HandSortedList = ({ model, view, field, filter, columns }) => {
 	const { resources, views } = useAdminMeta();
 	const { fields: fieldTypes } = useProjectUi();
-	const { go } = useAppAddress();
+	const { go, href } = useAppAddress();
 	const specs = useMemo(() => embeddedColumns(model, view, columns, {
 		resources,
 		views,
@@ -80,6 +80,14 @@ const HandSortedList = ({ model, view, field, filter, columns }) => {
 		resource: model.name,
 		key: recordKey(model, row)
 	});
+	const recordLink = (row) => ({
+		href: href({
+			kind: "record",
+			resource: model.name,
+			key: recordKey(model, row)
+		}),
+		onFollow: () => openRecord(row)
+	});
 	return /* @__PURE__ */ jsx(DataGrid, {
 		fit: true,
 		scroll: "parent",
@@ -87,6 +95,7 @@ const HandSortedList = ({ model, view, field, filter, columns }) => {
 		source,
 		latencyMs: 0,
 		onOpenRow: openRecord,
+		rowLink: recordLink,
 		rowNumbers: false,
 		reorder: {
 			label: (row) => recordTitle(model, view, row, row.id),

package/dist/app/list-empty-state.js

@@ -0,0 +1,31 @@
+//#region src/app/list-empty-state.ts
+/** Why a list has no rows, and the buttons that help: clear the search, clear the filters, or create the first record. */
+const listEmptyState = ({ plural, search, filtered, scoped, canCreate }) => {
+	const noun = plural.toLowerCase();
+	if (search) return {
+		message: `No ${noun} match “${search}”.`,
+		clearSearch: true,
+		clearFilters: filtered,
+		create: false
+	};
+	if (filtered) return {
+		message: `No ${noun} match these filters.`,
+		clearSearch: false,
+		clearFilters: true,
+		create: false
+	};
+	if (scoped) return {
+		message: `No ${noun} match.`,
+		clearSearch: false,
+		clearFilters: false,
+		create: false
+	};
+	return {
+		message: `No ${noun} yet.`,
+		clearSearch: false,
+		clearFilters: false,
+		create: canCreate
+	};
+};
+//#endregion
+export { listEmptyState };

package/dist/app/list-empty.js

@@ -0,0 +1,23 @@
+import { Button } from "../primitives/button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/list-empty.tsx
+/** A list without rows: why (see `listEmptyState`), with buttons to clear its search or filters, or its New button. */
+const ListEmpty = ({ state, onClearSearch, onClearFilters, create }) => /* @__PURE__ */ jsxs("div", {
+	className: "flex flex-col items-center gap-3 py-8 text-center text-muted-foreground",
+	children: [/* @__PURE__ */ jsx("p", { children: state.message }), (state.clearSearch || state.clearFilters || state.create && create) && /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-wrap justify-center gap-2",
+		children: [
+			state.clearSearch && /* @__PURE__ */ jsx(Button, {
+				onClick: onClearSearch,
+				children: "Clear search"
+			}),
+			state.clearFilters && /* @__PURE__ */ jsx(Button, {
+				onClick: onClearFilters,
+				children: "Clear filters"
+			}),
+			state.create && create
+		]
+	})]
+});
+//#endregion
+export { ListEmpty };

package/dist/app/list-page.js

@@ -42,6 +42,8 @@ import { createOffered } from "./create/create-offered.js";
 import { ImportButton } from "./import/import-button.js";
 import { exportOffered, exportsSelection } from "./export/export-options.js";
 import { useExportFlow } from "./export/use-export-flow.js";
+import { ListEmpty } from "./list-empty.js";
+import { listEmptyState } from "./list-empty-state.js";
 import { ListCards } from "./displays/list-cards.js";
 import { useListScroll } from "./list-scroll.js";
 import { ListChart } from "./list-chart.js";
@@ -113,7 +115,7 @@ const ListPage = ({ address }) => {
 };
 const LoadedList = ({ model, address, scope, heading }) => {
 	const meta = useAdminMeta();
-	const { set, go } = useAppAddress();
+	const { set, go, href } = useAppAddress();
 	const resource = model.name;
 	const view = meta.views[resource];
 	const fields = useMemo(() => widgetFields(view, model), [view, model]);
@@ -336,12 +338,21 @@ const LoadedList = ({ model, address, scope, heading }) => {
 			key: recordKey(model, row)
 		});
 	};
+	const recordLink = (row) => ({
+		href: href({
+			kind: "record",
+			resource,
+			key: recordKey(model, row)
+		}),
+		onFollow: () => openRecord(row)
+	});
 	const table = rows.source ? /* @__PURE__ */ jsx(DataGrid, {
 		columns,
 		source: rows.source,
 		sort: parseSort(orderBy),
 		onSortChange: (sort) => set({ orderBy: sortToOrderBy(sort) }),
 		onOpenRow: openRecord,
+		rowLink: recordLink,
 		cellEditor: cellEditing.editor,
 		rowPatches: cellEditing.patches,
 		initialScrollIndex: scroll.initialIndex,
@@ -373,13 +384,27 @@ const LoadedList = ({ model, address, scope, heading }) => {
 		initialIndex: scroll.initialIndex,
 		onScrollIndex: scroll.remember
 	};
+	const emptyState = listEmptyState({
+		plural,
+		search: search?.kind === "search" ? search.text : "",
+		filtered: chips.length > 0,
+		scoped: Boolean(scope) || extras.some((clause) => clause.kind !== "search"),
+		canCreate: Boolean(createButton)
+	});
+	const empty = /* @__PURE__ */ jsx(ListEmpty, {
+		state: emptyState,
+		onClearSearch: () => commitSearch(""),
+		onClearFilters: () => setFilter(emptyFilterState),
+		create: createButton
+	});
 	const drawDisplay = () => {
-		if (!display) return table;
+		if (!display) return rows.source?.total === 0 && !rows.error ? empty : table;
 		if (display.kind === "cards") return /* @__PURE__ */ jsx(ListCards, {
 			model,
 			view,
 			display,
-			list: cardsList
+			list: cardsList,
+			empty
 		}, rows.key.join(" "));
 		if (display.kind === "map") return /* @__PURE__ */ jsx(MapDisplay, {
 			model,

package/dist/app/numeric-input.js

@@ -0,0 +1,21 @@
+//#region src/app/numeric-input.ts
+/** Field types whose values are numbers: right-aligned, with a number keyboard on phones. */
+const numeric = /* @__PURE__ */ new Set([
+	"integer",
+	"bigint",
+	"decimal"
+]);
+/** The keyboard a phone shows for a field: a number pad for whole numbers, one with a decimal key for decimals. Enter saves or does nothing, hence `done`. */
+const numericInputProps = (type) => {
+	if (type === "integer" || type === "bigint") return {
+		inputMode: "numeric",
+		enterKeyHint: "done"
+	};
+	if (type === "decimal") return {
+		inputMode: "decimal",
+		enterKeyHint: "done"
+	};
+	return {};
+};
+//#endregion
+export { numeric, numericInputProps };

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

@@ -4,6 +4,8 @@ import { PageModel } from "@protobase/layout";
 //#region src/data/meta-data.d.ts
 export type MetaData = {
   etag: string;
+  /** The app's name, which ends the tab titles. */
+  appName: string;
   resources: Record<string, ResourceModel>;
   views: Record<string, ViewModel>;
   /** Composed pages by name. */

package/dist/data/use-meta.js

@@ -26,6 +26,7 @@ const useMeta = () => {
 			}
 			return {
 				etag: result.etag,
+				appName: result.meta.appName,
 				resources: Object.fromEntries(result.meta.resources.map((model) => [model.name, model])),
 				views: Object.fromEntries(result.meta.views.map((model) => [model.resource, model])),
 				pages: Object.fromEntries((result.meta.pages ?? []).map((model) => [model.name, model])),

package/dist/data-grid/data-grid.js

@@ -1,5 +1,6 @@
 import { cn } from "../lib/cn.js";
 import { useIsDesktop } from "../lib/use-media-query.js";
+import { RouteLink } from "../primitives/route-link.js";
 import { buildColumns, features } from "./columns.js";
 import { GridFooter } from "./grid-footer.js";
 import { RowMenu, availableActions } from "./row-menu.js";
@@ -19,7 +20,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useTable } from "@tanstack/react-table";
 //#region src/data-grid/data-grid.tsx
 const headerHeight = 32;
-const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0, onScrollIndex, latencyMs = 150, sort: controlledSort, onSortChange, onOpenRow, rowActions, cellEditor, rowPatches, bulkActions, pinKey, defaultPinned, rowNumbers = true, compact = false, selectable: selecting = true, reorder, fit = false, scroll = "own", className }) => {
+const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0, onScrollIndex, latencyMs = 150, sort: controlledSort, onSortChange, onOpenRow, rowLink, rowActions, cellEditor, rowPatches, bulkActions, pinKey, defaultPinned, rowNumbers = true, compact = false, selectable: selecting = true, reorder, fit = false, scroll = "own", className }) => {
 	const selectable = selecting && !reorder;
 	const rowHeight = compact ? 28 : 36;
 	const narrow = !useIsDesktop();
@@ -150,6 +151,7 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 		onOpenRow,
 		container: gridRef
 	});
+	const linkColumn = (columns.find((spec) => spec.title) ?? columns[0])?.id;
 	const minWidth = gridMinWidth(sized, gutter, trailing, minScale);
 	const own = scroll === "own";
 	const header = /* @__PURE__ */ jsx("div", {
@@ -201,9 +203,15 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 			}) : void 0,
 			cells: tableRow.getAllCells().map((cell) => {
 				const content = /* @__PURE__ */ jsx(table.FlexRender, { cell });
+				const editable = Boolean(cellEditor?.editable(row, cell.column.id));
+				const linked = rowLink && cell.column.id === linkColumn && !editable ? /* @__PURE__ */ jsx(RouteLink, {
+					to: rowLink(row),
+					className: "flex min-w-0 items-center hover:underline",
+					children: content
+				}) : content;
 				return {
 					spec: columns.find((spec) => spec.id === cell.column.id),
-					...cellEditing ? cellEditing.cell(index, row, cell.column.id, content) : { content }
+					...cellEditing ? cellEditing.cell(index, row, cell.column.id, linked) : { content: linked }
 				};
 			})
 		};

package/dist/data-grid/grid-row.js

@@ -40,10 +40,14 @@ const dragStyle = (frame, dragY, transition) => ({
 	transform: dragY === 0 ? void 0 : `translateY(${dragY}px)`,
 	transition
 });
+const openUnlessLink = (onOpen) => (event) => {
+	if (event.target.closest("a")) return;
+	onOpen();
+};
 const DataRow = ({ cells, selected, onToggle, onOpen, menu, handle, rowRef, dragY, transition, dragging, ...frame }) => /* @__PURE__ */ jsxs("div", {
 	ref: rowRef,
 	role: "row",
-	onClick: onOpen,
+	onClick: onOpen && openUnlessLink(onOpen),
 	className: cn("absolute inset-x-0 top-0 grid items-center border-b", selected ? "bg-primary-soft" : "bg-background hover:bg-surface", onOpen && "cursor-pointer", dragging && "z-30 bg-surface shadow-pop"),
 	style: dragY === void 0 ? frameStyle(frame) : dragStyle(frame, dragY, transition),
 	children: [

package/dist/package.js

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