@protobase/ui 0.21.10 → 0.21.12

package/dist/app/app.js

@@ -15,11 +15,11 @@ import { isAdmin, userToShell } from "../auth/user-to-shell.js";
 import { useOpenedRecord } from "../data/use-record.js";
 import { humanize } from "../live/naming.js";
 import { ToastProvider } from "../toasts/toast-provider.js";
-import { documentTitle, titleParts, useDocumentTitle } from "./document-title.js";
 import { recordTitle } from "../live/model-helpers.js";
 import { sourceStatusOf } from "../data/with-sources.js";
 import { MetaGate, Notice, useAdminMeta } from "./meta-gate.js";
 import { useAppAddress } from "./use-app-address.js";
+import { documentTitle, titleParts, useDocumentTitle } from "./document-title.js";
 import { ProjectUiContext, useProjectUi } from "./pages/project-ui.js";
 import { PublicFormPage } from "../forms/public-form-page.js";
 import { useFormAddress } from "../forms/use-form-address.js";

package/dist/app/comments/comment-composer.js

@@ -1,8 +1,8 @@
 import { cn } from "../../lib/cn.js";
 import { Button } from "../../primitives/button.js";
 import { useToast } from "../../toasts/toast-provider.js";
-import { Textarea } from "../../primitives/textarea.js";
 import { refusalReason } from "../displays/board-columns.js";
+import { Textarea } from "../../primitives/textarea.js";
 import { menuKeyTarget } from "../../primitives/menu-keys.js";
 import { activeMention, insertMention, mentionedIds } from "./mention-text.js";
 import { useMentionable } from "./use-mentionable.js";

package/dist/app/create/create-page.js

@@ -1,9 +1,9 @@
 import { useClient } from "../../data/api-provider.js";
 import { humanize } from "../../live/naming.js";
-import { createBody, createSections, hasDatabaseDefault, initialDraft, isChosen, isRequired } from "./create-values.js";
 import { recordKey } from "../../live/model-helpers.js";
 import { Notice, useAdminMeta, usePermissions } from "../meta-gate.js";
 import { useAppAddress } from "../use-app-address.js";
+import { createBody, createSections, hasDatabaseDefault, initialDraft, isChosen, isRequired } from "./create-values.js";
 import { FieldEditor } from "../field-editor.js";
 import { fieldErrors, fieldMessage } from "../field-errors.js";
 import { useFocusFirstInvalid } from "../use-focus-first-invalid.js";

package/dist/app/create/create-values.js

@@ -1,5 +1,7 @@
 import { isEditable, toPatchValue } from "../../live/field-values.js";
 import { whenShown } from "../record-mode/record-mode.js";
+import { isRecordCondition } from "@protobase/schema";
+import { layoutItems } from "@protobase/schema/internal";
 //#region src/app/create/create-values.ts
 const isChosen = (value) => typeof value === "object" && value !== null && "key" in value;
 /** Fields the user can set on a new record: not read-only, not the tenant, and not structured data. */
