@protobase/ui 0.45.12 → 0.45.13

package/dist/app/main.js

@@ -2,6 +2,7 @@ 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 { showKeyboardAccessoryBar } from "./native-keyboard.js";
 import { applyNativeViewport } from "./native-viewport.js";
 import { pageApiOrigin } from "./page-api-origin.js";
 import { StrictMode } from "react";
@@ -13,7 +14,10 @@ import "../styles.css";
 const root = document.getElementById("root");
 if (!root) throw new Error("index.html needs an element with id \"root\"");
 const nativeBridge = nativeBridgeOf(window);
-if (nativeBridge) applyNativeViewport(document);
+if (nativeBridge) {
+	applyNativeViewport(document);
+	showKeyboardAccessoryBar(nativeBridge);
+}
 createRoot(root).render(/* @__PURE__ */ jsx(StrictMode, { children: /* @__PURE__ */ jsx(App, {
 	baseUrl: `${pageApiOrigin() ?? ""}/api/v1`,
 	ui: uiFromModule(projectUi),

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

@@ -3,6 +3,7 @@
 export type NativeBridge = {
   isNativePlatform(): boolean;
   getPlatform(): string;
+  isPluginAvailable(name: string): boolean;
   nativePromise(plugin: string, method: string, options: object): Promise<unknown>;
 };
 //#endregion

package/dist/app/native-keyboard.js

@@ -0,0 +1,12 @@
+//#region src/app/native-keyboard.ts
+/**
+* Gives the iOS app's keyboard back the bar above it, with the arrows to the previous and next field and Done, which
+* Capacitor's keyboard plugin hides when it loads and has no setting for. A binary built before it had the plugin,
+* and Android, which has no such bar, are left as they are.
+*/
+const showKeyboardAccessoryBar = async (bridge) => {
+	if (bridge.getPlatform() !== "ios" || !bridge.isPluginAvailable("Keyboard")) return;
+	await bridge.nativePromise("Keyboard", "setAccessoryBarVisible", { isVisible: true });
+};
+//#endregion
+export { showKeyboardAccessoryBar };

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

@@ -7,6 +7,9 @@ export type AuthLayoutProps = {
   size?: 'sm' | 'md';
   children: ReactNode;
 };
-/** The frame of the sign-in and first-run pages and of public forms: logo, title and a card. */
+/**
+ * The frame of the sign-in and first-run pages and of public forms: logo, title and a card. On a page as short as a
+ * phone's above its keyboard the logo and most of the margins go, so the card still shows whole above the keyboard.
+ */
 export declare const AuthLayout: ({ title, description, size, children }: AuthLayoutProps) => import("react").JSX.Element;
 //#endregion

package/dist/auth/auth-layout.js

@@ -2,17 +2,20 @@ import { cn } from "../lib/cn.js";
 import { LogoMark } from "../app-shell/logo.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/auth/auth-layout.tsx
-/** The frame of the sign-in and first-run pages and of public forms: logo, title and a card. */
+/**
+* The frame of the sign-in and first-run pages and of public forms: logo, title and a card. On a page as short as a
+* phone's above its keyboard the logo and most of the margins go, so the card still shows whole above the keyboard.
+*/
 const AuthLayout = ({ title, description, size = "sm", children }) => /* @__PURE__ */ jsx("div", {
-	className: "flex min-h-full w-full items-center justify-center bg-surface px-4 pb-[calc(2.5rem+var(--pb-safe-bottom))] pt-[calc(2.5rem+var(--pb-safe-top))]",
+	className: "flex min-h-full w-full items-center justify-center bg-surface px-4 pb-[calc(2.5rem+var(--pb-safe-bottom))] pt-[calc(2.5rem+var(--pb-safe-top))] short:pb-[calc(1rem+var(--pb-safe-bottom))] short:pt-[calc(1rem+var(--pb-safe-top))]",
 	children: /* @__PURE__ */ jsxs("div", {
 		className: cn("w-full", size === "sm" ? "max-w-sm" : "max-w-lg"),
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: "mb-6 flex flex-col items-center text-center",
+			className: "mb-6 flex flex-col items-center text-center short:mb-4",
 			children: [
-				/* @__PURE__ */ jsx(LogoMark, { className: "size-10" }),
+				/* @__PURE__ */ jsx(LogoMark, { className: "size-10 short:hidden" }),
 				/* @__PURE__ */ jsx("h1", {
-					className: "mt-4 text-xl font-semibold tracking-tight",
+					className: "mt-4 text-xl font-semibold tracking-tight short:mt-0",
 					children: title
 				}),
 				description && /* @__PURE__ */ jsx("p", {

package/dist/package.js

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