@protobase/ui 0.14.1 → 0.14.3

package/dist/auth/sign-in-prompt.js

@@ -0,0 +1,84 @@
+import { useAuth } from "./auth-provider.js";
+import { Button, buttonClass } from "../primitives/button.js";
+import { namedIcon } from "../app/named-icon.js";
+import { ResponsiveDialog } from "../primitives/responsive-dialog.js";
+import { useId } from "react";
+import { Check, LogIn } from "lucide-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/auth/sign-in-prompt.tsx
+const Benefits = ({ benefits }) => benefits && benefits.length > 0 ? /* @__PURE__ */ jsx("ul", {
+	className: "flex flex-col gap-2 text-left text-[13px]",
+	children: benefits.map((benefit) => /* @__PURE__ */ jsxs("li", {
+		className: "flex items-start gap-2",
+		children: [/* @__PURE__ */ jsx(Check, {
+			className: "mt-0.5 size-4 shrink-0 text-primary",
+			"aria-hidden": true
+		}), benefit]
+	}, benefit))
+}) : null;
+const Actions = ({ prompt }) => {
+	const { showSignIn } = useAuth();
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [prompt.signUp && /* @__PURE__ */ jsx("a", {
+		href: prompt.signUp.href,
+		target: "_blank",
+		rel: "noreferrer",
+		className: buttonClass(),
+		children: prompt.signUp.label
+	}), /* @__PURE__ */ jsx(Button, {
+		variant: "primary",
+		onClick: showSignIn,
+		children: "Sign in"
+	})] });
+};
+/**
+* What a visitor who is not signed in is told about something they could use once signed in: the prompt's title, what
+* signing in gives and its benefits, with "Sign in" and, when the prompt names one, a page to make an account. As a page
+* it stands in for a list the visitor cannot see; as a dialog it answers a press on a button that needs an account.
+*/
+const SignInPrompt = (props) => {
+	const { prompt } = props;
+	const heading = useId();
+	if (props.as === "dialog") return /* @__PURE__ */ jsx(ResponsiveDialog, {
+		title: prompt.title,
+		description: prompt.description,
+		open: props.open,
+		onClose: props.onClose,
+		actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+			onClick: props.onClose,
+			children: "Not now"
+		}), /* @__PURE__ */ jsx(Actions, { prompt })] }),
+		children: /* @__PURE__ */ jsx(Benefits, { benefits: prompt.benefits })
+	});
+	const Icon = namedIcon(prompt.icon) ?? LogIn;
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-labelledby": heading,
+		className: "mx-auto flex w-full max-w-md flex-col items-center gap-4 px-5 py-10 text-center sm:py-16",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "flex size-12 items-center justify-center rounded-full bg-primary/10 text-primary",
+				children: /* @__PURE__ */ jsx(Icon, {
+					className: "size-6",
+					"aria-hidden": true
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1.5",
+				children: [/* @__PURE__ */ jsx("h1", {
+					id: heading,
+					className: "text-lg font-semibold",
+					children: prompt.title
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-[13px] text-muted-foreground",
+					children: prompt.description
+				})]
+			}),
+			/* @__PURE__ */ jsx(Benefits, { benefits: prompt.benefits }),
+			/* @__PURE__ */ jsx("div", {
+				className: "mt-2 flex w-full flex-col-reverse gap-2 sm:w-auto sm:flex-row sm:justify-center [&>*]:min-h-11 sm:[&>*]:min-h-0",
+				children: /* @__PURE__ */ jsx(Actions, { prompt })
+			})
+		]
+	});
+};
+//#endregion
+export { SignInPrompt };

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

