@protobase/ui 0.4.1 → 0.6.0

package/dist/account/account-security-page.js

@@ -1,23 +1,36 @@
 import { Spinner } from "../primitives/spinner.js";
 import { PageHeader } from "../app-shell/page-header.js";
-import { authMessage } from "../auth/auth-messages.js";
+import { authMessage, providerMessage } from "../auth/auth-messages.js";
+import { readProviderError, withoutSignInLink } from "../auth/provider-link.js";
 import { useAuth } from "../auth/auth-provider.js";
 import { PasskeysSection } from "./passkeys-section.js";
+import { SignInProvidersSection } from "./sign-in-providers-section.js";
 import { TwoFactorSection } from "./two-factor-section.js";
 import { useCallback, useEffect, useState } from "react";
 import { AuthError } from "@protobase/client";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/account/account-security-page.tsx
-/** The signed-in person's passkeys and two-factor authentication, within what the sign-in policy allows. */
+const takeLinkError = () => {
+	const code = readProviderError(window.location.href);
+	if (code) window.history.replaceState(window.history.state, "", withoutSignInLink(window.location.href));
+	return code;
+};
+/** The signed-in person's passkeys, two-factor authentication and connected accounts, within what the sign-in policy allows. */
 const AccountSecurityPage = ({ email }) => {
-	const { session } = useAuth();
+	const { session, signInProviders, linkProvider } = useAuth();
 	const { account } = session;
 	const [loaded, setLoaded] = useState();
 	const [error, setError] = useState();
+	const [linkError] = useState(takeLinkError);
 	const reload = useCallback(() => {
-		Promise.all([account.signInMethods(), account.passkeys()]).then(([methods, passkeys]) => setLoaded({
+		Promise.all([
+			account.signInMethods(),
+			account.passkeys(),
+			account.linkedProviders()
+		]).then(([methods, passkeys, linked]) => setLoaded({
 			methods,
-			passkeys
+			passkeys,
+			linked
 		}), (failure) => setError(failure instanceof AuthError ? authMessage(failure) : "Could not read your sign-in methods"));
 	}, [account]);
 	useEffect(reload, [reload]);
@@ -27,25 +40,34 @@ const AccountSecurityPage = ({ email }) => {
 		children: [/* @__PURE__ */ jsx(PageHeader, {
 			title: "Sign-in & security",
 			subtitle: email
-		}), loaded ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PasskeysSection, {
-			rule: loaded.methods.policy.passkey,
-			passkeys: loaded.passkeys,
-			onAdd: () => thenReload(account.addPasskey()),
-			onRename: (id, name) => thenReload(account.renamePasskey(id, name)),
-			onRemove: (id) => thenReload(account.removePasskey(id))
-		}), /* @__PURE__ */ jsx(TwoFactorSection, {
-			rule: loaded.methods.policy.twoFactor,
-			enabled: loaded.methods.account.twoFactor,
-			authenticatorApp: loaded.methods.account.authenticatorApp,
-			mail: loaded.methods.mail,
-			needsPassword: loaded.methods.account.password,
-			onStartApp: (password) => account.startAuthenticatorApp(password),
-			onConfirmApp: (code) => account.confirmAuthenticatorApp(code),
-			onEmailedCodes: (password) => account.turnOnEmailedCodes(password),
-			onTurnOff: (password) => account.turnOffTwoFactor(password),
-			onNewBackupCodes: (password) => account.newBackupCodes(password),
-			onChanged: reload
-		})] }) : error ? /* @__PURE__ */ jsx("p", {
+		}), loaded ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(PasskeysSection, {
+				rule: loaded.methods.policy.passkey,
+				passkeys: loaded.passkeys,
+				onAdd: () => thenReload(account.addPasskey()),
+				onRename: (id, name) => thenReload(account.renamePasskey(id, name)),
+				onRemove: (id) => thenReload(account.removePasskey(id))
+			}),
+			/* @__PURE__ */ jsx(TwoFactorSection, {
+				rule: loaded.methods.policy.twoFactor,
+				enabled: loaded.methods.account.twoFactor,
+				authenticatorApp: loaded.methods.account.authenticatorApp,
+				mail: loaded.methods.mail,
+				needsPassword: loaded.methods.account.password,
+				onStartApp: (password) => account.startAuthenticatorApp(password),
+				onConfirmApp: (code) => account.confirmAuthenticatorApp(code),
+				onEmailedCodes: (password) => account.turnOnEmailedCodes(password),
+				onTurnOff: (password) => account.turnOffTwoFactor(password),
+				onNewBackupCodes: (password) => account.newBackupCodes(password),
+				onChanged: reload
+			}),
+			signInProviders.length > 0 && /* @__PURE__ */ jsx(SignInProvidersSection, {
+				providers: signInProviders,
+				linked: loaded.linked,
+				onConnect: linkProvider,
+				error: linkError && providerMessage(linkError, signInProviders.length === 1 ? signInProviders[0].name : "the provider")
+			})
+		] }) : error ? /* @__PURE__ */ jsx("p", {
 			role: "alert",
 			className: "text-[13px] text-danger-text",
 			children: error

package/dist/account/sign-in-policy-form.js

@@ -22,15 +22,25 @@ const rowNote = ({ method }, draft, { mail, effective, policy }) => {
 	if (method === "emailCode" && !mail) return "Needs mail settings (PROTOBASE_SMTP_URL and PROTOBASE_MAIL_FROM): off until they are set.";
 	if (method === "password" && !mail && draft.password === "forbidden") return "Without mail settings, password sign-in stays on so nobody is locked out.";
 	if (method === "staffAccess" && !mail && draft.staffAccess === "notify") return "Needs mail settings (PROTOBASE_SMTP_URL and PROTOBASE_MAIL_FROM): staff cannot sign in until they are set.";
+	if (method === "platformSignIn" && draft.platformSignIn === "allowed" && (draft.passkey === "required" || draft.twoFactor === "required")) return "Off while passkeys or two-factor authentication are required: it skips the second step.";
 	if (draft[method] === policy[method] && effective[method] !== policy[method]) return `Applies as ${ruleLabel(method, effective[method])} for now.`;
 };
+const rowsFor = ({ operator, platformSignIn }) => policyRows.flatMap((row) => {
+	if (row.method === "staffAccess" && !operator) return [];
+	if (row.method === "platformSignIn") return platformSignIn ? [{
+		...row,
+		label: `Sign in with ${platformSignIn} through the platform`
+	}] : [];
+	return [row];
+});
 /**
 * The admin's sign-in policy: for each way to sign in, whether people may use it, must set it up, or cannot use it;
-* and, when the app has an operator provider, whether its staff may sign in as people.
+* when the app has an operator provider, whether its staff may sign in as people; and when the platform adds a sign-in
+* provider, whether people may use it.
 */
 const SignInPolicyForm = ({ state, onSave, busy, error, notice }) => {
 	const [draft, setDraft] = useState(state.policy);
-	const rows = policyRows.filter(({ method }) => method !== "staffAccess" || state.operator);
+	const rows = rowsFor(state);
 	const changed = rows.some(({ method }) => draft[method] !== state.policy[method]);
 	return /* @__PURE__ */ jsxs("form", {
 		className: "flex flex-col gap-4",

package/dist/account/sign-in-policy-labels.js

@@ -64,6 +64,12 @@ const policyRows = [
 				label: "Off"
 			}
 		]
+	},
+	{
+		method: "platformSignIn",
+		label: "Sign-in through the platform",
+		description: "The sign-in provider the platform that runs this app adds, for people who have an account here already. It never creates accounts.",
+		rules: onOff
 	}
 ];
 /** The word for `rule` in `method`'s row, for example "Optional" for an allowed passkey. Every rule the server stores has one. */

package/dist/account/sign-in-providers-section.js

@@ -0,0 +1,54 @@
+import { Badge } from "../primitives/badge.js";
+import { authMessage } from "../auth/auth-messages.js";
+import { Button } from "../primitives/button.js";
+import { AccountSection, SectionError } from "./account-section.js";
+import { useState } from "react";
+import { Link2 } from "lucide-react";
+import { AuthError } from "@protobase/client";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/account/sign-in-providers-section.tsx
+/** The providers someone can sign in with besides a password, and a way to connect one whatever address it has. */
+const SignInProvidersSection = ({ providers, linked, onConnect, error: returned }) => {
+	const [busy, setBusy] = useState();
+	const [error, setError] = useState(returned);
+	const connect = async (provider) => {
+		setBusy(provider);
+		setError(void 0);
+		try {
+			await onConnect(provider);
+		} catch (failure) {
+			if (!(failure instanceof AuthError)) throw failure;
+			setError(authMessage(failure));
+			setBusy(void 0);
+		}
+	};
+	return /* @__PURE__ */ jsxs(AccountSection, {
+		title: "Connected accounts",
+		description: "Sign in with these instead of your password. Connecting one asks you to sign in there; its address may differ from yours here.",
+		children: [/* @__PURE__ */ jsx(SectionError, { message: error }), /* @__PURE__ */ jsx("ul", {
+			className: "divide-y rounded-md border",
+			children: providers.map((provider) => /* @__PURE__ */ jsxs("li", {
+				className: "flex flex-wrap items-center gap-3 px-3 py-2.5",
+				children: [
+					/* @__PURE__ */ jsx(Link2, { className: "size-4 shrink-0 text-muted-foreground" }),
+					/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1 truncate text-[13px] font-medium",
+						children: provider.name
+					}),
+					linked.includes(provider.id) ? /* @__PURE__ */ jsx(Badge, {
+						tone: "green",
+						children: "Connected"
+					}) : /* @__PURE__ */ jsxs(Button, {
+						size: "sm",
+						loading: busy === provider.id,
+						disabled: busy !== void 0,
+						onClick: () => void connect(provider.id),
+						children: ["Connect ", provider.name]
+					})
+				]
+			}, provider.id))
+		})]
+	});
+};
+//#endregion
+export { SignInProvidersSection };

package/dist/app/app.js

@@ -10,6 +10,7 @@ import { useRecord } from "../data/use-record.js";
 import { recordTitle } from "../live/model-helpers.js";
 import { humanize } from "../live/naming.js";
 import { ToastProvider } from "../toasts/toast-provider.js";
+import { useProjectUi } from "./pages/project-ui.js";
 import { AssistantButton, AssistantPanel } from "./assistant-shell.js";
 import { breadcrumbFor } from "./breadcrumb-for.js";
 import { Router, matchRoute, useRouter } from "./router.js";
@@ -18,8 +19,8 @@ import { CreatePage } from "./create/create-page.js";
 import { ListPage } from "./list-page.js";
 import { userMenuFromMeta } from "./user-menu-from-meta.js";
 import { navFromMeta } from "./nav-from-meta.js";
-import { ProjectUiProvider, useProjectUi } from "./pages/project-ui.js";
 import { ComposedPage } from "./pages/composed-page.js";
+import { ProjectUiProvider } from "./pages/project-ui-provider.js";
 import { RecordPage } from "./record-page.js";
 import { useGlobalSearch } from "./search/use-global-search.js";
 import { RuntimeUpdateButton } from "./runtime/runtime-update.js";

package/dist/app/assistant-shell.js

@@ -25,7 +25,8 @@ const ConnectedDock = ({ client, page, onClose }) => {
 		error,
 		onSend: (text) => send(text, page),
 		onAction: act,
-		onClose
+		onClose,
+		client
 	});
 };
 const OwnDock = ({ url, ...props }) => /* @__PURE__ */ jsx(ConnectedDock, {

package/dist/app/pages/merge-ui.d.ts

@@ -0,0 +1,9 @@
+import { ProjectUi } from "./project-ui.js";
+//#region src/app/pages/merge-ui.d.ts
+/**
+ * One UI config from several, each after the ones it `extends`, the last being the app's own: components and action
+ * handlers are all kept, and one name defined by two configs is an error naming both; every shell slot is drawn,
+ * the extended configs' first.
+ */
+export declare const mergeUi: (...uis: ProjectUi[]) => ProjectUi;
+//#endregion

package/dist/app/pages/merge-ui.js

@@ -0,0 +1,45 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/app/pages/merge-ui.tsx
+const flatten = (ui, label) => [...(ui.extends ?? []).flatMap((parent, index) => flatten(parent, parent.name ?? `${label} extends[${index}]`)), {
+	ui,
+	label
+}];
+const union = (kind, named, pick) => {
+	const merged = {};
+	const owners = /* @__PURE__ */ new Map();
+	for (const { ui, label } of named) for (const [name, value] of Object.entries(pick(ui) ?? {})) {
+		if (Object.hasOwn(merged, name) && merged[name] !== value) throw new Error(`${kind} "${name}" is defined twice, by ${owners.get(name)} and by ${label}; rename one of them`);
+		merged[name] = value;
+		owners.set(name, owners.get(name) ?? label);
+	}
+	return merged;
+};
+const slot = (slots) => {
+	if (slots.length <= 1) return slots[0];
+	const All = () => slots.map((Slot, index) => /* @__PURE__ */ jsx(Slot, {}, index));
+	return All;
+};
+/**
+* One UI config from several, each after the ones it `extends`, the last being the app's own: components and action
+* handlers are all kept, and one name defined by two configs is an error naming both; every shell slot is drawn,
+* the extended configs' first.
+*/
+const mergeUi = (...uis) => {
+	const named = uis.flatMap((ui, index) => flatten(ui, ui.name ?? `UI config ${index + 1}`));
+	const components = union("The component", named, (ui) => ui.components);
+	const actions = union("The action handler", named, (ui) => ui.actions);
+	const actionSlot = slot(named.flatMap(({ ui }) => ui.shell?.actions ? [ui.shell.actions] : []));
+	const rightPanel = slot(named.flatMap(({ ui }) => ui.shell?.rightPanel ? [ui.shell.rightPanel] : []));
+	const name = uis.at(-1)?.name;
+	return {
+		...name && { name },
+		components,
+		actions,
+		...(actionSlot || rightPanel) && { shell: {
+			...actionSlot && { actions: actionSlot },
+			...rightPanel && { rightPanel }
+		} }
+	};
+};
+//#endregion
+export { mergeUi };

package/dist/app/pages/project-ui-provider.js

@@ -0,0 +1,15 @@
+import { ProjectUiContext } from "./project-ui.js";
+import { mergeUi } from "./merge-ui.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/pages/project-ui-provider.tsx
+/** Provides `ui` merged with the UI configs it extends. */
+const ProjectUiProvider = ({ ui, children }) => {
+	const merged = useMemo(() => ui ? mergeUi(ui) : {}, [ui]);
+	return /* @__PURE__ */ jsx(ProjectUiContext.Provider, {
+		value: merged,
+		children
+	});
+};
+//#endregion
+export { ProjectUiProvider };

package/dist/app/pages/project-ui.d.ts

@@ -1,4 +1,4 @@
-import { ComponentType, ReactNode } from "react";
+import { ComponentType } from "react";
 import { Client } from "@protobase/client";
 //#region src/app/pages/project-ui.d.ts
 /** What a named action's handler gets: the record it runs on (inside a RecordCard or CardRow), the API and the router. */
@@ -14,9 +14,12 @@ export type ActionContext = {
 export type ActionHandler = (context: ActionContext) => void | Promise<void>;
 /**
  * The project's own React code for composed pages: custom components by the name their layout declares
- * (`component('UsageChart')`), handlers for named actions that have no built-in behaviour, and the shell's slots.
+ * (`component('UsageChart')`) or a widget part names, handlers for named actions that have no built-in behaviour, and
+ * the shell's slots. `extends` lists UI configs merged in before it (see `mergeUi`); `name` names it in their errors.
  */
 export type ProjectUi = {
+  name?: string;
+  extends?: ProjectUi[];
   components?: Record<string, ComponentType<any>>;
   actions?: Record<string, ActionHandler>;
   /** Rendered in the shell on every page: `actions` at the end of the top bar, `rightPanel` beside the page. */
@@ -25,6 +28,6 @@ export type ProjectUi = {
     rightPanel?: ComponentType;
   };
 };
-/** Typed identity, for `export default defineUi({ components, actions })` in `protobase.ui.tsx`. */
+/** Typed identity, for `export default defineUi({ extends, components, actions })` in `protobase.ui.tsx`. */
 export declare const defineUi: (ui: ProjectUi) => ProjectUi;
 //#endregion

package/dist/app/pages/project-ui.js

@@ -1,13 +1,9 @@
 import { createContext, useContext } from "react";
-import { jsx } from "react/jsx-runtime";
 //#region src/app/pages/project-ui.tsx
-/** Typed identity, for `export default defineUi({ components, actions })` in `protobase.ui.tsx`. */
+/** Typed identity, for `export default defineUi({ extends, components, actions })` in `protobase.ui.tsx`. */
 const defineUi = (ui) => ui;
+/** The project's UI, merged with the UI configs it extends; `ProjectUiProvider` provides it. */
 const ProjectUiContext = createContext({});
-const ProjectUiProvider = ({ ui, children }) => /* @__PURE__ */ jsx(ProjectUiContext.Provider, {
-	value: ui ?? {},
-	children
-});
 const useProjectUi = () => useContext(ProjectUiContext);
 //#endregion
-export { ProjectUiProvider, defineUi, useProjectUi };
+export { ProjectUiContext, defineUi, useProjectUi };

package/dist/app/pages/use-run-action.js

@@ -1,10 +1,10 @@
 import { useClient } from "../../data/api-provider.js";
 import { useToast } from "../../toasts/toast-provider.js";
+import { useProjectUi } from "./project-ui.js";
 import { useRouter } from "../router.js";
 import { useAdminMeta, usePermissions } from "../meta-gate.js";
 import { can } from "../permissions.js";
 import { fillHref, isAppPath } from "./action-href.js";
-import { useProjectUi } from "./project-ui.js";
 import { useRefreshResource } from "./use-layout-data.js";
 import { useState } from "react";
 //#region src/app/pages/use-run-action.ts

package/dist/assistant-dock/assistant-dock.d.ts

@@ -1,3 +1,4 @@
+import { AssistantClient } from "@protobase/client";
 import { AssistantState } from "@protobase/schema";
 //#region src/assistant-dock/assistant-dock.d.ts
 export type AssistantDockProps = {
@@ -9,7 +10,12 @@ export type AssistantDockProps = {
   onSend?: (text: string) => void;
   onAction?: (partId: string, actionId: string) => void;
   onClose?: () => void;
+  /** The backend's client, which widgets read and post through with `useBackendData`. */
+  client?: AssistantClient;
 };
-/** The assistant beside the app: renders a backend's chat, its cards and status line, and sends messages and clicks back. */
-export declare const AssistantDock: ({ state, offline, error, onSend, onAction, onClose }: AssistantDockProps) => import("react").JSX.Element;
+/**
+ * The assistant beside the app: renders a backend's chat, its cards, the app's widgets and status line, and sends
+ * messages and clicks back.
+ */
+export declare const AssistantDock: ({ state, offline, error, onSend, onAction, onClose, client }: AssistantDockProps) => import("react").JSX.Element;
 //#endregion

package/dist/assistant-dock/assistant-dock.js

@@ -3,13 +3,17 @@ import { ChatThread } from "../chat/chat-thread.js";
 import { Composer } from "../chat/composer.js";
 import { SidePanel } from "../side-panel/side-panel.js";
 import { PartView } from "./part-view.js";
+import { AssistantBackendContext } from "./use-backend-data.js";
 import { useEffect, useRef } from "react";
 import { Sparkles } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/assistant-dock/assistant-dock.tsx
 const defaultPlaceholder = "Ask a question...";
-/** The assistant beside the app: renders a backend's chat, its cards and status line, and sends messages and clicks back. */
-const AssistantDock = ({ state, offline, error, onSend, onAction, onClose }) => {
+/**
+* The assistant beside the app: renders a backend's chat, its cards, the app's widgets and status line, and sends
+* messages and clicks back.
+*/
+const AssistantDock = ({ state, offline, error, onSend, onAction, onClose, client }) => {
 	const input = useRef(null);
 	useEffect(() => {
 		if (state.placeholder) input.current?.focus();
@@ -29,16 +33,19 @@ const AssistantDock = ({ state, offline, error, onSend, onAction, onClose }) =>
 			busy: state.replying,
 			placeholder: state.placeholder ?? defaultPlaceholder
 		})] }),
-		children: /* @__PURE__ */ jsx(ChatThread, {
-			length: state.messages.reduce((sum, message) => sum + message.parts.length, 0),
-			empty: "Ask a question about this app or its data.",
-			children: state.messages.map((message) => /* @__PURE__ */ jsx(ChatMessage, {
-				from: message.from,
-				children: message.parts.map((part) => /* @__PURE__ */ jsx(PartView, {
-					part,
-					onAction
-				}, part.id))
-			}, message.id))
+		children: /* @__PURE__ */ jsx(AssistantBackendContext.Provider, {
+			value: client,
+			children: /* @__PURE__ */ jsx(ChatThread, {
+				length: state.messages.reduce((sum, message) => sum + message.parts.length, 0),
+				empty: "Ask a question about this app or its data.",
+				children: state.messages.map((message) => /* @__PURE__ */ jsx(ChatMessage, {
+					from: message.from,
+					children: message.parts.map((part) => /* @__PURE__ */ jsx(PartView, {
+						part,
+						onAction
+					}, part.id))
+				}, message.id))
+			})
 		})
 	});
 };

package/dist/assistant-dock/index.d.ts

@@ -2,4 +2,6 @@ import { AssistantDock, AssistantDockProps } from "./assistant-dock.js";
 import { PartView } from "./part-view.js";
 import { useAssistant } from "./use-assistant.js";
 import { useAssistantClient } from "./use-assistant-client.js";
-export { AssistantDock, type AssistantDockProps, PartView, useAssistant, useAssistantClient };
+import { BackendData, BackendRefresh, useBackendData } from "./use-backend-data.js";
+import "./widget-view.js";
+export { AssistantDock, type AssistantDockProps, type BackendData, type BackendRefresh, PartView, useAssistant, useAssistantClient, useBackendData };

package/dist/assistant-dock/part-view.d.ts

@@ -1,6 +1,6 @@
 import { AssistantPart } from "@protobase/schema";
 //#region src/assistant-dock/part-view.d.ts
-/** One part of a message, drawn with the primitive it names. */
+/** One part of a message, drawn with the primitive it names, or a widget with the app's component it names. */
 export declare const PartView: ({ part, onAction }: {
   part: AssistantPart;
   onAction?: (partId: string, actionId: string) => void;

package/dist/assistant-dock/part-view.js

@@ -3,9 +3,10 @@ import { FieldList } from "../action-card/field-list.js";
 import { CompactTable } from "../compact-table/compact-table.js";
 import { DiffView } from "../diff-view/diff-view.js";
 import { StepList } from "../step-list/step-list.js";
+import { WidgetView } from "./widget-view.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/assistant-dock/part-view.tsx
-/** One part of a message, drawn with the primitive it names. */
+/** One part of a message, drawn with the primitive it names, or a widget with the app's component it names. */
 const PartView = ({ part, onAction }) => {
 	switch (part.type) {
 		case "text": return /* @__PURE__ */ jsx("p", { children: part.text });
@@ -41,6 +42,7 @@ const PartView = ({ part, onAction }) => {
 				}, `${index}-${diff.path}`))
 			]
 		});
+		case "widget": return /* @__PURE__ */ jsx(WidgetView, { part });
 	}
 };
 //#endregion

