@protobase/ui 0.3.5 → 0.5.0

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

@@ -0,0 +1,93 @@
+import { cn } from "../lib/cn.js";
+import { Input } from "../primitives/input.js";
+import { Button } from "../primitives/button.js";
+import { AuthLayout } from "./auth-layout.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/auth/staff-sign-in-form.tsx
+const minimumReason = 10;
+/** For staff of the operator: sign in as a person of this app, with a reason the app's admins see in their log. */
+const StaffSignInForm = ({ operator, email: givenEmail = "", reason: givenReason = "", onSubmit, onBack, busy, error }) => {
+	const [email, setEmail] = useState(givenEmail);
+	const [reason, setReason] = useState(givenReason);
+	if (!operator) return /* @__PURE__ */ jsxs(AuthLayout, {
+		title: "Staff sign-in",
+		description: "Staff of the team that runs this app cannot sign in as people here.",
+		children: [error && /* @__PURE__ */ jsx("p", {
+			role: "alert",
+			className: "mb-4 text-xs font-medium text-danger-text",
+			children: error
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: "primary",
+			className: "min-h-10 w-full",
+			onClick: onBack,
+			children: "Back to sign in"
+		})]
+	});
+	return /* @__PURE__ */ jsx(AuthLayout, {
+		title: "Sign in as a person",
+		description: `For staff of ${operator}, to help someone with this app.`,
+		children: /* @__PURE__ */ jsxs("form", {
+			className: "flex flex-col gap-4",
+			onSubmit: (event) => {
+				event.preventDefault();
+				onSubmit(email.trim(), reason.trim());
+			},
+			children: [
+				/* @__PURE__ */ jsxs("label", {
+					className: "flex flex-col gap-1.5 text-[13px] font-medium",
+					children: ["Their email", /* @__PURE__ */ jsx(Input, {
+						type: "email",
+						name: "email",
+						required: true,
+						autoFocus: !givenEmail,
+						value: email,
+						onChange: (event) => setEmail(event.target.value),
+						className: "min-h-6"
+					})]
+				}),
+				/* @__PURE__ */ jsxs("label", {
+					className: "flex flex-col gap-1.5 text-[13px] font-medium",
+					children: ["Reason", /* @__PURE__ */ jsx("textarea", {
+						name: "reason",
+						required: true,
+						minLength: minimumReason,
+						rows: 3,
+						value: reason,
+						placeholder: "Ticket 4211: the invoice totals look wrong",
+						onChange: (event) => setReason(event.target.value),
+						className: cn("resize-y rounded-md border bg-background px-2.5 py-1.5 text-[13px] font-normal shadow-sm outline-none placeholder:text-faint-foreground focus:border-primary focus:ring-2 focus:ring-primary/20", error ? "border-danger" : "border-border-strong")
+					})]
+				}),
+				/* @__PURE__ */ jsxs("p", {
+					className: "text-xs text-muted-foreground",
+					children: [
+						"You sign in at ",
+						operator,
+						" with a passkey or a second step. The session is short, shows a banner, and cannot change their sign-in. The app's admins see who signed in as whom, and why."
+					]
+				}),
+				error && /* @__PURE__ */ jsx("p", {
+					role: "alert",
+					className: "text-xs font-medium text-danger-text",
+					children: error
+				}),
+				/* @__PURE__ */ jsxs(Button, {
+					variant: "primary",
+					type: "submit",
+					loading: busy,
+					className: "min-h-10",
+					children: ["Continue with ", operator]
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					onClick: onBack,
+					className: "min-h-10",
+					children: "Back to sign in"
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { StaffSignInForm };

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

@@ -0,0 +1,41 @@
+import { staffSignInMessage } from "./auth-messages.js";
+import { useAuth } from "./auth-provider.js";
+import { withoutStaffLink } from "./staff-link.js";
+import { StaffSignInForm } from "./staff-sign-in-form.js";
+import { useState } from "react";
+import { AuthError } from "@protobase/client";
+import { jsx } from "react/jsx-runtime";
+//#region src/auth/staff-sign-in-page.tsx
+/** Starts a staff sign-in and leaves for the operator provider, which comes back to this page without the staff link. */
+const StaffSignInPage = ({ link, onBack }) => {
+	const { session, staffSignIn } = useAuth();
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState(link.error && staffSignInMessage(link.error));
+	const submit = async (email, reason) => {
+		setBusy(true);
+		setError(void 0);
+		try {
+			const callbackURL = `${window.location.origin}${withoutStaffLink(window.location.href)}`;
+			window.location.assign(await session.staff.start({
+				email,
+				reason,
+				callbackURL
+			}));
+		} catch (failure) {
+			if (!(failure instanceof AuthError)) throw failure;
+			setError(staffSignInMessage(failure));
+			setBusy(false);
+		}
+	};
+	return /* @__PURE__ */ jsx(StaffSignInForm, {
+		operator: staffSignIn,
+		email: link.email,
+		reason: link.reason,
+		busy,
+		error,
+		onBack,
+		onSubmit: (email, reason) => void submit(email, reason)
+	});
+};
+//#endregion
+export { StaffSignInPage };

package/dist/auth/two-factor-form.js

@@ -0,0 +1,137 @@
+import { Input } from "../primitives/input.js";
+import { Button } from "../primitives/button.js";
+import { CodeInput } from "./code-input.js";
+import { AuthLayout } from "./auth-layout.js";
+import { Checkbox } from "../primitives/checkbox.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/auth/two-factor-form.tsx
+const instructions = {
+	totp: "Enter the 6-digit code from your authenticator app.",
+	otp: "Enter the 6-digit code we emailed you. It works for 5 minutes.",
+	backup: "Enter one of the backup codes you saved when you set up the authenticator app. Each works once."
+};
+/** The second step of a sign-in, for an account with two-factor authentication. */
+const TwoFactorForm = ({ methods, onVerify, onSendCode, onBack, busy, error, codeSent, initialStep }) => {
+	const [step, setStep] = useState(initialStep ?? (methods.includes("totp") ? "totp" : "otp"));
+	const [code, setCode] = useState("");
+	const [trustDevice, setTrustDevice] = useState(false);
+	const waitingForEmail = step === "otp" && !codeSent;
+	const switchTo = (next) => {
+		setStep(next);
+		setCode("");
+		if (next === "otp" && !codeSent) onSendCode();
+	};
+	return /* @__PURE__ */ jsxs(AuthLayout, {
+		title: "Two-factor authentication",
+		description: "One more step to sign in.",
+		children: [waitingForEmail ? /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-4",
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: "text-[13px] text-muted-foreground",
+					children: "We email you a code to finish signing in."
+				}),
+				error && /* @__PURE__ */ jsx("p", {
+					role: "alert",
+					className: "text-xs font-medium text-danger-text",
+					children: error
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					loading: busy,
+					onClick: onSendCode,
+					className: "min-h-10",
+					children: "Email me a code"
+				})
+			]
+		}) : /* @__PURE__ */ jsxs("form", {
+			className: "flex flex-col gap-4",
+			onSubmit: (event) => {
+				event.preventDefault();
+				onVerify({
+					method: step,
+					code: code.trim(),
+					trustDevice
+				});
+			},
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: "text-[13px] text-muted-foreground",
+					children: instructions[step]
+				}),
+				/* @__PURE__ */ jsxs("label", {
+					className: "flex flex-col gap-1.5 text-[13px] font-medium",
+					children: [step === "backup" ? "Backup code" : "Code", step === "backup" ? /* @__PURE__ */ jsx(Input, {
+						name: "code",
+						autoComplete: "off",
+						spellCheck: false,
+						required: true,
+						autoFocus: true,
+						value: code,
+						invalid: Boolean(error),
+						onChange: (event) => setCode(event.target.value),
+						className: "min-h-6 font-mono"
+					}) : /* @__PURE__ */ jsx(CodeInput, {
+						name: "code",
+						required: true,
+						autoFocus: true,
+						value: code,
+						invalid: Boolean(error),
+						onChange: (event) => setCode(event.target.value)
+					})]
+				}),
+				/* @__PURE__ */ jsxs("label", {
+					className: "flex items-center gap-2 text-[13px] text-muted-foreground",
+					children: [/* @__PURE__ */ jsx(Checkbox, {
+						checked: trustDevice,
+						onChange: setTrustDevice,
+						label: "Trust this browser"
+					}), "Don't ask again in this browser for 30 days"]
+				}),
+				error && /* @__PURE__ */ jsx("p", {
+					role: "alert",
+					className: "text-xs font-medium text-danger-text",
+					children: error
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					type: "submit",
+					loading: busy,
+					className: "min-h-10",
+					children: "Verify"
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "mt-4 flex flex-col items-center gap-2 border-t pt-4 text-[13px]",
+			children: [
+				step !== "totp" && methods.includes("totp") && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => switchTo("totp"),
+					className: "font-medium text-primary-text hover:underline",
+					children: "Use the authenticator app"
+				}),
+				step !== "otp" && methods.includes("otp") && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => switchTo("otp"),
+					className: "font-medium text-primary-text hover:underline",
+					children: "Email me a code instead"
+				}),
+				step !== "backup" && methods.includes("totp") && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => switchTo("backup"),
+					className: "font-medium text-primary-text hover:underline",
+					children: "Use a backup code"
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onBack,
+					className: "font-medium text-muted-foreground hover:underline",
+					children: "Back to sign in"
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { TwoFactorForm };

package/dist/auth/two-factor-page.js

@@ -0,0 +1,39 @@
+import { authMessage } from "./auth-messages.js";
+import { useAuth } from "./auth-provider.js";
+import { TwoFactorForm } from "./two-factor-form.js";
+import { useState } from "react";
+import { AuthError } from "@protobase/client";
+import { jsx } from "react/jsx-runtime";
+//#region src/auth/two-factor-page.tsx
+/** The second step after a password or an emailed code, with the methods the server named. */
+const TwoFactorPage = ({ methods, onBack }) => {
+	const { verifyTwoFactor, session } = useAuth();
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState();
+	const [codeSent, setCodeSent] = useState(false);
+	const attempt = async (step) => {
+		setBusy(true);
+		setError(void 0);
+		try {
+			await step();
+		} catch (failure) {
+			if (!(failure instanceof AuthError)) throw failure;
+			setError(authMessage(failure));
+		}
+		setBusy(false);
+	};
+	return /* @__PURE__ */ jsx(TwoFactorForm, {
+		methods,
+		busy,
+		error,
+		codeSent,
+		onBack,
+		onVerify: (input) => void attempt(() => verifyTwoFactor(input)),
+		onSendCode: () => void attempt(async () => {
+			await session.sendTwoFactorCode();
+			setCodeSent(true);
+		})
+	});
+};
+//#endregion
+export { TwoFactorPage };

package/dist/auth/user-to-shell.js

@@ -1,9 +1,12 @@
 //#region src/auth/user-to-shell.ts
 const hueOf = (text) => [...text].reduce((sum, char) => (sum * 31 + char.charCodeAt(0)) % 360, 7);
 const initialsOf = (name) => name.split(/[\s@.]+/).filter(Boolean).slice(0, 2).map((part) => part[0].toUpperCase()).join("");
+const rolesOf = (user) => (user.role ?? "user").split(",").map((role) => role.trim());
+/** The user holds the `admin` role, among others perhaps. */
+const isAdmin = (user) => rolesOf(user).includes("admin");
 /** What the sidebar's profile menu shows for a signed-in user. */
 const userToShell = (user) => {
-	const roles = (user.role ?? "user").split(",").map((role) => role.trim());
+	const roles = rolesOf(user);
 	const admin = roles.includes("admin");
 	return {
 		name: user.name || user.email,
@@ -15,4 +18,4 @@ const userToShell = (user) => {
 	};
 };
 //#endregion
-export { userToShell };
+export { isAdmin, userToShell };

package/dist/chat/composer.js

@@ -1,8 +1,8 @@
 import { Input } from "../primitives/input.js";
 import { Button } from "../primitives/button.js";
 import { useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { SendHorizontal } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/chat/composer.tsx
 /** The text box under a chat. Enter or the button sends the trimmed text and clears the box. */
 const Composer = ({ onSend, busy, placeholder, inputRef }) => {

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

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
-import { QueryClient } from "@tanstack/react-query";
 import { Client, ClientOptions } from "@protobase/client";
+import { QueryClient } from "@tanstack/react-query";
 //#region src/data/api-provider.d.ts
 export declare const useClient: () => {
   list: <R extends import("@protobase/client").ResourceRef>(resource: R, params?: import("@protobase/client").ListParams) => Promise<import("@protobase/client").ListPage<import("@protobase/client").RecordOf<R>>>;

package/dist/data/api-provider.js

@@ -1,8 +1,8 @@
 import { keys } from "./query-keys.js";
 import { createContext, useContext, useMemo, useRef, useState } from "react";
+import { createClient } from "@protobase/client";
 import { jsx } from "react/jsx-runtime";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { createClient } from "@protobase/client";
 //#region src/data/api-provider.tsx
 const ApiContext = createContext(null);
 const useClient = () => {

package/dist/data/use-aggregates.js

@@ -1,7 +1,7 @@
 import { keys } from "./query-keys.js";
 import { useClient } from "./api-provider.js";
-import { useQuery } from "@tanstack/react-query";
 import { filterText } from "@protobase/client";
+import { useQuery } from "@tanstack/react-query";
 //#region src/data/use-aggregates.ts
 const useFacets = (resource, field, filter, enabled = true) => {
 	const client = useClient();

package/dist/data/use-list.js

@@ -1,7 +1,7 @@
 import { keys } from "./query-keys.js";
 import { useClient } from "./api-provider.js";
-import { useInfiniteQuery } from "@tanstack/react-query";
 import { filterText } from "@protobase/client";
+import { useInfiniteQuery } from "@tanstack/react-query";
 //#region src/data/use-list.ts
 /** Infinite pages of a resource, following `next_page_token`. */
 const useList = (resource, { filter, orderBy, pageSize = 50, fields, startToken = "", enabled = true } = {}) => {

package/dist/data/use-update-record.js

@@ -1,7 +1,7 @@
 import { keys } from "./query-keys.js";
 import { useClient } from "./api-provider.js";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { PreconditionFailedError } from "@protobase/client";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { encodeKey } from "@protobase/schema";
 //#region src/data/use-update-record.ts
 /**

package/dist/data-grid/cells.js

@@ -1,12 +1,12 @@
 import { cn } from "../lib/cn.js";
 import { Avatar } from "../primitives/avatar.js";
 import { Badge } from "../primitives/badge.js";
-import { formatDate, formatDateTime } from "../format/date.js";
-import { userById } from "../mocks/users.js";
 import { formatMoney } from "../format/money.js";
 import { formatInt, formatPercent, formatSigned } from "../format/number.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { formatDate, formatDateTime } from "../format/date.js";
+import { userById } from "../mocks/users.js";
 import { Check } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { enumLabel } from "@protobase/schema";
 //#region src/data-grid/cells.tsx
 const muted = (text) => /* @__PURE__ */ jsx("span", {

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

@@ -1,10 +1,10 @@
 import { cn } from "../lib/cn.js";
-import { gridTemplate } from "./grid-template.js";
 import { Checkbox } from "../primitives/checkbox.js";
+import { gridTemplate } from "./grid-template.js";
 import { isRightAligned } from "./column-spec.js";
 import { HeaderMenu } from "./header-menu.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/data-grid/grid-header.tsx
 const SortIcon = ({ sorted }) => {
 	if (sorted === "asc") return /* @__PURE__ */ jsx(ArrowUp, { className: "size-3 text-foreground" });

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

@@ -1,7 +1,7 @@
 import { cn } from "../lib/cn.js";
 import { formatInt } from "../format/number.js";
-import { gridTemplate } from "./grid-template.js";
 import { Checkbox } from "../primitives/checkbox.js";
+import { gridTemplate } from "./grid-template.js";
 import { isRightAligned } from "./column-spec.js";
 import { Skeleton } from "../primitives/skeleton.js";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { MoreHorizontal } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/data-grid/header-menu.tsx
 /** The "..." in a column header: for now, pinning the column to the left edge. */
 const HeaderMenu = ({ header, pinned, onTogglePin }) => {

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

@@ -1,7 +1,7 @@
 import { cn } from "../lib/cn.js";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { MoreHorizontal } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 //#region src/data-grid/row-menu.tsx
 /** The actions that apply to a row; a row with none gets no menu at all. */

package/dist/diff-view/diff-view.js

@@ -1,7 +1,7 @@
 import { cn } from "../lib/cn.js";
 import { diffStats, parseDiff } from "./diff.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { FileCode2 } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/diff-view/diff-view.tsx
 const row = {
 	add: "bg-success-soft text-success-text",

package/dist/filter-panel/active-filter-chips.js

@@ -1,5 +1,5 @@
-import { jsx, jsxs } from "react/jsx-runtime";
 import { Lock, X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/filter-panel/active-filter-chips.tsx
 const chipClass = "inline-flex h-6 items-center gap-1 rounded-full border border-primary-border bg-primary-soft pl-2.5 pr-1.5 text-xs font-medium text-primary-text";
 const ActiveFilterChips = ({ chips, lockedLabels = [], onRemove, onClear, scroll }) => {

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

@@ -3,8 +3,8 @@ import { formatInt } from "../format/number.js";
 import { Checkbox } from "../primitives/checkbox.js";
 import { matchesSearch } from "./filter-state.js";
 import { useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { Search } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/filter-panel/facet-group.tsx
 const FacetGroup = ({ config, selected, onToggle }) => {
 	const [query, setQuery] = useState("");

package/dist/filter-panel/filter-menu.js

@@ -1,7 +1,7 @@
 import { cn } from "../lib/cn.js";
 import { useEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/filter-panel/filter-menu.tsx
 const FilterMenu = ({ label, activeCount, width = 240, defaultOpen = false, children }) => {
 	const [open, setOpen] = useState(defaultOpen);

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/dist/inline-child-table/inline-child-table.js

@@ -4,8 +4,8 @@ import { lineGrid } from "./columns.js";
 import { LineRow } from "./line-row.js";
 import { reorder } from "./reorder.js";
 import { TotalsFooter } from "./totals-footer.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { Plus } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { DndContext, KeyboardSensor, MouseSensor, TouchSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
 import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from "@dnd-kit/sortable";
 //#region src/inline-child-table/inline-child-table.tsx

package/dist/inline-child-table/line-menu.js

@@ -1,7 +1,7 @@
 import { cn } from "../lib/cn.js";
 import { useEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { MoreHorizontal } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/inline-child-table/line-menu.tsx
 /** The "..." at the end of a line: the keyboard-and-screen-reader way to reorder, besides the drag handle. */
 const LineMenu = ({ items, label }) => {

package/dist/inline-child-table/line-row.js

@@ -1,11 +1,11 @@
 import { cn } from "../lib/cn.js";
+import { formatMoney } from "../format/money.js";
 import { lineTotalCents } from "../mocks/invoices.js";
 import { lineGrid } from "./columns.js";
-import { formatMoney } from "../format/money.js";
 import { LineMenu } from "./line-menu.js";
 import { NumberCell } from "./number-cell.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { GripVertical } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useSortable } from "@dnd-kit/sortable";
 //#region src/inline-child-table/line-row.tsx
 const parseEuros = (text) => Math.round(Number(text.replace(",", ".").replace(/[^0-9.]/g, "")) * 100);

package/dist/inline-child-table/totals-footer.js

@@ -1,5 +1,5 @@
-import { invoiceTotals } from "../mocks/invoices.js";
 import { formatMoney } from "../format/money.js";
+import { invoiceTotals } from "../mocks/invoices.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/inline-child-table/totals-footer.tsx
 const TotalsFooter = ({ lines, vatRate }) => {

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

@@ -1,7 +1,7 @@
+import { formatMoney } from "../format/money.js";
 import { keys } from "../data/query-keys.js";
 import { useClient } from "../data/api-provider.js";
 import { humanize } from "./naming.js";
-import { formatMoney } from "../format/money.js";
 import { stateToText } from "./filter-string.js";
 import { useHistogram } from "../data/use-aggregates.js";
 import { fetchLabels } from "./relation-labels.js";

package/dist/primitives/checkbox.js

@@ -1,6 +1,6 @@
 import { cn } from "../lib/cn.js";
-import { jsx } from "react/jsx-runtime";
 import { Check, Minus } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
 //#region src/primitives/checkbox.tsx
 const Checkbox = ({ checked, indeterminate, onChange, label, className }) => /* @__PURE__ */ jsx("button", {
 	type: "button",

package/dist/primitives/sheet.js

@@ -1,7 +1,7 @@
 import { useFocusTrap } from "../lib/use-focus-trap.js";
 import { useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/sheet.tsx
 /** A panel that rises from the bottom of the screen, for the filter panel on phones. */
 const Sheet = ({ title, open, onClose, children }) => {

package/dist/primitives/spinner.js

@@ -1,6 +1,6 @@
 import { cn } from "../lib/cn.js";
-import { jsx } from "react/jsx-runtime";
 import { Loader2 } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
 //#region src/primitives/spinner.tsx
 const Spinner = ({ className }) => /* @__PURE__ */ jsx(Loader2, {
 	"aria-label": "Loading",

package/dist/record-view/field.js

@@ -1,7 +1,7 @@
 import { Avatar } from "../primitives/avatar.js";
 import { Button } from "../primitives/button.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { TriangleAlert } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/record-view/field.tsx
 const Field = ({ label, required, help, example, error, conflict, children }) => /* @__PURE__ */ jsxs("div", { children: [
 	/* @__PURE__ */ jsxs("div", {

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

@@ -1,5 +1,5 @@
-import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRight } from "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 text-[13px]",