@protobase/ui 0.23.2 → 0.23.4

package/dist/app/app.js

@@ -12,11 +12,12 @@ import { CustomBoundary } from "./pages/custom-boundary.js";
 import { PluginSourceProvider } from "../plugins/plugin-source.js";
 import { AuthGate } from "../auth/auth-gate.js";
 import { isAdmin, userToShell } from "../auth/user-to-shell.js";
+import { sourceStatusOf } from "../data/with-sources.js";
+import { useLiveUpdates } from "../data/use-live-updates.js";
 import { useOpenedRecord } from "../data/use-record.js";
 import { humanize } from "../live/naming.js";
 import { ToastProvider } from "../toasts/toast-provider.js";
 import { recordTitle } from "../live/model-helpers.js";
-import { sourceStatusOf } from "../data/with-sources.js";
 import { MetaGate, Notice, useAdminMeta } from "./meta-gate.js";
 import { useAppAddress } from "./use-app-address.js";
 import { documentTitle, titleParts, useDocumentTitle } from "./document-title.js";
@@ -75,6 +76,7 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 		resource: shown?.resource,
 		key: shown?.key
 	});
+	useLiveUpdates(meta);
 	const groups = navFromMeta(meta, basePath, recent);
 	const firstPage = Object.keys(meta.pages)[0];
 	const firstResource = Object.keys(meta.resources)[0];

package/dist/app/meta-gate.js

@@ -1,10 +1,10 @@
 import { Spinner } from "../primitives/spinner.js";
 import { ClientProvider, useClient, useSourceClients } from "../data/api-provider.js";
+import { withSources } from "../data/with-sources.js";
 import { MetaContext } from "../data/meta-context.js";
 import { allowEverything } from "../data/meta-data.js";
 import { useMeta } from "../data/use-meta.js";
 import { useSourceMetas } from "../data/use-source-metas.js";
-import { withSources } from "../data/with-sources.js";
 import { useContext, useMemo } from "react";
 import { isApiError, routedClient } from "@protobase/client";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/app/record-picker.d.ts

@@ -0,0 +1,25 @@
+//#region src/app/record-picker.d.ts
+type One = {
+  multiple?: false;
+  /** The chosen record's key, as text; `undefined` for none. */
+  value: string | undefined;
+  onChange: (key: string) => void;
+};
+type Several = {
+  multiple: true;
+  /** The chosen records' keys, as text. */
+  value: string[];
+  onChange: (keys: string[]) => void;
+};
+export type RecordPickerProps = (One | Several) & {
+  /** The name of the resource whose records it picks. */
+  resource: string;
+  invalid?: boolean;
+};
+/**
+ * Picks records of a resource of the app with the create form's relation picker: type to narrow them by their search
+ * fields or title, scroll for more, choose with the mouse or the keyboard. With `multiple`, each choice is added as a
+ * token that can be taken off again, and choosing a chosen record takes it off.
+ */
+export declare const RecordPicker: (props: RecordPickerProps) => import("react").JSX.Element;
+//#endregion

package/dist/app/record-picker.js

@@ -0,0 +1,65 @@
+import { useAdminMeta } from "./meta-gate.js";
+import { RelationPicker } from "./relation-picker.js";
+import { Token } from "../primitives/token.js";
+import { usePickedLabels } from "./use-picked-labels.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/record-picker.tsx
+/**
+* Picks records of a resource of the app with the create form's relation picker: type to narrow them by their search
+* fields or title, scroll for more, choose with the mouse or the keyboard. With `multiple`, each choice is added as a
+* token that can be taken off again, and choosing a chosen record takes it off.
+*/
+const RecordPicker = (props) => {
+	const { resources, views } = useAdminMeta();
+	const target = resources[props.resource];
+	if (!target) throw new Error(`RecordPicker: the app has no resource named "${props.resource}"`);
+	if (target.primaryKey.length !== 1) throw new Error(`RecordPicker: "${props.resource}" has a composite key, which a picker cannot name`);
+	const view = views[props.resource];
+	const keys = props.multiple ? props.value : props.value === void 0 ? [] : [props.value];
+	const [known, setKnown] = useState({});
+	const fetched = usePickedLabels(target, view, keys);
+	const labelOf = (key) => known[key] ?? fetched.get(key) ?? key;
+	const remember = (key, label) => setKnown((current) => ({
+		...current,
+		[key]: label
+	}));
+	if (!props.multiple) {
+		const { value, onChange } = props;
+		return /* @__PURE__ */ jsx(RelationPicker, {
+			target,
+			view,
+			value: value ?? "",
+			label: value === void 0 ? void 0 : labelOf(value),
+			invalid: props.invalid,
+			onChange: (key, label) => {
+				remember(key, label);
+				onChange(key);
+			}
+		});
+	}
+	const { value, onChange } = props;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2",
+		children: [/* @__PURE__ */ jsx(RelationPicker, {
+			target,
+			view,
+			value: "",
+			chosen: value,
+			several: true,
+			invalid: props.invalid,
+			onChange: (key, label) => {
+				remember(key, label);
+				onChange(value.includes(key) ? value.filter((chosen) => chosen !== key) : [...value, key]);
+			}
+		}), value.length > 0 && /* @__PURE__ */ jsx("div", {
+			className: "flex flex-wrap gap-1",
+			children: value.map((key) => /* @__PURE__ */ jsx(Token, {
+				label: labelOf(key),
+				onRemove: () => onChange(value.filter((chosen) => chosen !== key))
+			}, key))
+		})]
+	});
+};
+//#endregion
+export { RecordPicker };

package/dist/app/relation-picker.js

