@plumile/backoffice-react 0.2.3 → 0.2.6

package/README.md

@@ -71,6 +71,9 @@ packages.
 - `AuthRefreshNotice` keeps the backoffice session-refresh subscription and
   fixed positioning in this package, while delegating its visual notice surface
   to `InlineBanner` from `@plumile/ui`.
+- `TotpQrCode` requires a localized `title` so the generated QR image has an
+  accessible name. The surrounding enrollment flow must also display the TOTP
+  secret as a manual alternative for users who cannot scan the image.
 
 ### Hooks and backoffice helpers
 
@@ -124,12 +127,15 @@ only helpers tied to backoffice mutations, connections, and typed data.
 
 Backoffice React no longer exports generic toolbar or detail-header wrappers.
 Use `BackofficeToolbar`, `BackofficeListFilterToolbar`,
-`BackofficeListFooter`, and `BackofficePageHeader` from `@plumile/ui` for
+`BackofficeListFooter`, and `PageHeader` from `@plumile/ui` for
 visual composition. The entity-list scaffold delegates its filter trigger,
 active chips, searchable drawer, reset behavior, and session-scoped drawer
 state to `BackofficeListFilterToolbar`; this package keeps the backoffice
 integration layer focused on manifests, routing, permissions, Relay, filters,
-and i18n.
+and i18n. The scaffold places its manual `BackofficeListFooter` inside the
+active record-list or virtualized-table scroll viewport and keeps the automatic
+IntersectionObserver sentinel separate, non-interactive, and hidden from the
+accessibility tree.
 
 Backoffice React also no longer exports the old generic detail wrappers and
 aliases: `BackofficeDetailField`, `BackofficeDetailSection`,
@@ -145,7 +151,7 @@ were removed without compatibility wrappers; use `AuditTimeline` and
 `TimelineEventRow` from `@plumile/ui` for visual timelines. Use the canonical
 components instead: `CopyableText`, `DataTable`, `MetricCard`,
 `MetricTileGroup`, `DashboardPanel`, `DashboardMetricGroup`,
-`DashboardQuickActions`, `DashboardStatusList`, `BackofficeKeyValueList`,
+`DashboardQuickActions`, `DashboardStatusList`, `PropertyList`,
 `BackofficeDetailField`, `BackofficeDetailSection`, `BackofficeScopeStack`,
 `BackofficeAuditMetadataPanel`, and `AuditTimeline` from `@plumile/ui`; direct
 React composition for empty/action/block wrappers; and
@@ -171,11 +177,16 @@ export function App(): JSX.Element {
       entityManifest={entityManifest}
       auth={auth}
       graphql={graphql}
+      theme={{ density: 'compact', defaultMode: 'system' }}
     />
   );
 }
 ```
 
+`theme` configures the single `BackofficeThemeProvider` owned by
+`BackofficeProvider`. It forwards mode, storage, theme classes, and density;
+applications should not wrap the provider in a second backoffice theme scope.
+
 ## Instrumentation
 
 `BackofficeProvider` forwards router instrumentations to the internal

package/lib/esm/auth/AuthRefreshNotice.js

@@ -1,29 +1,32 @@
 import { root as e } from "./authRefreshNotice.css.js";
 import { useSyncExternalStore as t } from "react";
 import { addAuthRefreshStateListener as n, getAuthRefreshState as r } from "@plumile/auth/shortAccessToken.js";
-import { InlineBanner as i } from "@plumile/ui/components/feedback/InlineBanner.js";
-import { cx as a } from "@plumile/ui/theme/tools.js";
+import { InlineBanner as i } from "@plumile/ui";
+import { cx as a } from "@plumile/ui/theme";
 import { jsx as o } from "react/jsx-runtime";
 //#region src/auth/AuthRefreshNotice.tsx
 var s = (e) => n(() => {
 	e();
-}), c = () => r(), l = () => t(s, c, c), u = ({ messages: t, className: n }) => {
-	let r = l();
-	return r.status === "temporarily_unavailable" ? /* @__PURE__ */ o(i, {
-		tone: "warning",
-		className: a(e, n),
-		role: "status",
-		ariaLive: "polite",
-		children: t.temporarilyUnavailable
-	}) : r.status === "session_expired" ? /* @__PURE__ */ o(i, {
-		tone: "danger",
-		className: a(e, n),
-		role: "status",
-		ariaLive: "polite",
-		children: t.sessionExpired
-	}) : null;
+}), c = () => r(), l = () => t(s, c, c), u = ({ messages: t, className: n, state: r }) => r.status === "temporarily_unavailable" ? /* @__PURE__ */ o(i, {
+	tone: "warning",
+	className: a(e, n),
+	role: "status",
+	"aria-live": "polite",
+	children: t.temporarilyUnavailable
+}) : r.status === "session_expired" ? /* @__PURE__ */ o(i, {
+	tone: "danger",
+	className: a(e, n),
+	role: "status",
+	"aria-live": "polite",
+	children: t.sessionExpired
+}) : null, d = (e) => {
+	let t = l();
+	return /* @__PURE__ */ o(u, {
+		...e,
+		state: t
+	});
 };
 //#endregion
-export { u as AuthRefreshNotice, u as default, l as useAuthRefreshStateSnapshot };
+export { d as AuthRefreshNotice, d as default, u as AuthRefreshNoticeView, l as useAuthRefreshStateSnapshot };
 
 //# sourceMappingURL=AuthRefreshNotice.js.map

package/lib/esm/auth/AuthRefreshNotice.js.map

@@ -1 +1 @@
-{"version":3,"file":"AuthRefreshNotice.js","names":[],"sources":["../../../src/auth/AuthRefreshNotice.tsx"],"sourcesContent":["import { useSyncExternalStore, type JSX } from 'react';\n\nimport { type AuthRefreshState } from '@plumile/auth/authRefreshState.js';\nimport {\n  addAuthRefreshStateListener,\n  getAuthRefreshState,\n} from '@plumile/auth/shortAccessToken.js';\nimport { InlineBanner } from '@plumile/ui/components/feedback/InlineBanner.js';\nimport { cx } from '@plumile/ui/theme/tools.js';\n\nimport * as styles from './authRefreshNotice.css.js';\n\nexport type AuthRefreshNoticeMessages = {\n  temporarilyUnavailable: string;\n  sessionExpired: string;\n};\n\nexport type AuthRefreshNoticeProps = {\n  messages: AuthRefreshNoticeMessages;\n  className?: string;\n};\n\nconst subscribe = (onStoreChange: () => void): (() => void) => {\n  return addAuthRefreshStateListener(() => {\n    onStoreChange();\n  });\n};\n\nconst getSnapshot = (): AuthRefreshState => {\n  return getAuthRefreshState();\n};\n\nexport const useAuthRefreshStateSnapshot = (): AuthRefreshState => {\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n};\n\nexport const AuthRefreshNotice = ({\n  messages,\n  className,\n}: AuthRefreshNoticeProps): JSX.Element | null => {\n  const state = useAuthRefreshStateSnapshot();\n\n  if (state.status === 'temporarily_unavailable') {\n    return (\n      <InlineBanner\n        tone=\"warning\"\n        className={cx(styles.root, className)}\n        role=\"status\"\n        ariaLive=\"polite\"\n      >\n        {messages.temporarilyUnavailable}\n      </InlineBanner>\n    );\n  }\n\n  if (state.status === 'session_expired') {\n    return (\n      <InlineBanner\n        tone=\"danger\"\n        className={cx(styles.root, className)}\n        role=\"status\"\n        ariaLive=\"polite\"\n      >\n        {messages.sessionExpired}\n      </InlineBanner>\n    );\n  }\n\n  return null;\n};\n\nexport default AuthRefreshNotice;\n"],"mappings":";;;;;;;AAsBA,IAAM,KAAa,MACV,QAAkC;CACvC,EAAc;AAChB,CAAC,GAGG,UACG,EAAoB,GAGhB,UACJ,EAAqB,GAAW,GAAa,CAAW,GAGpD,KAAqB,EAChC,aACA,mBACgD;CAChD,IAAM,IAAQ,EAA4B;CA4B1C,OA1BI,EAAM,WAAW,4BAEjB,kBAAC,GAAD;EACE,MAAK;EACL,WAAW,EAAG,GAAa,CAAS;EACpC,MAAK;EACL,UAAS;EAER,UAAA,EAAS;CACE,CAAA,IAId,EAAM,WAAW,oBAEjB,kBAAC,GAAD;EACE,MAAK;EACL,WAAW,EAAG,GAAa,CAAS;EACpC,MAAK;EACL,UAAS;EAER,UAAA,EAAS;CACE,CAAA,IAIX;AACT"}
+{"version":3,"file":"AuthRefreshNotice.js","names":[],"sources":["../../../src/auth/AuthRefreshNotice.tsx"],"sourcesContent":["import { useSyncExternalStore, type JSX } from 'react';\n\nimport { type AuthRefreshState } from '@plumile/auth/authRefreshState.js';\nimport {\n  addAuthRefreshStateListener,\n  getAuthRefreshState,\n} from '@plumile/auth/shortAccessToken.js';\nimport { InlineBanner } from '@plumile/ui';\nimport { cx } from '@plumile/ui/theme';\n\nimport * as styles from './authRefreshNotice.css.js';\n\nexport type AuthRefreshNoticeMessages = {\n  temporarilyUnavailable: string;\n  sessionExpired: string;\n};\n\nexport type AuthRefreshNoticeProps = {\n  messages: AuthRefreshNoticeMessages;\n  className?: string;\n};\n\nconst subscribe = (onStoreChange: () => void): (() => void) => {\n  return addAuthRefreshStateListener(() => {\n    onStoreChange();\n  });\n};\n\nconst getSnapshot = (): AuthRefreshState => {\n  return getAuthRefreshState();\n};\n\nexport const useAuthRefreshStateSnapshot = (): AuthRefreshState => {\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n};\n\ntype AuthRefreshNoticeViewProps = AuthRefreshNoticeProps & {\n  state: AuthRefreshState;\n};\n\n/** Story- and test-facing deterministic view; not exported from the package. */\nexport const AuthRefreshNoticeView = ({\n  messages,\n  className,\n  state,\n}: AuthRefreshNoticeViewProps): JSX.Element | null => {\n  if (state.status === 'temporarily_unavailable') {\n    return (\n      <InlineBanner\n        tone=\"warning\"\n        className={cx(styles.root, className)}\n        role=\"status\"\n        aria-live=\"polite\"\n      >\n        {messages.temporarilyUnavailable}\n      </InlineBanner>\n    );\n  }\n\n  if (state.status === 'session_expired') {\n    return (\n      <InlineBanner\n        tone=\"danger\"\n        className={cx(styles.root, className)}\n        role=\"status\"\n        aria-live=\"polite\"\n      >\n        {messages.sessionExpired}\n      </InlineBanner>\n    );\n  }\n\n  return null;\n};\n\nexport const AuthRefreshNotice = (\n  props: AuthRefreshNoticeProps,\n): JSX.Element | null => {\n  const state = useAuthRefreshStateSnapshot();\n  return <AuthRefreshNoticeView {...props} state={state} />;\n};\n\nexport default AuthRefreshNotice;\n"],"mappings":";;;;;;;AAsBA,IAAM,KAAa,MACV,QAAkC;CACvC,EAAc;AAChB,CAAC,GAGG,UACG,EAAoB,GAGhB,UACJ,EAAqB,GAAW,GAAa,CAAW,GAQpD,KAAyB,EACpC,aACA,cACA,eAEI,EAAM,WAAW,4BAEjB,kBAAC,GAAD;CACE,MAAK;CACL,WAAW,EAAG,GAAa,CAAS;CACpC,MAAK;CACL,aAAU;CAET,UAAA,EAAS;AACE,CAAA,IAId,EAAM,WAAW,oBAEjB,kBAAC,GAAD;CACE,MAAK;CACL,WAAW,EAAG,GAAa,CAAS;CACpC,MAAK;CACL,aAAU;CAET,UAAA,EAAS;AACE,CAAA,IAIX,MAGI,KACX,MACuB;CACvB,IAAM,IAAQ,EAA4B;CAC1C,OAAO,kBAAC,GAAD;EAAuB,GAAI;EAAc;CAAQ,CAAA;AAC1D"}

package/lib/esm/auth/TotpQrCode.js

@@ -1,7 +1,12 @@
 import { jsx as e } from "react/jsx-runtime";
 import { QRCode as t } from "react-qr-code";
 //#region src/auth/TotpQrCode.tsx
-function n({ secret: e, issuer: t, accountName: n, algorithm: r = "SHA1", digits: i = 6, period: a = 30 }) {
+var n = {
+	display: "block",
+	height: "auto",
+	maxWidth: "100%"
+};
+function r({ secret: e, issuer: t, accountName: n, algorithm: r = "SHA1", digits: i = 6, period: a = 30 }) {
 	let o = n ?? t, s = new URLSearchParams({
 		secret: e,
 		issuer: t,
@@ -11,21 +16,24 @@ function n({ secret: e, issuer: t, accountName: n, algorithm: r = "SHA1", digits
 	});
 	return `otpauth://totp/${encodeURIComponent(o)}?${s.toString()}`;
 }
