@protobase/ui 0.0.0-stage → 0.1.0

package/dist/format/date.js

@@ -0,0 +1,37 @@
+//#region src/format/date.ts
+const day = new Intl.DateTimeFormat("en-GB", {
+	day: "numeric",
+	month: "short",
+	year: "numeric",
+	timeZone: "UTC"
+});
+const dayShort = new Intl.DateTimeFormat("en-GB", {
+	day: "numeric",
+	month: "short",
+	timeZone: "UTC"
+});
+const time = new Intl.DateTimeFormat("en-GB", {
+	hour: "2-digit",
+	minute: "2-digit",
+	hour12: false,
+	timeZone: "UTC"
+});
+const formatDate = (ms) => day.format(ms);
+const formatDayShort = (ms) => dayShort.format(ms);
+const formatDateTime = (ms) => `${day.format(ms)}, ${time.format(ms)}`;
+const relative = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+const units = [
+	["year", 31536e3],
+	["month", 2592e3],
+	["day", 86400],
+	["hour", 3600],
+	["minute", 60]
+];
+/** "5 minutes ago", "yesterday", "3 years ago"; `seconds` is how long ago it was. */
+const formatRelativeTime = (seconds) => {
+	const [unit, size] = units.find(([, size]) => seconds >= size) ?? ["second", 1];
+	if (unit === "second" && seconds < 45) return "just now";
+	return relative.format(-Math.floor(seconds / size), unit);
+};
+//#endregion
+export { formatDate, formatDateTime, formatDayShort, formatRelativeTime };

package/dist/format/money.js

@@ -0,0 +1,15 @@
+//#region src/format/money.ts
+const formatters = /* @__PURE__ */ new Map();
+const formatterFor = (currency) => {
+	const cached = formatters.get(currency);
+	if (cached) return cached;
+	const created = new Intl.NumberFormat("en-IE", {
+		style: "currency",
+		currency
+	});
+	formatters.set(currency, created);
+	return created;
+};
+const formatMoney = (cents, currency = "EUR") => formatterFor(currency).format(cents / 100);
+//#endregion
+export { formatMoney };

package/dist/format/number.js

@@ -0,0 +1,12 @@
+//#region src/format/number.ts
+const grouped = new Intl.NumberFormat("en-IE");
+const formatInt = (value) => grouped.format(value);
+const formatSigned = (value) => value > 0 ? `+${grouped.format(value)}` : grouped.format(value).replace("-", "−");
+const formatPercent = (value) => `${value}%`;
+const formatApproxRows = (count) => {
+	if (count < 1e4) return `${formatInt(count)} rows`;
+	const magnitude = 10 ** (Math.floor(Math.log10(count)) - 3);
+	return `about ${formatInt(Math.round(count / magnitude) * magnitude)} rows`;
+};
+//#endregion
+export { formatApproxRows, formatInt, formatPercent, formatSigned };

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+import { ActionContext, ActionHandler, ProjectUi, defineUi } from "./app/pages/project-ui.js";
+import { App, AppProps } from "./app/app.js";
+import "./app/index.js";
+import { ApiProvider, ApiProviderProps, useClient } from "./data/api-provider.js";
+import { MetaData } from "./data/meta-data.js";
+import { useMeta } from "./data/use-meta.js";
+import { useList } from "./data/use-list.js";
+import { useRecord } from "./data/use-record.js";
+import { useFacets, useHistogram, useSeries } from "./data/use-aggregates.js";
+import { isConflict, useUpdateRecord } from "./data/use-update-record.js";
+import { LayoutRecord, useLayoutRecord } from "./app/pages/record-scope.js";
+export { type ActionContext, type ActionHandler, ApiProvider, type ApiProviderProps, App, type AppProps, type LayoutRecord, type MetaData, type ProjectUi, defineUi, isConflict, useClient, useFacets, useHistogram, useLayoutRecord, useList, useMeta, useRecord, useSeries, useUpdateRecord };

package/dist/index.js

@@ -0,0 +1,10 @@
+import { ApiProvider, useClient } from "./data/api-provider.js";
+import { useRecord } from "./data/use-record.js";
+import { useMeta } from "./data/use-meta.js";
+import { useFacets, useHistogram, useSeries } from "./data/use-aggregates.js";
+import { useLayoutRecord } from "./app/pages/record-scope.js";
+import { defineUi } from "./app/pages/project-ui.js";
+import { useList } from "./data/use-list.js";
+import { isConflict, useUpdateRecord } from "./data/use-update-record.js";
+import { App } from "./app/app.js";
+export { ApiProvider, App, defineUi, isConflict, useClient, useFacets, useHistogram, useLayoutRecord, useList, useMeta, useRecord, useSeries, useUpdateRecord };

package/dist/inline-child-table/columns.js

@@ -0,0 +1,4 @@
+//#region src/inline-child-table/columns.ts
+const lineGrid = "grid grid-cols-[28px_minmax(0,1fr)_88px_112px_112px_32px] items-center gap-2 pointer-coarse:grid-cols-[44px_minmax(0,1fr)_88px_112px_112px_44px]";
+//#endregion
+export { lineGrid };

package/dist/inline-child-table/inline-child-table.js

@@ -0,0 +1,120 @@
+import { Button } from "../primitives/button.js";
+import { productAt } from "../mocks/products.js";
+import { lineGrid } from "./columns.js";
+import { LineRow } from "./line-row.js";
+import { reorder } from "./reorder.js";
+import { TotalsFooter } from "./totals-footer.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Plus } from "lucide-react";
+import { DndContext, KeyboardSensor, MouseSensor, TouchSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
+import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from "@dnd-kit/sortable";
+//#region src/inline-child-table/inline-child-table.tsx
+const headerCell = "px-2 text-[11px] font-medium uppercase tracking-wide text-muted-foreground";
+const instructions = "To pick up a line, press space or enter on its drag handle. Use the up and down arrow keys to move it, space or enter to drop it, and escape to cancel. The row menu also has Move up and Move down.";
+const announcementsFor = (lines) => {
+	const name = (id) => lines.find((line) => line.id === id)?.description ?? "line";
+	const place = (id) => lines.findIndex((line) => line.id === id) + 1;
+	return {
+		onDragStart: ({ active }) => `Picked up ${name(active.id)}, line ${place(active.id)} of ${lines.length}.`,
+		onDragOver: ({ active, over }) => over ? `${name(active.id)} is over line ${place(over.id)} of ${lines.length}.` : void 0,
+		onDragEnd: ({ active, over }) => over ? `${name(active.id)} was dropped at line ${place(over.id)} of ${lines.length}.` : `${name(active.id)} was dropped where it started.`,
+		onDragCancel: ({ active }) => `Moving ${name(active.id)} was cancelled. It is back at line ${place(active.id)}.`
+	};
+};
+const InlineChildTable = ({ lines, onChange, onReorder, vatRate = .21, readOnly, reorderable = !readOnly }) => {
+	const sensors = useSensors(useSensor(MouseSensor, { activationConstraint: { distance: 4 } }), useSensor(TouchSensor, { activationConstraint: {
+		delay: 250,
+		tolerance: 5
+	} }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+	const move = (from, to) => {
+		const line = lines[from];
+		if (!line || to < 0 || to >= lines.length || from === to) return;
+		(onReorder ?? ((next) => onChange(next)))(reorder(lines, from, to), {
+			id: line.id,
+			from,
+			to
+		});
+	};
+	const onDragEnd = ({ active, over }) => {
+		if (!over || active.id === over.id) return;
+		move(lines.findIndex((line) => line.id === active.id), lines.findIndex((line) => line.id === over.id));
+	};
+	const addLine = () => {
+		const product = productAt(lines.length * 3 + 1);
+		onChange([...lines, {
+			id: `new-${lines.length}-${product.id}`,
+			productId: product.id,
+			description: product.name,
+			quantity: 1,
+			unitPriceCents: product.priceCents
+		}]);
+	};
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+		className: "overflow-hidden rounded-lg border border-border bg-background",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: `${lineGrid} border-b border-border bg-surface px-2 py-2`,
+				children: [
+					/* @__PURE__ */ jsx("span", {}),
+					/* @__PURE__ */ jsx("span", {
+						className: headerCell,
+						children: "Item"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: `${headerCell} text-right`,
+						children: "Qty"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: `${headerCell} text-right`,
+						children: "Unit price"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: `${headerCell} text-right`,
+						children: "Line total"
+					}),
+					/* @__PURE__ */ jsx("span", {})
+				]
+			}),
+			/* @__PURE__ */ jsx(DndContext, {
+				sensors,
+				collisionDetection: closestCenter,
+				onDragEnd,
+				accessibility: {
+					announcements: announcementsFor(lines),
+					screenReaderInstructions: { draggable: instructions }
+				},
+				children: /* @__PURE__ */ jsx(SortableContext, {
+					items: lines.map((line) => line.id),
+					strategy: verticalListSortingStrategy,
+					children: lines.map((line, index) => /* @__PURE__ */ jsx(LineRow, {
+						line,
+						position: index,
+						count: lines.length,
+						reorderable,
+						editable: !readOnly,
+						onChange: (patch) => onChange(lines.map((item) => item.id === line.id ? {
+							...item,
+							...patch
+						} : item)),
+						onRemove: () => onChange(lines.filter((item) => item.id !== line.id)),
+						onMove: (to) => move(index, to)
+					}, line.id))
+				})
+			}),
+			!readOnly && /* @__PURE__ */ jsx("div", {
+				className: "border-t border-border bg-surface px-2 py-1.5",
+				children: /* @__PURE__ */ jsxs(Button, {
+					variant: "ghost",
+					size: "sm",
+					onClick: addLine,
+					children: [/* @__PURE__ */ jsx(Plus, { className: "size-3.5" }), "Add line"]
+				})
+			})
+		]
+	}), /* @__PURE__ */ jsx(TotalsFooter, {
+		lines,
+		vatRate
+	})] });
+};
+//#endregion
+export { InlineChildTable };

