@protobase/ui 0.40.7 → 0.40.9

package/dist/app/app.d.ts

@@ -2,6 +2,7 @@ import { SidebarMode } from "../app-shell/sidebar-mode.js";
 import "../app-shell/index.js";
 import { ProjectUi } from "./pages/project-ui.js";
 import { PluginLoader } from "../plugins/load-plugin.js";
+import { NativeBridge } from "./native-auth-fetch.js";
 import { Locale } from "@protobase/schema/internal";
 import { AssistantClient, AuthSession, Client, RuntimeClient } from "@protobase/client";
 //#region src/app/app.d.ts
@@ -30,11 +31,13 @@ export type AppProps = {
   pluginLoader?: PluginLoader;
   /** The language the screens are in when the app's `/meta` sets none, such as the browser's (`browserLocale()`); English by default. */
   locale?: Locale;
+  /** The native bridge of the iOS or Android app (`nativeBridgeOf`): sign-in goes through native HTTP. */
+  nativeBridge?: NativeBridge;
 };
 /**
  * The admin: a public form at `/-/forms/<name>` for anyone, the sign-in route first, `/-/sign-in`, or browsing as a
  * visitor when the project's anonymous role reads, 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, pluginLoader, locale, ...rest }: AppProps) => import("react").JSX.Element;
+export declare const App: ({ auth, workspace, basePath, initialUrl, pluginLoader, locale, nativeBridge, ...rest }: AppProps) => import("react").JSX.Element;
 //#endregion

package/dist/app/app.js

@@ -1,5 +1,6 @@
 import { setFallbackLocale } from "../locale/active-locale.js";
 import { accountMenuItems } from "../account/account-pages.js";
+import { useSidebarNoticeShown } from "../app-shell/sidebar-notice.js";
 import { AppShell } from "../app-shell/app-shell.js";
 import { AuthProvider, useAuth } from "../auth/auth-provider.js";
 import { AccountSecurityPage } from "../account/account-security-page.js";
@@ -52,6 +53,7 @@ import { PluginNotice } from "../plugins/plugin-notice.js";
 import { RecordPage } from "./record-page.js";
 import { SourceNotice } from "./source-notice.js";
 import { useGlobalSearch } from "./search/use-global-search.js";
+import { NewVersionBanner } from "./new-version/new-version-banner.js";
 import { NewVersionButton } from "./new-version/new-version-button.js";
 import { NewVersionToast } from "./new-version/new-version-toast.js";
 import { RuntimeUpdateButton } from "./runtime/runtime-update.js";
@@ -142,7 +144,8 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 		url: runtimeUrl,
 		client: runtime
 	});
-	const reloadButton = meta.versionChange && /* @__PURE__ */ jsx(NewVersionButton, {});
+	const sidebarBanner = useSidebarNoticeShown(sidebarMode ?? "text-small");
+	const reloadButton = meta.versionChange && !sidebarBanner && /* @__PURE__ */ jsx(NewVersionButton, {});
 	const role = useActiveRole(useCallback(() => reopenIn(basePath), [basePath]), Boolean(user));
 	const acting = user && actingUser(user, role.current);
 	const admin = acting ? isAdmin(acting) : false;
@@ -244,6 +247,7 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 			onSwitch: role.switchTo
 		} : void 0,
 		onNavigate: open,
