@protobase/ui 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,34 @@
+import { cn } from "../../../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/pages/blocks/card-frame.tsx
+/** The card every block that shows a box uses: title, description and header actions over the body. */
+const CardFrame = ({ title, description, actions, className, children }) => /* @__PURE__ */ jsxs("section", {
+	className: cn("flex min-w-0 flex-col rounded-lg border border-border bg-background", className),
+	"aria-label": title,
+	children: [(title || description || actions) && /* @__PURE__ */ jsxs("header", {
+		className: "flex flex-wrap items-start justify-between gap-x-4 gap-y-2 px-4 pt-4",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "min-w-0",
+			children: [title && /* @__PURE__ */ jsx("h2", {
+				className: "text-[15px] font-semibold tracking-tight",
+				children: title
+			}), description && /* @__PURE__ */ jsx("p", {
+				className: "mt-0.5 text-[13px] text-muted-foreground",
+				children: description
+			})]
+		}), actions && /* @__PURE__ */ jsx("div", {
+			className: "flex flex-wrap items-center gap-2",
+			children: actions
+		})]
+	}), /* @__PURE__ */ jsx("div", {
+		className: "min-w-0 flex-1 p-4 text-[13px]",
+		children
+	})]
+});
+/** A short line in place of content: nothing to show, or not loaded yet. */
+const Quiet = ({ children }) => /* @__PURE__ */ jsx("p", {
+	className: "text-[13px] text-muted-foreground",
+	children
+});
+//#endregion
+export { CardFrame, Quiet };

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

@@ -0,0 +1,55 @@
+import { ErrorBanner } from "../../error-banner.js";
+import { useAdminMeta } from "../../meta-gate.js";
+import { Skeleton } from "../../../primitives/skeleton.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 { 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 }) => {
+	const page = useListPage(model, {
+		filter,
+		sort,
+		pageSize: limit
+	});
+	const rows = page.data?.items ?? [];
+	return /* @__PURE__ */ jsx(CardFrame, {
+		title,
+		description,
+		actions,
+		children: page.isPending ? /* @__PURE__ */ jsx("div", {
+			className: "flex gap-3",
+			children: Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-24 w-56" }, index))
+		}) : page.error ? /* @__PURE__ */ jsx(ErrorBanner, {
+			title: "Could not load",
+			error: page.error
+		}) : rows.length === 0 ? /* @__PURE__ */ jsx(Quiet, { children: empty ?? "Nothing here yet." }) : /* @__PURE__ */ jsx("ul", {
+			className: "-mx-4 flex snap-x gap-3 overflow-x-auto px-4 pb-1",
+			children: rows.map((row) => {
+				const scope = scopeOf(model, row);
+				return /* @__PURE__ */ jsx("li", {
+					className: "flex w-60 shrink-0 snap-start flex-col gap-2 rounded-lg border border-border bg-surface p-3",
+					children: /* @__PURE__ */ jsx(RecordScope, {
+						value: scope,
+						children
+					})
+				}, scope.key);
+			})
+		})
+	});
+};
+/** Up to `limit` records side by side, each a small card made from the children, with their own actions. */
+const CardRowBlock = ({ node, children, slots }) => {
+	const { resource, ...props } = propsOf(node);
+	const model = useAdminMeta().resources[resource];
+	if (!model) return null;
+	return /* @__PURE__ */ jsx(LoadedCardRow, {
+		...props,
+		model,
+		actions: slots.actions,
+		children
+	});
+};
+//#endregion
+export { CardRowBlock };

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

@@ -0,0 +1,19 @@
+import { propsOf } from "./block-props.js";
+import { CardFrame } from "./card-frame.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/pages/blocks/card.tsx
+const CardBlock = ({ node, children, slots }) => {
+	const { title, description } = propsOf(node);
+	return /* @__PURE__ */ jsx(CardFrame, {
+		title,
+		description,
+		actions: slots.actions,
+		className: "h-full",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col gap-3",
+			children
+		})
+	});
+};
+//#endregion
+export { CardBlock };

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

