@protobase/ui 0.0.0-stage → 0.1.0

package/dist/app/field-editor.js

@@ -0,0 +1,88 @@
+import { cn } from "../lib/cn.js";
+import { Input } from "../primitives/input.js";
+import { Switch } from "../primitives/switch.js";
+import { Link } from "./router.js";
+import { RelationPicker } from "./relation-picker.js";
+import { displayValue } from "../live/display-value.js";
+import { isEditable } from "../live/field-values.js";
+import { SensitiveField } from "./sensitive-field.js";
+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 FieldEditor = ({ field, hints, value, stored, relationLabel, relationHref, relationPicker, invalid, locked, placeholder, reveal, onChange }) => {
+	if (field.sensitive) return /* @__PURE__ */ jsx(SensitiveField, {
+		field,
+		hints,
+		value,
+		reveal,
+		locked: locked || field.readOnly,
+		invalid,
+		placeholder,
+		onChange
+	});
+	if (field.type === "relation" && relationPicker && !field.readOnly) return /* @__PURE__ */ jsx(RelationPicker, {
+		target: relationPicker.target,
+		view: relationPicker.view,
+		value: String(value),
+		label: relationLabel,
+		invalid,
+		onChange: (next, label) => onChange({
+			key: next,
+			label
+		})
+	});
+	if (field.type === "boolean" && locked) return /* @__PURE__ */ jsx("div", {
+		className: "py-1.5 text-[13px] text-muted-foreground",
+		children: displayValue(field, stored, hints)
+	});
+	if (field.type === "boolean") return /* @__PURE__ */ jsx(Switch, {
+		checked: Boolean(value),
+		onChange,
+		label: field.name
+	});
+	if (field.type === "relation") {
+		const label = relationLabel ?? String(stored ?? "—");
+		return /* @__PURE__ */ jsx("div", {
+			className: "py-1.5 text-[13px]",
+			children: relationHref ? /* @__PURE__ */ jsx(Link, {
+				to: relationHref,
+				className: "font-medium text-primary-text hover:underline",
+				children: label
+			}) : label
+		});
+	}
+	if (!isEditable(field) || locked) return /* @__PURE__ */ jsx("div", {
+		className: cn("py-1.5 text-[13px] tabular-nums", field.type === "decimal" || field.type === "integer" ? "font-medium" : "text-muted-foreground"),
+		children: displayValue(field, stored, hints)
+	});
+	if (field.type === "enum") return /* @__PURE__ */ jsxs("select", {
+		value: String(value),
+		onChange: (event) => onChange(event.target.value),
+		className: "h-8 w-full rounded-md border border-border-strong bg-background px-2 text-[13px] shadow-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20",
+		children: [value === "" && /* @__PURE__ */ jsx("option", {
+			value: "",
+			children: "Choose..."
+		}), (field.enumValues ?? []).map((option) => /* @__PURE__ */ jsx("option", {
+			value: option,
+			children: enumLabel(option, hints?.valueLabels)
+		}, option))]
+	});
+	return /* @__PURE__ */ jsx(Input, {
+		invalid,
+		leading: hints?.prefix ? /* @__PURE__ */ jsx("span", {
+			className: "text-[13px]",
+			children: hints.prefix
+		}) : void 0,
+		placeholder,
+		className: cn(numeric.has(field.type) && "text-right tabular-nums"),
+		value: String(value),
+		onChange: (event) => onChange(event.target.value)
+	});
+};
+//#endregion
+export { FieldEditor };

package/dist/app/icons.js

@@ -0,0 +1,27 @@
+import { Boxes, Building2, CreditCard, FileText, Globe2, Package, Receipt, Settings, ShoppingCart, Table2, Tags, Truck, Users, Warehouse } from "lucide-react";
+//#region src/app/icons.ts
+const byResource = {
+	orders: ShoppingCart,
+	orderLines: ShoppingCart,
+	companies: Building2,
+	invoices: FileText,
+	invoiceLines: Receipt,
+	products: Package,
+	categories: Tags,
+	tags: Tags,
+	companyTags: Tags,
+	stockMoves: Boxes,
+	stockLevels: Boxes,
+	warehouses: Warehouse,
+	locations: Warehouse,
+	people: Users,
+	users: Users,
+	empMaster: Users,
+	organizations: Settings,
+	countries: Globe2,
+	currencies: CreditCard,
+	shipments: Truck
+};
+const iconFor = (resource) => byResource[resource] ?? Table2;
+//#endregion
+export { iconFor };

package/dist/app/index.d.ts

