@protobase/ui 0.19.0 → 0.19.2

package/dist/index.d.ts

@@ -1,5 +1,6 @@
+import { LogoMark, ShellLogoProps } from "./app-shell/logo.js";
 import { FieldWidget, FieldWidgetEditorProps, FieldWidgetProps } from "./app/field-types/field-widget.js";
-import { ActionContext, ActionHandler, ProjectUi, definePlugin, defineUi } from "./app/pages/project-ui.js";
+import { ActionContext, ActionHandler, BeforeSignInProps, ProjectUi, definePlugin, defineUi } from "./app/pages/project-ui.js";
 import { PluginInfo, usePlugin } from "./plugins/plugin-context.js";
 import { App, AppProps } from "./app/app.js";
 import "./app/index.js";
@@ -42,4 +43,10 @@ import { Step, StepList, StepState } from "./step-list/step-list.js";
 import { DiffView, DiffViewProps } from "./diff-view/diff-view.js";
 import { DiffLine, diffStats, parseDiff } from "./diff-view/diff.js";
 import { CompactTable, CompactTableProps } from "./compact-table/compact-table.js";
-export { ActionCard, type ActionCardProps, type ActionContext, type ActionHandler, ApiProvider, type ApiProviderProps, App, AppLink, type AppProps, AssistantDock, type AssistantDockProps, type BackendData, type BackendRefresh, type CardAction, type CardTone, ChatMessage, ChatThread, type ChatThreadProps, CompactTable, type CompactTableProps, Composer, type ComposerProps, type CurrentAddress, type DiffLine, DiffView, type DiffViewProps, FieldList, type FieldWidget, type FieldWidgetEditorProps, type FieldWidgetProps, type LayoutRecord, type ListAddress, type ListChange, type ListDisplay, type ListDisplayRow, type MetaData, OtpInput, type OtpInputProps, PartView, type PluginInfo, type ProjectUi, type RecordCardProps, RecordLink, ResponsiveDialog, type ResponsiveDialogProps, SidePanel, type SidePanelProps, SignInPrompt, type SignInPromptProps, type Step, StepList, type StepState, definePlugin, defineUi, diffStats, isConflict, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useResourceClient, useSeries, useUpdateRecord };
+import { AuthLayout, AuthLayoutProps } from "./auth/auth-layout.js";
+import { CodeForm, CodeFormProps } from "./auth/code-form.js";
+import { ResendCodeButton, ResendCodeButtonProps } from "./auth/resend-code-button.js";
+import { Button, ButtonProps, buttonClass } from "./primitives/button.js";
+import { Input, InputProps } from "./primitives/input.js";
+import { Spinner } from "./primitives/spinner.js";
+export { ActionCard, type ActionCardProps, type ActionContext, type ActionHandler, ApiProvider, type ApiProviderProps, App, AppLink, type AppProps, AssistantDock, type AssistantDockProps, AuthLayout, type AuthLayoutProps, type BackendData, type BackendRefresh, type BeforeSignInProps, Button, type ButtonProps, type CardAction, type CardTone, ChatMessage, ChatThread, type ChatThreadProps, CodeForm, type CodeFormProps, CompactTable, type CompactTableProps, Composer, type ComposerProps, type CurrentAddress, type DiffLine, DiffView, type DiffViewProps, FieldList, type FieldWidget, type FieldWidgetEditorProps, type FieldWidgetProps, Input, type InputProps, type LayoutRecord, type ListAddress, type ListChange, type ListDisplay, type ListDisplayRow, LogoMark, type MetaData, OtpInput, type OtpInputProps, PartView, type PluginInfo, type ProjectUi, type RecordCardProps, RecordLink, ResendCodeButton, type ResendCodeButtonProps, ResponsiveDialog, type ResponsiveDialogProps, type ShellLogoProps, SidePanel, type SidePanelProps, SignInPrompt, type SignInPromptProps, Spinner, type Step, StepList, type StepState, buttonClass, definePlugin, defineUi, diffStats, isConflict, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useResourceClient, useSeries, useUpdateRecord };

package/dist/index.js

