@protobase/ui 0.21.10 → 0.21.12

package/dist/app/record-page.js

@@ -13,12 +13,6 @@ import { Field } from "../record-view/field.js";
 import { Section } from "../record-view/section.js";
 import { MetadataCard } from "../record-view/record-sidebar.js";
 import { RecordHeader } from "../record-view/record-header.js";
-import { SpecTable } from "../record-view/spec-table.js";
-import { KeyFacts } from "../record-view/key-facts.js";
-import { fromDraft, isRequiredOnEdit } from "../live/field-values.js";
-import { fieldHelp, helpShown, recordShown, whenShown } from "./record-mode/record-mode.js";
-import { isChosen, keyValue } from "./create/create-values.js";
-import { ErrorBanner } from "./error-banner.js";
 import { isMarkdown } from "../markdown/markdown-hint.js";
 import { recordTitle } from "../live/model-helpers.js";
 import { contactFormat } from "../live/contact-links.js";
@@ -27,6 +21,13 @@ import { displayValue, valueTitle } from "../live/display-value.js";
 import { filledFields } from "./filled-fields.js";
 import { Notice, useAdminMeta, usePermissions } from "./meta-gate.js";
 import { AppLink, useAppAddress } from "./use-app-address.js";
+import { GroupSection } from "../record-view/group-section.js";
+import { SpecTable } from "../record-view/spec-table.js";
+import { KeyFacts } from "../record-view/key-facts.js";
+import { fromDraft, isRequiredOnEdit } from "../live/field-values.js";
+import { fieldHelp, helpShown, recordShown, whenShown } from "./record-mode/record-mode.js";
+import { isChosen, keyValue } from "./create/create-values.js";
+import { ErrorBanner } from "./error-banner.js";
 import { useProjectUi } from "./pages/project-ui.js";
 import { shownWidget } from "./field-types/shown-widget.js";
 import { WidgetPart } from "./field-types/widget-part.js";
@@ -45,6 +46,7 @@ import { auditField } from "../live/audit-fields.js";
 import { CustomSection } from "./custom-section.js";
 import { MapSection } from "./map/map-section.js";
 import { RecordActions } from "./pages/record-actions.js";
+import { groupOpen, toggledOpen } from "./group-open.js";
 import { RecordLines, findLinesResource } from "./record-lines.js";
 import { draftStorageKey } from "./draft-storage.js";
 import { useLines } from "./use-lines.js";
@@ -52,6 +54,7 @@ import { useLinesDraft } from "./use-lines-draft.js";
 import { GallerySection } from "./gallery/gallery-section.js";
 import { HistorySection } from "./history/history-section.js";
 import { CommentsSection } from "./comments/comments-section.js";
+import { useShownLayout } from "./record-mode/use-shown-layout.js";
 import { useRecordEditor } from "./use-record-editor.js";
 import { useRelatedRecords } from "./use-related-records.js";
 import { IncomingCard } from "./incoming-card.js";
@@ -149,15 +152,17 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 	const { shown, offersEdit, editing } = recordShown(view?.recordMode, canUpdate, address?.kind === "record" && address.edit === true);
 	useNavigationGuard(editor.dirty && shown === "form");
 	usePauseFocusRefresh(editor.dirty);
-	const readAddress = {
+	const openGroups = address?.kind === "record" ? address.open : void 0;
+	const atEdit = address?.kind === "record" && address.edit === true;
+	const recordAt = (open = [], edit = false) => ({
 		kind: "record",
 		resource: model.name,
-		key: recordKey
-	};
-	const editAddress = {
-		...readAddress,
-		edit: true
-	};
+		key: recordKey,
+		...edit && { edit },
+		...open.length > 0 && { open }
+	});
+	const readAddress = recordAt(openGroups);
+	const editAddress = recordAt(openGroups, true);
 	const leavesForm = shown === "form" && view?.recordMode !== void 0 && view.recordMode !== "edit";
 	const canDelete = can(permissions, "delete") && stored.permissions?.delete !== false;
 	const remove = useDeleteFlow({
@@ -190,7 +195,14 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 		editor.change(name, keyValue(target, next.key));
 	};
 	const { fields: fieldTypes } = useProjectUi();
-	const layout = layoutFor(model, view, shown === "read").filter((item) => whenShown(item.when, editing));
+	const scope = {
+		model,
+		record: stored.record,
+		key: recordKey,
+		etag: stored.etag,
+		permissions: stored.permissions
+	};
+	const layout = useShownLayout(layoutFor(model, view, shown === "read"), scope, editing, preview);
 	const sidebarFields = layout.flatMap((item) => item.kind === "sidebar" ? item.fields : []);
 	const hasStatus = model.fields.status?.type === "enum";
 	const statusValue = stored.record.status;
@@ -307,13 +319,6 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 			}];
 		})
 	});
-	const scope = {
-		model,
-		record: stored.record,
-		key: recordKey,
-		etag: stored.etag,
-		permissions: stored.permissions
-	};
 	const save = async () => {
 		if (await editor.save() && leavesForm) go(readAddress, { replace: true });
 	};
@@ -343,6 +348,69 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 			children: "Unsaved changes"
 		})
 	] });
+	const mainItem = (item, index) => {
+		if (item.kind === "group") {
+			const children = item.items.flatMap(mainItem);
+			if (children.length === 0) return [];
+			const open = groupOpen(item, openGroups, (name) => editing && (editor.errors[name] !== void 0 || editor.conflicts[name] !== void 0));
+			const toggle = item.collapsed ? recordAt(toggledOpen(openGroups, item.title), atEdit) : void 0;
+			return [/* @__PURE__ */ jsx(GroupSection, {
+				title: item.title,
+				open,
+				toggle,
+				children
+			}, `group:${item.title}`)];
+		}
+		if (item.kind === "related") return [/* @__PURE__ */ jsx(RelatedSection, {
+			item,
+			recordKey,
+			owner: model.name
+		}, `related:${item.title}`)];
+		if (preview && (item.kind === "custom" || item.kind === "map" || item.kind === "gallery")) return [];
+		if (item.kind === "custom") return item.sidebar ? [] : [/* @__PURE__ */ jsx(CustomSection, {
+			item,
+			scope
+		}, `custom:${index}`)];
+		if (item.kind === "map") return item.sidebar ? [] : [/* @__PURE__ */ jsx(MapSection, {
+			item,
+			record: stored.record
+		}, `map:${index}`)];
+		if (item.kind === "gallery") return [/* @__PURE__ */ jsx(GallerySection, {
+			item,
+			record: stored.record,
+			recordKey
+		}, `gallery:${index}`)];
+		if (item.kind === "history") return [/* @__PURE__ */ jsx(HistorySection, {
+			item,
+			model,
+			view,
+			recordKey,
+			etag: stored.etag
+		}, `history:${index}`)];
+		if (item.kind === "comments") return [/* @__PURE__ */ jsx(CommentsSection, {
+			item,
+			resource: model.name,
+			recordKey,
+			canWrite: auth.kind !== "visitor"
+		}, `comments:${index}`)];
+		if (item.kind !== "section") return [];
+		const visibleFields = item.fields.filter((name) => model.fields[name] && visible(name));
+		const facts = shown === "read" && item.presentation === "facts";
+		const fields = facts ? filledFields(stored.record, visibleFields) : visibleFields;
+		if (fields.length === 0) return [];
+		return [/* @__PURE__ */ jsx(Section, {
+			title: item.title,
+			help: helpShown(item.helpWhen, view, editing) ? item.help : void 0,
+			children: facts ? /* @__PURE__ */ jsx(KeyFacts, { facts: fields.map((name) => ({
+				label: readRow(name).label,
+				value: readRow(name).value,
+				icon: namedIcon(hint(name)?.icon)
+			})) }) : shown === "read" ? /* @__PURE__ */ jsx(SpecTable, { rows: fields.map(readRow) }) : /* @__PURE__ */ jsx("div", {
+				className: "grid grid-cols-1 gap-x-6 gap-y-5 sm:grid-cols-2",
+				children: fields.map(fieldView)
+			})
+		}, item.title)];
+	};
 	return /* @__PURE__ */ jsxs("div", {
 		ref: fieldsRef,
 		className: "flex flex-1 flex-col",
@@ -411,57 +479,7 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 							className: "grid grid-cols-1 gap-8 md:grid-cols-[minmax(0,1fr)_300px] md:gap-12",
 							children: [/* @__PURE__ */ jsxs("main", {
 								className: "divide-y divide-border",
-								children: [layout.flatMap((item, index) => {
-									if (item.kind === "related") return [/* @__PURE__ */ jsx(RelatedSection, {
-										item,
-										recordKey,
-										owner: model.name
-									}, `related:${item.title}`)];
-									if (preview && (item.kind === "custom" || item.kind === "map" || item.kind === "gallery")) return [];
-									if (item.kind === "custom") return item.sidebar ? [] : [/* @__PURE__ */ jsx(CustomSection, {
-										item,
-										scope
-									}, `custom:${index}`)];
-									if (item.kind === "map") return item.sidebar ? [] : [/* @__PURE__ */ jsx(MapSection, {
-										item,
-										record: stored.record
-									}, `map:${index}`)];
-									if (item.kind === "gallery") return [/* @__PURE__ */ jsx(GallerySection, {
-										item,
-										record: stored.record,
-										recordKey
-									}, `gallery:${index}`)];
-									if (item.kind === "history") return [/* @__PURE__ */ jsx(HistorySection, {
-										item,
-										model,
-										view,
-										recordKey,
-										etag: stored.etag
-									}, `history:${index}`)];
-									if (item.kind === "comments") return [/* @__PURE__ */ jsx(CommentsSection, {
-										item,
-										resource: model.name,
-										recordKey,
-										canWrite: auth.kind !== "visitor"
-									}, `comments:${index}`)];
-									if (item.kind !== "section") return [];
-									const visibleFields = item.fields.filter((name) => model.fields[name] && visible(name));
-									const facts = shown === "read" && item.presentation === "facts";
-									const fields = facts ? filledFields(stored.record, visibleFields) : visibleFields;
-									if (fields.length === 0) return [];
-									return [/* @__PURE__ */ jsx(Section, {
-										title: item.title,
-										help: helpShown(item.helpWhen, view, editing) ? item.help : void 0,
-										children: facts ? /* @__PURE__ */ jsx(KeyFacts, { facts: fields.map((name) => ({
-											label: readRow(name).label,
-											value: readRow(name).value,
-											icon: namedIcon(hint(name)?.icon)
-										})) }) : shown === "read" ? /* @__PURE__ */ jsx(SpecTable, { rows: fields.map(readRow) }) : /* @__PURE__ */ jsx("div", {
-											className: "grid grid-cols-1 gap-x-6 gap-y-5 sm:grid-cols-2",
-											children: fields.map(fieldView)
-										})
-									}, item.title)];
-								}), linesModel && !preview && /* @__PURE__ */ jsx(RecordLines, {
+								children: [layout.flatMap(mainItem), linesModel && !preview && /* @__PURE__ */ jsx(RecordLines, {
 									lines: linesModel,
 									draft: linesDraft,
 									vatRate: Number(stored.record.vatRate ?? 21) / 100,

package/dist/app/record-row/record-row-body.js

@@ -1,11 +1,11 @@
 import { useIsXs } from "../../lib/use-media-query.js";
 import { Skeleton } from "../../primitives/skeleton.js";
 import { humanize } from "../../live/naming.js";
-import { ErrorBanner } from "../error-banner.js";
 import { displaysOf, loadedFields } from "../displays/list-displays.js";
 import { defaultOrderBy } from "../list-order.js";
 import { useAdminMeta } from "../meta-gate.js";
 import { AppLink } from "../use-app-address.js";
+import { ErrorBanner } from "../error-banner.js";
 import { useLiveRows } from "../../live/use-live-rows.js";
 import { viewAllAddress } from "../embedded-list/embedded-display.js";
 import { FilterChipList } from "../searches/filter-chip-list.js";

package/dist/app/record-row/saved-record-row.js

@@ -1,8 +1,8 @@
 import { Skeleton } from "../../primitives/skeleton.js";
 import { humanize } from "../../live/naming.js";
-import { ErrorBanner } from "../error-banner.js";
 import { listedResource } from "../current-address.js";
 import { useAdminMeta } from "../meta-gate.js";
+import { ErrorBanner } from "../error-banner.js";
 import { savedScope } from "../saved/saved-records.js";
 import { useSavedRecords } from "../saved/use-saved-records.js";
 import { RecordRowBody } from "./record-row-body.js";

package/dist/app/related-section.js

@@ -2,9 +2,10 @@ import { Skeleton } from "../primitives/skeleton.js";
 import { keys } from "../data/query-keys.js";
 import { useClient } from "../data/api-provider.js";
 import { Section } from "../record-view/section.js";
-import { ErrorBanner } from "./error-banner.js";
 import { listColumnNames } from "../live/columns-from-model.js";
 import { useAdminMeta, usePermissions } from "./meta-gate.js";
+import { ErrorBanner } from "./error-banner.js";
+import { countQuery } from "./pages/use-layout-data.js";
 import { searchAll } from "../live/search-all.js";
 import { relatedOpens } from "./related-opens.js";
 import { EmbeddedDisplaySwitch, EmbeddedList } from "./embedded-list/embedded-list.js";
@@ -82,7 +83,15 @@ const RelatedSection = ({ item, recordKey, owner }) => {
 	const [display, pick] = useEmbeddedDisplay(view, `related:${owner}:${item.title}`, item.display);
 	const permissions = usePermissions(item.resource);
 	const [sorting, setSorting] = useState(false);
+	const client = useClient();
+	const counting = Boolean(item.hideEmpty && model && match.filter);
+	const count = useQuery({
+		queryKey: keys.count(item.resource, match.filter ?? ""),
+		enabled: counting,
+		queryFn: () => countQuery(client, model, match.filter ?? "").queryFn()
+	});
 	if (!model) return null;
+	if (item.hideEmpty && (match.isPending || match.filter === null || counting && (count.isPending || count.data === 0))) return null;
 	const opens = relatedOpens(item, model, resources);
 	const columns = item.columns ?? listColumnNames(model, view).filter((name) => name !== item.field);
 	const handOrder = relatedHandOrder(item, model, permissions);

package/dist/app/searches/saved-search-rows.js

@@ -1,9 +1,9 @@
 import { Skeleton } from "../../primitives/skeleton.js";
 import { humanize } from "../../live/naming.js";
-import { ErrorBanner } from "../error-banner.js";
 import { recordKey } from "../../live/model-helpers.js";
 import { useAdminMeta } from "../meta-gate.js";
 import { AppLink } from "../use-app-address.js";
+import { ErrorBanner } from "../error-banner.js";
 import { InlineFilterChips } from "./filter-chip-list.js";
 import { RecordRowBody } from "../record-row/record-row-body.js";
 import { useSavedSearches } from "./use-saved-searches.js";

package/dist/app/searches/saved-searches.js

@@ -1,10 +1,10 @@
 import { Skeleton } from "../../primitives/skeleton.js";
 import { PageHeader } from "../../app-shell/page-header.js";
 import { humanize } from "../../live/naming.js";
-import { ErrorBanner } from "../error-banner.js";
 import { recordKey } from "../../live/model-helpers.js";
 import { Notice, useAdminMeta, usePermissions } from "../meta-gate.js";
 import { AppLink } from "../use-app-address.js";
+import { ErrorBanner } from "../error-banner.js";
 import { can } from "../permissions.js";
 import { useSavedSearches } from "./use-saved-searches.js";
 import { useDeleteFlow } from "../delete/use-delete-flow.js";

package/dist/app/sensitive-field.js

@@ -2,9 +2,9 @@ import { cn } from "../lib/cn.js";
 import { Input } from "../primitives/input.js";
 import { Button } from "../primitives/button.js";
 import { humanize } from "../live/naming.js";
+import { displayValue } from "../live/display-value.js";
 import { toDraft } from "../live/field-values.js";
 import { ErrorBanner } from "./error-banner.js";
-import { displayValue } from "../live/display-value.js";
 import { useState } from "react";
 import { Eye, EyeOff } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -21,6 +21,7 @@ export declare const useAppAddress: () => {
 /** A link to an address in the app: an ordinary anchor that the router follows without reloading the page. */
 export declare const AppLink: ({ to, ...rest }: AnchorHTMLAttributes<HTMLAnchorElement> & {
   to: AppAddress;
+  replace?: boolean;
 }) => import("react").JSX.Element;
 //#endregion
 export type { CurrentAddress, ListAddress, ListChange };

package/dist/app/use-record-editor.js

@@ -1,7 +1,7 @@
 import { keys } from "../data/query-keys.js";
 import { useClient } from "../data/api-provider.js";
-import { differs, toDraft, toPatchValue } from "../live/field-values.js";
 import { displayValue } from "../live/display-value.js";
+import { differs, toDraft, toPatchValue } from "../live/field-values.js";
 import { fieldErrors } from "./field-errors.js";
 import { useLiveSave } from "./use-live-save.js";
 import { readDraft, writeDraft } from "./draft-storage.js";

package/dist/forms/public-form-page.js

@@ -5,10 +5,10 @@ import { useClient } from "../data/api-provider.js";
 import { AuthLayout } from "../auth/auth-layout.js";
 import { humanize } from "../live/naming.js";
 import { Field } from "../record-view/field.js";
+import { Notice } from "../app/meta-gate.js";
 import { createBody, hasDatabaseDefault, initialDraft, isRequired } from "../app/create/create-values.js";
 import { useDocumentTitle } from "../app/document-title.js";
 import { ErrorBanner } from "../app/error-banner.js";
-import { Notice } from "../app/meta-gate.js";
 import { FieldEditor } from "../app/field-editor.js";
 import { fieldErrors, fieldMessage } from "../app/field-errors.js";
 import { useFocusFirstInvalid } from "../app/use-focus-first-invalid.js";

package/dist/index.js

@@ -18,9 +18,9 @@ import { useApiToken } from "./auth/use-api-token.js";
 import { useRecord } from "./data/use-record.js";
 import { Field } from "./record-view/field.js";
 import { Section } from "./record-view/section.js";
-import { Textarea } from "./primitives/textarea.js";
 import { useMeta } from "./data/use-meta.js";
 import { AppLink, useAppAddress } from "./app/use-app-address.js";
+import { Textarea } from "./primitives/textarea.js";
 import { useList } from "./data/use-list.js";
 import { definePlugin, defineUi } from "./app/pages/project-ui.js";
 import { ChatMessage } from "./chat/chat-message.js";

package/dist/live/field-values.js

@@ -1,5 +1,5 @@
-import { localeDecimal, parseNumberText } from "../format/number-text.js";
 import { fileDiffers, filePatchValue } from "./file-values.js";
+import { localeDecimal, parseNumberText } from "../format/number-text.js";
 //#region src/live/field-values.ts
 /** What the editor's text input holds for a stored value. */
 const toDraft = (value) => value === null || value === void 0 ? "" : typeof value === "object" ? JSON.stringify(value) : String(value);

package/dist/package.js

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

package/dist/record-view/group-section.js

@@ -0,0 +1,35 @@
+import { cn } from "../lib/cn.js";
+import { AppLink } from "../app/use-app-address.js";
+import { useId } from "react";
+import { ChevronRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/record-view/group-section.tsx
+const headingClass = "text-[16px] font-semibold text-foreground";
+/**
+* A heading over sections of the record page. With `toggle`, the address that opens or closes it, the heading is a
+* link, so a copied link opens the page with the group open; the items show only while `open`. Without it the group
+* is always open.
+*/
+const GroupSection = ({ title, open, toggle, children }) => {
+	const id = useId();
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h2", {
+		className: cn("py-8", open && "pb-0"),
+		children: toggle ? /* @__PURE__ */ jsxs(AppLink, {
+			to: toggle,
+			replace: true,
+			"aria-expanded": open,
+			"aria-controls": id,
+			className: cn("inline-flex items-center gap-1.5", headingClass),
+			children: [/* @__PURE__ */ jsx(ChevronRight, { className: cn("size-4 transition-transform", open && "rotate-90") }), title]
+		}) : /* @__PURE__ */ jsx("span", {
+			className: headingClass,
+			children: title
+		})
+	}), open && /* @__PURE__ */ jsx("div", {
+		id,
+		className: "divide-y divide-border",
+		children
+	})] });
+};
+//#endregion
+export { GroupSection };