@@ -0,0 +1,45 @@
+import { humanize } from "../../../live/naming.js";
+import { useAdminMeta } from "../../meta-gate.js";
+import { Skeleton } from "../../../primitives/skeleton.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". */
+const fieldLabel = (path, viewLabel) => {
+	if (viewLabel) return viewLabel;
+	const words = path.split(".").map((part) => humanize(part).toLowerCase()).join(" ");
+	return words[0].toUpperCase() + words.slice(1);
+};
+/** A label over a value of the record around it; `label={false}` shows the value alone. */
+const FieldBlock = ({ node }) => {
+	const { name, label, format } = propsOf(node);
+	const { views } = useAdminMeta();
+	const value = usePathValue(useLayoutRecord(), name);
+	if (value.state === "missing") return null;
+	const shown = value.state === "loading" ? /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }) : /* @__PURE__ */ jsx(FieldValue, {
+		model: value.model,
+		field: value.field,
+		value: value.value,
+		format
+	});
+	if (label === false) return /* @__PURE__ */ jsx("div", {
+		className: "text-[13px]",
+		children: shown
+	});
+	const text = label ?? fieldLabel(name, value.state === "ready" ? views[value.model.name]?.fields[value.field.name]?.label : void 0);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "min-w-0",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "text-xs text-muted-foreground",
+			children: text
+		}), /* @__PURE__ */ jsx("div", {
+			className: "mt-0.5 truncate text-[13px]",
+			children: shown
+		})]
+	});
+};
+//#endregion
+export { FieldBlock, fieldLabel };

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

@@ -0,0 +1,34 @@
+import { cn } from "../../../lib/cn.js";
+import { propsOf } from "./block-props.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/pages/blocks/grid.tsx
+const columns = {
+	1: "",
+	2: "md:grid-cols-2",
+	3: "md:grid-cols-2 xl:grid-cols-3",
+	4: "sm:grid-cols-2 xl:grid-cols-4"
+};
+const spans = {
+	1: "",
+	2: "md:col-span-2",
+	3: "md:col-span-2 xl:col-span-3",
+	4: "sm:col-span-2 md:col-span-2 xl:col-span-4"
+};
+/** Columns that collapse to one on a phone; a child's `span` makes it wider. */
+const GridBlock = ({ node, children }) => {
+	const { columns: count = 2 } = propsOf(node);
+	const childNodes = node.children;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("grid grid-cols-1 gap-4", columns[count]),
+		children: children.map((child, index) => {
+			const element = childNodes[index];
+			const span = typeof element === "object" ? element.props.span : void 0;
+			return /* @__PURE__ */ jsx("div", {
+				className: cn("min-w-0", span && spans[span]),
+				children: child
+			}, index);
+		})
+	});
+};
+//#endregion
+export { GridBlock };

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

@@ -0,0 +1,27 @@
+import { Link } from "../../router.js";
+import { isAppPath } from "../action-href.js";
+import { propsOf } from "./block-props.js";
+import { jsx } from "react/jsx-runtime";
+//#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. */
+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
+	});
+	return /* @__PURE__ */ jsx("a", {
+		href,
+		className: style,
+		...href.startsWith("http") && {
+			target: "_blank",
+			rel: "noreferrer"
+		},
+		children: label
+	});
+};
+//#endregion
+export { LinkBlock };

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

