@poly-x/react 0.1.0-alpha.3 → 0.1.0-alpha.5

package/dist/index.cjs

@@ -355,6 +355,7 @@ function Protected({ children, fallback = null, loading = null }) {
 const DEFAULT_LABELS = {
 	heading: "Sign in",
 	subheading: "Enter your credentials to continue.",
+	tagline: "",
 	emailLabel: "Email",
 	emailPlaceholder: "you@company.com",
 	passwordLabel: "Password",
@@ -363,11 +364,21 @@ const DEFAULT_LABELS = {
 	submitting: "Signing in…",
 	chooseWorkspace: "Choose a workspace",
 	chooseWorkspaceSubheading: "You have access to more than one workspace.",
+	securedBy: "Secured by PolyX",
+	setPasswordHeading: "Choose a new password",
+	setPasswordSubheading: "Your temporary password must be replaced before you continue.",
+	newPasswordLabel: "New password",
+	confirmPasswordLabel: "Confirm new password",
+	setPasswordSubmit: "Set password and sign in",
+	passwordMismatch: "Those passwords don't match.",
+	weakPassword: "Password must be at least 6 characters.",
 	invalidCredentials: "Invalid email or password.",
 	noAccess: "You don't have access to this application.",
 	passwordChangeRequired: "You must reset your password before you can sign in.",
 	genericError: "Something went wrong. Please try again."
 };
+/** Mirrors poly-auth's own floor (Joi: min 6). */
+const MIN_PASSWORD_LENGTH = 6;
 /**
 * The embedded, Clerk-style sign-in form (D2b). Renders email/password inside the
 * consuming app and POSTs to the SDK's BFF (`@poly-x/next` `authenticate`), which
@@ -387,10 +398,18 @@ function SignIn(props) {
 	};
 	const [email, setEmail] = (0, react.useState)("");
 	const [password, setPassword] = (0, react.useState)("");
+	const [newPassword, setNewPassword] = (0, react.useState)("");
+	const [confirmPassword, setConfirmPassword] = (0, react.useState)("");
+	const [mustSetPassword, setMustSetPassword] = (0, react.useState)(false);
 	const [tenants, setTenants] = (0, react.useState)(null);
 	const [submitting, setSubmitting] = (0, react.useState)(false);
 	const [error, setError] = (0, react.useState)(null);
-	async function authenticate(tenantId) {
+	/**
+	* One round-trip to the BFF. `tenantId` picks a workspace; `passwords` completes
+	* the temp-password flow (the BFF re-verifies the temporary password, sets the
+	* new one, and signs the user straight in).
+	*/
+	async function authenticate(options = {}) {
 		setSubmitting(true);
 		setError(null);
 		try {
@@ -401,7 +420,8 @@ function SignIn(props) {
 					email,
 					password,
 					organizationCode: props.organizationCode,
-					tenantId
+					tenantId: options.tenantId,
+					...options.passwords
 				})
 			})).json().catch(() => ({}));
 			switch (body.status) {
@@ -411,16 +431,22 @@ function SignIn(props) {
 				case "select_tenant":
 					setTenants(body.tenants ?? []);
 					return;
+				case "password_change_required":
+					setMustSetPassword(true);
+					if (body.userId) props.onPasswordChangeRequired?.(body.userId);
+					return;
+				case "password_mismatch":
+					setError(labels.passwordMismatch);
+					return;
+				case "weak_password":
+					setError(labels.weakPassword);
+					return;
 				case "invalid_credentials":
 					setError(labels.invalidCredentials);
 					return;
 				case "no_access":
 					setError(labels.noAccess);
 					return;
-				case "password_change_required":
-					setError(labels.passwordChangeRequired);
-					if (body.userId) props.onPasswordChangeRequired?.(body.userId);
-					return;
 				default:
 					setError(labels.genericError);
 					return;
@@ -435,26 +461,54 @@ function SignIn(props) {
 		event.preventDefault();
 		authenticate();
 	}
+	function onSetPasswordSubmit(event) {
+		event.preventDefault();
+		if (newPassword !== confirmPassword) {
+			setError(labels.passwordMismatch);
+			return;
+		}
+		authenticate({ passwords: {
+			newPassword,
+			confirmPassword
+		} });
+	}
+	const picking = tenants !== null;
+	const hasPanel = variant === "page";
+	const showHeaderLogo = Boolean(props.logo) && !hasPanel;
 	const rootClass = [
 		"polyx-signin",
 		`polyx-signin--${variant}`,
 		props.className
 	].filter(Boolean).join(" ");
-	const picking = tenants !== null;
+	const step = picking ? "select_tenant" : mustSetPassword ? "set_password" : "credentials";
+	const HEADINGS = {
+		credentials: {
+			heading: labels.heading,
+			subheading: labels.subheading
+		},
+		select_tenant: {
+			heading: labels.chooseWorkspace,
+			subheading: labels.chooseWorkspaceSubheading
+		},
+		set_password: {
+			heading: labels.setPasswordHeading,
+			subheading: labels.setPasswordSubheading
+		}
+	};
 	const header = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "polyx-signin__header",
 		children: [
-			props.logo ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			showHeaderLogo ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "polyx-signin__logo",
 				children: props.logo
 			}) : null,
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
 				className: "polyx-signin__heading",
-				children: picking ? labels.chooseWorkspace : labels.heading
+				children: HEADINGS[step].heading
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 				className: "polyx-signin__subheading",
-				children: picking ? labels.chooseWorkspaceSubheading : labels.subheading
+				children: HEADINGS[step].subheading
 			})
 		]
 	});