package/dist/inline-child-table/line-menu.js

@@ -0,0 +1,54 @@
+import { cn } from "../lib/cn.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MoreHorizontal } from "lucide-react";
+//#region src/inline-child-table/line-menu.tsx
+/** The "..." at the end of a line: the keyboard-and-screen-reader way to reorder, besides the drag handle. */
+const LineMenu = ({ items, label }) => {
+	const [open, setOpen] = useState(false);
+	const root = useRef(null);
+	useEffect(() => {
+		if (!open) return;
+		const close = (event) => {
+			if (event instanceof KeyboardEvent ? event.key === "Escape" : !root.current?.contains(event.target)) setOpen(false);
+		};
+		document.addEventListener("mousedown", close);
+		document.addEventListener("keydown", close);
+		return () => {
+			document.removeEventListener("mousedown", close);
+			document.removeEventListener("keydown", close);
+		};
+	}, [open]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: root,
+		className: "relative flex justify-center",
+		children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": label,
+			"aria-haspopup": "menu",
+			"aria-expanded": open,
+			onClick: () => setOpen(!open),
+			className: "inline-flex size-7 items-center justify-center rounded text-faint-foreground hover:bg-muted hover:text-foreground pointer-coarse:size-11",
+			children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4" })
+		}), open && /* @__PURE__ */ jsx("ul", {
+			role: "menu",
+			className: "absolute right-0 top-full z-30 mt-1 min-w-36 rounded-md border bg-background py-1 text-[13px] shadow-pop",
+			children: items.map((item) => /* @__PURE__ */ jsx("li", {
+				role: "none",
+				children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					role: "menuitem",
+					disabled: item.disabled,
+					className: cn("block min-h-9 w-full whitespace-nowrap px-3 py-1.5 text-left hover:bg-muted disabled:text-faint-foreground disabled:hover:bg-transparent", item.destructive && "text-danger-text"),
+					onClick: () => {
+						setOpen(false);
+						item.onSelect();
+					},
+					children: item.label
+				})
+			}, item.label))
+		})]
+	});
+};
+//#endregion
+export { LineMenu };