package/dist/assistant-dock/use-backend-data.d.ts

@@ -0,0 +1,23 @@
+import { AssistantClient } from "@protobase/client";
+//#region src/assistant-dock/use-backend-data.d.ts
+/** How long to wait before reading again: a number of milliseconds while the data can still change, `false` once it cannot. */
+export type BackendRefresh<T> = number | false | ((data: T | undefined) => number | false);
+export type BackendData<T> = {
+  /** The last answer read or posted; `undefined` until the first one. */
+  data?: T;
+  /** Why the last read or post failed, such as an `ApiError` with the backend's detail; cleared by the next success. */
+  error?: Error;
+  /** Reads again now. */
+  reload: () => void;
+  /** Posts `body` as JSON to `path` on the backend; its answer replaces `data`. */
+  post: (path: string, body?: unknown) => Promise<void>;
+};
+/**
+ * JSON from the assistant backend at `path` (see `AssistantClient.fetch`), read as the signed-in user each time the
+ * widget mounts, so a widget in an old chat shows the data as it is now; with `refreshMs`, read again while it can
+ * still change. Only inside the dock, which provides the backend.
+ */
+export declare const useBackendData: <T = unknown>(path: string, { refreshMs }?: {
+  refreshMs?: BackendRefresh<T>;
+}) => BackendData<T>;
+//#endregion