@@ -463,24 +517,84 @@ function SignIn(props) {
 		className: "polyx-signin__error",
 		children: error
 	}) : null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: rootClass,
-		"data-polyx-signin": picking ? "select-tenant" : "credentials",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "polyx-signin__card",
-			children: [header, picking ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "polyx-signin__form",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-					className: "polyx-signin__tenants",
-					children: tenants.map((tenant) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						className: "polyx-signin__tenant",
-						disabled: submitting,
-						onClick: () => void authenticate(tenant.tenantId),
-						children: tenant.name ?? tenant.slug ?? tenant.organizationCode ?? tenant.tenantId
-					}) }, tenant.tenantId))
-				}), errorNode]
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+	const footer = props.showSecuredBy === false ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+		className: "polyx-signin__footer",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+			className: "polyx-signin__shield",
+			viewBox: "0 0 16 16",
+			fill: "currentColor",
+			"aria-hidden": "true",
+			focusable: "false",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M8 0.5 2 3v4.2c0 3.5 2.5 6.7 6 7.8 3.5-1.1 6-4.3 6-7.8V3L8 .5Zm2.9 5.6-3.4 3.4a.7.7 0 0 1-1 0L5.1 8.1a.7.7 0 1 1 1-1l.9.9 2.9-2.9a.7.7 0 0 1 1 1Z" })
+		}), labels.securedBy]
+	});
+	const tenantPicker = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "polyx-signin__form",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+			className: "polyx-signin__tenants",
+			children: (tenants ?? []).map((tenant) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: "polyx-signin__tenant",
+				disabled: submitting,
+				onClick: () => void authenticate({ tenantId: tenant.tenantId }),
+				children: tenant.name ?? tenant.slug ?? tenant.organizationCode ?? tenant.tenantId
+			}) }, tenant.tenantId))
+		}), errorNode]
+	});
+	const setPasswordForm = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+		className: "polyx-signin__form",
+		onSubmit: onSetPasswordSubmit,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+				className: "polyx-signin__field",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "polyx-signin__label",
+					children: labels.newPasswordLabel
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					className: "polyx-signin__input",
+					type: "password",
+					name: "newPassword",
+					autoComplete: "new-password",
+					placeholder: labels.passwordPlaceholder,
+					required: true,
+					minLength: MIN_PASSWORD_LENGTH,
+					value: newPassword,
+					disabled: submitting,
+					onChange: (event) => setNewPassword(event.target.value)
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+				className: "polyx-signin__field",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "polyx-signin__label",
+					children: labels.confirmPasswordLabel
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					className: "polyx-signin__input",
+					type: "password",
+					name: "confirmPassword",
+					autoComplete: "new-password",
+					placeholder: labels.passwordPlaceholder,
+					required: true,
+					minLength: MIN_PASSWORD_LENGTH,
+					value: confirmPassword,
+					disabled: submitting,
+					onChange: (event) => setConfirmPassword(event.target.value)
+				})]
+			}),
+			errorNode,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "submit",
+				className: "polyx-signin__submit",
+				disabled: submitting,
+				children: submitting ? labels.submitting : labels.setPasswordSubmit
+			})
+		]
+	});
+	const card = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "polyx-signin__card",
+		children: [
+			header,
+			step === "select_tenant" ? tenantPicker : step === "set_password" ? setPasswordForm : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
 				className: "polyx-signin__form",
 				onSubmit,
 				children: [
@@ -526,8 +640,31 @@ function SignIn(props) {
 						children: submitting ? labels.submitting : labels.submit
 					})
 				]
