@protobase/ui 0.19.8 → 0.19.10

package/dist/app/app.js

@@ -24,7 +24,8 @@ import { breadcrumbFor } from "./breadcrumb-for.js";
 import { sourceStatusOf } from "../data/with-sources.js";
 import { MetaGate, Notice, useAdminMeta } from "./meta-gate.js";
 import { useAppAddress } from "./use-app-address.js";
-import { CreatePage } from "./create/create-page.js";
+import { ComposedPage } from "./pages/composed-page.js";
+import { CreateRoute } from "./create/create-route.js";
 import { ListPage } from "./list-page.js";
 import { MembersPage } from "../organizations/members-page.js";
 import { InvitationsPage } from "../organizations/invitations-page.js";
@@ -35,7 +36,6 @@ import { actingUser } from "../roles/acting-user.js";
 import { useActiveRole } from "../roles/use-active-role.js";
 import { userMenuFromMeta } from "./user-menu-from-meta.js";
 import { navFromMeta } from "./nav-from-meta.js";
-import { ComposedPage } from "./pages/composed-page.js";
 import { ProjectLogo } from "./project-logo.js";
 import { PluginGate, usePluginsOff } from "../plugins/plugin-gate.js";
 import { PluginNotice } from "../plugins/plugin-notice.js";
@@ -163,10 +163,10 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 			address.page,
 			"."
 		]
-	}) : drawnFrom && drawnFrom.state !== "ready" ? /* @__PURE__ */ jsx(SourceNotice, { status: drawnFrom }) : address.kind === "create" ? /* @__PURE__ */ jsx(CreatePage, {
+	}) : drawnFrom && drawnFrom.state !== "ready" ? /* @__PURE__ */ jsx(SourceNotice, { status: drawnFrom }) : address.kind === "create" ? /* @__PURE__ */ jsx(CreateRoute, {
 		resource: address.resource,
 		values: address.values
-	}, `${address.resource}/new?${new URLSearchParams(address.values).toString()}`) : address.kind === "record" ? /* @__PURE__ */ jsx(RecordPage, {
+	}, address.resource) : address.kind === "record" ? /* @__PURE__ */ jsx(RecordPage, {
 		resource: address.resource,
 		recordKey: address.key
 	}, `${address.resource}/${address.key}`) : /* @__PURE__ */ jsx(ListPage, { address }, address.resource);

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

@@ -0,0 +1,9 @@
+import { can } from "../permissions.js";
+//#region src/app/create/create-offered.ts
+/**
+* Whether the list offers New: a view's create page to whoever `/meta` gives that page, whatever the resource's access
+* says; the create form to whoever may create records.
+*/
+const createOffered = (view, pages, permissions) => view?.create ? Object.hasOwn(pages, view.create.page) : can(permissions, "create");
+//#endregion
+export { createOffered };

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

@@ -1,14 +1,14 @@
 import { useClient } from "../../data/api-provider.js";
 import { recordKey } from "../../live/model-helpers.js";
 import { humanize } from "../../live/naming.js";
-import { fetchLabels } from "../../live/relation-labels.js";
 import { Notice, useAdminMeta, usePermissions } from "../meta-gate.js";
+import { can } from "../permissions.js";
 import { useAppAddress } from "../use-app-address.js";
+import { fetchLabels } from "../../live/relation-labels.js";
+import { createBody, createSections, hasDatabaseDefault, initialDraft, isChosen, isRequired } from "./create-values.js";
 import { FieldEditor } from "../field-editor.js";
-import { can } from "../permissions.js";
 import { useLiveSave } from "../use-live-save.js";
 import { CreateRecordForm } from "./create-record-form.js";