package/dist/assistant-dock/use-backend-data.js

@@ -0,0 +1,67 @@
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+//#region src/assistant-dock/use-backend-data.ts
+/** The assistant backend the dock talks to, for the widgets it draws; `AssistantDock` provides it from its `client`. */
+const AssistantBackendContext = createContext(void 0);
+const asError = (reason) => reason instanceof Error ? reason : /* @__PURE__ */ new Error("The assistant backend did not answer");
+const refreshOf = (refresh, data) => typeof refresh === "function" ? refresh(data) : refresh;
+/**
+* JSON from the assistant backend at `path` (see `AssistantClient.fetch`), read as the signed-in user each time the
+* widget mounts, so a widget in an old chat shows the data as it is now; with `refreshMs`, read again while it can
+* still change. Only inside the dock, which provides the backend.
+*/
+const useBackendData = (path, { refreshMs = false } = {}) => {
+	const client = useContext(AssistantBackendContext);
+	const [state, setState] = useState({});
+	const [reads, setReads] = useState(0);
+	const refresh = useRef(refreshMs);
+	refresh.current = refreshMs;
+	const latest = useRef(void 0);
+	useEffect(() => {
+		if (!client) {
+			setState({ error: /* @__PURE__ */ new Error("useBackendData works only in a widget the assistant dock draws") });
+			return;
+		}
+		let active = true;
+		let timer;
+		const read = async () => {
+			const answer = await client.fetch(path).then((response) => response.json()).then((data) => ({ data }), (reason) => ({
+				data: latest.current,
+				error: asError(reason)
+			}));
+			if (!active) return;
+			latest.current = answer.data;
+			setState(answer);
+			const wait = refreshOf(refresh.current, answer.data);
+			if (wait !== false) timer = setTimeout(read, wait);
+		};
+		read();
+		return () => {
+			active = false;
+			clearTimeout(timer);
+		};
+	}, [
+		client,
+		path,
+		reads
+	]);
+	return {
+		...state,
+		reload: () => setReads((count) => count + 1),
+		post: async (to, body) => {
+			if (!client) throw new Error("useBackendData works only in a widget the assistant dock draws");
+			const init = {
+				method: "POST",
+				headers: { "content-type": "application/json" },
+				body: JSON.stringify(body ?? {})
+			};
+			const answer = await client.fetch(to, init).then((response) => response.json()).then((data) => ({ data }), (reason) => ({
+				data: latest.current,
+				error: asError(reason)
+			}));
+			latest.current = answer.data;
+			setState(answer);
+		}
+	};
+};
+//#endregion
+export { AssistantBackendContext, useBackendData };