-			})]
-		})
+			}),
+			footer
+		]
+	});
+	if (variant === "page") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: rootClass,
+		"data-polyx-signin": step,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
+			className: "polyx-signin__panel",
+			children: props.panel ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [props.logo ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "polyx-signin__panel-logo",
+				children: props.logo
+			}) : null, labels.tagline ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "polyx-signin__tagline",
+				children: labels.tagline
+			}) : null] })
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "polyx-signin__main",
+			children: card
+		})]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: rootClass,
+		"data-polyx-signin": step,
+		children: card
 	});
 }
 //#endregion

package/dist/index.d.cts

@@ -195,6 +195,8 @@ declare function Protected({
 interface SignInLabels {
   heading: string;
   subheading: string;
+  /** Headline on the `page` variant's brand panel. Empty renders a clean brand panel. */
+  tagline: string;
   emailLabel: string;
   emailPlaceholder: string;
   passwordLabel: string;
@@ -203,6 +205,14 @@ interface SignInLabels {
   submitting: string;
   chooseWorkspace: string;
   chooseWorkspaceSubheading: string;
+  securedBy: string;
+  setPasswordHeading: string;
+  setPasswordSubheading: string;
+  newPasswordLabel: string;
+  confirmPasswordLabel: string;
+  setPasswordSubmit: string;
+  passwordMismatch: string;
+  weakPassword: string;
   invalidCredentials: string;
   noAccess: string;
   passwordChangeRequired: string;
@@ -210,12 +220,19 @@ interface SignInLabels {
 }
 /**
  * `card` renders just the card — drop it into your own layout.
- * `page` owns the viewport — a centered card on a full-bleed background.
+ * `page` owns the viewport — a split layout with a brand panel beside the form
+ * (the panel collapses away under 64rem, leaving the form on its own).
  */
 type SignInVariant = "card" | "page";
 interface SignInProps {
   /** Layout preset. Default `card`. */
   variant?: SignInVariant;
+  /**
+   * Content for the `page` variant's brand panel. Defaults to your `logo` plus
+   * `labels.tagline`; pass your own node to take the panel over completely.
+   * Ignored by the `card` variant.
+   */
+  panel?: ReactNode;
   /** BFF endpoint backed by `createAuthHandlers().authenticate`. Default `/api/polyx/authenticate`. */
   action?: string;
   /** Where to send the browser after success. Overrides the server's default redirect. */
@@ -224,6 +241,8 @@ interface SignInProps {
   organizationCode?: string;
   /** Rendered above the heading — your wordmark or logo. */
   logo?: ReactNode;
+  /** Show the "Secured by PolyX" attribution under the form. Default true. */
+  showSecuredBy?: boolean;
   /** Appended to the root element's class list, for escape-hatch styling. */
   className?: string;
   labels?: Partial<SignInLabels>;

package/dist/index.d.mts

@@ -195,6 +195,8 @@ declare function Protected({
 interface SignInLabels {
   heading: string;
   subheading: string;
+  /** Headline on the `page` variant's brand panel. Empty renders a clean brand panel. */
+  tagline: string;
   emailLabel: string;
   emailPlaceholder: string;
   passwordLabel: string;
@@ -203,6 +205,14 @@ interface SignInLabels {
   submitting: string;
   chooseWorkspace: string;
   chooseWorkspaceSubheading: string;
+  securedBy: string;
+  setPasswordHeading: string;
+  setPasswordSubheading: string;
+  newPasswordLabel: string;
+  confirmPasswordLabel: string;
+  setPasswordSubmit: string;
+  passwordMismatch: string;
+  weakPassword: string;
   invalidCredentials: string;
   noAccess: string;
   passwordChangeRequired: string;
@@ -210,12 +220,19 @@ interface SignInLabels {
 }
 /**
  * `card` renders just the card — drop it into your own layout.
- * `page` owns the viewport — a centered card on a full-bleed background.
+ * `page` owns the viewport — a split layout with a brand panel beside the form
+ * (the panel collapses away under 64rem, leaving the form on its own).
  */
 type SignInVariant = "card" | "page";
 interface SignInProps {
   /** Layout preset. Default `card`. */
   variant?: SignInVariant;
+  /**
+   * Content for the `page` variant's brand panel. Defaults to your `logo` plus
+   * `labels.tagline`; pass your own node to take the panel over completely.
+   * Ignored by the `card` variant.
+   */
+  panel?: ReactNode;
   /** BFF endpoint backed by `createAuthHandlers().authenticate`. Default `/api/polyx/authenticate`. */
   action?: string;
   /** Where to send the browser after success. Overrides the server's default redirect. */
@@ -224,6 +241,8 @@ interface SignInProps {
   organizationCode?: string;
   /** Rendered above the heading — your wordmark or logo. */
   logo?: ReactNode;
+  /** Show the "Secured by PolyX" attribution under the form. Default true. */
+  showSecuredBy?: boolean;
   /** Appended to the root element's class list, for escape-hatch styling. */
   className?: string;
   labels?: Partial<SignInLabels>;

package/dist/index.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { AuthClient, FetchTransport, InMemoryLock, InMemoryPkceStore, InMemorySessionChannel, InMemorySessionStore, createSessionEngine, generatePkce, randomState, resolveConfig } from "@poly-x/core";
 import { createContext, useCallback, useContext, useEffect, useMemo, useState, useSyncExternalStore } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/auth-channel.ts
 var BroadcastAuthChannel = class {
 	supported;
@@ -354,6 +354,7 @@ function Protected({ children, fallback = null, loading = null }) {
 const DEFAULT_LABELS = {
 	heading: "Sign in",
 	subheading: "Enter your credentials to continue.",
+	tagline: "",
 	emailLabel: "Email",
 	emailPlaceholder: "you@company.com",
 	passwordLabel: "Password",
@@ -362,11 +363,21 @@ const DEFAULT_LABELS = {
 	submitting: "Signing in…",
 	chooseWorkspace: "Choose a workspace",
 	chooseWorkspaceSubheading: "You have access to more than one workspace.",
+	securedBy: "Secured by PolyX",
+	setPasswordHeading: "Choose a new password",
+	setPasswordSubheading: "Your temporary password must be replaced before you continue.",
+	newPasswordLabel: "New password",
+	confirmPasswordLabel: "Confirm new password",
+	setPasswordSubmit: "Set password and sign in",
+	passwordMismatch: "Those passwords don't match.",
+	weakPassword: "Password must be at least 6 characters.",
 	invalidCredentials: "Invalid email or password.",
 	noAccess: "You don't have access to this application.",
 	passwordChangeRequired: "You must reset your password before you can sign in.",
 	genericError: "Something went wrong. Please try again."
 };
+/** Mirrors poly-auth's own floor (Joi: min 6). */
+const MIN_PASSWORD_LENGTH = 6;
 /**
 * The embedded, Clerk-style sign-in form (D2b). Renders email/password inside the
 * consuming app and POSTs to the SDK's BFF (`@poly-x/next` `authenticate`), which
@@ -386,10 +397,18 @@ function SignIn(props) {
 	};
 	const [email, setEmail] = useState("");
 	const [password, setPassword] = useState("");
+	const [newPassword, setNewPassword] = useState("");
+	const [confirmPassword, setConfirmPassword] = useState("");
+	const [mustSetPassword, setMustSetPassword] = useState(false);
 	const [tenants, setTenants] = useState(null);
 	const [submitting, setSubmitting] = useState(false);
 	const [error, setError] = useState(null);
-	async function authenticate(tenantId) {
+	/**
+	* One round-trip to the BFF. `tenantId` picks a workspace; `passwords` completes
+	* the temp-password flow (the BFF re-verifies the temporary password, sets the
+	* new one, and signs the user straight in).
+	*/
+	async function authenticate(options = {}) {
 		setSubmitting(true);
 		setError(null);
 		try {
@@ -400,7 +419,8 @@ function SignIn(props) {
 					email,
 					password,
 					organizationCode: props.organizationCode,
-					tenantId
+					tenantId: options.tenantId,
+					...options.passwords
 				})
 			})).json().catch(() => ({}));
 			switch (body.status) {
@@ -410,16 +430,22 @@ function SignIn(props) {
 				case "select_tenant":
 					setTenants(body.tenants ?? []);
 					return;
+				case "password_change_required":
+					setMustSetPassword(true);
+					if (body.userId) props.onPasswordChangeRequired?.(body.userId);
+					return;
+				case "password_mismatch":
+					setError(labels.passwordMismatch);
+					return;
+				case "weak_password":
+					setError(labels.weakPassword);
+					return;
 				case "invalid_credentials":
 					setError(labels.invalidCredentials);
 					return;
 				case "no_access":
 					setError(labels.noAccess);
 					return;
-				case "password_change_required":
-					setError(labels.passwordChangeRequired);
-					if (body.userId) props.onPasswordChangeRequired?.(body.userId);
-					return;
 				default:
 					setError(labels.genericError);
 					return;
@@ -434,26 +460,54 @@ function SignIn(props) {
 		event.preventDefault();
 		authenticate();
 	}
+	function onSetPasswordSubmit(event) {
+		event.preventDefault();
+		if (newPassword !== confirmPassword) {
+			setError(labels.passwordMismatch);
+			return;
+		}
+		authenticate({ passwords: {
+			newPassword,
+			confirmPassword
+		} });
+	}
+	const picking = tenants !== null;
+	const hasPanel = variant === "page";
+	const showHeaderLogo = Boolean(props.logo) && !hasPanel;
 	const rootClass = [
 		"polyx-signin",
 		`polyx-signin--${variant}`,
 		props.className
 	].filter(Boolean).join(" ");
-	const picking = tenants !== null;
+	const step = picking ? "select_tenant" : mustSetPassword ? "set_password" : "credentials";
+	const HEADINGS = {
+		credentials: {
+			heading: labels.heading,
+			subheading: labels.subheading
+		},
+		select_tenant: {
+			heading: labels.chooseWorkspace,
+			subheading: labels.chooseWorkspaceSubheading
+		},
+		set_password: {
+			heading: labels.setPasswordHeading,
+			subheading: labels.setPasswordSubheading
+		}
+	};
 	const header = /* @__PURE__ */ jsxs("div", {
 		className: "polyx-signin__header",
 		children: [
-			props.logo ? /* @__PURE__ */ jsx("div", {
+			showHeaderLogo ? /* @__PURE__ */ jsx("div", {
 				className: "polyx-signin__logo",
 				children: props.logo
 			}) : null,
 			/* @__PURE__ */ jsx("h1", {
 				className: "polyx-signin__heading",
-				children: picking ? labels.chooseWorkspace : labels.heading
+				children: HEADINGS[step].heading
 			}),
 			/* @__PURE__ */ jsx("p", {
 				className: "polyx-signin__subheading",
-				children: picking ? labels.chooseWorkspaceSubheading : labels.subheading
+				children: HEADINGS[step].subheading
 			})
 		]
 	});
@@ -462,24 +516,84 @@ function SignIn(props) {
 		className: "polyx-signin__error",
 		children: error
 	}) : null;
-	return /* @__PURE__ */ jsx("div", {
-		className: rootClass,
-		"data-polyx-signin": picking ? "select-tenant" : "credentials",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "polyx-signin__card",
-			children: [header, picking ? /* @__PURE__ */ jsxs("div", {
-				className: "polyx-signin__form",
-				children: [/* @__PURE__ */ jsx("ul", {
-					className: "polyx-signin__tenants",
-					children: tenants.map((tenant) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
-						type: "button",
-						className: "polyx-signin__tenant",
-						disabled: submitting,
-						onClick: () => void authenticate(tenant.tenantId),
-						children: tenant.name ?? tenant.slug ?? tenant.organizationCode ?? tenant.tenantId
-					}) }, tenant.tenantId))
-				}), errorNode]
-			}) : /* @__PURE__ */ jsxs("form", {
+	const footer = props.showSecuredBy === false ? null : /* @__PURE__ */ jsxs("p", {
+		className: "polyx-signin__footer",
+		children: [/* @__PURE__ */ jsx("svg", {
+			className: "polyx-signin__shield",
+			viewBox: "0 0 16 16",
+			fill: "currentColor",
+			"aria-hidden": "true",
+			focusable: "false",
+			children: /* @__PURE__ */ jsx("path", { d: "M8 0.5 2 3v4.2c0 3.5 2.5 6.7 6 7.8 3.5-1.1 6-4.3 6-7.8V3L8 .5Zm2.9 5.6-3.4 3.4a.7.7 0 0 1-1 0L5.1 8.1a.7.7 0 1 1 1-1l.9.9 2.9-2.9a.7.7 0 0 1 1 1Z" })
+		}), labels.securedBy]
+	});
+	const tenantPicker = /* @__PURE__ */ jsxs("div", {
+		className: "polyx-signin__form",
+		children: [/* @__PURE__ */ jsx("ul", {
+			className: "polyx-signin__tenants",
+			children: (tenants ?? []).map((tenant) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "polyx-signin__tenant",
+				disabled: submitting,
+				onClick: () => void authenticate({ tenantId: tenant.tenantId }),
+				children: tenant.name ?? tenant.slug ?? tenant.organizationCode ?? tenant.tenantId
+			}) }, tenant.tenantId))
+		}), errorNode]
+	});
+	const setPasswordForm = /* @__PURE__ */ jsxs("form", {
+		className: "polyx-signin__form",
+		onSubmit: onSetPasswordSubmit,
+		children: [
+			/* @__PURE__ */ jsxs("label", {
+				className: "polyx-signin__field",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "polyx-signin__label",
+					children: labels.newPasswordLabel
+				}), /* @__PURE__ */ jsx("input", {
+					className: "polyx-signin__input",
+					type: "password",
+					name: "newPassword",
+					autoComplete: "new-password",
+					placeholder: labels.passwordPlaceholder,
+					required: true,
+					minLength: MIN_PASSWORD_LENGTH,
+					value: newPassword,
+					disabled: submitting,
+					onChange: (event) => setNewPassword(event.target.value)
+				})]
+			}),
+			/* @__PURE__ */ jsxs("label", {
+				className: "polyx-signin__field",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "polyx-signin__label",
+					children: labels.confirmPasswordLabel
+				}), /* @__PURE__ */ jsx("input", {
+					className: "polyx-signin__input",
+					type: "password",
+					name: "confirmPassword",
+					autoComplete: "new-password",
+					placeholder: labels.passwordPlaceholder,
+					required: true,
+					minLength: MIN_PASSWORD_LENGTH,
+					value: confirmPassword,
+					disabled: submitting,
+					onChange: (event) => setConfirmPassword(event.target.value)
+				})]
+			}),
+			errorNode,
+			/* @__PURE__ */ jsx("button", {
+				type: "submit",
+				className: "polyx-signin__submit",
+				disabled: submitting,
+				children: submitting ? labels.submitting : labels.setPasswordSubmit
+			})
+		]
+	});
+	const card = /* @__PURE__ */ jsxs("div", {
+		className: "polyx-signin__card",
+		children: [
+			header,
+			step === "select_tenant" ? tenantPicker : step === "set_password" ? setPasswordForm : /* @__PURE__ */ jsxs("form", {
 				className: "polyx-signin__form",
 				onSubmit,
 				children: [
@@ -525,8 +639,31 @@ function SignIn(props) {
 						children: submitting ? labels.submitting : labels.submit
 					})
 				]
-			})]
-		})
+			}),
+			footer
+		]
+	});
+	if (variant === "page") return /* @__PURE__ */ jsxs("div", {
+		className: rootClass,
+		"data-polyx-signin": step,
+		children: [/* @__PURE__ */ jsx("aside", {
+			className: "polyx-signin__panel",
+			children: props.panel ?? /* @__PURE__ */ jsxs(Fragment, { children: [props.logo ? /* @__PURE__ */ jsx("div", {
+				className: "polyx-signin__panel-logo",
+				children: props.logo
+			}) : null, labels.tagline ? /* @__PURE__ */ jsx("p", {
+				className: "polyx-signin__tagline",
+				children: labels.tagline
+			}) : null] })
+		}), /* @__PURE__ */ jsx("div", {
+			className: "polyx-signin__main",
+			children: card
+		})]
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: rootClass,
+		"data-polyx-signin": step,
+		children: card
 	});
 }
 //#endregion

