@protobase/ui 0.19.0 → 0.19.2

package/dist/app/app.d.ts

@@ -25,7 +25,7 @@ export type AppProps = {
   assistant?: AssistantClient;
   /** A ready-made client of the runtime endpoint, for stories and tests; used only when `/meta` names one. */
   runtime?: RuntimeClient;
-  /** How the plugins `/meta` names are loaded, for stories and tests; the page's `fetch` and `import()` by default. */
+  /** How the plugins are loaded, for stories and tests; the page's `fetch` and `import()` by default. */
   pluginLoader?: PluginLoader;
 };
 /**
@@ -33,5 +33,5 @@ export type AppProps = {
  * then a sidebar from `/meta`, `/:page` composed pages, `/:resource` lists and `/:resource/:key` records. Fills its
  * parent, in the theme this browser chose, light, dark or the system's.
  */
-export declare const App: ({ auth, workspace, basePath, initialUrl, ...rest }: AppProps) => import("react").JSX.Element;
+export declare const App: ({ auth, workspace, basePath, initialUrl, pluginLoader, ...rest }: AppProps) => import("react").JSX.Element;
 //#endregion

package/dist/app/app.js

@@ -7,6 +7,9 @@ import { ApiProvider } from "../data/api-provider.js";
 import { Router, useRouter } from "./router.js";
 import { useSignInAddress } from "../auth/use-sign-in-address.js";
 import { managesOrganization, organizationMenuItems, organizationPageTitles } from "../organizations/organization-paths.js";
+import { startErrorReporting } from "./error-reporting.js";
+import { CustomBoundary } from "./pages/custom-boundary.js";
+import { PluginSourceProvider } from "../plugins/plugin-source.js";
 import { AuthGate } from "../auth/auth-gate.js";
 import { isAdmin, userToShell } from "../auth/user-to-shell.js";
 import { useRecord } from "../data/use-record.js";
@@ -14,7 +17,6 @@ import { recordTitle } from "../live/model-helpers.js";
 import { humanize } from "../live/naming.js";
 import { ThemeProvider, useTheme } from "../theme/theme-provider.js";
 import { ToastProvider } from "../toasts/toast-provider.js";
-import { startErrorReporting } from "./error-reporting.js";
 import { useProjectUi } from "./pages/project-ui.js";
 import { AssistantButton, AssistantPanel } from "./assistant-shell.js";
 import { bottomBarFromMeta } from "./bottom-bar-from-meta.js";
@@ -22,7 +24,6 @@ import { breadcrumbFor } from "./breadcrumb-for.js";
 import { sourceStatusOf } from "../data/with-sources.js";
 import { MetaGate, Notice, useAdminMeta } from "./meta-gate.js";
 import { useAppAddress } from "./use-app-address.js";
-import { CustomBoundary } from "./pages/custom-boundary.js";
 import { CreatePage } from "./create/create-page.js";
 import { ListPage } from "./list-page.js";
 import { MembersPage } from "../organizations/members-page.js";
@@ -35,6 +36,7 @@ import { useActiveRole } from "../roles/use-active-role.js";
 import { userMenuFromMeta } from "./user-menu-from-meta.js";
 import { navFromMeta } from "./nav-from-meta.js";
 import { ComposedPage } from "./pages/composed-page.js";
+import { ProjectLogo } from "./project-logo.js";
 import { PluginGate, usePluginsOff } from "../plugins/plugin-gate.js";
 import { PluginNotice } from "../plugins/plugin-notice.js";
 import { RecordPage } from "./record-page.js";
@@ -177,6 +179,7 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 		onSignOut: user && (() => void signOut()),
 		signIn: user ? void 0 : signIn.link(),
 		workspace: current?.organization?.name ?? workspace,
+		logo: ProjectLogo,
 		navGroups: groups,
 		bottomBar: bottomBarFromMeta(meta, basePath, place),
 		userMenu: [
@@ -244,7 +247,7 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 		]
 	});
 };