@@ -0,0 +1,149 @@
+import { useClient } from "../../../data/api-provider.js";
+import { Button } from "../../../primitives/button.js";
+import { humanize } from "../../../live/naming.js";
+import { useToast } from "../../../toasts/toast-provider.js";
+import { Dialog } from "../../../primitives/dialog.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";
+import { useLayoutRecord } from "../record-scope.js";
+import { useFirstRecord, useRefreshResource } from "../use-layout-data.js";
+import { propsOf } from "./block-props.js";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { isApiError } from "@protobase/client";
+//#region src/app/pages/blocks/modal-form.tsx
+/** The literal defaults of new records, or the record's values when editing; relations as `{ key, label }` once chosen. */
+const startingDraft = (model, fields, record) => Object.fromEntries(fields.map((name) => {
+	const field = model.fields[name];
+	if (record) return [name, field.type === "boolean" ? Boolean(record.record[name]) : toDraft(record.record[name])];
+	const fallback = field.default && "value" in field.default ? field.default.value : void 0;
+	return [name, field.type === "boolean" ? Boolean(fallback) : toDraft(fallback)];
+}));
+/** Changed fields only; a chosen relation sends its key. */
+const editBody = (model, draft, record) => Object.fromEntries(Object.entries(draft).flatMap(([name, value]) => {
+	const field = model.fields[name];
+	if (isChosen(value)) return value.key === toDraft(record.record[name]) ? [] : [[name, field.type === "integer" ? Number(value.key) : value.key]];
+	return differs(field, value, record.record[name]) ? [[name, toPatchValue(field, value)]] : [];
+}));
+const ModalFormDialog = ({ model, record, mode, label, title, fields, values, onClose }) => {
+	const { resources, views } = useAdminMeta();
+	const client = useClient();
+	const toast = useToast();
+	const refresh = useRefreshResource();
+	const view = views[model.name];
+	const [draft, setDraft] = useState(() => startingDraft(model, fields, record));
+	const [errors, setErrors] = useState({});
+	const [failure, setFailure] = useState();
+	const [saving, setSaving] = useState(false);
+	const submit = async () => {
+		setSaving(true);
+		setFailure(void 0);
+		await (mode === "create" ? client.create(model.name, {
+			...createBody(model, resources, draft),
+			...values
+		}) : client.update(model.name, record.key, editBody(model, draft, record), record.etag ?? "*")).then(async () => {
+			await refresh(model.name);
+			toast.show({
+				state: "success",
+				title: `${title ?? label}: saved`
+			});
+			onClose();
+		}, (error) => {
+			if (isApiError(error)) setErrors(Object.fromEntries(error.errors.flatMap((entry) => entry.field ? [[entry.field, entry.message]] : [])));
+			setFailure(error);
+		});
+		setSaving(false);
+	};
+	return /* @__PURE__ */ jsx(Dialog, {
+		title: title ?? label,
+		onClose,
+		actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+			onClick: onClose,
+			children: "Cancel"
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: "primary",
+			loading: saving,
+			onClick: () => void submit(),
+			children: mode === "create" ? "Create" : "Save"
+		})] }),
+		children: /* @__PURE__ */ jsxs("form", {
+			className: "flex flex-col gap-4",
+			onSubmit: (event) => {
+				event.preventDefault();
+				submit();
+			},
+			children: [failure !== void 0 && Object.keys(errors).length === 0 && /* @__PURE__ */ jsx(ErrorBanner, {
+				title: "Not saved",
+				error: failure
+			}), fields.map((name) => {
+				const field = model.fields[name];
+				const value = draft[name];
+				const target = field.relation ? resources[field.relation.resource] : void 0;
+				return /* @__PURE__ */ jsx(Field, {
+					label: view?.fields[name]?.label ?? humanize(name),
+					help: view?.fields[name]?.help,
+					error: errors[name],
+					children: /* @__PURE__ */ jsx(FieldEditor, {
+						field,
+						hints: view?.fields[name],
+						value: isChosen(value) ? value.key : value,
+						stored: record?.record[name],
+						relationLabel: isChosen(value) ? value.label : void 0,
+						relationPicker: target ? {
+							target,
+							view: views[target.name]
+						} : void 0,
+						invalid: Boolean(errors[name]),
+						onChange: (next) => {
+							setErrors(({ [name]: _, ...rest }) => rest);
+							setDraft((current) => ({
+								...current,
+								[name]: next
+							}));
+						}
+					})
+				}, name);
+			})]
+		})
+	});
+};
+const KeyedRecord = ({ model, recordKey, children }) => {
+	const record = useFirstRecord(model, { key: recordKey });
+	return /* @__PURE__ */ jsx(Fragment$1, { children: children(record.data ?? void 0) });
+};
+/** A button that opens a form in a dialog: a new record of `resource`, or the record around it (or `recordKey`) to edit. */
+const ModalFormBlock = ({ node }) => {
+	const props = propsOf(node);
+	const scope = useLayoutRecord();
+	const { resources } = useAdminMeta();
+	const model = resources[props.resource ?? scope?.model.name ?? ""];
+	const permissions = usePermissions(model?.name ?? "");
+	const [open, setOpen] = useState(false);
+	if (!model) return null;
+	if (!(props.mode === "create" ? can(permissions, "create") : can(permissions, "update") && scope?.permissions?.update !== false)) return null;
+	const button = (record) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+		size: "sm",
+		variant: props.variant ?? "secondary",
+		disabled: props.mode === "edit" && !record,
+		onClick: () => setOpen(true),
+		children: props.label
+	}), open && /* @__PURE__ */ jsx(ModalFormDialog, {
+		...props,
+		model,
+		record: props.mode === "edit" ? record : void 0,
+		onClose: () => setOpen(false)
+	})] });
+	if (props.mode === "edit" && props.recordKey !== void 0) return /* @__PURE__ */ jsx(KeyedRecord, {
+		model,
+		recordKey: props.recordKey,
+		children: button
+	});
+	return button(props.mode === "edit" ? scope : void 0);
+};
+//#endregion
+export { ModalFormBlock };

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

@@ -0,0 +1,20 @@
+import { PageHeader } from "../../../app-shell/page-header.js";
+import { propsOf } from "./block-props.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/pages/blocks/page-block.tsx
+const PageBlock = ({ node, children, slots }) => {
+	const { title, description } = propsOf(node);
+	return /* @__PURE__ */ jsx("div", {
+		className: "min-h-0 flex-1 overflow-y-auto",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "mx-auto flex max-w-[1200px] flex-col gap-6 px-4 pb-16 pt-6 md:px-10 md:py-8",
+			children: [/* @__PURE__ */ jsx(PageHeader, {
+				title,
+				subtitle: description,
+				actions: slots.actions
+			}), children]
+		})
+	});
+};
+//#endregion
+export { PageBlock };

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

@@ -0,0 +1,54 @@
+import { Skeleton } from "../../../primitives/skeleton.js";
+import { useLayoutRecord } from "../record-scope.js";
+import { propsOf } from "./block-props.js";
+import { usePathValue } from "../use-path-value.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/pages/blocks/progress.tsx
+/** A number as given, or the number in a field of the record around it. */
+const useAmount = (amount, fallback) => {
+	const scope = useLayoutRecord();
+	const value = usePathValue(typeof amount === "string" ? scope : void 0, typeof amount === "string" ? amount : "");
+	if (typeof amount === "number") return amount;
+	if (amount === void 0) return fallback;
+	if (value.state === "ready") return Number(value.value);
+	return value.state === "loading" ? void 0 : NaN;
+};
+/** A bar for `value` out of `max` (100 by default), with the numbers beside the label. */
+const ProgressBlock = ({ node }) => {
+	const { value, max, label } = propsOf(node);
+	const current = useAmount(value, 0);
+	const total = useAmount(max, 100);
+	if (current === void 0 || total === void 0) return /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-full" });
+	if (!Number.isFinite(current) || !Number.isFinite(total)) return null;
+	const share = total > 0 ? Math.min(1, Math.max(0, current / total)) : 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "min-w-0",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-baseline justify-between gap-2 text-xs",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: label
+			}), /* @__PURE__ */ jsxs("span", {
+				className: "tabular-nums",
+				children: [
+					current.toLocaleString("en-IE"),
+					" / ",
+					total.toLocaleString("en-IE")
+				]
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			role: "progressbar",
+			"aria-label": label,
+			"aria-valuenow": current,
+			"aria-valuemin": 0,
+			"aria-valuemax": total,
+			className: "mt-1.5 h-2 overflow-hidden rounded-full bg-muted",
+			children: /* @__PURE__ */ jsx("div", {
+				className: share >= .9 ? "h-full rounded-full bg-warning" : "h-full rounded-full bg-primary",
+				style: { width: `${share * 100}%` }
+			})
+		})]
+	});
+};
+//#endregion
+export { ProgressBlock };

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

@@ -0,0 +1,56 @@
+import { ErrorBanner } from "../../error-banner.js";
+import { useAdminMeta } from "../../meta-gate.js";
+import { Skeleton } from "../../../primitives/skeleton.js";
+import { RecordScope } from "../record-scope.js";
+import { useFirstRecord } from "../use-layout-data.js";
+import { propsOf } from "./block-props.js";
+import { CardFrame, Quiet } from "./card-frame.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/pages/blocks/record-card.tsx
+const LoadedRecordCard = ({ model, filter, sort, recordKey, title, description, empty, actions, children }) => {
+	const record = useFirstRecord(model, {
+		filter,
+		sort,
+		key: recordKey
+	});
+	const scoped = (content) => record.data ? /* @__PURE__ */ jsx(RecordScope, {
+		value: record.data,
+		children: content
+	}) : void 0;
+	const body = record.isPending ? /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2",
+		children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/3" })]
+	}) : record.error ? /* @__PURE__ */ jsx(ErrorBanner, {
+		title: "Could not load",
+		error: record.error
+	}) : record.data ? scoped(/* @__PURE__ */ jsx("div", {
+		className: "flex flex-col gap-3",
+		children
+	})) : /* @__PURE__ */ jsx(Quiet, { children: empty ?? "Nothing here yet." });
+	return /* @__PURE__ */ jsx(CardFrame, {
+		title,
+		description,
+		actions: actions ? scoped(actions) : void 0,
+		className: "h-full",
+		children: body
+	});
+};
+/** One record, the one `recordKey` names or the first match: its Fields, Actions and forms inside, actions in the header. */
+const RecordCardBlock = ({ node, children, slots }) => {
+	const { resource, filter, sort, recordKey, title, description, empty } = propsOf(node);
+	const model = useAdminMeta().resources[resource];
+	if (!model) return null;
+	return /* @__PURE__ */ jsx(LoadedRecordCard, {
+		model,
+		filter,
+		sort,
+		recordKey,
+		title,
+		description,
+		empty,
+		actions: slots.actions,
+		children
+	});
+};
+//#endregion
+export { RecordCardBlock };

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

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

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

@@ -0,0 +1,78 @@
+import { Link } from "../../router.js";
+import { useAdminMeta } from "../../meta-gate.js";
+import { Skeleton } from "../../../primitives/skeleton.js";
+import { useLayoutRecord } from "../record-scope.js";
+import { useCount } from "../use-layout-data.js";
+import { propsOf } from "./block-props.js";
+import { CardFrame } from "./card-frame.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/stat.tsx
+const big = "text-2xl font-semibold tracking-tight tabular-nums";
+const Count = ({ model, filter }) => {
+	const count = useCount(model, filter);
+	if (count.isPending) return /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-16" });
+	if (count.error) return /* @__PURE__ */ jsx("span", {
+		className: "text-[13px] text-danger-text",
+		children: "Could not count"
+	});
+	const href = `/${model.name}${filter ? `?filter=${encodeURIComponent(filter)}` : ""}`;
+	return /* @__PURE__ */ jsx(Link, {
+		to: href,
+		className: `${big} hover:text-primary-text`,
+		children: count.data.toLocaleString("en-IE")
+	});
+};
+const RecordValue = ({ field, format }) => {
+	const value = usePathValue(useLayoutRecord(), field);
+	if (value.state === "loading") return /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-16" });
+	if (value.state === "missing") return null;
+	return /* @__PURE__ */ jsx("span", {
+		className: big,
+		children: /* @__PURE__ */ jsx(FieldValue, {
+			model: value.model,
+			field: value.field,
+			value: value.value,
+			format
+		})
+	});
+};
+/** One number or value with a label: fixed, a count of matching records (linking to them), or a field of the record. */
+const StatBlock = ({ node }) => {
+	const { label, value, resource, filter, field, format, description } = propsOf(node);
+	const { resources } = useAdminMeta();
+	const model = resource === void 0 ? void 0 : resources[resource];
+	return /* @__PURE__ */ jsxs(CardFrame, {
+		className: "h-full",
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "text-[13px] text-muted-foreground",
+				children: label
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mt-1",
+				children: [
+					value !== void 0 && /* @__PURE__ */ jsx("span", {
+						className: big,
+						children: value
+					}),
+					model && /* @__PURE__ */ jsx(Count, {
+						model,
+						filter
+					}),
+					field !== void 0 && /* @__PURE__ */ jsx(RecordValue, {
+						field,
+						format
+					})
+				]
+			}),
+			description && /* @__PURE__ */ jsx("p", {
+				className: "mt-1 text-xs text-muted-foreground",
+				children: description
+			})
+		]
+	});
+};
+//#endregion
+export { StatBlock };