@@ -0,0 +1,2 @@
+import { App, AppProps } from "./app.js";
+export { App, type AppProps };

package/dist/app/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Protobase</title>
+  </head>
+  <body>
+    <div id="root" class="h-screen"></div>
+    <script type="module" src="./main"></script>
+  </body>
+</html>

package/dist/app/list-chart.js

@@ -0,0 +1,36 @@
+import { useSeries } from "../data/use-aggregates.js";
+import { ActivityChart } from "../activity-chart/activity-chart.js";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/list-chart.tsx
+const periods = {
+	"7d": "last 7 days",
+	"30d": "last 30 days",
+	"90d": "last 90 days",
+	"1y": "last year",
+	all: "all time"
+};
+/** The view's chart, drawn from `:series` with the list's current filter. */
+const ListChart = ({ resource, chart, title, noun, filter }) => {
+	const [granularity, setGranularity] = useState(chart.granularity === "week" ? "week" : "day");
+	const range = granularity === "week" ? "90d" : chart.range;
+	const data = useSeries(resource, {
+		field: chart.field,
+		range,
+		granularity,
+		filter
+	}).data?.points.map((point) => ({
+		at: Date.parse(`${point.bucket}Z`),
+		count: point.count
+	})) ?? [];
+	return /* @__PURE__ */ jsx(ActivityChart, {
+		title,
+		noun,
+		data,
+		granularity,
+		onGranularityChange: setGranularity,
+		periodLabel: granularity === "week" ? "last 12 weeks" : periods[range]
+	});
+};
+//#endregion
+export { ListChart };

package/dist/app/list-order.js

@@ -0,0 +1,15 @@
+//#region src/app/list-order.ts
+const defaultOrderBy = (model, view) => {
+	const sort = view?.list?.sort?.[0];
+	return sort ? `${sort[0]} ${sort[1]}` : `${model.primaryKey[0]} asc`;
+};
+const parseSort = (orderBy) => {
+	const [columnId = "", direction] = orderBy.trim().split(/\s+/);
+	return {
+		columnId,
+		direction: direction === "desc" ? "desc" : "asc"
+	};
+};
+const sortToOrderBy = (sort) => `${sort.columnId} ${sort.direction}`;
+//#endregion
+export { defaultOrderBy, parseSort, sortToOrderBy };

package/dist/app/list-page.js