-const Authenticated = ({ baseUrl, client, sources, workspace, sidebarMode, ui, assistant, runtime, pluginLoader }) => {
+const Authenticated = ({ baseUrl, client, sources, workspace, sidebarMode, ui, assistant, runtime }) => {
 	const { state, session, markSignedOut } = useAuth();
 	return /* @__PURE__ */ jsx(ApiProvider, {
 		baseUrl,
@@ -254,7 +257,6 @@ const Authenticated = ({ baseUrl, client, sources, workspace, sidebarMode, ui, a
 		onUnauthenticated: markSignedOut,
 		children: /* @__PURE__ */ jsx(MetaGate, { children: /* @__PURE__ */ jsx(ToastProvider, { children: /* @__PURE__ */ jsx(PluginGate, {
 			ui,
-			...pluginLoader && { loader: pluginLoader },
 			children: /* @__PURE__ */ jsx(Routes, {
 				workspace,
 				sidebarMode,
@@ -269,16 +271,19 @@ const Authenticated = ({ baseUrl, client, sources, workspace, sidebarMode, ui, a
 * then a sidebar from `/meta`, `/:page` composed pages, `/:resource` lists and `/:resource/:key` records. Fills its
 * parent, in the theme this browser chose, light, dark or the system's.
 */
-const App = ({ auth, workspace, basePath, initialUrl, ...rest }) => /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(AuthProvider, {
+const App = ({ auth, workspace, basePath, initialUrl, pluginLoader, ...rest }) => /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(AuthProvider, {
 	session: auth,
 	children: /* @__PURE__ */ jsx(Router, {
 		basePath,
 		initialUrl,
-		children: /* @__PURE__ */ jsx(AuthGate, {
-			workspace,
-			children: /* @__PURE__ */ jsx(Authenticated, {
+		children: /* @__PURE__ */ jsx(PluginSourceProvider, {
+			...pluginLoader && { loader: pluginLoader },
+			children: /* @__PURE__ */ jsx(AuthGate, {
 				workspace,
-				...rest
+				children: /* @__PURE__ */ jsx(Authenticated, {
+					workspace,
+					...rest
+				})
 			})
 		})
 	})

package/dist/app/custom-section.js

@@ -1,6 +1,6 @@
-import { useProjectUi } from "./pages/project-ui.js";
 import { Problem } from "./pages/problem.js";
 import { CustomBoundary } from "./pages/custom-boundary.js";
+import { useProjectUi } from "./pages/project-ui.js";
 import { Section } from "../record-view/section.js";
 import { SidebarCard } from "../record-view/record-sidebar.js";
 import { RecordScope } from "./pages/record-scope.js";

package/dist/app/displays/custom-display.js

@@ -1,6 +1,6 @@
-import { useProjectUi } from "../pages/project-ui.js";
 import { Problem } from "../pages/problem.js";
 import { CustomBoundary } from "../pages/custom-boundary.js";
+import { useProjectUi } from "../pages/project-ui.js";
 import { ListDisplayProvider } from "./display-context.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { unmarkFieldRefs } from "@protobase/schema/internal";

package/dist/app/displays/map-display.js

@@ -1,10 +1,10 @@
 import { cn } from "../../lib/cn.js";
 import { Button } from "../../primitives/button.js";
+import { Problem } from "../pages/problem.js";
 import { humanize } from "../../live/naming.js";
 import { mapCards } from "./list-displays.js";
 import { useAdminMeta } from "../meta-gate.js";
 import { ErrorBanner } from "../error-banner.js";
-import { Problem } from "../pages/problem.js";
 import { useDebounced } from "../../lib/use-debounced.js";
 import { RecordCard } from "./record-card.js";
 import { boundsAround, worldArea } from "../map/map-area.js";

package/dist/app/displays/record-card.js

@@ -1,4 +1,5 @@
 import { Badge } from "../../primitives/badge.js";
+import { CustomBoundary } from "../pages/custom-boundary.js";
 import { recordKey } from "../../live/model-helpers.js";
 import { humanize } from "../../live/naming.js";
 import { useProjectUi } from "../pages/project-ui.js";
@@ -6,7 +7,6 @@ import { displayValue } from "../../live/display-value.js";
 import { amountParts, cardFields, filledAmount, filledMeta } from "./list-displays.js";
 import { AppLink } from "../use-app-address.js";
 import { shownWidget } from "../field-types/shown-widget.js";
-import { CustomBoundary } from "../pages/custom-boundary.js";
 import { WidgetPart } from "../field-types/widget-part.js";
 import { namedIcon } from "../named-icon.js";
 import { FavoriteButton } from "../saved/favorite-button.js";

package/dist/app/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><style>.c{fill:#FF5A1F}.r{fill:#14161A}@media (prefers-color-scheme:dark){.c{fill:#FF6A33}.r{fill:#F1F0EA}}</style><path class="c" fill-rule="evenodd" d="M0 5a5 5 0 0 1 5-5h7a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zM4 5a1 1 0 0 1 1-1h5v6H4z"/><path class="r" d="M17 0h10a5 5 0 0 1 5 5v22a5 5 0 0 1-5 5H5a5 5 0 0 1-5-5V17h17z"/></svg>

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

@@ -3,7 +3,7 @@ import { ProjectUi } from "./project-ui.js";
 /**
  * One UI config from several, each after the ones it `extends`, the last being the app's own: components, action
  * handlers and field types are all kept, and one name defined by two configs is an error naming both; every shell slot
- * is drawn, the extended configs' first.
+ * and `beforeSignIn` component is drawn, the extended configs' first, except the logo, the last config's to set one.
  */
 export declare const mergeUi: (...uis: ProjectUi[]) => ProjectUi;
 //#endregion

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

@@ -25,10 +25,18 @@ const slot = (slots) => {
 	const All = () => slots.map((Slot, index) => /* @__PURE__ */ jsx(Slot, {}, index));
 	return All;
 };
+const around = (wrappers) => {
+	if (wrappers.length <= 1) return wrappers[0];
+	const All = ({ children, ...given }) => wrappers.reduceRight((inner, Wrapper) => /* @__PURE__ */ jsx(Wrapper, {
+		...given,
+		children: inner
+	}), children);
+	return All;
+};
 /**
 * One UI config from several, each after the ones it `extends`, the last being the app's own: components, action
 * handlers and field types are all kept, and one name defined by two configs is an error naming both; every shell slot
-* is drawn, the extended configs' first.
+* and `beforeSignIn` component is drawn, the extended configs' first, except the logo, the last config's to set one.
 */
 const mergeUi = (...uis) => {
 	const named = uis.flatMap((ui, index) => flatten(ui, ui.name ?? `UI config ${index + 1}`));
@@ -37,16 +45,20 @@ const mergeUi = (...uis) => {
 	const fields = union("The field type", named, (ui) => ui.fields);
 	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 logo = named.findLast(({ ui }) => ui.shell?.logo)?.ui.shell?.logo;
+	const beforeSignIn = around(named.flatMap(({ ui }) => ui.beforeSignIn ? [ui.beforeSignIn] : []));
 	const name = uis.at(-1)?.name;
 	return {
 		...name && { name },
 		components,
 		actions,
 		...Object.keys(fields).length > 0 && { fields },
-		...(actionSlot || rightPanel) && { shell: {
+		...(actionSlot || rightPanel || logo) && { shell: {
 			...actionSlot && { actions: actionSlot },
-			...rightPanel && { rightPanel }
-		} }
+			...rightPanel && { rightPanel },
+			...logo && { logo }
+		} },
+		...beforeSignIn && { beforeSignIn }
 	};
 };
 //#endregion

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

@@ -1,5 +1,6 @@
+import { ShellLogoProps } from "../../app-shell/logo.js";
 import { FieldWidget } from "../field-types/field-widget.js";
-import { ComponentType } from "react";
+import { ComponentType, ReactNode } from "react";
 import { Client } from "@protobase/client";
 import { AppAddress } from "@protobase/schema";
 //#region src/app/pages/project-ui.d.ts
@@ -19,6 +20,21 @@ export type ActionContext = {
   navigate: (to: AppAddress) => void;
 };
 export type ActionHandler = (context: ActionContext) => void | Promise<void>;
+/** What a plugin's `beforeSignIn` component gets from the app, drawn around the pages someone signed out sees. */
+export type BeforeSignInProps = {
+  /** What the app shows someone signed out: the sign-in page, or the app a visitor browses. */
+  children: ReactNode;
+  /**
+   * Enters the app with a session something other than the sign-in page started, such as an endpoint that traded a
+   * one-time code for the session cookie: reads the session again and shows the app signed in. Resolves `false`, and
+   * changes nothing, when there is no session.
+   */
+  signedIn: () => Promise<boolean>;
+  /** The query parameters of the page's address, such as a one-time code a link carries. */
+  params: URLSearchParams;
+  /** Takes these query parameters, such as a used one-time code, out of the address, in place of it in the tab's history. */
+  removeParams: (names: string[]) => void;
+};
 /**
  * The project's own React code for composed pages: custom components by the name their layout declares
  * (`component('UsageChart')`) or a widget part names, handlers for named actions that have no built-in behaviour,
@@ -33,11 +49,20 @@ export type ProjectUi = {
   actions?: Record<string, ActionHandler>;
   /** Field types by name, each with the storage types it shows and its components (see `FieldWidget`). */
   fields?: Record<string, FieldWidget>;
-  /** Rendered in the shell on every page: `actions` at the end of the top bar, `rightPanel` beside the page. */
+  /**
+   * Rendered in the shell on every page: `actions` at the end of the top bar, `rightPanel` beside the page, and `logo`
+   * at the top of the sidebar in place of Protobase's (see `ShellLogoProps`).
+   */
   shell?: {
     actions?: ComponentType;
     rightPanel?: ComponentType;
+    logo?: ComponentType<ShellLogoProps>;
   };
+  /**
+   * Drawn around the pages someone signed out sees, only for a plugin the app loads before sign-in (`beforeSignIn` in
+   * `options.plugins`): its code runs for them, and it can sign them in (see `BeforeSignInProps`).
+   */
+  beforeSignIn?: ComponentType<BeforeSignInProps>;
 };
 /** A `protobase.ui.tsx` module as `import * as` gives it: components exported by name, the rest as the default export. */
 export type UiModule = {
@@ -47,9 +72,9 @@ export type UiModule = {
 /** Typed identity, for `export default defineUi({ extends, components, actions })` in `protobase.ui.tsx`. */
 export declare const defineUi: (ui: ProjectUi) => ProjectUi;
 /**
- * Typed identity, for `export default definePlugin({ name, components, actions, fields, shell })` in a plugin's
- * `protobase.ui.tsx`: a plugin is a UI config the app loads at runtime, its components exported by name as in a
- * project's. A project's own protobase.ui.tsx is one too, which `protobase build` builds as the plugin `app`.
+ * Typed identity, for `export default definePlugin({ name, components, actions, fields, shell, beforeSignIn })` in a
+ * plugin's `protobase.ui.tsx`: a plugin is a UI config the app loads at runtime, its components exported by name as in
+ * a project's. A project's own protobase.ui.tsx is one too, which `protobase build` builds as the plugin `app`.
  */
 export declare const definePlugin: (plugin: ProjectUi) => ProjectUi;
 //#endregion

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

@@ -3,9 +3,9 @@ import { createContext, useContext } from "react";
 /** Typed identity, for `export default defineUi({ extends, components, actions })` in `protobase.ui.tsx`. */
 const defineUi = (ui) => ui;
 /**
-* Typed identity, for `export default definePlugin({ name, components, actions, fields, shell })` in a plugin's
-* `protobase.ui.tsx`: a plugin is a UI config the app loads at runtime, its components exported by name as in a
-* project's. A project's own protobase.ui.tsx is one too, which `protobase build` builds as the plugin `app`.
+* Typed identity, for `export default definePlugin({ name, components, actions, fields, shell, beforeSignIn })` in a
+* plugin's `protobase.ui.tsx`: a plugin is a UI config the app loads at runtime, its components exported by name as in
+* a project's. A project's own protobase.ui.tsx is one too, which `protobase build` builds as the plugin `app`.
 */
 const definePlugin = (plugin) => plugin;
 /** The project's UI, merged with the UI configs it extends and the plugins loaded; `PluginGate` or `ProjectUiProvider` provides it. */

package/dist/app/pages/render-node.js

@@ -1,6 +1,6 @@
-import { useProjectUi } from "./project-ui.js";
 import { Problem } from "./problem.js";
 import { CustomBoundary } from "./custom-boundary.js";
+import { useProjectUi } from "./project-ui.js";
 import { ActionBlock } from "./blocks/action.js";
 import { CardBlock } from "./blocks/card.js";
 import { CardRowBlock } from "./blocks/card-row.js";

package/dist/app/project-logo.js

@@ -0,0 +1,17 @@
+import { Logo } from "../app-shell/logo.js";
+import { CustomBoundary } from "./pages/custom-boundary.js";
+import { useProjectUi } from "./pages/project-ui.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/project-logo.tsx
+/** The project's `shell.logo` at the top of the sidebar, or Protobase's while it has none or when it throws. */
+const ProjectLogo = (props) => {
+	const Own = useProjectUi().shell?.logo;
+	if (!Own) return /* @__PURE__ */ jsx(Logo, { ...props });
+	return /* @__PURE__ */ jsx(CustomBoundary, {
+		name: "shell.logo",
+		fallback: /* @__PURE__ */ jsx(Logo, { ...props }),
+		children: /* @__PURE__ */ jsx(Own, { ...props })
+	});
+};
+//#endregion
+export { ProjectLogo };

package/dist/app-shell/app-shell.d.ts

@@ -4,4 +4,4 @@ import "./nav.js";
 import "./profile-menu.js";
 import "./global-search.js";
 import "./breadcrumb.js";
-import { ReactNode } from "react";
+import { ComponentType, ReactNode } from "react";

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

@@ -9,7 +9,7 @@ import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/app-shell.tsx
 const drawerId = "app-drawer";
-const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, actions, rightPanel, forceExpanded, profileMenuOpen, navGroups, userMenu, bottomBar, onNavigate, onSignOut, signIn, organizations, roles, theme, search, pageScroll: scrollsByDefault = false, className, children }) => {
+const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, logo, actions, rightPanel, forceExpanded, profileMenuOpen, navGroups, userMenu, bottomBar, onNavigate, onSignOut, signIn, organizations, roles, theme, search, pageScroll: scrollsByDefault = false, className, children }) => {
 	const desktop = useIsDesktop();
 	const [drawerOpen, setDrawerOpen] = useState(false);
 	useEffect(() => {
@@ -37,7 +37,8 @@ const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, action
 		signIn,
 		organizations,
 		roles,
-		theme
+		theme,
+		logo
 	});
 	return /* @__PURE__ */ jsx(PageScrollContext.Provider, {
 		value: setPageScroll,

package/dist/app-shell/index.d.ts

@@ -4,6 +4,7 @@ import "./profile-menu.js";
 import { SidebarMode, sidebarModes } from "./sidebar-mode.js";
 import "./global-search.js";
 import "./breadcrumb.js";
+import { LogoMark, ShellLogoProps } from "./logo.js";
 import "./app-shell.js";
 import "./page-header.js";
 import "./page-scroll.js";

package/dist/app-shell/logo.d.ts

@@ -0,0 +1,11 @@
+//#region src/app-shell/logo.d.ts
+/** The Protobase mark, the Corner: the outlined corner is what an app describes, the solid rest what Protobase runs. */
+export declare const LogoMark: ({ className }: {
+  className?: string;
+}) => import("react").JSX.Element;
+/** What the logo at the top of the sidebar gets: `compact` when the sidebar shows only icons, and the workspace's name. */
+export type ShellLogoProps = {
+  compact: boolean;
+  workspace?: string;
+};
+//#endregion

package/dist/app-shell/logo.js

@@ -1,46 +1,44 @@
 import { cn } from "../lib/cn.js";
+import { wordmarkPath } from "./wordmark-path.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/logo.tsx
+const corner = "fill-[#ff5a1f] dark:fill-[#ff6a33]";
+const solid = "fill-[#14161a] dark:fill-[#f1f0ea]";
+/** The Protobase mark, the Corner: the outlined corner is what an app describes, the solid rest what Protobase runs. */
 const LogoMark = ({ className }) => /* @__PURE__ */ jsxs("svg", {
-	viewBox: "0 0 24 24",
+	viewBox: "0 0 32 32",
 	className: cn("size-7 shrink-0", className),
 	"aria-hidden": true,
-	children: [
-		/* @__PURE__ */ jsx("rect", {
-			width: "24",
-			height: "24",
-			rx: "6",
-			className: "fill-primary"
-		}),
-		/* @__PURE__ */ jsx("path", {
-			d: "M7 17V7h5.2a3 3 0 0 1 0 6H7",
-			fill: "none",
-			className: "stroke-primary-foreground",
-			strokeWidth: "2",
-			strokeLinecap: "round",
-			strokeLinejoin: "round"
-		}),
-		/* @__PURE__ */ jsx("path", {
-			d: "M12.5 17h4.5",
-			className: "stroke-primary-foreground",
-			strokeOpacity: "0.55",
-			strokeWidth: "2",
-			strokeLinecap: "round"
-		})
-	]
+	children: [/* @__PURE__ */ jsx("path", {
+		className: corner,
+		fillRule: "evenodd",
+		d: "M0 5a5 5 0 0 1 5-5h7a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zM4 5a1 1 0 0 1 1-1h5v6H4z"
+	}), /* @__PURE__ */ jsx("path", {
+		className: solid,
+		d: "M17 0h10a5 5 0 0 1 5 5v22a5 5 0 0 1-5 5H5a5 5 0 0 1-5-5V17h17z"
+	})]
+});
+/** The name "protobase", outlined as the brand draws it rather than set in a font. */
+const Wordmark = ({ className }) => /* @__PURE__ */ jsx("svg", {
+	viewBox: "54.8 -720 3743.8 925",
+	className: cn("h-3.5 w-auto", className),
+	role: "img",
+	"aria-label": "Protobase",
+	children: /* @__PURE__ */ jsx("path", {
+		className: solid,
+		d: wordmarkPath
+	})
 });
-const Logo = ({ showName, workspace }) => /* @__PURE__ */ jsxs("div", {
+/** Protobase's logo at the top of the sidebar, the workspace's name under the wordmark, or the mark alone when compact. */
+const Logo = ({ compact, workspace }) => /* @__PURE__ */ jsxs("div", {
 	className: "flex items-center gap-2.5 overflow-hidden",
-	children: [/* @__PURE__ */ jsx(LogoMark, {}), showName && /* @__PURE__ */ jsxs("div", {
-		className: "min-w-0 leading-tight",
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "text-[13px] font-semibold tracking-tight",
-			children: "Protobase"
-		}), workspace && /* @__PURE__ */ jsx("div", {
+	children: [/* @__PURE__ */ jsx(LogoMark, {}), !compact && /* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-0 flex-col gap-0.5 leading-tight",
+		children: [/* @__PURE__ */ jsx(Wordmark, { className: "self-start" }), workspace && /* @__PURE__ */ jsx("div", {
 			className: "truncate text-[11px] text-muted-foreground",
 			children: workspace
 		})]
 	})]
 });
 //#endregion
-export { Logo, LogoMark };
+export { Logo, LogoMark, Wordmark };

package/dist/app-shell/sidebar.d.ts

@@ -1,3 +1,4 @@
 import "../primitives/route-link.js";
 import "./nav.js";
-import "./profile-menu.js";
+import "./profile-menu.js";
+import { ComponentType } from "react";

package/dist/app-shell/sidebar.js

@@ -10,7 +10,7 @@ import { SidebarGroup } from "./sidebar-group.js";
 import { LogIn } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/sidebar.tsx
-const Sidebar = ({ mode, activeItem, user, workspace, forceExpanded, profileMenuOpen, groups = navGroups, userMenu, onNavigate, onSignOut, signIn, organizations, roles, theme, sticky }) => {
+const Sidebar = ({ mode, activeItem, user, workspace, forceExpanded, profileMenuOpen, groups = navGroups, userMenu, onNavigate, onSignOut, signIn, organizations, roles, theme, sticky, logo: SidebarLogo = Logo }) => {
 	const expanding = mode === "icon-expand";
 	const expanded = expanding && forceExpanded;
 	const inline = isTextMode(mode) || expanding;
@@ -22,8 +22,8 @@ const Sidebar = ({ mode, activeItem, user, workspace, forceExpanded, profileMenu
 			children: [
 				/* @__PURE__ */ jsx("div", {
 					className: cn("flex h-12 shrink-0 items-center px-3.5", mode === "icon-label" && "justify-center px-0"),
-					children: /* @__PURE__ */ jsx(Logo, {
-						showName: isTextMode(mode) || expanding,
+					children: /* @__PURE__ */ jsx(SidebarLogo, {
+						compact: !inline,
 						workspace
 					})
 				}),

package/dist/app-shell/wordmark-path.js

@@ -0,0 +1,4 @@
+//#region src/app-shell/wordmark-path.ts
+const wordmarkPath = "M312.3 9.9Q257 9.9 217.1 -21.1Q177.3 -52.1 168.4 -108.8L181.1 -110.3V205H54.8V-510H176.7V-404.5L168.3 -407Q179.7 -460.8 221.2 -490.4Q262.7 -520 319.8 -520Q376.2 -520 417 -488.4Q457.8 -456.8 479.8 -398.6Q501.8 -340.5 501.8 -259.9Q501.8 -177.6 478.3 -116.8Q454.9 -55.9 412.5 -23Q370.1 9.9 312.3 9.9ZM274.4 -92.6Q320.2 -92.6 345.8 -133.8Q371.4 -175.1 371.4 -256.4Q371.4 -337.7 345.7 -377.6Q320.1 -417.5 274 -417.5Q228.6 -417.5 202.7 -376.4Q176.9 -335.3 176.9 -254Q176.9 -173.3 202.7 -132.9Q228.4 -92.6 274.4 -92.6Z M549.8 0V-510H671.7V-388.3H676.1V0H549.8ZM676.1 -286.5 661.3 -386.2Q677.9 -455.2 711.8 -487.6Q745.7 -520 794.3 -520Q809 -520 818 -516.6V-394.2Q814.2 -395.6 807.1 -396.1Q800 -396.6 789.4 -396.6Q734.6 -396.6 705.3 -370.5Q676.1 -344.4 676.1 -286.5Z M1043.8 10Q974.7 10 922.6 -23.6Q870.6 -57.2 842.1 -117.5Q813.6 -177.8 813.6 -257Q813.6 -336.5 842.2 -395.5Q870.8 -454.5 922.5 -487.2Q974.2 -520 1043.8 -520Q1113.7 -520 1165.4 -487.2Q1217.1 -454.5 1245.6 -395.5Q1274 -336.5 1274 -257Q1274 -177.8 1245.5 -117.5Q1217 -57.2 1165.3 -23.6Q1113.6 10 1043.8 10ZM1043.8 -90.5Q1073.5 -90.5 1095.9 -108.9Q1118.2 -127.3 1130.9 -164.4Q1143.6 -201.5 1143.6 -257.5Q1143.6 -339.8 1116 -379.7Q1088.4 -419.5 1043.8 -419.5Q999.3 -419.5 971.6 -379.5Q944 -339.5 944 -257.5Q944 -201.5 956.7 -164.4Q969.4 -127.3 991.8 -108.9Q1014.3 -90.5 1043.8 -90.5Z M1509 10.2Q1427.2 10.2 1387.6 -29.2Q1348 -68.6 1348 -147.7V-613.8L1474.2 -666.1V-146.7Q1474.2 -118.4 1489.9 -104.3Q1505.6 -90.3 1539.2 -90.3Q1552 -90.3 1562.7 -92.5Q1573.3 -94.8 1582.5 -98.7V-1.9Q1571.6 4 1552 7.1Q1532.4 10.2 1509 10.2ZM1270.1 -411V-510H1580.6V-411H1270.1Z M1810.8 10Q1741.7 10 1689.6 -23.6Q1637.6 -57.2 1609.1 -117.5Q1580.6 -177.8 1580.6 -257Q1580.6 -336.5 1609.2 -395.5Q1637.8 -454.5 1689.5 -487.2Q1741.2 -520 1810.8 -520Q1880.7 -520 1932.4 -487.2Q1984.1 -454.5 2012.6 -395.5Q2041 -336.5 2041 -257Q2041 -177.8 2012.5 -117.5Q1984 -57.2 1932.3 -23.6Q1880.6 10 1810.8 10ZM1810.8 -90.5Q1840.5 -90.5 1862.9 -108.9Q1885.2 -127.3 1897.9 -164.4Q1910.6 -201.5 1910.6 -257.5Q1910.6 -339.8 1883 -379.7Q1855.4 -419.5 1810.8 -419.5Q1766.3 -419.5 1738.6 -379.5Q1711 -339.5 1711 -257.5Q1711 -201.5 1723.7 -164.4Q1736.4 -127.3 1758.8 -108.9Q1781.3 -90.5 1810.8 -90.5Z M2343.3 9.9Q2288 9.9 2247.7 -21.1Q2207.4 -52.1 2198.5 -108.8L2205.8 -110.3V0H2085.8V-720H2212.1V-404.5L2203.7 -407Q2215.1 -460.8 2255.6 -490.4Q2296.2 -520 2351 -520Q2407.3 -520 2448 -488.4Q2488.8 -456.8 2510.8 -398.6Q2532.8 -340.5 2532.8 -259.9Q2532.8 -177.6 2509.3 -116.8Q2485.9 -55.9 2443.5 -23Q2401.1 9.9 2343.3 9.9ZM2305.4 -92.6Q2350.7 -92.6 2376.6 -133.8Q2402.4 -175.1 2402.4 -256.4Q2402.4 -337.7 2376.5 -377.6Q2350.6 -417.5 2305 -417.5Q2260.5 -417.5 2234.2 -376.4Q2207.9 -335.3 2207.9 -254Q2207.9 -173.3 2234.1 -132.9Q2260.3 -92.6 2305.4 -92.6Z M2834 0Q2828 -19.1 2825.7 -41.7Q2823.3 -64.2 2823.3 -91.8H2818.6V-356Q2818.6 -391.9 2803.1 -409.1Q2787.5 -426.3 2756.2 -426.3Q2724.2 -426.3 2706.4 -408.7Q2688.7 -391.2 2686.3 -358.9H2571.2Q2574.6 -429.6 2625.4 -474.8Q2676.1 -520 2763.5 -520Q2850.2 -520 2896.1 -476.5Q2941.9 -432.9 2941.9 -352.2V-91.8Q2941.9 -69.5 2944.7 -46.7Q2947.5 -23.8 2954.1 0H2834ZM2690.6 10Q2631.9 10 2595.4 -26.3Q2558.9 -62.5 2558.9 -124.5Q2558.9 -185 2594.3 -224Q2629.8 -263 2704.5 -287.6L2845.4 -337.4V-248.7L2753.4 -219.3Q2716.5 -206.1 2699.3 -186.6Q2682.2 -167.2 2682.2 -139Q2682.2 -112.4 2697.5 -98.4Q2712.9 -84.3 2739.4 -84.3Q2773.2 -84.3 2795.9 -104.1Q2818.6 -123.9 2818.6 -153.1L2829.9 -85.8Q2812.6 -37.4 2776.8 -13.7Q2741 10 2690.6 10Z M3168 10Q3080.6 10 3030.1 -34.2Q2979.6 -78.4 2974.7 -158.1H3082.4Q3086.3 -120 3108.9 -100.5Q3131.5 -80.9 3169.8 -80.9Q3202 -80.9 3218.9 -93.9Q3235.8 -106.9 3235.8 -131.3Q3235.8 -151.1 3224.3 -165.6Q3212.9 -180.1 3178.9 -195.4L3111.2 -224.8Q3053 -247.7 3023.8 -284.2Q2994.5 -320.8 2994.5 -373.9Q2994.5 -440.1 3040.1 -480Q3085.7 -520 3162.8 -520Q3242.2 -520 3288.4 -480Q3334.6 -440 3339.5 -367.9H3231.8Q3228.6 -399.7 3211.3 -414.4Q3194 -429.1 3164 -429.1Q3136.1 -429.1 3120.5 -417Q3104.8 -405 3104.8 -382.7Q3104.8 -364.2 3117.7 -349.8Q3130.6 -335.5 3162.4 -321.6L3236.6 -289.6Q3288.6 -269.2 3317.4 -229.2Q3346.1 -189.1 3346.1 -136.9Q3346.1 -69 3299.2 -29.5Q3252.3 10 3168 10Z M3587.8 10Q3520 10 3469.2 -23.3Q3418.5 -56.6 3390.5 -116.5Q3362.6 -176.3 3362.6 -255.8Q3362.6 -336.4 3390.9 -395.7Q3419.3 -454.9 3470.7 -487.5Q3522 -520 3591.1 -520Q3656.6 -520 3702.7 -489.8Q3748.8 -459.7 3773.7 -403.1Q3798.6 -346.5 3798.6 -266.5Q3798.6 -253.7 3798 -242.5Q3797.5 -231.3 3795.8 -221.4H3440V-306.9H3709L3681.8 -277.9Q3681.6 -355.2 3657.7 -390.7Q3633.8 -426.3 3589.3 -426.3Q3541.7 -426.3 3515.6 -384Q3489.5 -341.7 3489.5 -255Q3489.5 -168.4 3515 -126.1Q3540.5 -83.7 3590.6 -83.7Q3623.7 -83.7 3644.6 -102Q3665.5 -120.3 3673.8 -156.3H3788.9Q3772.2 -81.6 3721.5 -35.8Q3670.8 10 3587.8 10Z";
+//#endregion
+export { wordmarkPath };

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

@@ -1,5 +1,5 @@
-import { ActionCard } from "../action-card/action-card.js";
 import { reportRenderError } from "../app/error-reporting.js";
+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";

package/dist/auth/auth-gate.js

@@ -19,6 +19,7 @@ import { TwoFactorPage } from "./two-factor-page.js";
 import { useSignInAddress } from "./use-sign-in-address.js";
 import { readInvitationLink, withoutInvitationLink } from "../organizations/invitation-link.js";
 import { InvitationPage } from "../organizations/invitation-page.js";
+import { BeforeSignIn } from "../plugins/before-sign-in.js";
 import { useCallback, useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { signInPath } from "@protobase/schema";
@@ -62,9 +63,14 @@ const Redirect = ({ to }) => {
 * browse, and the right page otherwise: the step of the sign-in route the address names, or the page an emailed reset
 * link, an invitation link or a staff link opened. Someone signed out without a visitor's browsing goes to the sign-in
 * route, and signing in comes back to the page the route was opened from. An invited person with an account signs in
-* first and comes back to the invitation.
+* first and comes back to the invitation. The plugins the app loads before sign-in draw around what someone signed
+* out sees (see `BeforeSignIn`), while the gate keeps its state.
 */
 const AuthGate = ({ workspace, children }) => {
+	const page = useAuthPage(workspace, children);
+	return /* @__PURE__ */ jsx(BeforeSignIn, { children: page });
+};
+const useAuthPage = (workspace, children) => {
 	const { state, recheck, passwordReset, signOut, signInProviders, canSignUp, browse } = useAuth();
 	const { path, params, basePath, navigate } = useRouter();
 	const { address, next, open, link, leave } = useSignInAddress();

package/dist/auth/auth-layout.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+//#region src/auth/auth-layout.d.ts
+export type AuthLayoutProps = {
+  title: string;
+  description?: string;
+  children: ReactNode;
+};
+/** The frame of the sign-in and first-run pages: logo, title and a card. */
+export declare const AuthLayout: ({ title, description, children }: AuthLayoutProps) => import("react").JSX.Element;
+//#endregion

package/dist/auth/auth-provider.js

@@ -21,6 +21,7 @@ const AuthProvider = ({ session: given, children }) => {
 	const [staffSignIn, setStaffSignIn] = useState();
 	const [organizations, setOrganizations] = useState();
 	const [anonymous, setAnonymous] = useState(false);
+	const [beforeSignIn, setBeforeSignIn] = useState([]);
 	const signedOutState = useCallback(() => anonymous ? { kind: "visitor" } : { kind: "signed-out" }, [anonymous]);
 	const markSignedOut = useCallback(() => setState((current) => current.kind === "signed-in" ? { kind: "signed-out" } : current), []);
 	const signedOut = useRef(markSignedOut);
@@ -54,6 +55,7 @@ const AuthProvider = ({ session: given, children }) => {
 			setStaffSignIn(status.staffSignIn);
 			setOrganizations(status.organizations);
 			setAnonymous(Boolean(status.anonymous));
+			setBeforeSignIn(status.plugins ?? []);
 			if (status.needsAdmin) return setState({ kind: "needs-admin" });
 			const user = await session.session();
 			return user ? enter(user) : setState({ kind: status.anonymous ? "visitor" : "signed-out" });
@@ -79,6 +81,13 @@ const AuthProvider = ({ session: given, children }) => {
 		...organizations && { organizations },
 		markSignedOut,
 		recheck,
+		beforeSignIn,
+		adoptSession: async () => {
+			const user = await session.session();
+			if (!user) return false;
+			await enter(user);
+			return true;
+		},
 		...anonymous && { browse: () => {
 			setState((current) => current.kind === "signed-out" ? { kind: "visitor" } : current);
 		} },
@@ -116,6 +125,7 @@ const AuthProvider = ({ session: given, children }) => {
 		staffSignIn,
 		organizations,
 		anonymous,
+		beforeSignIn,
 		signedOutState,
 		markSignedOut,
 		recheck,

package/dist/auth/code-form.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from "react";
+//#region src/auth/code-form.d.ts
+export type CodeFormProps = {
+  title: string;
+  description?: string;
+  /** Above the code: which address it went to, and how long it works. */
+  explanation: ReactNode;
+  /** The button that checks the code, which a complete code presses by itself. */
+  submitLabel: string;
+  /** Called with the code; the page shows `error` when it is not right. */
+  onSubmit: (code: string) => void;
+  /** Sends a new code to the same address. */
+  onResend: () => void;
+  /** Back to the step that asked for the address, for another one. */
+  onChangeAddress: () => void;
+  changeAddressLabel: string;
+  busy?: boolean;
+  error?: string;
+  /** Shown once a new code is on its way. */
+  notice?: string;
+  /** Seconds before "Send a new code" works, after each code; 30 by default. */
+  resendCooldown?: number;
+};
+/**
+ * A step that checks an emailed code on its own: where it went, a box per digit, a new code after a wait, and a way back
+ * to another address. Nothing else is asked for until the code is right.
+ */
+export declare const CodeForm: ({ title, description, explanation, submitLabel, onSubmit, onResend, onChangeAddress, changeAddressLabel, busy, error, notice, resendCooldown }: CodeFormProps) => import("react").JSX.Element;
+//#endregion

package/dist/auth/resend-code-button.d.ts

@@ -0,0 +1,11 @@
+//#region src/auth/resend-code-button.d.ts
+export type ResendCodeButtonProps = {
+  /** Sends a new code; the button waits `cooldown` seconds again after it. */
+  onResend: () => void;
+  /** Seconds to wait after a code went out before another is asked for; 30 by default. */
+  cooldown?: number;
+  disabled?: boolean;
+};
+/** "Send a new code", counting down first: the screen opens right after a code went out, and so does every resend. */
+export declare const ResendCodeButton: ({ onResend, cooldown, disabled }: ResendCodeButtonProps) => import("react").JSX.Element;
+//#endregion