package/dist/styles.css

@@ -25,7 +25,10 @@
 	--polyx-ring: #a5b4fc;
 	--polyx-danger: #dc2626;
 	--polyx-danger-bg: #fef2f2;
-	--polyx-page-bg: #fafafa;
+	--polyx-page-bg: #ffffff;
+	/* The `page` variant's left panel — a quiet surface, a shade off the form side. */
+	--polyx-panel-bg: #fafafa;
+	--polyx-panel-fg: #18181b;
 
 	/* Shape + type */
 	--polyx-radius: 0.75rem;
@@ -59,7 +62,9 @@
 		--polyx-ring: #4f46e5;
 		--polyx-danger: #f87171;
 		--polyx-danger-bg: #2a1616;
-		--polyx-page-bg: #09090b;
+		--polyx-page-bg: #18181b;
+		--polyx-panel-bg: #09090b;
+		--polyx-panel-fg: #fafafa;
 		--polyx-shadow: 0 1px 3px rgb(0 0 0 / 0.4), 0 10px 30px rgb(0 0 0 / 0.35);
 	}
 }
@@ -77,7 +82,9 @@
 	--polyx-ring: #4f46e5;
 	--polyx-danger: #f87171;
 	--polyx-danger-bg: #2a1616;
-	--polyx-page-bg: #09090b;
+	--polyx-page-bg: #18181b;
+	--polyx-panel-bg: #09090b;
+	--polyx-panel-fg: #fafafa;
 	--polyx-shadow: 0 1px 3px rgb(0 0 0 / 0.4), 0 10px 30px rgb(0 0 0 / 0.35);
 }
 