package/dist/assistant-dock/widget-view.d.ts

@@ -0,0 +1 @@
+import "@protobase/schema";

package/dist/assistant-dock/widget-view.js

@@ -0,0 +1,44 @@
+import { ActionCard } from "../action-card/action-card.js";
+import { useProjectUi } from "../app/pages/project-ui.js";
+import { Component } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/assistant-dock/widget-view.tsx
+/** The part's fallback as a plain card with `note`, or a muted line naming the component when it has none. */
+const Fallback = ({ part, note }) => part.fallback ? /* @__PURE__ */ jsx(ActionCard, {
+	title: part.fallback.title,
+	note,
+	children: part.fallback.body && /* @__PURE__ */ jsx("p", {
+		className: "text-[13px]",
+		children: part.fallback.body
+	})
+}) : /* @__PURE__ */ jsx("p", {
+	className: "text-xs text-muted-foreground",
+	children: `${part.name}: ${note}`
+});
+var WidgetBoundary = class extends Component {
+	state = { failed: false };
+	static getDerivedStateFromError() {
+		return { failed: true };
+	}
+	render() {
+		return this.state.failed ? /* @__PURE__ */ jsx(Fallback, {
+			part: this.props.part,
+			note: "It could not be drawn."
+		}) : this.props.children;
+	}
+};
+/** A widget part, drawn by the app's component of its name with its props; the fallback when the app has none. */
+const WidgetView = ({ part }) => {
+	const { components = {} } = useProjectUi();
+	const Widget = Object.hasOwn(components, part.name) ? components[part.name] : void 0;
+	if (!Widget) return /* @__PURE__ */ jsx(Fallback, {
+		part,
+		note: "This version of the app cannot show it live."
+	});
+	return /* @__PURE__ */ jsx(WidgetBoundary, {
+		part,
+		children: /* @__PURE__ */ jsx(Widget, { ...part.props })
+	});
+};
+//#endregion
+export { WidgetView };

package/dist/auth/auth-gate.js

@@ -1,43 +1,68 @@
 import { Spinner } from "../primitives/spinner.js";
+import { providerMessage } from "./auth-messages.js";
+import { readProviderError, readSignInLink, withoutSignInLink } from "./provider-link.js";
 import { useAuth } from "./auth-provider.js";
 import { Button } from "../primitives/button.js";
 import { EmailCodePage } from "./email-code-page.js";
 import { FirstRunPage } from "./first-run-page.js";
 import { readResetLink, withoutResetLink } from "./reset-link.js";
 import { ForgotPasswordPage } from "./forgot-password-page.js";