@@ -1,5 +1,16 @@
+import { LogoMark } from "./app-shell/logo.js";
+import { Input } from "./primitives/input.js";
+import { Spinner } from "./primitives/spinner.js";
+import { Button, buttonClass } from "./primitives/button.js";
 import { OtpInput } from "./primitives/otp-input.js";
 import { ApiProvider, useClient, useResourceClient } from "./data/api-provider.js";
+import { AuthLayout } from "./auth/auth-layout.js";
+import { ResendCodeButton } from "./auth/resend-code-button.js";
+import { CodeForm } from "./auth/code-form.js";
+import { uiFromModule } from "./app/pages/ui-from-module.js";
+import { mergeUi } from "./app/pages/merge-ui.js";
+import { usePlugin } from "./plugins/plugin-context.js";
+import { pluginApi, protobaseVersion } from "./plugins/plugin-api.js";
 import { useApiToken } from "./auth/use-api-token.js";
 import { useRecord } from "./data/use-record.js";
 import { ChatMessage } from "./chat/chat-message.js";
@@ -25,12 +36,8 @@ import { SignInPrompt } from "./auth/sign-in-prompt.js";
 import { useListDisplay } from "./app/displays/display-context.js";
 import { useFacets, useHistogram, useSeries } from "./data/use-aggregates.js";
 import { useLayoutRecord } from "./app/pages/record-scope.js";
-import { uiFromModule } from "./app/pages/ui-from-module.js";
-import { mergeUi } from "./app/pages/merge-ui.js";
-import { usePlugin } from "./plugins/plugin-context.js";
-import { pluginApi, protobaseVersion } from "./plugins/plugin-api.js";
 import { useList } from "./data/use-list.js";
 import { isConflict, useUpdateRecord } from "./data/use-update-record.js";
 import { App } from "./app/app.js";
 import { RecordLink } from "./app/displays/record-link.js";
-export { ActionCard, ApiProvider, App, AppLink, AssistantDock, ChatMessage, ChatThread, CompactTable, Composer, DiffView, FieldList, OtpInput, PartView, RecordLink, ResponsiveDialog, SidePanel, SignInPrompt, StepList, definePlugin, defineUi, diffStats, isConflict, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useResourceClient, useSeries, useUpdateRecord };
+export { ActionCard, ApiProvider, App, AppLink, AssistantDock, AuthLayout, Button, ChatMessage, ChatThread, CodeForm, CompactTable, Composer, DiffView, FieldList, Input, LogoMark, OtpInput, PartView, RecordLink, ResendCodeButton, ResponsiveDialog, SidePanel, SignInPrompt, Spinner, StepList, buttonClass, definePlugin, defineUi, diffStats, isConflict, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useResourceClient, useSeries, useUpdateRecord };

package/dist/package.js

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

package/dist/plugins/before-sign-in.js

@@ -0,0 +1,49 @@
+import { Spinner } from "../primitives/spinner.js";
+import { useAuth } from "../auth/auth-provider.js";
+import { useRouter } from "../app/router.js";
+import { CustomBoundary } from "../app/pages/custom-boundary.js";
+import { mergePlugins } from "./merge-plugins.js";
+import { usePluginSource } from "./plugin-source.js";
+import { usePluginLoads } from "./use-plugin-loads.js";
+import { useCallback, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/plugins/before-sign-in.tsx
+/**
+* Loads the plugins the setup status names to everyone, from the app's plugin source, and draws their `beforeSignIn`
+* components around `children` for someone signed out or a visitor, once they have loaded, or failed, or after a wait
+* (see `usePluginLoads`). Signed in, it draws `children` alone, and the plugins stay loaded for the app to merge with
+* the others `/meta` names. A `beforeSignIn` that throws leaves `children` as they are without it.
+*/
+const BeforeSignIn = ({ children }) => {
+	const { state, beforeSignIn, adoptSession } = useAuth();
+	const { path, params, navigate } = useRouter();
+	const { loads, settled } = usePluginLoads(beforeSignIn, usePluginSource());
+	const Around = useMemo(() => mergePlugins(void 0, loads).ui.beforeSignIn, [loads]);
+	const removeParams = useCallback((names) => {
+		const kept = new URLSearchParams(params);
+		for (const name of names) kept.delete(name);
+		navigate(kept.size > 0 ? `${path}?${kept}` : path, { replace: true });
+	}, [
+		path,
+		params,
+		navigate
+	]);
+	if (state.kind !== "signed-out" && state.kind !== "visitor") return children;
+	if (!settled) return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full min-h-48 items-center justify-center gap-2 text-[13px] text-muted-foreground",
+		children: [/* @__PURE__ */ jsx(Spinner, {}), " Loading"]
+	});
+	if (!Around) return children;
+	return /* @__PURE__ */ jsx(CustomBoundary, {
+		name: "beforeSignIn",
+		fallback: children,
+		children: /* @__PURE__ */ jsx(Around, {
+			signedIn: adoptSession,
+			params,
+			removeParams,
+			children
+		})
+	});
+};
+//#endregion
+export { BeforeSignIn };

