@protobase/ui 0.3.5 → 0.5.0

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/record-table.js

@@ -6,8 +6,8 @@ import { scopeOf } from "./use-layout-data.js";
 import { FieldValue } from "./field-value.js";
 import { usePathValue } from "./use-path-value.js";
 import { useRelationLabels } from "./use-relation-labels.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { resolveFieldPath } from "@protobase/layout";
 //#region src/app/pages/record-table.tsx
 const isPath = (column) => column.includes(".");

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/app/record-page.js

@@ -1,13 +1,13 @@
 import { Badge } from "../primitives/badge.js";
-import { keys } from "../data/query-keys.js";
-import { useClient } from "../data/api-provider.js";
 import { useAuth } from "../auth/auth-provider.js";
+import { formatRelativeTime } from "../format/date.js";
 import { Button } from "../primitives/button.js";
+import { keys } from "../data/query-keys.js";
+import { useClient } from "../data/api-provider.js";
 import { useRecord } from "../data/use-record.js";
 import { recordTitle } from "../live/model-helpers.js";
 import { humanize } from "../live/naming.js";
 import { useNavigationGuard, useRouter } from "./router.js";
-import { formatRelativeTime } from "../format/date.js";
 import { displayValue } from "../live/display-value.js";
 import { ErrorBanner } from "./error-banner.js";
 import { FieldEditor } from "./field-editor.js";
@@ -29,10 +29,10 @@ import { useRecordEditor } from "./use-record-editor.js";
 import { useRelatedRecords } from "./use-related-records.js";
 import { RelatedSection } from "./related-section.js";
 import { useMemo } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Check } from "lucide-react";
-import { useQueryClient } from "@tanstack/react-query";
 import { isApiError } from "@protobase/client";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useQueryClient } from "@tanstack/react-query";
 import { enumLabel } from "@protobase/schema";
 //#region src/app/record-page.tsx
 const hidden = (model, name) => name === model.tenant || model.primaryKey.includes(name);

package/dist/app/runtime/runtime-update.js

@@ -3,8 +3,8 @@ import { Dialog } from "../../primitives/dialog.js";
 import { nextUpdateText, showsUpdateButton, updateErrorText } from "./runtime-status.js";
 import { useRuntimeClient, useRuntimeStatus } from "./use-runtime-status.js";
 import { useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ArrowUpCircle } from "lucide-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/runtime/runtime-update.tsx
 const Row = ({ label, value }) => /* @__PURE__ */ jsxs("div", {
 	className: "flex justify-between gap-4 py-1 text-[13px]",

package/dist/app/sensitive-field.js

@@ -6,8 +6,8 @@ import { displayValue } from "../live/display-value.js";
 import { toDraft } from "../live/field-values.js";
 import { ErrorBanner } from "./error-banner.js";
 import { useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { Eye, EyeOff } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useMutation } from "@tanstack/react-query";
 //#region src/app/sensitive-field.tsx
 const mask = "••••••••••";

package/dist/app/staff-banner.js

@@ -0,0 +1,67 @@
+import { authMessage } from "../auth/auth-messages.js";
+import { formatDateTime } from "../format/date.js";
+import { Button } from "../primitives/button.js";
+import { useState } from "react";
+import { UserRoundCog } from "lucide-react";
+import { AuthError } from "@protobase/client";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/staff-banner.tsx
+/** Across the top of the app while staff are signed in as someone: who, as whom, why, until when, and a way to stop. */
+const StaffBanner = ({ signIn, onStop }) => {
+	const [stopping, setStopping] = useState(false);
+	const [error, setError] = useState();
+	const stop = async () => {
+		setStopping(true);
+		setError(void 0);
+		try {
+			await onStop();
+		} catch (failure) {
+			if (!(failure instanceof AuthError)) throw failure;
+			setError(authMessage(failure));
+			setStopping(false);
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		role: "region",
+		"aria-label": "Staff session",
+		className: "flex flex-wrap items-center gap-x-3 gap-y-2 border-b border-warning/40 bg-warning-soft px-4 py-2 text-[13px] text-warning-text",
+		children: [
+			/* @__PURE__ */ jsx(UserRoundCog, {
+				"aria-hidden": true,
+				className: "size-4 shrink-0"
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				className: "min-w-64 flex-1 break-words",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "font-semibold",
+						children: signIn.staffName ?? signIn.staff
+					}),
+					" is signed in as ",
+					/* @__PURE__ */ jsx("span", {
+						className: "font-semibold",
+						children: signIn.user
+					}),
+					" until",
+					" ",
+					formatDateTime(Date.parse(signIn.expiresAt)),
+					". Reason: ",
+					signIn.reason
+				]
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "text-xs font-medium text-danger-text",
+				children: error
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				size: "sm",
+				loading: stopping,
+				onClick: () => void stop(),
+				children: "Stop staff session"
+			})
+		]
+	});
+};
+//#endregion
+export { StaffBanner };

package/dist/app/use-record-editor.js

@@ -6,8 +6,8 @@ import { readDraft, writeDraft } from "./draft-storage.js";
 import { isConflict, useUpdateRecord } from "../data/use-update-record.js";
 import { nameFailingOperation } from "./batch-failure.js";
 import { useEffect, useState } from "react";
-import { useQueryClient } from "@tanstack/react-query";
 import { isApiError } from "@protobase/client";