@@ -0,0 +1,213 @@
+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 { humanize } from "../live/naming.js";
+import { useRouter } from "./router.js";
+import { ErrorBanner } from "./error-banner.js";
+import { Notice, useAdminMeta, usePermissions } from "./meta-gate.js";
+import { can, rowAllows } from "./permissions.js";
+import { pinnedStorageKey } from "../data-grid/pinned-storage.js";
+import { DataGrid } from "../data-grid/data-grid.js";
+import { ActiveFilterChips } from "../filter-panel/active-filter-chips.js";
+import { activeChips, emptyFilterState, removeChip } from "../filter-panel/filter-state.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 { Sheet } from "../primitives/sheet.js";
+import { useDeleteFlow } from "./delete/use-delete-flow.js";
+import { useRestore } from "./delete/use-restore.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 { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Plus, SlidersHorizontal } from "lucide-react";
+import { createWhere, encodeKey } 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 { resources } = useAdminMeta();
+	const model = resources[resource];
+	if (!model) return /* @__PURE__ */ jsxs(Notice, {
+		title: "Not found",
+		children: [
+			"There is no resource called ",
+			resource,
+			"."
+		]
+	});
+	return /* @__PURE__ */ jsx(LoadedList, { model });
+};
+const LoadedList = ({ model }) => {
+	const meta = useAdminMeta();
+	const { params, setParams, navigate } = useRouter();
+	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 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 desktop = useIsDesktop();
+	const [sheetOpen, setSheetOpen] = useState(false);
+	const config = useFilterConfig({
+		model,
+		resources: meta.resources,
+		views: meta.views,
+		view,
+		state,
+		extras
+	});
+	const rows = useLiveRows({
+		resources: meta.resources,
+		views: meta.views,
+		model,
+		columns: columns.map((column) => column.id),
+		filter: parsed.ok ? filterText : "",
+		orderBy
+	});
+	const titleField = recordTitleField(model, view);
+	const target = (row) => ({
+		key: row.id,
+		title: String(typeof row[titleField] === "object" ? row[titleField].name : row[titleField] ?? row.id),
+		etag: typeof row.etag === "string" ? row.etag : void 0,
+		snapshot: row
+	});
+	const singular = view?.names?.singular ?? humanize(resource);
+	const permissions = usePermissions(resource);
+	const { state: auth } = useAuth();
+	const restore = useRestore(model);
+	const remove = useDeleteFlow({
+		model,
+		view,
+		restore,
+		onReview: (deleted) => navigate(`/${resource}/${encodeURIComponent(deleted.key)}`)
+	});
+	const setFilter = (next, nextExtras = extras) => setParams({ filter: stateToText(fields, next, nextExtras) || void 0 });
+	const search = searchText(extras);
+	const commitSearch = (text) => {
+		const others = extras.filter((clause) => clause.kind !== "search");
+		setFilter(state, text ? [...others, where.search(text)] : others);
+	};
+	const plural = view?.names?.plural ?? humanize(resource);
+	const panel = /* @__PURE__ */ jsx(FilterPanel, {
+		layout,
+		config,
+		value: state,
+		onChange: setFilter
+	});
+	const chips = activeChips(config, state);
+	const phoneFilters = /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsxs(Button, {
+				className: "min-h-11",
+				onClick: () => setSheetOpen(true),
+				"aria-haspopup": "dialog",
+				children: [
+					/* @__PURE__ */ jsx(SlidersHorizontal, { className: "size-3.5" }),
+					"Filters",
+					chips.length > 0 && ` (${chips.length})`
+				]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "min-w-0 flex-1",
+				children: /* @__PURE__ */ jsx(ActiveFilterChips, {
+					scroll: true,
+					chips,
+					onRemove: (key) => setFilter(removeChip(state, key)),
+					onClear: () => setFilter(emptyFilterState)
+				})
+			})]
+		}), /* @__PURE__ */ jsx(Sheet, {
+			title: "Filters",
+			open: sheetOpen,
+			onClose: () => setSheetOpen(false),
+			children: /* @__PURE__ */ jsx(FilterPanel, {
+				layout: "panel",
+				fullWidth: true,
+				config,
+				value: state,
+				onChange: setFilter
+			})
+		})]
+	});
+	const grid = 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(","))}`),
+		rowActions: [{
+			label: `Open ${singular.toLowerCase()}`,
+			onSelect: (row) => navigate(`/${resource}/${encodeKey(row.id.split(","))}`)
+		}, ...can(permissions, "delete") ? [{
+			label: "Delete",
+			destructive: true,
+			available: (row) => rowAllows(row, "delete"),
+			onSelect: (row) => void remove.start(target(row))
+		}] : []],
+		bulkActions: can(permissions, "delete") ? [{
+			label: (count) => `Delete ${count}`,
+			destructive: true,
+			onRun: (rows) => remove.startBulk(rows.map(target))
+		}] : [],
+		rowNumbers: false,
+		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" });
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-h-0 flex-1 flex-col gap-3 px-5 py-4",
+		children: [
+			remove.dialogs,
+			/* @__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()
+					]
+				})] })
+			}),
+			!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, {
+				title: "Could not load rows",
+				error: rows.error
+			}),
+			view?.chart && /* @__PURE__ */ jsx(ListChart, {
+				resource,
+				chart: view.chart,
+				title: `${plural} created`,
+				noun: plural.toLowerCase(),
+				filter: parsed.ok ? filterText : ""
+			}),
+			!desktop ? phoneFilters : layout === "bar" && panel,
+			desktop && layout === "panel" ? /* @__PURE__ */ jsxs("div", {
+				className: "flex min-h-0 flex-1 gap-4",
+				children: [panel, grid]
+			}) : grid
+		]
+	});
+};
+//#endregion
+export { ListPage };

package/dist/app/list-search.js

@@ -0,0 +1,30 @@
+import { Input } from "../primitives/input.js";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Search } from "lucide-react";
+//#region src/app/list-search.tsx
+/** A search box that commits after a short pause or on Enter. */
+const ListSearch = ({ value, onCommit, placeholder }) => {
+	const [text, setText] = useState(value);
+	useEffect(() => setText(value), [value]);
+	useEffect(() => {
+		if (text === value) return;
+		const timer = setTimeout(() => onCommit(text), 350);
+		return () => clearTimeout(timer);
+	}, [
+		text,
+		value,
+		onCommit
+	]);
+	return /* @__PURE__ */ jsx(Input, {
+		wrapperClassName: "min-w-0 flex-1 sm:w-72 sm:flex-none",
+		leading: /* @__PURE__ */ jsx(Search, { className: "size-4" }),
+		placeholder,
+		"aria-label": "Search",
+		value: text,
+		onChange: (event) => setText(event.target.value),
+		onKeyDown: (event) => event.key === "Enter" && onCommit(text)
+	});
+};
+//#endregion
+export { ListSearch };

package/dist/app/main.d.ts

@@ -0,0 +1 @@
+import "../styles.css";

package/dist/app/main.js

@@ -0,0 +1,14 @@
+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 "../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
+}) }));
+//#endregion

package/dist/app/menu-icons.js

@@ -0,0 +1,21 @@
+import { BookOpen, Building2, CreditCard, ExternalLink, FileText, KeyRound, LayoutDashboard, LifeBuoy, Mail, Receipt, Settings, ShieldCheck, Users } from "lucide-react";
+//#region src/app/menu-icons.ts
+const byName = {
+	"book-open": BookOpen,
+	building: Building2,
+	"credit-card": CreditCard,
+	"external-link": ExternalLink,
+	"file-text": FileText,
+	key: KeyRound,
+	"layout-dashboard": LayoutDashboard,
+	"life-buoy": LifeBuoy,
+	mail: Mail,
+	receipt: Receipt,
+	settings: Settings,
+	shield: ShieldCheck,
+	users: Users
+};
+Object.keys(byName);
+const menuIcon = (name, fallback) => name ? byName[name] ?? fallback : fallback;
+//#endregion
+export { menuIcon };

package/dist/app/meta-gate.js

@@ -0,0 +1,46 @@
+import { Spinner } from "../primitives/spinner.js";
+import { allowEverything } from "../data/meta-data.js";
+import { useMeta } from "../data/use-meta.js";
+import { createContext, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isApiError } from "@protobase/client";
+//#region src/app/meta-gate.tsx
+const MetaContext = createContext(null);
+const useAdminMeta = () => {
+	const meta = useContext(MetaContext);
+	if (!meta) throw new Error("useAdminMeta must be used inside MetaGate");
+	return meta;
+};
+const Notice = ({ title, children }) => /* @__PURE__ */ jsx("div", {
+	className: "flex h-full min-h-48 items-center justify-center p-8",
+	children: /* @__PURE__ */ jsxs("div", {
+		className: "max-w-md text-center",
+		children: [/* @__PURE__ */ jsx("h1", {
+			className: "text-[15px] font-semibold",
+			children: title
+		}), /* @__PURE__ */ jsx("p", {
+			className: "mt-1 text-[13px] text-muted-foreground",
+			children
+		})]
+	})
+});
+/** Renders its children once `/meta` has loaded. */
+const MetaGate = ({ children }) => {
+	const meta = useMeta();
+	if (meta.isPending) return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full min-h-48 items-center justify-center gap-2 text-[13px] text-muted-foreground",
+		children: [/* @__PURE__ */ jsx(Spinner, {}), " Loading"]
+	});
+	if (meta.error) return /* @__PURE__ */ jsx(Notice, {
+		title: "Cannot reach the API",
+		children: isApiError(meta.error) ? meta.error.message : "The server did not answer. Is it running?"
+	});
+	return /* @__PURE__ */ jsx(MetaContext.Provider, {
+		value: meta.data,
+		children
+	});
+};
+/** What the signed-in user may do with a resource; everything when the server does not say. */
+const usePermissions = (resource) => useAdminMeta().permissions[resource] ?? allowEverything;
+//#endregion
+export { MetaGate, Notice, useAdminMeta, usePermissions };

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

@@ -0,0 +1,65 @@
+import { humanize } from "../live/naming.js";
+import { iconFor } from "./icons.js";
+import { menuIcon } from "./menu-icons.js";
+import { userMenuResources } from "./user-menu-from-meta.js";
+import { LayoutDashboard } from "lucide-react";
+//#region src/app/nav-from-meta.ts
+const groupLabels = {
+	sales: "Sales",
+	crm: "CRM",
+	catalog: "Catalog",
+	inventory: "Inventory",
+	core: "Admin",
+	hr: "HR"
+};
+/**
+* One sidebar group per `nav.group` (default: the database schema, and "Pages" for pages); `nav.hidden` and a place in
+* the user menu leave an entry out, `nav.order` sorts within a group, and `recent` (from `useNavRecent`) makes an entry
+* collapsible. Groups with pages come first, so a dashboard leads the sidebar.
+*/
+const navFromMeta = (meta, basePath = "", recent = {}) => {
+	const groups = /* @__PURE__ */ new Map();
+	const orders = /* @__PURE__ */ new Map();
+	const inMenu = userMenuResources(meta);
+	for (const page of Object.values(meta.pages)) {
+		if (page.nav?.hidden || inMenu.has(page.name)) continue;
+		const groupName = page.nav?.group ?? "Pages";
+		const group = groups.get(groupName) ?? {
+			label: groupName,
+			items: []
+		};
+		group.items.push({
+			id: page.name,
+			label: page.title,
+			icon: menuIcon(page.icon, LayoutDashboard),
+			href: `${basePath}/${page.name}`
+		});
+		groups.set(groupName, group);
+		orders.set(page.name, page.nav?.order ?? Number.MAX_SAFE_INTEGER);
+	}
+	for (const model of Object.values(meta.resources)) {
+		const view = meta.views[model.name];
+		if (!view || view.nav?.hidden || inMenu.has(model.name)) continue;
+		const schema = model.table.schema ?? "public";
+		const groupName = view.nav?.group ?? groupLabels[schema] ?? humanize(schema);
+		const group = groups.get(groupName) ?? {
+			label: groupName,
+			items: []
+		};
+		group.items.push({
+			id: model.name,
+			label: view.names?.plural ?? humanize(model.name),
+			icon: iconFor(model.name),
+			href: `${basePath}/${model.name}`,
+			...recent[model.name] && { recent: recent[model.name] }
+		});
+		groups.set(groupName, group);
+		orders.set(model.name, view.nav?.order ?? Number.MAX_SAFE_INTEGER);
+	}
+	return [...groups.values()].map((group) => ({
+		...group,
+		items: [...group.items].sort((a, b) => (orders.get(a.id) ?? 0) - (orders.get(b.id) ?? 0))
+	}));
+};
+//#endregion
+export { navFromMeta };

package/dist/app/nav-recent.js

@@ -0,0 +1,33 @@
+import { recordKey, recordTitle, recordTitleField } from "../live/model-helpers.js";
+import { defaultOrderBy } from "./list-order.js";
+import { 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) => ({
+	filter: recent.filter ?? "",
+	orderBy: recent.orderBy ?? defaultOrderBy(model, view),
+	pageSize: recent.limit ?? defaultRecentLimit,
+	fields: [.../* @__PURE__ */ new Set([
+		...model.primaryKey,
+		recordTitleField(model, view),
+		recent.status
+	])]
+});
+/** List rows as sidebar records: titled like the record page, dotted by their status, active while open. */
+const recentRecords = (model, view, recent, rows, basePath, activeKey) => {
+	return rows.map((row) => {
+		const key = encodeKey(recordKey(model, row));
+		const status = String(row[recent.status] ?? "");
+		return {
+			id: key,
+			label: recordTitle(model, view, row, key),
+			href: `${basePath}/${model.name}/${encodeURIComponent(key)}`,
+			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,
+			active: key === activeKey
+		};
+	});
+};
+//#endregion
+export { recentRecords, recentRequest };

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

@@ -0,0 +1,7 @@
+//#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 };

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

@@ -0,0 +1,38 @@
+import { Button } from "../../../primitives/button.js";
+import { ConfirmAction } from "../confirm-action.js";
+import { useLayoutRecord } from "../record-scope.js";
+import { useRunAction } from "../use-run-action.js";
+import { propsOf } from "./block-props.js";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/pages/blocks/action.tsx
+/** A button for a named action of the resource's view, asking first when the action has `confirm`. */
+const ActionBlock = ({ node }) => {
+	const { name, resource, label, variant } = propsOf(node);
+	const scope = useLayoutRecord();
+	const action = useRunAction(resource ?? scope?.model.name ?? "", name, resource === void 0 || resource === scope?.model.name ? scope : void 0);
+	const [asking, setAsking] = useState(false);
+	if (!action.action) return null;
+	const text = label ?? action.action.label;
+	const start = () => action.action.confirm ? setAsking(true) : void action.run();
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+		size: "sm",
+		variant: variant ?? "secondary",
+		loading: action.running,
+		disabled: Boolean(action.blocked),
+		title: action.blocked,
+		onClick: start,
+		children: text
+	}), asking && /* @__PURE__ */ jsx(ConfirmAction, {
+		action: action.action,
+		label: text,
+		danger: variant === "danger",
+		onCancel: () => setAsking(false),
+		onConfirm: () => {
+			setAsking(false);
+			action.run();
+		}
+	})] });
+};
+//#endregion
+export { ActionBlock };

package/dist/app/pages/blocks/block-props.js

@@ -0,0 +1,5 @@
+//#region src/app/pages/blocks/block-props.ts
+/** The element's props in their declared shape; the server checked them against the block's spec. */
+const propsOf = (node) => node.props;
+//#endregion
+export { propsOf };