+import { ProviderSignInPage } from "./provider-sign-in-page.js";
 import { ResetPasswordPage } from "./reset-password-page.js";
 import { SetupRequiredPage } from "./setup-required-page.js";
 import { SignInPage } from "./sign-in-page.js";
 import { readStaffLink, withoutStaffLink } from "./staff-link.js";
 import { StaffSignInPage } from "./staff-sign-in-page.js";
 import { TwoFactorPage } from "./two-factor-page.js";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/auth/auth-gate.tsx
 const firstPage = () => {
-	const link = readResetLink(window.location.href);
+	const href = window.location.href;
+	const link = readResetLink(href);
 	if (link) return {
 		kind: "reset-password",
 		token: link.token
 	};
-	const staff = readStaffLink(window.location.href);
-	return staff ? {
+	const staff = readStaffLink(href);
+	if (staff) return {
 		kind: "staff-sign-in",
 		link: staff
+	};
+	const provider = readSignInLink(href);
+	if (provider) return {
+		kind: "provider-sign-in",
+		provider
+	};
+	const providerError = readProviderError(href);
+	return providerError ? {
+		kind: "sign-in",
+		providerError
 	} : { kind: "sign-in" };
 };
 const forgetResetLink = () => window.history.replaceState(window.history.state, "", withoutResetLink(window.location.href));
 const forgetStaffLink = () => window.history.replaceState(window.history.state, "", withoutStaffLink(window.location.href));
+const forgetSignInLink = () => window.history.replaceState(window.history.state, "", withoutSignInLink(window.location.href));
 /**
 * Shows the app when the user is signed in (or the server has no login), and the right page otherwise: the sign-in
 * steps, or the page an emailed reset link or a staff link opened.
 */
 const AuthGate = ({ workspace, children }) => {
-	const { state, recheck, passwordReset, signOut } = useAuth();
+	const { state, recheck, passwordReset, signOut, signInProviders } = useAuth();
 	const [page, setPage] = useState(firstPage);
 	useEffect(() => {
-		if (state.kind === "signed-in" || state.kind === "two-factor" || state.kind === "setup-required") setPage((current) => current.kind === "email-code" || current.kind === "sign-in" && current.notice ? { kind: "sign-in" } : current);
+		if (state.kind === "signed-in" || state.kind === "two-factor" || state.kind === "setup-required") setPage((current) => {
+			if (current.kind === "provider-sign-in") forgetSignInLink();
+			return current.kind === "email-code" || current.kind === "provider-sign-in" || current.kind === "sign-in" && (current.notice || current.error || current.providerError) ? { kind: "sign-in" } : current;
+		});
 	}, [state.kind]);
+	useEffect(() => {
+		if (state.kind === "signed-out" && page.kind === "sign-in" && page.providerError) forgetSignInLink();
+	}, [state.kind, page]);
+	const signInFailed = useCallback((error) => setPage({
+		kind: "sign-in",
+		error
+	}), []);
 	const leaveResetPage = (next) => {
 		forgetResetLink();
 		setPage(next);
@@ -89,20 +114,28 @@ const AuthGate = ({ workspace, children }) => {
 		onBack: backToSignIn
 	});
 	if (state.kind === "setup-required") return /* @__PURE__ */ jsx(SetupRequiredPage, { missing: state.missing }, state.missing.join());
+	if (page.kind === "provider-sign-in") return /* @__PURE__ */ jsx(ProviderSignInPage, {
+		provider: page.provider,
+		workspace,
+		onFailed: signInFailed
+	});
 	if (page.kind === "forgot-password") return /* @__PURE__ */ jsx(ForgotPasswordPage, { onBack: () => setPage({ kind: "sign-in" }) });
 	if (page.kind === "email-code") return /* @__PURE__ */ jsx(EmailCodePage, {
 		email: page.email,
 		onBack: () => setPage({ kind: "sign-in" })
 	});
+	const providerError = page.providerError && providerMessage(page.providerError, signInProviders.length === 1 ? signInProviders[0].name : "the provider");
+	const error = page.error ?? providerError;
 	return /* @__PURE__ */ jsx(SignInPage, {
 		workspace,
 		notice: page.notice,
+		error,
 		onForgotPassword: passwordReset ? () => setPage({ kind: "forgot-password" }) : void 0,
 		onCodeSent: (email) => setPage({
 			kind: "email-code",
 			email
 		})
-	});
+	}, error);
 };
 //#endregion
 export { AuthGate };

package/dist/auth/auth-messages.js

@@ -44,5 +44,14 @@ const staffSignInMessage = (failure) => {
 	if (typeof failure === "string") return "The staff sign-in did not go through. Try again.";
 	return failure.status === 429 ? tooManyRequests : failure.message;
 };
+const providerMessages = {
+	signup_disabled: (name) => `No account here belongs to this ${name} account. Ask an admin to add you, or sign in another way.`,
+	account_not_linked: (name) => `Your ${name} account is not linked to your account here. Sign in another way, then connect ${name} on the Sign-in & security page.`,
+	account_already_linked_to_different_user: (name) => `This ${name} account is linked to someone else here already.`,
+	unable_to_link_account: (name) => `Your ${name} account could not be linked. Try again.`,
+	access_denied: (name) => `${name} did not let you in, or you cancelled.`
+};
+/** Why signing in or linking with the provider `name` did not go through, from the code it came back with. */
+const providerMessage = (code, name) => providerMessages[code]?.(name) ?? `Signing in with ${name} did not go through. Try again.`;
 //#endregion
-export { authMessage, signInMessage, staffSignInMessage };
+export { authMessage, providerMessage, signInMessage, staffSignInMessage };

package/dist/auth/auth-provider.js

@@ -1,3 +1,4 @@
+import { providerName, withoutSignInLink } from "./provider-link.js";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { createAuthSession } from "@protobase/client";
 import { jsx } from "react/jsx-runtime";
