@protobase/ui 0.19.14 → 0.19.16

package/dist/data-grid/cells.js

@@ -4,10 +4,10 @@ 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 { FileImage } from "../live/file-image.js";
 import { valueColor } from "../live/value-color.js";
-import { userById } from "../mocks/users.js";
 import { Check, Paperclip } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { enumLabel } from "@protobase/schema";

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

@@ -10,12 +10,13 @@ import { GridHeader } from "./grid-header.js";
 import { DataRow, SkeletonRow } from "./grid-row.js";
 import { usePagedRows } from "./use-paged-rows.js";
 import { useVirtualRows } from "./use-virtual-rows.js";
+import { useCellEditing } from "./use-cell-editing.js";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 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, bulkActions, pinKey, defaultPinned, rowNumbers = true, compact = false, selectable = true, fit = false, scroll = "own", className }) => {
+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 = true, fit = false, scroll = "own", className }) => {
 	const rowHeight = compact ? 28 : 36;
 	const [pinned, setPinned] = usePinnedColumns(pinKey, defaultPinned);
 	const columns = useMemo(() => {
@@ -65,15 +66,24 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 		total,
 		rowAt: sourceRowAt ? rowAt : void 0,
 		loadRows: source.loadRows,
+		revision: source.revision,
 		latencyMs
 	}, firstIndex, lastIndex);
+	const patchedRow = useCallback((index) => {
+		const row = getRow(index);
+		const patch = row && rowPatches?.get(row.id);
+		return patch ? {
+			...row,
+			...patch
+		} : row;
+	}, [getRow, rowPatches]);
 	const loaded = virtualRows.map(({ index, offset }) => ({
 		index,
 		offset,
-		row: getRow(index)
+		row: patchedRow(index)
 	}));
 	const data = useMemo(() => loaded.flatMap(({ row }) => row ? [row] : []), [
-		getRow,
+		patchedRow,
 		firstIndex,
 		lastIndex
 	]);
@@ -123,6 +133,16 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 		sorted: header.column.getIsSorted(),
 		onSort: (event) => header.column.getToggleSortingHandler()?.(event)
 	})));
+	const gridRef = useRef(null);
+	const columnIds = useMemo(() => columns.map((spec) => spec.id), [columns]);
+	const cellEditing = useCellEditing({
+		editor: cellEditor,
+		columns: columnIds,
+		total,
+		rowAt: patchedRow,
+		onOpenRow,
+		container: gridRef
+	});
 	const minWidth = gridMinWidth(columns, gutter, trailing, minScale);
 	const own = scroll === "own";
 	const header = /* @__PURE__ */ jsx("div", {
@@ -183,17 +203,22 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 						row,
 						actions
 					}) : void 0,
-					cells: tableRow.getAllCells().map((cell) => ({
-						spec: columns.find((spec) => spec.id === cell.column.id),
-						content: /* @__PURE__ */ jsx(table.FlexRender, { cell })
-					}))
+					cells: tableRow.getAllCells().map((cell) => {
+						const content = /* @__PURE__ */ jsx(table.FlexRender, { cell });
+						return {
+							spec: columns.find((spec) => spec.id === cell.column.id),
+							...cellEditing && row ? cellEditing.cell(index, row, cell.column.id, content) : { content }
+						};
+					})
 				}, row?.id);
 			})
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
+		ref: gridRef,
 		role: "grid",
 		"aria-rowcount": total,
+		onKeyDown: cellEditing?.onKeyDown,
 		className: cn("flex flex-col rounded-lg border bg-background", own ? "min-h-0 overflow-hidden" : "overflow-clip", className),
 		style: fit && own ? { height: headerHeight + total * rowHeight + 2 } : void 0,
 		children: [/* @__PURE__ */ jsxs("div", {

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

@@ -62,7 +62,7 @@ const GridHeader = ({ cells, specs, gutter, selectedCount, selectable, trailing,
 				})]
 			}, spec.id);
 		}),
-		trailing ? /* @__PURE__ */ jsx("div", {}) : null
+		trailing ? /* @__PURE__ */ jsx("div", { className: "sticky right-0 z-10 h-full bg-inherit" }) : null
 	]
 });
 //#endregion

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