+		sidebarNotice: /* @__PURE__ */ jsx(NewVersionBanner, {}),
 		search: search.available ? {
 			placeholder: search.placeholder,
 			text: search.text,
@@ -289,13 +293,14 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 };
 const Authenticated = ({ baseUrl, client, sources, workspace, sidebarMode, ui, assistant, runtime }) => {
 	const { state, session, markSignedOut } = useAuth();
+	const sidebarBanner = useSidebarNoticeShown(sidebarMode ?? "text-small");
 	return /* @__PURE__ */ jsx(ApiProvider, {
 		baseUrl,
 		client,
 		sources,
 		token: state.kind === "visitor" ? void 0 : session.token,
 		onUnauthenticated: markSignedOut,
-		children: /* @__PURE__ */ jsx(MetaGate, { children: /* @__PURE__ */ jsxs(ToastProvider, { children: [/* @__PURE__ */ jsx(NewVersionToast, {}), /* @__PURE__ */ jsx(PluginGate, {
+		children: /* @__PURE__ */ jsx(MetaGate, { children: /* @__PURE__ */ jsxs(ToastProvider, { children: [!sidebarBanner && /* @__PURE__ */ jsx(NewVersionToast, {}), /* @__PURE__ */ jsx(PluginGate, {
 			ui,
 			children: /* @__PURE__ */ jsx(Routes, {
 				workspace,
@@ -323,11 +328,12 @@ const PublicFormGate = ({ baseUrl, client, ui, children }) => {
 * visitor when the project's anonymous role reads, 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, pluginLoader, locale, ...rest }) => {
+const App = ({ auth, workspace, basePath, initialUrl, pluginLoader, locale, nativeBridge, ...rest }) => {
 	setFallbackLocale(locale ?? "en");
 	return /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(AuthProvider, {
 		session: auth,
 		...rest.baseUrl && { origin: new URL(rest.baseUrl, window.location.href).origin },
+		...nativeBridge && { nativeBridge },
 		children: /* @__PURE__ */ jsx(Router, {
 			basePath,
 			initialUrl,

package/dist/app/main.js

@@ -1,4 +1,5 @@
 import { browserLocale } from "../locale/active-locale.js";
+import { nativeBridgeOf } from "./native-auth-fetch.js";
 import { uiFromModule } from "./pages/ui-from-module.js";
 import { App } from "./app.js";
 import { pageApiOrigin } from "./page-api-origin.js";
@@ -13,6 +14,7 @@ if (!root) throw new Error("index.html needs an element with id \"root\"");
 createRoot(root).render(/* @__PURE__ */ jsx(StrictMode, { children: /* @__PURE__ */ jsx(App, {
 	baseUrl: `${pageApiOrigin() ?? ""}/api/v1`,
 	ui: uiFromModule(projectUi),
-	locale: browserLocale()
+	locale: browserLocale(),
+	nativeBridge: nativeBridgeOf(window)
 }) }));
 //#endregion

package/dist/app/native-auth-fetch.d.ts

@@ -0,0 +1,8 @@
+//#region src/app/native-auth-fetch.d.ts
+/** What the iOS and Android app's native bridge, `window.Capacitor`, offers the page; the shell never imports Capacitor. */
+export type NativeBridge = {
+  isNativePlatform(): boolean;
+  getPlatform(): string;
+  nativePromise(plugin: string, method: string, options: object): Promise<unknown>;
+};
+//#endregion

package/dist/app/native-auth-fetch.js

@@ -0,0 +1,53 @@
+import { authBasePath, capacitorOrigin } from "@protobase/schema/internal";
+//#region src/app/native-auth-fetch.ts
+/** The native bridge of the page, when it runs in the iOS or Android app; `undefined` in a browser. */
+const nativeBridgeOf = (win) => win.Capacitor?.isNativePlatform() ? win.Capacitor : void 0;
+const nullBodyStatuses = [
+	101,
+	204,
+	205,
+	304
+];
+const encodedSeparator = /%2f|%5c/i;
+const isPlatform = (platform) => Object.hasOwn(capacitorOrigin, platform);
+const allowedUrl = (url, apiOrigin) => url.origin === apiOrigin && !url.username && !url.password && url.pathname.startsWith(`${authBasePath}/`) && !encodedSeparator.test(url.pathname);
+const bodyOf = ({ status, headers, data }) => {
+	if (nullBodyStatuses.includes(status)) return null;
+	if (Object.entries(headers).some(([name, value]) => name.toLowerCase() === "content-type" && value.startsWith("application/json"))) return JSON.stringify(data);
+	return typeof data === "string" ? data : JSON.stringify(data);
+};
+/**
+* A `fetch` for the app's sign-in, at `<apiOrigin>/api/auth/...` only, through Capacitor's native HTTP: the session
+* cookie lives in the device's cookie jar, which native HTTP sends and keeps, and the request names the Capacitor
+* origin of the platform, which the server trusts for sign-in with a mobile section. The page cannot set `Cookie`, so
+* the cookie comes from the native jar alone. Any other address is refused before the bridge is called.
+*/
+const nativeAuthFetch = (bridge, apiOrigin) => {
+	const platform = bridge.getPlatform();
+	if (!isPlatform(platform)) throw new Error(`Signing in through native HTTP is for iOS and Android, not ${platform}`);
+	const origin = capacitorOrigin[platform];
+	return async (input, init) => {
+		const request = new Request(input, init);
+		const url = new URL(request.url);
+		if (!allowedUrl(url, apiOrigin)) throw new Error(`Native sign-in requests go to ${apiOrigin}${authBasePath}/ only, not ${request.url}`);
+		const withBody = request.method !== "GET" && request.method !== "HEAD";
+		const answer = await bridge.nativePromise("CapacitorHttp", "request", {
+			url: url.href,
+			method: request.method,
+			headers: {
+				...Object.fromEntries(request.headers),
+				origin
+			},
+			...withBody && { data: await request.text() },
+			responseType: "text",
+			disableRedirects: true
+		});
+		const headers = Object.entries(answer.headers).filter(([name]) => name.toLowerCase() !== "set-cookie");
+		return new Response(bodyOf(answer), {
+			status: answer.status,
+			headers
+		});
+	};
+};
+//#endregion
+export { nativeAuthFetch, nativeBridgeOf };

package/dist/app/new-version/messages.js

@@ -6,14 +6,18 @@ const text = defineMessages({
 		description: "Reload the page to use the new version, when it suits you.",
 		reload: "Reload",
 		reloadPage: "Reload page",
-		reloadPageHint: "Reload page to use the new version"
+		reloadPageHint: "Reload page to use the new version",
+		bannerTitle: "{} updated",
+		bannerLine: "Save your work, then click here to reload. You may see errors until you do."
 	},
 	nl: {
 		title: "Deze app is bijgewerkt",
 		description: "Laad de pagina opnieuw voor de nieuwe versie, wanneer het uitkomt.",
 		reload: "Opnieuw laden",
 		reloadPage: "Opnieuw laden",
-		reloadPageHint: "Opnieuw laden om de nieuwe versie te gebruiken"
+		reloadPageHint: "Opnieuw laden om de nieuwe versie te gebruiken",
+		bannerTitle: "{} bijgewerkt",
+		bannerLine: "Sla je werk op en klik hier om te herladen. Tot dan kunnen er fouten optreden."
 	}
 });
 //#endregion

package/dist/app/new-version/new-version-banner.js

@@ -0,0 +1,37 @@
+import { useRouter } from "../router.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { slotted } from "../../locale/slotted.js";
+import { text } from "./messages.js";
+import { RotateCw } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/new-version/new-version-banner.tsx
+/**
+* Across the bottom of a full-width sidebar, from the moment the page keeps its `/meta` for a new version until it
+* reloads: the app's name, that it was updated, and a click that reloads, asking first while a guard holds unsaved
+* changes. It stands in for `NewVersionToast` and `NewVersionButton`, which float over the page.
+*/
+const NewVersionBanner = () => {
+	const { versionChange, appName } = useAdminMeta();
+	const { reload } = useRouter();
+	if (!versionChange) return null;
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: reload,
+		className: "flex w-full shrink-0 items-start gap-2 border-t border-warning/40 bg-warning-soft px-3.5 py-2 text-left text-warning-text transition-colors hover:bg-warning/15 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary",
+		children: [/* @__PURE__ */ jsx(RotateCw, {
+			"aria-hidden": true,
+			className: "mt-0.5 size-3.5 shrink-0"
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "flex min-w-0 flex-col gap-0.5",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "break-words font-semibold",
+				children: appName ? slotted(text("bannerTitle"), appName) : text("title")
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-xs",
+				children: text("bannerLine")
+			})]
+		})]
+	});
+};
+//#endregion
+export { NewVersionBanner };

package/dist/app/pages/blocks/record-cards.js

@@ -4,13 +4,22 @@ import { listColumnNames } from "../../../live/columns-from-model.js";
 import { propsOf } from "./block-props.js";
 import { RelatedCards } from "../../related-cards/related-cards.js";
 import { jsx } from "react/jsx-runtime";
+import { cardsLayoutOf } from "@protobase/layout";
 //#region src/app/pages/blocks/record-cards.tsx
+const shares = {
+	"1/4": 1 / 4,
+	"1/3": 1 / 3,
+	"1/2": 1 / 2,
+	"2/3": 2 / 3
+};
 /**
-* What a filter finds as the record page's related cards, stacked full width under a heading like a record page
-* section's, with no card frame around them, so no card sits in another.
+* What a filter finds as the record page's related cards, stacked full width or in a row that scrolls sideways, under
+* a heading like a record page section's, with no card frame around them, so no card sits in another.
 */
 const RecordCardsBlock = ({ node, slots }) => {
-	const { resource, filter = "", sort = "", fields, cardActions = [], limit = 10, display, title, description, empty } = propsOf(node);
+	const props = propsOf(node);
+	const { resource, filter = "", sort = "", fields, cardActions = [], limit = 10, display, title, description, empty } = props;
+	const { layout, cardWidth } = cardsLayoutOf(props);
 	const { resources, views } = useAdminMeta();
 	const model = resources[resource];
 	if (!model) return null;
@@ -31,7 +40,8 @@ const RecordCardsBlock = ({ node, slots }) => {
 				actions: cardActions,
 				limit,
 				display,
-				empty
+				empty,
+				carousel: layout === "carousel" ? shares[cardWidth] : void 0
 			})
 		})
 	});

package/dist/app/related-cards/related-cards.js

@@ -5,6 +5,7 @@ import { defaultOrderBy } from "../list-order.js";
 import { AppLink } from "../use-app-address.js";
 import { ErrorBanner } from "../error-banner.js";
 import { scopeOf, useCount, useListPage } from "../pages/use-layout-data.js";
+import { SnapRow } from "../../primitives/snap-row.js";
 import { text } from "../embedded-list/messages.js";
 import { cutOffNote } from "../embedded-list/cut-off-note.js";
 import { embeddedDisplay, viewAllAddress } from "../embedded-list/embedded-display.js";
@@ -14,10 +15,10 @@ import { ArrowRight } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/related-cards/related-cards.tsx
 /**
-* The first `limit` records of a list as cards stacked full width, each with its fields and its actions' buttons, and a
-* link to the whole list beside a note such as "The first 10 of 37." when there are more.
+* The first `limit` records of a list as cards stacked full width or in a `carousel`, each with its fields and its
+* actions' buttons, and a link to the whole list beside a note such as "The first 10 of 37." when there are more.
 */
-const RelatedCards = ({ model, view, filter, sort, fields, actions, limit, display, empty }) => {
+const RelatedCards = ({ model, view, filter, sort, fields, actions, limit, display, empty, carousel }) => {
 	const xs = useIsXs();
 	const orderBy = sort || defaultOrderBy(model, view);
 	const page = useListPage(model, {
@@ -39,20 +40,24 @@ const RelatedCards = ({ model, view, filter, sort, fields, actions, limit, displ
 		className: "text-muted-foreground",
 		children: empty ?? text$1("nothingYet")
 	});
+	const cards = rows.map((row) => {
+		const scope = scopeOf(model, row);
+		return /* @__PURE__ */ jsx(RelatedCard, {
+			scope,
+			view,
+			fields,
+			actions
+		}, scope.key);
+	});
 	const note = count.data === void 0 ? void 0 : cutOffNote(rows.length, count.data, false);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col gap-3",
-		children: [/* @__PURE__ */ jsx("ul", {
+		children: [carousel === void 0 ? /* @__PURE__ */ jsx("ul", {
 			className: "flex flex-col gap-3",
-			children: rows.map((row) => {
-				const scope = scopeOf(model, row);
-				return /* @__PURE__ */ jsx(RelatedCard, {
-					scope,
-					view,
-					fields,
-					actions
-				}, scope.key);
-			})
+			children: cards
+		}) : /* @__PURE__ */ jsx(SnapRow, {
+			share: carousel,
+			children: cards
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-wrap items-center justify-between gap-2",
 			children: [/* @__PURE__ */ jsx("p", {

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

@@ -4,14 +4,16 @@ import { BottomBar } from "./bottom-bar.js";
 import { Drawer } from "./drawer.js";
 import { PageScrollContext, usePageGutter, usePageInsets } from "./page-scroll.js";
 import { Sidebar } from "./sidebar.js";
+import { useSidebarNoticeShown } from "./sidebar-notice.js";
 import { TopBarSlotContext } from "./top-bar-slot.js";
 import { TopBar } from "./top-bar.js";
 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, appName, appIcon, logo, 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, appName, appIcon, logo, actions, rightPanel, sidebarNotice, forceExpanded, profileMenuOpen, navGroups, userMenu, bottomBar, onNavigate, onSignOut, signIn, organizations, roles, theme, search, pageScroll: scrollsByDefault = false, className, children }) => {
 	const desktop = useIsDesktop();
+	const noticeShown = useSidebarNoticeShown(sidebarMode);
 	const [drawerOpen, setDrawerOpen] = useState(false);
 	useEffect(() => {
 		if (desktop) setDrawerOpen(false);
@@ -24,9 +26,10 @@ const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, appNam
 	const bottomBarRef = useRef(null);
 	usePageInsets(pageScroll, topBarRef, bottomBarRef, Boolean(tabs));
 	usePageGutter(pageScroll);
-	const sidebar = (mode, sticky = false) => /* @__PURE__ */ jsx(Sidebar, {
+	const sidebar = (mode, sticky = false, notice) => /* @__PURE__ */ jsx(Sidebar, {
 		mode,
 		sticky,
+		notice,
 		activeItem,
 		user,
 		workspace,
@@ -49,7 +52,7 @@ const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, appNam
 		children: /* @__PURE__ */ jsxs("div", {
 			className: cn(pageScroll ? "flex min-h-full w-full overflow-x-clip bg-background" : "relative flex h-full min-h-0 w-full overflow-hidden bg-background", className),
 			children: [
-				desktop ? sidebar(sidebarMode, pageScroll) : /* @__PURE__ */ jsx(Drawer, {
+				desktop ? sidebar(sidebarMode, pageScroll, noticeShown && sidebarNotice) : /* @__PURE__ */ jsx(Drawer, {
 					id: drawerId,
 					open: drawerOpen,
 					onClose: () => setDrawerOpen(false),

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

@@ -0,0 +1,12 @@
+import { useIsDesktop } from "../lib/use-media-query.js";
+import { isTextMode } from "./sidebar-mode.js";
+//#region src/app-shell/sidebar-notice.ts
+/**
+* Whether the shell draws its `sidebarNotice`: where the sidebar shows at full width, from the `md` breakpoint up in a
+* text mode. Collapsed to icons, or a drawer on phones, it has no room, so the app says the same another way.
+*/
+const useSidebarNoticeShown = (mode) => {
+	return useIsDesktop() && isTextMode(mode);
+};
+//#endregion
+export { useSidebarNoticeShown };

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

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

package/dist/app-shell/sidebar.js

@@ -11,7 +11,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, appName, appIcon, forceExpanded, profileMenuOpen, groups = navGroups, userMenu, onNavigate, onSignOut, signIn, organizations, roles, theme, sticky, logo: SidebarLogo = Logo }) => {
+const Sidebar = ({ mode, activeItem, user, workspace, appName, appIcon, forceExpanded, profileMenuOpen, groups = navGroups, userMenu, onNavigate, onSignOut, signIn, organizations, roles, theme, sticky, logo: SidebarLogo = Logo, notice }) => {
 	const expanding = mode === "icon-expand";
 	const expanded = expanding && forceExpanded;
 	const inline = isTextMode(mode) || expanding;
@@ -51,6 +51,7 @@ const Sidebar = ({ mode, activeItem, user, workspace, appName, appIcon, forceExp
 						}, item.id))]
 					}, group.label))
 				}),
+				notice,
 				/* @__PURE__ */ jsx("div", {
 					className: cn("shrink-0 border-t p-2", mode !== "text-large" && mode !== "text-small" && !expanding && "flex justify-center"),
 					children: user ? /* @__PURE__ */ jsx(ProfileMenu, {

package/dist/auth/auth-provider.js

@@ -1,3 +1,4 @@
+import { nativeAuthFetch } from "../app/native-auth-fetch.js";
 import { providerName, withoutSignInLink } from "./provider-link.js";
 import { text } from "./messages.js";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
@@ -12,9 +13,10 @@ const useAuth = () => {
 };
 /**
 * Finds out whether the server has a login and who is signed in, and keeps that state for the app. Without a `session`,
-* it makes one on `origin`, the page's own by default.
+* it makes one on `origin`, the page's own by default; in the iOS or Android app, with its `nativeBridge`, the session
+* signs in through native HTTP, and "Forgot password?" is not offered, as a reset link cannot come back to the app.
 */
-const AuthProvider = ({ session: given, origin, children }) => {
+const AuthProvider = ({ session: given, origin, nativeBridge, children }) => {
 	const [state, setState] = useState({ kind: "loading" });
 	const [signInMethods, setSignInMethods] = useState(["password"]);
 	const [passwordReset, setPasswordReset] = useState(false);
@@ -35,8 +37,13 @@ const AuthProvider = ({ session: given, origin, children }) => {
 	signedOut.current = markSignedOut;
 	const session = useMemo(() => given ?? createAuthSession({
 		...origin && { origin },
+		...nativeBridge && { fetch: nativeAuthFetch(nativeBridge, origin ?? window.location.origin) },
 		onSignedOut: () => signedOut.current()
-	}), [given, origin]);
+	}), [
+		given,
+		origin,
+		nativeBridge
+	]);
 	const enter = useCallback(async (user) => {
 		const [{ missing }, staff] = await Promise.all([session.account.signInMethods(), session.staff.current()]);
 		setState(missing.length > 0 ? {
@@ -57,7 +64,7 @@ const AuthProvider = ({ session: given, origin, children }) => {
 		setState({ kind: "loading" });
 		session.status().then(async (status) => {
 			setSignInMethods(status.signInMethods);
-			setPasswordReset(status.passwordReset);
+			setPasswordReset(status.passwordReset && !nativeBridge);
 			setMcp(Boolean(status.mcp));
 			setCanSignUp(Boolean(status.signUp));
 			setPasskeyDomains(status.passkeyDomains ?? []);
@@ -76,7 +83,11 @@ const AuthProvider = ({ session: given, origin, children }) => {
 			kind: "error",
 			message: error instanceof Error ? error.message : text("noAnswer")
 		}));
-	}, [session, enter]);
+	}, [
+		session,
+		enter,
+		nativeBridge
+	]);
 	useEffect(recheck, [recheck]);
 	const api = useMemo(() => ({
 		state,

package/dist/package.js

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

package/dist/primitives/snap-row-width.js

@@ -0,0 +1,13 @@
+//#region src/primitives/snap-row-width.ts
+/** The space between the items of a `SnapRow`, Tailwind's `gap-3`. */
+const snapRowGap = "0.75rem";
+/**
+* How wide an item of a row is at `share` of the row's width, the gaps taken off so that `1 / share` items fill it
+* exactly: a third leaves room for three items and the two gaps between them.
+*/
+const snapItemWidth = (share) => {
+	if (!(share > 0 && share <= 1)) throw new Error(`An item's share of a row is above 0 and at most 1, not ${share}`);
+	return `calc((100% + ${snapRowGap}) * ${share} - ${snapRowGap})`;
+};
+//#endregion
+export { snapItemWidth, snapRowGap };

package/dist/primitives/snap-row.js

@@ -0,0 +1,21 @@
+import { snapItemWidth, snapRowGap } from "./snap-row-width.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/primitives/snap-row.tsx
+/**
+* A list laid out as one row that scrolls sideways, by touch, trackpad, wheel or its scrollbar, and snaps each item to
+* its left edge. Each item is `share` of the row wide, but never narrower than 12rem or the row, so narrow shares stay
+* readable on a phone; the items are top aligned. The row scrolls on its own because the page cannot scroll sideways,
+* and only sideways: it is as tall as its tallest item. A swipe past its last item stops there.
+*/
+const SnapRow = ({ share, label, children }) => /* @__PURE__ */ jsx("ul", {
+	"aria-label": label,
+	className: "flex snap-x snap-mandatory items-start overflow-x-auto overflow-y-hidden overscroll-x-contain pb-1 *:w-(--snap-item-width) *:min-w-[min(100%,12rem)] *:shrink-0 *:snap-start",
+	style: {
+		gap: snapRowGap,
+		scrollbarWidth: "thin",
+		"--snap-item-width": snapItemWidth(share)
+	},
+	children
+});
+//#endregion
+export { SnapRow };