@@ -26,7 +26,7 @@ const useLoadMoreInView = (list, sentinel, loaded, loadMore) => {
 * Picks a record of another resource: type to narrow the records by their search fields or title, scroll for more, and
 * choose with the mouse or with the arrow keys and Enter; Escape closes the list.
 */
-const RelationPicker = ({ target, view, value, label, invalid, onChange }) => {
+const RelationPicker = ({ target, view, value, label, chosen = [value], several = false, invalid, onChange }) => {
 	const [text, setText] = useState("");
 	const [open, setOpen] = useState(false);
 	const [active, setActive] = useState(-1);
@@ -66,7 +66,9 @@ const RelationPicker = ({ target, view, value, label, invalid, onChange }) => {
 	};
 	const choose = (item) => {
 		onChange(String(item[keyField]), String(item[labelField]));
-		close();
+		if (!several) return close();
+		setText("");
+		setActive(-1);
 	};
 	const onKeyDown = (event) => {
 		if (event.key === "ArrowDown" || event.key === "ArrowUp") {
@@ -111,6 +113,7 @@ const RelationPicker = ({ target, view, value, label, invalid, onChange }) => {
 			ref: setList,
 			id: listId,
 			role: "listbox",
+			"aria-multiselectable": several || void 0,
 			className: "absolute z-30 mt-1 max-h-60 w-full overflow-y-auto rounded-md border bg-background py-1 shadow-pop",
 			onMouseDown: (event) => event.preventDefault(),
 			children: [
@@ -118,7 +121,7 @@ const RelationPicker = ({ target, view, value, label, invalid, onChange }) => {
 					id: optionId(index),
 					role: "option",
 					"aria-selected": index === active,
-					className: cn("cursor-pointer truncate px-3 py-1.5", index === active && "bg-muted", String(item[keyField]) === value && "font-medium"),
+					className: cn("cursor-pointer truncate px-3 py-1.5", index === active && "bg-muted", chosen.includes(String(item[keyField])) && "font-medium"),
 					onMouseMove: () => index !== active && setActive(index),
 					onClick: () => choose(item),
 					children: String(item[labelField])

package/dist/app/use-picked-labels.js

@@ -0,0 +1,19 @@
+import { keys } from "../data/query-keys.js";
+import { useClient } from "../data/api-provider.js";
+import { fetchLabels } from "../live/relation-labels.js";
+import { keepPreviousData, useQuery, useQueryClient } from "@tanstack/react-query";
+//#region src/app/use-picked-labels.ts
+/** The names of the chosen records, fetched in one list call; the previous names stay while the next ones load. */
+const usePickedLabels = (target, view, ids) => {
+	const client = useClient();
+	const queryClient = useQueryClient();
+	const sorted = [...new Set(ids)].sort();
+	return useQuery({
+		queryKey: keys.pickedLabels(target.name, sorted.join(",")),
+		enabled: sorted.length > 0,
+		placeholderData: keepPreviousData,
+		queryFn: () => fetchLabels(queryClient, client, target, sorted, view)
+	}).data ?? /* @__PURE__ */ new Map();
+};
+//#endregion
+export { usePickedLabels };

package/dist/data/api-provider.d.ts

@@ -56,6 +56,7 @@ export declare const useClient: () => {
   form: (name: string) => Promise<import("@protobase/client").PublicForm>;
   formChallenge: (name: string) => Promise<import("@protobase/client").FormChallenge>;
   submitForm: (name: string, values: Record<string, unknown>, proof: import("@protobase/client").FormProof) => Promise<void>;
+  live: (handlers: import("@protobase/client").LiveHandlers) => () => void;
 };
 /**
  * The client of the API that serves `resource`: a source's for a resource the app draws from one, the app's own
@@ -114,6 +115,7 @@ export declare const useResourceClient: (resource: string) => {
   form: (name: string) => Promise<import("@protobase/client").PublicForm>;
   formChallenge: (name: string) => Promise<import("@protobase/client").FormChallenge>;
   submitForm: (name: string, values: Record<string, unknown>, proof: import("@protobase/client").FormProof) => Promise<void>;
+  live: (handlers: import("@protobase/client").LiveHandlers) => () => void;
 };
 export type ApiProviderProps = {
   /** Defaults to `/api/v1` on the current origin. */

package/dist/data/focus-refresh.js

@@ -9,6 +9,8 @@ const createFocusRefresh = () => {
 	let paused = 0;
 	return {
 		refetchOnWindowFocus: () => paused > 0 ? false : "always",
+		/** Whether a form on screen holds unsaved changes, so its record must not be read again under it. */
+		paused: () => paused > 0,
 		/** Holds the refetches until the returned function is called. */
 		pause: () => {
 			paused += 1;

package/dist/data/live-refresh.js

@@ -0,0 +1,29 @@
+/**
+* Reads again what the page shows of the resources whose records changed: every query keyed by the resource, as after
+* a write of the page's own. While a form holds unsaved changes (`paused`), the records stay as they are, only marked
+* stale, so the form's Save still finds a conflict.
+*/
+const liveRefresh = (queryClient, paused) => {
+	const pending = /* @__PURE__ */ new Set();
+	let timer;
+	const flush = () => {
+		timer = void 0;
+		const resources = new Set(pending);
+		pending.clear();
+		const shown = (key) => resources.has(key[1]);
+		queryClient.invalidateQueries({ predicate: (query) => shown(query.queryKey) && query.queryKey[0] !== "record" });
+		queryClient.invalidateQueries({
+			predicate: (query) => shown(query.queryKey) && query.queryKey[0] === "record",
+			refetchType: paused() ? "none" : "active"
+		});
+	};
+	return {
+		changed: (resources) => {
+			for (const resource of resources) pending.add(resource);
+			if (pending.size > 0 && !timer) timer = setTimeout(flush, 300);
+		},
+		stop: () => clearTimeout(timer)
+	};
+};
+//#endregion
+export { liveRefresh };

package/dist/data/query-keys.js

@@ -126,6 +126,12 @@ const keys = {
 		resource,
 		ids
 	],
+	/** The names of the records a `RecordPicker` holds. */
+	pickedLabels: (resource, ids) => [
+		"picked-labels",
+		resource,
+		ids
+	],
 	count: (resource, filter) => [
 		"count",
 		resource,

package/dist/data/use-live-updates.js

@@ -0,0 +1,36 @@
+import { FocusRefreshContext } from "./focus-refresh.js";
+import { useClient } from "./api-provider.js";
+import { liveRefresh } from "./live-refresh.js";
+import { sourceStatusOf } from "./with-sources.js";
+import { useContext, useEffect, useMemo } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+//#region src/data/use-live-updates.ts
+/**
+* Keeps what the page shows of the app's `.live()` resources current: hears which records change (`client.live`) and
+* reads again the lists, records and counts of their resources. Connects only when the caller reads a live resource.
+*/
+const useLiveUpdates = (meta) => {
+	const client = useClient();
+	const queryClient = useQueryClient();
+	const focusRefresh = useContext(FocusRefreshContext);
+	const live = useMemo(() => Object.values(meta.resources).filter((model) => model.live && !sourceStatusOf(meta, model.name)).map((model) => model.name).sort().join(","), [meta]);
+	useEffect(() => {
+		if (!live) return;
+		const refresh = liveRefresh(queryClient, () => focusRefresh?.paused() ?? false);
+		const stop = client.live({
+			onChanges: (changes) => refresh.changed(changes.map((change) => change.resource)),
+			onResync: () => refresh.changed(live.split(","))
+		});
+		return () => {
+			stop();
+			refresh.stop();
+		};
+	}, [
+		client,
+		queryClient,
+		focusRefresh,
+		live
+	]);
+};
+//#endregion
+export { useLiveUpdates };

package/dist/filter-panel/facet-combobox.js

@@ -1,9 +1,10 @@
 import { cn } from "../lib/cn.js";
 import { formatInt } from "../format/number.js";
+import { Token } from "../primitives/token.js";
 import { facetLabel } from "./filter-state.js";
 import { comboboxOptions, moveActive } from "./combobox-options.js";
 import { useEffect, useId, useRef, useState } from "react";
-import { Check, Search, X } from "lucide-react";
+import { Check, Search } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/filter-panel/facet-combobox.tsx
 /** Chooses several values of a facet: the choices sit in the box as removable tokens, typing searches the options. */
@@ -50,19 +51,9 @@ const FacetCombobox = ({ config, selected, onToggle, inline = false }) => {
 			onClick: () => input.current?.focus(),
 			children: [
 				/* @__PURE__ */ jsx(Search, { className: "size-3.5 shrink-0 text-muted-foreground" }),
-				selected.map((value) => /* @__PURE__ */ jsxs("span", {
-					className: "inline-flex h-5 max-w-full items-center gap-0.5 rounded bg-primary-soft pl-1.5 pr-0.5 text-xs font-medium text-primary-text",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "truncate",
-						children: facetLabel(config, value)
-					}), /* @__PURE__ */ jsx("button", {
-						type: "button",
-						"aria-label": `Remove ${facetLabel(config, value)}`,
-						className: "rounded p-0.5 hover:bg-primary-border/60",
-						onMouseDown: (event) => event.preventDefault(),
-						onClick: () => onToggle(value),
-						children: /* @__PURE__ */ jsx(X, { className: "size-3" })
-					})]
+				selected.map((value) => /* @__PURE__ */ jsx(Token, {
+					label: facetLabel(config, value),
+					onRemove: () => onToggle(value)
 				}, value)),
 				/* @__PURE__ */ jsx("input", {
 					ref: input,

package/dist/index.d.ts

@@ -59,5 +59,6 @@ import { Field, FieldProps } from "./record-view/field.js";
 import { useFieldControl } from "./primitives/field-control.js";
 import { Section } from "./record-view/section.js";
 import { Form, FormProps } from "./app/create/form.js";
+import { RecordPicker, RecordPickerProps } from "./app/record-picker.js";
 import { Spinner } from "./primitives/spinner.js";
-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, useFieldControl, 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, RecordPicker, type RecordPickerProps, 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, useFieldControl, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useResourceClient, useSeries, useUpdateRecord };

package/dist/index.js

@@ -50,4 +50,5 @@ 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, 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, useFieldControl, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useResourceClient, useSeries, useUpdateRecord };
+import { RecordPicker } from "./app/record-picker.js";
+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, RecordPicker, 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, useFieldControl, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useResourceClient, useSeries, useUpdateRecord };

package/dist/package.js

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

package/dist/primitives/token.js

@@ -0,0 +1,20 @@
+import { X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/primitives/token.tsx
+/** A chosen value as a small token with a button that takes it off; the button keeps the focus where it is. */
+const Token = ({ label, onRemove }) => /* @__PURE__ */ jsxs("span", {
+	className: "inline-flex h-5 max-w-full items-center gap-0.5 rounded bg-primary-soft pl-1.5 pr-0.5 text-xs font-medium text-primary-text",
+	children: [/* @__PURE__ */ jsx("span", {
+		className: "truncate",
+		children: label
+	}), /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": `Remove ${label}`,
+		className: "rounded p-0.5 hover:bg-primary-border/60",
+		onMouseDown: (event) => event.preventDefault(),
+		onClick: onRemove,
+		children: /* @__PURE__ */ jsx(X, { className: "size-3" })
+	})]
+});
+//#endregion
+export { Token };