@@ -14,17 +14,20 @@ const frameStyle = (frame) => ({
 /** Pinned cells need a solid background; `bg-inherit` takes the row's, so hover and selection still show. */
 const cellClass = (spec, frame) => cn("flex h-full min-w-0 items-center overflow-hidden whitespace-nowrap px-3", isRightAligned(spec.kind) && "justify-end", spec.highlight && "bg-primary-soft/60", frame.pins && spec.id in frame.pins && "sticky z-10 bg-inherit", frame.scrolled && spec.id === frame.lastPinned && "shadow-[1px_0_0_var(--border),4px_0_6px_-2px_rgb(0_0_0/0.12)]");
 const pinStyle = (spec, pins) => pins && spec.id in pins ? { left: pins[spec.id] } : void 0;
-/** The selection column never scrolls away, so rows can be selected from anywhere in a wide grid. */
+/**
+* The selection column never scrolls away, so rows can be selected from anywhere in a wide grid.
+* The whole cell toggles the row instead of opening it; the checkbox's own click bubbles up to it.
+*/
 const Gutter = ({ width, index, selectable, selected, onToggle, edge }) => /* @__PURE__ */ jsxs("div", {
-	className: cn("sticky left-0 z-10 flex h-full items-center gap-2 bg-inherit pl-3", edge && "shadow-[1px_0_0_var(--border),4px_0_6px_-2px_rgb(0_0_0/0.12)]"),
+	onClick: selectable ? (event) => {
+		event.stopPropagation();
+		onToggle?.();
+	} : void 0,
+	className: cn("sticky left-0 z-10 flex h-full items-center gap-2 bg-inherit pl-3", selectable && "cursor-default", edge && "shadow-[1px_0_0_var(--border),4px_0_6px_-2px_rgb(0_0_0/0.12)]"),
 	style: { width },
-	children: [selectable && /* @__PURE__ */ jsx("span", {
-		onClick: (event) => event.stopPropagation(),
-		children: /* @__PURE__ */ jsx(Checkbox, {
-			checked: Boolean(selected),
-			onChange: onToggle,
-			label: `Select row ${index + 1}`
-		})
+	children: [selectable && /* @__PURE__ */ jsx(Checkbox, {
+		checked: Boolean(selected),
+		label: `Select row ${index + 1}`
 	}), width > 40 && /* @__PURE__ */ jsx("span", {
 		className: "min-w-6 text-right text-[11px] tabular-nums text-faint-foreground",
 		children: formatInt(index + 1)
@@ -44,14 +47,15 @@ const DataRow = ({ cells, selected, onToggle, onOpen, menu, ...frame }) => /* @_
 			onToggle,
 			edge: frame.scrolled && !frame.lastPinned
 		}),
-		cells.map(({ spec, content }) => /* @__PURE__ */ jsx("div", {
-			role: "cell",
-			className: cellClass(spec, frame),
+		cells.map(({ spec, content, props, chosen, editing, editable }) => /* @__PURE__ */ jsx("div", {
+			role: props ? "gridcell" : "cell",
+			...props,
+			className: cn(cellClass(spec, frame), props && "scroll-mb-[calc(var(--pb-sticky-bottom,0px)+3rem)] scroll-mt-[calc(var(--pb-sticky-top,0px)+2rem)] outline-none", editable && !editing && "cursor-default", chosen && "shadow-[inset_0_0_0_2px_var(--primary)]", editing && "z-30 overflow-visible bg-background px-1"),
 			style: pinStyle(spec, frame.pins),
 			children: content
 		}, spec.id)),
 		menu && /* @__PURE__ */ jsx("div", {
-			className: "flex h-full items-center justify-center",
+			className: "sticky right-0 z-10 flex h-full items-center justify-center bg-inherit",
 			children: menu
 		})
 	]

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

@@ -13,6 +13,9 @@ const createPageCache = (pageSize, maxPages) => {
 			if (oldest.done) return;
 			pages.delete(oldest.value);
 		},
+		keepOnly: (kept) => {
+			for (const page of [...pages.keys()]) if (!kept.includes(page)) pages.delete(page);
+		},
 		get size() {
 			return pages.size;
 		}

package/dist/data-grid/use-cell-editing.js

@@ -0,0 +1,113 @@
+import { isMoveKey, movedCell, nextEditable } from "./cell-moves.js";
+import { useEffect, useRef, useState } from "react";
+//#region src/data-grid/use-cell-editing.tsx
+const placeId = (place) => `${place.index}:${place.column}`;
+/**
+* The chosen cell and the one being edited, of a grid with an editor. The arrow keys, and Tab and Shift+Tab within a
+* row, move between cells; Enter opens the editor of an editable cell and the row of any other; Escape lets go of the
+* cell. A cell's mouse and keyboard handlers come from `cell`.
+*/
+const useCellEditing = ({ editor, columns, total, rowAt, onOpenRow, container }) => {
+	const [active, setActive] = useState();
+	const [editing, setEditing] = useState(false);
+	const refocus = useRef(false);
+	const pressedChosen = useRef(false);
+	useEffect(() => {
+		if (!active || editing || !refocus.current) return;
+		refocus.current = false;
+		const cell = container.current?.querySelector(`[data-cell="${placeId(active)}"]`);
+		if (!cell) return;
+		cell.focus({ preventScroll: true });
+		cell.scrollIntoView({
+			block: "nearest",
+			inline: "nearest"
+		});
+	}, [
+		active,
+		editing,
+		container
+	]);
+	if (!editor) return void 0;
+	const editableAt = (place) => {
+		const row = rowAt(place.index);
+		return row !== void 0 && editor.editable(row, place.column);
+	};
+	const choose = (place, edit = false) => {
+		refocus.current = true;
+		setActive(place);
+		setEditing(edit && editableAt(place));
+	};
+	const close = (move) => {
+		if (!active) return;
+		const row = rowAt(active.index);
+		const next = move && row ? nextEditable(active.column, columns, (column) => editor.editable(row, column), move) : void 0;
+		const focused = Boolean(container.current?.contains(document.activeElement));
+		choose(next ? {
+			...active,
+			column: next
+		} : active, next !== void 0);
+		refocus.current = focused;
+	};
+	const onKeyDown = (event) => {
+		if (editing || !active || !(event.target instanceof HTMLElement) || event.target.dataset.cell !== placeId(active)) return;
+		const key = event.key === "Tab" ? event.shiftKey ? "ArrowLeft" : "ArrowRight" : event.key;
+		if (isMoveKey(key)) {
+			const next = movedCell(active, key, columns, total);
+			if (!next && event.key === "Tab") return;
+			event.preventDefault();
+			if (next && rowAt(next.index)) choose(next);
+			return;
+		}
+		if (event.key === "Enter" || event.key === "F2") {
+			event.preventDefault();
+			const row = rowAt(active.index);
+			if (editableAt(active)) choose(active, true);
+			else if (event.key === "Enter" && row) onOpenRow?.(row);
+			return;
+		}
+		if (event.key === "Escape") setActive(void 0);
+	};
+	/** What a cell of the grid needs: its content, its handlers, and whether it is chosen or being edited. */
+	const cell = (index, row, column, content) => {
+		const place = {
+			index,
+			column
+		};
+		const chosen = active?.index === index && active.column === column;
+		const editable = editor.editable(row, column);
+		const reachable = chosen || !active && index === 0 && column === columns[0];
+		return {
+			content: chosen && editing ? editor.render(row, column, close) : content,
+			chosen,
+			editing: chosen && editing,
+			editable,
+			props: {
+				"data-cell": placeId(place),
+				tabIndex: reachable ? 0 : -1,
+				"aria-selected": chosen,
+				onMouseDown: () => {
+					pressedChosen.current = chosen;
+				},
+				onFocus: (event) => {
+					if (event.target === event.currentTarget && !chosen) setActive(place);
+				},
+				onClick: (event) => {
+					if (!editable) return;
+					event.stopPropagation();
+					if (pressedChosen.current && !editing) choose(place, true);
+				},
+				onDoubleClick: (event) => {
+					if (!editable) return;
+					event.stopPropagation();
+					if (!(chosen && editing)) choose(place, true);
+				}
+			}
+		};
+	};
+	return {
+		cell,
+		onKeyDown
+	};
+};
+//#endregion
+export { useCellEditing };

package/dist/data-grid/use-paged-rows.js

@@ -1,10 +1,13 @@
 import { createPageCache, pagesForRange } from "./page-cache.js";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+/** How many rows of `total` the page holds: a whole page, but for the last. */
+const pageLength = (total, page) => Math.max(0, Math.min(40, total - page * 40));
 /**
 * Serves rows by absolute index. Mock sources compute rows (after `latencyMs`, or at once when 0);
-* live sources load pages through `loadRows`. Unloaded rows read as undefined, so fast scrolling shows skeletons.
+* live sources load pages through `loadRows`. Unloaded rows read as undefined, so fast scrolling shows skeletons. A new
+* `revision` loads the pages on screen again, showing the rows they held until the new ones arrive.
 */
-const usePagedRows = ({ total, rowAt, loadRows, latencyMs }, start, end) => {
+const usePagedRows = ({ total, rowAt, loadRows, revision, latencyMs }, start, end) => {
 	const cache = useMemo(() => createPageCache(40, 60), [rowAt, loadRows]);
 	const [version, setVersion] = useState(0);
 	const firstPage = Math.floor(start / 40);
@@ -13,7 +16,7 @@ const usePagedRows = ({ total, rowAt, loadRows, latencyMs }, start, end) => {
 	useEffect(() => {
 		if (synchronous) return;
 		const pages = pagesForRange(firstPage * 40, lastPage * 40, 40).filter((page) => !cache.hasPage(page));
-		const length = (page) => Math.max(0, Math.min(40, total - page * 40));
+		const length = (page) => pageLength(total, page);
 		const store = (page, rows) => {
 			cache.setPage(page, rows);
 			setVersion((current) => current + 1);
@@ -39,6 +42,24 @@ const usePagedRows = ({ total, rowAt, loadRows, latencyMs }, start, end) => {
 		loadRows,
 		synchronous
 	]);
+	const shownRevision = useRef(revision);
+	useEffect(() => {
+		if (!loadRows || revision === shownRevision.current) return;
+		shownRevision.current = revision;
+		const shown = pagesForRange(firstPage * 40, lastPage * 40, 40);
+		cache.keepOnly(shown);
+		for (const page of shown.filter((page) => cache.hasPage(page))) loadRows(page * 40, pageLength(total, page)).then((rows) => {
+			cache.setPage(page, rows);
+			setVersion((current) => current + 1);
+		});
+	}, [
+		cache,
+		revision,
+		loadRows,
+		firstPage,
+		lastPage,
+		total
+	]);
 	return useCallback((index) => synchronous ? rowAt(index) : cache.get(index), [
 		cache,
 		synchronous,

package/dist/index.d.ts

@@ -11,6 +11,8 @@ 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 { ActionInputError } from "./app/pages/action-inputs/input-errors.js";
+import { ActionInputProps } from "./app/pages/action-inputs/action-inputs-dialog.js";
 import { pluginApi, protobaseVersion } from "./plugins/plugin-api.js";
 import { mergeUi } from "./app/pages/merge-ui.js";
 import { uiFromModule } from "./app/pages/ui-from-module.js";
@@ -57,4 +59,4 @@ import { Field, FieldProps } from "./record-view/field.js";
 import { Section } from "./record-view/section.js";
 import { Form, FormProps } from "./app/create/form.js";
 import { Spinner } from "./primitives/spinner.js";
-export { ActionCard, type ActionCardProps, type ActionContext, type ActionHandler, ApiProvider, type ApiProviderProps, App, AppLink, type AppProps, AssistantDock, type AssistantDockProps, AuthLayout, type AuthLayoutProps, type BackendData, type BackendRefresh, type BeforeSignInProps, Button, type ButtonProps, type CardAction, type CardTone, ChatMessage, ChatThread, type ChatThreadProps, type ChoiceOption, Choices, type ChoicesProps, CodeForm, type CodeFormProps, CompactTable, type CompactTableProps, Composer, type ComposerProps, type CurrentAddress, Dialog, type DialogProps, type DiffLine, DiffView, type DiffViewProps, Field, FieldList, type FieldProps, type FieldWidget, type FieldWidgetEditorProps, type FieldWidgetProps, Form, type FormProps, Input, type InputProps, type LayoutRecord, type ListAddress, type ListChange, type ListDisplay, type ListDisplayRow, LogoMark, MenuSelect, type MenuSelectProps, type MetaData, OtpInput, type OtpInputProps, PartView, type PluginInfo, type ProjectUi, type RecordCardProps, RecordLink, ResendCodeButton, type ResendCodeButtonProps, ResponsiveDialog, type ResponsiveDialogProps, Section, Segmented, type SegmentedOption, type SegmentedProps, type ShellLogoProps, SidePanel, type SidePanelProps, SignInPrompt, type SignInPromptProps, Spinner, type Step, StepList, type StepState, Textarea, type TextareaProps, buttonClass, definePlugin, defineUi, diffStats, isConflict, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useResourceClient, useSeries, useUpdateRecord };
+export { ActionCard, type ActionCardProps, type ActionContext, type ActionHandler, ActionInputError, type ActionInputProps, ApiProvider, type ApiProviderProps, App, AppLink, type AppProps, AssistantDock, type AssistantDockProps, AuthLayout, type AuthLayoutProps, type BackendData, type BackendRefresh, type BeforeSignInProps, Button, type ButtonProps, type CardAction, type CardTone, ChatMessage, ChatThread, type ChatThreadProps, type ChoiceOption, Choices, type ChoicesProps, CodeForm, type CodeFormProps, CompactTable, type CompactTableProps, Composer, type ComposerProps, type CurrentAddress, Dialog, type DialogProps, type DiffLine, DiffView, type DiffViewProps, Field, FieldList, type FieldProps, type FieldWidget, type FieldWidgetEditorProps, type FieldWidgetProps, Form, type FormProps, Input, type InputProps, type LayoutRecord, type ListAddress, type ListChange, type ListDisplay, type ListDisplayRow, LogoMark, MenuSelect, type MenuSelectProps, type MetaData, OtpInput, type OtpInputProps, PartView, type PluginInfo, type ProjectUi, type RecordCardProps, RecordLink, ResendCodeButton, type ResendCodeButtonProps, ResponsiveDialog, type ResponsiveDialogProps, Section, Segmented, type SegmentedOption, type SegmentedProps, type ShellLogoProps, SidePanel, type SidePanelProps, SignInPrompt, type SignInPromptProps, Spinner, type Step, StepList, type StepState, Textarea, type TextareaProps, buttonClass, definePlugin, defineUi, diffStats, isConflict, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useResourceClient, useSeries, useUpdateRecord };

package/dist/index.js

@@ -32,12 +32,13 @@ import { AssistantDock } from "./assistant-dock/assistant-dock.js";
 import { useAssistant } from "./assistant-dock/use-assistant.js";
 import { useAssistantClient } from "./assistant-dock/use-assistant-client.js";
 import { useMeta } from "./data/use-meta.js";
-import { useLayoutRecord } from "./app/pages/record-scope.js";
-import { AppLink, useAppAddress } from "./app/use-app-address.js";
+import { ResponsiveDialog } from "./primitives/responsive-dialog.js";
 import { Field } from "./record-view/field.js";
 import { Section } from "./record-view/section.js";
 import { Textarea } from "./primitives/textarea.js";
-import { ResponsiveDialog } from "./primitives/responsive-dialog.js";
+import { AppLink, useAppAddress } from "./app/use-app-address.js";
+import { ActionInputError } from "./app/pages/action-inputs/input-errors.js";
+import { useLayoutRecord } from "./app/pages/record-scope.js";
 import { SignInPrompt } from "./auth/sign-in-prompt.js";
 import { useListDisplay } from "./app/displays/display-context.js";
 import { MenuSelect } from "./primitives/menu-select.js";
@@ -48,4 +49,4 @@ import { isConflict, useUpdateRecord } from "./data/use-update-record.js";
 import { App } from "./app/app.js";
 import { RecordLink } from "./app/displays/record-link.js";
 import { Choices } from "./primitives/choices.js";
-export { ActionCard, ApiProvider, App, AppLink, AssistantDock, AuthLayout, Button, ChatMessage, ChatThread, Choices, CodeForm, CompactTable, Composer, Dialog, DiffView, Field, FieldList, Form, Input, LogoMark, MenuSelect, OtpInput, PartView, RecordLink, ResendCodeButton, ResponsiveDialog, Section, Segmented, SidePanel, SignInPrompt, Spinner, StepList, Textarea, buttonClass, definePlugin, defineUi, diffStats, isConflict, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useResourceClient, useSeries, useUpdateRecord };
+export { ActionCard, ActionInputError, ApiProvider, App, AppLink, AssistantDock, AuthLayout, Button, ChatMessage, ChatThread, Choices, CodeForm, CompactTable, Composer, Dialog, DiffView, Field, FieldList, Form, Input, LogoMark, MenuSelect, OtpInput, PartView, RecordLink, ResendCodeButton, ResponsiveDialog, Section, Segmented, SidePanel, SignInPrompt, Spinner, StepList, Textarea, buttonClass, definePlugin, defineUi, diffStats, isConflict, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useResourceClient, useSeries, useUpdateRecord };

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

@@ -1,6 +1,6 @@
 import { humanize } from "./naming.js";
-import { markdownExcerpt } from "../markdown/markdown-excerpt.js";
 import { isMarkdown } from "../markdown/markdown-hint.js";
+import { markdownExcerpt } from "../markdown/markdown-excerpt.js";
 import { enumLabel } from "@protobase/schema";
 //#region src/live/columns-from-model.ts
 const tones = {

package/dist/live/field-values.js

@@ -12,6 +12,8 @@ const textEdited = /* @__PURE__ */ new Set([
 	"country"
 ]);
 const isEditable = (field) => !field.readOnly && field.type !== "json" && field.type !== "uuid" && field.type !== "timestamp" && field.type !== "relation";
+/** A field a record's form cannot leave empty: written through the API, never null and no boolean, which always holds a value. */
+const isRequiredOnEdit = (field) => !field.readOnly && !field.nullable && field.type !== "boolean";
 /** The JSON value to send for an edited field: integers become numbers, empty optional fields become null. */
 const toPatchValue = (field, draft) => {
 	if (field.type === "boolean") return Boolean(draft);
@@ -40,4 +42,4 @@ const differs = (field, draft, stored) => {
 	return a !== b;
 };
 //#endregion
-export { differs, fromDraft, isEditable, toDraft, toFieldDraft, toPatchValue };
+export { differs, fromDraft, isEditable, isRequiredOnEdit, toDraft, toFieldDraft, toPatchValue };

package/dist/live/related-column-rows.js

@@ -1,7 +1,7 @@
 import { listLabels, withLabels } from "./relation-labels.js";
 import { createWhere, printFilter } from "@protobase/schema";
 //#region src/live/related-column-rows.ts
-const where = createWhere();
+const where$1 = createWhere();
 const and = (...parts) => {
 	const given = parts.filter((part) => Boolean(part));
 	return given.length === 1 ? given[0] : given.map((part) => `(${part})`).join(" AND ");
@@ -29,7 +29,7 @@ const linksOf = async (client, resources, column, owners) => {
 	const key = through.key ?? via?.primaryKey[0];
 	if (!via || key === void 0) throw new Error(`The related column ${column.name} names a join resource the app does not have: ${through.resource}`);
 	return (await client.search(via.name, {
-		filter: and(printFilter(where.in(through.field, owners)), through.filter),
+		filter: and(printFilter(where$1.in(through.field, owners)), through.filter),
 		fields: [through.field, key],
 		pageSize: 500
 	})).items.flatMap((row) => {
@@ -58,7 +58,7 @@ const loadRelatedColumn = async ({ client, resources, views, load, owners }) =>
 	])];
 	const labels = listLabels(resources, views, target, loaded);
 	const page = await client.search(target.name, {
-		filter: and(printFilter(where.in(column.field, values)), column.filter),
+		filter: and(printFilter(where$1.in(column.field, values)), column.filter),
 		...column.sort && { orderBy: column.sort },
 		fields: loaded,
 		pageSize: 500,

package/dist/live/relation-labels.js

@@ -2,7 +2,7 @@ import { keys } from "../data/query-keys.js";
 import { labelFieldOf } from "./model-helpers.js";
 import { createWhere, printFilter } from "@protobase/schema";
 //#region src/live/relation-labels.ts
-const where = createWhere();
+const where$1 = createWhere();
 /** Names for the given keys of a single-key resource, fetched in one list call and cached. */
 const fetchLabels = async (queryClient, client, target, ids, view) => {
 	const keyField = target.primaryKey[0];
@@ -14,7 +14,7 @@ const fetchLabels = async (queryClient, client, target, ids, view) => {
 		staleTime: 3e5,
 		queryFn: async () => {
 			return (await client.list(target.name, {
-				filter: printFilter(where.in(keyField, unique)),
+				filter: printFilter(where$1.in(keyField, unique)),
 				fields: [keyField, labelField],
 				pageSize: unique.length
 			})).items.map((item) => [String(item[keyField]), String(item[labelField])]);

package/dist/live/use-live-rows.js

@@ -6,7 +6,9 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
 //#region src/live/use-live-rows.ts
 /**
 * A grid row source backed by the API; `total` is the server's estimate from the first page. `page` loads one page of
-* the same rows by number, and `key` names them in the query cache, for list displays that page through them.
+* the same rows by number, and `key` names them in the query cache, for list displays that page through them. Each
+* fetch of the first page, as on a return to the window, makes every page of the list stale and gives the source a new
+* `revision`, so the rows on screen are loaded again.
 */
 const useLiveRows = ({ resources, views, model, columns, filter, orderBy, related }) => {
 	const client = useClient();
@@ -36,13 +38,24 @@ const useLiveRows = ({ resources, views, model, columns, filter, orderBy, relate
 	]);
 	const first = useQuery({
 		queryKey: [...keys.first(model.name, filter, orderBy), columnKey],
-		queryFn: () => loader.page(0)
+		queryFn: async () => {
+			await queryClient.invalidateQueries({
+				queryKey: keys.pages(model.name, filter, orderBy),
+				refetchType: "none"
+			});
+			return loader.page(0);
+		}
 	});
 	return {
 		source: useMemo(() => first.data ? {
 			total: first.data.total,
-			loadRows: loader.loadRows
-		} : void 0, [first.data, loader]),
+			loadRows: loader.loadRows,
+			revision: first.dataUpdatedAt
+		} : void 0, [
+			first.data,
+			first.dataUpdatedAt,
+			loader
+		]),
 		error: first.error,
 		isLoading: first.isLoading,
 		page: loader.page,

package/dist/live/use-reference-search.js

@@ -4,7 +4,7 @@ import { useState } from "react";
 import { keepPreviousData, useQueries } from "@tanstack/react-query";
 import { createWhere, printFilter } from "@protobase/schema";
 //#region src/live/use-reference-search.ts
-const where = createWhere();
+const where$1 = createWhere();
 /**
 * The search text typed into each facet's combobox and the records of its target resource that match it. A facet
 * without a target, or whose target has no search fields or a composite key, gets nothing: its options are filtered
@@ -29,7 +29,7 @@ const useReferenceSearch = (targets, views) => {
 				const keyField = target.primaryKey[0];
 				const labelField = labelFieldOf(target, views[target.name]);
 				return (await client.list(target.name, {
-					filter: printFilter(where.search(text)),
+					filter: printFilter(where$1.search(text)),
 					fields: [keyField, labelField],
 					pageSize: 20
 				})).items.map((item) => [String(item[keyField]), String(item[labelField])]);

package/dist/markdown/markdown-editor.js

@@ -1,6 +1,6 @@
 import { Segmented } from "../primitives/segmented.js";
-import { Markdown } from "./markdown.js";
 import { Textarea } from "../primitives/textarea.js";
+import { Markdown } from "./markdown.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/markdown/markdown-editor.tsx

package/dist/package.js

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