@protobase/ui 0.10.0 → 0.11.0

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

@@ -0,0 +1,62 @@
+import { recordKey, recordTitleField } from "../../live/model-helpers.js";
+import { humanize } from "../../live/naming.js";
+import { encodeKey, tableDisplay } from "@protobase/schema";
+//#region src/app/displays/list-displays.ts
+const displaysOf = (view) => view?.list?.displays ?? [];
+/** 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;
+	const named = (wanted) => displaysOf(view).find((display) => display.name === wanted);
+	return named(name) ?? named(view?.list?.default);
+};
+const displayChoices = (view) => [{
+	name: tableDisplay,
+	label: "Table",
+	icon: "table"
+}, ...displaysOf(view).map((display) => ({
+	name: display.name,
+	label: display.label ?? humanize(display.name),
+	icon: display.icon ?? (display.kind === "cards" ? "cards" : void 0)
+}))];
+/** The fields a cards display shows, its title the view's title field when it names none. */
+const cardFields = (model, view, display) => ({
+	title: display.title ?? recordTitleField(model, view),
+	subtitle: display.subtitle,
+	badge: display.badge,
+	meta: display.meta ?? []
+});
+/** Every field a display shows, the fields its rows are loaded and labelled for. */
+const shownFields = (model, view, display) => {
+	if (display.kind === "custom") return display.fields;
+	const { title, subtitle, badge, meta } = cardFields(model, view, display);
+	return [
+		title,
+		subtitle,
+		badge,
+		...meta
+	].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 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 and the relations' names. */
+const displayRow = (model, row) => {
+	const record = {};
+	const labels = {};
+	for (const [name, value] of Object.entries(row)) {
+		if (name === "id" && !Object.hasOwn(model.fields, "id")) continue;
+		if (model.fields[name]?.type === "relation" && isLabelled(value)) {
+			record[name] = value.id;
+			labels[name] = value.name;
+		} else record[name] = value;
+	}
+	return {
+		key: encodeKey(recordKey(model, record)),
+		record,
+		labels
+	};
+};
+//#endregion
+export { cardFields, displayChoices, displayRow, displaysOf, loadedFields, shownDisplay, shownFields, sortFields };

package/dist/app/displays/record-link.d.ts

@@ -0,0 +1,19 @@
+import { ListDisplayRow } from "./list-displays.js";
+import { AnchorHTMLAttributes } from "react";
+import { KeyValue } from "@protobase/schema";
+//#region src/app/displays/record-link.d.ts
+type Target = {
+  row: ListDisplayRow;
+  resource?: never;
+  recordKey?: never;
+} | {
+  row?: never;
+  resource?: string;
+  recordKey: KeyValue | readonly KeyValue[];
+};
+/**
+ * A link to a record's page, through the app's addresses: a list display's `row`, or a `recordKey` of `resource`. The
+ * resource defaults to the list display's or the record's around it, so a custom component never writes a path.
+ */
+export declare const RecordLink: ({ row, resource, recordKey, ...rest }: AnchorHTMLAttributes<HTMLAnchorElement> & Target) => import("react").JSX.Element;
+//#endregion

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

@@ -0,0 +1,25 @@
+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
+/**
+* A link to a record's page, through the app's addresses: a list display's `row`, or a `recordKey` of `resource`. The
+* resource defaults to the list display's or the record's around it, so a custom component never writes a path.
+*/
+const RecordLink = ({ row, resource, recordKey, ...rest }) => {
+	const display = useOptionalListDisplay();
+	const around = useLayoutRecord();
+	const name = resource ?? display?.resource ?? around?.model.name;
+	if (name === void 0) throw new Error("RecordLink needs a resource outside a list display or a record");
+	return /* @__PURE__ */ jsx(AppLink, {
+		to: {
+			kind: "record",
+			resource: name,
+			key: row ? row.key : recordKey
+		},
+		...rest
+	});
+};
+//#endregion
+export { RecordLink };

package/dist/app/displays/use-display-rows.js

@@ -0,0 +1,28 @@
+import { displayRow } from "./list-displays.js";
+import { useInfiniteQuery } from "@tanstack/react-query";
+//#region src/app/displays/use-display-rows.ts
+/**
+* The list page's rows page by page, for a display other than the table: the same loader and pages as the table, so
+* switching between them reads no row twice.
+*/
+const useDisplayRows = (model, page, key, enabled) => {
+	const query = useInfiniteQuery({
+		queryKey: [...key, "display"],
+		enabled,
+		initialPageParam: 0,
+		queryFn: ({ pageParam }) => page(pageParam),
+		getNextPageParam: (last, pages) => last.rows.length === 40 && pages.length * 40 < (pages[0]?.total ?? 0) ? pages.length : void 0
+	});
+	const pages = query.data?.pages ?? [];
+	return {
+		resource: model.name,
+		rows: pages.flatMap((loaded) => loaded.rows.map((row) => displayRow(model, row))),
+		total: pages[0]?.total ?? 0,
+		loading: query.isPending,
+		error: query.error,
+		more: query.hasNextPage,
+		loadMore: () => void query.fetchNextPage()
+	};
+};
+//#endregion
+export { useDisplayRows };

package/dist/app/field-editor.js

@@ -1,7 +1,7 @@
 import { cn } from "../lib/cn.js";
 import { Input } from "../primitives/input.js";
 import { Switch } from "../primitives/switch.js";
-import { Link } from "./router.js";
+import { AppLink } from "./use-app-address.js";
 import { RelationPicker } from "./relation-picker.js";
 import { displayValue } from "../live/display-value.js";
 import { isEditable } from "../live/field-values.js";
@@ -15,7 +15,7 @@ const numeric = /* @__PURE__ */ new Set([
 	"bigint",
 	"decimal"
 ]);
-const FieldEditor = ({ field, hints, value, stored, relationLabel, relationHref, relationPicker, invalid, locked, placeholder, reveal, resource, onChange }) => {
+const FieldEditor = ({ field, hints, value, stored, relationLabel, relationTo, relationPicker, invalid, locked, placeholder, reveal, resource, onChange }) => {
 	if (field.type === "file") return /* @__PURE__ */ jsx(FileField, {
 		field,
 		hints,
@@ -59,8 +59,8 @@ const FieldEditor = ({ field, hints, value, stored, relationLabel, relationHref,
 		const label = relationLabel ?? String(stored ?? "—");
 		return /* @__PURE__ */ jsx("div", {
 			className: "py-1.5 text-[13px]",
-			children: relationHref ? /* @__PURE__ */ jsx(Link, {
-				to: relationHref,
+			children: relationTo ? /* @__PURE__ */ jsx(AppLink, {
+				to: relationTo,
 				className: "font-medium text-primary-text hover:underline",
 				children: label
 			}) : label

package/dist/app/list-page.js

@@ -2,11 +2,12 @@ import { useIsDesktop } from "../lib/use-media-query.js";
 import { PageHeader } from "../app-shell/page-header.js";
 import { useAuth } from "../auth/auth-provider.js";
 import { Button } from "../primitives/button.js";
-import { recordTitleField } from "../live/model-helpers.js";
+import { recordKey, recordTitleField } from "../live/model-helpers.js";
 import { humanize } from "../live/naming.js";
-import { useRouter } from "./router.js";
-import { ErrorBanner } from "./error-banner.js";
+import { parseSort, sortToOrderBy } from "./list-order.js";
 import { Notice, useAdminMeta, usePermissions } from "./meta-gate.js";
+import { useAppAddress } from "./use-app-address.js";
+import { ErrorBanner } from "./error-banner.js";
 import { can, rowAllows } from "./permissions.js";
 import { pinnedStorageKey } from "../data-grid/pinned-storage.js";
 import { DataGrid } from "../data-grid/data-grid.js";
@@ -21,42 +22,48 @@ import { useLiveRows } from "../live/use-live-rows.js";
 import { Sheet } from "../primitives/sheet.js";
 import { useDeleteFlow } from "./delete/use-delete-flow.js";
 import { useRestore } from "./delete/use-restore.js";
+import { loadedFields, shownDisplay } from "./displays/list-displays.js";
+import { CardsDisplay } from "./displays/cards-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 { ListChart } from "./list-chart.js";
-import { defaultOrderBy, parseSort, sortToOrderBy } from "./list-order.js";
 import { ListSearch } from "./list-search.js";
 import { useMemo, useState } from "react";
 import { Plus, SlidersHorizontal } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { createWhere, encodeKey } from "@protobase/schema";
+import { createWhere, tableDisplay } from "@protobase/schema";
 //#region src/app/list-page.tsx
 const where = createWhere();
 const searchText = (extras) => extras.find((clause) => clause.kind === "search");
-const ListPage = ({ resource }) => {
+const ListPage = ({ address }) => {
 	const { resources } = useAdminMeta();
-	const model = resources[resource];
+	const model = resources[address.resource];
 	if (!model) return /* @__PURE__ */ jsxs(Notice, {
 		title: "Not found",
 		children: [
 			"There is no resource called ",
-			resource,
+			address.resource,
 			"."
 		]
 	});
-	return /* @__PURE__ */ jsx(LoadedList, { model });
+	return /* @__PURE__ */ jsx(LoadedList, {
+		model,
+		address
+	});
 };
-const LoadedList = ({ model }) => {
+const LoadedList = ({ model, address }) => {
 	const meta = useAdminMeta();
-	const { params, setParams, navigate } = useRouter();
+	const { set, go } = useAppAddress();
 	const resource = model.name;
 	const view = meta.views[resource];
 	const fields = useMemo(() => widgetFields(view, model), [view, model]);
 	const columns = useMemo(() => columnsFromModel(model, view), [model, view]);
-	const filterText = params.get("filter") ?? "";
+	const filterText = address.filter;
 	const parsed = useMemo(() => textToState(fields, filterText), [fields, filterText]);
 	const state = parsed.ok ? parsed.state : emptyFilterState;
 	const extras = parsed.ok ? parsed.extras : [];
-	const orderBy = params.get("order_by") ?? defaultOrderBy(model, view);
-	const layout = params.get("layout") === "panel" ? "panel" : "bar";
+	const { orderBy, filterLayout: layout } = address;
 	const desktop = useIsDesktop();
 	const [sheetOpen, setSheetOpen] = useState(false);
 	const config = useFilterConfig({
@@ -67,14 +74,21 @@ const LoadedList = ({ model }) => {
 		state,
 		extras
 	});
+	const loaded = useMemo(() => loadedFields(model, view, columns.map((column) => column.id)), [
+		model,
+		view,
+		columns
+	]);
 	const rows = useLiveRows({
 		resources: meta.resources,
 		views: meta.views,
 		model,
-		columns: columns.map((column) => column.id),
+		columns: loaded,
 		filter: parsed.ok ? filterText : "",
 		orderBy
 	});
+	const display = shownDisplay(view, address.display);
+	const displayRows = useDisplayRows(model, rows.page, rows.key, display !== void 0);
 	const titleField = recordTitleField(model, view);
 	const target = (row) => ({
 		key: row.id,
@@ -90,9 +104,13 @@ const LoadedList = ({ model }) => {
 		model,
 		view,
 		restore,
-		onReview: (deleted) => navigate(`/${resource}/${encodeURIComponent(deleted.key)}`)
+		onReview: (deleted) => go({
+			kind: "record",
+			resource,
+			key: deleted.key
+		})
 	});
-	const setFilter = (next, nextExtras = extras) => setParams({ filter: stateToText(fields, next, nextExtras) || void 0 });
+	const setFilter = (next, nextExtras = extras) => set({ filter: stateToText(fields, next, nextExtras) });
 	const search = searchText(extras);
 	const commitSearch = (text) => {
 		const others = extras.filter((clause) => clause.kind !== "search");
@@ -141,15 +159,20 @@ const LoadedList = ({ model }) => {
 			})
 		})]
 	});
-	const grid = rows.source ? /* @__PURE__ */ jsx(DataGrid, {
+	const openRecord = (row) => go({
+		kind: "record",
+		resource,
+		key: recordKey(model, row)
+	});
+	const table = rows.source ? /* @__PURE__ */ jsx(DataGrid, {
 		columns,
 		source: rows.source,
 		sort: parseSort(orderBy),
-		onSortChange: (sort) => setParams({ order_by: sortToOrderBy(sort) }),
-		onOpenRow: (row) => navigate(`/${resource}/${encodeKey(row.id.split(","))}`),
+		onSortChange: (sort) => set({ orderBy: sortToOrderBy(sort) }),
+		onOpenRow: openRecord,
 		rowActions: [{
 			label: `Open ${singular.toLowerCase()}`,
-			onSelect: (row) => navigate(`/${resource}/${encodeKey(row.id.split(","))}`)
+			onSelect: openRecord
 		}, ...can(permissions, "delete") ? [{
 			label: "Delete",
 			destructive: true,
@@ -165,6 +188,15 @@ const LoadedList = ({ model }) => {
 		pinKey: auth.kind === "signed-in" ? pinnedStorageKey(auth.user.id, resource) : void 0,
 		className: "min-h-0 flex-1"
 	}) : /* @__PURE__ */ jsx("div", { className: "flex-1 rounded-lg border bg-surface" });
+	const shown = !display ? table : display.kind === "cards" ? /* @__PURE__ */ jsx(CardsDisplay, {
+		model,
+		view,
+		display,
+		list: displayRows
+	}) : /* @__PURE__ */ jsx(CustomDisplay, {
+		display,
+		list: displayRows
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex min-h-0 flex-1 flex-col gap-3 px-5 py-4",
 		children: [
@@ -172,25 +204,43 @@ const LoadedList = ({ model }) => {
 			/* @__PURE__ */ jsx(PageHeader, {
 				title: plural,
 				subtitle: view?.help,
-				actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [model.search?.length ? /* @__PURE__ */ jsx(ListSearch, {
-					value: search?.kind === "search" ? search.text : "",
-					onCommit: commitSearch,
-					placeholder: `Search ${plural.toLowerCase()}`
-				}) : null, can(permissions, "create") && /* @__PURE__ */ jsxs(Button, {
-					variant: "primary",
-					onClick: () => navigate(`/${resource}/new`),
-					children: [
-						/* @__PURE__ */ jsx(Plus, { className: "size-3.5" }),
-						"New ",
-						singular.toLowerCase()
-					]
-				})] })
+				actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					/* @__PURE__ */ jsx(DisplaySwitch, {
+						view,
+						value: display?.name ?? tableDisplay,
+						onChange: (name) => set({ display: name })
+					}),
+					display && /* @__PURE__ */ jsx(SortMenu, {
+						model,
+						view,
+						display,
+						orderBy,
+						onChange: (next) => set({ orderBy: next })
+					}),
+					model.search?.length ? /* @__PURE__ */ jsx(ListSearch, {
+						value: search?.kind === "search" ? search.text : "",
+						onCommit: commitSearch,
+						placeholder: `Search ${plural.toLowerCase()}`
+					}) : null,
+					can(permissions, "create") && /* @__PURE__ */ jsxs(Button, {
+						variant: "primary",
+						onClick: () => go({
+							kind: "create",
+							resource
+						}),
+						children: [
+							/* @__PURE__ */ jsx(Plus, { className: "size-3.5" }),
+							"New ",
+							singular.toLowerCase()
+						]
+					})
+				] })
 			}),
 			!parsed.ok && /* @__PURE__ */ jsx(ErrorBanner, {
 				title: "The filter in the address could not be read",
 				error: new Error(parsed.errors.map((error) => error.message).join("; "))
 			}),
-			rows.error && /* @__PURE__ */ jsx(ErrorBanner, {
+			rows.error && !display && /* @__PURE__ */ jsx(ErrorBanner, {
 				title: "Could not load rows",
 				error: rows.error
 			}),
@@ -204,8 +254,8 @@ const LoadedList = ({ model }) => {
 			!desktop ? phoneFilters : layout === "bar" && panel,
 			desktop && layout === "panel" ? /* @__PURE__ */ jsxs("div", {
 				className: "flex min-h-0 flex-1 gap-4",
-				children: [panel, grid]
-			}) : grid
+				children: [panel, shown]
+			}) : shown
 		]
 	});
 };

package/dist/app/main.js

@@ -1,14 +1,15 @@
+import { uiFromModule } from "./pages/ui-from-module.js";
 import { App } from "./app.js";
 import { StrictMode } from "react";
 import { jsx } from "react/jsx-runtime";
 import { createRoot } from "react-dom/client";
-import ui from "virtual:protobase-project-ui";
+import * as projectUi from "virtual:protobase-project-ui";
 import "../styles.css";
 //#region src/app/main.tsx
 const root = document.getElementById("root");
 if (!root) throw new Error("index.html needs an element with id \"root\"");
 createRoot(root).render(/* @__PURE__ */ jsx(StrictMode, { children: /* @__PURE__ */ jsx(App, {
 	baseUrl: "/api/v1",
-	ui
+	ui: uiFromModule(projectUi)
 }) }));
 //#endregion

package/dist/app/nav-from-meta.js

@@ -3,6 +3,7 @@ import { iconFor } from "./icons.js";
 import { menuIcon } from "./menu-icons.js";
 import { userMenuResources } from "./user-menu-from-meta.js";
 import { LayoutDashboard } from "lucide-react";
+import { appPath } from "@protobase/schema";
 //#region src/app/nav-from-meta.ts
 const groupLabels = {
 	sales: "Sales",
@@ -32,7 +33,10 @@ const navFromMeta = (meta, basePath = "", recent = {}) => {
 			id: page.name,
 			label: page.title,
 			icon: menuIcon(page.icon, LayoutDashboard),
-			href: `${basePath}/${page.name}`
+			href: appPath({
+				kind: "page",
+				page: page.name
+			}, basePath)
 		});
 		groups.set(groupName, group);
 		orders.set(page.name, page.nav?.order ?? Number.MAX_SAFE_INTEGER);
@@ -50,7 +54,10 @@ const navFromMeta = (meta, basePath = "", recent = {}) => {
 			id: model.name,
 			label: view.names?.plural ?? humanize(model.name),
 			icon: iconFor(model.name),
-			href: `${basePath}/${model.name}`,
+			href: appPath({
+				kind: "list",
+				resource: model.name
+			}, basePath),
 			...recent[model.name] && { recent: recent[model.name] }
 		});
 		groups.set(groupName, group);

package/dist/app/nav-recent.js

@@ -1,6 +1,6 @@
 import { recordKey, recordTitle, recordTitleField } from "../live/model-helpers.js";
 import { defaultOrderBy } from "./list-order.js";
-import { defaultRecentLimit, encodeKey, enumLabel } from "@protobase/schema";
+import { appPath, defaultRecentLimit, encodeKey, enumLabel } from "@protobase/schema";
 //#region src/app/nav-recent.ts
 /** The list request behind a sidebar group: its filter, order (the list's sort when unset), size, and only the fields it shows. */
 const recentRequest = (model, view, recent) => ({
@@ -21,7 +21,11 @@ const recentRecords = (model, view, recent, rows, basePath, activeKey) => {
 		return {
 			id: key,
 			label: recordTitle(model, view, row, key),
-			href: `${basePath}/${model.name}/${encodeURIComponent(key)}`,
+			href: appPath({
+				kind: "record",
+				resource: model.name,
+				key
+			}, basePath),
 			status: model.fields[recent.status]?.type === "enum" && status ? enumLabel(status, view.fields[recent.status]?.valueLabels) : status,
 			tone: recent.tones[status] ?? "neutral",
 			pulse: recent.pulse?.includes(status) ?? false,

package/dist/app/pages/action-href.js

@@ -1,7 +1,5 @@
 //#region src/app/pages/action-href.ts
 /** `href` with every `{field}` replaced by the record's value, percent-encoded; a missing value becomes empty. */
 const fillHref = (href, record = {}) => href.replace(/\{([A-Za-z_][A-Za-z0-9_]*)\}/g, (_, name) => encodeURIComponent(record[name] === null || record[name] === void 0 ? "" : String(record[name])));
-/** Paths in the app start with one `/`; anything else (`https:`, `mailto:`, `//host`) leaves the app. */
-const isAppPath = (href) => href.startsWith("/") && !href.startsWith("//");
 //#endregion
-export { fillHref, isAppPath };
+export { fillHref };

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

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

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

@@ -1,18 +1,27 @@
-import { Link } from "../../router.js";
-import { isAppPath } from "../action-href.js";
+import { AppLink } from "../../use-app-address.js";
+import { useLayoutRecord } from "../record-scope.js";
 import { propsOf } from "./block-props.js";
 import { jsx } from "react/jsx-runtime";
+import { appPath, fillAddress } from "@protobase/schema";
 //#region src/app/pages/blocks/link.tsx
 const style = "font-medium text-primary-text hover:underline";
-/** A path in the app goes through the router; other links (`mailto:`, `https:`) are ordinary anchors. Its text is its children, else the href. */
+/**
+* `to` an address in the app, through the router, its `{field}`s filled from the record around it; an `href` (`mailto:`,
+* `https:`) is an ordinary anchor. Its text is its children, else where it leads.
+*/
 const LinkBlock = ({ node }) => {
-	const { href } = propsOf(node);
-	const label = node.children.filter((child) => typeof child === "string").join("") || href;
-	if (isAppPath(href)) return /* @__PURE__ */ jsx(Link, {
-		to: href,
-		className: style,
-		children: label
-	});
+	const props = propsOf(node);
+	const record = useLayoutRecord()?.record;
+	const text = node.children.filter((child) => typeof child === "string").join("");
+	if (props.to) {
+		const to = fillAddress(props.to, record);
+		return /* @__PURE__ */ jsx(AppLink, {
+			to,
+			className: style,
+			children: text || appPath(to)
+		});
+	}
+	const href = props.href ?? "";
 	return /* @__PURE__ */ jsx("a", {
 		href,
 		className: style,
@@ -20,7 +29,7 @@ const LinkBlock = ({ node }) => {
 			target: "_blank",
 			rel: "noreferrer"
 		},
-		children: label
+		children: text || href
 	});
 };
 //#endregion

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

@@ -3,10 +3,10 @@ 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 { differs, toDraft, toPatchValue } from "../../../live/field-values.js";
 import { ErrorBanner } from "../../error-banner.js";
 import { FieldEditor } from "../../field-editor.js";
-import { useAdminMeta, usePermissions } from "../../meta-gate.js";
 import { can } from "../../permissions.js";
 import { Field } from "../../../record-view/field.js";
 import { createBody, isChosen } from "../../create/create-values.js";

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

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

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

@@ -1,5 +1,5 @@
-import { Link } from "../../router.js";
 import { useAdminMeta } from "../../meta-gate.js";
+import { AppLink } from "../../use-app-address.js";
 import { Skeleton } from "../../../primitives/skeleton.js";
 import { useLayoutRecord } from "../record-scope.js";
 import { useCount } from "../use-layout-data.js";
@@ -17,9 +17,12 @@ const Count = ({ model, filter }) => {
 		className: "text-[13px] text-danger-text",
 		children: "Could not count"
 	});
-	const href = `/${model.name}${filter ? `?filter=${encodeURIComponent(filter)}` : ""}`;
-	return /* @__PURE__ */ jsx(Link, {
-		to: href,
+	return /* @__PURE__ */ jsx(AppLink, {
+		to: {
+			kind: "list",
+			resource: model.name,
+			filter
+		},
 		className: `${big} hover:text-primary-text`,
 		children: count.data.toLocaleString("en-IE")
 	});

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

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

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

@@ -2,10 +2,10 @@ import { cn } from "../../lib/cn.js";
 import { Badge } from "../../primitives/badge.js";
 import { keys } from "../../data/query-keys.js";
 import { useClient } from "../../data/api-provider.js";
-import { Link } from "../router.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { AppLink } from "../use-app-address.js";
 import { fileShown } from "../../live/file-values.js";
 import { displayValue } from "../../live/display-value.js";
-import { useAdminMeta } from "../meta-gate.js";
 import { toneFor } from "../../live/columns-from-model.js";
 import { fetchLabels } from "../../live/relation-labels.js";
 import { jsx } from "react/jsx-runtime";
@@ -23,8 +23,12 @@ const RelationValue = ({ field, value, known }) => {
 		queryFn: async () => (await fetchLabels(queryClient, client, target, [id], views[target.name])).get(id) ?? id
 	});
 	if (!target) return /* @__PURE__ */ jsx("span", { children: id });
-	return /* @__PURE__ */ jsx(Link, {
-		to: `/${target.name}/${encodeURIComponent(id)}`,
+	return /* @__PURE__ */ jsx(AppLink, {
+		to: {
+			kind: "record",
+			resource: target.name,
+			key: id
+		},
 		className: "font-medium text-primary-text hover:underline",
 		children: known ?? label.data ?? id
 	});

package/dist/app/pages/merge-ui.js

@@ -1,6 +1,8 @@
+import { uiFromModule } from "./ui-from-module.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/app/pages/merge-ui.tsx
-const flatten = (ui, label) => [...(ui.extends ?? []).flatMap((parent, index) => flatten(parent, parent.name ?? `${label} extends[${index}]`)), {
+const configOf = (parent) => Object.keys(parent).some((key) => key === "default" || /^[A-Z]/.test(key)) ? uiFromModule(parent) : parent;
+const flatten = (ui, label) => [...(ui.extends ?? []).map(configOf).flatMap((parent, index) => flatten(parent, parent.name ?? `${label} extends[${index}]`)), {
 	ui,
 	label
 }];

package/dist/app/pages/problem.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/app/pages/problem.tsx
+/** A warning in place of something the app cannot draw, such as a component no one registered. */
+const Problem = ({ children }) => /* @__PURE__ */ jsx("div", {
+	role: "alert",
+	className: "rounded-lg border border-dashed border-warning bg-warning-soft p-3 text-[13px] text-warning-text",
+	children
+});
+//#endregion
+export { Problem };