package/dist/inline-child-table/line-row.js

@@ -0,0 +1,91 @@
+import { cn } from "../lib/cn.js";
+import { lineTotalCents } from "../mocks/invoices.js";
+import { lineGrid } from "./columns.js";
+import { formatMoney } from "../format/money.js";
+import { LineMenu } from "./line-menu.js";
+import { NumberCell } from "./number-cell.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { GripVertical } from "lucide-react";
+import { useSortable } from "@dnd-kit/sortable";
+//#region src/inline-child-table/line-row.tsx
+const parseEuros = (text) => Math.round(Number(text.replace(",", ".").replace(/[^0-9.]/g, "")) * 100);
+const LineRow = ({ line, position, count, reorderable, editable, onChange, onRemove, onMove }) => {
+	const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = useSortable({
+		id: line.id,
+		disabled: !reorderable
+	});
+	const menu = [...reorderable ? [{
+		label: "Move up",
+		disabled: position === 0,
+		onSelect: () => onMove(position - 1)
+	}, {
+		label: "Move down",
+		disabled: position === count - 1,
+		onSelect: () => onMove(position + 1)
+	}] : [], ...editable ? [{
+		label: "Remove line",
+		destructive: true,
+		onSelect: onRemove
+	}] : []];
+	return /* @__PURE__ */ jsxs("div", {
+		ref: setNodeRef,
+		"data-line-id": line.id,
+		style: {
+			transform: transform ? `translate3d(0, ${transform.y}px, 0)` : void 0,
+			transition
+		},
+		className: cn("group relative border-b border-border bg-background px-2 py-1 last:border-b-0 hover:bg-surface", lineGrid, isDragging && "z-10 bg-surface opacity-80 shadow-pop"),
+		children: [
+			reorderable ? /* @__PURE__ */ jsx("button", {
+				ref: setActivatorNodeRef,
+				type: "button",
+				"aria-label": `Drag to reorder ${line.description}`,
+				...attributes,
+				...listeners,
+				style: { touchAction: "none" },
+				className: "flex size-7 cursor-grab items-center justify-center rounded text-faint-foreground opacity-60 hover:bg-muted hover:opacity-100 focus-visible:opacity-100 active:cursor-grabbing pointer-coarse:size-11",
+				children: /* @__PURE__ */ jsx(GripVertical, { className: "size-4" })
+			}) : /* @__PURE__ */ jsx("span", {}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "min-w-0",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "truncate text-[13px] text-foreground",
+					children: line.description
+				}), /* @__PURE__ */ jsx("p", {
+					className: "font-mono text-[11px] text-faint-foreground",
+					children: line.productId
+				})]
+			}),
+			editable ? /* @__PURE__ */ jsx(NumberCell, {
+				label: "Quantity",
+				value: line.quantity,
+				format: String,
+				parse: (text) => Math.round(Number(text)),
+				onCommit: (quantity) => onChange({ quantity })
+			}) : /* @__PURE__ */ jsx("span", {
+				className: "px-2 text-right text-[13px] tabular-nums",
+				children: line.quantity
+			}),
+			editable ? /* @__PURE__ */ jsx(NumberCell, {
+				label: "Unit price",
+				value: line.unitPriceCents,
+				format: (cents) => (cents / 100).toFixed(2),
+				parse: parseEuros,
+				onCommit: (unitPriceCents) => onChange({ unitPriceCents })
+			}) : /* @__PURE__ */ jsx("span", {
+				className: "px-2 text-right text-[13px] tabular-nums",
+				children: (line.unitPriceCents / 100).toFixed(2)
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "px-2 text-right text-[13px] font-medium tabular-nums text-foreground",
+				children: formatMoney(lineTotalCents(line))
+			}),
+			menu.length > 0 ? /* @__PURE__ */ jsx(LineMenu, {
+				label: `Actions for ${line.description}`,
+				items: menu
+			}) : /* @__PURE__ */ jsx("span", {})
+		]
+	});
+};
+//#endregion
+export { LineRow };

package/dist/inline-child-table/number-cell.js

@@ -0,0 +1,25 @@
+import { cn } from "../lib/cn.js";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/inline-child-table/number-cell.tsx
+const NumberCell = ({ value, onCommit, format, parse, label, width = "w-full" }) => {
+	const [draft, setDraft] = useState(null);
+	const commit = () => {
+		if (draft === null) return;
+		const parsed = parse(draft);
+		setDraft(null);
+		if (Number.isFinite(parsed) && parsed >= 0) onCommit(parsed);
+	};
+	return /* @__PURE__ */ jsx("input", {
+		"aria-label": label,
+		inputMode: "decimal",
+		value: draft ?? format(value),
+		onFocus: (event) => event.currentTarget.select(),
+		onChange: (event) => setDraft(event.target.value),
+		onBlur: commit,
+		onKeyDown: (event) => event.key === "Enter" && event.currentTarget.blur(),
+		className: cn("h-7 rounded-md border border-transparent bg-transparent px-2 text-right text-[13px] tabular-nums text-foreground outline-none hover:border-border-strong focus:border-primary focus:bg-background focus:ring-2 focus:ring-primary/20", width)
+	});
+};
+//#endregion
+export { NumberCell };

package/dist/inline-child-table/reorder.js

@@ -0,0 +1,10 @@
+//#region src/inline-child-table/reorder.ts
+const reorder = (items, from, to) => {
+	if (from === to || from < 0 || from >= items.length) return [...items];
+	const next = [...items];
+	const [moved] = next.splice(from, 1);
+	next.splice(Math.min(Math.max(to, 0), next.length), 0, moved);
+	return next;
+};
+//#endregion
+export { reorder };

package/dist/inline-child-table/totals-footer.js

@@ -0,0 +1,42 @@
+import { invoiceTotals } from "../mocks/invoices.js";
+import { formatMoney } from "../format/money.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/inline-child-table/totals-footer.tsx
+const TotalsFooter = ({ lines, vatRate }) => {
+	const totals = invoiceTotals(lines, vatRate);
+	return /* @__PURE__ */ jsxs("dl", {
+		className: "ml-auto grid w-64 grid-cols-[1fr_auto] gap-x-6 gap-y-1 px-2 pt-3 text-[13px] tabular-nums",
+		children: [
+			/* @__PURE__ */ jsx("dt", {
+				className: "text-muted-foreground",
+				children: "Subtotal"
+			}),
+			/* @__PURE__ */ jsx("dd", {
+				className: "text-right text-foreground",
+				children: formatMoney(totals.subtotalCents)
+			}),
+			/* @__PURE__ */ jsxs("dt", {
+				className: "text-muted-foreground",
+				children: [
+					"VAT ",
+					Math.round(vatRate * 100),
+					"%"
+				]
+			}),
+			/* @__PURE__ */ jsx("dd", {
+				className: "text-right text-foreground",
+				children: formatMoney(totals.vatCents)
+			}),
+			/* @__PURE__ */ jsx("dt", {
+				className: "mt-1 border-t border-border pt-2 font-semibold text-foreground",
+				children: "Total"
+			}),
+			/* @__PURE__ */ jsx("dd", {
+				className: "mt-1 border-t border-border pt-2 text-right text-[15px] font-semibold text-foreground",
+				children: formatMoney(totals.totalCents)
+			})
+		]
+	});
+};
+//#endregion
+export { TotalsFooter };

package/dist/lib/cn.js

@@ -0,0 +1,4 @@
+//#region src/lib/cn.ts
+const cn = (...parts) => parts.filter(Boolean).join(" ");
+//#endregion
+export { cn };

package/dist/lib/guarded.js

@@ -0,0 +1,12 @@
+//#region src/lib/guarded.ts
+/** Runs a storage access; storage can be unavailable (private windows, blocked site data), which is a DOMException. Anything else is a bug. */
+const guarded = (action, fallback) => {
+	try {
+		return action();
+	} catch (error) {
+		if (!(error instanceof DOMException)) throw error;
+		return fallback;
+	}
+};
+//#endregion
+export { guarded };

package/dist/lib/use-debounced.js