-import { createBody, createSections, hasDatabaseDefault, initialDraft, isChosen, isRequired } from "./create-values.js";
 import { useEffect, useState } from "react";
 import { isApiError } from "@protobase/client";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -117,7 +117,7 @@ const LoadedCreate = ({ resource, values }) => {
 				help: view?.fields[name]?.help,
 				required: isRequired(field),
 				error: errors[name],
-				wide: Boolean(view?.fields[name]?.multiline),
+				wide: Boolean(view?.fields[name]?.multiline || view?.fields[name]?.markdown),
 				editor: /* @__PURE__ */ jsx(FieldEditor, {
 					field,
 					hints: view?.fields[name],

package/dist/app/create/create-record-form.js

@@ -1,69 +1,33 @@
-import { Button } from "../../primitives/button.js";
-import { ErrorBanner } from "../error-banner.js";
 import { Field } from "../../record-view/field.js";
 import { Section } from "../../record-view/section.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Form } from "./form.js";
+import { jsx } from "react/jsx-runtime";
 //#region src/app/create/create-record-form.tsx
 /** The presentation of "New <thing>": the view's sections, each field with its editor, and Create or Cancel. */
-const CreateRecordForm = ({ noun, collection, sections, saving, message, onSubmit, onCancel }) => /* @__PURE__ */ jsx("form", {
-	className: "flex-1",
-	onSubmit: (event) => {
-		event.preventDefault();
-		onSubmit();
-	},
-	children: /* @__PURE__ */ jsxs("div", {
-		className: "mx-auto max-w-[760px] px-4 py-6 md:px-10 md:py-8",
-		children: [
-			/* @__PURE__ */ jsxs("header", {
-				className: "flex flex-col gap-4 border-b pb-6 sm:flex-row sm:items-end sm:justify-between sm:gap-6",
-				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
-					className: "text-xs text-muted-foreground",
-					children: collection
-				}), /* @__PURE__ */ jsxs("h1", {
-					className: "mt-1 text-2xl font-semibold tracking-tight",
-					children: ["New ", noun.toLowerCase()]
-				})] }), /* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ jsx(Button, {
-						className: "max-sm:min-h-11",
-						onClick: onCancel,
-						children: "Cancel"
-					}), /* @__PURE__ */ jsxs(Button, {
-						variant: "primary",
-						type: "submit",
-						className: "max-sm:min-h-11 max-sm:flex-1",
-						loading: saving,
-						children: ["Create ", noun.toLowerCase()]
-					})]
-				})]
-			}),
-			message && /* @__PURE__ */ jsx("div", {
-				className: "mt-4",
-				children: /* @__PURE__ */ jsx(ErrorBanner, {
-					title: "Not created",
-					error: new Error(message)
-				})
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "divide-y divide-border",
-				children: sections.map((section) => /* @__PURE__ */ jsx(Section, {
-					title: section.title,
-					help: section.help,
-					children: /* @__PURE__ */ jsx("div", {
-						className: "grid grid-cols-1 gap-x-6 gap-y-5 sm:grid-cols-2",
-						children: section.fields.map((field) => /* @__PURE__ */ jsx(Field, {
-							label: field.label,
-							required: field.required,
-							help: field.help,
-							error: field.error,
-							wide: field.wide,
-							children: field.editor
-						}, field.name))
-					})
-				}, section.title))
-			})
-		]
-	})
+const CreateRecordForm = ({ noun, collection, sections, saving, message, onSubmit, onCancel }) => /* @__PURE__ */ jsx(Form, {
+	title: `New ${noun.toLowerCase()}`,
+	eyebrow: collection,
+	submit: `Create ${noun.toLowerCase()}`,
+	saving,
+	error: message ? new Error(message) : void 0,
+	errorTitle: "Not created",
+	onSubmit,
+	onCancel,
+	children: sections.map((section) => /* @__PURE__ */ jsx(Section, {
+		title: section.title,
+		help: section.help,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "grid grid-cols-1 gap-x-6 gap-y-5 sm:grid-cols-2",
+			children: section.fields.map((field) => /* @__PURE__ */ jsx(Field, {
+				label: field.label,
+				required: field.required,
+				help: field.help,
+				error: field.error,
+				wide: field.wide,
+				children: field.editor
+			}, field.name))
+		})
+	}, section.title))
 });
 //#endregion
 export { CreateRecordForm };

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