-var r = ({ secret: r, issuer: i, accountName: a, otpauthUrl: o, size: s = 220, algorithm: c, digits: l, period: u }) => {
-	let d = o ?? n({
-		secret: r,
-		issuer: i,
-		accountName: a,
-		algorithm: c,
-		digits: l,
-		period: u
+var i = ({ secret: i, issuer: a, accountName: o, title: s, otpauthUrl: c, size: l = 220, algorithm: u, digits: d, period: f }) => {
+	let p = c ?? r({
+		secret: i,
+		issuer: a,
+		accountName: o,
+		algorithm: u,
+		digits: d,
+		period: f
 	});
 	return /* @__PURE__ */ e(t, {
-		value: d,
-		size: s
+		value: p,
+		size: l,
+		title: s,
+		role: "img",
+		style: n
 	});
 };
 //#endregion
-export { r as TotpQrCode, r as default, n as buildTotpOtpAuthUri };
+export { i as TotpQrCode, i as default, r as buildTotpOtpAuthUri };
 
 //# sourceMappingURL=TotpQrCode.js.map

package/lib/esm/auth/TotpQrCode.js.map

@@ -1 +1 @@
-{"version":3,"file":"TotpQrCode.js","names":[],"sources":["../../../src/auth/TotpQrCode.tsx"],"sourcesContent":["import type { JSX } from 'react';\nimport { QRCode } from 'react-qr-code';\n\nexport type BuildTotpOtpAuthUriOptions = {\n  secret: string;\n  issuer: string;\n  accountName?: string;\n  algorithm?: string;\n  digits?: number;\n  period?: number;\n};\n\nexport type TotpQrCodeProps = BuildTotpOtpAuthUriOptions & {\n  otpauthUrl?: string;\n  size?: number;\n};\n\n/**\n *\n */\nexport function buildTotpOtpAuthUri({\n  secret,\n  issuer,\n  accountName,\n  algorithm = 'SHA1',\n  digits = 6,\n  period = 30,\n}: BuildTotpOtpAuthUriOptions): string {\n  const label = accountName ?? issuer;\n  const params = new URLSearchParams({\n    secret,\n    issuer,\n    algorithm,\n    digits: String(digits),\n    period: String(period),\n  });\n\n  return `otpauth://totp/${encodeURIComponent(label)}?${params.toString()}`;\n}\n\nexport const TotpQrCode = ({\n  secret,\n  issuer,\n  accountName,\n  otpauthUrl,\n  size = 220,\n  algorithm,\n  digits,\n  period,\n}: TotpQrCodeProps): JSX.Element => {\n  const otpAuthUri =\n    otpauthUrl ??\n    buildTotpOtpAuthUri({\n      secret,\n      issuer,\n      accountName,\n      algorithm,\n      digits,\n      period,\n    });\n\n  return <QRCode value={otpAuthUri} size={size} />;\n};\n\nexport default TotpQrCode;\n"],"mappings":";;;AAoBA,SAAgB,EAAoB,EAClC,WACA,WACA,gBACA,eAAY,QACZ,YAAS,GACT,YAAS,MAC4B;CACrC,IAAM,IAAQ,KAAe,GACvB,IAAS,IAAI,gBAAgB;EACjC;EACA;EACA;EACA,QAAQ,OAAO,CAAM;EACrB,QAAQ,OAAO,CAAM;CACvB,CAAC;CAED,OAAO,kBAAkB,mBAAmB,CAAK,EAAE,GAAG,EAAO,SAAS;AACxE;AAEA,IAAa,KAAc,EACzB,WACA,WACA,gBACA,eACA,UAAO,KACP,cACA,WACA,gBACkC;CAClC,IAAM,IACJ,KACA,EAAoB;EAClB;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAEH,OAAO,kBAAC,GAAD;EAAQ,OAAO;EAAkB;CAAO,CAAA;AACjD"}
+{"version":3,"file":"TotpQrCode.js","names":[],"sources":["../../../src/auth/TotpQrCode.tsx"],"sourcesContent":["import type { CSSProperties, JSX } from 'react';\nimport { QRCode } from 'react-qr-code';\n\nconst responsiveQrCodeStyle: CSSProperties = {\n  display: 'block',\n  height: 'auto',\n  maxWidth: '100%',\n};\n\nexport type BuildTotpOtpAuthUriOptions = {\n  secret: string;\n  issuer: string;\n  accountName?: string;\n  algorithm?: string;\n  digits?: number;\n  period?: number;\n};\n\nexport type TotpQrCodeProps = BuildTotpOtpAuthUriOptions & {\n  /** Localized accessible name describing the QR code's purpose. */\n  title: string;\n  otpauthUrl?: string;\n  size?: number;\n};\n\n/**\n *\n */\nexport function buildTotpOtpAuthUri({\n  secret,\n  issuer,\n  accountName,\n  algorithm = 'SHA1',\n  digits = 6,\n  period = 30,\n}: BuildTotpOtpAuthUriOptions): string {\n  const label = accountName ?? issuer;\n  const params = new URLSearchParams({\n    secret,\n    issuer,\n    algorithm,\n    digits: String(digits),\n    period: String(period),\n  });\n\n  return `otpauth://totp/${encodeURIComponent(label)}?${params.toString()}`;\n}\n\nexport const TotpQrCode = ({\n  secret,\n  issuer,\n  accountName,\n  title,\n  otpauthUrl,\n  size = 220,\n  algorithm,\n  digits,\n  period,\n}: TotpQrCodeProps): JSX.Element => {\n  const otpAuthUri =\n    otpauthUrl ??\n    buildTotpOtpAuthUri({\n      secret,\n      issuer,\n      accountName,\n      algorithm,\n      digits,\n      period,\n    });\n\n  return (\n    <QRCode\n      value={otpAuthUri}\n      size={size}\n      title={title}\n      role=\"img\"\n      style={responsiveQrCodeStyle}\n    />\n  );\n};\n\nexport default TotpQrCode;\n"],"mappings":";;;AAGA,IAAM,IAAuC;CAC3C,SAAS;CACT,QAAQ;CACR,UAAU;AACZ;AAqBA,SAAgB,EAAoB,EAClC,WACA,WACA,gBACA,eAAY,QACZ,YAAS,GACT,YAAS,MAC4B;CACrC,IAAM,IAAQ,KAAe,GACvB,IAAS,IAAI,gBAAgB;EACjC;EACA;EACA;EACA,QAAQ,OAAO,CAAM;EACrB,QAAQ,OAAO,CAAM;CACvB,CAAC;CAED,OAAO,kBAAkB,mBAAmB,CAAK,EAAE,GAAG,EAAO,SAAS;AACxE;AAEA,IAAa,KAAc,EACzB,WACA,WACA,gBACA,UACA,eACA,UAAO,KACP,cACA,WACA,gBACkC;CAClC,IAAM,IACJ,KACA,EAAoB;EAClB;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAEH,OACE,kBAAC,GAAD;EACE,OAAO;EACD;EACC;EACP,MAAK;EACL,OAAO;CACR,CAAA;AAEL"}

package/lib/esm/auth/authRefreshNotice.css.js

@@ -1,5 +1,6 @@
+/* empty css                                 */
 //#region src/auth/authRefreshNotice.css.ts
-var e = "txvbqbjvh txvbqb2bm txvbqb1ih txvbqbjxf txvbqb164 txvbqbcqt txvbqbblp txvbqbc05 txvbqb18o";
+var e = "tc0xii0 txvbqbk67 txvbqb2mc txvbqb1iu txvbqb1lg txvbqb16f txvbqbbwf txvbqbcav txvbqb191";
 //#endregion
 export { e as root };
 

package/lib/esm/auth/authRefreshNotice.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"authRefreshNotice.css.js","names":[],"sources":["../../../src/auth/authRefreshNotice.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nexport const root = sprinkles({\n  position: 'fixed',\n  zIndex: 50,\n  left: 4,\n  right: 4,\n  bottom: 4,\n  maxWidth: 720,\n  marginX: 'auto',\n  marginY: 0,\n  boxShadow: 'lg',\n});\n"],"mappings":""}
+{"version":3,"file":"authRefreshNotice.css.js","names":[],"sources":["../../../src/auth/authRefreshNotice.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { sprinkles, vars } from '@plumile/ui/theme';\n\nexport const root = style([\n  sprinkles({\n    position: 'fixed',\n    zIndex: 50,\n    insetInlineStart: 4,\n    insetInlineEnd: 4,\n    bottom: 4,\n    marginX: 'auto',\n    marginY: 0,\n    boxShadow: 'lg',\n  }),\n  {\n    width: 'auto',\n    maxWidth: vars.maxWidth[720],\n  },\n]);\n"],"mappings":""}

package/lib/esm/auth/login/AuthPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"AuthPanel.js","names":[],"sources":["../../../../src/auth/login/AuthPanel.tsx"],"sourcesContent":["/* eslint-disable no-ternary */\nimport { type JSX, type ReactNode } from 'react';\n\nimport * as styles from './loginPage.css.js';\n\ntype Props = {\n  title?: string;\n  description?: string;\n  children: ReactNode;\n  footer?: ReactNode;\n};\n\nexport const AuthPanel = ({\n  title,\n  description,\n  children,\n  footer,\n}: Props): JSX.Element => {\n  return (\n    <div className={styles.panel}>\n      <div className={styles.block}>\n        {title != null ? <h2 className={styles.panelTitle}>{title}</h2> : null}\n        {description != null ? (\n          <p className={styles.helper}>{description}</p>\n        ) : null}\n        {children}\n        {footer != null ? <div className={styles.footer}>{footer}</div> : null}\n      </div>\n    </div>\n  );\n};\n\nexport default AuthPanel;\n"],"mappings":";;;AAYA,IAAa,KAAa,EACxB,UACA,gBACA,aACA,QAAA,QAGE,kBAAC,OAAD;CAAK,WAAW;CACd,UAAA,kBAAC,OAAD;EAAK,WAAW;EAAhB,UAAA;GACG,KAAS,OAAwD,OAAjD,kBAAC,MAAD;IAAI,WAAW;IAAoB,UAAA;GAAU,CAAA;GAC7D,KAAe,OAEZ,OADF,kBAAC,KAAD;IAAG,WAAW;IAAgB,UAAA;GAAe,CAAA;GAE9C;GACA,KAAU,OAAuD,OAAhD,kBAAC,OAAD;IAAK,WAAW;IAAgB,UAAA;GAAY,CAAA;EAC3D;;AACF,CAAA"}
+{"version":3,"file":"AuthPanel.js","names":[],"sources":["../../../../src/auth/login/AuthPanel.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport * as styles from './loginPage.css.js';\n\ntype Props = {\n  title?: string;\n  description?: string;\n  children: ReactNode;\n  footer?: ReactNode;\n};\n\nexport const AuthPanel = ({\n  title,\n  description,\n  children,\n  footer,\n}: Props): JSX.Element => {\n  return (\n    <div className={styles.panel}>\n      <div className={styles.block}>\n        {title != null ? <h2 className={styles.panelTitle}>{title}</h2> : null}\n        {description != null ? (\n          <p className={styles.helper}>{description}</p>\n        ) : null}\n        {children}\n        {footer != null ? <div className={styles.footer}>{footer}</div> : null}\n      </div>\n    </div>\n  );\n};\n\nexport default AuthPanel;\n"],"mappings":";;;AAWA,IAAa,KAAa,EACxB,UACA,gBACA,aACA,QAAA,QAGE,kBAAC,OAAD;CAAK,WAAW;CACd,UAAA,kBAAC,OAAD;EAAK,WAAW;EAAhB,UAAA;GACG,KAAS,OAAwD,OAAjD,kBAAC,MAAD;IAAI,WAAW;IAAoB,UAAA;GAAU,CAAA;GAC7D,KAAe,OAEZ,OADF,kBAAC,KAAD;IAAG,WAAW;IAAgB,UAAA;GAAe,CAAA;GAE9C;GACA,KAAU,OAAuD,OAAhD,kBAAC,OAAD;IAAK,WAAW;IAAgB,UAAA;GAAY,CAAA;EAC3D;;AACF,CAAA"}

package/lib/esm/auth/login/EmailCapturePanel.js

@@ -2,56 +2,54 @@ import { actionsRow as e, formSurface as t, helper as n, inlineLink as r } from
 import { AuthPanel as i } from "./AuthPanel.js";
 import { useBackofficeReactTranslation as a } from "../../i18n/useBackofficeReactTranslation.js";
 import { useCallback as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { Button as l } from "@plumile/ui/atomic/atoms/button/Button.js";
-import { FormError as u } from "@plumile/ui/atomic/molecules/form_error/FormError.js";
-import { FormField as d } from "@plumile/ui/atomic/molecules/form_field/FormField.js";
-import { Form as f } from "@plumile/ui/atomic/molecules/form/Form.js";
+import { Form as s, FormField as c } from "@plumile/ui";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { Button as d } from "@plumile/ui/button";
 //#region src/auth/login/EmailCapturePanel.tsx
-var p = ({ email: p, errorMessage: m, isLoading: h, onEmailChange: g, onContinue: _, onForgotPassword: v }) => {
-	let { t: y } = a(), b = o((e) => {
-		e.preventDefault(), _();
-	}, [_]);
-	return /* @__PURE__ */ s(i, { children: /* @__PURE__ */ c(f, {
+var f = ({ email: f, errorMessage: p, isLoading: m, onEmailChange: h, onContinue: g, onForgotPassword: _ }) => {
+	let { t: v } = a(), y = o((e) => {
+		e.preventDefault(), g();
+	}, [g]);
+	return /* @__PURE__ */ l(i, { children: /* @__PURE__ */ u(s, {
 		className: t,
-		onSubmit: b,
+		onSubmit: y,
 		initialFocus: "first-form-control",
 		children: [
-			/* @__PURE__ */ s("p", {
+			/* @__PURE__ */ l("p", {
 				className: n,
-				children: y("auth.emailCapture.description")
+				children: v("auth.emailCapture.description")
 			}),
-			m != null && /* @__PURE__ */ s(u, { children: m }),
-			/* @__PURE__ */ s(d, {
-				label: y("auth.emailCapture.emailLabel"),
+			/* @__PURE__ */ l(c, {
+				label: v("auth.emailCapture.emailLabel"),
+				error: p,
 				name: "email",
 				type: "email",
-				value: p,
+				value: f,
 				onChange: (e) => {
-					g(e.target.value);
+					h(e.target.value);
 				},
-				placeholder: y("auth.emailCapture.emailPlaceholder"),
+				placeholder: v("auth.emailCapture.emailPlaceholder"),
 				autoComplete: "email",
 				required: !0
 			}),
-			/* @__PURE__ */ c("div", {
+			/* @__PURE__ */ u("div", {
 				className: e,
-				children: [/* @__PURE__ */ s(l, {
+				children: [/* @__PURE__ */ l(d, {
 					type: "submit",
-					variant: "primary",
-					isLoading: h,
-					children: y("auth.emailCapture.continue")
-				}), /* @__PURE__ */ s("button", {
+					variant: "solid",
+					loading: m,
+					children: v("auth.emailCapture.continue")
+				}), /* @__PURE__ */ l("button", {
 					type: "button",
 					className: r,
-					onClick: v,
-					children: y("auth.emailCapture.forgotPassword")
+					onClick: _,
+					children: v("auth.emailCapture.forgotPassword")
 				})]
 			})
 		]
 	}) });
 };
 //#endregion
-export { p as EmailCapturePanel };
+export { f as EmailCapturePanel };
 
 //# sourceMappingURL=EmailCapturePanel.js.map

package/lib/esm/auth/login/EmailCapturePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmailCapturePanel.js","names":[],"sources":["../../../../src/auth/login/EmailCapturePanel.tsx"],"sourcesContent":["import { useCallback, type FormEvent, type JSX } from 'react';\nimport { useBackofficeReactTranslation } from '../../i18n/useBackofficeReactTranslation.js';\n\nimport { Button } from '@plumile/ui/atomic/atoms/button/Button.js';\nimport { FormError } from '@plumile/ui/atomic/molecules/form_error/FormError.js';\nimport { FormField } from '@plumile/ui/atomic/molecules/form_field/FormField.js';\nimport { Form } from '@plumile/ui/atomic/molecules/form/Form.js';\n\nimport { AuthPanel } from './AuthPanel.js';\nimport * as styles from './loginPage.css.js';\n\ntype Props = {\n  email: string;\n  errorMessage: string | null;\n  isLoading: boolean;\n  onEmailChange: (value: string) => void;\n  onContinue: () => void;\n  onForgotPassword: () => void;\n};\n\nexport const EmailCapturePanel = ({\n  email,\n  errorMessage,\n  isLoading,\n  onEmailChange,\n  onContinue,\n  onForgotPassword,\n}: Props): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const handleSubmit = useCallback(\n    (event: FormEvent<HTMLFormElement>) => {\n      event.preventDefault();\n      onContinue();\n    },\n    [onContinue],\n  );\n\n  return (\n    <AuthPanel>\n      <Form\n        className={styles.formSurface}\n        onSubmit={handleSubmit}\n        initialFocus=\"first-form-control\"\n      >\n        <p className={styles.helper}>{t('auth.emailCapture.description')}</p>\n        {errorMessage != null && <FormError>{errorMessage}</FormError>}\n        <FormField\n          label={t('auth.emailCapture.emailLabel')}\n          name=\"email\"\n          type=\"email\"\n          value={email}\n          onChange={(event) => {\n            onEmailChange(event.target.value);\n          }}\n          placeholder={t('auth.emailCapture.emailPlaceholder')}\n          autoComplete=\"email\"\n          required\n        />\n        <div className={styles.actionsRow}>\n          <Button type=\"submit\" variant=\"primary\" isLoading={isLoading}>\n            {t('auth.emailCapture.continue')}\n          </Button>\n          <button\n            type=\"button\"\n            className={styles.inlineLink}\n            onClick={onForgotPassword}\n          >\n            {t('auth.emailCapture.forgotPassword')}\n          </button>\n        </div>\n      </Form>\n    </AuthPanel>\n  );\n};\n"],"mappings":";;;;;;;;;;AAoBA,IAAa,KAAqB,EAChC,UACA,iBACA,cACA,kBACA,eACA,0BACwB;CACxB,IAAM,EAAE,SAAM,EAA8B,GACtC,IAAe,GAClB,MAAsC;EAErC,AADA,EAAM,eAAe,GACrB,EAAW;CACb,GACA,CAAC,CAAU,CACb;CAEA,OACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;EACE,WAAW;EACX,UAAU;EACV,cAAa;EAHf,UAAA;GAKE,kBAAC,KAAD;IAAG,WAAW;IAAgB,UAAA,EAAE,+BAA+B;GAAK,CAAA;GACnE,KAAgB,QAAQ,kBAAC,GAAD,EAAA,UAAY,EAAwB,CAAA;GAC7D,kBAAC,GAAD;IACE,OAAO,EAAE,8BAA8B;IACvC,MAAK;IACL,MAAK;IACL,OAAO;IACP,WAAW,MAAU;KACnB,EAAc,EAAM,OAAO,KAAK;IAClC;IACA,aAAa,EAAE,oCAAoC;IACnD,cAAa;IACb,UAAA;GACD,CAAA;GACD,kBAAC,OAAD;IAAK,WAAW;IAAhB,UAAA,CACE,kBAAC,GAAD;KAAQ,MAAK;KAAS,SAAQ;KAAqB;KAChD,UAAA,EAAE,4BAA4B;IACzB,CAAA,GACR,kBAAC,UAAD;KACE,MAAK;KACL,WAAW;KACX,SAAS;KAER,UAAA,EAAE,kCAAkC;IAC/B,CAAA,CACL;;EACD;CACG,CAAA,EAAA,CAAA;AAEf"}
+{"version":3,"file":"EmailCapturePanel.js","names":[],"sources":["../../../../src/auth/login/EmailCapturePanel.tsx"],"sourcesContent":["import { useCallback, type FormEvent, type JSX } from 'react';\nimport { useBackofficeReactTranslation } from '../../i18n/useBackofficeReactTranslation.js';\n\nimport { Button } from '@plumile/ui/button';\nimport { FormField, Form } from '@plumile/ui';\n\nimport { AuthPanel } from './AuthPanel.js';\nimport * as styles from './loginPage.css.js';\n\ntype Props = {\n  email: string;\n  errorMessage: string | null;\n  isLoading: boolean;\n  onEmailChange: (value: string) => void;\n  onContinue: () => void;\n  onForgotPassword: () => void;\n};\n\nexport const EmailCapturePanel = ({\n  email,\n  errorMessage,\n  isLoading,\n  onEmailChange,\n  onContinue,\n  onForgotPassword,\n}: Props): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const handleSubmit = useCallback(\n    (event: FormEvent<HTMLFormElement>) => {\n      event.preventDefault();\n      onContinue();\n    },\n    [onContinue],\n  );\n\n  return (\n    <AuthPanel>\n      <Form\n        className={styles.formSurface}\n        onSubmit={handleSubmit}\n        initialFocus=\"first-form-control\"\n      >\n        <p className={styles.helper}>{t('auth.emailCapture.description')}</p>\n        <FormField\n          label={t('auth.emailCapture.emailLabel')}\n          error={errorMessage}\n          name=\"email\"\n          type=\"email\"\n          value={email}\n          onChange={(event) => {\n            onEmailChange(event.target.value);\n          }}\n          placeholder={t('auth.emailCapture.emailPlaceholder')}\n          autoComplete=\"email\"\n          required\n        />\n        <div className={styles.actionsRow}>\n          <Button type=\"submit\" variant=\"solid\" loading={isLoading}>\n            {t('auth.emailCapture.continue')}\n          </Button>\n          <button\n            type=\"button\"\n            className={styles.inlineLink}\n            onClick={onForgotPassword}\n          >\n            {t('auth.emailCapture.forgotPassword')}\n          </button>\n        </div>\n      </Form>\n    </AuthPanel>\n  );\n};\n"],"mappings":";;;;;;;;AAkBA,IAAa,KAAqB,EAChC,UACA,iBACA,cACA,kBACA,eACA,0BACwB;CACxB,IAAM,EAAE,SAAM,EAA8B,GACtC,IAAe,GAClB,MAAsC;EAErC,AADA,EAAM,eAAe,GACrB,EAAW;CACb,GACA,CAAC,CAAU,CACb;CAEA,OACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;EACE,WAAW;EACX,UAAU;EACV,cAAa;EAHf,UAAA;GAKE,kBAAC,KAAD;IAAG,WAAW;IAAgB,UAAA,EAAE,+BAA+B;GAAK,CAAA;GACpE,kBAAC,GAAD;IACE,OAAO,EAAE,8BAA8B;IACvC,OAAO;IACP,MAAK;IACL,MAAK;IACL,OAAO;IACP,WAAW,MAAU;KACnB,EAAc,EAAM,OAAO,KAAK;IAClC;IACA,aAAa,EAAE,oCAAoC;IACnD,cAAa;IACb,UAAA;GACD,CAAA;GACD,kBAAC,OAAD;IAAK,WAAW;IAAhB,UAAA,CACE,kBAAC,GAAD;KAAQ,MAAK;KAAS,SAAQ;KAAQ,SAAS;KAC5C,UAAA,EAAE,4BAA4B;IACzB,CAAA,GACR,kBAAC,UAAD;KACE,MAAK;KACL,WAAW;KACX,SAAS;KAER,UAAA,EAAE,kCAAkC;IAC/B,CAAA,CACL;;EACD;CACG,CAAA,EAAA,CAAA;AAEf"}

package/lib/esm/auth/login/LoginFlow.js

@@ -6,8 +6,8 @@ import { PasskeyLoginForm as i } from "./PasskeyLoginForm.js";
 import { MethodChooser as a } from "./MethodChooser.js";
 import { PasswordLoginPanel as o } from "./PasswordLoginPanel.js";
 import { useCallback as s, useEffect as c, useMemo as l, useRef as u, useState as d } from "react";
-import { jsx as f } from "react/jsx-runtime";
-import { AuthLayout as p } from "@plumile/ui/atomic/templates/auth_layout/AuthLayout.js";
+import { AuthLayout as f } from "@plumile/ui";
+import { jsx as p } from "react/jsx-runtime";
 //#region src/auth/login/LoginFlow.tsx
 var m = ({ auth: m, oidcProviders: h, onLoginSuccess: g, onForgotPassword: _ }) => {
 	let { t: v } = t(), [y, b] = d(""), [x, S] = d([]), [C, w] = d(null), [T, E] = d("email"), [D, O] = d(!1), [k, A] = d(null), j = u(!0), M = l(() => ({
@@ -17,7 +17,7 @@ var m = ({ auth: m, oidcProviders: h, onLoginSuccess: g, onForgotPassword: _ })
 			return b(e), S(t.methods), w(t.lockedUntil), t;
 		}
 	}), [m]), N = s(({ force: e } = { force: !1 }) => {
-		!e && m.nextStep === "TOTP" || g();
+		(e || m.nextStep !== "TOTP") && g();
 	}, [m.nextStep, g]), P = m.nextStep === "TOTP" || T === "mfa", F = v(P ? "auth.loginFlow.title.mfa" : "auth.loginFlow.title.default"), I = v(P ? "auth.loginFlow.subtitle.mfa" : "auth.loginFlow.subtitle.default"), L = s(async (e) => {
 		A(null);
 		try {
@@ -59,7 +59,7 @@ var m = ({ auth: m, oidcProviders: h, onLoginSuccess: g, onForgotPassword: _ })
 		T
 	]);
 	let R;
-	return R = P ? /* @__PURE__ */ f(e, { children: /* @__PURE__ */ f(r, {
+	return R = P ? /* @__PURE__ */ p(e, { children: /* @__PURE__ */ p(r, {
 		auth: m,
 		onSuccess: () => {
 			N({ force: !0 });
@@ -67,10 +67,10 @@ var m = ({ auth: m, oidcProviders: h, onLoginSuccess: g, onForgotPassword: _ })
 		onBack: () => {
 			m.reset(), E("email");
 		}
-	}) }) : T === "passkey" ? /* @__PURE__ */ f(e, {
+	}) }) : T === "passkey" ? /* @__PURE__ */ p(e, {
 		title: v("auth.loginFlow.passkey.title"),
 		description: v("auth.loginFlow.passkey.description", { email: y }),
-		children: /* @__PURE__ */ f(i, {
+		children: /* @__PURE__ */ p(i, {
 			auth: M,
 			onSuccess: N,
 			onShowMethods: () => {
@@ -79,9 +79,9 @@ var m = ({ auth: m, oidcProviders: h, onLoginSuccess: g, onForgotPassword: _ })
 			defaultEmail: y,
 			isAttemptingPasskey: m.isLoading
 		})
-	}) : T === "methods" ? /* @__PURE__ */ f(e, {
+	}) : T === "methods" ? /* @__PURE__ */ p(e, {
 		title: v("auth.loginFlow.methods.title"),
-		children: /* @__PURE__ */ f(a, {
+		children: /* @__PURE__ */ p(a, {
 			email: y,
 			methods: x,
 			lockedUntil: C,
@@ -96,13 +96,13 @@ var m = ({ auth: m, oidcProviders: h, onLoginSuccess: g, onForgotPassword: _ })
 				E("email");
 			}
 		})
-	}) : T === "password" ? /* @__PURE__ */ f(o, {
+	}) : T === "password" ? /* @__PURE__ */ p(o, {
 		auth: M,
 		defaultEmail: y,
 		onForgotPassword: _,
 		onSuccess: N,
 		providers: h
-	}) : /* @__PURE__ */ f(n, {
+	}) : /* @__PURE__ */ p(n, {
 		email: y,
 		errorMessage: k,
 		isLoading: m.isLoading,
@@ -118,7 +118,7 @@ var m = ({ auth: m, oidcProviders: h, onLoginSuccess: g, onForgotPassword: _ })
 			L(e).catch(() => {});
 		},
 		onForgotPassword: _
-	}), /* @__PURE__ */ f(p, {
+	}), /* @__PURE__ */ p(f, {
 		title: F,
 		subtitle: I,
 		children: R

package/lib/esm/auth/login/LoginFlow.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoginFlow.js","names":[],"sources":["../../../../src/auth/login/LoginFlow.tsx"],"sourcesContent":["/* eslint-disable no-ternary */\nimport {\n  type JSX,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useBackofficeReactTranslation } from '../../i18n/useBackofficeReactTranslation.js';\n\nimport { AuthLayout } from '@plumile/ui/atomic/templates/auth_layout/AuthLayout.js';\n\nimport type {\n  AuthMethod,\n  OidcProviderKind,\n} from '../../modules/sharedSchemaTypes.js';\nimport type { UseAuthReturn } from '../../hooks/useAuth.js';\n\nimport { MfaChallengeForm } from './MfaChallengeForm.js';\nimport { PasskeyLoginForm } from './PasskeyLoginForm.js';\nimport { MethodChooser } from './MethodChooser.js';\nimport { AuthPanel } from './AuthPanel.js';\nimport { EmailCapturePanel } from './EmailCapturePanel.js';\nimport { PasswordLoginPanel } from './PasswordLoginPanel.js';\n\nexport type LoginFlowProps = {\n  auth: UseAuthReturn;\n  oidcProviders: readonly OidcProviderKind[];\n  onLoginSuccess: () => void;\n  onForgotPassword: () => void;\n};\n\ntype View = 'email' | 'passkey' | 'methods' | 'password' | 'mfa';\n\nexport const LoginFlow = ({\n  auth,\n  oidcProviders,\n  onLoginSuccess,\n  onForgotPassword,\n}: LoginFlowProps): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const [email, setEmail] = useState('');\n  const [methods, setMethods] = useState<readonly AuthMethod[]>([]);\n  const [lockedUntil, setLockedUntil] = useState<string | null>(null);\n  const [view, setView] = useState<View>('email');\n  const [hasTriedPasskey, setHasTriedPasskey] = useState(false);\n  const [localError, setLocalError] = useState<string | null>(null);\n  const passkeyAttemptActive = useRef(true);\n\n  const loginAdapter = useMemo(() => {\n    return {\n      ...auth,\n      beginAuthentication: async (inputEmail: string) => {\n        const result = await auth.beginAuthentication(inputEmail);\n        setEmail(inputEmail);\n        setMethods(result.methods);\n        setLockedUntil(result.lockedUntil);\n        return result;\n      },\n    };\n  }, [auth]);\n\n  const handleLoginSuccess = useCallback(\n    ({ force } = { force: false }) => {\n      if (!force && auth.nextStep === 'TOTP') {\n        return;\n      }\n      onLoginSuccess();\n    },\n    [auth.nextStep, onLoginSuccess],\n  );\n\n  const isMfaStep = auth.nextStep === 'TOTP' || view === 'mfa';\n  const title = isMfaStep\n    ? t('auth.loginFlow.title.mfa')\n    : t('auth.loginFlow.title.default');\n  const subtitle = isMfaStep\n    ? t('auth.loginFlow.subtitle.mfa')\n    : t('auth.loginFlow.subtitle.default');\n\n  const startFlowForEmail = useCallback(\n    async (inputEmail: string) => {\n      setLocalError(null);\n      try {\n        const trimmed = inputEmail.trim();\n        const result = await auth.beginAuthentication(trimmed);\n        setEmail(trimmed);\n        setMethods(result.methods);\n        setLockedUntil(result.lockedUntil);\n        const hasPasskey = result.methods.some((method) => {\n          return method === 'PASSKEY';\n        });\n\n        if (hasPasskey) {\n          setView('passkey');\n        } else if (result.methods.includes('PASSWORD')) {\n          setView('password');\n        } else {\n          setView('methods');\n        }\n      } catch {\n        setLocalError(t('auth.loginFlow.errors.tryAgain'));\n      }\n    },\n    [auth, t],\n  );\n\n  useEffect(() => {\n    passkeyAttemptActive.current = true;\n    const trimmedEmail = email.trim();\n    const shouldAttempt =\n      view === 'passkey' && !hasTriedPasskey && trimmedEmail !== '';\n\n    if (shouldAttempt) {\n      setHasTriedPasskey(true);\n      const runPasskeyLogin = async () => {\n        try {\n          const status = await loginAdapter.loginWithPasskey({\n            email: trimmedEmail,\n          });\n\n          if (!passkeyAttemptActive.current) {\n            return;\n          }\n\n          if (status === 'success') {\n            handleLoginSuccess();\n            return;\n          }\n\n          if (status === 'mfa-required') {\n            setView('mfa');\n            return;\n          }\n\n          setView('methods');\n          setLocalError(t('auth.loginFlow.errors.passkeyUnavailable'));\n        } catch {\n          if (!passkeyAttemptActive.current) {\n            return;\n          }\n\n          setLocalError(t('auth.loginFlow.errors.passkeyUnavailable'));\n          setView('methods');\n        }\n      };\n      runPasskeyLogin().catch(() => {\n        // Errors are handled inside runPasskeyLogin; ignore any unexpected rethrow.\n      });\n    }\n\n    return () => {\n      passkeyAttemptActive.current = false;\n    };\n  }, [email, handleLoginSuccess, hasTriedPasskey, loginAdapter, t, view]);\n\n  let content: JSX.Element;\n\n  if (isMfaStep) {\n    content = (\n      <AuthPanel>\n        <MfaChallengeForm\n          auth={auth}\n          onSuccess={() => {\n            handleLoginSuccess({ force: true });\n          }}\n          onBack={() => {\n            auth.reset();\n            setView('email');\n          }}\n        />\n      </AuthPanel>\n    );\n  } else if (view === 'passkey') {\n    content = (\n      <AuthPanel\n        title={t('auth.loginFlow.passkey.title')}\n        description={t('auth.loginFlow.passkey.description', { email })}\n      >\n        <PasskeyLoginForm\n          auth={loginAdapter}\n          onSuccess={handleLoginSuccess}\n          onShowMethods={() => {\n            setView('methods');\n          }}\n          defaultEmail={email}\n          isAttemptingPasskey={auth.isLoading}\n        />\n      </AuthPanel>\n    );\n  } else if (view === 'methods') {\n    content = (\n      <AuthPanel title={t('auth.loginFlow.methods.title')}>\n        <MethodChooser\n          email={email}\n          methods={methods}\n          lockedUntil={lockedUntil}\n          onSelect={(method) => {\n            if (method === 'PASSKEY') {\n              setView('passkey');\n              return;\n            }\n            if (method === 'PASSWORD') {\n              setView('password');\n            }\n          }}\n          onBack={() => {\n            setView('email');\n          }}\n        />\n      </AuthPanel>\n    );\n  } else if (view === 'password') {\n    content = (\n      <PasswordLoginPanel\n        auth={loginAdapter}\n        defaultEmail={email}\n        onForgotPassword={onForgotPassword}\n        onSuccess={handleLoginSuccess}\n        providers={oidcProviders}\n      />\n    );\n  } else {\n    // email capture only\n    content = (\n      <EmailCapturePanel\n        email={email}\n        errorMessage={localError}\n        isLoading={auth.isLoading}\n        onEmailChange={(value) => {\n          setEmail(value);\n          setLocalError(null);\n        }}\n        onContinue={() => {\n          const trimmed = email.trim();\n          if (trimmed === '') {\n            setLocalError(t('auth.loginFlow.errors.emailRequired'));\n            return;\n          }\n          startFlowForEmail(trimmed).catch(() => {\n            // startFlowForEmail handles its own errors.\n          });\n        }}\n        onForgotPassword={onForgotPassword}\n      />\n    );\n  }\n\n  return (\n    <AuthLayout title={title} subtitle={subtitle}>\n      {content}\n    </AuthLayout>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"LoginFlow.js","names":[],"sources":["../../../../src/auth/login/LoginFlow.tsx"],"sourcesContent":["import {\n  type JSX,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useBackofficeReactTranslation } from '../../i18n/useBackofficeReactTranslation.js';\n\nimport { AuthLayout } from '@plumile/ui';\n\nimport type {\n  AuthMethod,\n  OidcProviderKind,\n} from '../../modules/sharedSchemaTypes.js';\nimport type { UseAuthReturn } from '../../hooks/useAuth.js';\n\nimport { MfaChallengeForm } from './MfaChallengeForm.js';\nimport { PasskeyLoginForm } from './PasskeyLoginForm.js';\nimport { MethodChooser } from './MethodChooser.js';\nimport { AuthPanel } from './AuthPanel.js';\nimport { EmailCapturePanel } from './EmailCapturePanel.js';\nimport { PasswordLoginPanel } from './PasswordLoginPanel.js';\n\nexport type LoginFlowProps = {\n  auth: UseAuthReturn;\n  oidcProviders: readonly OidcProviderKind[];\n  onLoginSuccess: () => void;\n  onForgotPassword: () => void;\n};\n\ntype View = 'email' | 'passkey' | 'methods' | 'password' | 'mfa';\n\nexport const LoginFlow = ({\n  auth,\n  oidcProviders,\n  onLoginSuccess,\n  onForgotPassword,\n}: LoginFlowProps): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const [email, setEmail] = useState('');\n  const [methods, setMethods] = useState<readonly AuthMethod[]>([]);\n  const [lockedUntil, setLockedUntil] = useState<string | null>(null);\n  const [view, setView] = useState<View>('email');\n  const [hasTriedPasskey, setHasTriedPasskey] = useState(false);\n  const [localError, setLocalError] = useState<string | null>(null);\n  const passkeyAttemptActive = useRef(true);\n\n  const loginAdapter = useMemo(() => {\n    return {\n      ...auth,\n      beginAuthentication: async (inputEmail: string) => {\n        const result = await auth.beginAuthentication(inputEmail);\n        setEmail(inputEmail);\n        setMethods(result.methods);\n        setLockedUntil(result.lockedUntil);\n        return result;\n      },\n    };\n  }, [auth]);\n\n  const handleLoginSuccess = useCallback(\n    ({ force } = { force: false }) => {\n      if (!force && auth.nextStep === 'TOTP') {\n        return;\n      }\n      onLoginSuccess();\n    },\n    [auth.nextStep, onLoginSuccess],\n  );\n\n  const isMfaStep = auth.nextStep === 'TOTP' || view === 'mfa';\n  const title = isMfaStep\n    ? t('auth.loginFlow.title.mfa')\n    : t('auth.loginFlow.title.default');\n  const subtitle = isMfaStep\n    ? t('auth.loginFlow.subtitle.mfa')\n    : t('auth.loginFlow.subtitle.default');\n\n  const startFlowForEmail = useCallback(\n    async (inputEmail: string) => {\n      setLocalError(null);\n      try {\n        const trimmed = inputEmail.trim();\n        const result = await auth.beginAuthentication(trimmed);\n        setEmail(trimmed);\n        setMethods(result.methods);\n        setLockedUntil(result.lockedUntil);\n        const hasPasskey = result.methods.some((method) => {\n          return method === 'PASSKEY';\n        });\n\n        if (hasPasskey) {\n          setView('passkey');\n        } else if (result.methods.includes('PASSWORD')) {\n          setView('password');\n        } else {\n          setView('methods');\n        }\n      } catch {\n        setLocalError(t('auth.loginFlow.errors.tryAgain'));\n      }\n    },\n    [auth, t],\n  );\n\n  useEffect(() => {\n    passkeyAttemptActive.current = true;\n    const trimmedEmail = email.trim();\n    const shouldAttempt =\n      view === 'passkey' && !hasTriedPasskey && trimmedEmail !== '';\n\n    if (shouldAttempt) {\n      setHasTriedPasskey(true);\n      const runPasskeyLogin = async () => {\n        try {\n          const status = await loginAdapter.loginWithPasskey({\n            email: trimmedEmail,\n          });\n\n          if (!passkeyAttemptActive.current) {\n            return;\n          }\n\n          if (status === 'success') {\n            handleLoginSuccess();\n            return;\n          }\n\n          if (status === 'mfa-required') {\n            setView('mfa');\n            return;\n          }\n\n          setView('methods');\n          setLocalError(t('auth.loginFlow.errors.passkeyUnavailable'));\n        } catch {\n          if (!passkeyAttemptActive.current) {\n            return;\n          }\n\n          setLocalError(t('auth.loginFlow.errors.passkeyUnavailable'));\n          setView('methods');\n        }\n      };\n      runPasskeyLogin().catch(() => {\n        // Errors are handled inside runPasskeyLogin; ignore any unexpected rethrow.\n      });\n    }\n\n    return () => {\n      passkeyAttemptActive.current = false;\n    };\n  }, [email, handleLoginSuccess, hasTriedPasskey, loginAdapter, t, view]);\n\n  let content: JSX.Element;\n\n  if (isMfaStep) {\n    content = (\n      <AuthPanel>\n        <MfaChallengeForm\n          auth={auth}\n          onSuccess={() => {\n            handleLoginSuccess({ force: true });\n          }}\n          onBack={() => {\n            auth.reset();\n            setView('email');\n          }}\n        />\n      </AuthPanel>\n    );\n  } else if (view === 'passkey') {\n    content = (\n      <AuthPanel\n        title={t('auth.loginFlow.passkey.title')}\n        description={t('auth.loginFlow.passkey.description', { email })}\n      >\n        <PasskeyLoginForm\n          auth={loginAdapter}\n          onSuccess={handleLoginSuccess}\n          onShowMethods={() => {\n            setView('methods');\n          }}\n          defaultEmail={email}\n          isAttemptingPasskey={auth.isLoading}\n        />\n      </AuthPanel>\n    );\n  } else if (view === 'methods') {\n    content = (\n      <AuthPanel title={t('auth.loginFlow.methods.title')}>\n        <MethodChooser\n          email={email}\n          methods={methods}\n          lockedUntil={lockedUntil}\n          onSelect={(method) => {\n            if (method === 'PASSKEY') {\n              setView('passkey');\n              return;\n            }\n            if (method === 'PASSWORD') {\n              setView('password');\n            }\n          }}\n          onBack={() => {\n            setView('email');\n          }}\n        />\n      </AuthPanel>\n    );\n  } else if (view === 'password') {\n    content = (\n      <PasswordLoginPanel\n        auth={loginAdapter}\n        defaultEmail={email}\n        onForgotPassword={onForgotPassword}\n        onSuccess={handleLoginSuccess}\n        providers={oidcProviders}\n      />\n    );\n  } else {\n    // email capture only\n    content = (\n      <EmailCapturePanel\n        email={email}\n        errorMessage={localError}\n        isLoading={auth.isLoading}\n        onEmailChange={(value) => {\n          setEmail(value);\n          setLocalError(null);\n        }}\n        onContinue={() => {\n          const trimmed = email.trim();\n          if (trimmed === '') {\n            setLocalError(t('auth.loginFlow.errors.emailRequired'));\n            return;\n          }\n          startFlowForEmail(trimmed).catch(() => {\n            // startFlowForEmail handles its own errors.\n          });\n        }}\n        onForgotPassword={onForgotPassword}\n      />\n    );\n  }\n\n  return (\n    <AuthLayout title={title} subtitle={subtitle}>\n      {content}\n    </AuthLayout>\n  );\n};\n"],"mappings":"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"}

package/lib/esm/auth/login/MethodChooser.js

@@ -1,42 +1,44 @@
 import { brandGhostButton as e, formSurface as t, fullWidth as n, helper as r, inlineLink as i, stack as a } from "./loginPage.css.js";
 import { useBackofficeReactTranslation as o } from "../../i18n/useBackofficeReactTranslation.js";
-import { cx as s } from "@plumile/ui/theme/tools.js";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { Trans as u } from "react-i18next";
-import { Button as d } from "@plumile/ui/atomic/atoms/button/Button.js";
-import { FormError as f } from "@plumile/ui/atomic/molecules/form_error/FormError.js";
+import { FormError as s } from "@plumile/ui";
+import { cx as c } from "@plumile/ui/theme";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { Trans as d } from "react-i18next";
+import { Button as f } from "@plumile/ui/button";
 //#region src/auth/login/MethodChooser.tsx
 var p = ({ email: p, methods: m, lockedUntil: h, onSelect: g, onBack: _ }) => {
 	let { t: v } = o(), y = m.length === 0, b = h == null ? v("auth.methodChooser.locked") : v("auth.methodChooser.lockedWithTime", { time: new Date(h).toLocaleString() }), x = m.map((t) => {
 		let r = t === "PASSKEY" ? v("auth.methodChooser.methods.passkey") : t === "PASSWORD" ? v("auth.methodChooser.methods.password") : v("auth.methodChooser.methods.other", { method: t.toLowerCase() });
-		return /* @__PURE__ */ c(d, {
+		return /* @__PURE__ */ l(f, {
 			type: "button",
-			variant: "secondary",
+			variant: "soft",
 			onClick: () => {
 				g(t);
 			},
-			className: s(n, e),
+			className: c(n, e),
+			tone: "neutral",
 			children: r
 		}, t);
 	});
-	return /* @__PURE__ */ c("div", {
+	return /* @__PURE__ */ l("div", {
 		className: t,
-		children: /* @__PURE__ */ l("div", {
+		children: /* @__PURE__ */ u("div", {
 			className: a,
 			children: [
-				/* @__PURE__ */ c("p", {
+				/* @__PURE__ */ l("p", {
 					className: r,
-					children: /* @__PURE__ */ c(u, {
+					children: /* @__PURE__ */ l(d, {
+						ns: "backofficeReact",
 						i18nKey: "auth.methodChooser.prompt",
 						values: { email: p },
-						components: { strong: /* @__PURE__ */ c("strong", {}) }
+						components: { strong: /* @__PURE__ */ l("strong", {}) }
 					})
 				}),
-				y ? /* @__PURE__ */ c(f, { children: b }) : null,
+				y ? /* @__PURE__ */ l(s, { children: b }) : null,
 				y ? null : x,
-				/* @__PURE__ */ c(d, {
+				/* @__PURE__ */ l(f, {
 					type: "button",
-					variant: "text",
+					variant: "plain",
 					onClick: _,
 					className: i,
 					children: v("auth.methodChooser.actions.back")

package/lib/esm/auth/login/MethodChooser.js.map

@@ -1 +1 @@
-{"version":3,"file":"MethodChooser.js","names":[],"sources":["../../../../src/auth/login/MethodChooser.tsx"],"sourcesContent":["/* eslint-disable no-ternary */\nimport { type JSX } from 'react';\nimport { Trans } from 'react-i18next';\nimport { Button } from '@plumile/ui/atomic/atoms/button/Button.js';\nimport { FormError } from '@plumile/ui/atomic/molecules/form_error/FormError.js';\nimport { cx } from '@plumile/ui/theme/tools.js';\n\nimport type { AuthMethod } from '../../modules/sharedSchemaTypes.js';\nimport { useBackofficeReactTranslation } from '../../i18n/useBackofficeReactTranslation.js';\n\nimport * as styles from './loginPage.css.js';\n\ntype Props = {\n  email: string;\n  methods: readonly AuthMethod[];\n  lockedUntil: string | null;\n  onSelect: (method: AuthMethod) => void;\n  onBack: () => void;\n};\n\nexport const MethodChooser = ({\n  email,\n  methods,\n  lockedUntil,\n  onSelect,\n  onBack,\n}: Props): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const isLocked = methods.length === 0;\n  const lockedMessage =\n    lockedUntil != null\n      ? t('auth.methodChooser.lockedWithTime', {\n          time: new Date(lockedUntil).toLocaleString(),\n        })\n      : t('auth.methodChooser.locked');\n\n  const methodButtons = methods.map((method) => {\n    const label =\n      method === 'PASSKEY'\n        ? t('auth.methodChooser.methods.passkey')\n        : method === 'PASSWORD'\n          ? t('auth.methodChooser.methods.password')\n          : t('auth.methodChooser.methods.other', {\n              method: method.toLowerCase(),\n            });\n    return (\n      <Button\n        key={method}\n        type=\"button\"\n        variant=\"secondary\"\n        onClick={() => {\n          onSelect(method);\n        }}\n        className={cx(styles.fullWidth, styles.brandGhostButton)}\n      >\n        {label}\n      </Button>\n    );\n  });\n\n  return (\n    <div className={styles.formSurface}>\n      <div className={styles.stack}>\n        <p className={styles.helper}>\n          <Trans\n            i18nKey=\"auth.methodChooser.prompt\"\n            values={{ email }}\n            components={{ strong: <strong /> }}\n          />\n        </p>\n        {isLocked ? <FormError>{lockedMessage}</FormError> : null}\n        {!isLocked ? methodButtons : null}\n        <Button\n          type=\"button\"\n          variant=\"text\"\n          onClick={onBack}\n          className={styles.inlineLink}\n        >\n          {t('auth.methodChooser.actions.back')}\n        </Button>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAoBA,IAAa,KAAiB,EAC5B,UACA,YACA,gBACA,aACA,gBACwB;CACxB,IAAM,EAAE,SAAM,EAA8B,GACtC,IAAW,EAAQ,WAAW,GAC9B,IACJ,KAAe,OAIX,EAAE,2BAA2B,IAH7B,EAAE,qCAAqC,EACrC,MAAM,IAAI,KAAK,CAAW,CAAC,CAAC,eAAe,EAC7C,CAAC,GAGD,IAAgB,EAAQ,KAAK,MAAW;EAC5C,IAAM,IACJ,MAAW,YACP,EAAE,oCAAoC,IACtC,MAAW,aACT,EAAE,qCAAqC,IACvC,EAAE,oCAAoC,EACpC,QAAQ,EAAO,YAAY,EAC7B,CAAC;EACT,OACE,kBAAC,GAAD;GAEE,MAAK;GACL,SAAQ;GACR,eAAe;IACb,EAAS,CAAM;GACjB;GACA,WAAW,EAAG,GAAkB,CAAuB;GAEtD,UAAA;EACK,GATD,CASC;CAEZ,CAAC;CAED,OACE,kBAAC,OAAD;EAAK,WAAW;EACd,UAAA,kBAAC,OAAD;GAAK,WAAW;GAAhB,UAAA;IACE,kBAAC,KAAD;KAAG,WAAW;KACZ,UAAA,kBAAC,GAAD;MACE,SAAQ;MACR,QAAQ,EAAE,SAAM;MAChB,YAAY,EAAE,QAAQ,kBAAC,UAAD,CAAS,CAAA,EAAE;KAClC,CAAA;IACA,CAAA;IACF,IAAW,kBAAC,GAAD,EAAA,UAAY,EAAyB,CAAA,IAAI;IACnD,IAA2B,OAAhB;IACb,kBAAC,GAAD;KACE,MAAK;KACL,SAAQ;KACR,SAAS;KACT,WAAW;KAEV,UAAA,EAAE,iCAAiC;IAC9B,CAAA;GACL;;CACF,CAAA;AAET"}
+{"version":3,"file":"MethodChooser.js","names":[],"sources":["../../../../src/auth/login/MethodChooser.tsx"],"sourcesContent":["import { type JSX } from 'react';\nimport { Trans } from 'react-i18next';\nimport { Button } from '@plumile/ui/button';\nimport { FormError } from '@plumile/ui';\nimport { cx } from '@plumile/ui/theme';\n\nimport type { AuthMethod } from '../../modules/sharedSchemaTypes.js';\nimport { useBackofficeReactTranslation } from '../../i18n/useBackofficeReactTranslation.js';\n\nimport * as styles from './loginPage.css.js';\n\ntype Props = {\n  email: string;\n  methods: readonly AuthMethod[];\n  lockedUntil: string | null;\n  onSelect: (method: AuthMethod) => void;\n  onBack: () => void;\n};\n\nexport const MethodChooser = ({\n  email,\n  methods,\n  lockedUntil,\n  onSelect,\n  onBack,\n}: Props): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const isLocked = methods.length === 0;\n  const lockedMessage =\n    lockedUntil != null\n      ? t('auth.methodChooser.lockedWithTime', {\n          time: new Date(lockedUntil).toLocaleString(),\n        })\n      : t('auth.methodChooser.locked');\n\n  const methodButtons = methods.map((method) => {\n    const label =\n      method === 'PASSKEY'\n        ? t('auth.methodChooser.methods.passkey')\n        : method === 'PASSWORD'\n          ? t('auth.methodChooser.methods.password')\n          : t('auth.methodChooser.methods.other', {\n              method: method.toLowerCase(),\n            });\n    return (\n      <Button\n        key={method}\n        type=\"button\"\n        variant=\"soft\"\n        onClick={() => {\n          onSelect(method);\n        }}\n        className={cx(styles.fullWidth, styles.brandGhostButton)}\n        tone=\"neutral\"\n      >\n        {label}\n      </Button>\n    );\n  });\n\n  return (\n    <div className={styles.formSurface}>\n      <div className={styles.stack}>\n        <p className={styles.helper}>\n          <Trans\n            ns=\"backofficeReact\"\n            i18nKey=\"auth.methodChooser.prompt\"\n            values={{ email }}\n            components={{ strong: <strong /> }}\n          />\n        </p>\n        {isLocked ? <FormError>{lockedMessage}</FormError> : null}\n        {!isLocked ? methodButtons : null}\n        <Button\n          type=\"button\"\n          variant=\"plain\"\n          onClick={onBack}\n          className={styles.inlineLink}\n        >\n          {t('auth.methodChooser.actions.back')}\n        </Button>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAmBA,IAAa,KAAiB,EAC5B,UACA,YACA,gBACA,aACA,gBACwB;CACxB,IAAM,EAAE,SAAM,EAA8B,GACtC,IAAW,EAAQ,WAAW,GAC9B,IACJ,KAAe,OAIX,EAAE,2BAA2B,IAH7B,EAAE,qCAAqC,EACrC,MAAM,IAAI,KAAK,CAAW,CAAC,CAAC,eAAe,EAC7C,CAAC,GAGD,IAAgB,EAAQ,KAAK,MAAW;EAC5C,IAAM,IACJ,MAAW,YACP,EAAE,oCAAoC,IACtC,MAAW,aACT,EAAE,qCAAqC,IACvC,EAAE,oCAAoC,EACpC,QAAQ,EAAO,YAAY,EAC7B,CAAC;EACT,OACE,kBAAC,GAAD;GAEE,MAAK;GACL,SAAQ;GACR,eAAe;IACb,EAAS,CAAM;GACjB;GACA,WAAW,EAAG,GAAkB,CAAuB;GACvD,MAAK;GAEJ,UAAA;EACK,GAVD,CAUC;CAEZ,CAAC;CAED,OACE,kBAAC,OAAD;EAAK,WAAW;EACd,UAAA,kBAAC,OAAD;GAAK,WAAW;GAAhB,UAAA;IACE,kBAAC,KAAD;KAAG,WAAW;KACZ,UAAA,kBAAC,GAAD;MACE,IAAG;MACH,SAAQ;MACR,QAAQ,EAAE,SAAM;MAChB,YAAY,EAAE,QAAQ,kBAAC,UAAD,CAAS,CAAA,EAAE;KAClC,CAAA;IACA,CAAA;IACF,IAAW,kBAAC,GAAD,EAAA,UAAY,EAAyB,CAAA,IAAI;IACnD,IAA2B,OAAhB;IACb,kBAAC,GAAD;KACE,MAAK;KACL,SAAQ;KACR,SAAS;KACT,WAAW;KAEV,UAAA,EAAE,iCAAiC;IAC9B,CAAA;GACL;;CACF,CAAA;AAET"}