package/dist/plugins/plugin-gate.js

@@ -1,9 +1,9 @@
 import { Spinner } from "../primitives/spinner.js";
-import { ProjectUiContext } from "../app/pages/project-ui.js";
-import { useAdminMeta } from "../app/meta-gate.js";
-import { browserLoader } from "./load-plugin.js";
 import { mergePlugins } from "./merge-plugins.js";
+import { usePluginSource } from "./plugin-source.js";
 import { usePluginLoads } from "./use-plugin-loads.js";
+import { ProjectUiContext } from "../app/pages/project-ui.js";
+import { useAdminMeta } from "../app/meta-gate.js";
 import { createContext, useContext, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/plugins/plugin-gate.tsx
@@ -11,13 +11,13 @@ const PluginsOffContext = createContext([]);
 /** The plugins `/meta` names that the app did not load, and why. */
 const usePluginsOff = () => useContext(PluginsOffContext);
 /**
-* Loads the plugins `/meta` names and provides the project's UI config with theirs merged in. It draws its children
-* once they have loaded, or failed, or after a wait (see `usePluginLoads`); a plugin that fails is left out, and its
-* components draw what any missing component draws.
+* Loads the plugins `/meta` names, from the app's plugin source, and provides the project's UI config with theirs
+* merged in. It draws its children once they have loaded, or failed, or after a wait (see `usePluginLoads`); a plugin
+* that fails is left out, and its components draw what any missing component draws.
 */
-const PluginGate = ({ ui, loader = browserLoader, children }) => {
+const PluginGate = ({ ui, children }) => {
 	const { plugins = [] } = useAdminMeta();
-	const { loads, settled } = usePluginLoads(plugins, loader);
+	const { loads, settled } = usePluginLoads(plugins, usePluginSource());
 	const merged = useMemo(() => mergePlugins(ui, loads), [ui, loads]);
 	if (!settled) return /* @__PURE__ */ jsxs("div", {
 		className: "flex h-full min-h-48 items-center justify-center gap-2 text-[13px] text-muted-foreground",

package/dist/plugins/plugin-source.js

@@ -0,0 +1,32 @@
+import { browserLoader, loadPlugin } from "./load-plugin.js";
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/plugins/plugin-source.tsx
+/** A source that loads with `loader` and keeps each plugin's load, so one named before and after sign-in loads once. */
+const createPluginSource = (loader) => {
+	const loads = /* @__PURE__ */ new Map();
+	return { load: (ref) => {
+		const key = JSON.stringify(ref);
+		const known = loads.get(key);
+		if (known) return known;
+		const load = loadPlugin(ref, loader, window.location.href);
+		loads.set(key, load);
+		return load;
+	} };
+};
+const PluginSourceContext = createContext(null);
+/** The app's plugin source, loading with `loader`: the page's `fetch` and `import()` by default. */
+const PluginSourceProvider = ({ loader = browserLoader, children }) => {
+	const source = useMemo(() => createPluginSource(loader), [loader]);
+	return /* @__PURE__ */ jsx(PluginSourceContext.Provider, {
+		value: source,
+		children
+	});
+};
+const usePluginSource = () => {
+	const source = useContext(PluginSourceContext);
+	if (!source) throw new Error("usePluginSource must be used inside PluginSourceProvider");
+	return source;
+};
+//#endregion
+export { PluginSourceProvider, createPluginSource, usePluginSource };

package/dist/plugins/plugin-ui.js

@@ -19,8 +19,8 @@ const fieldWithin = (plugin, name, widget) => ({
 });
 /**
 * A plugin's UI config from its module, read as a `protobase.ui.tsx` module and merged with the configs it extends,
-* named after the plugin: its components, field types and shell slots draw inside the plugin. Throws `UiConflictError`
-* when the configs it merges define a name twice.
+* named after the plugin: its components, field types, shell slots and `beforeSignIn` draw inside the plugin. Throws
+* `UiConflictError` when the configs it merges define a name twice.
 */
 const pluginUi = (plugin, module) => {
 	const ui = mergeUi({
@@ -33,12 +33,14 @@ const pluginUi = (plugin, module) => {
 		...ui.shell.actions && { actions: within(plugin, ui.shell.actions, "shell.actions") },
 		...ui.shell.rightPanel && { rightPanel: within(plugin, ui.shell.rightPanel, "shell.rightPanel") }
 	};
+	const beforeSignIn = ui.beforeSignIn && within(plugin, ui.beforeSignIn, "beforeSignIn");
 	return {
 		name: plugin.name,
 		components,
 		...ui.actions && { actions: ui.actions },
 		...fields && { fields },
-		...shell && { shell }
+		...shell && { shell },
+		...beforeSignIn && { beforeSignIn }
 	};
 };
 //#endregion

package/dist/plugins/use-plugin-loads.js

@@ -1,4 +1,3 @@
-import { loadPlugin } from "./load-plugin.js";
 import { useEffect, useState } from "react";
 //#region src/plugins/use-plugin-loads.ts
 /** How long the app waits for its plugins before it draws without the ones still loading, which arrive later. */
@@ -8,7 +7,7 @@ const none = [];
 * The plugins `refs` names, in their order, as they load. `settled` once every one has loaded or failed, or after
 * `pluginWaitMs`, so a slow plugin delays the app only that long. Without plugins it is settled at once.
 */
-const usePluginLoads = (refs, loader) => {
+const usePluginLoads = (refs, source) => {
 	const key = JSON.stringify(refs);
 	const [state, setState] = useState({
 		key: "[]",
@@ -34,7 +33,7 @@ const usePluginLoads = (refs, loader) => {
 			publish();
 		}, pluginWaitMs);
 		refs.forEach((ref, index) => {
-			loadPlugin(ref, loader, window.location.href).then((load) => {
+			source.load(ref).then((load) => {
 				results[index] = load;
 				publish();
 			});
@@ -43,7 +42,7 @@ const usePluginLoads = (refs, loader) => {
 			active = false;
 			clearTimeout(timer);
 		};
-	}, [key, loader]);
+	}, [key, source]);
 	if (refs.length === 0) return {
 		loads: none,
 		settled: true

package/dist/primitives/button.d.ts

@@ -0,0 +1,11 @@
+import { ButtonHTMLAttributes } from "react";
+//#region src/primitives/button.d.ts
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+  size?: 'sm' | 'md';
+  loading?: boolean;
+};
+/** A button's classes, for a link that looks like one. */
+export declare const buttonClass: ({ variant, size }?: Pick<ButtonProps, "variant" | "size">) => string;
+export declare const Button: ({ variant, size, loading, className, children, disabled, ...rest }: ButtonProps) => import("react").JSX.Element;
+//#endregion

package/dist/primitives/input.d.ts

@@ -0,0 +1,11 @@
+import { InputHTMLAttributes, ReactNode, Ref } from "react";
+//#region src/primitives/input.d.ts
+export type InputProps = InputHTMLAttributes<HTMLInputElement> & {
+  ref?: Ref<HTMLInputElement>;
+  leading?: ReactNode;
+  trailing?: ReactNode;
+  invalid?: boolean;
+  wrapperClassName?: string;
+};
+export declare const Input: ({ leading, trailing, invalid, className, wrapperClassName, ...rest }: InputProps) => import("react").JSX.Element;
+//#endregion

package/dist/primitives/spinner.d.ts

@@ -0,0 +1,5 @@
+//#region src/primitives/spinner.d.ts
+export declare const Spinner: ({ className }: {
+  className?: string;
+}) => import("react").JSX.Element;
+//#endregion