@@ -0,0 +1,29 @@
+import { humanize } from "../../live/naming.js";
+import { Notice, useAdminMeta } from "../meta-gate.js";
+import { ComposedPage } from "../pages/composed-page.js";
+import { CreatePage } from "./create-page.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/create/create-route.tsx
+/**
+* `/:resource/new`: the view's create page when it names one, which reads the address's `values` itself and may change
+* them in place, else the create form, started again when the address's `values` change.
+*/
+const CreateRoute = ({ resource, values }) => {
+	const meta = useAdminMeta();
+	const view = meta.views[resource];
+	if (!view?.create) return /* @__PURE__ */ jsx(CreatePage, {
+		resource,
+		values
+	}, new URLSearchParams(values).toString());
+	if (!meta.pages[view.create.page]) return /* @__PURE__ */ jsxs(Notice, {
+		title: "Not allowed",
+		children: [
+			"You cannot create ",
+			view.names?.plural.toLowerCase() ?? humanize(resource),
+			"."
+		]
+	});
+	return /* @__PURE__ */ jsx(ComposedPage, { name: view.create.page });
+};
+//#endregion
+export { CreateRoute };

package/dist/app/create/form.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from "react";
+//#region src/app/create/form.d.ts
+export type FormProps = {
+  /**
+   * The heading, such as "New repair", when the form is the whole page, as the create form is: the heading and its
+   * buttons on top. Without it, the form sits in a page with a heading of its own, a composed page's, and its buttons
+   * follow the sections.
+   */
+  title?: string;
+  /** The line above the heading, such as the records' name. */
+  eyebrow?: string;
+  /** The submit button's label, such as "Create repair". */
+  submit: string;
+  /** The submit button spins and cannot be pressed again. */
+  saving?: boolean;
+  /** The submit button cannot be pressed, while the answers are not complete. */
+  disabled?: boolean;
+  /** A failure that belongs to no field, shown above the sections; an API error shows its messages and hints. */
+  error?: unknown;
+  /** The failure's title. */
+  errorTitle?: string;
+  onSubmit: () => void;
+  /** Shows Cancel beside the submit button. */
+  onCancel?: () => void;
+  /** The form's sections (`Section`), drawn one under the other with a line between them. */
+  children: ReactNode;
+};
+/** The frame of the app's forms: Cancel and the submit button, a failure that belongs to no field, and the sections. */
+export declare const Form: ({ title, eyebrow, submit, saving, disabled, error, errorTitle, onSubmit, onCancel, children }: FormProps) => import("react").JSX.Element;
+//#endregion

package/dist/app/create/form.js