@@ -14,6 +15,7 @@ const AuthProvider = ({ session: given, children }) => {
 	const [signInMethods, setSignInMethods] = useState(["password"]);
 	const [passwordReset, setPasswordReset] = useState(false);
 	const [socialProviders, setSocialProviders] = useState([]);
+	const [platformSignIn, setPlatformSignIn] = useState();
 	const [staffSignIn, setStaffSignIn] = useState();
 	const markSignedOut = useCallback(() => setState((current) => current.kind === "signed-in" ? { kind: "signed-out" } : current), []);
 	const signedOut = useRef(markSignedOut);
@@ -41,6 +43,7 @@ const AuthProvider = ({ session: given, children }) => {
 			setSignInMethods(status.signInMethods);
 			setPasswordReset(status.passwordReset);
 			setSocialProviders(status.socialProviders);
+			setPlatformSignIn(status.platformSignIn);
 			setStaffSignIn(status.staffSignIn);
 			if (status.needsAdmin) return setState({ kind: "needs-admin" });
 			const user = await session.session();
@@ -57,6 +60,10 @@ const AuthProvider = ({ session: given, children }) => {
 		signInMethods,
 		passwordReset,
 		socialProviders,
+		signInProviders: socialProviders.map((id) => ({
+			id,
+			name: providerName(id, platformSignIn)
+		})),
 		staffSignIn,
 		markSignedOut,
 		recheck,
@@ -66,7 +73,10 @@ const AuthProvider = ({ session: given, children }) => {
 		signInWithPasskey: async () => enter(await session.signInWithPasskey()),
 		verifyTwoFactor: async (input) => enter(await session.verifyTwoFactor(input)),
 		signInSocial: async (provider) => {
-			window.location.assign(await session.signInSocial(provider, window.location.href));
+			window.location.assign(await session.signInSocial(provider, new URL(withoutSignInLink(window.location.href), window.location.href).href));
+		},
+		linkProvider: async (provider) => {
+			window.location.assign(await session.account.linkProvider(provider, new URL(withoutSignInLink(window.location.href), window.location.href).href));
 		},
 		stopStaffSession: async () => {
 			await session.staff.stop();
@@ -82,6 +92,7 @@ const AuthProvider = ({ session: given, children }) => {
 		signInMethods,
 		passwordReset,
 		socialProviders,
+		platformSignIn,
 		staffSignIn,
 		markSignedOut,
 		recheck,

package/dist/auth/provider-link.js

@@ -0,0 +1,33 @@
+//#region src/auth/provider-link.ts
+/** Marks a link that starts signing in with a provider at once, for example `/?sign-in=github`. */
+const signInMarker = "sign-in";
+/** Where a provider's callback says why a sign-in or a link did not go through, for example `signup_disabled`. */
+const errorParam = "error";
+/**
+* The provider a link asks to sign in with, or `undefined`. A link that came back from the provider with an error
+* starts nothing, so a refused sign-in does not go round again.
+*/
+const readSignInLink = (href) => {
+	const params = new URL(href).searchParams;
+	if (params.has(errorParam)) return void 0;
+	return params.get("sign-in") || void 0;
+};
+/** Why the provider sent the browser back here, or `undefined`. */
+const readProviderError = (href) => new URL(href).searchParams.get(errorParam) || void 0;
+/** The address without the link's marker and the provider's error: for the address bar, and the page to come back to. */
+const withoutSignInLink = (href) => {
+	const url = new URL(href);
+	for (const name of [signInMarker, errorParam]) url.searchParams.delete(name);
+	return `${url.pathname}${url.search}${url.hash}`;
+};
+const knownNames = {
+	github: "GitHub",
+	gitlab: "GitLab",
+	google: "Google",
+	microsoft: "Microsoft",
+	apple: "Apple"
+};
+/** The name of a sign-in provider: the platform's own name for its provider, or a well-known provider's name. */
+const providerName = (provider, platformSignIn) => platformSignIn?.provider === provider ? platformSignIn.name : knownNames[provider] ?? provider.charAt(0).toUpperCase() + provider.slice(1);
+//#endregion
+export { providerName, readProviderError, readSignInLink, signInMarker, withoutSignInLink };

package/dist/auth/provider-sign-in-page.js

@@ -0,0 +1,55 @@
+import { Spinner } from "../primitives/spinner.js";
+import { signInMessage } from "./auth-messages.js";
+import { providerName } from "./provider-link.js";
+import { useAuth } from "./auth-provider.js";
+import { AuthLayout } from "./auth-layout.js";
+import { useEffect, useRef } from "react";
+import { AuthError } from "@protobase/client";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/auth/provider-sign-in-page.tsx
+/** What the page shows while the browser leaves for the provider `name`. */
+const ProviderRedirect = ({ name, workspace }) => /* @__PURE__ */ jsx(AuthLayout, {
+	title: `Signing in with ${name}`,
+	description: workspace,
+	children: /* @__PURE__ */ jsxs("p", {
+		role: "status",
+		className: "flex items-center justify-center gap-2 text-[13px] text-muted-foreground",
+		children: [
+			/* @__PURE__ */ jsx(Spinner, {}),
+			" Taking you to ",
+			name,
+			"…"
+		]
+	})
+});
+/**
+* Starts signing in with `provider` at once, for a link such as `/?sign-in=github`, so someone the provider knows lands
+* signed in without a sign-in page. A provider the server does not offer, or a start it refuses, goes to `onFailed`.
+*/
+const ProviderSignInPage = ({ provider, workspace, onFailed }) => {
+	const { signInProviders, signInSocial } = useAuth();
+	const offered = signInProviders.find((candidate) => candidate.id === provider);
+	const name = offered?.name ?? providerName(provider);
+	const started = useRef(false);
+	useEffect(() => {
+		if (started.current) return;
+		started.current = true;
+		if (!offered) return onFailed(`Signing in with ${name} is not offered here. Sign in another way.`);
+		signInSocial(provider).catch((failure) => {
+			if (!(failure instanceof AuthError)) throw failure;
+			onFailed(signInMessage(failure));
+		});
+	}, [
+		offered,
+		name,
+		provider,
+		signInSocial,
+		onFailed
+	]);
+	return /* @__PURE__ */ jsx(ProviderRedirect, {
+		name,
+		workspace
+	});
+};
+//#endregion
+export { ProviderRedirect, ProviderSignInPage };

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

@@ -13,13 +13,14 @@ const Divider = () => /* @__PURE__ */ jsxs("div", {
 		/* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" })
 	]
 });
-const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["password"], onSendCode, onPasskey, onForgotPassword, onContinueWithGitHub }) => {
+const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["password"], onSendCode, onPasskey, onForgotPassword, providers = [], onContinueWith }) => {
 	const [email, setEmail] = useState("");
 	const [password, setPassword] = useState("");
 	const emailInput = useRef(null);
 	const withPassword = methods.includes("password");
 	const withCode = methods.includes("emailCode") && onSendCode !== void 0;
 	const withPasskey = methods.includes("passkey") && onPasskey !== void 0;
+	const offered = onContinueWith ? providers : [];
 	const sendCode = () => {
 		if (!emailInput.current?.reportValidity()) return;
 		onSendCode?.(email.trim());
@@ -33,14 +34,14 @@ const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["pass
 				className: "mb-4 rounded-md bg-success-soft px-3 py-2 text-xs font-medium text-success-text",
 				children: notice
 			}),
-			(onContinueWithGitHub || withPasskey) && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+			(offered.length > 0 || withPasskey) && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
 				className: "flex flex-col gap-2",
-				children: [onContinueWithGitHub && /* @__PURE__ */ jsx(Button, {
-					onClick: onContinueWithGitHub,
+				children: [offered.map((provider) => /* @__PURE__ */ jsxs(Button, {
+					onClick: () => onContinueWith?.(provider.id),
 					disabled: busy,
 					className: "min-h-10 w-full",
-					children: "Continue with GitHub"
-				}), withPasskey && /* @__PURE__ */ jsxs(Button, {
+					children: ["Continue with ", provider.name]
+				}, provider.id)), withPasskey && /* @__PURE__ */ jsxs(Button, {
 					onClick: onPasskey,
 					disabled: busy,
 					className: "min-h-10 w-full",

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

@@ -5,10 +5,10 @@ import { useState } from "react";
 import { AuthError } from "@protobase/client";
 import { jsx } from "react/jsx-runtime";
 //#region src/auth/sign-in-page.tsx
-const SignInPage = ({ workspace, notice, onForgotPassword, onCodeSent }) => {
-	const { signIn, signInSocial, socialProviders, signInMethods, sendSignInCode, signInWithPasskey } = useAuth();
+const SignInPage = ({ workspace, notice, onForgotPassword, onCodeSent, error: initialError }) => {
+	const { signIn, signInSocial, signInProviders, signInMethods, sendSignInCode, signInWithPasskey } = useAuth();
 	const [busy, setBusy] = useState(false);
-	const [error, setError] = useState();
+	const [error, setError] = useState(initialError);
 	const attempt = async (start, message) => {
 		setBusy(true);
 		setError(void 0);
@@ -27,7 +27,8 @@ const SignInPage = ({ workspace, notice, onForgotPassword, onCodeSent }) => {
 		notice,
 		methods: signInMethods,
 		onForgotPassword,
-		onContinueWithGitHub: socialProviders.includes("github") ? () => void attempt(() => signInSocial("github"), signInMessage) : void 0,
+		providers: signInProviders,
+		onContinueWith: (provider) => void attempt(() => signInSocial(provider), signInMessage),
 		onPasskey: () => void attempt(signInWithPasskey, authMessage),
 		onSendCode: (email) => void attempt(async () => {
 			await sendSignInCode(email);

package/dist/index.d.ts

@@ -8,12 +8,14 @@ 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 { mergeUi } from "./app/pages/merge-ui.js";
 import { LayoutRecord, useLayoutRecord } from "./app/pages/record-scope.js";
 import { useApiToken } from "./auth/use-api-token.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";
 import { useAssistantClient } from "./assistant-dock/use-assistant-client.js";
+import { BackendData, BackendRefresh, useBackendData } from "./assistant-dock/use-backend-data.js";
 import "./assistant-dock/index.js";
 import { ChatMessage } from "./chat/chat-message.js";
 import { ChatThread, ChatThreadProps } from "./chat/chat-thread.js";
@@ -28,4 +30,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, type AppProps, AssistantDock, type AssistantDockProps, type CardAction, type CardTone, ChatMessage, ChatThread, type ChatThreadProps, CompactTable, type CompactTableProps, Composer, type ComposerProps, type DiffLine, DiffView, type DiffViewProps, FieldList, type LayoutRecord, type MetaData, PartView, type ProjectUi, SidePanel, type SidePanelProps, type Step, StepList, type StepState, defineUi, diffStats, isConflict, parseDiff, useApiToken, useAssistant, useAssistantClient, useClient, useFacets, useHistogram, useLayoutRecord, useList, useMeta, useRecord, useSeries, useUpdateRecord };
+export { ActionCard, type ActionCardProps, type ActionContext, type ActionHandler, ApiProvider, type ApiProviderProps, App, type AppProps, AssistantDock, type AssistantDockProps, type BackendData, type BackendRefresh, type CardAction, type CardTone, ChatMessage, ChatThread, type ChatThreadProps, CompactTable, type CompactTableProps, Composer, type ComposerProps, type DiffLine, DiffView, type DiffViewProps, FieldList, type LayoutRecord, type MetaData, PartView, type ProjectUi, SidePanel, type SidePanelProps, type Step, StepList, type StepState, defineUi, diffStats, isConflict, mergeUi, parseDiff, useApiToken, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useMeta, useRecord, useSeries, useUpdateRecord };

package/dist/index.js

@@ -11,15 +11,17 @@ import { CompactTable } from "./compact-table/compact-table.js";
 import { diffStats, parseDiff } from "./diff-view/diff.js";
 import { DiffView } from "./diff-view/diff-view.js";
 import { StepList } from "./step-list/step-list.js";
+import { defineUi } from "./app/pages/project-ui.js";
 import { PartView } from "./assistant-dock/part-view.js";
+import { useBackendData } from "./assistant-dock/use-backend-data.js";
 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 { useFacets, useHistogram, useSeries } from "./data/use-aggregates.js";
 import { useLayoutRecord } from "./app/pages/record-scope.js";
-import { defineUi } from "./app/pages/project-ui.js";
+import { mergeUi } from "./app/pages/merge-ui.js";
 import { useList } from "./data/use-list.js";
 import { isConflict, useUpdateRecord } from "./data/use-update-record.js";
 import { App } from "./app/app.js";
-export { ActionCard, ApiProvider, App, AssistantDock, ChatMessage, ChatThread, CompactTable, Composer, DiffView, FieldList, PartView, SidePanel, StepList, defineUi, diffStats, isConflict, parseDiff, useApiToken, useAssistant, useAssistantClient, useClient, useFacets, useHistogram, useLayoutRecord, useList, useMeta, useRecord, useSeries, useUpdateRecord };
+export { ActionCard, ApiProvider, App, AssistantDock, ChatMessage, ChatThread, CompactTable, Composer, DiffView, FieldList, PartView, SidePanel, StepList, defineUi, diffStats, isConflict, mergeUi, parseDiff, useApiToken, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useMeta, useRecord, useSeries, useUpdateRecord };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protobase/ui",
-  "version": "0.4.1",
+  "version": "0.6.0",
   "description": "The Protobase admin app and the React hooks and components for custom UI.",
   "license": "Apache-2.0",
   "repository": {
@@ -34,9 +34,9 @@
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
-    "@protobase/client": "0.4.1",
-    "@protobase/layout": "0.4.1",
-    "@protobase/schema": "0.4.1",
+    "@protobase/client": "0.6.0",
+    "@protobase/layout": "0.6.0",
+    "@protobase/schema": "0.6.0",
     "@tanstack/react-query": "^5.104.1",
     "@tanstack/react-table": "^9.2.6",
     "@tanstack/react-virtual": "^3.14.13",