@@ -0,0 +1,13 @@
+import { useEffect, useState } from "react";
+//#region src/lib/use-debounced.ts
+/** `value`, once it has stayed the same for `ms`. */
+const useDebounced = (value, ms) => {
+	const [settled, setSettled] = useState(value);
+	useEffect(() => {
+		const timer = setTimeout(() => setSettled(value), ms);
+		return () => clearTimeout(timer);
+	}, [value, ms]);
+	return settled;
+};
+//#endregion
+export { useDebounced };

package/dist/lib/use-focus-trap.js

@@ -0,0 +1,46 @@
+import { useEffect, useRef } from "react";
+//#region src/lib/use-focus-trap.ts
+const focusable = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
+/**
+* While `active`: moves focus into `container`, keeps Tab inside it, locks body scrolling,
+* calls `onEscape` on Escape, and returns focus to the previously focused element afterwards.
+*/
+const useFocusTrap = (container, active, onEscape) => {
+	const escape = useRef(onEscape);
+	escape.current = onEscape;
+	useEffect(() => {
+		if (!active || !container.current) return;
+		const root = container.current;
+		const previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+		const overflow = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+		const items = () => [...root.querySelectorAll(focusable)];
+		(items()[0] ?? root).focus();
+		const onKey = (event) => {
+			if (event.key === "Escape") return escape.current();
+			if (event.key !== "Tab") return;
+			const list = items();
+			if (list.length === 0) return event.preventDefault();
+			const first = list[0];
+			const last = list[list.length - 1];
+			if (event.shiftKey && document.activeElement === first) {
+				event.preventDefault();
+				last.focus();
+			} else if (!event.shiftKey && document.activeElement === last) {
+				event.preventDefault();
+				first.focus();
+			} else if (!root.contains(document.activeElement)) {
+				event.preventDefault();
+				first.focus();
+			}
+		};
+		document.addEventListener("keydown", onKey);
+		return () => {
+			document.removeEventListener("keydown", onKey);
+			document.body.style.overflow = overflow;
+			previous?.focus();
+		};
+	}, [active, container]);
+};
+//#endregion
+export { useFocusTrap };

package/dist/lib/use-media-query.js

@@ -0,0 +1,12 @@
+import { useSyncExternalStore } from "react";
+//#region src/lib/use-media-query.ts
+/** Follows a CSS media query, for layout decisions that cannot be made with classes alone. */
+const useMediaQuery = (query) => useSyncExternalStore((onChange) => {
+	const list = window.matchMedia(query);
+	list.addEventListener("change", onChange);
+	return () => list.removeEventListener("change", onChange);
+}, () => window.matchMedia(query).matches, () => false);
+/** The `md` breakpoint: where the sidebar stops being a drawer and tables stop squeezing. */
+const useIsDesktop = () => useMediaQuery("(min-width: 768px)");
+//#endregion
+export { useIsDesktop, useMediaQuery };

package/dist/live/columns-from-model.js