@@ -0,0 +1,72 @@
+import { Button } from "../../primitives/button.js";
+import { ErrorBanner } from "../error-banner.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/create/form.tsx
+/** The frame of the app's forms: Cancel and the submit button, a failure that belongs to no field, and the sections. */
+const Form = ({ title, eyebrow, submit, saving, disabled, error, errorTitle = "Not saved", onSubmit, onCancel, children }) => {
+	const buttons = /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2",
+		children: [onCancel && /* @__PURE__ */ jsx(Button, {
+			className: "max-sm:min-h-11",
+			onClick: onCancel,
+			children: "Cancel"
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: "primary",
+			type: "submit",
+			className: "max-sm:min-h-11 max-sm:flex-1",
+			loading: saving,
+			disabled,
+			children: submit
+		})]
+	});
+	const failure = error !== void 0 && /* @__PURE__ */ jsx("div", {
+		className: "mt-4",
+		children: /* @__PURE__ */ jsx(ErrorBanner, {
+			title: errorTitle,
+			error
+		})
+	});
+	const sections = /* @__PURE__ */ jsx("div", {
+		className: "divide-y divide-border",
+		children
+	});
+	const send = (event) => {
+		event.preventDefault();
+		onSubmit();
+	};
+	if (title === void 0) return /* @__PURE__ */ jsxs("form", {
+		className: "max-w-[760px]",
+		onSubmit: send,
+		children: [
+			failure,
+			sections,
+			/* @__PURE__ */ jsx("footer", {
+				className: "border-t pt-6 sm:flex sm:justify-end",
+				children: buttons
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx("form", {
+		className: "flex-1",
+		onSubmit: send,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "mx-auto max-w-[760px] px-4 py-6 md:px-10 md:py-8",
+			children: [
+				/* @__PURE__ */ jsxs("header", {
+					className: "flex flex-col gap-4 border-b pb-6 sm:flex-row sm:items-end sm:justify-between sm:gap-6",
+					children: [/* @__PURE__ */ jsxs("div", { children: [eyebrow && /* @__PURE__ */ jsx("p", {
+						className: "text-xs text-muted-foreground",
+						children: eyebrow
+					}), /* @__PURE__ */ jsx("h1", {
+						className: "mt-1 text-2xl font-semibold tracking-tight",
+						children: title
+					})] }), buttons]
+				}),
+				failure,
+				sections
+			]
+		})
+	});
+};
+//#endregion
+export { Form };

package/dist/app/custom-section.js

@@ -1,9 +1,9 @@
 import { Problem } from "./pages/problem.js";
 import { CustomBoundary } from "./pages/custom-boundary.js";
 import { useProjectUi } from "./pages/project-ui.js";
+import { RecordScope } from "./pages/record-scope.js";
 import { Section } from "../record-view/section.js";
 import { SidebarCard } from "../record-view/record-sidebar.js";
-import { RecordScope } from "./pages/record-scope.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { unmarkFieldRefs } from "@protobase/schema/internal";
 //#region src/app/custom-section.tsx

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

@@ -2,8 +2,8 @@ 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 { mapCards } from "./list-displays.js";
 import { useAdminMeta } from "../meta-gate.js";
+import { mapCards } from "./list-displays.js";
 import { ErrorBanner } from "../error-banner.js";
 import { useDebounced } from "../../lib/use-debounced.js";
 import { RecordCard } from "./record-card.js";

package/dist/app/displays/record-card.js

@@ -8,9 +8,12 @@ import { amountParts, cardFields, filledAmount, filledMeta } from "./list-displa
 import { AppLink } from "../use-app-address.js";
 import { shownWidget } from "../field-types/shown-widget.js";
 import { WidgetPart } from "../field-types/widget-part.js";
+import { markdownExcerpt } from "../../markdown/markdown-excerpt.js";
+import { isMarkdown } from "../../markdown/markdown-hint.js";
+import { ValueBadge } from "../value-badge.js";
+import { Markdown } from "../../markdown/markdown.js";
 import { namedIcon } from "../named-icon.js";
 import { FavoriteButton } from "../saved/favorite-button.js";
-import { ValueBadge } from "../value-badge.js";
 import { CardImage } from "./card-image.js";
 import { CardCarousel } from "./card-carousel.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -38,7 +41,9 @@ const RecordCard = ({ model, view, display, row, swipe = true, mark }) => {
 	const text = (name) => {
 		const field = model.fields[name];
 		if (!field) return "";
-		return row.labels[name] ?? displayValue(field, row.record[name], view?.fields[name]);
+		const value = row.record[name];
+		if (row.labels[name] === void 0 && isMarkdown(field, view?.fields[name]) && typeof value === "string" && value !== "") return markdownExcerpt(value);
+		return row.labels[name] ?? displayValue(field, value, view?.fields[name]);
 	};
 	const { fields: fieldTypes, components } = useProjectUi();
 	const Card = display.card === void 0 ? void 0 : components?.[display.card];
@@ -53,6 +58,15 @@ const RecordCard = ({ model, view, display, row, swipe = true, mark }) => {
 			fallback: text(name)
 		}) : text(name);
 	};
