@protobase/ui 0.21.2 → 0.21.3

package/dist/app/current-address.js

@@ -1,4 +1,4 @@
-import { defaultDisplay } from "./displays/list-displays.js";
+import { defaultDisplay, listDefaultDisplay } from "./displays/list-displays.js";
 import { defaultOrderBy } from "./list-order.js";
 import { encodeKey } from "@protobase/schema/internal";
 //#region src/app/current-address.ts
@@ -22,7 +22,7 @@ const listedResource = (resources, views, resource) => {
 };
 /** What a list shows when its address names nothing: its default display for the screen, the list's sort, the filters in a bar. */
 const listDefaults = (model, view, xs = false) => ({
-	display: defaultDisplay(view, xs),
+	display: model ? listDefaultDisplay(model, view, xs) : defaultDisplay(view, xs),
 	orderBy: model ? defaultOrderBy(model, view) : "",
 	filterLayout: "bar"
 });

package/dist/app/displays/display-controls.js

@@ -18,11 +18,10 @@ const icons = {
 	map: Map
 };
 /**
-* The list page's switch between the table and the view's displays, as buttons or, on a phone, as a menu; nothing for a
-* list with only its table.
+* The list page's switch between the table and the view's displays, or `choices`, as buttons or, on a phone, as a menu;
+* nothing for a list with only its table.
 */