@@ -20,6 +20,7 @@ export declare const useClient: () => {
   facets: (resource: import("@protobase/client").ResourceRef, field: string, o?: {
     filter?: import("@protobase/client").FilterInput;
     limit?: number;
+    label?: string;
   }) => Promise<import("@protobase/client").Facet[]>;
   series: (resource: import("@protobase/client").ResourceRef, params: import("@protobase/client").SeriesParams & {
     filter?: import("@protobase/client").FilterInput;
@@ -59,6 +60,7 @@ export declare const useResourceClient: (resource: string) => {
   facets: (resource: import("@protobase/client").ResourceRef, field: string, o?: {
     filter?: import("@protobase/client").FilterInput;
     limit?: number;
+    label?: string;
   }) => Promise<import("@protobase/client").Facet[]>;
   series: (resource: import("@protobase/client").ResourceRef, params: import("@protobase/client").SeriesParams & {
     filter?: import("@protobase/client").FilterInput;

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

@@ -1,5 +1,5 @@
 import { PluginRef, ResourcePermissions, SourceRef } from "@protobase/client";
-import { BottomBarModel, ResourceModel, UserMenuModel, ViewModel } from "@protobase/schema";
+import { BottomBarModel, ResourceModel, SignInViewModel, UserMenuModel, ViewModel } from "@protobase/schema";
 import { PageModel } from "@protobase/layout";
 //#region src/data/meta-data.d.ts
 export type MetaData = {
@@ -10,6 +10,8 @@ export type MetaData = {
   pages: Record<string, PageModel>;
   permissions: Record<string, ResourcePermissions>;
   userMenu?: UserMenuModel;
+  /** For a visitor, the resources they could use once signed in, by name, with what to tell them (see `SignInPrompt`). */
+  signIn?: Record<string, SignInViewModel>;
   /** The tabs of the user's bottom bar on phones, when one names their active role. */
   bottomBar?: Omit<BottomBarModel, 'roles'>;
   /** The assistant backend, when the app has one and the user has the admin or ai role. */

package/dist/data/query-keys.js

@@ -101,11 +101,6 @@ const keys = {
 		resource,
 		key,
 		path
-	],
-	labelMap: (resource, ids) => [
-		"label-map",
-		resource,
-		ids
 	]
 };
 //#endregion

package/dist/data/use-meta.js

@@ -31,6 +31,7 @@ const useMeta = () => {
 				pages: Object.fromEntries((result.meta.pages ?? []).map((model) => [model.name, model])),
 				permissions: result.meta.permissions ?? {},
 				...result.meta.userMenu && { userMenu: result.meta.userMenu },
+				...result.meta.signIn && { signIn: Object.fromEntries(result.meta.signIn.map((entry) => [entry.resource, entry])) },
 				...result.meta.bottomBar && { bottomBar: result.meta.bottomBar },
 				...result.meta.assistant && { assistant: result.meta.assistant },
 				...result.meta.runtime && { runtime: result.meta.runtime },

package/dist/index.d.ts

@@ -20,6 +20,8 @@ import { ListDisplayRow, RecordCardProps } from "./app/displays/list-displays.js
 import { ListDisplay, useListDisplay } from "./app/displays/display-context.js";
 import { RecordLink } from "./app/displays/record-link.js";
 import { useApiToken } from "./auth/use-api-token.js";
+import { SignInPrompt, SignInPromptProps } from "./auth/sign-in-prompt.js";
+import { ResponsiveDialog, ResponsiveDialogProps } from "./primitives/responsive-dialog.js";
 import { AssistantDock, AssistantDockProps } from "./assistant-dock/assistant-dock.js";
 import { PartView } from "./assistant-dock/part-view.js";
 import { useAssistant } from "./assistant-dock/use-assistant.js";
@@ -39,4 +41,4 @@ import { Step, StepList, StepState } from "./step-list/step-list.js";
 import { DiffView, DiffViewProps } from "./diff-view/diff-view.js";
 import { DiffLine, diffStats, parseDiff } from "./diff-view/diff.js";
 import { CompactTable, CompactTableProps } from "./compact-table/compact-table.js";
-export { ActionCard, type ActionCardProps, type ActionContext, type ActionHandler, ApiProvider, type ApiProviderProps, App, AppLink, type AppProps, AssistantDock, type AssistantDockProps, type BackendData, type BackendRefresh, type CardAction, type CardTone, ChatMessage, ChatThread, type ChatThreadProps, CompactTable, type CompactTableProps, Composer, type ComposerProps, type CurrentAddress, type DiffLine, DiffView, type DiffViewProps, FieldList, type FieldWidget, type FieldWidgetEditorProps, type FieldWidgetProps, type LayoutRecord, type ListAddress, type ListChange, type ListDisplay, type ListDisplayRow, type MetaData, PartView, type PluginInfo, type ProjectUi, type RecordCardProps, RecordLink, SidePanel, type SidePanelProps, type Step, StepList, type StepState, 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, ApiProvider, type ApiProviderProps, App, AppLink, type AppProps, AssistantDock, type AssistantDockProps, type BackendData, type BackendRefresh, type CardAction, type CardTone, ChatMessage, ChatThread, type ChatThreadProps, CompactTable, type CompactTableProps, Composer, type ComposerProps, type CurrentAddress, type DiffLine, DiffView, type DiffViewProps, FieldList, type FieldWidget, type FieldWidgetEditorProps, type FieldWidgetProps, type LayoutRecord, type ListAddress, type ListChange, type ListDisplay, type ListDisplayRow, type MetaData, PartView, type PluginInfo, type ProjectUi, type RecordCardProps, RecordLink, ResponsiveDialog, type ResponsiveDialogProps, SidePanel, type SidePanelProps, SignInPrompt, type SignInPromptProps, type Step, StepList, type StepState, 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

@@ -19,6 +19,8 @@ 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 { AppLink, useAppAddress } from "./app/use-app-address.js";
+import { ResponsiveDialog } from "./primitives/responsive-dialog.js";
+import { SignInPrompt } from "./auth/sign-in-prompt.js";
 import { useListDisplay } from "./app/displays/display-context.js";
 import { useFacets, useHistogram, useSeries } from "./data/use-aggregates.js";
 import { useLayoutRecord } from "./app/pages/record-scope.js";
@@ -30,4 +32,4 @@ import { useList } from "./data/use-list.js";
 import { isConflict, useUpdateRecord } from "./data/use-update-record.js";
 import { App } from "./app/app.js";
 import { RecordLink } from "./app/displays/record-link.js";
-export { ActionCard, ApiProvider, App, AppLink, AssistantDock, ChatMessage, ChatThread, CompactTable, Composer, DiffView, FieldList, PartView, RecordLink, SidePanel, StepList, 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, ApiProvider, App, AppLink, AssistantDock, ChatMessage, ChatThread, CompactTable, Composer, DiffView, FieldList, PartView, RecordLink, ResponsiveDialog, SidePanel, SignInPrompt, StepList, 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/grid-loader.js

@@ -1,6 +1,7 @@
 import { keys } from "../data/query-keys.js";
 import { recordId } from "./model-helpers.js";
-import { withLabels } from "./relation-labels.js";
+import { listLabels, withLabels } from "./relation-labels.js";
+import { listPhotos, withPhotos } from "./row-photos.js";
 //#region src/live/grid-loader.ts
 const exactBelow = 5e3;
 /**
@@ -10,6 +11,8 @@ const exactBelow = 5e3;
 */
 const createGridLoader = ({ queryClient, client, resources, views, model, columns, filter, orderBy }) => {
 	const pageKey = (number) => keys.page(model.name, filter, orderBy, 40, number);
+	const labels = listLabels(resources, views, model, columns);
+	const photos = listPhotos(views[model.name]);
 	/** The server's total is a planner estimate, off by a lot for small results; settle those exactly. */
 	const firstPageTotal = async (result) => {
 		if (result.nextPageToken === "") return result.items.length;
@@ -40,7 +43,9 @@ const createGridLoader = ({ queryClient, client, resources, views, model, column
 		const params = {
 			filter,
 			orderBy,
-			pageSize: 40
+			pageSize: 40,
+			labels,
+			photos
 		};
 		const result = token !== void 0 ? await client.list(model.name, {
 			...params,
@@ -56,7 +61,7 @@ const createGridLoader = ({ queryClient, client, resources, views, model, column
 		};
 		const ids = result.items.map((record) => recordId(model, record));
 		return {
-			rows: (await withLabels(queryClient, client, resources, views, model, columns, result.items)).map((record, index) => ({
+			rows: withLabels(resources, model, columns, withPhotos(model, result.items, result.photos), result.labels).map((record, index) => ({
 				...record,
 				id: ids[index]
 			})),

package/dist/live/reference-options.js

@@ -8,7 +8,7 @@ const matchOptions = (matches, counted) => {
 		...counts.get(value) !== void 0 && { count: counts.get(value) }
 	}));
 };
-/** The keys a facet needs names for: the values it counted and those chosen, which may lie outside the counted ones. */
-const labelKeys = (counted, chosen) => [.../* @__PURE__ */ new Set([...counted, ...chosen])];
+/** The keys a facet still needs names for: the counted values come named, but a chosen one may lie outside them. */
+const labelKeys = (counted, chosen) => [...new Set(chosen.filter((value) => !counted.includes(value)))];
 //#endregion
 export { labelKeys, matchOptions };

package/dist/live/relation-labels.js

@@ -22,32 +22,30 @@ const fetchLabels = async (queryClient, client, target, ids, view) => {
 	});
 	return new Map(entries);
 };
-/** Replaces each relation value with `{ id, name }` so grid cells can show the name. */
-const withLabels = async (queryClient, client, resources, views, model, columns, rows) => {
-	const relations = columns.flatMap((name) => {
-		const field = model.fields[name];
-		const target = field?.type === "relation" && field.relation ? resources[field.relation.resource] : void 0;
-		return target ? [{
-			name,
-			target
-		}] : [];
-	});
-	const resolved = await Promise.all(relations.map(async ({ name, target }) => {
-		const ids = rows.flatMap((row) => row[name] == null ? [] : [String(row[name])]);
-		return [name, await fetchLabels(queryClient, client, target, ids, views[target.name])];
-	}));
-	const labels = new Map(resolved);
+const relationColumns = (resources, model, columns) => columns.flatMap((name) => {
+	const field = model.fields[name];
+	const target = field?.type === "relation" && field.relation ? resources[field.relation.resource] : void 0;
+	return target ? [{
+		name,
+		target
+	}] : [];
+});
+/** What a list call asks `labels` for: each relation among `columns` to a single-key resource, by the field that names its records. */
+const listLabels = (resources, views, model, columns) => Object.fromEntries(relationColumns(resources, model, columns).filter(({ target }) => target.primaryKey.length === 1).map(({ name, target }) => [name, labelFieldOf(target, views[target.name])]));
+/** Replaces each relation value among `columns` with `{ id, name }`, named by the list call's `labels`, else by its key. */
+const withLabels = (resources, model, columns, rows, labels = {}) => {
+	const relations = relationColumns(resources, model, columns);
 	return rows.map((row) => {
 		const next = { ...row };
-		for (const [name, names] of labels) {
+		for (const { name } of relations) {
 			if (row[name] == null) continue;
 			next[name] = {
 				id: row[name],
-				name: names.get(String(row[name])) ?? String(row[name])
+				name: labels[name]?.[String(row[name])] ?? String(row[name])
 			};
 		}
 		return next;
 	});
 };
 //#endregion
-export { fetchLabels, withLabels };
+export { fetchLabels, listLabels, withLabels };

package/dist/live/row-photos.js

@@ -0,0 +1,18 @@
+//#region src/live/row-photos.ts
+/** Where a loaded row keeps its photos, beside its fields, as it keeps its `id`. */
+const photosKey = "$photos";
+/** The photos a list's rows load with: those its cards displays name, which the server checks they all share. */
+const listPhotos = (view) => {
+	for (const display of view?.list?.displays ?? []) if (display.kind === "cards" && display.photos) return display.photos;
+};
+/** The rows, each with its record's photos from a list call's `photos`, when the call asked for them; none for a record it left out. */
+const withPhotos = (model, rows, photos) => {
+	if (photos === void 0 || model.primaryKey.length !== 1) return rows;
+	const key = model.primaryKey[0];
+	return rows.map((row) => ({
+		...row,
+		[photosKey]: photos[String(row[key])] ?? []
+	}));
+};
+//#endregion
+export { listPhotos, photosKey, withPhotos };

package/dist/live/use-filter-config.js

@@ -1,6 +1,7 @@
 import { formatMoney } from "../format/money.js";
 import { keys } from "../data/query-keys.js";
 import { useClient } from "../data/api-provider.js";
+import { labelFieldOf } from "./model-helpers.js";
 import { humanize } from "./naming.js";
 import { fetchLabels } from "./relation-labels.js";
 import { setRange } from "../filter-panel/filter-state.js";
@@ -37,11 +38,14 @@ const useFilterConfig = ({ model, resources, views, view, state, extras }) => {
 				[group]: []
 			}
 		}, extras);
+		const target = targetOf(field);
+		const label = target?.primaryKey.length === 1 ? labelFieldOf(target, views[target.name]) : void 0;
 		return {
 			queryKey: keys.facets(model.name, field, filter),
 			queryFn: () => client.facets(model.name, field, {
 				filter,
-				limit: 50
+				limit: 50,
+				...label && { label }
 			})
 		};
 	}) });
@@ -84,7 +88,8 @@ const useFilterConfig = ({ model, resources, views, view, state, extras }) => {
 			};
 		}
 		const field = model.fields[group.id];
-		const names = new Map(labelQueries[index]?.data ?? []);
+		const named = (counts(group.id, group.id) ?? []).flatMap((facet) => facet.label === void 0 ? [] : [[String(facet.value), facet.label]]);
+		const names = new Map([...named, ...labelQueries[index]?.data ?? []]);
 		const values = (counts(group.id, group.id) ?? []).flatMap((facet) => facet.value === null ? [] : [{
 			value: String(facet.value),
 			label: field?.type === "enum" ? enumLabel(String(facet.value), view?.fields[group.id]?.valueLabels) : names.get(String(facet.value)) ?? String(facet.value),

package/dist/package.js

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

package/dist/primitives/button.js

@@ -12,12 +12,17 @@ const sizes = {
 	sm: "h-7 px-2.5 text-xs gap-1.5",
 	md: "h-8 px-3 text-[13px] gap-2"
 };
+/** A button's classes, for a link that looks like one. */
+const buttonClass = ({ variant = "secondary", size = "md" } = {}) => cn("inline-flex shrink-0 items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-60 disabled:cursor-default", variants[variant], sizes[size]);
 const Button = ({ variant = "secondary", size = "md", loading, className, children, disabled, ...rest }) => /* @__PURE__ */ jsxs("button", {
 	type: "button",
 	disabled: disabled || loading,
-	className: cn("inline-flex shrink-0 items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-60 disabled:cursor-default", variants[variant], sizes[size], className),
+	className: cn(buttonClass({
+		variant,
+		size
+	}), className),
 	...rest,
 	children: [loading && /* @__PURE__ */ jsx(Spinner, { className: "size-3.5" }), children]
 });
 //#endregion
-export { Button };
+export { Button, buttonClass };

package/dist/primitives/dialog.js

@@ -30,7 +30,7 @@ const Dialog = ({ title, description, onClose, actions, children }) => {
 					children
 				}),
 				/* @__PURE__ */ jsx("div", {
-					className: "mt-5 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end [&>button]:min-h-11 sm:[&>button]:min-h-0",
+					className: "mt-5 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end [&>*]:min-h-11 sm:[&>*]:min-h-0",
 					children: actions
 				})
 			]

package/dist/primitives/responsive-dialog.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+//#region src/primitives/responsive-dialog.d.ts
+export type ResponsiveDialogProps = {
+  title: string;
+  description?: ReactNode;
+  open: boolean;
+  onClose: () => void;
+  /** Buttons: right-aligned in the modal, stacked full width at the bottom of the sheet. */
+  actions: ReactNode;
+  children?: ReactNode;
+};
+/**
+ * A modal centred on the screen from the `md` breakpoint up, and a sheet rising from the bottom on a phone, switching as
+ * the viewport does. Both close on Escape and on a press outside, and keep focus inside while open.
+ */
+export declare const ResponsiveDialog: ({ title, description, open, onClose, actions, children }: ResponsiveDialogProps) => import("react").JSX.Element | null;
+//#endregion

package/dist/primitives/responsive-dialog.js

@@ -0,0 +1,44 @@
+import { useIsDesktop } from "../lib/use-media-query.js";
+import { Dialog } from "./dialog.js";
+import { Sheet } from "./sheet.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/primitives/responsive-dialog.tsx
+/**
+* A modal centred on the screen from the `md` breakpoint up, and a sheet rising from the bottom on a phone, switching as
+* the viewport does. Both close on Escape and on a press outside, and keep focus inside while open.
+*/
+const ResponsiveDialog = ({ title, description, open, onClose, actions, children }) => {
+	const desktop = useIsDesktop();
+	if (!open) return null;
+	if (desktop) return /* @__PURE__ */ jsx(Dialog, {
+		title,
+		description,
+		onClose,
+		actions,
+		children
+	});
+	return /* @__PURE__ */ jsx(Sheet, {
+		title,
+		open: true,
+		onClose,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "pt-3 text-[13px]",
+			children: [
+				description && /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground",
+					children: description
+				}),
+				children && /* @__PURE__ */ jsx("div", {
+					className: "mt-4",
+					children
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "mt-5 flex flex-col-reverse gap-2 [&>*]:min-h-11",
+					children: actions
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { ResponsiveDialog };