@protobase/ui 0.21.2 → 0.21.4

package/dist/app/app.js

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

package/dist/app/current-address.js

@@ -1,4 +1,4 @@
-import { defaultDisplay } from "./displays/list-displays.js";
+import { defaultDisplay, listDefaultDisplay } from "./displays/list-displays.js";
 import { defaultOrderBy } from "./list-order.js";
 import { encodeKey } from "@protobase/schema/internal";
 //#region src/app/current-address.ts
@@ -22,7 +22,7 @@ const listedResource = (resources, views, resource) => {
 };
 /** What a list shows when its address names nothing: its default display for the screen, the list's sort, the filters in a bar. */
 const listDefaults = (model, view, xs = false) => ({
-	display: defaultDisplay(view, xs),
+	display: model ? listDefaultDisplay(model, view, xs) : defaultDisplay(view, xs),
 	orderBy: model ? defaultOrderBy(model, view) : "",
 	filterLayout: "bar"
 });

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

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

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

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

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

@@ -18,11 +18,10 @@ const icons = {
 	map: Map
 };
 /**
-* The list page's switch between the table and the view's displays, as buttons or, on a phone, as a menu; nothing for a
-* list with only its table.
+* The list page's switch between the table and the view's displays, or `choices`, as buttons or, on a phone, as a menu;
+* nothing for a list with only its table.
 */
-const DisplaySwitch = ({ view, value, onChange, menu = false }) => {
-	const choices = displayChoices(view);
+const DisplaySwitch = ({ view, value, onChange, menu = false, choices = displayChoices(view) }) => {
 	if (choices.length < 2) return null;
 	const options = choices.map((choice) => ({
 		value: choice.name,

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

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

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

@@ -1,5 +1,6 @@
 import { recordKey, recordTitleField } from "../../live/model-helpers.js";
 import { humanize } from "../../live/naming.js";
+import { listColumnNames } from "../../live/columns-from-model.js";
 import { displayValue } from "../../live/display-value.js";
 import { photosKey } from "../../live/row-photos.js";
 import { filledFields } from "../filled-fields.js";
@@ -18,6 +19,40 @@ const defaultDisplay = (view, xs, preferred) => {
 	const cards = displaysOf(view).filter((display) => display.kind === "cards");
 	return cards.find((display) => display.name === fallback)?.name ?? cards[0]?.name ?? fallback;
 };
+/** The name of the list a phone shows for a list without a cards display. */
+const rowsDisplay = "rows";
+/**
+* The list a phone shows for a list without a cards display, as a cards display of a row per record: the title, the
+* first enum column as a badge on the right, and the next two columns, booleans left out, on a muted line below.
+* `undefined` for a view with a cards display, or a display of its own named `rows`.
+*/
+const phoneRows = (model, view) => {
+	if (displaysOf(view).some((display) => display.kind === "cards" || display.name === "rows")) return void 0;
+	const title = recordTitleField(model, view);
+	const candidates = listColumnNames(model, view).filter((name) => name !== title && model.fields[name] !== void 0);
+	const badge = candidates.find((name) => model.fields[name].type === "enum");
+	const footer = candidates.filter((name) => name !== badge && model.fields[name].type !== "boolean").slice(0, 2);
+	return {
+		kind: "cards",
+		name: rowsDisplay,
+		label: "List",
+		icon: "list",
+		title,
+		...badge !== void 0 && { badge },
+		footer
+	};
+};
+const isPhoneRows = (view, display) => display.name === "rows" && !displaysOf(view).some((other) => other.name === "rows");
+/**
+* The display a list page opens in when its address names none: `defaultDisplay`, but below the `sm` breakpoint the
+* phone's rows (`phoneRows`) in place of the table.
+*/
+const listDefaultDisplay = (model, view, xs) => {
+	const display = defaultDisplay(view, xs);
+	return xs && display === tableDisplay && phoneRows(model, view) ? rowsDisplay : display;
+};
+/** The display a list page shows for the address's `name`: `shownDisplay`, or the phone's rows when it names them, on any screen. */
+const shownListDisplay = (model, view, name) => (name === "rows" ? phoneRows(model, view) : void 0) ?? shownDisplay(view, name);
 /** The display a list shows for the address's `name`: `undefined` for the table, and the view's default for a name it does not have. */
 const shownDisplay = (view, name) => {
 	if (name === tableDisplay) return void 0;
@@ -38,6 +73,15 @@ const displayChoices = (view) => [{
 	label: display.label ?? humanize(display.name),
 	icon: display.icon ?? defaultIcons[display.kind]
 }))];
+/** The list page's display switch: `displayChoices`, and below the `sm` breakpoint the phone's rows when it has them. */
+const listDisplayChoices = (model, view, xs) => {
+	const choices = displayChoices(view);
+	return xs && phoneRows(model, view) ? [...choices, {
+		name: rowsDisplay,
+		label: "List",
+		icon: "list"
+	}] : choices;
+};
 /** The fields a cards display shows, its title the view's title field when it names none. */
 const cardFields = (model, view, display) => ({
 	image: display.image,
@@ -101,9 +145,19 @@ const shownFields = (model, view, display) => {
 	].filter((name) => name !== void 0);
 };
 /** The fields to label the list's rows for: the table's columns and every display's, so one load serves them all. */
-const loadedFields = (model, view, columns) => [.../* @__PURE__ */ new Set([...columns, ...displaysOf(view).flatMap((display) => shownFields(model, view, display))])];
-/** The sortable fields a display shows, for the sort menu that stands in for column headers. */
-const sortFields = (model, view, display) => [...new Set(shownFields(model, view, display))].filter((name) => model.fields[name]?.sortable);
+const loadedFields = (model, view, columns) => {
+	const rows = phoneRows(model, view);
+	const displays = rows ? [...displaysOf(view), rows] : displaysOf(view);
+	return [.../* @__PURE__ */ new Set([...columns, ...displays.flatMap((display) => shownFields(model, view, display))])];
+};
+/**
+* The sortable fields a display shows, for the sort menu that stands in for column headers; for the phone's rows, those
+* of the table's columns and the title, as the table's headers sort by.
+*/
+const sortFields = (model, view, display) => {
+	const shown = isPhoneRows(view, display) ? [recordTitleField(model, view), ...listColumnNames(model, view)] : shownFields(model, view, display);
+	return [...new Set(shown)].filter((name) => model.fields[name]?.sortable);
+};
 const isLabelled = (value) => typeof value === "object" && value !== null && "id" in value && "name" in value;
 /**
 * A loaded row, its relations as `{ id, name }`, split into the record as the API gives it, the relations' names and
@@ -128,4 +182,4 @@ const displayRow = (model, row) => {
 	};
 };
 //#endregion
-export { amountParts, cardFields, defaultDisplay, displayChoices, displayRow, displaysOf, filledAmount, filledMeta, loadedFields, mapCards, shownDisplay, shownFields, sortFields };
+export { amountParts, cardFields, defaultDisplay, displayChoices, displayRow, displaysOf, filledAmount, filledMeta, listDefaultDisplay, listDisplayChoices, loadedFields, mapCards, phoneRows, rowsDisplay, shownDisplay, shownFields, shownListDisplay, sortFields };

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

@@ -3,14 +3,14 @@ import { CustomBoundary } from "../pages/custom-boundary.js";
 import { recordKey } from "../../live/model-helpers.js";
 import { humanize } from "../../live/naming.js";
 import { useProjectUi } from "../pages/project-ui.js";
+import { markdownExcerpt } from "../../markdown/markdown-excerpt.js";
+import { isMarkdown } from "../../markdown/markdown-hint.js";
 import { displayValue } from "../../live/display-value.js";
 import { amountParts, cardFields, filledAmount, filledMeta } from "./list-displays.js";
 import { AppLink } from "../use-app-address.js";
 import { shownWidget } from "../field-types/shown-widget.js";
 import { WidgetPart } from "../field-types/widget-part.js";
 import { Markdown } from "../../markdown/markdown.js";
-import { isMarkdown } from "../../markdown/markdown-hint.js";
-import { markdownExcerpt } from "../../markdown/markdown-excerpt.js";
 import { ValueBadge } from "../value-badge.js";
 import { useSeedRecord } from "../record-preview.js";
 import { namedIcon } from "../named-icon.js";

package/dist/app/document-title.js

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

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

@@ -1,7 +1,7 @@
 import { humanize } from "../../live/naming.js";
+import { columnsFromModel } from "../../live/columns-from-model.js";
 import { displayRow } from "../displays/list-displays.js";
 import { scopeOf } from "../pages/use-layout-data.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";

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

@@ -18,13 +18,17 @@ const embeddedDisplay = (view, xs, { picked, preferred }) => {
 	return defaultDisplay(view, xs, preferred !== void 0 && names.includes(preferred) ? preferred : void 0);
 };
 /**
-* The resource's list with the embedded list's filter, order and display, leaving out what the list does by default, and
+* The resource's list with the embedded list's filter, order and display, leaving out what the list does by default (an
+* embedded list's own default display among it, so a phone opens the list in its rows rather than the table), and
 * the saved search whose results it shows, if any. `resource` names another list of the same records, such as the
 * favorites that list a user's saved listings.
 */
 const viewAllAddress = (model, view, xs, { resource = model.name, ...list }) => changedList({
 	kind: "list",
 	resource
-}, list, listDefaults(model, view, xs));
+}, list, {
+	...listDefaults(model, view, xs),
+	display: defaultDisplay(view, xs)
+});
 //#endregion
 export { embeddedDisplay, embeddedDisplayKey, readPickedDisplay, viewAllAddress, writePickedDisplay };

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

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

package/dist/app/field-editor.js

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

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

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

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

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

package/dist/app/list-empty.js

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

package/dist/app/list-page.js

@@ -1,4 +1,4 @@
-import { useIsDesktop } from "../lib/use-media-query.js";
+import { useIsDesktop, useIsXs } 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";
@@ -9,12 +9,12 @@ 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 { displayRow, loadedFields, shownDisplay } from "./displays/list-displays.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 { AppLink, useAppAddress } from "./use-app-address.js";
 import { can, rowAllows } from "./permissions.js";
-import { columnsFromModel, listColumnNames } 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";
@@ -42,6 +42,8 @@ import { createOffered } from "./create/create-offered.js";
 import { ImportButton } from "./import/import-button.js";
 import { exportOffered, exportsSelection } from "./export/export-options.js";
 import { useExportFlow } from "./export/use-export-flow.js";
+import { ListEmpty } from "./list-empty.js";
+import { listEmptyState } from "./list-empty-state.js";
 import { ListCards } from "./displays/list-cards.js";
 import { useListScroll } from "./list-scroll.js";
 import { ListChart } from "./list-chart.js";
@@ -113,7 +115,7 @@ const ListPage = ({ address }) => {
 };
 const LoadedList = ({ model, address, scope, heading }) => {
 	const meta = useAdminMeta();
-	const { set, go } = useAppAddress();
+	const { set, go, href } = useAppAddress();
 	const resource = model.name;
 	const view = meta.views[resource];
 	const fields = useMemo(() => widgetFields(view, model), [view, model]);
@@ -131,6 +133,7 @@ const LoadedList = ({ model, address, scope, heading }) => {
 	const extras = parsed.ok ? parsed.extras : [];
 	const { orderBy, filterLayout: layout } = address;
 	const desktop = useIsDesktop();
+	const xs = useIsXs();
 	const [sheetOpen, setSheetOpen] = useState(false);
 	const scoped = scope ? [...extras, scope] : extras;
 	const config = useFilterConfig({
@@ -162,7 +165,7 @@ const LoadedList = ({ model, address, scope, heading }) => {
 		orderBy,
 		related
 	});
-	const display = shownDisplay(view, address.display);
+	const display = shownListDisplay(model, view, address.display);
 	const permissions = usePermissions(resource);
 	const handOrder = scope ? void 0 : listHandOrder(model, permissions);
 	const [sorting, setSorting] = useState(false);
@@ -321,6 +324,7 @@ const LoadedList = ({ model, address, scope, heading }) => {
 	});
 	const displaySwitch = (menu) => !handSorting && /* @__PURE__ */ jsx(DisplaySwitch, {
 		view,
+		choices: listDisplayChoices(model, view, xs),
 		value: display?.name ?? tableDisplay,
 		onChange: (name) => set({ display: name }),
 		menu
@@ -334,12 +338,21 @@ const LoadedList = ({ model, address, scope, heading }) => {
 			key: recordKey(model, row)
 		});
 	};
+	const recordLink = (row) => ({
+		href: href({
+			kind: "record",
+			resource,
+			key: recordKey(model, row)
+		}),
+		onFollow: () => openRecord(row)
+	});
 	const table = rows.source ? /* @__PURE__ */ jsx(DataGrid, {
 		columns,
 		source: rows.source,
 		sort: parseSort(orderBy),
 		onSortChange: (sort) => set({ orderBy: sortToOrderBy(sort) }),
 		onOpenRow: openRecord,
+		rowLink: recordLink,
 		cellEditor: cellEditing.editor,
 		rowPatches: cellEditing.patches,
 		initialScrollIndex: scroll.initialIndex,
@@ -371,13 +384,27 @@ const LoadedList = ({ model, address, scope, heading }) => {
 		initialIndex: scroll.initialIndex,
 		onScrollIndex: scroll.remember
 	};
+	const emptyState = listEmptyState({
+		plural,
+		search: search?.kind === "search" ? search.text : "",
+		filtered: chips.length > 0,
+		scoped: Boolean(scope) || extras.some((clause) => clause.kind !== "search"),
+		canCreate: Boolean(createButton)
+	});
+	const empty = /* @__PURE__ */ jsx(ListEmpty, {
+		state: emptyState,
+		onClearSearch: () => commitSearch(""),
+		onClearFilters: () => setFilter(emptyFilterState),
+		create: createButton
+	});
 	const drawDisplay = () => {
-		if (!display) return table;
+		if (!display) return rows.source?.total === 0 && !rows.error ? empty : table;
 		if (display.kind === "cards") return /* @__PURE__ */ jsx(ListCards, {
 			model,
 			view,
 			display,
-			list: cardsList
+			list: cardsList,
+			empty
 		}, rows.key.join(" "));
 		if (display.kind === "map") return /* @__PURE__ */ jsx(MapDisplay, {
 			model,

package/dist/app/numeric-input.js

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