@protobase/ui 0.21.6 → 0.21.8

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

@@ -1,23 +1,25 @@
 import { useIsDesktop, useIsXs } from "../../lib/use-media-query.js";
 import { Skeleton } from "../../primitives/skeleton.js";
-import { recordKey } from "../../live/model-helpers.js";
 import { humanize } from "../../live/naming.js";
-import { useProjectUi } from "../pages/project-ui.js";
-import { useAdminMeta } from "../meta-gate.js";
 import { ErrorBanner } from "../error-banner.js";
 import { listColumnNames } from "../../live/columns-from-model.js";
 import { displayRow, loadedFields, shownDisplay } from "../displays/list-displays.js";
 import { defaultOrderBy, parseSort, sortToOrderBy } from "../list-order.js";
+import { useAdminMeta, usePermissions } from "../meta-gate.js";
 import { AppLink, useAppAddress } from "../use-app-address.js";
+import { useProjectUi } from "../pages/project-ui.js";
+import { can } from "../permissions.js";
 import { DataGrid } from "../../data-grid/data-grid.js";
 import { viewAllAddress } from "./embedded-display.js";
 import { BoardDisplay } from "../displays/board-display.js";
+import { CalendarDisplay } from "../displays/calendar-display.js";
 import { CardsDisplay } from "../displays/cards-display.js";
 import { CustomDisplay } from "../displays/custom-display.js";
 import { MapDisplay } from "../displays/map-display.js";
 import { DisplaySwitch } from "../displays/display-controls.js";
 import { embeddedColumns } from "./embedded-columns.js";
 import { cutOffNote } from "./cut-off-note.js";
+import { embeddedRowTargets } from "./embedded-row-targets.js";
 import { useEmbeddedRows } from "./use-embedded-rows.js";
 import { useMemo, useState } from "react";
 import { ArrowRight } from "lucide-react";