@@ -92,21 +99,14 @@
 	--polyx-ring: #a5b4fc;
 	--polyx-danger: #dc2626;
 	--polyx-danger-bg: #fef2f2;
-	--polyx-page-bg: #fafafa;
+	--polyx-page-bg: #ffffff;
+	--polyx-panel-bg: #fafafa;
+	--polyx-panel-fg: #18181b;
 	--polyx-shadow: 0 1px 3px rgb(0 0 0 / 0.06), 0 10px 30px rgb(0 0 0 / 0.07);
 }
 
 /* --- Variants ------------------------------------------------------------ */
 
-/* `page`: owns the viewport — centered card on a full-bleed background. */
-.polyx-signin--page {
-	display: grid;
-	place-items: center;
-	min-height: 100dvh;
-	padding: 1.5rem;
-	background: var(--polyx-page-bg);
-}
-
 /* `card`: just the card — drop it anywhere in your own layout. */
 .polyx-signin--card {
 	display: block;
@@ -114,15 +114,86 @@
 
 .polyx-signin__card {
 	width: 100%;
-	max-width: 24rem;
+	max-width: 27rem;
 	margin-inline: auto;
-	padding: 2rem;
+	padding: 2.25rem;
 	background: var(--polyx-bg);
 	border: 1px solid var(--polyx-border);
 	border-radius: var(--polyx-radius);
 	box-shadow: var(--polyx-shadow);
 }
 
+/**
+ * `page`: owns the viewport — a left/right split. The form sits on the right; the
+ * left is a quiet surface holding whatever the consumer gives it (a `logo`, a
+ * `tagline`, or a custom `panel`). Deliberately minimal: no gradient, no invented
+ * copy. An empty panel reads as intentional negative space, and never fights the
+ * host app's brand. Below 64rem the panel drops away entirely and the form takes
+ * the screen on its own.
+ */
+.polyx-signin--page {
+	display: grid;
+	grid-template-columns: 1fr;
+	min-height: 100dvh;
+}
+
+@media (min-width: 64rem) {
+	.polyx-signin--page {
+		grid-template-columns: 1fr 1fr;
+	}
+}
+
+.polyx-signin__panel {
+	display: none;
+	flex-direction: column;
+	justify-content: space-between;
+	gap: 2rem;
+	padding: 3.5rem;
+	color: var(--polyx-panel-fg);
+	background: var(--polyx-panel-bg);
+	border-right: 1px solid var(--polyx-border);
+}
+
+@media (min-width: 64rem) {
+	.polyx-signin__panel {
+		display: flex;
+	}
+}
+
+/* The tagline is the panel's headline — it only earns its space on wide screens. */
+.polyx-signin__tagline {
+	display: none;
+	margin: 0;
+	max-width: 18ch;
+	font-size: 2rem;
+	font-weight: 600;
+	line-height: 1.2;
+	letter-spacing: -0.02em;
+}
+
+@media (min-width: 64rem) {
+	.polyx-signin__tagline {
+		display: block;
+	}
+}
+
+.polyx-signin__main {
+	display: grid;
+	place-items: center;
+	padding: 2.5rem 1.5rem;
+	background: var(--polyx-page-bg);
+}
+
+/* On the page variant the form isn't a floating card — it sits on the page itself. */
+.polyx-signin--page .polyx-signin__card {
+	max-width: 25rem;
+	padding: 0;
+	background: transparent;
+	border: none;
+	box-shadow: none;
+}
+
+
 /* --- Header -------------------------------------------------------------- */
 
 .polyx-signin__header {
@@ -249,6 +320,25 @@
 	border-radius: var(--polyx-radius-sm);
 }
 
+/* --- Footer -------------------------------------------------------------- */
+
+.polyx-signin__footer {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.375rem;
+	margin-top: 1.5rem;
+	font-size: 0.75rem;
+	color: var(--polyx-muted-fg);
+}
+
+.polyx-signin__shield {
+	flex: none;
+	width: 0.875rem;
+	height: 0.875rem;
+	opacity: 0.85;
+}
+
 /* --- Workspace picker ---------------------------------------------------- */
 
 .polyx-signin__tenants {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@poly-x/react",
-  "version": "0.1.0-alpha.3",
+  "version": "0.1.0-alpha.5",
   "description": "PolyX SDK for React SPAs - provider, hooks, drop-in auth UI",
   "license": "MIT",
   "type": "module",
@@ -27,7 +27,7 @@
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.cts",
   "dependencies": {
-    "@poly-x/core": "0.1.0-alpha.3"
+    "@poly-x/core": "0.1.0-alpha.5"
   },
   "peerDependencies": {
     "react": ">=18",