+	const subtitleValue = (name) => {
+		const field = model.fields[name];
+		const value = row.record[name];
+		if (!field || !isMarkdown(field, view?.fields[name]) || shownWidget(fieldTypes, field, view?.fields[name]) || typeof value !== "string" || value === "") return shownValue(name);
+		return /* @__PURE__ */ jsx(Markdown, {
+			source: value,
+			inLink: true
+		});
+	};
 	const metaValue = (name) => {
 		const field = model.fields[name];
 		const hints = view?.fields[name];
@@ -99,8 +113,8 @@ const RecordCard = ({ model, view, display, row, swipe = true, mark }) => {
 			})]
 		}),
 		subtitle !== void 0 && /* @__PURE__ */ jsx("span", {
-			className: view?.fields[subtitle]?.multiline ? "line-clamp-3 whitespace-pre-line break-words text-muted-foreground" : "truncate text-muted-foreground",
-			children: shownValue(subtitle)
+			className: view?.fields[subtitle]?.markdown ? "line-clamp-3 break-words text-muted-foreground" : view?.fields[subtitle]?.multiline ? "line-clamp-3 whitespace-pre-line break-words text-muted-foreground" : "truncate text-muted-foreground",
+			children: subtitleValue(subtitle)
 		}),
 		shownAmount !== void 0 && /* @__PURE__ */ jsx("span", {
 			className: "truncate tabular-nums text-muted-foreground",

package/dist/app/displays/record-link.js

@@ -1,6 +1,6 @@
+import { useLayoutRecord } from "../pages/record-scope.js";
 import { AppLink } from "../use-app-address.js";
 import { useOptionalListDisplay } from "./display-context.js";
-import { useLayoutRecord } from "../pages/record-scope.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/app/displays/record-link.tsx
 /**

package/dist/app/displays/use-map-records.js

@@ -1,9 +1,9 @@
 import { keys } from "../../data/query-keys.js";
 import { useClient } from "../../data/api-provider.js";
-import { listLabels, withLabels } from "../../live/relation-labels.js";
+import { useAdminMeta } from "../meta-gate.js";
 import { listPhotos, withPhotos } from "../../live/row-photos.js";
 import { displayRow } from "./list-displays.js";
-import { useAdminMeta } from "../meta-gate.js";
+import { listLabels, withLabels } from "../../live/relation-labels.js";
 import { areaFilter, requestZoom } from "../map/map-area.js";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
 //#region src/app/displays/use-map-records.ts

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

@@ -1,10 +1,10 @@
 import { humanize } from "../../live/naming.js";
 import { displayRow } from "../displays/list-displays.js";
-import { columnsFromModel } from "../../live/columns-from-model.js";
 import { scopeOf } from "../pages/use-layout-data.js";
-import { withFieldTypeCells } from "../field-types/field-type-cells.js";
+import { columnsFromModel } from "../../live/columns-from-model.js";
 import { FieldValue } from "../pages/field-value.js";
 import { usePathValue } from "../pages/use-path-value.js";
+import { withFieldTypeCells } from "../field-types/field-type-cells.js";
 import { jsx } from "react/jsx-runtime";
 import { resolveFieldPath } from "@protobase/layout";
 //#region src/app/embedded-list/embedded-columns.tsx

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

@@ -3,19 +3,19 @@ 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 { displayRow, loadedFields, shownDisplay } from "../displays/list-displays.js";
 import { defaultOrderBy, parseSort, sortToOrderBy } from "../list-order.js";
-import { useAdminMeta } from "../meta-gate.js";
 import { AppLink, useAppAddress } from "../use-app-address.js";
 import { ErrorBanner } from "../error-banner.js";
-import { DataGrid } from "../../data-grid/data-grid.js";
 import { listColumnNames } from "../../live/columns-from-model.js";
-import { MapDisplay } from "../displays/map-display.js";
+import { DataGrid } from "../../data-grid/data-grid.js";
+import { viewAllAddress } from "./embedded-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 { CardsDisplay } from "../displays/cards-display.js";
 import { embeddedColumns } from "./embedded-columns.js";
-import { viewAllAddress } from "./embedded-display.js";
 import { useEmbeddedRows } from "./use-embedded-rows.js";
 import { useMemo, useState } from "react";
 import { ArrowRight } from "lucide-react";

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

@@ -1,9 +1,9 @@
 import { keys } from "../../data/query-keys.js";
 import { useClient } from "../../data/api-provider.js";
 import { recordId } from "../../live/model-helpers.js";
-import { listLabels, withLabels } from "../../live/relation-labels.js";
-import { listPhotos, withPhotos } from "../../live/row-photos.js";
 import { useAdminMeta } from "../meta-gate.js";
+import { listPhotos, withPhotos } from "../../live/row-photos.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/field-editor.js

@@ -1,15 +1,19 @@
 import { cn } from "../lib/cn.js";
 import { Input } from "../primitives/input.js";
-import { Switch } from "../primitives/switch.js";
-import { Textarea } from "../primitives/textarea.js";
+import { humanize } from "../live/naming.js";
 import { displayValue } from "../live/display-value.js";
 import { AppLink } from "./use-app-address.js";
-import { RelationPicker } from "./relation-picker.js";
+import { useShownWidget } from "./field-types/shown-widget.js";
+import { WidgetPart } from "./field-types/widget-part.js";
+import { isMarkdown } from "../markdown/markdown-hint.js";
+import { Markdown } from "../markdown/markdown.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";
-import { useShownWidget } from "./field-types/shown-widget.js";
-import { WidgetPart } from "./field-types/widget-part.js";
+import { MarkdownEditor } from "../markdown/markdown-editor.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { enumLabel } from "@protobase/schema";
 //#region src/app/field-editor.tsx
@@ -70,6 +74,11 @@ const BuiltInEditor = ({ field, hints, value, stored, relationLabel, relationTo,
 		});
 	}
 	const multiline = Boolean(hints?.multiline) && field.type === "text";
+	const markdown = isMarkdown(field, hints);
+	if ((!isEditable(field) || locked) && markdown && typeof stored === "string" && stored !== "") return /* @__PURE__ */ jsx(Markdown, {
+		source: stored,
+		className: "py-1.5"
+	});
 	if (!isEditable(field) || locked) return /* @__PURE__ */ jsx("div", {
 		className: cn("py-1.5 tabular-nums", field.type === "decimal" || field.type === "integer" ? "font-medium" : "text-muted-foreground", multiline && "whitespace-pre-line break-words"),
 		children: displayValue(field, stored, hints)
@@ -86,6 +95,13 @@ const BuiltInEditor = ({ field, hints, value, stored, relationLabel, relationTo,
 			children: enumLabel(option, hints?.valueLabels)
 		}, option))]
 	});