@@ -0,0 +1,93 @@
+import { humanize } from "./naming.js";
+import { enumLabel } from "@protobase/schema";
+//#region src/live/columns-from-model.ts
+const tones = {
+	draft: "neutral",
+	confirmed: "blue",
+	picking: "amber",
+	shipped: "violet",
+	delivered: "green",
+	cancelled: "red",
+	sent: "blue",
+	paid: "green",
+	overdue: "red",
+	lead: "blue",
+	active: "green",
+	dormant: "neutral",
+	receipt: "green",
+	issue: "blue",
+	transfer: "violet",
+	adjustment: "amber"
+};
+const toneFor = (value) => tones[value] ?? "neutral";
+const widths = {
+	text: 200,
+	id: 140,
+	money: 120,
+	date: 110,
+	datetime: 170,
+	status: 150,
+	relation: 200,
+	boolean: 64,
+	number: 100,
+	signed: 110,
+	percent: 110,
+	user: 130
+};
+/** Room for a header at 12px plus cell padding, the sort arrow and the column menu button. */
+const headerWidth = (header, sortable) => Math.ceil(header.length * 7.2) + 24 + (sortable ? 16 : 0) + 28;
+/** A status badge: dot, padding and the longest label. */
+const badgeWidth = (labels) => Math.ceil(Math.max(0, ...labels.map((label) => label.length)) * 7.2) + 56;
+const fixedKinds = /* @__PURE__ */ new Set([
+	"datetime",
+	"date",
+	"boolean",
+	"percent"
+]);
+const idLike = /^(number|sku|reference|code)$/;
+const kindOf = (field, view, index) => {
+	switch (field.type) {
+		case "relation": return "relation";
+		case "enum": return "status";
+		case "boolean": return "boolean";
+		case "timestamp": return "datetime";
+		case "date": return "date";
+		case "decimal": return view?.format === "percent" ? "percent" : view?.prefix === "€" ? "money" : "number";
+		case "integer":
+		case "bigint": return /quantity|delta/.test(field.name) ? "signed" : "number";
+		default: return idLike.test(field.name) || index === 0 && field.name === "id" ? "id" : "text";
+	}
+};
+const currencyCents = (value) => Math.round(Number.parseFloat(String(value)) * 100);
+/** Grid columns for a view's list: kinds follow the field types and the view's format hints. */
+const columnsFromModel = (resource, view, highlight = []) => {
+	return (view?.list?.columns ?? Object.keys(resource.fields).slice(0, 6)).flatMap((name, index) => {
+		const field = resource.fields[name];
+		if (!field) return [];
+		const viewField = view?.fields[name];
+		const kind = kindOf(field, viewField, index);
+		const labels = Object.fromEntries((field.enumValues ?? []).map((value) => [value, enumLabel(value, viewField?.valueLabels)]));
+		return [{
+			id: name,
+			header: viewField?.label ?? humanize(name),
+			kind,
+			width: name === "name" ? 260 : widths[kind],
+			sortable: field.sortable,
+			minWidth: Math.max(kind === "id" ? 150 : 0, headerWidth(viewField?.label ?? humanize(name), field.sortable), kind === "status" ? badgeWidth(Object.values(labels)) : 0),
+			...fixedKinds.has(kind) && { fixed: true },
+			...highlight.includes(name) && { highlight: true },
+			...field.type === "enum" && {
+				tones: Object.fromEntries((field.enumValues ?? []).map((value) => [value, toneFor(value)])),
+				labels
+			},
+			...kind === "money" && {
+				currency: "EUR",
+				value: (row) => row[name] == null ? null : currencyCents(row[name])
+			},
+			...(kind === "datetime" || kind === "date") && { value: (row) => row[name] == null ? null : Date.parse(String(row[name])) },
+			...(kind === "percent" || kind === "number" && field.type === "decimal") && { value: (row) => row[name] == null ? null : Number(row[name]) }
+		}];
+	});
+};
+//#endregion
+export { columnsFromModel, headerWidth, toneFor };

package/dist/live/display-value.js

@@ -0,0 +1,24 @@
+import { formatDate, formatDateTime } from "../format/date.js";
+import { enumLabel } from "@protobase/schema";
+//#region src/live/display-value.ts
+/** A read-only rendering of a stored value, following the view's prefix, decimals, format and value label hints. */
+const displayValue = (field, value, hints = {}) => {
+	if (value === null || value === void 0 || value === "") return "—";
+	switch (field.type) {
+		case "boolean": return value ? "Yes" : "No";
+		case "enum": return enumLabel(String(value), hints.valueLabels);
+		case "timestamp": return formatDateTime(Date.parse(String(value)));
+		case "date": return formatDate(Date.parse(String(value)));
+		case "decimal": {
+			const text = hints.decimals === void 0 ? String(value) : Number(value).toFixed(hints.decimals);
+			if (hints.format === "percent") return `${Number(value)}%`;
+			return `${hints.prefix ?? ""}${Number(text).toLocaleString("en-IE", {
+				minimumFractionDigits: hints.decimals ?? 0,
+				maximumFractionDigits: hints.decimals ?? 20
+			})}`;
+		}
+		default: return typeof value === "object" ? JSON.stringify(value) : String(value);
+	}
+};
+//#endregion
+export { displayValue };