-const DisplaySwitch = ({ view, value, onChange, menu = false }) => {
-	const choices = displayChoices(view);
+const DisplaySwitch = ({ view, value, onChange, menu = false, choices = displayChoices(view) }) => {
 	if (choices.length < 2) return null;
 	const options = choices.map((choice) => ({
 		value: choice.name,

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

@@ -1,5 +1,6 @@
 import { recordKey, recordTitleField } from "../../live/model-helpers.js";
 import { humanize } from "../../live/naming.js";
+import { listColumnNames } from "../../live/columns-from-model.js";
 import { displayValue } from "../../live/display-value.js";
 import { photosKey } from "../../live/row-photos.js";
 import { filledFields } from "../filled-fields.js";
@@ -18,6 +19,40 @@ const defaultDisplay = (view, xs, preferred) => {
 	const cards = displaysOf(view).filter((display) => display.kind === "cards");
 	return cards.find((display) => display.name === fallback)?.name ?? cards[0]?.name ?? fallback;
 };
+/** The name of the list a phone shows for a list without a cards display. */
+const rowsDisplay = "rows";
+/**
+* The list a phone shows for a list without a cards display, as a cards display of a row per record: the title, the
+* first enum column as a badge on the right, and the next two columns, booleans left out, on a muted line below.
+* `undefined` for a view with a cards display, or a display of its own named `rows`.
+*/
+const phoneRows = (model, view) => {
+	if (displaysOf(view).some((display) => display.kind === "cards" || display.name === "rows")) return void 0;
+	const title = recordTitleField(model, view);
+	const candidates = listColumnNames(model, view).filter((name) => name !== title && model.fields[name] !== void 0);
+	const badge = candidates.find((name) => model.fields[name].type === "enum");
+	const footer = candidates.filter((name) => name !== badge && model.fields[name].type !== "boolean").slice(0, 2);
+	return {
+		kind: "cards",
+		name: rowsDisplay,
+		label: "List",
+		icon: "list",
+		title,
+		...badge !== void 0 && { badge },
+		footer
+	};
+};
+const isPhoneRows = (view, display) => display.name === "rows" && !displaysOf(view).some((other) => other.name === "rows");
+/**
+* The display a list page opens in when its address names none: `defaultDisplay`, but below the `sm` breakpoint the
+* phone's rows (`phoneRows`) in place of the table.
+*/
+const listDefaultDisplay = (model, view, xs) => {
+	const display = defaultDisplay(view, xs);
+	return xs && display === tableDisplay && phoneRows(model, view) ? rowsDisplay : display;
+};
+/** The display a list page shows for the address's `name`: `shownDisplay`, or the phone's rows when it names them, on any screen. */
+const shownListDisplay = (model, view, name) => (name === "rows" ? phoneRows(model, view) : void 0) ?? shownDisplay(view, name);
 /** The display a list shows for the address's `name`: `undefined` for the table, and the view's default for a name it does not have. */
 const shownDisplay = (view, name) => {
 	if (name === tableDisplay) return void 0;
@@ -38,6 +73,15 @@ const displayChoices = (view) => [{
 	label: display.label ?? humanize(display.name),
 	icon: display.icon ?? defaultIcons[display.kind]
 }))];
+/** The list page's display switch: `displayChoices`, and below the `sm` breakpoint the phone's rows when it has them. */
+const listDisplayChoices = (model, view, xs) => {
+	const choices = displayChoices(view);
+	return xs && phoneRows(model, view) ? [...choices, {
+		name: rowsDisplay,
+		label: "List",
+		icon: "list"
+	}] : choices;
+};
 /** The fields a cards display shows, its title the view's title field when it names none. */
 const cardFields = (model, view, display) => ({
 	image: display.image,
@@ -101,9 +145,19 @@ const shownFields = (model, view, display) => {
 	].filter((name) => name !== void 0);
 };
 /** The fields to label the list's rows for: the table's columns and every display's, so one load serves them all. */
-const loadedFields = (model, view, columns) => [.../* @__PURE__ */ new Set([...columns, ...displaysOf(view).flatMap((display) => shownFields(model, view, display))])];
-/** The sortable fields a display shows, for the sort menu that stands in for column headers. */
-const sortFields = (model, view, display) => [...new Set(shownFields(model, view, display))].filter((name) => model.fields[name]?.sortable);
+const loadedFields = (model, view, columns) => {
+	const rows = phoneRows(model, view);
+	const displays = rows ? [...displaysOf(view), rows] : displaysOf(view);
+	return [.../* @__PURE__ */ new Set([...columns, ...displays.flatMap((display) => shownFields(model, view, display))])];
+};
+/**
+* The sortable fields a display shows, for the sort menu that stands in for column headers; for the phone's rows, those
+* of the table's columns and the title, as the table's headers sort by.
+*/
+const sortFields = (model, view, display) => {
+	const shown = isPhoneRows(view, display) ? [recordTitleField(model, view), ...listColumnNames(model, view)] : shownFields(model, view, display);
+	return [...new Set(shown)].filter((name) => model.fields[name]?.sortable);
+};
 const isLabelled = (value) => typeof value === "object" && value !== null && "id" in value && "name" in value;
 /**
 * A loaded row, its relations as `{ id, name }`, split into the record as the API gives it, the relations' names and
@@ -128,4 +182,4 @@ const displayRow = (model, row) => {
 	};
 };
 //#endregion
-export { amountParts, cardFields, defaultDisplay, displayChoices, displayRow, displaysOf, filledAmount, filledMeta, loadedFields, mapCards, shownDisplay, shownFields, sortFields };
+export { amountParts, cardFields, defaultDisplay, displayChoices, displayRow, displaysOf, filledAmount, filledMeta, listDefaultDisplay, listDisplayChoices, loadedFields, mapCards, phoneRows, rowsDisplay, shownDisplay, shownFields, shownListDisplay, sortFields };

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

@@ -3,14 +3,14 @@ import { CustomBoundary } from "../pages/custom-boundary.js";
 import { recordKey } from "../../live/model-helpers.js";
 import { humanize } from "../../live/naming.js";
 import { useProjectUi } from "../pages/project-ui.js";
+import { markdownExcerpt } from "../../markdown/markdown-excerpt.js";
+import { isMarkdown } from "../../markdown/markdown-hint.js";
 import { displayValue } from "../../live/display-value.js";
 import { amountParts, cardFields, filledAmount, filledMeta } from "./list-displays.js";
 import { AppLink } 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 { markdownExcerpt } from "../../markdown/markdown-excerpt.js";
 import { ValueBadge } from "../value-badge.js";
 import { useSeedRecord } from "../record-preview.js";
 import { namedIcon } from "../named-icon.js";

package/dist/app/embedded-list/embedded-columns.js

@@ -1,7 +1,7 @@
 import { humanize } from "../../live/naming.js";
+import { columnsFromModel } from "../../live/columns-from-model.js";
 import { displayRow } from "../displays/list-displays.js";
 import { scopeOf } from "../pages/use-layout-data.js";
-import { columnsFromModel } from "../../live/columns-from-model.js";
 import { FieldValue } from "../pages/field-value.js";
 import { usePathValue } from "../pages/use-path-value.js";
 import { withFieldTypeCells } from "../field-types/field-type-cells.js";

package/dist/app/embedded-list/embedded-display.js

@@ -18,13 +18,17 @@ const embeddedDisplay = (view, xs, { picked, preferred }) => {
 	return defaultDisplay(view, xs, preferred !== void 0 && names.includes(preferred) ? preferred : void 0);
 };
 /**
-* The resource's list with the embedded list's filter, order and display, leaving out what the list does by default, and
+* The resource's list with the embedded list's filter, order and display, leaving out what the list does by default (an
+* embedded list's own default display among it, so a phone opens the list in its rows rather than the table), and
 * the saved search whose results it shows, if any. `resource` names another list of the same records, such as the
 * favorites that list a user's saved listings.
 */
 const viewAllAddress = (model, view, xs, { resource = model.name, ...list }) => changedList({
 	kind: "list",
 	resource
-}, list, listDefaults(model, view, xs));
+}, list, {
+	...listDefaults(model, view, xs),
+	display: defaultDisplay(view, xs)
+});
 //#endregion
 export { embeddedDisplay, embeddedDisplayKey, readPickedDisplay, viewAllAddress, writePickedDisplay };

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

@@ -5,10 +5,10 @@ import { humanize } from "../../live/naming.js";
 import { useProjectUi } from "../pages/project-ui.js";
 import { useAdminMeta } from "../meta-gate.js";
 import { ErrorBanner } from "../error-banner.js";
+import { listColumnNames } from "../../live/columns-from-model.js";
 import { displayRow, loadedFields, shownDisplay } from "../displays/list-displays.js";
 import { defaultOrderBy, parseSort, sortToOrderBy } from "../list-order.js";
 import { AppLink, useAppAddress } from "../use-app-address.js";
-import { listColumnNames } from "../../live/columns-from-model.js";
 import { DataGrid } from "../../data-grid/data-grid.js";
 import { viewAllAddress } from "./embedded-display.js";
 import { BoardDisplay } from "../displays/board-display.js";

package/dist/app/field-editor.js

@@ -6,6 +6,7 @@ import { humanize } from "../live/naming.js";
 import { fromDraft, isEditable, toFieldDraft } from "../live/field-values.js";
 import { Switch } from "../primitives/switch.js";
 import { Textarea } from "../primitives/textarea.js";
+import { isMarkdown } from "../markdown/markdown-hint.js";
 import { displayValue } from "../live/display-value.js";
 import { AppLink } from "./use-app-address.js";
 import { RelationPicker } from "./relation-picker.js";
@@ -15,7 +16,6 @@ import { useShownWidget } from "./field-types/shown-widget.js";
 import { WidgetPart } from "./field-types/widget-part.js";
 import { Markdown } from "../markdown/markdown.js";
 import { MarkdownEditor } from "../markdown/markdown-editor.js";
-import { isMarkdown } from "../markdown/markdown-hint.js";
 import { ArrowUpRight } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { enumLabel } from "@protobase/schema";

package/dist/app/list-page.js

@@ -1,4 +1,4 @@
-import { useIsDesktop } from "../lib/use-media-query.js";
+import { useIsDesktop, useIsXs } from "../lib/use-media-query.js";
 import { usePageScroll } from "../app-shell/page-scroll.js";
 import { PageHeader } from "../app-shell/page-header.js";
 import { useAuth } from "../auth/auth-provider.js";
@@ -9,12 +9,12 @@ import { useProjectUi } from "./pages/project-ui.js";
 import { Notice, useAdminMeta, usePermissions } from "./meta-gate.js";
 import { Sheet } from "../primitives/sheet.js";
 import { ErrorBanner } from "./error-banner.js";
-import { displayRow, loadedFields, shownDisplay } from "./displays/list-displays.js";
+import { columnsFromModel, listColumnNames } from "../live/columns-from-model.js";
+import { displayRow, listDisplayChoices, loadedFields, shownListDisplay } from "./displays/list-displays.js";
 import { parseSort, sortToOrderBy } from "./list-order.js";
 import { listedResource } from "./current-address.js";
 import { AppLink, useAppAddress } from "./use-app-address.js";
 import { can, rowAllows } from "./permissions.js";
-import { columnsFromModel, listColumnNames } from "../live/columns-from-model.js";
 import { pinnedStorageKey } from "../data-grid/pinned-storage.js";
 import { DataGrid } from "../data-grid/data-grid.js";
 import { useLiveRows } from "../live/use-live-rows.js";
@@ -131,6 +131,7 @@ const LoadedList = ({ model, address, scope, heading }) => {
 	const extras = parsed.ok ? parsed.extras : [];
 	const { orderBy, filterLayout: layout } = address;
 	const desktop = useIsDesktop();
+	const xs = useIsXs();
 	const [sheetOpen, setSheetOpen] = useState(false);
 	const scoped = scope ? [...extras, scope] : extras;
 	const config = useFilterConfig({
@@ -162,7 +163,7 @@ const LoadedList = ({ model, address, scope, heading }) => {
 		orderBy,
 		related
 	});
-	const display = shownDisplay(view, address.display);
+	const display = shownListDisplay(model, view, address.display);
 	const permissions = usePermissions(resource);
 	const handOrder = scope ? void 0 : listHandOrder(model, permissions);
 	const [sorting, setSorting] = useState(false);
@@ -321,6 +322,7 @@ const LoadedList = ({ model, address, scope, heading }) => {
 	});
 	const displaySwitch = (menu) => !handSorting && /* @__PURE__ */ jsx(DisplaySwitch, {
 		view,
+		choices: listDisplayChoices(model, view, xs),
 		value: display?.name ?? tableDisplay,
 		onChange: (name) => set({ display: name }),
 		menu

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-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

@@ -6,6 +6,8 @@ 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";
@@ -20,7 +22,10 @@ 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 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 +65,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 +93,7 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 		firstIndex,
 		lastIndex
 	]);
+	const sized = useFittedColumns(columns, data);
 	const table = useTable({
 		features,
 		columns: tableColumns,
@@ -145,7 +150,7 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 		onOpenRow,
 		container: gridRef
 	});
-	const minWidth = gridMinWidth(columns, gutter, trailing, minScale);
+	const minWidth = gridMinWidth(sized, gutter, trailing, minScale);
 	const own = scroll === "own";
 	const header = /* @__PURE__ */ jsx("div", {
 		ref: headerRef,
@@ -154,7 +159,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 +175,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,

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/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 };