@@ -39,8 +41,9 @@ const Loading = () => /* @__PURE__ */ jsx("div", {
 * to the whole list with the same filter, order and display, beside a note such as "The first 10 of 37." when there are
 * more. On a phone a cards display is one row that scrolls sideways.
 */
-const EmbeddedList = ({ model, view, filter, sort, columns, limit, display, empty, row = false, viewAll, link = true }) => {
+const EmbeddedList = ({ model, view, filter, sort, columns, limit, display, empty, row = false, viewAll, link = true, opens }) => {
 	const { resources, views } = useAdminMeta();
+	const canUpdate = can(usePermissions(model.name), "update");
 	const { fields: fieldTypes } = useProjectUi();
 	const { go, href } = useAppAddress();
 	const xs = useIsXs();
@@ -122,20 +125,18 @@ const EmbeddedList = ({ model, view, filter, sort, columns, limit, display, empt
 		more: false,
 		loadMore: () => void 0
 	};
-	const openRecord = (row) => go({
-		kind: "record",
-		resource: model.name,
-		key: recordKey(model, row)
+	const targets = embeddedRowTargets({
+		model,
+		view,
+		opens,
+		resources,
+		views,
+		canUpdate
 	});
-	const recordLink = (row) => ({
-		href: href({
-			kind: "record",
-			resource: model.name,
-			key: recordKey(model, row)
-		}),
-		onFollow: () => openRecord(row)
+	const linkTo = (to) => ({
+		href: href(to),
+		onFollow: () => go(to)
 	});
-	const singular = view?.names?.singular ?? humanize(model.name);
 	const note = cutOffNote(source.total, rows.data.total, rows.data.estimated);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col gap-3",
@@ -146,12 +147,9 @@ const EmbeddedList = ({ model, view, filter, sort, columns, limit, display, empt
 			latencyMs: 0,
 			sort: parseSort(orderBy),
 			onSortChange: (next) => setOrderBy(sortToOrderBy(next)),
-			onOpenRow: openRecord,
-			rowLink: recordLink,
-			rowActions: [{
-				label: `Open ${singular.toLowerCase()}`,
-				onSelect: openRecord
-			}],
+			onOpenRow: (row) => go(targets.address(row)),
+			rowLink: (row) => linkTo(targets.address(row)),
+			rowActions: targets.actions(linkTo),
 			rowNumbers: false,
 			selectable: false
 		}) : shown.kind === "cards" ? /* @__PURE__ */ jsx(CardsDisplay, {
@@ -177,6 +175,12 @@ const EmbeddedList = ({ model, view, filter, sort, columns, limit, display, empt
 			filter,
 			orderBy,
 			limit
+		}) : shown.kind === "calendar" ? /* @__PURE__ */ jsx(CalendarDisplay, {
+			model,
+			view,
+			display: shown,
+			fields,
+			filter
 		}) : /* @__PURE__ */ jsx(CustomDisplay, {
 			display: shown,
 			list

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

@@ -0,0 +1,65 @@
+import { humanize } from "../../live/naming.js";
+import { recordKey } from "../../live/model-helpers.js";
+import { rowAllows } from "../permissions.js";
+import { relationTarget } from "../related-opens.js";
+//#region src/app/embedded-list/embedded-row-targets.ts
+const singularOf = (model, view) => (view?.names?.singular ?? humanize(model.name)).toLowerCase();
+/**
+* Where a table row of an embedded list leads, and its menu's items. A row opens its own record, or with `opens` the
+* record that relation points at when it holds one; its menu then opens that record and edits, or for a user who may
+* not, opens the row's own.
+*/
+const embeddedRowTargets = ({ model, view, opens, resources, views, canUpdate }) => {
+	const own = (row) => ({
+		kind: "record",
+		resource: model.name,
+		key: recordKey(model, row)
+	});
+	const farName = opens && model.fields[opens]?.relation?.resource;
+	const far = farName ? resources[farName] : void 0;
+	const other = (row) => {
+		const key = opens && far ? relationTarget(row, opens) : void 0;
+		return far && key !== void 0 ? {
+			kind: "record",
+			resource: far.name,
+			key
+		} : void 0;
+	};
+	const address = (row) => other(row) ?? own(row);
+	const singular = singularOf(model, view);
+	const actions = (linkTo) => {
+		const openOwn = {
+			label: `Open ${singular}`,
+			link: (row) => linkTo(own(row))
+		};
+		if (!far) return [openOwn];
+		const editable = (row) => canUpdate && rowAllows(row, "update");
+		return [
+			{
+				label: `Open ${singularOf(far, views[far.name])}`,
+				available: (row) => other(row) !== void 0,
+				link: (row) => linkTo(other(row))
+			},
+			{
+				label: `Edit ${singular}`,
+				available: editable,
+				link: (row) => linkTo({
+					kind: "record",
+					resource: model.name,
+					key: recordKey(model, row),
+					edit: true
+				})
+			},
+			{
+				...openOwn,
+				available: (row) => !editable(row)
+			}
+		];
+	};
+	return {
+		address,
+		actions
+	};
+};
+//#endregion
+export { embeddedRowTargets };

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

@@ -1,8 +1,8 @@
 import { keys } from "../../data/query-keys.js";
 import { useClient } from "../../data/api-provider.js";
 import { recordId } from "../../live/model-helpers.js";
-import { useAdminMeta } from "../meta-gate.js";
 import { listPhotos, withPhotos } from "../../live/row-photos.js";
+import { useAdminMeta } from "../meta-gate.js";
 import { listLabels, withLabels } from "../../live/relation-labels.js";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
 //#region src/app/embedded-list/use-embedded-rows.ts

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

@@ -1,10 +1,10 @@
 import { cn } from "../../lib/cn.js";
 import { Skeleton } from "../../primitives/skeleton.js";
 import { humanize } from "../../live/naming.js";
-import { useAdminMeta, usePermissions } from "../meta-gate.js";
 import { Section } from "../../record-view/section.js";
 import { shownImage } from "../../live/file-values.js";
 import { ErrorBanner } from "../error-banner.js";
+import { useAdminMeta, usePermissions } from "../meta-gate.js";
 import { FileImage } from "../../live/file-image.js";
 import { galleryTiles } from "./gallery-layout.js";
 import { Lightbox } from "./lightbox.js";

package/dist/app/gallery/lightbox.js

@@ -1,9 +1,9 @@
 import { cn } from "../../lib/cn.js";
 import { useIsDesktop } from "../../lib/use-media-query.js";
 import { useFocusTrap } from "../../lib/use-focus-trap.js";
-import { Sheet } from "../../primitives/sheet.js";
 import { shownImage } from "../../live/file-values.js";
 import { FileImage } from "../../live/file-image.js";
+import { Sheet } from "../../primitives/sheet.js";
 import { keyStep, steppedPhoto, swipeStep, togglesDetails } from "./gallery-layout.js";
 import { readDetailsOpen, writeDetailsOpen } from "./details-open-storage.js";
 import { useEffect, useId, useRef, useState } from "react";

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

@@ -1,11 +1,11 @@
 import { Skeleton } from "../../primitives/skeleton.js";
-import { recordKey, recordTitle } from "../../live/model-helpers.js";
 import { humanize } from "../../live/naming.js";
-import { useProjectUi } from "../pages/project-ui.js";
-import { useAdminMeta } from "../meta-gate.js";
 import { ErrorBanner } from "../error-banner.js";
+import { recordKey, recordTitle } from "../../live/model-helpers.js";
 import { loadedFields } from "../displays/list-displays.js";
+import { useAdminMeta } from "../meta-gate.js";
 import { useAppAddress } from "../use-app-address.js";
+import { useProjectUi } from "../pages/project-ui.js";
 import { DataGrid } from "../../data-grid/data-grid.js";
 import { embeddedColumns } from "../embedded-list/embedded-columns.js";
 import { useHandOrder } from "./use-hand-order.js";

package/dist/app/hand-order/use-hand-order.js

@@ -1,9 +1,9 @@
 import { keys } from "../../data/query-keys.js";
 import { useClient } from "../../data/api-provider.js";
-import { recordId, recordKey } from "../../live/model-helpers.js";
 import { useToast } from "../../toasts/toast-provider.js";
-import { useAdminMeta } from "../meta-gate.js";
+import { recordId, recordKey } from "../../live/model-helpers.js";
 import { refusalReason } from "../displays/board-columns.js";
+import { useAdminMeta } from "../meta-gate.js";
 import { useRefreshResource } from "../pages/use-layout-data.js";
 import { listLabels, withLabels } from "../../live/relation-labels.js";
 import { useRef, useState } from "react";

package/dist/app/import/import-dialog.js

@@ -1,7 +1,7 @@
 import { Button } from "../../primitives/button.js";
 import { humanize } from "../../live/naming.js";
-import { ResponsiveDialog } from "../../primitives/responsive-dialog.js";
 import { ErrorBanner } from "../error-banner.js";
+import { ResponsiveDialog } from "../../primitives/responsive-dialog.js";
 import { unmappedRequired } from "./mapping.js";
 import { ImportCheckStep, ImportChecking } from "./import-check-step.js";
 import { ImportFileStep } from "./import-file-step.js";

package/dist/app/list-edit/use-list-edits.js

@@ -1,7 +1,7 @@
 import { keys } from "../../data/query-keys.js";
 import { useClient } from "../../data/api-provider.js";
-import { recordKey } from "../../live/model-helpers.js";
 import { useToast } from "../../toasts/toast-provider.js";
+import { recordKey } from "../../live/model-helpers.js";
 import { useRef, useState } from "react";
 import { isApiError } from "@protobase/client";
 import { useQueryClient } from "@tanstack/react-query";

package/dist/app/list-page.js

@@ -3,17 +3,17 @@ import { usePageScroll } from "../app-shell/page-scroll.js";
 import { PageHeader } from "../app-shell/page-header.js";
 import { useAuth } from "../auth/auth-provider.js";
 import { Button, buttonClass } from "../primitives/button.js";
-import { recordKey, recordTitleField } from "../live/model-helpers.js";
 import { humanize } from "../live/naming.js";
-import { useProjectUi } from "./pages/project-ui.js";
-import { Notice, useAdminMeta, usePermissions } from "./meta-gate.js";
-import { Sheet } from "../primitives/sheet.js";
 import { ErrorBanner } from "./error-banner.js";
+import { recordKey, recordTitleField } from "../live/model-helpers.js";
 import { columnsFromModel, listColumnNames } from "../live/columns-from-model.js";
 import { displayRow, listDisplayChoices, loadedFields, shownListDisplay } from "./displays/list-displays.js";
 import { parseSort, sortToOrderBy } from "./list-order.js";
 import { listedResource } from "./current-address.js";
+import { Notice, useAdminMeta, usePermissions } from "./meta-gate.js";
 import { AppLink, useAppAddress } from "./use-app-address.js";
+import { useProjectUi } from "./pages/project-ui.js";
+import { Sheet } from "../primitives/sheet.js";
 import { can, rowAllows } from "./permissions.js";
 import { pinnedStorageKey } from "../data-grid/pinned-storage.js";
 import { DataGrid } from "../data-grid/data-grid.js";
@@ -31,6 +31,7 @@ import { SignInPrompt } from "../auth/sign-in-prompt.js";
 import { relatedColumnLoads } from "./related-dots/dot-card.js";
 import { useDisplayRows } from "./displays/use-display-rows.js";
 import { BoardDisplay } from "./displays/board-display.js";
+import { CalendarDisplay } from "./displays/calendar-display.js";
 import { CustomDisplay } from "./displays/custom-display.js";
 import { MapDisplay } from "./displays/map-display.js";
 import { DisplaySwitch, SortMenu } from "./displays/display-controls.js";
@@ -115,7 +116,7 @@ const ListPage = ({ address }) => {
 };
 const LoadedList = ({ model, address, scope, heading }) => {
 	const meta = useAdminMeta();
-	const { set, go, href } = useAppAddress();
+	const { set, listTo, go, href } = useAppAddress();
 	const resource = model.name;
 	const view = meta.views[resource];
 	const fields = useMemo(() => widgetFields(view, model), [view, model]);
@@ -202,10 +203,11 @@ const LoadedList = ({ model, address, scope, heading }) => {
 		setFilter(state, text ? [...others, where$1.search(text)] : others);
 	};
 	const plural = view?.names?.plural ?? humanize(resource);
-	const sortMenu = display && /* @__PURE__ */ jsx(SortMenu, {
+	const sorted = display?.kind === "calendar" ? void 0 : display;
+	const sortMenu = sorted && /* @__PURE__ */ jsx(SortMenu, {
 		model,
 		view,
-		display,
+		display: sorted,
 		orderBy,
 		onChange: (next) => set({ orderBy: next })
 	});
@@ -234,12 +236,12 @@ const LoadedList = ({ model, address, scope, heading }) => {
 		onRemove: (key) => setFilter(removeChip(state, key)),
 		onClear: () => setFilter(emptyFilterState)
 	});
-	const phoneSort = display && /* @__PURE__ */ jsx(FilterSection, {
+	const phoneSort = sorted && /* @__PURE__ */ jsx(FilterSection, {
 		title: "Sort",
 		children: /* @__PURE__ */ jsx(SortMenu, {
 			model,
 			view,
-			display,
+			display: sorted,
 			orderBy,
 			onChange: (next) => set({ orderBy: next }),
 			className: "min-h-11 w-full"
@@ -425,6 +427,15 @@ const LoadedList = ({ model, address, scope, heading }) => {
 			filter: loadFilter,
 			orderBy
 		});
+		if (display.kind === "calendar") return /* @__PURE__ */ jsx(CalendarDisplay, {
+			model,
+			view,
+			display,
+			fields: loaded,
+			filter: loadFilter,
+			at: address.calendar,
+			linkTo: (calendar) => listTo({ calendar })
+		});
 		return /* @__PURE__ */ jsx(CustomDisplay, {
 			display,
 			list: displayRows

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

@@ -1,6 +1,6 @@
-import { useAdminMeta } from "../meta-gate.js";
 import { Section } from "../../record-view/section.js";
 import { SidebarCard } from "../../record-view/record-sidebar.js";
+import { useAdminMeta } from "../meta-gate.js";
 import { recordPosition } from "./record-position.js";
 import { Suspense, lazy } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/app/pages/action-inputs/action-inputs-dialog.js

@@ -1,11 +1,11 @@
 import { Button } from "../../../primitives/button.js";
-import { useProjectUi } from "../project-ui.js";
-import { useAdminMeta } from "../../meta-gate.js";
-import { ResponsiveDialog } from "../../../primitives/responsive-dialog.js";
 import { Field } from "../../../record-view/field.js";
 import { isChosen } from "../../create/create-values.js";
 import { ErrorBanner } from "../../error-banner.js";
+import { useAdminMeta } from "../../meta-gate.js";
+import { useProjectUi } from "../project-ui.js";
 import { FieldEditor } from "../../field-editor.js";
+import { ResponsiveDialog } from "../../../primitives/responsive-dialog.js";
 import { answeredValues, inputField, inputHints, refusedAnswers, startingAnswers } from "./input-answers.js";
 import { inputErrors } from "./input-errors.js";
 import { useId, useState } from "react";

package/dist/app/pages/blocks/card-row.js

@@ -1,6 +1,6 @@
 import { Skeleton } from "../../../primitives/skeleton.js";
-import { useAdminMeta } from "../../meta-gate.js";
 import { ErrorBanner } from "../../error-banner.js";
+import { useAdminMeta } from "../../meta-gate.js";
 import { RecordScope } from "../record-scope.js";
 import { scopeOf, useListPage } from "../use-layout-data.js";
 import { propsOf } from "./block-props.js";

package/dist/app/pages/blocks/modal-form.js

@@ -3,18 +3,18 @@ import { Dialog } from "../../../primitives/dialog.js";
 import { useClient } from "../../../data/api-provider.js";
 import { humanize } from "../../../live/naming.js";
 import { useToast } from "../../../toasts/toast-provider.js";
-import { useAdminMeta, usePermissions } from "../../meta-gate.js";
 import { Field } from "../../../record-view/field.js";
 import { differs, toDraft, toPatchValue } from "../../../live/field-values.js";
 import { createBody, isChosen } from "../../create/create-values.js";
 import { ErrorBanner } from "../../error-banner.js";
+import { useAdminMeta, usePermissions } from "../../meta-gate.js";
 import { FieldEditor } from "../../field-editor.js";
+import { fieldErrors, fieldMessage } from "../../field-errors.js";
+import { useFocusFirstInvalid } from "../../use-focus-first-invalid.js";
 import { useLayoutRecord } from "../record-scope.js";
 import { can } from "../../permissions.js";
 import { useFirstRecord, useRefreshResource } from "../use-layout-data.js";
 import { propsOf } from "./block-props.js";
-import { fieldErrors, fieldMessage } from "../../field-errors.js";
-import { useFocusFirstInvalid } from "../../use-focus-first-invalid.js";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/pages/blocks/modal-form.tsx

package/dist/app/pages/blocks/record-card.js

@@ -1,6 +1,6 @@
 import { Skeleton } from "../../../primitives/skeleton.js";
-import { useAdminMeta } from "../../meta-gate.js";
 import { ErrorBanner } from "../../error-banner.js";
+import { useAdminMeta } from "../../meta-gate.js";
 import { RecordScope } from "../record-scope.js";
 import { useFirstRecord } from "../use-layout-data.js";
 import { propsOf } from "./block-props.js";

package/dist/app/pages/field-value.js

@@ -1,10 +1,10 @@
 import { cn } from "../../lib/cn.js";
 import { keys } from "../../data/query-keys.js";
 import { useClient } from "../../data/api-provider.js";
-import { useAdminMeta } from "../meta-gate.js";
 import { fileShown, shownImage } from "../../live/file-values.js";
 import { isMarkdown } from "../../markdown/markdown-hint.js";
 import { displayValue } from "../../live/display-value.js";
+import { useAdminMeta } from "../meta-gate.js";
 import { AppLink } from "../use-app-address.js";
 import { FileImage } from "../../live/file-image.js";
 import { useShownWidget } from "../field-types/shown-widget.js";

package/dist/app/pages/use-run-action.js

@@ -1,8 +1,8 @@
 import { useClient, useResourceClient } from "../../data/api-provider.js";
 import { useToast } from "../../toasts/toast-provider.js";
-import { useProjectUi } from "./project-ui.js";
 import { useAdminMeta, usePermissions } from "../meta-gate.js";
 import { useAppAddress } from "../use-app-address.js";
+import { useProjectUi } from "./project-ui.js";
 import { can } from "../permissions.js";
 import { actionFor, linkTarget, openLink } from "./action-href.js";
 import { useRefreshResource } from "./use-layout-data.js";
@@ -12,10 +12,10 @@ import { fillAddress } from "@protobase/schema/internal";
 const message = (error) => error instanceof Error ? error.message : "Something went wrong";
 /**
 * The named actions of `resource`'s view, ready to run on `scope` (the record they act on): built-in behaviour first
-* (`update`, `delete`, `link`), else the handler the project registered under the action's name. An update whose values
-* the record holds already is left out, and so is a link to a URL the record holds while it holds none. `blocked` says
-* why one cannot run; `afterRun` hears about every action that succeeded. `submit` runs one with the answers to its
-* inputs and throws its failure, for the dialog to show.
+* (`update`, `delete`, `link`, and `ai`, which the server runs), else the handler the project registered under the
+* action's name. An update whose values the record holds already is left out, and so is a link to a URL the record
+* holds while it holds none. `blocked` says why one cannot run; `afterRun` hears about every action that succeeded.
+* `submit` runs one with the answers to its inputs and throws its failure, for the dialog to show.
 */
 const useActionRunner = (resource, scope, afterRun) => {
 	const { views } = useAdminMeta();
@@ -30,8 +30,9 @@ const useActionRunner = (resource, scope, afterRun) => {
 	const actions = (views[resource]?.actions ?? []).flatMap((action) => actionFor(action, scope?.record) ?? []);
 	const blocked = (action) => {
 		const kind = action.run?.kind;
-		if ((kind === "update" || kind === "delete") && !scope) return "Needs a record";
-		if (kind === "update" && (!can(permissions, "update") || scope?.permissions?.update === false)) return "You cannot change this record";
+		if ((kind === "update" || kind === "delete" || kind === "ai") && !scope) return "Needs a record";
+		if ((kind === "update" || kind === "ai") && (!can(permissions, "update") || scope?.permissions?.update === false)) return "You cannot change this record";
+		if (action.run?.kind === "ai" && scope?.permissions?.fields?.[action.run.writes] === "read") return "You cannot change this record";
 		if (kind === "delete" && (!can(permissions, "delete") || scope?.permissions?.delete === false)) return "You cannot delete this record";
 		if (!action.run && !handlers?.[action.name]) return `The app has no handler for "${action.name}"`;
 		const custom = action.inputs?.find((input) => input.kind === "custom" && !components?.[input.component ?? ""]);
@@ -46,6 +47,7 @@ const useActionRunner = (resource, scope, afterRun) => {
 		}
 		if (run?.kind === "update") await client.update(resource, scope.key, run.values, scope.etag ?? "*");
 		else if (run?.kind === "delete") await client.remove(resource, scope.key, { etag: scope.etag });
+		else if (run?.kind === "ai") await client.generate(resource, scope.key, action.name);
 		else await handlers[action.name]({
 			resource,
 			record: scope?.record,

package/dist/app/record-lines.js

@@ -1,6 +1,6 @@
-import { usePermissions } from "./meta-gate.js";
 import { InlineChildTable } from "../inline-child-table/inline-child-table.js";
 import { Section } from "../record-view/section.js";
+import { usePermissions } from "./meta-gate.js";
 import { can } from "./permissions.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/app/record-lines.tsx

package/dist/app/record-page.js

@@ -8,10 +8,7 @@ import { keys } from "../data/query-keys.js";
 import { useClient } from "../data/api-provider.js";
 import { useNavigationGuard, useRouter } from "./router.js";
 import { useOpenedRecord } from "../data/use-record.js";
-import { recordTitle } from "../live/model-helpers.js";
 import { humanize } from "../live/naming.js";
-import { useProjectUi } from "./pages/project-ui.js";
-import { Notice, useAdminMeta, usePermissions } from "./meta-gate.js";
 import { Field } from "../record-view/field.js";
 import { Section } from "../record-view/section.js";
 import { MetadataCard, RelatedRecords, SidebarCard } from "../record-view/record-sidebar.js";
@@ -23,19 +20,22 @@ import { fieldHelp, helpShown, recordShown, whenShown } from "./record-mode/reco
 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 { toneFor } from "../live/columns-from-model.js";
 import { displayValue } 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 { useProjectUi } from "./pages/project-ui.js";
 import { shownWidget } from "./field-types/shown-widget.js";
 import { WidgetPart } from "./field-types/widget-part.js";
 import { Markdown } from "../markdown/markdown.js";
 import { FieldEditor } from "./field-editor.js";
+import { fieldMessage } from "./field-errors.js";
+import { useFocusFirstInvalid } from "./use-focus-first-invalid.js";
 import { can, fieldAccess } from "./permissions.js";
 import { ValueBadge } from "./value-badge.js";
 import { FieldValue } from "./pages/field-value.js";
-import { fieldMessage } from "./field-errors.js";
-import { useFocusFirstInvalid } from "./use-focus-first-invalid.js";
 import { namedIcon } from "./named-icon.js";
 import { useDeleteFlow } from "./delete/use-delete-flow.js";
 import { useRestore } from "./delete/use-restore.js";
@@ -49,6 +49,7 @@ import { useLines } from "./use-lines.js";
 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 { useRecordEditor } from "./use-record-editor.js";
 import { useRelatedRecords } from "./use-related-records.js";
 import { RelatedSection } from "./related-section.js";
@@ -62,21 +63,28 @@ import { enumLabel } from "@protobase/schema";
 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, then History when the resource
-* keeps it. 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.
+* keeps it and Comments when it takes them. 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;
 	const shown = Object.values(model.fields).filter((field) => !hidden(model, field.name));
 	const editable = shown.filter((field) => !field.readOnly);
-	return [{
-		kind: "section",
-		title: "Details",
-		fields: (editable.length > 0 && !read ? editable : shown).map((field) => field.name)
-	}, ...model.history ? [{
-		kind: "history",
-		title: "History"
-	}] : []];
+	return [
+		{
+			kind: "section",
+			title: "Details",
+			fields: (editable.length > 0 && !read ? editable : shown).map((field) => field.name)
+		},
+		...model.history ? [{
+			kind: "history",
+			title: "History"
+		}] : [],
+		...model.comments ? [{
+			kind: "comments",
+			title: "Comments"
+		}] : []
+	];
 };
 const RecordPage = ({ resource, recordKey }) => {
 	const { resources } = useAdminMeta();
@@ -424,6 +432,12 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 										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";

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

@@ -1,10 +1,10 @@
 import { useIsXs } from "../../lib/use-media-query.js";
 import { Skeleton } from "../../primitives/skeleton.js";
 import { humanize } from "../../live/naming.js";
-import { useAdminMeta } from "../meta-gate.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 { useLiveRows } from "../../live/use-live-rows.js";
 import { viewAllAddress } from "../embedded-list/embedded-display.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 { useAdminMeta } from "../meta-gate.js";
 import { ErrorBanner } from "../error-banner.js";
 import { listedResource } from "../current-address.js";
+import { useAdminMeta } from "../meta-gate.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-dots/related-dots.js

@@ -1,7 +1,7 @@
 import { cn } from "../../lib/cn.js";
 import { toneDots } from "../../primitives/badge.js";
-import { recordTitleField } from "../../live/model-helpers.js";
 import { humanize } from "../../live/naming.js";
+import { recordTitleField } from "../../live/model-helpers.js";
 import { toneFor } from "../../live/columns-from-model.js";
 import { displayValue } from "../../live/display-value.js";
 import { displayRow } from "../displays/list-displays.js";

package/dist/app/related-opens.js

@@ -0,0 +1,22 @@
+//#region src/app/related-opens.ts
+const opensTo = (model, name, resources) => {
+	const field = Object.hasOwn(model.fields, name) ? model.fields[name] : void 0;
+	return field?.type === "relation" && field.relation !== void 0 && resources[field.relation.resource]?.primaryKey.length === 1;
+};
+/**
+* The relation field whose record a related section's row opens: `item.open`, else the one relation in the listed
+* resource's primary key besides `item.field`, when there is exactly one; none when the rows are records in their own right.
+*/
+const relatedOpens = (item, model, resources) => {
+	if (item.open !== void 0) return item.open !== item.field && opensTo(model, item.open, resources) ? item.open : void 0;
+	const candidates = model.primaryKey.filter((name) => name !== item.field && name !== model.tenant && opensTo(model, name, resources));
+	return candidates.length === 1 ? candidates[0] : void 0;
+};
+/** The key of the record a row's relation `name` points at; a list row holds a shown relation as `{ id, name }`. Undefined when empty. */
+const relationTarget = (row, name) => {
+	const value = row[name];
+	const id = typeof value === "object" && value !== null && "id" in value ? value.id : value;
+	return typeof id === "string" || typeof id === "number" ? id : void 0;
+};
+//#endregion
+export { relatedOpens, relationTarget };