@protobase/ui 0.23.1 → 0.23.3

package/dist/app/record-page.js

@@ -13,6 +13,7 @@ import { Field } from "../record-view/field.js";
 import { Section } from "../record-view/section.js";
 import { MetadataCard } from "../record-view/record-sidebar.js";
 import { RecordHeader } from "../record-view/record-header.js";
+import { markdownExcerpt } from "../markdown/markdown-excerpt.js";
 import { isMarkdown } from "../markdown/markdown-hint.js";
 import { recordTitle } from "../live/model-helpers.js";
 import { contactFormat } from "../live/contact-links.js";
@@ -32,7 +33,6 @@ import { ErrorBanner } from "./error-banner.js";
 import { useProjectUi } from "./pages/project-ui.js";
 import { shownWidget } from "./field-types/shown-widget.js";
 import { WidgetPart } from "./field-types/widget-part.js";
-import { Markdown } from "../markdown/markdown.js";
 import { ContactLink } from "../live/contact-link.js";
 import { FieldEditor } from "./field-editor.js";
 import { fieldMessage } from "./field-errors.js";
@@ -303,25 +303,24 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 				label: hint(name)?.label ?? humanize(name),
 				value: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" })
 			}];
-			const text = displayValue(field, stored.record[name], hint(name));
 			const value = stored.record[name];
-			const markdown = isMarkdown(field, hint(name)) && typeof value === "string" && value !== "";
+			const text = isMarkdown(field, hint(name)) && typeof value === "string" && value !== "" ? markdownExcerpt(value) : displayValue(field, value, hint(name));
 			const contact = field.type === "text" && typeof value === "string" && value !== "" ? contactFormat(hint(name)) : void 0;
 			const builtIn = field.type === "enum" ? /* @__PURE__ */ jsx(ValueBadge, {
 				value,
 				hints: hint(name),
 				children: text
-			}) : markdown ? /* @__PURE__ */ jsx(Markdown, { source: value }) : contact ? /* @__PURE__ */ jsx(ContactLink, {
+			}) : contact ? /* @__PURE__ */ jsx(ContactLink, {
 				format: contact,
 				value: text
 			}) : /* @__PURE__ */ jsx("strong", {
 				title: valueTitle(field, value, void 0, hint(name)),
-				className: hint(name)?.multiline ? "whitespace-pre-line break-words" : void 0,
 				children: text
 			});
 			const shown = shownWidget(fieldTypes, field, hint(name));
 			return [{
 				label: hint(name)?.label ?? humanize(name),
+				title: text,
 				value: shown ? /* @__PURE__ */ jsx(WidgetPart, {
 					shown,
 					part: "display",

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/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/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.1";
+var version = "0.23.3";
 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 };

package/dist/record-view/record-sidebar.js

@@ -2,14 +2,15 @@ import "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/record-view/record-sidebar.tsx
 const MetadataList = ({ rows }) => /* @__PURE__ */ jsx("dl", {
-	className: "grid grid-cols-[auto_1fr] gap-x-4 gap-y-2",
+	className: "grid grid-cols-[auto_minmax(0,1fr)] gap-x-4 gap-y-2",
 	children: rows.map((row) => /* @__PURE__ */ jsxs("div", {
 		className: "contents",
 		children: [/* @__PURE__ */ jsx("dt", {
 			className: "text-muted-foreground",
 			children: row.label
 		}), /* @__PURE__ */ jsx("dd", {
-			className: "text-right tabular-nums text-foreground",
+			title: row.title,
+			className: "truncate text-right tabular-nums text-foreground",
 			children: row.value
 		})]
 	}, row.label))