@@ -12,8 +14,8 @@ const isCreatable = (model, field) => field.name !== model.tenant && !field.read
 const createSections = (model, view) => {
 	const creatable = Object.values(model.fields).filter((field) => isCreatable(model, field)).map((field) => field.name);
 	const placed = /* @__PURE__ */ new Set();
-	const sections = (view?.layout ?? []).flatMap((item) => {
-		if (item.kind !== "section" || !whenShown(item.when, true)) return [];
+	const sections = layoutItems(view?.layout ?? []).flatMap((item) => {
+		if (item.kind !== "section" || isRecordCondition(item.when) || !whenShown(item.when, true)) return [];
 		const fields = item.fields.filter((name) => creatable.includes(name) && !placed.has(name) && whenShown(view?.fields[name]?.when, true));
 		fields.forEach((name) => placed.add(name));
 		return fields.length > 0 ? [{

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

@@ -21,6 +21,7 @@ export type CurrentAddress = ListAddress | {
   resource: string;
   key: string;
   edit?: true;
+  open?: readonly string[];
 } | {
   kind: 'create';
   resource: string;

package/dist/app/current-address.js

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

package/dist/app/displays/board-column.js

@@ -2,8 +2,8 @@ import { cn } from "../../lib/cn.js";
 import { Skeleton } from "../../primitives/skeleton.js";
 import { Button } from "../../primitives/button.js";
 import { humanize } from "../../live/naming.js";
-import { ErrorBanner } from "../error-banner.js";
 import { boardCard } from "./board-columns.js";
+import { ErrorBanner } from "../error-banner.js";
 import { rowAllows } from "../permissions.js";
 import { ValueBadge } from "../value-badge.js";
 import { RecordCard } from "./record-card.js";

package/dist/app/displays/calendar-display.js

@@ -2,9 +2,9 @@ import { cn } from "../../lib/cn.js";
 import { Skeleton } from "../../primitives/skeleton.js";
 import { dayIn, viewerZone } from "../../format/zone.js";
 import { formatDate, formatWeekday } from "../../format/date.js";
-import { ErrorBanner } from "../error-banner.js";
 import { usePermissions } from "../meta-gate.js";
 import { AppLink } from "../use-app-address.js";
+import { ErrorBanner } from "../error-banner.js";
 import { can, rowAllows } from "../permissions.js";
 import { collision } from "./board-dnd.js";
 import { byDay, calendarView, gridDays, rangeOf } from "./calendar-range.js";

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

@@ -1,7 +1,7 @@
 import { Skeleton } from "../../primitives/skeleton.js";
 import { humanize } from "../../live/naming.js";
-import { ErrorBanner } from "../error-banner.js";
 import { displayRow } from "./list-displays.js";
+import { ErrorBanner } from "../error-banner.js";
 import { RecordCard } from "./record-card.js";
 import { VirtualCards } from "./virtual-cards.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/app/displays/map-display.js

@@ -2,9 +2,9 @@ import { cn } from "../../lib/cn.js";
 import { Button } from "../../primitives/button.js";
 import { Problem } from "../pages/problem.js";
 import { humanize } from "../../live/naming.js";
-import { ErrorBanner } from "../error-banner.js";
 import { mapCards } from "./list-displays.js";
 import { useAdminMeta } from "../meta-gate.js";
+import { ErrorBanner } from "../error-banner.js";
 import { useDebounced } from "../../lib/use-debounced.js";
 import { RecordCard } from "./record-card.js";
 import { boundsAround, worldArea } from "../map/map-area.js";

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

@@ -1,12 +1,12 @@
 import { useIsDesktop, 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 { 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 { ErrorBanner } from "../error-banner.js";
 import { useProjectUi } from "../pages/project-ui.js";
 import { can } from "../permissions.js";
 import { DataGrid } from "../../data-grid/data-grid.js";

package/dist/app/field-editor.js

@@ -3,13 +3,13 @@ import { useFieldControl } from "../primitives/field-control.js";
 import { Input } from "../primitives/input.js";
 import { buttonClass } from "../primitives/button.js";
 import { humanize } from "../live/naming.js";
-import { fromDraft, isEditable, toFieldDraft } from "../live/field-values.js";
-import { Switch } from "../primitives/switch.js";
-import { Textarea } from "../primitives/textarea.js";
 import { isMarkdown } from "../markdown/markdown-hint.js";
 import { contactFormat, contactInputProps } from "../live/contact-links.js";
 import { displayValue, valueTitle } from "../live/display-value.js";
 import { AppLink } from "./use-app-address.js";
+import { fromDraft, isEditable, toFieldDraft } from "../live/field-values.js";
+import { Switch } from "../primitives/switch.js";
+import { Textarea } from "../primitives/textarea.js";
 import { RelationPicker } from "./relation-picker.js";
 import { SensitiveField } from "./sensitive-field.js";
 import { FileField } from "./file-field.js";

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

@@ -1,4 +1,5 @@
 import { whenShown } from "../record-mode/record-mode.js";
+import { layoutItems } from "@protobase/schema/internal";
 //#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
@@ -6,7 +7,7 @@ import { whenShown } from "../record-mode/record-mode.js";
 * field pointing at the gallery's record.
 */
 const detailFields = (model, view, omit) => {
-	const sections = (view?.layout ?? []).flatMap((item) => item.kind === "section" && whenShown(item.when, false) ? item.fields : []);
+	const sections = layoutItems(view?.layout ?? []).flatMap((item) => item.kind === "section" && whenShown(item.when, false) ? 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) && whenShown(view?.fields[name]?.when, false));
 };
 //#endregion

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

@@ -3,8 +3,8 @@ import { Skeleton } from "../../primitives/skeleton.js";
 import { humanize } from "../../live/naming.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 { ErrorBanner } from "../error-banner.js";
 import { FileImage } from "../../live/file-image.js";
 import { galleryTiles } from "./gallery-layout.js";
 import { Lightbox } from "./lightbox.js";

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

@@ -1,9 +1,9 @@
 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 { SpecTable } from "../../record-view/spec-table.js";
 import { ErrorBanner } from "../error-banner.js";
-import { AppLink } from "../use-app-address.js";
 import { fieldAccess } from "../permissions.js";
 import { FieldValue } from "../pages/field-value.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/app/group-open.js

@@ -0,0 +1,7 @@
+//#region src/app/group-open.ts
+/** The open groups after the person opens or closes `title`. */
+const toggledOpen = (open = [], title) => open.includes(title) ? open.filter((name) => name !== title) : [...open, title];
+/** Whether a group shows its items: always unless `collapsed`, else when the address names it or one of its sections holds a field that needs the person's attention. */
+const groupOpen = (group, open = [], needsAttention) => !group.collapsed || open.includes(group.title) || group.items.some((item) => item.kind === "section" && item.fields.some(needsAttention));
+//#endregion
+export { groupOpen, toggledOpen };

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

@@ -1,10 +1,10 @@
 import { Skeleton } from "../../primitives/skeleton.js";
 import { humanize } from "../../live/naming.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 { ErrorBanner } from "../error-banner.js";
 import { useProjectUi } from "../pages/project-ui.js";
 import { DataGrid } from "../../data-grid/data-grid.js";
 import { embeddedColumns } from "../embedded-list/embedded-columns.js";

package/dist/app/incoming-relations.js

@@ -1,5 +1,6 @@
 import { humanize } from "../live/naming.js";
 import { createWhere, printFilter } from "@protobase/schema";
+import { layoutItems } from "@protobase/schema/internal";
 //#region src/app/incoming-relations.ts
 const where$1 = createWhere();
 /**
@@ -10,7 +11,7 @@ const where$1 = createWhere();
 */
 const incomingRelations = (model, resources, views, layout, lines) => {
 	if (model.primaryKey.length !== 1) return [];
-	const listed = new Set(layout.flatMap((item) => item.kind === "related" && !item.through ? [`${item.resource}.${item.field}`] : []));
+	const listed = new Set(layoutItems(layout).flatMap((item) => item.kind === "related" && !item.through ? [`${item.resource}.${item.field}`] : []));
 	const found = Object.values(resources).flatMap((source) => Object.values(source.fields).filter((field) => field.type === "relation" && field.relation?.resource === model.name && field.relation.columns.length === 1 && field.filterable).filter((field) => field.name !== source.tenant && source.name !== lines?.name && !listed.has(`${source.name}.${field.name}`)).map((field) => ({
 		source,
 		field: field.name

package/dist/app/list-page.js

@@ -4,7 +4,6 @@ import { PageHeader } from "../app-shell/page-header.js";
 import { useAuth } from "../auth/auth-provider.js";
 import { Button, buttonClass } from "../primitives/button.js";
 import { humanize } from "../live/naming.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";
@@ -12,6 +11,7 @@ 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 { ErrorBanner } from "./error-banner.js";
 import { useProjectUi } from "./pages/project-ui.js";
 import { Sheet } from "../primitives/sheet.js";
 import { can, rowAllows } from "./permissions.js";

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

@@ -1,8 +1,8 @@
 import { Button } from "../../../primitives/button.js";
 import { Field } from "../../../record-view/field.js";
+import { useAdminMeta } from "../../meta-gate.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";

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

@@ -1,6 +1,6 @@
 import { Skeleton } from "../../../primitives/skeleton.js";
-import { ErrorBanner } from "../../error-banner.js";
 import { useAdminMeta } from "../../meta-gate.js";
+import { ErrorBanner } from "../../error-banner.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

@@ -4,10 +4,10 @@ import { useClient } from "../../../data/api-provider.js";
 import { humanize } from "../../../live/naming.js";
 import { useToast } from "../../../toasts/toast-provider.js";
 import { Field } from "../../../record-view/field.js";
+import { useAdminMeta, usePermissions } from "../../meta-gate.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";

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

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

package/dist/app/pages/blocks/show.js

@@ -1,43 +1,14 @@
-import { useClient } from "../../../data/api-provider.js";
-import { useAdminMeta } from "../../meta-gate.js";
 import { useLayoutRecord } from "../record-scope.js";
-import { countQuery } from "../use-layout-data.js";
 import { propsOf } from "./block-props.js";
-import { usePathValues } from "../use-path-value.js";
-import { useMemo } from "react";
-import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
-import { useQueries } from "@tanstack/react-query";
-import { countedResource, evaluateCondition, parseCondition } from "@protobase/layout";
+import { useConditions } from "../use-conditions.js";
+import { Fragment, jsx } from "react/jsx-runtime";
+import "@protobase/layout";
 //#region src/app/pages/blocks/show.tsx
 /** Its children while `when` holds: fields of the record around it, and `<resource>.count` for any resource. */
 const ShowBlock = ({ node, children }) => {
 	const { when } = propsOf(node);
-	const { resources } = useAdminMeta();
-	const client = useClient();
-	const scope = useLayoutRecord();
-	const condition = useMemo(() => parseCondition(when), [when]);
-	const paths = condition.ok ? condition.paths : [];
-	const counted = paths.map((path) => countedResource(path, (name) => Boolean(scope && Object.hasOwn(scope.model.fields, name))));
-	const fieldPaths = paths.filter((_, index) => counted[index] === void 0);
-	const fields = usePathValues(scope, fieldPaths);
-	const counts = useQueries({ queries: counted.flatMap((resource) => {
-		const model = resource === void 0 ? void 0 : resources[resource];
-		if (!model) return [];
-		return [countQuery(client, model)];
-	}) });
-	if (!condition.ok) return null;
-	if (fields.some((value) => value.state === "loading") || counts.some((count) => count.isPending)) return null;
-	const values = {};
-	fieldPaths.forEach((path, index) => {
-		const value = fields[index];
-		if (value.state === "ready") values[path] = value.value;
-	});
-	let next = 0;
-	paths.forEach((path, index) => {
-		if (counted[index] === void 0) return;
-		values[path] = resources[counted[index]] ? counts[next++]?.data ?? 0 : 0;
-	});
-	return evaluateCondition(condition, values) ? /* @__PURE__ */ jsx(Fragment$1, { children }) : null;
+	const [shown] = useConditions([when], useLayoutRecord());
+	return shown ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
 };
 //#endregion
 export { ShowBlock };

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

@@ -1,8 +1,8 @@
 import { useTopBarSlot } from "../../app-shell/top-bar-slot.js";
 import "../../app-shell/top-bar.js";
 import { ActionRail } from "../../record-view/action-rail.js";
-import { ActionMenu } from "../../record-view/action-menu.js";
 import { AppLink, useAppAddress } from "../use-app-address.js";
+import { ActionMenu } from "../../record-view/action-menu.js";
 import { ActionPrompt, asksFirst } from "./action-prompt.js";
 import { useActionRunner } from "./use-run-action.js";
 import { actionIcon } from "../action-icon.js";

package/dist/app/pages/use-conditions.js

@@ -0,0 +1,49 @@
+import { useClient } from "../../data/api-provider.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { countQuery } from "./use-layout-data.js";
+import { usePathValues } from "./use-path-value.js";
+import { useMemo } from "react";
+import { useQueries } from "@tanstack/react-query";
+import { countedResource, evaluateCondition, parseCondition } from "@protobase/layout";
+//#region src/app/pages/use-conditions.ts
+/**
+* Whether each condition holds for the record around it (`scope`): `undefined` while a value it reads loads, `false`
+* when it does not parse. Fields come from the stored record, followed through relations; `<resource>.count` counts
+* records. All conditions share one set of queries, so the hook count never changes with the conditions.
+*/
+const useConditions = (whens, scope) => {
+	const { resources } = useAdminMeta();
+	const client = useClient();
+	const key = JSON.stringify(whens);
+	const parsed = useMemo(() => JSON.parse(key).map(parseCondition), [key]);
+	const isField = (name) => Boolean(scope && Object.hasOwn(scope.model.fields, name));
+	const paths = [...new Set(parsed.flatMap((condition) => condition.ok ? condition.paths : []))];
+	const counted = new Map(paths.flatMap((path) => {
+		const resource = countedResource(path, isField);
+		return resource === void 0 ? [] : [[path, resource]];
+	}));
+	const fieldPaths = paths.filter((path) => !counted.has(path));
+	const countedModels = [...new Set(counted.values())].flatMap((resource) => resources[resource] ? [resources[resource]] : []);
+	const fields = usePathValues(scope, fieldPaths);
+	const counts = useQueries({ queries: countedModels.map((model) => countQuery(client, model)) });
+	return parsed.map((condition) => {
+		if (!condition.ok) return false;
+		const values = {};
+		for (const path of condition.paths) {
+			const resource = counted.get(path);
+			if (resource === void 0) {
+				const value = fields[fieldPaths.indexOf(path)];
+				if (value.state === "loading") return void 0;
+				if (value.state === "ready") values[path] = value.value;
+				continue;
+			}
+			const index = countedModels.findIndex((model) => model.name === resource);
+			if (index === -1) values[path] = 0;
+			else if (counts[index].isPending) return void 0;
+			else values[path] = counts[index].data ?? 0;
+		}
+		return evaluateCondition(condition, values);
+	});
+};
+//#endregion
+export { useConditions };

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

@@ -32,7 +32,10 @@ const recordShown = (mode, canUpdate, edit) => {
 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;
-/** Whether a field or layout item shows: always, unless it says only while editing or only while reading and the page is not. */
+/**
+* Whether a field or layout item shows: always, unless it says only while editing or only while reading and the page is not.
+* A record condition is no mode and counts as always here; the record page evaluates it separately.
+*/
 const whenShown = (when, editing) => {
 	if (when === "editing") return editing;
 	if (when === "reading") return !editing;

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

@@ -0,0 +1,25 @@
+import { whenShown } from "./record-mode.js";
+import { isRecordCondition } from "@protobase/schema";
+//#region src/app/record-mode/shown-layout.ts
+/** The items with a record condition in `when`, those inside groups too, whose conditions the page evaluates: a group before its items. */
+const conditionalItems = (items) => items.flatMap((item) => item.kind === "group" ? [item, ...item.items] : [item]).filter((item) => isRecordCondition(item.when));
+/**
+* The items that show: those with a record condition only when it holds (`held`, one answer per conditional item in
+* the order `conditionalItems` lists them, `undefined` while loading) and the page is no preview; the others by the
+* form or read view. A group keeps the items inside it that show, and goes when it or all of them do not.
+*/
+const shownLayout = (items, held, editing, preview) => {
+	let next = 0;
+	const shown = (item) => isRecordCondition(item.when) ? !preview && held[next++] === true : whenShown(item.when, editing);
+	return items.flatMap((item) => {
+		if (item.kind !== "group") return shown(item) ? [item] : [];
+		const groupShown = shown(item);
+		const inner = item.items.filter(shown);
+		return groupShown && inner.length > 0 ? [{
+			...item,
+			items: inner
+		}] : [];
+	});
+};
+//#endregion
+export { conditionalItems, shownLayout };

package/dist/app/record-mode/use-shown-layout.js

@@ -0,0 +1,14 @@
+import { useConditions } from "../pages/use-conditions.js";
+import { conditionalItems, shownLayout } from "./shown-layout.js";
+//#region src/app/record-mode/use-shown-layout.ts
+/**
+* The layout items to draw: those meant for the form or the read view as the page is, and those with a record
+* condition while it holds for the saved record. Conditional items stay out while their values load and on a preview.
+*/
+const useShownLayout = (items, scope, editing, preview) => {
+	const conditions = preview ? [] : conditionalItems(items).map((item) => item.when);
+	const held = useConditions(conditions, scope);
+	return shownLayout(items, held, editing, preview);
+};
+//#endregion
+export { useShownLayout };