@protobase/ui 0.19.1 → 0.19.2

package/dist/app/app.js

@@ -36,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";
@@ -178,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: [

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
- * and `beforeSignIn` component 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

@@ -36,7 +36,7 @@ const around = (wrappers) => {
 /**
 * 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
-* and `beforeSignIn` component 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}`));
@@ -45,6 +45,7 @@ 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 {
@@ -52,9 +53,10 @@ const mergeUi = (...uis) => {
 		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 }
 	};

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

@@ -1,3 +1,4 @@
+import { ShellLogoProps } from "../../app-shell/logo.js";
 import { FieldWidget } from "../field-types/field-widget.js";
 import { ComponentType, ReactNode } from "react";
 import { Client } from "@protobase/client";
@@ -48,10 +49,14 @@ 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

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/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/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

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import { LogoMark, ShellLogoProps } from "./app-shell/logo.js";
 import { FieldWidget, FieldWidgetEditorProps, FieldWidgetProps } from "./app/field-types/field-widget.js";
 import { ActionContext, ActionHandler, BeforeSignInProps, ProjectUi, definePlugin, defineUi } from "./app/pages/project-ui.js";
 import { PluginInfo, usePlugin } from "./plugins/plugin-context.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 BeforeSignInProps, 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,12 @@
+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";
@@ -33,4 +40,4 @@ 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.1";
+var version = "0.19.2";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };

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