+import { useQueryClient } from "@tanstack/react-query";
 //#region src/app/use-record-editor.ts
 const without = (source, name) => Object.fromEntries(Object.entries(source).filter(([key]) => key !== name));
 /**

package/dist/app-shell/breadcrumb.js

@@ -1,6 +1,6 @@
 import { cn } from "../lib/cn.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/breadcrumb.tsx
 const inApp = (event) => event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
 /** The trail of where you are; the last crumb, the current page, shows on phones too. */

package/dist/app-shell/global-search.js

@@ -3,8 +3,8 @@ import { Input } from "../primitives/input.js";
 import { Kbd } from "../primitives/kbd.js";
 import { Spinner } from "../primitives/spinner.js";
 import { useId, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { Search, X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/global-search.tsx
 /** Moves the highlighted result by `delta`, wrapping around; from nothing (`-1`) it goes to the first or the last. */
 const moveActive = (active, count, delta) => {

package/dist/app-shell/profile-menu.js

@@ -2,8 +2,8 @@ import { cn } from "../lib/cn.js";
 import { Avatar } from "../primitives/avatar.js";
 import { Badge } from "../primitives/badge.js";
 import { useEffect, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronsUpDown, LogOut } from "lucide-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/profile-menu.tsx
 const menuRow = "flex min-h-11 w-full items-center gap-2.5 px-3 py-1.5 text-left text-[13px] text-muted-foreground hover:bg-muted md:min-h-0";
 /** The person at the bottom of the sidebar; the menu is fixed to the viewport so a narrow sidebar cannot clip it. */

package/dist/app-shell/sidebar-group.js

@@ -3,8 +3,8 @@ import { navOpenStorageKey, readNavOpen, writeNavOpen } from "./nav-open-storage
 import { SidebarItem } from "./sidebar-item.js";
 import { StatusDot } from "./status-dot.js";
 import { useId, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/sidebar-group.tsx
 const row = {
 	"text-large": "h-8 gap-2.5 px-2.5 text-[13px]",

package/dist/app-shell/top-bar.js

@@ -2,8 +2,8 @@ import { cn } from "../lib/cn.js";
 import { Breadcrumb } from "./breadcrumb.js";
 import { GlobalSearch } from "./global-search.js";
 import { useEffect, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Menu, Search, X } from "lucide-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/top-bar.tsx
 const iconButton = "inline-flex size-11 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted md:hidden";
 const TopBar = ({ breadcrumb, onNavigate, actions, onMenu, menuOpen, menuControls, search }) => {

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 { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 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,28 +1,42 @@
 import { Spinner } from "../primitives/spinner.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 { 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 { jsx, jsxs } from "react/jsx-runtime";
 //#region src/auth/auth-gate.tsx
 const firstPage = () => {
 	const link = readResetLink(window.location.href);
-	return link ? {
+	if (link) return {
 		kind: "reset-password",
 		token: link.token
+	};
+	const staff = readStaffLink(window.location.href);
+	return staff ? {
+		kind: "staff-sign-in",
+		link: staff
 	} : { kind: "sign-in" };
 };
 const forgetResetLink = () => window.history.replaceState(window.history.state, "", withoutResetLink(window.location.href));
-/** Shows the app when the user is signed in (or the server has no login), and the right page otherwise. */
+const forgetStaffLink = () => window.history.replaceState(window.history.state, "", withoutStaffLink(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 [page, setPage] = useState(firstPage);
 	useEffect(() => {
-		if (state.kind === "signed-in") setPage((current) => 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) => current.kind === "email-code" || current.kind === "sign-in" && current.notice ? { kind: "sign-in" } : current);
 	}, [state.kind]);
 	const leaveResetPage = (next) => {
 		forgetResetLink();
@@ -35,6 +49,10 @@ const AuthGate = ({ workspace, children }) => {
 			notice: "Your password is changed. Sign in with the new one."
 		});
 	};
+	const backToSignIn = () => {
+		setPage({ kind: "sign-in" });
+		signOut();
+	};
 	switch (state.kind) {
 		case "loading": return /* @__PURE__ */ jsxs("div", {
 			className: "flex h-full min-h-48 items-center justify-center gap-2 text-[13px] text-muted-foreground",
@@ -58,12 +76,32 @@ const AuthGate = ({ workspace, children }) => {
 		onRequestNewLink: passwordReset ? () => leaveResetPage({ kind: "forgot-password" }) : void 0,
 		onBack: () => leaveResetPage({ kind: "sign-in" })
 	});
+	if (page.kind === "staff-sign-in") return /* @__PURE__ */ jsx(StaffSignInPage, {
+		link: page.link,
+		onBack: () => {
+			forgetStaffLink();
+			setPage({ kind: "sign-in" });
+		}
+	});
 	if (state.kind === "signed-in") return children;
+	if (state.kind === "two-factor") return /* @__PURE__ */ jsx(TwoFactorPage, {
+		methods: state.methods,
+		onBack: backToSignIn
+	});
+	if (state.kind === "setup-required") return /* @__PURE__ */ jsx(SetupRequiredPage, { missing: state.missing }, state.missing.join());
 	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" })
+	});
 	return /* @__PURE__ */ jsx(SignInPage, {
 		workspace,
 		notice: page.notice,
-		onForgotPassword: passwordReset ? () => setPage({ kind: "forgot-password" }) : void 0
+		onForgotPassword: passwordReset ? () => setPage({ kind: "forgot-password" }) : void 0,
+		onCodeSent: (email) => setPage({
+			kind: "email-code",
+			email
+		})
 	});
 };
 //#endregion