+	if (markdown) return /* @__PURE__ */ jsx(MarkdownEditor, {
+		label: hints?.label ?? humanize(field.name),
+		invalid,
+		placeholder,
+		value: String(value),
+		onChange
+	});
 	if (multiline) return /* @__PURE__ */ jsx(Textarea, {
 		invalid,
 		placeholder,

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

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

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

@@ -1,11 +1,11 @@
 import { Skeleton } from "../../primitives/skeleton.js";
 import { useRecord } from "../../data/use-record.js";
 import { humanize } from "../../live/naming.js";
+import { fieldAccess } from "../permissions.js";
 import { AppLink } from "../use-app-address.js";
 import { ErrorBanner } from "../error-banner.js";
-import { fieldAccess } from "../permissions.js";
-import { SpecTable } from "../../record-view/spec-table.js";
 import { FieldValue } from "../pages/field-value.js";
+import { SpecTable } from "../../record-view/spec-table.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/gallery/photo-details.tsx
 /**

package/dist/app/list-page.js

@@ -2,47 +2,48 @@ import { useIsDesktop } from "../lib/use-media-query.js";
 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 } from "../primitives/button.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 { can, rowAllows } from "./permissions.js";
 import { loadedFields, shownDisplay } 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 { useAppAddress } from "./use-app-address.js";
+import { AppLink, useAppAddress } from "./use-app-address.js";
 import { ErrorBanner } from "./error-banner.js";
-import { can, rowAllows } from "./permissions.js";
+import { columnsFromModel } from "../live/columns-from-model.js";
 import { pinnedStorageKey } from "../data-grid/pinned-storage.js";
 import { DataGrid } from "../data-grid/data-grid.js";
+import { useLiveRows } from "../live/use-live-rows.js";
 import { ActiveFilterChips } from "../filter-panel/active-filter-chips.js";
 import { activeChips, emptyFilterState, removeChip } from "../filter-panel/filter-state.js";
 import { FilterSection } from "../filter-panel/filter-section.js";
 import { ToolbarRow } from "../filter-panel/toolbar-row.js";
 import { FilterPanel } from "../filter-panel/filter-panel.js";
-import { columnsFromModel } from "../live/columns-from-model.js";
 import { stateToText, textToState } from "../live/filter-string.js";
 import { widgetFields } from "../live/view-fields.js";
-import { useFilterConfig } from "../live/use-filter-config.js";
-import { useLiveRows } from "../live/use-live-rows.js";
+import { facetNames, filterChips } from "./searches/saved-search.js";
 import { Sheet } from "../primitives/sheet.js";
+import { SignInPrompt } from "../auth/sign-in-prompt.js";
+import { CustomDisplay } from "./displays/custom-display.js";
+import { MapDisplay } from "./displays/map-display.js";
+import { DisplaySwitch, SortMenu } from "./displays/display-controls.js";
+import { withFieldTypeCells } from "./field-types/field-type-cells.js";
+import { useFilterConfig } from "../live/use-filter-config.js";
 import { useDeleteFlow } from "./delete/use-delete-flow.js";
 import { useRestore } from "./delete/use-restore.js";
+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 { SignInPrompt } from "../auth/sign-in-prompt.js";
 import { ListCards } from "./displays/list-cards.js";
-import { MapDisplay } from "./displays/map-display.js";
-import { CustomDisplay } from "./displays/custom-display.js";
-import { DisplaySwitch, SortMenu } from "./displays/display-controls.js";
 import { useDisplayRows } from "./displays/use-display-rows.js";
 import { useListScroll } from "./list-scroll.js";
 import { ListChart } from "./list-chart.js";
 import { ListSearch } from "./list-search.js";
-import { withFieldTypeCells } from "./field-types/field-type-cells.js";
 import { SavedList } from "./saved/saved-list.js";
-import { facetNames, filterChips } from "./searches/saved-search.js";
 import { SaveSearchButton } from "./searches/save-search-button.js";
 import { SavedSearches } from "./searches/saved-searches.js";
 import { useMemo, useState } from "react";
@@ -254,12 +255,12 @@ const LoadedList = ({ model, address, scope, heading }) => {
 			})
 		]
 	});
-	const createButton = !scope && can(permissions, "create") && /* @__PURE__ */ jsxs(Button, {
-		variant: "primary",
-		onClick: () => go({
+	const createButton = !scope && createOffered(view, meta.pages, permissions) && /* @__PURE__ */ jsxs(AppLink, {
+		to: {
 			kind: "create",
 			resource
-		}),
+		},
+		className: buttonClass({ variant: "primary" }),
 		children: [
 			/* @__PURE__ */ jsx(Plus, { className: "size-3.5" }),
 			"New ",

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

@@ -1,10 +1,10 @@
 import { Skeleton } from "../../../primitives/skeleton.js";
 import { useAdminMeta } from "../../meta-gate.js";
-import { ErrorBanner } from "../../error-banner.js";
-import { scopeOf, useListPage } from "../use-layout-data.js";
 import { RecordScope } from "../record-scope.js";
+import { scopeOf, useListPage } from "../use-layout-data.js";
 import { propsOf } from "./block-props.js";
 import { CardFrame, Quiet } from "./card-frame.js";
+import { ErrorBanner } from "../../error-banner.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/app/pages/blocks/card-row.tsx
 const LoadedCardRow = ({ model, filter, sort, limit = 12, title, description, empty, actions, children }) => {

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

@@ -1,10 +1,10 @@
 import { Skeleton } from "../../../primitives/skeleton.js";
 import { humanize } from "../../../live/naming.js";
 import { useAdminMeta } from "../../meta-gate.js";
-import { FieldValue } from "../field-value.js";
-import { usePathValue } from "../use-path-value.js";
 import { useLayoutRecord } from "../record-scope.js";
 import { propsOf } from "./block-props.js";
+import { FieldValue } from "../field-value.js";
+import { usePathValue } from "../use-path-value.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/pages/blocks/field.tsx
 /** The view's label for the field at the end of the path, else the path in words: `companyId.city` is "Company city". */