@protobase/ui 0.21.2 → 0.21.4

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

@@ -3,13 +3,13 @@ import { keys } from "../../data/query-keys.js";
 import { useClient } from "../../data/api-provider.js";
 import { useAdminMeta } from "../meta-gate.js";
 import { fileShown, shownImage } from "../../live/file-values.js";
+import { isMarkdown } from "../../markdown/markdown-hint.js";
 import { displayValue } from "../../live/display-value.js";
 import { AppLink } from "../use-app-address.js";
 import { FileImage } from "../../live/file-image.js";
 import { useShownWidget } from "../field-types/shown-widget.js";
 import { WidgetPart } from "../field-types/widget-part.js";
 import { Markdown } from "../../markdown/markdown.js";
-import { isMarkdown } from "../../markdown/markdown-hint.js";
 import { fetchLabels } from "../../live/relation-labels.js";
 import { ValueBadge } from "../value-badge.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/app/record-page.js

@@ -22,16 +22,16 @@ import { fromDraft, isRequiredOnEdit } from "../live/field-values.js";
 import { fieldHelp, helpShown, recordShown, whenShown } from "./record-mode/record-mode.js";
 import { isChosen, keyValue } from "./create/create-values.js";
 import { ErrorBanner } from "./error-banner.js";
+import { isMarkdown } from "../markdown/markdown-hint.js";
+import { toneFor } from "../live/columns-from-model.js";
 import { displayValue } from "../live/display-value.js";
 import { filledFields } from "./filled-fields.js";
 import { AppLink, useAppAddress } from "./use-app-address.js";
 import { shownWidget } from "./field-types/shown-widget.js";
 import { WidgetPart } from "./field-types/widget-part.js";
 import { Markdown } from "../markdown/markdown.js";
-import { isMarkdown } from "../markdown/markdown-hint.js";
 import { FieldEditor } from "./field-editor.js";
 import { can, fieldAccess } from "./permissions.js";
-import { toneFor } from "../live/columns-from-model.js";
 import { ValueBadge } from "./value-badge.js";
 import { FieldValue } from "./pages/field-value.js";
 import { fieldMessage } from "./field-errors.js";

package/dist/app/related-dots/related-dots-columns.js

@@ -1,5 +1,6 @@
 import { humanize } from "../../live/naming.js";
-import { headerWidth, listColumnNames } from "../../live/columns-from-model.js";
+import { headerWidth } from "../../data-grid/content-widths.js";
+import { listColumnNames } from "../../live/columns-from-model.js";
 import { RelatedDots } from "./related-dots.js";
 import { RecordCard } from "../displays/record-card.js";
 import { jsx } from "react/jsx-runtime";

package/dist/app/related-dots/related-dots.js

@@ -2,10 +2,10 @@ import { cn } from "../../lib/cn.js";
 import { toneDots } from "../../primitives/badge.js";
 import { recordTitleField } from "../../live/model-helpers.js";
 import { humanize } from "../../live/naming.js";
+import { toneFor } from "../../live/columns-from-model.js";
 import { displayValue } from "../../live/display-value.js";
 import { displayRow } from "../displays/list-displays.js";
 import { AppLink } from "../use-app-address.js";
-import { toneFor } from "../../live/columns-from-model.js";
 import { valueColor } from "../../live/value-color.js";
 import { placeCard } from "./card-place.js";
 import { dotCard } from "./dot-card.js";

package/dist/data/meta-data.d.ts

@@ -4,6 +4,8 @@ import { PageModel } from "@protobase/layout";
 //#region src/data/meta-data.d.ts
 export type MetaData = {
   etag: string;
+  /** The app's name, which ends the tab titles. */
+  appName: string;
   resources: Record<string, ResourceModel>;
   views: Record<string, ViewModel>;
   /** Composed pages by name. */

package/dist/data/use-meta.js

@@ -26,6 +26,7 @@ const useMeta = () => {
 			}
 			return {
 				etag: result.etag,
+				appName: result.meta.appName,
 				resources: Object.fromEntries(result.meta.resources.map((model) => [model.name, model])),
 				views: Object.fromEntries(result.meta.views.map((model) => [model.resource, model])),
 				pages: Object.fromEntries((result.meta.pages ?? []).map((model) => [model.name, model])),

package/dist/data-grid/cell-text.js

@@ -0,0 +1,30 @@
+import { formatMoney } from "../format/money.js";
+import { formatInt, formatPercent, formatSigned } from "../format/number.js";
+import { formatDate, formatDateTime } from "../format/date.js";
+import { userById } from "../mocks/users.js";
+import { fileShown } from "../live/file-values.js";
+import { enumLabel } from "@protobase/schema";
+//#region src/data-grid/cell-text.ts
+/** A relation cell's text: the related record's name when the row carries it, else its key. */
+const relationLabel = (value) => typeof value === "object" && value !== null && "name" in value ? String(value.name) : String(value);
+/** The text a cell of `spec` shows for `value`; `undefined` when it shows only an icon, such as a ticked boolean. */
+const cellText = (spec, value) => {
+	if (value === null || value === void 0) return "—";
+	switch (spec.kind) {
+		case "text":
+		case "id": return String(value);
+		case "money": return `${formatMoney(Number(value), spec.currency, spec.decimals)}${spec.suffix ?? ""}`;
+		case "date": return formatDate(Number(value));
+		case "datetime": return formatDateTime(Number(value));
+		case "number": return `${formatInt(Number(value))}${spec.suffix ?? ""}`;
+		case "signed": return `${formatSigned(Number(value))}${spec.suffix ?? ""}`;
+		case "percent": return Number(value) === 0 ? "—" : formatPercent(Number(value));
+		case "status": return enumLabel(String(value), spec.labels);
+		case "relation": return relationLabel(value);
+		case "boolean": return value ? void 0 : "No";
+		case "file": return fileShown(value)?.name ?? "—";
+		case "user": return userById(String(value)).name;
+	}
+};
+//#endregion
+export { cellText, relationLabel };

package/dist/data-grid/cells.js

@@ -1,66 +1,61 @@
 import { cn } from "../lib/cn.js";
 import { Avatar } from "../primitives/avatar.js";
 import { Badge } from "../primitives/badge.js";
-import { formatMoney } from "../format/money.js";
-import { formatInt, formatPercent, formatSigned } from "../format/number.js";
-import { formatDate, formatDateTime } from "../format/date.js";
 import { userById } from "../mocks/users.js";
 import { fileShown, shownImage } from "../live/file-values.js";
+import { cellText } from "./cell-text.js";
 import { FileImage } from "../live/file-image.js";
 import { valueColor } from "../live/value-color.js";
+import { TruncatedText } from "./truncated-text.js";
 import { Check, Paperclip } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { enumLabel } from "@protobase/schema";
 //#region src/data-grid/cells.tsx
 const muted = (text) => /* @__PURE__ */ jsx("span", {
 	className: "text-faint-foreground",
 	children: text
 });
-const relationLabel = (value) => typeof value === "object" && value !== null && "name" in value ? String(value.name) : String(value);
 const renderCell = (spec, value) => {
 	if (value === null || value === void 0) return muted("—");
+	const text = cellText(spec, value) ?? "";
 	switch (spec.kind) {
-		case "text": return /* @__PURE__ */ jsx("span", {
-			className: "truncate",
-			children: String(value)
+		case "text": return /* @__PURE__ */ jsx(TruncatedText, { text });
+		case "id": return /* @__PURE__ */ jsx(TruncatedText, {
+			text,
+			className: "font-mono text-xs text-muted-foreground"
 		});
-		case "id": return /* @__PURE__ */ jsx("span", {
-			className: "truncate font-mono text-xs text-muted-foreground",
-			children: String(value)
-		});
-		case "money": return /* @__PURE__ */ jsxs("span", {
+		case "money": return /* @__PURE__ */ jsx("span", {
 			className: "tabular-nums",
-			children: [formatMoney(Number(value), spec.currency, spec.decimals), spec.suffix]
+			children: text
 		});
 		case "date": return /* @__PURE__ */ jsx("span", {
 			className: "tabular-nums text-muted-foreground",
-			children: formatDate(Number(value))
+			children: text
 		});
 		case "datetime": return /* @__PURE__ */ jsx("span", {
 			className: "tabular-nums text-muted-foreground",
-			children: formatDateTime(Number(value))
+			children: text
 		});
-		case "number": return /* @__PURE__ */ jsxs("span", {
+		case "number": return /* @__PURE__ */ jsx("span", {
 			className: "tabular-nums",
-			children: [formatInt(Number(value)), spec.suffix]
+			children: text
 		});
-		case "signed": return /* @__PURE__ */ jsxs("span", {
+		case "signed": return /* @__PURE__ */ jsx("span", {
 			className: cn("tabular-nums", Number(value) < 0 ? "text-danger-text" : "text-success-text"),
-			children: [formatSigned(Number(value)), spec.suffix]
+			children: text
 		});
 		case "percent": return Number(value) === 0 ? muted("—") : /* @__PURE__ */ jsx("span", {
 			className: "tabular-nums",
-			children: formatPercent(Number(value))
+			children: text
 		});
 		case "status": return /* @__PURE__ */ jsx(Badge, {
 			tone: spec.tones?.[String(value)] ?? "neutral",
 			color: valueColor(spec.colors, value),
 			shape: spec.shape,
-			children: enumLabel(String(value), spec.labels)
+			children: text
 		});
-		case "relation": return /* @__PURE__ */ jsx("span", {
-			className: "truncate font-medium text-primary-text hover:underline",
-			children: relationLabel(value)
+		case "relation": return /* @__PURE__ */ jsx(TruncatedText, {
+			text,
+			className: "font-medium text-primary-text hover:underline"
 		});
 		case "boolean": return value ? /* @__PURE__ */ jsx("span", {
 			className: "inline-flex size-4 items-center justify-center rounded-full bg-success-soft text-success-text",
@@ -72,9 +67,9 @@ const renderCell = (spec, value) => {
 		case "file": {
 			const file = fileShown(value);
 			if (!file) return muted("—");
-			if ("missing" in file) return /* @__PURE__ */ jsx("span", {
-				className: "truncate text-danger-text",
-				children: file.name
+			if ("missing" in file) return /* @__PURE__ */ jsx(TruncatedText, {
+				text: file.name,
+				className: "text-danger-text"
 			});
 			const image = shownImage(value, {
 				width: 20,
@@ -85,10 +80,7 @@ const renderCell = (spec, value) => {
 				children: [image ? /* @__PURE__ */ jsx(FileImage, {
 					image,
 					className: "size-5 shrink-0 rounded-sm object-cover"
-				}) : /* @__PURE__ */ jsx(Paperclip, { className: "size-3.5 shrink-0 text-muted-foreground" }), /* @__PURE__ */ jsx("span", {
-					className: "truncate",
-					children: file.name
-				})]
+				}) : /* @__PURE__ */ jsx(Paperclip, { className: "size-3.5 shrink-0 text-muted-foreground" }), /* @__PURE__ */ jsx(TruncatedText, { text: file.name })]
 			});
 		}
 		case "user": {
@@ -100,9 +92,9 @@ const renderCell = (spec, value) => {
 					hue: user.hue,
 					size: "xs",
 					className: "ring-0"
-				}), /* @__PURE__ */ jsx("span", {
-					className: "truncate text-muted-foreground",
-					children: user.name
+				}), /* @__PURE__ */ jsx(TruncatedText, {
+					text: user.name,
+					className: "text-muted-foreground"
 				})]
 			});
 		}

package/dist/data-grid/content-widths.js

@@ -0,0 +1,81 @@
+import { cellText } from "./cell-text.js";
+//#region src/data-grid/content-widths.ts
+/** 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;
+/** Pixels per character: body text, the small monospace of identifiers, and tabular numbers. */
+const charWidth = {
+	body: 7.5,
+	mono: 7.2,
+	numeric: 8
+};
+const cellPadding = 24;
+const iconRoom = 24;
+const checkWidth = 16;
+/** Values cut short would read wrong, so their columns take their measured width whole. */
+const wholeKinds = /* @__PURE__ */ new Set([
+	"status",
+	"money",
+	"number",
+	"signed",
+	"percent",
+	"date",
+	"datetime",
+	"boolean"
+]);
+const numericKinds = /* @__PURE__ */ new Set([
+	"money",
+	"number",
+	"signed",
+	"percent",
+	"date",
+	"datetime"
+]);
+const minWeight = 80;
+const maxWeight = 400;
+const maxIdWidth = 240;
+const perChar = (kind) => kind === "id" ? charWidth.mono : numericKinds.has(kind) ? charWidth.numeric : charWidth.body;
+const valueOf = (spec, row) => spec.value ? spec.value(row) : row[spec.id];
+/** The width the widest of `rows`' values of `spec` takes, cell padding included. */
+const contentWidth = (spec, rows) => {
+	const texts = rows.map((row) => cellText(spec, valueOf(spec, row)));
+	if (spec.kind === "status") return badgeWidth(texts.map((text) => text ?? ""));
+	const icon = spec.kind === "user" || spec.kind === "file" ? iconRoom : 0;
+	return Math.max(0, ...texts.map((text) => text === void 0 ? checkWidth : Math.ceil(text.length * perChar(spec.kind)))) + icon + cellPadding;
+};
+const clamp = (value, low, high) => Math.min(high, Math.max(low, value));
+const fitted = (spec, content) => {
+	if (wholeKinds.has(spec.kind) && !spec.title) return {
+		...spec,
+		fixed: true,
+		width: Math.max(spec.minWidth ?? 0, content)
+	};
+	const weighted = {
+		...spec,
+		fixed: false,
+		width: clamp(content, minWeight, maxWeight)
+	};
+	if (spec.kind !== "id") return weighted;
+	return {
+		...weighted,
+		minWidth: Math.max(headerWidth(spec.header, spec.sortable ?? false), Math.min(content, maxIdWidth))
+	};
+};
+/**
+* Columns sized by the values in `rows`: values that must stay whole get their widest value's width, text a share of the
+* leftover space as large as its widest value, and the title column the largest share. Columns drawn by their own
+* `render` keep their width, as their content cannot be estimated.
+*/
+const fitColumns = (specs, rows) => {
+	if (rows.length === 0) return specs;
+	const sized = specs.map((spec) => spec.render ? spec : fitted(spec, contentWidth(spec, rows)));
+	const shares = sized.filter((spec, index) => !spec.fixed && !spec.title && !specs[index].render).map((spec) => spec.width);
+	const largest = Math.max(0, ...shares);
+	return sized.map((spec, index) => spec.title && !specs[index].render ? {
+		...spec,
+		width: Math.max(spec.width, largest)
+	} : spec);
+};
+//#endregion
+export { badgeWidth, contentWidth, fitColumns, headerWidth };

package/dist/data-grid/data-grid.js

@@ -1,11 +1,14 @@
 import { cn } from "../lib/cn.js";
 import { useIsDesktop } from "../lib/use-media-query.js";
+import { RouteLink } from "../primitives/route-link.js";
 import { buildColumns, features } from "./columns.js";
 import { GridFooter } from "./grid-footer.js";
 import { RowMenu, availableActions } from "./row-menu.js";
 import { desktopMinScale, gridMinWidth, gutterWidthFor } from "./grid-template.js";
 import { useHorizontalScroll } from "./use-horizontal-scroll.js";
 import { usePinnedColumns } from "./use-pinned-columns.js";
+import { defaultPins } from "./default-pins.js";
+import { useFittedColumns } from "./use-fitted-columns.js";
 import { GridHeader } from "./grid-header.js";
 import { DataRow, SkeletonRow } from "./grid-row.js";
 import { usePagedRows } from "./use-paged-rows.js";
@@ -17,10 +20,13 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useTable } from "@tanstack/react-table";
 //#region src/data-grid/data-grid.tsx
 const headerHeight = 32;
-const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0, onScrollIndex, latencyMs = 150, sort: controlledSort, onSortChange, onOpenRow, rowActions, cellEditor, rowPatches, bulkActions, pinKey, defaultPinned, rowNumbers = true, compact = false, selectable: selecting = true, reorder, fit = false, scroll = "own", className }) => {
+const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0, onScrollIndex, latencyMs = 150, sort: controlledSort, onSortChange, onOpenRow, rowLink, rowActions, cellEditor, rowPatches, bulkActions, pinKey, defaultPinned, rowNumbers = true, compact = false, selectable: selecting = true, reorder, fit = false, scroll = "own", className }) => {
 	const selectable = selecting && !reorder;
 	const rowHeight = compact ? 28 : 36;
-	const [pinned, setPinned] = usePinnedColumns(pinKey, defaultPinned);
+	const narrow = !useIsDesktop();
+	const pinsByDefault = (defaultPinned ?? (narrow ? [] : defaultPins(given))).join(" ");
+	const initialPins = useMemo(() => pinsByDefault ? pinsByDefault.split(" ") : [], [pinsByDefault]);
+	const [pinned, setPinned] = usePinnedColumns(pinKey, initialPins);
 	const columns = useMemo(() => {
 		return [...pinned.flatMap((id) => given.find((spec) => spec.id === id) ?? []), ...given.filter((spec) => !pinned.includes(spec.id))];
 	}, [given, pinned]);
@@ -60,7 +66,6 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 		initialIndex: startIndex,
 		inset: headerHeight
 	});
-	const narrow = !useIsDesktop();
 	const gutter = narrow || !rowNumbers ? 40 : gutterWidthFor(total);
 	const topIndex = Math.floor(Math.max(0, top) / rowHeight);
 	useEffect(() => onScrollIndex?.(topIndex), [topIndex, onScrollIndex]);
@@ -89,6 +94,7 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 		firstIndex,
 		lastIndex
 	]);
+	const sized = useFittedColumns(columns, data);
 	const table = useTable({
 		features,
 		columns: tableColumns,
@@ -145,7 +151,8 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 		onOpenRow,
 		container: gridRef
 	});
-	const minWidth = gridMinWidth(columns, gutter, trailing, minScale);
+	const linkColumn = (columns.find((spec) => spec.title) ?? columns[0])?.id;
+	const minWidth = gridMinWidth(sized, gutter, trailing, minScale);
 	const own = scroll === "own";
 	const header = /* @__PURE__ */ jsx("div", {
 		ref: headerRef,
@@ -154,7 +161,7 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 			style: { minWidth },
 			children: /* @__PURE__ */ jsx(GridHeader, {
 				cells: headerCells,
-				specs: columns,
+				specs: sized,
 				gutter,
 				trailing,
 				minScale,
@@ -170,7 +177,7 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 	});
 	const rowsInView = loaded.map(({ index, offset, row }) => {
 		const frame = {
-			specs: columns,
+			specs: sized,
 			gutter,
 			index,
 			offset,
@@ -196,9 +203,15 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 			}) : void 0,
 			cells: tableRow.getAllCells().map((cell) => {
 				const content = /* @__PURE__ */ jsx(table.FlexRender, { cell });
+				const editable = Boolean(cellEditor?.editable(row, cell.column.id));
+				const linked = rowLink && cell.column.id === linkColumn && !editable ? /* @__PURE__ */ jsx(RouteLink, {
+					to: rowLink(row),
+					className: "flex min-w-0 items-center hover:underline",
+					children: content
+				}) : content;
 				return {
 					spec: columns.find((spec) => spec.id === cell.column.id),
-					...cellEditing ? cellEditing.cell(index, row, cell.column.id, content) : { content }
+					...cellEditing ? cellEditing.cell(index, row, cell.column.id, linked) : { content: linked }
 				};
 			})
 		};

package/dist/data-grid/default-pins.js

@@ -0,0 +1,13 @@
+//#region src/data-grid/default-pins.ts
+/**
+* The columns pinned until the user chooses: the leading columns through the title column, when it is first or second.
+* Pinned columns move to the front, so a title further right stays unpinned rather than reorder the list; pins only
+* take effect once the grid is too wide and scrolls sideways.
+*/
+const defaultPins = (specs) => {
+	const index = specs.findIndex((spec) => spec.title);
+	if (index < 0 || index > 1) return [];
+	return specs.slice(0, index + 1).map((spec) => spec.id);
+};
+//#endregion
+export { defaultPins };

package/dist/data-grid/grid-row.js

@@ -40,10 +40,14 @@ const dragStyle = (frame, dragY, transition) => ({
 	transform: dragY === 0 ? void 0 : `translateY(${dragY}px)`,
 	transition
 });
+const openUnlessLink = (onOpen) => (event) => {
+	if (event.target.closest("a")) return;
+	onOpen();
+};
 const DataRow = ({ cells, selected, onToggle, onOpen, menu, handle, rowRef, dragY, transition, dragging, ...frame }) => /* @__PURE__ */ jsxs("div", {
 	ref: rowRef,
 	role: "row",
-	onClick: onOpen,
+	onClick: onOpen && openUnlessLink(onOpen),
 	className: cn("absolute inset-x-0 top-0 grid items-center border-b", selected ? "bg-primary-soft" : "bg-background hover:bg-surface", onOpen && "cursor-pointer", dragging && "z-30 bg-surface shadow-pop"),
 	style: dragY === void 0 ? frameStyle(frame) : dragStyle(frame, dragY, transition),
 	children: [

package/dist/data-grid/pinned-storage.js

@@ -8,6 +8,7 @@ const readPinned = (storage, key) => guarded(() => {
 	const parsed = JSON.parse(raw);
 	return Array.isArray(parsed) && parsed.every((entry) => typeof entry === "string") ? parsed : void 0;
 }, void 0);
-const writePinned = (storage, key, pinned) => guarded(() => pinned.length === 0 ? storage.removeItem(key) : storage.setItem(key, JSON.stringify(pinned)), void 0);
+/** Keeps an empty list too, so a column pinned by default and then unpinned stays unpinned. */
+const writePinned = (storage, key, pinned) => guarded(() => storage.setItem(key, JSON.stringify(pinned)), void 0);
 //#endregion
 export { pinnedStorageKey, readPinned, writePinned };

package/dist/data-grid/truncated-text.js

@@ -0,0 +1,16 @@
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/data-grid/truncated-text.tsx
+const offerWhole = (text) => (event) => {
+	const span = event.currentTarget;
+	if (span.scrollWidth > Math.ceil(span.getBoundingClientRect().width)) span.title = text;
+	else span.removeAttribute("title");
+};
+/** Text cut to one line with an ellipsis, that shows whole as a tooltip when hovered while cut. */
+const TruncatedText = ({ text, className }) => /* @__PURE__ */ jsx("span", {
+	className: cn("truncate", className),
+	onMouseEnter: offerWhole(text),
+	children: text
+});
+//#endregion
+export { TruncatedText };

package/dist/data-grid/use-fitted-columns.js

@@ -0,0 +1,28 @@
+import { fitColumns } from "./content-widths.js";
+import { useMemo, useState } from "react";
+//#region src/data-grid/use-fitted-columns.ts
+const sizesOf = (specs) => Object.fromEntries(specs.map(({ id, width, minWidth, fixed }) => [id, {
+	width,
+	minWidth,
+	fixed
+}]));
+/**
+* `columns` sized by the first rows shown, fitted once per set of columns: later pages, filters and sorts keep those
+* widths, so columns never jump while scrolling, and a longer value later on is cut, with the whole of it on hover.
+*/
+const useFittedColumns = (columns, rows) => {
+	const key = columns.map((spec) => spec.id).sort().join(" ");
+	const [fitted, setFitted] = useState();
+	const current = fitted?.key === key ? fitted : void 0;
+	if (!current && rows.length > 0) setFitted({
+		key,
+		sizes: sizesOf(fitColumns(columns, rows))
+	});
+	const sizes = current?.sizes;
+	return useMemo(() => sizes ? columns.map((spec) => ({
+		...spec,
+		...sizes[spec.id]
+	})) : columns, [columns, sizes]);
+};
+//#endregion
+export { useFittedColumns };

package/dist/data-grid/use-pinned-columns.js

@@ -3,14 +3,15 @@ import { useCallback, useState } from "react";
 //#region src/data-grid/use-pinned-columns.ts
 /**
 * The ids of the columns pinned to the left, in pin order. With a `storageKey` the choice is kept in local storage
-* (per user and resource); `initial` applies until the user has chosen.
+* (per user and resource); `initial` applies until the user has chosen, as it is on each render.
 */
 const usePinnedColumns = (storageKey, initial = []) => {
-	const [pinned, setPinned] = useState(() => (storageKey ? readPinned(localStorage, storageKey) : void 0) ?? initial);
-	return [pinned, useCallback((next) => {
-		setPinned(next);
+	const [chosen, setChosen] = useState(() => storageKey ? readPinned(localStorage, storageKey) : void 0);
+	const update = useCallback((next) => {
+		setChosen(next);
 		if (storageKey) writePinned(localStorage, storageKey, next);
-	}, [storageKey])];
+	}, [storageKey]);
+	return [chosen ?? initial, update];
 };
 //#endregion
 export { usePinnedColumns };

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

@@ -1,6 +1,8 @@
+import { recordTitleField } from "./model-helpers.js";
 import { humanize } from "./naming.js";
-import { isMarkdown } from "../markdown/markdown-hint.js";
+import { badgeWidth, headerWidth } from "../data-grid/content-widths.js";
 import { markdownExcerpt } from "../markdown/markdown-excerpt.js";
+import { isMarkdown } from "../markdown/markdown-hint.js";
 import { enumLabel } from "@protobase/schema";
 //#region src/live/columns-from-model.ts
 const tones = {
@@ -37,10 +39,6 @@ const widths = {
 	user: 130,
 	file: 180
 };
-/** 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",
@@ -67,6 +65,7 @@ const currencyCents = (value) => Math.round(Number.parseFloat(String(value)) * 1
 const listColumnNames = (resource, view) => view?.list?.columns ?? Object.keys(resource.fields).slice(0, 6);
 /** Grid columns for `names`, by default the view's list: kinds follow the field types and the view's format hints. */
 const columnsFromModel = (resource, view, highlight = [], names = listColumnNames(resource, view)) => {
+	const title = recordTitleField(resource, view);
 	return names.flatMap((name, index) => {
 		const field = resource.fields[name];
 		if (!field) return [];
@@ -82,6 +81,7 @@ const columnsFromModel = (resource, view, highlight = [], names = listColumnName
 			sortable: field.sortable,
 			minWidth: Math.max(kind === "id" ? 150 : 0, headerWidth(viewField?.label ?? humanize(name), field.sortable), kind === "status" ? badgeWidth(Object.values(labels)) : 0, suffixWidth > 0 ? widths[kind] + suffixWidth : 0),
 			...fixedKinds.has(kind) && { fixed: true },
+			...name === title && { title: true },
 			...highlight.includes(name) && { highlight: true },
 			...field.type === "enum" && {
 				tones: Object.fromEntries((field.enumValues ?? []).map((value) => [value, toneFor(value)])),
@@ -102,4 +102,4 @@ const columnsFromModel = (resource, view, highlight = [], names = listColumnName
 	});
 };
 //#endregion
-export { columnsFromModel, headerWidth, listColumnNames, toneFor };
+export { columnsFromModel, listColumnNames, toneFor };

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.21.2";
+var version = "0.21.4";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };